/* ==========================================================================
   HABISA — habisa.ir
   Landing stylesheet. Transcribed from the "Habisa Home v2" design canvas.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:'YekanBakh'; src:url('../fonts/YekanBakh-Light.woff2') format('woff2');    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'YekanBakh'; src:url('../fonts/YekanBakh-Regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'YekanBakh'; src:url('../fonts/YekanBakh-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'YekanBakh'; src:url('../fonts/YekanBakh-Bold.woff2') format('woff2');     font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Design tokens ---------- */
:root {
  --brand-900:#0A1A3D; --brand-800:#0A1F7E; --brand-700:#0B25A8; --brand-600:#2440BE;
  --brand-300:#A8B6E8; --brand-100:#DCE3F7; --brand-50:#EDF0FC;
  --accent-500:#F4AE34; --accent-600:#C98A20; --accent-50:#FEF6E7;
  --n-900:#16202B; --n-700:#33475B; --n-600:#5C6B7A; --n-500:#8794A6;
  --n-300:#C9D6E4; --n-200:#D9E2EC; --n-50:#F5F6FA; --surface:#FFFFFF;
  --ok:#0CA30C; --ok-t:#067806; --warn:#FAB219; --warn-t:#8A6100;
  --sev:#EC835A; --sev-t:#9A4A22; --crit:#D03B3B; --crit-t:#A62222;
  --sh-sm:0 1px 2px rgba(22,32,43,.06); --sh-md:0 2px 8px rgba(22,32,43,.08);
  --sh-lg:0 8px 24px rgba(22,32,43,.10); --sh-ov:0 16px 48px rgba(22,32,43,.18);
  --hi-bg:#FDF0EA;
}
[data-theme="dark"] {
  --brand-900:#0F1520; --brand-800:#16202B; --brand-700:#5B9BD5; --brand-600:#78AFE0;
  --brand-300:#2A4A6C; --brand-100:#1B2C40; --brand-50:#16202B;
  --accent-500:#F4AE34; --accent-600:#F4AE34; --accent-50:#2A2110;
  --n-900:#E8EDF3; --n-700:#A8B6C6; --n-600:#8A9AAC; --n-500:#6E7E90;
  --n-300:#2A3A4C; --n-200:#233343; --n-50:#141C27; --surface:#16202B;
  --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 2px 8px rgba(0,0,0,.45);
  --sh-lg:0 8px 24px rgba(0,0,0,.5); --sh-ov:0 16px 48px rgba(0,0,0,.6);
  --hi-bg:#2A1A12;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--surface); }
body {
  font-family:'YekanBakh', Vazirmatn, Tahoma, sans-serif;
  color:var(--n-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:var(--brand-700); text-decoration:none; }
a:hover { color:var(--accent-600); }
img { max-width:100%; }
::selection { background:var(--brand-100); color:var(--brand-900); }
:focus-visible { outline:2px solid var(--brand-700); outline-offset:2px; border-radius:4px; }

@keyframes hvDrift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes hvPop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition-duration:0.01ms !important; } }

/* ---------- Layout primitives ---------- */
.sec  { max-width:1200px; margin-inline:auto; padding-inline:32px; }
.band { background:var(--n-50); border-block:1px solid var(--n-200); padding-block:64px; }
.pt64 { padding-top:64px; }
.mt64 { margin-top:64px; }

.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:22px; }
.sec-head--lg { margin-bottom:28px; }
.h2 { font-size:21px; line-height:1.5; font-weight:700; margin:0 0 8px; letter-spacing:-0.015em; }
.h2--flat { margin:0; }
.sec-sub { font-size:14px; line-height:1.85; color:var(--n-700); margin:0; }
.sec-sub--w { max-width:52ch; }

