/* ── Nabeghe API — landing (theme-aware, compact, animated) ────────────────
   Loads after style.css; inherits its tokens (light default / dark via
   prefers-color-scheme or [data-theme]). */

/* @font-face for Vazirmatn now lives in style.css (loaded on every page). */

:root{
  --max:1120px;
  --grad:linear-gradient(115deg,var(--brand),var(--brand2));
  --tint:var(--brand-weak);
  --tint2:var(--brand2-weak);
  --card:var(--panel);
  --hair:var(--line);
}

html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:hidden}
body.landing{background:var(--bg);overflow-x:hidden;font-size:15px;max-width:100%}
@media (max-width:760px){ html{scroll-padding-top:60px} }
@media (max-width:640px){ body.landing{font-size:14px} }
@media (max-width:400px){ body.landing{font-size:13.5px} }

/* ── horizontal-overflow guards (the #1 mobile bug) ─────────────────── */
.landing main{max-width:100%;overflow-x:hidden}
.wrap{width:100%}
.codewin{max-width:100%;min-width:0}
.codewin pre{overflow-wrap:break-word}
.hero-visual>*,.showcase>*,.hero-cta>*,.navbar>*,.b2b .inner>*{min-width:0}
code{overflow-wrap:break-word}

/* ── background: clean, mostly white in light; a faint warm tint + a
   sparse animated node-mesh (DNS-style) instead of the old colour blobs ── */
.bgglow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 40vw at 100% -10%, var(--brand-weak), transparent 68%),
    radial-gradient(52vw 38vw at -8% 8%, var(--brand2-weak), transparent 70%)}
.netbg{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;
  color:var(--brand);opacity:.55}
.netbg .ln line{stroke:currentColor;stroke-width:1;opacity:.16}
.netbg .nd circle{fill:currentColor;opacity:.26}
.netbg .pulse{stroke:var(--brand2);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:4 90;stroke-dashoffset:0;animation:netpulse 6s linear infinite;animation-delay:var(--pd,0s)}
.netbg .mesh{transform-box:fill-box;transform-origin:center;animation:netdrift 42s ease-in-out infinite}
:root[data-theme="dark"] .netbg,
:root:not([data-theme="light"]) .netbg{opacity:.42}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px;opacity:.22;
  -webkit-mask-image:radial-gradient(1100px 600px at 50% -5%,#000,transparent 75%);
          mask-image:radial-gradient(1100px 600px at 50% -5%,#000,transparent 75%)}
@keyframes netdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,11px)}}
@keyframes netpulse{to{stroke-dashoffset:-380}}
@media (prefers-reduced-motion:reduce){ .netbg .pulse,.netbg .mesh{animation:none} .netbg .pulse{opacity:0} }

.landing main,.landing header,.landing footer{position:relative;z-index:1}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,4vw,28px)}
.landing section{padding-block:clamp(44px,7vw,84px)}
@media (max-width:640px){ .landing section{padding-block:32px} }
@media (max-width:400px){ .wrap{padding-inline:18px} .landing section{padding-block:26px} }

.eyebrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.78rem;
  color:var(--brand);background:var(--tint);border:1px solid var(--hair);
  padding:5px 12px;border-radius:999px}
.eyebrow .ic{width:13px;height:13px}
@media (max-width:560px){ .eb-x{display:none} }
h2.head{font-size:clamp(1.4rem,3.2vw,2.15rem);margin:14px 0 8px;letter-spacing:-.01em;line-height:1.35}
p.lead{color:var(--dim);font-size:clamp(.95rem,1.5vw,1.06rem);max-width:54ch;margin:0}
.center{text-align:center}.center p.lead{margin-inline:auto}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── notice ──────────────────────────────────────────────────────────── */
.noticebar{background:linear-gradient(90deg,var(--warn-weak),var(--tint2));
  border-bottom:1px solid var(--hair);color:var(--text);font-size:.82rem;font-weight:600;text-align:center;padding:7px 14px}
.noticebar b{color:var(--warn)}

/* ── header ──────────────────────────────────────────────────────────── */
.landing header{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);
  background:var(--header-bg);border-bottom:1px solid transparent;transition:.25s}
