/* ============================================================
   MANIFOLD FLUX — manifoldflux.com
   Deep Indigo × Electric Amber — Luxury AI Aesthetic
   ============================================================ */

:root {
  --bg:       #03040a;
  --bg2:      #06080f;
  --bg3:      #090c18;
  --card:     #0c1022;
  --card-h:   #111628;
  --bdr:      rgba(139,92,246,.12);
  --bdr-h:    rgba(139,92,246,.38);
  --bdr-a:    rgba(251,191,36,.22);

  --violet:   #8B5CF6;
  --violet-d: #6D28D9;
  --violet-l: #A78BFA;
  --amber:    #FBBF24;
  --amber-d:  #D97706;
  --amber-l:  #FDE68A;

  --txt:      #E8E4F0;
  --txt2:     #7C7A96;
  --txt3:     #2E2C44;

  --grad:     linear-gradient(135deg, #8B5CF6 0%, #FBBF24 100%);
  --gv:       linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  --ga:       linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --gvh:      linear-gradient(90deg, #8B5CF6, #A78BFA);
  --gah:      linear-gradient(90deg, #FBBF24, #FDE68A);

  --f1:       'Cormorant Garamond', Georgia, serif;
  --f2:       'Syne', sans-serif;
  --f3:       'DM Sans', sans-serif;

  --r:        10px;
  --r-lg:     16px;
  --r-xl:     22px;
  --ease:     cubic-bezier(.4,0,.2,1);
  --tr:       0.26s var(--ease);
  --tr-slow:  0.5s var(--ease);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html, body { height:100%; overflow-x:hidden }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f3);
  font-size: 14px;
  line-height: 1.6;
}
a { text-decoration:none; color:inherit }
ul { list-style:none }

/* gradient text */
.gv { background:var(--gvh); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.ga { background:var(--gah); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gg { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* mesh grid bg */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(139,92,246,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.022) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
}

/* ── LAYOUT ── */
.page {
  min-height:100vh; width:100vw;
  display:flex; flex-direction:column;
  position:relative; overflow:visible;
}
.main {
  flex:1; display:flex; align-items:stretch;
  overflow:hidden; position:relative; z-index:1;
}
.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 3.5% }

/* glow orbs */
.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px); z-index:0 }
.o1 { width:500px; height:500px; top:-180px; left:-120px; background:radial-gradient(circle,rgba(139,92,246,.09),transparent 70%) }
.o2 { width:400px; height:400px; bottom:-120px; right:-60px; background:radial-gradient(circle,rgba(251,191,36,.07),transparent 70%) }
.o3 { width:300px; height:300px; top:40%; right:10%; background:radial-gradient(circle,rgba(139,92,246,.06),transparent 70%) }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.nav {
  height:62px; display:flex; align-items:center; justify-content:space-between;
  padding:0 3.5%; z-index:100; flex-shrink:0;
  background:rgba(3,4,10,.9); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.nav.scrolled { box-shadow:0 4px 32px rgba(0,0,0,.5); border-bottom-color:rgba(139,92,246,.22) }

.logo { display:flex; align-items:center; gap:11px; transition:opacity var(--tr) }
.logo:hover { opacity:.85 }

.logo-mark {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(251,191,36,.1));
  border:1px solid rgba(139,92,246,.28);
  display:flex; align-items:center; justify-content:center;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.logo:hover .logo-mark {
  border-color:rgba(139,92,246,.55);
  box-shadow:0 0 18px rgba(139,92,246,.25);
}

.logo-text { display:flex; flex-direction:column; line-height:1 }
.logo-name {
  font-family:var(--f1); font-size:1.32rem; font-weight:700;
  letter-spacing:.01em; color:var(--txt);
}
.logo-name span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.logo-sub {
  font-family:var(--f2); font-size:.58rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(139,92,246,.65); margin-top:2px;
}

.nav-ul { display:flex; align-items:center; gap:2px }
.nav-ul a {
  font-family:var(--f2); font-size:.72rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--txt2); padding:6px 12px; border-radius:6px;
  transition:color var(--tr), background var(--tr);
}
.nav-ul a:hover, .nav-ul a.active { color:var(--violet-l); background:rgba(139,92,246,.08) }
.nav-cta {
  background:linear-gradient(135deg,var(--violet-d),var(--violet))!important;
  color:var(--txt)!important;
  -webkit-text-fill-color:var(--txt)!important;
  padding:7px 18px!important; border-radius:50px!important;
  font-weight:700!important; letter-spacing:.05em!important;
  transition:transform var(--tr), box-shadow var(--tr)!important;
}
.nav-cta:hover {
  transform:translateY(-2px)!important;
  box-shadow:0 6px 22px rgba(139,92,246,.4)!important;
}
.burger { display:none; font-size:1.2rem; cursor:pointer; color:var(--txt) }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.foot {
  height:46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 3.5%; flex-shrink:0;
  background:rgba(6,8,15,.92); border-top:1px solid var(--bdr);
  font-size:.72rem; color:var(--txt3); z-index:100;
  font-family:var(--f2);
}
.foot a { color:var(--txt3); transition:color var(--tr) }
.foot a:hover { color:var(--violet-l) }
.foot-links { display:flex; gap:18px }
.foot-right { color:var(--amber); font-weight:600 }
.foot-right a { color:var(--amber); transition:opacity var(--tr) }
.foot-right a:hover { opacity:.75 }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f2); font-weight:700; font-size:.78rem; letter-spacing:.04em;
  padding:10px 24px; border-radius:50px; cursor:pointer; white-space:nowrap;
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr);
}
.bv { background:linear-gradient(135deg,var(--violet-d),var(--violet)); color:#f0edff }
.bv:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(139,92,246,.38) }
.ba { background:linear-gradient(135deg,var(--amber-d),var(--amber)); color:#0a0804 }
.ba:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(251,191,36,.32) }
.bo { border:1px solid var(--violet); color:var(--violet-l) }
.bo:hover { background:rgba(139,92,246,.1); box-shadow:0 0 18px rgba(139,92,246,.18); transform:translateY(-1px) }
.bg_ { border:1px solid var(--bdr); color:var(--txt2) }
.bg_:hover { border-color:var(--bdr-h); color:var(--violet-l); transform:translateY(-1px) }

