/* ============================================================
   prismadev
   Palette runs the full length between the two brand colors:
   #AE66FF (dev) → #8445CC → #592499 → #2F0366 (prisma)
   Everything else is white.
   ============================================================ */

:root{
  --ink:      #2F0366;   /* prisma */
  --beam:     #AE66FF;   /* dev    */
  --b2:       #8445CC;
  --b3:       #592499;
  --white:    #FFFFFF;

  --mute:     #6E5A8A;   /* desaturated ink, secondary text */
  --hair:     rgba(47,3,102,.14);
  --hair-soft:rgba(47,3,102,.07);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1280px;

  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x:clip (not hidden) — `hidden` would make this a scroll
   container and break position:sticky on the nav. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--beam);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  font:500 .875rem/1 var(--mono);
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ── shared type ─────────────────────────────────────────── */

.eyebrow{
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
  margin:0 0 1.25rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:1.75rem; height:1px; background:var(--beam); flex:none;
}
.eyebrow-inv{ color:rgba(255,255,255,.62); }
.eyebrow-inv::before{ background:var(--beam); }

.h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2rem,1.35rem + 2.7vw,3.5rem);
  font-stretch:92%;
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0 0 1.25rem;
  text-wrap:balance;
}
.h2 em{ font-style:normal; color:var(--beam); }
.h2-inv{ color:#fff; }

.wm{ font-family:var(--display); font-weight:800; font-stretch:92%; letter-spacing:-.035em; }
.wm-a{ color:var(--ink); }
.wm-b{ color:var(--beam); }

/* ── nav ─────────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem var(--gut);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--hair); padding-block:.85rem; }

.nav-mark{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.nav-glyph{ width:26px; height:23px; color:var(--ink); overflow:visible; flex:none; }
.nav-mark .wm{ font-size:1.15rem; }

.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font:500 .8125rem/1 var(--mono);
  letter-spacing:.02em; color:var(--mute);
  position:relative; padding-block:.35rem;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--beam); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-cta{
  font:500 .8125rem/1 var(--mono);
  padding:.7rem 1.15rem;
  border:1px solid var(--hair);
  border-radius:100px;
  color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav-cta:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ── hero ────────────────────────────────────────────────── */

.hero{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(3rem,7vw,6.5rem) var(--gut) clamp(4rem,8vw,7rem);
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}

.hero-title{
  font-family:var(--display); font-weight:800; font-stretch:88%;
  font-size:clamp(3.25rem,2rem + 6vw,6.75rem);
  line-height:.9; letter-spacing:-.045em;
  margin:0 0 1.5rem;
}

.hero-lede{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  color:var(--mute); max-width:34ch; margin:0 0 2.25rem;
  text-wrap:pretty;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.25rem; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font:500 .875rem/1 var(--mono);
  padding:1rem 1.5rem; border-radius:100px;
  border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:#fff; box-shadow:0 1px 0 rgba(47,3,102,.2); }
.btn-solid:hover{ background:var(--beam); box-shadow:0 12px 28px -12px rgba(174,102,255,.75); }
.btn-ghost{ border-color:var(--hair); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--beam); color:var(--beam); }

.hero-note{
  font:400 .8125rem/1.4 var(--mono);
  color:var(--mute); margin:0;
  display:flex; align-items:center; gap:.6rem;
}
.hero-note strong{ color:var(--ink); font-weight:500; }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--beam); flex:none;
  box-shadow:0 0 0 0 rgba(174,102,255,.65);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(174,102,255,.6); }
  70%{ box-shadow:0 0 0 9px rgba(174,102,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(174,102,255,0); }
}

.hero-figure{ min-width:0; }
.prism{ width:100%; height:auto; overflow:visible; display:block; }
.fan-label{ font:600 30px var(--body); letter-spacing:-.015em; }
.fan-deg{ font:500 21px var(--mono); letter-spacing:.08em; }

/* hero load sequence ------------------------------------- */
/* Driven entirely by CSS so the hero is never dependent on JS
   running (a backgrounded tab throttles rAF; JS may not run at all).
   `both` fill holds the from-state before start and the to-state after. */