.arrow-link { font-size:14px; font-weight:600; color:var(--brand-700); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.flip { transform:scaleX(-1); }

.skip { position:absolute; inset-inline-start:0; top:-9999px; background:var(--brand-700); color:#FFFFFF; padding:10px 16px; border-radius:0 0 8px 0; font-size:14px; z-index:1800; }
.skip:focus { top:0; color:#FFFFFF; }

/* ---------- Header ---------- */
.hdr { position:sticky; top:0; z-index:1200; background:var(--surface); border-bottom:1px solid var(--n-200); }
.hdr-in { max-width:1200px; margin-inline:auto; padding:10px 32px; display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--n-900); flex-shrink:0; }
.brand:hover { color:var(--n-900); }
.brand-logo { width:36px; height:36px; object-fit:cover; border-radius:8px; display:block; }
.brand-name { font-size:18px; font-weight:700; letter-spacing:-0.01em; }

.nav { display:flex; gap:1px; }
.nav a { font-size:14px; font-weight:500; color:var(--n-700); padding:8px 11px; border-radius:8px; white-space:nowrap; transition:all 120ms; }
.nav a:hover { background:var(--n-50); color:var(--brand-700); }

.hdr-act { display:flex; align-items:center; gap:9px; margin-inline-start:auto; }
.icon-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--n-50); border:1px solid var(--n-200); border-radius:8px; cursor:pointer; color:var(--n-700); transition:all 120ms; }
.icon-btn:hover { color:var(--brand-700); border-color:var(--n-300); }
/* The theme button shows the sun while dark and the moon while light.
   Driven by CSS, not the `hidden` attribute — `hidden` does not hide SVG elements. */
.ico-sun { display:none; }
[data-theme="dark"] .ico-sun { display:block; }
[data-theme="dark"] .ico-moon { display:none; }
.link-login { font-size:14px; font-weight:500; color:var(--n-700); padding:8px 10px; white-space:nowrap; }
.link-login:hover { color:var(--brand-700); }

.btn-accent { font-family:inherit; font-size:14px; font-weight:600; color:var(--brand-900); background:var(--accent-500); border:none; border-radius:8px; padding:11px 17px; white-space:nowrap; cursor:pointer; transition:filter 120ms; }
.btn-accent:hover { filter:brightness(1.07); }

.burger { width:36px; height:36px; display:none; align-items:center; justify-content:center; gap:4px; flex-direction:column; background:var(--n-50); border:1px solid var(--n-200); border-radius:8px; cursor:pointer; }
.burger span { width:16px; height:1.6px; background:var(--n-900); }
.burger span:last-child { width:11px; }

/* ---------- Mobile menu ---------- */
.mm { position:fixed; inset:0; z-index:1300; background:var(--surface); display:flex; flex-direction:column; padding:16px; }
.mm[hidden] { display:none; }
.mm-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.mm-name { font-size:18px; font-weight:700; }
.mm-x { width:40px; height:40px; background:var(--n-50); border:1px solid var(--n-200); border-radius:8px; font-size:19px; color:var(--n-900); cursor:pointer; font-family:inherit; }
.mm-nav { display:flex; flex-direction:column; }
.mm-nav a { font-size:17px; color:var(--n-900); padding:16px 4px; border-bottom:1px solid var(--n-200); }
.mm-nav a:hover { color:var(--brand-700); }

/* ---------- Hero ---------- */
.hero-pad { padding-block:64px 72px; }
.hero-center { display:flex; flex-direction:column; align-items:center; text-align:center; }
.pill { display:inline-flex; align-items:center; gap:8px; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:9999px; padding:6px 13px; margin-bottom:20px; }
.pill i { width:6px; height:6px; border-radius:50%; background:var(--accent-500); }
.pill span { font-size:13px; font-weight:500; color:var(--brand-700); }
.h1 { font-size:34px; line-height:1.4; font-weight:700; margin:0 0 14px; letter-spacing:-0.02em; text-wrap:pretty; max-width:24ch; }
.lede { font-size:16px; line-height:1.85; color:var(--n-700); margin:0 0 30px; max-width:56ch; text-wrap:pretty; }

.pick { width:100%; max-width:640px; text-align:start; }
.pickrow { display:flex; align-items:stretch; gap:12px; }
.drop-wrap { position:relative; flex:1; min-width:0; }
.drop-btn { font-family:inherit; width:100%; display:flex; align-items:center; gap:12px; text-align:start; font-size:16px; font-weight:500; background:var(--surface); border:1.5px solid var(--brand-300); border-radius:12px; padding:16px 18px; cursor:pointer; transition:border-color 120ms; color:var(--n-600); }
.drop-btn:hover { border-color:var(--brand-700); }
.drop-btn.is-open { border-color:var(--brand-700); }
.drop-btn.has-value { color:var(--n-900); }
.drop-btn > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop-btn svg { flex-shrink:0; transition:transform 150ms; }
.drop-btn.is-open svg { transform:rotate(180deg); }

