/* ============================================================
   ngbot.ai — marketing site
   Ember design system. Tokens are the same set the dashboards use
   (api/static/ngbot.css); inlined here because the landing site is a
   separate Cloudflare assets worker and cannot import across repos.
   Component styles ported from the handoff ui_kits/marketing/site.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  /* Brand — Ember */
  --ng-gold:#FDB022; --ng-orange:#FF6B00; --ng-orange-2:#FF8A33;
  --ng-ember:#FF4D2E; --ng-ember-dark:#E85D00;
  --ng-grad: linear-gradient(135deg, #FDB022 0%, #FF6B00 50%, #FF4D2E 100%);
  --ng-grad-soft: linear-gradient(135deg, rgba(253,176,34,.14), rgba(255,77,46,.10));

  /* Surfaces */
  --ng-bg:#0A0A0E; --ng-bg-2:#0F0F16; --ng-surface:#14141C;
  --ng-surface-2:#1A1A24; --ng-elevated:#20202C; --ng-nav:rgba(10,10,14,.72);

  /* Text */
  --ng-tx:#F4F4F8; --ng-tx-2:#A7ADBA; --ng-tx-3:#7D8494; --ng-tx-4:#565C6A;

  /* Accents */
  --ng-sky:#38BDF8; --ng-green:#34D399; --ng-red:#F87171;
  --ng-violet:#A78BFA; --ng-yellow:#FBBF24;

  /* Lines & elevation */
  --ng-line:rgba(255,255,255,.07); --ng-line-2:rgba(255,255,255,.13); --ng-line-3:rgba(255,255,255,.20);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.4);
  --sh-lg:0 24px 60px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  --sh-glow:0 0 0 1px rgba(255,107,0,.14), 0 18px 60px rgba(255,107,0,.14);

  /* Type */
  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-ar:'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Spacing / radii / motion */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --ease-out:cubic-bezier(.16, 1, .3, 1);
  --dur-quick:160ms; --dur-med:240ms; --dur-slow:400ms;

  --maxw:1180px; --nav-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--ng-bg);color:var(--ng-tx-2);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","cv11"}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;color:var(--ng-tx);line-height:1.1;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--ng-orange-2);outline-offset:3px;border-radius:4px}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ambient background — orbs + masked grid, never a flat dark wall */
.canvas{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb.a{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(255,107,0,.5),transparent 68%);animation:drift 26s ease-in-out infinite}
.orb.b{width:460px;height:460px;top:10%;right:-160px;background:radial-gradient(circle,rgba(253,176,34,.4),transparent 68%);animation:drift 32s ease-in-out infinite reverse}
.orb.c{width:600px;height:600px;bottom:-260px;left:30%;background:radial-gradient(circle,rgba(255,77,46,.28),transparent 70%);animation:drift 38s ease-in-out infinite}
.grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(var(--ng-line) 1px,transparent 1px),linear-gradient(90deg,var(--ng-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000 30%,transparent 75%);opacity:.5}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Nav */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:var(--ng-nav);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--ng-line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ng-tx)}
.brand img{width:34px;height:34px;filter:drop-shadow(0 3px 10px rgba(255,107,0,.4))}
.brand .tld{color:var(--ng-orange)}
.nav-links{display:flex;align-items:center;gap:var(--s6)}
.nav-links a{color:var(--ng-tx-2);font-size:14.5px;font-weight:500;transition:color var(--dur-quick)}
.nav-links a:hover{color:var(--ng-tx)}
.nav-cta{display:flex;align-items:center;gap:var(--s3)}
@media (max-width:800px){.nav-links{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:var(--r-pill);white-space:nowrap;
  transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick),background var(--dur-quick),border-color var(--dur-quick)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ng-grad);color:#1a0f00;box-shadow:0 6px 20px rgba(255,107,0,.28)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(255,107,0,.4)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ng-tx);border:1px solid var(--ng-line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--ng-tx-3)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:15px 30px;font-size:16px}
.dbrand{width:18px;height:18px;fill:currentColor;stroke:none}

/* Sections */
section{position:relative}
.sec{padding:var(--s9) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ng-orange-2);padding:6px 12px;border:1px solid var(--ng-line-2);
  border-radius:var(--r-pill);background:var(--ng-grad-soft)}
