:root{
  --bg:#060612;--ink:#EAF0FF;--muted:#AFC5FF;--indigo:#6B7CFF;--purple:#A855F7;--sky:#0EA5E9;
  --card:rgba(15,20,46,.7);--stroke:rgba(255,255,255,.12);
  --shadow:0 12px 32px rgba(58,26,120,.28),0 6px 14px rgba(14,165,233,.18);
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0;color:var(--ink);
  background:radial-gradient(900px 600px at 85% -10%,#1d0b39 0%,transparent 55%),
             radial-gradient(1000px 700px at -10% 30%,#0b1f54 0%,transparent 60%),
             linear-gradient(180deg,#080818 0%,#04040d 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  overflow-x:hidden;scroll-behavior:smooth
}
header{position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(8,8,24,.85),rgba(8,8,24,.35));
  border-bottom:1px solid var(--stroke)}
.nav{max-width:1200px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:"Chakra Petch";font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:conic-gradient(from 0deg,var(--purple),var(--indigo),var(--sky),var(--purple));box-shadow:0 0 12px var(--indigo)}
nav a{color:var(--muted);text-decoration:none;margin:0 12px;font-weight:600}nav a:hover{color:var(--ink)}
main{max-width:1200px;margin:0 auto;padding:72px 18px}
h1{font-family:"Chakra Petch";font-size:clamp(36px,4.6vw,64px);line-height:1.02;margin:0 0 10px}
.lead{color:#cbd6ff;max-width:68ch}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.hero-right{min-height:320px;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 80% 20%, rgba(107,124,255,.18), transparent 60%),
             radial-gradient(120% 90% at 20% 80%, rgba(168,85,247,.22), transparent 60%),
             var(--card)}
.char-wrap{position:relative;width:220px;aspect-ratio:3/4;display:grid;place-items:center;}
.skin{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 22px rgba(107,124,255,.35));}
.skin-shadow{position:absolute;inset:auto 0 20px 0;height:14px;filter:blur(6px);
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.55), transparent 90%);}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.badge{padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(180deg,rgba(18,22,46,.86),rgba(28,32,64,.80));font-weight:800;color:#EAF0FF;text-align:center;display:block}
.cta{display:flex;gap:10px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#FFFFFF!important;background:linear-gradient(180deg,rgba(34,45,118,.95),rgba(13,19,60,.95));box-shadow:0 10px 26px rgba(0,0,0,.35); position:relative; overflow:hidden; backface-visibility:hidden; will-change:transform; }
.btn.secondary{background:linear-gradient(180deg,rgba(168,85,247,.42),rgba(80,33,132,.56));color:#FFFFFF!important}
section{padding:56px 0}
.title{font-family:"Chakra Petch";font-size:28px;margin:0 0 12px}
.sub{color:#cbd6ff;margin:0 0 18px}
.banner{position:relative;margin-bottom:12px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(135deg,rgba(107,124,255,.18),rgba(168,85,247,.16));border:1px solid var(--stroke)}
.projects{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;
  background:linear-gradient(180deg,rgba(107,124,255,.15),rgba(168,85,247,.15));
  border:1px solid var(--stroke);padding:6px;box-sizing:border-box}
.thumb img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.thumb::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend:overlay;opacity:.22;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 2px,rgba(0,0,0,.05) 2px 6px);
  background-size:16px 16px;animation:stripe 3s linear infinite}
@keyframes stripe{from{background-position:0 0} to{background-position:16px 16px}}


.wm{position:absolute;left:0;right:0;bottom: 14%;height:22px;pointer-events:none;overflow:hidden}
.wm-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,18,.0),rgba(8,12,30,.55),rgba(4,6,18,.0));}
.wm-track{position:absolute;left:0;top:0;height:22px;white-space:nowrap;display:block;will-change:transform}
.wm-line{display:inline-block;margin-right:48px;font-weight:900;font-size:13px;letter-spacing:.28em;color:rgba(234,240,255,.92);text-transform:uppercase;text-rendering:optimizeLegibility;-webkit-text-stroke:0.6px rgba(0,0,0,.45);text-shadow:0 0 2px rgba(0,0,0,.6)}


dialog#lightbox{border:none;padding:0;background:rgba(5,5,17,.85);width:100vw;height:100vh;max-width:100vw;max-height:100vh;position:fixed;inset:0}
.lb-over{position:absolute;inset:0;pointer-events:none;mix-blend:overlay;opacity:.26;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 2px,rgba(0,0,0,.05) 2px 6px);
  background-size:16px 16px;animation:stripe 3s linear infinite}
