/* ============================================================
   ALETA — AIRCST Public Site
   3 themes, switchable from admin: editorial-lab | studio-dark | editorial-dark
   Layout: digital-gravity-style edge-to-edge, dynamic-island nav, Bricolage+Manrope
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── Theme tokens (variables that change per theme) ───────── */
:root,
:root[data-theme="editorial-lab"],
body.theme-editorial-lab {
  --bg:           #F4F0E8;
  --bg-soft:      #EDE7DC;
  --surface:      #FFFFFF;
  --surface-2:    #F9F5EC;
  --text:         #0E1117;
  --muted:        #5A5751;
  --light:        #8E8A82;
  --border:       #E5DFD3;
  --border-soft:  #ECE7DA;
  --accent:       #E85A2E;
  --accent-2:     #C44819;
  --accent-fg:    #FFFFFF;
  --accent-soft:  rgba(232, 90, 46, 0.10);
  --accent-glow:  rgba(232, 90, 46, 0.28);
  --ink:          #0E1117;
  --ink-fg:       #F4F0E8;
  --shadow-sm:    0 1px 3px rgba(14,17,23,.06);
  --shadow:       0 8px 24px rgba(14,17,23,.08);
  --shadow-lg:    0 24px 60px rgba(14,17,23,.12);
  --pill-bg:      rgba(255,255,255,0.92);
  --pill-border:  rgba(14,17,23,0.10);
  --orb-a:        rgba(232, 90, 46, 0.20);
  --orb-b:        rgba(20, 60, 70, 0.12);
  --grid-line:    rgba(14, 17, 23, 0.05);
  --is-dark:      0;
}

:root[data-theme="studio-dark"],
body.theme-studio-dark {
  --bg:           #0A0A0A;
  --bg-soft:      #121212;
  --surface:      #161616;
  --surface-2:    #1F1F1F;
  --text:         #F5F2ED;
  --muted:        #9C988F;
  --light:        #6B6660;
  --border:       rgba(255, 255, 255, 0.08);
  --border-soft:  rgba(255, 255, 255, 0.04);
  --accent:       #D4FF55;
  --accent-2:     #A8D635;
  --accent-fg:    #0A0A0A;
  --accent-soft:  rgba(212, 255, 85, 0.12);
  --accent-glow:  rgba(212, 255, 85, 0.30);
  --ink:          #F5F2ED;
  --ink-fg:       #0A0A0A;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.5);
  --shadow:       0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.65);
  --pill-bg:      rgba(22,22,22,0.86);
  --pill-border:  rgba(255,255,255,0.10);
  --orb-a:        rgba(212, 255, 85, 0.18);
  --orb-b:        rgba(255, 84, 54, 0.14);
  --grid-line:    rgba(255, 255, 255, 0.04);
  --is-dark:      1;
}

:root[data-theme="editorial-dark"],
body.theme-editorial-dark {
  --bg:           #171B22;
  --bg-soft:      #1F242C;
  --surface:      #232934;
  --surface-2:    #2B313D;
  --text:         #F4EEDD;
  --muted:        #A39E91;
  --light:        #6E6A60;
  --border:       rgba(244, 238, 221, 0.10);
  --border-soft:  rgba(244, 238, 221, 0.05);
  --accent:       #F59E0B;
  --accent-2:     #D88300;
  --accent-fg:    #171B22;
  --accent-soft:  rgba(245, 158, 11, 0.12);
  --accent-glow:  rgba(245, 158, 11, 0.30);
  --ink:          #F4EEDD;
  --ink-fg:       #171B22;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.45);
  --shadow:       0 8px 24px rgba(0,0,0,.50);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.60);
  --pill-bg:      rgba(35,41,52,0.88);
  --pill-border:  rgba(244,238,221,0.10);
  --orb-a:        rgba(245, 158, 11, 0.16);
  --orb-b:        rgba(96, 130, 175, 0.14);
  --grid-line:    rgba(244, 238, 221, 0.04);
  --is-dark:      1;
}

:root[data-theme="nordic-mist"],
body.theme-nordic-mist {
  --bg:           #EEF1F5;
  --bg-soft:      #E5E9F0;
  --surface:      #FFFFFF;
  --surface-2:    #F5F8FB;
  --text:         #11283C;
  --muted:        #4A5C72;
  --light:        #8A95A5;
  --border:       #D4DAE3;
  --border-soft:  #DDE2EA;
  --accent:       #008B8B;
  --accent-2:     #006666;
  --accent-fg:    #FFFFFF;
  --accent-soft:  rgba(0, 139, 139, 0.12);
  --accent-glow:  rgba(0, 139, 139, 0.30);
  --ink:          #11283C;
  --ink-fg:       #EEF1F5;
  --shadow-sm:    0 1px 3px rgba(17,40,60,.06);
  --shadow:       0 8px 24px rgba(17,40,60,.10);
  --shadow-lg:    0 24px 60px rgba(17,40,60,.14);
  --pill-bg:      rgba(255,255,255,0.92);
  --pill-border:  rgba(17,40,60,0.10);
  --orb-a:        rgba(0, 139, 139, 0.18);
  --orb-b:        rgba(74, 92, 114, 0.12);
  --grid-line:    rgba(17, 40, 60, 0.05);
  --is-dark:      0;
}

:root[data-theme="royal-ink"],
body.theme-royal-ink {
  --bg:           #0E1A30;
  --bg-soft:      #142340;
  --surface:      #1B2C4D;
  --surface-2:    #243758;
  --text:         #F2E9D8;
  --muted:        #B5AB97;
  --light:        #7B7363;
  --border:       rgba(242, 233, 216, 0.10);
  --border-soft:  rgba(242, 233, 216, 0.05);
  --accent:       #D4A437;
  --accent-2:     #B0871D;
  --accent-fg:    #0E1A30;
  --accent-soft:  rgba(212, 164, 55, 0.14);
  --accent-glow:  rgba(212, 164, 55, 0.32);
  --ink:          #F2E9D8;
  --ink-fg:       #0E1A30;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow:       0 8px 24px rgba(0,0,0,.50);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.60);
  --pill-bg:      rgba(27,44,77,0.88);
  --pill-border:  rgba(242,233,216,0.10);
  --orb-a:        rgba(212, 164, 55, 0.16);
  --orb-b:        rgba(36, 55, 88, 0.30);
  --grid-line:    rgba(242, 233, 216, 0.04);
  --is-dark:      1;
}

