/* Chepi: deep navy, one violet voice, a cyan spark for what is alive. */
:root{
  color-scheme:dark;
  --bg:#0e0c2c; --card:#1c1952; --line:#3a3578; --ink:#f1efff; --mute:#aaa6d4;
  --vio:#9c85ff; --vio2:#5b2ee6; --spark:#5ec8f2;
  --fd:"Sora",system-ui,sans-serif; --fb:"Figtree",system-ui,sans-serif;
  --gutter:clamp(18px,5vw,64px); --ease:cubic-bezier(.2,.85,.2,1);
  --paper:#1c1952; --paper-2:#24215a; --ink-2:#aaa6d4; /* tokens the shared consent banner reads */
}
*{box-sizing:border-box}
html{scroll-snap-type:y proximity;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--spark);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}

/* background */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35}
.orbs i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,var(--vio2),transparent 65%);animation:drift1 30s ease-in-out infinite alternate}
.orbs i:nth-child(2){width:36vmax;height:36vmax;right:-12vmax;bottom:-10vmax;background:radial-gradient(circle,#2f6fd0,transparent 65%);opacity:.25;animation:drift2 38s ease-in-out infinite alternate}
.orbs i:nth-child(3){width:20vmax;height:20vmax;left:55vw;top:30vh;background:radial-gradient(circle,var(--vio),transparent 65%);opacity:.12;animation:drift1 24s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vw,8vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-8vw,-9vh) scale(1.1)}}

/* bar + dots */
#bar{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);z-index:20;background:linear-gradient(var(--bg),transparent)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--fd);font-weight:650;font-size:22px;letter-spacing:-.02em}
.brand .mark{width:28px;height:28px}
.home{color:var(--mute);text-decoration:none;font-size:14px}.home:hover{color:var(--ink)}
.dots{position:fixed;right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:20}
.dots a{display:block;width:10px;height:10px;border-radius:50%;background:var(--line);transition:transform .3s var(--ease),background .3s}
.dots a[aria-current="true"]{background:var(--vio);transform:scale(1.5);box-shadow:0 0 12px var(--vio)}
@media (max-width:600px){.dots{display:none}.home{display:none}}

/* the mark */
.mark .m-arc,.mark use{fill:none}
.mark{overflow:visible}
svg .m-arc{fill:none;stroke:var(--vio);stroke-width:13;stroke-linecap:round}
svg .m-eye{fill:var(--ink)}
svg .m-spark{fill:var(--spark)}

