/* ══════════════════════════════════════════════════════════════
   Platoo — editorial landing
   ORYZO structural/animation language · Platoo palette (tokens.ts)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* NIGHT (default) — from tokens.ts darkColors */
  --bg:#0A0E14; --s1:#131820; --s2:#1A2230; --s3:#222C3D;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
  --text:#F5F7FA; --text2:rgba(245,247,250,.70); --text3:rgba(245,247,250,.40);
  --accent:#4DA3FF; --accent2:#2B7BD6; --accentSoft:rgba(77,163,255,.12);
  --indigo:#7E8BD6; --warning:#F5A524; --success:#16C784; --danger:#FF5C5C;
  --plate-bg:#F5F7FA; --plate-text:#0A0E14; --plate-band:#1A4490; --plate-band-text:#FFD200;
  --dash:rgba(255,255,255,.14);
  --card-grad:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  --phone-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
}
:root[data-theme="day"]{
  /* DAY — from tokens.ts dayColors (#FFFFFF · #013399 · #4D5B9C) */
  --bg:#FFFFFF; --s1:#F5F7FC; --s2:#ECF0F9; --s3:#E0E7F4;
  --border:rgba(1,51,153,.10); --border2:rgba(1,51,153,.20);
  --text:#101B33; --text2:rgba(16,27,51,.62); --text3:rgba(16,27,51,.42);
  --accent:#013399; --accent2:#4D5B9C; --accentSoft:rgba(1,51,153,.08);
  --indigo:#4D5B9C; --warning:#B45309; --success:#0E9F6E; --danger:#D64545;
  --dash:rgba(1,51,153,.18);
  --card-grad:linear-gradient(160deg,rgba(1,51,153,.04),rgba(1,51,153,0));
  --phone-shadow:0 40px 90px -34px rgba(1,51,153,.32), 0 0 0 1px rgba(1,51,153,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.4;
  transition:background .5s ease, color .5s ease;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
main section[id],#download{scroll-margin-top:78px}

/* ── ambient background ── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.aura.a1{width:60vw;height:60vw;left:-15vw;top:-20vw;background:radial-gradient(circle,rgba(77,163,255,.22),transparent 70%)}
.aura.a2{width:50vw;height:50vw;right:-15vw;bottom:-10vw;background:radial-gradient(circle,rgba(126,139,214,.16),transparent 70%)}
:root[data-theme="day"] .aura{opacity:.7}
:root[data-theme="day"] .aura.a1{background:radial-gradient(circle,rgba(1,51,153,.10),transparent 70%)}
:root[data-theme="day"] .aura.a2{background:radial-gradient(circle,rgba(77,91,156,.10),transparent 70%)}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 90%);opacity:.6}

.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;background:linear-gradient(90deg,var(--accent),var(--indigo))}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,68px);transition:.35s}
.nav.scrolled{padding-top:12px;padding-bottom:12px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px}
.brand-word{font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-mark{width:30px;height:30px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(77,163,255,.35))}
/* larger brand in the top nav */
.nav .brand{gap:14px}
.nav .brand-mark{width:46px;height:46px}
.nav .brand-word{font-size:21px;letter-spacing:.12em}

.nav-links{display:flex;gap:30px}
.nav-links a{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);transition:.2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--accent);transition:right .25s}
.nav-links a:hover::after{right:0}

.nav-actions{display:flex;align-items:center;gap:14px}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border2);color:var(--text);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:.2s}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--s1);border:1px solid var(--border2);
  border-radius:14px;padding:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:.2s;z-index:90}
.lang-menu.open{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;color:var(--text);
  font:inherit;font-size:13px;padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;transition:.15s}
.lang-menu button .lc{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 5px;border-radius:6px;
  background:var(--s2);border:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--text2)}
.lang-menu button.sel .lc{background:var(--accentSoft);border-color:var(--accent);color:var(--accent)}
.lang-menu button:hover{background:var(--s2)}
.lang-menu button.sel{color:var(--accent);background:var(--accentSoft)}

.theme-toggle{background:none;border:none;cursor:pointer;padding:0}
.tt-track{display:block;width:48px;height:24px;border-radius:999px;background:var(--s2);border:1px solid var(--border2);position:relative;transition:.3s}
.tt-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:left .3s cubic-bezier(.3,1.4,.5,1);box-shadow:0 2px 6px rgba(0,0,0,.3);
  --tt-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E");--tt-col:#26324E}
:root[data-theme="day"] .tt-thumb{left:28px;--tt-col:#F5A524;
  --tt-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M1.5 12h2.6M19.9 12h2.6M4.3 4.3l1.8 1.8M17.9 17.9l1.8 1.8M19.7 4.3l-1.8 1.8M6.1 17.9l-1.8 1.8'/%3E%3C/svg%3E")}
.tt-thumb::after{content:"";position:absolute;inset:0;background:var(--tt-col);
  -webkit-mask:var(--tt-ic) center/12px 12px no-repeat;mask:var(--tt-ic) center/12px 12px no-repeat}

.btn-pill{display:inline-flex;align-items:center;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;border-radius:999px;
  box-shadow:0 10px 26px -12px var(--accent);transition:.25s}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px var(--accent)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.burger.on span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.on span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-sheet{position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);z-index:79;background:var(--s1);border-left:1px solid var(--border2);
  transform:translateX(100%);transition:.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:6px;padding:96px 26px}
.mobile-sheet.open{transform:none;box-shadow:-30px 0 60px -30px rgba(0,0,0,.6)}
.mobile-sheet a{font-size:16px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--border);letter-spacing:.02em}
.mobile-sheet .sheet-cta{margin-top:16px;border:none;text-align:center;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;border-radius:999px;text-transform:uppercase;font-size:13px;letter-spacing:.06em}

.sidebar-label{position:fixed;right:14px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--text3);z-index:40;pointer-events:none}

