/* ════════════════════════════════════════════════════════
   BITDEV — editorial / cinematic / dark
   tokens
════════════════════════════════════════════════════════ */
:root{
  /* base */
  --bg:           #08050C;
  --bg-2:         #0C0712;
  --surface:      #120C18;
  --line:         rgba(220,180,225,0.08);
  --line-2:       rgba(220,180,225,0.14);
  --line-strong:  rgba(220,180,225,0.22);

  /* purples — derivados do logotipo (#814286) */
  --p-deep:       #2D1230;
  --p-700:        #4E1F53;
  --p-600:        #6B2D70;
  --p:            #814286;
  --p-neon:       #B44FBC;
  --p-soft:       #D6A0DB;

  /* text */
  --t:            #f5eef7;
  --t-2:          #e0d2e5;
  --t-mute:       #9c8ea3;
  --t-faint:      #5e525e;

  /* type */
  --f-disp:       "Space Grotesk", system-ui, sans-serif;
  --f-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --pad-x:        clamp(20px, 5vw, 96px);
  --maxw:         1280px;
  --rad:          18px;
  --rad-lg:       28px;

  /* motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
}

/* ════════════════════════════════════════════════════════ reset ═ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--f-disp);
  font-weight: 400;
  background: var(--bg);
  color: var(--t);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  letter-spacing: -0.005em;
  cursor: default;
}
a{ color:inherit; text-decoration:none; }
button{ font: inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:var(--p); color:#fff; }

.mono{ font-family: var(--f-mono); font-weight:400; letter-spacing:0; }
.grad{
  background: linear-gradient(100deg, #fff 0%, #E0A8E6 40%, #B44FBC 70%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 10s linear infinite;
}
@keyframes gradShift{ to{ background-position: -200% 0; } }

/* ════════════════════════════════════════════════════════ loader ═ */
.loader{
  position:fixed; inset:0; z-index:200;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{
  display:flex; align-items:center; gap:28px;
}
.loader__mark{
  width:60px; height:60px;
}
.loader__ring{
  transform-origin: center;
  animation: ringSpin 3s linear infinite;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
.loader__core{
  transform-origin: center;
  animation: corePulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(180,79,188,.6));
}
@keyframes corePulse{
  0%,100%{ transform: scale(.9); opacity:.7; }
  50%   { transform: scale(1.1); opacity:1; }
}
.loader__label{ display:flex; flex-direction:column; gap:10px; min-width:240px; }
.loader__name{
  font-family: var(--f-disp);
  font-weight:600;
  letter-spacing: .42em;
  font-size: 13px;
  color: var(--t-2);
}
.loader__bar{
  display:block; width:100%; height:1px; background: var(--line);
  overflow:hidden;
}
.loader__bar-fill{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--p-600), var(--p-soft));
  transition: width .25s linear;
  box-shadow: 0 0 12px var(--p);
}
.loader__pct{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--t-faint);
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════ bg layers ═ */
.bg-mesh{
  position: fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
.bg-mesh__blob{
  position:absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.bg-mesh__blob--a{
  top: -20vw; left: -15vw;
  background: radial-gradient(circle, #6B2D70 0%, transparent 60%);
  animation: meshA 26s ease-in-out infinite alternate;
}
.bg-mesh__blob--b{
  bottom: -20vw; right: -10vw;
  background: radial-gradient(circle, #B44FBC 0%, transparent 60%);
  animation: meshB 32s ease-in-out infinite alternate;
  opacity:.45;
}
.bg-mesh__blob--c{
  top: 40vh; left: 50vw;
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, #2D1230 0%, transparent 60%);
  animation: meshC 40s ease-in-out infinite alternate;
  opacity:.35;
}
@keyframes meshA{ to{ transform: translate(15vw, 10vh) scale(1.1); } }
@keyframes meshB{ to{ transform: translate(-12vw, -8vh) scale(.9); } }
@keyframes meshC{ to{ transform: translate(-20vw, 20vh) scale(1.2); } }

.bg-particles{
  position: fixed; inset:0; z-index:1; pointer-events:none;
  width:100vw; height:100vh;
}
.bg-grid{
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(220,180,225,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,180,225,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
}
.bg-noise{
  position: fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.cursor-glow{
  position: fixed; top:0; left:0; z-index:3;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,79,188,.18) 0%, transparent 60%);
  transform: translate(-50%,-50%);
  pointer-events:none;
  filter: blur(20px);
  transition: opacity .4s;
  opacity: 0;
}
@media (hover:hover){ .cursor-glow{ opacity:1; } }

/* main sits above bg */
main, .nav, .foot{ position:relative; z-index:5; }

/* ════════════════════════════════════════════════════════ nav ═ */
.nav{
  position: sticky; top:0; z-index:50;
  padding: 14px var(--pad-x);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: linear-gradient(to bottom, rgba(8,5,12,.7), rgba(8,5,12,.35));
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-stuck{
  border-bottom-color: var(--line);
  background: rgba(8,5,12,.78);
}
.nav__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; letter-spacing:.32em; font-size:13px;
}
.nav__logo{
  height: 32px; width: auto;
  display: block;
  filter: brightness(1.15);
  transition: filter .25s, transform .25s;
}
.nav__brand:hover .nav__logo{
  filter: brightness(1.35) drop-shadow(0 0 12px rgba(180,79,188,.5));
}
.nav__mark{
  width:22px; height:22px; border-radius:7px;
  background: linear-gradient(135deg, var(--p-600), var(--p-neon));
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(220,180,225,.22), 0 8px 24px rgba(129,65,134,.45);
  position:relative;
}
.nav__mark::before{
  content:""; position:absolute; inset:4px; border-radius:4px;
  background: linear-gradient(135deg, #fff, transparent 60%);
  opacity:.3;
}
.nav__mark-inner{
  width:6px; height:6px; border-radius:2px; background:#fff;
  box-shadow: 0 0 8px #fff;
}
.nav__links{
  display:flex; gap:32px;
  font-size: 13px; color: var(--t-2);
}
.nav__links a{
  position:relative; padding:6px 0;
  transition: color .25s;
}
.nav__links a:hover{ color:#fff; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--p-soft);
  transition: right .35s var(--ease);
}
.nav__links a:hover::after{ right:0; }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight:500;
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  background: rgba(220,180,225,.05);
  border: 1px solid var(--line-2);
  color: var(--t);
  transition: background .25s, border-color .25s, transform .25s;
}
.nav__cta:hover{
  background: rgba(180,79,188,.15);
  border-color: var(--p);
}
@media (max-width: 820px){
  .nav__links{ display:none; }
}

/* ════════════════════════════════════════════════════════ hero ═ */
.hero{
  position:relative;
  min-height: 100vh;
  padding: clamp(80px, 14vh, 140px) var(--pad-x) clamp(80px, 12vh, 120px);
  display:flex; align-items:center;
  overflow: hidden;
}
.hero__inner{
  position:relative;
  width:100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.hero__content{ position:relative; z-index:2; min-width:0; }
.hero__visual{
  position:relative;
  align-self: stretch;
  min-height: 480px;
}
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ display:none; }
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 12px;
  color: var(--t-mute);
  padding: 6px 12px;
  border:1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.hero__eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: #34d399;
  box-shadow: 0 0 12px #34d399;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{ 50%{ opacity:.45; transform: scale(.9); } }

.hero__title{
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: clamp(42px, 8.4vw, 124px);
  line-height: .96;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(24px, 3.6vh, 40px);
  max-width: 16ch;
}
.hero__line{ display:block; }
.hero__sub{
  max-width: 56ch;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--t-2);
  margin: 0 0 clamp(32px, 4.5vh, 56px);
  font-weight: 300;
}
.hero__ctas{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom: clamp(56px, 8vh, 96px);
}

.hero__meta{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 740px;
}
.hero__meta-item{
  display:flex; flex-direction:column; gap:8px;
}
.hero__meta-k{
  font-size: 11px; color: var(--p-soft); letter-spacing: 0;
}
.hero__meta-v{ font-size: 14px; color: var(--t-2); }

@media (max-width:640px){
  .hero__meta{ grid-template-columns: 1fr; gap:18px; }
}

/* floating frames — inside .hero__visual column */
.hero__orb{
  position:absolute;
  pointer-events:none;
}
.hero__orb--a{
  top: 2%; right: 0;
  width: 280px;
  animation: floatA 9s ease-in-out infinite alternate;
}
.hero__orb--b{
  top: 46%; left: 0;
  animation: floatB 7s ease-in-out infinite alternate;
}
.hero__orb--c{
  bottom: 2%; right: -10px;
  animation: floatC 11s ease-in-out infinite alternate;
}
@keyframes floatA{ to{ transform: translateY(-22px) rotate(-2deg); } }
@keyframes floatB{ to{ transform: translateY(16px) rotate(2deg); } }
@keyframes floatC{ to{ transform: translateY(-14px) rotate(-1deg); } }

.orb-card{
  border:1px solid var(--line-2);
  background: linear-gradient(135deg, rgba(129,65,134,.16), rgba(8,5,12,.6));
  border-radius: 14px;
  padding: 16px;
  display:flex; flex-direction:column; gap:8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px -30px rgba(129,65,134,.45);
}
.orb-card__bar{
  height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--p-neon), transparent);
  opacity: .85;
}
.orb-card__bar--short{ width: 55%; opacity:.6; }
.orb-card__bar--mid{ width: 75%; opacity:.45; }
.orb-card__tag{
  margin-top:6px;
  font-size:11px; color: var(--p-soft);
  border-top: 1px dashed var(--line-2);
  padding-top: 10px;
}
.orb-pill{
  font-size: 12px;
  padding: 10px 16px;
  border:1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(8,5,12,.65);
  color: var(--t-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px -16px rgba(180,79,188,.5);
}
.orb-pill b{ color:#fff; font-weight:500; margin-left: 6px; }
.orb-ring{
  width: 140px; height: 140px; border-radius:50%;
  border: 1px solid var(--line-2);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(180,79,188,.18) 0%, transparent 70%);
}
.orb-ring span{
  position:absolute;
  border: 1px solid var(--line-2);
  border-radius: 50%;
}
.orb-ring span:nth-child(1){ width:80%; height:80%; animation: rRot 12s linear infinite; border-top-color: var(--p-neon); }
.orb-ring span:nth-child(2){ width:55%; height:55%; animation: rRot 8s linear infinite reverse; border-right-color: var(--p-soft); }
.orb-ring span:nth-child(3){ width:25%; height:25%; background: var(--p); box-shadow: 0 0 30px var(--p-neon); }
@keyframes rRot{ to{ transform: rotate(360deg); } }



.hero__scroll{
  position:absolute; bottom: 24px; left: 0;
  display:flex; align-items:center; gap: 12px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t-faint);
}
.hero__scroll-line{
  width: 60px; height:1px; background: linear-gradient(90deg, var(--p), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll-line::before{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background: #fff; animation: scrollSwipe 2.4s linear infinite;
}
@keyframes scrollSwipe{ to{ left:130%; } }

/* ════════════════════════════════════════════════════════ buttons ═ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
  border: 1px solid transparent;
  position:relative;
  will-change: transform;
}
.btn--primary{
  background: linear-gradient(135deg, var(--p-600), var(--p-neon));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(220,180,225,.4) inset, 0 14px 40px -12px rgba(180,79,188,.7);
}
.btn--primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 50%);
  pointer-events:none; opacity:.6;
}
.btn--primary:hover{
  box-shadow: 0 0 0 1px rgba(220,180,225,.6) inset, 0 18px 60px -10px rgba(180,79,188,.9);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
  border-color: var(--line-2);
  color: var(--t-2);
}
.btn--ghost:hover{
  background: rgba(220,180,225,.08);
  border-color: var(--p);
  color:#fff;
}
.btn--lg{ padding: 18px 30px; font-size: 15px; }

/* ════════════════════════════════════════════════════════ section base ═ */
.section{
  position:relative;
  padding: clamp(96px, 14vh, 160px) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.section__head{
  max-width: 920px;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.section__eyebrow{
  font-size:11px; letter-spacing:.18em;
  color: var(--p-soft);
  margin-bottom: 18px;
  display:flex; align-items:center; gap:10px;
}
.section__eyebrow::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.section__title{
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}
.section__lede{
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--t-mute);
  max-width: 60ch;
  font-weight: 300;
  margin: 0;
  text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════ services ═ */
.services{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc{
  position:relative;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px) clamp(28px, 4vw, 48px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 14px;
  background: transparent;
  transition: background .35s var(--ease);
  overflow:hidden;
  min-height: 280px;
}
.svc::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(180,79,188,.16), transparent 60%);
  opacity:0; transition: opacity .35s;
  pointer-events:none;
}
.svc:hover::before{ opacity:1; }
.svc:hover{ background: rgba(129,65,134,.04); }
.svc__icon{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(135deg, rgba(129,65,134,.22), rgba(180,79,188,.06));
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  color: var(--p-soft);
  transition: color .3s, box-shadow .3s, border-color .3s;
}
.svc:hover .svc__icon{
  color:#fff;
  border-color: var(--p);
  box-shadow: 0 0 0 4px rgba(129,65,134,.12), 0 0 24px rgba(180,79,188,.45);
}
.svc__icon svg{ width:22px; height:22px; }
.svc__title{
  font-size: 18px; font-weight: 500; margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.svc__desc{
  font-size: 14px; line-height: 1.55; color: var(--t-mute);
  margin: 0; font-weight: 300;
  flex:1;
}
.svc__tag{
  font-size: 11px; color: var(--t-faint);
  border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: 6px;
}

@media (max-width: 1080px){ .services{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services{ grid-template-columns: 1fr; } .svc{ min-height: auto; } }

/* ════════════════════════════════════════════════════════ timeline ═ */
.timeline{
  position:relative;
  margin-top: 32px;
  padding: 32px 0 16px;
}
.timeline__line{
  position:absolute; top: 48px; left:0; right:0;
  width:100%; height:80px;
  pointer-events:none;
}
.timeline__path{
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.timeline.is-on .timeline__path{ stroke-dashoffset: 0; }
.timeline__steps{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position:relative;
  z-index:2;
}
.step{
  display:flex; flex-direction:column; gap: 12px;
  padding-top: 0;
}
.step__node{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--p-soft);
  font-size: 11px;
  position:relative;
  z-index:2;
  transition: background .3s, box-shadow .3s, color .3s;
}
.step:hover .step__node,
.timeline.is-on .step__node{
  color:#fff;
  background: linear-gradient(135deg, var(--p-600), var(--p-neon));
  border-color: var(--p);
  box-shadow: 0 0 0 4px rgba(129,65,134,.12), 0 0 30px var(--p);
}
.step__title{
  margin: 14px 0 0; font-size: 17px; font-weight:500;
  letter-spacing: -0.01em;
}
.step__desc{
  margin: 0; font-size: 13.5px; line-height: 1.55;
  color: var(--t-mute); font-weight: 300;
}

@media (max-width: 900px){
  .timeline__line{ display:none; }
  .timeline__steps{ grid-template-columns: 1fr; gap: 32px; padding-left: 16px; border-left: 1px dashed var(--line-2); }
}

/* ════════════════════════════════════════════════════════ stack ═ */
.section--stack{ overflow:hidden; }
.stack{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.stack__orbit{
  position:relative;
  aspect-ratio: 1/1;
  max-width: 420px;
  width:100%;
  margin: 0 auto;
}
.stack__orbit-ring{
  position:absolute; inset:0;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
}
.stack__orbit-ring--1{
  animation: orbitSpin 30s linear infinite;
}
.stack__orbit-ring--1::before,
.stack__orbit-ring--1::after{
  content:""; position:absolute;
  width: 10px; height:10px; border-radius:50%;
  background: var(--p-neon);
  box-shadow: 0 0 14px var(--p);
}
.stack__orbit-ring--1::before{ top:-5px; left:50%; transform:translateX(-50%); }
.stack__orbit-ring--1::after { bottom:-5px; right:30%; background: var(--p-soft); }
.stack__orbit-ring--2{
  inset: 12%;
  animation: orbitSpin 22s linear infinite reverse;
  border-color: rgba(220,180,225,.15);
}
.stack__orbit-ring--2::before{
  content:""; position:absolute;
  width: 6px; height:6px; border-radius:50%;
  background: var(--p-soft);
  top:50%; right:-3px; transform: translateY(-50%);
  box-shadow: 0 0 10px var(--p-soft);
}
.stack__orbit-ring--3{
  inset: 26%;
  animation: orbitSpin 16s linear infinite;
  border-color: rgba(220,180,225,.22);
}
.stack__orbit-core{
  position:absolute; inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--p-neon), var(--p-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 0 0 1px rgba(220,180,225,.4) inset,
    0 0 80px var(--p),
    0 0 30px var(--p-neon);
  animation: corePulse 3s ease-in-out infinite;
}
.stack__orbit-core .mono{ font-size: 11px; letter-spacing: .2em; color:#fff; }
@keyframes orbitSpin{ to{ transform: rotate(360deg); } }

.stack__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.tech{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--line);
  transition: padding .3s, background .3s;
}
.tech:hover{
  padding-left: 16px; padding-right: 16px;
  background: rgba(129,65,134,.04);
}
.tech__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p);
  box-shadow: 0 0 10px var(--p);
}
.tech__name{
  font-size: 16px; font-weight: 500; color: var(--t);
  letter-spacing: -0.01em;
}
.tech__tag{
  font-size: 11px; color: var(--t-faint);
}
@media (max-width: 900px){
  .stack{ grid-template-columns: 1fr; }
  .stack__orbit{ max-width: 280px; }
  .stack__grid{ grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════ differentials ═ */
.diff{
  display:flex; flex-direction:column;
  border-top: 1px solid var(--line);
}
.diff__row{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding .3s var(--ease), background .3s;
  position:relative;
}
.diff__row::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:0; height:1px;
  background: linear-gradient(90deg, var(--p), var(--p-soft));
  transition: width .5s var(--ease);
}
.diff__row:hover::after{ width: 100%; }
.diff__row:hover{ padding-left: 16px; }
.diff__num{
  font-size: 12px; color: var(--p-soft);
}
.diff__title{
  font-size: clamp(20px, 2vw, 26px); font-weight: 500;
  margin: 0 0 8px; letter-spacing: -0.015em;
}
.diff__desc{
  margin: 0; color: var(--t-mute); font-size: 14.5px;
  line-height: 1.55; max-width: 64ch; font-weight: 300;
}
.diff__metric{
  font-size: 12px; color: var(--p-soft);
  padding: 8px 14px;
  border:1px solid var(--line-2);
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 760px){
  .diff__row{ grid-template-columns: auto 1fr; gap:18px; }
  .diff__metric{ grid-column: 1 / -1; justify-self: start; }
}

/* ════════════════════════════════════════════════════════ cases ═ */
.section--cases{ }
.cases{
  display:flex; flex-direction:column; gap: clamp(40px, 6vh, 80px);
}
.case{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.case:nth-child(even){
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.case:nth-child(even) .case__media{ order: 2; }
.case__media{
  position:relative;
  aspect-ratio: 16/10;
  border-radius: var(--rad-lg);
  background:
    linear-gradient(135deg, rgba(129,65,134,.18), rgba(8,5,12,.4)),
    var(--surface);
  border: 1px solid var(--line-2);
  overflow:hidden;
  box-shadow: 0 50px 100px -40px rgba(129,65,134,.55);
}
.case__media::before,
.case__media::after{
  content:""; position:absolute; inset:0;
  pointer-events:none;
}
.case__media::before{
  background-image:
    repeating-linear-gradient(0deg, rgba(220,180,225,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(220,180,225,.05) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
}
.case__media::after{
  background: radial-gradient(ellipse at 30% 20%, rgba(180,79,188,.35), transparent 60%);
}
.case__placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--p-soft); font-size: 12px; letter-spacing: .15em;
}
.case__tag{
  position:absolute; top: 18px; left: 18px;
  font-size: 10.5px; letter-spacing: .2em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,5,12,.7);
  border: 1px solid var(--line-2);
  color: var(--t-2);
  backdrop-filter: blur(10px);
}
.case__body{
  display:flex; flex-direction:column; gap: 18px;
}
.case__title{
  font-size: clamp(26px, 3vw, 38px); font-weight: 500;
  margin: 0; letter-spacing: -0.02em;
}
.case__desc{
  margin: 0; font-size: 15px; line-height: 1.55;
  color: var(--t-mute); font-weight: 300; max-width: 50ch;
}
.case__metrics{
  display:flex; gap: 28px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.case__metrics span{
  display:flex; flex-direction:column; gap:4px;
}
.case__metrics b{ font-size: 22px; font-weight: 500; color: var(--t); }
.case__metrics i{ font-size: 11px; color: var(--t-faint); font-style: normal; }

@media (max-width: 860px){
  .case, .case:nth-child(even){ grid-template-columns: 1fr; }
  .case:nth-child(even) .case__media{ order: initial; }
}

/* ════════════════════════════════════════════════════════ final CTA ═ */
.cta{
  position:relative;
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
  text-align: left;
  overflow:hidden;
}
.cta__inner{
  position:relative; z-index:2;
  max-width: var(--maxw); margin: 0 auto;
}
.cta__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(180,79,188,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(129,65,134,.2) 0%, transparent 55%);
  z-index:1;
  pointer-events:none;
}
.cta__eyebrow{
  font-size: 11px; letter-spacing: .2em;
  color: var(--p-soft); margin-bottom: 20px;
}
.cta__title{
  font-size: clamp(44px, 8vw, 120px);
  line-height: .98; letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.cta__sub{
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--t-2);
  max-width: 52ch;
  margin: 0 0 44px;
  font-weight: 300;
}
.cta__actions{
  display:flex; flex-wrap:wrap; gap: 14px;
  margin-bottom: 40px;
}
.cta__stamp{
  display:flex; flex-wrap:wrap; gap: 22px;
  font-size: 11.5px; color: var(--t-faint);
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════ footer ═ */
.foot{
  border-top: 1px solid var(--line);
  padding: 80px var(--pad-x) 28px;
  background: rgba(8,5,12,.6);
}
.foot__inner{
  max-width: var(--maxw); margin: 0 auto;
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.foot__brand{ }
.foot__logo{
  height: 28px; width:auto;
  filter: brightness(1.4) contrast(1.1);
  margin-bottom: 18px;
}
.foot__tag{
  font-size: 13.5px; line-height: 1.55;
  color: var(--t-mute); font-weight: 300;
  max-width: 38ch; margin: 0;
}
.foot__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.foot__col{ display:flex; flex-direction:column; gap: 10px; }
.foot__col h5{
  font-size: 11px; letter-spacing: .2em; color: var(--p-soft);
  margin: 0 0 10px; font-weight: 500; text-transform: uppercase;
}
.foot__col a{
  font-size: 13.5px; color: var(--t-2);
  transition: color .25s, transform .25s;
}
.foot__col a:hover{ color:#fff; transform: translateX(3px); }
.foot__bar{
  max-width: var(--maxw); margin: 28px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
  font-size: 11px; color: var(--t-faint);
}

@media (max-width: 760px){
  .foot__inner{ grid-template-columns: 1fr; }
  .foot__cols{ grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════ reveals ═ */
.reveal{
  opacity:0; transform: translateY(24px);
  transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}
.reveal.is-on{
  opacity:1; transform: none;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
}