/* slides */
main{position:relative;z-index:1}
.slide{min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(18px,3.4vh,36px);padding:90px var(--gutter) 70px;position:relative}
h1,h2{font-family:var(--fd);font-weight:650;letter-spacing:-.03em;margin:0;line-height:1}
h2{font-size:clamp(34px,6vw,76px);max-width:16ch}
.big-line{font-size:clamp(22px,3.2vw,40px);margin:0;max-width:22ch;font-weight:500}
.kick{margin:0;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(12px,1.2vw,15px);color:var(--vio)}
.small{margin:0;color:var(--mute);font-size:clamp(15px,1.5vw,19px)}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:600;font-size:18px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);border-color:var(--vio)}
.btn.primary{border:0;color:#0e0c2c;background:linear-gradient(120deg,var(--vio),#d6ccff,var(--vio));background-size:220% 220%;animation:shimmer 4s ease-in-out infinite;box-shadow:0 0 22px rgba(156,133,255,.45)}
.btn.primary:hover{box-shadow:0 0 36px rgba(156,133,255,.75)}
@keyframes shimmer{50%{background-position:100% 50%}}

/* shared entrances: play each time a slide comes into view */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.on .rise{opacity:1;transform:none;transition-delay:.35s}
.on .rise.late{transition-delay:.85s}.on .rise.later{transition-delay:1.3s}
[data-split] .w{display:inline-block;white-space:pre;opacity:0;transform:translateY(.5em) rotate(-3deg);filter:blur(6px)}
.on [data-split] .w{animation:wordIn .8s var(--ease) forwards;animation-delay:calc(var(--d) * 90ms + .1s)}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* 1. hello */
.hero-mark{width:clamp(110px,18vw,190px);height:auto;filter:drop-shadow(0 0 24px rgba(156,133,255,.45))}
.hero-mark .m-arc{stroke-dasharray:260;stroke-dashoffset:260}
.hero-mark .m-eye,.hero-mark .m-spark{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.on .hero-mark .m-arc{animation:draw 1.4s .2s cubic-bezier(.6,0,.2,1) forwards}
.on .hero-mark .m-eye{animation:pop .45s 1.2s var(--ease) forwards,blink 5s 2.4s infinite}
.on .hero-mark .m-spark{animation:pop .5s 1.5s var(--ease) forwards,twinkle 2.8s 2s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.65) rotate(45deg)}}
.letters{font-size:clamp(72px,15vw,180px);color:var(--ink)}
.letters .ch{display:inline-block;opacity:0;transform:translateY(.6em) scale(.7)}
.on .letters .ch{animation:bounceIn .9s var(--ease) forwards,wave 4.5s ease-in-out infinite;animation-delay:calc(var(--d) * 80ms + .5s),calc(var(--d) * 160ms + 2.6s)}
@keyframes wave{0%,30%,100%{color:var(--ink);text-shadow:none}12%{color:var(--vio);text-shadow:0 0 30px rgba(156,133,255,.8)}}
@keyframes bounceIn{0%{opacity:0;transform:translateY(.6em) scale(.7)}60%{opacity:1;transform:translateY(-.08em) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes sheen{to{background-position:-300% 0}}
.cue{position:absolute;bottom:28px;width:26px;height:42px;border:2px solid var(--line);border-radius:14px}
.cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--vio);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* 2. name */
.acro{display:grid;gap:clamp(6px,1.6vh,16px);text-align:left}
.amp{margin:0;font-family:var(--fd);font-weight:650;font-size:clamp(40px,7vw,88px);line-height:.9;color:var(--spark);text-shadow:0 0 30px rgba(94,200,242,.7);opacity:0;transform:scale(0) rotate(-90deg);transform-origin:20% 60%}
.on .amp{animation:ampIn .8s var(--ease) 1.75s forwards,ampGlow 3s ease-in-out 2.6s infinite}
@keyframes ampIn{70%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes ampGlow{50%{text-shadow:0 0 50px rgba(94,200,242,1),0 0 90px rgba(156,133,255,.6)}}
.acro ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,1.2vh,12px)}
.acro li{display:flex;align-items:baseline;font-family:var(--fd);font-weight:650;letter-spacing:-.03em;font-size:clamp(36px,7.4vw,92px);line-height:1}
.acro b{color:var(--vio);display:inline-block;opacity:0;transform:translateY(-1.2em) rotate(-12deg);text-shadow:0 0 28px rgba(156,133,255,.55)}
.acro span{display:inline-block;clip-path:inset(0 100% 0 0);color:var(--ink)}
.acro em{font-style:normal;color:var(--spark);margin-left:.3em;opacity:0;transform:scale(0)}
.on .acro b{animation:drop .7s var(--ease) forwards;animation-delay:calc(var(--i) * 140ms + .2s)}
.on .acro span{animation:wipe .8s var(--ease) forwards;animation-delay:calc(var(--i) * 140ms + 1s)}
.on .acro .amp + ul b{animation-delay:calc(var(--i) * 140ms + 2s)}
.on .acro .amp + ul span{animation-delay:calc(var(--i) * 140ms + 2.6s)}
.on .acro em{animation:popIn .5s var(--ease) 1.9s forwards}
@keyframes drop{70%{opacity:1;transform:translateY(.08em) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes popIn{to{opacity:1;transform:none}}

/* 3. shift */
.line{margin:0;display:grid;gap:10px;justify-items:center}
.line .words{font-family:var(--fd);font-weight:650;letter-spacing:-.03em;font-size:clamp(34px,6.6vw,84px);line-height:1.05}
.tag{letter-spacing:.3em;text-transform:uppercase;font-size:clamp(12px,1.2vw,15px);color:var(--mute);opacity:0;transition:opacity .8s}
.on .tag{opacity:1}
.on .two .tag{transition-delay:1.2s;color:var(--vio)}
.two .w{animation-delay:calc(var(--d) * 110ms + 1.4s)!important}
.glow .w{background:linear-gradient(100deg,var(--vio),var(--spark),var(--vio));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.on .glow .w{animation:wordIn .9s var(--ease) forwards,sheen 4s linear 2.6s infinite}

/* 4. cost */
.price{font-family:var(--fd);font-weight:700;letter-spacing:-.04em;font-size:clamp(84px,17vw,220px);line-height:.9;color:var(--vio);text-shadow:0 0 40px rgba(156,133,255,.35);font-variant-numeric:tabular-nums}
.price .cur{font-size:.45em;vertical-align:.8em;color:var(--mute);margin-right:.05em}
.bars{width:min(640px,100%);display:grid;gap:14px}
.bar{display:grid;grid-template-columns:clamp(96px,14vw,150px) 1fr 76px;align-items:center;gap:12px;font-size:16px;color:var(--mute);text-align:left}
.bar i{height:16px;border-radius:999px;background:rgba(58,53,120,.45);position:relative;overflow:visible}
.bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--line);transition:width 1.6s var(--ease)}
.bar.now i::after{background:linear-gradient(90deg,var(--vio),var(--spark));box-shadow:0 0 14px var(--vio),0 0 26px var(--spark)}
.bar b{color:var(--ink);font-weight:600}
.on .bar.then i::after{width:100%;transition-delay:.3s}
.on .bar.now i::after{width:max(12px,1.32%);transition-delay:1.4s}

/* 5. age chart */
.tiny{margin:0;color:var(--mute);font-size:13px;opacity:.7}
.chart{width:min(1000px,100%)}
#ageChart{width:100%;height:auto;overflow:visible;display:block}
#ageChart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 7}
#ageChart .area{fill:url(#ageFill);opacity:0;transition:opacity 1.2s 1.6s}
#ageChart .line{fill:none;stroke:url(#ageLine);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#ageChart .pt{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
#ageChart .pt circle{fill:var(--ink)}
#ageChart .val{fill:var(--ink);font-family:var(--fd);font-weight:650;font-size:30px}
#ageChart .yr{fill:var(--mute);font-size:20px}
#ageChart .zero circle.dot{fill:var(--spark)}
#ageChart .zero .val{fill:var(--spark);font-size:64px}
#ageChart .zero .yr{fill:var(--spark);font-weight:600}
#ageChart .halo{fill:none;stroke:var(--spark);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.on #ageChart .line{animation:drawLine 2.6s .3s cubic-bezier(.5,0,.2,1) forwards}
.on #ageChart .area{opacity:1}
.on #ageChart .pt{animation:popIn .5s var(--ease) forwards;animation-delay:calc(var(--i) * 330ms + .4s)}
.on #ageChart .halo{animation:halo 2.2s ease-out infinite;animation-delay:calc(var(--h) * .7s + 3.1s)}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes halo{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* 6. loop */
.engine{position:relative;width:min(600px,92vw);aspect-ratio:1;max-height:60vh}
#engine{position:absolute;inset:0;width:100%;height:100%}
.engine .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;pointer-events:none;animation:breathe 3.4s ease-in-out infinite}
.engine .core .mark{width:clamp(72px,14vw,120px);height:auto;filter:drop-shadow(0 0 16px rgba(156,133,255,.8))}
.engine .core b{font-family:var(--fd);font-weight:650;letter-spacing:-.03em;font-size:clamp(26px,4.4vw,44px);line-height:1;text-shadow:0 0 22px rgba(156,133,255,.7)}
.engine .core span{font-size:clamp(11px,1.3vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--spark);white-space:nowrap}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.1)}}
.key{display:flex;gap:22px;font-size:15px;color:var(--mute)}
.key span{display:flex;align-items:center;gap:8px}
.key i{width:22px;height:4px;border-radius:2px}
.key .build i{background:var(--vio);box-shadow:0 0 8px var(--vio)}
.key .learn i{background:var(--spark);box-shadow:0 0 8px var(--spark)}
.key .grow i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--vio),0 0 14px var(--spark)}

