/* ══════════════════════════════════════════════════════════════════════
   WISEPARADOX BRAND SYSTEMS — v0.4 "FROM THE FUTURE" DESIGN LANGUAGE
   Layered over style.css. Structure, layout and behaviour are untouched;
   this file re-skins only.

   CONTRACT 5 SAFETY: app.js writes --ink/--panel/--raised/--line/--text/
   --muted/--faint/--signal/--preview-accent/--preview-dark/--brand-display
   inline onto :root after generation to re-theme the page into the
   CUSTOMER's brand. Every rule here consumes those tokens rather than
   hard-coding colour, so the customer re-theme still drives the page.
   Fixed WiseParadox chrome uses the separate --wp-* / --data tokens.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. TYPE: Audiowide display · Inter body · JetBrains Mono data ── */
@font-face{font-family:Audiowide;src:url("font-library/display-audiowide.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("font-library/mono-jetbrainsmono.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* space-grade base */
  --ink:#05080F;
  --void:#03050A;
  --panel:rgba(13,20,42,.62);
  --raised:rgba(20,30,58,.72);
  --line:rgba(126,166,255,.16);
  --text:#E8EDFB;
  --muted:#9DABCB;
  --faint:#63728F;

  /* WiseParadox brand FIRST — purple primary, violet accent */
  --wp-purple:#5A189A;
  --wp-accent:#9D4EDD;
  /* cyan = the data/tech accent (HUD energy) */
  --data:#00E5FF;

  /* --signal is the brand-accent slot app.js overwrites per customer */
  --signal:#9D4EDD;
  --danger:#FF6B8A;

  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:Inter,"Helvetica Neue",Arial,"Segoe UI",sans-serif;
  --cond:Audiowide,"Barlow Condensed","Arial Narrow",Arial,sans-serif;

  --glass:blur(16px) saturate(140%);
  --hud:1px solid var(--line);
  --glow:0 0 0 1px color-mix(in srgb,var(--signal) 26%,transparent),0 0 28px -6px color-mix(in srgb,var(--signal) 45%,transparent);
}

/* ── 2. BASE CANVAS: deep space, no scanline stripe on body ── */
body{
  background:var(--ink);
  background-image:
    radial-gradient(1100px 620px at 78% -8%,color-mix(in srgb,var(--wp-purple) 30%,transparent),transparent 62%),
    radial-gradient(880px 520px at 4% 104%,color-mix(in srgb,var(--data) 12%,transparent),transparent 60%),
    linear-gradient(180deg,#05080F,#070B18 45%,#05080F);
  background-attachment:fixed;
}
/* after generation the customer's palette owns the page — drop our purple wash */
body.brand-generated{background-image:
  radial-gradient(1100px 620px at 78% -8%,color-mix(in srgb,var(--signal) 22%,transparent),transparent 62%),
  linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 88%,var(--signal)) 50%,var(--ink));}

/* The data-bits network canvas sits behind everything.
   z-index:-1 puts it above the body background but below all in-flow
   content, so no sibling needs promoting. (Do NOT promote siblings with
   `body>*{position:relative}` — that clobbers .skip's position:absolute
   and the off-screen skip link then takes up flow space.) */
#datanet{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85}

/* ── 3. DISPLAY TYPE — Audiowide is WIDE; retune sizes so nothing overflows ── */
.hero h1,.section-head h1,.delivery h1,.preview-head h1,
.generating h1,.preview-section>h2,.context-preview h2,
.website-preview__intro h2,.website-upsell h3{
  font-family:var(--cond);
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  hyphens:none;
}
.hero h1{font-size:clamp(2.05rem,5.1vw,4.1rem);line-height:1.04}
.section-head h1{font-size:clamp(1.95rem,4.4vw,3.5rem);line-height:1.06}
.delivery h1{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.08}
.generating h1{font-size:clamp(1.85rem,4.6vw,3.3rem);line-height:1.08;margin:12px 0}
.preview-head h1{font-size:clamp(1.9rem,5.2vw,4.6rem);line-height:1.02}
.preview-section>h2,.context-preview h2{font-size:clamp(1.5rem,3.3vw,2.6rem);line-height:1.1}
.website-preview__intro h2{font-size:clamp(1.5rem,3.2vw,2.9rem);line-height:1.08;letter-spacing:-.01em}
.website-upsell h3{font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.12}
.hero h1 em{color:var(--signal);font-style:normal;text-shadow:0 0 34px color-mix(in srgb,var(--signal) 55%,transparent)}

