/* =====================================================================
   IndexInstantly — theme.css  (marketing / public pages)
   Shared design system. All classes prefixed `ii-`.
   ===================================================================== */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  --ii-navy-900:#070b1f;--ii-navy-800:#0b1437;--ii-navy-700:#121c4a;
  --ii-ink:#0f172a;--ii-slate:#475569;--ii-muted:#94a3b8;
  --ii-blue:#2f6bff;--ii-blue-bright:#4f8bff;--ii-violet:#7c3aed;--ii-cyan:#22d3ee;
  --ii-bg:#f5f7fc;--ii-bg-2:#eef2fb;--ii-card:#fff;--ii-border:#e6ebf5;--ii-border-dark:rgba(255,255,255,.08);
  --ii-grad:linear-gradient(120deg,#2f6bff 0%,#5b6bff 45%,#7c3aed 100%);
  --ii-grad-soft:linear-gradient(120deg,rgba(47,107,255,.12),rgba(124,58,237,.12));
  --ii-shadow-sm:0 2px 8px rgba(15,23,42,.06);--ii-shadow:0 18px 48px -18px rgba(20,32,80,.35);
  --ii-shadow-lg:0 40px 90px -30px rgba(20,32,80,.55);
  --ii-radius:18px;--ii-radius-lg:26px;--ii-maxw:1240px;
  --ii-font-display:'Sora',system-ui,sans-serif;--ii-font-body:'Plus Jakarta Sans',system-ui,sans-serif;
}

/* ----------------------------- BASE ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ii-body{margin:0;font-family:var(--ii-font-body);color:var(--ii-ink);background:var(--ii-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.ii-body h1,.ii-body h2,.ii-body h3,.ii-body h4{font-family:var(--ii-font-display);line-height:1.12;margin:0;letter-spacing:-.02em}
.ii-body p{margin:0}.ii-body a{text-decoration:none;color:inherit}.ii-body ul{margin:0;padding:0;list-style:none}
.ii-body img{max-width:100%;display:block}
.ii-body button{font-family:var(--ii-font-body);cursor:pointer}

/* ----------------------------- HELPERS ----------------------------- */
.ii-container{width:100%;max-width:var(--ii-maxw);margin:0 auto;padding:0 24px}
.ii-section{padding:88px 0}
.ii-section--tight{padding:64px 0}
.ii-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ii-blue)}
.ii-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--ii-grad)}
.ii-section-head{max-width:680px;margin:0 auto 50px;text-align:center}
.ii-section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:14px 0}
.ii-section-head p{color:var(--ii-slate);font-size:1.05rem}

