/* ================================================================
   ETHAN ECOM — Shared Design System v2
   All shared tokens, layout, components reused across every page.
   Page-specific styles stay in each HTML file's <style> block.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600&display=swap');
@import url('mobile-perf.css');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #000000; line-height: 1.6; overflow-x: hidden; background: #fff; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── DESIGN TOKENS ── */
:root {
  --blue:    #1D3251;
  --blue-dk: #0a2040;
  --yellow:  #111111;
  --navy:    #1D3251;
  --white:   #fff;
  --gray:    #F8F9FA;
  --surface: #F8F9FA;
  --text:    #000000;
  --max-w:   1500px;
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --t-base:  all .3s cubic-bezier(.4, 0, .2, 1);
  --sh-sm:   0 2px 12px rgba(29,50,81,.07);
  --sh-md:   0 8px 32px rgba(29,50,81,.11);
  --sh-lg:   0 20px 60px rgba(29,50,81,.15);
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
}

/* ── UTILITY CLASSES ── */
.glass {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.13);
}
.glass--light {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.55);
}
.grad-text {
  background: linear-gradient(135deg, var(--blue) 0%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ── LAYOUT ── */
.container    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section      { padding: 96px 0; }
.section--blue  { background: var(--blue);  color: #fff; }
.section--navy  { background: #fff; color: #000; }
.section--gray  { background: var(--gray); }
.section--surface { background: var(--surface); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 6px;
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 16px;
  cursor: pointer; border: none; transition: var(--t-base);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .5s var(--ease);
}
.btn:hover::after { transform: translateX(100%); }
.btn--sm  { padding: 10px 22px; font-size: 16px; }
.btn--yellow { background: var(--yellow); color: #fff; }
.btn--yellow:hover { background: #333; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.btn--outline { background: transparent; color: var(--navy); border: 2px solid rgba(29,50,81,.35); }
.btn--outline:hover { border-color: var(--navy); background: rgba(29,50,81,.06); transform: translateY(-2px); }
.btn--blue  { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(29,50,81,.25); }
.btn--blue:hover  { background: var(--blue-dk); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29,50,81,.35); }
.btn--white { background: #fff; color: var(--navy); box-shadow: var(--sh-sm); }
.btn--white:hover { background: #f5f6f8; transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
/* Outline buttons within dark sections need white styling */
.section--blue .btn--outline { color: #fff; border-color: rgba(255,255,255,.45); }
.section--blue .btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ── SECTION HEADER ── */
.sl  { font-size: 16px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.st  { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(26px, 3.5vw, 40px); font-weight: 800; line-height: 1.2; }
.ss  { font-size: 16px; color: var(--text); max-width: 560px; margin-top: 14px; line-height: 1.8; }
.sh  { margin-bottom: 56px; }
.sh.c { text-align: center; }
.sh.c .ss { margin: 14px auto 0; }
.divider   { width: 48px; height: 3px; background: var(--yellow); border-radius: 2px; margin-top: 16px; }
.divider.c { margin: 16px auto 0; }

/* ── IMAGE PLACEHOLDERS ── */
.img-ph {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #dde3f0 0%, #c5cedf 100%);
}
.img-ph > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 2;
  border-radius: inherit;
  transition: transform .65s var(--ease), filter .4s;
}
.img-ph:hover > img { transform: scale(1.05); }

/* Avatar placeholder */
.ph-avatar { position: relative; overflow: hidden; border-radius: 50%; }
.ph-avatar > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; z-index: 2; display: block;
}

/* Gradient palette for placeholders */
.ph-blue    { background: linear-gradient(135deg, #1D3251 0%, #2a4a76 100%); }
.ph-navy    { background: linear-gradient(135deg, #1D3251 0%, #0d1e35 100%); }
.ph-yellow  { background: linear-gradient(135deg, #333 0%, #111 100%); }
.ph-teal    { background: linear-gradient(135deg, #0d9488 0%, #059669 100%); }
.ph-purple  { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
.ph-rose    { background: linear-gradient(135deg, #db2777 0%, #e11d48 100%); }
.ph-indigo  { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.ph-dark    { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); }
.ph-warm    { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); }

/* ── SCROLL REVEAL ── */
body.will-animate .reveal      { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.will-animate .reveal.rl   { transform: translateX(-50px); }
body.will-animate .reveal.rr   { transform: translateX(50px); }
body.will-animate .reveal.rs   { transform: scale(.92); }
body.will-animate .reveal.active { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .17s; } .d3 { transition-delay: .26s; }
.d4 { transition-delay: .35s; } .d5 { transition-delay: .44s; } .d6 { transition-delay: .53s; }

/* ── CARD BASE ── */
.card {
  background: #fff; border-radius: var(--r-md);
  border: 1.5px solid #eaeff5;
  transition: var(--t-base);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

/* ── TAG / BADGE ── */
.tag      { display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.tag--blue   { background: #EEF2FF; color: var(--blue); }
.tag--yellow { background: #f0f0f0; color: #111; }
.tag--green  { background: #F0FDF4; color: #15803d; }
.tag--purple { background: #F5F3FF; color: #7c3aed; }
.tag--red    { background: #FFF5F5; color: #dc2626; }
.tag--pink   { background: #FDF2F8; color: #a21caf; }
.tag--teal   { background: #F0FDFA; color: #0d9488; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 180px 0 96px;
  background: #0a0a0a;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(0,212,255,.07) 0%, transparent 70%);
}
.page-hero::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px; background: #fff; clip-path: ellipse(55% 100% at 50% 100%); z-index: 2;
}
.page-hero--gray::after  { background: var(--gray); }
.page-hero--surface::after { background: var(--surface); }
.page-hero-inner   { position: relative; z-index: 1; }
.page-hero-dots    { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 36px 36px; will-change: transform; }
.page-hero-orb     { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.page-hero-orb-1   { width: 520px; height: 520px; top: -160px; right: -100px; background: radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%); }
.page-hero-orb-2   { width: 280px; height: 280px; bottom: -20px; left: -60px; background: radial-gradient(circle, rgba(123,97,255,.12) 0%, transparent 70%); }
.page-hero-badge   {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #00D4FF; font-size: 16px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 20px; margin-bottom: 22px;
}
.page-hero-title   { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(36px, 5vw, 62px); font-weight: 800; color: #fff; line-height: 1.08; margin-bottom: 20px; }
.page-hero-title em { color: #00D4FF; font-style: normal; }
.page-hero-sub     { font-size: clamp(14px, 1.8vw, 17px); color: rgba(255,255,255,.6); max-width: 560px; line-height: 1.8; }

/* ── BREADCRUMB ── */
.breadcrumb     { display: flex; align-items: center; gap: 8px; font-size: 16px; color: rgba(0,0,0,.45); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a   { color: rgba(0,0,0,.55); transition: color .2s; }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb-sep { color: rgba(0,0,0,.25); }
.breadcrumb span { color: var(--yellow); font-weight: 600; }

/* ══════════════════════════════════════════
   HEADER — Dark Aurora Redesign
══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes hdr-aurora-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: .7; }
  50%  { transform: translate(30px, -20px) scale(1.08); opacity: 1; }
  100% { transform: translate(-20px, 15px) scale(.95); opacity: .8; }
}
@keyframes hdr-border-glow {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
@keyframes hdr-nav-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mob-menu-in {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mob-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hdr-shimmer {
  0%   { left: -120%; }
  100% { left: 150%; }
}
@keyframes logo-pulse-ring {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes nav-ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ── BASE ── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px;
  background: transparent;
  transition: background .45s cubic-bezier(.4,0,.2,1),
              box-shadow .45s cubic-bezier(.4,0,.2,1),
              backdrop-filter .45s;
  isolation: isolate;
}

/* Aurora blobs inside header (desktop only) */
.header::before,
.header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .55s;
}
.header::before {
  width: 280px; height: 120px;
  top: -40px; left: 15%;
  background: radial-gradient(circle, rgba(6,182,212,.18) 0%, transparent 70%);
  filter: blur(40px);
  animation: hdr-aurora-drift 8s ease-in-out infinite;
}
.header::after {
  width: 220px; height: 100px;
  top: -20px; right: 18%;
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, transparent 70%);
  filter: blur(36px);
  animation: hdr-aurora-drift 10s ease-in-out infinite reverse;
}

/* On hero pages (dark bg) — show blobs immediately */
.header.on-dark::before,
.header.on-dark::after { opacity: 1; }

/* Scrolled — opaque dark glass */
.header.scrolled {
  background: rgba(3,6,13,.82);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.06),
              0 8px 40px rgba(0,0,0,.55);
}
.header.scrolled::before,
.header.scrolled::after { opacity: .7; }

/* Light-bg pages that haven't scrolled (inner pages with white hero) */
.header.on-light {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header.on-light::before,
.header.on-light::after { opacity: 0; }
.header.on-light.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 24px rgba(0,0,0,.1);
}

/* Animated bottom-border glow */
.header .hdr-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(6,182,212,.5) 30%,
    rgba(139,92,246,.5) 70%, transparent 100%);
  opacity: 0;
  transition: opacity .4s;
  animation: hdr-border-glow 4s ease-in-out infinite;
}
.header.scrolled .hdr-line { opacity: 1; }
.header.on-light .hdr-line  { display: none; }

/* ── INNER ── */
.hi {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 120px;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
.header.scrolled .hi { height: 96px; }

/* ── LOGO ── */
.logo { display: flex; align-items: center; position: relative; padding: 12px 8px; margin: 0 16px 0 0; }
.logo img {
  height: 120px; width: auto; object-fit: contain; display: block;
}

/* ── DESKTOP NAV ── */
.nav {
  display: flex; align-items: center; gap: 4px;
  animation: hdr-nav-slide-in .5s cubic-bezier(.4,0,.2,1) backwards;
}

.nav a {
  font-size: 16px; font-weight: 400;
  color: rgba(255,255,255,.75);
  transition: color .25s;
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  letter-spacing: .01em;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.nav a::before {
  content: '';
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.12) 50%, transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.nav a:hover::before { animation: hdr-shimmer .55s ease forwards; }

/* Bottom glow bar */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; right: 50%;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(34,211,238,.7);
  transition: left .3s cubic-bezier(.4,0,.2,1),
              right .3s cubic-bezier(.4,0,.2,1),
              opacity .3s;
  opacity: 0;
}
.nav a:hover, .nav a.active { color: #fff; }
.nav a:hover::after, .nav a.active::after {
  left: 14px; right: 14px; opacity: 1;
}
.nav a.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* Hover background pill */
.nav a:hover { background: rgba(255,255,255,.07); }

/* Light-mode nav adjustments */
.header.on-light .nav a          { color: rgba(0,0,0,.6); }
.header.on-light .nav a:hover,
.header.on-light .nav a.active   { color: #000; background: rgba(0,0,0,.04); }
.header.on-light .nav a::after   { background: linear-gradient(90deg, var(--blue), var(--blue)); box-shadow: none; }
.header.on-light.scrolled .nav a { color: rgba(0,0,0,.65); }

/* ── CTA BUTTON ── */
.nav-cta {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
  color: #fff !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  font-weight: 700 !important; font-size: 16px !important;
  box-shadow: 0 0 0 0 rgba(99,102,241,.4) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s, filter .3s !important;
  letter-spacing: .02em !important;
  margin-left: 8px !important;
}
.nav-cta::after  { display: none !important; }
.nav-cta::before { display: none !important; }
.nav-cta:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 24px rgba(99,102,241,.55),
              0 0 0 3px rgba(99,102,241,.2) !important;
  filter: brightness(1.12) !important;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
  color: #fff !important;
}
.nav-cta:active { transform: translateY(0) scale(.98) !important; }

/* Light-mode CTA */
.header.on-light .nav-cta {
  background: linear-gradient(135deg, var(--blue) 0%, #2a4a76 100%) !important;
  box-shadow: 0 4px 16px rgba(29,50,81,.25) !important;
}
.header.on-light .nav-cta:hover {
  box-shadow: 0 6px 24px rgba(29,50,81,.4), 0 0 0 3px rgba(29,50,81,.15) !important;
}

/* ── HAMBURGER ── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .2s;
}
.hamburger:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(34,211,238,.35);
  transform: scale(1.06);
}
.hamburger span {
  width: 22px; height: 2px;
  background: rgba(255,255,255,.85);
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .25s, background .3s, width .3s;
  border-radius: 2px;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger.open { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.4); }

/* Light mode hamburger */
.header.on-light .hamburger { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
.header.on-light .hamburger span { background: rgba(0,0,0,.7); }
.header.on-light .hamburger:hover { border-color: var(--blue); background: rgba(29,50,81,.07); }

/* ── MOBILE NAV ── */
.mob-nav {
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(3,6,13,.94);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  padding: 100px 32px 48px;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  transform: scale(.97) translateY(-8px);
  transition: opacity .38s cubic-bezier(.4,0,.2,1),
              transform .38s cubic-bezier(.4,0,.2,1),
              pointer-events 0s .38s;
  overflow: hidden;
}

/* Mobile nav aurora blobs */
.mob-nav::before {
  content: '';
  position: absolute; width: 400px; height: 400px;
  top: -80px; right: -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.12) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.mob-nav::after {
  content: '';
  position: absolute; width: 320px; height: 320px;
  bottom: -60px; left: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.1) 0%, transparent 70%);
  filter: blur(50px); pointer-events: none;
}

.mob-nav.open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0s;
}

/* Divider line */
.mob-nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 50%, transparent);
  margin: 8px 0;
}

.mob-nav a {
  color: rgba(255,255,255,.65);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 22px; font-weight: 700;
  padding: 14px 0;
  position: relative;
  display: flex; align-items: center; gap: 14px;
  transition: color .25s, transform .25s cubic-bezier(.4,0,.2,1);
  opacity: 0;
  transform: translateX(-20px);
  counter-increment: mob-link;
}

/* Number prefix */
.mob-nav a::before {
  content: counter(mob-link, decimal-leading-zero);
  font-size: 16px; font-weight: 700;
  color: rgba(34,211,238,.5);
  letter-spacing: .08em;
  min-width: 28px;
  transition: color .25s;
}

/* Arrow on hover */
.mob-nav a::after {
  content: '→';
  position: absolute; right: 0;
  font-size: 18px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s, transform .3s cubic-bezier(.4,0,.2,1);
  color: #22d3ee;
}
.mob-nav a:hover::after { opacity: 1; transform: translateX(0); }

.mob-nav a:hover, .mob-nav a.active { color: #fff; transform: translateX(6px); }
.mob-nav a:hover::before, .mob-nav a.active::before { color: #22d3ee; }
.mob-nav a.active { color: #22d3ee; }

/* Staggered animation when menu opens */
.mob-nav.open a { opacity: 1; transform: translateX(0); }
.mob-nav.open a:nth-child(1) { transition: opacity .35s .12s, transform .35s .12s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(2) { transition: opacity .35s .19s, transform .35s .19s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(3) { transition: opacity .35s .26s, transform .35s .26s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(4) { transition: opacity .35s .33s, transform .35s .33s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(5) { transition: opacity .35s .40s, transform .35s .40s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(6) { transition: opacity .35s .47s, transform .35s .47s cubic-bezier(.34,1.56,.64,1), color .25s; }

/* CTA link in mobile nav */
.mob-nav a:last-child {
  margin-top: 24px;
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff !important;
  padding: 16px 28px;
  border-radius: 12px;
  font-size: 16px;
  counter-reset: mob-link;
}
.mob-nav a:last-child::before { display: none; }
.mob-nav a:last-child::after  { display: none; }
.mob-nav a:last-child:hover   { transform: translateY(-2px) !important; filter: brightness(1.1); }

/* Reset counter on nav */
.mob-nav { counter-reset: mob-link; }

/* ══════════════════════════════════════════
   HEADER — Hide on scroll down / Show on scroll up
   + Mini tabbar when hidden
══════════════════════════════════════════ */

/* Header slides up when scrolling down */
.header.nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}
.header {
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.4,0,.2,1),
              background .45s cubic-bezier(.4,0,.2,1),
              box-shadow .45s cubic-bezier(.4,0,.2,1),
              backdrop-filter .45s;
}


/* ══════════════════════════════════════════
   FOOTER — Dark Aurora Redesign
══════════════════════════════════════════ */

@keyframes foot-aurora-a { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.1)} }
@keyframes foot-aurora-b { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,25px) scale(.92)} }
@keyframes foot-grid-fade { from{opacity:0} to{opacity:1} }
@keyframes foot-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes foot-scan    { 0%{top:-100%} 100%{top:110%} }
@keyframes foot-dot-pop { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.6);opacity:1} }
@keyframes foot-link-glow { 0%,100%{text-shadow:none} 50%{text-shadow:0 0 12px rgba(34,211,238,.55)} }

.footer {
  position: relative;
  background: #03060D;
  color: rgba(255,255,255,.55);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* ── Aurora ambient blobs ── */
.foot-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.foot-orb-1 {
  position: absolute; width: 700px; height: 700px;
  top: -200px; left: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.09) 0%, transparent 65%);
  filter: blur(80px);
  animation: foot-aurora-a 18s ease-in-out infinite;
}
.foot-orb-2 {
  position: absolute; width: 500px; height: 500px;
  bottom: -100px; right: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.08) 0%, transparent 65%);
  filter: blur(70px);
  animation: foot-aurora-b 14s ease-in-out infinite;
}
.foot-orb-3 {
  position: absolute; width: 300px; height: 300px;
  top: 40%; left: 55%; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.05) 0%, transparent 65%);
  filter: blur(60px);
  animation: foot-aurora-a 22s 4s ease-in-out infinite reverse;
}

/* Dot grid overlay */
.foot-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Scan line */
.foot-scan {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.4), rgba(139,92,246,.4), transparent);
  z-index: 0; pointer-events: none;
  animation: foot-scan 8s linear infinite;
}

/* Top border glow */
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%, rgba(6,182,212,.6) 25%,
    rgba(139,92,246,.6) 75%, transparent 100%);
}

/* ── TICKER MARQUEE ── */
.foot-ticker-wrap {
  position: relative; z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden; padding: 0;
}
.foot-ticker-track {
  display: flex; width: max-content;
  animation: foot-ticker 28s linear infinite;
}
.foot-ticker-track:hover { animation-play-state: paused; }
.foot-ticker-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 32px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  white-space: nowrap;
  transition: color .3s;
}
.foot-ticker-item:hover { color: rgba(255,255,255,.7); }
.foot-ticker-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  flex-shrink: 0;
  animation: foot-dot-pop 2s ease-in-out infinite;
}

/* ── MAIN GRID ── */
.foot-main { position: relative; z-index: 1; padding: 72px 0 56px; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 56px;
}

/* ── BRAND COLUMN ── */
.foot-brand .logo img { filter: brightness(1.1); }
.foot-brand p {
  font-size: 16px; line-height: 1.9;
  margin-top: 18px; max-width: 260px;
  color: rgba(255,255,255,.38);
}

/* Social icons */
.foot-soc { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.fsoc {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

/* Status badge */
.foot-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 7px 14px; border-radius: 40px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  color: rgba(16,185,129,.9); text-transform: uppercase;
}
.foot-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  animation: led-blink 2.5s ease-in-out infinite;
}

/* ── NAV COLUMNS ── */
.footer h5 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px; font-weight: 700;
  color: rgba(255,255,255,.25);
  margin-bottom: 22px; letter-spacing: .22em;
  text-transform: uppercase;
  position: relative; display: inline-block;
}
.footer h5::after {
  content: '';
  position: absolute; bottom: -6px; left: 0;
  width: 20px; height: 1.5px;
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  border-radius: 2px;
}

.flinks { display: flex; flex-direction: column; gap: 4px; }
.flinks a {
  font-size: 16px; color: rgba(255,255,255,.38);
  display: inline-flex; align-items: center; gap: 0;
  padding: 7px 10px 7px 0;
  border-radius: 6px;
  position: relative; overflow: hidden;
  transition: color .25s, padding-left .25s, background .25s;
}
.flinks a::before {
  content: '→';
  font-size: 16px; color: #22d3ee;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .2s, transform .25s cubic-bezier(.4,0,.2,1);
  margin-right: 0; flex-shrink: 0;
}
.flinks a:hover {
  color: rgba(255,255,255,.85);
  padding-left: 20px;
  background: rgba(255,255,255,.04);
}
.flinks a:hover::before { opacity: 1; transform: translateX(0); margin-right: 6px; }

/* ── CONTACT COLUMN ── */
.fcon { display: flex; flex-direction: column; gap: 14px; }
.fcon-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .3s, border-color .3s, transform .3s;
}
.fcon-item:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(34,211,238,.2);
  transform: translateX(4px);
}
.fcon-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.15);
}
.fcon-txt h6 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
  margin-bottom: 2px;
}
.fcon-txt p { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.65); line-height: 1.5; }

/* ── DIVIDER ── */
.foot-divider {
  position: relative; z-index: 1;
  height: 1px; margin: 0 24px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.08) 80%, transparent 100%);
}

/* ── BOTTOM BAR ── */
.foot-bot {
  position: relative; z-index: 1;
  padding: 22px 0; text-align: center;
  font-size: 16px; color: rgba(255,255,255,.22);
  letter-spacing: .04em;
}
.foot-bot a { color: rgba(34,211,238,.55); transition: color .2s; }
.foot-bot a:hover { color: #22d3ee; }

/* ── BACK TO TOP ── */
.btt {
  position: fixed; bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  background: var(--blue);
  color: #fff; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: all .35s var(--ease); z-index: 500; border: none;
  box-shadow: 0 6px 20px rgba(29,50,81,.35);
}
.btt.show  { opacity: 1; transform: translateY(0) scale(1); }
.btt:hover { background: var(--yellow); color: #fff; transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 28px rgba(0,0,0,.25); }

/* ── FORM ELEMENTS ── */
.fg { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.fg label { font-size: 16px; font-weight: 600; letter-spacing: .5px; color: #374151; }
.fg input, .fg textarea, .fg select {
  background: #fafbff; border: 1.5px solid #e0e7f3; border-radius: var(--r-sm);
  padding: 13px 16px; font-family: 'Inter', sans-serif; font-size: 16px;
  color: #1A1A2E; outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
  width: 100%;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(29,50,81,.1);
}
.fg input:hover:not(:focus), .fg textarea:hover:not(:focus), .fg select:hover:not(:focus) {
  border-color: #b8c4dd;
}
.fg input::placeholder, .fg textarea::placeholder { color: #9ca3af; }
.fg textarea { resize: vertical; min-height: 110px; }
.fg select { cursor: pointer; }
/* Dark variant — repurposed to light for new design */
.fg--dark label { color: rgba(0,0,0,.65); }
.fg--dark input, .fg--dark textarea {
  background: #fff; border-color: #dde2ea; color: #000;
}
.fg--dark input::placeholder, .fg--dark textarea::placeholder { color: #9ca3af; }
.fg--dark input:focus, .fg--dark textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(29,50,81,.1); }

/* ── PAGINATION ── */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 56px; flex-wrap: wrap; }
.pg-btn { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1.5px solid #dde3ee; background: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--t-base); color: var(--text); display: flex; align-items: center; justify-content: center; }
.pg-btn:hover, .pg-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pg-btn.pg-dots { border: none; background: transparent; cursor: default; }
.pg-btn.pg-dots:hover { background: transparent; color: var(--text); transform: none; box-shadow: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .section   { padding: 68px 0; }
  .nav       { display: none; }
  .hamburger { display: flex; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-main { padding: 52px 0 40px; }
  .page-hero { padding: 124px 0 76px; }
  /* Mobile header height */
  .hi { height: 64px; }
  .header.scrolled .hi { height: 56px; }
  /* Logo nhỏ lại trên mobile */
  .logo img { height: 60px; }
  .logo { padding: 8px 6px; margin: 0 8px 0 0; }
  /* Full-screen mobile menu top offset matches header height */
  .mob-nav { padding-top: 90px; }
}
@media (max-width: 480px) {
  .page-hero-title { font-size: 30px; }
  .btt { bottom: 16px; right: 16px; }
  .mob-nav a { font-size: 19px; }
}