/* headline scanline shimmer */
.hero h1,.section-head h1,.preview-head h1,.delivery h1{position:relative}
.hero h1::after,.section-head h1::after,.preview-head h1::after,.delivery h1::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(232,237,251,.055) 3px 4px);
  mix-blend-mode:overlay;animation:v04-shimmer 7s linear infinite;
}
@keyframes v04-shimmer{from{background-position:0 0}to{background-position:0 44px}}

.eyebrow{color:var(--data);font-family:var(--mono);letter-spacing:.18em;
  text-shadow:0 0 18px color-mix(in srgb,var(--data) 45%,transparent)}
body.brand-generated .eyebrow{color:var(--signal);text-shadow:0 0 18px color-mix(in srgb,var(--signal) 45%,transparent)}
.lede{color:#C3CCE4}

/* ── 4. GLASSMORPHIC PANELS + hairline neon borders ── */
.signal-card,.palette-card,.concept-card,.font-card,.custom-palette,
.choice-contract,.package,.website-upsell,.palette-lock,.mock,
.regenerate,.type-lock span,.scanner{
  background:var(--panel);
  -webkit-backdrop-filter:var(--glass);
  backdrop-filter:var(--glass);
  border:var(--hud);
  border-radius:12px;
}
.signal-card,.palette-card,.concept-card,.font-card{
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 44px -28px rgba(0,0,0,.9);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.palette-card:hover,.concept-card:hover,.font-card:hover,
.palette-card[aria-checked=true],.concept-card[aria-checked=true],.font-card[aria-checked=true]{
  border-color:color-mix(in srgb,var(--signal) 70%,transparent);
  box-shadow:var(--glow);
  transform:translateY(-2px);
}
.palette-card,.concept-card,.font-card,.custom-palette,.package{overflow:hidden}
.signal-card.active{border-color:color-mix(in srgb,var(--data) 55%,transparent);
  background:linear-gradient(130deg,color-mix(in srgb,var(--wp-purple) 26%,var(--panel)),var(--panel));
  box-shadow:0 0 34px -12px color-mix(in srgb,var(--data) 60%,transparent)}

/* ── 5. HUD CORNER BRACKETS on key panels ── */
.signal-card,.choice-contract,.palette-lock,.scanner,.website-upsell,.regenerate,.package{position:relative}
.signal-card::before,.signal-card::after,
.choice-contract::before,.choice-contract::after,
.palette-lock::before,.palette-lock::after,
.scanner::before,.scanner::after,
.website-upsell::before,.website-upsell::after,
.regenerate::before,.regenerate::after,
.package::before,.package::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:color-mix(in srgb,var(--data) 78%,transparent);border-style:solid;border-width:0;
}
.signal-card::before,.choice-contract::before,.palette-lock::before,
.website-upsell::before,.regenerate::before,.package::before{
  top:-1px;left:-1px;border-top-width:1px;border-left-width:1px;border-radius:12px 0 0 0}
.signal-card::after,.choice-contract::after,.palette-lock::after,
.website-upsell::after,.regenerate::after,.package::after{
  bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px;border-radius:0 0 12px 0}
body.brand-generated .signal-card::before,body.brand-generated .signal-card::after,
body.brand-generated .choice-contract::before,body.brand-generated .choice-contract::after,
body.brand-generated .palette-lock::before,body.brand-generated .palette-lock::after,
body.brand-generated .website-upsell::before,body.brand-generated .website-upsell::after,
body.brand-generated .regenerate::before,body.brand-generated .regenerate::after,
body.brand-generated .package::before,body.brand-generated .package::after{
  border-color:color-mix(in srgb,var(--signal) 78%,transparent)}
/* the scanner keeps its own round rings — override the generic bracket */
.scanner::before,.scanner::after{border-width:1px;border-radius:50%;width:auto;height:auto;
  inset:22px;top:auto;left:auto;bottom:auto;right:auto;border-color:color-mix(in srgb,var(--data) 30%,transparent)}
.scanner::after{inset:55px}

/* ── 6. TOPBAR / PROGRESS — HUD rail ── */
.topbar{
  background:linear-gradient(180deg,rgba(5,8,15,.94),rgba(5,8,15,.72));
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  border-bottom:var(--hud);position:sticky;top:0;
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--data),color-mix(in srgb,var(--wp-accent) 90%,transparent),transparent);
  opacity:.65}