:root[data-theme="forest-lab"],
body.theme-forest-lab {
  --bg:           #F0EEE5;
  --bg-soft:      #E7E5DA;
  --surface:      #FFFFFF;
  --surface-2:    #F8F7EE;
  --text:         #1A2B22;
  --muted:        #5A6B5F;
  --light:        #8E988D;
  --border:       #DEDCD0;
  --border-soft:  #E8E6DB;
  --accent:       #2F6E4D;
  --accent-2:     #1F4D33;
  --accent-fg:    #FFFFFF;
  --accent-soft:  rgba(47, 110, 77, 0.12);
  --accent-glow:  rgba(47, 110, 77, 0.28);
  --ink:          #1A2B22;
  --ink-fg:       #F0EEE5;
  --shadow-sm:    0 1px 3px rgba(26,43,34,.06);
  --shadow:       0 8px 24px rgba(26,43,34,.10);
  --shadow-lg:    0 24px 60px rgba(26,43,34,.14);
  --pill-bg:      rgba(255,255,255,0.92);
  --pill-border:  rgba(26,43,34,0.10);
  --orb-a:        rgba(47, 110, 77, 0.18);
  --orb-b:        rgba(90, 107, 95, 0.12);
  --grid-line:    rgba(26, 43, 34, 0.05);
  --is-dark:      0;
}

:root[data-theme="carbon-pro"],
body.theme-carbon-pro {
  --bg:           #16161A;
  --bg-soft:      #1F1F24;
  --surface:      #28282E;
  --surface-2:    #32323A;
  --text:         #F5F2EE;
  --muted:        #A09C95;
  --light:        #6B6862;
  --border:       rgba(245, 242, 238, 0.08);
  --border-soft:  rgba(245, 242, 238, 0.04);
  --accent:       #DC2626;
  --accent-2:     #B91C1C;
  --accent-fg:    #F5F2EE;
  --accent-soft:  rgba(220, 38, 38, 0.14);
  --accent-glow:  rgba(220, 38, 38, 0.32);
  --ink:          #F5F2EE;
  --ink-fg:       #16161A;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow:       0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.65);
  --pill-bg:      rgba(40,40,46,0.86);
  --pill-border:  rgba(255,255,255,0.10);
  --orb-a:        rgba(220, 38, 38, 0.16);
  --orb-b:        rgba(160, 156, 149, 0.10);
  --grid-line:    rgba(245, 242, 238, 0.04);
  --is-dark:      1;
}

:root[data-theme="aurora-glass"],
body.theme-aurora-glass {
  --bg:           #F4F1FB;
  --bg-soft:      #ECE7F5;
  --surface:      #FFFFFF;
  --surface-2:    #FAF7FF;
  --text:         #1A1B36;
  --muted:        #5A5879;
  --light:        #8E8CA8;
  --border:       #DBD5E7;
  --border-soft:  #E5E0EC;
  --accent:       #6366F1;
  --accent-2:     #4F46E5;
  --accent-fg:    #FFFFFF;
  --accent-soft:  rgba(99, 102, 241, 0.12);
  --accent-glow:  rgba(99, 102, 241, 0.30);
  --ink:          #1A1B36;
  --ink-fg:       #F4F1FB;
  --shadow-sm:    0 1px 3px rgba(26,27,54,.06);
  --shadow:       0 8px 24px rgba(26,27,54,.10);
  --shadow-lg:    0 24px 60px rgba(26,27,54,.14);
  --pill-bg:      rgba(255,255,255,0.92);
  --pill-border:  rgba(26,27,54,0.10);
  --orb-a:        rgba(99, 102, 241, 0.18);
  --orb-b:        rgba(168, 134, 232, 0.14);
  --grid-line:    rgba(26, 27, 54, 0.05);
  --is-dark:      0;
}

:root[data-theme="mono-tech"],
body.theme-mono-tech {
  --bg:           #FFFFFF;
  --bg-soft:      #F5F5F5;
  --surface:      #FFFFFF;
  --surface-2:    #FAFAFA;
  --text:         #0A0A0A;
  --muted:        #525252;
  --light:        #8E8E8E;
  --border:       #E5E5E5;
  --border-soft:  #EFEFEF;
  --accent:       #2563EB;
  --accent-2:     #1D4ED8;
  --accent-fg:    #FFFFFF;
  --accent-soft:  rgba(37, 99, 235, 0.10);
  --accent-glow:  rgba(37, 99, 235, 0.28);
  --ink:          #0A0A0A;
  --ink-fg:       #FFFFFF;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.04);
  --shadow:       0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.12);
  --pill-bg:      rgba(255,255,255,0.95);
  --pill-border:  rgba(0,0,0,0.10);
  --orb-a:        rgba(37, 99, 235, 0.14);
  --orb-b:        rgba(120, 130, 140, 0.08);
  --grid-line:    rgba(0, 0, 0, 0.04);
  --is-dark:      0;
}

:root[data-theme="solar-flare"], body.theme-solar-flare {
  --bg: #FAFAFA; --bg-soft: #F0F0F0; --surface: #FFFFFF; --surface-2: #F7F7F7;
  --text: #1A1A1A; --muted: #525252; --light: #8A8A8A;
  --border: #E5E5E5; --border-soft: #EFEFEF;
  --accent: #FF6B00; --accent-2: #D54E00; --accent-fg: #FFFFFF;
  --accent-soft: rgba(255,107,0,0.12); --accent-glow: rgba(255,107,0,0.30);
  --ink: #1A1A1A; --ink-fg: #FAFAFA;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(0,0,0,0.10);
  --orb-a: rgba(255,107,0,0.18); --orb-b: rgba(80,80,80,0.10); --grid-line: rgba(0,0,0,0.05); --is-dark: 0;
}

