:root{
  --radius:.875rem;
  --bg:oklch(.155 .016 264);--fg:#fff;
  --card:oklch(.21 .026 265);
  --violet:oklch(.606 .219 293);--electric:oklch(.623 .188 259.8);
  --mint:oklch(.696 .149 162.5);--mint-fg:oklch(.16 .03 165);
  --muted:oklch(.24 .025 265);--muted-fg:oklch(.714 .019 261);
  --destructive:oklch(.64 .21 25);
  --border:oklch(1 0 0 / 8%);--input:oklch(1 0 0 / 12%);
  --glass:oklch(.21 .026 265 / 60%);
  --brand:linear-gradient(135deg,var(--violet),var(--electric));
  --text-grad:linear-gradient(90deg,#fff,oklch(.8 .12 290),var(--electric));
  --glow:0 0 25px oklch(.606 .219 293 / 25%);
  --glow-strong:0 0 45px oklch(.606 .219 293 / 40%);
  --glow-mint:0 0 25px oklch(.696 .149 162.5 / 35%);
  --font-d:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font:"Inter",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.5;min-height:100vh;
  background-image:radial-gradient(60rem 30rem at 85% -10%,oklch(.606 .219 293 / 14%),transparent 60%),radial-gradient(50rem 30rem at -10% 20%,oklch(.623 .188 259.8 / 10%),transparent 60%);
  background-attachment:fixed;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.container{max-width:80rem;margin:0 auto;padding:0 1rem}
.narrow{max-width:48rem;margin:0 auto;padding:0 1rem}
.section{padding:5rem 0 0;scroll-margin-top:4rem}
.muted{color:var(--muted-fg)}
.grad{background:var(--text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.glow{box-shadow:var(--glow)}
.bg-brand{background:var(--brand)}
.card{border-radius:1.5rem;padding:1.5rem}
@media(min-width:640px){.card{padding:2rem}}
.icon{width:1rem;height:1rem;flex-shrink:0}

/* buttons */
.btn-cta,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;padding:.75rem 1.4rem;font-weight:600;transition:transform .2s,filter .2s,background .2s,border-color .2s;white-space:nowrap}
.btn-cta{background:var(--mint);color:var(--mint-fg);box-shadow:var(--glow-mint)}
.btn-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--border);background:oklch(1 0 0 / 4%)}
.btn-ghost:hover{background:oklch(1 0 0 / 8%);border-color:oklch(.606 .219 293 / 50%)}
.btn-sm{padding:.5rem 1rem;font-size:.875rem}
button:disabled{opacity:.4;pointer-events:none}
.chip{border-radius:9999px;padding:.4rem .9rem;font-size:.85rem;font-weight:500;border:1px solid var(--border);color:var(--muted-fg);transition:all .2s}
.chip:hover{color:var(--fg)}
.chip[data-active="true"]{background:var(--brand);color:var(--fg);border-color:transparent;box-shadow:var(--glow)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}

/* header */
.header{position:sticky;top:0;z-index:40;border-width:0 0 1px}
.header-in{display:flex;height:4rem;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-d);font-size:1.125rem;font-weight:700}
.logo{gap:.6rem}.logo-mark{width:2.25rem;height:2.25rem;flex-shrink:0;filter:drop-shadow(0 0 10px oklch(.606 .219 293 / 45%))}.logo-txt{display:flex;align-items:center;gap:.4rem;line-height:1;white-space:nowrap}.logo-1{font-weight:800;letter-spacing:-.02em}.logo-2{font-size:.72em;font-weight:800;letter-spacing:.08em;padding:.28em .5em;border-radius:.4em;background:var(--mint);color:var(--mint-fg)}@media(max-width:380px){.logo-1{font-size:.9em}}
.nav{display:none;gap:1.5rem}
.nav a{font-size:.875rem;color:var(--muted-fg);transition:color .2s}
.nav a:hover{color:var(--fg)}
.header-r{display:flex;align-items:center;gap:.5rem}
.header-r .btn-cta{display:none}
.burger{padding:.5rem}
.mnav{display:none;border-top:1px solid var(--border);padding:.75rem 1rem}
.mnav.open{display:block}
.mnav a{display:block;padding:.5rem 0;color:var(--muted-fg)}
.mnav .btn-cta{width:100%;margin-top:.5rem}
@media(min-width:640px){.header-r .btn-cta{display:inline-flex}}
@media(min-width:1024px){.nav{display:flex}.burger,.mnav,.mnav.open{display:none}}