[data-seq]{ animation:rise .9s var(--ease) both; }
[data-seq="1"]{ animation-delay:.08s; }
[data-seq="2"]{ animation-delay:.17s; }
[data-seq="3"]{ animation-delay:.29s; }
[data-seq="4"]{ animation-delay:.40s; }
[data-seq="5"]{ animation-delay:.50s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@keyframes draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes settle{
  from{ opacity:0; transform:scale(.9) rotate(-6deg); }
  to{ opacity:1; transform:none; }
}

.ray, .glint{ stroke-dasharray:1; animation:draw 1s var(--ease) both; }
.ray-in{ animation-duration:1s; animation-delay:.35s; }
.glass{ transform-origin:430px 250px; animation:settle .9s var(--ease) .75s both; }
.glint{ animation-delay:1.05s; }
.ray-mid{ animation-duration:.5s; animation-delay:1.1s; }
.halo{ animation:fade 1.6s var(--ease) 1.05s both, breathe 11s ease-in-out 2.6s infinite; }

.fan-beam{ animation:fade .8s var(--ease) both; }
.fan-beam path{ stroke-dasharray:1; animation:draw .85s var(--ease) both; animation-delay:inherit; }
.fan-beam[data-beam="1"], .fan-beam[data-beam="1"] path{ animation-delay:1.35s; }
.fan-beam[data-beam="2"], .fan-beam[data-beam="2"] path{ animation-delay:1.46s; }
.fan-beam[data-beam="3"], .fan-beam[data-beam="3"] path{ animation-delay:1.57s; }
.fan-beam[data-beam="4"], .fan-beam[data-beam="4"] path{ animation-delay:1.68s; }

/* the glow breathes, very slowly */
.halo{ transform-origin:430px 215px; }
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* ── what I do ───────────────────────────────────────────── */

.spec{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(3.5rem,7vw,6rem) var(--gut);
  border-top:1px solid var(--hair);
}
.spec-head{ max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.spec-intro{ color:var(--mute); max-width:52ch; margin:0; }

.spec-list{ list-style:none; margin:0; padding:0; }

.spec-row{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,14rem);
  gap:clamp(1rem,3vw,2.5rem);
  align-items:start;
  padding:clamp(1.75rem,3vw,2.5rem) 0;
  border-top:1px solid var(--hair-soft);
  position:relative;
}
.spec-row:first-child{ border-top:1px solid var(--hair); }
.spec-row:last-child{ border-bottom:1px solid var(--hair); }

/* the beam that arrives at each row on hover */
.spec-row::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:var(--c); transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--ease);
}
.spec-row:hover::before,
.spec-row:focus-within::before{ transform:scaleX(1); }

.spec-deg{
  font:500 .8125rem/1 var(--mono);
  letter-spacing:.06em; color:var(--c);
  padding-top:.45rem;
  display:flex; align-items:center; gap:.6rem;
}
.spec-deg::after{
  content:""; height:2px; width:0; background:var(--c); border-radius:2px;
  transition:width .5s var(--ease);
}
.spec-row:hover .spec-deg::after{ width:1.75rem; }

.spec-title{
  font-family:var(--display); font-weight:600; font-stretch:95%;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem);
  line-height:1.1; letter-spacing:-.025em;
  margin:0 0 .6rem;
  transition:color .35s var(--ease);
}
.spec-row:hover .spec-title{ color:var(--c); }
.spec-body p{ margin:0; color:var(--mute); max-width:50ch; }

.spec-tags{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem; align-content:start;
}
.spec-tags li{
  font:400 .75rem/1 var(--mono);
  padding:.45rem .7rem; border-radius:100px;
  border:1px solid var(--hair); color:var(--mute);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.spec-row:hover .spec-tags li{ border-color:color-mix(in srgb, var(--c) 40%, transparent); color:var(--c); }

/* ── about ───────────────────────────────────────────────── */

.abt{
  max-width:var(--max); margin-inline:auto;
  padding:clamp(3.5rem,7vw,6rem) var(--gut);
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  border-top:1px solid var(--hair);
}

.abt-figure{ position:relative; }
.portrait{ width:100%; height:auto; display:block; }
.drift{ transform-origin:200px 240px; animation:sway 16s ease-in-out infinite; }
@keyframes sway{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-10px) scale(1.03); }
}
.abt-figure img{ width:100%; height:auto; display:block; border-radius:4px; }

.abt-copy p{ color:var(--mute); max-width:56ch; margin:0 0 1.15rem; }

.abt-facts{ margin:2rem 0 1.75rem; padding:0; border-top:1px solid var(--hair-soft); }
.abt-facts div{
  display:grid; grid-template-columns:11rem minmax(0,1fr); gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--hair-soft);
}
.abt-facts dt{ font:500 .75rem/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--beam); }
.abt-facts dd{ margin:0; font-size:.9375rem; color:var(--ink); }