.landing header.scrolled{border-bottom-color:var(--hair);background:var(--header-bg)}
.navbar{display:flex;align-items:center;gap:16px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;color:var(--text)}
.logo:hover{text-decoration:none}
.logo .mark{width:29px;height:29px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:.85rem;box-shadow:0 6px 18px -6px rgba(239,95,16,.45)}
.logo .en{color:var(--faint);font-weight:700;font-size:.85rem}
.navlinks{display:flex;gap:2px;margin-inline-start:6px}
.navlinks a{color:var(--dim);font-weight:600;padding:7px 11px;border-radius:8px;font-size:.88rem}
.navlinks a:hover{color:var(--text);background:var(--panel2);text-decoration:none}
.navspace{flex:1}
.navcta{display:flex;align-items:center;gap:8px}
.btn.ghost{background:transparent}
.btn.lg{padding:11px 19px;font-size:.92rem}
.btn.block{width:100%;justify-content:center}
.btn .ic{width:16px;height:16px}

.panels{position:relative}
.panels>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;border-radius:9px;border:1px solid var(--hair);background:var(--panel2);
  color:var(--text);font-weight:700;font-size:.85rem}
.panels>summary::-webkit-details-marker{display:none}
.panels>summary::after{content:"";width:7px;height:7px;border-inline-start:2px solid var(--dim);
  border-block-end:2px solid var(--dim);transform:rotate(45deg);margin-top:-3px}
.panels[open]>summary{border-color:var(--brand)}
.panels .menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:224px;
  background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:6px;box-shadow:var(--shadow-lg)}
.panels .menu a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;color:var(--dim);font-weight:600;font-size:.86rem}
.panels .menu a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.panels .menu a b{color:var(--text)}
.panels .menu .sep{height:1px;background:var(--hair);margin:5px 2px}

.burger{display:none;width:38px;height:38px;border:1px solid var(--hair);border-radius:9px;
  background:var(--panel2);color:var(--text);cursor:pointer;place-items:center}
.burger .ic{width:18px;height:18px}

/* ── hero (centred header + product visual below) ─────────────────────── */
.hero{padding-top:clamp(34px,6vw,60px)!important}
.hero-head{max-width:860px;margin-inline:auto;text-align:center}
.hero-head h1{font-size:clamp(1.7rem,3.5vw,2.45rem);line-height:1.36;margin:14px auto 14px;
  letter-spacing:-.02em;max-width:42ch;text-wrap:balance}
.hero-head h1 .grad-txt{white-space:nowrap}
.hero-head p.lead{font-size:clamp(.96rem,1.5vw,1.08rem);max-width:60ch;margin-inline:auto;line-height:1.8}
.hero-head .hero-cta,.hero-head .chips{justify-content:center}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--dim);
  border:1px solid var(--hair);border-radius:999px;padding:5px 11px;background:var(--panel)}
.chip .ic{width:13px;height:13px;color:var(--ok)}
.hero-visual{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,38px);align-items:center;
  max-width:1000px;margin:clamp(32px,5vw,54px) auto 0}
@media (max-width:860px){ .hero-visual{grid-template-columns:1fr;max-width:560px;gap:16px} }