/* ══════════════════════════════════════
   TAG / BADGE
══════════════════════════════════════ */
.tag {
  display:inline-block; font-family:var(--f2); font-size:.6rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--violet-l);
  border:1px solid rgba(139,92,246,.28); background:rgba(139,92,246,.07);
  padding:4px 12px; border-radius:50px; margin-bottom:10px;
}
.tag-a {
  display:inline-block; font-family:var(--f2); font-size:.6rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(251,191,36,.28); background:rgba(251,191,36,.07);
  padding:4px 12px; border-radius:50px; margin-bottom:10px;
}

/* ══════════════════════════════════════
   HERO PAGE
══════════════════════════════════════ */
.hero-inner {
  display:grid; grid-template-columns:1fr 1.2fr;
  align-items:center; gap:32px;
  width:100%; padding:0 3.5%;
  position:relative; z-index:2;
}
.hbadge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f2); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(251,191,36,.28); background:rgba(251,191,36,.06);
  padding:5px 13px 5px 10px; border-radius:50px; margin-bottom:14px;
}
.hbadge .dot { width:5px; height:5px; background:var(--amber); border-radius:50%; animation:pulse 2s infinite }
.hero-l h1 {
  font-family:var(--f1); font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:700; line-height:1.08; letter-spacing:-.01em; margin-bottom:14px;
}
.hero-l p { font-size:.9rem; color:var(--txt2); line-height:1.75; margin-bottom:24px; max-width:460px }
.hbtns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px }