:root[data-theme="midnight-bloom"], body.theme-midnight-bloom {
  --bg: #0F0F12; --bg-soft: #18181C; --surface: #1F1F25; --surface-2: #27272F;
  --text: #F2EAE0; --muted: #A39C92; --light: #6E6961;
  --border: rgba(242,234,224,0.10); --border-soft: rgba(242,234,224,0.05);
  --accent: #EC4899; --accent-2: #BE185D; --accent-fg: #FFFFFF;
  --accent-soft: rgba(236,72,153,0.14); --accent-glow: rgba(236,72,153,0.32);
  --ink: #F2EAE0; --ink-fg: #0F0F12;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px rgba(0,0,0,.65);
  --pill-bg: rgba(31,31,37,0.86); --pill-border: rgba(255,255,255,0.10);
  --orb-a: rgba(236,72,153,0.18); --orb-b: rgba(120,90,150,0.14); --grid-line: rgba(242,234,224,0.04); --is-dark: 1;
}

:root[data-theme="sage-field"], body.theme-sage-field {
  --bg: #EFF0E6; --bg-soft: #E5E6DB; --surface: #FFFFFF; --surface-2: #F7F8EE;
  --text: #2A2D24; --muted: #5C5F52; --light: #8E9080;
  --border: #DCDDD0; --border-soft: #E6E7DC;
  --accent: #6B7A3E; --accent-2: #4F5A2D; --accent-fg: #FFFFFF;
  --accent-soft: rgba(107,122,62,0.12); --accent-glow: rgba(107,122,62,0.28);
  --ink: #2A2D24; --ink-fg: #EFF0E6;
  --shadow-sm: 0 1px 3px rgba(42,45,36,.06); --shadow: 0 8px 24px rgba(42,45,36,.10); --shadow-lg: 0 24px 60px rgba(42,45,36,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(42,45,36,0.10);
  --orb-a: rgba(107,122,62,0.18); --orb-b: rgba(140,150,120,0.12); --grid-line: rgba(42,45,36,0.05); --is-dark: 0;
}

:root[data-theme="ocean-deep"], body.theme-ocean-deep {
  --bg: #0E2B33; --bg-soft: #143844; --surface: #1A4250; --surface-2: #225060;
  --text: #F2EBDD; --muted: #B0AA9C; --light: #797466;
  --border: rgba(242,235,221,0.10); --border-soft: rgba(242,235,221,0.05);
  --accent: #FF7E5F; --accent-2: #E55A39; --accent-fg: #FFFFFF;
  --accent-soft: rgba(255,126,95,0.14); --accent-glow: rgba(255,126,95,0.32);
  --ink: #F2EBDD; --ink-fg: #0E2B33;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(26,66,80,0.88); --pill-border: rgba(242,235,221,0.10);
  --orb-a: rgba(255,126,95,0.16); --orb-b: rgba(60,140,160,0.14); --grid-line: rgba(242,235,221,0.04); --is-dark: 1;
}

:root[data-theme="cherry-cream"], body.theme-cherry-cream {
  --bg: #FAEAE5; --bg-soft: #F0DDD7; --surface: #FFFFFF; --surface-2: #FCF3EE;
  --text: #3A1A20; --muted: #6E4E54; --light: #A89096;
  --border: #E8D5CF; --border-soft: #EFDFD9;
  --accent: #C2185B; --accent-2: #9D1149; --accent-fg: #FFFFFF;
  --accent-soft: rgba(194,24,91,0.12); --accent-glow: rgba(194,24,91,0.28);
  --ink: #3A1A20; --ink-fg: #FAEAE5;
  --shadow-sm: 0 1px 3px rgba(58,26,32,.06); --shadow: 0 8px 24px rgba(58,26,32,.10); --shadow-lg: 0 24px 60px rgba(58,26,32,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(58,26,32,0.10);
  --orb-a: rgba(194,24,91,0.16); --orb-b: rgba(220,180,150,0.16); --grid-line: rgba(58,26,32,0.05); --is-dark: 0;
}

:root[data-theme="concrete"], body.theme-concrete {
  --bg: #E8E8E5; --bg-soft: #DDDDDA; --surface: #FFFFFF; --surface-2: #F2F2EF;
  --text: #1F1F1F; --muted: #525252; --light: #8E8E8E;
  --border: #D5D5D2; --border-soft: #E0E0DD;
  --accent: #FACC15; --accent-2: #CA9A04; --accent-fg: #1F1F1F;
  --accent-soft: rgba(250,204,21,0.18); --accent-glow: rgba(250,204,21,0.40);
  --ink: #1F1F1F; --ink-fg: #E8E8E5;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(0,0,0,0.10);
  --orb-a: rgba(250,204,21,0.18); --orb-b: rgba(120,120,120,0.10); --grid-line: rgba(0,0,0,0.05); --is-dark: 0;
}

:root[data-theme="velvet-plum"], body.theme-velvet-plum {
  --bg: #2A1633; --bg-soft: #3A1F45; --surface: #4A2B57; --surface-2: #5A3768;
  --text: #F4E5D9; --muted: #B5A695; --light: #7B7263;
  --border: rgba(244,229,217,0.10); --border-soft: rgba(244,229,217,0.05);
  --accent: #E0B080; --accent-2: #BB8A55; --accent-fg: #2A1633;
  --accent-soft: rgba(224,176,128,0.14); --accent-glow: rgba(224,176,128,0.32);
  --ink: #F4E5D9; --ink-fg: #2A1633;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(74,43,87,0.88); --pill-border: rgba(244,229,217,0.10);
  --orb-a: rgba(224,176,128,0.16); --orb-b: rgba(160,80,140,0.14); --grid-line: rgba(244,229,217,0.04); --is-dark: 1;
}

:root[data-theme="mint-mono"], body.theme-mint-mono {
  --bg: #E8F5EF; --bg-soft: #DDE9E3; --surface: #FFFFFF; --surface-2: #F2F8F5;
  --text: #0A0A0A; --muted: #525252; --light: #888888;
  --border: #D5E0DA; --border-soft: #DEE8E2;
  --accent: #10B981; --accent-2: #047857; --accent-fg: #FFFFFF;
  --accent-soft: rgba(16,185,129,0.12); --accent-glow: rgba(16,185,129,0.30);
  --ink: #0A0A0A; --ink-fg: #E8F5EF;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(0,0,0,0.10);
  --orb-a: rgba(16,185,129,0.18); --orb-b: rgba(120,180,150,0.10); --grid-line: rgba(0,0,0,0.05); --is-dark: 0;
}

:root[data-theme="sunset-burn"], body.theme-sunset-burn {
  --bg: #F9DCBE; --bg-soft: #EFD0AE; --surface: #FFFFFF; --surface-2: #FCE7CD;
  --text: #3A1414; --muted: #6E4040; --light: #A8807A;
  --border: #E8C5A8; --border-soft: #EFD2B5;
  --accent: #B91C1C; --accent-2: #8C1414; --accent-fg: #FFFFFF;
  --accent-soft: rgba(185,28,28,0.12); --accent-glow: rgba(185,28,28,0.30);
  --ink: #3A1414; --ink-fg: #F9DCBE;
  --shadow-sm: 0 1px 3px rgba(58,20,20,.06); --shadow: 0 8px 24px rgba(58,20,20,.10); --shadow-lg: 0 24px 60px rgba(58,20,20,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(58,20,20,0.10);
  --orb-a: rgba(185,28,28,0.16); --orb-b: rgba(220,140,90,0.14); --grid-line: rgba(58,20,20,0.05); --is-dark: 0;
}

:root[data-theme="arctic-glow"], body.theme-arctic-glow {
  --bg: #F7FAFC; --bg-soft: #EBF1F5; --surface: #FFFFFF; --surface-2: #F0F5F8;
  --text: #1F2937; --muted: #4B5563; --light: #94A3B8;
  --border: #DCE3EA; --border-soft: #E6ECF1;
  --accent: #3B82F6; --accent-2: #1D4ED8; --accent-fg: #FFFFFF;
  --accent-soft: rgba(59,130,246,0.10); --accent-glow: rgba(59,130,246,0.28);
  --ink: #1F2937; --ink-fg: #F7FAFC;
  --shadow-sm: 0 1px 3px rgba(31,41,55,.06); --shadow: 0 8px 24px rgba(31,41,55,.10); --shadow-lg: 0 24px 60px rgba(31,41,55,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(31,41,55,0.10);
  --orb-a: rgba(59,130,246,0.16); --orb-b: rgba(180,200,220,0.16); --grid-line: rgba(31,41,55,0.05); --is-dark: 0;
}

:root[data-theme="bronze-studio"], body.theme-bronze-studio {
  --bg: #E6DCCB; --bg-soft: #DBD0BC; --surface: #FFFFFF; --surface-2: #F0E8D7;
  --text: #2C1F14; --muted: #5C4E3F; --light: #948476;
  --border: #D4C8B3; --border-soft: #DDD2BE;
  --accent: #A8651F; --accent-2: #7A4814; --accent-fg: #FFFFFF;
  --accent-soft: rgba(168,101,31,0.12); --accent-glow: rgba(168,101,31,0.28);
  --ink: #2C1F14; --ink-fg: #E6DCCB;
  --shadow-sm: 0 1px 3px rgba(44,31,20,.06); --shadow: 0 8px 24px rgba(44,31,20,.10); --shadow-lg: 0 24px 60px rgba(44,31,20,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(44,31,20,0.10);
  --orb-a: rgba(168,101,31,0.18); --orb-b: rgba(140,120,90,0.12); --grid-line: rgba(44,31,20,0.05); --is-dark: 0;
}

:root[data-theme="pixel-lemon"], body.theme-pixel-lemon {
  --bg: #FFF8C5; --bg-soft: #F5EFB8; --surface: #FFFFFF; --surface-2: #FFFCD8;
  --text: #0A0A0A; --muted: #525252; --light: #8E8E8E;
  --border: #E8DFA8; --border-soft: #F0E8B5;
  --accent: #7C3AED; --accent-2: #5B21B6; --accent-fg: #FFFFFF;
  --accent-soft: rgba(124,58,237,0.12); --accent-glow: rgba(124,58,237,0.30);
  --ink: #0A0A0A; --ink-fg: #FFF8C5;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(0,0,0,0.10);
  --orb-a: rgba(124,58,237,0.18); --orb-b: rgba(220,200,80,0.20); --grid-line: rgba(0,0,0,0.05); --is-dark: 0;
}

:root[data-theme="slate-stone"], body.theme-slate-stone {
  --bg: #1F2A38; --bg-soft: #283546; --surface: #314056; --surface-2: #3A4B65;
  --text: #E8E0D0; --muted: #B0A892; --light: #797063;
  --border: rgba(232,224,208,0.10); --border-soft: rgba(232,224,208,0.05);
  --accent: #D97757; --accent-2: #B05A40; --accent-fg: #FFFFFF;
  --accent-soft: rgba(217,119,87,0.14); --accent-glow: rgba(217,119,87,0.32);
  --ink: #E8E0D0; --ink-fg: #1F2A38;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(49,64,86,0.88); --pill-border: rgba(232,224,208,0.10);
  --orb-a: rgba(217,119,87,0.16); --orb-b: rgba(80,110,150,0.14); --grid-line: rgba(232,224,208,0.04); --is-dark: 1;
}

:root[data-theme="brick-lab"], body.theme-brick-lab {
  --bg: #F0E5D5; --bg-soft: #E6DBC9; --surface: #FFFFFF; --surface-2: #F8EFE0;
  --text: #1A1A1A; --muted: #4F4F4F; --light: #8E8E8E;
  --border: #DDD0BC; --border-soft: #E5DAC5;
  --accent: #C2410C; --accent-2: #9A330A; --accent-fg: #FFFFFF;
  --accent-soft: rgba(194,65,12,0.12); --accent-glow: rgba(194,65,12,0.30);
  --ink: #1A1A1A; --ink-fg: #F0E5D5;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(0,0,0,0.10);
  --orb-a: rgba(194,65,12,0.18); --orb-b: rgba(160,140,110,0.14); --grid-line: rgba(0,0,0,0.05); --is-dark: 0;
}

:root[data-theme="cyber-grid"], body.theme-cyber-grid {
  --bg: #000000; --bg-soft: #0A0A0A; --surface: #111111; --surface-2: #1A1A1A;
  --text: #E5E7EB; --muted: #9CA3AF; --light: #6B7280;
  --border: rgba(229,231,235,0.10); --border-soft: rgba(229,231,235,0.05);
  --accent: #06B6D4; --accent-2: #0891B2; --accent-fg: #000000;
  --accent-soft: rgba(6,182,212,0.16); --accent-glow: rgba(6,182,212,0.36);
  --ink: #E5E7EB; --ink-fg: #000000;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow: 0 8px 24px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
  --pill-bg: rgba(17,17,17,0.86); --pill-border: rgba(255,255,255,0.10);
  --orb-a: rgba(6,182,212,0.20); --orb-b: rgba(120,80,180,0.14); --grid-line: rgba(229,231,235,0.05); --is-dark: 1;
}

:root[data-theme="cocoa-cream"], body.theme-cocoa-cream {
  --bg: #3A2820; --bg-soft: #45302A; --surface: #503A33; --surface-2: #5C443D;
  --text: #F5E5D0; --muted: #B5A593; --light: #7B6D60;
  --border: rgba(245,229,208,0.10); --border-soft: rgba(245,229,208,0.05);
  --accent: #D4A437; --accent-2: #B0871D; --accent-fg: #3A2820;
  --accent-soft: rgba(212,164,55,0.14); --accent-glow: rgba(212,164,55,0.32);
  --ink: #F5E5D0; --ink-fg: #3A2820;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(80,58,51,0.88); --pill-border: rgba(245,229,208,0.10);
  --orb-a: rgba(212,164,55,0.16); --orb-b: rgba(150,90,60,0.14); --grid-line: rgba(245,229,208,0.04); --is-dark: 1;
}

:root[data-theme="pacific"], body.theme-pacific {
  --bg: #0F4C75; --bg-soft: #155A87; --surface: #1F6997; --surface-2: #2978AA;
  --text: #F5F5F0; --muted: #B5B5AB; --light: #7B7B72;
  --border: rgba(245,245,240,0.10); --border-soft: rgba(245,245,240,0.05);
  --accent: #F97316; --accent-2: #C2570F; --accent-fg: #FFFFFF;
  --accent-soft: rgba(249,115,22,0.14); --accent-glow: rgba(249,115,22,0.32);
  --ink: #F5F5F0; --ink-fg: #0F4C75;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(31,105,151,0.86); --pill-border: rgba(245,245,240,0.10);
  --orb-a: rgba(249,115,22,0.16); --orb-b: rgba(60,180,200,0.14); --grid-line: rgba(245,245,240,0.04); --is-dark: 1;
}

:root[data-theme="mocha"], body.theme-mocha {
  --bg: #E8DDC9; --bg-soft: #DDD0BB; --surface: #FFFFFF; --surface-2: #F2E9D6;
  --text: #3D2817; --muted: #6E5945; --light: #A89580;
  --border: #D6C8AE; --border-soft: #DED1B9;
  --accent: #6F4E37; --accent-2: #4F371E; --accent-fg: #FFFFFF;
  --accent-soft: rgba(111,78,55,0.14); --accent-glow: rgba(111,78,55,0.30);
  --ink: #3D2817; --ink-fg: #E8DDC9;
  --shadow-sm: 0 1px 3px rgba(61,40,23,.06); --shadow: 0 8px 24px rgba(61,40,23,.10); --shadow-lg: 0 24px 60px rgba(61,40,23,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(61,40,23,0.10);
  --orb-a: rgba(111,78,55,0.18); --orb-b: rgba(180,150,110,0.14); --grid-line: rgba(61,40,23,0.05); --is-dark: 0;
}

:root[data-theme="champagne"], body.theme-champagne {
  --bg: #F5EFE0; --bg-soft: #ECE4D2; --surface: #FFFFFF; --surface-2: #FBF6E8;
  --text: #2A1F14; --muted: #5C4F40; --light: #948576;
  --border: #E0D6C0; --border-soft: #E8DECC;
  --accent: #B76E79; --accent-2: #944851; --accent-fg: #FFFFFF;
  --accent-soft: rgba(183,110,121,0.14); --accent-glow: rgba(183,110,121,0.30);
  --ink: #2A1F14; --ink-fg: #F5EFE0;
  --shadow-sm: 0 1px 3px rgba(42,31,20,.06); --shadow: 0 8px 24px rgba(42,31,20,.10); --shadow-lg: 0 24px 60px rgba(42,31,20,.14);
  --pill-bg: rgba(255,255,255,0.92); --pill-border: rgba(42,31,20,0.10);
  --orb-a: rgba(183,110,121,0.16); --orb-b: rgba(220,200,150,0.14); --grid-line: rgba(42,31,20,0.05); --is-dark: 0;
}

:root[data-theme="volt-black"], body.theme-volt-black {
  --bg: #050505; --bg-soft: #0E0E0E; --surface: #161616; --surface-2: #1F1F1F;
  --text: #F5F2ED; --muted: #9C988F; --light: #6B6660;
  --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.04);
  --accent: #A855F7; --accent-2: #7E22CE; --accent-fg: #FFFFFF;
  --accent-soft: rgba(168,85,247,0.14); --accent-glow: rgba(168,85,247,0.34);
  --ink: #F5F2ED; --ink-fg: #050505;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow: 0 8px 24px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
  --pill-bg: rgba(22,22,22,0.86); --pill-border: rgba(255,255,255,0.10);
  --orb-a: rgba(168,85,247,0.18); --orb-b: rgba(120,80,180,0.14); --grid-line: rgba(255,255,255,0.04); --is-dark: 1;
}

/* Official AIRCST Brand theme — colors lifted directly from the logo:
   navy #131F3E ground, white #FFFFFF strokes, orange #EE7B2B accent triangle. */
:root[data-theme="aircst-brand"], body.theme-aircst-brand {
  --bg: #131F3E; --bg-soft: #1A2649; --surface: #233056; --surface-2: #2C3964;
  --text: #FFFFFF; --muted: #B5BAD0; --light: #7B82A0;
  --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.05);
  --accent: #EE7B2B; --accent-2: #C45F1A; --accent-fg: #FFFFFF;
  --accent-soft: rgba(238,123,43,0.14); --accent-glow: rgba(238,123,43,0.34);
  --ink: #FFFFFF; --ink-fg: #131F3E;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 24px 60px rgba(0,0,0,.60);
  --pill-bg: rgba(35,48,86,0.88); --pill-border: rgba(255,255,255,0.12);
  --orb-a: rgba(238,123,43,0.18); --orb-b: rgba(80,110,180,0.16); --grid-line: rgba(255,255,255,0.04); --is-dark: 1;
}

/* Static tokens (don't change per theme) */
:root {
  --font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout — digitalgravity edge-to-edge approach */
  --container-max: 1440px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desk:   40px;

  /* Floating header geometry (so site-main can clear it) */
  --topbar-h:    38px;
  --island-top:  56px;
  --island-h:    52px;
  --island-gap:  20px;
}

/* Legacy aliases — older page templates inline-reference these names.
   Map them onto the live theme tokens so the page still picks up the right
   color when the theme switches. */
:root,
:root[data-theme],
body[class*="theme-"] {
  --gold:       var(--accent);
  --gold-light: var(--accent);
  --gold-pale:  var(--accent-soft);
  --jade:       var(--accent);
  --jade-deep:  var(--accent-2);
  --jade-soft:  var(--accent-soft);
  --line:       var(--border);
  --cyan:       var(--accent);
  --purple:     var(--accent-2);
  --grad:       linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-soft:  linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
  transition: background-color 0.4s ease, color 0.4s ease;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, optgroup, option { font-family: var(--font-body); }
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; font-family: inherit; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.10;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.05rem, 2vw, 1.32rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { margin-bottom: 0; }

.grad-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Layout — edge-to-edge container (digitalgravity-style) ─ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 600px)  { .container { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .container { padding: 0 var(--gutter-desk); } }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 9px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 5;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar-left {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topbar-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0   var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.topbar-motto {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  min-width: 0;
}
@media (max-width: 640px) {
  .topbar { font-size: 11px; }
  .topbar .container { justify-content: center; gap: 6px 14px; }
  .topbar-motto { display: none; }
}

/* ── Dynamic Island Navigation ──────────────────────────── */
.site-header {
  position: fixed;
  top: var(--island-top);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  z-index: 100;
  pointer-events: none;
  transition: transform 0.45s var(--spring), opacity 0.3s var(--ease);
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateX(-50%) translateY(-160%);
  opacity: 0;
  pointer-events: none;
}
/* Never hide while the menu is open, even on scroll */
.site-header.is-open.is-hidden {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.island {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  width: clamp(260px, 32vw, 340px);
  height: var(--island-h);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  overflow: hidden;
  /* CLOSING transitions: height collapses first, width follows */
  transition:
    height 0.45s var(--spring),
    width 0.55s var(--spring) 0.30s,
    padding 0.45s var(--spring) 0.25s,
    border-radius 0.50s var(--spring) 0.25s,
    background-color 0.30s var(--ease) 0.30s,
    box-shadow 0.40s var(--ease) 0.20s;
}

/* PILL MORPHS INTO MENU — Apple-style sequence: width first, THEN height */
.island.is-open {
  width: min(92vw, 880px);
  height: min(640px, 82vh);
  padding: 16px;
  border-radius: 28px;
  background: var(--surface);
  /* Single very-soft shadow — the dimmed backdrop carries the depth, so the
     menu only needs a quiet halo. No multi-layer rectangle artifact. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
  transform: none;
  /* Backdrop-filter on an opaque element does nothing visible but causes a
     faint render halo in Chromium — disable while morphed. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* OPENING transitions: width grows first, height + radius follow */
  transition:
    width 0.45s var(--spring),
    height 0.55s var(--spring) 0.35s,
    padding 0.45s var(--spring) 0.30s,
    border-radius 0.50s var(--spring) 0.25s,
    background-color 0.30s var(--ease),
    box-shadow 0.40s var(--ease) 0.10s,
    backdrop-filter 0s linear 0s,
    -webkit-backdrop-filter 0s linear 0s;
}
.island-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.island-trigger:hover { background: var(--accent-soft); }
.island-icon {
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
}
.island-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--spring), opacity 0.25s var(--ease), top 0.3s var(--spring), bottom 0.3s var(--spring);
}
.island-icon span:nth-child(1) { top: 2px; }
.island-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.island-icon span:nth-child(3) { bottom: 2px; }
.island.is-open .island-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.island.is-open .island-icon span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
.island.is-open .island-icon span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.island-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.island-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  flex-shrink: 0;
}
.island-brand-mark svg { width: 16px; height: 16px; display: block; }
.island-brand-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.island-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s var(--spring), box-shadow 0.2s ease;
}
.island-cta:hover {
  background: var(--accent-2);
  color: var(--accent-fg);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}

/* Expanded panel — morphs out of the pill with clip-path + scale spring */
/* Collapsed inner content — visible only when the pill is in pill-shape.
   justify-content: space-between pushes the brand into the centre and the
   CTA to the right edge of the pill. */
.island-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-left: 4px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s var(--ease) 0.18s, visibility 0s linear 0.4s;
}
.island-collapsed .island-cta {
  margin-left: auto;
}
.island.is-open .island-collapsed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), visibility 0s linear 0.18s;
}