.lb-wm{position:absolute;left:0;right:0;bottom: 16%;height:26px;pointer-events:none;overflow:hidden}
.lb-wm-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,18,.0),rgba(8,12,30,.6),rgba(4,6,18,.0));}
.lb-wm-track{position:absolute;left:0;top:0;height:26px;white-space:nowrap;display:block;will-change:transform}
.lb-wm-line{display:inline-block;margin-right:64px;font-weight:900;font-size:14px;letter-spacing:.30em;color:rgba(234,240,255,.96);-webkit-text-stroke:0.7px rgba(0,0,0,.5);text-shadow:0 0 2px rgba(0,0,0,.7)}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
#gallery.reveal{opacity:.08;transform:scale(.99)}
#gallery.reveal.active{opacity:1;transform:scale(1)}
.footer{ text-align:center;color:#b4c2ff77;border-top:1px solid var(--stroke);padding:22px 12px }

@media (max-width:1000px){
  .hero{display:grid;grid-template-columns:1.2fr .8fr;transition:none!important}
}

/* --- Anti-save deterrents --- */
img, .thumb, #lightImg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Let parent handle clicks; prevents direct press/hold on the image */
.thumb img, #lightImg { pointer-events: none; }

/* --- About section: flashy --- */
.grad-title{
  background: linear-gradient(90deg, var(--sky), var(--indigo), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative; display:inline-block; padding-bottom:6px;
}
.grad-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, rgba(14,165,233,.0), rgba(14,165,233,.9), rgba(168,85,247,.0));
  transform-origin:left; transform:scaleX(0); animation: underline-sweep 1.4s ease forwards .15s;
  border-radius:999px;
}
@keyframes underline-sweep{ to{ transform:scaleX(1); } }

.big-sub{ font-size:1.02rem; line-height:1.7; }
.about-pills{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.about-pills li{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:flex-start;
  padding:14px 14px; border-radius:16px;
  background: linear-gradient(180deg, rgba(107,124,255,.14), rgba(168,85,247,.12));
  border:1px solid var(--stroke); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.about-pills li:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(107,124,255,.18), rgba(168,85,247,.16));
  box-shadow: 0 18px 40px rgba(80,33,132,.25), 0 8px 16px rgba(14,165,233,.18);
}
.pill-icon{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background: radial-gradient(90% 90% at 70% 30%, rgba(168,85,247,.28), rgba(14,165,233,.18));
  border:1px solid var(--stroke); font-size:18px; filter: drop-shadow(0 4px 14px rgba(107,124,255,.35));
}
.pill-text{ color:#dbe4ff; }
.pill-text strong{ color:var(--ink); }
@media (max-width: 860px){
  .about-pills{ grid-template-columns:1fr; }
}

/* === Flashy HERO upgrades (contained) === */
.grad-title-xl{font-family:"Chakra Petch";font-weight:900;line-height:1.03;letter-spacing:.3px;background:linear-gradient(90deg,#7aa5ff 0%,#a855f7 25%,#7aa5ff 50%,#a855f7 75%,#7aa5ff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation: titlePan 10s ease-in-out infinite alternate;-webkit-text-stroke:1px rgba(0,0,0,.5);text-shadow:0 2px 10px rgba(0,0,0,.45);}
@keyframes heroGradient { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.hero-title .dot-sep{opacity:.7;margin:0 .35em}
.hero-title .shine{ position:relative }
.hero-title .shine::after{display:none}
.hero-title .shine:nth-child(1)::after{ animation-delay:.2s }
.hero-title .shine:nth-child(3)::after{ animation-delay:1.1s }
.hero-title .shine:nth-child(5)::after{ animation-delay:2.0s }
.hero-title .shine:nth-child(7)::after{ animation-delay:2.9s }
@keyframes shimmer { 0%{transform:translateX(-120%)} 45%{transform:translateX(120%)} 100%{transform:translateX(120%)} }
.hero-lead{position:relative;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(6,8,22,.90),rgba(10,14,34,.90));border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 24px rgba(0,0,0,.35);color:#F3F6FF;font-size:1.05rem;line-height:1.7;}
.hero-lead::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(134,163,255,.9), transparent);
  opacity:.32;
}
.badges-animated{gap:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pill-pop{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(107,124,255,.2),rgba(168,85,247,.14));border-color:rgba(255,255,255,.14);box-shadow:0 10px 22px rgba(44,67,180,.2),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s ease,box-shadow .2s ease,background .25s ease;}
.pill-pop::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 140% at 20% 10%, rgba(255,255,255,.18), transparent 60%);
  opacity:.5; pointer-events:none;
}
.pill-pop:hover{ transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(44,67,180,.28), inset 0 1px 0 rgba(255,255,255,.25);
  background:linear-gradient(180deg, rgba(107,124,255,.28), rgba(168,85,247,.2));
}
.cta-glow{ gap:12px }
.btn-primary{
  position:relative; isolation:isolate; overflow:hidden;
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(34,45,118,.85), rgba(13,19,60,.75));
}
.btn-primary::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  background: radial-gradient(80% 120% at 50% -20%, rgba(107,124,255,.55), transparent 60%),
              radial-gradient(60% 140% at 80% 120%, rgba(168,85,247,.35), transparent 70%);
  filter: blur(10px); opacity:.7;
}
.btn-ghost{ backdrop-filter: blur(4px); border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(168,85,247,.2), rgba(80,33,132,.22)); }
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.hero .card{position:relative; overflow:hidden}
.hero .cta{position:static}