/* code window + typewriter */
.codewin{background:var(--code-bg);border:1px solid var(--hair);border-radius:15px;overflow:hidden;box-shadow:var(--shadow-lg)}
.codewin .bar{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.codewin .bar .dt{width:10px;height:10px;border-radius:50%;background:#3a4152}
.codewin .bar .dt.r{background:#ff5f57}.codewin .bar .dt.y{background:#febc2e}.codewin .bar .dt.g{background:#28c840}
.codewin .bar .fn{margin-inline-start:6px;color:#7f8ba3;font-size:.76rem;font-family:var(--mono)}
.codewin .bar .cp{margin-inline-start:auto}
.tabrow{display:flex;gap:2px;padding:7px 9px 0;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.tabrow button{border:0;background:transparent;color:#7f8ba3;font-family:var(--mono);font-size:.76rem;font-weight:700;
  padding:7px 12px;border-radius:8px 8px 0 0;cursor:pointer}
.tabrow button:hover{color:#e5e9f0}
.tabrow button.on{background:rgba(255,255,255,.06);color:var(--brand)}
.codewin pre{margin:0;padding:15px 17px;overflow-x:auto;font-family:var(--mono);font-size:.79rem;line-height:1.75;
  color:var(--code-fg);direction:ltr;text-align:left;min-height:210px;white-space:pre-wrap;word-break:break-word}
.codewin [data-panel]{display:none}
.codewin [data-panel].on{display:block}
.cw-caret{display:inline-block;width:7px;height:1.05em;background:var(--brand);vertical-align:-2px;
  margin-inline-start:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.btn.cp{padding:5px 9px;font-size:.72rem;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#c9d2e3}
.btn.cp:hover{border-color:var(--brand)}

/* ── image box (upload slots) ────────────────────────────────────────── */
.imgbox{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--hair);
  background:var(--panel2);box-shadow:var(--shadow)}
.imgbox img{display:block;width:100%;height:100%;object-fit:cover}
.imgbox.ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,var(--tint),transparent 45%,var(--tint2))}
.imgbox.ph .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint)}
.imgbox.ph .glyph .ic{width:34px;height:34px;opacity:.5}
.imgbox.ph::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  animation:sheen 2.6s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .imgbox.ph::before{animation:none} }

/* ── hero hub (live "one key → many models" animation, no card) ─────────── */
.hubcard{padding:6px 8px 2px}
.hub{display:block;width:100%;max-width:380px;height:auto;margin-inline:auto}
.hub text{font-family:var(--sans);font-size:8.5px;font-weight:600;fill:var(--dim);direction:ltr;
  paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.hub .lnk{fill:none;stroke:var(--hair);stroke-width:1.4}
.hub .flow{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:5 135;stroke-dashoffset:0;animation:hubflow 2.6s linear infinite;animation-delay:var(--d,0s)}
.hub .pn circle{fill:var(--panel2);stroke:var(--hair);stroke-width:1.4}
.hub .pn.on circle{fill:var(--brand);stroke:var(--brand);animation:hubdot 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.hub .glow{fill:var(--brand-weak);transform-box:fill-box;transform-origin:center;
  animation:hubglow 2.6s ease-in-out infinite}
.hub .ring{fill:var(--panel);stroke:var(--brand);stroke-width:2}
.hub .key{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hubcap{margin:8px 4px 2px;text-align:center;color:var(--dim);font-size:.78rem;line-height:1.6}
@keyframes hubflow{to{stroke-dashoffset:-140}}
@keyframes hubglow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.78;transform:scale(1.12)}}
@keyframes hubdot{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hub .flow{animation:none;stroke-dasharray:none;opacity:.4}
  .hub .glow,.hub .pn.on circle{animation:none}
}

/* ── production-ready grid (replaces the old image gallery) ──────────── */
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}

/* ── stats (counters) ────────────────────────────────────────────────── */
.stats{border-block:1px solid var(--hair);background:var(--band-bg)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st{text-align:center}
.st .n{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:900;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.st .l{color:var(--dim);font-size:.82rem;margin-top:2px}

/* ── bento features ──────────────────────────────────────────────────── */
/* tidy 4-col grid: hero fills a 2×2 block, four compact tiles stack beside it,
   two span-2 tiles close the last row — no orphan cells on desktop.
   The grid sits on a subtly-textured panel (soft corner glows + faint dotted
   grid), mirroring the phone layout. `var(--card)` makes it opaque so the
   global page mesh doesn't double up inside this section. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:14px;
  margin-top:34px;align-items:stretch;padding:16px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--brand) 16%,var(--hair));
  background:
    radial-gradient(320px 280px at 100% 0%,var(--tint),transparent 66%),
    radial-gradient(340px 300px at 0% 100%,var(--tint2),transparent 68%),
    radial-gradient(color-mix(in srgb,var(--brand) 13%,transparent) 1px,transparent 1.7px) 0 0 / 22px 22px,
    var(--card)}
.tile{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);
  transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden;position:relative}
.tile::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
html[dir="ltr"] .tile::before{transform-origin:left}
.tile:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-lg)}
.tile:hover::before{transform:scaleX(1)}
.tile .b-ico{display:inline-flex;color:var(--brand);margin-bottom:10px;line-height:0}
.tile .b-ico .ic{width:27px;height:27px;stroke-width:1.7}
.tile h3{margin:0 0 5px;font-size:.96rem}
.tile p{margin:0;color:var(--dim);font-size:.84rem;line-height:1.65}
.tile.sm{grid-column:span 1}
.tile.wide{grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
.tile.tall{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.tile.feature-hero{background:linear-gradient(140deg,var(--tint),transparent 55%),var(--card);
  justify-content:center}
.tile.feature-hero h3{font-size:1.06rem}
.tile.feature-hero p{font-size:.88rem;line-height:1.7}
.tile .mini-code{margin-top:14px;background:var(--code-bg);color:var(--code-fg);border-radius:10px;
  padding:11px 13px;font-family:var(--mono);font-size:.72rem;direction:ltr;line-height:1.7;overflow-x:auto}
.tile .spark{position:absolute;inset-inline-end:-20px;top:-20px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,var(--tint2),transparent 70%)}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr) 1fr;gap:16px;margin-top:32px;align-items:stretch}
.step{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:15px;padding:22px 18px 18px;box-shadow:var(--shadow)}
.step .num{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-weight:900;
  display:grid;place-items:center;margin-bottom:12px;box-shadow:0 8px 20px -8px rgba(224,47,40,.42)}
.step h3{margin:0 0 5px;font-size:.98rem}
.step p{margin:0;color:var(--dim);font-size:.86rem}
.step code{background:var(--bg);border:1px solid var(--hair);border-radius:6px;padding:2px 6px;font-size:.8rem;color:var(--brand);direction:ltr;display:inline-block}
.steps .imgbox{border-radius:15px}

/* ── showcase (image + text) ─────────────────────────────────────────── */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,44px);align-items:center}
.showcase.flip{direction:ltr}
.showcase.flip>*{direction:rtl}
.showcase .txt h3{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:12px 0 8px}
.showcase .txt p{color:var(--dim);margin:0 0 14px}
.showcase ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.showcase li{display:flex;gap:8px;align-items:flex-start;color:var(--dim);font-size:.88rem}
.showcase li .ic{width:16px;height:16px;color:var(--ok);flex:0 0 auto;margin-top:3px}

/* ── models table ───────────────────────────────────────────────────── */
.modelwrap{margin-top:30px;border:1px solid var(--hair);border-radius:16px;background:var(--panel);
  overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
.modeltbl{width:100%;border-collapse:collapse}
.modeltbl th,.modeltbl td{padding:12px 15px;border-bottom:1px solid var(--hair);text-align:start;font-size:.86rem}
.modeltbl th{background:var(--panel2);color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.modeltbl tr:last-child td{border-bottom:0}
.modeltbl tbody tr:hover{background:var(--panel2)}
.modeltbl .mono{font-family:var(--mono);font-size:.8rem;direction:ltr}
.tag{display:inline-block;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 8px;border:1px solid var(--hair)}
.tag.cheap{color:var(--ok);border-color:var(--ok)}
.tag.mid{color:var(--brand);border-color:var(--brand)}
.tag.flag{color:var(--brand2);border-color:var(--brand2)}
.modelnote{margin-top:12px;color:var(--faint);font-size:.82rem;text-align:center}
.modelnote code{color:var(--brand);direction:ltr}

/* ── pricing ────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.tier{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tier.hot{border-color:transparent;box-shadow:0 0 0 1.5px var(--brand),var(--shadow-lg)}
.tier .badge{align-self:flex-start;font-size:.7rem;font-weight:800;color:#fff;background:var(--grad);border-radius:999px;padding:3px 10px;margin-bottom:9px}
.tier h3{margin:0 0 3px;font-size:1.08rem}
.tier .who{color:var(--dim);font-size:.84rem;margin:0 0 14px}
.tier ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.tier li{color:var(--dim);font-size:.86rem;display:flex;gap:8px;align-items:flex-start}
.tier li .ic{width:15px;height:15px;color:var(--ok);flex:0 0 auto;margin-top:3px}
.tier .btn{margin-top:auto}

/* ── comparison ─────────────────────────────────────────────────────── */
.cmp{margin-top:30px;border:1px solid var(--hair);border-radius:16px;background:var(--panel);
  overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:12px 15px;border-bottom:1px solid var(--hair);font-size:.87rem;text-align:start}
.cmp thead th{background:var(--panel2);font-size:.76rem;color:var(--dim)}
.cmp thead th:last-child{color:var(--brand)}
.cmp tr:last-child td{border-bottom:0}
.cmp td:not(:first-child){text-align:center;width:26%}
.cmp .yes{color:var(--ok)}.cmp .no{color:var(--faint)}
.cmp .yes .ic,.cmp .no .ic{width:17px;height:17px}

/* ── gallery ────────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}

/* ── b2b ────────────────────────────────────────────────────────────── */
.b2b .inner{background:linear-gradient(120deg,var(--tint),var(--tint2));border:1px solid var(--hair);border-radius:20px;
  padding:clamp(24px,4vw,40px);display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.b2b .inner>div:first-child{flex:1;min-width:250px}
.b2b h2{margin:0 0 6px;font-size:clamp(1.3rem,2.8vw,1.8rem)}
.b2b p{margin:0;color:var(--dim)}

/* ── faq ────────────────────────────────────────────────────────────── */
.faq{max-width:800px;margin:30px auto 0}
.faq details{border:1px solid var(--hair);border-radius:12px;background:var(--card);margin-bottom:9px;overflow:hidden;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:15px 17px;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:9px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;color:var(--brand);font-size:1.15rem;font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 17px 16px;color:var(--dim);font-size:.87rem;line-height:1.8}

/* ── final cta ──────────────────────────────────────────────────────── */
.finalcta .inner{text-align:center;background:
  radial-gradient(600px 220px at 50% 0%,var(--tint2),transparent),var(--card);
  border:1px solid var(--hair);border-radius:22px;padding:clamp(32px,5vw,56px);box-shadow:var(--shadow-lg)}
.finalcta h2{font-size:clamp(1.4rem,3.4vw,2.1rem);margin:0 0 10px}
.finalcta p{color:var(--dim);margin:0 auto 22px;max-width:44ch}
.finalcta .btn{margin-inline:5px}

/* ── signup gifts band — free starting credit, centered, concise, no CTA ── */
.giftband-wrap{margin-top:6px}
.giftband{position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:22px clamp(20px,4vw,34px);border-radius:20px;
  border:1.5px solid color-mix(in srgb,var(--brand) 42%,var(--hair));
  background:
    radial-gradient(560px 220px at 50% -20%,var(--tint),transparent 70%),
    radial-gradient(460px 240px at 50% 120%,var(--tint2),transparent 72%),
    var(--card);
  box-shadow:0 18px 44px -22px color-mix(in srgb,var(--brand) 40%,transparent),var(--shadow-lg)}
.giftband::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand2))}
.giftband .gb-sheen{position:absolute;inset:0;transform:translateX(-120%);pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  animation:sheen 5.5s ease-in-out 1.2s infinite}
.gb-badge{font-size:2.4rem;line-height:1;background:none;box-shadow:none;
  filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--brand) 42%,transparent));
  animation:giftwiggle 3.4s ease-in-out infinite;transform-origin:70% 30%}