/* ══ shared type ══ */
.kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.heading{font-weight:800;font-size:clamp(26px,3.7vw,37px);line-height:1;letter-spacing:-.015em}
.heading.center{text-align:center}
.heading.caps{text-transform:uppercase;font-size:clamp(30px,4.4vw,44px);line-height:.96;letter-spacing:-.02em}
.display{font-weight:900;font-size:clamp(44px,8vw,92px);line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.display.center{text-align:center}
.accent-line{background:linear-gradient(100deg,var(--accent),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
.body{font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--text2);font-weight:400}
.body.center{text-align:center;max-width:620px;margin:0 auto}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;padding:15px 28px;border-radius:999px;box-shadow:0 16px 40px -16px var(--accent);transition:.25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -16px var(--accent)}
.btn-ghost{display:inline-flex;align-items:center;background:transparent;border:1px solid var(--border2);color:var(--text);
  font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:14px 26px;border-radius:999px;transition:.25s;cursor:pointer}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.divider{display:block;height:0;border-top:1px dashed var(--dash);margin:0 clamp(20px,6vw,120px)}

.ticks{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:14px}
.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--text);font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--accentSoft);border:1px solid var(--accent)}
.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:6px;height:3px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.ticks.danger li::before{background:rgba(255,92,92,.12);border-color:var(--danger)}
.ticks.danger li::after{border-color:var(--danger)}

/* ══ reveal animation ══ */
.js .reveal{opacity:0;transform:translateY(52px) scale(.9) rotateX(10deg);filter:blur(7px);transform-origin:center 70%;
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.16,.8,.24,1),filter .9s ease}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js.noanim .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
.js.noanim .hero,.js.noanim .reveal-sec,.js.noanim .daynight,.js.noanim .download{min-height:auto !important}
.js.noanim .phone{animation:none;transform:rotateY(-5deg) rotateX(1deg)}
.js.noanim .hero-phone .phone{transform:rotateY(-25deg) rotateX(5deg)}

/* ══ HERO ══ */
main{position:relative;z-index:1}
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:1fr auto;
  align-items:center;gap:0 clamp(24px,4vw,60px);padding:120px clamp(20px,6vw,90px) 60px;position:relative}
.hero-copy{grid-column:1;grid-row:1;min-width:0}
.hero .display{overflow-wrap:break-word}
.hero-phone{grid-column:2;grid-row:1/3;justify-self:center;align-self:start;margin-top:18px;position:relative;perspective:1150px;perspective-origin:60% 50%}
.hero-info{grid-column:1;grid-row:2;max-width:360px}
.hero .display{font-size:clamp(38px,6vw,72px)}

.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border2);border-radius:999px;padding:7px 15px;
  font-size:12.5px;font-weight:500;color:var(--text2);letter-spacing:.02em;margin-bottom:26px}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(22,199,132,.18)}
.hero h1{margin:0 0 22px}
.lede{max-width:520px;font-size:clamp(16px,1.5vw,19px);color:var(--text2);line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-feats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:42px;max-width:640px}
.feat{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.feat svg{flex-shrink:0}
.feat>span{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.005em}
.feat-div{width:1px;height:36px;background:var(--border2);flex-shrink:0}
.hero-stats{display:flex;align-items:center;gap:22px;margin-top:44px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:3px}
.stat-n{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--accent)}
.stat-l{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.stat-div{width:1px;height:34px;background:var(--border2)}

.hero-info{display:flex;flex-direction:column;gap:12px;background:var(--card-grad);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-top:34px}
.ii-head{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.ii-body{font-size:14px;color:var(--text2);line-height:1.5}
.dash{height:0;border-top:1px dashed var(--dash)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text3)}
.mouse{width:20px;height:32px;border:1.5px solid var(--text3);border-radius:12px;position:relative}
.wheel{position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--accent);transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,-3px)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,7px)}}

/* ══ reveal sections (3-col: text / phone / text) ══ */
.reveal-sec{min-height:100vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,64px);
  padding:90px clamp(20px,6vw,90px);position:relative}
.reveal-sec .sec-text.left{text-align:right;justify-self:end;max-width:420px}
.reveal-sec .sec-text.right{max-width:440px}
.reveal-sec.alt{direction:rtl}
.reveal-sec.alt>*{direction:ltr}
.sec-object{perspective:1400px;justify-self:center}
.sec-text.left .icon3d{margin-left:auto}

/* ══ 3D animated feature icons ══ */
.icon3d{display:block;width:70px;height:70px;object-fit:contain;margin-bottom:22px;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));animation:floaty 5s ease-in-out infinite}
:root[data-theme="day"] .icon3d{filter:drop-shadow(0 16px 24px rgba(1,51,153,.22))}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-2.5deg)}}

/* ══ Unified section label icons — 3D chips (one visual language) ══ */
.sec-ic{--c1:var(--accent);--c2:var(--accent2);--c3:var(--indigo);
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;
  margin-bottom:22px;color:#fff;position:relative;
  background:linear-gradient(150deg,var(--c1),var(--c2) 58%,var(--c3));
  box-shadow:0 14px 26px -8px color-mix(in srgb,var(--c1) 58%,transparent),
    0 2px 4px rgba(0,0,0,.22),inset 0 1px 1px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.18);
  animation:floaty 5.5s ease-in-out infinite}
