/* ===== Tokens ===== */
:root{
--carbon:#181925; --paper:#fff; --linen:#fafafa; --mist:#f5f5f5; --fog:#e8e8e8; --ash:#999; --graphite:#666;
--lavender:#918df6; --iris:#9580ff; --mint:#33c758; --mint-wash:#def6e4; --amber:#ffa600; --sky:#2c78fc; --magenta:#d6409f; --ember:#ff3e00;
--font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--max:960px;
--sh-1:rgba(0,0,0,.08) 0 1px 1px 1px, rgba(0,0,0,.06) 0 0 0 .5px;
--sh-2:rgba(0,0,0,.08) 0 1px 1px 0, rgba(0,0,0,.05) 0 0 0 1px;
--sh-3:rgba(0,0,0,.06) 0 1px 3px 0, rgba(0,0,0,.06) 0 8px 16px 0, rgba(0,0,0,.02) 0 0 0 1px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--paper);color:var(--carbon);font-family:var(--font);font-size:14px;line-height:1.5;letter-spacing:-.2px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul{margin:0;} ul{padding:0;list-style:none;}
section{max-width:var(--max);margin:0 auto;padding-left:20px;padding-right:20px;}
.label{display:inline-block;background:var(--mist);color:var(--graphite);font-size:11px;font-weight:500;padding:3px 8px;border-radius:9999px;}
.how h2,.compare h2,.pricing h2{font-size:32px;font-weight:600;letter-spacing:-.9px;line-height:1.2;margin-top:12px;}
.how>p,.compare>p,.pricing>p{color:var(--graphite);font-size:14px;max-width:380px;margin:12px auto 0;}
.how,.compare,.pricing{text-align:center;padding-top:96px;}
.c-mint{color:var(--mint);} .c-sky{color:var(--sky);} .c-magenta{color:var(--magenta);} .c-amber{color:var(--amber);}
/* buttons */
.btn-primary{display:inline-flex;align-items:center;background:var(--lavender);color:#fff;font-size:13px;font-weight:500;padding:9px 16px;border-radius:9999px;box-shadow:var(--sh-1);}
.btn-primary:hover{filter:brightness(.95);}
.btn-ghost{display:inline-flex;align-items:center;background:var(--mist);color:var(--graphite);font-size:13px;font-weight:500;padding:9px 16px;border-radius:9999px;}
.btn-ghost:hover{background:var(--fog);}
.logo{width:20px;height:20px;border-radius:50%;background:#fff;display:inline-block;position:relative;flex:none;}
.logo::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--carbon);}
.logo--sm{width:16px;height:16px;} .logo--sm::after{inset:4px;}
/* ===== nav (dark pill, sticky) ===== */
.nav{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none;}
.nav__pill{pointer-events:auto;}
.nav__pill{display:flex;align-items:center;gap:2px;background:var(--carbon);color:#fff;border-radius:9999px;padding:6px 6px 6px 8px;box-shadow:0 8px 24px rgba(24,25,37,.25);}
.nav__brand{display:inline-flex;margin-right:8px;}
.nav__links{display:flex;}
.nav__links a{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:6px 8px;color:#fff;opacity:.9;border-radius:9999px;}
.nav__links a:hover{opacity:1;background:rgba(255,255,255,.1);}
.nav__login{font-size:12px;font-weight:500;padding:6px 10px;margin-left:8px;}
.nav__register{background:var(--iris);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:9999px;}
/* ===== hero ===== */
.hero{text-align:center;padding-top:112px;padding-bottom:56px;display:flex;flex-direction:column;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:var(--carbon);font-size:12px;font-weight:500;padding:4px 10px 4px 5px;border-radius:9999px;}
.chip__tag{background:var(--sky);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:9999px;}
.hero h1{font-size:52px;font-weight:600;letter-spacing:-2.4px;line-height:1.08;margin-top:18px;}
.hero p{color:var(--graphite);font-size:15px;margin-top:14px;line-height:1.45;}
.hero__cta{display:flex;gap:8px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.logos{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:56px;color:#8a8a90;font-size:13px;font-weight:600;letter-spacing:-.2px;}
/* ===== marble band ===== */
.band{position:relative;max-width:none;padding:0;margin-top:8px;height:520px;}
.band__clip{position:absolute;inset:0;overflow:hidden;}
.band__paint{position:absolute;inset:-10%;filter:url(#marble);
background:
radial-gradient(60% 55% at 15% 40%, #b9b1f8 0%, transparent 70%),
radial-gradient(45% 50% at 75% 25%, #f0b9e8 0%, transparent 70%),
radial-gradient(50% 60% at 50% 90%, #8f86f0 0%, transparent 70%),
radial-gradient(40% 40% at 90% 80%, #d6b8f6 0%, transparent 70%),
linear-gradient(120deg,#c8c3fa,#efe6fb 45%,#e8c6f2);}
.tabpill{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:flex;gap:2px;background:#fff;border-radius:9999px;padding:6px;box-shadow:var(--sh-3);z-index:2;}
.tabpill a{font-size:12px;font-weight:500;color:var(--graphite);padding:6px 10px;border-radius:9999px;}
.tabpill a.is-active{background:var(--mist);color:var(--carbon);}
.dash{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:min(var(--max),calc(100% - 40px));background:#fff;border-radius:12px 12px 0 0;box-shadow:var(--sh-3);padding:16px 20px;min-height:460px;}
.dash__head{display:flex;align-items:center;gap:8px;font-size:13px;}
.dash__head b{font-weight:600;}
.dash__caret{color:var(--ash);font-size:11px;}
.avatar{margin-left:auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f5c27a,#c26a3a);display:inline-block;}
.dash__filter{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:500;margin-top:20px;border:1px solid var(--fog);padding:4px 8px;border-radius:6px;}
.dash__metrics{display:grid;grid-template-columns:repeat(6,auto);gap:36px;justify-content:start;margin-top:22px;}
.dash__metrics div{display:flex;flex-direction:column;gap:2px;}
.dash__metrics span{font-size:11px;color:var(--ash);}
.dash__metrics b{font-size:16px;font-weight:600;letter-spacing:-.4px;}
.dash__metrics i{font-style:normal;font-size:10px;font-weight:600;padding:1px 5px;border-radius:9999px;width:max-content;}
.dash__metrics .up{background:var(--mint-wash);color:#22a147;} .dash__metrics .down{background:#ffe4e4;color:var(--ember);}
.dash__chart{margin-top:28px;height:180px;}
.dash__chart svg{width:100%;height:100%;display:block;}
/* ===== features 2x2 ===== */
.features{padding-top:20px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fcard{background:#f6f6f8;border-radius:12px;padding:24px 24px 0;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.ficon{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.2px solid currentColor;margin-bottom:14px;}
.ficon svg{width:12px;height:12px;}
.ficon--mint{color:var(--mint);} .ficon--sky{color:var(--sky);} .ficon--magenta{color:var(--magenta);} .ficon--amber{color:var(--amber);}
.fcard h3{font-size:14px;font-weight:500;letter-spacing:-.2px;}
.fcard h4{font-size:16px;font-weight:600;letter-spacing:-.4px;line-height:1.3;margin-top:4px;max-width:250px;}
.fcard ul{margin-top:14px;display:grid;gap:5px;}
.fcard li{font-size:11px;font-weight:500;color:var(--graphite);display:flex;gap:6px;align-items:center;}
.fcard li::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid currentColor;opacity:.5;flex:none;}
.learn{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--fog);font-size:11px;font-weight:500;padding:4px 8px;border-radius:9999px;margin-top:16px;width:max-content;}
.learn i{font-style:normal;color:var(--ash);}
.media{margin:24px -24px 0;position:relative;height:200px;}
/* rank table */
.rank{padding:0 20px 20px;display:grid;gap:4px;align-content:start;}
.rank__row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:11px;color:var(--carbon);}
.rank__row span{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1;}
.rank__row b{font-weight:500;position:relative;z-index:1;color:var(--graphite);}
.rank__row em{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#e9e9ee;border-radius:4px;}
.rank__row:first-child em{background:#dbe8ff;} .rank__row:first-child b{color:var(--carbon);}
.sq{width:12px;height:12px;border-radius:3px;display:inline-block;}
/* globe */
.globe-wrap{height:220px;}
.globe{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;}
.globe:active{cursor:grabbing;}
.globe__badge{position:absolute;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:5px;background:var(--carbon);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:9999px;pointer-events:none;}
.globe__badge svg{color:#fff;}
/* users */
.users{padding:0 20px 20px;display:grid;gap:2px;align-content:start;}
.users__row{display:grid;grid-template-columns:16px 1fr 32px 60px 36px 28px;gap:8px;align-items:center;font-size:11px;padding:3px 0;}
.av{width:16px;height:16px;border-radius:50%;background:var(--c);display:inline-block;}
.users__row b{font-weight:500;}
.users__row .os{color:var(--graphite);font-size:10px;text-align:center;border:1px solid var(--fog);border-radius:4px;padding:0 3px;background:#fff;}
.users__row em{font-style:normal;color:var(--graphite);}
.users__row i{font-style:normal;color:var(--mint);font-weight:500;}
.users__row small{color:var(--ash);text-align:right;}
/* score */
.score{text-align:center;padding:8px 20px 20px;}
.score__confetti{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(circle,#33c758 1.4px,transparent 1.6px),radial-gradient(circle,#33c758 1px,transparent 1.2px);
background-size:29px 31px,43px 37px;background-position:3px 5px,17px 19px;opacity:.55;
-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 40%,#000 20%,transparent 80%);mask:radial-gradient(ellipse 70% 70% at 50% 40%,#000 20%,transparent 80%);}
.score__ring{position:relative;width:96px;height:96px;margin:0 auto;}
.score__ring svg{width:100%;height:100%;}
.score__ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;letter-spacing:-.8px;}
.score__t{display:block;font-size:12px;font-weight:600;margin-top:8px;position:relative;}
.score p{font-size:10px;color:var(--graphite);max-width:210px;margin:4px auto 0;position:relative;}
.score__legend{display:flex;justify-content:center;gap:10px;margin-top:8px;font-size:9px;color:var(--graphite);position:relative;}
.score__legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;}
/* wide cards */
.fcard--wide{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 24px;gap:16px;min-height:76px;}
.fcard--wide b{font-size:13px;font-weight:600;display:block;}
.fcard--wide p{font-size:11px;color:var(--graphite);margin-top:2px;max-width:280px;}
.fcard__glyph{width:48px;height:32px;flex:none;}
.fcard__logos{display:flex;}
.fcard__logos span{width:32px;height:32px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:-8px;border:2px solid #f6f6f8;}
/* ===== how ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;}
.step{background:#f6f6f8;border-radius:12px;overflow:hidden;text-align:center;padding-bottom:22px;}
.step__media{height:140px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;}
.orb{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
.orb--lav{background:var(--lavender);}
.orb--big{width:56px;height:56px;background:var(--lavender);} .orb--big svg{width:28px;height:28px;}
.step__media--os .orb:nth-child(1),.step__media--os .orb:nth-child(2){filter:blur(1px);opacity:.9;}
.step__media--list{flex-direction:column;align-items:stretch;padding:20px 24px;gap:4px;justify-content:center;}
.step__media--list div{display:flex;justify-content:space-between;font-size:11px;padding:4px 8px;background:#fff;border-radius:4px;}
.step__media--list b{font-weight:500;color:var(--graphite);}
.step__media--list div:first-child{background:#e9e9ee;}
.step>span{display:block;color:var(--lavender);font-size:11px;font-weight:600;margin-top:8px;}
.step>p{font-size:11px;color:var(--graphite);padding:0 24px;margin-top:6px;line-height:1.5;}
.step b{color:var(--carbon);font-weight:600;}
/* ===== compare ===== */
.cmp{margin:40px auto 0;max-width:720px;position:relative;font-size:12px;}
.cmp__head,.cmp__row{display:grid;grid-template-columns:1.6fr repeat(4,1fr);align-items:center;}
.cmp__head{padding-bottom:16px;}
.cmp__head>span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--graphite);}
.cmp__head .logo{width:22px;height:22px;background:var(--carbon);} .cmp__head .logo::after{background:#fff;inset:6px;}
.cmp__us{color:var(--carbon)!important;font-weight:500;}
.cmp__ico{font-style:normal;font-size:18px;line-height:22px;height:22px;}
.cmp__row{border-top:1px solid var(--fog);padding:9px 0;}
.cmp__row>span{text-align:left;color:var(--carbon);font-weight:500;padding-left:8px;}
.cmp__row i{display:flex;justify-content:center;}
.cmp__row i::before{content:"";width:14px;height:14px;border-radius:50%;}
.cmp__row .ok::before{background:var(--lavender);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.cmp__row .no::before{background:#c9c9cf;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.cmp__row .part::before{background:var(--amber);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.cmp::before{content:"";position:absolute;top:-12px;bottom:-12px;left:calc(1.6fr);width:0;}
.cmp__col{position:absolute;top:-14px;bottom:-14px;left:calc(1.6/5.6*100%);width:calc(1/5.6*100%);border:1px solid #c9c9cf;border-radius:16px;pointer-events:none;}
/* ===== pricing ===== */
.price{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;text-align:left;}
.price__left{background:#f6f6f8;border-radius:12px;padding:24px;}
.price__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.price__top b{font-size:13px;font-weight:600;display:block;}
.price__top span{font-size:11px;color:var(--graphite);display:block;margin-top:2px;max-width:170px;}
.toggle{display:inline-flex;background:#fff;border-radius:9999px;padding:3px;border:1px solid var(--fog);flex:none;}
.toggle span{font-size:11px;font-weight:500;padding:4px 10px;border-radius:9999px;color:var(--graphite);}
.toggle .is-active{background:var(--mist);color:var(--carbon);}
.toggle em{font-style:normal;color:var(--mint);font-weight:600;margin-left:2px;}
.price__val{display:flex;justify-content:space-between;align-items:baseline;margin-top:28px;}
.price__val>b{font-size:30px;font-weight:600;color:var(--lavender);letter-spacing:-1px;}
.price__val span{font-size:12px;color:var(--graphite);}
.price__val span b{font-size:16px;color:var(--carbon);font-weight:600;}
input[type=range]{width:100%;margin:14px 0 0;-webkit-appearance:none;appearance:none;background:transparent;height:20px;}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:repeating-linear-gradient(90deg,var(--fog) 0 2px,transparent 2px 100%);background-size:calc(100%/7) 4px;border-radius:2px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--fog);box-shadow:var(--sh-2);margin-top:-8px;position:relative;}
.price__cta{display:flex;gap:12px;align-items:center;margin-top:20px;}
.price__cta span{font-size:10px;color:var(--ash);line-height:1.4;}
.price__list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:22px;}
.price__list li{font-size:11px;font-weight:500;color:var(--graphite);display:flex;gap:6px;align-items:center;}
.price__list li::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid currentColor;opacity:.5;flex:none;}
.price__right{background:#f6f6f8;border-radius:12px;position:relative;overflow:hidden;min-height:380px;}
.price__sim{position:absolute;top:22px;left:0;right:0;text-align:center;z-index:2;display:flex;flex-direction:column;align-items:center;pointer-events:none;}
.price__sim span{font-size:11px;color:var(--graphite);}
.price__sim span b{color:var(--sky);font-weight:600;}
.price__sim>b{font-size:30px;font-weight:600;margin-top:12px;letter-spacing:-1px;}
.price__sim small{font-size:10px;color:var(--ash);}
.price__right .globe{top:140px;height:auto;bottom:0;}
.globe__badge--pos{left:20px;bottom:16px;}
/* ===== cta ===== */
.cta{text-align:center;padding-top:96px;padding-bottom:64px;}
.cta h2{font-size:28px;font-weight:600;letter-spacing:-.8px;}
/* ===== footer ===== */
.footer{position:relative;max-width:var(--max);margin:48px auto 0;padding:24px 20px 0;overflow:hidden;}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px;position:relative;z-index:1;}
.footer__grid b{display:block;font-size:11px;font-weight:600;margin-bottom:8px;}
.footer__grid a{display:block;font-size:11px;color:var(--graphite);padding:2px 0;}
.footer__about{font-size:11px;color:var(--graphite);display:flex;flex-direction:column;gap:12px;max-width:260px;}
.footer__about p{line-height:1.5;}
.footer__op i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-left:4px;}
.footer__arcs{position:relative;height:210px;margin-top:40px;}
.footer__arcs i{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;}
.footer__arcs i:nth-child(1){width:440px;height:220px;background:#d9d6fb;}
.footer__arcs i:nth-child(2){width:300px;height:150px;background:#f6f6f8;}
.footer__arcs i:nth-child(3){width:170px;height:85px;background:var(--lavender);}
.footer__arcs::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80px;height:40px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;}
.footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#bed5fe,#918df6);}
/* ===== responsive ===== */
@media(max-width:900px){
.fgrid,.price,.steps{grid-template-columns:1fr;}
.footer__grid{grid-template-columns:1fr 1fr 1fr;}
.dash__metrics{grid-template-columns:repeat(3,auto);gap:20px 28px;}
}
@media(max-width:640px){
.nav__links,.nav__login{display:none;}
.hero h1{font-size:36px;letter-spacing:-1.5px;}
.hero h1 br,.hero p br{display:none;}
.tabpill a{padding:6px 8px;font-size:11px;}
.tabpill a:nth-child(n+4){display:none;}
.band{height:440px;}
.dash{padding:14px;min-height:380px;}
.cmp__head,.cmp__row{grid-template-columns:1.4fr repeat(4,1fr);font-size:11px;}
.footer__grid{grid-template-columns:1fr 1fr;}
.footer__about{grid-column:1/-1;}
}
/* ===== hero upgrade ===== */
.hero{position:relative;}
.hero__glow{position:absolute;left:50%;top:40px;width:720px;height:420px;transform:translateX(-50%);pointer-events:none;z-index:-1;
background:radial-gradient(50% 50% at 50% 40%, rgba(145,141,246,.22), transparent 70%),radial-gradient(35% 45% at 70% 50%, rgba(240,185,232,.25), transparent 70%);filter:blur(10px);}
.hero h1 .grad{background:linear-gradient(90deg,#2c78fc,#918df6 60%,#d6409f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__stats{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:12px;color:var(--graphite);}
.hero__stats span{display:inline-flex;align-items:center;gap:6px;}
.hero__stats b{color:var(--carbon);font-weight:600;}
.hero__stats i{width:6px;height:6px;border-radius:50%;background:var(--mint);}
.hero__mods{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.hero__mods a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:9999px;background:#fff;border:1px solid var(--fog);color:var(--carbon);}
.hero__mods a i{width:8px;height:8px;border-radius:50%;}
.hero__mods a:hover{border-color:#c9c9cf;}
/* ===== nav dropdown ===== */
.dd{position:relative;}
.dd__panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);display:none;grid-template-columns:1fr 1fr;gap:8px;width:560px;
background:#fff;color:var(--carbon);border-radius:14px;padding:10px;box-shadow:var(--sh-3);}
.dd:hover .dd__panel,.dd:focus-within .dd__panel{display:grid;}
.dd__panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.dd__col{padding:8px;border-radius:10px;}
.dd__col:hover{background:var(--linen);}
.dd__mod{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:6px 8px;border-radius:8px;}
.dd__mod i{width:8px;height:8px;border-radius:50%;}
.dd__mod small{display:block;font-weight:400;color:var(--ash);font-size:10px;}
.dd__col a.f{display:block;font-size:11px;color:var(--graphite);padding:4px 8px;border-radius:6px;}
.dd__col a.f:hover{background:var(--mist);color:var(--carbon);}
/* ===== subpage common ===== */
.crumb{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--ash);margin-bottom:14px;}
.crumb a:hover{color:var(--carbon);} .crumb i{font-style:normal;}
.sub-hero{padding-top:112px;padding-bottom:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.sub-hero h1{font-size:40px;font-weight:600;letter-spacing:-1.6px;line-height:1.1;margin-top:10px;}
.sub-hero>div>p{color:var(--graphite);font-size:15px;margin-top:14px;max-width:440px;}
.sub-hero .tagc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;}
.sub-hero .tagc i{width:8px;height:8px;border-radius:50%;background:currentColor;}
.mod-hero{text-align:center;padding-top:112px;padding-bottom:40px;display:flex;flex-direction:column;align-items:center;}
.mod-hero h1{font-size:44px;font-weight:600;letter-spacing:-1.8px;line-height:1.1;margin-top:14px;max-width:760px;}
.mod-hero p{color:var(--graphite);font-size:15px;margin-top:14px;max-width:560px;}
.sec{padding-top:80px;}
.sec>.label{display:inline-block;}
.sec h2{font-size:28px;font-weight:600;letter-spacing:-.8px;margin-top:12px;}
.sec>p{color:var(--graphite);margin-top:8px;max-width:520px;}
.sec--c{text-align:center;} .sec--c>p{margin-left:auto;margin-right:auto;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;text-align:left;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;text-align:left;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;text-align:left;}
.tile{background:#f6f6f8;border-radius:12px;padding:20px;}
.tile b{display:block;font-size:13px;font-weight:600;}
.tile p{font-size:12px;color:var(--graphite);margin-top:6px;line-height:1.5;}
.tile .n{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;margin-bottom:12px;}
.spec{margin-top:32px;border-top:1px solid var(--fog);text-align:left;}
.spec div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 8px;border-bottom:1px solid var(--fog);font-size:12px;}
.spec div span{color:var(--graphite);}
.spec div b{font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;}
.console-path{display:inline-flex;align-items:center;gap:6px;background:var(--carbon);color:#fff;font-size:11px;font-weight:500;padding:6px 10px;border-radius:9999px;margin-top:16px;}
.console-path i{font-style:normal;opacity:.5;}
.related{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left;}
.related a{background:#f6f6f8;border-radius:12px;padding:16px;display:block;}
.related a:hover{background:#efeff3;}
.related a b{display:block;font-size:12px;font-weight:600;}
.related a span{display:block;font-size:11px;color:var(--graphite);margin-top:4px;}
.related a em{display:inline-block;font-style:normal;font-size:10px;font-weight:500;margin-top:10px;color:var(--lavender);}
.fcard .go{position:absolute;right:20px;top:20px;font-size:11px;color:var(--ash);}
.fcard:hover .go{color:var(--carbon);}
.modcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;text-align:left;}
.modcard{background:#f6f6f8;border-radius:12px;padding:24px;}
.modcard .h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;}
.modcard .h i{width:8px;height:8px;border-radius:50%;}
.modcard h3{font-size:18px;font-weight:600;letter-spacing:-.5px;margin-top:10px;}
.modcard>p{font-size:12px;color:var(--graphite);margin-top:6px;}
.modcard ul{margin-top:14px;display:grid;gap:2px;}
.modcard li a{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid var(--fog);}
.modcard li a:hover{border-color:#c9c9cf;}
.modcard li a i{font-style:normal;color:var(--ash);}
.modcard .btn-ghost{margin-top:14px;background:#fff;border:1px solid var(--fog);color:var(--carbon);}
/* ===== mocks ===== */
.mock{background:#fff;border-radius:12px;box-shadow:var(--sh-3);padding:16px;font-size:11px;position:relative;overflow:hidden;}
.mock__bar{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--fog);margin-bottom:12px;}
.mock__bar b{font-weight:600;font-size:12px;}
.mock__bar .pill{margin-left:auto;}
.pill{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2px 8px;border-radius:9999px;background:var(--mist);color:var(--graphite);}
.pill--mint{background:var(--mint-wash);color:#22a147;} .pill--red{background:#ffe4e4;color:var(--ember);} .pill--amber{background:#fff1d6;color:#c77f00;} .pill--sky{background:#e4edff;color:var(--sky);} .pill--lav{background:#eeedff;color:#6d67d9;}
.row{display:grid;gap:10px;align-items:center;padding:7px 6px;border-radius:6px;}
.row+.row{border-top:1px solid var(--fog);}
.row.hot{background:#fff5f5;}
.row .t{color:var(--ash);font-variant-numeric:tabular-nums;}
.row .m{color:var(--graphite);}
.row b{font-weight:500;}
.mock--mini{transform:scale(.92);transform-origin:top center;margin:0 6px;}
/* screen */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.shot{aspect-ratio:16/10;border-radius:6px;background:linear-gradient(135deg,#e9e9ee,#f6f6f8);position:relative;overflow:hidden;}
.shot::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:5px;border-radius:3px;background:#d9d9e0;}
.shot::after{content:"";position:absolute;left:8px;right:30%;top:19px;height:4px;border-radius:2px;background:#e0e0e6;box-shadow:0 8px 0 #e0e0e6,0 16px 0 #e0e0e6;}
.shot small{position:absolute;left:6px;bottom:5px;font-size:9px;color:var(--graphite);background:#fff;padding:1px 4px;border-radius:3px;}
.shot.live{outline:2px solid var(--sky);outline-offset:-2px;}
.shot.live small{background:var(--sky);color:#fff;}
.scrub{margin-top:12px;height:4px;border-radius:2px;background:var(--mist);position:relative;}
.scrub i{position:absolute;left:0;top:0;bottom:0;width:62%;background:var(--lavender);border-radius:2px;}
.scrub i::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;border:1px solid var(--fog);box-shadow:var(--sh-2);}
/* keys */
.row--keys{grid-template-columns:44px 60px 1fr auto;}
.kw{background:#ffe4e4;color:var(--ember);padding:0 3px;border-radius:3px;font-weight:600;}
/* apps */
.bar{display:block;height:8px;border-radius:9999px;background:var(--mist);position:relative;overflow:hidden;}
.bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c,var(--lavender));border-radius:9999px;}
.row--apps{grid-template-columns:70px 1fr 48px;}
.legend{display:flex;gap:12px;margin-top:10px;color:var(--graphite);}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}
/* web */
.row--web{grid-template-columns:12px 1fr 44px 36px;}
.fav{width:10px;height:10px;border-radius:3px;display:inline-block;}
/* cam */
.cams{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cam{aspect-ratio:4/3;border-radius:6px;background:radial-gradient(60% 60% at 50% 45%,#d9d6fb,#efeff3);position:relative;}
.cam::before{content:"";position:absolute;left:50%;top:26%;width:26%;aspect-ratio:1;border-radius:50%;background:#c9c6f2;transform:translateX(-50%);}
.cam::after{content:"";position:absolute;left:50%;bottom:0;width:52%;height:34%;border-radius:40% 40% 0 0;background:#c9c6f2;transform:translateX(-50%);}
.cam .pill{position:absolute;left:6px;bottom:6px;}
.cam.bad{background:radial-gradient(60% 60% at 50% 45%,#ffd9d1,#f6f6f8);} .cam.bad::before,.cam.bad::after{background:#f0b7ab;}
/* usb */
.row--usb{grid-template-columns:1fr 90px auto;}
.files{margin:8px 6px 0;padding:8px 10px;background:var(--mist);border-radius:6px;color:var(--graphite);display:grid;gap:3px;}
.files span{display:flex;justify-content:space-between;} .files span b{color:var(--ember);font-weight:500;}
/* print */
.row--print{grid-template-columns:1fr 60px 40px auto;}
.limit{margin-top:10px;padding:10px;background:var(--mist);border-radius:6px;}
.limit div{display:flex;justify-content:space-between;margin-bottom:6px;}
/* clip */
.row--clip{grid-template-columns:44px 64px 1fr auto;}
.mask{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;}
/* files */
.row--files{grid-template-columns:44px 60px 1fr;}
.op{font-weight:600;font-size:10px;padding:1px 6px;border-radius:4px;}
.op--c{background:var(--mint-wash);color:#22a147;} .op--r{background:#e4edff;color:var(--sky);} .op--d{background:#ffe4e4;color:var(--ember);}
/* policy */
.row--pol{grid-template-columns:1fr 92px 60px 34px;}
.sw{width:30px;height:16px;border-radius:9999px;background:var(--fog);position:relative;display:inline-block;justify-self:end;}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--sh-2);}
.sw.on{background:var(--lavender);} .sw.on::after{left:16px;}
/* wipe */
.wipe{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.wipe div{background:var(--mist);border-radius:8px;padding:12px;}
.wipe div b{display:block;font-weight:600;margin-bottom:4px;}
.wipe div span{color:var(--graphite);display:block;line-height:1.5;}
.wipe .danger{grid-column:1/-1;background:#fff5f5;border:1px solid #ffd6d6;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.wipe .danger em{font-style:normal;background:var(--ember);color:#fff;font-weight:600;padding:6px 10px;border-radius:9999px;font-size:10px;white-space:nowrap;}
/* hover reveal for tab bar in band variants */
@media(max-width:900px){
.sub-hero{grid-template-columns:1fr;} .grid3,.grid4,.related{grid-template-columns:1fr 1fr;} .modcards,.grid2{grid-template-columns:1fr;}
.dd__panel{width:min(560px,calc(100vw - 32px));}
}
@media(max-width:640px){
.grid3,.grid4,.related{grid-template-columns:1fr;} .spec div{grid-template-columns:1fr;gap:4px;}
.sub-hero h1,.mod-hero h1{font-size:32px;letter-spacing:-1.2px;}
}
/* ===== dark console mockups (scoped to .mock) ===== */
.mock{--dl:rgba(255,255,255,.09);--dm:#8b93a7;--dt:#e6e9f2;
background:linear-gradient(180deg,#0e1524,#080d18);color:var(--dt);border:1px solid var(--dl);
box-shadow:0 24px 48px rgba(6,9,17,.5),inset 0 1px 0 rgba(255,255,255,.05);}
.mock__bar{border-bottom:1px solid var(--dl);}
.mock__bar b{color:#fff;}
.mock .pill{background:rgba(255,255,255,.08);color:#aeb6c7;}
.mock .pill--mint{background:rgba(51,199,88,.16);color:#4ade80;}
.mock .pill--red{background:rgba(239,68,68,.16);color:#f87171;}
.mock .pill--amber{background:rgba(245,158,11,.16);color:#fbbf24;}
.mock .pill--sky{background:rgba(44,120,252,.2);color:#6ea8ff;}
.mock .pill--lav{background:rgba(145,141,246,.2);color:#b3b0fa;}
.mock .row+.row{border-top:1px solid var(--dl);}
.mock .row.hot{background:rgba(239,68,68,.1);}
.mock .row .t{color:#6b7488;}
.mock .row .m{color:var(--dm);}
.mock .row b{color:var(--dt);font-weight:500;}
.mock .shot{background:linear-gradient(135deg,#121c30,#0c1322);}
.mock .shot::before{background:#1d2b46;}
.mock .shot::after{background:#172239;box-shadow:0 8px 0 #172239,0 16px 0 #172239;}
.mock .shot small{background:#080d18;color:#aeb6c7;}
.mock .shot.live{outline-color:#2c78fc;}
.mock .shot.live small{background:#2c78fc;color:#fff;}
.mock .scrub{background:rgba(255,255,255,.09);}
.mock .scrub i{background:#918df6;}
.mock .scrub i::after{background:#080d18;border-color:var(--dl);}
.mock .kw{background:rgba(239,68,68,.22);color:#f87171;}
.mock .bar{background:rgba(255,255,255,.09);}
.mock .legend{color:var(--dm);}
.mock .legend i{outline:1px solid rgba(255,255,255,.15);}
.mock .cam{background:radial-gradient(60% 60% at 50% 45%,#1b2740,#0c1322);}
.mock .cam::before,.mock .cam::after{background:#27334f;}
.mock .cam.bad{background:radial-gradient(60% 60% at 50% 45%,#3a1f22,#160d10);}
.mock .cam.bad::before,.mock .cam.bad::after{background:#5a2c30;}
.mock .files{background:rgba(255,255,255,.05);color:var(--dm);}
.mock .files span b{color:#f87171;}
.mock .limit{background:rgba(255,255,255,.05);}
.mock .sw{background:rgba(255,255,255,.16);}
.mock .sw::after{background:#e6e9f2;}
.mock .sw.on{background:#918df6;}
.mock .op--c{background:rgba(51,199,88,.16);color:#4ade80;}
.mock .op--r{background:rgba(44,120,252,.2);color:#6ea8ff;}
.mock .op--d{background:rgba(239,68,68,.16);color:#f87171;}
.mock .fav{outline:1px solid rgba(255,255,255,.12);}
.mock .wipe div{background:rgba(255,255,255,.05);}
.mock .wipe div b{color:#fff;}
.mock .wipe div span{color:var(--dm);}
.mock .wipe .danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.32);}
.mock .wipe .danger em{background:#ef4444;}
.mock .mask{color:#cdd4e2;}
/* audio waveform mock */
.waves{display:grid;gap:10px;}
.waverow{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid var(--dl);border-radius:8px;padding:10px 12px;}
.waverow .play{width:28px;height:28px;border-radius:50%;background:#918df6;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none;}
.wf{flex:1;display:flex;align-items:center;gap:2px;height:30px;}
.wf i{flex:1;min-width:2px;background:linear-gradient(180deg,#6ea8ff,#33c758);border-radius:1px;opacity:.85;}
.waverow small{color:#8b93a7;white-space:nowrap;}
/* wifi network mock */
.nets{display:grid;gap:2px;}
.netrow{display:grid;grid-template-columns:18px 1fr auto auto;gap:12px;align-items:center;padding:9px 6px;}
.netrow+.netrow{border-top:1px solid var(--dl);}
.netrow b{font-weight:500;color:var(--dt);}
.netrow .m{color:#8b93a7;font-size:10px;}
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.sig i{width:3px;border-radius:1px;background:rgba(255,255,255,.18);}
.sig i:nth-child(1){height:5px;} .sig i:nth-child(2){height:9px;} .sig i:nth-child(3){height:14px;}
.sig.l1 i:nth-child(1),.sig.l2 i:nth-child(1),.sig.l2 i:nth-child(2),.sig.l3 i{background:#4ade80;}
/* terminal mock */
.term{background:#05080f;border:1px solid var(--dl);border-radius:8px;padding:12px 14px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.7;color:#c8d0e0;}
.term div{white-space:pre-wrap;word-break:break-word;}
.term .cmd{color:#4ade80;}
.term .out{color:#8b93a7;}
.term .ok{color:#4ade80;}
.term .warn{color:#fbbf24;}
.term .cur{display:inline-block;width:7px;height:13px;background:#4ade80;vertical-align:-2px;animation:blink 1.1s steps(1) infinite;}
/* =========================================================
V2 POLISH — nav / hero / module & bottom cards
========================================================= */
/* ---- NAV: larger, balanced, wordmark ---- */
.nav{top:20px;}
.nav__pill{gap:6px;padding:8px 8px 8px 18px;background:rgba(14,16,26,.9);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.09);
box-shadow:0 16px 44px rgba(10,12,20,.4),inset 0 1px 0 rgba(255,255,255,.07);}
.nav__brand{align-items:center;gap:9px;margin-right:16px;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.3px;}
.nav__brand .logo{width:22px;height:22px;background:linear-gradient(135deg,#918df6,#2c78fc);}
.nav__brand .logo::after{background:#0e101a;inset:6px;}
.nav__links a{font-size:13px;padding:9px 13px;letter-spacing:-.1px;}
.nav__login{font-size:13px;padding:9px 14px;opacity:.85;}
.nav__login:hover{opacity:1;}
.nav__register{font-size:13px;font-weight:600;padding:9px 18px;background:linear-gradient(135deg,#9580ff,#6f8cff);
box-shadow:0 8px 20px rgba(129,113,240,.45);}
.nav__register:hover{filter:brightness(1.06);transform:translateY(-1px);}
@media(max-width:640px){.nav__brand{font-size:14px;}}
/* ---- HERO: full premium composition ---- */
.hero{padding-top:154px;padding-bottom:88px;overflow:visible;}
.hero__bg{position:absolute;left:50%;top:-80px;transform:translateX(-50%);width:1500px;max-width:130vw;height:840px;z-index:-1;pointer-events:none;overflow:hidden;
-webkit-mask:radial-gradient(80% 70% at 50% 32%,#000 55%,transparent 100%);mask:radial-gradient(80% 70% at 50% 32%,#000 55%,transparent 100%);}
.hero__bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;}
.blob--1{width:560px;height:560px;left:8%;top:-40px;background:radial-gradient(circle,#b7b1ff,transparent 70%);}
.blob--2{width:520px;height:520px;right:6%;top:0;background:radial-gradient(circle,#8fd0ff,transparent 70%);}
.blob--3{width:460px;height:460px;left:38%;top:180px;background:radial-gradient(circle,#f3b9e6,transparent 70%);opacity:.4;}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(24,25,37,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,25,37,.05) 1px,transparent 1px);background-size:44px 44px;
-webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);}
.hero h1{font-size:clamp(46px,7.2vw,84px);letter-spacing:-3.2px;line-height:1.02;margin-top:22px;font-weight:600;}
.hero h1 .grad{background:linear-gradient(100deg,#2c78fc,#918df6 55%,#d6409f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero>p{max-width:600px;font-size:17px;color:var(--graphite);margin-top:18px;}
.hero__cta{margin-top:30px;}
.hero .btn-primary{font-size:14px;padding:12px 22px;gap:8px;box-shadow:0 10px 24px rgba(145,141,246,.4);}
.hero .btn-primary i{font-style:normal;transition:transform .3s var(--ease,ease);}
.hero .btn-primary:hover i{transform:translateX(4px);}
.hero .btn-ghost{font-size:14px;padding:12px 20px;background:#fff;border:1px solid var(--fog);color:var(--carbon);box-shadow:var(--sh-2);}
/* glass stat cards */
.hero__stats{gap:12px;margin-top:38px;}
.hero__stats span{flex-direction:column;align-items:flex-start;gap:3px;background:rgba(255,255,255,.75);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--fog);border-radius:14px;
padding:14px 20px;box-shadow:var(--sh-2);min-width:132px;}
.hero__stats b{font-size:24px;font-weight:600;letter-spacing:-1px;color:var(--carbon);}
.hero__stats em{font-style:normal;font-size:12px;color:var(--ash);}
/* module quick pills */
.hero__mods{gap:12px;margin-top:26px;}
.hero__mods a{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px 14px 20px;border-radius:14px;
background:#fff;border:1px solid var(--fog);box-shadow:var(--sh-2);position:relative;text-align:left;transition:transform .25s var(--ease,ease),box-shadow .25s;}
.hero__mods a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--mc);}
.hero__mods a i{display:none;}
.hero__mods a b{font-size:13px;font-weight:600;color:var(--carbon);}
.hero__mods a span{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mc);}
.hero__mods a:hover{transform:translateY(-3px);box-shadow:var(--sh-3);}
.hero__trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:34px;font-size:12px;color:var(--ash);}
.hero__sep{width:4px;height:4px;border-radius:50%;background:var(--fog);}
/* floating cards */
.hero__float{position:absolute;z-index:2;background:#fff;border:1px solid var(--fog);border-radius:16px;
box-shadow:0 24px 48px rgba(24,25,37,.14),0 2px 6px rgba(24,25,37,.06);padding:14px 16px;width:250px;animation:floaty 6s ease-in-out infinite;}
.hero__float--l{left:calc(50% - 620px);top:250px;animation-delay:-2s;}
.hero__float--r{right:calc(50% - 620px);top:180px;display:flex;align-items:center;gap:12px;}
@keyframes floaty{50%{transform:translateY(-12px);}}
.ff__head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--graphite);}
.ff__dot{width:7px;height:7px;border-radius:50%;}
.ff__dot--red{background:var(--ember);box-shadow:0 0 0 4px rgba(255,62,0,.14);}
.ff__t{margin-left:auto;color:var(--ash);font-weight:400;}
.ff__body{margin-top:8px;}
.ff__body b{display:block;font-size:13px;font-weight:600;color:var(--carbon);}
.ff__body span{display:block;font-size:11px;color:var(--ash);margin-top:2px;}
.ff__ring{position:relative;width:44px;height:44px;flex:none;}
.ff__ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;}
@media(max-width:1180px){.hero__float{display:none;}}
/* ---- MODULE CARDS (bottom) ---- */
.modcards{gap:24px;}
.modcard{position:relative;padding:0;background:#fff;border:1px solid var(--fog);border-radius:22px;
box-shadow:var(--sh-3);overflow:hidden;transition:transform .3s var(--ease,ease),box-shadow .3s;}
.modcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(24,25,37,.12),0 2px 6px rgba(24,25,37,.06);}
.modcard__accent{position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--mc),transparent 85%);}
.modcard__inner{padding:30px 28px 28px;}
.modcard__top{display:flex;align-items:center;gap:14px;}
.modcard__icon{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(24,25,37,.14);}
.modcard__icon svg{width:24px;height:24px;}
.modcard__tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:9999px;}
.modcard__count{display:block;font-size:11px;color:var(--ash);margin-top:4px;}
.modcard h3{font-size:21px;font-weight:600;letter-spacing:-.6px;margin-top:18px;line-height:1.2;}
.modcard>.modcard__inner>p{font-size:13px;color:var(--graphite);margin-top:8px;line-height:1.55;}
.modcard ul{margin-top:18px;display:grid;gap:6px;}
.modcard li a{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--carbon);
padding:11px 14px;border-radius:10px;background:var(--linen);border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s;}
.modcard li a i{font-style:normal;color:var(--mc);opacity:0;transition:opacity .2s,transform .2s;}
.modcard li a:hover{background:#fff;border-color:var(--fog);transform:translateX(4px);box-shadow:var(--sh-2);}
.modcard li a:hover i{opacity:1;transform:translateX(2px);}
.modcard__cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:#fff;
background:var(--mc);padding:11px 20px;border-radius:9999px;box-shadow:0 10px 22px color-mix(in srgb,var(--mc) 40%,transparent);transition:transform .2s,filter .2s;}
.modcard__cta i{font-style:normal;transition:transform .25s;}
.modcard__cta:hover{filter:brightness(1.05);transform:translateY(-2px);}
.modcard__cta:hover i{transform:translateX(4px);}
/* ---- feature 2x2 cards: lift + crisper ---- */
.fcard{border:1px solid var(--fog);background:#fff;box-shadow:var(--sh-2);border-radius:18px;transition:transform .3s var(--ease,ease),box-shadow .3s;}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);}
.fcard h4{font-size:17px;}
.fcard--wide{border-radius:18px;background:linear-gradient(180deg,#fff,#f8f8fb);}
.fcard--wide b{font-size:14px;}
/* ---- how steps: richer ---- */
.steps{gap:16px;}
.step{background:#fff;border:1px solid var(--fog);box-shadow:var(--sh-2);border-radius:18px;padding-bottom:24px;transition:transform .3s var(--ease,ease),box-shadow .3s;}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-3);}
.step__media{background:linear-gradient(180deg,#f6f6f8,#eef0f6);border-bottom:1px solid var(--fog);}
.step>span{width:30px;height:30px;border-radius:9999px;background:var(--lavender);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin:16px auto 0;box-shadow:0 8px 16px rgba(145,141,246,.35);}
.step>p{margin-top:12px;}
/* section headings a touch bigger */
.sec h2{font-size:34px;letter-spacing:-1px;}
.sec>p{font-size:15px;}
/* =========================================================
V3 — Manrope headings, DLP 23-card grid + animations, contact
========================================================= */
:root{--display:'Manrope','Inter',system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;}
h1,h2,h3,h4,.display,.hero h1,.sec h2,.mod-hero h1,.sub-hero h1,.modcard h3,.nav__brand,.heading,.heading-lg,.how h2,.compare h2,.pricing h2,.cta h2{font-family:var(--display);}
/* ---- nav dropdown scroll + contact button ---- */
.dd__col--scroll{max-height:340px;overflow-y:auto;scrollbar-width:thin;}
.dd__col--scroll::-webkit-scrollbar{width:6px;}
.dd__col--scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
/* ---- footer multi-column for DLP ---- */
.footer__grid{grid-template-columns:1.5fr 1fr 2.3fr 1.1fr;}
.fcol--multi{columns:2;column-gap:22px;}
.fcol--multi b{column-span:all;display:block;margin-bottom:8px;}
.fcol--multi a{break-inside:avoid;}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;}.fcol--multi{grid-column:1/-1;}}
/* ---- DLP 23-card grid ---- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;text-align:left;}
.featcard{position:relative;background:#fff;border:1px solid var(--fog);border-radius:18px;box-shadow:var(--sh-2);
padding:22px 22px 20px;display:flex;flex-direction:column;overflow:hidden;scroll-margin-top:104px;transition:transform .3s var(--ease,ease),box-shadow .3s;}
.featcard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--mc),transparent 82%);}
.featcard:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(24,25,37,.12),0 2px 6px rgba(24,25,37,.06);}
.featcard__no{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--mc);}
.featcard h3{font-size:17px;font-weight:700;letter-spacing:-.4px;margin-top:6px;line-height:1.25;}
.featcard h4{font-size:12.5px;font-weight:500;color:var(--graphite);margin-top:8px;line-height:1.5;min-height:56px;}
.featcard__mock{margin:14px 0 4px;}
.featcard__list{display:grid;gap:6px;margin-top:12px;}
.featcard__list li{font-size:12.5px;color:var(--carbon);padding-left:18px;position:relative;}
.featcard__list li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;border:2px solid var(--mc);opacity:.55;}
.featcard__pills{margin-top:14px;padding-top:12px;border-top:1px solid var(--fog);}
.chip3{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;margin:0 6px 6px 0;}
.chip3.pill--mint{background:var(--mint-wash);color:#22a147;}
.chip3.pill--red{background:#ffe4e4;color:#e5342b;}
.chip3.pill--amber{background:#fff1d6;color:#c77f00;}
.chip3.pill--sky{background:#e4edff;color:#2c78fc;}
@media(max-width:1024px){.featgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.featgrid{grid-template-columns:1fr;}.featcard h4{min-height:0;}}
/* ---- card mock shell ---- */
.mock--card{padding:12px;border-radius:12px;}
.mock--card .mock__bar{padding-bottom:10px;margin-bottom:10px;}
.mock--card .mock__bar b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.mock__body{position:relative;height:148px;overflow:hidden;}
/* ---- archetype: scan ---- */
.a-scan{position:relative;display:grid;gap:9px;padding:6px 2px;height:100%;align-content:center;}
.srow{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(6px);animation:srowin .5s var(--d,0s) forwards;}
.srow .sdot{width:7px;height:7px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 8px rgba(74,222,128,.6);}
.srow.hot .sdot{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.6);}
.srow .sbar{flex:1;height:9px;border-radius:5px;background:rgba(255,255,255,.1);}
.srow.hot .sbar{background:rgba(248,113,113,.22);}
.sweep{position:absolute;left:0;right:0;top:-40px;height:44px;background:linear-gradient(180deg,rgba(110,168,255,.22),transparent);animation:asweep 2.8s linear infinite;pointer-events:none;}
@keyframes srowin{to{opacity:1;transform:none;}}
@keyframes asweep{0%{transform:translateY(0);}100%{transform:translateY(210px);}}
/* ---- archetype: flow ---- */
.a-flow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:100%;padding:14px 4px 4px;}
.fnode{background:rgba(255,255,255,.06);border:1px solid var(--dl);border-radius:9px;padding:12px 10px;font-size:11px;font-weight:600;color:#e6e9f2;text-align:center;min-width:66px;}
.fnode small{display:block;color:#8b93a7;font-weight:400;margin-top:3px;font-size:10px;}
.fnode--x{border-color:rgba(248,113,113,.45);}
.fpath{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);}
.pkt{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#6ea8ff;box-shadow:0 0 10px #6ea8ff;animation:apkt 2.3s ease-in-out infinite;}
@keyframes apkt{0%{left:0;opacity:0;}12%{opacity:1;}68%{left:calc(100% - 10px);opacity:1;}75%{opacity:0;}100%{left:calc(100% - 10px);opacity:0;}}
.fmask{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:#f87171;background:rgba(248,113,113,.16);padding:2px 9px;border-radius:99px;}
/* ---- archetype: files ---- */
.a-files{display:grid;gap:9px;padding:8px 2px;height:100%;align-content:center;}
.frow{display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(-8px);animation:srowin .5s var(--d,0s) forwards;}
.frow .sbar{flex:1;height:9px;border-radius:5px;background:rgba(255,255,255,.1);}
.a-files .op{flex:none;font-family:var(--mono);}
/* ---- archetype: status ---- */
.a-status{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;}
.a-status .core{width:56px;height:56px;border-radius:16px;background:#4ade80;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 10px 24px rgba(74,222,128,.35);}
.a-status .core svg{width:30px;height:30px;fill:#0a0f1c;}
.a-status--danger .core{background:#f87171;box-shadow:0 10px 24px rgba(248,113,113,.35);}
.a-status .ring{position:absolute;top:calc(50% - 15px);left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid rgba(74,222,128,.55);animation:aring 2.6s ease-out infinite;}
.a-status--danger .ring{border-color:rgba(248,113,113,.55);}
.a-status .ring--2{animation-delay:1.3s;}
.a-status b{font-size:13px;font-weight:700;color:#e6e9f2;z-index:1;}
@keyframes aring{0%{transform:scale(.55);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
/* ---- archetype: power ---- */
.a-power{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;}
.a-power .pcore{width:52px;height:52px;border-radius:50%;background:#6ea8ff;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 10px 24px rgba(110,168,255,.4);}
.a-power .pcore svg{width:26px;height:26px;}
.a-power .pwave{position:absolute;top:calc(50% - 15px);left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:2px solid rgba(110,168,255,.55);animation:aring 2.4s ease-out infinite;}
.a-power .pwave--2{animation-delay:1.2s;}
.a-power b{font-size:13px;font-weight:700;color:#e6e9f2;z-index:1;}
/* ---- archetype: screen ---- */
.a-screen{display:flex;gap:8px;height:100%;}
.scr{position:relative;flex:1;border-radius:9px;background:linear-gradient(135deg,#122038,#0b1220);overflow:hidden;border:1px solid var(--dl);}
.scr .live{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#fff;background:rgba(44,120,252,.85);padding:2px 8px;border-radius:99px;z-index:2;}
.scr .live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.1s infinite;}
.scanline{position:absolute;left:0;right:0;top:-45%;height:45%;background:linear-gradient(180deg,rgba(110,168,255,.25),transparent);animation:ascreen 2.6s linear infinite;}
@keyframes ascreen{0%{transform:translateY(0);}100%{transform:translateY(320px);}}
.ptr{position:absolute;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.5);animation:aptr 4.5s ease-in-out infinite;}
@keyframes aptr{0%{left:22%;top:62%;}50%{left:68%;top:32%;}100%{left:22%;top:62%;}}
.a-screen--multi .scr--2{flex:.72;}
.tagm{position:absolute;bottom:6px;left:8px;font-size:10px;color:#8b93a7;}
.scr--blank{background:#05070d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;}
.scr--blank .lock{font-size:22px;opacity:.85;animation:blink 2s infinite;}
.scr--blank .blab{font-size:10px;color:#6b7488;}
/* ---- archetype: stream ---- */
.a-stream{position:relative;display:grid;gap:10px;padding:8px 2px;height:100%;align-content:center;}
.lrow{display:flex;align-items:center;gap:10px;opacity:.25;animation:astream 2.8s ease-in-out infinite;animation-delay:var(--d,0s);}
.lrow .ldot{width:6px;height:6px;border-radius:50%;background:#6ea8ff;flex:none;}
.lrow .sbar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.1);}
.aes{position:absolute;right:4px;bottom:2px;font-family:var(--mono);font-size:10px;color:#4ade80;background:rgba(74,222,128,.15);padding:2px 9px;border-radius:99px;}
@keyframes astream{0%,100%{opacity:.25;}50%{opacity:1;}}
.mock--card .term{font-size:10.5px;line-height:1.65;padding:10px;}
/* ---- contact page ---- */
.contact-wrap{max-width:var(--max);margin:0 auto;padding:132px 20px 96px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-info h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-1.8px;line-height:1.06;margin-top:14px;}
.contact-info>p{color:var(--graphite);font-size:15px;margin-top:16px;max-width:420px;}
.contact-list{margin-top:28px;display:grid;gap:12px;}
.contact-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--fog);border-radius:14px;padding:14px 16px;box-shadow:var(--sh-2);}
.contact-list .ci{width:38px;height:38px;border-radius:11px;background:#eef2ff;color:#2c78fc;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;}
.contact-list b{display:block;font-size:13px;font-weight:600;}
.contact-list a,.contact-list div>span{display:block;font-size:14px;color:var(--carbon);margin-top:2px;}
.contact-list small{display:block;font-size:11px;color:var(--ash);margin-top:3px;}
.contact-form{background:#fff;border:1px solid var(--fog);border-radius:20px;box-shadow:var(--sh-3);padding:28px;display:grid;gap:14px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.contact-form label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--graphite);}
.contact-form input,.contact-form select,.contact-form textarea{font-family:inherit;font-size:14px;color:var(--carbon);border:1px solid var(--fog);border-radius:10px;padding:11px 13px;background:var(--linen);outline:none;transition:border-color .2s,background .2s;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--lavender);background:#fff;}
.cf-check{display:flex;flex-direction:row;gap:8px;align-items:flex-start;font-weight:400;font-size:11px;color:var(--graphite);}
.cf-check input{width:16px;height:16px;flex:none;margin-top:1px;}
.contact-form .btn-primary{justify-content:center;padding:13px;font-size:14px;margin-top:4px;}
.cf-status{font-size:13px;margin:2px 0 0;min-height:18px;}
.cf-status.ok{color:#22a147;} .cf-status.err{color:#e5342b;}
@media(max-width:820px){.contact-wrap{grid-template-columns:1fr;gap:30px;padding-top:112px;}.cf-row{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){
.sweep,.pkt,.scanline,.ptr,.ring,.pwave,.lrow,.srow,.frow,.a-status .ring,.scr--blank .lock{animation:none!important;}
.srow,.frow{opacity:1;transform:none;} .lrow{opacity:1;}
}