/* ═══════════════════════════════════════════════════════════════════════════
   OcevoHub · AURORA SITE — the public website (home + product landing pages)
   Light, airy, big type. Every page sets its own accent (--ac, --ac2); the
   mesh orbs, buttons, chips and mock screens all follow it.
   ═══════════════════════════════════════════════════════════════════════════ */
body.s2 {
  --ac: #4f46e5; --ac2: #7c3aed; --ink: #0b1324; --ink2: #3b4760; --mut: #5b667d; --line: #e8ecf4; --soft: #f7f8fc;
  --disp: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  background: #fff; color: var(--ink2); font-size: 16px; line-height: 1.6; overflow-x: hidden;
}
body.s2 h1, body.s2 h2, body.s2 h3, body.s2 h4 { font-family: var(--disp); letter-spacing: -.035em; }
.s-hero :is(h1, h2, h3, h4), .s-sec :is(h1, h2, h3, h4), .s-marq :is(h3), .mk :is(h3, h4) { color: var(--ink); }
body.s2 a { color: inherit; }
body.s2 .container { width: min(1180px, 100% - 40px); margin-inline: auto; }
body.s2 .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
body.s2 .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.s2 .reveal { opacity: 1; transform: none; transition: none; } body.s2 * { animation: none !important; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border-radius: 99px; font: 700 15.5px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.s-btn .icon { width: 18px; height: 18px; transition: transform .2s; }
.s-btn:hover .icon { transform: translateX(3px); }
.s-btn.primary { color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 18px 34px -16px var(--ac); }
.s-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -16px var(--ac); color: #fff; }
.s-btn.ghost { color: var(--ink); background: #fff; border-color: #d9e0ee; }
.s-btn.ghost:hover { border-color: var(--ac); color: var(--ac); transform: translateY(-2px); }
.s-btn.sm { height: 42px; padding: 0 20px; font-size: 14px; }
.s-btn.light { color: var(--ink); background: #fff; box-shadow: 0 18px 34px -18px rgba(11, 19, 36, .5); }
.s-btn.light:hover { transform: translateY(-2px); color: var(--ink); }
.s-btn.line-light { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.s-btn.line-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ── Navigation: a floating glass pill ───────────────────────────────────── */
.s-nav { position: sticky; top: 0; z-index: 80; padding: 14px 0 0; pointer-events: none; }
.s-nav .pill { pointer-events: auto; width: min(1180px, 100% - 28px); margin-inline: auto; display: flex; align-items: center; gap: 22px; padding: 9px 10px 9px 22px; border-radius: 99px; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(190%) blur(18px); -webkit-backdrop-filter: saturate(190%) blur(18px); border: 1px solid rgba(232, 236, 244, .95); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 40px -26px rgba(37, 52, 110, .5); }
.s-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.s-nav .brand-text { color: var(--ink); } .s-nav .brand-text small { color: var(--ac); }
.s-nav .links { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.s-nav .links > a, .s-nav .links summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; font-weight: 650; font-size: 14.5px; color: var(--ink2); text-decoration: none; cursor: pointer; list-style: none; transition: background .15s, color .15s; }
.s-nav .links summary::-webkit-details-marker { display: none; }
.s-nav .links > a:hover, .s-nav .links summary:hover, .s-nav .links > a.active, .s-nav .links summary.active { background: #f1f4fa; color: var(--ink); }
.s-nav .links .icon { width: 16px; height: 16px; }
.s-nav .links .nav-agent { color: #a86500; background: #fff7e6; }
.s-nav .links .nav-agent:hover { background: #ffeecb; color: #8a5300; }
.s-nav .cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.s-nav .nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 99px; border: 0; background: #f1f4fa; color: var(--ink); cursor: pointer; place-items: center; }
.s-nav .dropdown { position: relative; }
.s-nav .dropdown-menu.pm { position: absolute; left: -10px; top: calc(100% + 14px); width: min(680px, 90vw); padding: 0; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(37, 52, 110, .45); overflow: hidden; }
.s-nav .pm-grid { display: grid; grid-template-columns: 1.15fr .85fr; }
.s-nav .pm-col { padding: 18px; }
.s-nav .pm-soon { background: var(--soft); border-left: 1px solid var(--line); }
.s-nav .pm-h { margin: 0 0 8px; font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.s-nav .pm-h em { font-style: normal; color: var(--ac); margin-left: 4px; }
.s-nav .pm-app { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; text-decoration: none; transition: background .15s; }
.s-nav .pm-app:hover { background: #f5f7fc; }
.s-nav .pm-app-ic, .s-nav .pm-chip-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #4f46e5)); box-shadow: 0 10px 18px -10px var(--accent); }
.s-nav .pm-app-ic .icon { width: 20px; height: 20px; }
.s-nav .pm-app-txt b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.25; }
.s-nav .pm-app-txt small { display: block; color: var(--mut); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.s-nav .pm-go { color: #98a2b8; } .s-nav .pm-go .icon { width: 16px; height: 16px; }
.s-nav .pm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-nav .pm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--ink2); text-decoration: none; }
.s-nav .pm-chip-ic { width: 26px; height: 26px; border-radius: 99px; box-shadow: none; } .s-nav .pm-chip-ic .icon { width: 14px; height: 14px; }
.s-nav .pm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fcfcfe; font-size: 13px; color: var(--mut); }
.s-nav .pm-foot span { display: inline-flex; align-items: center; gap: 8px; } .s-nav .pm-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; color: var(--ac); text-decoration: none; }
.s-nav .pm-foot .icon { width: 15px; height: 15px; }
@media (max-width: 980px) {
  .s-nav .nav-toggle { display: grid; }
  .s-nav .cta { display: none; }
  .s-nav .links { display: none; }
  body.nav-open .s-nav .pill { flex-wrap: wrap; border-radius: 28px; padding-bottom: 14px; }
  body.nav-open .s-nav .links, body.nav-open .s-nav .cta { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; gap: 4px; }
  body.nav-open .s-nav .cta { flex-direction: row; margin-top: 6px; } body.nav-open .s-nav .cta .s-btn { flex: 1; }
  .s-nav .dropdown-menu.pm { position: static; width: 100%; box-shadow: none; margin-top: 6px; }
  .s-nav .pm-grid { grid-template-columns: 1fr; } .s-nav .pm-soon { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.s-hero { position: relative; isolation: isolate; padding: 54px 0 90px; overflow: hidden; margin-top: -68px; padding-top: 140px; }
.s-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; animation: s-drift 16s ease-in-out infinite alternate; }
.s-orb.o1 { width: 620px; height: 520px; right: -140px; top: -120px; background: radial-gradient(circle, var(--ac), transparent 66%); }
.s-orb.o2 { width: 520px; height: 460px; left: -160px; top: 120px; background: radial-gradient(circle, var(--ac2), transparent 66%); opacity: .38; animation-delay: -6s; }
.s-orb.o3 { width: 420px; height: 360px; left: 38%; bottom: -200px; background: radial-gradient(circle, #22d3ee, transparent 66%); opacity: .3; animation-delay: -10s; }
@keyframes s-drift { to { transform: translate(40px, 30px) scale(1.1); } }
.s-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#cfd6e6 1.1px, transparent 1.1px); background-size: 28px 28px; opacity: .55; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }
.s-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.s-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 8px; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(37, 52, 110, .5); font-weight: 700; font-size: 13px; color: var(--ink2); text-decoration: none; }
.s-chip b { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.s-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); margin-left: 6px; }
.s-chip .icon { width: 14px; height: 14px; }
.s-h1 { margin: 22px 0 0; font-size: clamp(2.7rem, 6.2vw, 5rem); line-height: .98; font-weight: 800; letter-spacing: -.05em; }
.s-h1 .g { background: linear-gradient(95deg, var(--ac), var(--ac2) 60%, color-mix(in srgb, var(--ac2) 60%, #22d3ee)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .05em; }
.s-lead { margin: 22px 0 0; max-width: 540px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--mut); }
.s-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.s-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink2); }
.s-trust li { display: inline-flex; align-items: center; gap: 7px; }
.s-trust .icon { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 14%, #fff); color: var(--ac); stroke-width: 3; box-sizing: content-box; }
@media (max-width: 980px) { .s-hero-grid { grid-template-columns: 1fr; gap: 40px; } .s-hero { padding-top: 120px; } }

/* ── Sections ────────────────────────────────────────────────────────────── */
.s-sec { padding: 96px 0; position: relative; }
.s-sec.soft { background: linear-gradient(180deg, var(--soft), #fff 70%); }
.s-sec.tight { padding: 64px 0; }
.s-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.s-head.left { margin-left: 0; text-align: left; }
.s-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font: 800 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, #fff); border: 1px solid color-mix(in srgb, var(--ac) 20%, #fff); }
.s-head h2 { margin: 18px 0 0; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; }
.s-head p { margin: 16px 0 0; font-size: 1.1rem; color: var(--mut); }
@media (max-width: 720px) { .s-sec { padding: 68px 0; } .s-head { margin-bottom: 36px; } }

/* marquee */
.s-marq { overflow: hidden; border-block: 1px solid var(--line); background: #fff; padding: 16px 0; }
.s-marq-track { display: flex; gap: 14px; width: max-content; animation: s-marq 38s linear infinite; }
.s-marq-track span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink2); white-space: nowrap; }
.s-marq-track i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--ac)) 14%, #fff); color: var(--c, var(--ac)); font-style: normal; }
.s-marq-track i .icon { width: 15px; height: 15px; }
@keyframes s-marq { to { transform: translateX(-50%); } }

/* ── Feature bento ───────────────────────────────────────────────────────── */
.s-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s-feat { position: relative; overflow: hidden; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, .03); transition: transform .25s, box-shadow .25s, border-color .25s; }
.s-feat::after { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 16%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.s-feat:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 35%, #fff); box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--ac) 80%, transparent); }
.s-feat:hover::after { opacity: 1; }
.s-feat .ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--ac), var(--ac2)); box-shadow: 0 14px 24px -14px var(--ac); margin-bottom: 18px; }
.s-feat .ic .icon { width: 23px; height: 23px; }
.s-feat h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: -.02em; }
.s-feat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mut); }
.s-feat.wide { grid-column: span 2; }
@media (max-width: 1020px) { .s-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-feats { grid-template-columns: 1fr; } .s-feat.wide { grid-column: auto; } }

/* spotlight: three big cards with a mini visual */
.s-spot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-spot-card { padding: 28px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(37, 52, 110, .5); display: flex; flex-direction: column; gap: 18px; }
.s-spot-card h3 { margin: 0; font-size: 1.35rem; } .s-spot-card p { margin: 0; color: var(--mut); font-size: 15px; }
.s-viz { margin-top: auto; padding: 16px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); display: grid; gap: 9px; }
.s-viz .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid #eef1f7; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.s-viz .r b { color: var(--ink); font-variant-numeric: tabular-nums; } .s-viz .r b.up { color: #0a7a4b; } .s-viz .r b.dn { color: #c4262f; }
.s-viz .bar { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.s-viz .bar i { display: block; height: 9px; border-radius: 99px; background: #e8ecf4; overflow: hidden; } .s-viz .bar em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ac), var(--ac2)); }
.s-viz .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .s-viz .nums div { padding: 12px 8px; border-radius: 14px; background: #fff; border: 1px solid #eef1f7; text-align: center; } .s-viz .nums b { display: block; font: 800 1.4rem var(--disp); color: var(--ink); } .s-viz .nums span { font-size: 11.5px; color: var(--mut); font-weight: 600; } .s-viz .nums .on { background: linear-gradient(135deg, var(--ac), var(--ac2)); border: 0; } .s-viz .nums .on b, .s-viz .nums .on span { color: #fff; }
@media (max-width: 980px) { .s-spot { grid-template-columns: 1fr; } }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.s-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: st; position: relative; }
.s-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ac) 45%, #fff) 0 8px, transparent 8px 16px); z-index: 0; }
.s-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.s-step .n { width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center; background: #fff; border: 1.5px solid color-mix(in srgb, var(--ac) 30%, #fff); color: var(--ac); box-shadow: 0 20px 34px -22px var(--ac); }
.s-step .n .icon { width: 28px; height: 28px; }
.s-step small { display: block; font: 800 11.5px var(--font); letter-spacing: .16em; color: var(--ac); margin-bottom: 6px; }
.s-step h3 { margin: 0 0 6px; font-size: 1.2rem; } .s-step p { margin: 0 auto; max-width: 280px; color: var(--mut); font-size: 15px; }
@media (max-width: 820px) { .s-steps { grid-template-columns: 1fr; } .s-steps::before { display: none; } }

/* ── Mock UI building blocks (hero stage) ────────────────────────────────── */
.s-stage { position: relative; min-height: 470px; display: grid; place-items: center; }
.mk { position: relative; width: 100%; max-width: 560px; border-radius: 28px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(232, 236, 244, .95); box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 60px 90px -44px color-mix(in srgb, var(--ac) 60%, #1e1b4b); backdrop-filter: blur(10px); overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #fbfcfe; font: 700 12.5px var(--font); color: var(--mut); }
.mk-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e3e8f2; } .mk-bar i:nth-child(1) { background: #ff6b6b; } .mk-bar i:nth-child(2) { background: #ffd166; } .mk-bar i:nth-child(3) { background: #4ade80; } .mk-bar span { margin-left: 8px; }
.mk-body { padding: 16px; display: grid; gap: 12px; }
.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mk-tile { padding: 12px 10px; border-radius: 16px; background: color-mix(in srgb, var(--c, var(--ac)) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c, var(--ac)) 18%, #fff); }
.mk-tile i { display: block; width: 26px; height: 26px; border-radius: 9px; margin-bottom: 8px; background: color-mix(in srgb, var(--c, var(--ac)) 85%, #fff); box-shadow: 0 8px 14px -8px var(--c, var(--ac)); }
.mk-tile b { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.2; } .mk-tile span { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c, var(--ac)) 80%, #0b1324); }
.mk-cart { padding: 14px; border-radius: 18px; background: var(--soft); border: 1px dashed #cfd6e6; display: grid; gap: 7px; font-size: 13px; }
.mk-cart p { margin: 0 0 2px; font: 800 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.mk-cart > div { display: flex; justify-content: space-between; gap: 10px; color: var(--ink2); font-weight: 600; } .mk-cart b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-cart .t { padding-top: 9px; margin-top: 3px; border-top: 1px dashed #cfd6e6; font-size: 15px; } .mk-cart .t b { font: 800 1.15rem var(--disp); }
.mk-pay { margin-top: 3px; text-align: center; padding: 12px; border-radius: 14px; color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 14px 24px -14px var(--ac); }
.mk-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 50px -26px rgba(37, 52, 110, .55); animation: s-bob 6s ease-in-out infinite; }
.mk-float .fi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--fc, var(--ac)), color-mix(in srgb, var(--fc, var(--ac)) 55%, #4f46e5)); }
.mk-float .fi .icon { width: 18px; height: 18px; }
.mk-float small { display: block; font-size: 11.5px; color: var(--mut); font-weight: 600; line-height: 1.2; } .mk-float b { display: block; color: var(--ink); font-size: 15px; font-family: var(--disp); line-height: 1.25; }
.mk-float.f1 { left: -10px; top: 38px; } .mk-float.f2 { right: -12px; top: 140px; animation-delay: -2s; } .mk-float.f3 { left: 18px; bottom: 10px; animation-delay: -4s; }
@keyframes s-bob { 50% { transform: translateY(-10px); } }
.mk-sample { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: #98a2b8; font-weight: 600; }
.mk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mk-col { padding: 10px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); display: grid; gap: 7px; align-content: start; }
.mk-col h4 { margin: 0 0 2px; font: 800 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); display: flex; justify-content: space-between; }
.mk-job { padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #eef1f7; font-size: 12px; line-height: 1.3; box-shadow: 0 6px 12px -10px rgba(15, 23, 42, .3); } .mk-job b { display: block; color: var(--ink); font-size: 12.5px; } .mk-job span { color: var(--mut); }
.mk-job.drag { transform: rotate(-3deg) translate(8px, -4px); border-color: var(--ac); box-shadow: 0 22px 30px -16px var(--ac); }
.mk-time { display: grid; gap: 0; padding: 14px 16px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.mk-time div { position: relative; padding: 0 0 12px 22px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.mk-time div::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 20%, #fff); }
.mk-time div::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 1.5px; background: #d9e0ee; } .mk-time div:last-child { padding-bottom: 0; } .mk-time div:last-child::after { display: none; }
.mk-time div.off::before { background: #cfd6e6; box-shadow: none; } .mk-time small { display: block; color: var(--mut); font-weight: 500; font-size: 12px; }
.mk-people { display: grid; gap: 8px; }
.mk-person { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 15px; background: #fff; border: 1px solid #eef1f7; }
.mk-av { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; background: linear-gradient(135deg, hsl(var(--h) 70% 48%), hsl(calc(var(--h) + 40) 66% 42%)); }
.mk-person b { display: block; color: var(--ink); font-size: 13.5px; line-height: 1.2; } .mk-person span { font-size: 12px; color: var(--mut); }
.mk-tag { margin-left: auto; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; background: #e8f8ef; color: #0a7a4b; } .mk-tag.am { background: #fff3da; color: #a86500; } .mk-tag.bl { background: #e8eeff; color: #3b4fd1; }
.mk-ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ac) calc(var(--p) * 1%), #e8ecf4 0); margin: 0 auto; } .mk-ring > div { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; } .mk-ring b { font: 800 1.6rem var(--disp); color: var(--ink); line-height: 1; } .mk-ring span { font-size: 11px; color: var(--mut); font-weight: 600; }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
@media (max-width: 600px) { .s-stage { min-height: 0; padding: 20px 0; } .mk-float.f1 { left: 0; } .mk-float.f2 { right: 0; top: auto; bottom: -14px; } .mk-float.f3 { display: none; } .mk-tiles { grid-template-columns: repeat(3, 1fr); } }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.s-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.s-faq .list { display: grid; gap: 12px; }
.s-faq details { border-radius: 20px; background: #fff; border: 1px solid var(--line); padding: 4px 22px; transition: border-color .2s, box-shadow .2s; }
.s-faq details[open] { border-color: color-mix(in srgb, var(--ac) 35%, #fff); box-shadow: 0 24px 40px -30px color-mix(in srgb, var(--ac) 70%, transparent); }
.s-faq summary { list-style: none; cursor: pointer; padding: 18px 0; font: 700 1.05rem var(--disp); color: var(--ink); display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 20px/1 var(--font); color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, #fff); transition: transform .25s; }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq p { margin: 0 0 18px; color: var(--mut); font-size: 15.5px; }
@media (max-width: 880px) { .s-faq { grid-template-columns: 1fr; gap: 28px; } }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.s-final { padding: 0 0 96px; }
.s-final-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 84px 28px; border-radius: 44px; color: #fff; background: radial-gradient(520px 300px at 95% -10%, rgba(255, 255, 255, .3), transparent 62%), radial-gradient(460px 280px at 0% 115%, rgba(34, 211, 238, .45), transparent 65%), linear-gradient(135deg, var(--ac) 0%, var(--ac2) 120%); box-shadow: 0 50px 90px -44px var(--ac); }
.s-final-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }
.s-final-card h2 { color: #fff; margin: 0; font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.02; font-weight: 800; letter-spacing: -.05em; }
.s-final-card p { margin: 18px auto 0; max-width: 560px; color: rgba(255, 255, 255, .88); font-size: 1.12rem; }
.s-final-card .s-cta { justify-content: center; }
@media (max-width: 640px) { .s-final-card { padding: 56px 20px; border-radius: 30px; } }

/* ── Video ───────────────────────────────────────────────────────────────── */
.s-video { position: relative; max-width: 960px; margin: 0 auto; border-radius: 32px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 50px 90px -48px rgba(37, 52, 110, .6); background: #0b1324; aspect-ratio: 16 / 9; }
.s-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; background: linear-gradient(180deg, rgba(11, 19, 36, .1), rgba(11, 19, 36, .5)); transition: opacity .25s; }
.s-play span { display: inline-flex; align-items: center; gap: 14px; padding: 12px 26px 12px 12px; border-radius: 99px; background: #fff; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); text-align: left; transition: transform .2s; }
.s-play:hover span { transform: scale(1.05); }
.s-play .pi { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); } .s-play .pi .icon { width: 22px; height: 22px; margin-left: 2px; }
.s-play b { display: block; color: var(--ink); font-size: 16px; } .s-play small { color: var(--mut); font-size: 12.5px; }
.s-video.playing .s-play { opacity: 0; pointer-events: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.s-foot { background: var(--soft); border-top: 1px solid var(--line); padding: 72px 0 30px; color: var(--mut); }
.s-foot .cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.s-foot h4 { margin: 0 0 14px; font: 800 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.s-foot a { display: block; padding: 5px 0; color: var(--mut); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .15s; }
.s-foot a:hover { color: var(--ac); }
.s-foot .brand-line { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0; }
.s-foot .brand-text { color: var(--ink); } .s-foot .brand-text small { color: var(--ac); }
.s-foot .bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 860px) { .s-foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .s-foot .cols { grid-template-columns: 1fr; } }

/* ── Home extras ─────────────────────────────────────────────────────────── */
.h-orbit { position: relative; width: min(500px, 100%); aspect-ratio: 1; margin: 0 auto; }
.h-orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed #cfd6e6; animation: s-spin 60s linear infinite; }
.h-orbit .ring.r2 { inset: 17%; animation-duration: 40s; animation-direction: reverse; border-color: #dbe1ef; }
@keyframes s-spin { to { transform: rotate(360deg); } }
.h-core { position: absolute; inset: 33%; border-radius: 34%; display: grid; place-items: center; background: linear-gradient(145deg, #fff, #f1f4fb); border: 1px solid var(--line); box-shadow: 0 40px 70px -30px rgba(79, 70, 229, .55), inset 0 -10px 20px rgba(79, 70, 229, .06); }
.h-core svg { width: 62%; height: 62%; }
.h-app { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #4f46e5)); box-shadow: 0 24px 36px -16px var(--ac); transform: translate(-50%, -50%); animation: s-bob 7s ease-in-out infinite; text-decoration: none; transition: transform .25s; }
.h-app:hover { transform: translate(-50%, -54%) scale(1.08); }
.h-app .icon { width: 42%; height: 42%; }
.h-app small { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--ink); font: 800 11px var(--font); letter-spacing: .08em; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(15, 23, 42, .4); }
.h-app.soon { filter: grayscale(.85) opacity(.55); box-shadow: none; }
.h-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.h-tile { --ac: #4f46e5; position: relative; overflow: hidden; grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 32px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.h-tile.big { grid-column: span 3; }
.h-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 40%, #7c3aed)); }
.h-tile::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 18%, transparent), transparent 70%); transition: transform .4s; }
.h-tile:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ac) 40%, #fff); box-shadow: 0 40px 60px -40px color-mix(in srgb, var(--ac) 80%, transparent); }
.h-tile:hover::after { transform: scale(1.3); }
.h-tile .ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #4f46e5)); box-shadow: 0 16px 26px -14px var(--ac); position: relative; z-index: 1; }
.h-tile .ic .icon { width: 27px; height: 27px; }
.h-tile .st { position: absolute; right: 24px; top: 28px; z-index: 1; padding: 4px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: #e8f8ef; color: #0a7a4b; } .h-tile .st.beta { background: #f1ecff; color: #6d28d9; }
.h-tile h3 { margin: 8px 0 0; font-size: 1.45rem; position: relative; z-index: 1; } .h-tile p { margin: 0; color: var(--mut); font-size: 15px; position: relative; z-index: 1; max-width: 480px; }
.h-tile ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; position: relative; z-index: 1; } .h-tile li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.h-tile li .icon { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 14%, #fff); color: var(--ac); stroke-width: 3; box-sizing: content-box; }
.h-tile .more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14.5px; color: var(--ac); position: relative; z-index: 1; } .h-tile .more .icon { width: 17px; height: 17px; transition: transform .2s; } .h-tile:hover .more .icon { transform: translate(3px, -3px); }
.h-tile.soon { background: var(--soft); border-style: dashed; justify-content: center; } .h-tile.soon::before, .h-tile.soon::after { display: none; }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; } .h-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--ink2); } .h-chips .icon { width: 15px; height: 15px; color: var(--c, var(--ac)); }
@media (max-width: 1000px) { .h-tile, .h-tile.big { grid-column: span 3; } }
@media (max-width: 680px) { .h-tile, .h-tile.big { grid-column: 1 / -1; } }
.h-tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.h-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font: 700 14px var(--font); cursor: pointer; transition: all .2s; } .h-tab .icon { width: 17px; height: 17px; }
.h-tab.on { color: #fff; background: linear-gradient(135deg, var(--ac), var(--ac2)); border-color: transparent; box-shadow: 0 16px 26px -14px var(--ac); }
.h-screen { max-width: 980px; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 60px 100px -52px rgba(37, 52, 110, .65); }
.h-screen figure { margin: 0; display: none; } .h-screen figure.on { display: block; animation: s-fade .45s ease; } .h-screen img { display: block; width: 100%; height: auto; } .h-screen figcaption { padding: 14px 20px; font-weight: 600; color: var(--ink2); border-top: 1px solid var(--line); background: #fbfcfe; }
@keyframes s-fade { from { opacity: 0; transform: scale(.985); } }
.h-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.h-why > div { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); } .h-why .ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 11%, #fff); margin-bottom: 16px; } .h-why h3 { margin: 0 0 6px; font-size: 1.1rem; } .h-why p { margin: 0; font-size: 14.5px; color: var(--mut); }
@media (max-width: 1000px) { .h-why { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .h-why { grid-template-columns: 1fr; } }
.h-plat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.h-plat > div { padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .h-plat .ic { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: color-mix(in srgb, var(--ac) 11%, #fff); color: var(--ac); } .h-plat h3 { margin: 6px 0 0; font-size: 1.3rem; } .h-plat p { margin: 0; color: var(--mut); font-size: 15px; }
.h-plat .tag { align-self: flex-start; padding: 3px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: #e8f8ef; color: #0a7a4b; } .h-plat .tag.soon { background: #fff3da; color: #a86500; }
@media (max-width: 860px) { .h-plat { grid-template-columns: 1fr; } }

/* ── Older public pages (about, contact, features, pricing, agent, legal) keep their markup — lighten them to match ── */
body.s2 .page-hero { background: radial-gradient(520px 260px at 90% -20%, rgba(99, 102, 241, .16), transparent 65%), radial-gradient(460px 240px at 0% 120%, rgba(34, 211, 238, .16), transparent 65%), #fff; color: var(--mut); padding: 130px 0 56px; border-bottom: 1px solid var(--line); }
body.s2 .page-hero h1 { color: var(--ink); } body.s2 .page-hero p { color: var(--mut); }

/* ── WRS extras: notebook vs app, day timeline ─────────────────────────── */
.w-vs { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 22px; align-items: center; }
.w-note { position: relative; padding: 30px 28px; border-radius: 26px; background: #fffdf3; border: 1px solid #f0e8c0; box-shadow: 0 30px 50px -36px rgba(120, 100, 20, .5); transform: rotate(-1.5deg); background-image: repeating-linear-gradient(transparent 0 31px, #ece3b4 31px 32px); font-family: "Segoe Print", "Bradley Hand", cursive; }
.w-note h4 { margin: 0 0 8px; font-family: inherit; font-size: 1.2rem; color: #6b5a14; } .w-note p { margin: 0; line-height: 32px; color: #7a6a24; font-size: 15px; } .w-note em { color: #c4262f; font-style: normal; }
.w-tag { position: absolute; top: -13px; left: 22px; padding: 4px 14px; border-radius: 99px; background: #fbbf24; color: #5b4300; font: 800 11px var(--font); letter-spacing: .1em; text-transform: uppercase; } .w-tag.ok { background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; }
.w-arrow { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ac); box-shadow: 0 20px 30px -18px var(--ac); }
.w-app { position: relative; padding: 30px 22px 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -44px rgba(37, 52, 110, .55); display: grid; gap: 10px; }
.w-row { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 16px; background: var(--soft); } .w-row > span { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; } .w-row b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.25; } .w-row small { color: var(--mut); font-size: 12.5px; }
@media (max-width: 900px) { .w-vs { grid-template-columns: 1fr; } .w-arrow { margin: 0 auto; transform: rotate(90deg); } .w-note { transform: none; } }
.w-day { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.w-step { padding: 22px 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); } .w-step .tm { display: inline-block; padding: 3px 11px; border-radius: 99px; background: color-mix(in srgb, var(--ac) 11%, #fff); color: var(--ac); font: 800 12px var(--mono); } .w-step .di { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; margin: 14px 0; color: #fff; background: linear-gradient(140deg, var(--ac), var(--ac2)); } .w-step h3 { margin: 0 0 6px; font-size: 1.05rem; } .w-step p { margin: 0; font-size: 14px; color: var(--mut); }
@media (max-width: 1000px) { .w-day { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .w-day { grid-template-columns: 1fr; } }

/* pricing cards (shared partial) in the new look */
body.s2 .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto; }
body.s2 .price-card { position: relative; padding: 34px 30px; border-radius: 32px; background: #fff; color: var(--ink2); border: 1px solid var(--line); box-shadow: 0 40px 70px -50px rgba(37, 52, 110, .5); }
body.s2 .price-card.featured { background: radial-gradient(420px 220px at 100% -10%, rgba(255, 255, 255, .28), transparent 62%), linear-gradient(140deg, var(--ac), var(--ac2)); color: rgba(255, 255, 255, .92); border: 0; box-shadow: 0 50px 80px -40px var(--ac); }
body.s2 .price-card h3 { color: var(--ink); } body.s2 .price-card.featured h3, body.s2 .price-card.featured .amount { color: #fff; }
body.s2 .price-card .amount { font: 800 3rem/1 var(--disp); letter-spacing: -.05em; color: var(--ink); margin: 18px 0; } body.s2 .price-card .amount small { font: 600 14px var(--font); letter-spacing: 0; color: inherit; opacity: .7; }
body.s2 .price-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14.5px; } body.s2 .price-card li { display: flex; gap: 9px; align-items: flex-start; } body.s2 .price-card li .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ac); } body.s2 .price-card.featured li .icon { color: #fff; } body.s2 .price-card li.off { opacity: .5; }
body.s2 .price-card .ribbon { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
body.s2 .price-card .btn { height: 52px; border-radius: 99px; } body.s2 .price-card .btn-secondary { color: var(--ink); border-color: #d9e0ee; background: #fff; } body.s2 .price-card .btn-gradient { background: #fff; color: var(--ink); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .4); }
body.s2 .text-center { text-align: center; }
.h-tile.soon { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 24px 28px; }
.h-tile.soon h3 { margin: 0; }
html:has(body.s2) { overflow-x: hidden; }
@media (max-width: 600px) { .s-h1 { letter-spacing: -.045em; } .s-btn { height: 50px; padding: 0 22px; } .s-cta .s-btn { flex: 1 1 100%; } }

/* ════════════════════════════════════════════════════════════════════════════
   Regions, sign-in / sign-up, agent page
   ════════════════════════════════════════════════════════════════════════════ */
.s-suggest { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: #3730a3; background: linear-gradient(90deg, #eef2ff, #f5f0ff); border-bottom: 1px solid #e0e7ff; }
.s-suggest a { padding: 4px 14px; border-radius: 99px; background: #4f46e5; color: #fff; font-weight: 750; text-decoration: none; font-size: 12.5px; }

.s-region { position: relative; }
.s-region > summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: #f1f4fa; color: var(--ink); font: 700 13.5px var(--font); cursor: pointer; list-style: none; white-space: nowrap; }
.s-region > summary::-webkit-details-marker { display: none; }
.s-region > summary .icon { width: 15px; height: 15px; }
.s-region-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 270px; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 70px -28px rgba(37, 52, 110, .5); z-index: 90; }
.s-region-menu > a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; font-size: 14px; color: var(--ink2); }
.s-region-menu > a b { font-weight: 650; } .s-region-menu > a em { font-style: normal; font-size: 12px; color: var(--mut); font-weight: 700; }
.s-region-menu > a:hover, .s-region-menu > a.on { background: #f1f4fa; color: var(--ink); }
.s-region-menu > a.on b { color: var(--ac); }
.s-region-langs { display: flex; gap: 6px; flex-wrap: wrap; } .s-region-langs a { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink2); } .s-region-langs a.on { background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; border-color: transparent; }
@media (max-width: 980px) { .s-nav .cta { display: none; } body.nav-open .s-nav .cta .s-region { display: none; } .s-region-menu { right: auto; left: 0; } }

/* sign-in / sign-up shell */
body.s2-auth { background: #fff; }
.a-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; }
.a-side { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: 38px 52px; background: linear-gradient(160deg, #f4f3ff 0%, #eef6ff 55%, #f1fbff 100%); border-right: 1px solid var(--line); }
.a-side .s-orb { opacity: .5; } .a-side .s-orb.o1 { width: 440px; height: 380px; right: -140px; top: -80px; } .a-side .s-orb.o2 { width: 380px; height: 340px; left: -120px; bottom: -120px; top: auto; }
.a-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; } .a-brand .brand-text { color: var(--ink); } .a-brand .brand-text small { color: var(--ac); }
.a-pitch { margin: auto 0; max-width: 520px; position: relative; z-index: 1; }
.a-pitch h2 { margin: 18px 0 0; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.a-pitch > p { margin: 14px 0 26px; font-size: 1.05rem; color: var(--mut); }
.a-apps { display: grid; gap: 10px; }
.a-app { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 18px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border: 1px solid rgba(232, 236, 244, .95); box-shadow: 0 14px 26px -22px rgba(37, 52, 110, .5); }
.a-app .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 55%, #4f46e5)); } .a-app .ic .icon { width: 19px; height: 19px; }
.a-app .t b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.25; } .a-app .t small { display: block; color: var(--mut); font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
.a-app > .icon { width: 19px; height: 19px; color: #16a34a; } .a-app.dim { opacity: .72; } .a-app.dim > .icon { color: #d97706; }
.a-free { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ink2); } .a-free .icon { width: 17px; height: 17px; color: var(--ac); }
.a-foot { margin: 0; font-size: 12.5px; color: var(--mut); position: relative; z-index: 1; }
.a-main { display: flex; flex-direction: column; padding: 26px 40px 40px; background: #fff; min-width: 0; }
.a-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--mut); text-decoration: none; } .a-back:hover { color: var(--ink); } .a-back .icon { width: 16px; height: 16px; }
.a-center { flex: 1; display: grid; place-items: center; padding: 28px 0; }
.a-center .auth-card { width: 100%; max-width: 460px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.a-center .auth-card h1 { font-family: var(--disp); font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.a-center .auth-card .lead { color: var(--mut); font-size: 1.02rem; margin: 0 0 26px; }
.a-center .field > label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.a-center .input-group .input, .a-center .select, .a-center .input { height: 52px; border-radius: 16px; border: 1.5px solid #dfe5f1; background: #fbfcfe; font-size: 15.5px; transition: border-color .15s, box-shadow .15s, background .15s; }
.a-center .input-group .input:focus, .a-center .select:focus, .a-center .input:focus { background: #fff; border-color: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent); }
.a-center .btn-primary, .a-center .btn-gradient { height: 54px; border-radius: 99px; font-size: 16px; font-weight: 750; background: linear-gradient(135deg, var(--ac), var(--ac2)); border: 0; color: #fff; box-shadow: 0 20px 34px -18px var(--ac); }
.a-center .btn-primary:hover, .a-center .btn-gradient:hover { transform: translateY(-2px); filter: none; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 26px 40px -18px var(--ac); }
.a-center .auth-foot { margin-top: 24px; text-align: center; color: var(--mut); } .a-center .auth-foot a { color: var(--ac); font-weight: 750; }
.a-center .small.strong, .a-center a.strong { color: var(--ac); }
.a-center .su-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; } .a-center .su-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 99px; background: #f1f4fa; color: var(--mut); font-size: 12.5px; font-weight: 700; } .a-center .su-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 11.5px; } .a-center .su-steps li.is-on { background: color-mix(in srgb, var(--ac) 10%, #fff); color: var(--ac); } .a-center .su-steps li.is-on span { background: linear-gradient(135deg, var(--ac), var(--ac2)); color: #fff; }
.a-center .su-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #f7f8fc; border: 1px solid var(--line); margin-bottom: 18px; } .a-center .su-pick-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--accent); } .a-center .su-pick small { display: block; color: var(--mut); font-size: 12px; }
.a-center .su-country { padding: 14px; border-radius: 18px; background: #fff8eb; border: 1px solid #fde2a8; margin-bottom: 16px; }
@media (max-width: 980px) { .a-wrap { grid-template-columns: 1fr; } .a-side { display: none; } .a-main { padding: 20px 20px 32px; } }

/* agent page */
.ag-calc { max-width: 880px; margin: 0 auto; padding: 32px; border-radius: 36px; background: #fff; border: 1px solid var(--line); box-shadow: 0 50px 90px -56px rgba(37, 52, 110, .6); display: grid; gap: 26px; }
.ag-slider { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; } .ag-slider label { font-weight: 700; color: var(--ink); } .ag-slider b { font: 800 2rem var(--disp); color: var(--ac); }
.ag-slider input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; outline: 0; background: linear-gradient(90deg, var(--ac), var(--ac2)) 0 / var(--p, 18%) 100% no-repeat, #e8ecf4; }
.ag-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid var(--ac); box-shadow: 0 8px 16px -6px var(--ac); cursor: grab; }
.ag-slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--ac); cursor: grab; }
.ag-out { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; } .ag-out > div { padding: 20px 18px; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); } .ag-out small { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin-bottom: 6px; } .ag-out b { font: 800 clamp(1.4rem, 2.6vw, 2rem) var(--disp); letter-spacing: -.04em; color: var(--ink); }
.ag-out .big { background: linear-gradient(135deg, var(--ac), var(--ac2)); border: 0; box-shadow: 0 30px 50px -28px var(--ac); } .ag-out .big small { color: rgba(255, 255, 255, .85); } .ag-out .big b { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
@media (max-width: 720px) { .ag-out { grid-template-columns: 1fr; } .ag-calc { padding: 22px; } }
.ag-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; } .ag-perks > div { display: grid; gap: 6px; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); } .ag-perks .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 11%, #fff); margin-bottom: 4px; } .ag-perks b { color: var(--ink); font-size: 16px; } .ag-perks small { color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.agent-kit-show { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; } .agent-kit .rf-kit { margin: 0; padding: 0; background: none; border: 0; } .agent-kit-img .rf-kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .agent-kit-vid .rf-kit-grid { grid-template-columns: 1fr; } .agent-kit .rf-kit-item figcaption { align-items: center; }
.ag-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 22px 0 18px; color: var(--mut); font-size: 13.5px; } .ag-note .icon { width: 16px; height: 16px; }
@media (max-width: 900px) { .ag-perks { grid-template-columns: repeat(2, 1fr); } .agent-kit-show { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ag-perks { grid-template-columns: 1fr; } .agent-kit-img .rf-kit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { body.s2 .s-feats[style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { body.s2 .s-feats[style*="repeat(4"] { grid-template-columns: 1fr !important; } }
.s-region .fl, .s-region-menu .fl { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ac) 12%, #fff); color: var(--ac); font: 800 10.5px var(--font); letter-spacing: .04em; }
.s-region-menu > a .fl { margin: 0; }
.a-center .field label, .a-center .row-between label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.h-tile.ph-first { background: linear-gradient(180deg, #fff, #fafbff); }
.h-tile.ph-first .ic { filter: saturate(.8); }