/* ══════════════════════════════════════════════════════════════
   GrowLytics Design System v2 — Premium Dark Theme
   Fonts: Syne (display) + DM Sans (body)
   ══════════════════════════════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --blue:        #3b82f6;
  --blue-bright: #60a5fa;
  --blue-dark:   #1d4ed8;
  --blue-dim:    rgba(59,130,246,.12);
  --blue-glow:   rgba(59,130,246,.25);

  /* Background layers */
  --bg:          #0a0e1a;
  --bg-1:        #0f1629;
  --bg-2:        #151d35;
  --bg-3:        #1a2440;
  --bg-card:     #111827;
  --bg-card-2:   #1a2332;

  /* Borders */
  --border:      rgba(255,255,255,.07);
  --border-bright: rgba(59,130,246,.3);

  /* Text */
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;
  --text-bright: #f8fafc;

  /* Accents */
  --green:       #10b981;
  --green-dim:   rgba(16,185,129,.12);
  --amber:       #f59e0b;
  --amber-dim:   rgba(245,158,11,.12);
  --purple:      #a855f7;
  --purple-dim:  rgba(168,85,247,.12);
  --red:         #ef4444;

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow-md:   0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.6);
  --shadow-blue: 0 0 40px rgba(59,130,246,.15);

  /* Fonts */
  --font-display:'Syne',sans-serif;
  --nav-h: 68px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 clamp(20px,4vw,48px) }
.section    { padding:clamp(72px,9vw,112px) 0 }

/* ── Typography ─────────────────────────────────────────────── */
.display-xl { font-family:var(--font-display); font-size:clamp(42px,6.5vw,76px); font-weight:800; line-height:1.04; letter-spacing:-.03em; color:var(--text-bright) }
.display-lg { font-family:var(--font-display); font-size:clamp(30px,4vw,48px); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--text-bright) }
.display-md { font-family:var(--font-display); font-size:clamp(24px,3vw,36px); font-weight:700; line-height:1.2; letter-spacing:-.015em; color:var(--text-bright) }
.text-xl    { font-size:clamp(17px,2vw,20px); line-height:1.65; color:var(--text-muted) }
.text-lg    { font-size:18px; line-height:1.65; color:var(--text-muted) }
.text-md    { font-size:15px; line-height:1.75; color:var(--text-dim) }
.eyebrow    { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright) }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:14px; font-weight:600; border-radius:var(--radius-full); cursor:pointer; transition:all .2s ease; border:none; text-decoration:none; white-space:nowrap; letter-spacing:.01em }
.btn-lg  { padding:14px 30px; font-size:15px }
.btn-md  { padding:10px 22px; font-size:14px }
.btn-sm  { padding:8px 16px; font-size:13px }

.btn-primary { background:var(--blue); color:#fff; box-shadow:0 0 0 0 var(--blue-glow) }
.btn-primary:hover { background:var(--blue-dark); box-shadow:0 0 24px var(--blue-glow); transform:translateY(-1px) }

.btn-ghost-white { background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border) }
.btn-ghost-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.15); transform:translateY(-1px) }

.btn-outline-blue { background:transparent; color:var(--blue-bright); border:1px solid var(--border-bright) }
.btn-outline-blue:hover { background:var(--blue-dim); transform:translateY(-1px) }

.btn svg, .btn-arrow { transition:transform .2s }
.btn:hover .btn-arrow { transform:translateX(3px) }

/* ── Navigation ─────────────────────────────────────────────── */
#nav { position:sticky; top:0; z-index:100; height:var(--nav-h); background:rgba(10,14,26,.85); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px) }
.nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--text-bright); letter-spacing:-.025em }
.nav-logo-mark { width:34px; height:34px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 16px rgba(59,130,246,.4) }
.nav-logo-mark svg { width:18px; height:18px }
.nav-logo .hl { color:var(--blue-bright) }
.nav-links { display:flex; align-items:center; gap:2px; flex:1; justify-content:center }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-muted); padding:7px 14px; border-radius:var(--radius-md); transition:all .15s }
.nav-links a:hover, .nav-links a.active { color:var(--text-bright); background:rgba(255,255,255,.06) }
.nav-cta { display:flex; align-items:center; gap:10px }
@media(max-width:768px){ .nav-links{display:none} }

/* ── Page Hero (inner pages) ─────────────────────────────────── */
.page-hero { background:var(--bg-1); border-bottom:1px solid var(--border); padding:clamp(56px,7vw,88px) 0; text-align:center }
.page-hero .eyebrow { margin-bottom:14px }
.page-hero h1 { margin-bottom:18px }
.page-hero p { max-width:560px; margin:0 auto; color:var(--text-muted) }

/* ── Section Header ──────────────────────────────────────────── */
.section-header { text-align:center; max-width:680px; margin:0 auto 56px }
.section-header .eyebrow { margin-bottom:14px }
.section-header h2 { margin-bottom:16px }
.section-header p { color:var(--text-muted) }

