/* ═══════════════════════════════════════════════
   DESIGN TOKENS — SUPERFLEX 2026
═══════════════════════════════════════════════ */
:root {
  --bg:#080808; --bg-mid:#101010; --bg-card:#151515; --bg-card2:#1c1c1c;
  --accent:#CAFF00; --accent-dk:#9acc00; --accent-bg:rgba(202,255,0,.07);
  --white:#f0f0f0; --muted:#555; --muted2:#888;
  --border:#1e1e1e; --border2:#2a2a2a; --danger:#ff4455;
  --font-d:'Bebas Neue',sans-serif; --font-b:'Ubuntu',sans-serif;
  --t-hero:clamp(54px,10vw,100px); --t-h2:clamp(32px,5vw,58px);
  --t-h3:clamp(18px,3vw,26px); --t-lg:clamp(15px,1.8vw,19px);
  --t-base:15px; --t-sm:13px; --t-xs:11px;
  --hdr:60px; --ftr:46px; --r:3px; --r2:6px;
  --tr:.25s ease; --tr2:.5s ease;
}

/* ═══════════════════════════════════════════════
   TIER 4 — 2015 Flat Design
═══════════════════════════════════════════════ */
html[data-budget="4"] {
  --bg:#f7f7f7; --bg-mid:#eee; --bg-card:#fff; --bg-card2:#f0f0f0;
  --accent:#1976D2; --accent-dk:#0d47a1; --accent-bg:rgba(25,118,210,.08);
  --white:#1a1a1a; --muted:#777; --muted2:#aaa; --border:#ddd; --border2:#ccc;
  --font-d:'Ubuntu',sans-serif;
}
html[data-budget="4"] body { background:#f7f7f7; }
html[data-budget="4"] .site-header { background:#1976D2 !important; border:none; backdrop-filter:none; }
html[data-budget="4"] .logo { filter:brightness(0) invert(1); }
html[data-budget="4"] .site-nav a { color:rgba(255,255,255,.85); }
html[data-budget="4"] .nav-cta { background:#fff !important; color:#1976D2 !important; }
html[data-budget="4"] .btn-primary { border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
html[data-budget="4"] .footer-bar { background:#1976D2 !important; border-top:none; }
html[data-budget="4"] .snap-section { background:#f7f7f7; }
html[data-budget="4"] .what-bg { background:#eee; }
html[data-budget="4"] .hero { background:linear-gradient(135deg,#1976D2,#0d47a1) !important; }
html[data-budget="4"] .hero-title,
html[data-budget="4"] .hero-eyebrow { color:#fff; }
html[data-budget="4"] .hero-body { color:rgba(255,255,255,.75); }
html[data-budget="4"] .hero-title .accent { color:#CAFF00; }
html[data-budget="4"] .cluster-card { background:#fff; border-color:#ddd; }
html[data-budget="4"] .field input,
html[data-budget="4"] .field textarea,
html[data-budget="4"] .field select { background:#fff; border-color:#ddd; color:#1a1a1a; }
html[data-budget="4"] .field label { color:#777; }
html[data-budget="4"] .service-card label,
html[data-budget="4"] .radio-card label { background:#fff; border-color:#ddd; }
html[data-budget="4"] .toggle { background:#fff; border-color:#ddd; }
html[data-budget="4"] .entry-card { background:#fff; border-color:#ddd; }
html[data-budget="4"] .footer-full { background:#eee; }
html[data-budget="4"] .summary-block { background:#fff; border-color:#ddd; }
html[data-budget="4"] .cal-popup { background:#f0f0f0; border-color:#ddd; }

/* ═══════════════════════════════════════════════
   TIER 3 — 2010 Bootstrap Era
═══════════════════════════════════════════════ */
html[data-budget="3"] {
  --bg:#f5f5f5; --bg-mid:#e8e8e8; --bg-card:#fff; --bg-card2:#f0f0f0;
  --accent:#428bca; --accent-dk:#2a6496; --accent-bg:rgba(66,139,202,.1);
  --white:#333; --muted:#999; --muted2:#bbb; --border:#ddd; --border2:#ccc;
  --font-d:'Ubuntu',sans-serif; --r:4px; --r2:6px;
}
html[data-budget="3"] body { font-family:Helvetica,Arial,sans-serif !important; background:#f5f5f5; }
html[data-budget="3"] .site-header { background:linear-gradient(#3c3c3c,#222) !important; border-bottom:1px solid #080808; backdrop-filter:none; }
html[data-budget="3"] .logo { filter:brightness(0) invert(1); }
html[data-budget="3"] .site-nav a { color:#9d9d9d; }
html[data-budget="3"] .hero { background:linear-gradient(#f5f5f5,#e8e8e8) !important; }
html[data-budget="3"] .hero-title { color:#333; text-shadow:0 1px 0 #fff; }
html[data-budget="3"] .hero-body { color:#666; }
html[data-budget="3"] .btn-primary {
  background:linear-gradient(#428bca,#2a6496) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
  text-shadow:0 -1px 0 rgba(0,0,0,.25); border:1px solid #2a6496;
}
html[data-budget="3"] .snap-section { background:#f5f5f5; }
html[data-budget="3"] .snap-section:nth-child(even) { background:#e8e8e8; }
html[data-budget="3"] .what-bg { background:#e8e8e8; }
html[data-budget="3"] .footer-bar { background:#222 !important; border-top:1px solid #080808; }
html[data-budget="3"] .footer-bar-left,
html[data-budget="3"] .fbar-link { color:#9d9d9d; }
html[data-budget="3"] .cluster-card { background:#fff; border-color:#ddd; }
html[data-budget="3"] .field input,
html[data-budget="3"] .field textarea,
html[data-budget="3"] .field select { background:#fff; border-color:#ccc; color:#333; }
html[data-budget="3"] .field label { color:#999; }
html[data-budget="3"] .service-card label,
html[data-budget="3"] .radio-card label { background:#fff; border-color:#ddd; }
html[data-budget="3"] .toggle { background:#fff; border-color:#ddd; }
html[data-budget="3"] .entry-card { background:#fff; border-color:#ddd; }
html[data-budget="3"] .footer-full { background:#e8e8e8; }
html[data-budget="3"] .summary-block { background:#fff; border-color:#ddd; }
html[data-budget="3"] .cal-popup { background:#f0f0f0; border-color:#ddd; }
html[data-budget="3"] .date-display { background:#fff; border-color:#ccc; color:#333; }

/* ═══════════════════════════════════════════════
   TIER 2 — 2003 Flash / Dreamweaver Era
═══════════════════════════════════════════════ */
html[data-budget="2"] {
  --bg:#000033; --bg-mid:#000055; --bg-card:#000066; --bg-card2:#000044;
  --accent:#ffcc00; --accent-dk:#ff9900; --accent-bg:rgba(255,204,0,.1);
  --white:#fff; --muted:#aac; --muted2:#88a; --border:#00a; --border2:#00d;
  --font-d:Georgia,serif; --r:12px; --r2:20px;
}
html[data-budget="2"] body { font-family:Georgia,'Times New Roman',serif !important; background:#000033; }
html[data-budget="2"] .site-header {
  background:linear-gradient(#003399,#000033) !important;
  border-bottom:2px solid #ffcc00; backdrop-filter:none;
  box-shadow:0 0 20px rgba(0,100,255,.5);
}
html[data-budget="2"] .hero { background:radial-gradient(ellipse at 60% 40%,#0000cc,#000033 70%) !important; }
html[data-budget="2"] .hero-title { font-family:Georgia,serif; text-shadow:0 0 30px #06f,0 0 60px #03f; color:#fff; }
html[data-budget="2"] .hero-title .accent { color:#ffcc00; text-shadow:0 0 20px #f90; }
html[data-budget="2"] .btn-primary {
  background:linear-gradient(#ffee88,#ffcc00 50%,#cc9900) !important;
  border:2px outset #ffdd44 !important; border-radius:0 !important;
  color:#000 !important; box-shadow:2px 2px 8px rgba(0,0,0,.6) !important;
}
html[data-budget="2"] .snap-section { background:radial-gradient(ellipse at center,#000055,#000033); border-bottom:1px solid #00a; }
html[data-budget="2"] .what-bg { background:transparent; }
html[data-budget="2"] .footer-bar { background:linear-gradient(#003399,#000033) !important; border-top:2px solid #ffcc00; }
html[data-budget="2"] .cluster-card { background:#000066; border-color:#00a; box-shadow:0 0 8px rgba(0,100,255,.3); }
html[data-budget="2"] .field input,
html[data-budget="2"] .field textarea,
html[data-budget="2"] .field select { background:#000066; border-color:#006; box-shadow:0 0 6px rgba(0,102,255,.4) inset; color:#fff; }
html[data-budget="2"] .service-card label,
html[data-budget="2"] .radio-card label { background:#000066; border-color:#00a; }
html[data-budget="2"] .toggle { background:#000066; border-color:#00a; }
html[data-budget="2"] .entry-card { background:#000066; border-color:#00a; }
html[data-budget="2"] .footer-full { background:#000033; }
html[data-budget="2"] .summary-block { background:#000066; border-color:#00a; }
html[data-budget="2"] .cal-popup { background:#000066; border-color:#ffcc00; }
html[data-budget="2"] .date-display { background:#000066; border-color:#00a; }

/* ═══════════════════════════════════════════════
   TIER 1 — 1997 GeoCities
═══════════════════════════════════════════════ */
html[data-budget="1"] {
  --bg:#000080; --bg-mid:#000066; --bg-card:#00a; --bg-card2:#000066;
  --accent:#ff0; --accent-dk:#fa0; --accent-bg:rgba(255,255,0,.1);
  --white:#fff; --muted:#ccf; --muted2:#aad; --border:#fff; --border2:#ff0;
  --font-d:Impact,'Arial Black',sans-serif; --r:0px; --r2:0px;
}
html[data-budget="1"] body {
  font-family:'Comic Sans MS','Trebuchet MS',cursive !important;
  background:#000080 !important;
  background-image:
    radial-gradient(1px 1px at 8% 12%,#fff,transparent),
    radial-gradient(1px 1px at 23% 45%,#fff,transparent),
    radial-gradient(1px 1px at 41% 18%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 58% 72%,#fff,transparent),
    radial-gradient(1px 1px at 76% 33%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 91% 57%,#fff,transparent),
    radial-gradient(1px 1px at 14% 83%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 49% 91%,#fff,transparent) !important;
}
html[data-budget="1"] h1,
html[data-budget="1"] h2,
html[data-budget="1"] h3,
html[data-budget="1"] .step-heading { font-family:Impact,'Arial Black',sans-serif !important; animation:rainbow-txt .7s linear infinite !important; }
html[data-budget="1"] .site-header { background:#000080 !important; border-bottom:3px solid #ff0; backdrop-filter:none; }
html[data-budget="1"] .snap-section { background:#000080; border-bottom:3px ridge #ff0; }
html[data-budget="1"] .what-bg { background:transparent; }
html[data-budget="1"] .btn-primary { background:#ff0 !important; color:#000080 !important; border:3px outset #ffeeaa !important; border-radius:0 !important; font-family:Impact,sans-serif !important; text-transform:uppercase; letter-spacing:2px; }
html[data-budget="1"] .nav-cta { background:#ff0 !important; color:#000 !important; }
html[data-budget="1"] .hero { background:#000080 !important; }
html[data-budget="1"] .hero-title { color:#ff0 !important; }
html[data-budget="1"] .hero-title .accent { color:#f0f !important; }
html[data-budget="1"] .step-label { color:#f0f !important; }
html[data-budget="1"] .cluster-card { background:#00a; border:2px outset #8888ff; }
html[data-budget="1"] .field input,
html[data-budget="1"] .field textarea,
html[data-budget="1"] .field select { background:#00a; border:2px inset #8888ff; color:#fff; font-family:'Comic Sans MS',cursive; }
html[data-budget="1"] .field label { color:#ff0; }
html[data-budget="1"] .service-card label,
html[data-budget="1"] .radio-card label { background:#00a; border:2px outset #8888ff; }
html[data-budget="1"] .service-card input:checked + label,
html[data-budget="1"] .radio-card input:checked + label { background:#4444cc; border:2px inset #8888ff; }
html[data-budget="1"] .toggle { background:#00a; border:2px outset #8888ff; }
html[data-budget="1"] .entry-card { background:#00a; border:2px outset #8888ff; }
html[data-budget="1"] .footer-bar { background:#000080 !important; border-top:3px solid #ff0; }
html[data-budget="1"] .footer-full { background:#000066; }
html[data-budget="1"] .summary-block { background:#00a; border:2px outset #8888ff; }
html[data-budget="1"] .site-nav a { color:#ffeeaa; }
html[data-budget="1"] .cal-popup { background:#000066; border-color:#ff0; }
html[data-budget="1"] .date-display { background:#00a; border-color:#ff0; }
html[data-budget="1"] .range-track { background:#00a; border:2px inset #8888ff; }
html[data-budget="1"] #budgetThumb { background:#ff0; border-radius:0; }
html[data-budget="1"] .upload-zone { background:#00a; border-color:#ff0; }

/* ═══════════════════════════════════════════════
   TIER 0 — 1993 Windows 3.1 / The First Website
═══════════════════════════════════════════════ */
html[data-budget="0"] {
  --bg:#c0c0c0; --bg-mid:#d4d0c8; --bg-card:#fff; --bg-card2:#d4d0c8;
  --accent:#008080; --accent-dk:#004040; --accent-bg:rgba(0,128,128,.2);
  --white:#000; --muted:#444; --muted2:#666;
  --border:#808080; --border2:#404040;
  --font-d:'Comic Sans MS',cursive; --font-b:'Comic Sans MS',cursive;
  --r:0px; --r2:0px;
}
html[data-budget="0"] * { transition:none !important; }
html[data-budget="0"] h1,
html[data-budget="0"] h2,
html[data-budget="0"] h3,
html[data-budget="0"] .step-heading { font-family:'Comic Sans MS',cursive !important; animation:blink 1s step-end infinite, rainbow-txt .4s linear infinite !important; }
html[data-budget="0"] body { font-family:'Comic Sans MS',cursive !important; background:#c0c0c0 !important; color:#000 !important; }
html[data-budget="0"] .site-header {
  background:#c0c0c0 !important; border:none; backdrop-filter:none;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,2px 2px 0 #000;
}
html[data-budget="0"] .logo { mix-blend-mode:normal; filter:none; background:#c0c0c0; padding:2px 6px; }
html[data-budget="0"] .site-nav a { color:#000080 !important; text-decoration:underline !important; font-family:'Comic Sans MS',cursive !important; }
html[data-budget="0"] .nav-cta {
  background:#c0c0c0 !important; color:#000 !important;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf !important;
  border:none !important; border-radius:0 !important;
}
html[data-budget="0"] .snap-section { background:#c0c0c0 !important; border:2px ridge #808080; border-bottom:3px double #808080; }
html[data-budget="0"] .what-bg { background:transparent !important; }
html[data-budget="0"] .hero { background:#c0c0c0 !important; }
html[data-budget="0"] .hero-bg { display:none; }
html[data-budget="0"] .hero-img-area { display:none; }
html[data-budget="0"] .hero-title { color:#000080 !important; }
html[data-budget="0"] .hero-eyebrow { color:#008080 !important; }
html[data-budget="0"] .hero-body { color:#000 !important; }
html[data-budget="0"] .step-label { color:#000080 !important; text-decoration:underline; }
html[data-budget="0"] .step-sub { color:#333 !important; }
html[data-budget="0"] .btn,
html[data-budget="0"] .btn-primary,
html[data-budget="0"] .btn-ghost,
html[data-budget="0"] .btn-outline,
html[data-budget="0"] .btn-sm {
  background:#c0c0c0 !important; color:#000 !important;
  border:none !important; border-radius:0 !important;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf !important;
  font-family:'Comic Sans MS',cursive !important; font-weight:normal !important; text-shadow:none !important;
}
html[data-budget="0"] .btn:active,
html[data-budget="0"] .btn-primary:active,
html[data-budget="0"] .btn-ghost:active {
  box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff,inset 2px 2px 0 #404040,inset -2px -2px 0 #dfdfdf !important;
}
html[data-budget="0"] .field input,
html[data-budget="0"] .field textarea,
html[data-budget="0"] .field select {
  background:#fff !important; border:2px inset #808080 !important;
  color:#000 !important; font-family:'Courier New',monospace !important;
  box-shadow:none !important; border-radius:0 !important;
}
html[data-budget="0"] .field input:focus,
html[data-budget="0"] .field textarea:focus { border-color:#000080 !important; box-shadow:none !important; }
html[data-budget="0"] .field label { color:#000080 !important; font-family:'Comic Sans MS',cursive !important; }
html[data-budget="0"] .service-card label,
html[data-budget="0"] .radio-card label { background:#d4d0c8; border:2px groove #808080; color:#000 !important; font-family:'Comic Sans MS',cursive !important; border-radius:0 !important; }
html[data-budget="0"] .service-card input:checked + label,
html[data-budget="0"] .radio-card input:checked + label { background:#008080 !important; color:#fff !important; border:2px inset #808080 !important; }
html[data-budget="0"] .toggle { background:#d4d0c8; border:2px groove #808080; border-radius:0 !important; }
html[data-budget="0"] .toggle-track { background:#c0c0c0 !important; border-radius:0 !important; box-shadow:inset -1px -1px 0 #fff,inset 1px 1px 0 #808080 !important; }
html[data-budget="0"] .toggle-track::after { background:#c0c0c0 !important; border-radius:0 !important; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff !important; }
html[data-budget="0"] .toggle input:checked + .toggle-track { background:#008080 !important; }
html[data-budget="0"] .entry-card { background:#d4d0c8; border:2px outset #fff; border-radius:0 !important; }
html[data-budget="0"] .entry-card h3 { color:#000080 !important; font-family:'Comic Sans MS',cursive !important; }
html[data-budget="0"] .entry-card p,
html[data-budget="0"] .entry-card .entry-cta { color:#000 !important; }
html[data-budget="0"] .cluster-card { background:#d4d0c8; border:2px groove #808080; border-radius:0 !important; }
html[data-budget="0"] .cluster-name { color:#000080 !important; }
html[data-budget="0"] .cluster-heading { color:#008080 !important; }
html[data-budget="0"] .upload-zone { background:#fff; border:2px dashed #808080; border-radius:0 !important; }
html[data-budget="0"] .date-display { background:#fff; border:2px inset #808080; border-radius:0 !important; color:#000; }
html[data-budget="0"] .cal-popup { background:#d4d0c8; border:2px outset #fff; border-radius:0 !important; box-shadow:4px 4px 0 #000; }
html[data-budget="0"] .cal-nav { background:#c0c0c0; border:none; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff; border-radius:0 !important; }
html[data-budget="0"] .cal-day.selected { background:#000080 !important; color:#fff !important; }
html[data-budget="0"] .cal-day:hover { background:#d4d0c8; }
html[data-budget="0"] .range-track { background:#fff !important; border:2px inset #808080 !important; border-radius:0 !important; }
html[data-budget="0"] .range-fill { background:#008080 !important; border-radius:0 !important; }
html[data-budget="0"] #budgetThumb {
  background:#c0c0c0 !important; border-radius:0 !important;
  width:18px !important; height:18px !important;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf !important;
}
html[data-budget="0"] .footer-bar {
  background:#c0c0c0 !important; border:none;
  box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff;
}
html[data-budget="0"] .footer-bar-left,
html[data-budget="0"] .fbar-link { color:#000080 !important; text-decoration:underline !important; }
html[data-budget="0"] .fbar-email { color:#008080 !important; }
html[data-budget="0"] .footer-full { background:#c0c0c0 !important; }
html[data-budget="0"] .summary-block { background:#d4d0c8; border:2px groove #808080; border-radius:0 !important; }
html[data-budget="0"] .summary-block-title { color:#000080 !important; }
html[data-budget="0"] .summary-tag { background:rgba(0,128,128,.2); border-color:#008080; color:#000080; }
html[data-budget="0"] .budget-amount { color:#000080 !important; }
html[data-budget="0"] .tick-label { color:#444 !important; }
html[data-budget="0"] .tick-label.active { color:#000080 !important; }
html[data-budget="0"] .scroll-hint { display:none; }
html[data-budget="0"] .hero-placeholder { color:#808080 !important; }
html[data-budget="0"] .progress-bar { display:none; }
html[data-budget="0"] .marquee-bar { display:block !important; }
html[data-budget="0"] .visitor-ctr { display:block !important; }
html[data-budget="0"] .construction { display:flex !important; }
html[data-budget="0"] .deadline-opt label { background:#d4d0c8; border:2px groove #808080; border-radius:0 !important; }
html[data-budget="0"] .deadline-opt input:checked + label { background:#008080 !important; color:#fff !important; border:2px inset #808080 !important; }
html[data-budget="0"] .what-preview { display:none !important; }

/* ═══════════════════════════════════════════════
   ACTIVE FLOW — nav CTA + footer visibility
═══════════════════════════════════════════════ */
/* CTA becomes deeppink during active flow — overrides all budget tiers */
html[data-flow="new"] .nav-cta,
html[data-flow="support"] .nav-cta {
  background:deeppink !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* Footer hidden during active flow */
html[data-flow="new"] #s-footer,
html[data-flow="support"] #s-footer { display:none; }

/* Override: Contact nav link temporarily shows footer */
html.footer-force-show #s-footer { display:flex !important; }

/* ═══════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════ */
@keyframes rainbow-txt {
  0%{color:#f00} 14%{color:#f80} 28%{color:#ff0}
  42%{color:#0f0} 57%{color:#0ff} 71%{color:#00f}
  85%{color:#f0f} 100%{color:#f00}
}
@keyframes blink { 0%,49%{visibility:visible} 50%,100%{visibility:hidden} }
@keyframes marquee { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
@keyframes reveal { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(202,255,0,.4)} 50%{box-shadow:0 0 0 8px rgba(202,255,0,0)} }
@keyframes wave { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--white);
  font-family:var(--font-b); font-size:var(--t-base); line-height:1.65;
  overflow-x:hidden; transition:background var(--tr2),color var(--tr2);
}
::selection { background:var(--accent); color:#000; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }

/* ═══════════════════════════════════════════════
   MARQUEE (tier 0)
═══════════════════════════════════════════════ */
.marquee-bar {
  display:none; position:fixed; top:var(--hdr); left:0; right:0;
  background:#ff0; color:#f00; font-family:'Comic Sans MS',cursive;
  font-size:12px; font-weight:bold; padding:3px 0; z-index:9001;
  overflow:hidden; border-top:2px solid #f00; border-bottom:2px solid #f00; white-space:nowrap;
}
.marquee-inner { display:inline-block; animation:marquee 26s linear infinite; padding:0 24px; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; right:0; height:var(--hdr); z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,56px);
  background:rgba(8,8,8,.92); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background var(--tr),border-color var(--tr);
}
.logo {
  height:30px; width:auto; mix-blend-mode:screen; cursor:pointer;
  transition:opacity var(--tr);
}
.logo:hover { opacity:.8; }

/* Nav links — Bebas Neue per design update */
.site-nav { display:flex; align-items:center; gap:clamp(12px,2.5vw,36px); list-style:none; }
.site-nav a {
  color:var(--muted2); text-decoration:none;
  font-family:var(--font-d);
  font-size:clamp(16px,1.5vw,19px);
  letter-spacing:.06em; text-transform:uppercase;
  transition:color var(--tr);
}
.site-nav a:hover { color:var(--accent); }

/* CTA — full header height, bleeds 3px beyond top and bottom */
.nav-cta {
  background:var(--accent) !important;
  color:#000 !important;
  height:calc(var(--hdr) + 6px);
  margin:-3px 0;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  font-family:var(--font-d) !important;
  font-size:clamp(16px,1.5vw,19px) !important;
  letter-spacing:.06em;
  font-weight:normal !important;
  text-transform:uppercase;
  transition:background var(--tr) !important;
  border-radius:0 0 3px 3px;
}
.nav-cta:hover { background:var(--accent-dk) !important; }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.hamburger span { width:22px; height:2px; background:var(--white); display:block; border-radius:1px; transition:var(--tr); }

/* ═══════════════════════════════════════════════
   SCROLL CONTAINER & SECTIONS
   svh = stable viewport height (address bar always visible)
   proximity = snap only when naturally near a point
═══════════════════════════════════════════════ */
/* ── SCROLL SNAP ────────────────────────────────────────────
   mandatory = crisp, always lands on a section.
   Dead zone = generous padding-bottom on .section-inner so
   section height > viewport, letting user scroll through
   content freely before the next snap point enters range.
   To disable snap entirely: comment the two [SNAP] lines.
   For proximity on mobile see @media block further below.
──────────────────────────────────────────────────────────── */
.scroll-wrap {
  margin-top:var(--hdr);
  height:calc(100svh - var(--hdr) - var(--ftr));
  overflow-y:scroll;
  scroll-snap-type:y mandatory; /* [SNAP] */
  -webkit-overflow-scrolling:touch;
}

/* Base section */
/* Base section */
.snap-section {
  scroll-snap-align:start; /* [SNAP] */
  min-height:calc(100svh - var(--hdr) - var(--ftr));
  display:flex; flex-direction:column;
  padding:0 clamp(16px,6vw,80px);
  position:relative; overflow:hidden;
  transition:background var(--tr2);
}
.snap-section[data-locked] { display:none; }
.snap-section.revealed { animation:reveal .45s ease forwards; }

/* Full-viewport sections — centered content */
.snap-full { /* marker class only; centering via .section-inner margin:auto */ }

/* Step sections — extra bottom clearance so Continue button always accessible */
.snap-step { /* marker class only */ }

/* section-inner: margin:auto = visual centering when content < viewport.
   When content overflows, auto margins collapse to 0 → content starts at top. */
.section-inner {
  max-width:900px; width:100%; position:relative; z-index:1;
  margin:auto; /* vertical centering in flex column */
  padding-top:clamp(24px,4vw,60px);
  padding-bottom:clamp(24px,4vw,60px);
}
.section-inner.wide { max-width:1140px; }

/* Step sections: padding-bottom = dead zone.
   max() ensures Continue button clears the footer bar AND
   section height exceeds viewport so content is reachable
   before mandatory snap pulls to the next section. */
.snap-step .section-inner {
  padding-bottom:max(calc(var(--ftr) + 100px), 40vh);
}

/* ── MOBILE SNAP ALTERNATIVE ────────────────────────────────
   If mandatory proves too aggressive on touch devices,
   uncomment this block to switch to proximity on mobile.
   Proximity only snaps when user naturally stops near
   a snap point — much softer feel on small screens.
@media(max-width:768px) {
  .scroll-wrap { scroll-snap-type:y proximity; }
}
──────────────────────────────────────────────────────────── */
.step-label {
  font-size:var(--t-sm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:14px; display:block;
  transition:color var(--tr2);
}
.step-heading {
  font-family:var(--font-d); font-size:var(--t-h2); line-height:1;
  color:var(--white); margin-bottom:10px;
  transition:font-family var(--tr2),color var(--tr2),font-size var(--tr2);
}
.step-sub { font-size:var(--t-lg); color:var(--muted2); margin-bottom:28px; max-width:520px; line-height:1.7; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
	background:var(--bg);

	/*
	box-shadow: 0 20px 20px #000000;
    z-index: 1;
	*/
}

/* Overlaid radial vignette — gradient updated per design */
.hero-bg {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.6) 100%);
}

/* Full-bleed background video area */
.hero-img-area {
  position:absolute; inset:0; z-index:0;
  width:100%; clip-path:none;
  filter:brightness(.85) contrast(1.1);
  overflow:hidden;
}

/* Responsive hero video */
#heroVideo {
  position:absolute; left:0; right:0; top:0; bottom:0;
  width:100%; height:100%; object-fit:cover;
}

.hero-content { position:relative; z-index:2; max-width:624px; }
.hero-eyebrow {
  font-size:var(--t-sm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:18px; display:block;
}
.hero-eyebrow small { color:#999; font-size:.9em; letter-spacing:.05em; text-transform:none; }
.hero-title {
  font-family:var(--font-d); font-size:var(--t-hero); line-height:.93;
  color:var(--white); margin-bottom:14px;
  transition:font-family var(--tr2),color var(--tr2);
}
.hero-title .accent { color:var(--accent); display:block; transition:color var(--tr2); }
.accent-pink { color:deeppink; }
.hero-body { font-size:var(--t-lg); color:#f3f3f3; max-width:440px; margin-bottom:40px; line-height:1.7; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.scroll-hint {
  position:absolute; bottom:28px; left:28px;
  display:flex; flex-direction:row; align-items:center; gap:8px;
  color:var(--muted); font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; z-index:2;
}
.scroll-hint-line { width:40px; height:1px; background:linear-gradient(var(--muted),transparent); }

/* ═══════════════════════════════════════════════
   WHAT WE DO — two-column on desktop with preview panel
═══════════════════════════════════════════════ */
.what-bg { position:absolute; inset:0; background:var(--bg-mid); z-index:0; }

/* Desktop layout: cards left, preview right */
.what-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:36px;
  align-items:start;
  margin-top:28px;
}
.what-cards { } /* left column, implicit */

/* Right-side media preview panel */
.what-preview {
  position:sticky;
  top:clamp(16px,3vw,32px);
  border-radius:var(--r2);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--bg-card2);
  border:1px solid var(--border2);
}
.what-preview-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  color:var(--muted); font-size:var(--t-sm); letter-spacing:.1em;
  text-transform:uppercase; pointer-events:none; z-index:1;
  background:linear-gradient(135deg,var(--bg-card2) 0%,var(--bg-mid) 100%);
}
.what-preview-placeholder-icon { font-size:36px; opacity:.4; }
.what-preview-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2;
  opacity:0;
  transition:opacity .2s ease;
}
.what-preview-img.visible { opacity:1; }
.what-preview-overlay {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:20px 16px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  pointer-events:none;
}
.what-preview-label {
  font-family:var(--font-d); font-size:22px; color:#fff; line-height:1;
  transition:opacity .2s ease;
}

/* Cluster grid inside what-layout: 2 columns to leave room for preview */
.what-layout .cluster-grid {
  /*grid-template-columns:repeat(2,1fr);*/
  grid-template-columns:repeat(3,1fr);
}

.cluster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:28px; }
.cluster-card {
  background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r2);
  padding:22px 18px; cursor:default;
  transition:border-color var(--tr),transform var(--tr),background var(--tr2);
}
.cluster-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.cluster-icon { font-size:24px; margin-bottom:10px; }
.cluster-name { font-family:var(--font-d); font-size:20px; color:var(--white); margin-bottom:6px; line-height:1; transition:font-family var(--tr2),color var(--tr2); }
.cluster-desc { font-size:var(--t-sm); color:var(--muted2); line-height:1.5; }

@media(max-width:960px) {
  .what-layout { grid-template-columns:1fr; }
  .what-preview { display:none; }
  .what-layout .cluster-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}

/* ═══════════════════════════════════════════════
   ENTRY POINT — 3-WAY SPLIT
═══════════════════════════════════════════════ */
.entry-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:32px; }
.entry-card {
  background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r2);
  padding:32px 26px; cursor:pointer; position:relative; overflow:hidden;
  transition:all var(--tr);
}
.entry-card::before { content:''; position:absolute; inset:0; background:var(--accent-bg); opacity:0; transition:opacity var(--tr); }
.entry-card:hover::before,.entry-card.active::before { opacity:1; }
.entry-card:hover,.entry-card.active { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.4); }
.entry-icon { font-size:34px; margin-bottom:14px; display:block; }
.entry-card h3 { font-family:var(--font-d); font-size:26px; color:var(--white); margin-bottom:8px; line-height:1; }
.entry-card p { font-size:var(--t-sm); color:var(--muted2); line-height:1.5; }
.entry-cta { margin-top:20px; display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.entry-cta::after { content:'→'; transition:transform var(--tr); }
.entry-card:hover .entry-cta::after { transform:translateX(4px); }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:13px 28px;
  border-radius:var(--r); font-family:var(--font-b); font-size:var(--t-base);
  font-weight:700; text-decoration:none; border:2px solid transparent;
  transition:all .2s ease; letter-spacing:.03em; cursor:pointer;
}
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { background:var(--accent-dk); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--white); border-color:var(--border2); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:9px 20px; font-size:var(--t-sm); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

/* ═══════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════ */
.field { position:relative; margin-bottom:20px; }
.field input,.field textarea,.field select {
  width:100%; background:var(--bg-card); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--white); font-family:var(--font-b); font-size:var(--t-base);
  padding:22px 14px 8px; outline:none;
  transition:border-color var(--tr),background var(--tr2),box-shadow var(--tr);
  resize:none; appearance:none;
}
.field textarea { min-height:110px; padding-top:26px; }
.field input:focus,.field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(202,255,0,.1); }
.field label {
  position:absolute; top:15px; left:14px; font-size:var(--t-base);
  color:var(--muted2); transition:all .15s; pointer-events:none; user-select:none;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label { top:6px; font-size:var(--t-xs); color:var(--accent); letter-spacing:.05em; }
.field select { padding-top:14px; padding-bottom:14px; }
.field-select-label { top:6px !important; font-size:var(--t-xs) !important; color:var(--accent) !important; letter-spacing:.05em !important; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.char-count { position:absolute; bottom:8px; right:12px; font-size:var(--t-xs); color:var(--muted); }

/* Validation */
.field input.field-error,.field textarea.field-error { border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(255,68,85,.15) !important; }
.inline-error { font-size:var(--t-xs); color:var(--danger); margin-top:8px; display:none; }
.inline-error.show { display:block; }

/* hCaptcha container */
.captcha-wrap { margin-bottom:18px; }

.captcha-wrap {
  /*display: inline-block;*/
  overflow: hidden;
  border-radius: 6px;
  background: #111111;
  height: 71px;
  width: 297px;
  margin: 8px 0;
}

.captcha-wrap iframe {
  margin: -3px 0px 0px -3px;
  padding: 2px;
}

/* ═══════════════════════════════════════════════
   SERVICE / OPTION CARDS
═══════════════════════════════════════════════ */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-top:18px; }
.cards-grid-sm { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-top:14px; }
.service-card,.radio-card { position:relative; }
.service-card input[type=checkbox],.radio-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.service-card label,.radio-card label {
  display:flex; flex-direction:column; gap:7px; padding:14px 12px;
  border:1px solid var(--border2); border-radius:var(--r2);
  cursor:pointer; user-select:none; transition:all var(--tr);
  background:var(--bg-card); min-height:78px;
}
.service-card label:hover,.radio-card label:hover { border-color:var(--muted2); }
.service-card input:checked + label,.radio-card input:checked + label { border-color:var(--accent); background:var(--accent-bg); }
.card-icon { font-size:18px; line-height:1; }
.card-name { font-size:var(--t-sm); font-weight:700; color:var(--white); line-height:1.3; }
.card-desc { font-size:var(--t-xs); color:var(--muted2); line-height:1.4; }
.card-check {
  position:absolute; top:9px; right:9px; width:15px; height:15px;
  border-radius:50%; border:1px solid var(--border2); background:transparent;
  transition:all var(--tr); display:flex; align-items:center; justify-content:center; font-size:9px;
}
.service-card input:checked + label .card-check,
.radio-card input:checked + label .card-check { background:var(--accent); border-color:var(--accent); color:#000; }
.cluster-group { margin-bottom:26px; }
.cluster-heading { font-size:var(--t-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.cluster-heading::after { content:''; flex:1; height:1px; background:var(--border2); }

/* ═══════════════════════════════════════════════
   TOGGLE SWITCHES
═══════════════════════════════════════════════ */
.toggle {
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:13px 16px; background:var(--bg-card); border:1px solid var(--border2);
  border-radius:var(--r2); margin-bottom:10px; transition:border-color var(--tr),background var(--tr2);
}
.toggle:hover { border-color:var(--muted2); }
.toggle input[type=checkbox] { display:none; }
.toggle-track { width:42px; height:22px; background:var(--border2); border-radius:11px; position:relative; flex-shrink:0; transition:background var(--tr); }
.toggle-track::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform var(--tr); }
.toggle input:checked + .toggle-track { background:var(--accent); }
.toggle input:checked + .toggle-track::after { transform:translateX(20px); }
.toggle-label { flex:1; font-size:var(--t-base); color:var(--white); }
.toggle-sub { font-size:var(--t-xs); color:var(--muted2); margin-top:2px; }
.pill-group { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pill-group .radio-card label { flex-direction:row; padding:9px 16px; min-height:auto; align-items:center; gap:8px; border-radius:100px; }

/* ═══════════════════════════════════════════════
   DATE PICKER
═══════════════════════════════════════════════ */
.date-field-wrap { position:relative; display:inline-block; width:100%; max-width:360px; }
.date-display {
  background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font-size:var(--t-base); color:var(--muted2);
  transition:border-color var(--tr); user-select:none;
}
.date-display.has-date { color:var(--white); }
.date-display:hover,.date-display.open { border-color:var(--accent); }
.cal-popup {
  position:absolute; top:calc(100% + 8px); left:0; z-index:500;
  background:var(--bg-card2); border:1px solid var(--border2); border-radius:var(--r2);
  padding:18px; width:280px; display:none; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cal-popup.open { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav { background:none; border:1px solid var(--border2); color:var(--white); width:30px; height:30px; border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:border-color var(--tr); }
.cal-nav:hover { border-color:var(--accent); }
.cal-month-year { font-size:var(--t-base); font-weight:700; color:var(--white); }
.cal-days-header { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.cal-day-name { text-align:center; font-size:var(--t-xs); color:var(--muted2); padding:3px 0; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--r); font-size:var(--t-xs); cursor:pointer; color:var(--muted2); transition:all var(--tr); border:1px solid transparent; }
.cal-day:hover { background:var(--bg-card); color:var(--white); }
.cal-day.today { border-color:var(--border2); color:var(--white); }
.cal-day.selected { background:var(--accent); color:#000; font-weight:700; }
.cal-day.other-month { opacity:.25; cursor:default; pointer-events:none; }
.cal-day.past { opacity:.3; cursor:not-allowed; pointer-events:none; }
.deadline-type { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.deadline-opt { position:relative; }
.deadline-opt input { position:absolute; opacity:0; width:0; height:0; }
.deadline-opt label { display:flex; flex-direction:column; gap:5px; padding:14px 12px; border:1px solid var(--border2); border-radius:var(--r2); cursor:pointer; background:var(--bg-card); transition:all var(--tr); }
.deadline-opt label:hover { border-color:var(--muted2); }
.deadline-opt input:checked + label { border-color:var(--accent); background:var(--accent-bg); }
.deadline-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:var(--t-xs); background:rgba(255,68,85,.12); color:var(--danger); font-weight:700; }
.deadline-badge.flex { background:rgba(202,255,0,.1); color:var(--accent); }

/* ═══════════════════════════════════════════════
   BUDGET SLIDER
═══════════════════════════════════════════════ */
.budget-display { text-align:center; margin-bottom:8px; }
.budget-amount { font-family:var(--font-d); font-size:clamp(44px,8vw,76px); color:var(--accent); line-height:1; transition:color var(--tr2),font-family var(--tr2); }
.budget-era { font-size:var(--t-sm); color:var(--muted2); margin-top:5px; min-height:18px; transition:color var(--tr2); }
.budget-desc { font-size:var(--t-sm); color:var(--muted2); margin-top:3px; transition:color var(--tr2); }
.budget-slider-wrap { margin:32px 0 18px; position:relative; }
.budget-slider-area { transition:opacity .2s,filter .2s; }
.budget-slider-area.is-disabled { opacity:.28; filter:saturate(.1); pointer-events:none; }
.range-track-wrap { position:relative; height:6px; margin:0 12px; }
.range-track { height:6px; background:var(--border2); border-radius:3px; position:relative; overflow:hidden; transition:background var(--tr2),border var(--tr2); }
.range-fill { position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:3px; transition:width .08s,background var(--tr2); }
.range-thumb-wrap { position:absolute; top:50%; transform:translateY(-50%); transition:left .08s; z-index:2; }
#budgetThumb {
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent),0 4px 10px rgba(0,0,0,.5);
  transform:translateX(-50%); cursor:grab;
  transition:background var(--tr2),border-radius var(--tr2),box-shadow var(--tr2);
}
#budgetThumb:active { cursor:grabbing; transform:translateX(-50%) scale(1.1); }
.range-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; margin:0; height:100%; z-index:3; }
.budget-ticks { display:flex; justify-content:space-between; margin:12px 0 0; }
.budget-tick { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; max-width:calc(100%/8); }
.tick-line { width:1px; height:5px; background:var(--border2); }
.tick-label { font-size:9px; color:var(--muted); text-align:center; white-space:nowrap; transition:color var(--tr2); }
.tick-label.active { color:var(--accent); font-weight:700; }
.budget-nodeal { margin-top:18px; }

/* ═══════════════════════════════════════════════
   VISITOR COUNTER + CONSTRUCTION (tier 0)
═══════════════════════════════════════════════ */
.visitor-ctr { display:none; text-align:center; margin:18px 0; font-family:'Courier New',monospace; font-size:13px; color:#000080; }
.visitor-ctr-inner { display:inline-block; background:#fff; border:3px groove #808080; padding:6px 16px; }
.construction { display:none; align-items:center; justify-content:center; gap:14px; margin:16px 0; font-family:'Comic Sans MS',cursive; color:#f00; font-weight:bold; font-size:14px; }
.con-icon { font-size:28px; display:inline-block; animation:wave .5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════
   LOGO UPLOAD
═══════════════════════════════════════════════ */
.upload-zone { border:2px dashed var(--border2); border-radius:var(--r2); padding:36px 20px; text-align:center; cursor:pointer; transition:all var(--tr); position:relative; overflow:hidden; }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--accent); background:var(--accent-bg); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.upload-icon { font-size:32px; margin-bottom:10px; }
.upload-text { font-size:var(--t-base); color:var(--white); margin-bottom:4px; }
.upload-sub { font-size:var(--t-sm); color:var(--muted2); }
.logo-preview { margin-top:18px; display:none; align-items:center; gap:14px; padding:14px; background:var(--bg-card); border-radius:var(--r2); border:1px solid var(--border2); }
.logo-preview.show { display:flex; }
.logo-preview img { max-height:56px; max-width:180px; border-radius:var(--r); }
.logo-preview-info { flex:1; }
.logo-preview-name { font-size:var(--t-sm); font-weight:700; color:var(--white); }
.logo-preview-size { font-size:var(--t-xs); color:var(--muted2); }
.logo-remove { background:none; border:1px solid var(--border2); color:var(--muted2); padding:5px 10px; border-radius:var(--r); font-size:var(--t-xs); cursor:pointer; transition:all var(--tr); }
.logo-remove:hover { border-color:var(--danger); color:var(--danger); }

/* ═══════════════════════════════════════════════
   SUMMARY
═══════════════════════════════════════════════ */
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.summary-block { background:var(--bg-card); border:1px solid var(--border2); border-radius:var(--r2); padding:18px; transition:background var(--tr2),border-color var(--tr2); }
.summary-block-title { font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:700; }
.summary-line { display:flex; justify-content:space-between; gap:10px; font-size:var(--t-sm); padding:3px 0; border-bottom:1px solid var(--border); color:var(--muted2); }
.summary-line:last-child { border-bottom:none; }
.summary-line strong { color:var(--white); }
.summary-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.summary-tag { padding:2px 9px; background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent); border-radius:100px; font-size:var(--t-xs); }
.submit-area { margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.submit-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════ */
.progress-bar { position:fixed; top:var(--hdr); left:0; right:0; height:2px; /*background:var(--border);*/ z-index:999; }
.progress-fill { height:100%; background:var(--accent); width:0%; transition:width .4s ease; }

/* ═══════════════════════════════════════════════
   FOOTER BAR
═══════════════════════════════════════════════ */
.footer-bar {
  position:fixed; bottom:0; left:0; right:0; height:var(--ftr);
  background:rgba(8,8,8,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border); display:flex; align-items:center;
  justify-content:space-between; padding:0 clamp(16px,4vw,56px); z-index:1000;
  transition:background var(--tr),border-color var(--tr);
}
.footer-bar-left { font-size:var(--t-xs); color:var(--muted2); letter-spacing:.1em; text-transform:uppercase; }
.footer-bar-right { display:flex; align-items:center; gap:20px; }
.fbar-link { color:var(--muted2); text-decoration:none; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; transition:color var(--tr); }
.fbar-link:hover { color:var(--accent); }
.fbar-email { color:var(--accent); text-decoration:none; font-size:var(--t-sm); font-weight:700; }

/* ═══════════════════════════════════════════════
   FOOTER FULL
═══════════════════════════════════════════════ */
.footer-full { background:var(--bg-mid); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:40px; }
.footer-logo { height:28px; mix-blend-mode:screen; margin-bottom:16px; display:block; }
.footer-tagline { font-size:var(--t-sm); color:var(--muted2); max-width:280px; line-height:1.6; margin-top:14px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.footer-links a { font-size:var(--t-sm); color:var(--muted2); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; transition:color var(--tr); }
.footer-links a:hover { color:var(--accent); }
.footer-bottom { margin-top:40px; padding-top:18px; border-top:1px solid var(--border2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-copy { font-size:var(--t-xs); color:var(--muted); }

/* ═══════════════════════════════════════════════
   90s EASTER EGG MODAL
═══════════════════════════════════════════════ */
.modal-90s { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
.modal-90s.open { display:flex; }
.modal-win { background:#c0c0c0; width:min(380px,92vw); box-shadow:inset -2px -2px 0 #808080,inset 2px 2px 0 #fff,inset -4px -4px 0 #404040,inset 4px 4px 0 #dfdfdf,8px 8px 0 #000; font-family:'Comic Sans MS',cursive; }
.modal-titlebar { background:linear-gradient(90deg,#000080,#1084d0); padding:4px 8px; display:flex; align-items:center; justify-content:space-between; }
.modal-title { color:#fff; font-size:12px; font-weight:bold; font-family:'Comic Sans MS',cursive; }
.modal-close-btn { background:#c0c0c0; border:none; width:16px; height:16px; font-size:10px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#000; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff; }
.modal-body { padding:18px 22px 14px; }
.modal-icon-row { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.modal-error-icon { font-size:38px; flex-shrink:0; animation:blink 1.2s step-end infinite; }
.modal-msg { font-size:12px; color:#000; line-height:1.65; font-family:'Comic Sans MS',cursive; }
.modal-msg strong { color:#000080; }
.modal-divider { height:1px; background:#808080; margin:0 -22px 14px; box-shadow:0 1px 0 #fff; }
.modal-btns { display:flex; justify-content:center; gap:8px; }
.modal-btn { background:#c0c0c0; border:none; padding:4px 18px; font-family:'Comic Sans MS',cursive; font-size:12px; cursor:pointer; min-width:68px; box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff,inset -2px -2px 0 #404040,inset 2px 2px 0 #dfdfdf; }
.modal-btn:active { box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff,inset 2px 2px 0 #404040,inset -2px -2px 0 #dfdfdf; }

/* ═══════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════ */
.mt-sm{margin-top:10px} .mt-md{margin-top:22px} .mt-lg{margin-top:36px}
.text-accent{color:var(--accent)} .text-muted{color:var(--muted2)} .text-sm{font-size:var(--t-sm)}
.divider{height:1px;background:var(--border2);margin:24px 0}
.thanks-icon{font-size:60px;margin-bottom:22px;display:block;animation:pulse-glow 2s ease-in-out infinite}


/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:768px) {
  :root { --hdr:54px; --ftr:42px; }
  .site-nav { display:none; }
  .hamburger { display:flex; }
  .site-nav.open {
    display:flex; flex-direction:column; position:fixed;
    top:var(--hdr); left:0; right:0; background:var(--bg-card2);
    border-bottom:1px solid var(--border2);
    padding:18px clamp(16px,4vw,56px) 22px; gap:14px; z-index:999;
  }
  .field-row { grid-template-columns:1fr; }
  .summary-grid,.footer-grid,.entry-cards,.deadline-type { grid-template-columns:1fr; }
  .cluster-grid { grid-template-columns:repeat(2,1fr); }
  .hero-content { max-width:100%; }
}
@media(max-width:480px) {
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .section-inner { padding-left:2px; padding-right:2px; }
}