.flux-divider { display:flex; align-items:center; gap:10px; margin:0 0 14px }
.fd-line { flex:1; height:1px; background:linear-gradient(90deg,rgba(139,92,246,.4),transparent) }
.fd-line.rev { background:linear-gradient(90deg,transparent,rgba(139,92,246,.4)) }
.fd-text {
  font-family:var(--f2); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(139,92,246,.7); white-space:nowrap;
}

.hero-cards { display:flex; flex-direction:column; gap:8px }
.hc-strip {
  display:flex; align-items:flex-start; gap:14px;
  background:rgba(12,16,34,.7); border:1px solid var(--bdr);
  border-radius:var(--r); padding:13px 16px;
  transition:border-color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.hc-strip:hover {
  border-color:var(--bdr-h); background:var(--card-h);
  transform:translateX(5px); box-shadow:0 4px 20px rgba(139,92,246,.12);
}
.hcs-icon { font-size:1.4rem; flex-shrink:0; margin-top:2px }
.hcs-label { font-family:var(--f2); font-size:.78rem; font-weight:700; color:var(--txt); letter-spacing:.04em; margin-bottom:4px }
.hcs-val { font-family:var(--f2); font-size:.72rem; color:var(--txt2); line-height:1.6 }

/* ══════════════════════════════════════
   MANIFOLD HERO VISUAL (Canvas)
══════════════════════════════════════ */
.manifold-wrap {
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  gap:10px; min-height:360px;
}
.manifold-canvas {
  display:none; /* canvas replaced by SVG */
}
.manifold-svg-wrap {
  width:100%; flex:1;
  border-radius:var(--r-xl);
  border:1px solid rgba(139,92,246,.2);
  background:linear-gradient(160deg, rgba(12,10,30,.95) 0%, rgba(6,8,15,.98) 100%);
  overflow:hidden;
  min-height:300px;
  position:relative;
}
.manifold-svg {
  width:100%; height:100%;
  min-height:300px;
  display:block;
}
/* Top/bottom filler panels flanking the canvas */
.mf-filler {
  display:grid; gap:8px;
}
.mf-filler-top  { grid-template-columns:1fr 1fr 1fr; }
.mf-filler-bot  { grid-template-columns:1fr 1fr; }
.mf-chip {
  background:rgba(12,16,34,.8); border:1px solid var(--bdr);
  border-radius:var(--r); padding:9px 12px;
  transition:border-color var(--tr), background var(--tr), transform var(--tr);
  display:flex; align-items:center; gap:8px;
}
.mf-chip:hover {
  border-color:var(--bdr-h); background:var(--card-h);
  transform:translateY(-2px);
}
.mf-chip-icon { font-size:.9rem; flex-shrink:0 }
.mf-chip-label {
  font-family:var(--f2); font-size:.62rem; font-weight:700;
  color:var(--txt); letter-spacing:.03em; line-height:1.3;
}
.mf-chip-sub {
  font-family:var(--f2); font-size:.56rem; color:var(--txt2);
  margin-top:1px; line-height:1.3;
}
.mf-stat-chip {
  background:rgba(12,16,34,.8); border:1px solid rgba(251,191,36,.16);
  border-radius:var(--r); padding:9px 14px;
  display:flex; align-items:center; gap:10px;
  transition:border-color var(--tr), background var(--tr), transform var(--tr);
}
.mf-stat-chip:hover { border-color:rgba(251,191,36,.38); transform:translateY(-2px); background:var(--card-h) }
.mf-stat-num {
  font-family:var(--f1); font-size:1.1rem; font-weight:700;
  background:var(--gah); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; flex-shrink:0;
}
.mf-stat-label {
  font-family:var(--f2); font-size:.64rem; font-weight:700;
  color:var(--txt); letter-spacing:.04em; line-height:1.4;
}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.mq { overflow:hidden; padding:9px 0; background:var(--bg2); border-top:1px solid var(--bdr); flex-shrink:0 }
.mq-t { display:flex; gap:28px; white-space:nowrap; animation:mq 30s linear infinite; width:max-content }
.mq-t span { font-family:var(--f2); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2) }
.gem { color:var(--amber)!important; font-size:.4rem!important; vertical-align:middle }