.sec-ic::before{content:"";position:absolute;inset:1px;border-radius:17px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.05) 46%,transparent 62%)}
.sec-ic svg{position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.sec-text.left .sec-ic{margin-left:auto}
.sec-ic.i-blue{--c1:var(--accent);--c2:var(--accent2);--c3:var(--indigo)}
.sec-ic.i-indigo{--c1:var(--indigo);--c2:var(--accent2);--c3:var(--accent)}
.sec-ic.i-violet{--c1:#7E8BD6;--c2:#5B67B0;--c3:#4D5B9C}
.sec-ic.i-green{--c1:#16C784;--c2:#0E9F6E;--c3:#0B7F58}
.sec-ic.i-red{--c1:#FF6B6B;--c2:#E24A4A;--c3:#C43B3B}
.sec-ic.i-amber{--c1:#F7B23B;--c2:#F5A524;--c3:#D6820F}

/* Auto-Expenses flipping coin — premium 3D gold, currency ↔ repair */
.sec-coin{display:block;position:relative;width:64px;height:64px;margin-bottom:22px;perspective:720px}
.sec-text.left .sec-coin{margin-left:auto}
.sec-coin-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:coinSeq 20.1s infinite}
.sec-coin-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:radial-gradient(128% 128% at 36% 24%,#FFF1C4 0%,#F4C452 44%,#C68A22 100%);
  box-shadow:0 14px 26px -8px rgba(150,100,20,.5),0 2px 5px rgba(0,0,0,.28),
    inset 0 0 0 2px rgba(255,255,255,.42),inset 0 0 0 4px rgba(120,80,20,.36),
    inset 0 0 0 5.4px rgba(255,240,190,.28),
    inset 0 2px 2px rgba(255,255,255,.55),inset 0 -5px 9px rgba(120,70,10,.42)}
.sec-coin-face::before{content:"";position:absolute;left:14%;right:14%;top:9%;height:40%;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));filter:blur(1px)}
.sec-coin-face.back{transform:rotateY(180deg)}
.sec-coin-face .cur-sym{font-family:'Inter',system-ui,sans-serif;font-size:39px;font-weight:800;line-height:1;
  color:#7A4E10;text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 1px rgba(90,55,8,.5)}
/* The manat glyph (₼) is short & top-heavy in fallback fonts, so at 39px it looks
   small and sits high. Only for AZ: enlarge a touch and nudge down to centre it.
   Other currencies ($ ₽ ₺) are untouched. */
:root[data-lang="az"] .sec-coin-face .cur-sym{font-size:44px;transform:translateY(-2px)}
.sec-coin-face svg{color:#7A4E10;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 -1px 1px rgba(90,55,8,.45))}
@keyframes coinSeq{
  0%    {transform:rotateY(0deg);animation-timing-function:cubic-bezier(.2,.55,.3,1)}       /* 1 fast spin, 3s */
  14.9% {transform:rotateY(900deg)}                                                         /* stop on repair */
  29.9% {transform:rotateY(900deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}     /* 3s pause -> normal flip 1 */
  33.3% {transform:rotateY(1080deg)}                                                        /* currency */
  48.3% {transform:rotateY(1080deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}    /* 3s pause -> normal flip 2 */
  51.7% {transform:rotateY(1260deg)}                                                        /* repair */
  66.7% {transform:rotateY(1260deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}    /* 3s pause -> normal flip 3 */
  70.2% {transform:rotateY(1440deg)}                                                        /* currency */
  85.1% {transform:rotateY(1440deg);animation-timing-function:cubic-bezier(.2,.55,.3,1)}    /* 3s pause -> 1 fast spin, 3s */
  100%  {transform:rotateY(2160deg)}                                                        /* currency, seamless loop */
}

/* Day & Night section icon — flipping coin (Day face / Night face) with pauses */
.daynight .dn-coin{display:block;position:relative;width:64px;height:64px;margin:0 auto 22px;perspective:640px}
.dn-spin{position:absolute;inset:0;transform-style:preserve-3d;
  animation:coinFlip 6s ease-in-out infinite}
.dn-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:18px;color:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 14px 26px -8px rgba(0,0,0,.32),0 2px 4px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.18)}
.dn-face::before{content:"";position:absolute;inset:1px;border-radius:17px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.05) 46%,transparent 62%)}
.dn-face svg{position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.dn-day{background:radial-gradient(125% 125% at 62% 24%,#FFD877 0%,#F5A524 52%,#DC7C08 100%)}
.dn-night{background:radial-gradient(125% 125% at 62% 24%,#3E5FB4 0%,#1B2C6A 50%,#0A1230 100%);transform:rotateY(180deg)}
@keyframes coinFlip{
  0%,32%{transform:rotateY(0deg)}
  50%,82%{transform:rotateY(180deg)}
  100%{transform:rotateY(360deg)}
}

/* ══ App-store badges (official-style black) ══ */
.appbadge{display:inline-flex;align-items:center;gap:9px;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:9px 16px;min-width:150px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.appbadge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55);box-shadow:0 12px 26px -12px rgba(0,0,0,.9)}
.appbadge .ab-logo{flex-shrink:0}
.ab-tx{display:flex;flex-direction:column;line-height:1.08;text-align:left}
.ab-tx em{font-size:9.5px;font-style:normal;letter-spacing:.01em;opacity:.9;text-transform:none;font-weight:400;color:#fff}
.ab-tx b{font-size:16px;font-weight:600;letter-spacing:.01em;margin-top:1px;color:#fff}
.appbadge.sm{padding:7px 13px;min-width:0;border-radius:10px}
.appbadge.sm .ab-tx em{font-size:8.5px}
.appbadge.sm .ab-tx b{font-size:13.5px}

/* ══ Hero store row + social proof ══ */
.hero-store{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.social-proof{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:14px;color:var(--text2);flex-wrap:wrap}
.social-proof .stars{color:#fbbf24;letter-spacing:2px;font-size:13px;line-height:1}
.social-proof b{color:var(--text);font-weight:700;font-size:13.5px}
.social-proof .sp-dot{opacity:.5}
.center-proof{justify-content:center;margin-top:6px}

/* ══ ABOUT page ══ */
.about-main{padding-top:clamp(118px,15vh,172px);position:relative;z-index:1}
.about-wrap{max-width:940px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.about-hero{text-align:center;padding-bottom:clamp(38px,6vw,64px)}
.about-hero .kicker{margin-bottom:20px}
.about-hero .display{font-size:clamp(36px,6vw,72px);margin:0 auto 30px;max-width:16ch}
.about-lede{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.about-lede p{font-size:clamp(15px,1.5vw,18px);line-height:1.72;color:var(--text2)}
.about-lede p b,.about-lede p strong{color:var(--text);font-weight:700}

.about-do{padding:clamp(50px,8vw,88px) 0}
.about-do .heading{margin-bottom:clamp(32px,5vw,52px)}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,26px)}
.feature-card{background:var(--card-grad);border:1px solid var(--border);border-radius:20px;padding:clamp(24px,3vw,34px);transition:transform .3s,border-color .3s}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.feature-card .icon3d{width:62px;height:62px;margin-bottom:18px}
.feature-card h3{font-size:clamp(18px,1.9vw,22px);font-weight:800;letter-spacing:-.01em;margin-bottom:12px;line-height:1.18}
.feature-card p{font-size:14.5px;line-height:1.64;color:var(--text2)}

.about-mission{padding:clamp(38px,6vw,68px) 0 clamp(74px,10vw,112px);text-align:center}
.about-mission .heading{margin-bottom:26px}
.about-mission .about-lede{gap:22px}
.mission-close{font-size:clamp(19px,2.3vw,26px);font-weight:800;line-height:1.32;color:var(--text);letter-spacing:-.01em;margin-top:6px}

@media(max-width:720px){ .feature-grid{grid-template-columns:1fr} }

/* ══ PHONE MOCKUP ══ */
.phone{width:288px;border-radius:37px;padding:5px;background:linear-gradient(160deg,#20242e,#0c0f16);
  box-shadow:var(--phone-shadow);transform-style:preserve-3d;will-change:transform;
  animation:phoneFloat 7s ease-in-out infinite}
.phone:hover{animation-play-state:paused}
@keyframes phoneFloat{
  0%,100%{transform:translateY(0) rotateY(-6deg) rotateX(2deg)}
  50%{transform:translateY(-18px) rotateY(6deg) rotateX(-2deg)}
}
#chat .phone{animation-delay:-2s}
#nearby .phone{animation-delay:-5.5s}
#sos .phone{animation-delay:-4s}
#pitstop .phone{animation-delay:-1.2s}
#groups .phone{animation-delay:-3.4s}

/* hero phone — turned ~40° to the left, still floating in 3D */
.hero-phone .phone{animation:heroFloat 8s ease-in-out infinite}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotateY(-26deg) rotateX(5deg) rotateZ(-1.5deg)}
  50%{transform:translateY(-20px) rotateY(-20deg) rotateX(3deg) rotateZ(1deg)}
}
:root[data-theme="day"] .phone{background:linear-gradient(160deg,#c6cfe0,#e9eef8)}
.phone .screen{position:relative;border-radius:32px;overflow:hidden;background:var(--bg);height:562px;
  border:1px solid var(--border);display:flex;flex-direction:column}
.phone .screen.dim::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:5}
:root[data-theme="day"] .phone .screen.dim::after{background:rgba(16,27,51,.28)}

/* app header */
.app-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.app-head b{font-size:17px;font-weight:700}
.app-head.col{align-items:flex-start}
.app-head.col em{display:block;font-size:11px;color:var(--text3);font-style:normal;margin-top:2px}
.burger-ic{font-size:16px;color:var(--text2)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.head-right em{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--accent);font-style:normal}
.mini-switch{width:30px;height:17px;border-radius:999px;background:var(--s3);position:relative}
.mini-switch.on{background:var(--accent)}
.mini-switch.on::after{content:"";position:absolute;right:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.app-search{margin:12px 14px;padding:11px 14px;background:var(--s1);border:1px solid var(--border);border-radius:12px;font-size:13px;color:var(--text3);flex-shrink:0}

/* avatars */
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0;position:relative;box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.avatar.sm{width:34px;height:34px;font-size:13px}
.avatar.grp{border-radius:50%}
.avatar::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--text3);border:2px solid var(--bg)}
.avatar.online::after{background:var(--success);box-shadow:0 0 0 3px rgba(22,199,132,.22)}

/* contacts */
.contact-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.c-info{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.c-info b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.contact-row .ic-msg{margin-left:auto}
.ic-msg{width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.ic-msg svg{opacity:.9}

/* plate badges */
.plate.mini{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden;font-family:'JetBrains Mono',monospace;line-height:1;border:1px solid var(--border2)}
.plate.mini .pl-band{background:var(--plate-band);color:var(--plate-band-text);font-size:7.5px;font-weight:700;padding:0 4px;display:flex;align-items:center;letter-spacing:.04em}
.plate.mini .pl-num{background:var(--plate-bg);color:var(--plate-text);font-size:10px;font-weight:600;letter-spacing:1px;padding:3px 6px}
.plate.mini.blue{border:1px solid var(--accent);border-radius:7px}
.plate.mini.blue .pl-num{background:transparent;color:var(--accent)}
.plate.mini.plain{border:none;border-radius:0}
.plate.mini.plain .pl-num{background:transparent;color:var(--text3);font-size:11px;letter-spacing:1.3px;padding:0}
.plate.mini.chip .pl-num{background:var(--plate-bg);color:var(--plate-text);border-radius:5px;font-size:10px;letter-spacing:1px;padding:3px 7px}
.plate.mini.chip{border:none}

/* add card */
.add-card{margin:20px 16px auto;background:var(--card-grad);border:1px solid var(--border);border-radius:15px;padding:14px}
.add-card b{display:block;text-align:center;font-size:13.5px;font-weight:700;white-space:nowrap;margin-bottom:11px}
.add-row{display:flex;gap:8px}
.input-pill{flex:1;padding:10px 13px;background:var(--s1);border:1px solid var(--border);border-radius:11px;font-size:12.5px;color:var(--text3)}
.input-pill.wide{flex:1}
.ic-search{width:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;border-radius:11px;flex-shrink:0}

/* fab + tabbar */
.fab{position:absolute;right:18px;bottom:74px;width:52px;height:52px;border-radius:50%;z-index:4;
  background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px var(--accent)}
.tabbar{margin-top:auto;display:flex;justify-content:space-around;padding:14px 0 18px;border-top:1px solid var(--border);flex-shrink:0}
.tab{width:22px;height:22px;border-radius:6px;background:var(--s3);opacity:.5}
.tab.on{background:var(--accent);opacity:1}

/* chat */
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-head .back{font-size:22px;color:var(--text2);margin-right:-2px}
.chat-head-info{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.chat-head-info b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-info .seen{font-size:10.5px;color:var(--text3);font-style:normal}
.chat-head-info .seen.online{color:var(--success)}
.chat-head .dots{margin-left:auto;color:var(--text2);font-size:18px}
.chat-sys{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--s1);font-size:11px;color:var(--text2);line-height:1.35;flex-shrink:0}
.chat-sys .ic-timer{color:var(--accent);flex-shrink:0}
.chat-body{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.bubble{max-width:80%;padding:9px 12px;border-radius:16px;font-size:12.5px;line-height:1.4;position:relative}
.bubble em{display:block;font-style:normal;font-size:9px;margin-top:4px;opacity:.6;text-align:right}
.bubble.in{align-self:flex-start;background:var(--s2);border-bottom-left-radius:5px}
.bubble.out{align-self:flex-end;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;border-bottom-right-radius:5px}
.typing{align-self:flex-start;display:flex;gap:4px;background:var(--s2);padding:11px 13px;border-radius:16px;border-bottom-left-radius:5px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text3)}
.chat-empty .ce-ic{opacity:.4}
.chat-empty span{font-size:13px}
.chat-input{display:flex;align-items:center;gap:8px;padding:12px 14px 16px;border-top:1px solid var(--border);flex-shrink:0}
.chat-input .input-pill{border-radius:999px}
.ic-round{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-round.ghost{background:transparent;border:1px solid var(--border2);color:var(--text2)}

/* SOS dialog */
.sos-dialog{margin:auto 18px;background:var(--s1);border:1px solid var(--border);border-radius:18px;padding:22px 20px;text-align:center;position:relative;z-index:6}
.sos-badge{width:52px;height:52px;border-radius:50%;background:rgba(255,92,92,.14);color:var(--danger);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,92,.35)}50%{box-shadow:0 0 0 10px rgba(255,92,92,0)}}
.sos-dialog b{display:block;font-size:16px;font-weight:700;margin-bottom:8px}
.sos-dialog p{font-size:11.5px;color:var(--text2);line-height:1.45;margin-bottom:16px}
.sos-actions{display:flex;gap:9px}
.btn-cancel,.btn-send{flex:1;padding:11px;border-radius:12px;font-size:13px;font-weight:600;text-align:center}
.btn-cancel{border:1px solid var(--border2);color:var(--text2)}
.btn-send{background:var(--danger);color:#fff}

/* pitstop */
.pit-car{display:flex;align-items:center;gap:9px;padding:12px 16px}
.pit-car b{font-size:14px;font-weight:700}
.pit-car .plate{margin-left:auto}
.pit-car .ic-gauge{color:var(--accent)}
.pit-summary{display:flex;align-items:center;gap:14px;margin:4px 16px 16px;background:var(--card-grad);border:1px solid var(--border);border-radius:16px;padding:16px}
.pit-summary em{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-style:normal;margin-bottom:6px}
.pit-summary b{font-size:19px;font-weight:800}
.pit-summary .muted{opacity:.6}
.ps-div{width:1px;align-self:stretch;background:var(--border2)}
.pit-break{display:flex;align-items:center;gap:16px;margin:0 16px;background:var(--card-grad);border:1px solid var(--border);border-radius:16px;padding:18px}
.donut{width:100px;height:100px;border-radius:50%;flex-shrink:0;position:relative;
  background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--s3) 0)}
.donut-hole{position:absolute;inset:13px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-hole b{font-size:22px;font-weight:800}
.donut-hole em{font-size:9px;color:var(--text3);font-style:normal}
.legend{list-style:none;flex:1;display:flex;flex-direction:column;gap:11px}
.legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
.legend li b{margin-left:auto;color:var(--text);font-weight:700}
.legend .dot{width:9px;height:9px;border-radius:50%;background:var(--c)}

/* Pitstop — full Car Expenses screen (HTML, so plate + currency are live) */
.phone .screen.pit-screen{height:auto}
.pit-body{display:flex;flex-direction:column;padding-bottom:6px}
.pit-screen .pit-car{padding:8px 14px 5px}
.pit-screen .pit-car b{font-size:14px}
.pit-screen .pit-summary{position:relative;overflow:hidden;margin:2px 14px 6px;padding:8px 14px}
.pit-summary::after{content:"";position:absolute;right:-24px;top:-34px;width:92px;height:92px;border-radius:50%;background:var(--accentSoft)}
.pit-screen .pit-summary b{font-size:17px}
.pit-screen .pit-break{margin:0 14px 3px;padding:9px;gap:9px}
.pit-screen .donut{width:66px;height:66px}
.pit-screen .donut-hole{inset:9px}
.pit-screen .donut-hole b{font-size:15px}
.pit-screen .legend{gap:9px}
.pit-screen .legend li{font-size:10px;gap:6px}
.pit-screen .legend li>span:not(.dot){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pit-screen .legend li b{margin-left:auto;padding-left:6px;flex-shrink:0}
.pit-actions{display:flex;gap:8px;margin:0 14px 7px}
.pit-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border:1px solid var(--border);border-radius:11px;font-size:11.5px;font-weight:600;color:var(--text);background:var(--card-grad)}
.pit-btn svg{color:var(--text2);flex-shrink:0}
.pit-label{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text3);font-weight:600;margin:0 14px 5px}
.pit-oil{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 14px 7px;padding:8px;border:1px solid var(--border2);border-radius:12px;color:var(--accent);font-size:12.5px;font-weight:600;background:var(--accentSoft)}
.pit-oil svg{flex-shrink:0}
.pit-hist{display:flex;align-items:center;justify-content:space-between;margin:1px 14px 4px}
.pit-hist .pit-label{margin:0}
.pit-filt{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2)}
.pit-search{display:flex;align-items:center;gap:8px;margin:0 14px 5px;padding:7px 11px;background:var(--s1);border:1px solid var(--border);border-radius:11px;color:var(--text3);font-size:11.5px}
.pit-search svg{color:var(--text3);flex-shrink:0}
.pit-row{display:flex;align-items:center;gap:10px;margin:0 14px;padding:4px 0;border-top:1px solid var(--border)}
.pit-fuel{width:30px;height:30px;border-radius:9px;background:var(--accentSoft);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.pit-row-info{display:flex;flex-direction:column;gap:2px}
.pit-row-info b{font-size:13px;font-weight:600}
.pit-row-info em{font-size:10px;color:var(--text3);font-style:normal}
.pit-amt{margin-left:auto;font-size:13px;font-weight:700}
.pit-add{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 14px 4px;
  background:linear-gradient(150deg,var(--accent),var(--accent2));color:#fff;padding:8px;border:none;border-radius:12px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 12px 24px -12px var(--accent)}
.pit-fuel.amber{background:rgba(245,165,36,.14);color:#F5A524}
.pit-fuel.green{background:rgba(22,199,132,.14);color:#16C784}
.pit-screen .pit-body{padding-bottom:10px}
/* app-style bottom tab bar (like the real Platoo app) — shared by all phone mockups */
.app-tabbar{margin-top:auto;display:flex;justify-content:space-around;align-items:flex-start;gap:4px;
  padding:10px 6px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);
  background:var(--bg);flex-shrink:0}
.app-tab{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text3);
  font-size:9.5px;font-weight:600;letter-spacing:.01em}
.app-tab em{font-style:normal}
.app-tab svg{width:21px;height:21px}
.app-tab.on{color:var(--accent)}

/* Auto Expenses phone: wider frame, whole mockup scaled down a touch */
#pitstop .phone{width:360px;animation-name:pitFloat}
@keyframes pitFloat{
  0%,100%{transform:translateY(0) rotateY(-6deg) rotateX(2deg) scale(.9)}
  50%{transform:translateY(-16px) rotateY(6deg) rotateX(-2deg) scale(.9)}
}
.js.noanim #pitstop .phone{transform:rotateY(-5deg) rotateX(1deg) scale(.9)}

/* nearby */
.near-sub{text-align:center;font-size:12px;color:var(--text3);padding:2px 16px 4px;flex-shrink:0}
.near-radar{position:relative;height:150px;margin:8px 16px 10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.near-radar .rr{position:absolute;border:1px solid var(--border2);border-radius:50%}
.near-radar .rr.r1{width:52px;height:52px}
.near-radar .rr.r2{width:98px;height:98px}
.near-radar .rr.r3{width:144px;height:144px;border-style:dashed;border-color:var(--border)}
.near-radar .sweep{position:absolute;width:144px;height:144px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(77,163,255,.28), transparent 55%);
  -webkit-mask:radial-gradient(circle,transparent 8px,#000 8px);mask:radial-gradient(circle,transparent 8px,#000 9px);
  animation:sweep 3.2s linear infinite}
:root[data-theme="day"] .near-radar .sweep{background:conic-gradient(from 0deg, rgba(1,51,153,.20), transparent 55%)}
@keyframes sweep{to{transform:rotate(360deg)}}
.near-radar .me{width:14px;height:14px;border-radius:50%;background:var(--accent);z-index:3;box-shadow:0 0 0 5px var(--accentSoft)}
.near-radar .blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--success);z-index:2;box-shadow:0 0 0 3px rgba(22,199,132,.22);animation:blip 2.4s ease-in-out infinite}
.near-radar .blip.b1{top:30px;left:46%;animation-delay:.1s}
.near-radar .blip.b2{bottom:34px;left:33%;animation-delay:.9s}
.near-radar .blip.b3{top:44%;right:34px;animation-delay:1.6s}
@keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
.near-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.near-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;position:relative;background:linear-gradient(150deg,var(--a),var(--b));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.near-av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--success);border:2px solid var(--bg)}
.near-info{display:flex;flex-direction:column;gap:3px}
.near-info b{font-size:14px;font-weight:600;white-space:nowrap}
.near-tag{font-size:10px;font-style:normal;font-weight:600;letter-spacing:.04em;color:var(--success);
  background:rgba(22,199,132,.12);padding:2px 7px;border-radius:999px;align-self:flex-start}
.near-row .ic-msg{margin-left:auto}

/* groups */
.group-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}
.group-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.group-info b{font-size:15px;font-weight:700}
.group-info em{font-size:12px;color:var(--text3);font-style:normal}
.group-row .chev{margin-left:auto;color:var(--text3);font-size:20px}
.grp-av{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:16px;background:linear-gradient(150deg,var(--a),var(--b))}
.gr-top{display:flex;align-items:center;gap:8px}
.gr-top b{font-size:13.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-time{font-size:10px;color:var(--text3);font-style:normal;flex-shrink:0}
.gr-bot{display:flex;align-items:center;gap:8px}
.gr-msg{font-size:11.5px;color:var(--text2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-count{flex-shrink:0;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--accentSoft);
  color:var(--accent);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* real profile photos (chat, contacts, nearby, groups) */
.avatar.photo,.near-av.photo,.grp-av.photo{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent;font-size:0;overflow:hidden}
.avatar.photo::first-letter,.near-av.photo::first-letter{color:transparent}

.phone-glow{position:absolute;inset:-30px;z-index:-1;border-radius:60px;background:radial-gradient(circle at 50% 40%,var(--accentSoft),transparent 70%);filter:blur(30px)}

/* ══ PRIVACY ══ */
.privacy{padding:110px clamp(20px,6vw,90px)}
.priv-head{text-align:center;max-width:720px;margin:0 auto 54px;display:flex;flex-direction:column;align-items:center}
.priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto}
.priv-card{background:var(--card-grad);border:1px solid var(--border);border-radius:18px;padding:26px 24px;transition:.3s;position:relative;overflow:hidden;perspective:700px}
.priv-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.priv-card h3{font-size:16px;font-weight:700;margin:16px 0 8px}
.priv-card p{font-size:13.5px;color:var(--text2);line-height:1.5}
/* 3D animated icon chips — Platoo palette */
.pc-ic{
  --c1:var(--accent); --c2:var(--accent2); --c3:var(--indigo);
  width:56px;height:56px;border-radius:16px;display:block;position:relative;
  background:linear-gradient(150deg,var(--c1),var(--c2) 58%,var(--c3));
  box-shadow:
    0 12px 22px -8px color-mix(in srgb,var(--c1) 65%,transparent),
    0 2px 4px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -4px 7px rgba(0,0,0,.18);
  transform-style:preserve-3d;
  animation:pcFloat 6s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s}
/* glossy top light */
.pc-ic::before{content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 46%,transparent 62%)}
/* embossed white glyph */
.pc-ic::after{content:"";position:absolute;inset:0;background:#fff;
  -webkit-mask:var(--g) center/26px 26px no-repeat;mask:var(--g) center/26px 26px no-repeat;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));transition:transform .4s}
/* hover: real 3D tilt + pop */
.priv-card:hover .pc-ic{
  transform:translateY(-2px) rotateX(15deg) rotateY(-15deg) scale(1.07);
  box-shadow:
    0 20px 32px -10px color-mix(in srgb,var(--c1) 72%,transparent),
    0 3px 6px rgba(0,0,0,.26),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -4px 9px rgba(0,0,0,.2)}
.priv-card:hover .pc-ic::after{transform:translateZ(14px) scale(1.06)}
/* per-icon palette rotation (on-brand) + staggered float */
.pc-ic[data-glyph="lock"]  {--c1:var(--accent);--c2:var(--accent2);--c3:var(--indigo);animation-delay:0s}
.pc-ic[data-glyph="preset"]{--c1:var(--indigo);--c2:var(--accent);--c3:var(--accent2);animation-delay:.5s}
.pc-ic[data-glyph="dnd"]   {--c1:var(--accent2);--c2:var(--indigo);--c3:var(--accent);animation-delay:1s}
.pc-ic[data-glyph="who"]   {--c1:var(--accent);--c2:var(--indigo);--c3:var(--accent2);animation-delay:1.5s}
.pc-ic[data-glyph="timer"] {--c1:var(--indigo);--c2:var(--accent2);--c3:var(--accent);animation-delay:2s}
.pc-ic[data-glyph="pin"]   {--c1:var(--accent2);--c2:var(--accent);--c3:var(--indigo);animation-delay:2.5s}
@keyframes pcFloat{
  0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
  50%{transform:translateY(-5px) rotateX(7deg) rotateY(-6deg)}}
@media (prefers-reduced-motion:reduce){.pc-ic{animation:none}}
.pc-ic[data-glyph="lock"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.pc-ic[data-glyph="preset"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M7 21l3-3' stroke-linecap='round'/%3E%3Cpath d='M7 9h10M7 13h6'/%3E%3C/svg%3E")}
.pc-ic[data-glyph="dnd"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12h6' stroke-linecap='round'/%3E%3C/svg%3E")}
.pc-ic[data-glyph="who"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E")}
.pc-ic[data-glyph="timer"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 1.5M9 3h6' stroke-linecap='round'/%3E%3C/svg%3E")}
.pc-ic[data-glyph="pin"]{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='9' width='16' height='12' rx='2'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E")}

/* ══ DAY & NIGHT ══ */
.daynight{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px clamp(20px,6vw,90px);gap:6px}
.daynight .body{margin-bottom:12px}
.dn-switch{display:inline-flex;align-items:center;margin-top:20px;background:none;border:none;cursor:pointer;padding:0}
.dn-switch .tt-track{width:78px;height:34px}
.dn-switch .tt-thumb{width:27px;height:27px;top:4px;left:4px}
:root[data-theme="day"] .dn-switch .tt-thumb{left:47px}
.dn-switch .tt-thumb::after{-webkit-mask-size:16px 16px;mask-size:16px 16px}

/* ══ FAQ ══ */
.faq{padding:100px clamp(20px,6vw,90px);max-width:1000px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,60px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px dashed var(--dash)}
.faq-q{width:100%;background:none;border:none;color:var(--text);font:inherit;font-size:16px;font-weight:600;text-align:left;
  padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.faq-q .fq{font-size:22px;color:var(--accent);transition:.3s;font-weight:400}
.faq-item.open .fq{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a-in{padding:0 0 22px;font-size:14.5px;color:var(--text2);line-height:1.6;max-width:90%}

/* ══ ASK A QUESTION ══ */
.ask{padding:20px clamp(20px,6vw,90px) 80px;display:flex;justify-content:center}
.ask-inner{width:100%;max-width:640px;text-align:center}
.ask .kicker{margin-bottom:14px}
.ask .body{margin:14px auto 32px}
.ask-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.ask-row{display:flex;gap:14px}
.ask-row .ask-input{flex:1;min-width:0}
.ask-input{width:100%;background:var(--s1);border:1px solid var(--border2);border-radius:12px;
  color:var(--text);font:inherit;font-size:15px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.ask-input::placeholder{color:var(--text3)}
.ask-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.ask-input.invalid{border-color:var(--danger)}
.ask-textarea{resize:vertical;min-height:120px;line-height:1.5}
.ask-file{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--accent);
  border:1px dashed var(--border2);border-radius:12px;padding:13px 15px;transition:.2s;font-weight:600;font-size:14px}
.ask-file:hover{border-color:var(--accent);background:var(--accentSoft)}
.ask-file svg{flex-shrink:0}
.ask-file-hint{font-style:normal;font-weight:400;color:var(--text3);font-size:12px;margin-left:auto}
.ask-files:empty{display:none}
.ask-files{display:flex;flex-direction:column;gap:8px}
.ask-file-item{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px}
.ask-file-item .fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ask-file-item .fsize{color:var(--text3);font-size:12px;flex-shrink:0}
.ask-file-item .fdel{cursor:pointer;color:var(--text3);border:none;background:none;font-size:18px;line-height:1;padding:0 2px;flex-shrink:0}
.ask-file-item .fdel:hover{color:var(--danger)}
.ask-submit{align-self:flex-start;margin-top:4px}
.ask-submit[disabled]{opacity:.6;cursor:not-allowed}
.ask-status{font-size:14px;font-weight:600;min-height:20px}
.ask-status.ok{color:var(--success)}
.ask-status.err{color:var(--danger)}
@media(max-width:560px){ .ask-row{flex-direction:column} .ask-file{flex-wrap:wrap} .ask-file-hint{margin-left:0;width:100%} }

/* ══ DOWNLOAD ══ */
.download{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px clamp(20px,6vw,90px);gap:20px;position:relative;overflow:hidden}
.download::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,var(--accentSoft),transparent 60%)}
.dl-heading{font-weight:900;font-size:clamp(34px,5.5vw,60px);line-height:.98;letter-spacing:-.025em}
.brand-mark.big{width:80px;height:80px;margin-bottom:8px;filter:drop-shadow(0 12px 28px rgba(77,163,255,.4));animation:floaty 6s ease-in-out infinite}
:root[data-theme="day"] .brand-mark.big{filter:drop-shadow(0 12px 28px rgba(1,51,153,.28))}
.download .body{margin-bottom:10px}
.store-badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.store{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border2);border-radius:14px;padding:12px 22px;transition:.25s}
.store:hover{border-color:var(--accent);transform:translateY(-2px)}
.store-ic{width:26px;height:26px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='ap'%3E%3Cpath d='M17 12c0-2 1.6-3 1.7-3.1-1-1.4-2.4-1.6-2.9-1.6-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7-1.3 0-2.6.8-3.3 2-1.4 2.4-.4 6 1 8 .7 1 1.4 2 2.4 2 1 0 1.3-.6 2.5-.6s1.5.6 2.5.6 1.7-1 2.3-2c.7-1 1-2 1-2-.1 0-2.1-.8-2.1-3.7zM15 6c.5-.7.9-1.6.8-2.5-.8 0-1.7.5-2.3 1.2-.5.6-.9 1.5-.8 2.4.9.1 1.8-.4 2.3-1.1z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23ap)'%3E%3Crect y='3' width='24' height='3.2' fill='%2361bb46'/%3E%3Crect y='6.2' width='24' height='3.2' fill='%23fdb827'/%3E%3Crect y='9.4' width='24' height='3.2' fill='%23f5821f'/%3E%3Crect y='12.6' width='24' height='3.2' fill='%23e03a3e'/%3E%3Crect y='15.8' width='24' height='3.2' fill='%23963d97'/%3E%3Crect y='19' width='24' height='4' fill='%23009ddc'/%3E%3C/g%3E%3C/svg%3E")}
.store-ic.android{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 283'%3E%3Cpath fill='%2300d2ff' d='M119.553 134.916 4.51 256.685c.658 2.468 1.984 4.727 3.926 6.542a15.61 15.61 0 0 0 17.505 2.833l129.638-74.746-35.63-56.933z'/%3E%3Cpath fill='%23ffd400' d='m191.837 122.026-.036-.024-27.976-16.194-31.283 27.858 31.283 31.283 28.008-16.192c8.176-4.394 8.176-16.586-.036-20.981z'/%3E%3Cpath fill='%23ff3a44' d='M4.508 26.006a15.657 15.657 0 0 0-.508 3.99v222.688c0 1.372.144 2.706.508 3.99l119.11-119.732z'/%3E%3Cpath fill='%2300e676' d='m120.402 141.998 39.242-39.242L30.076 27.916c-4.822-2.868-10.622-3.03-15.516-.756z'/%3E%3C/svg%3E")}
.store span{display:flex;flex-direction:column;text-align:left}
.store em{font-size:10px;color:var(--text3);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.store b{font-size:15px;font-weight:700}
.soon{font-size:12px;color:var(--text3);letter-spacing:.02em;margin-top:6px}

/* ══ FOOTER ══ */
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:36px clamp(20px,6vw,90px);border-top:1px dashed var(--dash)}
.foot-links{display:flex;gap:26px}
.foot-badges{display:flex;gap:10px;flex-wrap:wrap}
.foot-links a{font-size:13px;color:var(--text2);transition:.2s}
.foot-links a:hover{color:var(--accent)}
.rights{font-size:12px;color:var(--text3)}

/* ══ RESPONSIVE ══ */
@media(max-width:1080px){
  .priv-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .btn-pill{display:none}
  .sidebar-label{display:none}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center;padding-top:110px}
  .hero-copy,.hero-phone,.hero-info{grid-column:1}
  .hero-copy{grid-row:1;width:100%;max-width:100%;min-width:0}
  .hero-phone{grid-row:2;grid-row-start:2;grid-row-end:3}.hero-info{grid-row:3;margin:34px auto 0}
  .hero-copy>*{max-width:100%}
  .hero-feats{width:100%;justify-content:center}
  .hero-cta,.hero-store{width:100%}
  .badge{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-stats,.hero-store,.social-proof{justify-content:center}
  .lede{margin:0 auto}
  .reveal-sec{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px;min-height:auto;padding-top:70px;padding-bottom:70px}
  .reveal-sec.alt{direction:ltr}
  .reveal-sec .sec-text.left,.reveal-sec .sec-text.right{text-align:center;max-width:520px;justify-self:center}
  .sec-text.left .icon3d,.sec-text.left .sec-ic,.sec-text.left .sec-coin{margin-left:auto;margin-right:auto}
  .ticks{align-items:flex-start;display:inline-flex;text-align:left}
  .faq{grid-template-columns:1fr;gap:20px}
  .faq-head{position:static}
  .scroll-hint{display:none}
}
@media(max-width:560px){
  .priv-grid{grid-template-columns:1fr}
  .hero .display{font-size:27px;line-height:.98}
  .hero-feats{justify-content:center;max-width:100%}
  .foot-badges{justify-content:center}
  .phone{width:262px}
  .hero-stats{gap:14px}
  .stat-n{font-size:20px}
  .footer{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .icon3d,.sec-ic,.dn-spin,.sec-coin-spin,.brand-mark.big,.wheel,.sos-badge,.typing span,.phone,.near-radar .sweep,.near-radar .blip{animation:none}
  html{scroll-behavior:auto}
  .phone{transform:rotateY(-4deg)}
  .hero-phone .phone{transform:rotateY(-25deg) rotateX(5deg)}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
}