:root {
    --primary: #1d4ed8;
    --primary-2: #7c3aed;
    --accent: #06b6d4;
    --dark: #0f172a;
    --text: #1e293b;
    --muted: #64748b;
    --bg: #f8fafc;
    --surface: rgba(255,255,255,.82);
    --white: #ffffff;
    --border: rgba(148,163,184,.22);
    --shadow: 0 20px 45px rgba(15, 23, 42, .08);
    --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at top left, rgba(29,78,216,.10), transparent 30%),
      radial-gradient(circle at top right, rgba(124,58,237,.10), transparent 25%),
      linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
.container { width: min(1180px, 92%); margin: 0 auto; }
.header {
    position: sticky; top: 0; z-index: 99;
    backdrop-filter: blur(16px);
    background: rgba(248,250,252,.78);
    border-bottom: 1px solid rgba(255,255,255,.55);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.nav nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav nav a { color: var(--muted); font-weight: 600; transition: .2s ease; }
.nav nav a:hover { color: var(--dark); }
.logo-mark { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; font-size:20px; box-shadow: 0 12px 28px rgba(29,78,216,.28); }
.logo a { display:flex; align-items:center; gap:12px; font-weight:800; font-size:22px; color:var(--dark); }
.logo small { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; }
main { overflow: hidden; }
.hero { padding: 82px 0 42px; position: relative; }
.hero-grid, .grid-2, .grid-3, .stats, .footer-grid, .feature-grid, .contact-grid, .dashboard-grid { display: grid; gap: 24px; }
.hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
.grid-2, .contact-grid { grid-template-columns: repeat(2, 1fr); }
.grid-3, .feature-grid { grid-template-columns: repeat(3, 1fr); }
.badge, .tag, .pill {
    display: inline-flex; align-items:center; gap:8px;
    padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.badge { background: rgba(29,78,216,.10); color: var(--primary); margin-bottom: 18px; }
.pill { background: rgba(255,255,255,.75); color: var(--text); border: 1px solid var(--border); }
.tag { background: rgba(6,182,212,.11); color: #0f766e; }
.hero h1, .section-head h1, .section-head h2, .card h3 { margin-top: 0; }
.hero h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.02; margin-bottom: 18px; color: var(--dark); }
.hero p, .muted, .section-head p, .card p, li { color: var(--muted); line-height: 1.7; }
.hero-copy { max-width: 650px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; padding: 13px 20px;
    border-radius: 14px; font-weight: 700; transition: .2s ease;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff;
    box-shadow: 0 16px 32px rgba(29,78,216,.25);
}
.btn:hover { transform: translateY(-1px); }
.btn-outline {
    background: rgba(255,255,255,.8); color: var(--dark); border: 1px solid var(--border);
    box-shadow: none;
}
.section { padding: 44px 0 84px; }
.section-alt { background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(241,245,249,.9)); border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); }
.section-head { margin-bottom: 32px; max-width: 760px; }
.section-head h1, .section-head h2 { font-size: clamp(28px, 3.5vw, 42px); margin-bottom: 12px; color: var(--dark); }
.card, .glass-card {
    background: var(--surface);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}