/* ══════════════════════════════════════
   INNER PAGE HERO
══════════════════════════════════════ */
.ph {
  padding:14px 3.5% 16px; flex-shrink:0;
  border-bottom:1px solid var(--bdr);
  background:linear-gradient(180deg,rgba(139,92,246,.04),transparent);
}
.ph h1 {
  font-family:var(--f1); font-size:clamp(1.6rem,2.8vw,2.4rem);
  font-weight:700; letter-spacing:-.01em; line-height:1.1; margin-bottom:6px;
}
.ph p { font-size:.86rem; color:var(--txt2); max-width:580px; line-height:1.65 }

/* ══════════════════════════════════════
   SECTION LABELS
══════════════════════════════════════ */
.sec-label {
  font-family:var(--f2); font-size:.6rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet-l); margin-bottom:8px;
}
.sec-h {
  font-family:var(--f1); font-size:clamp(1.2rem,2vw,1.7rem);
  font-weight:700; letter-spacing:-.01em; line-height:1.15; margin-bottom:10px;
}
.sec-p { font-size:.86rem; color:var(--txt2); line-height:1.7; margin-bottom:14px }

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:18px 16px; position:relative; overflow:hidden;
  transition:border-color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gv); transform:scaleX(0); transform-origin:left;
  transition:transform var(--tr-slow);
}
.card:hover { border-color:var(--bdr-h); background:var(--card-h); transform:translateY(-4px); box-shadow:0 12px 32px rgba(139,92,246,.14) }
.card:hover::before { transform:scaleX(1) }
.card-icon { font-size:1.4rem; margin-bottom:10px }
.card h3 { font-family:var(--f1); font-size:1.05rem; font-weight:700; margin-bottom:6px; color:var(--txt) }
.card p { font-size:.8rem; color:var(--txt2); line-height:1.65 }

/* numbered card */
.ncard .num {
  font-family:var(--f1); font-size:1.6rem; font-weight:700;
  background:var(--gvh); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1; margin-bottom:8px; opacity:.45;
}
.arrow {
  display:inline-block; color:var(--amber); font-size:.78rem; font-weight:700;
  margin-top:8px; opacity:0; transform:translateX(-4px);
  transition:opacity var(--tr), transform var(--tr);
}
.card:hover .arrow { opacity:1; transform:translateX(0) }

/* srv-card / sol-card click cursor */
.srv-card, .sol-card { cursor:pointer }

/* ── INFO BOX ── */
.infobox {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:16px; transition:border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.infobox:hover { border-color:var(--bdr-h); background:var(--card-h); box-shadow:0 8px 24px rgba(139,92,246,.12) }
.iicon { font-size:1.3rem; margin-bottom:8px }
.infobox h3 { font-family:var(--f1); font-size:.95rem; font-weight:700; margin-bottom:5px; color:var(--txt) }
.infobox p { font-size:.8rem; color:var(--txt2); line-height:1.6 }

/* ── VBOX / STAT BOX ── */
.vbox {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:16px; text-align:center;
  transition:border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.vbox:hover { border-color:var(--bdr-h); background:var(--card-h); box-shadow:0 8px 24px rgba(139,92,246,.1) }
.vbox-icon { font-size:1.5rem; margin-bottom:8px }
.vbox h3 { font-family:var(--f1); font-size:.98rem; font-weight:700; margin-bottom:5px }
.vbox p { font-size:.78rem; color:var(--txt2); line-height:1.6 }
.vstat { font-family:var(--f1); font-size:1.8rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; display:block }

/* ── CTA BOX ── */
.cta-box {
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(251,191,36,.06));
  border:1px solid rgba(139,92,246,.22);
  border-radius:var(--r-xl); padding:20px 18px; text-align:center;
  position:relative; overflow:hidden;
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.cta-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad);
}
.cta-box:hover { border-color:rgba(139,92,246,.4); box-shadow:0 12px 36px rgba(139,92,246,.16); transform:translateY(-2px) }
.cta-box h2 { font-family:var(--f1); font-size:1.1rem; font-weight:700; margin-bottom:6px }
.cta-box p { font-size:.8rem; color:var(--txt2); margin-bottom:14px; line-height:1.6 }