/* Expanded inner content — only visible after the pill morphs into a rectangle */
.island-expanded {
  position: absolute;
  inset: 0;
  padding: 60px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Closing: hide content immediately so width/height can collapse cleanly */
  transition: opacity 0.18s var(--ease), visibility 0s linear 0.18s;
}
.island.is-open .island-expanded {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Opening: reveal AFTER both width (0.45s) AND height (0.35+0.55=0.90s) finish */
  transition: opacity 0.30s var(--ease) 0.85s, visibility 0s linear 0.85s;
}

.island-expanded-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.island-expanded-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.island-expanded-title {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

/* Trigger when expanded — sits in the same position, becomes the close button */
.island.is-open .island-trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--surface-2);
  z-index: 2;
}

.island-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 28px;
  align-items: start;
}
.island-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.island-col-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.island-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 4px;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  transition: padding-left 0.25s var(--spring), color 0.2s ease;
}
.island-link:last-child { border-bottom: none; }
.island-link:hover { color: var(--accent); padding-left: 12px; }
.island-link-arrow {
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.25s var(--spring);
}
.island-link:hover .island-link-arrow { opacity: 1; transform: translateX(0); }
.island-tag {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
  vertical-align: middle;
}

.island-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.island-feature-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 11px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
}
.island-feature-title {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.island-feature-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.island-panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  margin-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.island-foot-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.island-foot-links {
  display: flex;
  gap: 18px;
}
.island-foot-links a {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  transition: color 0.2s;
}
.island-foot-links a:hover { color: var(--accent); }

.island-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--spring), visibility 0s linear 0.4s;
  /* Sit just below the floating header (z-index 100). Now an actual sibling of
     .site-header so position:fixed measures from the viewport, not the
     transformed header. */
  z-index: 95;
}
body.menu-open .island-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s var(--spring), visibility 0s linear 0s;
}