.gb-title{margin:0;font-size:clamp(1.15rem,2.6vw,1.45rem)}
.gb-title .gb-free{color:var(--ok)}
.gb-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;
  width:100%;max-width:720px}
.gb-item{flex:1 1 300px;max-width:360px;padding:13px 16px;border-radius:14px;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--brand) 24%,var(--hair))}
.gb-item-t{font-size:1rem;color:var(--text);line-height:1.5;font-weight:600}
.gb-item-t b{color:var(--brand);font-weight:900;font-size:1.16rem}
.gb-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:.72rem;font-weight:900;color:#fff;background:var(--grad);vertical-align:2px;margin-inline-end:2px}
.gb-item p{margin:4px 0 0;color:var(--dim);font-size:.82rem;line-height:1.55}
.gb-item code{background:var(--panel2);border:1px solid var(--hair);border-radius:5px;padding:0 5px;
  font-size:.82em;color:var(--brand);direction:ltr;display:inline-block}
.gb-note{display:block;color:var(--faint);font-size:.78rem}
@keyframes giftwiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-9deg)}95%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){
  .giftband .gb-sheen{animation:none}
  .gb-badge{animation:none}
}
/* phones — compact */
@media (max-width:760px){
  .giftband{gap:9px;padding:15px 14px 14px;border-radius:15px}
  .gb-badge{font-size:1.9rem}
  .gb-title{font-size:1rem}
  .gb-grid{flex-direction:column;gap:7px;max-width:none}
  .gb-item{flex-basis:auto;max-width:none;padding:9px 12px}
  .gb-item-t{font-size:.87rem;line-height:1.45}
  .gb-item-t b{font-size:1rem}
  .gb-num{width:18px;height:18px;font-size:.66rem}
  .gb-item p{font-size:.75rem;margin-top:2px}
  .gb-note{font-size:.7rem}
}
@media (max-width:400px){
  .giftband{padding:13px 12px}
  .gb-badge{font-size:1.65rem}
}