/* ===== EXTRA FLASH for HERO (tasteful) ===== */
.hero-left{overflow:hidden; position:relative; isolation:isolate; z-index:0; }

.hero-left .aurora{
  position:absolute; inset:-20%;
  background:
    radial-gradient(50% 60% at 20% 20%, rgba(168,85,247,.25), transparent 70%),
    radial-gradient(60% 50% at 80% 25%, rgba(14,165,233,.22), transparent 70%),
    conic-gradient(from 180deg at 70% 70%, rgba(135,155,255,.18), rgba(255,255,255,0) 50%);
  filter: blur(28px) saturate(120%);
  animation: auroraFlow 18s ease-in-out infinite alternate;
  z-index:-2;
 opacity:.30;  opacity:.18; }
@keyframes auroraFlow{
  0%{ transform: translate(-2%, -1%) scale(1.02) rotate(0deg); }
  100%{ transform: translate(2%, 2%) scale(1.06) rotate(6deg); }
}
.hero-left .neon{
  position:absolute; inset:0; border-radius:22px;
  background: conic-gradient(from 0deg, rgba(107,124,255,.55), rgba(168,85,247,.55), rgba(14,165,233,.45), rgba(107,124,255,.55));
  filter: blur(18px) opacity(.45);
  opacity:.28; z-index:-1;
  animation: neonPulse 6s ease-in-out infinite;
  pointer-events:none;
 opacity:.18;}