body.menu-open { overflow: hidden; }

/* Push main content below the floating header — generous so the pill never sits on top of content.
   Topbar is already in normal flow (above site-main), so we only need to clear the FIXED island. */
.site-main {
  padding-top: calc(var(--island-top) - var(--topbar-h) + var(--island-h) + var(--island-gap) + 24px);
  min-height: 60vh;
  padding-bottom: 80px;
}
@media (max-width: 700px) {
  .site-main { padding-top: 100px; }
}

/* Mobile island sizing — pill widens to 92vw on phones so brand text always fits */
@media (max-width: 700px) {
  :root {
    --topbar-h:    52px;
    --island-top:  72px;
    --island-h:    48px;
  }
  .island { width: clamp(300px, 92vw, 360px); padding: 4px; gap: 2px; }
  .island.is-open {
    width: calc(100vw - 20px);
    height: min(620px, 84vh);
    padding: 12px;
    border-radius: 24px;
  }
  .island-trigger { width: 38px; height: 38px; }
  .island.is-open .island-trigger { top: 10px; right: 10px; }
  .island-brand { padding: 0 6px; gap: 6px; height: 38px; font-size: 13px; }
  .island-brand-mark { width: 24px; height: 24px; }
  .island-brand-mark svg { width: 14px; height: 14px; }
  .island-cta { height: 38px; padding: 0 14px; font-size: 12.5px; }
  .island-expanded {
    padding: 56px 18px 18px;
    gap: 18px;
  }
  .island-expanded-title { font-size: 1.2rem; }
  .island-panel-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .island-link { font-size: 1.1rem; padding: 9px 4px; }
  .island-feature { padding: 18px; }
  .island-feature-title { font-size: 1.2rem; }
  .island-panel-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Very narrow phones (Galaxy S8, iPhone SE, older Androids ~320–380px):
   keep AIRCST text visible — just shrink everything proportionally so it fits. */
@media (max-width: 380px) {
  .island { width: calc(100vw - 16px); padding: 3px; gap: 0; }
  .island-trigger { width: 34px; height: 34px; }
  .island-icon { width: 16px; height: 12px; }
  .island-brand { padding: 0 4px; gap: 5px; font-size: 11.5px; }
  .island-brand-mark { width: 20px; height: 20px; }
  .island-brand-mark svg { width: 12px; height: 12px; }
  .island-cta { height: 34px; padding: 0 11px; font-size: 11.5px; }
}
/* Default: long label visible, short hidden */
.island-cta-short { display: none; }
.island-cta-full  { display: inline; }

/* Truly tiny viewports (≤ 340px) — shorten "Order Now" to "Order" so the pill never breaks */
@media (max-width: 340px) {
  .island-cta { font-size: 11px; padding: 0 9px; }
  .island-cta-full  { display: none; }
  .island-cta-short { display: inline; }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, transform 0.18s var(--spring), box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background: var(--accent-2);
  color: var(--accent-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow);
}
.btn-block { align-self: stretch; width: 100%; }
.btn.outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn.outline-dark {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn.outline-dark:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
.btn.ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.btn.danger    { background: #ef4444; color: #fff; }
.btn.danger:hover { background: #dc2626; color: #fff; box-shadow: 0 8px 20px rgba(239,68,68,.30); }
.btn.secondary { background: var(--surface-2); color: var(--text); }
.btn.sm { font-size: 13px; padding: 9px 16px; }

/* ── Sections ───────────────────────────────────────────── */
.section { margin-bottom: 72px; }
.section:first-child { padding-top: 16px; }
.section-head { margin-bottom: 32px; max-width: 720px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--muted); font-size: 1.02rem; max-width: 560px; }

.section-label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.feature-card {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease;
  position: relative;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.card-num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.card h2, .card h3 { margin-bottom: 8px; color: var(--text); }
.card h2 a, .card h3 a { color: var(--text); transition: color 0.2s; }
.card h2 a:hover, .card h3 a:hover { color: var(--accent); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.2s ease;
}
.card-link:hover { gap: 8px; }

/* ── Grid ───────────────────────────────────────────────── */
.grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.split  { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 768px) { .split { grid-template-columns: 1fr; } }

/* ── Pills / Tags ───────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 24px; padding: 6px 14px; margin: 4px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pill:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  white-space: nowrap;
}
.cat-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Images ─────────────────────────────────────────────── */
.avatar {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-soft);
}
.thumb  { width: 72px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.banner-image { width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: transparent;
  overflow: hidden;
  padding: 56px 0 80px;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}
.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 24px;
  margin-bottom: 22px;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.04;
  margin-bottom: 22px;
  letter-spacing: -0.025em;
}
.hero h1 .grad-text { display: block; }
.hero-sub {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.65;
  margin-bottom: 32px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.stat-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 11.5px;
  color: var(--light);
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Forms ──────────────────────────────────────────────── */
label {
  display: block; margin: 16px 0 6px;
  font-size: 13px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.03em; text-transform: uppercase;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--light); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; }
button[type="submit"] { margin-top: 22px; }

/* ── Alerts ─────────────────────────────────────────────── */
.flash { background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.30); color: #047857; padding: 13px 16px; border-radius: 10px; margin-bottom: 20px; font-weight: 500; }
.error { background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.30); color: #b91c1c; padding: 13px 16px; border-radius: 10px; margin-bottom: 20px; font-weight: 500; }
body.theme-studio-dark .flash, body.theme-editorial-dark .flash { color: #34d399; }
body.theme-studio-dark .error, body.theme-editorial-dark .error { color: #f87171; }

/* ── Breadcrumbs ────────────────────────────────────────── */
.breadcrumbs { font-size: 13px; color: var(--light); margin-bottom: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--muted); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { opacity: 0.45; }

/* ── Tables ─────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.table th { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface-2); }

/* ── Utilities ──────────────────────────────────────────── */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta { font-size: 13px; color: var(--light); }
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* ── Page Head (inner pages) ────────────────────────────── */
.page-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 44px 0 50px;
  position: relative;
  overflow: hidden;
}
.page-head h1 { color: var(--text); margin-bottom: 10px; }
.page-head .breadcrumbs { margin-top: 8px; }

/* ── Country cards ──────────────────────────────────────── */
.country-card {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px 14px; min-height: 72px;
}
.country-card span { font-size: 0.9rem; font-weight: 600; color: var(--muted); transition: color 0.2s; }
.country-card:hover span { color: var(--accent); }

/* ── CTA Band ───────────────────────────────────────────── */
.cta-band {
  position: relative;
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--accent-soft), transparent 70%);
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--text); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.cta-band p { color: var(--muted); font-size: 1.02rem; max-width: 500px; margin: 0 auto 28px; line-height: 1.7; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
  margin-top: 60px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.footer-brand-name {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.footer-motto { font-size: 10.5px; color: var(--light); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 14px; }
.footer-desc { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 320px; margin-bottom: 20px; }
.footer-col h5 { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--text); padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--light); flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: var(--light); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 18px; }

/* ── Site background — orbs + grid (per-theme tinted) ───── */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(50% 40% at 80% 100%, var(--orb-a), transparent 70%),
    radial-gradient(50% 50% at 0% 0%, var(--orb-b), transparent 70%),
    var(--bg);
}
.site-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}
.site-bg-3d {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-out;
  z-index: -1;
}
.site-bg-3d.is-ready { opacity: 0.40; }
.site-bg-3d canvas { display: block; width: 100%; height: 100%; }
body[data-page="contact"] .site-bg-3d { display: none; }
.site-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: orbFloat 18s ease-in-out infinite;
}
.site-bg-orb--a {
  top: 10%; right: 8%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--orb-a), transparent 70%);
}
.site-bg-orb--b {
  bottom: 5%; left: 5%;
  width: 440px; height: 440px;
  background: radial-gradient(circle, var(--orb-b), transparent 70%);
  animation-delay: -9s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.06); }
  66%      { transform: translate(-30px, 25px) scale(0.96); }
}
@media (max-width: 900px) {
  .site-bg-3d.is-ready { opacity: 0.30; }
  .site-bg-orb { filter: blur(60px); }
  .site-bg-orb--a { width: 240px; height: 240px; }
  .site-bg-orb--b { width: 280px; height: 280px; }
}