/* 7. raise */
.raise-num{font-family:var(--fd);font-weight:700;letter-spacing:-.04em;font-size:clamp(110px,24vw,300px);line-height:.85;background:linear-gradient(160deg,#fff,var(--vio) 55%,var(--spark));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(156,133,255,.35));transform:scale(.7);opacity:0;transition:transform 1.2s var(--ease),opacity .8s}
.on .raise-num{transform:none;opacity:1}
.raise-num .cur{font-size:.42em;vertical-align:.95em}
.raise-num .m{font-size:.7em}

.goals{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,2.4vw,28px);flex-wrap:wrap;justify-content:center}
.goals li{display:grid;gap:6px;min-width:clamp(150px,18vw,220px);padding:18px 22px;border:1.5px solid var(--line);border-radius:18px;background:rgba(28,25,82,.6);backdrop-filter:blur(6px);opacity:0;transform:translateY(30px)}
.on .goals li{animation:stepIn .8s var(--ease) forwards;animation-delay:calc(var(--i) * 220ms + 1s)}
@keyframes stepIn{to{opacity:1;transform:none}}
.goals b{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;font-size:clamp(38px,5vw,62px);line-height:1;color:var(--vio);font-variant-numeric:tabular-nums}
.goals li:nth-child(3) b{color:var(--spark)}
.goals span{color:var(--mute);font-size:clamp(15px,1.5vw,18px)}

/* alive: when Chepi started, and what it has built since */
.born{font-size:clamp(40px,7.5vw,96px);max-width:14ch}
.clock{margin:0;font-family:var(--fd);font-weight:600;font-size:clamp(17px,2.2vw,28px);color:var(--spark);font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 0 18px rgba(94,200,242,.45)}
.clock b{font-weight:700;color:var(--ink)}
.vitals li:nth-child(2) b{color:var(--spark)}.vitals li:nth-child(3) b{color:var(--vio)}
.tiny a{color:var(--mute);text-decoration-color:var(--line)}.tiny a:hover{color:var(--ink)}

/* checkup */
.scan{display:flex;align-items:center;gap:clamp(24px,5vw,72px);flex-wrap:wrap;justify-content:center}
.radar{position:relative;width:clamp(180px,24vw,280px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);background:radial-gradient(circle,rgba(156,133,255,.12),transparent 70%),repeating-radial-gradient(circle,transparent 0 22%,rgba(58,53,120,.7) 22% calc(22% + 1px));overflow:hidden;opacity:0;transform:scale(.7);transition:opacity .8s,transform 1s var(--ease)}
.on .radar{opacity:1;transform:none;transition-delay:.6s}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(94,200,242,.55),rgba(94,200,242,0) 25%,transparent);animation:spin 2.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radar .blip{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--spark);box-shadow:0 0 12px var(--spark);opacity:0;animation:blip 2.6s ease-out infinite}
.radar .b1{left:70%;top:28%;animation-delay:.3s}.radar .b2{left:76%;top:68%;animation-delay:1s}.radar .b3{left:26%;top:62%;animation-delay:1.9s}
@keyframes blip{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.3)}60%{opacity:.25;transform:scale(1)}100%{opacity:0}}
.radar .mark{position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 12px rgba(156,133,255,.8))}
.finds{list-style:none;margin:0;padding:0;display:grid;gap:14px;text-align:left}
.finds li{display:grid;grid-template-columns:clamp(96px,10vw,130px) clamp(140px,16vw,200px);align-items:center;gap:16px;padding:14px 20px;border:1.5px solid var(--line);border-radius:16px;background:rgba(28,25,82,.6);opacity:0;transform:translateX(40px)}
.on .finds li{animation:slideIn .7s var(--ease) forwards;animation-delay:calc(var(--i) * 450ms + 1.4s)}
@keyframes slideIn{to{opacity:1;transform:none}}
.finds b{font-family:var(--fd);font-weight:650;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}
.meter{height:12px;border-radius:999px;background:rgba(58,53,120,.6);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--vio),var(--spark));transition:width 1.4s var(--ease)}
.on .meter i{width:calc(var(--w) * 100%);transition-delay:1.9s}
.stars{display:flex;gap:4px;font-size:clamp(20px,2.2vw,26px);color:var(--line)}
.stars i{font-style:normal;transition:color .3s,text-shadow .3s}
.on .stars i{color:var(--vio);text-shadow:0 0 10px rgba(156,133,255,.7)}
.on .stars i:nth-child(1){transition-delay:2.4s}.on .stars i:nth-child(2){transition-delay:2.55s}.on .stars i:nth-child(3){transition-delay:2.7s}.on .stars i:nth-child(4){transition-delay:2.85s}
.on .stars i.half{color:transparent;background:linear-gradient(90deg,var(--vio) 50%,var(--line) 50%);-webkit-background-clip:text;background-clip:text;transition-delay:3s}
.fixes{display:flex;gap:8px}
.fixes i{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line);position:relative;transition:background .3s,border-color .3s}
.fixes i::after{content:"";position:absolute;left:9px;top:4px;width:7px;height:13px;border:solid #0e0c2c;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.on .fixes i{background:var(--spark);border-color:var(--spark)}
.on .fixes i::after{transform:rotate(45deg) scale(1)}
.on .fixes i:nth-child(1),.on .fixes i:nth-child(1)::after{transition-delay:3.2s}.on .fixes i:nth-child(2),.on .fixes i:nth-child(2)::after{transition-delay:3.45s}.on .fixes i:nth-child(3),.on .fixes i:nth-child(3)::after{transition-delay:3.7s}
@media (max-width:600px){.finds li{grid-template-columns:90px 150px;padding:12px 16px}}

/* a living logo: blinking eyes, twinkling star */
.mark.live .m-eye{transform-box:fill-box;transform-origin:center;animation:blink 4.5s 1s infinite}
.mark.live .m-spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.6s ease-in-out infinite}

