:root{
  --canvas:#0b0b0d; --surface:#141417; --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.06);
  --text:#f5f5f7; --text2:#9a9aa3; --text3:#6d6d76;
  --violet:#7c6ff5; --violet-dark:#6c5ff0; --blue:#3b82f6; --green:#34d399;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased}
.display{font-family:'Unbounded',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1152px; margin:0 auto; padding:0 24px}
.container-sm{max-width:768px; margin:0 auto; padding:0 24px}

header{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--border2); background:rgba(11,11,13,.85); backdrop-filter:blur(10px)}
header .row{display:flex; align-items:center; justify-content:space-between; height:80px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:36px; height:36px; border-radius:10px}
.brand span{font-size:18px; font-weight:700; letter-spacing:-.01em}
nav{display:none; gap:32px; font-size:14px; color:var(--text2)}
nav a:hover{color:var(--text)}
nav a.active{color:var(--text)}
@media(min-width:768px){nav{display:flex}}

.btn-bot{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#fff; background:var(--violet);
  box-shadow:0 8px 30px rgba(124,111,245,.35); border-radius:16px; transition:all .15s}
.btn-bot:hover{background:var(--violet-dark); box-shadow:0 10px 40px rgba(124,111,245,.5)}
.btn-bot:active{transform:scale(.98)}
.btn-bot.sm{padding:8px 16px; font-size:14px; border-radius:999px}
.btn-bot.lg{padding:18px 32px; font-size:18px; border-radius:16px}
.btn-bot svg{width:20px; height:20px; flex-shrink:0}

.hero{position:relative; overflow:hidden; padding:64px 0 80px}
@media(min-width:768px){.hero{padding-top:80px}}
.hero-glow{position:absolute; right:-160px; top:-160px; width:560px; height:560px; border-radius:999px; opacity:.4; filter:blur(80px);
  background:radial-gradient(circle, rgba(124,111,245,.35), transparent 70%); pointer-events:none}
.hero-grid{display:grid; gap:56px; align-items:center; position:relative}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr}}
.badge{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:rgba(255,255,255,.03);
  border-radius:999px; padding:6px 14px; font-size:13px; font-weight:500; color:var(--text2); margin-bottom:20px}
.dot{width:6px; height:6px; border-radius:999px; background:var(--green)}
h1{font-size:36px; font-weight:800; line-height:1.05; letter-spacing:-.02em}
@media(min-width:768px){h1{font-size:60px}}
.hero-sub{margin-top:24px; max-width:440px; font-size:16px; line-height:1.6; color:var(--text2)}
@media(min-width:768px){.hero-sub{font-size:18px}}
.hero-cta{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:24px}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--text2)}
.link-arrow:hover{color:var(--text)}
.phone-wrap{position:relative; margin:0 auto; max-width:320px; width:100%}
.phone-glow{position:absolute; inset:0; z-index:-1; border-radius:2.5rem; background:rgba(124,111,245,.2); filter:blur(24px)}
.phone{overflow:hidden; border-radius:2.2rem; border:1px solid var(--border); background:var(--surface); box-shadow:0 30px 80px rgba(0,0,0,.6)}

section{border-top:1px solid var(--border2); padding:80px 0}
h2{font-size:30px; font-weight:700; letter-spacing:-.01em}
@media(min-width:768px){h2{font-size:36px}}
.lede{max-width:520px}

.bento{margin-top:48px; display:grid; gap:16px}
@media(min-width:768px){.bento{grid-template-columns:repeat(3,1fr)}}
.card{overflow:hidden; border-radius:24px; border:1px solid var(--border); background:var(--surface); padding:28px}
.card.tall{display:flex; flex-direction:column}
@media(min-width:768px){.card.tall{grid-row:span 2}}
.icon-tile{margin-bottom:20px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center}
.icon-tile.v{background:rgba(124,111,245,.15); color:var(--violet)}
.icon-tile.b{background:rgba(59,130,246,.15); color:var(--blue)}
.icon-tile.g{background:rgba(52,211,153,.15); color:var(--green)}
.icon-tile svg{width:24px; height:24px}
.card h3{font-size:18px; font-weight:600}
.card.tall h3{font-size:20px}
.card p{margin-top:8px; font-size:14px; line-height:1.6; color:var(--text2); max-width:280px}
.card-shot{margin-top:24px; overflow:hidden; border-radius:16px; border:1px solid var(--border)}
.card-wide{border-radius:24px}
@media(min-width:768px){.card-wide{grid-column:span 2; display:flex; align-items:center; gap:32px}}
.card-wide .txt{max-width:280px}
.card-wide .shot{margin-top:24px; overflow:hidden; border-radius:16px; border:1px solid var(--border)}
@media(min-width:768px){.card-wide .shot{margin-top:0; flex:1}}

.steps{margin-top:48px; display:grid; gap:40px}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding-left:0}
@media(min-width:768px){.step.line{padding-left:32px; border-left:1px solid var(--border)}}
.step .n{font-size:14px; color:var(--violet)}
.step h3{margin-top:12px; font-size:20px; font-weight:600}
.step p{margin-top:8px; font-size:14px; line-height:1.6; color:var(--text2)}

