/* Holt – demo showcase (live preview only, not part of the template files) */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../preview/assets/fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../preview/assets/fonts/inter-600.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:800;font-display:swap;src:url(../preview/assets/fonts/inter-display-800.woff) format("woff")}
@font-face{font-family:"Inter Display";font-weight:900;font-display:swap;src:url(../preview/assets/fonts/inter-display-900.woff) format("woff")}
@font-face{font-family:"Caladea";font-style:italic;font-display:swap;src:url(../preview/assets/fonts/caladea-italic.woff) format("woff")}
@font-face{font-family:"Holt Mono";font-weight:400;font-display:swap;src:url(../preview/assets/fonts/mono-400.woff) format("woff")}
@font-face{font-family:"Holt Mono";font-weight:700;font-display:swap;src:url(../preview/assets/fonts/mono-700.woff) format("woff")}
:root{--cb:#2338F5;--lime:#D2FF5C;--bone:#F1EFE8;--ink:#070B24;--forest:#0F2E22;--g:40px;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bone);color:var(--ink);font:400 16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}ul{list-style:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1760px;margin:0 auto;padding:0 var(--g)}
.d,h1,h2,h3{font-family:"Inter Display",Inter,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1}
.it{font-family:Caladea,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.03em}
.mono,.label{font-family:"Holt Mono",monospace;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--cb);outline-offset:3px}
.skip{position:absolute;left:10px;top:-60px;background:var(--lime);padding:10px 14px;z-index:99;font:700 12px "Holt Mono"}.skip:focus{top:10px}
.btn{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 26px;background:var(--lime);color:var(--ink);font:700 13px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--lime);position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}.btn:hover{color:var(--bone)}.btn:hover::before{transform:none}
.btn.o{background:none;color:var(--bone);border-color:rgba(241,239,232,.55)}.btn.o::before{background:var(--lime)}.btn.o:hover{color:var(--ink)}
.btn.sm{height:44px;padding:0 18px}.btn.k{background:var(--ink);color:var(--bone);border-color:var(--ink)}.btn.k::before{background:var(--cb)}
/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,color .3s,transform .4s var(--ease);color:var(--bone)}
.bar.solid{background:rgba(241,239,232,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(7,11,36,.14)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{font:900 34px "Inter Display";letter-spacing:-.06em}.logo sup{font-size:13px;vertical-align:top}
.bar nav{display:flex;gap:30px}.bar nav a{font:400 12.5px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;position:relative;padding:6px 0}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.bar nav a:hover::after{transform:scaleX(1)}
.bar.solid .btn{background:var(--cb);color:#fff;border-color:var(--cb)}
/* hero */
.hero{background:var(--cb);color:var(--bone);padding:150px 0 0;position:relative;overflow:hidden}
.eyebrow{display:flex;align-items:center;gap:14px;font:400 12.5px "Holt Mono";letter-spacing:.08em;text-transform:uppercase}.eyebrow i{width:60px;height:1px;background:currentColor;opacity:.5}
.eyebrow b{background:var(--lime);color:var(--ink);padding:5px 9px}
.hero h1{font:900 clamp(60px,11.4vw,200px)/.88 "Inter Display";letter-spacing:-.058em;margin:30px 0 0}.hero h1 .it{color:var(--lime);font-size:1.05em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}.hero h1 .ln>span{display:inline-block;transform:translateY(110%);animation:up 1.2s var(--ease) forwards;animation-delay:calc(var(--i)*.14s + .2s)}
@keyframes up{to{transform:none}}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:50px;flex-wrap:wrap}.hero-sub p{max-width:56ch;font-size:19px;color:rgba(241,239,232,.88)}.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.dimline{margin-top:70px;border-top:1px solid rgba(241,239,232,.4);padding-top:14px;display:flex;justify-content:space-between;font:400 12px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.stage{position:relative;height:clamp(300px,36vw,620px);margin-top:40px}
.fr{position:absolute;background:var(--bone);border:1px solid var(--ink);box-shadow:0 50px 90px -30px rgba(7,11,36,.7);overflow:hidden;color:var(--ink)}
.fr img{width:100%;display:block}
.tb{height:26px;background:var(--bone);border-bottom:1px solid rgba(7,11,36,.2);display:flex;align-items:center;gap:6px;padding:0 10px}.tb i{width:8px;height:8px;border-radius:50%;background:rgba(7,11,36,.25)}.tb em{margin-left:10px;font:400 10.5px "Holt Mono";font-style:normal;opacity:.6}
.fr.a{left:0;width:44%;top:60px;transform:rotate(-2deg)}.fr.b{left:28%;width:50%;top:0;z-index:2}.fr.c{right:0;width:40%;top:90px;transform:rotate(2.2deg)}
.stage .fr{animation:float 7s ease-in-out infinite}.fr.c{animation-delay:-2s}.fr.a{animation-delay:-4s}@keyframes float{50%{translate:0 -14px}}
.ticker{background:var(--lime);height:58px;overflow:hidden;white-space:nowrap;display:flex;align-items:center}.ticker>div{display:flex;animation:tk 50s linear infinite;flex:none}
.ticker span{font:700 13px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;margin-right:44px}.ticker span::after{content:"✦";margin-left:44px}@keyframes tk{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:1760px;margin:0 auto;padding:0 var(--g)}.stats>div{padding:70px 24px 60px 0;border-right:1px solid rgba(7,11,36,.16);margin-right:24px}.stats>div:last-child{border:0}
.stats b{display:block;font:900 clamp(64px,9vw,140px)/1 "Inter Display";letter-spacing:-.07em}.stats span{font:400 12px "Holt Mono";letter-spacing:.07em;text-transform:uppercase;color:rgba(7,11,36,.62)}
/* sections */
.sec{padding:clamp(70px,9vw,140px) 0 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,70px)}.shead>p{max-width:46ch;color:rgba(7,11,36,.66);font-size:18px}
.mk{display:flex;align-items:center;gap:12px;font:400 12px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.mk b{background:var(--ink);color:var(--lime);padding:4px 8px}.mk i{width:44px;height:1px;background:currentColor;opacity:.4}
.h2{font:900 clamp(44px,7.4vw,112px)/.92 "Inter Display";letter-spacing:-.055em}.h2 .it{font-size:1.06em;color:var(--cb)}
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(40px,4vw,70px) 30px}
.demo{display:block}.frame{border:1px solid var(--ink);background:#fff;overflow:hidden;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.demo:hover .frame,.pg:hover .frame{box-shadow:0 40px 70px -30px rgba(35,56,245,.55);transform:translateY(-6px)}
.view{position:relative;overflow:hidden;aspect-ratio:760/520;background:#dcdad2}.view img{width:100%;height:auto;transform:translateY(0);transition:transform var(--t,6s) cubic-bezier(.45,0,.35,1)}
.demo:hover .view img,.pg:hover .view img,.demo:focus-visible .view img{transform:translateY(var(--dist,0px))}
.num{position:absolute;left:14px;top:12px;z-index:3;font:900 44px "Inter Display";letter-spacing:-.05em;color:var(--bone);text-shadow:0 2px 20px rgba(7,11,36,.5)}
.badge{position:absolute;right:14px;top:14px;z-index:3;background:var(--lime);padding:6px 10px;font:700 11.5px "Holt Mono";letter-spacing:.08em;text-transform:uppercase}
.go{position:absolute;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;z-index:3;background:var(--ink);color:var(--bone);padding:12px 20px;font:700 12px "Holt Mono";letter-spacing:.08em;text-transform:uppercase;transition:.4s var(--ease);white-space:nowrap}.demo:hover .go{opacity:1;transform:translate(-50%,0)}
.meta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:20px}.meta h3{font:900 clamp(28px,3vw,44px) "Inter Display";letter-spacing:-.05em}.meta h3 .it{font-size:1.06em;color:var(--cb)}
.meta p{color:rgba(7,11,36,.64);font-size:15px;margin-top:8px;max-width:46ch}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.tags li{border:1px solid rgba(7,11,36,.25);padding:5px 10px;font:400 11px "Holt Mono";letter-spacing:.06em;text-transform:uppercase}
.arr{width:56px;height:56px;border:1px solid var(--ink);display:grid;place-items:center;font-size:22px;flex:none;transition:.3s}.demo:hover .arr{background:var(--cb);border-color:var(--cb);color:#fff;transform:translate(4px,-4px)}
.pages-bg{background:var(--ink);color:var(--bone);padding-bottom:clamp(70px,9vw,140px);margin-top:clamp(70px,9vw,140px)}.pages-bg .h2 .it{color:var(--lime)}.pages-bg .shead>p{color:rgba(241,239,232,.7)}.pages-bg .mk b{background:var(--lime);color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}.chips button{border:1px solid rgba(241,239,232,.5);padding:11px 18px;font:700 12px "Holt Mono";letter-spacing:.07em;text-transform:uppercase;transition:.2s}.chips button sup{opacity:.6;margin-left:6px}
.chips button:hover,.chips button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}.pg{display:block}.pg[hidden]{display:none}.pg .frame{border-color:rgba(241,239,232,.4)}.pg .view{aspect-ratio:4/3}.pg h3{font:800 24px "Inter Display";letter-spacing:-.04em;margin-top:16px;display:flex;justify-content:space-between;align-items:baseline}.pg h3 small{font:400 12px "Holt Mono";opacity:.55}.pg p{font-size:14px;color:rgba(241,239,232,.66);margin-top:6px}
.feats{display:grid;grid-template-columns:repeat(4,1fr)}.ft{border-top:1px solid var(--ink);padding:24px 24px 40px 0}.ft .n{font:400 12px "Holt Mono";opacity:.55}.ft svg{width:46px;height:46px;margin:34px 0 28px;fill:none;stroke:var(--cb);stroke-width:2}.ft h3{font:800 24px "Inter Display";letter-spacing:-.04em;margin-bottom:10px}.ft p{color:rgba(7,11,36,.64);font-size:15px}
.dark{background:var(--forest);color:var(--bone);padding-bottom:clamp(70px,9vw,140px);margin-top:clamp(70px,9vw,140px)}.dark .h2 .it{color:var(--lime)}.dark .mk b{background:var(--lime);color:var(--ink)}.dark .shead>p{color:rgba(241,239,232,.72)}
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:end}.ph{border:10px solid #000;border-radius:38px;overflow:hidden;background:#000;aspect-ratio:390/844;box-shadow:0 40px 80px -30px #000;transition:transform .5s var(--ease)}.ph:nth-child(odd){transform:translateY(-30px)}.ph:hover{transform:translateY(-14px)}.ph img{width:100%;height:100%;object-fit:cover}
.chk{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:80px}.chk li{padding:16px 0 16px 30px;border-top:1px solid rgba(241,239,232,.3);position:relative;font-size:16px}.chk li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:12px;background:var(--lime)}
.pack{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.pk{border:1px solid var(--ink);padding:34px}.pk .label{opacity:.6}.pk h3{font:900 34px "Inter Display";letter-spacing:-.05em;margin:12px 0 24px}.pk li{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid rgba(7,11,36,.2)}.pk li span{font:400 13px "Holt Mono";opacity:.7}
.cta{background:var(--cb);color:var(--bone);padding:clamp(80px,10vw,160px) 0;margin-top:clamp(70px,9vw,140px);overflow:hidden}.cta h2{font:900 clamp(56px,13vw,230px)/.86 "Inter Display";letter-spacing:-.06em}.cta h2 .it{color:var(--lime);font-size:1.06em}.cta p{margin-top:34px;font-size:20px;color:rgba(241,239,232,.85)}.cta .row{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
footer{background:var(--ink);color:var(--bone);padding:40px 0}footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}footer .label{display:block;opacity:.55;margin-bottom:6px}footer b{font:800 20px "Inter Display";letter-spacing:-.03em}
.cursor{position:fixed;left:0;top:0;z-index:80;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font:700 12px "Holt Mono";letter-spacing:.06em;text-transform:uppercase;pointer-events:none;transform:scale(0);transition:transform .35s var(--ease)}.cursor.on{transform:scale(1)}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
@media (max-width:1100px){:root{--g:26px}.bar nav{display:none}.pgrid{grid-template-columns:repeat(2,1fr)}.feats{grid-template-columns:repeat(2,1fr)}.demos{grid-template-columns:1fr}.devices{grid-template-columns:repeat(2,1fr)}.pack,.chk{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.stats>div{border-right:0}}
@media (max-width:640px){:root{--g:18px}.hero{padding-top:110px}.pgrid,.feats{grid-template-columns:1fr}.dimline span:last-child{display:none}.fr.a,.fr.c{display:none}.fr.b{left:0;width:100%}.stage{height:56vw}.devices{grid-template-columns:1fr 1fr;gap:14px}.ph{border-width:6px;border-radius:24px}.bar .btn{display:none}.meta{flex-direction:column}.arr{display:none}.cursor{display:none}}
@media (hover:none){.go{display:none}.cursor{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hero h1 .ln>span{transform:none}}