/* ── footer ─────────────────────────────────────────────────────────── */
.landing footer{border-top:1px solid var(--hair);background:var(--band-bg);padding:46px 0 26px}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:26px}
.fcols .about p{color:var(--dim);font-size:.85rem;margin:10px 0 0;max-width:34ch}
.fcol h4{margin:0 0 12px;font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.fcol a{display:block;color:var(--dim);font-size:.87rem;padding:4px 0}
.fcol a:hover{color:var(--text);text-decoration:none}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);color:var(--faint);font-size:.8rem}

/* ── reveal — content is ALWAYS visible (opacity:1); JS only slides it up ── */
.reveal{opacity:1;transform:translateY(12px);transition:transform .5s ease}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{transform:none;transition:none} }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:960px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .tile.wide,.tile.tall,.tile.sm{grid-column:span 2}
  .tile.tall{grid-row:auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps .imgbox{grid-column:span 2}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .prodgrid{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .navbar{height:54px;gap:8px}
  .navlinks,.navcta .panels,.navcta .btn.ghost,.navcta .btn.primary{display:none!important}
  .burger{display:grid!important}
  .hero-visual{grid-template-columns:1fr!important;gap:16px}
  .statrow{grid-template-columns:repeat(2,1fr)!important;gap:14px 12px}
  .tiers{grid-template-columns:1fr!important}
  .showcase{grid-template-columns:1fr!important;gap:14px}
  .showcase .imgbox{order:-1}
  .b2b .inner{gap:14px}
}

/* ── phones — one tight padded column ──────────────────────────────── */
@media (max-width:560px){
  body.landing{line-height:1.62}
  .wrap{padding-inline:22px!important}
  .landing section{padding-block:24px!important}

  .providers,.stats{background:none!important;border:0!important}
  .providers{padding:18px 0!important}
  .providers .lbl{font-size:.72rem;margin-bottom:12px}
  .provrow{gap:7px}
  .provrow span{padding:6px 11px;font-size:.8rem}

  /* headings + intro — a clear step down */
  .hero{padding-top:14px!important}
  .hero h1{font-size:1.32rem!important;line-height:1.4;margin:8px auto 9px}
  .hero-head h1 br{display:none}
  .hero p.lead{font-size:.85rem!important;max-width:none;line-height:1.75}
  h2.head{font-size:1.1rem!important;margin:9px 0 4px;line-height:1.4}
  p.lead{font-size:.85rem!important;max-width:none}
  .eyebrow{font-size:.68rem;padding:3px 9px}
  .center{text-align:start}

  /* ── showcases: image on top, text card glued underneath ── */
  .showcase{display:flex!important;flex-direction:column;gap:0;direction:rtl!important;margin-bottom:16px}
  .showcase>*{direction:rtl!important;min-width:0}
  .showcase .imgbox{display:block!important;order:0;aspect-ratio:16/9;
    border-radius:14px 14px 0 0;border-bottom:0}
  .showcase .txt{order:1;background:var(--card);border:1px solid var(--hair);border-top:0;
    border-radius:0 0 14px 14px;padding:14px 15px}
  .showcase .txt h3{font-size:1.02rem!important;margin:8px 0 6px}
  .showcase .txt p{font-size:.85rem;margin-bottom:10px}
  .showcase li{font-size:.83rem}

  /* heading → content gaps */
  .bento,#features .bento{margin-top:12px}
  .steps,.tiers,.cmp,.gallery,.prodgrid,.modelwrap,.faq,.devgrid{margin-top:14px}
  .prodgrid{grid-template-columns:1fr!important;gap:9px}

  /* ── features: one card holding a divided icon+text list, with a subtle
        modern texture behind it (soft corner glow + faint dotted grid) ── */
  #features .bento{position:relative;display:flex!important;flex-direction:column;gap:0!important;
    border:1px solid color-mix(in srgb,var(--brand) 20%,var(--hair));border-radius:16px;
    padding:4px 14px;box-shadow:var(--shadow);overflow:hidden;
    background:
      radial-gradient(140px 130px at 100% 0%,var(--tint),transparent 70%),
      radial-gradient(150px 150px at 0% 100%,var(--tint2),transparent 72%),
      radial-gradient(color-mix(in srgb,var(--brand) 15%,transparent) 1px,transparent 1.6px) 0 0 / 20px 20px,
      var(--card)}
  #features .bento::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;
    width:120px;height:120px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--brand-weak),transparent 68%)}
  #features .tile{position:relative;display:grid!important;grid-template-columns:32px 1fr;column-gap:12px;row-gap:2px;
    align-items:start;background:none!important;border:0!important;
    border-bottom:1px solid color-mix(in srgb,var(--brand) 12%,var(--hair))!important;
    box-shadow:none!important;border-radius:0!important;padding:13px 0!important;overflow:visible}
  #features .tile:last-child{border-bottom:0!important}
  #features .tile:hover{transform:none}
  #features .tile::before{display:none!important}
  #features .tile .spark,#features .tile.tall .mini-code{display:none!important}
  #features .tile .b-ico{grid-row:1 / 3;grid-column:1;width:auto;height:auto;margin:0!important;
    position:static!important;align-self:start;background:none!important;border:0!important;
    box-shadow:none!important;color:var(--brand)!important;line-height:0}
  #features .tile .b-ico .ic{width:23px;height:23px}
  #features .tile h3{grid-column:2;grid-row:1;margin:0;font-size:.9rem}
  #features .tile p{grid-column:2;grid-row:2;margin:0;font-size:.82rem;line-height:1.55;color:var(--dim)}

  /* steps — short horizontal cards (num · title / text) */
  #how .steps{display:flex!important;flex-direction:column;gap:9px}
  #how .steps>.imgbox,#how .steps figure{display:none!important}
  .step{display:grid!important;grid-template-columns:26px 1fr;column-gap:11px;row-gap:1px;
    align-items:center;padding:11px 13px!important;border-radius:12px;margin:0}
  .step .num{grid-row:1 / 3;grid-column:1;width:26px;height:26px;margin:0!important;align-self:center;font-size:.85rem}
  .step h3{grid-column:2;grid-row:1;margin:0;font-size:.9rem}
  .step p{grid-column:2;grid-row:2;margin:0;font-size:.8rem;line-height:1.5}
  .tier{padding:15px 14px!important;border-radius:13px}
  .tier h3{font-size:1rem}
  .tier .who{margin-bottom:10px}
  .tier ul{gap:6px;margin-bottom:12px}
  .tier li{font-size:.83rem}
  .faq{margin-inline:0}
  .faq summary{padding:11px 12px;font-size:.84rem}
  .faq details p{padding:0 12px 11px;font-size:.83rem}
  .b2b .inner,.finalcta .inner{padding:18px 15px!important;border-radius:14px}
  .b2b .inner>div:first-child{min-width:0}
  .b2b h2{font-size:1.15rem}
  .finalcta h2{font-size:1.2rem}
  .gallery{grid-template-columns:1fr 1fr!important;gap:9px}
  .devgrid{grid-template-columns:1fr!important;gap:10px}
  .dev{padding:14px}

  /* code window */
  .codewin{border-radius:12px}
  .codewin .bar{padding:9px 11px}
  .codewin pre{min-height:120px;font-size:.68rem!important;padding:10px 11px;line-height:1.6}
  .tabrow button{padding:6px 8px;font-size:.68rem}
  .hero-visual{gap:14px}
  .hero-visual .imgbox{display:none!important}
  .hubcard{padding:2px 0 0;order:-1}
  .hub{max-width:330px}
  .hubcap{font-size:.72rem;margin-top:6px}

  /* stats */
  .statrow{gap:12px 10px}
  .st .n{font-size:1.3rem}
  .st .l{font-size:.74rem}

  .hero-cta{gap:8px;margin-top:12px;flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
  .btn.lg{padding:10px 14px;font-size:.86rem}
  .chips{gap:6px;margin-top:11px}
  .chip{font-size:.72rem;padding:3px 8px}

  /* phones: keep the node-mesh animation + faint warm tint; drop only the grid */
  .grid-lines{display:none!important}
  .netbg{opacity:.4}
  :root[data-theme="dark"] .netbg,
  :root:not([data-theme="light"]) .netbg{opacity:.34}
  .bgglow{background:
    radial-gradient(75vw 45vw at 100% -6%, var(--brand-weak), transparent 70%),
    radial-gradient(70vw 42vw at -10% 4%, var(--brand2-weak), transparent 72%),
    radial-gradient(80vw 40vw at 50% 108%, var(--brand-weak), transparent 72%)}

  /* ── models → tight 2-line cards, tag pinned to the corner ── */
  .modelwrap{overflow:visible!important;border:0!important;box-shadow:none!important;background:none!important}
  .modeltbl,.modeltbl tbody,.modeltbl tr,.modeltbl td{display:block!important;width:auto!important}
  .modeltbl thead{display:none!important}
  .modeltbl tr{position:relative;border:1px solid var(--hair)!important;border-radius:11px;
    padding:9px 12px;padding-inline-start:76px;margin-bottom:7px;background:var(--card)!important}
  .modeltbl td{border:0!important;padding:0!important;line-height:1.5;text-align:start!important}
  .modeltbl td:nth-child(1){font-size:.85rem;color:var(--text);font-weight:700;font-family:var(--mono)}
  .modeltbl td:nth-child(2){display:inline;font-size:.77rem;color:var(--dim)}
  .modeltbl td:nth-child(2)::after{content:" · ";color:var(--faint)}
  .modeltbl td:nth-child(3){display:inline;font-size:.77rem;color:var(--dim)}
  .modeltbl td:nth-child(4){position:absolute;inset-inline-start:10px;top:10px;font-size:0}
  .modeltbl td:nth-child(4) .tag{font-size:.65rem;padding:2px 7px}

  /* ── comparison → one line per feature (name … ✕  ✓) ── */
  .cmp{overflow:visible!important;border:0!important;box-shadow:none!important;background:none!important}
  .cmp table,.cmp tbody,.cmp tr,.cmp td{display:block!important;width:auto!important}
  .cmp thead{display:none!important}
  .cmp tr{display:flex!important;align-items:center;gap:10px;border:1px solid var(--hair)!important;
    border-radius:11px;padding:9px 12px;margin-bottom:6px;background:var(--card)!important}
  .cmp td{border:0!important;padding:0!important}
  .cmp td:first-child{flex:1;font-size:.82rem;color:var(--text);text-align:start!important}
  .cmp td:not(:first-child){flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:.68rem;color:var(--faint)}
  .cmp td:nth-child(2)::before{content:"مستقیم"}
  .cmp td:nth-child(3)::before{content:"نابغه"}
  .cmp .yes .ic,.cmp .no .ic{width:14px;height:14px}

  /* footer — small & compact */
  .fcols{grid-template-columns:1fr 1fr;gap:16px 18px}
  .fcols .about{grid-column:1 / -1}
  .fcols .about p{font-size:.82rem;margin-top:8px}
  .landing footer{padding:26px 0 20px}
  .fcol h4{margin-bottom:8px;font-size:.72rem}
  .fcol a{padding:3px 0;font-size:.83rem}
  .fbot{margin-top:20px;font-size:.74rem;gap:5px}
}
@media (max-width:380px){
  .wrap{padding-inline:20px}
  .hero h1{font-size:1.4rem}
  .tier,.step{padding:13px 13px}
  .gallery{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
}

/* mobile nav sheet */
.mobilenav{display:none;position:fixed;inset:54px 0 auto 0;z-index:39;background:var(--panel);
  border-bottom:1px solid var(--hair);padding:10px 22px 16px;transform:translateY(-120%);
  transition:transform .26s ease;box-shadow:var(--shadow-lg)}
.mobilenav.open{transform:none}
.mobilenav a{display:block;color:var(--dim);font-weight:600;padding:9px 4px;border-bottom:1px solid var(--hair)}
.mobilenav a:last-of-type{border-bottom:0}
.mobilenav .mrow{display:flex;gap:8px;margin-top:10px}
.mobilenav .mrow .btn{flex:1;justify-content:center}
@media (max-width:760px){ .mobilenav{display:block} }