.drop-list { position:absolute; inset-inline:0; top:calc(100% + 7px); z-index:60; background:var(--surface); border:1px solid var(--n-200); border-radius:12px; box-shadow:var(--sh-ov); padding:6px; max-height:330px; overflow-y:auto; }
.drop-list[hidden] { display:none; }
.drop-opt { font-family:inherit; width:100%; display:flex; align-items:flex-start; gap:11px; text-align:start; border:none; border-radius:9px; padding:11px 12px; cursor:pointer; transition:background 110ms; background:transparent; }
.drop-opt:hover { background:var(--brand-50); }
.drop-opt[aria-selected="true"] { background:var(--brand-50); }
.drop-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--n-300); }
.drop-dot i { width:7px; height:7px; border-radius:50%; background:transparent; }
.drop-opt[aria-selected="true"] .drop-dot { border-color:var(--brand-700); }
.drop-opt[aria-selected="true"] .drop-dot i { background:var(--brand-700); }
.drop-txt { flex:1; min-width:0; }
.drop-lb { display:block; font-size:14px; font-weight:600; margin-bottom:2px; color:var(--n-900); }
.drop-opt[aria-selected="true"] .drop-lb { color:var(--brand-700); }
.drop-sb { display:block; font-size:12px; line-height:1.7; color:var(--n-600); }

.start-btn { font-family:inherit; font-size:16px; font-weight:600; color:var(--brand-900); background:var(--accent-500); border:none; border-radius:12px; padding:16px 32px; cursor:pointer; flex-shrink:0; transition:filter 120ms; }
.start-btn:hover { filter:brightness(1.07); }

.trust { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:26px; }
.trust span { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--n-600); }

/* ---------- How it works ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { background:var(--surface); border:1px solid var(--n-200); border-radius:12px; padding:22px; }
.step--dark { background:var(--brand-900); border-color:transparent; }
.step-hd { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.step-num { width:34px; height:34px; border-radius:9px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--brand-700); flex-shrink:0; }
.step--dark .step-num { background:var(--accent-500); color:var(--brand-900); }
.step-t { font-size:17px; line-height:1.55; font-weight:600; }
.step--dark .step-t { color:#FFFFFF; }
.step p { font-size:14px; line-height:1.85; color:var(--n-700); margin:0 0 14px; }
.step--dark p { color:var(--brand-300); }
.step-foot { border-top:1px solid var(--n-200); padding-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.step-foot--col { flex-direction:column; flex-wrap:nowrap; gap:6px; }
.step--dark .step-foot { border-top-color:rgba(168,182,232,.25); font-size:12px; line-height:1.8; color:var(--brand-300); display:block; }
.tag { font-size:11px; font-weight:500; color:var(--n-700); background:var(--n-50); border-radius:5px; padding:5px 9px; }
.chk { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--n-600); }
.chk svg { flex-shrink:0; }

/* ---------- Opportunities carousel ---------- */
.opp-nav { display:flex; align-items:center; gap:8px; }
.opp-btn { font-family:inherit; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--n-300); border-radius:9px; cursor:pointer; color:var(--n-700); transition:all 120ms; }
.opp-btn:hover { border-color:var(--brand-700); color:var(--brand-700); }
.viewport { overflow:hidden; }
.track { display:flex; transition:transform 420ms cubic-bezier(.2,.7,.3,1); }
.slide { flex:0 0 100%; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.card { background:var(--surface); border:1px solid var(--n-200); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color 120ms, box-shadow 120ms; }
.card:hover { border-color:var(--brand-300); box-shadow:var(--sh-md); }
.card-media { position:relative; height:168px; background:var(--n-50); border-bottom:1px solid var(--n-200); }
.card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.card-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px; text-align:center; background:linear-gradient(150deg, var(--brand-50) 0%, var(--n-50) 100%); }
.card-ph span { font-size:12px; line-height:1.7; color:var(--n-600); max-width:26ch; }
.badge { position:absolute; inset-block-start:11px; inset-inline-start:11px; font-size:11px; font-weight:500; border-radius:6px; padding:5px 9px; }
.badge--high { color:var(--sev-t); background:var(--hi-bg); border:1px solid var(--sev); }
.badge--mid  { color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100); }
.badge--low  { color:var(--n-700); background:var(--n-50); border:1px solid var(--n-200); }
.card-body { padding:17px; display:flex; flex-direction:column; flex:1; }
.card-title { font-size:16px; line-height:1.6; font-weight:600; margin:0 0 9px; }
.card-line { font-size:13px; color:var(--n-600); margin-bottom:14px; }
.card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--n-200); padding-top:13px; }
.card-foot > span { font-size:12px; color:var(--n-600); }
.card-foot a { font-size:13px; font-weight:600; color:var(--brand-700); display:flex; align-items:center; gap:5px; }