.lockup img{filter:none;opacity:.96}
.service-label{color:var(--data);border-left-color:var(--line);letter-spacing:.2em}
.progress{background:rgba(4,7,14,.6);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border-bottom:var(--hud)}
.progress ol{grid-template-columns:repeat(7,1fr)}
.progress li.current{color:var(--text);border-color:var(--data);
  text-shadow:0 0 16px color-mix(in srgb,var(--data) 55%,transparent)}
.progress li.current b,.progress li.complete b{color:var(--data)}
body.brand-generated .progress li.current{border-color:var(--signal)}
body.brand-generated .progress li.current b,body.brand-generated .progress li.complete b{color:var(--signal)}

/* ── 7. BUTTONS — energised, with charge-up state ── */
.button{
  border:var(--hud);background:var(--raised);border-radius:10px;
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  transition:border-color .2s,box-shadow .2s,background .2s,transform .12s;
  position:relative;overflow:hidden;
}
.button:hover:not(:disabled){border-color:color-mix(in srgb,var(--data) 62%,transparent);
  box-shadow:0 0 26px -10px color-mix(in srgb,var(--data) 75%,transparent)}
.button:active:not(:disabled){transform:translateY(1px)}
.button.primary{
  background:linear-gradient(120deg,var(--signal),color-mix(in srgb,var(--signal) 62%,var(--wp-purple)));
  border-color:color-mix(in srgb,var(--signal) 78%,transparent);
  color:#0A0618;font-weight:700;
  box-shadow:0 0 32px -10px color-mix(in srgb,var(--signal) 85%,transparent);
}
.button.primary:hover:not(:disabled){
  background:linear-gradient(120deg,color-mix(in srgb,var(--signal) 84%,white),var(--signal));
  box-shadow:0 0 42px -8px color-mix(in srgb,var(--signal) 95%,transparent)}
.button.back{background:transparent}
.button:disabled{opacity:.34}

/* charge-up: "CONNECTING DATA BITS…" while generating */
.button.is-charging{pointer-events:none;color:transparent!important}
.button.is-charging>span{opacity:0}
.button.is-charging::before{
  content:"CONNECTING DATA BITS…";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font:600 11px/1 var(--mono);letter-spacing:.16em;color:#0A0618;white-space:nowrap;padding:0 8px;
}
.button.is-charging::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,#0A0618,transparent);
  animation:v04-charge 1.1s ease-in-out infinite;
}
@keyframes v04-charge{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.text-link{color:var(--muted)}
.skip{background:var(--data);color:#04121A}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,select:focus-visible{outline:2px solid var(--data);outline-offset:3px}

/* ── 8. FORMS — glass wells ── */
.form-grid input:not([type=radio]):not([type=checkbox]),.form-grid textarea,
.library-tools input,.library-tools select{
  background:rgba(6,10,22,.66);border:var(--hud);border-radius:10px;color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.form-grid input:focus,.form-grid textarea:focus,
.library-tools input:focus,.library-tools select:focus{
  border-color:color-mix(in srgb,var(--data) 65%,transparent);
  box-shadow:0 0 24px -10px color-mix(in srgb,var(--data) 85%,transparent)}
.form-grid label>span,.form-grid legend{color:#C9D3EA;font-family:var(--mono)}
.form-grid small{color:var(--faint);font-family:var(--mono)}
.chips label span{border:var(--hud);border-radius:999px;background:rgba(10,16,34,.5);transition:all .2s}
.chips label input:checked+span{
  border-color:color-mix(in srgb,var(--signal) 75%,transparent);color:var(--text);
  background:color-mix(in srgb,var(--signal) 20%,transparent);
  box-shadow:0 0 22px -9px color-mix(in srgb,var(--signal) 85%,transparent)}
.checks input{accent-color:var(--signal)}
.form-error{color:var(--danger)}

/* ── 9. PALETTE / CONCEPT / FONT CARDS ── */
.palette-card[aria-checked=true]::after{
  background:var(--signal);color:#0A0618;border-radius:999px;
  box-shadow:0 0 20px -6px color-mix(in srgb,var(--signal) 90%,transparent);font-family:var(--mono)}
.concept-card[aria-checked=true] .concept-meta::before{color:var(--signal);font-family:var(--mono)}
.font-card[aria-checked=true]{box-shadow:var(--glow),inset 0 -3px var(--signal)}
.concept-art{background:radial-gradient(circle at 50% 42%,rgba(157,78,221,.14),transparent 68%),rgba(4,7,15,.72);border-bottom:var(--hud)}
.palette-copy .palette-group{color:var(--data);font-family:var(--mono)}
.choice-contract{border-left:2px solid var(--signal);
  background:linear-gradient(120deg,color-mix(in srgb,var(--signal) 12%,var(--panel)),var(--panel))}
.choice-contract b{color:var(--signal)}
.custom-palette input[type=color]{border:var(--hud);border-radius:8px}

/* ── 10. GENERATING SCREEN — reactor core ── */
.scanner{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--data) 12%,transparent),transparent 70%),
  repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,229,255,.04) 8px);
  border-radius:50%;box-shadow:0 0 60px -18px color-mix(in srgb,var(--data) 85%,transparent)}