@keyframes neonPulse{ 0%,100%{opacity:.42; transform:scale(1)} 50%{opacity:.62; transform:scale(1.01)} }
.grad-title-xl{font-family:"Chakra Petch";font-weight:900;line-height:1.03;letter-spacing:.3px;background:linear-gradient(90deg,#7aa5ff 0%,#a855f7 25%,#7aa5ff 50%,#a855f7 75%,#7aa5ff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation: titlePan 10s ease-in-out infinite alternate;-webkit-text-stroke:1px rgba(0,0,0,.5);text-shadow:0 2px 10px rgba(0,0,0,.45);}
.hero-title{text-align:center;margin-bottom:10px}
.hero-title .shine::after{display:none}
.hero-lead{position:relative;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(6,8,22,.90),rgba(10,14,34,.90));border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 24px rgba(0,0,0,.35);color:#F3F6FF;font-size:1.05rem;line-height:1.7;}
.hero-lead::before{
  content:""; position:absolute; left:-8px; top:-8px; right:-8px; bottom:-8px; border-radius:18px;
  background: linear-gradient(90deg, rgba(107,124,255,.18), rgba(168,85,247,.18), rgba(14,165,233,.18));
  filter: blur(18px); opacity:.15; z-index:-1;
}
.badges-animated .pill-pop{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(107,124,255,.2),rgba(168,85,247,.14));border-color:rgba(255,255,255,.14);box-shadow:0 10px 22px rgba(44,67,180,.2),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s ease,box-shadow .2s ease,background .25s ease;}
.badges-animated .pill-pop::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 80%);transform:translateX(-65%);animation:pillSweep 2.6s cubic-bezier(.25,.1,.25,1) infinite;will-change:transform;pointer-events:none;}
.badges-animated .pill-pop:nth-child(2)::after{ animation-delay:1.2s }
.badges-animated .pill-pop:nth-child(3)::after{ animation-delay:2.2s }
.badges-animated .pill-pop:nth-child(4)::after{ animation-delay:3.2s }
@keyframes pillSheen{ 0%{transform:rotate(12deg) translateX(-120%)} 45%{transform:rotate(12deg) translateX(120%)} 100%{transform:rotate(12deg) translateX(120%)} }
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#FFFFFF!important;background:linear-gradient(180deg,rgba(34,45,118,.95),rgba(13,19,60,.95));box-shadow:0 10px 26px rgba(0,0,0,.35); position:relative; overflow:hidden; backface-visibility:hidden; will-change:transform; }
.btn::after{content:""; position:absolute; top:-15%; bottom:-15%; left:-60%; right:-60%;border-radius:inherit; pointer-events:none;background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%);-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);transform: translateX(-65%);transition: transform .85s cubic-bezier(.22,.61,.36,1);will-change: transform;}
.btn:hover::after{ animation: btnSheenPass .95s cubic-bezier(.22,.61,.36,1) 1; }
@keyframes btnSheen{ to{ transform:translateX(120%); } }
.btn-primary{ box-shadow: 0 10px 30px rgba(107,124,255,.35), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary:hover{ box-shadow: 0 16px 46px rgba(107,124,255,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost{ box-shadow: 0 8px 26px rgba(168,85,247,.28) }
.btn-ghost:hover{ box-shadow: 0 14px 40px rgba(168,85,247,.36) }
.hero-right .char-wrap{ transition: transform .25s ease; }
.hero-right:hover .char-wrap{ transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .hero-left .aurora, .hero-left .neon, .hero-title .shine::after,
  .badges-animated .pill-pop::after, .btn::after { animation:none!important }
}


/* Fit hero buttons nicely across the card */
.hero-left .cta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.hero-left .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#FFFFFF!important;background:linear-gradient(180deg,rgba(34,45,118,.95),rgba(13,19,60,.95));box-shadow:0 10px 26px rgba(0,0,0,.35); position:relative; overflow:hidden; backface-visibility:hidden; will-change:transform; }


/* Center the skin render and size it responsively */
.hero-right{ display:grid; place-items:center; }
.hero-right .char-wrap{ width:min(280px, 70%); margin:auto; }
@media (min-width:1200px){
  .hero-right .char-wrap{ width:300px; }
}


/* --- Readability boost for hero --- */
.hero-left, .hero-left * { text-shadow: none; }
.grad-title-xl{font-family:"Chakra Petch";font-weight:900;line-height:1.03;letter-spacing:.3px;background:linear-gradient(90deg,#7aa5ff 0%,#a855f7 25%,#7aa5ff 50%,#a855f7 75%,#7aa5ff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation: titlePan 10s ease-in-out infinite alternate;-webkit-text-stroke:1px rgba(0,0,0,.5);text-shadow:0 2px 10px rgba(0,0,0,.45);}
.hero-lead{position:relative;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(6,8,22,.90),rgba(10,14,34,.90));border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 24px rgba(0,0,0,.35);color:#F3F6FF;font-size:1.05rem;line-height:1.7;}
.badge{padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(180deg,rgba(18,22,46,.86),rgba(28,32,64,.80));font-weight:800;color:#EAF0FF;text-align:center;display:block}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#FFFFFF!important;background:linear-gradient(180deg,rgba(34,45,118,.95),rgba(13,19,60,.95));box-shadow:0 10px 26px rgba(0,0,0,.35); position:relative; overflow:hidden; backface-visibility:hidden; will-change:transform; }



/* Keep hero buttons visible and contained */
.hero-left .cta{ position:relative; z-index:1; }



/* High-contrast hero text */
.hero-left h1,.hero-left p,.hero-left .badge,.hero-left .btn{ color:#FFFFFF  position:relative; overflow:hidden; backface-visibility:hidden; will-change:transform; }
.hero-left .sub{ color:#F1F5FF }
.hero-title{text-align:center;margin-bottom:10px}



/* === Stacked hero title === */
.hero-title.stacked{display:inline-block;text-align:center;margin:0 auto 12px;}
.hero-title.stacked .line{
  display:block;
  line-height:1.05;
  margin: 0.08em 0;
  background:inherit;
  -webkit-background-clip:text; background-clip:text;
}
.hero-title.stacked{display:inline-block;text-align:center;margin:0 auto 12px;}
.hero-title .dot-sep{ display:inline-block; transform: translateY(-0.02em); opacity:.85; margin-left:.25em; }
.hero-title.stacked .line::after{
  content:""; display:block; height:2px; margin:.18em auto 0; width:min(560px, 80%);
  background: linear-gradient(90deg, rgba(14,165,233,.0), rgba(14,165,233,.55), rgba(168,85,247,.0));
  opacity:.22;
}
.grad-title-xl{
  background:linear-gradient(90deg,#7aa5ff 0%,#a855f7 25%,#7aa5ff 50%,#a855f7 75%,#7aa5ff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation: titlePan 10s ease-in-out infinite alternate;
  -webkit-text-stroke:1px rgba(0,0,0,.55);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
@keyframes titlePan{0%{background-position:0% 50%}100%{background-position:100% 50%}}

@keyframes btnSheenPass{0%{ transform: translateX(-65%);}100%{ transform: translateX(65%);}}


/* === Centered stacked title with unique animation === */
.hero-left{ text-align:center; } /* center within the card */
.hero-left .hero-lead, .hero-left .badges, .hero-left .cta{ text-align:left; margin-left:auto; margin-right:auto; max-width:780px; }

.hero-title.stacked .line{
  display:block;
  line-height:1.06;
  margin: .06em 0;
  opacity:0; transform: translateY(12px) scale(.985) skewY(1.2deg);
  animation: riseGlow .7s cubic-bezier(.2,.7,.2,1) forwards;
  will-change: transform, opacity;
  position:relative;
}

/* Stagger timings */
.hero-title.stacked .line:nth-child(1){ animation-delay:.05s }
.hero-title.stacked .line:nth-child(2){ animation-delay:.18s }
.hero-title.stacked .line:nth-child(3){ animation-delay:.31s }
.hero-title.stacked .line:nth-child(4){ animation-delay:.44s }

/* Underline sweep that loops very subtly (unique but not loud) */
.hero-title.stacked .line::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-0.14em; height:2px; width:68%;
  background: linear-gradient(90deg, rgba(14,165,233,0), rgba(14,165,233,.7), rgba(168,85,247,.0));
  opacity:.25; border-radius:999px;
  animation: underFlow 3.8s ease-in-out infinite;
}
.hero-title.stacked .line:nth-child(2)::after{ animation-delay:.6s }
.hero-title.stacked .line:nth-child(3)::after{ animation-delay:1.2s }
.hero-title.stacked .line:nth-child(4)::after{ animation-delay:1.8s }

@keyframes riseGlow{
  0%{ opacity:0; transform: translateY(12px) scale(.985) skewY(1.2deg); text-shadow: 0 0 0 rgba(138,182,255,0); }
  60%{ opacity:1; transform: translateY(0) scale(1) skewY(0deg); text-shadow: 0 8px 28px rgba(138,182,255,.35); }
  100%{ opacity:1; transform: translateY(0) scale(1); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
}
@keyframes underFlow{
  0%{ transform: translateX(-50%) scaleX(.85); opacity:.18 }
  50%{ transform: translateX(-50%) scaleX(1); opacity:.3 }
  100%{ transform: translateX(-50%) scaleX(.85); opacity:.18 }
}

/* Keep gradient readable and centered */
.grad-title-xl{
  background:linear-gradient(90deg,#7aa5ff 0%,#a855f7 25%,#7aa5ff 50%,#a855f7 75%,#7aa5ff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation: titlePan 10s ease-in-out infinite alternate;
  -webkit-text-stroke:1px rgba(0,0,0,.55);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  font-weight:900;
}
@keyframes titlePan{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* Bullet alignment */
.hero-title .dot-sep{ display:inline-block; transform: translateY(-.02em); opacity:.95; margin-left:.22em; }


/* === Block-building animation for the stacked hero title === */
.hero-title.block-build{ text-align:center }
.hero-title.block-build .line{ white-space:nowrap }
.hero-title.block-build .char{
  display:inline-block;
  transform: translateY(22px) scale(.92);
  opacity:0;
  filter: saturate(120%);
}
/* animate in blocks; steps() makes motion feel "blocky" */
.block-animate .char{
  animation: buildChar .62s steps(5, end) forwards;
  animation-delay: calc(var(--row, 0)*.10s + var(--i, 0)*.018s);
  will-change: transform, opacity;
}
@keyframes buildChar{
  0% { opacity:0; transform: translateY(22px) scale(.92); }
  60%{ opacity:1; transform: translateY(0px) scale(1); }
  100%{ opacity:1; transform: translateY(0px) scale(1); }
}
/* subtle top-to-bottom scan stripe over the whole title during build */
.block-animate .scan{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-10%; width:74%; height:0;
  background: linear-gradient(180deg, rgba(138,182,255,.0), rgba(138,182,255,.20), rgba(168,85,247,.0));
  filter: blur(6px);
  border-radius:999px;
  animation: scanDown .9s ease-out forwards;
  pointer-events:none;
}
@keyframes scanDown{
  0%{ height:0; opacity:.0 }
  30%{ height:20%; opacity:.25 }
  100%{ height:0; opacity:0; top:85% }
}
/* keep underline flow but start only after build */
.hero-title.stacked .line::after{ opacity:.0; }
.block-animate .line::after{ animation-play-state: running; opacity:.22; }