/* reset base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg{max-width:100%}
a{text-decoration:none}

:root {
    --brand: #7c3aed;      /* roxo WhatsOne */
    --brand-2: #6d5df6;    /* azul-roxo (meio do degradê) */
    --brand-3: #4a9fe8;    /* azul (início do degradê) */
    --teal: #1fb87f;       /* verde = confirmar / agendar */
    --grad: linear-gradient(115deg, #4a9fe8 0%, #6d5df6 44%, #8b3fd6 80%, #7c3aed 100%);
    --grad-soft: linear-gradient(115deg, rgba(109,93,246,.16), rgba(139,63,214,.16));
    --ink: #17233b;
    --ink-2: #363f5c;
    --muted: #5f6488;
    --faint: #979bbb;
    --bg: #f1f0fb;
    --bg-2: #e8e6f8;
    --surface: #ffffff;
    --surface-2: #f6f5fd;
    --line: #e7e4f5;
    --line-2: #d8d3ee;
    --gold: #f2a417;
    --amber: #ef9a12;
    --red: #e2504b;
    --green: #1fb87f;
    --violet: #6D5DF6;
    --r: 18px;
    --shadow-sm: 0 6px 18px -10px rgba(55,40,110,.34);
    --shadow: 0 26px 60px -30px rgba(45,30,110,.5);
    --font: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }

  .wo {
    font-family: var(--font); color: var(--ink); line-height: 1.5;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
    background:
      radial-gradient(900px 500px at 88% -6%, rgba(139,63,214,.16), transparent 60%),
      radial-gradient(1000px 620px at -8% 4%, rgba(74,159,232,.14), transparent 58%),
      var(--bg);
  }
  .wo-wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
  h1,h2,h3 { margin: 0; letter-spacing: -.022em; text-wrap: balance; }
  a { color: inherit; }

  .eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--brand-2); }
  .eyebrow::before { content:""; width:20px; height:2px; border-radius:2px; background: var(--grad); }
  .gradtext { background: var(--grad); -webkit-background-clip:text; background-clip:text; color: transparent; }

  /* ---------- WORDMARK ---------- */
  .wm { display:inline-flex; align-items:center; gap:11px; font-weight:850; font-size:20px; letter-spacing:-.02em; }
  .wm .mk { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; }
  .wm .mk svg { width:46px; height:46px; }
  .wm.sm .mk { width:34px; height:34px; } .wm.sm .mk svg { width:34px; height:34px; }
  .brandwrap { display:inline-flex; align-items:center; }
  .brand-logo { height:44px; width:auto; display:block; }
  .foot .brand-logo { height:30px; }
  .wm .txt b { color: var(--ink); }
  .wm .txt span { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .wm .txt small { display:block; font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--faint); margin-top:-2px; }

  /* ---------- NAV ---------- */
  .nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0; position:relative; z-index:5; }
  .nav .pill { font-size:12.5px; font-weight:700; color: var(--brand); background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px; box-shadow: var(--shadow-sm); }
  .nav .pill b { color: var(--teal); }

  /* ---------- BUTTONS ---------- */
  .btn { font:inherit; font-weight:800; font-size:14.5px; border-radius:12px; padding:14px 22px; cursor:pointer; border:0; text-decoration:none; display:inline-flex; align-items:center; gap:9px; }
  .btn-primary { color:#fff; background: var(--grad); box-shadow: 0 16px 30px -12px rgba(109,93,246,.7); }
  .btn-ghost { color: var(--brand); background:#fff; border:1px solid var(--line-2); }

  /* ---------- HERO ---------- */
  .hero { display:grid; grid-template-columns: 1.06fr .94fr; gap:44px; align-items:center; padding:26px 0 56px; }
  .hero h1 { font-size: clamp(33px, 5.2vw, 58px); font-weight:850; line-height:1.03; margin-top:16px; }
  .hero .lead { font-size: clamp(15px,1.7vw,18px); color: var(--muted); margin:20px 0 0; max-width:40ch; }
  .hero .segline { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
  .hero .segline span { font-size:12.5px; font-weight:700; color: var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; box-shadow: var(--shadow-sm); }
  .hero .segline span .e { margin-right:5px; }
  .hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

  .stage { position:relative; display:grid; place-items:center; min-height:560px; }
  .halo { position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(31,195,138,.22), rgba(109,93,246,.10) 45%, transparent 66%); animation: breathe 7s ease-in-out infinite; }
  @keyframes breathe { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.08);opacity:1} }

  /* ---------- PHONE ---------- */
  .phone { position:relative; width:288px; height:592px; border-radius:44px; z-index:2; background: linear-gradient(160deg,#20324f,#0f1f38); padding:12px; border:1px solid #2a3d5c; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12); }
  .phone .notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:20px; background:#0c1727; border-radius:0 0 14px 14px; z-index:3; }
  .screen { width:100%; height:100%; border-radius:33px; overflow:hidden; background: var(--surface); position:relative; display:flex; flex-direction:column; }
  .sc-head { padding:22px 15px 13px; background: var(--grad); position:relative; color:#fff; transition: background .5s; }
  .sc-head .row { display:flex; align-items:center; gap:10px; padding-right:64px; }
  .sc-logo { width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:19px; flex:0 0 auto; }
  .sc-name { font-size:14.5px; font-weight:800; display:block; line-height:1.15; }
  .sc-tag { font-size:10.5px; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:5px; }
  .dot-on { width:7px; height:7px; border-radius:50%; background:#c6ffe6; box-shadow:0 0 0 3px rgba(198,255,230,.3); }
  .sc-search { margin-top:11px; background:rgba(255,255,255,.22); border-radius:9px; height:30px; display:flex; align-items:center; padding:0 10px; font-size:11px; color:rgba(255,255,255,.92); gap:7px; }
  .sc-badge { position:absolute; top:14px; right:14px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.22); border-radius:6px; padding:3px 7px; }
  .sc-body { padding:12px 13px; display:flex; flex-direction:column; gap:9px; overflow:hidden; flex:1; }
  .row-item { display:flex; gap:10px; background: var(--surface); border:1px solid var(--line); border-radius:14px; padding:9px; align-items:center; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both; }
  .row-item .thumb { width:46px; height:46px; border-radius:10px; flex:0 0 auto; }
  .row-item .info { flex:1; min-width:0; }
  .row-item .info b { font-size:11.5px; display:block; color: var(--ink); }
  .row-item .info small { font-size:9.5px; color: var(--faint); }
  .row-item .price { font-size:12px; font-weight:800; color: var(--brand); white-space:nowrap; }
  .row-item .price.quote { color: var(--amber); font-size:10.5px; }
  .row-item .add { width:26px; height:26px; border-radius:8px; background: var(--brand); display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; flex:0 0 auto; }
  .row-item .book { font-size:10px; font-weight:800; color:#fff; background: var(--teal); border-radius:8px; padding:6px 10px; white-space:nowrap; }
  .chip-x { font-size:8px; font-weight:800; color:#fff; border-radius:5px; padding:1px 5px; letter-spacing:.03em; }
  .grade-chips { display:flex; gap:4px; margin-top:4px; }
  .grade-chips i { font-style:normal; font-size:8.5px; font-weight:700; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
  .slots { display:flex; gap:5px; margin-top:5px; }
  .slots i { font-style:normal; font-size:9px; font-weight:800; color: var(--brand); background: rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.18); border-radius:6px; padding:3px 7px; }
  .sc-cart { margin:auto 12px 12px; background: var(--brand); border-radius:12px; padding:11px 14px; display:flex; align-items:center; justify-content:space-between; color:#fff; font-weight:800; font-size:12.5px; box-shadow:0 12px 24px -12px rgba(124,58,237,.7); }
  .sc-cart .n { background:rgba(255,255,255,.2); border-radius:999px; padding:2px 8px; font-size:11px; }
  @keyframes fadeUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

  .toast { position:absolute; z-index:4; right:-30px; top:96px; width:214px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 13px; box-shadow: var(--shadow); display:flex; gap:10px; align-items:center; animation: floatY 4.6s ease-in-out infinite; }
  .toast .ic { width:34px; height:34px; border-radius:10px; background: var(--grad); display:grid; place-items:center; font-size:17px; flex:0 0 auto; }
  .toast b { font-size:11.5px; display:block; color: var(--ink); }
  .toast small { font-size:10px; color: var(--muted); }
  .chip-float { position:absolute; z-index:4; font-size:11.5px; font-weight:800; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 13px; display:inline-flex; gap:7px; align-items:center; box-shadow: var(--shadow); color: var(--ink); }
  .chip-float .em { font-size:14px; }
  .cf1 { left:-40px; top:190px; animation: floatY 5s ease-in-out infinite; }
  .cf2 { left:-18px; bottom:120px; animation: floatY 6s ease-in-out .6s infinite; }
  .cf3 { right:-14px; bottom:60px; animation: floatY 5.4s ease-in-out .3s infinite; }
  @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

  /* ---------- MARQUEE ---------- */
  .marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.55); padding:15px 0; overflow:hidden; }
  .marquee .track { display:flex; gap:12px; width:max-content; animation: slide 40s linear infinite; }
  .marquee:hover .track { animation-play-state:paused; }
  .mq { font-size:12.5px; font-weight:700; color: var(--ink-2); white-space:nowrap; display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow: var(--shadow-sm); }
  .mq .em { font-size:15px; }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* ---------- SECTIONS ---------- */
  .band { padding:64px 0; }
  .band-head { max-width:64ch; margin-bottom:40px; }
  .band-head h2 { font-size: clamp(26px,3.6vw,40px); font-weight:850; margin-top:13px; line-height:1.06; }
  .band-head p { color: var(--muted); font-size:16px; margin:15px 0 0; }

  .feat { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
  .feat.rev .fv { order:-1; }
  .feat + .feat { margin-top:44px; padding-top:44px; border-top:1px solid var(--line); }
  .feat h3 { font-size: clamp(21px,2.5vw,27px); font-weight:850; margin-top:11px; }
  .feat ul { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:11px; }
  .feat li { display:flex; gap:11px; font-size:14.5px; align-items:flex-start; }
  .feat li b { font-weight:750; }
  .feat li .d { color: var(--muted); font-weight:500; }
  .tick { width:21px; height:21px; border-radius:7px; flex:0 0 auto; margin-top:1px; display:grid; place-items:center; background: var(--grad-soft); }
  .tick svg { width:12px; height:12px; color: var(--brand-2); }

  .panel { background: var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow: var(--shadow); position:relative; }
  .panel-bar { display:flex; align-items:center; gap:7px; padding:0 4px 13px; }
  .panel-bar .dots { display:flex; gap:5px; }
  .panel-bar .dots i { width:9px; height:9px; border-radius:50%; display:block; }
  .panel-bar b { font-size:12px; color: var(--ink-2); margin-left:6px; }
  .panel-bar .u { margin-left:auto; font-size:10px; font-weight:800; color: var(--brand-2); background: var(--grad-soft); border-radius:7px; padding:3px 9px; }

  /* ---------- PRODUCT FORM (owner) ---------- */
  .pf-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .pf-tabs span { font-size:11.5px; font-weight:800; padding:7px 12px; border-radius:9px; color: var(--muted); background: var(--surface-2); border:1px solid var(--line); }
  .pf-tabs span.on { color:#fff; background: var(--brand); border-color: var(--brand); }
  .pf-row { display:flex; gap:9px; margin-bottom:9px; }
  .fld { flex:1; }
  .fld label { font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--faint); display:block; margin-bottom:3px; }
  .fld .inp { font-size:12px; font-weight:700; color: var(--ink); background: var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:9px 10px; }
  .fld .inp.muted { color: var(--faint); font-weight:600; }
  .qtoggle { display:flex; align-items:center; gap:8px; background: rgba(242,164,23,.1); border:1px solid rgba(242,164,23,.35); border-radius:9px; padding:8px 10px; font-size:11px; font-weight:800; color:#a9740a; }
  .qtoggle .sw { width:30px; height:17px; border-radius:999px; background: var(--gold); position:relative; flex:0 0 auto; }
  .qtoggle .sw::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:#fff; top:2px; right:2px; }
  .grade-build { background: var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:11px; margin-bottom:10px; }
  .grade-build .gh { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; color: var(--ink-2); margin-bottom:9px; }
  .gtag { font-size:10px; font-weight:800; color: var(--brand); background: rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.2); border-radius:7px; padding:3px 9px; }
  .opt-chips { display:flex; flex-wrap:wrap; gap:5px; }
  .opt-chips i { font-style:normal; font-size:10px; font-weight:700; color: var(--ink-2); background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:4px 9px; }
  .opt-chips i.pk { color:#fff; background: var(--brand-2); border-color: var(--brand-2); }
  .vtable { width:100%; border-collapse:collapse; font-size:10.5px; }
  .vtable th { text-align:left; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color: var(--faint); padding:5px 7px; border-bottom:1px solid var(--line); font-weight:800; }
  .vtable td { padding:6px 7px; border-bottom:1px solid var(--line); color: var(--ink-2); font-weight:600; }
  .vtable tr.vrow { animation: fadeUp .45s ease both; }
  .vtable .sw-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
  .vtable .money { font-weight:800; color: var(--brand); font-variant-numeric: tabular-nums; }
  .cursor { position:absolute; width:19px; height:19px; pointer-events:none; z-index:6; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); transition: left .8s cubic-bezier(.5,0,.2,1), top .8s cubic-bezier(.5,0,.2,1); }

  /* ---------- KDS ---------- */
  .kds { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .kcol { background: var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:9px; min-height:170px; }
  .kcol > b { font-size:9px; letter-spacing:.05em; text-transform:uppercase; color: var(--faint); display:flex; align-items:center; gap:6px; }
  .kcol > b i { width:7px; height:7px; border-radius:50%; }
  .tk { background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; margin-top:8px; font-size:10.5px; box-shadow: var(--shadow-sm); }
  .tk .th { display:flex; justify-content:space-between; font-weight:800; color: var(--ink); }
  .tk .th small { color: var(--faint); font-weight:600; }
  .tk .li { color: var(--muted); font-size:10px; margin-top:3px; }
  .tk.newk { animation: dropIn .55s ease both; }
  @keyframes dropIn { from{opacity:0; transform:translateY(-10px) scale(.96)} to{opacity:1; transform:none} }
  .sect { font-size:8px; font-weight:800; border-radius:5px; padding:1px 6px; }

  /* ---------- BOARD (tela de pedidos multi-setor) ---------- */
  .board { background: var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow); overflow:hidden; }
  .board-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line); background: var(--surface-2); }
  .board-title { font-size:14px; font-weight:850; display:flex; align-items:center; gap:9px; color: var(--ink); }
  .board-title .live { font-size:10px; font-weight:800; color: var(--green); }
  .sector-tabs { display:flex; gap:6px; flex-wrap:wrap; }
  .sector-tabs span { font-size:11.5px; font-weight:800; padding:7px 12px; border-radius:9px; color: var(--muted); background:#fff; border:1px solid var(--line); }
  .sector-tabs span.on { color:#fff; background: var(--grad); border:0; }
  .board-note { font-size:11px; color: var(--faint); padding:9px 16px 0; }
  .board-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:13px 16px 16px; overflow-x:auto; }
  .bcol { min-width:142px; }
  .bcol > .h { font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--faint); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
  .bcol > .h i { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
  .bcol > .h b { margin-left:auto; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:0 6px; font-size:9.5px; }
  .tk.cancel { border-color:#f3c0be; background:#fdf0ef; }
  .tk .cbadge { font-size:8.5px; font-weight:800; color:#fff; background: var(--red); border-radius:5px; padding:1px 6px; }
  .tk .creason { font-size:9.5px; color:#b23f3b; margin-top:5px; }
  .tk .creason b { color:#8f2f2b; }

  /* ---------- BOOKING ---------- */
  .cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .cal .d { text-align:center; font-size:10px; font-weight:700; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:7px 0; }
  .cal .d.on { color:#fff; background: var(--grad); border:0; }
  .cal .d small { display:block; font-size:8px; color: var(--faint); font-weight:700; }
  .cal .d.on small { color:rgba(255,255,255,.85); }
  .bslots { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
  .bslots i { font-style:normal; font-size:11px; font-weight:800; color: var(--brand); background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:7px 11px; }
  .bslots i.sel { color:#fff; background: var(--teal); border-color: var(--teal); }
  .bslots i.gone { color: var(--faint); text-decoration:line-through; opacity:.6; }

  /* ---------- LOYALTY ---------- */
  .loy { background: linear-gradient(135deg,#fff7e6,#fdefd0); border:1px solid #f3dca0; border-radius:16px; padding:16px; position:relative; overflow:hidden; }
  .loy::after { content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background: radial-gradient(circle, rgba(242,164,23,.3), transparent 62%); }
  .loy .top { display:flex; justify-content:space-between; align-items:center; }
  .loy .lvl { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#b57d0a; }
  .loy .pts { font-size:38px; font-weight:850; color: var(--ink); letter-spacing:-.03em; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
  .loy .pts span { font-size:14px; color:#b57d0a; font-weight:800; }
  .loy .bar { height:8px; border-radius:999px; background: rgba(180,125,10,.18); overflow:hidden; margin:11px 0 6px; }
  .loy .bar i { display:block; height:100%; width:0; border-radius:999px; background: linear-gradient(90deg,#f2a417,#f0851a); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
  .loy .sub { font-size:11px; color:#a07a2a; }
  .stamps { display:flex; gap:6px; margin-top:14px; }
  .stamp { width:29px; height:29px; border-radius:50%; display:grid; place-items:center; font-size:13px; border:1.5px dashed #d8b25a; color:#c99a2e; }
  .stamp.on { background:#f2a417; border-style:solid; border-color:#f2a417; color:#fff; }
  .loychips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
  .loychips span { font-size:10.5px; font-weight:700; color:#8a6412; background:rgba(242,164,23,.14); border:1px solid rgba(242,164,23,.3); border-radius:999px; padding:5px 11px; }

  /* ---------- DELIVERY MAP ---------- */
  .map { position:relative; height:200px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    background: linear-gradient(rgba(109,93,246,.05),rgba(109,93,246,.05)),
      repeating-linear-gradient(0deg,transparent 0 26px,rgba(124,58,237,.06) 26px 27px),
      repeating-linear-gradient(90deg,transparent 0 26px,rgba(124,58,237,.06) 26px 27px), #eef4fa; }
  .pin { position:absolute; transform:translate(-50%,-100%); font-size:22px; filter:drop-shadow(0 5px 6px rgba(0,0,0,.25)); }
  .moto { position:absolute; font-size:22px; offset-path: path("M 40 160 C 110 120, 150 70, 250 60"); animation: ride 5s ease-in-out infinite alternate; }
  @keyframes ride { to { offset-distance:100%; } }
  .cep { position:absolute; left:12px; bottom:11px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:11px; font-weight:700; box-shadow: var(--shadow-sm); }
  .cep b { color: var(--green); }
  .map .ring { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); border-radius:50%; }
  .map .ring.r1 { width:74px; height:74px; border:1.5px solid rgba(31,184,127,.6); background:rgba(31,184,127,.07); }
  .map .ring.r2 { width:132px; height:132px; border:1.5px dashed rgba(109,93,246,.55); }
  .map .ring.r3 { width:188px; height:188px; border:1.5px dashed rgba(139,63,214,.4); }
  .map .store { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); font-size:20px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.25)); }
  .map .zmoto { position:absolute; left:63%; top:40%; transform:translate(-50%,-50%); font-size:17px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.25)); }
  .map .zlegend { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 9px; font-size:9.5px; font-weight:700; color:var(--ink-2); box-shadow:var(--shadow-sm); }
  .map .zlegend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

  /* ---------- DASHBOARD ---------- */
  .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .kpi { background: var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px; }
  .kpi small { font-size:9px; color: var(--faint); font-weight:800; }
  .kpi b { font-size:16px; display:block; margin-top:2px; color: var(--ink); font-variant-numeric:tabular-nums; }
  .kpi .up { font-size:9px; font-weight:800; color: var(--green); }
  .bars { display:flex; align-items:flex-end; gap:7px; height:104px; margin-top:15px; }
  .bars .b { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
  .bars .b i { width:100%; max-width:20px; border-radius:6px 6px 0 0; height:0; background: var(--grad); transition: height 1.1s cubic-bezier(.2,.7,.2,1); }
  .bars .b small { font-size:8.5px; color: var(--faint); }

  /* ---------- TWO SIDES ---------- */
  .sides { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .side { background: var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow: var(--shadow); }
  .side .cap { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:14px; }
  .side.a .cap { color: var(--brand); background: rgba(124,58,237,.08); }
  .side.b .cap { color: var(--teal); background: rgba(31,195,138,.12); }
  .side h3 { font-size:19px; font-weight:850; }
  .side p { font-size:13.5px; color: var(--muted); margin:8px 0 0; }
  .side ul { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
  .side ul li { display:flex; gap:9px; align-items:center; }
  .side ul li .dot { width:16px; height:16px; border-radius:5px; display:grid; place-items:center; flex:0 0 auto; }
  .side.a li .dot { background: rgba(124,58,237,.1); }
  .side.b li .dot { background: rgba(31,195,138,.14); }
  .side li svg { width:10px; height:10px; }
  .side.a li svg { color: var(--brand); } .side.b li svg { color: var(--teal); }

  /* ---------- FULL FEATURE LIST ---------- */
  .listwrap { background: linear-gradient(165deg,#0c2138,#0a1a2e); border-radius:26px; padding:44px 34px; box-shadow: var(--shadow); position:relative; overflow:hidden; }
  .listwrap::before { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 85% -10%, rgba(31,195,138,.2), transparent 60%), radial-gradient(500px 300px at 0% 110%, rgba(109,93,246,.25), transparent 60%); pointer-events:none; }
  .listwrap .lh { position:relative; margin-bottom:30px; }
  .listwrap .lh .eyebrow { color:#6fe3b8; }
  .listwrap .lh .eyebrow::before { background: linear-gradient(90deg,#6fe3b8,transparent); }
  .listwrap h2 { color:#fff; font-size: clamp(24px,3.3vw,36px); font-weight:850; margin-top:12px; }
  .listwrap .lh p { color:#9fb4cc; font-size:15px; margin-top:12px; max-width:60ch; }
  .grid-feat { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; }
  .fcard { background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px; }
  .fcard .ft { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:850; color:#fff; margin-bottom:12px; }
  .fcard .ft .fi { width:30px; height:30px; border-radius:9px; background: var(--grad); display:grid; place-items:center; font-size:15px; flex:0 0 auto; }
  .fcard ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
  .fcard li { font-size:12px; color:#c3d2e4; display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
  .fcard li::before { content:""; width:5px; height:5px; border-radius:50%; background:#3fd39a; margin-top:6px; flex:0 0 auto; }

  /* ---------- HOW ---------- */
  .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }
  .step { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; position:relative; box-shadow: var(--shadow-sm); }
  .step .no { font-size:12px; font-weight:850; color: var(--brand-2); font-variant-numeric:tabular-nums; }
  .step .em { font-size:25px; display:block; margin:8px 0 9px; }
  .step b { font-size:15px; }
  .step p { font-size:12.5px; color: var(--muted); margin:6px 0 0; }
  .step:not(:last-child)::after { content:"→"; position:absolute; right:-12px; top:50%; transform:translateY(-50%); color: var(--line-2); font-weight:900; z-index:2; }

  /* ---------- CTA ---------- */
  .cta { margin:34px 0 56px; border-radius:28px; padding:54px 40px; text-align:center; position:relative; overflow:hidden; background: var(--grad); box-shadow: var(--shadow); }
  .cta::before { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% -30%, rgba(255,255,255,.28), transparent 60%); }
  .cta h2 { color:#fff; font-size: clamp(27px,4vw,42px); font-weight:850; position:relative; }
  .cta p { color:rgba(255,255,255,.92); font-size:16px; margin:15px auto 0; max-width:48ch; position:relative; }
  .cta .hero-cta { justify-content:center; position:relative; margin-top:26px; }
  .cta .btn-white { color: var(--brand); background:#fff; }
  .cta .btn-line { color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.5); }

  .foot { border-top:1px solid var(--line); padding:26px 0 48px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color: var(--faint); font-size:12.5px; }

  .reveal { opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity:1; transform:none; }

  @media (max-width:920px){
    .hero{grid-template-columns:1fr;} .stage{order:-1;min-height:520px;}
    .feat{grid-template-columns:1fr;gap:22px;} .feat.rev .fv{order:0;}
    .sides{grid-template-columns:1fr;} .grid-feat{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr 1fr;} .step:not(:last-child)::after{display:none;}
  }
  @media (max-width:560px){
    .kds{grid-template-columns:1fr;} .grid-feat{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;} .cf1,.cf3{display:none;} .toast{right:-8px;}
    .kpis{grid-template-columns:repeat(3,1fr);}
  }
  @media (prefers-reduced-motion: reduce){
    .halo,.toast,.chip-float,.moto,.marquee .track,.cursor{animation:none!important; transition:none!important;}
    .reveal{opacity:1; transform:none; transition:none;}
  }