.hero-panel {
    padding: 28px;
    background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(29,78,216,.88));
    color: #fff;
    border-radius: 28px;
    box-shadow: 0 30px 60px rgba(15,23,42,.25);
}
.hero-panel p, .hero-panel li { color: rgba(255,255,255,.80); }
.hero-panel .stats-mini { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.hero-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px; padding: 18px;
}
.hero-stat strong { display:block; font-size: 30px; margin-bottom: 4px; }
.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.list-clean li::before { content: "✓"; color: #67e8f9; font-weight: 800; margin-right: 10px; }
.stat-boxes { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.stat-item {
    padding: 20px; border-radius: 18px; text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.78));
    border:1px solid var(--border);
}
.stat-item strong { display:block; font-size: 28px; color: var(--dark); margin-bottom: 8px; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { content: ""; position:absolute; inset:auto -35px -35px auto; width:110px; height:110px; border-radius:50%; background: radial-gradient(circle, rgba(29,78,216,.18), transparent 70%); }
.feature-card h3, .service-card h3, .project-card h3, .team-card h3 { margin-bottom: 10px; }
.service-card, .project-card, .team-card { position:relative; }
.service-card .service-number { font-size: 13px; color: var(--primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-meta { color: var(--primary-2); font-size: 13px; margin-bottom: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.kpi-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.kpi { padding:18px; border-radius:18px; background: rgba(255,255,255,.7); border:1px solid var(--border); }
.kpi strong { display:block; font-size: 28px; color: var(--dark); margin-bottom:6px; }
.cta-band {
    background: linear-gradient(135deg, #0f172a, #1e3a8a 68%, #312e81);
    color:#fff; border-radius: 30px; padding: 38px; display:grid; gap:18px; align-items:center;
    grid-template-columns: 1.2fr .8fr;
}
.cta-band p { color: rgba(255,255,255,.78); }
.footer { background: #0b1120; color: #cbd5e1; margin-top: 16px; }
.footer-grid { grid-template-columns: 1.2fr .9fr .9fr; padding: 60px 0 36px; }
.footer h3, .footer h4 { color: #fff; margin-top: 0; }
.footer a { color: #cbd5e1; }
.copyright { border-top: 1px solid rgba(255,255,255,.08); text-align:center; padding: 18px; color:#94a3b8; }
input, textarea, select {
    width:100%; padding: 13px 15px; border:1px solid rgba(148,163,184,.28);
    border-radius: 14px; margin-bottom: 14px; font-size: 14px; background: rgba(255,255,255,.92); color: var(--text);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color: rgba(29,78,216,.45); box-shadow: 0 0 0 4px rgba(29,78,216,.08); }
.alert { padding: 13px 15px; border-radius: 14px; margin-bottom: 16px; font-weight: 600; }
.success { background:#dcfce7; color:#166534; }
.error { background:#fee2e2; color:#991b1b; }
.table-wrap { overflow:auto; border-radius: 22px; box-shadow: var(--shadow); }
table { width:100%; border-collapse: collapse; background: rgba(255,255,255,.9); }
th, td { padding: 14px 16px; border-bottom:1px solid rgba(148,163,184,.16); text-align:left; font-size:14px; }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.sidebar-layout { display:grid; grid-template-columns: 290px 1fr; min-height:100vh; background: linear-gradient(180deg, #f8fafc, #eef2ff); }
.sidebar {
    background: linear-gradient(180deg, #0f172a, #111827);
    color:#fff; padding: 28px 22px; position: sticky; top:0; height:100vh;
}
.sidebar .brand-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.sidebar .brand-sub { color: rgba(255,255,255,.65); font-size: 13px; margin-bottom: 24px; display:block; }
.sidebar a { display:block; padding: 13px 15px; border-radius: 14px; margin-bottom: 8px; color: #cbd5e1; font-weight: 600; }
.sidebar a.active, .sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-content { padding: 28px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 26px; gap: 16px; }
.topbar h1 { margin:0; font-size: 30px; }
.stats, .dashboard-grid { grid-template-columns: repeat(4, 1fr); }
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 20px;
    background: radial-gradient(circle at top, rgba(29,78,216,.18), transparent 30%), linear-gradient(180deg, #eff6ff, #f8fafc);
}
.login-card { width:min(460px, 94%); }
.empty-state { padding: 30px; text-align:center; color: var(--muted); }
.inline-list { display:flex; flex-wrap:wrap; gap:10px; }
.page-hero { padding-top: 28px; }
.contact-box { display:grid; gap: 14px; }
.contact-item { padding:16px 18px; border-radius:18px; background: rgba(255,255,255,.8); border:1px solid var(--border); }
.small { font-size: 13px; color: var(--muted); }
@media (max-width: 960px) {
  .hero-grid, .grid-2, .grid-3, .feature-grid, .footer-grid, .stats, .sidebar-layout, .dashboard-grid, .kpi-row, .cta-band, .contact-grid { grid-template-columns: 1fr; }
  .nav { flex-direction: column; align-items: flex-start; }
  .hero { padding-top: 50px; }
  .sidebar { position: relative; height: auto; }
}