@font-face{font-family:'Bodoni Moda';font-weight:400 900;font-style:normal;font-display:swap;src:url(/fonts/bodoni-moda-855ea6.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/manrope-814019.woff2) format('woff2')}
/* v7 tokens (pi-clean/site/home/style.css) */
:root{
  --bg:#0a1220;--bg2:#0d1829;--bg3:#111f35;--ink:#f3eee4;--ink-2:#c9cfd8;--muted:#98a3b3;--gold:#c6a568;--gold-d:#7d5f2e;
  --hair:rgba(198,165,104,.24);--hair-strong:rgba(198,165,104,.55);--hair-faint:rgba(243,238,228,.08);
  --disp:'Bodoni Moda',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--fs-caps:11.5px;
  --s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --pad:clamp(24px,6vw,96px);--maxw:1320px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-med:.6s;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- section: text 30 / visual 70 ---------- */
.ai{position:relative;min-height:100vh;max-width:var(--maxw);margin:0 auto;padding:var(--s9) var(--pad);
  display:grid;grid-template-columns:minmax(340px,34fr) 66fr;gap:clamp(32px,4vw,72px);align-items:center}
.ai::before,.ai::after{content:"";position:absolute;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.ai::before{top:0}.ai::after{bottom:0}
.ai-copy{position:relative;z-index:1}
.ai-label{display:flex;align-items:center;gap:16px;margin:0 0 var(--s6);font-size:var(--fs-caps);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.ai-label::after{content:"";width:48px;height:1px;background:var(--gold)}
.ai-h{font-family:var(--disp);font-weight:400;font-size:clamp(40px,3.6vw,56px);line-height:1.06;letter-spacing:-.01em;margin:0 0 var(--s6);color:var(--ink);text-wrap:balance}
.ai-gold{color:var(--gold);font:inherit}   /* owner request: only "power" in gold, same Bodoni and weight */
.ai-line{margin:0 0 var(--s7);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ai-line .dot{display:inline-block;margin:0 .7em;color:var(--gold)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-size:var(--fs-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:20px 38px;border:1px solid var(--gold);transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-io)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn.ghost::before{background:var(--gold)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--bg);border-color:var(--gold)}

/* ---------- visual ---------- */
.ai-vis{margin:0;position:relative;min-width:0}
.trend{display:block;width:100%;height:auto;overflow:visible}
.gl,.gv{fill:none;stroke:rgba(243,238,228,.07);stroke-width:1}
.gv{stroke:rgba(243,238,228,.045)}
.base{fill:none;stroke:rgba(198,165,104,.32);stroke-width:1}
.trend .ticks{fill:none;stroke:rgba(198,165,104,.30);stroke-width:1}
.line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.glow{fill:none;stroke-width:7;stroke-linecap:round;opacity:.32}
.shim,.shim-core{fill:none;stroke-linecap:round;stroke-dasharray:0 1000;opacity:0}
.shim{stroke:#f4e2b4;stroke-width:6}
.shim-core{stroke:#fff6df;stroke-width:1.6}
.pt{fill:#f7e9c6}
.trend .ring{fill:none;stroke:#e2c88f;stroke-width:1;opacity:.5}
.drop{stroke-width:1}
.sparks circle{fill:#f1dcaa}
/* phones: the SVG renders smaller, so the hairlines get more user units to stay ~1.2px on screen */
@media (max-width:860px){
  .ai{grid-template-columns:1fr;min-height:auto;padding:var(--s8) 22px var(--s9);gap:var(--s7)}
  .ai-vis{order:-1;margin:0 -10px}
  .line,.shim-core{stroke-width:3.2}.glow{stroke-width:12}.shim{stroke-width:10}
  .gl,.gv,.base,.trend .ticks{stroke-width:2.2}
  .ai-h{font-size:clamp(40px,11vw,48px)}
}
/* reduced motion: the finished static line; JS never runs the animation, the idle extras stay hidden */
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before{transition:none}
  .trend .ring,.sparks{display:none}
}
/* ---- "power" colour study (owner Oct 24): variants applied by class on the span; gold .ai-gold stays the default ---- */
/* A: soft icy sky blue, slightly translucent */
.ai-gold.pw-a{color:rgba(172,218,252,.86)}
/* B: Tron cyan, toned down, with a faint same-colour glow (two soft layers, no hard neon edge) */
.ai-gold.pw-b{color:#86dcf2;text-shadow:0 0 12px rgba(134,220,242,.20),0 0 30px rgba(134,220,242,.08)}
/* C: pale steel-sky blue, light-to-blue vertical gradient fill */
.ai-gold.pw-c{color:#a9c4dc;background:linear-gradient(180deg,#eef3f8 8%,#b9d0e4 55%,#93b4d2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ---- "Learn more" (owner Oct 24): a quiet text link beside the button, to the future AI Accelerator subpage ---- */
.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.ai-more{display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(243,238,228,.65);text-decoration:none;
  transition:color var(--t-med) var(--ease-out),text-decoration-color var(--t-med) var(--ease-out)}
.ai-more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(243,238,228,.26);transition:text-decoration-color var(--t-med) var(--ease-out)}
.ai-more-arrow{display:inline-block;font-size:12px;letter-spacing:0;text-decoration:none;transition:transform var(--t-med) var(--ease-out)}
.ai-more:hover,.ai-more:focus-visible{color:var(--ink)}
.ai-more:hover .ai-more-t,.ai-more:focus-visible .ai-more-t{text-decoration-color:var(--gold)}
.ai-more:hover .ai-more-arrow,.ai-more:focus-visible .ai-more-arrow{transform:translateX(2px)}
.ai-more:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.ai-more,.ai-more-t,.ai-more-arrow{transition:none}}
/* ---- holo (owner Oct 24): solid sky-blue core with an iridescent sheen; darkest stop >= 7:1 on navy ----
   The gradient is 250% of the word wide with a period of 1.5 words (60% of it); the drift moves exactly one period, so the loop is seamless. */
.ai-gold.pw-holo{color:#7cc4f2;
  background-image:linear-gradient(100deg,#6fb9ee 0%,#7ad8f2 10.8%,#c9ecff 20.4%,#f2fbff 25.2%,#c9ecff 30.0%,#9fb0f0 38.4%,#7cc4f2 49.2%,#6fb9ee 60%,#7ad8f2 70.8%,#c9ecff 80.4%,#f2fbff 85.2%,#c9ecff 90.0%,#9fb0f0 98.4%,#9cb2f0 100%);
  background-size:250% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(122,200,242,.16));animation:holo-drift 6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes holo-drift{0%{background-position:0% 0}42%{background-position:100% 0}100%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.ai-gold.pw-holo{animation:none;background-position:0% 0}}

/* ================= "power" fx study, round 2 (owner Oct 24: "We need better blue fx/color") =================
   Four classes on the word's span. No drop-shadow/fog on any of them; every fill colour is >= 7:1 on navy (#0a1220).
   Entry effects only run under #ai.fx-in (added once by chart.js); prefers-reduced-motion gets the static end state. */

/* 1 · Hologram foil: crisp metallic banding (electric blue / cyan / ice / lilac) with sharp specular bands; slow sweep */
.ai-gold.pw-foil{color:#66b8ff;
  background-image:linear-gradient(112deg,#4aa8ff 0%,#66b8ff 8%,#8fe6ff 15%,#f4fbff 18.5%,#8fe6ff 20%,#5fb0ff 27%,#b9a8ff 35%,#7cc8ff 41%,
                                          #eaf6ff 44%,#66b8ff 46%,#4aa8ff 50%,#66b8ff 58%,#8fe6ff 65%,#f4fbff 68.5%,#8fe6ff 70%,#5fb0ff 77%,
                                          #b9a8ff 85%,#7cc8ff 91%,#eaf6ff 94%,#66b8ff 96%,#4aa8ff 100%);
  background-size:300% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fx-foil 8s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes fx-foil{from{background-position:0% 0}to{background-position:75% 0}}

/* 2 · Light-emitting glass: near-white hot core, electric-blue body from tight bright layered shadows (small radii, no fog) */
.ai-gold.pw-tron{color:#eef8ff;
  text-shadow:0 0 1px #d6efff,0 0 2px #7cc8ff,0 0 4px #3d9bff,0 0 9px rgba(45,140,255,.45),0 0 16px rgba(45,140,255,.14)}
/* sync: .fx-in is added by chart.js on the same frame the chart clock starts (t=0). Power-up at 0.15 s leads the line draw (0.25 s) */
#ai.fx-in .ai-gold.pw-tron{animation:fx-powerup 1.6s cubic-bezier(.3,0,.2,1) .15s both}
#ai.fx-armed:not(.fx-in) .ai-gold.pw-tron{color:#7cc8ff;text-shadow:0 0 1px rgba(124,200,255,.4)}   /* pre-entry = the power-up's first frame, so nothing flashes */
@keyframes fx-powerup{
  0%{color:#7cc8ff;text-shadow:0 0 1px rgba(124,200,255,.4),0 0 2px rgba(124,200,255,0),0 0 4px rgba(61,155,255,0),0 0 9px rgba(45,140,255,0),0 0 16px rgba(45,140,255,0)}
  45%{color:#ffffff;text-shadow:0 0 1px #ffffff,0 0 3px #a8dcff,0 0 6px #4aa8ff,0 0 12px rgba(45,140,255,.7),0 0 22px rgba(45,140,255,.25)}
  100%{color:#eef8ff;text-shadow:0 0 1px #d6efff,0 0 2px #7cc8ff,0 0 4px #3d9bff,0 0 9px rgba(45,140,255,.45),0 0 16px rgba(45,140,255,.14)}}

/* 3 · Projected hologram: electric-blue fill with fine scan lines clipped to the letters, a sub-pixel cyan/violet fringe
   (two offset copies behind the fill, from data-text), and one brief projection flicker on entry */
.ai-gold.pw-proj{position:relative;isolation:isolate;color:#7cc8ff;
  background-image:repeating-linear-gradient(180deg,#9ad8ff 0,#9ad8ff 1.6px,#5aaeff 1.6px,#5aaeff 2.5px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ai-gold.pw-proj::before,.ai-gold.pw-proj::after{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;pointer-events:none;line-height:normal;white-space:nowrap;
  -webkit-text-fill-color:currentColor;background:none}
.ai-gold.pw-proj::before{color:rgba(80,235,255,.75);transform:translateX(-.8px)}
.ai-gold.pw-proj::after{color:rgba(170,140,255,.7);transform:translateX(.8px)}
#ai.fx-in .ai-gold.pw-proj{animation:fx-flicker .7s steps(1,end) .3s both}
#ai.fx-in .ai-gold.pw-proj::before{animation:fx-fringe-l .7s ease-out .3s both}
#ai.fx-in .ai-gold.pw-proj::after{animation:fx-fringe-r .7s ease-out .3s both}
@keyframes fx-flicker{0%{opacity:0}12%{opacity:.75}20%{opacity:.25}30%{opacity:.95}38%{opacity:.6}48%,100%{opacity:1}}
@keyframes fx-fringe-l{0%{transform:translateX(-4px)}60%{transform:translateX(-1.2px)}100%{transform:translateX(-.8px)}}
@keyframes fx-fringe-r{0%{transform:translateX(4px)}60%{transform:translateX(1.2px)}100%{transform:translateX(.8px)}}

/* 4 · Deep-to-electric flow: sapphire to electric cyan, slow liquid drift, one crisp highlight; no glow at all.
   (The deepest sapphire allowed at 7:1 on this navy is about #52a3ff.) Period = 1.5 words, drift = one period (seamless). */
.ai-gold.pw-flow{color:#5fb0ff;
  background-image:linear-gradient(100deg,#52a3ff 0%,#4aa8ff 12%,#6fe0ff 27%,#8fe6ff 31%,#f4fbff 32.4%,#8fe6ff 33.6%,#5fb0ff 45%,#52a3ff 60%,
                                          #4aa8ff 72%,#6fe0ff 87%,#8fe6ff 91%,#f4fbff 92.4%,#8fe6ff 93.6%,#76caff 100%);
  background-size:250% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fx-flow 9s linear infinite}
@keyframes fx-flow{from{background-position:0% 0}to{background-position:100% 0}}

@media (prefers-reduced-motion:reduce){
  .ai-gold.pw-foil{animation:none;background-position:20% 0}
  .ai-gold.pw-flow{animation:none;background-position:0% 0}
  #ai.fx-in .ai-gold.pw-tron,#ai.fx-in .ai-gold.pw-proj,#ai.fx-in .ai-gold.pw-proj::before,#ai.fx-in .ai-gold.pw-proj::after{animation:none}
}

/* ================= pw-bulb (owner Oct 24: "gold to glowing ... like a light bulb") : CURRENT CHOICE, pending OK =================
   Mirrors pw-tron exactly (same 5-layer shadow structure, same 1.6 s power-up, same .15 s delay and chart sync via #ai.fx-in),
   in warm gold: filament core #fff6e3, body = the chart line's gold (#e6cf9c tip / #c6a568 token), tight amber glows. */
.ai-gold.pw-bulb{color:#fff6e3;
  text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}
#ai.fx-in .ai-gold.pw-bulb{animation:fx-filament 1.6s cubic-bezier(.3,0,.2,1) .15s both}
#ai.fx-armed:not(.fx-in) .ai-gold.pw-bulb{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4)}   /* pre-entry = first frame */
/* filament warming: dim gold, then a white-gold swell, then one tiny settle flicker, then a steady glow */
@keyframes fx-filament{
  0%{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4),0 0 2px rgba(230,207,156,0),0 0 4px rgba(198,165,104,0),0 0 9px rgba(222,168,80,0),0 0 16px rgba(222,168,80,0)}
  42%{color:#fffbf2;text-shadow:0 0 1px #ffffff,0 0 3px #f6e2b4,0 0 6px #d9b56f,0 0 12px rgba(222,168,80,.7),0 0 22px rgba(222,168,80,.24)}
  54%{color:#fff3da;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 8px rgba(222,168,80,.36),0 0 14px rgba(222,168,80,.10)}
  60%{color:#fff8ea;text-shadow:0 0 1px #fff4d8,0 0 2px #ecd6a6,0 0 5px #cdab6c,0 0 10px rgba(222,168,80,.52),0 0 18px rgba(222,168,80,.17)}
  100%{color:#fff6e3;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}}
@media (prefers-reduced-motion:reduce){#ai.fx-in .ai-gold.pw-bulb{animation:none}}