/* ═══════════════════════════════════════════════
   HDH AG — Design System v3
   Vibrant · Gradient · Animated · Premium
   Outfit (display) + Plus Jakarta Sans (body)
═══════════════════════════════════════════════ */

@import url('fonts/fonts.css');

/* ── TOKENS ───────────────────────────────── */
:root {
  --white:      #FFFFFF;
  --bg:         #F5F7FF;
  --bg-2:       #ECEEFF;

  /* Core — vibrant indigo/blue/cyan */
  --primary:    #4F46E5;
  --primary-2:  #6366F1;
  --primary-3:  #818CF8;
  --primary-lt: #EEF0FF;

  /* Backward-compat aliases so existing HTML var() refs still work */
  --navy:       #1E1B4B;
  --navy-2:     #2D2A7A;
  --blue:       #4F46E5;
  --blue-2:     #6366F1;
  --blue-lt:    #EEF0FF;

  /* Cyan accent */
  --cyan:       #06C6E8;
  --cyan-lt:    #CFFAFE;

  /* Violet depth */
  --violet:     #7C3AED;

  /* Gold — VISIBAL / premium */
  --gold:       #C8922A;
  --gold-2:     #E0A830;
  --gold-lt:    #FFF8E6;
  --gold-bd:    rgba(200,146,42,0.30);
  --gold-dim:   rgba(200,146,42,0.08);

  /* Text */
  --text:       #0F172A;
  --text-2:     #475569;
  --muted:      rgba(255,255,255,0.62);
  --dark:       #0F172A;

  /* Borders */
  --border:     #DCE0FF;
  --border-2:   #ECEEFF;

  /* Gradients */
  --grad:         linear-gradient(135deg, #4F46E5 0%, #06C6E8 100%);
  --grad-2:       linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #06C6E8 100%);
  --grad-hero:    linear-gradient(135deg, #4338CA 0%, #4F46E5 30%, #2563EB 65%, #06C6E8 100%);
  --grad-navy:    linear-gradient(135deg, #1E1B4B 0%, #2D2A7A 100%);
  --grad-warm:    linear-gradient(135deg, #C8922A 0%, #E0A830 100%);
  --grad-subtle:  linear-gradient(135deg, #F5F7FF 0%, #ECEEFF 50%, #D0F9FF 100%);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(79,70,229,0.08);
  --shadow-md:  0 8px 32px rgba(79,70,229,0.14);
  --shadow-lg:  0 20px 60px rgba(79,70,229,0.22);

  /* Motion */
  --ff-d:    'Outfit', system-ui, sans-serif;
  --ff-b:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ease:    cubic-bezier(0.4,0,0.2,1);
  --spring:  cubic-bezier(0.34,1.56,0.64,1);
  --r:       8px;
  --r2:      14px;
  --r3:      24px;
}

/* ── RESET ────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--ff-b);
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img { display:block; max-width:100%; }
a { color:inherit; }

/* ── TYPOGRAPHY ───────────────────────────── */
h1,h2,h3,h4 { font-family:var(--ff-d); line-height:1.1; font-weight:700; }
.label {
  font-size:0.7rem; font-family:var(--ff-d);
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--primary); font-weight:600;
  display:inline-flex; align-items:center; gap:10px;
}
.label::before {
  content:''; display:block; width:28px; height:2px;
  background:var(--grad); border-radius:2px;
}
.s-title { font-size:clamp(1.9rem,3.8vw,2.8rem); margin-top:0.9rem; color:var(--text); overflow-wrap:break-word; word-break:break-word; }
.s-sub { font-size:1rem; color:var(--text-2); max-width:520px; line-height:1.8; margin-top:0.75rem; }
.blue-bar { width:44px; height:3px; background:var(--grad); border-radius:3px; margin:1.25rem 0; }

/* ── NAV ──────────────────────────────────── */
.nav,
.nav.scrolled,
.nav.scrolled.nav-on-light,
.nav.scrolled.nav-on-dark {
  position:fixed; top:0; left:0; right:0; height:68px; z-index:900;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
  transition: transform 0.38s var(--ease);
}

/* Hide on scroll-down */
.nav.nav-hidden { transform:translateY(-100%); }

/* ── Nav over dark sections (hero / page-hero) — white text */
.nav.nav-on-dark .nav-logo-main    { color:#fff; }
.nav.nav-on-dark .nav-logo-main em { color:rgba(255,255,255,0.70); }
.nav.nav-on-dark .nav-logo-sub     { color:rgba(255,255,255,0.50); }
.nav.nav-on-dark .nav-menu a       { color:rgba(255,255,255,0.85); }
.nav.nav-on-dark .nav-menu a:hover { color:#fff; background:rgba(255,255,255,0.12); }
.nav.nav-on-dark .nav-menu a.active { color:#fff; }
.nav.nav-on-dark .nav-menu a.nav-gold { color:var(--gold-2); }
.nav.nav-on-dark .hamburger span   { background:#fff; }
.nav.nav-on-dark .nav-cta {
  background:#fff;
  border:1px solid #fff;
  color:var(--primary); box-shadow:0 2px 14px rgba(0,0,0,0.18);
}
.nav.nav-on-dark .nav-cta:hover { background:#f0f0ff; box-shadow:0 4px 20px rgba(0,0,0,0.22); transform:translateY(-1px); }

/* ── Nav over light sections — dark text */
.nav.nav-on-light .nav-logo-main    { color:var(--navy); }
.nav.nav-on-light .nav-logo-main em { color:var(--primary); }
.nav.nav-on-light .nav-logo-sub     { color:var(--text-2); }
.nav.nav-on-light .nav-menu a       { color:var(--text-2); }
.nav.nav-on-light .nav-menu a:hover { color:var(--navy); background:var(--primary-lt); }
.nav.nav-on-light .nav-menu a.active { color:var(--primary); font-weight:600; }
.nav.nav-on-light .nav-menu a.nav-gold { color:var(--gold); }
.nav.nav-on-light .hamburger span   { background:var(--navy); }
.nav.nav-on-light .nav-cta {
  background:var(--primary); border:none; color:#fff;
  box-shadow:0 4px 14px rgba(79,70,229,0.35);
}
.nav.nav-on-light .nav-cta:hover {
  background:var(--primary-2);
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(79,70,229,0.45);
}

.nav-wrap {
  max-width:1280px; margin:0 auto; padding:0 2rem;
  height:100%; display:flex; align-items:center; gap:1.5rem;
}
.nav-logo { text-decoration:none; flex-shrink:0; }
.nav-logo-main {
  font-family:var(--ff-d); font-size:1.3rem; font-weight:800;
  line-height:1; letter-spacing:-0.01em;
  transition:color 0.35s;
}
.nav-logo-sub {
  display:block; font-size:0.56rem;
  letter-spacing:0.18em; text-transform:uppercase; margin-top:3px;
  transition:color 0.35s;
}
.nav-menu {
  display:flex; align-items:center; gap:0.1rem; margin-left:auto;
}
.nav-menu a {
  text-decoration:none; font-size:0.85rem; font-weight:500;
  padding:0.4rem 0.9rem; border-radius:var(--r);
  transition:color 0.25s, background 0.25s;
}
.nav-cta {
  flex-shrink:0;
  font-size:0.84rem; font-weight:600; padding:0.55rem 1.3rem;
  border-radius:var(--r); text-decoration:none;
  transition:all 0.25s var(--ease);
}
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px; margin-left:auto; flex-shrink:0;
}
.hamburger span {
  display:block; width:22px; height:2px;
  border-radius:2px; transition:0.25s var(--ease);
}
.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); }

/* ── BUTTONS ──────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-d); font-size:0.92rem; font-weight:600;
  padding:0.85rem 2rem; border-radius:var(--r2);
  text-decoration:none; border:none; cursor:pointer;
  white-space:nowrap;
  transition:transform 0.22s var(--ease), box-shadow 0.22s var(--ease), filter 0.22s;
}
.btn-primary {
  background:var(--grad);
  background-size:200% auto;
  color:#fff;
  box-shadow:0 4px 20px rgba(79,70,229,0.38);
  transition:background-position 0.55s var(--ease), transform 0.22s, box-shadow 0.22s;
}
.btn-primary:hover {
  background-position:right center;
  transform:translateY(-2px);
  box-shadow:0 8px 38px rgba(79,70,229,0.52);
}
.btn-outline {
  background:transparent; color:var(--navy);
  border:2px solid var(--border);
}
.btn-outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-lt); transform:translateY(-1px); }
.btn-gold {
  background:var(--grad-warm); color:#fff;
  box-shadow:0 4px 16px rgba(200,146,42,0.30);
}
.btn-gold:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-sm { padding:0.6rem 1.4rem; font-size:0.84rem; }

/* ── HERO BUTTON OVERRIDES (high contrast on dark backgrounds) ── */
.page-hero .btn-primary,
.hero .btn-primary {
  background:#fff;
  background-size:unset;
  color:var(--primary);
  box-shadow:0 4px 24px rgba(0,0,0,0.22);
}
.page-hero .btn-primary:hover,
.hero .btn-primary:hover {
  background:#f0f0ff;
  background-position:unset;
  color:var(--primary-2);
  transform:translateY(-2px);
  box-shadow:0 8px 36px rgba(0,0,0,0.28);
}
.page-hero .btn-outline,
.hero .btn-outline {
  background:transparent;
  color:#fff !important;
  border:2px solid rgba(255,255,255,0.55) !important;
}
.page-hero .btn-outline:hover,
.hero .btn-outline:hover {
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.85) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.page-hero .btn-gold,
.hero .btn-gold {
  box-shadow:0 4px 24px rgba(0,0,0,0.22);
}
.btn-outline-gold {
  background:transparent; color:var(--gold);
  border:2px solid var(--gold-bd);
}
.btn-outline-gold:hover { background:var(--gold-dim); border-color:var(--gold); }
.gold-bar { width:44px; height:3px; background:var(--grad-warm); border-radius:3px; margin:1.25rem 0; }

/* ── LAYOUT ───────────────────────────────── */
.wrap    { max-width:1280px; margin:0 auto; padding:0 2rem; }
.wrap-sm { max-width:860px;  margin:0 auto; padding:0 2rem; }
.section { padding:6rem 0; }
.section-alt  { background:var(--grad-subtle); }
.section-blue { background:var(--navy); }

/* ── DIVISION PAGE HERO ───────────────────── */
.page-hero {
  height:100vh; display:flex; align-items:stretch;
  padding:9rem 0 0;
  background:var(--grad-hero);
  background-size:250% 250%;
  animation:gradShift 14s ease infinite;
  position:relative; overflow:hidden;
}

/* Animated blob */
.page-hero::before {
  content:''; pointer-events:none;
  position:absolute; width:540px; height:540px;
  top:-180px; right:-120px;
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  background:rgba(255,255,255,0.07);
  animation:blobMorph 16s ease-in-out infinite;
}

/* Watermark text */
.page-hero::after {
  content:attr(data-bg);
  position:absolute; right:-1rem; top:50%; transform:translateY(-50%);
  font-family:var(--ff-d); font-weight:800;
  font-size:clamp(6rem,16vw,12rem);
  color:rgba(255,255,255,0.055);
  pointer-events:none; white-space:nowrap; line-height:1;
}
.page-hero .wrap { width:100%; height:100%; }
.page-hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  align-items:flex-start; height:100%;
}
.page-hero-text-col {
  padding-top:0.5rem; padding-bottom:3rem;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.page-hero-img-col {
  display:flex; align-items:flex-end; justify-content:flex-end;
  align-self:stretch; position:relative;
}
.page-hero-img-wrap { position:relative; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:flex-end; }
.page-hero-img { position:absolute; bottom:0; right:0; width:104%; max-width:648px; height:auto; object-fit:contain; object-position:bottom right; display:block; filter:drop-shadow(-6px 0 32px rgba(0,0,0,0.18)); }
@media(max-width:900px) { .page-hero-grid { grid-template-columns:1fr; min-height:auto; } .page-hero-img-col { display:none; } }
.page-hero .label { color:rgba(255,255,255,0.80); }
.page-hero .label::before { background:rgba(255,255,255,0.50); }
.page-hero h1 { font-size:clamp(1.8rem,3.8vw,3.4rem); margin:0.5rem 0 0.9rem; color:#fff; line-height:1.15; }
.page-hero p { font-size:0.92rem; color:rgba(255,255,255,0.78); max-width:520px; line-height:1.75; margin-bottom:1.75rem; }
.page-hero-loc {
  display:inline-flex; align-items:center; gap:8px; margin:0.4rem 0 1rem;
  font-size:0.74rem; color:rgba(255,255,255,0.62); letter-spacing:0.14em; text-transform:uppercase;
}
.page-hero-loc::before { content:'—'; color:rgba(255,255,255,0.40); margin-right:4px; }
.back-link {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:2.5rem;
  color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.82rem;
  transition:color 0.2s;
}
.back-link:hover { color:#fff; }

/* ── FEATURE GRID ─────────────────────────── */
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem;
}
.feature-card {
  background:var(--white); border:1px solid var(--border-2);
  border-radius:var(--r2); padding:2.25rem 2rem;
  transition:transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s;
  box-shadow:var(--shadow-sm);
  position:relative; z-index:0;
}
/* Gradient border on hover via ::after pseudo */
.feature-card::after {
  content:''; pointer-events:none;
  position:absolute; inset:-1.5px;
  border-radius:calc(var(--r2) + 1.5px);
  background:var(--grad);
  opacity:0; z-index:-1;
  transition:opacity 0.35s var(--ease);
}
.feature-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 56px rgba(79,70,229,0.18);
  border-color:transparent;
}
.feature-card:hover::after { opacity:1; }
.feature-icon {
  width:48px; height:48px; border-radius:12px;
  background:var(--primary-lt);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; color:var(--primary); font-size:1.4rem;
  transition:all 0.30s var(--spring);
}
.feature-card:hover .feature-icon {
  background:var(--grad); color:#fff;
  transform:scale(1.10) rotate(-6deg);
}
.feature-title { font-family:var(--ff-d); font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:0.65rem; transition:color 0.32s var(--ease); }
.feature-desc  { font-size:0.87rem; color:var(--text-2); line-height:1.72; transition:color 0.32s var(--ease); }
.feature-card:hover .feature-title { color:#fff; }
.feature-card:hover .feature-desc  { color:rgba(255,255,255,0.78); }

/* ── FEATURE CARD IMAGE SLOT ─────────────────── */
.fc-img {
  margin:-2.25rem -2rem 1.75rem;
  width:calc(100% + 4rem);
  border-bottom:1px solid var(--border-2);
  overflow:hidden; flex-shrink:0;
  transition:filter 0.32s var(--ease);
}
.fc-img img { width:100%; height:auto; display:block; }
.feature-card:hover .fc-img i { opacity:0.55; transform:scale(1.10); }

/* ── SPEC LIST (legacy fallback) ─────────── */
.spec-list { list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.spec-item {
  padding:1.1rem 1.5rem; background:var(--white);
  border:1px solid var(--border-2); border-radius:var(--r);
  border-left:3px solid var(--primary);
  font-size:0.9rem; color:var(--text-2); line-height:1.65;
  box-shadow:var(--shadow-sm);
  transition:border-left-color 0.2s, transform 0.22s var(--ease);
}
.spec-item:hover { border-left-color:var(--cyan); transform:translateX(5px); }
.spec-item strong { color:var(--text); font-weight:600; }

/* ── SPEC CAROUSEL TIMELINE ─────────────── */
.spec-carousel {
  overflow-x:auto; padding-bottom:1.75rem; margin-top:2rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.spec-carousel::-webkit-scrollbar { height:4px; }
.spec-carousel::-webkit-scrollbar-track { background:var(--border-2); border-radius:2px; }
.spec-carousel::-webkit-scrollbar-thumb { background:var(--primary); border-radius:2px; }
.spec-track {
  display:flex; align-items:stretch; position:relative;
  padding-top:44px; gap:0;
}
.spec-track::before {
  content:''; position:absolute; top:21px; left:0; right:0;
  height:2px; background:linear-gradient(90deg,var(--primary),var(--cyan));
  z-index:0;
}
.spec-node {
  display:flex; flex-direction:column; align-items:center;
  min-width:210px; flex:1; scroll-snap-align:start;
  padding:0 1rem; position:relative;
}
.spec-dot {
  width:44px; height:44px; border-radius:50%;
  background:var(--white); border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1.1rem;
  position:absolute; top:-44px; z-index:1;
  box-shadow:0 4px 18px rgba(79,70,229,0.18);
  transition:background 0.25s, color 0.25s, box-shadow 0.25s;
}
.spec-node:hover .spec-dot { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 24px rgba(79,70,229,0.35); }
.spec-card-tl {
  background:var(--white); border:1px solid var(--border-2);
  border-radius:var(--r2); padding:1.35rem 1rem 1.25rem;
  text-align:center; box-shadow:var(--shadow-sm); width:100%; flex:1;
  transition:border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.spec-node:hover .spec-card-tl { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.spec-key-tl {
  font-family:var(--ff-d); font-size:0.72rem; font-weight:700;
  color:var(--primary); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.55rem;
}
.spec-val-tl { font-size:0.82rem; color:var(--text-2); line-height:1.65; }

/* ── SPEC CARDS GRID ──────────────────────── */
.spec-grid-new { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
.sgn-card {
  background:var(--white); border:1px solid var(--border-2); border-radius:var(--r2);
  padding:1.75rem 1.5rem 1.5rem; position:relative; overflow:hidden;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.sgn-card::before {
  content:''; position:absolute; inset:0;
  background:var(--grad);
  transform:translateY(102%); transition:transform 0.42s var(--ease);
  z-index:0;
}
.sgn-card:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(79,70,229,0.22); border-color:transparent; }
.sgn-card:hover::before { transform:translateY(0); }
.sgn-card:hover .sgn-key { color:rgba(255,255,255,0.75); }
.sgn-card:hover .sgn-val { color:rgba(255,255,255,0.88); }
.sgn-card:hover .sgn-icon { background:rgba(255,255,255,0.22); color:#fff; }
.sgn-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; margin-bottom:1rem; flex-shrink:0; position:relative; z-index:1; transition:background 0.35s, color 0.35s; }
.sgn-key { font-family:var(--ff-d); font-size:0.7rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:0.45rem; position:relative; z-index:1; transition:color 0.35s; }
.sgn-val { font-size:0.84rem; color:var(--text-2); line-height:1.72; margin:0; position:relative; z-index:1; transition:color 0.35s; }

/* ── CATALOG ARCHIVE GRID ─────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.5rem; }
@media(max-width:900px){ .cat-grid { grid-template-columns:repeat(2,1fr); } .spec-grid-new { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .cat-grid { grid-template-columns:1fr; } .spec-grid-new { grid-template-columns:1fr; } }
.cat-card {
  background:var(--white); border:1px solid var(--border-2); border-radius:var(--r2);
  padding:1.5rem; display:flex; flex-direction:column; gap:0.65rem;
  position:relative; overflow:hidden;
  transition:box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.cat-card:hover { box-shadow:var(--shadow-md); border-color:var(--primary); transform:translateY(-3px); }
.cat-year-badge {
  position:absolute; top:1.1rem; right:1.1rem;
  font-family:var(--ff-d); font-size:0.68rem; font-weight:700;
  background:var(--primary-lt); color:var(--primary); border-radius:20px; padding:3px 10px;
}
.cat-icon { width:46px; height:46px; border-radius:12px; background:var(--primary-lt); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.3rem; flex-shrink:0; }
.cat-name { font-family:var(--ff-d); font-size:0.88rem; font-weight:700; color:var(--text); line-height:1.3; }
.cat-meta { font-size:0.74rem; color:var(--text-2); line-height:1.55; }
.cat-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.25rem; }
.cat-tag { font-size:0.67rem; font-weight:600; background:var(--bg); color:var(--text-2); border-radius:20px; padding:3px 9px; border:1px solid var(--border-2); }
.cat-dl { display:inline-flex; align-items:center; gap:0.45rem; margin-top:auto; padding-top:0.75rem; font-size:0.8rem; font-weight:600; color:var(--primary); text-decoration:none; border-top:1px solid var(--border-2); }
.cat-dl:hover { color:var(--primary-2); }
.cat-dl i { font-size:1rem; }

/* ── CTA BANNER ───────────────────────────── */
.cta-banner {
  padding:6rem 0; text-align:center;
  background:var(--grad-2);
  background-size:250% 250%;
  animation:gradShift 12s ease infinite;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 80% at 15% 50%, rgba(255,255,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 35% 60% at 85% 30%, rgba(255,255,255,0.05) 0%, transparent 50%);
}
.cta-banner .label { color:rgba(255,255,255,0.65); }
.cta-banner .label::before { background:rgba(255,255,255,0.35); }
.cta-banner h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:1rem; color:#fff; }
.cta-banner p  { font-size:1rem; color:rgba(255,255,255,0.72); max-width:480px; margin:0 auto 2rem; line-height:1.85; }

/* ── FOOTER ───────────────────────────────── */
footer {
  background:linear-gradient(180deg, #1A1740 0%, #0D0B24 100%);
  padding:4rem 0 2rem;
  position:relative;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem; margin-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.f-brand-name { font-family:var(--ff-d); font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:0.5rem; }
.f-brand-name em { color:var(--cyan); font-style:normal; }
.f-brand-tag { font-size:0.82rem; color:rgba(255,255,255,0.42); line-height:1.8; margin-bottom:1.4rem; }
.f-certs { display:flex; gap:6px; flex-wrap:wrap; }
.f-cert {
  background:rgba(79,70,229,0.16); border:1px solid rgba(79,70,229,0.32);
  border-radius:var(--r); padding:3px 9px;
  font-size:0.63rem; color:var(--cyan); letter-spacing:0.07em; font-weight:500;
}
.f-col h4 {
  font-family:var(--ff-d); font-size:0.68rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--primary-3); margin-bottom:1.25rem;
}
.f-col a, .f-col p {
  display:block; font-size:0.85rem; color:rgba(255,255,255,0.42);
  text-decoration:none; margin-bottom:0.65rem; line-height:1.4;
  transition:color 0.2s;
}
.f-col a:hover { color:#fff; }
.f-bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.f-bottom p, .f-bottom a { font-size:0.75rem; color:rgba(255,255,255,0.28); text-decoration:none; transition:color 0.2s; }
.f-bottom a:hover { color:#fff; }

/* ── KEYFRAMES ────────────────────────────── */
@keyframes gradShift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
@keyframes blobMorph {
  0%,100% { border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; transform:rotate(0deg); }
  25%     { border-radius:30% 60% 70% 40% / 50% 60% 30% 60%; transform:rotate(5deg); }
  50%     { border-radius:50% 60% 30% 40% / 40% 30% 60% 50%; transform:rotate(-3deg); }
  75%     { border-radius:40% 60% 50% 30% / 60% 40% 40% 60%; transform:rotate(4deg); }
}
@keyframes blobFloat {
  0%,100% { border-radius:55% 45% 35% 65%/55% 35% 65% 45%; transform:translate(0,0) scale(1); }
  20%     { border-radius:40% 60% 60% 40%/40% 60% 40% 60%; transform:translate(28px,-36px) scale(1.07); }
  40%     { border-radius:65% 35% 45% 55%/45% 55% 35% 65%; transform:translate(-20px,26px) scale(0.93); }
  60%     { border-radius:35% 65% 55% 45%/65% 45% 55% 35%; transform:translate(36px,20px) scale(1.05); }
  80%     { border-radius:50% 50% 40% 60%/50% 40% 60% 50%; transform:translate(-24px,-14px) scale(0.97); }
}
@keyframes blobDrift {
  0%,100% { transform:translate(0,0); }
  25%     { transform:translate(-35px,45px); }
  50%     { transform:translate(25px,-40px); }
  75%     { transform:translate(45px,22px); }
}

/* ── SHARED PAGE-HERO BLOB LAYERS (injected by main.js) ────────────────────── */
.hblob { position:absolute; pointer-events:none; z-index:0; }
.phblob-1 {
  width:500px; height:500px; bottom:-140px; left:-100px;
  border-radius:55% 45% 35% 65%/55% 35% 65% 45%;
  background:rgba(99,102,241,0.09);
  animation:blobFloat 22s ease-in-out infinite;
  animation-delay:-7s;
}
.phblob-2 {
  width:360px; height:360px; top:25%; left:8%;
  border-radius:38% 62% 55% 45%/55% 38% 62% 45%;
  background:rgba(6,198,232,0.07);
  animation:blobMorph 28s ease-in-out infinite reverse;
  animation-delay:-13s;
}
@keyframes float {
  0%,100% { transform:translateY(0px); }
  50%     { transform:translateY(-12px); }
}
@keyframes spin-cw  { to { transform:rotate(360deg); } }
@keyframes spin-ccw { to { transform:rotate(-360deg); } }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0.2} }
@keyframes scan {
  0%   { top:20%; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { top:80%; opacity:0; }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 4px 20px rgba(79,70,229,0.35); }
  50%      { box-shadow:0 4px 44px rgba(79,70,229,0.65), 0 0 0 8px rgba(79,70,229,0.08); }
}
@keyframes vbfloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes slideInUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-32px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeScale {
  from { opacity:0; transform:scale(0.88); }
  to   { opacity:1; transform:scale(1); }
}

/* ── SCROLL REVEAL ────────────────────────── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.reveal.in { opacity:1; transform:none; }

.reveal-left {
  opacity:0; transform:translateX(-32px);
  transition:opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.reveal-left.in { opacity:1; transform:none; }

.reveal-right {
  opacity:0; transform:translateX(32px);
  transition:opacity 0.72s var(--ease), transform 0.72s var(--ease);
}
.reveal-right.in { opacity:1; transform:none; }

.reveal-scale {
  opacity:0; transform:scale(0.90);
  transition:opacity 0.68s var(--ease), transform 0.68s var(--spring);
}
.reveal-scale.in { opacity:1; transform:scale(1); }

.d1 { transition-delay:0.10s; }
.d2 { transition-delay:0.22s; }
.d3 { transition-delay:0.34s; }
.d4 { transition-delay:0.46s; }
.d5 { transition-delay:0.58s; }

/* ── LANGUAGE SWITCHER ───────────────────── */
.lang-switcher {
  position:relative; flex-shrink:0;
  font-family:var(--ff-d); margin-left:0.5rem;
}
.lang-btn {
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1.5px solid rgba(255,255,255,0.45);
  border-radius:24px; padding:0.42rem 0.9rem 0.42rem 0.75rem;
  font-family:var(--ff-d); font-size:0.78rem; font-weight:700;
  color:#fff; cursor:pointer; letter-spacing:0.07em;
  transition:border-color 0.2s, background 0.2s, color 0.2s;
}
.lang-btn i { font-size:0.76rem; color:rgba(255,255,255,0.75); transition:transform 0.2s, color 0.2s; }
.lang-btn:hover, .lang-btn.open {
  border-color:#fff; background:rgba(255,255,255,0.15); color:#fff;
}
.lang-btn:hover i, .lang-btn.open i { color:#fff; }
.lang-btn.open .lang-caret { transform:rotate(180deg); }
/* on light nav */
.nav.nav-on-light .lang-btn {
  border-color:var(--border-2); color:var(--text);
  background:var(--white); box-shadow:0 2px 10px rgba(79,70,229,0.10);
}
.nav.nav-on-light .lang-btn i { color:var(--text-2); }
.nav.nav-on-light .lang-btn:hover { border-color:var(--primary); color:var(--primary); }
.nav.nav-on-light .lang-btn:hover i { color:var(--primary); }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--white); border:1.5px solid var(--border-2);
  border-radius:14px; box-shadow:0 8px 40px rgba(79,70,229,0.16);
  overflow:hidden; min-width:80px;
  opacity:0; transform:translateY(-6px) scale(0.96);
  pointer-events:none;
  transition:opacity 0.18s var(--ease), transform 0.18s var(--ease);
  z-index:999;
}
.lang-menu.open { opacity:1; transform:none; pointer-events:all; }
.lang-menu button {
  display:block; width:100%; background:none; border:none;
  padding:0.65rem 1rem; font-family:var(--ff-d); font-size:0.8rem;
  font-weight:700; color:var(--text-2); cursor:pointer;
  text-align:center; letter-spacing:0.07em;
  border-bottom:1px solid var(--border-2);
  transition:background 0.15s, color 0.15s;
}
.lang-menu button:last-child { border-bottom:none; }
.lang-menu button:hover { background:var(--primary-lt); color:var(--primary); }
.lang-menu button.active { color:var(--primary); font-weight:800; }
.lang-menu button.active { color:var(--primary); background:var(--primary-lt); }


/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:1024px) {
  .footer-grid   { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  /* Hamburger dropdown — same style as lang-menu */
  .nav-wrap { position:relative; }
  .nav-menu {
    display:flex; flex-direction:column;
    position:absolute; top:calc(100% + 10px); left:0.75rem; right:0.75rem;
    background:var(--white); border:1.5px solid var(--border-2);
    border-radius:14px; box-shadow:0 8px 40px rgba(79,70,229,0.16);
    padding:0.4rem; gap:0; z-index:800;
    opacity:0; transform:translateY(-8px) scale(0.97);
    pointer-events:none;
    transition:opacity 0.18s var(--ease), transform 0.18s var(--ease);
  }
  .nav-menu.open { opacity:1; transform:none; pointer-events:all; }
  /* Always dark text inside the white dropdown regardless of hero state */
  .nav .nav-menu a,
  .nav.nav-on-dark .nav-menu a { color:var(--text-2) !important; }
  .nav-menu a {
    font-size:0.9rem; padding:0.75rem 1rem;
    border-bottom:none; border-radius:10px;
    font-weight:500; transition:background 0.15s, color 0.15s;
  }
  .nav-menu a:hover                          { background:var(--primary-lt); color:var(--primary) !important; }
  .nav-menu a.active                         { color:var(--primary) !important; background:var(--primary-lt); font-weight:600; }
  .nav-menu a.nav-gold,
  .nav.nav-on-dark .nav-menu a.nav-gold      { color:var(--gold) !important; }
  .nav-menu a.nav-gold:hover                 { background:var(--gold-dim); }
  .nav-cta    { display:none; }
  .hamburger  { display:flex; }
  .footer-grid   { grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; padding-bottom:1.75rem; margin-bottom:1.25rem; }
  .footer-grid > *:first-child { grid-column:1 / -1; }
  footer { padding:2.5rem 0 1.5rem; }
  .f-brand-tag  { font-size:0.75rem; margin-bottom:0.85rem; }
  .f-col h4     { margin-bottom:0.75rem; font-size:0.63rem; }
  .f-col a, .f-col p { font-size:0.78rem; margin-bottom:0.45rem; }
  .f-certs      { gap:4px; }
  .f-cert       { font-size:0.58rem; padding:2px 7px; }
  .features-grid { grid-template-columns:1fr; }
  .wrap, .wrap-sm { padding:0 1.25rem; }
  .section     { padding:4rem 0; }
  .page-hero   { padding:7rem 0 4rem; }
  .page-hero::before,
  .page-hero::after { display:none; }
  .cta-banner  { padding:4rem 0; }
}
@media (max-width:480px) {
  .btn { width:100%; justify-content:center; }
}

/* ════════════════════════════════════════════════
   ENHANCED INTERACTIONS v2
   ════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR ─────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:9999; background:var(--grad);
  transform-origin:left; transform:scaleX(0);
  transition:transform 0.08s linear; pointer-events:none;
}

/* ── CURSOR GLOW ─────────────────────────────── */
.cursor-glow {
  position:fixed; pointer-events:none; z-index:0;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,70,229,0.10) 0%, transparent 70%);
  top:-200px; left:-200px; will-change:transform;
  transition:width 0.4s var(--ease), height 0.4s var(--ease),
             top 0.4s var(--ease), left 0.4s var(--ease),
             background 0.4s;
}
.cursor-glow.expand {
  width:520px; height:520px; top:-260px; left:-260px;
  background:radial-gradient(circle, rgba(79,70,229,0.14) 0%, rgba(6,198,232,0.05) 45%, transparent 70%);
}
@media(hover:none){ .cursor-glow { display:none; } }

/* ── BUTTON RIPPLE ───────────────────────────── */
.btn-ripple {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.42);
  transform:translate(-50%,-50%) scale(0);
  animation:rippleAnim 0.55s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim {
  to { transform:translate(-50%,-50%) scale(70); opacity:0; }
}

/* ── NAV UNDERLINE SLIDE ─────────────────────── */
.nav-menu a { position:relative; }
.nav-menu a::after {
  content:''; position:absolute; bottom:3px;
  left:0.9rem; right:0.9rem; height:2px;
  background:var(--grad); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s var(--ease);
}
.nav-menu a:hover::after,
.nav-menu a.active::after { transform:scaleX(1); }
.nav-menu a.nav-gold::after { background:var(--grad-warm); }

/* ── FOOTER SOCIAL ICONS ─────────────────────── */
.f-social { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1.5rem; }
.f-social-link {
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.11);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.48); font-size:1.1rem; text-decoration:none;
  transition:all 0.22s var(--ease);
}
.f-social-link:hover {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(79,70,229,0.42);
}
.f-social-link.yt:hover  { background:#FF0000; border-color:#FF0000; box-shadow:0 8px 22px rgba(255,0,0,0.32); }
.f-social-link.fb:hover  { background:#1877F2; border-color:#1877F2; box-shadow:0 8px 22px rgba(24,119,242,0.32); }
.f-social-link.wa:hover  { background:#25D366; border-color:#25D366; box-shadow:0 8px 22px rgba(37,211,102,0.32); }
.f-social-link.ig:hover  {
  background:radial-gradient(circle at 28% 108%, #fdf497 0%, #fd5949 45%, #d6249f 58%, #285AEB 90%);
  border-color:#d6249f; box-shadow:0 8px 22px rgba(214,36,159,0.35);
}

/* ── FEATURE CARD SHIMMER ────────────────────── */
.feature-card {
  overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.065) 50%,
    transparent 70%
  );
  background-size:200% 100%; background-position:200% 0;
  transition:background-position 0.65s ease; pointer-events:none; z-index:1;
}
.feature-card:hover::before { background-position:-100% 0; }

/* ── STAGGER GROUP ───────────────────────────── */
.stagger > * {
  opacity:0; transform:translateY(22px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stagger.in > * { opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:0.04s; }
.stagger.in > *:nth-child(2){ transition-delay:0.12s; }
.stagger.in > *:nth-child(3){ transition-delay:0.20s; }
.stagger.in > *:nth-child(4){ transition-delay:0.28s; }
.stagger.in > *:nth-child(5){ transition-delay:0.36s; }
.stagger.in > *:nth-child(6){ transition-delay:0.44s; }
.stagger.in > *:nth-child(n+7){ transition-delay:0.52s; }

/* ── SPEC ITEM SLIDE ─────────────────────────── */
.spec-item {
  transition:border-left-color 0.2s, transform 0.22s var(--ease),
             opacity 0.45s var(--ease);
}

/* ── WILL-CHANGE PERF HINTS ──────────────────── */
.div-card, .feature-card, .contact-card, .svc-card,
.podcast-card, .dl-card { will-change:transform; }

/* ── BACK TO TOP ─────────────────────────────── */
.btt {
  position:fixed; bottom:1.5rem; right:1.25rem; z-index:700;
  width:42px; height:42px; border-radius:50%;
  background:var(--primary); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 16px rgba(79,70,229,0.35);
  opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none;
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.btt.visible { opacity:1; transform:none; pointer-events:all; }
.btt:hover { background:var(--primary-2); transform:translateY(-2px); box-shadow:0 6px 24px rgba(79,70,229,0.50); }

/* ── Q-ITEM ACCORDION ───────────────────────── */
.q-item { cursor:pointer; }
.q-head { display:flex; align-items:flex-start; gap:0.75rem; }
.q-chevron {
  width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-left:auto;
  background:var(--primary-lt); color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.7rem; margin-top:3px;
  transition:transform 0.25s var(--ease), background 0.2s;
}
.q-item.open .q-chevron { transform:rotate(180deg); background:var(--primary); color:#fff; }
.q-body {
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height 0.32s ease, opacity 0.28s ease;
  padding-top:0;
}
.q-item.open .q-body { max-height:200px; opacity:1; padding-top:0.65rem; }

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE FIX LAYER v3
   ═══════════════════════════════════════════════ */

/* ── RESPONSIVE UTILITY GRID CLASSES ──────────
   Add .rg-2 / .rg-3 / .rg-4 / .rg-5 to inline-
   styled grids. !important beats inline styles.
   ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .rg-4, .rg-5 { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:768px) {
  .rg-2         { grid-template-columns:1fr !important; }
  .rg-3         { grid-template-columns:1fr 1fr !important; }
  /* page-hero: auto height prevents content clipping on mobile */
  .page-hero    { height:auto !important; min-height:100svh; }
  /* VISIBAL floating widgets — reposition inside image bounds on mobile
     (negative left/right offsets cause overflow at desktop layout)      */
  .vsfw {
    display:flex !important;
    z-index:3 !important;
    padding:0.3rem 0.65rem 0.3rem 0.35rem !important;
    gap:0.35rem !important;
    animation:none !important;
  }
  .vsfw-icon  { width:26px !important; height:26px !important; font-size:0.75rem !important; }
  .vsfw-label { font-size:0.64rem !important; }
  .vsfw-val   { font-size:0.56rem !important; }
  .vsfw-ring  { display:none !important; }
  /* Show 4 corner widgets, hide the mid-left/mid-right pair */
  .vsfw-3, .vsfw-4 { display:none !important; }
  .vsfw-1 { top:4%  !important; left:2% !important;         right:auto !important; }
  .vsfw-2 { top:4%  !important; left:auto !important;       right:2% !important;  }
  .vsfw-5 { bottom:20% !important; left:2% !important;      right:auto !important; }
  .vsfw-6 { bottom:10% !important; left:auto !important;    right:2% !important;  }
}
@media (max-width:768px) {
  .hero-visual  { margin:0 auto !important; max-height:none !important; }
}
@media (max-width:600px) {
  .rg-3, .rg-4, .rg-5 { grid-template-columns:1fr !important; }
  .hero-visual  { width:calc(100% + 3rem) !important; margin:0 -1.5rem !important; max-height:none !important; overflow:visible !important; }
  .hero-team-img { width:100% !important; height:auto !important; display:block; }
  .s-title { font-size:clamp(1.35rem,5.5vw,1.9rem); }
  .s-sub  { font-size:0.88rem; line-height:1.7; }
  .page-hero { padding:5rem 0 2.5rem !important; }
  /* ── Global card compaction on phones ── */
  .section       { padding:3rem 0; }
  .feature-card  { padding:1.25rem 1rem; }
  .fc-img        { margin:-1.25rem -1rem 1.25rem; width:calc(100% + 2rem); }
  .feature-icon  { width:40px; height:40px; margin-bottom:0.85rem; font-size:1.2rem; }
  .feature-title { font-size:0.95rem; }
  .feature-desc  { font-size:0.82rem; }
  .spec-item     { padding:0.7rem 1rem; font-size:0.84rem; }
  .sgn-card      { padding:1.1rem 1rem 1rem; }
  .sgn-icon      { width:36px; height:36px; margin-bottom:0.6rem; font-size:1rem; }
  .cat-card      { padding:1rem; }
}