/* ── PIPELINE STEPS ── */
.pstep {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r); margin-bottom:6px;
  border:1px solid var(--bdr); background:var(--card);
  transition:border-color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
}
.pstep:hover { border-color:var(--bdr-h); background:var(--card-h); transform:translateX(4px); box-shadow:0 4px 16px rgba(139,92,246,.1) }
.pn { font-family:var(--f1); font-size:1rem; font-weight:700; color:var(--violet); opacity:.6; flex-shrink:0; width:22px }
.pt { font-family:var(--f2); font-size:.74rem; font-weight:600; color:var(--txt); letter-spacing:.02em }

/* ── TECH CARD ── */
.tc { text-align:center }
.tc h3 { font-family:var(--f2); font-size:.82rem; letter-spacing:.04em }
.tc p { font-size:.74rem }

/* ══════════════════════════════════════
   GRIDS
══════════════════════════════════════ */
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100% }
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100% }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100% }
.g23 { display:grid; grid-template-columns:1fr 2fr; gap:20px; width:100%; align-items:start }

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(3,4,10,.82); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--tr);
}
.modal-overlay.open { opacity:1; pointer-events:all }
.modal-box {
  background:var(--bg2); border:1px solid var(--bdr-h); border-radius:var(--r-xl);
  padding:32px 28px; max-width:520px; width:90%; position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  transform:translateY(22px) scale(.97);
  transition:transform .32s var(--ease);
  overflow:hidden;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1) }
.modal-box::before {
  content:''; display:block; height:2px; background:var(--grad);
  border-radius:2px; margin-bottom:20px;
}
.modal-close {
  position:absolute; top:14px; right:16px;
  background:rgba(255,255,255,.05); border:1px solid var(--bdr); border-radius:6px;
  color:var(--txt2); font-size:.85rem; width:28px; height:28px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.modal-close:hover { background:rgba(139,92,246,.14); color:var(--violet-l); border-color:var(--bdr-h) }
.modal-icon { font-size:2rem; margin-bottom:8px }
.modal-num {
  font-family:var(--f1); font-size:1.1rem; font-weight:700; color:var(--txt3);
  line-height:1; margin-bottom:5px;
}
.modal-title {
  font-family:var(--f1); font-size:1.3rem; font-weight:700;
  letter-spacing:-.01em; margin-bottom:10px;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.modal-summary { font-size:.85rem; color:var(--txt2); line-height:1.65; margin-bottom:14px }
.modal-list { list-style:none; display:flex; flex-direction:column; gap:8px }
.modal-list li {
  font-size:.81rem; color:var(--txt2); line-height:1.6;
  padding:9px 12px 9px 34px; position:relative;
  background:var(--card); border:1px solid var(--bdr); border-radius:8px;
  transition:border-color var(--tr), background var(--tr);
}
.modal-list li:hover { border-color:var(--bdr-h); background:var(--card-h) }
.modal-list li::before {
  content:'◆'; position:absolute; left:12px; top:10px;
  font-size:.5rem; color:var(--violet-l);
}

/* ══════════════════════════════════════
   FORMS (contact)
══════════════════════════════════════ */
.form-wrap {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:26px 24px; position:relative; overflow:hidden;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.form-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad) }
.form-wrap:hover { border-color:var(--bdr-h); box-shadow:0 10px 30px rgba(139,92,246,.12) }
.form-title { font-family:var(--f1); font-size:.98rem; font-weight:700; color:var(--txt); margin-bottom:16px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:10px }
.form-group label { font-family:var(--f2); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2) }
.form-group input, .form-group select, .form-group textarea {
  background:var(--bg2); border:1px solid var(--bdr); border-radius:7px;
  padding:9px 12px; color:var(--txt); font-family:var(--f3); font-size:.84rem;
  outline:none; width:100%;
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--txt3) }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color:rgba(139,92,246,.25); background:var(--bg3) }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.14); background:var(--bg3) }
.form-group select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C7A96' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px }
.form-group select option { background:var(--bg2); color:var(--txt) }
.form-group textarea { resize:none; line-height:1.55 }
.form-submit {
  width:100%; background:linear-gradient(135deg,var(--violet-d),var(--violet));
  color:#f0edff; font-family:var(--f2); font-weight:700; font-size:.84rem;
  letter-spacing:.04em; padding:11px 24px; border:none; border-radius:50px;
  cursor:pointer; margin-top:4px;
  transition:transform var(--tr), box-shadow var(--tr);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(139,92,246,.38) }