body { animation: pageEntry 0.4s ease both; }
@keyframes pageEntry {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Marquee text band ──────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 50px;
  animation: marqueeScroll 35s linear infinite;
  will-change: transform;
}
.marquee-item {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-transform: uppercase;
}
.marquee-item span { color: var(--accent); }
.marquee-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero banners (admin-managed) ───────────────────────── */
.hero-banner-carousel {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 76vh;
  min-height: 76dvh; /* dynamic viewport — stable on mobile when URL bar shows/hides */
  isolation: isolate;
  overflow: hidden;
}
.hero-banner-carousel .hero-banner {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04) translateX(40px);
  transition: opacity 1.1s var(--spring), transform 1.4s var(--spring);
}
.hero-banner-carousel .hero-banner.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0);
  z-index: 1;
}
.hero-banner {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 76vh;
  min-height: 76dvh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}
.hero-banner-image {
  position: absolute;
  inset: 0;
  background-image: var(--banner-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.04);
  transition: transform 12s linear;
}
.hero-banner:hover .hero-banner-image { transform: scale(1.10); }
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%),
    radial-gradient(70% 60% at 0% 100%, var(--accent-glow), transparent 70%);
}
.hero-banner-inner {
  padding: 56px 24px 56px;
  max-width: 1100px;
  position: relative;
}
.hero-banner-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0,0,0,0.55);
}
.hero-banner-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.88);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 24px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.hero-banner-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-banner-cta .btn { background: #fff; color: #0E1117; }
.hero-banner-cta .btn:hover { background: var(--accent); color: var(--accent-fg); }

/* ── Feature bands ──────────────────────────────────────── */
.feature-band {
  position: relative;
  width: 100%;
  min-height: 440px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  margin: 48px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.feature-band--right { justify-content: flex-end; }
.feature-band--right .feature-band-text { margin-left: auto; }
.feature-band-text {
  max-width: 540px;
  padding: 64px 0;
}
.feature-band-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 12px 0 16px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.feature-band-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  margin: 0 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.feature-band-text .section-label { color: var(--accent); }

/* ── Reveal ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--spring), transform 0.65s var(--spring);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive — final adjustments ─────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 36px 0 56px; }
  .hero-stats { gap: 24px; margin-top: 36px; padding-top: 28px; }
  .hero-banner-carousel, .hero-banner {
    min-height: 70vh;
    min-height: 70dvh;
  }
  .hero-banner-inner { padding: 40px 18px 56px; }
  .feature-band { min-height: 360px; margin: 36px 0; }
  .feature-band-text { padding: 48px 0; }
  .cta-band { padding: 40px 22px; }
  .page-head { padding: 36px 0 40px; }
  .section { margin-bottom: 56px; }
  .section:first-child { padding-top: 8px; }
}
@media (max-width: 480px) {
  .hero-banner-carousel, .hero-banner {
    min-height: 64vh;
    min-height: 64dvh;
  }
  .hero-stats { flex-direction: column; gap: 18px; }
  .hero-banner-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero-banner-sub { font-size: 0.95rem; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-direction: column; gap: 6px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}