.scanner i{background:var(--data);box-shadow:0 0 22px var(--data)}
.scan-mark{font:400 26px var(--cond);letter-spacing:0;color:var(--text);
  text-shadow:0 0 24px color-mix(in srgb,var(--data) 70%,transparent)}
.gen-status{color:var(--data);font-family:var(--mono)}
.build-list li{border-top:var(--hud);font-family:var(--mono)}
.build-list li.done::before{color:var(--data)}

/* ── 11. PREVIEW ── */
.preview-head{
  border-bottom:var(--hud);border-radius:14px;
  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--preview-accent,var(--signal)) 24%,transparent),transparent 44%),
    linear-gradient(130deg,rgba(16,24,48,.8),rgba(5,8,15,.9));
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  position:relative;overflow:hidden;
}
.preview-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(232,237,251,.03) 3px 4px)}
.palette-lock b{color:var(--signal)}
.palette-lock small,.brief-strip b{font-family:var(--mono);color:var(--faint)}
.brief-strip{border-bottom:var(--hud)}
.brief-strip>span{border-right:var(--hud)}
.preview-section,.context-preview,.website-preview{border-bottom:var(--hud)}
.mock.dark{background:rgba(4,7,15,.8)}
.mock>span{font-family:var(--mono);color:var(--faint)}
.regenerate{background:linear-gradient(120deg,color-mix(in srgb,var(--data) 8%,var(--panel)),var(--panel))}
.refine-chip{border:var(--hud);background:rgba(10,16,34,.5)}
.refine-chip[aria-checked=true]{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal) inset,var(--glow)}
.muted-note{color:var(--muted);opacity:.8}

/* ── 12. DELIVERY ── */
.delivery-mark{border:1px solid var(--signal);color:var(--signal);border-radius:50%;
  box-shadow:0 0 46px -14px color-mix(in srgb,var(--signal) 90%,transparent);font-family:var(--mono)}
.package>div{border-bottom:var(--hud)}
.package b,.package i,.download-status{font-family:var(--mono)}
.package b{color:var(--signal)}
.download-status{color:var(--data)}
body.brand-generated .download-status{color:var(--signal)}
.website-upsell{border-left:4px solid var(--signal)}
.website-upsell__cta{background:linear-gradient(120deg,var(--signal),color-mix(in srgb,var(--signal) 60%,var(--wp-purple)));
  color:#0A0618;border-radius:10px;font-weight:750;
  box-shadow:0 0 30px -10px color-mix(in srgb,var(--signal) 90%,transparent)}

footer{border-top:var(--hud);font-family:var(--mono);color:var(--faint)}
.included{border-top:var(--hud)}
.included span{border-right:var(--hud);font-family:var(--mono);color:var(--muted)}
.type-lock{background:transparent;border:0;gap:8px;flex-wrap:wrap}
.type-lock span{border:var(--hud)}
.type-lock b{font-family:var(--mono);color:var(--data)}

/* ── 13. HERO TAGLINE (v0.4 copy) ── */
.v04-tagline{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  padding:8px 14px;border:var(--hud);border-radius:999px;
  background:rgba(10,16,34,.55);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  max-width:100%;
}
.v04-tagline i{width:7px;height:7px;border-radius:50%;background:var(--data);flex:none;
  box-shadow:0 0 12px var(--data);animation:v04-pulse 2.4s ease-in-out infinite}