/* hero */
.hero{position:relative;padding:5rem 0 2rem;text-align:center;overflow:hidden}
.hero .pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.35rem .9rem;font-size:.8rem;color:var(--muted-fg);margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.25rem,6vw,4rem);font-weight:800;max-width:56rem;margin:0 auto}
.hero p.lead{max-width:40rem;margin:1.25rem auto 0;font-size:1.125rem;color:var(--muted-fg)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:40rem;margin:3rem auto 0}
.stat{border-radius:1rem;padding:1rem}
.stat b{display:block;font-family:var(--font-d);font-size:1.5rem}
.stat span{font-size:.75rem;color:var(--muted-fg)}
.tv{max-width:52rem;margin:3.5rem auto 0;border-radius:1.5rem;padding:.6rem;box-shadow:var(--glow-strong)}
.tv-screen{aspect-ratio:16/8;border-radius:1rem;position:relative;overflow:hidden;
  background:radial-gradient(40rem 20rem at 70% 20%,oklch(.606 .219 293 / 55%),transparent 60%),radial-gradient(30rem 20rem at 20% 90%,oklch(.623 .188 259.8 / 45%),transparent 60%),linear-gradient(160deg,oklch(.22 .04 270),oklch(.13 .02 264))}
.tv-row{position:absolute;left:4%;right:4%;display:flex;gap:3%}
.tv-row div{flex:1;aspect-ratio:16/10;border-radius:.6rem;background:oklch(1 0 0 / 10%);border:1px solid oklch(1 0 0 / 10%)}
.tv-row div:nth-child(2){background:linear-gradient(135deg,oklch(.606 .219 293 / 60%),oklch(.623 .188 259.8 / 40%))}
.tv-row div:nth-child(4){background:linear-gradient(135deg,oklch(.696 .149 162.5 / 50%),oklch(.623 .188 259.8 / 30%))}
.tv-title{position:absolute;left:4%;top:12%;text-align:left}
.tv-title b{display:block;font-family:var(--font-d);font-size:clamp(1rem,3vw,1.75rem)}
.tv-title span{font-size:clamp(.65rem,1.6vw,.85rem);color:oklch(1 0 0 / 70%)}

/* section titles */
.st{max-width:42rem;margin:0 auto 2.5rem;text-align:center}
.st .eb{margin-bottom:.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--electric)}
.st h2{font-size:clamp(1.875rem,4vw,2.25rem);font-weight:700}
.st p{margin-top:.75rem;color:var(--muted-fg)}

/* grids */
.g2{display:grid;gap:2rem}
.g3{display:grid;gap:1rem}
@media(min-width:640px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g-dns{grid-template-columns:1fr 1.4fr}}

/* calculator */
.calc h3{font-size:1.125rem;font-weight:600}
.row{display:flex;align-items:baseline;justify-content:space-between}
.big{font-family:var(--font-d);font-size:1.5rem;font-weight:700}
input[type=range]{width:100%;margin-top:.5rem;accent-color:var(--violet)}
.result{display:flex;flex-direction:column;justify-content:center;text-align:center;border-radius:1rem;background:var(--muted);padding:1.5rem}
.result .num{font-family:var(--font-d);font-size:3rem;font-weight:800;transition:transform .25s}
.result .num.pop{transform:scale(.92)}
.mint{color:var(--mint)}.red{color:var(--destructive)}
.note{display:flex;gap:.4rem;align-items:flex-start;margin-top:1rem;text-align:left;font-size:.75rem;color:var(--muted-fg)}