/* Buttons */
.ii-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.ii-btn--primary{color:#fff;background:var(--ii-grad);box-shadow:0 12px 30px -10px rgba(47,107,255,.6)}
.ii-btn--primary:hover{transform:translateY(-2px)}
.ii-btn--ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.ii-btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.ii-btn--light{color:var(--ii-ink);background:#fff;border-color:var(--ii-border)}
.ii-btn--light:hover{transform:translateY(-2px);box-shadow:var(--ii-shadow-sm)}
.ii-btn--lg{padding:17px 34px;font-size:1.05rem}

/* ----------------------------- HEADER ----------------------------- */
.ii-header{position:sticky;top:0;z-index:50;background:rgba(247,249,253,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--ii-border)}
.ii-nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.ii-logo{display:flex;align-items:center;gap:11px;font-family:var(--ii-font-display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.ii-logo-mark{width:36px;height:36px;border-radius:11px;background:var(--ii-grad);display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px -6px rgba(47,107,255,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.ii-logo .ii-logo-i{color:var(--ii-blue)}
.ii-nav-links{display:flex;align-items:center;gap:32px}
.ii-nav-links a{color:var(--ii-slate);font-weight:500;font-size:.96rem;transition:color .15s}
.ii-nav-links a:hover,.ii-nav-links a.ii-current{color:var(--ii-ink)}
.ii-nav-cta{display:flex;align-items:center;gap:12px}
.ii-nav-cta .ii-btn{padding:11px 22px}
.ii-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.ii-burger span{width:24px;height:2px;background:var(--ii-ink);border-radius:2px}

/* ----------------------------- HERO ----------------------------- */
.ii-hero{position:relative;overflow:hidden;color:#fff;padding:110px 0 124px;
  background:radial-gradient(1100px 600px at 78% -10%,rgba(124,58,237,.35),transparent 60%),radial-gradient(900px 500px at 8% 12%,rgba(47,107,255,.4),transparent 55%),linear-gradient(180deg,var(--ii-navy-800),var(--ii-navy-900))}
.ii-hero::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent)}
.ii-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ii-hero-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:.83rem;color:#cdd8f5;margin-bottom:24px}
.ii-hero-pill b{color:#fff;font-weight:600}
.ii-dot{width:8px;height:8px;border-radius:50%;background:var(--ii-cyan);box-shadow:0 0 0 4px rgba(34,211,238,.25)}
.ii-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);font-weight:800;letter-spacing:-.03em}
.ii-hero h1 .ii-accent{background:linear-gradient(120deg,#7fb0ff,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.ii-hero-sub{margin:22px 0 32px;font-size:1.15rem;color:#c3cdec;max-width:540px}
.ii-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.ii-badges{display:flex;flex-wrap:wrap;gap:12px}
.ii-badge{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.86rem;color:#dbe4fb;font-weight:500}
.ii-badge svg{width:16px;height:16px;color:var(--ii-cyan)}
.ii-hero-card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:var(--ii-radius-lg);padding:22px;backdrop-filter:blur(10px);box-shadow:var(--ii-shadow-lg)}
.ii-mock-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ii-mock-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:#fff}
.ii-mock-live{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#86efac}
.ii-mock-live .ii-dot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.2)}
.ii-mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.ii-mock-stat{background:rgba(7,11,31,.5);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.ii-mock-stat .ii-k{font-size:.72rem;color:#9fb0e0;letter-spacing:.04em;text-transform:uppercase}
.ii-mock-stat .ii-v{font-family:var(--ii-font-display);font-weight:700;font-size:1.4rem;margin-top:6px;color:#fff}
.ii-mock-stat .ii-v small{font-size:.8rem;color:#4ade80;font-weight:600;font-family:var(--ii-font-body)}
.ii-mock-chart{height:120px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(7,11,31,.5);padding:14px;display:flex;align-items:flex-end;gap:8px}
.ii-bar{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--ii-blue-bright),rgba(47,107,255,.25))}
.ii-mock-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;background:rgba(7,11,31,.5);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;font-size:.83rem}
.ii-mock-row .ii-ok{color:#4ade80;font-weight:600}.ii-mock-url{color:#c3cdec}
.ii-float{position:absolute;right:-14px;top:30%;background:#fff;color:var(--ii-ink);border-radius:14px;padding:12px 15px;box-shadow:var(--ii-shadow-lg);display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:600}
.ii-float .ii-ico{width:30px;height:30px;border-radius:9px;background:var(--ii-grad-soft);display:grid;place-items:center}
.ii-float .ii-ico svg{width:16px;height:16px;color:var(--ii-blue)}

/* ----------------------------- STRIP ----------------------------- */
.ii-strip{background:var(--ii-navy-900);border-top:1px solid var(--ii-border-dark);padding:26px 0}
.ii-strip-inner{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap;color:#7e8bb5;font-weight:600;font-size:.95rem}

/* ----------------------------- FEATURES ----------------------------- */
.ii-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ii-feature{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius);padding:30px;transition:transform .2s,box-shadow .2s}
.ii-feature:hover{transform:translateY(-4px);box-shadow:var(--ii-shadow)}
.ii-feature-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:var(--ii-grad-soft);color:var(--ii-blue)}
.ii-feature-ico svg{width:24px;height:24px}
.ii-feature h3{font-size:1.18rem;margin-bottom:10px}.ii-feature p{color:var(--ii-slate);font-size:.96rem}

/* ----------------------------- HOW IT WORKS ----------------------------- */
.ii-how{background:var(--ii-bg-2)}
.ii-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ii-step{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius);padding:32px}
.ii-step-num{width:46px;height:46px;border-radius:12px;background:var(--ii-grad);color:#fff;display:grid;place-items:center;font-family:var(--ii-font-display);font-weight:700;font-size:1.2rem;margin-bottom:18px;box-shadow:0 10px 22px -8px rgba(47,107,255,.6)}
.ii-step h3{font-size:1.18rem;margin-bottom:10px}.ii-step p{color:var(--ii-slate);font-size:.96rem}

/* ----------------------------- WHY ----------------------------- */
.ii-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.ii-why-list{display:grid;gap:18px}
.ii-why-item{display:flex;gap:16px;align-items:flex-start}
.ii-check{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--ii-grad-soft);color:var(--ii-blue)}
.ii-check svg{width:20px;height:20px}
.ii-why-item h4{font-family:var(--ii-font-display);font-size:1.05rem;margin-bottom:4px}
.ii-why-item p{color:var(--ii-slate);font-size:.94rem}
.ii-why-panel{background:linear-gradient(160deg,var(--ii-navy-800),var(--ii-navy-900));border-radius:var(--ii-radius-lg);padding:40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--ii-shadow-lg)}
.ii-why-panel::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.5),transparent 70%);top:-80px;right:-60px}
.ii-why-metric{position:relative;z-index:1}
.ii-why-metric+.ii-why-metric{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.ii-why-metric .ii-big{font-family:var(--ii-font-display);font-weight:800;font-size:2.6rem;background:linear-gradient(120deg,#9bbcff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.ii-why-metric p{color:#bcc7ec;font-size:.95rem;margin-top:4px}

/* ----------------------------- API SECTION ----------------------------- */
.ii-api{background:var(--ii-navy-900);color:#fff;position:relative;overflow:hidden}
.ii-api::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 85% 50%,rgba(47,107,255,.25),transparent 60%)}
.ii-api-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center}
.ii-api-grid h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:14px 0 16px}
.ii-api-grid>div>p{color:#bcc7ec;font-size:1.05rem;margin-bottom:26px}
.ii-api-points{display:grid;gap:14px}
.ii-api-points li{display:flex;align-items:center;gap:12px;color:#dbe4fb;font-size:.96rem}
.ii-api-points li svg{width:18px;height:18px;color:var(--ii-cyan);flex:0 0 auto}
.ii-code{background:#060a1c;border:1px solid rgba(255,255,255,.1);border-radius:var(--ii-radius);overflow:hidden;box-shadow:var(--ii-shadow-lg)}
.ii-code-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.ii-code-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.ii-code-bar i:nth-child(1){background:#ff5f57}.ii-code-bar i:nth-child(2){background:#febc2e}.ii-code-bar i:nth-child(3){background:#28c840}
.ii-code-bar span{margin-left:10px;color:#7e8bb5;font-size:.82rem;font-family:ui-monospace,monospace}
.ii-code pre{margin:0;padding:22px;overflow-x:auto;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86rem;line-height:1.8;color:#cdd8f5}
.ii-code .c-key{color:#7fb0ff}.ii-code .c-str{color:#86efac}.ii-code .c-com{color:#5c6788}.ii-code .c-fn{color:#c4b5fd}

/* ----------------------------- PRICING ----------------------------- */
.ii-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ii-plan{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius);padding:32px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.ii-plan:hover{transform:translateY(-4px);box-shadow:var(--ii-shadow)}
.ii-plan--featured{border:1px solid transparent;background:linear-gradient(var(--ii-card),var(--ii-card)) padding-box,var(--ii-grad) border-box;box-shadow:var(--ii-shadow);position:relative}
.ii-plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ii-grad);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.06em;padding:6px 14px;border-radius:999px;text-transform:uppercase}
.ii-plan h3{font-size:1.25rem;margin-bottom:6px}
.ii-plan-desc{color:var(--ii-slate);font-size:.9rem;margin-bottom:18px}
.ii-plan-price{font-family:var(--ii-font-display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;line-height:1}
.ii-plan-price small{font-size:.95rem;color:var(--ii-muted);font-weight:600;font-family:var(--ii-font-body)}
.ii-plan-credits{color:var(--ii-blue);font-weight:600;font-size:.95rem;margin:8px 0 22px}
.ii-plan-list{display:grid;gap:12px;margin-bottom:26px}
.ii-plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--ii-slate)}
.ii-plan-list li svg{width:18px;height:18px;color:var(--ii-blue);flex:0 0 auto;margin-top:2px}
.ii-plan .ii-btn{margin-top:auto;width:100%;border-radius:12px}

/* ----------------------------- SEO EXPLAINER ----------------------------- */
.ii-seo{background:var(--ii-bg-2)}
.ii-seo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ii-seo h2{font-size:clamp(1.8rem,3.2vw,2.4rem);margin:14px 0 18px}
.ii-prose p{color:var(--ii-slate);margin-bottom:16px}
.ii-prose h3{font-family:var(--ii-font-display);font-size:1.15rem;margin:24px 0 8px}
.ii-seo-side{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius);padding:30px;box-shadow:var(--ii-shadow-sm)}
.ii-seo-side h4{font-family:var(--ii-font-display);font-size:1.05rem;margin-bottom:16px}
.ii-seo-side ul{display:grid;gap:13px}
.ii-seo-side li{display:flex;gap:11px;align-items:flex-start;color:var(--ii-slate);font-size:.95rem}
.ii-seo-side li svg{width:18px;height:18px;color:var(--ii-violet);flex:0 0 auto;margin-top:2px}

/* ----------------------------- FAQ ----------------------------- */
.ii-faq-wrap{max-width:820px;margin:0 auto}
.ii-faq{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:14px;margin-bottom:14px;overflow:hidden}
.ii-faq[open]{box-shadow:var(--ii-shadow-sm)}
.ii-faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--ii-font-display);font-weight:600;font-size:1.05rem}
.ii-faq summary::-webkit-details-marker{display:none}
.ii-faq .ii-pm{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--ii-grad-soft);color:var(--ii-blue);display:grid;place-items:center;transition:transform .2s;font-size:1.3rem;line-height:1}
.ii-faq[open] .ii-pm{transform:rotate(45deg)}
.ii-faq-body{padding:0 24px 22px;color:var(--ii-slate);font-size:.97rem}

/* ----------------------------- CTA ----------------------------- */
.ii-cta{padding:30px 0 90px}
.ii-cta-inner{position:relative;overflow:hidden;border-radius:var(--ii-radius-lg);background:radial-gradient(800px 400px at 80% -20%,rgba(124,58,237,.4),transparent 60%),linear-gradient(120deg,var(--ii-navy-800),var(--ii-navy-900));color:#fff;text-align:center;padding:72px 32px;box-shadow:var(--ii-shadow-lg)}
.ii-cta-inner h2{position:relative;z-index:1;font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px}
.ii-cta-inner p{position:relative;z-index:1;color:#c3cdec;font-size:1.1rem;max-width:560px;margin:0 auto 30px}
.ii-cta-actions{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ----------------------------- FOOTER ----------------------------- */
.ii-footer{background:var(--ii-navy-900);color:#a9b4d6;padding:64px 0 30px;border-top:1px solid var(--ii-border-dark)}
.ii-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.ii-footer .ii-logo{color:#fff;margin-bottom:16px}
.ii-footer-about{font-size:.95rem;max-width:300px;color:#8b97c2}
.ii-footer h5{color:#fff;font-family:var(--ii-font-display);font-size:.95rem;margin-bottom:16px}
.ii-footer-col a{display:block;color:#a9b4d6;font-size:.93rem;padding:6px 0}
.ii-footer-col a:hover{color:#fff}
.ii-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem;color:#7e8bb5}
.ii-footer-social{display:flex;gap:10px}
.ii-footer-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#cdd8f5;transition:.18s}
.ii-footer-social a:hover{background:var(--ii-grad);color:#fff;transform:translateY(-2px)}
.ii-footer-social svg{width:17px;height:17px}

/* ----------------------------- LEGAL / DOCS PROSE ----------------------------- */
.ii-legal-hero{background:linear-gradient(180deg,var(--ii-navy-800),var(--ii-navy-900));color:#fff;padding:72px 0}
.ii-legal-hero h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:800}
.ii-legal-hero p{color:#c3cdec;margin-top:12px}
.ii-legal-wrap{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:64px 0 90px;align-items:start}
.ii-legal-toc{position:sticky;top:96px;background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius);padding:20px}
.ii-legal-toc h4{font-family:var(--ii-font-display);font-size:.95rem;margin-bottom:12px}
.ii-legal-toc a{display:block;color:var(--ii-slate);font-size:.9rem;padding:6px 0;border-left:2px solid transparent;padding-left:12px;margin-left:-2px}
.ii-legal-toc a:hover{color:var(--ii-blue);border-left-color:var(--ii-blue)}
.ii-legal-content{max-width:760px}
.ii-legal-content h2{font-size:1.45rem;margin:36px 0 12px;scroll-margin-top:96px}
.ii-legal-content h2:first-child{margin-top:0}
.ii-legal-content p{color:var(--ii-slate);margin-bottom:14px}
.ii-legal-content ul{list-style:disc;padding-left:22px;margin-bottom:16px;color:var(--ii-slate)}
.ii-legal-content li{margin-bottom:8px}
.ii-legal-updated{display:inline-block;font-size:.85rem;color:var(--ii-muted);background:var(--ii-bg-2);padding:6px 14px;border-radius:99px;margin-bottom:8px}

/* ----------------------------- DOCS (API) ----------------------------- */
.ii-docs-wrap{display:grid;grid-template-columns:240px 1fr;gap:44px;padding:48px 0 90px;align-items:start}
.ii-docs-nav{position:sticky;top:96px}
.ii-docs-nav h5{font-family:var(--ii-font-display);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ii-muted);margin:18px 0 8px}
.ii-docs-nav a{display:block;color:var(--ii-slate);font-size:.92rem;padding:7px 12px;border-radius:9px}
.ii-docs-nav a:hover,.ii-docs-nav a.ii-current{background:var(--ii-grad-soft);color:var(--ii-blue)}
.ii-docs-content{max-width:780px}
.ii-docs-content h2{font-size:1.6rem;margin:40px 0 12px;scroll-margin-top:96px}
.ii-docs-content h2:first-child{margin-top:0}
.ii-docs-content h3{font-family:var(--ii-font-display);font-size:1.1rem;margin:24px 0 8px}
.ii-docs-content p{color:var(--ii-slate);margin-bottom:14px}
.ii-method{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,monospace;font-size:.85rem;background:#060a1c;color:#cdd8f5;padding:10px 14px;border-radius:10px;margin:8px 0}
.ii-method b{color:#86efac}
.ii-docs-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.ii-docs-table th,.ii-docs-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ii-border)}
.ii-docs-table th{color:var(--ii-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.ii-docs-table code{font-family:ui-monospace,monospace;font-size:.85rem;color:var(--ii-violet);background:var(--ii-bg-2);padding:2px 6px;border-radius:6px}

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width:960px){
  .ii-section{padding:64px 0}
  .ii-hero{padding:80px 0 88px}
  .ii-hero-grid{grid-template-columns:1fr;gap:48px}
  .ii-hero-sub{max-width:none}
  .ii-features-grid,.ii-steps,.ii-price-grid{grid-template-columns:1fr 1fr}
  .ii-why-grid,.ii-api-grid,.ii-seo-grid{grid-template-columns:1fr;gap:36px}
  .ii-legal-wrap,.ii-docs-wrap{grid-template-columns:1fr}
  .ii-legal-toc,.ii-docs-nav{position:static}
  .ii-footer-grid{grid-template-columns:1fr 1fr}
  .ii-nav-links{display:none}.ii-burger{display:flex}
  /* When open, let the bar grow and stack the dropdown items naturally below
     the logo+hamburger row — no absolute positioning, so nothing overlaps. */
  .ii-nav.ii-open{flex-wrap:wrap;height:auto;row-gap:0;align-items:center}
  .ii-nav.ii-open .ii-logo{order:1}
  .ii-nav.ii-open .ii-burger{order:2;margin-left:auto}
  .ii-nav.ii-open .ii-nav-links{order:3;display:flex;flex-direction:column;gap:0;width:100%;background:#fff;border-top:1px solid var(--ii-border);padding:6px 0 4px}
  .ii-nav.ii-open .ii-nav-links a{padding:12px 2px;border-bottom:1px solid var(--ii-border)}
  .ii-float{display:none}
}
@media (max-width:640px){
  .ii-features-grid,.ii-steps,.ii-price-grid{grid-template-columns:1fr}
  .ii-footer-grid{grid-template-columns:1fr}
  .ii-mock-stats{grid-template-columns:1fr 1fr}
  /* Phones: hide Log in / Start free from the top bar (hamburger stays), and
     show them full-width inside the opened menu. */
  .ii-nav-cta{display:none}
  .ii-nav.ii-open .ii-nav-cta{order:4;display:flex;flex-direction:column;gap:10px;width:100%;padding:12px 0 4px}
  .ii-nav.ii-open .ii-nav-cta .ii-btn{width:100%;text-align:center}
}

/* =====================================================================
   CONTACT FORM + INFO CARDS  (marketing pages)
   ===================================================================== */
.ii-body .ii-form-card{background:var(--ii-card);border:1px solid var(--ii-border);border-radius:var(--ii-radius-lg);padding:34px;box-shadow:var(--ii-shadow)}
.ii-body .ii-field{margin-bottom:18px}
.ii-body .ii-field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ii-body .ii-label{display:block;font-size:.85rem;font-weight:600;color:var(--ii-ink);margin-bottom:7px}
.ii-body .ii-input,.ii-body .ii-select,.ii-body .ii-textarea{width:100%;border:1px solid var(--ii-border);border-radius:11px;padding:13px 14px;font-size:.95rem;font-family:var(--ii-font-body);background:#fbfcff;color:var(--ii-ink);outline:none;transition:border .15s,box-shadow .15s}
.ii-body .ii-input:focus,.ii-body .ii-select:focus,.ii-body .ii-textarea:focus{border-color:var(--ii-blue);box-shadow:0 0 0 4px rgba(47,107,255,.12)}
.ii-body .ii-textarea{min-height:140px;resize:vertical;line-height:1.6}
.ii-body .ii-info-card{background:var(--ii-card)}
@media (max-width:560px){.ii-body .ii-field-2{grid-template-columns:1fr}.ii-body .ii-form-card{padding:24px}}
.ii-body .ii-info-card svg{width:22px;height:22px}

/* Code blocks on the API Docs (marketing) page */
.ii-body .ii-endpoint{margin:8px 0 6px;background:#060a1c;border-radius:12px;padding:16px 18px;color:#cdd8f5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.7;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.ii-body .ii-endpoint .c-m{color:#86efac;font-weight:700}
.ii-body .ii-endpoint .c-u{color:#7fb0ff}