/* ── Cards ───────────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px }
.card:hover { border-color:rgba(59,130,246,.25); box-shadow:var(--shadow-blue) }

/* ── Badges / Tags ───────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-full) }
.badge-blue   { background:var(--blue-dim); color:var(--blue-bright); border:1px solid rgba(59,130,246,.2) }
.badge-green  { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,185,129,.2) }
.badge-amber  { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(245,158,11,.2) }
.badge-purple { background:var(--purple-dim); color:var(--purple); border:1px solid rgba(168,85,247,.2) }
.badge-muted  { background:rgba(255,255,255,.05); color:var(--text-dim); border:1px solid var(--border) }

/* ── Glow lines / decorative ─────────────────────────────────── */
.glow-line { height:1px; background:linear-gradient(90deg, transparent, var(--blue-bright), transparent); opacity:.4 }

/* ── Footer ──────────────────────────────────────────────────── */
#footer { background:var(--bg); border-top:1px solid var(--border); padding:64px 0 32px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px }
.footer-brand p { font-size:14px; color:var(--text-dim); line-height:1.75; margin-top:14px; max-width:240px }
.footer-col h3,.footer-col h4,.footer-col h5 { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:14px; letter-spacing:.08em; text-transform:uppercase }
.footer-col a { display:block; font-size:14px; color:var(--text-dim); margin-bottom:10px; transition:color .15s }
.footer-col a:hover { color:var(--text-bright) }
.footer-social { display:flex; gap:8px; margin-top:18px }
.social-btn { width:34px; height:34px; border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:all .15s }
.social-btn:hover { background:rgba(59,130,246,.15); border-color:var(--border-bright); color:var(--blue-bright) }
.social-btn svg { width:15px; height:15px }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--text-dim) }
.footer-bottom a:hover { color:var(--text-bright) }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ── Fade-up animations ───────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-up        { animation:fadeUp .6s ease both }
.delay-1        { animation-delay:.1s }
.delay-2        { animation-delay:.2s }
.delay-3        { animation-delay:.3s }
.delay-4        { animation-delay:.4s }

/* ── Utilities ───────────────────────────────────────────────── */
.text-blue   { color:var(--blue-bright) }
.text-green  { color:var(--green) }
.text-muted  { color:var(--text-muted) }
.text-center { text-align:center }
.mt-4  { margin-top:4px }
.mt-8  { margin-top:8px }
.mt-12 { margin-top:12px }
.mt-16 { margin-top:16px }
.mt-24 { margin-top:24px }

/* ── Nav dropdown ──────────────────────────────────────────── */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{display:flex;align-items:center;gap:5px;cursor:pointer}
.nav-dropdown-trigger svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-trigger svg,.nav-dropdown:focus-within .nav-dropdown-trigger svg{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:0;margin-top:10px;background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:8px;min-width:210px;box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;z-index:100}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu a{display:block;padding:9px 12px;border-radius:var(--radius-md);font-size:13.5px;color:var(--text-muted)}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.06);color:var(--text-bright)}
.nav-dropdown-menu a.active{color:var(--blue-bright);background:rgba(59,130,246,.08)}
.nav-dropdown-label{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 4px}
.nav-dropdown-divider{height:1px;background:var(--border);margin:6px 4px}
@media(max-width:768px){.nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;display:none;margin-top:0;padding-left:12px}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}}

/* ── Language selector ────────────────────────────────────── */
.nav-lang{position:relative;margin-right:4px}
.nav-lang-trigger{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-muted);padding:6px 8px;border-radius:var(--radius-md)}
.nav-lang-trigger:hover{background:rgba(255,255,255,.06);color:var(--text-bright)}
.nav-lang-menu{position:absolute;top:100%;right:0;margin-top:10px;background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:6px;min-width:150px;box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;z-index:100}
.nav-lang:hover .nav-lang-menu,.nav-lang:focus-within .nav-lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-lang-menu a{display:block;padding:8px 10px;border-radius:var(--radius-md);font-size:13px;color:var(--text-muted)}
.nav-lang-menu a:hover{background:rgba(255,255,255,.06);color:var(--text-bright)}
.nav-lang-menu a.active{color:var(--blue-bright)}

/* ── Theme toggle ─────────────────────────────────────────── */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all .2s}
.theme-toggle:hover{border-color:var(--border-bright);color:var(--text-bright)}
.theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:block}

/* ── Light theme overrides ────────────────────────────────── */
[data-theme="light"]{
  --bg:#f7f8fb; --bg-1:#eef0f5; --bg-2:#f0f2f7; --bg-card:#ffffff;
  --text-bright:#0f172a; --text-muted:#334155; --text-dim:#64748b;
  --border:#e2e8f0; --border-bright:#cbd5e1;
  --blue-dim:rgba(59,130,246,.1); --green-dim:rgba(16,185,129,.1); --purple-dim:rgba(168,85,247,.1);
}
[data-theme="light"] body{background:var(--bg);color:var(--text-muted)}
[data-theme="light"] .page-hero{background:var(--bg-1)}
[data-theme="light"] #nav{background:rgba(247,248,251,.85);backdrop-filter:blur(10px)}
[data-theme="light"] .btn-ghost{border-color:var(--border-bright);color:var(--text-muted)}
[data-theme="light"] .btn-ghost-white{border-color:var(--border-bright);color:var(--text-muted)}