@font-face{font-family:"D-DIN";src:url(/assets/fonts/D-DIN.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"D-DIN";src:url(/assets/fonts/D-DIN-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#000;--fg:#fff;--mut:#a0a0a0;--line:#333;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 19px/1.65 "D-DIN","Arial Narrow",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}
h1,h2,h3,.btn,.nav a,.logo{text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,64px);background:linear-gradient(#000c,#0000)}
.logo{text-decoration:none;font-size:18px;letter-spacing:.3em}
.nav nav a{text-decoration:none;font-size:14px;margin-left:clamp(14px,3vw,36px);color:var(--fg);opacity:.85}.nav nav a:hover{opacity:1}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:120px 20px 80px}
.stars,.grid-bg{position:absolute;inset:0;pointer-events:none}
.stars{background-image:radial-gradient(1px 1px at 12% 22%,#fff9,transparent),radial-gradient(1px 1px at 78% 14%,#fff8,transparent),radial-gradient(1.5px 1.5px at 43% 68%,#fffa,transparent),radial-gradient(1px 1px at 88% 52%,#fff7,transparent),radial-gradient(1px 1px at 27% 83%,#fff6,transparent),radial-gradient(1px 1px at 63% 33%,#fff8,transparent),radial-gradient(1px 1px at 5% 60%,#fff6,transparent),radial-gradient(1.5px 1.5px at 95% 85%,#fff7,transparent);background-size:600px 600px}
.grid-bg{background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-62vw;height:80vw;border-radius:50%;border-top:1px solid #ffffff40;box-shadow:0 -30px 90px #8ab4ff22,inset 0 30px 80px #8ab4ff14;background:#000}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,7vw,88px);line-height:1;margin:18px 0 22px;letter-spacing:.14em}
.tag{font-size:clamp(18px,2.2vw,24px);color:var(--fg);margin:0 0 14px}
.sub{color:var(--mut);max-width:60ch;margin:0 auto 40px}
.btn{display:inline-block;border:1px solid var(--fg);padding:16px 34px;font-size:14px;text-decoration:none;color:var(--fg);transition:background .25s,color .25s}
.btn:hover{background:var(--fg);color:#000}
/* sections */
.app{min-height:80vh;display:flex;align-items:center;border-top:1px solid var(--line);position:relative}
.app:nth-of-type(even){background:radial-gradient(900px 400px at 85% 50%,#ffffff07,transparent)}
.app .wrap{width:100%;padding-top:14vh;padding-bottom:14vh}
.app h2{font-size:clamp(32px,5vw,64px);line-height:1.05;margin:16px 0 20px;max-width:16ch}
.app p{color:var(--mut);max-width:52ch;font-size:clamp(18px,1.6vw,21px);margin:0 0 32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px;padding:0;list-style:none}
.chips li{border:1px solid var(--line);padding:6px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.fine{font-size:15px!important;margin-top:28px!important}
.contact{border-top:1px solid var(--line);text-align:center;padding:16vh 20px}
.contact h2{font-size:clamp(28px,4vw,48px);margin:16px 0 28px}
/* footer */
footer{border-top:1px solid var(--line);padding:40px clamp(20px,5vw,64px);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;color:var(--mut);font-size:15px}
footer a{color:var(--mut);text-decoration:none;margin-left:24px}footer a:hover{color:var(--fg)}
/* docs */
.doc{max-width:70ch;padding:140px 20px 12vh;font-size:18px}
.doc h1{font-size:clamp(36px,5vw,56px);line-height:1.1}
.doc h2{font-size:22px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.doc h3{font-size:17px;margin-top:32px;color:var(--fg)}
.doc p,.doc li{color:#d0d0d0}.doc strong{color:var(--fg)}.doc a{text-underline-offset:3px}
.center{text-align:center}
/* tool page */
.hero.sm{padding-bottom:max(80px,calc(18vw + 56px))}
.hero.sm h1{font-size:clamp(30px,5.6vw,72px);line-height:1.08;max-width:18ch}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn.ghost{border-color:var(--line);color:var(--mut)}.btn.ghost:hover{border-color:var(--fg);background:var(--fg);color:#000}
.note{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;margin:22px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:8px 0 36px}
.card{background:var(--bg);padding:30px 28px}
.card h3{font-size:17px;margin:14px 0 10px}
.app .card p{font-size:17px;margin:0;max-width:none}
.lvl{display:inline-flex;align-items:center;gap:10px}.lvl::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--fg)}
.lvl.hi::before{background:var(--fg)}.lvl.md::before{background:linear-gradient(90deg,var(--fg) 50%,transparent 50%)}
.price{display:block;font-weight:700;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:.04em;margin:14px 0 6px}
.app ul.list{color:var(--mut);max-width:60ch;font-size:clamp(17px,1.5vw,19px);margin:0 0 32px;padding-left:1.1em}.app ul.list li{margin:0 0 8px}
/* motion */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.js .reveal{opacity:1;transform:none;transition:none}.btn{transition:none}}
@media (max-width:600px){.nav nav a{font-size:12px;margin-left:14px}.logo{font-size:14px;letter-spacing:.2em}footer{flex-direction:column;align-items:flex-start}footer a{margin:0 20px 0 0}}
/* apps */
.app-icon{display:block;width:clamp(104px,12vw,140px);height:auto;margin:0 auto 6px;filter:drop-shadow(0 0 40px #8ab4ff40)}
.card .ico{display:block;width:64px;height:64px;margin:0 0 16px}
.card-link{display:inline-block}
.app .card p.pline{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin:16px 0 22px}
.soon{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);padding:15px 26px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:#ffffff05;cursor:default}
.soon::before{content:"";width:8px;height:8px;border-radius:50%;background:#8ab4ff;box-shadow:0 0 12px #8ab4ff}
.btns.left{justify-content:flex-start}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);margin:8px 0 0}
.shots figure{margin:0;border:1px solid var(--line);background:#050505}
.shots img{display:block;width:100%;height:auto}
.teaser-more{margin-top:8px}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card.appc{display:flex;flex-direction:column}.app .card p.cta{margin-top:auto}
@media (max-width:900px){.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards.c3{grid-template-columns:1fr}}
/* home explore panels */
.explore{position:relative;padding:12vh 0 4vh}
.panels{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,32px)}
.panel{display:flex;flex-direction:column;text-decoration:none;color:var(--fg);padding:clamp(28px,3.4vw,48px);border:1px solid #ffffff1f;background:linear-gradient(160deg,#ffffff0d,#ffffff03 55%),radial-gradient(600px 300px at 50% 120%,#8ab4ff1a,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .25s,box-shadow .25s}
.panel:hover{border-color:#ffffff55;box-shadow:0 0 60px #8ab4ff1f}
.panel h2{font-size:clamp(28px,3.6vw,48px);line-height:1.05;margin:14px 0 14px}
.panel p{color:var(--mut);margin:0 0 20px;max-width:46ch}
.panel .count{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.panel .count b{display:inline-block;font-family:"D-DIN",Arial,sans-serif;font-size:44px;line-height:1;color:var(--fg);margin-right:8px;vertical-align:-6px}
.minis{display:flex;flex-wrap:wrap;gap:14px 22px;list-style:none;margin:0 0 32px;padding:0}
.minis li{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.minis img{display:block;width:44px;height:44px}
.panel .chips{margin-bottom:32px}
.panel .btn{margin-top:auto;align-self:flex-start}
.panel:hover .btn{background:var(--fg);color:#000}
.app.compact{min-height:0}.app.compact .wrap{padding-top:10vh;padding-bottom:10vh}
@media (max-width:800px){.panels{grid-template-columns:1fr}.explore{padding-top:8vh}}
.js .panel.reveal{transition:opacity .9s ease,transform .9s ease,border-color .25s,box-shadow .25s}
.app .card p.cta{padding-top:22px}

.cards.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.cards.c2{grid-template-columns:1fr}}
/* extensions (Browser Extensions bot) */
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid #8ab4ff55;padding:7px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:linear-gradient(160deg,#8ab4ff1a,#8ab4ff05);box-shadow:0 0 24px #8ab4ff1f,inset 0 0 12px #8ab4ff0d;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#8ab4ff;box-shadow:0 0 10px #8ab4ff}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.card-top .mono{margin-top:6px}
.panel .badge{align-self:flex-start;margin:0 0 18px}
.panels.p3{grid-template-columns:repeat(3,minmax(0,1fr))}.panels.p3 .panel h2{font-size:clamp(24px,2.5vw,36px)}
@media (max-width:1100px){.panels.p3{grid-template-columns:repeat(2,minmax(0,1fr))}.panels.p3 .panel:last-child{grid-column:1/-1}}
@media (max-width:800px){.panels.p3{grid-template-columns:1fr}}
.shots.wide{grid-template-columns:repeat(2,1fr)}
.shots.wide figure:first-child{grid-column:1/-1}
@media (max-width:700px){.shots.wide{grid-template-columns:1fr}}
.contact .note a{color:var(--mut);text-underline-offset:3px}.contact .note a:hover{color:var(--fg)}
.contact .disclaimer{max-width:72ch;margin:28px auto 0!important;color:var(--mut)}
.doc .mono a{color:var(--mut)}
@media (max-width:600px){.nav{padding-left:16px;padding-right:16px}.nav nav a{font-size:11px;margin-left:10px;letter-spacing:.06em}.logo{font-size:13px;letter-spacing:.16em;white-space:nowrap}}
@media (max-width:400px){.nav nav a{font-size:10px;margin-left:8px;letter-spacing:.04em}.logo{font-size:12px;letter-spacing:.12em}}
@media (max-width:340px){.nav{padding-left:12px;padding-right:12px}.nav nav a{margin-left:6px;letter-spacing:.02em}.logo{font-size:11px;letter-spacing:.08em}}

/* mobile fix 2026-10-17: nav backdrop so scrolled labels don't show through the logo; anchor offset under fixed nav */
.nav{background:linear-gradient(#000f,#000e 70%,#000c);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
section[id]{scroll-margin-top:72px}