.sec-head{max-width:640px;margin:0 auto var(--s7);text-align:center}
.sec-head h2{font-size:clamp(30px,4.2vw,44px);margin:18px 0 14px}
.sec-head p{font-size:17px;color:var(--ng-tx-2)}
.grad-text{background:var(--ng-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Hero */
.hero{padding:var(--s9) 0 var(--s8);text-align:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border:1px solid var(--ng-line-2);
  border-radius:var(--r-pill);background:rgba(255,255,255,.03);font-size:13.5px;color:var(--ng-tx-2);margin-bottom:var(--s6)}
.hero-kicker b{color:var(--ng-tx);font-weight:600}
.hero-kicker .ar{font-family:var(--f-ar);color:var(--ng-orange-2);direction:rtl}
.hero-kicker .pill{background:var(--ng-grad);color:#1a0f00;font-weight:700;font-size:11px;padding:3px 9px;border-radius:var(--r-pill)}
.hero-mascot{width:104px;height:104px;margin:0 auto var(--s5);filter:drop-shadow(0 12px 40px rgba(255,107,0,.4));animation:float 4s ease-in-out infinite}
.hero h1{font-size:clamp(40px,6.5vw,72px);letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--s5)}
.hero-sub{max-width:620px;margin:0 auto var(--s6);font-size:clamp(17px,2.2vw,20px);color:var(--ng-tx-2)}
.hero-actions{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--s5)}
.hero-note{font-size:13.5px;color:var(--ng-tx-3);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{width:15px;height:15px;color:var(--ng-green);stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Discord frame demo */
.frame{max-width:760px;margin:var(--s7) auto 0;border-radius:var(--r-lg);border:1px solid var(--ng-line-2);
  background:linear-gradient(180deg,#1e1f26,#17181e);box-shadow:var(--sh-lg);overflow:hidden;text-align:left}
.frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#1b1c22;border-bottom:1px solid var(--ng-line)}
.frame-bar .dot{width:11px;height:11px;border-radius:50%}
.frame-chan{margin-left:12px;color:var(--ng-tx-3);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px}
.frame-body{padding:20px 22px;display:flex;flex-direction:column;gap:18px;background:#141519}
.msg{display:flex;gap:12px;align-items:flex-start}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;font-family:var(--f-display)}
.avatar.user{background:#5865F2}
.avatar.bot{background:#1b1c22;padding:6px;box-shadow:0 0 0 2px rgba(255,107,0,.3)}
.msg-body{min-width:0;flex:1}
.msg-name{font-size:14.5px;font-weight:600;color:var(--ng-tx);display:flex;align-items:center;gap:8px;margin-bottom:3px}
.msg-name.rtl{direction:rtl;font-family:var(--f-ar);justify-content:flex-start}
.bot-badge{background:var(--ng-grad);color:#1a0f00;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em}
.msg-time{color:var(--ng-tx-3);font-size:12px;font-weight:400}
.msg-text{font-size:14.5px;color:#cdd0d8;line-height:1.55}
.msg-text.rtl{direction:rtl;text-align:right;font-family:var(--f-ar)}
.suggestion{margin-top:8px;padding:10px 14px;background:rgba(255,107,0,.08);border-left:3px solid var(--ng-orange);
  border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ng-tx-2)}
.suggestion b{color:var(--ng-orange-2)}

/* Stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6);text-align:center}
.stat{background:var(--ng-surface);border:1px solid var(--ng-line);border-radius:var(--r);padding:var(--s5) var(--s3);box-shadow:var(--sh-sm)}
.stat .n{font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--ng-tx);letter-spacing:-.02em}
.stat .n .grad{background:var(--ng-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{font-size:12.5px;color:var(--ng-tx-3);text-transform:uppercase;letter-spacing:.06em;font-weight:500;margin-top:6px}
@media (max-width:700px){.stat-row{grid-template-columns:repeat(2,1fr)}}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.feat{background:var(--ng-surface);border:1px solid var(--ng-line);border-radius:var(--r);padding:var(--s5);
  transition:border-color var(--dur-med),transform var(--dur-med) var(--ease-out);position:relative;overflow:hidden}
.feat:hover{border-color:var(--ng-line-2);transform:translateY(-3px)}
.feat.hero-feat{grid-column:span 2;background:linear-gradient(180deg,var(--ng-surface) 0,var(--ng-surface-2) 100%);border-color:rgba(255,107,0,.25)}
.feat-icon{width:44px;height:44px;border-radius:12px;background:var(--ng-grad-soft);border:1px solid var(--ng-line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ng-orange-2);margin-bottom:var(--s4)}
.feat h3{font-size:18px;margin-bottom:6px}
.feat p{font-size:14.5px;color:var(--ng-tx-2);margin:0}
.feat .ar{font-family:var(--f-ar);color:var(--ng-orange-2);font-size:14px;margin-top:6px;direction:rtl}
.feat ul{list-style:none;margin-top:10px;padding:0}
.feat ul li{font-size:13.5px;color:var(--ng-tx-3);padding-left:18px;position:relative;margin-bottom:4px}
.feat ul li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--ng-orange);border-radius:50%}
.feat .tag{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;color:var(--ng-orange-2);
  text-transform:uppercase;letter-spacing:.08em;background:var(--ng-grad-soft);padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--ng-line-2)}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)} .feat.hero-feat{grid-column:span 2}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr} .feat.hero-feat{grid-column:span 1}}

/* Speed & cost */
.perf{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;margin-top:var(--s6)}
.perf-copy h3{font-size:18px;margin-bottom:8px}
.perf-copy ul{list-style:none;margin-top:14px}
.perf-copy li{padding:8px 0;border-top:1px solid var(--ng-line);color:var(--ng-tx-2);font-size:14.5px;display:flex;align-items:center;gap:10px}
.perf-copy li:first-child{border-top:none}
.perf-copy .icon{width:16px;height:16px;color:var(--ng-green)}
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.perf-cell{background:var(--ng-surface);border:1px solid var(--ng-line);border-radius:var(--r);padding:var(--s5)}
.perf-cell .lbl{font-size:11px;color:var(--ng-tx-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:8px}
.perf-cell .val{font-family:var(--f-display);font-size:26px;font-weight:700;color:var(--ng-tx);letter-spacing:-.02em}
.perf-cell .val .grad{background:var(--ng-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.perf-cell .sub{font-size:12.5px;color:var(--ng-tx-3);margin-top:4px}
@media (max-width:800px){.perf{grid-template-columns:1fr}}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
.pcard{background:var(--ng-surface);border:1px solid var(--ng-line);border-radius:var(--r);padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;position:relative;box-shadow:var(--sh-sm)}
.pcard.pop{border-color:var(--ng-orange);box-shadow:var(--sh-glow)}
.pcard .badge{position:absolute;top:-12px;left:24px;background:var(--ng-grad);color:#1a0f00;font-size:11px;
  font-weight:700;padding:4px 12px;border-radius:var(--r-pill);letter-spacing:.03em}
.pcard h3{font-size:22px;margin-bottom:6px}
.pcard .desc{font-size:14px;color:var(--ng-tx-3);margin-bottom:var(--s5);min-height:20px}
.pcard .amt{font-family:var(--f-display);font-size:44px;font-weight:700;color:var(--ng-tx);line-height:1;letter-spacing:-.02em;margin-bottom:6px}
.pcard .amt small{font-size:15px;font-weight:500;color:var(--ng-tx-3);letter-spacing:0}
.pcard .amt .grad{background:var(--ng-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pcard ul{list-style:none;margin:var(--s5) 0;padding:0;flex:1}
.pcard ul li{position:relative;padding:6px 0 6px 26px;font-size:14.5px;color:var(--ng-tx-2)}
.pcard ul li::before{content:'';position:absolute;left:0;top:12px;width:14px;height:14px;background:var(--ng-grad);
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.285 6.708l-11.4 11.4-5.484-5.484 1.415-1.415 4.069 4.07 9.985-9.986z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.285 6.708l-11.4 11.4-5.484-5.484 1.415-1.415 4.069 4.07 9.985-9.986z"/></svg>');
  mask-size:contain;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}
.pcard .btn{margin-top:8px;width:100%}
.lifetime-note{text-align:center;margin-top:var(--s5);color:var(--ng-tx-3);font-size:14px}
.lifetime-note b{color:var(--ng-tx)}
.lifetime-note a{color:var(--ng-orange-2);border-bottom:1px solid rgba(255,138,51,.3)}

/* Keep the three plans on ONE row far longer — the old 900px breakpoint stacked
   them into a single tall column on ordinary laptop/split-screen widths, which
   is the "long card". Below 900px the cards tighten instead of collapsing;
   only real phones get the stack. */
@media (max-width:1040px){
  .price-grid{gap:var(--s3)}
  .pcard{padding:var(--s5) var(--s4)}
  .pcard .amt{font-size:36px}
  .pcard h3{font-size:19px}
  .pcard ul li{font-size:13.5px;padding-inline-start:24px}
}
@media (max-width:820px){
  .pcard{padding:var(--s4) var(--s3)}
  .pcard .amt{font-size:30px}
  .pcard .amt small{font-size:13px}
  .pcard .desc{font-size:13px}
  .pcard ul li{font-size:12.5px}
  .pcard .badge{font-size:10px;padding:3px 9px;inset-inline-start:12px}
}
@media (max-width:600px){
  .price-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
  .pcard{padding:var(--s6) var(--s5)}
  .pcard .amt{font-size:44px}
}

/* Rows line up across cards regardless of copy length: reserve the description
   two lines so price, list and CTA sit on the same baseline in all three. */
.pcard h3{min-height:26px}
.pcard .desc{min-height:42px;display:flex;align-items:flex-start}
.pcard .amt{min-height:46px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

/* FAQ */
.faq{max-width:720px;margin:var(--s6) auto 0}
.faq-item{border-top:1px solid var(--ng-line);padding:var(--s5) 0}
.faq-item:last-child{border-bottom:1px solid var(--ng-line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-size:17px;
  font-weight:600;color:var(--ng-tx);cursor:pointer;list-style:none;padding-right:8px;gap:16px}
.faq-q::-webkit-details-marker{display:none}
.faq-q .plus{width:22px;height:22px;color:var(--ng-orange);transition:transform var(--dur-med) var(--ease-out);flex:none}
.faq-item[open] .faq-q .plus{transform:rotate(45deg)}
.faq-a{padding-top:12px;color:var(--ng-tx-2);font-size:15px;line-height:1.65}

/* CTA */
.cta{text-align:center;padding:var(--s9) 0}
.cta img{width:88px;margin:0 auto var(--s5);filter:drop-shadow(0 12px 40px rgba(255,107,0,.4))}
.cta h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em;margin-bottom:var(--s4)}
.cta p{color:var(--ng-tx-2);margin-bottom:var(--s5);font-size:17px}

/* Footer */
.foot{border-top:1px solid var(--ng-line);padding:var(--s6) 0;color:var(--ng-tx-3);font-size:13.5px}
.foot .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4)}
.foot .links{display:flex;gap:var(--s5);flex-wrap:wrap}
.foot a{color:var(--ng-tx-3);transition:color var(--dur-quick)}
.foot a:hover{color:var(--ng-orange-2)}
.foot .brand{font-size:15px}

/* ══ Decorative surfaces ══════════════════════════════════════════════
   Built only from tokens: ember radials, the same 64px grid as the page
   canvas, and a dot mesh. No imagery — the brand is CSS/SVG only.        */

/* Reusable ember mesh: faint dot field that fades out from its origin. */
.mesh{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,138,51,.16) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0,#000,transparent 72%)}

/* Pricing gets its own stage: an ember aurora bloom behind the cards, a
   masked grid for depth, and a hairline that reads as a horizon. */
.sec-pricing{position:relative;isolation:isolate;overflow:hidden}
.sec-pricing::before{content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(255,107,0,.16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 85%, rgba(253,176,34,.10), transparent 70%),
    radial-gradient(ellipse 40% 40% at 88% 80%, rgba(255,77,46,.10), transparent 70%)}
.sec-pricing::after{content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--ng-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ng-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 40%,#000 20%,transparent 78%)}
.sec-pricing .container{position:relative;z-index:1}

/* The popular plan carries a slowly rotating ember ring. The card body sits on
   top, so only a 1px rim of the gradient shows. */
.pcard.pop{position:relative;background-clip:padding-box}
.pcard.pop::before{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 0deg,var(--ng-gold),var(--ng-ember),var(--ng-orange),var(--ng-gold));
  animation:spin 8s linear infinite;opacity:.85}
.pcard.pop::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--ng-surface)}
@keyframes spin{to{transform:rotate(1turn)}}

/* Feature cards bloom from the icon corner on hover. */
.feat::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--dur-med);
  background:radial-gradient(220px 160px at var(--bloom-x,12%) 0%, rgba(255,107,0,.14), transparent 70%)}
.feat:hover::after{opacity:1}
[dir="rtl"] .feat{--bloom-x:88%}

/* Stat tiles get a lit top edge. */
.stat{position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,138,51,.55),transparent)}

/* The Discord demo floats gently, like the mascot. */
.frame{animation:float 7s ease-in-out infinite}

/* ══ Scroll reveal ════════════════════════════════════════════════════
   Elements fade up as they enter. Staggered by --i within a group. The
   .in class is added by the observer; without JS everything stays visible
   because .reveal only hides once JS marks the document ready.          */
.js-reveal .reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.js-reveal .reveal.in{opacity:1;transform:none}

/* Language switcher */
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--ng-line-2);background:rgba(255,255,255,.04);color:var(--ng-tx-2);
  font-size:13.5px;font-weight:600;font-family:var(--f-body);
  transition:color var(--dur-quick),border-color var(--dur-quick),background var(--dur-quick)}
.lang-btn:hover{color:var(--ng-tx);border-color:var(--ng-tx-3);background:rgba(255,255,255,.08)}
.lang-btn .icon{color:var(--ng-orange-2)}
.lang-btn span{min-width:18px;text-align:center;font-family:var(--f-mono);font-size:12.5px}

/* ── RTL alignment ────────────────────────────────────────────────────
   The kit was authored LTR and pins several things with physical left/right.
   In Arabic those land on the wrong edge: list bullets and pricing checkmarks
   detach from their text, the "most popular" badge and feature tag flip to the
   wrong corner, and the suggestion rule sits on the trailing side. These
   restate them as logical properties so both directions are correct.        */
.feat ul li{padding-left:0;padding-inline-start:18px}
.feat ul li::before{left:auto;inset-inline-start:0}
.feat .tag{right:auto;inset-inline-end:14px}
.pcard ul li{padding-left:0;padding-inline-start:26px}
.pcard ul li::before{left:auto;inset-inline-start:0}
.pcard .badge{left:auto;inset-inline-start:24px}
.faq-q{padding-right:0;padding-inline-end:8px}
.frame-chan{margin-left:0;margin-inline-start:12px}
.hero-kicker{padding:7px 8px;padding-inline-start:14px}

/* The suggestion callout's accent rule must hug the reading edge. */
.suggestion{border-left:0;border-inline-start:3px solid var(--ng-orange);
  border-radius:0;border-start-end-radius:8px;border-end-end-radius:8px}

/* "ngbot.ai" is a Latin wordmark. Inside an RTL document the .tld span is
   reordered and it renders as "ai. ngbot" — pin the brand to LTR. */
.brand{direction:ltr}

/* Arabic sets its own face; keep numerals and code LTR inside RTL text. */
[dir="rtl"] body,[dir="rtl"] .hero h1,[dir="rtl"] .sec-head h2,[dir="rtl"] .cta h2,
[dir="rtl"] .feat h3,[dir="rtl"] .pcard h3,[dir="rtl"] .faq-q{font-family:var(--f-ar)}
[dir="rtl"] .stat .n,[dir="rtl"] .pcard .amt,[dir="rtl"] .perf-cell .val{font-family:var(--f-display)}
[dir="rtl"] code,[dir="rtl"] .msg-time{direction:ltr;unicode-bidi:isolate}
/* The Discord demo is a screenshot of a real client — it keeps its own
   direction per message and must not be flipped by the page. */
[dir="rtl"] .frame{direction:ltr}
[dir="rtl"] .frame .msg-name.rtl,[dir="rtl"] .frame .msg-text.rtl{direction:rtl;text-align:right}

/* Footer + nav stay edge-anchored in both directions (flex handles it), but the
   footer's three groups need to not collide when Arabic runs longer. */
@media (max-width:760px){
  .foot .container{flex-direction:column;align-items:flex-start;text-align:start}
  .hero-note{gap:10px}
}

/* Reduced motion — kill drift/float, keep layout identical */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}