/* company pages */
.co-page .slide{min-height:100vh;min-height:100svh}
.co-mark{width:clamp(90px,13vw,140px);height:auto;filter:drop-shadow(0 0 26px rgba(156,133,255,.55))}
.co-mark .m-arc{stroke-dasharray:260;stroke-dashoffset:260}
.co-mark .m-eye,.co-mark .m-spark{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.on .co-mark .m-arc{animation:draw 1.2s .1s cubic-bezier(.6,0,.2,1) forwards}
.on .co-mark .m-eye{animation:pop .45s 1s var(--ease) forwards,blink 5s 2.2s infinite}
.on .co-mark .m-spark{animation:pop .5s 1.2s var(--ease) forwards,twinkle 2.8s 1.8s ease-in-out infinite}
.co-name{font-size:clamp(48px,9vw,112px);max-width:14ch}
.co-tag{margin:0;color:var(--spark);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(13px,1.3vw,16px)}
.co-one{max-width:28ch;color:var(--ink)}
.soon{margin:0;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1.5px dashed var(--line);border-radius:999px;color:var(--mute);font-size:15px}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 10px var(--spark);animation:twinkle 1.6s ease-in-out infinite}
.co-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.co-nav a{color:var(--mute);text-decoration:none;font-size:15px;padding:10px 16px;border-radius:999px;border:1px solid transparent;transition:color .2s,border-color .2s}
.co-nav a:hover{color:var(--ink);border-color:var(--line)}