/* dns + steps */
.dns-box{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem;font-size:.875rem}
.dns-box div{border-radius:.75rem;background:var(--muted);padding:.75rem}
.dns-box small{display:block;font-size:.75rem;color:var(--muted-fg)}
.tip{margin-top:1rem;border-radius:.75rem;border:1px solid oklch(.623 .188 259.8 / 30%);background:oklch(.623 .188 259.8 / 10%);padding:.75rem;font-size:.875rem}
.steps{list-style:none;display:grid;gap:.5rem}
.step-btn{display:flex;width:100%;align-items:flex-start;gap:.75rem;border-radius:.75rem;border:1px solid var(--border);padding:.75rem;text-align:left;font-size:.875rem;transition:all .2s}
.step-btn.cur{border-color:var(--violet);box-shadow:var(--glow)}
.step-btn.done{opacity:.7}
.num-dot{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:9999px;font-size:.75rem;flex-shrink:0;background:var(--brand)}
.step-btn.done .num-dot{background:var(--mint);color:var(--mint-fg)}
.bar{display:flex;gap:.5rem;margin-bottom:1rem}
.bar i{height:.375rem;flex:1;border-radius:9999px;background:var(--muted)}
.bar i.on{background:var(--brand)}
.fade-in{animation:fadeUp .3s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* catalog */
.search{display:flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.625rem 1rem;margin-bottom:1.5rem}
.search input{width:100%;background:transparent;border:0;outline:0;font-size:.875rem}
.svc{border-radius:1rem;padding:1.25rem;transition:box-shadow .2s}
.svc:hover{box-shadow:var(--glow)}
.svc h3{font-size:1.125rem;font-weight:600}
.badge{border-radius:9999px;background:oklch(.696 .149 162.5 / 15%);padding:.1rem .5rem;font-size:.75rem;color:var(--mint)}
.link{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;color:var(--electric)}
.link:hover{text-decoration:underline}

/* faq */
.faq{border-radius:1rem;padding:0 1.25rem}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;font-weight:500;font-size:.95rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform .2s;color:var(--muted-fg)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding-bottom:1rem;font-size:.875rem;color:var(--muted-fg)}

/* blog */
.post-card{display:block;border-radius:1rem;padding:1.5rem;transition:box-shadow .2s,transform .2s}
.post-card:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.post-card h3{margin-top:.5rem;font-size:1.15rem;font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.75rem;color:var(--muted-fg)}
.tag{border-radius:9999px;background:oklch(.606 .219 293 / 18%);color:oklch(.8 .12 290);padding:.1rem .6rem}
.crumbs{font-size:.8rem;color:var(--muted-fg);padding-top:2rem}
.crumbs a:hover{color:var(--fg)}
.page-h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-top:1rem}
.toc{border-radius:1rem;padding:1.25rem;margin:2rem 0;font-size:.875rem}
.toc ol{margin:.5rem 0 0 1.25rem;color:var(--muted-fg);line-height:2}
.toc a:hover{color:var(--fg)}
.prose h2{font-size:1.5rem;font-weight:700;margin:2rem 0 .75rem;scroll-margin-top:6rem}
.prose p{color:var(--muted-fg);line-height:1.8;margin-bottom:1rem}
.prose ul,.prose ol{color:var(--muted-fg);margin:0 0 1rem 1.25rem;line-height:1.8}
.prose strong{color:var(--fg)}
.prose code{background:var(--muted);padding:.1rem .4rem;border-radius:.375rem;color:var(--mint)}
.author{display:flex;gap:1rem;align-items:center;border-radius:1rem;padding:1.25rem;margin-top:2.5rem}
.avatar{display:grid;place-items:center;width:3rem;height:3rem;border-radius:9999px;background:var(--brand);font-weight:700;flex-shrink:0}
.dev-steps{list-style:none;display:grid;gap:1rem;counter-reset:s}
.dev-steps li{display:flex;gap:1rem;border-radius:1rem;padding:1.25rem}
.dev-steps h3{font-size:1.05rem;font-weight:600}
.cta-box{border-radius:1.5rem;padding:2rem;text-align:center;margin-top:3rem}
.cta-box h2{font-size:1.5rem;font-weight:700}