/* ══════════════════════════════════════
   LEGAL PAGE
══════════════════════════════════════ */
.legal h2 { font-family:var(--f1); font-size:1rem; font-weight:700; color:var(--violet-l); margin:14px 0 6px }
.legal p, .legal li { font-size:.84rem; color:var(--txt2); line-height:1.75; margin-bottom:6px }
.legal ul { list-style:disc; padding-left:18px }
.legal a { color:var(--amber); transition:opacity var(--tr) }
.legal a:hover { opacity:.75 }

/* ══════════════════════════════════════
   CENTERED PAGES (404 / Thanks)
══════════════════════════════════════ */
.centered-page { flex:1; display:flex; align-items:center; justify-content:center; position:relative; z-index:2 }
.centered-card {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r-xl);
  padding:48px 44px; text-align:center; max-width:500px; width:90%;
  position:relative; overflow:hidden;
  transition:border-color var(--tr), box-shadow var(--tr);
  animation:fadeUp .7s ease both;
}
.centered-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad) }
.centered-card:hover { border-color:var(--bdr-h); box-shadow:0 20px 54px rgba(139,92,246,.18) }
.cc-icon { font-size:3rem; margin-bottom:14px }
.cc-title { font-family:var(--f1); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin-bottom:10px }
.cc-text { font-size:.88rem; color:var(--txt2); line-height:1.7; margin-bottom:20px }
.cc-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.cc-email { display:block; margin:8px auto 18px; color:var(--amber); font-family:var(--f2); font-size:.84rem; font-weight:600; transition:opacity var(--tr) }
.cc-email:hover { opacity:.72 }
.err-num { font-family:var(--f1); font-size:5rem; font-weight:700; line-height:1; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px }

/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes spinSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes fluxPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.7;transform:scale(1.04)} }

/* ══════════════════════════════════════
   MOBILE MENU
══════════════════════════════════════ */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(3,4,10,.97); flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
}
.mobile-menu.open { display:flex }
.mobile-menu a { font-family:var(--f1); font-size:1.8rem; font-weight:700; color:var(--txt); transition:color var(--tr) }
.mobile-menu a:hover { color:var(--violet-l) }
.mobile-close { position:absolute; top:20px; right:24px; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--txt2) }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
/* ── LAPTOP / SMALL DESKTOP (up to 1380px) ──
   Enables graceful scroll on smaller screens including MacBook/laptops. */
@media(max-width:1380px) {
  html,body { overflow-x:hidden; overflow-y:auto }
  .page { min-height:100vh; overflow:visible }
  .main { overflow:visible; min-height:0 }
}

@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; padding:32px 3.5% }
  .g3,.g4 { grid-template-columns:repeat(2,1fr) }
  .g23 { grid-template-columns:1fr }
}
@media(max-width:768px) {
  html,body { overflow:auto }
  .page { height:auto; min-height:100vh }
  .main { overflow:visible }
  .nav-ul { display:none }
  .burger { display:block }
  .g3,.g4 { grid-template-columns:1fr }
  .g2 { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .foot { height:auto; flex-direction:column; gap:6px; padding:10px 3.5%; text-align:center }
  .foot-links { flex-wrap:wrap; justify-content:center }
}