.plans{margin-top:40px; display:grid; gap:20px; max-width:640px}
@media(min-width:768px){.plans{grid-template-columns:1fr 1fr}}
.plan{border-radius:24px; padding:32px; border:1px solid var(--border); background:var(--surface)}
.plan.hl{border:2px solid var(--violet); background:rgba(124,111,245,.06); box-shadow:0 20px 60px rgba(124,111,245,.2)}
.plan .tag{display:inline-block; margin-bottom:16px; border-radius:999px; background:var(--violet); color:#fff; font-size:12px; font-weight:600; padding:4px 12px}
.plan .name{font-size:18px; font-weight:600}
.plan .price{margin-top:12px; display:flex; align-items:baseline; gap:6px}
.plan .price b{font-size:36px; font-weight:700}
.plan .price span{font-size:14px; color:var(--text2)}
.plan .note{margin-top:8px; font-size:14px; color:var(--text2)}
.plan-btn{margin-top:28px; display:flex; width:100%; align-items:center; justify-content:center; gap:8px; border-radius:16px;
  padding:14px 20px; font-size:14px; font-weight:600; transition:all .15s}
.plan-btn.solid{background:var(--violet); color:#fff}
.plan-btn.solid:hover{background:var(--violet-dark)}
.plan-btn.outline{border:1px solid rgba(255,255,255,.15); color:var(--text)}
.plan-btn.outline:hover{background:rgba(255,255,255,.05)}
.foot-note{margin-top:24px; font-size:12px; color:var(--text3)}

.blog-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px}
.posts{margin-top:40px; border-top:1px solid var(--border2)}
.post{display:flex; flex-direction:column; gap:8px; padding:28px 0; border-bottom:1px solid var(--border2)}
@media(min-width:768px){.post{flex-direction:row; align-items:center; justify-content:space-between; gap:40px}}
.post h3{max-width:360px; font-size:18px; font-weight:600}
.post:hover h3{color:#a79bff}
.post p{max-width:520px; font-size:14px; line-height:1.6; color:var(--text2)}
.post .meta{font-size:12px; color:var(--text3); margin-top:4px}

.faq{margin-top:40px; border-top:1px solid var(--border2)}
details{padding:20px 0; border-bottom:1px solid var(--border2)}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary .q{font-size:16px; font-weight:500}
@media(min-width:768px){summary .q{font-size:18px}}
.plus{flex-shrink:0; width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--text2); transition:transform .15s}
details[open] .plus{transform:rotate(45deg)}
details p{margin-top:12px; max-width:640px; font-size:14px; line-height:1.6; color:var(--text2)}

.final{position:relative; overflow:hidden; text-align:center; padding:112px 0}
.final-glow{position:absolute; left:50%; top:0; width:820px; height:420px; transform:translateX(-50%); opacity:.5; filter:blur(80px);
  background:radial-gradient(ellipse, rgba(124,111,245,.3), transparent 70%); pointer-events:none}
.final h2{font-size:30px; font-weight:700}
@media(min-width:768px){.final h2{font-size:48px}}
.final p{margin:20px auto 0; max-width:380px; font-size:16px; line-height:1.6; color:var(--text2)}
.final .btn-bot{margin-top:36px; box-shadow:0 20px 60px rgba(124,111,245,.45)}
.final .btn-bot:hover{transform:translateY(-2px); box-shadow:0 25px 70px rgba(124,111,245,.6)}

footer{border-top:1px solid var(--border2); padding:40px 0; font-size:14px; color:var(--text3)}
.foot-row{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center}
@media(min-width:768px){.foot-row{flex-direction:row; justify-content:space-between; text-align:left}}
.foot-brand{display:flex; align-items:center; gap:10px}
.foot-brand img{width:24px; height:24px; border-radius:6px}
.foot-links{display:flex; align-items:center; gap:24px}
.foot-links a:hover{color:var(--text)}

/* --- blog / article additions --- */
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3)}
.crumbs a:hover{color:var(--text2)}
.article-hero{padding:48px 0 0}
.article-hero .meta{margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text3)}
.article-hero .meta span:not(:last-child)::after{content:"·"; margin-left:12px; color:var(--text3)}
.article-hero h1{font-size:32px}
@media(min-width:768px){.article-hero h1{font-size:44px}}
.article-hero .dek{margin-top:20px; font-size:17px; line-height:1.6; color:var(--text2)}

.article-body{padding-top:40px; padding-bottom:0}
.article-body h2{margin-top:44px; font-size:24px; font-weight:700}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin-top:28px; font-size:18px; font-weight:600}
.article-body p{margin-top:16px; font-size:16px; line-height:1.75; color:var(--text2)}
.article-body ul,.article-body ol{margin-top:16px; padding-left:22px; color:var(--text2); font-size:16px; line-height:1.75}
.article-body li{margin-top:8px}
.article-body strong{color:var(--text); font-weight:600}
.article-body table{margin-top:20px; width:100%; border-collapse:collapse; font-size:14px}
.article-body th,.article-body td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border2)}
.article-body th{color:var(--text); font-weight:600}
.article-body td{color:var(--text2)}

.callout{margin-top:32px; border-radius:20px; border:1px solid var(--border); background:var(--surface); padding:24px}
.callout p{margin-top:0; color:var(--text2); font-size:14px; line-height:1.6}
.callout .callout-cta{margin-top:16px}

.article-end{margin-top:56px; text-align:center; border-radius:24px; border:1px solid var(--border);
  background:rgba(124,111,245,.06); padding:48px 24px}
.article-end h2{font-size:24px}
.article-end p{margin-top:12px; max-width:420px; margin-left:auto; margin-right:auto; font-size:15px; line-height:1.6; color:var(--text2)}
.article-end .btn-bot{margin-top:24px}

.related{margin-top:64px}
.related h2{font-size:20px}