/* footer */
.footer{margin-top:6rem;border-top:1px solid var(--border)}
.footer-g{display:grid;gap:2rem;padding:3rem 0}
@media(min-width:640px){.footer-g{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-g{grid-template-columns:repeat(4,1fr)}}
.footer h4{font-family:var(--font);font-size:.875rem;font-weight:600;margin-bottom:.75rem;letter-spacing:0}
.footer-g a,.footer-g button{display:block;padding:.25rem 0;font-size:.875rem;color:var(--muted-fg);text-align:left}
.footer-g a:hover,.footer-g button:hover{color:var(--fg)}
.flag{display:inline-flex;gap:.5rem;align-items:center;margin-top:1rem;border:1px solid var(--border);border-radius:9999px;padding:.25rem .75rem;font-size:.75rem}
.copy{border-top:1px solid var(--border);padding:1.25rem 1rem;text-align:center;font-size:.75rem;color:var(--muted-fg)}
.fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:30}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:1rem}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.8);animation:fade .2s}
.modal-box{position:relative;width:100%;max-width:32rem;max-height:92vh;overflow-y:auto;border-radius:1rem;padding:1.5rem;animation:zoom .2s;background:oklch(.19 .022 265 / 92%)}
.modal-x{position:absolute;right:1rem;top:1rem;opacity:.7}
.modal-x:hover{opacity:1}
.modal h2{font-size:1.25rem;font-weight:700}
.modal .desc{font-size:.875rem;color:var(--muted-fg);margin-top:.25rem}
.modal-box p{font-size:.875rem;color:var(--muted-fg);margin-top:.5rem}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{opacity:0;transform:scale(.95)}}
.wbar{display:flex;gap:.375rem;margin:.75rem 0 1.25rem}
.wbar i{height:.25rem;flex:1;border-radius:9999px;background:var(--muted)}
.wbar i.on{background:var(--brand)}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.opt{border-radius:.75rem;border:1px solid var(--border);padding:.75rem;text-align:left;font-size:.875rem;transition:border-color .2s,box-shadow .2s;width:100%}
.opt:hover{border-color:var(--violet)}
.opt.sel{border-color:var(--violet);box-shadow:var(--glow)}
.opt small{display:block;font-size:.75rem;color:var(--muted-fg)}
.field{display:block;margin-bottom:.75rem}
.field>span{display:block;margin-bottom:.375rem;font-size:.875rem;font-weight:500}
.inp{width:100%;border-radius:.5rem;border:1px solid var(--input);background:var(--muted);padding:.625rem .75rem;outline:0}
.inp:focus{border-color:var(--violet)}
.phone{display:flex;overflow:hidden;border-radius:.5rem;border:1px solid var(--input);background:var(--muted)}
.phone:focus-within{border-color:var(--violet)}
.phone span{display:flex;align-items:center;border-right:1px solid var(--input);padding:0 .75rem;font-size:.875rem}
.phone input{width:100%;background:transparent;border:0;padding:.625rem .75rem;outline:0}
.err{display:block;margin-top:.25rem;font-size:.75rem;color:var(--destructive)}
.back{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;color:var(--muted-fg);margin-top:1rem}
.prog{height:.5rem;overflow:hidden;border-radius:9999px;background:var(--muted)}
.prog i{display:block;height:100%;width:0;background:var(--brand);transition:width .09s linear}
.prog i.full{background:var(--mint)}
.ok{display:flex;gap:.5rem;align-items:flex-start;border-radius:.75rem;border:1px solid oklch(.696 .149 162.5 / 40%);background:oklch(.696 .149 162.5 / 10%);padding:.75rem;font-size:.875rem;margin-top:1.25rem}
.gsteps{list-style:none;display:grid;gap:.5rem;font-size:.875rem;margin-top:1rem}
.gsteps li{border-radius:.5rem;background:var(--muted);padding:.75rem}
.gsteps li div{color:var(--muted-fg)}
.send{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
@media(min-width:640px){.send{flex-direction:row}.send>*{flex:1}}
.notfound{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem}
.notfound h1{font-size:5rem;font-weight:800}