/* 7. end */
.end-mark{width:clamp(90px,14vw,150px);height:auto;filter:drop-shadow(0 0 30px rgba(94,200,242,.55))}
.end-mark .m-arc{stroke-dasharray:260;stroke-dashoffset:260}
.end-mark .m-eye,.end-mark .m-spark{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.on .end-mark .m-arc{animation:draw 1.4s .2s cubic-bezier(.6,0,.2,1) forwards}
.on .end-mark .m-eye{animation:pop .45s 1.2s var(--ease) forwards,blink 5s 2.4s infinite}
.on .end-mark .m-spark{animation:pop .5s 1.5s var(--ease) forwards,twinkle 2.8s 2s ease-in-out infinite}
.end-line{font-size:clamp(42px,6.6vw,92px);max-width:13ch}
.s-end{gap:clamp(14px,2.6vh,28px)}
.end-mark{width:clamp(70px,9vw,110px)!important}
.built{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);width:min(1100px,100%)}
.built li{opacity:0;transform:translateY(24px) scale(.9)}
.built a{position:relative;display:grid;gap:3px;justify-items:center;text-align:center;height:100%;padding:14px 10px 12px;border:1.5px solid var(--line);border-radius:16px;background:rgba(28,25,82,.6);backdrop-filter:blur(6px);text-decoration:none;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.built a:hover,.built a:focus-visible{transform:translateY(-6px) scale(1.03);border-color:var(--spark);box-shadow:0 0 30px rgba(94,200,242,.4)}
.built a:hover .bot{transform:rotate(-12deg) scale(1.15)}
.on .built li{animation:stepIn .7s var(--ease) forwards;animation-delay:calc(var(--i) * 110ms + 2.1s)}
.on .built a{animation:glowCard 6s ease-in-out infinite;animation-delay:calc(var(--i) * .6s + 3.4s)}
@keyframes glowCard{0%,20%,100%{border-color:var(--line);box-shadow:none}8%{border-color:var(--vio);box-shadow:0 0 24px rgba(156,133,255,.45)}}
.built .co-logo{width:clamp(44px,4.4vw,56px);height:auto;margin-bottom:6px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.built a:hover .co-logo{transform:rotate(-6deg) scale(1.1)}
.badge{position:absolute;right:7px;bottom:7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0e0c2c;border:1.5px solid var(--vio);box-shadow:0 0 10px rgba(156,133,255,.5)}
.badge .mark{width:16px;height:16px}
.badge .m-eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite;animation-delay:calc(var(--i,0) * .45s)}
.built a{padding-bottom:34px}
.co-logo-wrap{position:relative;opacity:0;transform:scale(.6) rotate(-8deg)}
.on .co-logo-wrap{animation:popIn .8s var(--ease) .1s forwards}
.co-logo.big{width:clamp(96px,13vw,140px);height:auto;border-radius:32px;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 40px rgba(156,133,255,.25);display:block}
.co-logo-wrap .badge{right:-10px;bottom:-10px;width:44px;height:44px;border-width:2px}
.co-logo-wrap .badge .mark{width:28px;height:28px}
.built .bot{width:30px;height:30px;margin-bottom:4px;transition:transform .35s var(--ease);filter:drop-shadow(0 0 8px rgba(156,133,255,.6))}
.built .bot .m-eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite;animation-delay:calc(var(--i) * .45s)}
.built .bot .m-spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
.built b{font-family:var(--fd);font-weight:650;font-size:clamp(15px,1.45vw,19px);letter-spacing:-.02em;line-height:1.15}
.built span{color:var(--mute);font-size:clamp(12px,1.05vw,14px);line-height:1.25}
@media (max-width:900px){.built{grid-template-columns:repeat(2,minmax(0,1fr))}}
.end-line .w{background:linear-gradient(100deg,var(--ink) 20%,var(--vio) 45%,var(--spark) 55%,var(--ink) 80%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.on .end-line .w{animation:wordIn .9s var(--ease) forwards,sheen 5s linear 2s infinite;animation-delay:calc(var(--d) * 160ms + 1s),2.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,[data-split] .w,.letters .ch,.acro b,.amp,.built li,.co-logo-wrap,.goals li,.built li,.finds li,.radar,#ageChart .pt,#ageChart .area,.raise-num,.tag{opacity:1!important;transform:none!important;filter:none!important}
  .acro span{clip-path:none!important}
  .hero-mark .m-arc,.end-mark .m-arc,.co-mark .m-arc,#ageChart .line{stroke-dashoffset:0}
  .co-mark .m-eye,.co-mark .m-spark{transform:none}
  .meter i{width:calc(var(--w) * 100%)}.stars i{color:var(--vio)}.fixes i{background:var(--spark)}.fixes i::after{transform:rotate(45deg)}
  .hero-mark .m-eye,.hero-mark .m-spark,.end-mark .m-eye,.end-mark .m-spark{transform:none}
  .bar.then i::after{width:100%}.bar.now i::after{width:12px}
  .letters{color:var(--ink);background:none}
}
@media (max-width:600px){#ageChart .val{font-size:46px}#ageChart .yr{font-size:30px}#ageChart .zero .val{font-size:80px}}

/* chepi.ai: way into the app */
#bar .open-app{min-height:40px;padding:0 18px;font-size:15px;border-color:var(--line);background:var(--bg)}
@media (max-width:520px){#bar .open-app{padding:0 14px;font-size:14px}}