.dots-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.dots { display:flex; gap:7px; }
.dot { font-family:inherit; height:7px; width:7px; border:none; border-radius:99px; cursor:pointer; padding:0; transition:all 250ms; background:var(--n-300); }
.dot.is-on { width:26px; background:var(--brand-700); }
.all-btn { font-size:14px; font-weight:600; color:var(--brand-700); background:var(--surface); border:1px solid var(--n-300); border-radius:8px; padding:11px 20px; transition:all 120ms; }
.all-btn:hover { background:var(--brand-50); border-color:var(--brand-700); color:var(--brand-700); }

/* ---------- Categories ---------- */
.cats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat { background:var(--surface); border:1px solid var(--n-200); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:9px; transition:all 120ms; color:var(--n-900); }
.cat:hover { border-color:var(--brand-700); box-shadow:var(--sh-md); color:var(--n-900); }
.cat-t { font-size:15px; font-weight:600; line-height:1.6; }
.cat-s { font-size:12px; line-height:1.75; color:var(--n-600); }
.cat-m { font-size:11px; font-weight:500; color:var(--n-500); margin-top:auto; padding-top:8px; }
.cat--dark { background:var(--brand-900); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:9px; }
.cat--dark .cat-t { color:#FFFFFF; }
.cat--dark .cat-s { color:var(--brand-300); }
.cat-cta { font-family:inherit; font-size:13px; font-weight:600; color:var(--accent-500); background:transparent; border:none; padding:0; cursor:pointer; text-align:start; margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:5px; }

/* ---------- Suppliers ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.eyebrow { font-size:13px; font-weight:600; color:var(--accent-600); margin-bottom:10px; }
.split h2 { margin:0 0 12px; text-wrap:pretty; }
.split-p { font-size:14px; line-height:1.85; color:var(--n-700); margin:0 0 18px; max-width:46ch; }
.feats { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.feat { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--n-700); background:var(--surface); border:1px solid var(--n-200); border-radius:7px; padding:8px 12px; }
.btn-brand { display:inline-block; font-size:15px; font-weight:600; color:#FFFFFF; background:var(--brand-700); border-radius:8px; padding:14px 24px; transition:background 120ms; }
.btn-brand:hover { background:var(--brand-600); color:#FFFFFF; }

.panel { background:var(--surface); border:1px solid var(--n-200); border-radius:12px; padding:20px; }
.panel-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--n-200); }
.panel-hd b { font-size:15px; font-weight:600; }
.panel-hd span { font-size:11px; font-weight:500; color:var(--n-600); }
.panel-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.col-t { font-size:12px; font-weight:600; color:var(--n-600); margin-bottom:10px; }
.col-t--brand { color:var(--brand-700); }
.col-list { display:flex; flex-direction:column; gap:8px; }
.col-list span { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.7; color:var(--n-700); }
.dash { width:11px; height:1.5px; background:var(--n-300); flex-shrink:0; margin-top:8px; }
.col-list svg { flex-shrink:0; margin-top:4px; }
.notice { display:flex; gap:10px; background:var(--accent-50); border:1px solid var(--accent-500); border-radius:8px; padding:12px; margin-top:16px; }
.notice svg { flex-shrink:0; margin-top:2px; }
.notice span { font-size:12px; line-height:1.8; color:var(--n-700); }

/* ---------- Stats / revenue model ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat { background:var(--surface); border:1px solid var(--n-200); border-radius:12px; padding:20px; }
.stat-l { font-size:13px; color:var(--n-700); margin-bottom:8px; }
.stat-n { font-size:32px; line-height:1.2; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:6px; }
.stat-d { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:var(--ok-t); }
.stat-d--flat { color:var(--n-600); display:block; }
.stat--brand { background:var(--brand-50); border-color:var(--brand-100); }
.stat--brand .stat-l { color:var(--brand-700); }
.stat-h { font-size:17px; line-height:1.55; font-weight:600; margin-bottom:8px; }
.stat-p { font-size:12px; line-height:1.8; color:var(--n-700); }

/* ---------- News ---------- */
.posts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.post { background:var(--surface); border:1px solid var(--n-200); border-radius:12px; padding:18px; }
.post-tag { font-size:11px; font-weight:500; color:var(--brand-700); background:var(--brand-50); border-radius:5px; padding:4px 8px; display:inline-block; margin-bottom:12px; }
.post h3 { font-size:17px; line-height:1.55; font-weight:600; margin:0 0 8px; }
.post p { font-size:13px; line-height:1.8; color:var(--n-700); margin:0 0 12px; }
.post-meta { font-size:12px; color:var(--n-600); border-top:1px solid var(--n-200); padding-top:11px; }

/* ---------- Closing CTA ---------- */
.cta { background:var(--brand-900); border-radius:16px; padding:44px 36px; text-align:center; }
.cta h2 { font-size:21px; line-height:1.5; font-weight:700; color:#FFFFFF; margin:0 0 10px; letter-spacing:-0.015em; }
.cta p { font-size:14px; line-height:1.85; color:var(--brand-300); margin:0 auto 22px; max-width:44ch; }
.cta-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-accent--lg { font-size:15px; padding:14px 26px; }
.btn-ghost { font-size:15px; font-weight:600; color:#FFFFFF; border:1px solid rgba(168,182,232,.3); border-radius:8px; padding:13px 26px; transition:background 120ms; }
.btn-ghost:hover { background:rgba(255,255,255,.07); color:#FFFFFF; }

/* ---------- Footer ---------- */
.ftr { margin-top:64px; background:var(--n-50); border-top:1px solid var(--n-200); }
.ftr .sec { padding:48px 32px 0; }
.ftr-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; }
.ftr-brand { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ftr-brand img { width:34px; height:34px; object-fit:cover; border-radius:8px; display:block; }
.ftr-brand span { font-size:17px; font-weight:700; }
.ftr-p { font-size:13px; line-height:1.9; color:var(--n-700); margin:0 0 16px; max-width:40ch; }
.social { display:flex; gap:8px; margin-bottom:16px; }
.soc { width:34px; height:34px; background:var(--surface); border:1px solid var(--n-200); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--n-600); transition:all 120ms; }
.soc:hover { border-color:var(--brand-700); color:var(--brand-700); }
.enamad { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--n-200); border-radius:8px; padding:10px 12px; max-width:220px; }
.enamad svg { flex-shrink:0; }
.enamad span { font-size:11px; line-height:1.6; color:var(--n-600); }
.enamad img { display:block; }
.contact { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.contact span, .contact a { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.8; color:var(--n-700); }
.contact svg { flex-shrink:0; margin-top:4px; }
.contact a:hover { color:var(--brand-700); }
.ftr-col { display:flex; flex-direction:column; gap:10px; }
.ftr-col b { font-size:14px; font-weight:600; margin-bottom:2px; }
.ftr-col a { font-size:13px; color:var(--n-700); }
.ftr-col a:hover { color:var(--brand-700); }
.ftr-col button { font-family:inherit; font-size:13px; color:var(--n-700); background:transparent; border:none; padding:0; cursor:pointer; text-align:start; }
.ftr-col button:hover { color:var(--brand-700); }
.ftr-btm { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:20px; border-top:1px solid var(--n-200); }
.ftr-btm > span { font-size:13px; color:var(--n-600); }
.legal { display:flex; gap:16px; }
.legal a { font-size:13px; color:var(--n-600); }
.legal a:hover { color:var(--brand-700); }

/* ---------- Floating CTA + chat widget ---------- */
.fab { position:fixed; inset-inline-start:16px; inset-inline-end:16px; inset-block-end:16px; z-index:1250; display:none; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:15px; font-weight:600; color:var(--brand-900); background:var(--accent-500); border:none; border-radius:10px; padding:15px; cursor:pointer; box-shadow:var(--sh-lg); }

.chat-fab { position:fixed; inset-inline-end:24px; inset-block-end:24px; z-index:1700; width:54px; height:54px; border-radius:9999px; background:var(--brand-700); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-ov); animation:hvDrift 4s ease-in-out infinite; }
.chat-fab[hidden] { display:none; }

.chat { position:fixed; inset-inline-end:24px; inset-block-end:24px; z-index:1700; width:352px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--n-200); border-radius:14px; box-shadow:var(--sh-ov); overflow:hidden; animation:hvPop 320ms cubic-bezier(0,0,0,1); }
.chat[hidden] { display:none; }
.chat-hd { display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--brand-900); }
.chat-ico { width:30px; height:30px; border-radius:8px; background:rgba(244,174,52,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-hd > div { flex:1; }
.chat-t { font-size:14px; font-weight:600; color:#FFFFFF; }
.chat-s { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--brand-300); }
.chat-s i { width:5px; height:5px; border-radius:50%; background:var(--ok); }
.chat-x { width:30px; height:30px; background:transparent; border:none; border-radius:7px; color:var(--brand-300); font-size:18px; cursor:pointer; transition:background 120ms; font-family:inherit; }
.chat-x:hover { background:rgba(255,255,255,.1); color:#FFFFFF; }
.chat-body { padding:16px; background:var(--n-50); display:flex; flex-direction:column; gap:10px; max-height:300px; overflow-y:auto; }
.bubble { background:var(--surface); border:1px solid var(--n-200); border-radius:10px; border-start-start-radius:3px; padding:11px 13px; font-size:13px; line-height:1.8; color:var(--n-700); max-width:88%; }
.bubble--me { align-self:flex-end; background:var(--brand-700); border:none; border-radius:10px; border-end-end-radius:3px; color:#FFFFFF; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { font-family:inherit; font-size:12px; font-weight:500; color:var(--brand-700); background:var(--surface); border:1px solid var(--brand-300); border-radius:9999px; padding:8px 13px; cursor:pointer; transition:background 120ms; }
.chip:hover { background:var(--brand-50); }
.chat-foot { padding:12px 16px; border-top:1px solid var(--n-200); display:flex; align-items:center; gap:9px; }
.attach { width:34px; height:34px; background:var(--n-50); border:1px solid var(--n-200); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--n-600); cursor:pointer; flex-shrink:0; }
.attach:hover { color:var(--brand-700); }
.chat-in { flex:1; min-width:0; font-family:inherit; font-size:13px; color:var(--n-900); background:var(--surface); border:1px solid var(--n-300); border-radius:8px; padding:10px 12px; outline:none; }
.chat-in:focus { border-color:var(--brand-700); }
.send { width:34px; height:34px; background:var(--brand-700); border:none; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background 120ms; }
.send:hover { background:var(--brand-600); }

/* ---------- Responsive ---------- */
@media (max-width:1024px) {
  .nav, .link-login { display:none !important; }
  .burger { display:flex !important; }
  .split { grid-template-columns:1fr !important; gap:36px !important; }
  .slide, .cats, .stats, .posts { grid-template-columns:1fr 1fr !important; }
  .ftr-grid { grid-template-columns:1fr 1fr !important; }
  .sec { padding-inline:24px !important; }
  .hero-pad { padding-block:48px 56px !important; }
  .h1 { font-size:30px !important; }
  .h2, .cta h2 { font-size:20px !important; }
}
@media (max-width:720px) {
  .slide, .cats, .stats, .posts, .ftr-grid, .steps { grid-template-columns:1fr !important; }
  .pickrow { flex-direction:column !important; }
  .sec { padding-inline:16px !important; }
  .ftr .sec { padding-inline:16px !important; }
  .hero-pad { padding-block:32px 44px !important; }
  .h1 { font-size:26px !important; }
  .h2, .cta h2 { font-size:19px !important; }
  .lede { font-size:15px !important; }
  .hdr-in { padding-inline:16px !important; }
  .cta { padding:22px 18px !important; }
  .band { padding-block:44px !important; }
  .btn-accent--hdr { display:none !important; }
  .fab { display:flex !important; }
  .chat, .chat-fab { inset-block-end:76px !important; }
}