.v04-tagline span{min-width:0;overflow-wrap:anywhere}
@keyframes v04-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ── 14. ENTRANCE ANIMATIONS — fade + rise, staggered.
   .screen goes display:none → block, which restarts these automatically. ── */
.screen.active>*{animation:v04-rise .58s cubic-bezier(.22,.9,.3,1) both}
.screen.active>*:nth-child(1){animation-delay:.02s}
.screen.active>*:nth-child(2){animation-delay:.09s}
.screen.active>*:nth-child(3){animation-delay:.16s}
.screen.active>*:nth-child(4){animation-delay:.23s}
.screen.active>*:nth-child(5){animation-delay:.30s}
.screen.active>*:nth-child(6){animation-delay:.37s}
.screen.active>*:nth-child(n+7){animation-delay:.44s}
@keyframes v04-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* card grids stagger as they populate */
.palette-card,.concept-card,.font-card{animation:v04-rise .5s cubic-bezier(.22,.9,.3,1) both}
.concept-grid .concept-card:nth-child(n+1){animation-delay:calc(28ms * var(--i,0))}

/* palette / logo preview transitions */
.palette-swatches i,.palette-lock i span{transition:background .45s ease}
.mock [data-live-logo] svg,.mock [data-live-symbol] svg,.concept-art svg{
  animation:v04-fadein .45s ease both}
@keyframes v04-fadein{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

/* ── 15. SAMPLE CUSTOMER SITE — stays the CUSTOMER's brand, not ours.
   Reset the Audiowide fallback so an unchosen font falls back neutrally,
   and keep it opaque so the space background never bleeds through. ── */
.brand-site{
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  border-radius:14px;
  box-shadow:0 40px 110px -30px rgba(0,0,0,.85);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ── 16. MOBILE — Audiowide is wide, so tighten hard at 620/390px ── */
@media(max-width:900px){
  .progress ol{grid-template-columns:repeat(7,1fr)}
  .preview-head{border-radius:12px}
}
@media(max-width:620px){
  .hero h1{font-size:clamp(1.65rem,7.4vw,2.3rem)}
  .section-head h1{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .delivery h1{font-size:clamp(1.5rem,6.4vw,2rem)}
  .generating h1{font-size:clamp(1.45rem,6.2vw,1.95rem)}
  .preview-head h1{font-size:clamp(1.45rem,6.4vw,2rem)}
  .preview-section>h2,.context-preview h2,.website-preview__intro h2{font-size:clamp(1.2rem,5.2vw,1.7rem)}
  .website-upsell h3{font-size:clamp(1.15rem,5vw,1.5rem)}
  .v04-tagline{font-size:9px;letter-spacing:.1em;padding:7px 11px}
  .included{grid-template-columns:1fr 1fr}
  .type-lock span{padding:9px 11px}
  .scanner{width:130px;height:130px}
  .scan-mark{font-size:20px}
  .button.is-charging::before{font-size:9px;letter-spacing:.1em}
}
/* very narrow (≤400px): guarantee no horizontal overflow anywhere */
@media(max-width:400px){
  html,body{overflow-x:hidden}
  .hero h1{font-size:1.62rem}
  .preview-head h1{font-size:1.4rem}
  .preview-head{padding:22px 16px}
  .screen{padding-left:14px;padding-right:14px}
  .choice-contract{padding:14px}
  .website-upsell{padding:22px 16px}
  .package>div{grid-template-columns:36px 1fr}
}

/* ── 17. REDUCED MOTION — kill every animation, keep the design ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .screen.active>*{opacity:1;transform:none}
  .palette-card,.concept-card,.font-card{opacity:1;transform:none}
  .mock [data-live-logo] svg,.mock [data-live-symbol] svg,.concept-art svg{opacity:1;transform:none}
  #datanet{display:none}
  .scanner i{top:85px}
}

/* ── 18. PRINT — flatten the sci-fi chrome ── */
@media print{
  #datanet{display:none!important}
  body{background:#fff!important;color:#111}
  .preview-head::after,.hero h1::after,.section-head h1::after,
  .preview-head h1::after,.delivery h1::after{display:none!important}
}