.stack{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.stack li{
  font:400 .75rem/1 var(--mono);
  padding:.5rem .75rem; border-radius:3px;
  background:rgba(174,102,255,.09); color:var(--b3);
}

/* ── contact ─────────────────────────────────────────────── */

.cta{
  background:var(--ink);
  color:#fff;
  padding:clamp(3.5rem,7vw,6.5rem) var(--gut);
  overflow:hidden;
}
.cta-inner{ max-width:var(--max); margin-inline:auto; position:relative; }

/* full-bleed band: the beam leaves the page rather than stopping short */
.converge{
  display:block;
  width:100vw; height:auto;
  margin-left:calc(50% - 50vw);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.conv-glass{ opacity:0; transition:opacity .8s var(--ease) .5s; }
.cta.in .conv-glass, html:not(.js) .conv-glass{ opacity:1; }
.cta.in .conv-fan path{ animation:draw 1.1s var(--ease) forwards; }
.cta.in .conv-fan path:nth-child(1){ animation-delay:.05s; }
.cta.in .conv-fan path:nth-child(2){ animation-delay:.15s; }
.cta.in .conv-fan path:nth-child(3){ animation-delay:.25s; }
.cta.in .conv-fan path:nth-child(4){ animation-delay:.35s; }
.cta.in .conv-out{ animation:draw .9s var(--ease) 1s forwards; }

.cta-lede{
  color:rgba(255,255,255,.72); max-width:50ch;
  margin:0 0 2.5rem; font-size:1.0625rem;
}

.cta-row{ display:flex; flex-wrap:wrap; align-items:stretch; gap:.75rem; margin-bottom:2.5rem; }

.mailto{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.1rem 1.6rem;
  border:1px solid rgba(255,255,255,.2); border-radius:6px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.mailto:hover{ border-color:var(--beam); background:rgba(174,102,255,.12); }
.mailto-label{ font:500 .6875rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--beam); }
.mailto-addr{
  font-family:var(--display); font-weight:600; font-stretch:95%;
  font-size:clamp(1.125rem,1rem + 1.1vw,1.875rem);
  letter-spacing:-.02em; word-break:break-all;
}

.copy{
  font:500 .8125rem/1 var(--mono);
  background:none; color:rgba(255,255,255,.72); cursor:pointer;
  border:1px solid rgba(255,255,255,.2); border-radius:6px;
  padding:0 1.4rem;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.copy:hover{ border-color:var(--beam); color:#fff; }
.copy.done{ border-color:var(--beam); color:var(--beam); }

.socials{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.75rem; }
.socials a{
  font:500 .8125rem/1 var(--mono); color:rgba(255,255,255,.6);
  padding-bottom:.3rem; border-bottom:1px solid rgba(255,255,255,.22);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ color:#fff; border-color:var(--beam); }

/* ── footer ──────────────────────────────────────────────── */

.foot{
  max-width:var(--max); margin-inline:auto;
  padding:2rem var(--gut) 2.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  font:400 .75rem/1 var(--mono); color:var(--mute);
}
.wm-sm{ font-size:1rem; }
.foot-note{ margin-inline:auto; }

/* ── reveals ─────────────────────────────────────────────── */

/* Both selectors are scoped to html.js so the `.in` rule actually wins.
   A bare `.reveal.in` (0,2,0) loses to `html.js .reveal` (0,2,1). */
html.js .reveal{ opacity:0; transform:translateY(22px); }
html.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width:1080px){
  .spec-row{ grid-template-columns:4.5rem minmax(0,1fr); }
  .spec-tags{ grid-column:2; }
}

@media (max-width:900px){
  /* Keep the section links (they're the only navigation on a one-page
     site) and drop the button instead — the Contact link does its job. */
  .nav-cta{ display:none; }
  .nav{ gap:1rem; }
  .nav-links{ gap:1.1rem; }
  .nav-links a{ font-size:.6875rem; }
  .nav-mark .wm{ font-size:1rem; }
  .hero{ grid-template-columns:1fr; padding-top:clamp(2rem,6vw,3rem); }
  .hero-lede{ max-width:46ch; }
  .hero-figure{ margin-inline:calc(var(--gut) * -.5); }
  .abt{ grid-template-columns:1fr; }
  .abt-figure{ max-width:22rem; }
  .abt-facts div{ grid-template-columns:1fr; gap:.15rem; }
}

@media (max-width:560px){
  .spec-row{ grid-template-columns:1fr; gap:.9rem; }
  .spec-tags{ grid-column:1; }
  .spec-deg{ padding-top:0; }
  .btn{ flex:1 1 100%; justify-content:center; }
  .copy{ padding:1rem; flex:1 1 100%; }
  .foot{ flex-direction:column; align-items:flex-start; }
  .foot-note{ margin-inline:0; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-seq], .reveal, html.js .reveal{ opacity:1 !important; transform:none !important; }
  .ray,.glint,.conv-fan path,.conv-out{ stroke-dashoffset:0 !important; }
  .glass,.fan-beam,.fan-beam path,.halo,.conv-glass{ opacity:1 !important; transform:none !important; }
}