:root{
  --ink:#0e1330; --ink2:#3a4266; --muted:#6b7394; --line:#e7e9f5;
  --bg:#f6f7fc; --card:#fff; --brand:#4f46e5; --brand2:#22b8cf;
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
  --grad:linear-gradient(135deg,#4f46e5,#22b8cf);
  --grad-dark:linear-gradient(135deg,#111536,#232a5c 55%,#2b3a86);
  --shadow:0 10px 30px rgba(20,25,60,.08); --shadow-sm:0 4px 14px rgba(20,25,60,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[dir="rtl"] body,[dir="rtl"]{font-family:"Segoe UI","Tahoma",Arial,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{line-height:1.22;margin:0}
p{margin:.55em 0}
a{color:var(--brand);text-decoration:none}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.eyebrow.light{color:#8fe3f0}
[dir="rtl"] .eyebrow{letter-spacing:normal}

/* ---------- LOGIN ---------- */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--grad-dark);padding:20px}
.login-card{background:#fff;border-radius:20px;padding:34px 30px;width:100%;max-width:390px;box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center}
.login-logo{font-size:30px;font-weight:900;letter-spacing:-1px}.login-logo b{color:var(--brand)}
.login-sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.lang-switch{display:inline-flex;gap:4px;background:#eef0f8;border-radius:100px;padding:4px;margin:16px auto}
.lang-switch a{padding:4px 13px;border-radius:100px;font-size:12.5px;font-weight:800;color:var(--muted)}
.lang-switch a.on{background:var(--brand);color:#fff}
.login-card form{text-align:left;margin-top:8px}
[dir="rtl"] .login-card form{text-align:right}
.login-card label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin:12px 0 5px}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:#fbfbfe}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.login-card button{width:100%;margin-top:18px;padding:13px;border:none;border-radius:12px;background:var(--grad);
  color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.login-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13px;padding:9px 12px;border-radius:10px;margin-top:6px}
.login-foot{margin-top:16px;font-size:11.5px;color:var(--muted)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,247,252,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navflex{display:flex;align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px;color:var(--ink)}.logo b{color:var(--brand)}
.navlinks{display:flex;gap:3px;flex:1;flex-wrap:wrap;justify-content:center}
.navlinks .link{display:inline-flex;align-items:center;gap:5px;color:var(--ink2);font-size:12.5px;font-weight:600;
  padding:6px 9px;border-radius:9px}
.navlinks .link:hover{background:#eef0ff;color:var(--brand)}
.navlinks .link.active{background:var(--brand);color:#fff}
.navlinks .lnum{font-size:10px;opacity:.6;font-weight:800}
.navtools{display:flex;align-items:center;gap:8px}
.lang-switch.sm{margin:0;padding:3px}.lang-switch.sm a{padding:3px 10px;font-size:11.5px}
.logout{font-size:12.5px;font-weight:700;color:var(--red);border:1px solid #f1d5d5;padding:5px 11px;border-radius:9px}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
@media(max-width:900px){
  .burger{display:block;margin-left:auto}[dir="rtl"] .burger{margin-left:0;margin-right:auto}
  .navlinks{display:none;width:100%;flex-direction:column;justify-content:flex-start}
  body.nav-open .navlinks{display:flex}
  .navlinks .link{justify-content:flex-start}
}

/* ---------- HERO ---------- */
.hero{background:var(--grad-dark);color:#fff;padding:58px 0 66px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(600px 300px at 80% -10%,rgba(34,184,207,.35),transparent 60%),
  radial-gradient(500px 320px at 5% 120%,rgba(109,92,240,.4),transparent 60%)}
.hero .wrap{position:relative;z-index:2}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:700;color:#eaf1ff}
.hero h1{font-size:42px;font-weight:900;letter-spacing:-1px;margin:6px 0 10px}
.hero h1 .g{background:linear-gradient(90deg,#a5b4ff,#7ee7f5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:18px;color:#c9d2f5;max-width:730px}
.hero .tag{margin-top:8px;font-size:14px;color:#93e0ee;font-weight:700}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.hstat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:14px}
.hstat b{display:block;font-size:22px;font-weight:900}.hstat span{font-size:12px;color:#b7c1e8}
@media(max-width:720px){.hero h1{font-size:31px}.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- PAGE HEAD ---------- */
.page-head{background:linear-gradient(180deg,#eef1fb,#f6f7fc);padding:40px 0 8px;border-bottom:1px solid var(--line)}
.page-head.green-head{background:linear-gradient(180deg,#e8f7ef,#f6f7fc)}
.page-head.ai-head{background:linear-gradient(180deg,#ecebfe,#f6f7fc)}
.ph-title{font-size:34px;font-weight:900;letter-spacing:-.7px;margin:8px 0 6px}
.ph-lead{color:var(--ink2);font-size:16px;max-width:800px}
@media(max-width:720px){.ph-title{font-size:26px}}

/* ---------- SECTIONS / CARDS ---------- */
section.wrap,section>.wrap{padding-top:0}
section.wrap{padding:44px 22px}
.sec-h{margin:6px 0 22px}
.sec-h h2{font-size:27px;font-weight:900;letter-spacing:-.5px;margin-top:6px}
.lead{color:var(--muted);font-size:15.5px;max-width:780px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.card h3{font-size:16.5px;font-weight:800;margin-bottom:5px}
.card p{font-size:14px;color:var(--ink2);margin:0}
.card.lift{transition:transform .15s,box-shadow .15s}.card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;font-size:20px;
  background:linear-gradient(135deg,#eef0ff,#e6f7fb)}
.col-h{font-size:17px;margin-bottom:12px}
.prob{border-left:4px solid var(--red);margin-bottom:12px}
.prob.blue{border-left-color:var(--brand)}
[dir="rtl"] .prob{border-left:none;border-right:4px solid var(--red)}
[dir="rtl"] .prob.blue{border-right-color:var(--brand)}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:21px}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:10px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.step .n{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-weight:900;display:grid;place-items:center;font-size:14px;margin-bottom:10px}
.step h4{font-size:14px;margin-bottom:3px}.step p{font-size:12.6px;color:var(--muted);margin:0}
.step.return{background:var(--grad-dark);color:#fff;border:none}
.step.return .n{background:#fff;color:var(--brand)}.step.return p{color:#c4cdf0}

/* ---------- ARCHITECTURE ---------- */
.arch{display:grid;grid-template-columns:1fr 290px 1fr;gap:16px;align-items:center}
@media(max-width:820px){.arch{grid-template-columns:1fr}}
.core{background:var(--grad-dark);color:#fff;border-radius:20px;padding:26px 20px;text-align:center;box-shadow:var(--shadow)}
.core .badge{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8fe3f0}
.core h3{font-size:19px;margin:6px 0}.core p{font-size:12.5px;color:#c4cdf0}
.comp{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.comp .ci{flex:none;width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#eef0ff,#e6f7fb);display:grid;place-items:center;font-size:18px}
.comp h4{font-size:14px;margin-bottom:2px}.comp p{font-size:12.5px;color:var(--muted);margin:0}

/* ---------- TIERS (AI layer) ---------- */
.tier{border-radius:18px;padding:24px;color:#fff}
.tier.p{background:linear-gradient(135deg,#4338ca,#6d5cf0)}
.tier.r{background:linear-gradient(135deg,#0e7490,#22b8cf)}
.tier h3{font-size:19px;display:flex;align-items:center;gap:9px}
.tier .role{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.tier .tsub{font-size:13.5px;opacity:.92;margin-top:4px}
.tier ul{margin:12px 0 0;padding:0;list-style:none}
.tier li{font-size:13.6px;padding:7px 0 7px 22px;position:relative;border-top:1px solid rgba(255,255,255,.16)}
.tier li:before{content:"→";position:absolute;left:0;opacity:.8}
[dir="rtl"] .tier li{padding:7px 22px 7px 0}[dir="rtl"] .tier li:before{left:auto;right:0;content:"←"}
.callout{display:flex;gap:14px;align-items:flex-start;background:#eef6ff;border:1px solid #cfe0ff;border-radius:14px;padding:18px}
.callout-ic{font-size:24px}

/* ---------- CHAT PROOF ---------- */
.proof-wrap{margin-top:34px;display:grid;gap:18px}
.phone{max-width:360px;margin:0 auto;background:#0e1330;border-radius:24px;padding:16px;box-shadow:var(--shadow);border:1px solid #262c55}
.chead{display:flex;align-items:center;gap:10px;color:#fff;padding:4px 6px 12px;border-bottom:1px solid #262c55}
.avat{width:34px;height:34px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-size:17px}
.chead b{font-size:13px}.chead span{font-size:11px;color:#5fd39a}
.msg{margin:11px 4px;font-size:12.8px;padding:11px 13px;border-radius:14px;max-width:90%}
.msg.bot{background:#1a2048;color:#dfe4ff}
.msg.user{background:var(--grad);color:#fff;margin-left:auto;text-align:right}
[dir="rtl"] .msg.user{margin-left:0;margin-right:auto;text-align:right}
.mealcard{background:#141a3f;border:1px solid #2b326a;border-radius:12px;padding:11px;margin:10px 4px;color:#fff}
.mealcard .fire{background:#f59e0b;color:#111;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px}
.mealcard h5{font-size:12.5px;margin:6px 0 3px}.mealcard p{font-size:11.2px;color:#aab2e0;margin:0}
.mealcard .price{color:#5fd39a;font-weight:800;font-size:13.5px;margin-top:6px}
.mealcard .strike{color:#8a93c0;text-decoration:line-through;font-weight:600;font-size:11px;margin-left:6px}
.atc{color:#5fd39a}

/* ---------- AI MODELS / CALC ---------- */
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.calc-head h2{font-size:20px}.calc-head p{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:720px){.calc-inputs{grid-template-columns:1fr}}
.calc-inputs label{font-size:12.5px;font-weight:700;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.calc-inputs input{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-weight:700;background:#fbfbfe}
.calc-inputs input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.calc-hint{font-size:12.5px;color:var(--muted);margin-top:10px}
.tbl-scroll{overflow-x:auto;border-radius:14px}
.tbl{width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--shadow-sm);font-size:13.4px;min-width:720px}
.tbl th,.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right}
.tbl th{background:#f0f2fb;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.tbl tr:last-child td{border-bottom:none}
.tbl .best{background:#eefdf4}
.tag-best{background:var(--green);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:100px;margin-left:6px}
.mnote{font-size:11.5px;color:var(--muted);margin-top:4px;max-width:260px}
.prov{font-size:11px;font-weight:800;padding:2px 8px;border-radius:100px}
.prov-google{background:#e8f0fe;color:#1a73e8}.prov-openai{background:#e7f7ef;color:#0a8f5b}.prov-anthropic{background:#f3ead9;color:#a6651f}
.bar{height:8px;border-radius:100px;background:#e7e9f5;overflow:hidden;min-width:70px;display:inline-block;vertical-align:middle}
.bar>i{display:block;height:100%;background:var(--grad)}
.arn{font-size:11px;color:var(--muted);margin-left:6px}
.cpc,.cpm{font-weight:800;color:var(--brand);white-space:nowrap}
.src-line{font-size:11.5px;color:var(--muted);margin-top:10px}
.rec{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:6px}
@media(max-width:820px){.rec{grid-template-columns:1fr}}
.pickcard{background:var(--grad-dark);color:#fff;border-radius:18px;padding:24px}
.pickcard .role{font-size:12px;font-weight:800;letter-spacing:.1em;color:#8fe3f0;text-transform:uppercase}
.pickcard h3{font-size:22px;margin:8px 0}.pickcard p{font-size:14px;color:#cdd5f7}
.pick-route{color:#8fe3f0;font-weight:700;margin-top:10px}.pick-sm{font-size:13.3px}
.costbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.costbox .big{font-size:33px;font-weight:900;color:var(--brand);letter-spacing:-1px}
.cb-sub{font-size:13.3px;color:var(--ink2);margin:2px 0 0}
.calc-mono{font-size:12.5px;color:var(--ink2);background:#f6f7fc;border-radius:10px;padding:12px;margin-top:10px;font-family:ui-monospace,Menlo,monospace;line-height:1.7}
.cb-note{font-size:12.8px;color:var(--ink2);margin-top:12px}
.scenario{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm);margin-top:18px}
.scenario h3{font-size:18px}.scenario>p{font-size:13.5px;color:var(--muted)}
.scen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:720px){.scen-grid{grid-template-columns:1fr 1fr}}
.scen{background:#f6f7fc;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.scen.hot{background:#eefdf4;border-color:#bbf7d0}
.scen span{font-size:12px;color:var(--muted);display:block}.scen b{font-size:16px}
.scen-note{font-size:12.5px;color:var(--muted);margin-top:12px}

/* ---------- PRICING ---------- */
.ptiers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.ptiers{grid-template-columns:1fr}}
.ptier{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;box-shadow:var(--shadow-sm)}
.ptier.pro{border:2px solid var(--brand);position:relative}
.ptier .name{font-size:16px;font-weight:900}.ptier .name.accent{color:var(--brand)}
.ptier .price{font-size:29px;font-weight:900;margin:6px 0}.ptier .price small{font-size:14px;color:var(--muted);font-weight:600}
.ptier ul{margin:12px 0 0;padding:0;list-style:none}
.ptier li{font-size:13.3px;padding:6px 0 6px 22px;position:relative;color:var(--ink2)}
.ptier li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
[dir="rtl"] .ptier li{padding:6px 22px 6px 0}[dir="rtl"] .ptier li:before{left:auto;right:0}
.ptier li.no{color:var(--muted)}.ptier li.no:before{content:"✕";color:var(--red)}
.ptier-foot{font-size:12.3px;color:var(--muted);margin-top:10px}
.ribbon{position:absolute;top:-11px;right:16px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:4px 11px;border-radius:100px}
[dir="rtl"] .ribbon{right:auto;left:16px}
.rev-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:820px){.rev-flow{grid-template-columns:1fr 1fr}}
.rev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.rev .num{font-size:12px;font-weight:800;color:var(--brand)}.rev h4{font-size:13.3px;margin:5px 0 3px}.rev p{font-size:12px;color:var(--muted);margin:0}

/* ---------- ASSESS / GAPS ---------- */
.assess{border-top:4px solid var(--brand)}
.assess.dev{border-top-color:#0ea5e9}.assess.ai{border-top-color:#6d5cf0}.assess.des{border-top-color:#ec4899}.assess.po{border-top-color:#4f46e5}
.assess .lens{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.assess h3{margin:4px 0 6px}
.gaps-card{margin-top:16px}
.gap{display:flex;gap:10px;align-items:flex-start;font-size:13.6px;color:var(--ink2);padding:9px 0;border-bottom:1px dashed var(--line)}
.gap.last{border-bottom:none}
.gap .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--amber);margin-top:7px}
.gap .dot.green{background:var(--green)}

/* ---------- NOTES ---------- */
.note{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid var(--amber);border-radius:12px;padding:15px 17px}
.note b{color:#b45309}
[dir="rtl"] .note{border-left:none;border-right:4px solid var(--amber)}
.note.blue{background:#eff6ff;border-color:#bfdbfe;border-left-color:var(--brand)}
.note.blue b{color:var(--brand)}
[dir="rtl"] .note.blue{border-right-color:var(--brand)}

/* ---------- PAGER / FOOTER ---------- */
.pager{display:flex;justify-content:space-between;gap:12px;padding:10px 22px 30px;max-width:1080px;margin:0 auto}
.pg-btn{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow-sm);min-width:150px}
.pg-btn span{font-size:11px;color:var(--muted);font-weight:700}.pg-btn b{font-size:14px;color:var(--ink)}
.pg-btn.next{text-align:right;align-items:flex-end}
[dir="rtl"] .pg-btn.next{text-align:left;align-items:flex-start}
[dir="rtl"] .pg-btn.prev{text-align:right;align-items:flex-end}
.foot{background:var(--grad-dark);color:#c4cdf0;padding:30px 0;text-align:center;font-size:13px}
.foot b{color:#fff}
