/* Layout: WorldFirst-clean white canvas, torch-red accent, porcelain bands, wine depth. Public site → auth → app shell (workspace + platform admin) → full-width build studio. Footer is a deliberate dark band. */
:root{
  --page:#0E0E0F; --band:#000000; --bg:#161618; --surface:#1C1C1E; --surface-2:#2C2C2E; --ink:#F5F5F7; --muted:#A1A1A6; --line:#2C2C2F;
  --red:#FF2E6E; --red-ink:#FF5C8D; --wine:#C2004F; --red-soft:#35101F; --on-red:#FFFFFF;
  --ok:#30D158; --ok-soft:#0F2A1A; --warn:#FFB340; --warn-soft:#33260C; --bad:#FF6961; --bad-soft:#3A1616; --info:#64A8FF;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -18px rgba(0,0,0,.85);
  --f-display:"Poppins","Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:18px; --nav-h:66px; --logo-ink:#F5F5F7;
  --foot-bg:#0A0A0B; --foot-ink:#F4EEF1; --foot-muted:#A1A1A6; --foot-line:#222225; --foot-btn:#161618;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --page:#FFFFFF; --band:#F5F6F7; --bg:#FFFFFF; --surface:#F5F6F7; --surface-2:#ECEDF0; --ink:#14131A; --muted:#5D5E6B; --line:#E4E5EA;
  --red:#FF0051; --red-ink:#E00047; --wine:#990033; --red-soft:#FFE8EF; --on-red:#FFFFFF;
  --ok:#0E9F6E; --ok-soft:#E3F6EE; --warn:#B86E00; --warn-soft:#FFF3DC; --bad:#D92D20; --bad-soft:#FDE8E7; --info:#2563EB;
  --shadow:0 1px 2px rgba(20,19,26,.05),0 12px 32px -12px rgba(20,19,26,.16); --logo-ink:#120F3D;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--page)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
input,select,textarea{font:inherit;color:var(--ink)}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-body);font-size:15px;letter-spacing:-.01em;color:var(--red-ink);font-weight:700}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:62ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn-red{background:var(--red);color:var(--on-red);box-shadow:0 8px 24px -10px var(--red)}
.btn-red:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px var(--red)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn svg{width:17px;height:17px}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--page) 80%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:var(--nav-h);max-width:none}
body.view-landing .nav .wrap{max-width:1200px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--logo-ink);flex:none}
.wm{font-family:"Poppins","Manrope",system-ui,sans-serif;font-weight:700;font-size:25px;letter-spacing:-.025em;line-height:1}
.wm em{font-style:normal}
.wm em i{font-style:normal}
.wm .d{color:#8E12EE}.wm .i{color:#E52F7E}
.wm .o{background:linear-gradient(90deg,#F2455A,#FF6A1A 55%,#FF8A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-mark{width:36px;height:36px;flex:none;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 6px 12px rgba(90,31,227,.28))}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
@keyframes wave{50%{transform:scaleY(.45)}}
.nav-links{display:flex;gap:2px;margin-left:8px}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 11px;border-radius:10px}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;flex:none}
.icon-btn svg{width:18px;height:18px}
.ws-pill{display:none;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--line)}
.ws-pill .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:11px}
body[class]:not(.view-landing):not(.view-page) .nav-links{display:none}
body[class]:not(.view-landing):not(.view-page) .ws-pill{display:inline-flex}
body[class]:not(.view-landing):not(.view-page) .nav-cta .land-only{display:none}
@media (max-width:980px){.nav-links{display:none}}
@media (max-width:560px){.nav-cta .btn-ghost,.ws-pill{display:none!important}}

/* HERO */
.hero{position:relative;overflow:hidden;padding-block:56px 72px}
.hero::before{content:"";position:absolute;width:780px;height:780px;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--red) 30%,transparent),transparent 62%);filter:blur(10px);pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;width:520px;height:520px;left:-200px;bottom:-280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wine) 22%,transparent),transparent 65%);pointer-events:none}
@keyframes drift{to{transform:translate(-60px,40px) scale(1.08)}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--shadow)}
.pill b{background:var(--red);color:var(--on-red);font-size:11px;padding:3px 8px;border-radius:999px;letter-spacing:.04em}
.hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:800;margin:22px 0 18px;letter-spacing:-.035em}
.hero h1 .r{color:var(--red)}
.hero h1 .line{display:block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .line:nth-child(2){animation-delay:.08s}.hero h1 .line:nth-child(3){animation-delay:.16s}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
.composer{margin-top:28px;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:var(--shadow);max-width:660px}
.mode-tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border-radius:14px;width:max-content;max-width:100%;overflow-x:auto}
.mode-tabs button{border:0;background:none;padding:7px 14px;border-radius:10px;font-weight:700;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.mode-tabs button svg{width:15px;height:15px}
.mode-tabs button[aria-selected="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.composer-row{display:flex;gap:10px;align-items:center;padding:10px 6px 4px}
.composer-row input{flex:1;min-width:0;border:0;background:none;font-size:17px;padding:10px 8px;outline:none}
.composer-row input::placeholder{color:var(--muted)}
@media (max-width:520px){.composer-row{flex-wrap:wrap}.composer-row .btn{width:100%}}
.mic-btn{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;position:relative}
.mic-btn svg{width:20px;height:20px}
.mic-btn.live{background:var(--red);color:#fff;border-color:transparent}
.mic-btn.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);animation:ping 1.2s ease-out infinite}
@keyframes ping{to{transform:scale(1.35);opacity:0}}
.composer-foot{display:flex;flex-wrap:wrap;gap:8px;padding:6px 8px 4px}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);transition:all .2s}
.chip:hover{border-color:var(--red);color:var(--red-ink)}
.hero-proof{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:14px}
.hero-proof b{display:block;font-family:var(--f-display);font-size:26px;color:var(--ink);letter-spacing:-.02em}
.hero-stage{position:relative;display:grid;place-items:center;min-height:620px}
@media (max-width:960px){.hero-stage{min-height:0;padding-top:12px}}
.float-card{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px;display:flex;gap:10px;align-items:center;z-index:50;animation:bob 6s ease-in-out infinite}
.float-card .dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.float-card .dot svg{width:17px;height:17px}
.float-card b{display:block;font-size:13.5px}
.float-card small{color:var(--muted)}
.fc1{left:-30px;top:70px}.fc2{right:-40px;top:280px;animation-delay:-2s}.fc3{left:-30px;bottom:110px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:560px){.float-card{display:none}}

/* PHONE */
.phone{width:290px;max-width:100%;aspect-ratio:290/600;border-radius:50px;padding:11px;position:relative;flex:none;
 background:linear-gradient(150deg,#5B5B63 0%,#2A2A30 18%,#141418 45%,#0C0C0F 70%,#3B3B43 100%);
 box-shadow:inset 0 0 0 1.5px #6B6B74,inset 0 0 0 3px #1A1A1F,inset 0 0 0 4.5px #000,0 1px 0 1px rgba(255,255,255,.06),0 50px 90px -30px rgba(20,0,10,.6),0 24px 40px -24px rgba(0,0,0,.5)}
.phone::before{content:"";position:absolute;left:-3px;top:98px;width:4px;height:168px;border-radius:2px 0 0 2px;
 background:linear-gradient(to bottom,#45454D 0 24px,transparent 24px 44px,#45454D 44px 98px,transparent 98px 112px,#45454D 112px 166px,transparent 166px)}
.phone::after{content:"";position:absolute;right:-3px;top:160px;width:4px;height:82px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2C2C33,#5A5A62)}
.screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:40;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 22%,transparent 38%),linear-gradient(0deg,transparent 98%,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.mini{width:218px;height:450px;flex:none;position:relative}
.mini .phone{position:absolute;left:0;top:0;width:290px;max-width:none;transform:scale(.75);transform-origin:top left}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background-color:var(--a-bg,#fff);color:var(--a-fg,#111);font-family:-apple-system,"SF Pro Text","Manrope",system-ui,sans-serif;font-size:12px;line-height:1.35;display:flex;flex-direction:column;transition:background-color .4s,color .4s}
.screen.concept-futuristic{background-image:radial-gradient(circle at 90% -5%,color-mix(in srgb,var(--a-p) 45%,transparent),transparent 45%),radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--a-p2) 25%,transparent),transparent 45%)}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:21px;border-radius:20px;background:#000;z-index:5}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 4px;font-weight:600;font-size:12px;flex:none}
.sbar .ic{display:flex;gap:4px;align-items:center}
.sbar .ic i{display:block;width:16px;height:9px;border-radius:2.5px;border:1.4px solid currentColor;position:relative}
.sbar .ic i::after{content:"";position:absolute;inset:1.2px 4px 1.2px 1.2px;background:currentColor;border-radius:1px}
.a-body{flex:1;overflow:hidden auto;padding:6px 14px 10px;scrollbar-width:none}
.a-body::-webkit-scrollbar{display:none}
.a-hd{display:flex;justify-content:space-between;align-items:flex-end;margin:8px 2px 12px}
.a-hd h4{margin:0;font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-.02em}
.a-hd small{opacity:.55;font-weight:600;font-size:11px}
.a-av{width:30px;height:30px;border-radius:50%;background:var(--a-p);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
.a-card{background:var(--a-card);border-radius:var(--a-r,16px);padding:12px;margin-bottom:10px}
.a-hero{background:linear-gradient(135deg,var(--a-p),var(--a-p2));color:#fff;border-radius:var(--a-r,18px);padding:14px;margin-bottom:12px;position:relative;overflow:hidden}
.a-hero::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-30px;top:-40px;background:rgba(255,255,255,.14)}
.concept-minimal .a-hero{background:var(--a-card);color:var(--a-fg)}
.concept-minimal .a-hero::after{display:none}
.concept-minimal .a-hd h4{font-size:24px;letter-spacing:-.03em}
.concept-futuristic .a-card,.concept-futuristic .a-li,.concept-futuristic .a-prod,.concept-futuristic .a-search{border:1px solid rgba(255,255,255,.09)}
.concept-futuristic .a-hero{box-shadow:0 12px 30px -10px var(--a-p)}
.concept-futuristic .a-tabbar{background:rgba(7,6,13,.8)}
.a-hero small{opacity:.8;font-weight:600}
.a-hero .big{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 10px}
.a-row-btns{display:flex;gap:6px;position:relative;z-index:1}
.a-btn{flex:1;border:0;border-radius:11px;padding:8px;font-weight:700;font-size:11px;background:rgba(255,255,255,.22);color:inherit}
.a-btn.solid{background:#fff;color:var(--a-p)}
.concept-minimal .a-btn{background:var(--a-p);color:#fff}
.concept-minimal .a-btn.solid{background:var(--a-bg);color:var(--a-p);border:1px solid var(--a-line)}
.a-sec{font-weight:800;font-size:13px;margin:12px 2px 8px;display:flex;justify-content:space-between}
.a-sec span{color:var(--a-p);font-size:11px}
.a-li{display:flex;align-items:center;gap:10px;padding:10px;background:var(--a-card);border-radius:calc(var(--a-r,16px) - 4px);margin-bottom:7px}
.compact .a-li{padding:7px 9px;margin-bottom:5px}
.compact .a-card{padding:9px}
.a-flag{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:10px;color:#fff;flex:none}
.a-li .t{flex:1;min-width:0}
.a-li .t b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-li .t small{opacity:.55;font-size:10.5px}
.a-tag{font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--a-p) 16%,transparent);color:var(--a-p)}
.concept-futuristic .a-tag{color:#fff;background:color-mix(in srgb,var(--a-p) 45%,transparent)}
.a-otp{font-family:var(--f-mono);font-weight:700;letter-spacing:.12em;font-size:13px;color:var(--a-p)}
.concept-futuristic .a-otp{color:var(--a-p2)}
.a-search{display:flex;align-items:center;gap:8px;background:var(--a-card);border-radius:12px;padding:9px 11px;opacity:.85;margin-bottom:10px}
.a-search svg{width:13px;height:13px;opacity:.5}
.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-prod{background:var(--a-card);border-radius:var(--a-r,16px);padding:7px;overflow:hidden}
.a-prod .img{aspect-ratio:1;border-radius:calc(var(--a-r,16px) - 6px);margin-bottom:6px}
.a-prod b{display:block;font-size:11px}
.a-prod small{opacity:.6;font-weight:700}
.a-chips{display:flex;gap:6px;margin-bottom:10px;overflow:hidden}
.a-chips span{padding:5px 10px;border-radius:999px;background:var(--a-card);font-weight:700;font-size:10.5px;white-space:nowrap}
.a-chips span.on{background:var(--a-p);color:#fff}
.a-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--a-line);flex:none;display:grid;place-items:center;transition:all .2s}
.a-check.on{background:var(--a-p);border-color:var(--a-p)}
.a-check.on::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.a-ring{width:96px;height:96px;flex:none}
.a-bars{display:flex;align-items:flex-end;gap:7px;height:100px;padding-top:6px}
.a-bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--a-p);opacity:.85}
.a-bubble{max-width:82%;padding:9px 11px;border-radius:14px;margin-bottom:7px;background:var(--a-card)}
.a-bubble.me{margin-left:auto;background:var(--a-p);color:#fff;border-bottom-right-radius:4px}
.a-times{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.a-times span{text-align:center;padding:8px 0;border-radius:10px;background:var(--a-card);font-weight:700;font-size:11px}
.a-times span.on{background:var(--a-p);color:#fff}
.a-cta{display:block;width:100%;border:0;border-radius:14px;padding:12px;background:var(--a-p);color:#fff;font-weight:800;font-size:12.5px;margin-top:10px}
.a-toggle{width:34px;height:20px;border-radius:999px;background:var(--a-line);position:relative;flex:none;transition:background .2s}
.a-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.a-toggle.on{background:#34C759}.a-toggle.on::after{transform:translateX(14px)}
.a-tabbar{display:flex;justify-content:space-around;padding:8px 8px 20px;border-top:1px solid var(--a-line);background:var(--a-bg);flex:none}
.a-tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:700;opacity:.45;color:inherit;padding:2px 6px}
.a-tabbar button.on{opacity:1;color:var(--a-p)}
.concept-futuristic .a-tabbar button.on{color:var(--a-p2)}
.a-tabbar svg{width:20px;height:20px}
.a-badge{position:absolute;top:44px;right:14px;z-index:4;font-size:9px;font-weight:800;padding:3px 7px;border-radius:999px;background:#0E9F6E;color:#fff}
.lock{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(160deg,var(--a-p),var(--a-p2));color:#fff;text-align:center;padding:24px}
.lock .scan{width:72px;height:72px;border-radius:20px;border:2.5px solid rgba(255,255,255,.9);position:relative;overflow:hidden}
.lock .scan::after{content:"";position:absolute;left:0;right:0;height:3px;background:#fff;box-shadow:0 0 12px #fff;animation:scan 1.6s ease-in-out infinite}
@keyframes scan{0%{top:6px}50%{top:62px}100%{top:6px}}
.lock button{border:0;background:#fff;color:var(--a-p);border-radius:999px;padding:9px 18px;font-weight:800;font-size:12px}
.a-err{margin:4px 12px 0;padding:9px 11px;border-radius:12px;background:#D92D20;color:#fff;font-weight:700;font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none}
.a-err button{border:0;background:#fff;color:#D92D20;border-radius:8px;padding:4px 9px;font-weight:800;font-size:10.5px}
.a-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:70px 16px 0}
.a-empty i{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--a-card);color:var(--a-p)}
.a-empty i svg{width:28px;height:28px}
.a-empty b{font-size:15px}.a-empty small{opacity:.6}
.skel{padding:44px 14px 14px;display:flex;flex-direction:column;gap:10px;height:100%}
.skel i{display:block;border-radius:14px;background:linear-gradient(90deg,#ececf0 25%,#f7f7f9 50%,#ececf0 75%);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.fade-in{animation:fadeup .45s ease both}
@keyframes fadeup{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* LANDING SECTIONS */
section{padding-block:110px}
.band{background:var(--band)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:900px;margin:0 auto 60px}
.sec-head .lead{margin:0 auto;color:var(--muted)}
.faq .sec-head,#faq .sec-head{align-items:center}
.sec-head h2{font-size:clamp(34px,4.6vw,60px);font-weight:700;letter-spacing:-.035em;margin-top:12px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:20px;background:var(--bg)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite}
.marquee-track span{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--muted);white-space:nowrap}
.marquee-track span i{width:8px;height:8px;border-radius:50%;background:var(--red)}
@keyframes slide{to{transform:translateX(-50%)}}

.engines{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1060px){.engines{grid-template-columns:repeat(2,minmax(0,1fr))}.engine:last-child{grid-column:1/-1}}
@media (max-width:520px){.engines{grid-template-columns:1fr}}
.engine{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.engine:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.engine .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.engine .ico svg{width:22px;height:22px}
.engine h3{font-size:20px;font-weight:700}
.engine p{color:var(--muted);font-size:14px}
.engine ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.engine li{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--surface);color:var(--muted)}
.engine.hot{background:linear-gradient(150deg,var(--wine),var(--red));border:0;color:#fff}
.engine.hot p{color:rgba(255,255,255,.85)}
.engine.hot .ico{background:rgba(255,255,255,.18);color:#fff}
.engine.hot li{background:rgba(255,255,255,.16);color:#fff}

.journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;counter-reset:j}
@media (max-width:860px){.journey{grid-template-columns:1fr}}
.jstep{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);position:relative}
.jstep .n{font-family:var(--f-mono);font-size:13px;font-weight:600;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--muted);transition:all .4s}
.jstep.on .n{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px var(--red)}
.jstep b{display:block;font-family:var(--f-display);font-size:19px;letter-spacing:-.01em}
.jstep small{color:var(--muted);font-size:14px}

.templates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1060px){.templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.templates{grid-template-columns:1fr}}
.tpl-card{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;transition:transform .3s,box-shadow .3s}
.tpl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tpl-card .mini{height:330px;width:160px}
.tpl-card .mini .phone{transform:scale(.55)}
.tpl-card .meta{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tpl-card b{font-family:var(--f-display);font-size:18px}
.tpl-card small{color:var(--muted);display:block;font-size:13px}

.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:24px;position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end}
.tile h3{font-size:22px;font-weight:700;margin-bottom:6px}
.tile p{color:var(--muted);font-size:14.5px;max-width:42ch}
.t-a{grid-column:span 3;grid-row:span 2;min-height:420px}
.t-b,.t-c{grid-column:span 3}
.t-d,.t-e,.t-f{grid-column:span 2}
@media (max-width:860px){.bento{grid-template-columns:1fr}.tile{grid-column:auto!important;grid-row:auto!important;min-height:230px}}
.tile .vis{position:absolute;inset:0 0 auto;height:60%;display:grid;place-items:center}
.t-a .vis{height:68%}
.wave{display:flex;align-items:center;gap:4px;height:110px}
.wave i{width:6px;border-radius:4px;background:linear-gradient(var(--red),var(--wine));animation:wv 1.2s ease-in-out infinite}
@keyframes wv{50%{transform:scaleY(.3)}}
.voice-orb{width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,color-mix(in srgb,var(--red) 60%,#fff) 25%,var(--red) 60%,var(--wine));box-shadow:0 0 0 14px color-mix(in srgb,var(--red) 12%,transparent),0 0 0 30px color-mix(in srgb,var(--red) 6%,transparent);display:grid;place-items:center;color:#fff;animation:breathe 3s ease-in-out infinite}
.voice-orb svg{width:44px;height:44px}
@keyframes breathe{50%{box-shadow:0 0 0 22px color-mix(in srgb,var(--red) 10%,transparent),0 0 0 44px color-mix(in srgb,var(--red) 4%,transparent)}}
.quote-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:24px;width:100%}
.quote-stack span{background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13.5px;font-weight:600}
.quote-stack span:nth-child(even){align-self:flex-end;background:var(--red);color:#fff;border-color:transparent;border-radius:14px 14px 4px 14px}
.cap-grid{display:flex;flex-wrap:wrap;gap:8px;padding:22px;align-content:center;justify-content:center}
.cap-grid span{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:13px;background:var(--surface)}
.cap-grid span svg{width:15px;height:15px;color:var(--red-ink)}
.mini-crawl{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:22px;width:100%;line-height:1.9}
.mini-crawl b{color:var(--ok);font-weight:600}
.big-stat{font-family:var(--f-display);font-weight:800;font-size:64px;color:var(--red);letter-spacing:-.04em;line-height:1}

.intel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:960px){.intel{grid-template-columns:1fr}}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow);min-width:0}
.panel-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel-hd h3{font-size:18px;font-weight:700}
.demo-tag{font-family:var(--f-mono);font-size:11px;padding:4px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.seg{display:inline-flex;padding:4px;background:var(--surface);border-radius:12px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 72px;gap:12px;align-items:center;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.hbar:last-child{border:0}
.hbar .track{height:12px;border-radius:6px;background:var(--surface);overflow:hidden}
.hbar .fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--wine),var(--red));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.hbar .v{font-family:var(--f-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:var(--muted);margin-top:14px}
.weights{display:flex;flex-direction:column;gap:12px}
.weights div{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 12px;font-size:14px;font-weight:600}
.weights i{grid-column:1/-1;height:8px;border-radius:5px;background:var(--surface);position:relative;overflow:hidden}
.weights i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--red);border-radius:5px;transition:width .4s}
.weights span{text-align:right;font-family:var(--f-mono);color:var(--muted)}

.compare{overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:var(--bg)}
.compare table{width:100%;border-collapse:collapse;min-width:760px;font-size:14.5px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--f-display);font-size:16px;background:var(--surface)}
.compare thead th.us{background:var(--red);color:#fff}
.compare td.us{background:var(--red-soft);font-weight:700}
.compare tr:last-child td{border-bottom:0}
.yes{color:var(--ok);font-weight:700}.part{color:var(--warn);font-weight:700}.no{color:var(--muted)}

.price-toggle{display:flex;justify-content:center;margin-bottom:36px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.plans,.plans.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plans,.plans.three{grid-template-columns:1fr}}
.plan{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.hot{border:2px solid var(--red);box-shadow:0 24px 48px -24px color-mix(in srgb,var(--red) 60%,transparent)}
.plan .tag{position:absolute;top:-12px;left:24px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.plan h3{font-size:20px;font-weight:700}
.plan .amt{font-family:var(--f-display);font-weight:800;font-size:48px;letter-spacing:-.04em;line-height:1}
.plan .amt small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;font-family:var(--f-body)}
.plan .sub{color:var(--muted);font-size:14px}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li svg{width:17px;height:17px;flex:none;color:var(--red-ink);margin-top:2px}

.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-family:var(--f-display);font-size:20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:26px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:10px;max-width:68ch}
.cta-band{background:linear-gradient(135deg,var(--wine) 0%,var(--red) 70%);color:#fff;border-radius:32px;padding:64px 48px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;bottom:-200px;border:60px solid rgba(255,255,255,.08)}
.cta-band h2{font-size:clamp(32px,4.4vw,54px);font-weight:800}
.cta-band p{opacity:.9;margin-top:12px;font-size:18px}
.cta-band .btn{background:#fff;color:#99002F;position:relative;z-index:1}
@media (max-width:760px){.cta-band{grid-template-columns:1fr;padding:44px 28px}}

/* FOOTER (deliberately dark in both themes) */
.site-foot{background:var(--foot-bg);color:var(--foot-ink);position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--foot-line)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#FF2E6E 30%,#FFB3C8 50%,#FF2E6E 70%,transparent);opacity:.8;z-index:1}
.ft-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ft-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:aur 18s ease-in-out infinite alternate}
.ft-aurora i:nth-child(1){width:620px;height:420px;left:-120px;top:-160px;background:#FF0051}
.ft-aurora i:nth-child(2){width:520px;height:520px;right:-160px;top:20%;background:#990033;animation-delay:-6s}
.ft-aurora i:nth-child(3){width:700px;height:300px;left:30%;bottom:-200px;background:#FF5C8D;opacity:.28;animation-delay:-12s}
@keyframes aur{to{transform:translate(80px,60px) scale(1.15)}}
.site-foot::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.site-foot .wrap{position:relative;padding-block:80px 28px}
.ft-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:34px 36px;border-radius:30px;background:linear-gradient(135deg,rgba(255,46,110,.16),rgba(153,0,51,.12) 55%,rgba(255,255,255,.03));border:1px solid rgba(255,92,141,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -50px rgba(255,0,81,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.ft-k{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#FFB3C8}
.ft-k i{width:8px;height:8px;border-radius:50%;background:#FF2E6E;box-shadow:0 0 0 0 rgba(255,46,110,.6);animation:pulseDot 1.8s infinite}
.ft-cta h3{font-family:"Poppins",var(--f-display);font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:10px 0 8px;color:#fff}
.ft-cta h3 em{font-style:normal;background:linear-gradient(90deg,#FF5C8D,#FF2E6E 45%,#FFB3C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-cta p{color:var(--foot-muted);font-size:16px}
.ft-go{display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;background:rgba(10,4,7,.65);border:1px solid rgba(255,255,255,.12);transition:border-color .2s,box-shadow .2s}
.ft-go:focus-within{border-color:#FF2E6E;box-shadow:0 0 0 4px rgba(255,46,110,.18)}
.ft-go input{flex:1;min-width:0;border:0;background:none;color:#fff;font-size:16px;outline:none;padding:10px 4px}
.ft-go input::placeholder{color:#8E8E93}
.ft-mic{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#F5F5F7;display:grid;place-items:center;position:relative}
.ft-mic.live{background:#FF2E6E;border-color:transparent}
.ft-mic.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #FF2E6E;animation:ping 1.2s ease-out infinite}
.ft-mic i,.ft-send i{display:inline-flex}.ft-mic svg{width:19px;height:19px}
.ft-send{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:13px 20px;background:linear-gradient(135deg,#FF2E6E,#C2004F);color:#fff;font-weight:800;font-size:15px;box-shadow:0 12px 26px -10px #FF2E6E;transition:transform .2s}
.ft-send:hover{transform:translateY(-1px)}
.ft-send svg{width:16px;height:16px}
.ft-feats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:22px 0 64px}
.ft-feat{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--foot-line);transition:transform .3s,border-color .3s,background .3s}
.ft-feat:hover{transform:translateY(-3px);border-color:rgba(255,92,141,.45);background:rgba(255,46,110,.08)}
.ft-feat>span{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#FF2E6E,#990033);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -8px #FF2E6E}
.ft-feat>span svg{width:19px;height:19px}
.ft-feat b{display:block;font-size:14.5px;color:#fff;line-height:1.25}.ft-feat small{display:block;color:var(--foot-muted);font-size:12.5px;line-height:1.35;margin-top:3px}
.ft-feat>div{min-width:0}
.site-foot.in .ft-feat{animation:cUp .7s var(--d) cubic-bezier(.2,.8,.2,1) both}
.f-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)) minmax(0,1.45fr);gap:32px}
.site-foot .logo{color:var(--foot-ink)}
.site-foot .wm .d{color:#FF8DB0}.site-foot .wm .i{color:#FF4F93}
.f-brand p{color:var(--foot-muted);font-size:15px;margin:16px 0 18px;max-width:32ch;line-height:1.55}
.ft-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#C7C7CC;padding:7px 12px;border-radius:999px;background:rgba(48,209,88,.08);border:1px solid rgba(48,209,88,.25)}
.ft-status i{width:8px;height:8px;border-radius:50%;background:#30D158;box-shadow:0 0 8px #30D158;animation:blink 2s infinite}
.ft-social{display:flex;gap:8px;margin-top:18px}
.ft-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#D1D1D6;background:var(--foot-btn);border:1px solid var(--foot-line);transition:all .25s}
.ft-social a:hover{color:#fff;background:linear-gradient(140deg,#FF2E6E,#990033);border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 20px -8px #FF2E6E}
.ft-social svg{width:17px;height:17px}
.f-col h4,.f-ai h4{font-family:var(--f-display);font-size:13px;font-weight:700;margin-bottom:16px;color:#FFB3C8;text-transform:uppercase;letter-spacing:.1em}
.f-col a{position:relative;display:flex;align-items:center;gap:8px;color:var(--foot-muted);text-decoration:none;font-size:15px;padding:6px 0;transition:color .2s,transform .25s}
.f-col a::before{content:"";width:0;height:2px;border-radius:2px;background:#FF2E6E;transition:width .25s;flex:none}
.f-col a:hover{color:#fff;transform:translateX(2px)}
.f-col a:hover::before{width:10px}
.f-new{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,#FF0051,#FF5C8D);color:#fff;letter-spacing:.02em}
.f-ai p{color:var(--foot-muted);font-size:13.5px;margin:-6px 0 14px}
.f-ai .ai-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.f-ai .ai-row a{width:48px;height:48px;border-radius:14px;background:var(--foot-btn);border:1px solid var(--foot-line);display:grid;place-items:center;color:var(--foot-ink);transition:all .25s}
.f-ai .ai-row a:hover{border-color:#FF2E6E;background:rgba(255,46,110,.12);transform:translateY(-3px) rotate(-4deg)}
.f-ai .ai-row svg{width:20px;height:20px}
.f-search{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--foot-btn);border:1px solid var(--foot-line);color:var(--foot-ink);font-weight:700;text-decoration:none;font-size:14.5px;transition:border-color .2s}
.f-search:hover{border-color:#FF2E6E}
.f-search svg{width:18px;height:18px;color:#FF5C8D}
.ft-mark{margin:70px 0 0;line-height:.8;text-align:center;overflow:hidden;user-select:none}
.ft-mark span{display:inline-block;font-family:"Poppins",var(--f-display);font-weight:700;font-size:clamp(80px,19vw,280px);letter-spacing:-.06em;background:linear-gradient(180deg,rgba(255,92,141,.55) 0%,rgba(255,46,110,.18) 45%,rgba(255,46,110,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(255,140,175,.22);transform:translateY(30%);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.site-foot.in .ft-mark span{transform:translateY(8%)}
.ft-mark span{background-size:100% 100%,200% 100%}
.f-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;margin-top:-2px;border-top:1px solid var(--foot-line);font-size:14px;position:relative}
.f-legal span{color:var(--foot-muted)}
.ft-legal-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ft-legal-links a{color:var(--foot-ink);text-decoration:none;opacity:.85}.ft-legal-links a:hover{opacity:1;color:#FF8DB0}
.f-legal .selt{user-select:all;color:var(--foot-ink)}
.ft-top{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--foot-line);background:var(--foot-btn);color:var(--foot-ink);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;transition:all .2s}
.ft-top i{display:inline-flex;transform:rotate(-90deg)}.ft-top svg{width:15px;height:15px}
.ft-top:hover{border-color:#FF2E6E;color:#fff}
@media (max-width:1100px){.f-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.f-brand,.f-ai{grid-column:span 2}.ft-feats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.ft-cta{grid-template-columns:1fr;padding:26px 22px;gap:20px}}
@media (max-width:620px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.f-brand,.f-ai{grid-column:span 2}.ft-feats{grid-template-columns:1fr 1fr;margin-bottom:44px}.ft-go{flex-wrap:wrap;border-radius:22px}.ft-go input{flex-basis:calc(100% - 60px)}.ft-send{width:100%;justify-content:center}.f-legal{flex-direction:column;align-items:flex-start}.site-foot .wrap{padding-block:56px 24px}.ft-mark{margin-top:44px}}
@media (prefers-reduced-motion:reduce){.ft-aurora i{animation:none}}

/* APP SHELL */
.view{display:none}
body.view-landing #landing, body.view-landing .site-foot, body.view-page #pgView, body.view-page .site-foot, body:not([class]) #landing, body:not([class]) .site-foot{display:block}
body.view-app #shell{display:grid}
body.view-studio #studio{display:block}
body.view-auth #auth{display:grid}
.site-foot{display:none}
#shell{grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - var(--nav-h))}
.side{border-right:1px solid var(--line);padding:16px 12px 32px;position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));height:calc(100vh - var(--nav-h) - env(safe-area-inset-top,0px));overflow:auto;background:var(--bg);display:flex;flex-direction:column;gap:2px}
.side h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 10px 6px;font-weight:600}
.side h5:first-child{margin-top:4px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;text-decoration:none;font-weight:600;font-size:14.5px;color:var(--muted);transition:all .15s;white-space:nowrap}
.side a svg{width:18px;height:18px;flex:none}
.side a:hover{background:var(--surface);color:var(--ink)}
.side a.on{background:var(--red-soft);color:var(--red-ink);box-shadow:inset 2px 0 0 var(--red)}
.side a .cnt{margin-left:auto;font-size:11px;font-family:var(--f-mono);padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.side .proj-switch{margin:4px 4px 8px;padding:10px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:10px}
.side .proj-switch .sw{width:30px;height:30px;border-radius:9px;flex:none}
.side .proj-switch select{border:0;background:none;font-weight:800;font-size:14px;width:100%;min-width:0;outline:none}
.side .proj-switch small{display:block;color:var(--muted);font-size:11.5px}
@media (max-width:960px){
  #shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-left,0px));gap:4px}
  .side h5,.side .proj-switch{display:none}
}
.main{padding:28px max(24px,env(safe-area-inset-right,0px)) 80px max(24px,env(safe-area-inset-left,0px));min-width:0}
@media (max-width:960px){.main{padding:20px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px))}}
.page-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-hd h1{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.035em}
.page-hd p{color:var(--muted);margin-top:6px;max-width:70ch}
.page-hd .acts{display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .lbl{font-size:13px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:8px}
.kpi .val{font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.delta{font-size:12px;font-weight:800;font-family:var(--f-mono);padding:2px 7px;border-radius:999px;align-self:flex-start}
.up{background:var(--ok-soft);color:var(--ok)}.down{background:var(--bad-soft);color:var(--bad)}
.g2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.g2e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:1100px){.g2,.g2e{grid-template-columns:1fr}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g3{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:20px;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.card-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-hd h3{font-family:var(--f-body);font-size:15.5px;font-weight:800;letter-spacing:0}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:11px var(--f-mono)}
.chart .grid{stroke:var(--line);stroke-width:1}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tbl th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:13px}
.u{display:flex;align-items:center;gap:10px}
.u .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none}
.u small{display:block;color:var(--muted);font-size:12px}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-ok{background:var(--ok-soft);color:var(--ok)}.s-warn{background:var(--warn-soft);color:var(--warn)}.s-bad{background:var(--bad-soft);color:var(--bad)}.s-mute{background:var(--surface-2);color:var(--muted)}.s-red{background:var(--red-soft);color:var(--red-ink)}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.inp,.sel{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:9px 12px;font-size:14px;outline:none;min-width:0}
.inp:focus,.sel:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.mini-btn{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:5px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.mini-btn:hover{border-color:var(--ink)}
.mini-btn.danger{color:var(--bad)}
.switch{width:42px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;flex:none;transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--ok);border-color:var(--ok)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:14.5px}
.row .t small{color:var(--muted);font-size:12.5px}
input[type=range]{accent-color:var(--red);width:100%}
.progress{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--red));border-radius:5px;transition:width .6s}
.tabs-s{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs-s button{border:0;background:none;padding:10px 14px;font-weight:700;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs-s button[aria-selected="true"]{color:var(--ink);border-color:var(--red)}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.proj-card{background:var(--bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.proj-card .cover{height:190px;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:16px}
.proj-card .cover .mini{width:160px;height:330px}
.proj-card .cover .mini .phone{transform:scale(.55)}
.proj-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.proj-card .ttl{display:flex;justify-content:space-between;gap:8px;align-items:center}
.proj-card b{font-family:var(--f-display);font-size:18px}
.proj-card small{color:var(--muted);font-size:12.5px}
.act-list{display:flex;flex-direction:column}
.act{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.act:last-child{border:0}
.act .d{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--red-ink)}
.act .d svg{width:15px;height:15px}
.act time{font-size:12px;color:var(--muted);font-family:var(--f-mono);white-space:nowrap}

/* create app */
.create{max-width:880px;margin:0 auto;padding-top:12px}
.create h1{font-size:clamp(30px,4vw,48px);font-weight:800;text-align:center}
.create .lead{text-align:center;margin:10px auto 26px}
.create .composer{max-width:none;margin:0}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
@media (max-width:640px){.opts{grid-template-columns:1fr}}
.opt label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.opt .sel,.opt .inp{width:100%}
.style-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
@media (max-width:640px){.style-pick{grid-template-columns:1fr}}
.style-opt{border:1.5px solid var(--line);border-radius:16px;padding:12px;background:var(--bg);text-align:left;display:flex;gap:12px;align-items:center;transition:all .2s}
.style-opt[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.style-opt .sw{width:44px;height:44px;border-radius:12px;flex:none}
.style-opt b{display:block;font-size:14.5px}
.style-opt small{color:var(--muted);font-size:12px}

/* research */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.stage-c>div{min-width:0}
@media (max-width:400px){.stages{grid-template-columns:1fr}}
.insight .acts{flex-wrap:wrap}.insight .acts .btn{white-space:normal;text-align:left}
.insight>div{min-width:0}
@media (max-width:820px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stage-c{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;background:var(--bg)}
.stage-c .si{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--muted)}
.stage-c.run .si{border-color:var(--warn);border-top-color:transparent;animation:spin .8s linear infinite;color:transparent}
.stage-c.ok .si{background:var(--ok);border-color:var(--ok);color:#fff}
.stage-c b{display:block;font-size:13.5px}
.stage-c small{color:var(--muted);font-size:12px;line-height:1.35;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ccard{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,box-shadow .25s,border-color .25s;animation:fadeup .4s ease both}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ccard.saved{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.ccard .top{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:flex-start}
.ccard .appic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:22px}
.ccard .nm b{font-size:16.5px;display:block}
.ccard .nm small{color:var(--muted);font-size:12.5px;display:block}
.ccard .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.ccard .tags span{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--surface);color:var(--ink)}
.ccard .tags span.dir{background:var(--red-soft);color:var(--red-ink)}
.bm{border:0;background:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.bm svg{width:19px;height:19px}
.bm[aria-pressed="true"]{color:var(--red);background:var(--red-soft)}
.bm[aria-pressed="true"] svg{fill:currentColor}
.ccard .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ccard .metrics div{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ccard .metrics b{display:block;font-size:13.5px;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:2px}
.ccard .metrics b.na{color:var(--muted);font-weight:600}
.ccard .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;gap:8px}
.ccard .foot button.link{border:0;background:none;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;padding:0}
.ccard .foot button.link svg{width:16px;height:16px}
.cmp-check{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cmp-check input{accent-color:var(--red);width:16px;height:16px}
.sticky-bar{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin-top:18px;background:color-mix(in srgb,var(--surface-2) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);color:var(--ink);border-radius:18px;padding:12px 12px 12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--shadow);z-index:5}
.sticky-bar .grow{flex:1;min-width:180px;font-weight:700;font-size:14.5px}
.sticky-bar small{display:block;opacity:.7;font-weight:500;font-size:12.5px}
.drawer-bg{position:fixed;inset:0;background:rgba(10,4,7,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-bg.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);z-index:71;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4)}
.drawer.show{transform:none}
.drawer-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-body{overflow:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.carousel .shot{scroll-snap-align:start;flex:none;width:132px}
.shot{aspect-ratio:9/17;border-radius:14px;padding:10px;color:#fff;font-weight:800;font-size:11px;line-height:1.25;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.shot span{display:block;flex:1;margin-top:8px;border-radius:9px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35)}
.shot em{font-style:normal;font-size:10px;opacity:.85;font-weight:600;display:block}
.anl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.anl div{background:var(--surface);border-radius:14px;padding:12px}
.anl small{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.anl b{font-size:14px}

/* design studio */
.concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.concepts{grid-template-columns:1fr}}
.concept-card{border:1.5px solid var(--line);border-radius:24px;padding:18px;background:var(--bg);display:flex;flex-direction:column;gap:14px;align-items:center;transition:all .25s}
.concept-card[aria-current="true"]{border-color:var(--red);box-shadow:0 0 0 5px var(--red-soft),var(--shadow)}
.concept-card .hd{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.concept-card .hd b{font-family:var(--f-display);font-size:19px;display:block}
.concept-card .hd small{color:var(--muted);font-size:13px}
.tokens{width:100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tokens i{width:24px;height:24px;border-radius:7px;border:1px solid var(--line)}
.tokens span{font-family:var(--f-mono);font-size:11px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:7px}
.insp{display:flex;flex-wrap:wrap;gap:8px}
.insp span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:13px}
.insp span i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.comp-lib{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px}
@media (max-width:900px){.comp-lib{grid-template-columns:1fr}}
.lib-prev{border-radius:18px;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;color:var(--a-fg);background:var(--a-bg);border:1px solid var(--line)}
@media (max-width:520px){.lib-prev{grid-template-columns:1fr}}
.lib-prev .cell{display:flex;flex-direction:column;gap:6px}
.lib-prev .cell small{font-family:var(--f-mono);font-size:10.5px;opacity:.6}
.props{display:flex;flex-direction:column;gap:14px}
.props label{font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:8px;align-items:center}
.props input[type=color]{width:44px;height:30px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--bg)}

/* studio */
.studio-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:12px;border-bottom:1px solid var(--line)}
.proj{display:flex;align-items:center;gap:10px;font-weight:800}
.proj .sw{width:30px;height:30px;border-radius:9px}
.proj small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.studio-bar .grow{flex:1}
.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.status-pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status-pill.run i{background:var(--warn);animation:blink 1s infinite}
.status-pill.done i{background:var(--ok)}
@keyframes blink{50%{opacity:.3}}
.studio-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,360px);grid-template-rows:auto auto;gap:14px;padding-block:14px 40px}
.studio-grid .bottom{grid-column:1/-1}
@media (max-width:1180px){.studio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.studio-grid .c-left{grid-column:1/-1;order:3}.studio-grid .bottom{order:4}}
@media (max-width:760px){.studio-grid{grid-template-columns:1fr}}
.col{background:var(--bg);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.col-hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.col-hd h3{font-size:14.5px;font-family:var(--f-body);font-weight:800;letter-spacing:0}
.scr-list{padding:10px;display:flex;flex-direction:column;gap:4px}
.scr-list button{border:0;background:none;text-align:left;padding:9px 10px;border-radius:11px;font-weight:700;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:9px}
.scr-list button svg{width:16px;height:16px}
.scr-list button[aria-current="true"]{background:var(--red-soft);color:var(--red-ink)}
.tree{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:12px 16px 16px;line-height:1.85;border-top:1px solid var(--line);overflow-x:auto;white-space:pre}
.tree b{color:var(--ink);font-weight:600}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--a-p,#FF0051) 16%,transparent),transparent 60%),var(--surface);min-height:660px}
.feed{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-height:420px;min-height:240px}
.msg{padding:10px 12px;border-radius:14px;font-size:14px;max-width:92%}
.msg.me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.msg.ai{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.ai small{display:block;font-family:var(--f-mono);color:var(--red-ink);font-size:11px;margin-bottom:2px;font-weight:600}
.cmd{border-top:1px solid var(--line);padding:12px}
.cmd-row{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 6px 6px 8px}
.cmd-row input{flex:1;min-width:0;border:0;background:none;font-size:14.5px;outline:none;padding:6px 0}
.cmd-row .mic-btn{width:38px;height:38px}
.send{width:38px;height:38px;border-radius:12px;border:0;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.send svg{width:17px;height:17px}
.cmd .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cmd .chip{font-size:12px;padding:5px 10px}
.propbox{border-top:1px solid var(--line);padding:14px 16px}
.propbox h4{font-family:var(--f-body);font-size:13px;font-weight:800;margin-bottom:10px;display:flex;justify-content:space-between}
.propbox h4 small{font-family:var(--f-mono);color:var(--muted);font-weight:500}
.term{background:#0E0A0C;color:#E9DFE4;font-family:var(--f-mono);font-size:12px;line-height:1.75;padding:14px 16px;height:220px;overflow:auto;border-radius:0 0 0 22px}
.term .ok{color:#34D399}.term .wr{color:#F5B94A}.term .dim{color:#8C7F86}
.bottom-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:860px){.bottom-grid{grid-template-columns:1fr}.term{border-radius:0}}
.tests{padding:12px 16px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border-left:1px solid var(--line)}
.test{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:7px 10px;border-radius:10px;background:var(--surface)}
.test b{flex:1;font-weight:600}
.test .mono{font-size:12px;color:var(--muted)}

/* launch */
.checks{display:flex;flex-direction:column;gap:8px}
.ck{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;font-size:14px;font-weight:600}
.ck i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.ck.on i{background:var(--ok);border-color:var(--ok)}
.ck.on i::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.ck.run i{border-color:var(--warn);border-top-color:transparent;animation:spin .8s linear infinite}
.ck small{margin-left:auto;color:var(--muted);font-family:var(--f-mono);font-size:11px;font-weight:500}
.shots3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:13px;font-weight:700;display:flex;justify-content:space-between}
.field label small{font-family:var(--f-mono);color:var(--muted);font-weight:500}
.field label small.over{color:var(--bad)}
.field textarea{resize:vertical;min-height:80px}
.appicon{width:96px;height:96px;border-radius:22px;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:40px;box-shadow:0 12px 30px -12px rgba(0,0,0,.4);flex:none}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding-bottom:16px;position:relative}
.tl::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--bg)}
.tl.on i{background:var(--ok);border-color:var(--ok)}
.tl.cur i{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.tl b{display:block;font-size:14px}
.tl small{color:var(--muted);font-size:12.5px}

.heat{display:grid;gap:3px;font-size:11.5px;font-family:var(--f-mono)}
.heat div{padding:7px 4px;text-align:center;border-radius:6px;font-variant-numeric:tabular-nums}
.funnel{display:flex;flex-direction:column;gap:8px}
.fstep{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;align-items:center;font-size:14px}
@media (max-width:560px){.fstep{grid-template-columns:100px minmax(0,1fr) 70px}}
.fstep .bar{height:34px;border-radius:9px;background:linear-gradient(90deg,var(--wine),var(--red));display:flex;align-items:center;padding-left:10px;color:#fff;font-weight:800;font-size:12.5px;font-family:var(--f-mono);min-width:44px;transition:width .8s}
.fstep .v{text-align:right;font-family:var(--f-mono);font-size:13px}
.agent-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:12px}
.agent-card .hd{display:flex;align-items:center;gap:12px}
.agent-card .hd .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink);flex:none}
.agent-card .hd .ic svg{width:20px;height:20px}
.agent-card .hd b{display:block;font-size:15px}
.agent-card .hd small{color:var(--muted);font-size:12px}
.agent-card .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.agent-card .stats div{background:var(--surface);border-radius:11px;padding:8px;font-size:11px;color:var(--muted);font-weight:700}
.agent-card .stats b{display:block;font-size:14px;color:var(--ink);font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.agent-card.off{opacity:.6}
.key{font-family:var(--f-mono);font-size:13px;background:var(--surface);padding:4px 8px;border-radius:8px;user-select:all}
.insight{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;background:var(--bg)}
.insight .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.insight .ic svg{width:20px;height:20px}
.insight b{display:block;font-size:15px;margin-bottom:3px}
.insight p{color:var(--muted);font-size:14px}
.insight .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.brain{background:linear-gradient(140deg,#1A0610,#4A0020 60%,#99003A);color:#fff;border-radius:24px;padding:24px;position:relative;overflow:hidden}
.brain::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,141,.5),transparent 65%)}
.brain h2{font-size:28px;font-weight:800;position:relative;z-index:1}
.brain p{opacity:.85;max-width:60ch;margin-top:6px;position:relative;z-index:1}
.ask{display:flex;gap:8px;margin-top:16px;position:relative;z-index:1;flex-wrap:wrap}
.ask input{flex:1;min-width:200px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:14px;padding:12px 14px;outline:none}
.ask input::placeholder{color:rgba(255,255,255,.65)}
.ask .btn{background:#fff;color:#99002F}
.answer{margin-top:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px;font-size:14.5px;position:relative;z-index:1;line-height:1.6}
.answer[hidden]{display:none}

/* auth */
#auth{min-height:calc(100vh - var(--nav-h));place-items:center;padding:40px max(16px,env(safe-area-inset-left,0px));background:radial-gradient(circle at 80% 0%,color-mix(in srgb,var(--red) 16%,transparent),transparent 50%),var(--surface)}
.auth-card{width:min(520px,100%);background:var(--bg);border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.auth-card h1{font-size:30px;font-weight:800}
.auth-card .inp{width:100%;padding:13px 14px}
.auth-card .btn{width:100%}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.steps-dots{display:flex;gap:6px}
.steps-dots i{height:6px;flex:1;border-radius:4px;background:var(--surface-2)}
.steps-dots i.on{background:var(--red)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{border:1.5px solid var(--line);border-radius:16px;padding:14px;text-align:left;background:var(--bg);font-weight:700;font-size:14px}
.choice small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.choice[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}

/* Ask Muaz orb */
.orb{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:65;width:62px;height:62px;border-radius:50%;border:0;padding:3px;background:conic-gradient(from 0deg,#FF0051,#990033,#FF5C8D,#FF0051);box-shadow:0 14px 30px -10px rgba(255,0,81,.6);animation:orbspin 6s linear infinite}
.orb span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#14070D;color:#fff;animation:orbspin 6s linear infinite reverse}
.orb svg{width:26px;height:26px}
.orb::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#22C55E;border:2.5px solid #14070D}
@keyframes orbspin{to{transform:rotate(360deg)}}
.ask-panel{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:66;width:min(380px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px) scale(.98);opacity:0;pointer-events:none;transition:all .25s}
.ask-panel.show{transform:none;opacity:1;pointer-events:auto}
.ask-panel .hd{padding:14px 16px;background:linear-gradient(135deg,#4A0020,#FF0051);color:#fff;display:flex;justify-content:space-between;align-items:center}
.ask-panel .hd b{font-family:var(--f-display);font-size:17px}
.ask-panel .hd small{display:block;opacity:.85;font-size:12px}
.ask-panel .bd{padding:14px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.ask-panel form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ask-panel form input{flex:1;min-width:0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;font-size:14px;z-index:90;transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.toast:not(.show){visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
.toast.show{transform:translate(-50%,0)}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:28px 8px}
.banner{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:13.5px;padding:10px max(16px,env(safe-area-inset-left,0px));text-align:center}

.eng-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:900px){.eng-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.en-link{display:none}}
.eng-node{position:relative;border:1px solid var(--line);background:var(--bg);border-radius:18px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;transition:all .25s}
.eng-node:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.eng-node b{font-size:14.5px;line-height:1.25}
.en-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--muted);flex:none;transition:all .3s}
.en-ic svg{width:19px;height:19px}
.eng-node.done .en-ic,.eng-card.done .en-ic{background:var(--ok-soft);color:var(--ok)}
.eng-node.run .en-ic,.eng-card.run .en-ic,.eng-node.wait .en-ic,.eng-card.wait .en-ic{background:var(--red);color:#fff;box-shadow:0 0 0 0 rgba(255,0,81,.5);animation:pulseRed 1.4s infinite}
@keyframes pulseRed{70%{box-shadow:0 0 0 12px rgba(255,0,81,0)}100%{box-shadow:0 0 0 0 rgba(255,0,81,0)}}
.eng-node.run,.eng-node.wait{border-color:var(--red)}
.en-link{position:absolute;right:-13px;top:32px;width:14px;height:2px;background:var(--line);z-index:1}
.eng-node.done .en-link{background:var(--ok)}
.eng-node.run .en-link{background:linear-gradient(90deg,var(--red),var(--line));background-size:200% 100%;animation:sweep 1.2s linear infinite}
.eng-cards{display:flex;flex-direction:column;gap:12px}
.eng-card{padding:0;overflow:hidden}
.eng-hd{width:100%;border:0;background:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.eng-hd b{display:block;font-size:15.5px}.eng-hd small{color:var(--muted);font-size:13px}
.eng-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px;animation:fadeup .3s ease both}
.eng-agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.eng-ag{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;transition:all .3s}
.eng-ag b{font-size:14px}.eng-ag small{color:var(--muted);font-size:12px}
.eng-ag.act{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.eng-ag.off{opacity:.55}
.eng-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gate{border:1.5px solid var(--red);background:var(--red-soft);border-radius:16px;padding:14px 16px;animation:fadeup .3s ease both}
.gate>b{display:flex;align-items:center;gap:8px;font-size:14.5px;margin-bottom:6px;color:var(--red-ink)}
.gate>b svg{width:17px;height:17px}
.gate p{font-size:14px}
.gate-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.jstep{text-decoration:none;color:inherit;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;border-radius:16px;padding:16px 12px;margin:0 -12px;transition:background .25s}
.jstep:hover{background:var(--surface)}
.jt{min-width:0}
.jgo{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--red-ink);opacity:0;transform:translateX(-6px);transition:all .25s;white-space:nowrap}
.jgo svg{width:15px;height:15px}
.jstep:hover .jgo,.jstep.on:last-of-type .jgo{opacity:1;transform:none}
.jd{display:flex;flex-wrap:wrap;gap:6px;margin-top:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s,opacity .3s,margin .3s}
.jstep:hover .jd,.jstep:focus-visible .jd{max-height:80px;opacity:1;margin-top:10px}
.jd-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink)}
.jd-chip.on{background:var(--red-soft);color:var(--red-ink)}
.jd-in{font-family:var(--f-mono);font-size:12.5px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.jd-btn{font-size:12px;font-weight:800;padding:6px 12px;border-radius:10px;background:var(--red);color:#fff}
.jd-sw{width:26px;height:26px;border-radius:8px;border:1px solid var(--line)}
.jd-bar{width:140px;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;align-self:center}.jd-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wine),var(--red));animation:jbar 2s ease forwards}
@keyframes jbar{to{width:100%}}
@media (hover:none){.jd{max-height:80px;opacity:1;margin-top:10px}.jgo{opacity:1;transform:none}}
@media (max-width:560px){.jstep{grid-template-columns:40px minmax(0,1fr)}.jgo{grid-column:2;justify-self:start;margin-top:8px}}

/* responsive hardening */
.g2w{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.g2p{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
@media (max-width:1100px){.g2w,.g2p{grid-template-columns:1fr}}
.cta-gauge{max-width:100%}
.ask input{min-width:0}
.demo-tag{white-space:normal}
.ccard .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccard .metrics b{overflow-wrap:anywhere}
.ccard .metrics>div{min-width:0}
.card-hd>*{min-width:0}
@media (max-width:400px){
 .nav .wrap{gap:10px}
 .logo{gap:7px}.wm{font-size:21px}.logo-mark{width:30px;height:30px}
 .nav-cta{gap:6px}.nav-cta .icon-btn{width:36px;height:36px}
 #navDash{padding:10px 14px;font-size:13.5px}
 .page-hd h1{font-size:26px}
 .kpi .val{font-size:24px}
 .ccard .metrics{grid-template-columns:1fr 1fr}
 .h-plat button{padding:8px 11px;font-size:13px}
}

/* ===== Hero (dark, centered) ===== */
.hero{background:#161616;color:#F5F5F7;padding-block:110px 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:1200px;height:700px;left:50%;bottom:-260px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,0,81,.28),rgba(153,0,51,.12) 40%,transparent 68%);pointer-events:none;animation:none;filter:none;top:auto;right:auto;border-radius:0}
.hero::after{display:none}
.hero-c{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.h-title{font-family:"Poppins",var(--f-display);font-size:clamp(36px,6.2vw,80px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:1100px}
.h-line{display:inline-block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.h-line+.h-line{animation-delay:.08s}
.h-rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em}
.h-app{grid-area:1/1;display:inline-flex;align-items:center;gap:.22em;white-space:nowrap}
.h-app.in{animation:rotIn .55s .22s cubic-bezier(.2,.9,.3,1) both}.h-app.out{animation:rotOut .3s cubic-bezier(.6,0,.8,.4) both}
@keyframes rotIn{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes rotOut{to{transform:translateY(-60%);opacity:0;filter:blur(4px)}}
.h-ic{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:.26em;font-style:normal;font-size:.95em;font-weight:700;color:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.15);transform:rotate(-6deg)}
.h-ic{font-size:.62em;width:1.6em;height:1.6em;border-radius:.42em}
.h-app u{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em;text-decoration-color:rgba(245,245,247,.45)}
.h-sub{color:#A1A1A6;font-size:clamp(17px,1.7vw,22px);margin-top:20px;max-width:760px;line-height:1.45}
.h-comp{width:100%;max-width:860px;margin-top:48px;background:#262626;border:1px solid #363636;border-radius:32px;padding:18px 16px 14px 22px;text-align:left;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);transition:border-color .2s,box-shadow .2s}
.h-comp:focus-within{border-color:#4A4A4A;box-shadow:0 0 0 4px rgba(255,46,110,.14),0 30px 80px -30px rgba(0,0,0,.6)}
.h-comp textarea{width:100%;border:0;background:none;color:#F5F5F7;font:inherit;font-size:18px;resize:none;outline:none;min-height:56px;line-height:1.5}
.h-comp textarea::placeholder{color:#8E8E93}
.h-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.h-round{width:46px;height:46px;border-radius:50%;border:1px solid #3A3A3A;background:transparent;color:#C7C7CC;display:grid;place-items:center;flex:none;transition:all .2s;position:relative}
.h-round:hover{background:#333;color:#fff}
.h-round svg{width:20px;height:20px}
.h-row .mic-btn{background:transparent;border-color:#3A3A3A}
.h-row .mic-btn.live{background:var(--red);border-color:transparent;color:#fff}
.h-send{background:#3A3A3C;color:#8E8E93;border-color:transparent}
.h-send.on{background:#FF0051;color:#fff;box-shadow:0 8px 24px -8px #FF0051}
.h-detect{flex:1;color:#8E8E93;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-model select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7C7CC' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center/14px;border:0;color:#E5E5EA;font:inherit;font-size:15.5px;font-weight:600;padding:8px 24px 8px 10px;border-radius:12px;cursor:pointer;outline:none}
.h-model select:hover{background-color:#333}
.h-model option{background:#262626;color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.h-plus-wrap{position:relative}
.h-menu{position:absolute;left:0;top:54px;z-index:30;background:#2C2C2E;border:1px solid #3A3A3C;border-radius:16px;padding:6px;min-width:230px;box-shadow:0 20px 40px rgba(0,0,0,.5);animation:fadeup .2s ease both}
.h-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#F5F5F7;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:600;text-align:left}
.h-menu button:hover{background:#3A3A3C}
.h-menu i{display:inline-flex}.h-menu svg{width:17px;height:17px;color:#FF5C8D}
.h-plat{display:inline-flex;gap:4px;padding:5px;border-radius:999px;border:1px solid #363636;background:#1C1C1C;margin-top:22px}
.h-plat button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#8E8E93;font-size:16px;font-weight:600;padding:10px 20px;border-radius:999px;transition:all .2s}
.h-plat button i{display:inline-flex}.h-plat svg{width:18px;height:18px}
.h-plat button[aria-pressed="true"]{background:#333;color:#fff}
.h-plat button:not(:disabled):hover{color:#fff}
.h-plat em{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:#2C2C2E;color:#8E8E93}
.h-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:22px;color:#8E8E93;font-size:14px;font-weight:600}
.h-try .chip{background:transparent;border-color:#363636;color:#C7C7CC}
.h-try .chip:hover{border-color:#FF2E6E;color:#fff}
.hero .hero-stage{margin-top:64px;min-height:0;width:100%;max-width:760px;padding-bottom:0}
.hero .hero-stage .phone{margin-bottom:-120px}
.hero .hero-hint{display:none}
.hero .float-card{background:rgba(38,38,40,.82);border-color:#3A3A3C;color:#F5F5F7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hero .float-card small{color:#A1A1A6}
.hero .float-card .dot{background:rgba(255,46,110,.18);color:#FF5C8D}
.hero .fc1{left:2%;top:90px}.hero .fc2{right:0;top:240px}.hero .fc3{left:6%;top:400px;bottom:auto}
body.view-landing .nav{background:rgba(22,22,22,.78);border-bottom-color:#2A2A2A}
body.view-landing .nav .logo{color:#F5F5F7}
body.view-landing .nav .nav-links a{color:#A1A1A6}body.view-landing .nav .nav-links a:hover{color:#fff;background:#262626}
body.view-landing .nav .icon-btn{background:#1C1C1C;border-color:#333;color:#F5F5F7}
body.view-landing .nav .btn-ghost{background:#1C1C1C;border-color:#333;color:#F5F5F7}
body.view-landing::before{background:#161616}
@media (max-width:640px){.hero{padding-block:64px 0}.h-comp{border-radius:26px;padding:14px 12px 12px 16px}.h-model select{font-size:13.5px;padding-right:20px}.h-detect{display:none}.h-plat button{padding:8px 13px;font-size:14px}.hero .float-card{display:none}}

/* ===== Hero composer v2 ===== */
.h-comp{position:relative;isolation:isolate;max-width:760px;margin-top:40px;padding:14px 12px 12px 20px;border-radius:26px;background:linear-gradient(180deg,#1F1F22,#18181A);border:0;box-shadow:0 30px 70px -30px rgba(255,0,81,.45),0 0 0 1px rgba(255,255,255,.04) inset}
.h-comp::before{content:"";position:absolute;inset:-1.5px;border-radius:27.5px;padding:1.5px;z-index:-1;background:conic-gradient(from var(--ang,0deg),#8B5CFF,#F0386B,#FF8A00,#FFC400,#22D3EE,#8B5CFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinB 6s linear infinite;opacity:.85}
.h-comp::after{content:"";position:absolute;inset:-14px;border-radius:40px;z-index:-2;background:conic-gradient(from var(--ang,0deg),rgba(139,92,255,.35),rgba(240,56,107,.4),rgba(255,138,0,.3),rgba(34,211,238,.25),rgba(139,92,255,.35));filter:blur(22px);opacity:.55;animation:spinB 6s linear infinite;transition:opacity .3s}
.h-comp:focus-within::after{opacity:.9}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spinB{to{--ang:360deg}}
.h-comp textarea{min-height:30px;font-size:17px;padding:4px 0 0}
.h-row{margin-top:6px;gap:8px}
.h-round{width:40px;height:40px}
.h-round svg{width:19px;height:19px}
.h-mic{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important}
.h-mic svg{width:21px;height:21px;filter:drop-shadow(0 2px 6px rgba(240,56,107,.45))}
.h-mic:hover{background:rgba(255,255,255,.1)!important}
.h-mic.live{background:linear-gradient(140deg,#8B5CFF,#F0386B 55%,#FF8A00)!important;border-color:transparent!important}
.h-mic.live svg *{fill:#fff;stroke:#fff}
.h-send{width:40px;height:40px}
.h-send.on{background:linear-gradient(140deg,#8B5CFF,#F0386B 55%,#FF8A00);box-shadow:0 8px 22px -6px #F0386B}
.h-model select{font-size:14.5px;padding:7px 22px 7px 10px}
.h-plat{position:relative;padding:5px;gap:2px;margin-top:18px;background:rgba(22,22,24,.9);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px -14px rgba(0,0,0,.8)}
.h-plat button{position:relative;z-index:1;font-size:14.5px;padding:8px 16px;gap:8px;color:#A1A1A6;transition:color .3s}
.h-plat button[aria-pressed="true"]{background:transparent;box-shadow:none;color:#fff}
.h-plat-glide{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:0;border-radius:999px;background:linear-gradient(140deg,var(--g1,#8B5CFF),var(--g2,#F0386B));box-shadow:0 8px 20px -8px var(--g2,#F0386B),inset 0 1px 0 rgba(255,255,255,.25);transition:left .45s cubic-bezier(.32,.72,0,1),width .45s cubic-bezier(.32,.72,0,1),background .45s}
.pl-ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:linear-gradient(140deg,var(--pc1),var(--pc2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.pl-ic svg{width:15px;height:15px}
.h-plat button[aria-pressed="true"] .pl-ic{background:rgba(255,255,255,.22)}
.h-plat button[data-soon]{opacity:.6}
.h-plat em{background:rgba(255,255,255,.08);color:#C7C7CC}
@media (max-width:640px){.h-comp{padding:12px 10px 10px 14px;border-radius:22px}.h-comp::before{border-radius:23.5px}.h-plat button{padding:7px 11px;font-size:13px}.pl-ic{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.h-comp::before,.h-comp::after{animation:none}}

/* ===== Apple-style features section (deliberately dark in both themes) ===== */
.apl{background:#000;color:#F5F5F7;position:relative;overflow:clip;padding-block:120px}
.apl::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,0,81,.22),transparent 62%);pointer-events:none}
.apl-head{text-align:center;max-width:900px;margin:0 auto 80px;position:relative}
.apl-eyebrow{font-size:15px;font-weight:700;color:#FF5C8D;letter-spacing:-.01em;display:block;margin-bottom:12px}
.apl-head h2{font-family:"Poppins",var(--f-display);font-size:clamp(38px,6vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.apl-grad{background:linear-gradient(90deg,#FF5C8D 0%,#FF2E6E 30%,#C13CFF 70%,#6C5CFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradShift 8s ease-in-out infinite alternate}
@keyframes gradShift{to{background-position:100% 0}}
.apl-head p{color:#A1A1A6;font-size:clamp(17px,1.9vw,21px);margin:22px auto 0;max-width:620px;line-height:1.5}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:72px;align-items:start;position:relative}
.st-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.38;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);transform:scale(.97);transform-origin:left center;cursor:pointer;max-width:520px}
.st-step.on{opacity:1;transform:none}
.st-kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#A1A1A6;text-transform:uppercase;letter-spacing:.08em}
.st-kick i{width:8px;height:8px;border-radius:50%;background:#FF2E6E;box-shadow:0 0 0 0 rgba(255,46,110,.6)}
.st-step.on .st-kick i{animation:pulseDot 1.6s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 10px rgba(255,46,110,0)}100%{box-shadow:0 0 0 0 rgba(255,46,110,0)}}
.st-step h3{font-family:"Poppins",var(--f-display);font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.st-step p{color:#A1A1A6;font-size:18px;line-height:1.5}
.st-res{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:14px;font-weight:600;color:#E5E5EA;padding:9px 14px 9px 9px;border-radius:999px;background:#1C1C1E;border:1px solid #2C2C2E}
.st-res b{width:22px;height:22px;border-radius:50%;background:#30D158;color:#000;display:grid;place-items:center;font-size:12px}
.story-stage{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 36px);display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:20px}
.story-say{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(28,28,30,.85);border:1px solid #2C2C2E;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-weight:600;font-size:15px;min-height:46px;max-width:100%;box-shadow:0 20px 40px -20px rgba(255,0,81,.5)}
.say-wave{display:flex;align-items:center;gap:3px;height:22px;width:34px;justify-content:center;border-radius:50%;flex:none}
.say-wave i{width:3px;height:6px;border-radius:2px;background:linear-gradient(#FF5C8D,#C13CFF);transition:height .2s}
.story-say.live .say-wave i{animation:wv .8s ease-in-out infinite}
.story-say.live .say-wave i:nth-child(1){height:10px;animation-delay:-.1s}.story-say.live .say-wave i:nth-child(2){height:18px;animation-delay:-.3s}.story-say.live .say-wave i:nth-child(3){height:22px;animation-delay:-.5s}.story-say.live .say-wave i:nth-child(4){height:14px;animation-delay:-.2s}.story-say.live .say-wave i:nth-child(5){height:8px;animation-delay:-.4s}
.story-phone{width:290px;height:600px;filter:drop-shadow(0 40px 80px rgba(255,0,81,.18))}
.story-dots{display:flex;gap:8px}
.story-dots i{width:8px;height:8px;border-radius:4px;background:#3A3A3C;transition:width .4s,background .4s}
.story-dots i.on{width:26px;background:#F5F5F7}
@media (max-width:900px){
 .story{grid-template-columns:1fr;gap:0}
 .story-stage{order:-1;z-index:3;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));background:#000;padding-block:10px 8px;gap:8px;margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding-inline:16px}
 .story-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:40px;background:linear-gradient(#000,rgba(0,0,0,0));pointer-events:none}
 .story-say{font-size:13px;padding:8px 14px 8px 10px;min-height:38px}
 .story-phone{transform:scale(.5);transform-origin:top center;height:302px;margin-bottom:0}
 .story-dots{margin-top:-2px}
 .st-step{min-height:46vh;transform:none;padding-top:20px}
 .apl{padding-block:80px}.apl-head{margin-bottom:40px}
}
.objs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:120px}
@media (max-width:900px){.objs{grid-template-columns:1fr;margin-top:60px}}
.obj{background:linear-gradient(180deg,#141416,#0B0B0C);border:1px solid #1F1F22;border-radius:30px;padding:36px;display:flex;flex-direction:column;gap:28px;overflow:hidden;position:relative;min-width:0}
.obj-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:40px}
@media (max-width:900px){.obj-wide{grid-template-columns:1fr}.obj{padding:26px}}
.obj-copy h3{font-family:"Poppins",var(--f-display);font-size:clamp(26px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.obj-copy p{color:#A1A1A6;font-size:17px;margin-top:12px;line-height:1.5}
/* laptop */
.laptop{width:100%;max-width:600px;justify-self:center;transform:perspective(1400px) rotateX(6deg);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.obj.in .laptop{transform:perspective(1400px) rotateX(0)}
.lid{background:linear-gradient(#2A2A2D,#1A1A1C);border-radius:18px 18px 6px 6px;padding:12px 12px 14px;position:relative;box-shadow:inset 0 0 0 1.5px #3A3A3D,0 30px 60px -20px rgba(0,0,0,.8)}
.lid .cam{position:absolute;top:5px;left:50%;width:5px;height:5px;border-radius:50%;background:#0B0B0C;box-shadow:inset 0 0 0 1px #333;transform:translateX(-50%)}
.scr{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#fff;position:relative;color:#111}
.base{height:16px;margin:0 -7%;background:linear-gradient(180deg,#D7D7DC 0%,#A8A8AE 60%,#7D7D83 100%);border-radius:2px 2px 16px 16px;position:relative;box-shadow:0 20px 30px -10px rgba(0,0,0,.6)}
.base i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:18%;height:6px;border-radius:0 0 8px 8px;background:#9A9AA0}
.site{position:absolute;inset:0;font-family:-apple-system,"Manrope",system-ui,sans-serif;background:linear-gradient(180deg,#F6F2FF,#fff 60%)}
.s-nav{display:flex;align-items:center;gap:8px;padding:3% 4%;font-size:clamp(7px,1.1vw,11px)}
.s-nav b{color:#6C3BFF;margin-right:auto}.s-nav span{width:7%;height:4px;border-radius:2px;background:#D9D3EE}.s-nav em{font-style:normal;background:#6C3BFF;color:#fff;padding:3px 8px;border-radius:6px;font-weight:700}
.s-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:4%;padding:2% 4%;align-items:center}
.s-hero small{font-size:clamp(5px,.8vw,8px);font-weight:800;color:#8A7FB0;letter-spacing:.08em}
.s-hero h4{font-family:inherit;font-size:clamp(10px,1.9vw,20px);font-weight:800;letter-spacing:-.02em;margin:4px 0 8px;line-height:1.1}
.s-hero u{text-decoration:none;color:#6C3BFF}
.s-btn{display:inline-block;background:#6C3BFF;color:#fff;font-size:clamp(6px,.95vw,10px);font-weight:700;padding:4px 10px;border-radius:7px}
.s-list{display:flex;flex-direction:column;gap:5px}
.s-list span{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #EEE9FA;border-radius:8px;padding:4px 7px;font-size:clamp(6px,.9vw,10px);font-weight:600}
.s-list i{width:10px;height:10px;border-radius:50%}.s-list em{margin-left:auto;font-style:normal;color:#6C3BFF;font-weight:800}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;padding:3% 4%}
.s-cards i{height:clamp(18px,4vw,44px);border-radius:8px;background:#F1ECFF}
.beam{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(255,0,81,0),rgba(255,0,81,.16) 80%,rgba(255,0,81,.9) 100%);transform:translateY(-100%);pointer-events:none}
.obj.in .beam{animation:beam 3.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes beam{0%{transform:translateY(-100%)}70%{transform:translateY(460%)}100%{transform:translateY(460%);opacity:0}}
.tagx{position:absolute;font-size:clamp(7px,1vw,11px);font-weight:700;color:#fff;background:rgba(17,17,20,.88);padding:4px 9px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.25);white-space:nowrap}
.tagx::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#30D158;margin-right:6px;vertical-align:1px}
.mac .t1{left:24%;top:15%}.mac .t2{right:4%;top:27%}.mac .t3{left:24%;top:71%}.mac .t4{right:5%;bottom:5%}
.t1{left:4%;top:16%}.t2{right:5%;top:30%}.t3{left:30%;top:58%}.t4{right:8%;bottom:8%}
.obj.in .tagx{animation:tagPop 3.2s cubic-bezier(.2,1.3,.3,1) infinite}
.obj.in .t2{animation-delay:.35s}.obj.in .t3{animation-delay:.7s}.obj.in .t4{animation-delay:1.05s}
@keyframes tagPop{0%,8%{transform:scale(.6);opacity:0}18%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
/* idea feed */
.idea-feed{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:16px 14px 0;min-width:0;display:flex;flex-direction:column;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--red) 45%,transparent)}
.if-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 6px 12px;font-weight:700;font-size:14px;flex-wrap:wrap}
.if-hd span{display:flex;align-items:center;gap:8px}.if-hd i{width:8px;height:8px;border-radius:50%;background:#30D158;animation:blink 1.4s infinite}
.if-hd small{color:var(--muted);font-weight:600;font-size:12.5px}
.if-rail{height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 90%,transparent)}
.if-track{display:flex;flex-direction:column;gap:12px;animation:ifScroll 90s linear infinite;padding-bottom:12px}
.if-rail:hover .if-track{animation-play-state:paused}
@keyframes ifScroll{to{transform:translateY(-50%)}}
.idc{display:flex;flex-direction:column;gap:12px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:20px;padding:14px;color:var(--ink);transition:transform .25s,border-color .25s,box-shadow .25s;width:100%}
.idc:hover{transform:scale(1.015);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 20px 40px -24px color-mix(in srgb,var(--c) 80%,transparent)}
.ic-top{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center}
.ic-icon{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:700;font-size:26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 8px 16px -8px var(--c)}
.ic-t b{display:block;font-size:16px}.ic-t small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin:2px 0 4px}
.ic-cat{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.ic-get{font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px;background:var(--red);color:#fff;letter-spacing:.02em}
.ic-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ic-sh{aspect-ratio:1/1;border-radius:12px;padding:9px;color:#fff;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.ic-sh b{font-size:11px;line-height:1.2;font-weight:800}
.ic-sh i{flex:1;border-radius:8px 8px 0 0;margin:0 4px -9px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.3);border-bottom:0}
.ic-sig{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);flex-wrap:wrap}
.ic-sig i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.ic-sig em{font-style:normal;color:var(--muted);font-weight:600}
@media (max-width:900px){.if-rail{height:440px}}

/* ===== 3D CTA sections ===== */
.xcs{padding-block:40px}
.xc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:30px;border-radius:40px;overflow:hidden;min-height:560px;padding:56px 0 56px 64px;isolation:isolate}
.xc-copy{position:relative;z-index:3;display:flex;flex-direction:column;gap:18px;max-width:520px}
.xc-k{font-weight:700;font-size:15px;color:var(--a)}
.xc h2{font-family:"Poppins",var(--f-display);font-size:clamp(36px,4.8vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.xc h2 em{font-style:normal;font-weight:700}
.xc p{font-size:18px;line-height:1.5;max-width:44ch}
.xc-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.xc-btn{background:var(--a);color:#fff;box-shadow:0 14px 30px -12px var(--a);padding:15px 24px;font-size:16px}
.xc-btn:hover{transform:translateY(-2px)}
.xc-ghost{font-weight:700;font-size:15px;text-decoration:none;padding:14px 6px;border-bottom:1.5px solid currentColor;opacity:.85}
.xc-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:800;font-size:14.5px}
.xc-pill.a{background:#0A2A7A;color:#fff;transform:rotate(-3deg);box-shadow:0 10px 24px -10px rgba(10,42,122,.7)}
.xa{position:relative;height:100%;min-height:460px;display:grid;place-items:center;perspective:1400px}
.xa-float{position:relative;z-index:2;animation:xfloat 7s ease-in-out infinite}
@keyframes xfloat{50%{transform:translateY(-14px)}}
/* phone */
.xp{--w:250px;width:var(--w);aspect-ratio:9/19.4;border-radius:17%/8%;padding:3.2%;container-type:inline-size;position:relative;
 background:linear-gradient(140deg,#B9C7FF 0%,#5D6FD8 14%,#2A3486 40%,#1A1F55 62%,#7F8FE8 100%);
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 4px #0A0C1C,0 2px 0 1px rgba(255,255,255,.1),-30px 60px 80px -30px rgba(0,0,0,.65),0 30px 50px -30px rgba(0,0,0,.6)}
.xp::before{content:"";position:absolute;left:-1.4%;top:22%;width:1.6%;height:22%;border-radius:2px;background:linear-gradient(#8B99F0 0 18%,transparent 18% 32%,#8B99F0 32% 62%,transparent 62% 70%,#8B99F0 70%)}
.xp-scr{position:relative;width:100%;height:100%;border-radius:14%/6.6%;overflow:hidden;background:#fff;color:#111;font:600 4.2cqw/1.3 -apple-system,"Manrope",system-ui,sans-serif;display:flex;flex-direction:column}
.xp-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12));z-index:9}
.xp-scr.dk{background:#121216;color:#fff}
.xp-isl{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:32%;height:4.2%;border-radius:999px;background:#000;z-index:8}
.xp-sb{display:flex;justify-content:space-between;align-items:center;padding:6.4% 9% 2%;font-size:4.6cqw;font-weight:700;flex:none}
.xp-sb span:last-child{display:flex;gap:3px;align-items:center}
.xp-bt{display:inline-block;width:6.5cqw;height:3.4cqw;border-radius:1cqw;border:.5cqw solid currentColor;position:relative}
.xp-bt::after{content:"";position:absolute;inset:.4cqw 1.4cqw .4cqw .4cqw;background:#34C759;border-radius:.3cqw}
.tilt-a{transform:rotateY(-22deg) rotateX(10deg) rotateZ(-9deg);--w:270px}
.tilt-b{transform:rotate(-14deg);--w:400px;background:linear-gradient(140deg,#F2F2F4 0%,#A8A9AE 12%,#5E5F64 40%,#2A2B2F 62%,#C9CACE 100%);box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 5px #0A0A0C,-40px 60px 90px -30px rgba(0,0,0,.55)}
.tilt-b::before{background:linear-gradient(#D5D6DA 0 18%,transparent 18% 32%,#D5D6DA 32% 62%,transparent 62% 70%,#D5D6DA 70%)}
.tilt-c{transform:rotateY(14deg) rotateX(6deg) rotateZ(4deg);--w:250px;background:linear-gradient(140deg,#6B6B73,#1B1B20 40%,#0C0C0F 70%,#4A4A52);box-shadow:inset 0 0 0 1.5px #8A8A92,inset 0 0 0 4px #000,30px 60px 80px -30px rgba(0,0,0,.4)}
.tilt-c::before{background:linear-gradient(#55555D 0 18%,transparent 18% 32%,#55555D 32% 62%,transparent 62% 70%,#55555D 70%)}
.xc.in .tilt-a{animation:tiltA 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes tiltA{from{transform:rotateY(-50deg) rotateX(20deg) rotateZ(-20deg) translateY(60px);opacity:0}}
/* 1 tube */
.xc-tube{background:radial-gradient(120% 90% at 70% 40%,color-mix(in srgb,var(--a) 55%,#14070D) 0%,#2A0612 45%,#0B0306 100%);color:#fff}
.xc-tube::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 75% 20%,rgba(255,200,220,.25),transparent 70%);pointer-events:none;z-index:0}
.xc-tube p{color:rgba(255,255,255,.78)}.xc-tube .xc-k{color:#FFB3C8}
.xc-tube h2 em{color:#fff;text-shadow:0 0 30px color-mix(in srgb,var(--a) 80%,transparent)}
.xc-tube h2{color:rgba(255,255,255,.82)}
.tube{position:absolute;inset:-10% -20% -10% -30%;width:150%;height:120%;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:tubeDrift 12s ease-in-out infinite}
@keyframes tubeDrift{50%{transform:translate(-10px,12px) rotate(-1.5deg)}}
.tube .shine{stroke-dasharray:120 900;animation:shine 5s linear infinite}
@keyframes shine{to{stroke-dashoffset:-1020}}
.xs-build{display:flex;flex-direction:column;gap:3cqw;padding:3cqw 7cqw 0;flex:1}
.xs-build .xhi{font-size:6cqw;font-weight:800}
.xs-build h5{margin:0;font-family:inherit;font-size:9.4cqw;font-weight:800;letter-spacing:-.03em;line-height:1.08}
.xs-build .xpill{align-self:flex-start;color:#fff;font-size:4.4cqw;padding:2.6cqw 5cqw;border-radius:999px}
.xs-build>small{font-size:3.6cqw;font-weight:700;opacity:.8}
.xs-build .band{margin:2cqw -7cqw 0;padding:4cqw 7cqw;color:#fff}
.xs-build .band>small{font-size:3.8cqw;opacity:.85}
.xs-build .ups{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;margin-top:3cqw}
.xs-build .ups div{background:linear-gradient(160deg,#fff,#EEF0FF);color:#111;border-radius:4cqw;padding:3.4cqw;display:flex;flex-direction:column;gap:1cqw;min-height:24cqw;justify-content:flex-end;position:relative}
.xs-build .ups i{position:absolute;top:3cqw;left:3cqw;width:6cqw;height:6cqw;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);display:grid;place-items:center;font-style:normal;font-size:3.4cqw}
.xs-build .ups small{font-size:3cqw;opacity:.6}.xs-build .ups b{font-size:4cqw}
.xs-build .pb{display:block;height:1.4cqw;border-radius:1cqw;background:#E3E5F5;overflow:hidden}.xs-build .pb span{display:block;height:100%;width:30%;animation:pb 3s ease-in-out infinite}
@keyframes pb{50%{width:86%}}
.xs-build .learn{color:#fff;border-radius:5cqw;padding:5cqw;display:flex;justify-content:space-between;align-items:flex-end;min-height:28cqw;margin-top:2cqw}
.xs-build .learn b{font-size:5cqw;max-width:70%;line-height:1.2}
.xs-build .learn i,.xs-build .ups i{font-style:normal}
.xs-build .learn i{width:7cqw;height:7cqw;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}
.xs-build .tabs{margin-top:auto;display:flex;justify-content:space-around;padding:3cqw 0 6cqw}.xs-build .tabs i{width:7cqw;height:5cqw;border-radius:2cqw;background:#E6E6EA}
/* 2 deploy */
.xc-deploy{background:#FFFFFF;color:#111;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:36px 36px}
.xc-deploy p{color:#55565E}
.xc-deploy h2{font-weight:700;color:#111}
.xc-deploy h2 em{display:inline-block;background:var(--a);color:#fff;padding:.02em .32em .1em;border-radius:999px;font-size:.62em;vertical-align:.38em;transform:rotate(-6deg);box-shadow:0 12px 24px -10px var(--a)}
.xc.in.xc-deploy h2 em{animation:pop .8s .3s cubic-bezier(.2,1.6,.3,1) both}
@keyframes pop{from{transform:rotate(-30deg) scale(.3);opacity:0}}
.xa-deploy{overflow:visible;min-height:520px}
.xa-deploy .slab{position:absolute;right:-12%;top:-30%;width:78%;height:90%;border-radius:0 0 0 120px;z-index:0}
.xa-deploy .xa-float{position:absolute;left:18%;top:8%}
.xs-home{flex:1;background:radial-gradient(circle at 30% 20%,#5A4E42,#2B2520 60%,#15120F);background-blend-mode:normal;position:relative;padding:2cqw 7cqw}
.xs-home::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) .4px,transparent .6px);background-size:3px 3px;opacity:.5}
.xs-home .clock{display:none}
.xs-home .grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6cqw 4cqw;margin-top:4cqw}
.xs-home .ico{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;font-size:3.2cqw;color:#fff;font-weight:600;opacity:1}
.xc.in .xs-home .ico{animation:icoPop .6s cubic-bezier(.2,1.5,.3,1) both}
@keyframes icoPop{from{transform:scale(0) translateY(10px);opacity:0}}
.xs-home .ico i{width:16cqw;height:16cqw;border-radius:4cqw;display:grid;place-items:center;font-style:normal;font-size:7cqw;font-weight:800;box-shadow:0 1cqw 3cqw rgba(0,0,0,.4),inset 0 .4cqw 0 rgba(255,255,255,.3)}
/* 3 annotate */
.xc-annotate{background:radial-gradient(90% 80% at 70% 50%,#FFFFFF,#ECECEF 70%,#E2E2E6);color:#111}
.xc-annotate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 110%,rgba(0,0,0,.05) 0 30%,transparent 30%),radial-gradient(circle at 90% -10%,rgba(0,0,0,.04) 0 35%,transparent 35%);pointer-events:none}
.xc-annotate p{color:#55565E}
.xc-annotate h2{color:#111;font-weight:700}
.xc-annotate h2 em{font-family:"Caveat",cursive;font-weight:600;font-size:1.2em;color:var(--a);letter-spacing:0}
.xa-annotate .note{position:absolute;z-index:3;font-family:"Caveat",cursive;font-size:24px;color:#222;display:flex;flex-direction:column}
.xa-annotate .note span{white-space:nowrap;transform:rotate(-4deg)}
.xa-annotate .note svg{width:110px;height:80px}
.xa-annotate .note path{stroke-dasharray:240;stroke-dashoffset:0}
.xc.in .xa-annotate .note path{animation:drawA 1.4s ease both}
.xc.in .xa-annotate .note span{animation:fadeup .6s ease both}
.xc.in .xa-annotate .n2 path,.xc.in .xa-annotate .n2 span{animation-delay:.4s}.xc.in .xa-annotate .n3 path,.xc.in .xa-annotate .n3 span{animation-delay:.8s}.xc.in .xa-annotate .n4 path,.xc.in .xa-annotate .n4 span{animation-delay:1.2s}
@keyframes drawA{from{stroke-dashoffset:240}}
.n1{left:2%;top:6%}.n2{right:2%;top:4%;align-items:flex-end}.n3{right:0;top:58%;align-items:flex-end}.n4{left:0;bottom:6%;flex-direction:column-reverse}
.xs-onb{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:6cqw 7cqw 5cqw;gap:2.4cqw;background:#F6F6F8}
.xs-onb .cards{display:flex;justify-content:center;margin:6cqw 0 5cqw;height:34cqw}
.xs-onb .cards i{width:24cqw;border-radius:5cqw;display:grid;place-items:center;color:#fff;font-style:normal;font-size:11cqw;font-weight:800;box-shadow:0 2cqw 5cqw rgba(0,0,0,.18)}
.xs-onb .cards i:nth-child(1){transform:rotate(-9deg) translate(4cqw,2cqw)}.xs-onb .cards i:nth-child(2){transform:scale(1.12);z-index:2}.xs-onb .cards i:nth-child(3){transform:rotate(9deg) translate(-4cqw,2cqw)}
.xc.in .xs-onb .cards i{animation:cardFan 1s cubic-bezier(.2,1.3,.3,1) both}
@keyframes cardFan{from{transform:none;opacity:0}}
.xs-onb .brand{font-size:3.4cqw;letter-spacing:.3em;opacity:.5}
.xs-onb h5{margin:0;font-family:inherit;font-size:8cqw;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.xc .xs-onb p{font-size:3.8cqw;opacity:.6;margin:0;line-height:1.35}
.xs-onb .dots{display:flex;gap:1.4cqw;margin:2cqw 0}.xs-onb .dots i{width:2cqw;height:1.4cqw;border-radius:1cqw;background:#CFCFD4}.xs-onb .dots i.on{width:5cqw;background:#111}
.xs-onb .b1,.xs-onb .b2{width:100%;padding:3.6cqw;border-radius:3cqw;font-size:4.2cqw;font-weight:800}
.xs-onb .b1{background:#111;color:#fff}.xs-onb .b2{background:#fff;border:1px solid #E3E3E7}
.xs-onb .priv{font-size:3cqw;opacity:.45;margin-top:auto}
/* 4 orbit */
.xc-orbit{background:radial-gradient(80% 90% at 72% 50%,#3A0616 0%,#14070D 55%,#070305 100%);color:#fff}
.xc-orbit p{color:rgba(255,255,255,.75)}.xc-orbit .xc-k{color:#FFB3C8}
.xc-orbit h2 em{font-style:normal;background:linear-gradient(90deg,#FF5C8D,#FF2E6E 40%,#FFB3C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.xc-orbit .xc-ghost{color:#fff}
.xa-orbit{}
.sphere{position:absolute;left:-95px;top:-95px;width:190px;height:190px;border-radius:50%;box-shadow:inset -20px -30px 60px rgba(0,0,0,.55),inset 10px 10px 30px rgba(255,255,255,.25);transform:translateZ(0)}
.glow{position:absolute;left:50%;top:50%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;animation:breatheS 6s ease-in-out infinite}
@keyframes breatheS{50%{transform:translate(-50%,-50%) scale(1.12);opacity:.7}}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-14deg);animation:none}
.ring i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:24px;color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 10px 20px rgba(0,0,0,.45);animation:orbitI 18s linear infinite;animation-delay:calc(var(--i) * -1.8s)}
@keyframes orbitI{from{transform:rotateY(0deg) translateZ(230px) rotateY(0deg)}to{transform:rotateY(360deg) translateZ(230px) rotateY(-360deg)}}
.halo{position:absolute;left:50%;top:50%;width:470px;height:120px;border-radius:50%;border:2px solid;transform:translate(-50%,-50%) rotate(-4deg);opacity:.6}
@media (max-width:900px){
 .xc{grid-template-columns:1fr;padding:40px 24px 0;min-height:0;border-radius:30px;gap:10px}
 .xa{min-height:420px}.xa-deploy{min-height:440px}
 .tilt-b{--w:300px}.xa-deploy .xa-float{left:14%;top:6%}
 .xa-annotate .note{font-size:19px}.xa-annotate .note svg{width:80px;height:58px}
 .ring i{width:46px;height:46px;left:-23px;top:-23px;font-size:18px;border-radius:12px}
 @keyframes orbitI{from{transform:rotateY(0deg) translateZ(150px) rotateY(0deg)}to{transform:rotateY(360deg) translateZ(150px) rotateY(-360deg)}}
 .halo{width:320px;height:90px}.sphere{width:140px;height:140px;left:-70px;top:-70px}
}

/* 5 pocket */
.xc-pocket{grid-template-columns:1fr;text-align:center;padding:64px 24px 0;background:radial-gradient(90% 70% at 50% 30%,#E2004F 0%,#B8003D 45%,#6E0024 100%);color:#fff;min-height:0}
.xc-pocket::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) .6px,transparent .8px);background-size:4px 4px;mix-blend-mode:overlay;pointer-events:none}
.xc-pocket .xc-copy{margin:0 auto;align-items:center;max-width:820px}
.xc-pocket .xc-k{color:#fff;opacity:.9;font-size:17px}
.xc-pocket h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;color:rgba(255,255,255,.92)}
.xc-pocket h2 em{display:block;font-size:2.1em;font-weight:700;letter-spacing:-.045em;color:#fff;line-height:.95;margin-top:6px}
.xc-pocket p{color:rgba(255,255,255,.8);margin:0 auto}
.xc-pocket .xc-btns{display:none}
.xa-pocket{min-height:560px;width:100%;max-width:760px;margin:0 auto;overflow:hidden;perspective:none}
.pk-back{position:absolute;left:8%;right:8%;bottom:-20px;height:300px;border-radius:40px 40px 0 0;background:linear-gradient(180deg,#4B2BD8,#3218A8);transform:skewY(-6deg);z-index:0}
.pk-ph{position:absolute;left:50%;bottom:-170px;transform:translateX(-50%);z-index:1;animation:none}
.tilt-d{--w:290px;transform:rotate(-2deg);background:linear-gradient(140deg,#B6F2E8,#58B8A8 18%,#2C6F66 50%,#1C4C46 70%,#9EE5D9);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),inset 0 0 0 5px #0A1514,0 -20px 60px -20px rgba(0,0,0,.4)}
.xc.in .pk-ph .xp{animation:pkUp 1.4s cubic-bezier(.2,.9,.25,1) both}
@keyframes pkUp{from{transform:translateY(240px) rotate(4deg)}}
.pk-front{position:absolute;left:4%;right:4%;bottom:-10px;height:190px;z-index:2;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#5A36F0 0%,#4426D0 40%,#2E148F 100%);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);box-shadow:inset 0 14px 20px -10px rgba(0,0,0,.5)}
.pk-front::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 6px)}
.stitch{position:absolute;left:3%;right:3%;top:calc(18% + 14px);height:0;border-top:2.5px dashed rgba(255,220,120,.75);transform:rotate(-2.4deg);transform-origin:left}
.rivet{position:absolute;top:16%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#B88A2A 60%,#6E4E0E)}
.rivet.l{left:3%;top:24%}.rivet.r{right:3%;top:4%}
.geo{position:absolute;z-index:3;animation:geoF 8s ease-in-out infinite}
.geo.gc1{left:8%;top:8%;width:38px;height:38px;border-radius:50%;border:3px solid #C6FF3D}
.geo.gc2{right:12%;top:2%;width:30px;height:30px;border-radius:50%;border:3px solid #FFB3C8;animation-delay:-3s}
.geo.gt1{right:6%;top:30%;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:30px solid #FFE14D;filter:drop-shadow(0 0 0 #fff);clip-path:none;animation-delay:-1.5s}
.geo.gt2{left:4%;top:52%;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid #fff;animation-delay:-5s}
@keyframes geoF{50%{transform:translateY(-16px) rotate(30deg)}}
.pk-cta{position:absolute;left:5%;bottom:28px;z-index:4;display:inline-flex;align-items:center;gap:10px;background:#C6FF3D;color:#14070D;font-weight:800;font-style:italic;font-size:17px;padding:14px 22px;border-radius:16px;box-shadow:0 14px 30px -10px rgba(198,255,61,.6);transform:rotate(-2deg)}
.pk-cta svg{width:22px;height:22px;animation:cursorTap 1.6s ease-in-out infinite}
@keyframes cursorTap{50%{transform:translate(-3px,-3px) scale(.9)}}
.xs-dash{flex:1;background:#F6F7F9;display:flex;flex-direction:column;gap:3.6cqw;padding:2cqw 6cqw}
.xs-dash .hd{display:flex;justify-content:space-between;align-items:center;background:#fff;margin:0 -6cqw;padding:3cqw 6cqw;border-bottom:1px solid #ECEDF0}
.xs-dash .lg{display:flex;align-items:center;gap:2cqw;font-weight:800;font-size:5.4cqw}.xs-dash .lg svg{width:7cqw;height:7cqw}
.xs-dash .hd i{width:8cqw;height:8cqw;border-radius:50%;background:#4A2A1E;color:#fff;display:grid;place-items:center;font-style:normal;font-size:3.2cqw;font-weight:800}
.xs-dash .t{display:flex;align-items:center;gap:2.4cqw}.xs-dash .t b{font-size:7cqw;letter-spacing:-.02em}.xs-dash .t span{font-size:3.2cqw;color:#2A8CB8;background:#E3F4FB;border:1px solid #BFE3F3;padding:.8cqw 2.4cqw;border-radius:999px}
.xs-dash .kp{background:#fff;border:1px solid #E6E8EC;border-radius:3cqw;padding:4.6cqw 5cqw;display:flex;flex-direction:column;gap:2cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.04)}
.xs-dash .kp small{font-size:3.6cqw;color:#55565E}.xs-dash .kp b{font-size:8cqw;letter-spacing:-.02em}
@media (max-width:900px){.xa-pocket{min-height:440px}.tilt-d{--w:270px}.pk-front{height:150px}.pk-back{height:240px}.pk-cta{font-size:14px;padding:11px 16px}}

/* ===== CTA refinement: compact, natural, animated ===== */
.xcs{padding-block:28px}
.xc{min-height:0;height:360px;padding:0 0 0 60px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;border-radius:32px;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.xc::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 45%,transparent 60%);transform:translateX(-120%)}
.xc.in::after{animation:sweep2 1.8s .3s cubic-bezier(.4,0,.2,1) both}
@keyframes sweep2{to{transform:translateX(120%)}}
.xc-copy{gap:12px;max-width:470px}
.xc h2{font-size:clamp(30px,3.5vw,46px);line-height:1.04}
.xc p{font-size:16.5px}
.xc-k{font-size:13.5px;letter-spacing:.01em}
.xc-btn{padding:13px 22px;font-size:15px}
.xc .xc-copy>*{opacity:1}
.xc.in .xc-copy>*{animation:cUp .8s cubic-bezier(.2,.8,.2,1) both}
.xc.in .xc-copy>*:nth-child(2){animation-delay:.08s}.xc.in .xc-copy>*:nth-child(3){animation-delay:.16s}.xc.in .xc-copy>*:nth-child(4){animation-delay:.24s}
@keyframes cUp{from{transform:translateY(18px);opacity:0}}
.xa{height:360px;min-height:0;transform:perspective(1000px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1);place-items:start center}
.xa-float{animation:xfloat 7s ease-in-out infinite}
/* tube */
.xa-tube .xa-float{margin-top:40px}
.tilt-a{--w:220px}
.tube{inset:-20% -30% -30% -40%;width:170%;height:150%}
/* deploy */
.xa-deploy{min-height:0}
.xa-deploy .xa-float{left:22%;top:34px}
.tilt-b{--w:300px}
.xa-deploy .slab{right:-6%;top:-20%;width:70%;height:80%;border-radius:0 0 0 90px}
/* annotate */
.xa-annotate .xa-float{margin-top:36px}
.tilt-c{--w:210px}
.xa-annotate .note{font-size:21px}.xa-annotate .note svg{width:84px;height:60px}
.n1{left:4%;top:8%}.n2{right:2%;top:6%}.n3{right:0;top:52%}.n4{left:0;top:56%;bottom:auto;flex-direction:column}
/* orbit */
.xa-orbit{place-items:center}
.sphere{left:-72px;top:-72px;width:144px;height:144px}
.glow{width:320px;height:320px}
.ring i{width:48px;height:48px;left:-24px;top:-24px;font-size:19px;border-radius:13px}
@keyframes orbitI{from{transform:rotateY(0deg) translateZ(180px) rotateY(0deg)}to{transform:rotateY(360deg) translateZ(180px) rotateY(-360deg)}}
.halo{width:380px;height:96px}
/* pocket: becomes a two-column banner */
.xc-pocket{grid-template-columns:minmax(0,1fr) minmax(0,1fr);text-align:left;padding:0 0 0 60px;height:360px}
.xc-pocket .xc-copy{margin:0;align-items:flex-start}
.xc-pocket h2{font-size:clamp(22px,2.2vw,28px)}
.xc-pocket h2 em{font-size:1.75em;margin-top:4px}
.xc-pocket .xc-btns{display:flex}
.xc-pocket .xc-btn{background:#C6FF3D;color:#14070D;box-shadow:0 14px 30px -12px rgba(198,255,61,.6)}
.xc-pocket .xc-ghost{color:#fff}
.xa-pocket{min-height:0;height:360px;max-width:none;overflow:visible}
.pk-ph{bottom:auto;top:38px}
.tilt-d{--w:240px}
.pk-back{left:4%;right:4%;bottom:-40px;height:200px}
.pk-front{left:0;right:0;bottom:-30px;height:130px}
.pk-cta{display:none}
.geo.gc1{left:6%;top:12%}.geo.gt2{left:2%;top:58%}
@media (max-width:900px){
 .xc,.xc-pocket{grid-template-columns:1fr;height:auto;padding:36px 24px 0;gap:0}
 .xa,.xa-pocket{height:300px}
 .tilt-a{--w:190px}.tilt-b{--w:250px}.tilt-c{--w:180px}.tilt-d{--w:210px}
 .xa-deploy .xa-float{left:16%;top:30px}
 .xa-annotate .note{font-size:17px}.xa-annotate .note svg{width:60px;height:44px}
 @keyframes orbitI{from{transform:rotateY(0deg) translateZ(140px) rotateY(0deg)}to{transform:rotateY(360deg) translateZ(140px) rotateY(-360deg)}}
 .halo{width:300px}
}
@media (prefers-reduced-motion:reduce){.xa{transform:none!important}}

.cta-prev{border-radius:20px;overflow:hidden;background:var(--page);padding:10px}
.cta-scale .xcs{padding:0}
.cta-scale .xc{height:300px;padding-left:36px}
.cta-scale .xc h2{font-size:32px}.cta-scale .xc p{font-size:14.5px}
.cta-scale .xa,.cta-scale .xa-pocket{height:300px}
.cta-scale .tilt-a{--w:180px}.cta-scale .tilt-b{--w:240px}.cta-scale .tilt-c{--w:170px}.cta-scale .tilt-d{--w:190px}
@media (max-width:1100px){.cta-scale .xc{grid-template-columns:1fr;height:auto;padding:28px 20px 0}}
.cta-gauge{position:relative;width:180px;margin:0 auto 8px}.cta-gauge svg{width:100%}
.cta-gauge b{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--f-display);font-size:34px}
.cta-var{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.cta-var b{display:block;font-family:var(--f-display);font-size:17px;margin-top:4px;line-height:1.2}
.cta-var b em{font-style:normal;color:var(--red-ink)}

/* ===== Top charts ===== */
.tc-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.tc-filter button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;transition:all .2s}
.tc-filter button:hover{color:var(--ink)}
.tc-filter button[aria-pressed="true"]{background:var(--ink);color:var(--page);border-color:var(--ink)}
.tc-rail{overflow:hidden;margin:0 calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:10px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tc-track{display:flex;gap:18px;width:max-content;animation:tcSlide 70s linear infinite}
.tc-rail.rev .tc-track{animation-direction:reverse;animation-duration:80s}
.tc-rail:hover .tc-track{animation-play-state:paused}
@keyframes tcSlide{to{transform:translateX(-50%)}}
.tc{width:236px;flex:none;border:1px solid var(--line);background:var(--bg);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:12px;text-align:left;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;position:relative;overflow:hidden}
.tc::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--c) 26%,transparent),transparent 60%);opacity:.6;transition:opacity .3s;pointer-events:none}
.tc:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 30px 60px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.tc:hover::before{opacity:1}
.tc-ph{display:grid;place-items:center;position:relative}
.tc-frame{width:150px;height:310px;border-radius:30px;padding:6px;background:linear-gradient(150deg,#5B5B63,#141418 45%,#3B3B43);box-shadow:inset 0 0 0 1px #6B6B74,inset 0 0 0 2.5px #000,0 18px 30px -16px rgba(0,0,0,.7);position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tc:hover .tc-frame{transform:scale(1.04) rotate(-1.5deg)}
.tc-frame::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:46px;height:13px;border-radius:9px;background:#000;z-index:3}
.tc-frame.big{width:180px;height:372px;border-radius:36px}
.tc-info{display:flex;flex-direction:column;gap:10px;position:relative}
.tc-hd{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center}
.tc-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-family:var(--f-display);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.tc-hd b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-hd small{color:var(--muted);font-size:12px}
.tc-tag{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.tc-tag.v{background:var(--red-soft);color:var(--red-ink)}
.tc-m b{font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tc-m small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.tc-src{text-align:center;color:var(--muted);font-size:12.5px;max-width:860px;margin:6px auto 0;line-height:1.6}
.tc-src a{color:var(--ink)}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px}
.tc-grid .tc{width:auto}
/* pattern screens */
.cp{position:absolute;inset:6px;border-radius:24px;overflow:hidden;background:#fff;color:#111;font:600 8px/1.3 -apple-system,"Manrope",system-ui,sans-serif;display:flex;flex-direction:column;gap:6px;padding:0 9px 9px}
.tc-frame.big .cp{border-radius:30px;font-size:9.5px}
.cp.dk{background:#0B0B0E;color:#fff}
.cp-sb{display:flex;justify-content:space-between;padding:9px 6px 6px;font-size:7.5px;font-weight:700;flex:none}
.cp-sb span:last-child{letter-spacing:-1px;opacity:.6}
.cp-l{display:block;height:5px;border-radius:3px;background:currentColor;opacity:.14;margin:3px 0}
.w3{width:30%}.w4{width:40%}.w5{width:50%}.w6{width:60%}.w7{width:70%}.w8{width:80%}.w9{width:92%}
.cp-chat{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.cp-b{border-radius:10px;padding:6px 7px;max-width:84%}
.cp-b.me{align-self:flex-end;background:#F1F1F3}
.cp-b.ai{position:relative;padding-left:16px;width:84%}
.cp-b.ai i{position:absolute;left:0;top:6px;width:10px;height:10px;border-radius:50%}
.cp-b.typing{display:flex;gap:3px;width:auto;padding:8px 7px 8px 16px}
.cp-b.typing em{width:4px;height:4px;border-radius:50%;background:#999;animation:tdot 1s infinite}
.cp-b.typing em:nth-child(3){animation-delay:.15s}.cp-b.typing em:nth-child(4){animation-delay:.3s}
@keyframes tdot{50%{transform:translateY(-3px);opacity:.4}}
.cp-in{display:flex;align-items:center;justify-content:space-between;border:1px solid #E4E4E8;border-radius:14px;padding:6px 6px 6px 10px;color:#999;flex:none}
.cp-in b{width:16px;height:16px;border-radius:50%}
.cp-hello{font-size:17px;font-weight:800;color:transparent;margin-top:22px;letter-spacing:-.02em}
.cp-chips{display:flex;flex-wrap:wrap;gap:4px}.cp-chips span{padding:4px 7px;border-radius:8px;background:#F1F3F8}
.cp-orb{width:60px;height:60px;border-radius:50%;margin:auto;filter:blur(1px);animation:orbspin 4s linear infinite}
.cp-feed{position:absolute;inset:0;overflow:hidden}
.cp-vid{height:100%;position:relative;animation:feedUp 6s cubic-bezier(.7,0,.3,1) infinite}
.cp-vid i{position:absolute;left:50%;top:42%;width:46px;height:46px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#FE2C55 0 30%,transparent 32%),radial-gradient(circle,#25F4EE 0 45%,transparent 47%);opacity:.5}
@keyframes feedUp{0%,40%{transform:none}50%,90%{transform:translateY(-100%)}100%{transform:translateY(-100%)}}
.cp-side{position:absolute;right:8px;bottom:60px;display:flex;flex-direction:column;gap:9px;z-index:2}
.cp-side i{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.85)}
.cp-cap{position:absolute;left:9px;bottom:16px;right:40px;z-index:2;color:#fff}.cp-cap .cp-l{opacity:.5}
.cp-dk .cp-sb,.cp.dk .cp-sb{position:relative;z-index:2}
.cp-top{display:flex;align-items:center;gap:5px;font-size:12px}
.cp-thumb{aspect-ratio:16/9;border-radius:8px;position:relative}
.cp-thumb em{position:absolute;right:4px;bottom:4px;font-style:normal;background:rgba(0,0,0,.75);color:#fff;font-size:6.5px;padding:1px 3px;border-radius:3px}
.cp-meta{display:flex;align-items:center;gap:5px}.cp-meta i{width:12px;height:12px;border-radius:50%;background:#ddd;flex:none}.cp-meta .cp-l{flex:1}
.cp-ring{width:96px;height:96px;border-radius:50%;margin:16px auto 4px;display:grid;place-items:center;animation:ringIn 1.6s ease both}
.cp-ring span{width:76px;height:76px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.cp-ring small{font-size:7px;color:#888}
@keyframes ringIn{from{transform:rotate(-90deg) scale(.8);opacity:0}}
.cp-rows div{display:flex;align-items:center;gap:6px;padding:4px 0}.cp-rows i{width:8px;height:8px;border-radius:2px}.cp-rows .cp-l{margin-left:auto}
.cp-cta{margin-top:auto;text-align:center;color:#fff;border-radius:12px;padding:8px;font-weight:800}
.cp-stack{flex:1;position:relative;margin-top:6px}
.cp-card{position:absolute;inset:0 4px 4px;border-radius:14px}
.cp-card.back{background:#E9E6EF;transform:scale(.94) translateY(8px)}
.cp-card.front{display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff;animation:swipe 4s ease-in-out infinite;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.cp-card.front b{font-size:12px}
@keyframes swipe{0%,45%{transform:none}60%{transform:translateX(130%) rotate(18deg);opacity:0}61%{transform:scale(.94) translateY(8px);opacity:0}75%,100%{transform:none;opacity:1}}
.cp-acts{display:flex;justify-content:center;gap:12px;flex:none}
.cp-acts i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15);font-size:12px;color:#999}
.cp-streak{display:flex;align-items:baseline;gap:5px;margin-top:4px}.cp-streak b{font-size:16px;color:#FF9600}
.cp-path{flex:1;display:flex;flex-direction:column;justify-content:space-around}
.cp-path i{width:30px;height:24px;border-radius:50%;background:#E5E5E5;box-shadow:0 4px 0 #CFCFCF}
.cp-path i.done{background:var(--c);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000)}
.cp-path i.cur{background:var(--c);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000),0 0 0 5px color-mix(in srgb,var(--c) 25%,transparent);animation:bounceN 1.2s ease-in-out infinite}
@keyframes bounceN{50%{transform:translateY(-4px)}}
.cp-stories{display:flex;gap:6px}.cp-stories i{width:28px;height:28px;border-radius:50%;padding:2px;animation:spinS 6s linear infinite}.cp-stories b{display:block;width:100%;height:100%;border-radius:50%;background:#ddd;border:2px solid #fff}
@keyframes spinS{to{filter:hue-rotate(40deg)}}
.cp-post{aspect-ratio:1;border-radius:6px}
.cp-cam{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.cp-face{position:absolute;left:50%;top:30%;width:60px;height:74px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 50% 40%,#E7C2A2,#B38463);box-shadow:0 0 0 3px rgba(255,252,0,.5);animation:lensP 2s ease-in-out infinite}
@keyframes lensP{50%{box-shadow:0 0 0 8px rgba(255,252,0,.15)}}
.cp-lens{position:absolute;bottom:22px;display:flex;gap:6px}.cp-lens i{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.4)}
.cp-shutter{position:absolute;bottom:18px;width:34px;height:34px;border-radius:50%;border:3px solid #fff}
.cp-prev{aspect-ratio:9/12;border-radius:6px;margin-top:4px;background-size:200% 200%!important;animation:grad 5s ease infinite}
@keyframes grad{50%{background-position:100% 100%}}
.cp-tl{position:relative;display:flex;flex-direction:column;gap:4px;background:#1A1A1E;border-radius:6px;padding:6px}
.cp-trk{display:flex;gap:2px;height:10px}.cp-trk i{border-radius:3px}
.cp-head{position:absolute;top:2px;bottom:2px;width:2px;background:#fff;left:10%;animation:play 4s linear infinite}
@keyframes play{to{left:92%}}
.cp-board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px;aspect-ratio:1;padding:6px;border-radius:10px;background:#D7EFD1}
.cp-board i{border-radius:4px;opacity:.85}
.cp-dice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px}
.cp-dice b{font-size:24px;background:#fff;border-radius:6px;line-height:1;padding:1px 3px;box-shadow:0 4px 10px rgba(0,0,0,.25);animation:roll 1.8s ease-in-out infinite}
.cp-dice b+b{animation-delay:.2s}
@keyframes roll{0%,60%{transform:none}70%{transform:rotate(180deg) scale(1.2)}80%{transform:rotate(360deg)}}
.cp-lvl{align-self:center;color:#fff;font-weight:800;border-radius:10px;padding:4px 10px;margin-top:6px}
.cp-gems{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-radius:10px;background:#1F2A55;aspect-ratio:1}
.cp-gems i{border-radius:5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.4);animation:gem 2.4s ease-in-out infinite}
@keyframes gem{0%,80%,100%{transform:none}88%{transform:scale(.6);opacity:.3}}
.cp-moves{align-self:center;text-align:center;font-size:7px;color:#888}.cp-moves b{display:block;font-size:16px;color:#111}
.cp-hero2{aspect-ratio:16/10;border-radius:8px;display:flex;align-items:flex-end;padding:6px}.cp-hero2 b{background:#fff;color:#111;font-size:7px;padding:2px 5px;border-radius:4px}
.cp-rowt{font-weight:800}
.cp-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.cp-posters i{aspect-ratio:2/3;border-radius:5px;position:relative;overflow:hidden}
.cp-posters em{position:absolute;left:0;bottom:0;height:3px}
.cp-grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;flex:1}.cp-grid3 i{border-radius:6px;position:relative}
.cp-grid3 em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:6.5px;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px}
.cp-prof{display:flex;gap:8px;align-items:center;margin-top:4px}.cp-prof>i{width:30px;height:30px;border-radius:50%;flex:none}.cp-prof>div{flex:1}
.cp-meter{height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden}.cp-meter b{display:block;height:100%;animation:meter 3s ease infinite}
@keyframes meter{from{width:10%!important}}
.cp-postn{border:1px solid #EEF0F3;border-radius:8px;padding:6px}
.cp-map{flex:1;position:relative;margin:0 -9px;background:#EEF3F8}
.cp-map svg{position:absolute;inset:0;width:100%;height:100%}
.cp-map i{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--c);transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font-style:normal;box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent);animation:mapPing 2s infinite}
.cp-map i b{font-size:8px}
@keyframes mapPing{70%{box-shadow:0 0 0 12px transparent}}
.cp-sheet{margin:0 -9px -9px;background:#fff;border-radius:12px 12px 0 0;padding:8px 10px;box-shadow:0 -4px 10px rgba(0,0,0,.08)}
@media (max-width:640px){.tc-rail{margin:0}.tc{width:200px}.tc-frame{width:132px;height:274px}}

/* ===== MacBook Pro (space black) ===== */
.mac{width:100%;max-width:520px;justify-self:center;position:relative;padding-top:6px}
.mac-lid{position:relative;background:linear-gradient(180deg,#34353A,#1E1F22);border-radius:20px 20px 6px 6px;padding:5px 5px 9px;box-shadow:inset 0 0 0 1.5px #45464B,inset 0 0 0 3px #0B0B0C,0 30px 60px -30px rgba(0,0,0,.9);transform-origin:50% 100%}
.mac-lid::before{content:"";position:absolute;inset:2.5px;border-radius:17.5px 17.5px 4px 4px;background:#050506;z-index:0}
.mac-scr{position:relative;z-index:1;border-radius:15px 15px 3px 3px;background:#fff;display:flex;flex-direction:column}
.mac-scr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 30%,transparent 45%)}
.mac-isl{position:absolute;top:1.1%;left:50%;transform:translateX(-50%);height:3.6%;min-height:11px;width:11%;border-radius:999px;background:#000;z-index:8;display:flex;align-items:center;gap:5px;padding:0 6px;overflow:hidden;color:#fff;font:700 clamp(5px,.85vw,8.5px)/1 -apple-system,"Manrope",system-ui,sans-serif;white-space:nowrap;transition:width .6s cubic-bezier(.3,1.35,.5,1)}
.mac-isl i{width:6px;height:6px;border-radius:50%;background:#30D158;flex:none;opacity:0;transition:opacity .2s}
.mac-isl span{flex:1;opacity:0;transition:opacity .2s;overflow:hidden;text-overflow:ellipsis}
.mac-isl b{opacity:0;color:#FF5C8D;font-variant-numeric:tabular-nums;transition:opacity .2s}
.mac-isl.live{width:40%}
.mac-isl.live i,.mac-isl.live span,.mac-isl.live b{opacity:1;transition-delay:.25s}
.mac-isl.live i{animation:blink 1s infinite}
.mbar{height:5.2%;flex:none;display:flex;align-items:center;gap:2.4%;padding:0 2.2%;font:600 clamp(5px,.95vw,9.5px)/1 -apple-system,"Manrope",system-ui,sans-serif;color:#111;background:rgba(246,246,248,.92);border-bottom:1px solid rgba(0,0,0,.06)}
.mbar .ap{width:7px;height:8px;background:#111;border-radius:50% 50% 45% 45%/60% 60% 40% 40%}
.mbar b{font-weight:800}
.mbar em{margin-left:auto;font-style:normal}
.saf{flex:1;margin:2.2% 2.4% 0;border-radius:7px 7px 0 0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 24px -6px rgba(0,0,0,.35);background:#fff;position:relative}
.saf-bar{height:clamp(12px,2.6vw,22px);flex:none;display:flex;align-items:center;gap:5px;padding:0 9px;background:#EFEFF2;border-bottom:1px solid #E1E1E6}
.saf-bar i{width:7px;height:7px;border-radius:50%;background:#FF5F57}.saf-bar i:nth-child(2){background:#FEBC2E}.saf-bar i:nth-child(3){background:#28C840}
.saf-bar .url{margin:0 auto;display:flex;align-items:center;gap:4px;font:600 clamp(5px,.9vw,9px)/1 -apple-system,"Manrope",system-ui,sans-serif;color:#3A3A3F;background:#E3E3E8;padding:3px 26px;border-radius:5px}
.saf-bar .url svg{width:8px;height:8px}
.saf .site{position:relative;inset:auto;flex:1}
.wake{position:absolute;inset:0;background:#000;z-index:7;opacity:0;pointer-events:none}
.mac-hinge{height:7px;margin:0 6%;background:linear-gradient(180deg,#0E0E10,#2A2B2F 60%,#3A3B40);border-radius:0 0 3px 3px;position:relative;z-index:2}
.mac-deck{position:relative;height:0;padding-bottom:27%;perspective:1500px;perspective-origin:50% -40%;margin-top:-2px}
.deck-plane{position:absolute;left:0;right:0;top:0;aspect-ratio:1.48;transform-origin:50% 0;transform:rotateX(74deg);border-radius:4px 4px 26px 26px;background:linear-gradient(180deg,#2B2C30 0%,#323338 55%,#3A3B40 100%);box-shadow:inset 0 0 0 1.5px #4A4B50,inset 0 2px 0 rgba(255,255,255,.06)}
.kb{position:absolute;left:12.5%;right:12.5%;top:5%;height:50%;padding:1.2%;border-radius:8px;background:#151517;display:flex;flex-direction:column;gap:2.2%}
.kb .r{display:flex;gap:1.1%;flex:1}.kb .r.fn{flex:.6}
.kb .r span{flex:1;border-radius:4px;background:linear-gradient(180deg,#0C0C0D,#070708);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 .5px #000}
.kb .r span.w15{flex:1.5}.kb .r span.w18{flex:1.8}.kb .r span.w22{flex:2.25}.kb .r span.sp{flex:5.4}
.spk{position:absolute;top:5%;width:9%;height:50%;background-image:radial-gradient(circle,#18181A 30%,transparent 34%);background-size:8px 8px;opacity:.9}
.spk.l{left:2.2%}.spk.r{right:2.2%}
.deck-plane::after{content:"";position:absolute;left:8%;right:8%;top:0;height:70%;border-radius:50%/0 0 100% 100%;background:radial-gradient(ellipse at 50% 0%,rgba(200,215,255,.22),rgba(200,215,255,.06) 45%,transparent 70%);pointer-events:none;transition:opacity 1s}
.obj.in .deck-plane::after{animation:kbGlow 2.2s ease both}
@keyframes kbGlow{0%,55%{opacity:0}100%{opacity:1}}
.tp{position:absolute;left:30%;right:30%;top:60%;bottom:6%;border-radius:12px;background:linear-gradient(180deg,#36373C,#3E3F44);box-shadow:inset 0 0 0 1px #4C4D52,inset 0 1px 0 rgba(255,255,255,.06)}
.mac-lip{position:absolute;left:-15.5%;right:-15.5%;bottom:-3px;height:13px;border-radius:2px 2px 16px 16px;background:linear-gradient(180deg,#56575C 0%,#3B3C41 45%,#26272B 100%);box-shadow:0 18px 30px -10px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.4)}
.mac-lip i{position:absolute;left:50%;top:0;transform:translateX(-50%);width:15%;height:5px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#1C1C1F,#2E2F33)}
.obj.in .mac-lid{animation:lidOpen 1.5s cubic-bezier(.2,.75,.15,1) both}
.obj.in .wake{animation:wake 2s ease both}
@keyframes lidOpen{0%{transform:perspective(1400px) rotateX(-82deg)}100%{transform:none}}
@keyframes wake{0%,60%{opacity:1}100%{opacity:0}}

@media (max-width:520px){.mac .tagx{font-size:6.5px;padding:2px 7px}.mac .tagx::before{width:4px;height:4px;margin-right:4px}.mac-lid{border-radius:14px 14px 4px 4px;padding:6px 6px 10px}.mac-lid::before{border-radius:12px 12px 3px 3px}.mac-scr{border-radius:8px 8px 2px 2px}.spk{background-size:5px 5px}}

/* 3D three-quarter MacBook */
.mac.m3{max-width:none;height:440px;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 20%;padding:0}
.m3-g{position:relative;width:430px;height:283px;transform-style:preserve-3d;transform:translate(24px,-46px) rotateX(-15deg) rotateY(26deg)}
.m3-lid{position:absolute;left:0;right:0;bottom:0;transform-origin:50% 100%;transform:rotateX(10deg);transform-style:preserve-3d}
.m3-ledge{position:absolute;top:8px;bottom:0;right:100%;width:5px;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#1B1C1F,#5A5B61);border-radius:3px 0 0 3px}
.m3-base{position:absolute;left:-2.5%;right:-2.5%;top:100%;height:300px;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;background:linear-gradient(180deg,#26272B 0%,#323338 55%,#3D3E44 100%);border-radius:6px 6px 26px 26px;box-shadow:inset 0 0 0 1.5px #4C4D53}
.m3-base::after{content:"";position:absolute;left:8%;right:8%;top:0;height:70%;border-radius:50%/0 0 100% 100%;background:radial-gradient(ellipse at 50% 0%,rgba(200,215,255,.22),rgba(200,215,255,.05) 45%,transparent 70%);pointer-events:none}
.obj.in .m3-base::after{animation:kbGlow 2.2s ease both}
.m3-front{position:absolute;left:3%;right:3%;top:100%;height:13px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(180deg,#5C5D63,#2A2B2F 55%,#1A1B1E);border-radius:0 0 12px 12px}
.m3-front b{position:absolute;left:50%;top:0;transform:translateX(-50%);width:15%;height:5px;border-radius:0 0 8px 8px;background:#16171A}
.m3-side{position:absolute;top:5%;bottom:6%;right:100%;width:13px;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#141518,#3A3B41 70%,#55565C)}
.m3-sh{position:absolute;inset:-6% -12% -18% -8%;transform:translateZ(-16px);background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(12px)}
.obj.in .m3-lid{animation:lidOpen3 1.7s cubic-bezier(.2,.75,.15,1) both}
@keyframes lidOpen3{0%{transform:rotateX(-82deg)}100%{transform:rotateX(10deg)}}
@media (max-width:900px){.mac.m3{height:330px;max-width:none}.m3-g{transform:translateY(-36px) scale(.66) rotateX(-15deg) rotateY(26deg)}}
@media (max-width:520px){.mac.m3{height:270px}.m3-g{transform:translateY(-30px) scale(.56) rotateX(-15deg) rotateY(26deg)}.m3-g .mac-lid{border-radius:20px 20px 6px 6px;padding:5px 5px 9px}}

/* MacBook realism pass */
.mac.m3{height:440px;perspective:2600px;perspective-origin:50% 10%;overflow:visible}
.obj-wide>*{min-width:0}
.mac.m3{width:100%;min-width:0;display:flex;justify-content:center;align-items:center}
.m3-g{flex:none}
.m3-g{width:440px;height:286px;transform:translate(-18px,-70px) scale(.9) rotateX(-16deg) rotateY(22deg)}
.m3-g .mac-lid{background:linear-gradient(160deg,#4A4B51 0%,#2A2B2F 30%,#1C1D20 100%);border-radius:18px 18px 4px 4px;padding:4px 4px 8px;box-shadow:inset 0 0 0 1px #5E5F65,inset 0 0 0 2.5px #0A0A0B}
.m3-g .mac-lid::before{inset:2px;border-radius:16px 16px 3px 3px;background:#020203}
.m3-g .mac-scr{border-radius:13px 13px 2px 2px}
.m3-g .mac-scr::after{background:linear-gradient(110deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 26%,transparent 42%),linear-gradient(0deg,rgba(0,0,0,.12),transparent 30%)}
.m3-ledge{width:7px;top:6px;background:linear-gradient(90deg,#111214,#3E3F44 55%,#6A6B71);border-radius:4px 0 0 4px}
.m3-hinge{position:absolute;left:4%;right:4%;top:100%;height:9px;transform-origin:50% 0;transform:rotateX(52deg);background:linear-gradient(180deg,#050506,#1C1D20 60%,#2C2D31);border-radius:0 0 5px 5px}
.m3-base{left:-3%;right:-3%;height:318px;background:linear-gradient(180deg,#222326 0%,#2E2F33 40%,#3A3B40 100%);border-radius:8px 8px 22px 22px;box-shadow:inset 0 0 0 1.5px #55565C,inset 0 3px 0 rgba(255,255,255,.05)}
.m3-hl{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 22px 22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 30%,rgba(255,255,255,.12) 70%,transparent)}
.m3-front{left:1.5%;right:1.5%;height:15px;background:linear-gradient(180deg,#6A6B71 0%,#45464C 18%,#2A2B2F 60%,#151518 100%);border-radius:0 0 14px 14px}
.m3-front b{width:14%;height:6px;background:linear-gradient(180deg,#0D0D0F,#242528)}
.m3-side{width:15px;top:3%;bottom:4%;background:linear-gradient(90deg,#101113 0%,#2A2B2F 45%,#4B4C52 85%,#6A6B71 100%);border-radius:0 0 0 12px}
.m3-sh{inset:-2% -6% -10% -4%;transform:translateZ(-18px);background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));filter:blur(14px)}
.m3-floor{position:absolute;left:-30%;right:-40%;top:118%;height:240px;transform-origin:50% 0;transform:translateZ(-160px) rotateX(90deg);background:radial-gradient(closest-side,rgba(255,46,110,.18),transparent);filter:blur(30px);pointer-events:none}
.m3-g .kb{left:11%;right:11%;top:4.5%;height:48%;border-radius:9px;background:#0E0E10;box-shadow:inset 0 0 0 1px #1A1A1D}
.m3-g .kb .r span{border-radius:3px;background:linear-gradient(180deg,#141416,#08080A);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 #000}
.m3-g .tp{left:29%;right:29%;top:58%;bottom:5%;border-radius:14px;background:linear-gradient(170deg,#3A3B40,#44454B);box-shadow:inset 0 0 0 1px #56575D,inset 0 1px 0 rgba(255,255,255,.08)}
.m3-g .spk{top:4.5%;height:48%;width:8%;background-size:7px 7px}
.m3-g .spk.l{left:1.8%}.m3-g .spk.r{right:1.8%}
@media (max-width:900px){.mac.m3{height:330px}.m3-g{transform:translate(-10px,-56px) scale(.62) rotateX(-16deg) rotateY(22deg)}}
@media (max-width:520px){.mac.m3{height:260px}.m3-g{transform:translate(-8px,-50px) scale(.5) rotateX(-16deg) rotateY(22deg)}}

/* ===== MacBook Pro, projective model ===== */
.mx{position:relative;width:100%;aspect-ratio:1000/690;max-width:1000px;margin:0 auto;overflow:visible}
.mx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mx-svg .k{fill:#0F0F11}.mx-svg .kt{fill:#17171A}
.mx-kglow{opacity:0}
.obj.in .mx-kglow{animation:kbG 2.4s ease both}
@keyframes kbG{0%,50%{opacity:0}100%{opacity:1}}
.mx-scr{text-align:left;position:absolute;left:0;top:0;transform-origin:0 0;border-radius:24px 24px 0 0;overflow:hidden;background:#fff;display:flex;flex-direction:column;color:#111;font:500 16px/1.3 -apple-system,"Manrope",system-ui,sans-serif;backface-visibility:hidden}
.mx-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 28%,transparent 44%);z-index:3}
.mx-scr .mbar{height:34px;font-size:15px;padding:0 18px;gap:20px}
.mx-scr .mbar .ap{width:14px;height:16px}
.mx-scr .mac-isl{top:6px;height:24px;width:150px;font-size:12.5px;padding:0 12px;gap:8px;min-height:0}
.mx-scr .mac-isl.live{width:360px}
.mx-scr .mac-isl i{width:9px;height:9px}
.mx-scr .saf{margin:20px 26px 0;border-radius:12px 12px 0 0}
.mx-scr .saf-bar{height:40px;gap:9px;padding:0 16px}
.mx-scr .saf-bar i{width:13px;height:13px}
.mx-scr .saf-bar .url{font-size:14px;padding:6px 60px;border-radius:9px}
.mx-scr .saf-bar .url svg{width:13px;height:13px}
.mx-scr .s-nav{font-size:18px;padding:22px 34px;gap:16px}
.mx-scr .s-nav span{height:7px;width:70px}
.mx-scr .s-nav em{padding:7px 16px;border-radius:10px}
.mx-scr .s-hero{padding:16px 34px}
.mx-scr .s-hero small{font-size:13px}
.mx-scr .s-hero h4{font-size:44px;margin:10px 0 18px}
.mx-scr .s-btn{font-size:17px;padding:11px 22px;border-radius:12px}
.mx-scr .s-list{gap:10px}
.mx-scr .s-list span{font-size:17px;padding:11px 14px;border-radius:12px;gap:10px}
.mx-scr .s-list i{width:18px;height:18px}
.mx-scr .s-cards{padding:22px 34px 10px;gap:20px}
.mx-scr .s-cards i{height:84px;border-radius:14px;background:linear-gradient(135deg,#F1ECFF,#E6DEFF)}
.mx-scr .s-stats{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:44px;align-items:end;padding:18px 34px;border-top:1px solid #EEE9FA;margin:8px 34px 0}
.mx-scr .s-stats b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#1A1630}
.mx-scr .s-stats small{color:#8A7FB0;font-size:14px}
.mx-scr .s-quote{justify-self:end;text-align:right;max-width:320px}
.mx-scr .s-how{margin:26px 34px 0;padding:22px 26px;border-radius:16px;background:#F6F3FF}
.mx-scr .s-how b{font-size:20px;color:#1A1630}
.mx-scr .s-how div{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.mx-scr .s-how span{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#3A3550}
.mx-scr .s-how i{width:30px;height:30px;border-radius:50%;background:#6C3BFF;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
.mx-scr .s-foot{display:flex;gap:28px;padding:26px 34px;margin-top:26px;border-top:1px solid #EEE9FA;font-size:14px;color:#8A7FB0}
.mx-scr .s-foot span:first-child{font-weight:800;color:#6C3BFF}
.mx-scr .s-foot em{margin-left:auto;font-style:normal}
.mx-scr .s-quote span{display:block;font-size:17px;font-weight:700;color:#1A1630}
.mx-scr .tagx{font-size:17px;padding:8px 16px}
.mx-scr .tagx::before{width:9px;height:9px;margin-right:9px}
.mx-scr .t1{left:22%;top:15%}.mx-scr .t2{right:4%;top:19%}.mx-scr .t3{left:30%;top:47%}.mx-scr .t4{right:6%;bottom:10%}
.obj-mac{grid-template-columns:1fr!important;text-align:center;padding:64px 40px 10px;gap:30px}
.obj-mac .obj-copy{max-width:720px;margin:0 auto}
.obj-mac .obj-copy h3{font-size:clamp(32px,4.2vw,56px)}
.obj-mac .obj-copy p{margin-left:auto;margin-right:auto;max-width:560px}
.obj-mac .mx{opacity:1;transform:none;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.obj-mac:not(.in) .mx{transform:translateY(24px) scale(.97)}
.obj.in .wake{animation:wake 1.8s ease both}
@media (max-width:900px){.obj-mac{padding:40px 16px 20px;gap:18px}}

.mx-scr .mbar{background:rgba(250,250,252,.95);height:36px}
.mx-scr .mb-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.mx-scr .mb-bt{display:inline-block;width:24px;height:11px;border-radius:3px;border:1.5px solid #111;position:relative}
.mx-scr .mb-bt::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:#111;border-radius:1px}
.mx-scr .mbar em{margin-left:16px}
.mx-scr .mac-isl{top:5px;height:26px;width:126px}

/* native */
.nat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.faceid{grid-row:span 2;display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;height:140px;justify-content:center;border-radius:26px;background:#1C1C1E;color:#30D158}
.faceid svg{width:64px;height:64px}
.faceid small{color:#A1A1A6;font-weight:700;font-size:12px}
.fid-c,.fid-f{stroke-dasharray:120;stroke-dashoffset:0}
.obj.in .fid-c{animation:draw 2.8s ease-in-out infinite}.obj.in .fid-f{animation:draw 2.8s .3s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:120;color:#A1A1A6}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.nat-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border-radius:20px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08)}
.obj.in .nat-card{animation:ntUp 3.6s cubic-bezier(.2,1.1,.3,1) infinite}
.nat-card .ai2{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,#6C3BFF,#2A1580);display:grid;place-items:center;font-weight:800}
.nat-card b{display:block;font-size:14px}.nat-card small{color:#C7C7CC;font-size:13px}.nat-card time{font-size:12px;color:#8E8E93}
.nat-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;min-width:0}
.nat>*{min-width:0}
.nat-card div{min-width:0}
@media (max-width:560px){.nat{grid-template-columns:1fr}.faceid{grid-row:auto;width:100%;height:auto;flex-direction:row;padding:14px;gap:14px;justify-content:flex-start}.faceid svg{width:44px;height:44px}.nat-card{grid-template-columns:34px minmax(0,1fr)}.nat-card time{display:none}.nat-row{grid-template-columns:1fr 1fr}.wdg{aspect-ratio:auto;min-height:120px}.tgl-list{padding:4px 12px}.tgl-list span{font-size:13px;gap:8px}.tg{flex:none}}
.wdg{border-radius:22px;padding:12px;background:linear-gradient(150deg,#6C3BFF,#2A1580);display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1}
.wdg small{font-size:11px;font-weight:800;opacity:.8;text-transform:uppercase}.wdg b{font-size:22px}
.tgl-list{border-radius:20px;background:#1C1C1E;padding:6px 14px;display:flex;flex-direction:column;justify-content:center}
.tgl-list span{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;font-weight:600;border-bottom:1px solid #2C2C2E}
.tgl-list span:last-child{border:0}
.tg{width:38px;height:23px;border-radius:12px;background:#3A3A3C;position:relative;transition:background .3s}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.tg.on{background:#30D158}.tg.on::after{transform:translateX(15px)}
.obj.in .tgl-list span:last-child .tg{animation:tgFlip 3s 1s infinite}
@keyframes tgFlip{0%,40%{background:#3A3A3C}50%,90%{background:#30D158}}
/* QA */
.qa{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;position:relative}
.qa-svg{display:block;width:150px;height:150px}
.qa-svg circle{transition:stroke-dashoffset .1s linear}
.qa-ringw{position:relative;width:150px;height:150px;flex:none}
.qa-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qa-num b{font-family:"Poppins",var(--f-display);font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.qa-num small{color:#8E8E93;font-size:12px;font-weight:600}
.qa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qa-list li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:#E5E5EA}
.qa-list i{width:20px;height:20px;border-radius:50%;border:2px solid #3A3A3C;display:grid;place-items:center;transition:all .3s}
.qa-list li.ok i,.qa-list:not(:has(.ok)) i{background:#30D158;border-color:#30D158}
.qa-list li.ok i::after,.qa-list:not(:has(.ok)) i::after{content:"";width:8px;height:4px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg) translate(1px,-1px)}
@media (max-width:520px){.qa{grid-template-columns:1fr;justify-items:center}}
/* store */
.store{background:#fff;color:#1D1D1F;border-radius:26px;padding:22px;box-shadow:0 40px 80px -30px rgba(255,0,81,.35);transform:translateY(16px);transition:transform 1s cubic-bezier(.2,.8,.2,1);min-width:0}
.obj.in .store{transform:none}
.st-top{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center}
.st-icon{width:76px;height:76px;border-radius:18px;background:linear-gradient(140deg,#6C3BFF,#2A1580);box-shadow:0 8px 20px -6px rgba(108,59,255,.6);position:relative}
.st-icon::after{content:"D";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:32px}
.st-top b{display:block;font-size:19px}.st-top small{color:#86868B;font-size:13px;display:block;margin-bottom:8px}
.st-get{display:inline-block;background:#0A84FF;color:#fff;font-weight:800;font-size:13px;padding:5px 18px;border-radius:999px}
.st-badge{align-self:start;font-size:12px;font-weight:700;color:#0E9F6E;background:#E3F6EE;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.sh{aspect-ratio:9/17;border-radius:14px;background:linear-gradient(170deg,var(--c),#120A33);color:#fff;font-weight:800;font-size:clamp(9px,1vw,12px);line-height:1.2;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.sh i{flex:1;border-radius:10px 10px 0 0;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.3);border-bottom:0;margin:0 6px -10px}
.obj.in .sh{animation:shUp .9s cubic-bezier(.2,1,.3,1) both}.obj.in .sh:nth-child(2){animation-delay:.1s}.obj.in .sh:nth-child(3){animation-delay:.2s}.obj.in .sh:nth-child(4){animation-delay:.3s}
@keyframes shUp{from{transform:translateY(24px)}to{transform:none}}

/* ===== iOS system layer ===== */
.ios-app{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:39px;overflow:hidden;background:inherit;transform-origin:50% 55%;transition:transform .6s cubic-bezier(.2,.9,.25,1),opacity .45s,filter .5s,border-radius .5s}
.screen[data-mode=lock]>.ios-app{transform:scale(.92);filter:blur(10px);opacity:0}
.screen[data-mode=home]>.ios-app{transform:scale(.22);opacity:0;border-radius:90px}
.ios-layer{position:absolute;inset:0;z-index:8;pointer-events:none;font-family:-apple-system,"SF Pro Text","Manrope",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
.ios-layer>*{pointer-events:auto}
.isl{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:21px;border-radius:999px;background:#000;z-index:20;color:#fff;display:flex;align-items:center;padding:0 10px;pointer-events:none;overflow:hidden;
 transition:width .62s cubic-bezier(.32,.72,0,1),height .62s cubic-bezier(.32,.72,0,1),border-radius .62s cubic-bezier(.32,.72,0,1),padding .5s cubic-bezier(.32,.72,0,1),top .5s cubic-bezier(.32,.72,0,1),box-shadow .5s;will-change:width,height}
.isl::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.isl.live{width:120px;height:22px;padding:0 5px}
.isl.big{top:8px;width:88%;max-width:262px;height:70px;border-radius:26px;padding:9px 14px;align-items:stretch;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.isl-c{width:100%;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;opacity:0;transform:scale(.86);filter:blur(4px);transition:opacity .22s,transform .22s,filter .22s}
.isl.live .isl-c,.isl.big .isl-c{opacity:1;transform:none;filter:none;transition:opacity .32s .22s,transform .45s .18s cubic-bezier(.32,.72,0,1),filter .32s .22s}
.isl .ic-dot{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.isl.live .ic-dot{width:15px;height:15px;border-radius:50%;font-size:8.5px}
.isl.big .isl-c{flex-direction:column;align-items:stretch;justify-content:space-between;gap:0}
.isl .big-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.isl .big-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.isl .big-row .big-val,.isl .big-row .big-live{flex:none;overflow:visible}
.isl .big-ttl{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700}
.isl .big-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#30D158}
.isl .big-live i{width:6px;height:6px;border-radius:50%;background:#30D158;box-shadow:0 0 6px #30D158;animation:islPulse 1.4s ease-in-out infinite}
@keyframes islPulse{50%{opacity:.35}}
.isl .big-sub{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.62)}
.isl .big-val{font-family:-apple-system,"SF Pro Rounded","Manrope",system-ui,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.isl .big-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:2px}
.isl .big-bar i{display:block;height:100%;width:var(--p,60%);border-radius:3px;background:var(--c,#30D158);transition:width 1.2s .5s cubic-bezier(.32,.72,0,1)}
.isl:not(.big) .big-bar i{width:0}
.isl.live .isl-c{font-size:9.5px}
.isl.live .isl-c>span:first-child b{display:none}
.isl.live .isl-c>span:last-child{max-width:56px;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.ios-lock{position:absolute;inset:0;z-index:12;color:#fff;background:var(--wall);display:flex;flex-direction:column;align-items:center;overflow:hidden;transition:transform .65s cubic-bezier(.3,.9,.25,1),opacity .4s;touch-action:none}
.screen:not([data-mode=lock]) .ios-lock{transform:translateY(-102%);pointer-events:none}
.lk-sb,.hm-sb{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 24px 0;font-size:11.5px;font-weight:600}
.lk-sb .r,.hm-sb .r{display:flex;gap:4px;align-items:center}
.batt{display:block;width:17px;height:9px;border-radius:2.5px;border:1.3px solid currentColor;position:relative;opacity:.95}
.batt::after{content:"";position:absolute;inset:1.2px 3px 1.2px 1.2px;background:#34C759;border-radius:1px}
.lk-padlock{margin-top:16px;opacity:.9}
.lk-padlock svg{width:14px;height:14px}
.lk-date{font-size:14px;font-weight:600;opacity:.88;margin-top:4px;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.lk-time{font-size:64px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:2px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.78));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.lk-n{position:absolute;left:9px;right:9px;bottom:86px;display:flex;flex-direction:column;gap:6px;max-height:54%;overflow-y:auto;scrollbar-width:none;padding-top:4px}
.lk-n::-webkit-scrollbar{display:none}
.nt{position:relative;background:rgba(245,240,255,.24);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-radius:18px;padding:9px 11px;color:#fff;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:1px 9px;align-items:start;text-align:left;border:0;width:100%;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.nt .ai{grid-row:span 2;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;margin-top:1px}
.nt b{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt .bd{grid-column:2/4;font-size:11px;line-height:1.3;opacity:.92}
.nt b{grid-column:2}.nt time{grid-column:3}.nt .ai{grid-column:1;grid-row:1/3}
.nt time{font-size:10px;opacity:.65;white-space:nowrap}
.nt em{display:block;font-style:normal;font-size:9.5px;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.lk-n .nt{animation:ntUp .7s cubic-bezier(.2,1.1,.3,1) both}
@keyframes ntUp{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1;transform:none}}
.lk-n.stacked .nt:nth-child(n+3){display:none}
.lk-n.stacked .ghosts{display:flex}
.ghosts{display:none;flex-direction:column;align-items:center;margin-top:-6px}
.ghosts i{display:block;height:8px;border-radius:0 0 14px 14px;background:rgba(245,240,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ghosts i:nth-child(1){width:92%}.ghosts i:nth-child(2){width:84%;opacity:.7}
.lk-n .nc-more{font-size:10.5px;font-weight:700;opacity:.8;text-align:center;padding:2px;border:0;background:none;color:#fff;cursor:pointer}
.lk-b{position:absolute;left:26px;right:26px;bottom:34px;display:flex;justify-content:space-between}
.lk-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;transition:transform .15s,background .2s}
.lk-btn:active{transform:scale(1.15);background:rgba(255,255,255,.4)}
.lk-btn svg{width:18px;height:18px}
.lk-hint{position:absolute;bottom:18px;font-size:10px;font-weight:600;opacity:.75;animation:hintBob 2.4s ease-in-out infinite}
@keyframes hintBob{50%{transform:translateY(-4px);opacity:.45}}
.ios-home{position:absolute;inset:0;z-index:11;background:var(--wall);opacity:0;pointer-events:none;transition:opacity .4s;display:flex;flex-direction:column;color:#fff}
.ios-home::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ios-home>*{position:relative}
.screen[data-mode=home] .ios-home{opacity:1;pointer-events:auto}
.hm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;padding:18px 14px 0}
.hi{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;font-weight:600;border:0;background:none;color:#fff;padding:0;cursor:pointer;position:relative}
.hi i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.18);transition:transform .15s}
.hi:active i{transform:scale(.9)}
.hi i svg{width:22px;height:22px}
.hi .bdg{position:absolute;top:-5px;right:2px;min-width:18px;height:18px;border-radius:9px;background:#FF3B30;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.screen[data-mode=home] .hi,.screen[data-mode=home] .hw{animation:hmIn .55s cubic-bezier(.2,1.2,.3,1) both}
@keyframes hmIn{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
.hw{grid-column:span 2;grid-row:span 2;border-radius:20px;padding:11px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;border:0;color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.hw small{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.hw b{font-size:20px;font-weight:800;line-height:1.05}
.hw span{font-size:10px;opacity:.85}
.hm-dots{display:flex;gap:6px;justify-content:center;margin-top:auto;margin-bottom:10px}
.hm-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}.hm-dots i.on{background:#fff}
.dock{margin:0 10px 26px;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:26px;padding:9px 6px;display:grid;grid-template-columns:repeat(4,1fr)}
.dock .hi span{display:none}
.ios-banner{position:absolute;top:0;left:8px;right:8px;z-index:19;transform:translateY(-120%);transition:transform .6s cubic-bezier(.2,1.15,.3,1);touch-action:none}
.ios-banner.show{transform:translateY(42px)}
.ios-banner .nt{background:color-mix(in srgb,var(--a-bg) 80%,transparent);color:var(--a-fg);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.screen[data-mode=lock] .ios-banner .nt,.screen[data-mode=home] .ios-banner .nt{background:rgba(245,240,255,.26);color:#fff}
.ios-nc{position:absolute;inset:0;z-index:17;color:#fff;background:linear-gradient(180deg,rgba(14,8,24,.62),rgba(14,8,24,.86));-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);transform:translateY(-101%);transition:transform .5s cubic-bezier(.2,.95,.3,1);display:flex;flex-direction:column;padding:36px 9px 28px;touch-action:none}
.ios-nc.show{transform:none}
.nc-hd{text-align:center;margin-bottom:10px}
.nc-time{font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.nc-date{font-size:12px;opacity:.8;font-weight:600;margin-top:3px}
.nc-row{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 4px;font-size:13px;font-weight:800}
.nc-row button{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;width:22px;height:22px;font-size:11px;font-weight:800;cursor:pointer}
.nc-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;padding-bottom:6px}
.nc-list::-webkit-scrollbar{display:none}
.nc-list .nt{animation:ntDown .5s cubic-bezier(.2,1.1,.3,1) both}
@keyframes ntDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.nc-list h6{margin:6px 6px 0;font-size:11px;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.nc-empty{text-align:center;opacity:.7;font-size:12px;padding:40px 0}
.nc-grab{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:110px;height:18px;display:grid;place-items:center;cursor:grab}
.nc-grab::after{content:"";width:100px;height:4.5px;border-radius:3px;background:rgba(255,255,255,.85)}
.ios-dim{position:absolute;inset:0;z-index:21;background:rgba(0,0,0,.36);opacity:0;pointer-events:none!important;transition:opacity .3s}
.ios-dim.on{opacity:1;pointer-events:auto!important}
.ios-sheet{position:absolute;left:0;right:0;bottom:0;z-index:22;background:var(--a-bg);color:var(--a-fg);border-radius:26px 26px 39px 39px;padding:8px 14px 26px;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,1.05,.3,1);box-shadow:0 -12px 34px rgba(0,0,0,.25)}
.ios-sheet.on{transform:none}
.ios-sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--a-line);margin:0 auto 10px;cursor:pointer}
.ios-sheet h5{margin:0 0 10px;font-size:16px;font-weight:800;font-family:inherit;display:flex;justify-content:space-between;align-items:center}
.ios-sheet h5 button{border:0;width:24px;height:24px;border-radius:50%;background:var(--a-card);color:var(--a-fg);font-weight:800;cursor:pointer}
.ios-sheet .sz{display:flex;gap:6px;margin-bottom:6px}
.ios-sheet .sz span{flex:1;text-align:center;padding:9px 0;border-radius:10px;background:var(--a-card);font-weight:700;font-size:11px;cursor:pointer}
.ios-sheet .sz span.on{background:var(--a-p);color:#fff}
.ios-alert{position:absolute;left:50%;top:48%;width:76%;z-index:24;transform:translate(-50%,-50%) scale(1.15);opacity:0;pointer-events:none!important;transition:opacity .22s,transform .3s cubic-bezier(.2,1.3,.3,1);background:rgba(242,242,247,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:16px;color:#111;text-align:center;overflow:hidden}
.ios-alert.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto!important}
.ios-alert p{padding:14px 14px 12px;font-size:11px;line-height:1.35}
.ios-alert p b{display:block;font-size:12.5px;margin-bottom:3px}
.ios-alert .ab{display:grid;grid-template-columns:1fr 1fr;border-top:.5px solid rgba(0,0,0,.2)}
.ios-alert .ab button{border:0;background:none;padding:10px 0;color:#0A84FF;font-size:12.5px;cursor:pointer}
.ios-alert .ab button+button{border-left:.5px solid rgba(0,0,0,.2);font-weight:700}
.ios-hud{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.85);opacity:0;z-index:25;background:rgba(28,28,32,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-radius:16px;padding:14px 16px;font-weight:700;font-size:12px;transition:opacity .2s,transform .25s cubic-bezier(.2,1.3,.3,1);pointer-events:none!important;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:110px}
.ios-hud svg{width:26px;height:26px;color:#34C759}
.ios-hud.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pull-top{position:absolute;top:0;left:0;right:0;height:30px;z-index:18;cursor:grab;touch-action:none}
.home-bar{position:absolute;left:0;right:0;bottom:0;height:24px;z-index:23;display:grid;place-items:center;cursor:grab;color:#fff;touch-action:none}
.home-bar i{display:block;width:104px;height:4.5px;border-radius:3px;background:currentColor;opacity:.9;transition:transform .2s}
.home-bar:hover i{transform:scaleX(1.08)}
.screen[data-mode=app] .home-bar{color:var(--a-fg)}
.ios-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:360px}
.ios-tools button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.ios-tools button:hover{border-color:var(--red);color:var(--red-ink)}
.ios-tools button svg{width:14px;height:14px}
.hero-hint{margin-top:16px;font-size:12.5px;color:var(--muted);font-weight:600;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-hint span{display:inline-flex;align-items:center;gap:5px}
.hero-hint i{display:inline-flex}.hero-hint svg{width:14px;height:14px;color:var(--red-ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}
/*PG-CSS*/
/* ================= SEO PAGES (pillar · product · solutions · tools · compare) ================= */
body.view-page .nav{background:rgba(22,22,22,.78);border-bottom-color:#2A2A2A}
body.view-page .nav .wrap{max-width:1200px}
body.view-page .nav .nav-links a,body.view-page .nav .mm-t{color:#A1A1A6}
:root[data-theme="light"] body.view-page .nav{background:rgba(255,255,255,.82);border-bottom-color:var(--line)}
:root[data-theme="light"] body.view-page .nav .mm-t,:root[data-theme="light"] body.view-landing .nav .mm-t{color:var(--muted)}
#pgView{--pa:#FF2E6E;--pa2:#7A5CFF;overflow:clip}
.pg{position:relative}
/* mega menu */
.nav-links{align-items:center}
.mm{position:relative}
.mm-t{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 11px;border-radius:10px}
.mm-t svg{width:12px;height:12px;transition:transform .25s}
.mm-t:hover,.mm.open .mm-t{color:var(--ink);background:var(--surface)}
.mm.open .mm-t svg{transform:rotate(180deg)}
.mm-p{position:absolute;top:calc(100% + 12px);left:50%;width:min(720px,92vw);transform:translate(-50%,8px) scale(.98);opacity:0;pointer-events:none;transition:opacity .22s,transform .3s cubic-bezier(.32,.72,0,1);
 background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:80}
.mm-p::before{content:"";position:absolute;inset:-14px 0 auto;height:14px}
.mm.open .mm-p{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.mm-p a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:14px;text-decoration:none;color:var(--ink)}
.mm-p a:hover{background:var(--surface)}
.mm-p a b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.mm-p a small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}
.mm-ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px var(--c)}
.mm-ic svg{width:18px;height:18px}
.mm-ft{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 14%,transparent),transparent);font-size:13px;color:var(--muted)}
.mm-ft a{display:inline;padding:0;color:var(--red-ink);font-weight:700}
.mm-ft a:hover{background:none}
.mm-burger{display:none}
@media (max-width:980px){.mm-burger{display:grid}}
.mm-sheet{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--page) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .25s;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 40px}
.mm-sheet.show{opacity:1;pointer-events:auto}
.mm-sheet-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mm-sheet details{border-bottom:1px solid var(--line);padding:6px 0}
.mm-sheet summary{list-style:none;font:700 19px var(--f-display);padding:12px 2px;display:flex;justify-content:space-between;cursor:pointer}
.mm-sheet summary::-webkit-details-marker{display:none}
.mm-sheet summary::after{content:"+";color:var(--muted);font-weight:500}
.mm-sheet details[open] summary::after{content:"–"}
.mm-sheet details a{display:flex;gap:12px;align-items:center;padding:9px 2px;text-decoration:none;font-weight:600}
.mm-sheet .mm-ic{width:32px;height:32px;border-radius:10px}
.mm-sheet .btn{width:100%;margin-top:18px}

/* hero */
.pg-hero{position:relative;padding:clamp(26px,5vw,56px) 0 clamp(40px,6vw,80px);isolation:isolate}
.pg-hero::before{content:"";position:absolute;inset:-20% -10% 0;z-index:-2;background:radial-gradient(60% 55% at 78% 30%,color-mix(in srgb,var(--pa) 30%,transparent),transparent 70%),radial-gradient(45% 50% at 12% 10%,color-mix(in srgb,var(--pa2) 22%,transparent),transparent 70%)}
.pg-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);background-size:56px 56px;mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);-webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.pg-hg{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center}
.pg.flip .pg-hg{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.pg.flip .pg-art{order:-1}
.pg.center .pg-hg{grid-template-columns:1fr;text-align:center;justify-items:center}
.pg.center .pg-sub{margin-left:auto;margin-right:auto}
.pg.center .crumbs,.pg.center .pg-meta{justify-content:center}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{text-decoration:none;color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.crumbs i{opacity:.5;font-style:normal}
.pg-eb{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--ink);padding:6px 12px 6px 8px;border-radius:999px;background:color-mix(in srgb,var(--pa) 14%,transparent);border:1px solid color-mix(in srgb,var(--pa) 40%,transparent)}
.pg-eb i{width:8px;height:8px;border-radius:50%;background:var(--pa);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 25%,transparent);animation:pgPulse 2s infinite}
@keyframes pgPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--pa) 0%,transparent)}}
.pg-hero h1{font-size:clamp(34px,5.4vw,64px);margin:16px 0 16px;letter-spacing:-.04em}
.pg-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--pa),var(--pa2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-sub{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:56ch;line-height:1.55}
.pg-go{margin-top:26px;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:linear-gradient(180deg,#1F1F22,#18181A);border:1px solid #2E2E32;max-width:560px;position:relative;box-shadow:0 20px 50px -24px color-mix(in srgb,var(--pa) 60%,transparent)}
:root[data-theme="light"] .pg-go{background:#fff;border-color:var(--line)}
.pg.center .pg-go{margin-left:auto;margin-right:auto}
.pg-go::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--pa) 80%,var(--pa2) 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinB 5s linear infinite;pointer-events:none}
.pg-go input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;padding:8px 4px;color:var(--ink)}
.pg-go .pg-mic{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 16%,transparent);color:var(--pa);flex:none}
.pg-go .pg-mic svg{width:18px;height:18px}
.pg-go .btn{flex:none;background:linear-gradient(100deg,var(--pa),color-mix(in srgb,var(--pa) 60%,var(--pa2)));color:#fff;box-shadow:0 10px 24px -10px var(--pa)}
.pg-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;color:var(--muted);font-size:13px}
.pg-meta span{display:inline-flex;align-items:center;gap:6px}
.pg-meta svg{width:14px;height:14px;color:var(--pa)}
@media (max-width:560px){.pg-go{border-radius:22px;flex-wrap:wrap}.pg-go input{flex-basis:calc(100% - 56px)}.pg-go .btn{width:100%}}

/* art */
.pg-art{position:relative;min-height:520px;display:grid;place-items:center;perspective:1400px}
.pg.center .pg-art{width:100%;max-width:880px;min-height:500px}
.pg-art .pa-ph{position:relative;z-index:3;transform:scale(.86);transform-origin:center;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.pg-art .pa-ph .phone{margin:0}
.pa-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pa-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);font-size:13px;line-height:1.25;animation:pgFloat 6s ease-in-out infinite;max-width:230px}
.pa-chip b{display:block;font-weight:800;font-size:13.5px}
.pa-chip small{display:block;color:var(--muted);font-size:11.5px}
.pa-chip .ci{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,var(--pa),color-mix(in srgb,var(--pa) 40%,#000))}
.pa-chip .ci svg{width:17px;height:17px}
.pa-chip:nth-of-type(2){animation-delay:-2s}.pa-chip:nth-of-type(3){animation-delay:-4s}.pa-chip:nth-of-type(4){animation-delay:-1s}
@keyframes pgFloat{50%{transform:translateY(-10px)}}
.pa-c1{top:12%;left:0}.pa-c2{top:40%;right:-2%}.pa-c3{bottom:12%;left:4%}.pa-c4{bottom:4%;right:6%}
/* shapes */
.sh-orbit .pa-bg i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--pa) 40%,transparent);translate:-50% -50%;animation:pgSpin 40s linear infinite}
.sh-orbit .pa-bg i:nth-child(1){width:360px;height:360px}.sh-orbit .pa-bg i:nth-child(2){width:500px;height:500px;animation-duration:60s;animation-direction:reverse}.sh-orbit .pa-bg i:nth-child(3){width:640px;height:640px;animation-duration:90s;opacity:.5}
.sh-orbit .pa-bg i::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--pa);box-shadow:0 0 18px var(--pa)}
.sh-orbit .pa-bg i:nth-child(2)::after{background:var(--pa2);box-shadow:0 0 18px var(--pa2);top:auto;bottom:20%;left:-6px}
@keyframes pgSpin{to{rotate:360deg}}
.sh-blob .pa-bg i{position:absolute;left:50%;top:50%;width:440px;height:440px;translate:-50% -50%;background:linear-gradient(140deg,var(--pa),var(--pa2));filter:blur(2px);opacity:.55;animation:pgBlob 14s ease-in-out infinite;border-radius:42% 58% 64% 36%/45% 40% 60% 55%}
.sh-blob .pa-bg i:nth-child(2){width:340px;height:340px;opacity:.35;animation-delay:-5s;filter:blur(30px)}
.sh-blob .pa-bg i:nth-child(3){display:none}
@keyframes pgBlob{33%{border-radius:60% 40% 38% 62%/58% 62% 38% 42%;rotate:60deg}66%{border-radius:38% 62% 56% 44%/36% 46% 54% 64%;rotate:-40deg}}
.sh-slab .pa-bg i{position:absolute;left:50%;top:50%;width:260px;height:430px;border-radius:40px;translate:-50% -50%;background:linear-gradient(160deg,color-mix(in srgb,var(--pa) 50%,transparent),transparent);border:1px solid color-mix(in srgb,var(--pa) 40%,transparent);transform:rotate(-14deg) translateX(-140px)}
.sh-slab .pa-bg i:nth-child(2){transform:rotate(12deg) translateX(150px);background:linear-gradient(160deg,color-mix(in srgb,var(--pa2) 45%,transparent),transparent);border-color:color-mix(in srgb,var(--pa2) 40%,transparent)}
.sh-slab .pa-bg i:nth-child(3){width:520px;height:16px;border-radius:9px;transform:translateY(230px);background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);border:0}
.sh-grid .pa-bg{perspective:700px}
.sh-grid .pa-bg i{position:absolute;left:-10%;right:-10%;bottom:-6%;height:62%;transform:rotateX(64deg);transform-origin:bottom;background-image:linear-gradient(color-mix(in srgb,var(--pa) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pa) 55%,transparent) 1px,transparent 1px);background-size:44px 44px;mask:linear-gradient(transparent,#000 40%,transparent);-webkit-mask:linear-gradient(transparent,#000 40%,transparent);animation:pgGrid 3s linear infinite}
.sh-grid .pa-bg i:nth-child(2){top:8%;bottom:auto;height:46%;left:50%;right:auto;width:420px;translate:-50% 0;transform:none;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pa) 45%,transparent),transparent);mask:none;-webkit-mask:none;animation:none}
.sh-grid .pa-bg i:nth-child(3){display:none}
@keyframes pgGrid{to{background-position:0 44px}}
.sh-podium .pa-bg i{position:absolute;bottom:4%;width:150px;border-radius:18px 18px 6px 6px;background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 70%,transparent),color-mix(in srgb,var(--pa) 8%,transparent));border:1px solid color-mix(in srgb,var(--pa) 50%,transparent);border-bottom:0}
.sh-podium .pa-bg i:nth-child(1){left:calc(50% - 75px);height:46%}
.sh-podium .pa-bg i:nth-child(2){left:calc(50% - 245px);height:30%;opacity:.8}
.sh-podium .pa-bg i:nth-child(3){left:calc(50% + 95px);height:22%;opacity:.65}
.sh-podium .pa-ph{transform:scale(.78) translateY(-40px)}
.sh-tilt .pa-ph{transform:scale(.84) rotateY(-18deg) rotateX(6deg);transition:transform .6s}
.sh-tilt:hover .pa-ph{transform:scale(.86) rotateY(-6deg) rotateX(2deg)}
.sh-tilt .pa-bg i{position:absolute;left:50%;top:50%;width:250px;height:520px;border-radius:44px;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--pa) 40%,transparent);background:color-mix(in srgb,var(--pa) 10%,transparent);transform:rotateY(-18deg) translateX(70px) translateZ(-80px)}
.sh-tilt .pa-bg i:nth-child(2){transform:rotateY(-18deg) translateX(140px) translateZ(-160px);opacity:.6}
.sh-tilt .pa-bg i:nth-child(3){transform:rotateY(-18deg) translateX(210px) translateZ(-240px);opacity:.3}
.sh-wave .pa-bg{display:flex;align-items:center;justify-content:center;gap:9px}
.sh-wave .pa-bg b{display:block;width:10px;border-radius:9px;background:linear-gradient(180deg,var(--pa),var(--pa2));opacity:.55;animation:pgWave 1.4s ease-in-out infinite}
@keyframes pgWave{50%{transform:scaleY(.35)}}
.sh-hex .pa-bg{background-image:radial-gradient(circle at center,color-mix(in srgb,var(--pa) 50%,transparent) 1.5px,transparent 2px);background-size:26px 26px;mask:radial-gradient(closest-side,#000,transparent);-webkit-mask:radial-gradient(closest-side,#000,transparent)}
.sh-hex .pa-bg i{position:absolute;left:50%;top:50%;width:300px;aspect-ratio:1;translate:-50% -50%;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);background:linear-gradient(140deg,color-mix(in srgb,var(--pa) 60%,transparent),color-mix(in srgb,var(--pa2) 40%,transparent));animation:pgSpin 30s linear infinite}
.sh-hex .pa-bg i:nth-child(2){width:470px;opacity:.25;animation-direction:reverse}
.sh-hex .pa-bg i:nth-child(3){display:none}
.sh-arc .pa-bg i{position:absolute;left:50%;bottom:-30%;width:620px;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px solid color-mix(in srgb,var(--pa) 50%,transparent);box-shadow:0 0 80px color-mix(in srgb,var(--pa) 30%,transparent) inset}
.sh-arc .pa-bg i:nth-child(2){width:460px;border-color:color-mix(in srgb,var(--pa2) 50%,transparent);bottom:-18%}
.sh-arc .pa-bg i:nth-child(3){width:300px;bottom:-6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pa) 40%,transparent),transparent);border:0}
.sh-prism .pa-bg i{position:absolute;left:50%;top:50%;width:520px;aspect-ratio:1.15;translate:-50% -46%;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 50%,transparent),transparent 80%);opacity:.7}
.sh-prism .pa-bg i:nth-child(2){width:380px;translate:-50% -40%;background:linear-gradient(180deg,color-mix(in srgb,var(--pa2) 55%,transparent),transparent 80%);animation:pgFloat 7s ease-in-out infinite}
.sh-prism .pa-bg i:nth-child(3){display:none}
/* vs layout */
.pa-vs{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(14px,3vw,34px)}
.pa-vs .pa-ph{transform:scale(.76)}
.pa-vs .vs-tile{width:210px;aspect-ratio:290/600;border-radius:42px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);background:color-mix(in srgb,var(--surface) 60%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;transform:rotateY(14deg);color:var(--muted);font-size:13px}
.pa-vs .vs-tile b{font:800 22px var(--f-display);color:var(--ink)}
.pa-vs .vs-tile span{display:block;padding:6px 10px;border-radius:999px;background:var(--surface-2);font-size:12px}
.pa-vs .vs-x{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 20px var(--f-display);color:#fff;background:linear-gradient(140deg,var(--pa),var(--pa2));box-shadow:0 0 0 10px color-mix(in srgb,var(--pa) 15%,transparent),0 20px 40px -10px var(--pa);flex:none}
@media (max-width:980px){.pg-hg,.pg.flip .pg-hg{grid-template-columns:1fr}.pg.flip .pg-art{order:0}.pg-art{min-height:460px}}
@media (max-width:560px){.pg-art{min-height:400px}.pg-art .pa-ph{transform:scale(.68)}.sh-podium .pa-ph{transform:scale(.62) translateY(-30px)}.sh-tilt .pa-ph{transform:scale(.68) rotateY(-12deg)}.pa-chip{max-width:170px;padding:8px 10px 8px 8px;font-size:12px}.pa-chip .ci{width:28px;height:28px}.pa-c2{right:0}.pa-c4{display:none}.pa-vs .vs-tile{width:140px;border-radius:30px;padding:12px}.pa-vs .pa-ph{transform:scale(.52);margin:0 -60px}.pa-vs .vs-x{width:46px;height:46px;font-size:15px}.sh-orbit .pa-bg i:nth-child(3),.sh-arc .pa-bg i:nth-child(1){display:none}}

/* tool section */
.pg-toolw{position:relative;margin-top:-10px;margin-bottom:clamp(40px,6vw,80px)}
.pg-tool{border-radius:28px;padding:clamp(18px,3vw,32px);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--pa)),var(--surface));border:1px solid color-mix(in srgb,var(--pa) 28%,var(--line));box-shadow:0 40px 90px -50px color-mix(in srgb,var(--pa) 70%,transparent);position:relative;overflow:hidden}
.pg-tool::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--pa),transparent)}
.pt-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px}
.pt-hd h2{font-size:clamp(22px,2.6vw,30px)}
.pt-hd p{color:var(--muted);font-size:14px;margin-top:4px}
.pt-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ok);background:var(--ok-soft);padding:5px 10px;border-radius:999px}
.pt-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.pt-g.pw3{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:860px){.pt-g,.pt-g.pw3{grid-template-columns:1fr}}
.pt-f{display:flex;flex-direction:column;gap:14px}
.pt-l{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.pt-l .row{display:flex;justify-content:space-between;gap:8px}
.pt-in,.pt-sel,.pt-ta{width:100%;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:12px 14px;font-size:15px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.pt-ta{min-height:84px;resize:vertical;font-family:var(--f-mono);font-size:13.5px}
.pt-in:focus,.pt-sel:focus,.pt-ta:focus{border-color:var(--pa);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 20%,transparent)}
.pt-cnt{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.pt-cnt.over{color:var(--bad)}.pt-cnt.ok{color:var(--ok)}
.pt-out{border-radius:20px;background:var(--bg);border:1px solid var(--line);padding:18px;min-height:200px}
.pt-chips{display:flex;flex-wrap:wrap;gap:8px}
.pt-chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:700;display:inline-flex;gap:7px;align-items:center}
.pt-chip[aria-pressed="true"]{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 16%,transparent)}
.pt-go{background:linear-gradient(100deg,var(--pa),color-mix(in srgb,var(--pa) 60%,var(--pa2)));color:#fff}
.pt-range{width:100%;accent-color:var(--pa)}
.pt-score{display:flex;align-items:center;gap:18px}
.pt-ring{--v:0;width:118px;height:118px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--pa) calc(var(--v)*1%),var(--surface-2) 0);position:relative;transition:--v 1s}
.pt-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg)}
.pt-ring b{position:relative;font:800 32px var(--f-display)}
.pt-ring small{position:absolute;bottom:22px;font-size:11px;color:var(--muted)}
.pt-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.pt-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--surface)}
.pt-list li i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;margin-top:1px}
.pt-list .g i{background:var(--ok-soft);color:var(--ok)}.pt-list .w i{background:var(--warn-soft);color:var(--warn)}.pt-list .b i{background:var(--bad-soft);color:var(--bad)}
.pt-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pt-name{position:relative;border-radius:16px;padding:14px;background:var(--surface);border:1px solid var(--line);text-align:left;transition:transform .2s,border-color .2s;animation:pgIn .45s both}
.pt-name:hover{transform:translateY(-2px);border-color:var(--pa)}
.pt-name b{display:block;font:800 17px var(--f-display)}
.pt-name small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.pt-name .ap{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font:800 17px var(--f-display);margin-bottom:10px}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}}
.pt-canvas{width:100%;height:auto;border-radius:22px;display:block;background:var(--surface-2)}
.pt-home{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px;border-radius:24px;background:linear-gradient(160deg,#3A2A6E,#14102B 60%,#0A0A14);margin-top:14px}
.pt-home div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#fff}
.pt-home i{width:100%;aspect-ratio:1;border-radius:23%;background:rgba(255,255,255,.16);display:block}
.pt-home img{width:100%;aspect-ratio:1;border-radius:23%;display:block}
.pt-sw{display:flex;gap:8px;flex-wrap:wrap}
.pt-sw button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:var(--c)}
.pt-sw button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--bg) inset}
.pt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.pt-kpi{border-radius:16px;background:var(--surface);padding:12px 14px}
.pt-kpi span{display:block;font-size:12px;color:var(--muted);font-weight:700}
.pt-kpi b{display:block;font:800 22px var(--f-display);margin-top:2px}
.pt-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.pt-q{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--surface);font-size:14px}
.pt-q .seg2{display:flex;gap:4px;flex:none}
.pt-q .seg2 button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:700}
.pt-q .seg2 button[aria-pressed="true"]{background:var(--pa);border-color:var(--pa);color:#fff}
.pt-qs{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto;padding-right:4px}
.pt-qs h4{font-size:13px;color:var(--muted);margin:8px 2px 2px;text-transform:uppercase;letter-spacing:.06em}
.pt-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pt-steps button{border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:12px 10px;text-align:left;font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:6px}
.pt-steps button em{font-style:normal;font:800 18px var(--f-display);color:var(--pa)}
.pt-steps button[aria-pressed="true"]{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 14%,transparent)}
@media (max-width:700px){.pt-steps{grid-template-columns:repeat(2,1fr)}}
.pt-vs{overflow:auto;border-radius:16px;border:1px solid var(--line)}
.pt-vs table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
.pt-vs th,.pt-vs td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pt-vs th{background:var(--surface);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);position:sticky;top:0}
.pt-vs td:first-child,.pt-vs th:first-child{position:sticky;left:0;background:var(--bg);font-weight:800;z-index:1}
.pt-vs tr.me td{background:color-mix(in srgb,var(--pa) 10%,var(--bg))}
.pt-y{color:var(--ok);font-weight:800}.pt-n{color:var(--muted)}

/* body */
.pg-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-bottom:40px}
@media (max-width:1020px){.pg-body{grid-template-columns:1fr}.pg-toc{display:none}}
.pg-toc{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:14px}
.pg-toc-c{border-radius:20px;border:1px solid var(--line);background:var(--surface);padding:16px}
.pg-toc-c h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pg-prog{width:38px;height:38px}
.pg-prog circle{fill:none;stroke-width:4}
.pg-toc nav{display:flex;flex-direction:column;max-height:52vh;overflow:auto}
.pg-toc nav a{text-decoration:none;color:var(--muted);font-size:13.5px;line-height:1.35;padding:7px 10px;border-left:2px solid var(--line);transition:color .2s,border-color .2s,background .2s}
.pg-toc nav a:hover{color:var(--ink)}
.pg-toc nav a.on{color:var(--ink);border-left-color:var(--pa);background:linear-gradient(90deg,color-mix(in srgb,var(--pa) 14%,transparent),transparent)}
.pg-mini{border-radius:20px;padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--pa) 30%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--pa) 30%,var(--line))}
.pg-mini b{display:block;font:700 16px var(--f-display);margin-bottom:6px}
.pg-mini p{font-size:13px;color:var(--muted);margin-bottom:12px}
.pg-mini .btn{width:100%}
.pg-prose{max-width:760px;font-size:17.5px;line-height:1.75;color:color-mix(in srgb,var(--ink) 86%,var(--muted))}
.pg-prose>*+*{margin-top:1.15em}
.pg-prose h2{font-size:clamp(26px,3vw,36px);color:var(--ink);margin-top:2.2em;scroll-margin-top:calc(var(--nav-h) + 20px);position:relative}
.pg-prose h2::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--pa),var(--pa2));margin-bottom:16px}
.pg-prose h2:first-child{margin-top:0}
.pg-prose h3{font-size:21px;color:var(--ink);margin-top:1.8em}
.pg-prose strong{color:var(--ink)}
.pg-prose a.il{color:var(--ink);text-decoration:none;background:linear-gradient(var(--pa),var(--pa)) 0 100%/100% 2px no-repeat;padding-bottom:1px;transition:background-size .25s}
.pg-prose a.il:hover{background-size:100% 100%;color:#fff}
.pg-prose a.ol{color:var(--info);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--info) 40%,transparent);text-underline-offset:3px}
.pg-prose a.ol svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;margin-left:2px;vertical-align:-1px}
.pg-ul,.pg-ol{padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pg-ul li{position:relative;padding-left:30px}
.pg-ul li::before{content:"";position:absolute;left:4px;top:.55em;width:14px;height:14px;border-radius:5px;background:linear-gradient(140deg,var(--pa),var(--pa2));transform:rotate(45deg) scale(.7)}
.pg-ol{counter-reset:pgo}
.pg-ol li{counter-increment:pgo;position:relative;padding:14px 16px 14px 60px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.pg-ol li::before{content:counter(pgo,decimal-leading-zero);position:absolute;left:14px;top:13px;font:800 15px var(--f-mono);color:var(--pa);width:34px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 14%,transparent)}
.pg-tbl{overflow:auto;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.pg-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;min-width:520px}
.pg-tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px 14px;background:color-mix(in srgb,var(--pa) 8%,var(--surface));border-bottom:1px solid var(--line)}
.pg-tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.pg-tbl tr:last-child td{border-bottom:0}
.pg-tbl td:first-child{font-weight:700;color:var(--ink)}
.pg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:1.6em!important;margin-bottom:.4em}
.pg-stat{border-radius:20px;padding:18px;background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--pa) 24%,transparent),transparent 60%),var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.pg-stat b{display:block;font:800 clamp(28px,3.4vw,40px) var(--f-display);letter-spacing:-.03em;background:linear-gradient(100deg,var(--ink),color-mix(in srgb,var(--pa) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-stat span{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}
/* inline cta */
.pg-cta{border-radius:26px;padding:clamp(20px,3vw,30px);position:relative;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--pa) 40%,#121214),#121214 70%);border:1px solid color-mix(in srgb,var(--pa) 40%,transparent);color:#F5F5F7;margin:2em 0!important}
.pg-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pa2) 60%,transparent),transparent);animation:pgFloat 6s ease-in-out infinite}
.pg-cta h3{color:#fff;font-size:clamp(20px,2.4vw,26px);margin:0 0 6px;position:relative;z-index:1}
.pg-cta p{color:#C9C9CE;font-size:15px;line-height:1.5;margin:0 0 16px;position:relative;z-index:1}
.pg-cta .pg-go{margin:0;max-width:none;z-index:1}
.pg-cta .pg-go input{color:#F5F5F7}
.pg-cta.v2{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:linear-gradient(120deg,#121214,color-mix(in srgb,var(--pa2) 34%,#121214))}
.pg-cta.v2 ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:#E4E4E8;position:relative;z-index:1}
.pg-cta.v2 ul li::before{content:"✓ ";color:var(--ok);font-weight:800}
.pg-cta.v2 .btn{position:relative;z-index:1;background:#fff;color:#111}
@media (max-width:640px){.pg-cta.v2{grid-template-columns:1fr}}
/* magnet */
.pg-mag{border-radius:26px;padding:clamp(20px,3vw,28px);background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin:2em 0!important;position:relative;overflow:hidden}
.pg-mag::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 0 50%,color-mix(in srgb,var(--pa) 18%,transparent),transparent);pointer-events:none}
.pg-book{position:relative;width:130px;aspect-ratio:3/4;border-radius:6px 14px 14px 6px;background:linear-gradient(150deg,var(--pa),color-mix(in srgb,var(--pa2) 70%,#000));box-shadow:12px 18px 30px -10px rgba(0,0,0,.7),inset 6px 0 0 rgba(0,0,0,.25),inset 8px 0 0 rgba(255,255,255,.12);transform:rotate(-6deg);padding:14px 12px 12px 18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;animation:pgFloat 6s ease-in-out infinite}
.pg-book small{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.pg-book b{font:800 13.5px/1.15 var(--f-display)}
.pg-book i{font-style:normal;font-size:9px;opacity:.85;display:flex;gap:4px;align-items:center}
.pg-mag h3{font-size:21px;color:var(--ink);margin:0 0 6px}
.pg-mag p{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.pg-mag form{display:flex;gap:8px;flex-wrap:wrap}
.pg-mag input[type=email]{flex:1 1 220px;min-width:0;border-radius:999px;border:1px solid var(--line);background:var(--bg);padding:12px 16px;font-size:15px;outline:none}
.pg-mag input[type=email]:focus{border-color:var(--pa);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 18%,transparent)}
.pg-mag select{border-radius:999px;border:1px solid var(--line);background:var(--bg);padding:12px 14px;font-size:14px}
.pg-mag .btn{background:var(--ink);color:var(--bg)}
.pg-mag .fine{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
.pg-mag .ok{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pg-mag .ok b{font-size:16px;color:var(--ok)}
@media (max-width:640px){.pg-mag{grid-template-columns:1fr;text-align:left}.pg-book{width:100px}}
/* faq / related / sources / end */
.pg-sec{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--line)}
.pg-sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.pg-sec-hd h2{font-size:clamp(26px,3.4vw,40px)}
.pg-sec-hd p{color:var(--muted);max-width:52ch}
.pg-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:860px){.pg-faq{grid-template-columns:1fr}}
.pg-faq details{border-radius:18px;background:var(--surface);border:1px solid var(--line);padding:4px 18px;transition:border-color .2s,background .2s}
.pg-faq details[open]{border-color:color-mix(in srgb,var(--pa) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--pa) 7%,var(--surface)),var(--surface))}
.pg-faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;padding:14px 32px 14px 0;position:relative;line-height:1.4}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"";position:absolute;right:2px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s}
.pg-faq details[open] summary::after{transform:rotate(45deg)}
.pg-faq details p{color:var(--muted);padding:0 0 16px;line-height:1.6;font-size:15px}
.pg-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pg-card{--c:var(--pa);position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .3s cubic-bezier(.32,.72,0,1),border-color .3s,box-shadow .3s}
.pg-card::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 40%,transparent),transparent);transition:transform .5s}
.pg-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:0 26px 50px -30px var(--c)}
.pg-card:hover::before{transform:scale(1.5)}
.pg-card .mm-ic{width:44px;height:44px;border-radius:14px}
.pg-card small{color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.pg-card b{font:700 18px/1.25 var(--f-display);letter-spacing:-.02em}
.pg-card p{color:var(--muted);font-size:14px;line-height:1.5;flex:1}
.pg-card span.go{font-size:13px;font-weight:800;color:var(--c);display:inline-flex;gap:6px;align-items:center}
.pg-src{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;counter-reset:src;padding:0;list-style:none}
.pg-src li{counter-increment:src;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-size:14px;line-height:1.4}
.pg-src li::before{content:counter(src);font:800 12px var(--f-mono);color:var(--pa);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 14%,transparent);flex:none}
.pg-src a{color:var(--ink);text-decoration:none;font-weight:700}
.pg-src a:hover{text-decoration:underline}
.pg-src small{display:block;color:var(--muted);font-size:12px;margin-top:3px;word-break:break-all}
.pg-end{padding:clamp(30px,5vw,60px) 0 clamp(60px,8vw,100px)}
.pg-end-c{position:relative;border-radius:34px;padding:clamp(28px,5vw,64px);overflow:hidden;text-align:center;background:radial-gradient(80% 120% at 50% 0,color-mix(in srgb,var(--pa) 45%,#0E0E10),#0E0E10 70%);border:1px solid color-mix(in srgb,var(--pa) 35%,transparent);color:#F5F5F7}
.pg-end-c h2{font-size:clamp(28px,4.4vw,52px);color:#fff;max-width:18ch;margin:0 auto 12px}
.pg-end-c p{color:#C9C9CE;max-width:52ch;margin:0 auto}
.pg-end-c .pg-go{margin:26px auto 0}
.pg-end-c .pg-go input{color:#F5F5F7}
.pg-end-c .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 35% 80%,#fff,transparent),radial-gradient(1px 1px at 55% 55%,#fff,transparent);opacity:.5}
.pg-trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:20px;font-size:13px;color:#C9C9CE}
.pg-trustrow span::before{content:"✓ ";color:var(--ok);font-weight:800}
.pg-upd{font-size:13px;color:var(--muted);margin-top:30px;padding-top:18px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px 14px}
/* exit / scroll lead slide-in */
.pg-slide{position:fixed;right:18px;bottom:18px;z-index:65;width:min(360px,calc(100vw - 36px));border-radius:22px;padding:18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(0,0,0,.8);transform:translateY(140%);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.pg-slide.show{transform:none}
.pg-slide b{display:block;font:700 17px var(--f-display);margin-bottom:4px;padding-right:24px}
.pg-slide p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.pg-slide .x{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface);display:grid;place-items:center}
.pg-slide .x svg{width:14px;height:14px}
.pg-slide .btn{width:100%}
.pg-bar{position:fixed;left:0;top:0;height:3px;z-index:70;background:linear-gradient(90deg,var(--pa),var(--pa2));width:0;transition:width .1s}
body:not(.view-page) .pg-bar,body:not(.view-page) .pg-slide{display:none}
/* homepage hub */
.hub{padding:clamp(60px,8vw,110px) 0;position:relative}
.hub-hd{text-align:center;max-width:760px;margin:0 auto 34px}
.hub-hd h2{font-size:clamp(30px,4.4vw,52px);margin:10px 0 12px}
.hub-hd p{color:var(--muted)}
.hub-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.hub-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px}
.hub-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* admin seo */
.seo-map{width:100%;height:auto;display:block}
.seo-map text{font:700 11px var(--f-body);fill:var(--ink)}
.seo-map .sub{font-weight:500;fill:var(--muted);font-size:10px}
.kw-int{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.kw-int.i-c{background:var(--ok-soft);color:var(--ok)}.kw-int.i-i{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}.kw-int.i-t{background:var(--warn-soft);color:var(--warn)}.kw-int.i-n{background:var(--red-soft);color:var(--red-ink)}
.seo-bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;min-width:60px}
.seo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#FF9F0A)}
/*end pages css*/
.pt-badge svg{width:13px;height:13px}
.pt-hd h2 svg,.pt-note svg,.pt-chip svg{width:15px;height:15px}
.pg-tool .btn svg{width:16px;height:16px}
.pg-card span.go svg{width:14px;height:14px}
.pg-faq{align-items:start}
body.view-page .ft-cta{display:none}
.pg-meta svg,.crumbs svg{flex:none}
.pg-go .btn svg{width:16px;height:16px}
.pg-mini .btn svg,.pg-slide .btn svg{width:15px;height:15px}
.pg-mag .btn svg,.pg-mag .ok b svg{width:16px;height:16px}
.fac-g1{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.fac-g2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:1100px){.fac-g1,.fac-g2{grid-template-columns:1fr}}
#facPh .phone{transform:scale(.88)}
.fac-refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fac-ref{border-radius:16px;background:var(--surface);padding:10px;text-align:center;overflow:hidden;min-width:0}
.fac-ref .tc-frame{margin:0 auto;transform:scale(.8);transform-origin:top center;height:190px}
@media (max-width:560px){.fac-ref .tc-frame{transform:scale(.55);height:130px}.fac-ref small{display:none}}
/* Mac website cycle */
#macX .site{transition:opacity .38s ease,filter .38s ease,transform .38s ease}
#macX .site.sw-out{opacity:0;filter:blur(6px);transform:translateY(8px)}
#macX .wake,.obj.in .wake{display:none;animation:none}
.s-cards .sc{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid color-mix(in srgb,var(--sc) 14%,#EEE);border-radius:8px;padding:5% 6%;box-shadow:0 4px 14px -8px color-mix(in srgb,var(--sc) 40%,transparent)}
.s-cards .sc-ic{width:22%;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 12%,#fff);font-size:clamp(6px,1vw,11px);margin-bottom:3px}
.s-cards .sc b{font-size:clamp(6px,.95vw,10px);color:#1A1630;font-weight:800}
.s-cards .sc small{font-size:clamp(5px,.8vw,8px);color:#7A7590}
.mx-scr .s-cards .sc{border-radius:14px;padding:16px 18px;gap:4px}
.mx-scr .s-cards .sc-ic{width:40px;height:40px;border-radius:12px;font-size:20px;margin-bottom:6px}
.mx-scr .s-cards .sc b{font-size:18px}
.mx-scr .s-cards .sc small{font-size:14px}
.mx-scr .s-how i{color:#fff}
/* realistic Safari chrome */
.saf-bar .sb-ic{display:grid;place-items:center;color:#6E6E73;flex:none}
.saf-bar .sb-ic svg{width:9px;height:9px}
.saf-bar .sb-side{margin-left:6px}
.saf-bar .sb-dim{opacity:.4}
.saf-bar .sb-sh{order:9}
.saf-bar .url{position:relative}
.mbar .mb-r svg{width:14px;height:14px}
.mx-scr .saf-bar{height:46px;gap:14px;padding:0 18px;background:linear-gradient(180deg,#F5F5F7,#ECECEF)}
.mx-scr .saf-bar .sb-ic svg{width:19px;height:19px}
.mx-scr .saf-bar .url{margin:0 auto;padding:8px 120px;border-radius:10px;background:#E2E2E6;color:#1D1D1F;font-size:14.5px;min-width:440px;justify-content:center}
.mx-scr .mbar{gap:22px}
.mx-scr .mbar span:not(.ap):not(.mb-r){font-weight:500}
.mx-scr .mbar .mb-r{gap:18px}
.mx-scr .mbar .mb-r svg{width:17px;height:17px}
.mx-scr .mbar .ap{width:15px;height:15px;border-radius:50%;background:#1D1D1F;opacity:.85}
.mx-scr .mbar{gap:20px}
.mx-scr .mac-isl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* ===== Mac site layouts (virtual 1280px screen) ===== */
#macX .site{font-family:-apple-system,"SF Pro Text","Manrope",system-ui,sans-serif;color:#1D1D1F;overflow:hidden}
#macX .site h4{font-family:inherit;margin:0;letter-spacing:-.025em}
#macX .site p{margin:0}
#macX .site [class$="-nav"]{display:flex;align-items:center;gap:26px;padding:20px 34px;font-size:15px;font-weight:600;color:#4B4B55}
#macX .site [class$="-nav"] b{font-size:20px;font-weight:800;margin-right:auto;color:#111}
#macX .site [class$="-nav"] em{font-style:normal;color:#fff;padding:9px 18px;border-radius:10px;font-weight:700}
#macX .ms-saas{background:linear-gradient(180deg,#F6F2FF,#fff 60%);height:100%}
/* shop */
#macX .ms-shop{background:#FAF8F5;height:100%;font-family:Georgia,"Times New Roman",serif}
#macX .sh-promo{background:#1C1917;color:#F5F0EA;text-align:center;font:600 12.5px -apple-system,system-ui,sans-serif;letter-spacing:.06em;padding:8px}
#macX .ms-shop .sh-nav{display:grid;grid-template-columns:repeat(3,auto) 1fr repeat(3,auto);gap:26px;padding:18px 34px;font:500 14px -apple-system,system-ui,sans-serif;color:#44403C;border-bottom:1px solid #E7E2DA}
#macX .ms-shop .sh-nav b{font:700 26px Georgia,serif;letter-spacing:.3em;text-align:center;color:#1C1917;margin:0}
#macX .sh-hero{display:grid;grid-template-columns:1.25fr 1fr;height:300px}
#macX .sh-img{position:relative;display:grid;place-items:center;overflow:hidden}
#macX .sh-img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 30%,rgba(255,255,255,.35),transparent)}
#macX .sh-fig{font-size:190px;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
#macX .sh-copy{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
#macX .sh-copy small{font:700 12px -apple-system,system-ui,sans-serif;letter-spacing:.18em;color:#78716C}
#macX .sh-copy h4{font:400 46px/1.05 Georgia,serif;color:#1C1917}
#macX .sh-copy p{font-size:16px;line-height:1.5;color:#57534E}
#macX .sh-btn{align-self:flex-start;background:#1C1917;color:#fff;font:600 14px -apple-system,system-ui,sans-serif;padding:13px 24px;letter-spacing:.04em}
#macX .sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:24px 34px}
#macX .sh-p b{display:block;font:500 15px Georgia,serif;margin-top:10px}
#macX .sh-p small{font:600 14px -apple-system,system-ui,sans-serif;color:#57534E}
#macX .sh-pi{height:190px;display:grid;place-items:center;font-size:96px}
/* booking */
#macX .ms-book{background:linear-gradient(135deg,#FBF3F7,#fff 55%,#F7EEF3);height:100%}
#macX .bk-g{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:26px 44px}
#macX .bk-copy small{font-size:12px;font-weight:800;letter-spacing:.14em;color:#9C4F7A}
#macX .bk-copy h4{font:600 48px/1.05 Georgia,serif;margin:12px 0 14px;color:#3B1F2B}
#macX .bk-copy p{font-size:16px;color:#6B4E5B;line-height:1.5}
#macX .bk-tr{display:flex;flex-direction:column;gap:10px;margin-top:22px}
#macX .bk-tr span{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;background:#fff;border:1px solid #F0DDE7;border-radius:14px;padding:14px 18px;font-size:15px}
#macX .bk-tr small{color:#8B6E7C}#macX .bk-tr em{font-style:normal;font-weight:800}
#macX .bk-cal{background:#fff;border-radius:22px;padding:22px;box-shadow:0 24px 50px -24px rgba(156,79,122,.45)}
#macX .bk-cal-h{display:flex;justify-content:space-between;font-size:17px;margin-bottom:12px;color:#3B1F2B}
#macX .bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:14px}
#macX .bk-days i{font-style:normal;color:#A1879A;font-size:12px;font-weight:700}
#macX .bk-days span{padding:8px 0;border-radius:10px;font-weight:600}
#macX .bk-days span.on{color:#fff}#macX .bk-days span.off{color:#D6C3CE;text-decoration:line-through}
#macX .bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
#macX .bk-slots span{border:1px solid #EADBE3;border-radius:10px;padding:9px;text-align:center;font-weight:700;font-size:14px}
#macX .bk-cta{color:#fff;text-align:center;border-radius:12px;padding:13px;font-weight:700;font-size:15px}
/* fitness (dark) */
#macX .ms-fit{background:#0B0B0D;color:#F5F5F7;height:100%}
#macX .ms-fit .ft-nav{color:#A1A1AA}#macX .ms-fit .ft-nav b{color:#fff;font:900 22px -apple-system,system-ui;letter-spacing:.04em}
#macX .ft-hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:18px 44px 10px}
#macX .ft-hero small{font-size:12.5px;font-weight:800;letter-spacing:.12em}
#macX .ft-hero h4{font:900 64px/.95 -apple-system,system-ui,sans-serif;letter-spacing:-.03em;margin:12px 0 14px}
#macX .ft-hero p{font-size:17px;color:#A1A1AA}
#macX .ft-ring{position:relative;width:190px;height:190px;display:grid;place-items:center}
#macX .ft-ring svg{position:absolute;inset:0}
#macX .ft-ring b{font-size:44px;font-weight:900;margin-top:-14px}#macX .ft-ring small{position:absolute;bottom:58px;color:#A1A1AA;font-size:13px}
#macX .ft-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 44px}
#macX .ft-v{height:220px;border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
#macX .ft-v b{font-size:20px}#macX .ft-v small{color:#D4D4D8;font-size:13.5px}
#macX .ft-play{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:15px;backdrop-filter:blur(6px)}
/* finance */
#macX .ms-fin{background:#fff;height:100%}
#macX .fn-g{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;padding:26px 44px;align-items:center}
#macX .fn-copy h4{font:800 50px/1.03 -apple-system,system-ui;color:#0B1F14}
#macX .fn-copy p{font-size:17px;color:#4B5563;line-height:1.5;margin:16px 0 22px}
#macX .fn-btn{display:inline-block;color:#fff;font-weight:700;padding:13px 22px;border-radius:12px;font-size:15px}
#macX .fn-logos{display:flex;gap:18px;margin-top:24px;font-size:13.5px;color:#6B7280;font-weight:600}
#macX .fn-app{background:#F8FAF9;border:1px solid #E5EDE8;border-radius:20px;padding:20px;box-shadow:0 30px 60px -30px rgba(15,157,88,.35)}
#macX .fn-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#macX .fn-kpis div{background:#fff;border-radius:12px;padding:12px 14px;border:1px solid #EEF2EF}
#macX .fn-kpis small{font-size:12px;color:#6B7280}#macX .fn-kpis b{display:block;font-size:22px;margin-top:2px}
#macX .fn-ch{width:100%;height:80px;margin:12px 0}
#macX .fn-t div{display:grid;grid-template-columns:60px 1fr auto auto;gap:14px;align-items:center;padding:10px 4px;border-top:1px solid #EEF2EF;font-size:14px}
#macX .fn-t em{font-style:normal;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
/* bakery */
#macX .ms-bake{background:#FFF8EE;height:100%;text-align:center;font-family:Georgia,serif;color:#3F2A1D}
#macX .ms-bake .bb-nav{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;justify-items:center;font:600 14px -apple-system,system-ui;color:#7C5A43}
#macX .ms-bake .bb-nav b{font:italic 700 30px/1 Georgia,serif;color:#3F2A1D;margin:0}
#macX .ms-bake .bb-nav b small{display:block;font:700 9px -apple-system,system-ui;letter-spacing:.2em;color:#B45309;margin-top:4px}
#macX .bb-hero{padding:20px 0 8px}
#macX .bb-hero small{font:700 12px -apple-system,system-ui;letter-spacing:.16em;color:#B45309}
#macX .bb-hero h4{font:400 44px/1.1 Georgia,serif;max-width:720px;margin:12px auto 18px}
#macX .bb-btn{display:inline-block;color:#fff;font:700 15px -apple-system,system-ui;padding:13px 26px;border-radius:999px}
#macX .bb-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 60px 8px}
#macX .bb-i{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;margin:0 auto 12px;font-size:84px;box-shadow:0 18px 30px -16px rgba(120,60,20,.5)}
#macX .bb-menu b{display:block;font-size:17px}#macX .bb-menu small{font:700 15px -apple-system,system-ui}
#macX .bb-note{font:600 13.5px -apple-system,system-ui;color:#7C5A43;margin-top:16px}
/* travel */
#macX .ms-trav{background:#fff;height:100%}
#macX .tv-hero{background:linear-gradient(180deg,rgba(2,6,23,.15),rgba(2,6,23,.55)),linear-gradient(135deg,#F59E0B 0%,#EC4899 45%,#1E3A8A 100%);height:330px;padding-bottom:20px;color:#fff;position:relative}
#macX .ms-trav .tv-nav{color:rgba(255,255,255,.85)}#macX .ms-trav .tv-nav b{color:#fff;font-size:24px;letter-spacing:-.03em}#macX .ms-trav .tv-nav em{background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
#macX .tv-hero h4{font:800 52px/1.05 -apple-system,system-ui;text-align:center;margin:30px auto 26px;max-width:760px;text-shadow:0 6px 30px rgba(0,0,0,.3)}
#macX .tv-search{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:0;align-items:center;background:#fff;color:#111;border-radius:999px;margin:0 140px;padding:8px 8px 8px 26px;box-shadow:0 20px 40px -10px rgba(0,0,0,.4)}
#macX .tv-search div{padding:4px 16px;border-left:1px solid #E5E7EB}#macX .tv-search div:first-child{border:0;padding-left:0}
#macX .tv-search small{display:block;font-size:11.5px;color:#6B7280;font-weight:700}#macX .tv-search b{font-size:15px}
#macX .tv-search em{font-style:normal;color:#fff;font-weight:700;padding:14px 26px;border-radius:999px;font-size:15px}
#macX .tv-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 34px}
#macX .tv-img{height:170px;border-radius:16px;position:relative;margin-bottom:10px}
#macX .tv-img span{position:absolute;top:10px;right:12px;color:#fff;font-size:20px}
#macX .tv-cards b{font-size:15px}#macX .tv-cards small{display:block;font-size:13.5px;color:#4B5563;margin-top:3px}
/* clinic */
#macX .ms-clin{background:linear-gradient(180deg,#F0FBFA,#fff 70%);height:100%}
#macX .cl-g{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;padding:22px 44px;align-items:center}
#macX .cl-pill{display:inline-block;font-size:13px;font-weight:800;padding:7px 14px;border-radius:999px}
#macX .cl-g h4{font:800 50px/1.03 -apple-system,system-ui;color:#042F2E;margin:16px 0}
#macX .cl-g p{font-size:17px;color:#47605E;line-height:1.5}
#macX .cl-bt{display:flex;gap:12px;margin-top:22px}#macX .cl-bt span{padding:13px 20px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid #CCE7E4}#macX .cl-bt span:first-child{color:#fff;border:0}
#macX .cl-docs{display:flex;flex-direction:column;gap:12px}
#macX .cl-docs>div{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 14px 30px -20px rgba(13,148,136,.5);border:1px solid #E2F2F0}
#macX .cl-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#1F2937;font-size:16px}
#macX .cl-docs b{font-size:16px}#macX .cl-docs small{display:block;color:#6B7F7D;font-size:13px}
#macX .cl-docs em{font-style:normal;font-size:13px;font-weight:700;border:1.5px solid;border-radius:10px;padding:7px 10px}
#macX .cl-row{display:flex;gap:12px;padding:16px 44px}#macX .cl-row span{background:#fff;border:1px solid #DDEFEC;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;color:#115E59}
/* learning */
#macX .ms-lrn{background:radial-gradient(60% 80% at 90% 10%,#EDE4FF,transparent),radial-gradient(40% 60% at 0 100%,#FFF1D6,transparent),#fff;height:100%}
#macX .ln-g{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:26px 44px;align-items:center}
#macX .ln-g h4{font:900 54px/1.02 -apple-system,system-ui;color:#1E1B4B}
#macX .ln-g h4 span{color:#fff;padding:0 12px;border-radius:14px;display:inline-block;transform:rotate(-2deg)}
#macX .ln-g p{font-size:17px;color:#4C4A6B;line-height:1.5;margin:16px 0 20px}
#macX .ln-flags{display:flex;flex-wrap:wrap;gap:8px}#macX .ln-flags span{background:#fff;border:2px solid #E9E4FF;border-radius:14px;padding:9px 14px;font-weight:700;font-size:14px}
#macX .ln-card{background:#fff;border-radius:24px;padding:22px;box-shadow:0 30px 60px -30px rgba(124,58,237,.5);border:2px solid #EEE8FF}
#macX .ln-streak{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}#macX .ln-streak b{font-size:34px}#macX .ln-streak small{color:#6B6890;font-weight:700}
#macX .ln-c{margin:12px 0}#macX .ln-c b{font-size:15px}#macX .ln-c small{font-size:12.5px;color:#6B6890}
#macX .ln-bar{height:12px;border-radius:9px;background:#F1EEFB;margin:6px 0;overflow:hidden}#macX .ln-bar i{display:block;height:100%;border-radius:9px}
#macX .ln-q{background:#F7F4FF;border-radius:14px;padding:12px 14px;font-size:15px;font-weight:600;margin-top:12px}#macX .ln-q em{display:block;font-style:normal;font-size:13px;margin-top:4px}
/* real estate */
#macX .ms-est{background:#fff;height:100%}
#macX .es-bar{display:flex;gap:10px;padding:0 34px 14px;border-bottom:1px solid #E5E7EB}
#macX .es-bar span{border:1px solid #D1D5DB;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600}#macX .es-bar em{margin-left:auto;font-style:normal;color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px}
#macX .es-g{display:grid;grid-template-columns:1fr 1.05fr;height:calc(100% - 140px)}
#macX .es-list{padding:16px 20px 16px 34px;display:flex;flex-direction:column;gap:12px}
#macX .es-list>div{display:grid;grid-template-columns:170px 1fr;gap:16px;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;align-items:center}
#macX .es-img{height:120px;display:grid;place-items:center;font-size:64px}
#macX .es-list b{font-size:22px;letter-spacing:-.02em}#macX .es-list small{display:block;font-size:13.5px;color:#4B5563;margin-top:3px}
#macX .es-map{position:relative;background:linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,.5)),repeating-linear-gradient(35deg,#E5ECF6 0 2px,transparent 2px 70px),repeating-linear-gradient(-55deg,#E5ECF6 0 3px,transparent 3px 90px),#F1F5F9;margin:16px 34px 16px 0;border-radius:18px;overflow:hidden}
#macX .es-map::before{content:"";position:absolute;left:-10%;top:55%;width:120%;height:26px;background:#BFDBFE;transform:rotate(-12deg)}
#macX .es-map span{position:absolute;color:#fff;font-size:13px;font-weight:800;padding:6px 10px;border-radius:999px;box-shadow:0 6px 14px rgba(29,78,216,.4);transform:translate(-50%,-50%)}
/* pet */
#macX .ms-pet{background:linear-gradient(180deg,#FFF1F3,#FFF7ED 60%,#fff);height:100%}
#macX .pt2-hero{text-align:center;padding:14px 0 6px}#macX .pt2-hero h4{font:900 50px/1.05 -apple-system,system-ui;color:#4C0519}#macX .pt2-hero p{font-size:17px;color:#6B4450;margin-top:12px}
#macX .pt2-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 110px 10px}
#macX .pt2-plans>div{position:relative;background:#fff;border:2px solid #FBE1E6;border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:8px}
#macX .pt2-plans>div.hot{box-shadow:0 26px 50px -26px rgba(225,29,72,.55);transform:translateY(-8px)}
#macX .pt2-plans em{position:absolute;top:-13px;left:24px;font-style:normal;color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}
#macX .pt2-plans>div>b{font-size:20px}#macX .pt2-plans span{font-size:14px;color:#6B4450}#macX .pt2-plans span b{font-size:36px}
#macX .pt2-plans small{font-size:13.5px;color:#6B4450}#macX .pt2-plans i{font-style:normal;text-align:center;border:1.5px solid #FBCFD8;border-radius:12px;padding:11px;font-weight:700;font-size:14px;margin-top:8px}
#macX .pt2-pets{display:flex;justify-content:center;gap:14px;margin-top:16px}#macX .pt2-pets span{background:#fff;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;box-shadow:0 8px 20px -12px rgba(0,0,0,.25)}
/* ===== animated chart phones ===== */
.cx{font-size:8.5px;line-height:1.3}
.cx .cx-sbr{letter-spacing:0!important;font-size:6.5px;opacity:.8!important}
.cx-s{opacity:0;transform:translateY(5px) scale(.98);transition:opacity .35s ease,transform .45s cubic-bezier(.32,.72,0,1);max-height:0;overflow:hidden}
.cx-s.on{opacity:1;transform:none;max-height:120px}
[data-h]{transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .6s}
.cx-chat{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:flex-end;overflow:hidden;padding-bottom:4px}
.cx-me{align-self:flex-end;background:#F1F1F3;color:#111;border-radius:11px 11px 3px 11px;padding:5px 8px;max-width:80%;font-weight:600}
.cx-ai{position:relative;padding-left:14px;color:#222;max-width:92%}
.cx-ai i{position:absolute;left:0;top:1px;width:10px;height:10px;border-radius:50%}
.cx-ai b{font-weight:700}
.cx-t{padding-left:14px;color:#444;font-size:7.8px}
.cp-in b{display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}
.cx-card{background:#F4F6FB;border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;gap:2px;color:#333;margin-top:4px}.cx-card b{font-size:9px;color:#111}
.cx .cp-chips span{font-size:7.5px}
.cx-feed{position:absolute;inset:0;overflow:hidden}
.cx-clip{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.cx-clip.gone{transform:translateY(-100%)}
.cx-clip.two{transform:translateY(100%);opacity:1;max-height:none}
.cx-clip.two.on{transform:none}
.cx-food{font-size:58px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));animation:cxBob 3s ease-in-out infinite}
@keyframes cxBob{50%{transform:translateY(-6px) rotate(-4deg)}}
.cx-side{position:absolute;right:6px;bottom:58px;display:flex;flex-direction:column;gap:9px;z-index:3;color:#fff;text-align:center;font-size:13px}
.cx-side span{display:flex;flex-direction:column;align-items:center}.cx-side small{font-size:6.5px;font-weight:700}
.cx-av{width:22px;height:22px;border-radius:50%;display:grid!important;place-items:center;font-size:10px;font-weight:900;border:1.5px solid #fff}
.cx-cap{position:absolute;left:8px;right:38px;bottom:16px;z-index:3;color:#fff;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.cx-cap b{font-size:9px}.cx-cap small{font-size:7px;opacity:.85}
.cx-prog{position:absolute;left:8px;right:8px;bottom:8px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;z-index:3;overflow:hidden}.cx-prog i{display:block;height:100%;animation:cxProg 5.5s linear infinite}
@keyframes cxProg{from{width:0}to{width:100%}}
.cx-pop{position:absolute;left:50%;top:42%;z-index:4;translate:-50% -50%;max-height:none!important;overflow:visible}
.cx-heart{font-size:48px;color:#FE2C55;text-shadow:0 6px 18px rgba(254,44,85,.6);display:block}
.cx-pop.on .cx-heart{animation:cxHeart 1s cubic-bezier(.2,1.6,.3,1) both}
@keyframes cxHeart{0%{transform:scale(0) rotate(-15deg)}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1);opacity:0}}
.cx-search{flex:1;background:#F1F1F3;border-radius:8px;padding:3px 7px;color:#888}
.cx-vm{display:flex;gap:5px;align-items:flex-start;margin:3px 0 6px}.cx-vm i{width:14px;height:14px;border-radius:50%;flex:none}.cx-vm b{display:block;font-size:8px;line-height:1.2;color:#111}.cx-vm small{display:block;color:#777;font-size:6.8px}
.cx-vp{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(255,255,255,.35)}.cx-vp i{display:block;height:100%;animation:cxProg 7s linear infinite}
.cx-ring{background:conic-gradient(var(--c) 0 62%,#E8EAED 62% 100%)}.cx-ring b{font-size:18px}
.cx-rows{display:flex;flex-direction:column}.cx-rows .cx-s{display:flex;align-items:center;gap:6px;padding:2px 0}.cx-rows .cx-s.on{padding:4px 0}.cx-rows i{width:8px;height:8px;border-radius:2px}.cx-rows em{margin-left:auto;font-style:normal;font-weight:700}
.cx-bk{background:#F1F3F8;border-radius:8px;padding:6px}.cx-bk div{height:4px;background:#DDE2EC;border-radius:3px;margin-top:4px;overflow:hidden}.cx-bk i{display:block;height:100%;animation:cxProg 4s ease-in-out infinite}
.cx-c1{display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .7s;z-index:2}
.cx-c1.gone{transform:translateX(140%) rotate(22deg);opacity:0}
.cx-c2{display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff;transition:transform .6s}
.cx-b .cx-c2{transform:none}
.cx-c1 b,.cx-c2 b{font-size:12px}.cx-c1 small,.cx-c2 small{font-size:7px;opacity:.9}
.cx-like{position:absolute;top:12px;left:10px;border:2px solid;border-radius:5px;padding:1px 5px;font-weight:900;font-size:11px;transform:rotate(-14deg);opacity:0;transition:opacity .3s}
.cx[data-step="2"] .cx-like{opacity:1}
.cx-tags{display:flex;gap:3px;margin-top:4px}.cx-tags i{font-style:normal;font-size:6.5px;background:rgba(255,255,255,.25);padding:2px 5px;border-radius:6px}
.cx-toast{position:absolute;left:10px;right:10px;bottom:46px;z-index:5;max-height:none!important}
.cx-match,.cx-res{color:#fff;text-align:center;font-weight:800;border-radius:10px;padding:7px;font-size:9px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.cx-xp{margin-left:auto;width:50px;height:5px;border-radius:4px;background:#EEE;overflow:hidden}.cx-xp i{display:block;height:100%;width:40%;transition:width .6s}.cx-b .cx-xp i{width:72%}
.cx-q{margin:10px 0 6px}.cx-q small{color:#777;font-size:7px}.cx-q b{display:block;font-size:12px;margin-top:2px;color:#111}
.cx-opts{display:flex;flex-direction:column;gap:5px}.cx-opts span{border:1.5px solid #E5E5E5;border-bottom-width:3px;border-radius:9px;padding:6px 7px;font-weight:600;color:#333;transition:all .3s}
.cx[data-step="2"] .cx-ok,.cx[data-step="3"] .cx-ok{border-color:#84D8FF;background:#DDF4FF}
.cx-b .cx-ok{border-color:var(--c)!important;background:color-mix(in srgb,var(--c) 18%,#fff)!important;color:#111}
.cx-st{display:flex;flex-direction:column;align-items:center;gap:1px}.cx-st small{font-size:6px;color:#666}
.cx-ph{display:flex;flex-direction:column;gap:3px;margin-top:6px}.cx-ph-h{display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:center}.cx-ph-h i{width:14px;height:14px;border-radius:50%;grid-row:span 2}.cx-ph-h b{font-size:8px}.cx-ph-h small{font-size:6.5px;color:#777}
.cx-ph .cp-post{position:relative;display:grid;place-items:center}
.cx-ph .cx-food{font-size:46px}
.cx-acts{display:flex;justify-content:space-between;font-size:11px}.cx-likes{font-size:8px}.cx-ph>small{font-size:7.5px;color:#333}
.cx-lens{bottom:24px!important;transition:transform .6s}.cx-b .cx-lens{transform:translateX(-26px)}
.cx-lens-fx{position:absolute;left:50%;top:22%;translate:-50% 0;max-height:none!important;overflow:visible}.cx-ears{font-size:30px}
.cx-tl{position:absolute;right:7px;top:30px;display:flex;flex-direction:column;gap:9px;font-size:11px;color:#fff}
.cx-flash{position:absolute;inset:0;background:#fff;max-height:none!important;z-index:6}.cx-flash.on{animation:cxFlash .5s ease forwards}
@keyframes cxFlash{0%{opacity:.95}100%{opacity:0}}
.cx-sent{position:absolute;left:12px;right:12px;bottom:62px;max-height:none!important;text-align:center}.cx-sent span{display:inline-block;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:4px 9px;font-weight:700;font-size:8px}
.cx-prev{position:relative;display:grid;place-items:center;overflow:hidden}
.cx-title{position:absolute;left:8px;bottom:8px;max-height:none!important}.cx-title b{color:#fff;font-size:10px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.cx-tc{color:#aaa;font-size:7.5px;text-align:center;margin:3px 0}.cx-tc span{color:#fff;font-weight:700}
.cx-tools{display:flex;justify-content:space-between;color:#ddd;font-size:7px;margin-top:5px}
.cx-cash{display:flex;justify-content:space-between;font-weight:800;margin:2px 0 6px}.cx-cash b{font-size:10px}
.cx-dice b{animation:cxRoll 2.6s ease-in-out infinite}
@keyframes cxRoll{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(200deg) scale(1.2)}85%{transform:rotate(360deg)}}
.cp-board{position:relative}
.cx-tok{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;left:4%;top:4%;box-shadow:0 2px 5px rgba(0,0,0,.4);animation:cxTok 6s steps(1) infinite}
@keyframes cxTok{0%{left:4%;top:4%}25%{left:50%;top:4%}50%{left:76%;top:50%}75%{left:28%;top:76%}}
.cx-sc{display:flex;justify-content:space-between;font-size:8px;margin:4px 0}
.cx-gems i.cx-pop3{animation:cxPop3 2.8s ease-in-out infinite}
@keyframes cxPop3{0%,55%{transform:none;opacity:1}65%{transform:scale(1.4);opacity:0}80%{transform:translateY(-10px);opacity:0}100%{transform:none;opacity:1}}
.cx-hero2{display:flex;flex-direction:column;justify-content:flex-end;padding:8px;gap:2px;color:#fff}.cx-hero2 b{font-size:7px;letter-spacing:.1em}.cx-hero2 span{font-size:9px;font-weight:800}.cx-hero2 em{font-style:normal;align-self:flex-start;background:#fff;color:#111;font-weight:800;border-radius:5px;padding:2px 7px;font-size:7.5px;margin-top:2px}
.cx .cp-posters i{position:relative}.cx .cp-posters small{position:absolute;left:4px;top:3px;color:#fff;font-size:6.5px;font-weight:800}
.cx-grow{transition:width 1.2s}.cx-b .cx-grow{width:88%!important}
.cx-slide{transition:transform .8s}.cx-b .cx-slide{transform:translateX(-20%)}
.cx-an{max-height:none}.cx-an.on{max-height:none}.cx-an small{display:block;color:#ddd;font-size:6.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx .cp-prof i{display:grid;place-items:center;color:#fff;font-weight:800;font-size:8px}.cx .cp-prof b{display:block;font-size:9px}.cx .cp-prof small{font-size:7px;color:#666}
.cx-str small{font-size:7px;color:#555}
.cx-post{background:#F7F7F9;border-radius:9px;padding:6px;margin-top:6px;color:#222}.cx-post>span{display:block;font-size:7.8px}.cx-react{display:block;color:#777;font-size:6.8px;margin-top:3px}
.cx-job{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid #E5E7EB;border-radius:9px;padding:6px;margin-top:6px}.cx-job b{font-size:8.5px}.cx-job small{grid-row:2;font-size:7px;color:#666}.cx-job em{grid-row:span 2;grid-column:2;font-style:normal;color:#fff;font-weight:800;border-radius:999px;padding:3px 7px;font-size:7px}
.cx-mv0{animation:cxMv0 8s ease-in-out infinite!important}.cx-mv1{animation:cxMv1 9s ease-in-out infinite!important}
@keyframes cxMv0{50%{left:44%;top:30%}}@keyframes cxMv1{50%{left:54%;top:70%}}
.cx-sheet{display:flex;flex-direction:column;gap:0}.cx-sheet .cx-s{display:grid;grid-template-columns:1fr auto;column-gap:6px}.cx-sheet .cx-s.on{padding:3px 0;border-bottom:1px solid #EEE}.cx-sheet b{font-size:8.5px}.cx-sheet small{grid-row:2;font-size:7px;color:#666}.cx-sheet em{grid-row:span 2;grid-column:2;font-style:normal;font-size:7px}
.cx-ring b i{font-style:normal}
.pt-g>*{min-width:0}
.pt-out,.pt-f{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){.pg-tool{padding:16px;border-radius:22px}.pt-score{flex-direction:column;align-items:flex-start}.pt-steps{grid-template-columns:repeat(2,1fr)}}
.pt-note .btn{white-space:normal;text-align:left;max-width:100%}

/* ================= BLOG ================= */
.b-av{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex:none;font:800 13px var(--f-display);color:#fff;background:linear-gradient(135deg,#6E5CFF,#A3239F 45%,#F0386B 75%,#FF7A1A);box-shadow:0 0 0 2px var(--page),0 0 0 3.5px color-mix(in srgb,var(--pa) 55%,transparent)}
.bp-hero,.bi-hero{position:relative;isolation:isolate;padding:clamp(22px,4vw,44px) 0 clamp(26px,4vw,48px);overflow:hidden}
.bp-glow{position:absolute;inset:-20% -10% auto;height:620px;z-index:-1;pointer-events:none;background:radial-gradient(520px 320px at 18% 30%,color-mix(in srgb,var(--pa) 30%,transparent),transparent 70%),radial-gradient(520px 360px at 85% 10%,color-mix(in srgb,var(--pa2) 26%,transparent),transparent 70%),radial-gradient(400px 260px at 60% 80%,rgba(255,122,26,.14),transparent 70%);filter:blur(10px);animation:bpGlow 14s ease-in-out infinite alternate}
@keyframes bpGlow{to{transform:translate3d(0,24px,0) scale(1.05)}}
.bp-hd{max-width:880px;margin:0 auto;text-align:center}
.bp-hero .crumbs{justify-content:center}
.bp-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-size:13.5px;font-weight:600;color:var(--muted)}
.bp-tags span+span::before{content:"·";margin-right:14px;opacity:.6}
.bp-cat{padding:6px 12px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--pa) 16%,transparent);border:1px solid color-mix(in srgb,var(--pa) 45%,transparent)}
.bp-cat::before{display:none}
.bp-hd h1{font-size:clamp(32px,5.2vw,60px);letter-spacing:-.04em;line-height:1.04;margin:18px 0 0}
.bp-sub{color:var(--muted);font-size:clamp(16px,1.7vw,20px);line-height:1.55;max-width:66ch;margin:18px auto 0}
.bp-by{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 26px;margin-top:26px;text-align:left}
.bp-by>div:nth-child(2) b{display:block;font:700 15.5px var(--f-display)}.bp-by small{color:var(--muted);font-size:13px}
.bp-askw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;flex-basis:100%}
.bp-askw>span{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.bp-asks{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.b-ask{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);transition:all .2s}
.b-ask svg{width:15px;height:15px;color:var(--pa)}
.b-ask:hover{border-color:var(--pa);transform:translateY(-1px);box-shadow:0 8px 20px -10px var(--pa)}
.bp-feat{position:relative;max-width:1120px;margin:clamp(26px,4vw,44px) auto 0;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;aspect-ratio:16/9;background:var(--surface);box-shadow:0 40px 90px -40px color-mix(in srgb,var(--pa) 70%,transparent),0 0 0 1px var(--line)}
.bp-feat img,.bc-img img,.bf img{display:block;width:100%;height:100%;object-fit:cover}
.pg.post .pg-body{padding-top:clamp(10px,2vw,24px)}
.bf{margin:34px 0;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.bf-img img{aspect-ratio:16/9;height:auto}
.bf figcaption{padding:14px 18px;font-size:14.5px;color:var(--muted);line-height:1.5}
.bf-info{max-width:620px;margin-left:auto;margin-right:auto;box-shadow:0 30px 70px -40px color-mix(in srgb,var(--pa) 70%,transparent)}
.bf-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.bf-zoom img{aspect-ratio:1/2;height:auto}
.bf-zoom::after{content:"⤢ Enlarge";position:absolute;right:14px;top:14px;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 12px var(--f-body);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s}
.bf-zoom:hover::after{opacity:1}
.bf-info figcaption b{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--pa) 18%,transparent);color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.bf-info figcaption span{display:block;margin-top:4px;font-size:12.5px;opacity:.8}
.bf-lb{position:fixed;inset:0;z-index:200;background:rgba(5,5,8,.86);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:60px 16px}
.bf-lb.show{display:flex}
.bf-lb-s{max-width:760px;width:100%}.bf-lb img{width:100%;border-radius:18px;display:block}
.bf-x{position:fixed;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.12);color:#fff}
.b-auth{display:flex;gap:18px;align-items:flex-start;margin:44px 0 10px;padding:24px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 12%,var(--surface)),var(--surface));border:1px solid var(--line)}
.b-auth small{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.b-auth b{display:block;font:700 19px var(--f-display);margin:2px 0 6px}.b-auth p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}
.b-auth-l{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:14px;font-weight:700}.b-auth-l a{color:var(--pa);text-decoration:none}
/* cards */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.bc{--c:var(--pa);display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0;transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s,border-color .35s}
.bc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 26px 60px -30px color-mix(in srgb,var(--c) 80%,transparent)}
.bc-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.bc-img img{transition:transform .6s cubic-bezier(.32,.72,0,1)}.bc:hover .bc-img img{transform:scale(1.045)}
.bc-b{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.bc-b small{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--muted)}
.bc-b small i{font-style:normal;padding:4px 10px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.bc-b b{font:700 clamp(18px,1.6vw,20px)/1.25 var(--f-display);letter-spacing:-.02em}
.bc-b p{font-size:14.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-ft{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--muted)}
.bc-ft .dot{opacity:.5}.bc-go{margin-left:auto;color:var(--c);font-weight:800;display:inline-flex;gap:6px;align-items:center}.bc-go svg{width:16px;height:16px}
.bc.big{display:grid;grid-template-columns:1.6fr 1fr}
.bc.big .bc-img{aspect-ratio:16/9;align-self:center}
.bc.big .bc-b{padding:clamp(22px,3vw,40px);justify-content:center;gap:14px}
.bc.big .bc-b b{font-size:clamp(22px,2.2vw,30px);line-height:1.14}
.bc.big .bc-b p{-webkit-line-clamp:3;font-size:15.5px}
/* index */
.bi-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bi-hd h1{font-size:clamp(34px,5.4vw,64px);letter-spacing:-.045em;line-height:1.02;margin:14px 0;max-width:15ch}
.bi-hd h1 em{font-style:normal;background:linear-gradient(90deg,#8E12EE,#E52F7E 55%,#FF8A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.bi-search{display:flex;align-items:center;gap:10px;min-width:min(340px,100%);padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.bi-search svg{width:18px;height:18px;color:var(--muted);flex:none}.bi-search input{border:0;background:none;outline:none;width:100%;font-size:15.5px}
.bi-search:focus-within{border-color:var(--pa);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 20%,transparent)}
.bi-latest{margin-top:clamp(24px,4vw,40px)}
.bi-lbl{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--pa);margin-bottom:12px}.bi-lbl svg{width:16px;height:16px}
.bi-list{padding-top:clamp(20px,4vw,40px)}
.bi-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bi-bar h2{font-size:clamp(24px,3vw,34px)}
.bi-cats{display:flex;gap:8px;flex-wrap:wrap}
.bi-cats button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;transition:all .2s}
.bi-cats button span{font:700 11.5px var(--f-mono);padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bi-cats button[aria-pressed="true"]{background:var(--ink);color:var(--page);border-color:var(--ink)}.bi-cats button[aria-pressed="true"] span{background:color-mix(in srgb,var(--page) 20%,transparent);color:var(--page)}
.bi-empty{grid-column:1/-1;padding:40px;text-align:center;border:1px dashed var(--line);border-radius:22px;color:var(--muted)}.bi-empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.bi-ai{padding-top:clamp(40px,6vw,70px)}
.bi-ai-c{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:clamp(22px,3vw,36px);border-radius:28px;background:linear-gradient(120deg,color-mix(in srgb,#7A5CFF 18%,var(--surface)),color-mix(in srgb,#FF2E6E 14%,var(--surface)));border:1px solid var(--line)}
.bi-ai-c h2{font-size:clamp(22px,2.6vw,30px);margin:6px 0}.bi-ai-c p{color:var(--muted);max-width:52ch}
.bi-topics{padding:clamp(40px,6vw,70px) 20px 0}
@media (max-width:760px){.bc.big{grid-template-columns:1fr}.bc.big .bc-img{aspect-ratio:16/9}.bp-askw{border-left:0;padding-left:0}.bgrid{grid-template-columns:1fr}.b-auth{flex-direction:column}}

/* ================= ADMIN THEMES ================= */
html[data-adm] body.view-app,html[data-adm] body.view-studio{color-scheme:light;--ok:#0E9F6E;--ok-soft:#E3F6EE;--warn:#B86E00;--warn-soft:#FFF3DC;--bad:#D92D20;--bad-soft:#FDE8E7;--info:#2563EB;--on-red:#FFFFFF}
html[data-adm="aurora"] body.view-app{--page:#F6F5FF;--band:#EFEDFF;--bg:#FFFFFF;--surface:#F4F2FF;--surface-2:#E9E5FF;--ink:#16123A;--muted:#5F5A86;--line:#E3DFF8;--red:#5A2FF0;--red-ink:#4A1FD6;--wine:#3A1199;--red-soft:#EEE9FF;--logo-ink:#16123A;--g:linear-gradient(135deg,#6E5CFF,#5A1FE3 55%,#00B8FF);--gs:linear-gradient(90deg,#EEE9FF,#E6F7FF);--tint:#EFEBFF;--shadow:0 1px 2px rgba(40,20,120,.05),0 16px 40px -18px rgba(90,47,240,.28)}
html[data-adm="orchid"] body.view-app{--page:#FFF6FA;--band:#FFEFF6;--bg:#FFFFFF;--surface:#FFF1F7;--surface-2:#FCE2EE;--ink:#2A0C1F;--muted:#7A4D66;--line:#F5DCE8;--red:#C81E7A;--red-ink:#A3156A;--wine:#7A0F4F;--red-soft:#FFE6F2;--logo-ink:#2A0C1F;--g:linear-gradient(135deg,#A3239F,#E0307A 55%,#F0386B);--gs:linear-gradient(90deg,#FFE6F2,#F7E6FF);--tint:#FFEDF6;--shadow:0 1px 2px rgba(120,20,80,.05),0 16px 40px -18px rgba(200,30,122,.28)}
html[data-adm="ember"] body.view-app{--page:#FFFAF2;--band:#FFF3E3;--bg:#FFFFFF;--surface:#FFF5E9;--surface-2:#FFE8CC;--ink:#2A1505;--muted:#7A5636;--line:#F4E2CB;--red:#EA5A12;--red-ink:#C8460A;--wine:#8A2E05;--red-soft:#FFEBDC;--logo-ink:#2A1505;--g:linear-gradient(135deg,#F0386B,#FF7A1A 55%,#FFC400);--gs:linear-gradient(90deg,#FFEBDC,#FFF6D6);--tint:#FFF1E2;--shadow:0 1px 2px rgba(120,60,0,.05),0 16px 40px -18px rgba(234,90,18,.3)}
html[data-adm="spectrum"] body.view-app{--page:#FBFAFF;--band:#F4F2FF;--bg:#FFFFFF;--surface:#F7F5FD;--surface-2:#EEEAF8;--ink:#15122E;--muted:#615C7E;--line:#E7E3F3;--red:#D02F7E;--red-ink:#A71F78;--wine:#5A1FE3;--red-soft:#FCEAF4;--logo-ink:#15122E;--g:linear-gradient(110deg,#6E5CFF,#A3239F 30%,#F0386B 55%,#FF7A1A 80%,#FFC400);--gs:linear-gradient(90deg,#EFEAFF,#FFE8F1,#FFF2DD);--tint:#F6F1FF;--shadow:0 1px 2px rgba(60,30,120,.05),0 18px 44px -20px rgba(163,35,159,.3)}
html[data-adm="coral"] body.view-app{--page:#F5F8FF;--band:#EAF0FF;--bg:#FFFFFF;--surface:#F2F6FF;--surface-2:#E3EBFB;--ink:#0B1F4D;--muted:#53628A;--line:#DCE4F5;--red:#F0412E;--red-ink:#D3301F;--wine:#0B1F4D;--red-soft:#FFEAE6;--logo-ink:#0B1F4D;--g:linear-gradient(135deg,#FF6A4D,#F0412E 60%,#D3301F);--gs:linear-gradient(90deg,#FFEAE6,#EAF0FF);--tint:#EEF3FF;--shadow:0 1px 2px rgba(11,31,77,.06),0 16px 40px -18px rgba(11,31,77,.25)}
html[data-adm="peri"] body.view-app{--page:#F5F6FF;--band:#ECEEFF;--bg:#FFFFFF;--surface:#F2F3FF;--surface-2:#E4E6FF;--ink:#14143A;--muted:#5C5F8C;--line:#E0E2F8;--red:#6C47FF;--red-ink:#5634E6;--wine:#3B23A8;--red-soft:#ECE8FF;--logo-ink:#14143A;--g:linear-gradient(135deg,#6C47FF,#5B8CFF 70%,#7FD3FF);--gs:linear-gradient(90deg,#ECE8FF,#E3EEFF);--tint:#EEF0FF;--shadow:0 1px 2px rgba(30,30,120,.05),0 16px 40px -18px rgba(91,140,255,.32)}
html[data-adm] body.view-app{background:var(--page);background-image:radial-gradient(1000px 560px at 100% -10%,color-mix(in srgb,var(--red) 16%,transparent),transparent 62%),radial-gradient(800px 560px at 10% 110%,color-mix(in srgb,var(--wine) 12%,transparent),transparent 62%);background-attachment:fixed}
html[data-adm] body.view-app .nav{background:color-mix(in srgb,#fff 84%,transparent)!important;border-bottom-color:var(--line)!important}
html[data-adm] body.view-app .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--g);opacity:.85}
html[data-adm] body.view-app .side{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 60%,#fff),var(--tint) 70%,color-mix(in srgb,var(--red) 10%,var(--tint)));border-right-color:var(--line)}
html[data-adm] body.view-app .side a:hover{background:var(--surface)}
html[data-adm] body.view-app .side a.on{background:var(--gs);color:var(--red-ink);box-shadow:inset 3px 0 0 var(--red),0 6px 16px -10px var(--red)}
html[data-adm] body.view-app .side a.on svg{color:var(--red)}
html[data-adm] body.view-app .btn-red,html[data-adm] body.view-app .btn.btn-red{background:var(--g);color:#fff;box-shadow:0 10px 26px -12px var(--red)}
html[data-adm] body.view-app .kpi,html[data-adm] body.view-app .card{background:var(--bg);box-shadow:var(--shadow);border-color:var(--line)}
html[data-adm] body.view-app .kpi{position:relative;overflow:hidden}
html[data-adm] body.view-app .kpi::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--g)}
html[data-adm] body.view-app .kpi .val{background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--red) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-adm] body.view-app .page-hd .eyebrow{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-adm] body.view-app .page-hd h1{color:var(--ink)}
html[data-adm] body.view-app .switch[aria-checked="true"]{background:var(--g);border-color:transparent}
html[data-adm] body.view-app .tbl th{color:var(--muted)}
html[data-adm] body.view-app .tbl tr:hover td{background:color-mix(in srgb,var(--red) 4%,transparent)}
html[data-adm] body.view-app [fill="#FF2E6E"]{fill:var(--red)}html[data-adm] body.view-app [stroke="#FF2E6E"]{stroke:var(--red)}
html[data-adm] body.view-app [stop-color="#FF2E6E"]{stop-color:var(--red)}
html[data-adm] body.view-app .seg button[aria-pressed="true"]{background:var(--bg);color:var(--red-ink);box-shadow:var(--shadow)}
html[data-adm] body.view-app .sel,html[data-adm] body.view-app .inp{background-color:#fff}
html[data-adm] body.view-app ::selection{background:color-mix(in srgb,var(--red) 22%,transparent)}
/* theme widget */
.adm-th{display:none;position:relative}body.view-app .adm-th{display:block}
.adm-th-b{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-align:left;max-width:210px}
.adm-th-l{min-width:0;line-height:1.15}.adm-th-b b{display:block;font-size:13.5px}.adm-th-b small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-th-b svg{width:16px;height:16px;color:var(--muted);transition:transform .25s}.adm-th-b svg{transform:rotate(180deg)}.adm-th.open .adm-th-b svg{transform:none}
@media (max-width:760px){.adm-th-l{display:none}.adm-th-b{padding:0 10px}.adm-th-p{position:fixed;left:16px;right:16px;top:calc(var(--nav-h) + 8px);width:auto}}
.adm-dots{display:inline-flex;flex:none}.adm-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--bg);margin-left:-5px}.adm-dots i:first-child{margin-left:0}
.adm-th-p{position:absolute;right:0;top:calc(100% + 10px);width:min(330px,calc(100vw - 32px));padding:14px;border-radius:20px;background:var(--bg);border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:all .25s cubic-bezier(.32,.72,0,1);z-index:40}
.adm-th.open .adm-th-p{opacity:1;transform:none;pointer-events:auto}
.adm-th-hd{padding:2px 4px 10px}.adm-th-hd b{display:block;font:700 15px var(--f-display)}.adm-th-hd small{font-size:12.5px;color:var(--muted)}
.adm-th-r{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;transition:background .2s}
.adm-th-r:hover{background:var(--surface)}.adm-th-r.on{background:linear-gradient(90deg,color-mix(in srgb,var(--g1) 12%,transparent),color-mix(in srgb,var(--g3) 10%,transparent))}
.adm-sw-prev{position:relative;width:44px;height:44px;border-radius:14px;flex:none;overflow:hidden;background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -10px var(--g2)}
.adm-sw-prev i{position:absolute;background:#fff;border-radius:4px;opacity:.9}.adm-sw-prev i:nth-child(1){left:6px;top:7px;width:10px;height:30px;opacity:.75}.adm-sw-prev i:nth-child(2){left:19px;top:7px;right:6px;height:8px}.adm-sw-prev i:nth-child(3){left:19px;top:19px;right:6px;bottom:7px;opacity:.55}
.adm-th-t{flex:1;min-width:0}.adm-th-t b{display:block;font-size:14px}.adm-th-t small{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.adm-switch[aria-checked="true"]{background:linear-gradient(90deg,var(--g1),var(--g2))!important;border-color:transparent!important}
/* blog post extras */
.bp-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:28px auto 0;max-width:820px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);overflow:hidden}
.bp-mi{flex:1 1 170px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;text-align:left}
.bp-mi+.bp-mi{border-left:1px solid var(--line)}
.bp-mi small{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.bp-mi b{font:700 15px var(--f-display)}
.bp-by{margin-top:18px}
.b-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-share.top{justify-content:center;margin-top:18px}.b-share.bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.b-share>span{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:4px}
.b-share a,.b-share button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:800 15px var(--f-body);color:var(--ink);text-decoration:none;transition:all .2s}
.b-share button span{font-size:13.5px;font-weight:700}.b-share svg{width:15px;height:15px}
.b-share a:hover,.b-share button:hover{border-color:var(--pa);color:var(--pa);transform:translateY(-1px)}
.b-qa{position:relative;margin:0 0 34px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 14%,var(--surface)),color-mix(in srgb,var(--pa2) 10%,var(--surface)));border:1px solid color-mix(in srgb,var(--pa) 35%,var(--line));overflow:hidden}
.b-qa::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--pa) 35%,transparent),transparent 70%)}
.b-qa-h{display:flex;gap:14px;align-items:flex-start;position:relative}
.b-qa-ic{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--pa),var(--pa2));box-shadow:0 10px 22px -10px var(--pa)}.b-qa-ic svg{width:21px;height:21px}
.b-qa-h small{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--pa)}.b-qa-h b{display:block;font:700 19px/1.3 var(--f-display);color:var(--ink);margin-top:2px}
.b-qa>p{position:relative;margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--ink)}
.b-tk{position:relative;margin-top:18px;padding-top:16px;border-top:1px dashed color-mix(in srgb,var(--pa) 40%,var(--line))}
.b-tk>b{font:700 15px var(--f-display)}.b-tk ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.b-tk li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5}.b-tk li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--pa);color:#fff;font:800 11px/20px var(--f-body);text-align:center}
.b-role{display:inline-block;margin:-2px 0 8px;font-size:13px;font-weight:700;color:var(--pa)}
.b-auth-l .btn{text-decoration:none}
.pg.post .pg-toc nav{counter-reset:tc}.pg.post .pg-toc nav a{counter-increment:tc;display:flex;gap:10px}.pg.post .pg-toc nav a::before{content:counter(tc,decimal-leading-zero);font:700 11.5px var(--f-mono);color:var(--pa);opacity:.8;padding-top:2px;flex:none}
.b-promo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.b-pc{--c:var(--pa);position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:26px;text-decoration:none;color:var(--ink);overflow:hidden;isolation:isolate;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 20%,var(--surface)),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s}
.b-pc:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px var(--c)}
.b-pc-art{position:relative;height:84px;display:flex;align-items:center}.b-pc-art i{position:absolute;border-radius:50%;z-index:-1;background:radial-gradient(color-mix(in srgb,var(--c) 45%,transparent),transparent 70%)}.b-pc-art i:nth-of-type(1){width:160px;height:160px;right:-40px;top:-60px}.b-pc-art i:nth-of-type(2){width:90px;height:90px;left:40px;top:10px;opacity:.6}
.b-pc small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--c)}
.b-pc b{font:700 22px/1.2 var(--f-display);letter-spacing:-.02em}.b-pc b em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;color:var(--c)}
.b-pc ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14.5px;color:var(--muted)}.b-pc li::before{content:"•";color:var(--c);margin-right:8px;font-weight:900}
.b-pc-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--c);color:#fff;font-weight:800;font-size:14px}.b-pc-go svg{width:15px;height:15px}
@media (max-width:760px){.bp-mi{flex-basis:50%}.bp-mi:nth-child(3){border-left:0}.bp-mi:nth-child(n+3){border-top:1px solid var(--line)}}
.bgrid.k4{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.bgrid.k4 .bc-b p{-webkit-line-clamp:2}
@media (max-width:520px){.adm-th-b{height:36px;padding:0 8px;gap:4px}.adm-th-b svg{display:none}body.view-app .nav-cta .mm-burger{display:none}}
@media (max-width:760px){.adm-th-p{position:fixed;left:16px;right:16px;top:calc(var(--nav-h) + 8px);width:auto}.adm-th-l{display:none}}

/* ================= LIVE CHAT AGENT ================= */
.orb{background:linear-gradient(135deg,#6E5CFF,#A3239F 45%,#F0386B 75%,#FF7A1A)!important;box-shadow:0 18px 40px -12px rgba(163,35,159,.7),0 0 0 6px rgba(240,56,107,.14)!important}
#askPanel{width:min(410px,calc(100vw - 24px));height:min(640px,calc(100vh - 130px));border-radius:26px;background:var(--bg);border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
#askPanel .ch-hd{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 16px 14px;color:#fff;background:linear-gradient(120deg,#3A1199,#A3239F 55%,#F0386B);overflow:hidden}
#askPanel .ch-hd::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(rgba(255,196,0,.45),transparent 70%)}
.ch-id{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.ch-id .cm-av{width:42px;height:42px;background:#fff;padding:6px;border-radius:14px}
.ch-id b{font:700 16.5px var(--f-display)}.ch-id small{display:flex;align-items:center;gap:6px;font-size:12.5px;opacity:.9}.ch-id small i{width:8px;height:8px;border-radius:50%;background:#3CE68A;box-shadow:0 0 0 3px rgba(60,230,138,.3);animation:chPulse 2s infinite}
@keyframes chPulse{50%{box-shadow:0 0 0 6px rgba(60,230,138,0)}}
.ch-acts{display:flex;gap:6px;position:relative;z-index:1}.ch-acts .icon-btn{width:34px;height:34px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff}.ch-acts svg{width:16px;height:16px}
.ch-mode{padding:9px 16px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface)}.ch-mode span{font-weight:800;color:var(--ink);margin-right:6px}
#askPanel .bd{flex:1;max-height:none;padding:16px 14px;gap:12px;background:radial-gradient(400px 200px at 100% 0,color-mix(in srgb,#A3239F 8%,transparent),transparent 70%)}
.cm{display:flex;gap:9px;align-items:flex-end;max-width:100%;animation:cmIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes cmIn{from{opacity:0;transform:translateY(6px)}}
.cm.me{justify-content:flex-end}
.cm-av{width:28px;height:28px;flex:none;display:inline-flex}.cm-av svg{width:100%;height:100%}
.cm-w{min-width:0;max-width:86%;display:flex;flex-direction:column;gap:6px}
.cm-b{padding:11px 14px;border-radius:18px 18px 18px 6px;background:var(--surface);border:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.cm-b ul{margin:6px 0 0;padding-left:18px}.cm-b a{color:#E52F7E;font-weight:700}
.cm.me .cm-b{max-width:82%;border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,#6E5CFF,#A3239F 60%,#F0386B);color:#fff;border:0}
.cm-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;color:#A3239F;opacity:.85}
.cm-think{color:var(--muted);font-style:italic}
.cm.typing .cm-b{display:flex;gap:4px;padding:14px 16px}.cm.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:cmDot 1s infinite}.cm.typing i:nth-child(2){animation-delay:.15s}.cm.typing i:nth-child(3){animation-delay:.3s}
@keyframes cmDot{30%{transform:translateY(-4px);opacity:1}0%,60%,100%{opacity:.4}}
.cm-src{display:flex;flex-wrap:wrap;gap:6px}.cm-src a{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line)}.cm-src svg{width:12px;height:12px;color:#E52F7E}
.cm-src a:hover{border-color:#E52F7E}
.cm-fb{display:flex;gap:4px}.cm-fb button{border:0;background:none;font-size:13px;opacity:.45;padding:2px 4px;border-radius:6px}.cm-fb button:hover{opacity:1;background:var(--surface)}.cm-fb span{font-size:12px;color:var(--muted)}
.cm-chips{display:flex;flex-wrap:wrap;gap:6px;padding-left:37px}.cm-chips button{padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,#A3239F 40%,var(--line));background:color-mix(in srgb,#A3239F 8%,var(--bg));font-size:13px;font-weight:700;color:var(--ink);transition:all .2s}
.cm-chips button:hover{background:linear-gradient(135deg,#6E5CFF,#F0386B);color:#fff;border-color:transparent}
.cm-lead,.cm-cta{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.cm-lead input,.cm-cta input{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px;font-size:13.5px;outline:none}
.cm-lead .btn,.cm-cta .btn{justify-content:center;background:linear-gradient(135deg,#A3239F,#F0386B)}
.cm-ok{padding:10px 12px;border-radius:14px;background:var(--ok-soft);color:var(--ok);font-size:13.5px;font-weight:700}
#askForm2{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--bg)}#askForm2 .inp{flex:1;min-width:0;border-radius:14px}
#askForm2 .send{width:44px;height:44px;border-radius:14px;border:0;flex:none;color:#fff;background:linear-gradient(135deg,#6E5CFF,#F0386B);display:grid;place-items:center}#askForm2 .send svg{width:18px;height:18px}
.ch-stop{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 12px;font-weight:700;font-size:13px}
.ch-ft{padding:0 14px 12px;font-size:11.5px;color:var(--muted);text-align:center;background:var(--bg)}
.ch-nudge{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:65;max-width:260px;text-align:left;padding:13px 16px;border-radius:18px 18px 6px 18px;background:var(--bg);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(0,0,0,.55);animation:cmIn .4s cubic-bezier(.2,.8,.2,1)}
.ch-nudge b{display:block;font:700 14.5px var(--f-display)}.ch-nudge span{font-size:13px;color:var(--muted)}
@media (max-width:560px){#askPanel{right:8px;left:8px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px));height:calc(100vh - 160px)}}
/* admin chat */
.ch-tr{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}.ch-tr:first-of-type{border-top:0}
.ch-tr b{display:block;font-size:15px}.ch-tr p{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.5}.ch-tr small{display:inline-block;margin-top:6px;font:500 12px var(--f-mono);color:var(--muted)}
.ch-tr-a{display:flex;gap:6px;flex:none}
.ch-form{display:grid;gap:12px;margin-top:12px}.ch-form label,.ch-lbl{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--muted);margin-top:12px}.ch-form textarea,.ch-lbl textarea{resize:vertical;font:inherit}
.ch-test-a{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.ch-test-a small{display:block;font-weight:700;color:var(--muted);margin-bottom:6px}
.ch-cv{padding:14px 0;border-top:1px solid var(--line)}.ch-cv-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13.5px;margin-bottom:8px}
.ch-cv-m{max-width:80%;padding:8px 12px;border-radius:14px;font-size:14px;margin-top:6px;background:var(--surface)}.ch-cv-m.me{margin-left:auto;background:color-mix(in srgb,#A3239F 14%,var(--surface))}
.cm-pl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}.cm-pl.pop{border-color:#E52F7E;box-shadow:0 0 0 3px color-mix(in srgb,#E52F7E 15%,transparent)}
.cm-pl b{font-size:14px}.cm-pl b em{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(90deg,#A3239F,#F0386B);padding:2px 7px;border-radius:999px;margin-left:4px;vertical-align:1px}
.cm-pl span{font:800 16px var(--f-display);text-align:right}.cm-pl span i{font-style:normal;font-size:11px;color:var(--muted);font-weight:600}.cm-pl small{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.4}
.cm-more{display:inline-block;margin-top:10px;font-size:13px}

/* ================= NAV MOTION (Clay-style) ================= */
.nav-links{position:relative}
.nav-links>a,.nav-links .mm-t{position:relative;z-index:2;transition:color .25s cubic-bezier(.22,1,.36,1)}
.nav-links>a:hover,.nav-links .mm-t:hover,.nav-links .mm.open .mm-t{background:transparent!important;color:var(--ink)}
.nav-pill{position:absolute;left:0;top:0;z-index:1;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),opacity .25s}
.nav-pill.on{opacity:1}
.mm-morph{position:absolute;left:0;top:0;z-index:79;border-radius:22px;pointer-events:none;opacity:0;background:var(--bg);border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03) inset;transform-origin:top center;transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),opacity .28s ease}
.mm-morph.instant{transition:opacity .28s ease}
.mm-morph.on{opacity:1}
.mm-arrow{position:absolute;top:-6px;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-radius:3px 0 0 0;transition:left .5s cubic-bezier(.22,1,.36,1)}
.nav-links .mm-p{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:translate(calc(-50% + var(--dx,0px)),6px)!important;filter:blur(4px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),filter .4s cubic-bezier(.22,1,.36,1)!important}
.nav-links .mm.open .mm-p{transform:translate(-50%,0)!important;filter:none}
.nav-links .mm-p a,.nav-links .mm-p .mm-ft{opacity:0;transform:translateY(6px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),background .2s}
.nav-links .mm.open .mm-p a,.nav-links .mm.open .mm-p .mm-ft{opacity:1;transform:none}
.nav-links .mm.open .mm-p a:nth-child(1){transition-delay:.03s}.nav-links .mm.open .mm-p a:nth-child(2){transition-delay:.06s}.nav-links .mm.open .mm-p a:nth-child(3){transition-delay:.09s}.nav-links .mm.open .mm-p a:nth-child(4){transition-delay:.12s}.nav-links .mm.open .mm-p a:nth-child(5){transition-delay:.15s}.nav-links .mm.open .mm-p a:nth-child(6){transition-delay:.18s}.nav-links .mm.open .mm-p a:nth-child(n+7){transition-delay:.21s}.nav-links .mm.open .mm-p .mm-ft{transition-delay:.22s}
.nav-links .mm-p a .mm-ic{transition:transform .4s cubic-bezier(.22,1,.36,1)}.nav-links .mm-p a:hover .mm-ic{transform:translateY(-2px) scale(1.06) rotate(-4deg)}
.nav-links .mm-p a:hover{background:color-mix(in srgb,var(--surface) 85%,transparent)}
.nav{transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav .mm-t svg{transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.nav-pill,.mm-morph,.nav-links .mm-p,.nav-links .mm-p a{transition:none!important}}

/* ================= PRICING v2 ================= */
.pz-free{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 22px;padding:16px 20px;border-radius:20px;background:linear-gradient(100deg,color-mix(in srgb,#6E5CFF 16%,var(--bg)),color-mix(in srgb,#F0386B 12%,var(--bg)) 60%,color-mix(in srgb,#FFC400 10%,var(--bg)));border:1px solid color-mix(in srgb,#A3239F 30%,var(--line))}
.pz-free>div{flex:1;min-width:220px}.pz-free b{display:block;font:700 16.5px var(--f-display)}.pz-free span{font-size:14px;color:var(--muted)}
.pz-free-ic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6E5CFF,#F0386B)}.pz-free-ic svg{width:22px;height:22px}
.plans.pz{align-items:stretch}
.pz-c{gap:12px;padding:26px 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,var(--bg)),var(--bg));transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.pz-c:hover{transform:translateY(-6px)}
.pz-c.hot{border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(160deg,#6E5CFF,#A3239F 40%,#F0386B 70%,#FFC400) border-box;box-shadow:0 30px 70px -34px rgba(240,56,107,.75)}
.pz-c.rec{border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(160deg,#30D158,#00C7BE) border-box;box-shadow:0 30px 70px -34px rgba(48,209,88,.7);transform:translateY(-6px)}
.pz-c .tag{background:linear-gradient(90deg,#A3239F,#F0386B)}.pz-c .tag.rec{background:linear-gradient(90deg,#1a9d42,#00A59E)}
.pz-top{display:flex;align-items:center;gap:12px}.pz-top small{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.pz-ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6E5CFF,#F0386B);box-shadow:0 10px 20px -10px #F0386B}.pz-ic svg{width:20px;height:20px}
.pz-best{font:600 15px/1.4 var(--f-display);color:var(--ink);min-height:42px}
.pz-c .amt{font-size:46px}
.pz-bill{font-size:12.5px;color:var(--muted);margin-top:-6px}
.pz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.pz-stats span{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.2}.pz-stats b{font:800 15px var(--f-display);color:var(--ink);margin-bottom:2px}
.pz-cta{justify-content:center;width:100%}
.pz-c ul{border-top:1px dashed var(--line);padding-top:14px}
.pz-finder{margin-top:34px;padding:clamp(20px,3vw,32px);border-radius:28px;background:var(--bg);border:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px}
.pz-f-hd{grid-column:1/-1}.pz-f-hd h3{font-size:clamp(20px,2.4vw,26px);margin-top:4px}
.pz-q b{display:block;font-size:14.5px;margin-bottom:10px}
.pz-opts{display:flex;flex-wrap:wrap;gap:8px}.pz-opts button{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:13.5px;transition:all .25s cubic-bezier(.22,1,.36,1)}
.pz-opts button:hover{border-color:#E52F7E}.pz-opts button[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6E5CFF,#F0386B);box-shadow:0 8px 18px -10px #F0386B}
.pz-out{grid-column:1/-1}.pz-hint{color:var(--muted);font-size:14px}
.pz-rec{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:20px;background:linear-gradient(100deg,color-mix(in srgb,#30D158 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,#30D158 35%,var(--line));animation:cmIn .4s cubic-bezier(.22,1,.36,1)}
.pz-rec .pz-ic{background:linear-gradient(135deg,#30D158,#00A59E);box-shadow:none}.pz-rec>div{flex:1;min-width:220px}.pz-rec small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#1a9d42}.pz-rec b{display:block;font:700 19px var(--f-display)}.pz-rec p{font-size:14px;color:var(--muted);margin-top:2px}
.pz-cmp{margin-top:40px}.pz-cmp-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}.pz-cmp-hd h3{font-size:clamp(22px,2.8vw,30px)}.pz-cmp-hd p{color:var(--muted);font-size:14.5px;max-width:52ch}
.pz-tw{overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:var(--bg)}
.pz-t{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:14.5px}
.pz-t th,.pz-t td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line)}
.pz-t th:first-child,.pz-t td:first-child{text-align:left;width:34%;color:var(--ink);font-weight:600;position:sticky;left:0;background:var(--bg);z-index:1}
.pz-t thead th{position:sticky;top:0;background:var(--bg);z-index:2;padding:18px 16px}.pz-t thead th b{display:block;font:700 17px var(--f-display)}.pz-t thead th span{font:800 20px var(--f-display)}.pz-t thead th small{font-size:12px;color:var(--muted);font-weight:600}
.pz-t .pop{background:color-mix(in srgb,#F0386B 7%,var(--bg))}.pz-t thead th.pop{box-shadow:inset 0 3px 0 #F0386B}
.pz-t .rec{background:color-mix(in srgb,#30D158 9%,var(--bg))}.pz-t thead th.rec{box-shadow:inset 0 3px 0 #30D158}
.pz-g td{background:var(--surface)!important;font:800 12px var(--f-body)!important;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)!important;text-align:left!important;padding:10px 16px}
.pz-y{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,#30D158 18%,transparent);color:#30D158}.pz-y svg{width:14px;height:14px}
.pz-n{color:var(--muted);opacity:.5}.pz-v{font-weight:700;font-size:13.5px}
.pz-act td{border-bottom:0;padding:16px}
.pz-t tbody tr:not(.pz-g):hover td{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.pz-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.pz-faq details{padding:14px 18px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}.pz-faq summary{cursor:pointer;font-weight:700;list-style:none}.pz-faq summary::-webkit-details-marker{display:none}.pz-faq p{margin-top:8px;color:var(--muted);font-size:14.5px}
@media (max-width:900px){.pz-finder{grid-template-columns:1fr}.pz-faq{grid-template-columns:1fr}}
/* mobile story fix */
.story-cap{display:none}
@media (max-width:900px){
 .story-stage{padding-bottom:14px!important}
 .story-phone{transform:scale(.44)!important;height:266px!important}
 .story-cap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px;padding:4px 4px 0;text-align:left}
 .story-cap h3{font-family:"Poppins",var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
 .story-cap p{color:#A1A1A6;font-size:15px;line-height:1.45}
 .story-cap .st-kick{font-size:11.5px}
 .story-cap .st-res{font-size:12.5px;padding:7px 12px 7px 7px}
 .story-cap.in{animation:capIn .5s cubic-bezier(.22,1,.36,1)}
 #storySteps .st-step{min-height:62vh;visibility:hidden}
 .story-stage::after{display:none}
}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}}
@media (max-width:560px){.ch-nudge{display:none}}
/* blog/page mobile layout fixes */
.pg-body>*{min-width:0}.pg-prose{min-width:0;overflow-wrap:break-word}.pg-toc nav a{overflow-wrap:anywhere}
@media (max-width:1020px){
 .pg-toc{position:static!important;top:auto;margin:0 0 22px;gap:0}
 .pg-toc .pg-mini{display:none}
 .pg-toc-c{padding:0;overflow:hidden}
 .pg-toc-c h4{margin:0;padding:14px 16px;cursor:pointer;user-select:none}
 .pg-toc-c h4::after{content:"Show";font:700 11px var(--f-body);letter-spacing:.06em;color:var(--pa);margin-left:auto;padding-left:10px}
 .pg-toc-c h4 .pg-prog{display:none}
 .pg-toc-c.open h4::after{content:"Hide"}
 .pg-toc nav{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1);padding:0 8px}
 .pg-toc-c.open nav{max-height:60vh;overflow:auto;padding-bottom:10px}
 .b-qa,.bf,.pg-mag,.pg-cta,.b-auth,.pg-tbl{max-width:100%}
 .pg-mag{grid-template-columns:1fr!important}
}
.b-auth{gap:22px;padding:26px;align-items:flex-start}
.b-auth-av{position:relative;flex:none}.b-auth-badge{position:absolute;right:-2px;bottom:2px;width:24px;height:24px;border-radius:50%;background:#0A84FF;color:#fff;display:grid;place-items:center;border:3px solid var(--surface)}.b-auth-badge svg{width:12px;height:12px}
.b-auth-c{min-width:0;flex:1}.b-auth-c b{font-size:22px}
.b-roles{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}.b-roles span{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--pa) 14%,var(--bg));color:var(--ink);border:1px solid color-mix(in srgb,var(--pa) 35%,var(--line))}
.b-auth-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.b-auth-l{align-items:center}.b-soc{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--bg);font:800 13px var(--f-body);color:var(--ink)!important;text-decoration:none}.b-soc svg{width:15px;height:15px}.b-soc:hover{border-color:var(--pa)}
.bp-role{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:760px){.b-auth{flex-direction:column}}
.b-auth-go{background:linear-gradient(135deg,var(--pa),var(--pa2))!important;color:#fff!important}

/* ================= FEEL & CROSS-DEVICE ================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.sm-fine{scroll-behavior:auto}
a,button,summary,label,[role=switch]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,svg,video{max-width:100%}
#askPanel .bd,.pg-toc nav,.mm-sheet,.adm-th-p,.bf-lb{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (height:100dvh){#askPanel{height:min(640px,calc(100dvh - 130px))}@media (max-width:560px){#askPanel{height:calc(100dvh - 160px)}}.st-step{min-height:62dvh}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation-name:vtOut}::view-transition-new(root){animation-name:vtIn}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
.pg-sec,.bi-topics,.bi-ai,#faq,#templates,#footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
@media (max-width:760px){.pg-sec,.bi-topics,.bi-ai{contain-intrinsic-size:auto 1400px}}
@media (hover:none){.bc:hover,.b-pc:hover,.pz-c:hover,.pg-card:hover{transform:none}}
@media (max-width:380px){.wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}.bp-hd h1{font-size:28px}.bi-hd h1{font-size:30px}.pz-c .amt{font-size:40px}.nav-cta .btn{padding-inline:14px}}
@media (orientation:landscape) and (max-height:500px){#askPanel{height:calc(100dvh - 40px);bottom:20px}.story-stage{position:relative!important;top:auto!important}}
@media (orientation:landscape) and (max-height:500px){#storySteps .st-step{visibility:visible!important}.story-cap{display:none!important}}
/* nav fits every phone */
.nav .wrap{min-width:0}.nav-cta{min-width:0}
@media (max-width:520px){.nav .wrap{gap:8px}.nav-cta{gap:6px!important}.nav-cta .btn-red{height:38px;padding:0 14px!important;font-size:13.5px;white-space:nowrap}.nav-cta .icon-btn{width:36px;height:36px}.logo .wm{font-size:21px}.logo-mark{width:30px;height:30px}}
@media (max-width:440px){body.view-app .adm-th{display:none}body.view-app .nav-cta .ws-pill{display:none}}
@media (max-width:350px){.nav-cta .btn-red{padding:0 11px!important;font-size:12.5px}.logo .wm{font-size:19px}.nav-cta #themeBtn{display:none}}
.h-plat .pl-ic,.h-plat button[aria-pressed="true"] .pl-ic{background:none!important;box-shadow:none!important;width:auto!important;height:auto!important;border-radius:0;color:inherit}.h-plat .pl-ic svg{width:19px!important;height:19px!important}
@media (max-width:340px){.ccard{min-width:0!important;max-width:100%}#main .btn{white-space:normal;max-width:100%;text-align:center}#main .phone{transform:scale(.9);transform-origin:top center;margin-bottom:-60px}}
@media (max-width:640px){.pg-slide{display:none!important}}
@media (max-width:340px){.ccard{width:auto!important;flex-basis:auto!important}#main .phone{transform:none;margin-bottom:0;zoom:.86}#main .phone+*,#main [class*=preview] > div{max-width:100%}}
@media (max-width:360px){.comp-grid{grid-template-columns:minmax(0,1fr)!important}}

/* ================= FIELDS v2: smooth inputs with theme-colour glow ================= */
body{--fx-a:var(--red);--fx-b:var(--wine)}html[data-adm] body.view-app{--fx-b:color-mix(in srgb,var(--red) 55%,var(--wine))}
:root{--fx-chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E8E9A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")}
.inp,.sel,select.inp,textarea.inp,.cm-lead input,.cm-cta input,.pg-mag form input,.pg-mag form select,.ch-form input,.ch-form textarea,.ch-form select{
 -webkit-appearance:none;appearance:none;min-height:48px;padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.35;color:var(--ink);
 border:1.5px solid var(--line);background-color:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.05);outline:none;
 transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),background-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
textarea.inp,.ch-form textarea{min-height:110px;resize:vertical}
.sel,select.inp,.pg-mag form select,.ch-form select{padding-right:42px;background-image:var(--fx-chev);background-repeat:no-repeat;background-position:right 15px center;background-size:14px;cursor:pointer}
.inp::placeholder,.cm-lead input::placeholder,.cm-cta input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.inp:hover,.sel:hover,.cm-lead input:hover,.pg-mag form input:hover,.pg-mag form select:hover{border-color:color-mix(in srgb,var(--fx-a) 38%,var(--line))}
.inp:focus,.sel:focus,.inp:focus-visible,.sel:focus-visible,.cm-lead input:focus,.cm-cta input:focus,.pg-mag form input:focus,.pg-mag form select:focus,.ch-form input:focus,.ch-form textarea:focus,.ch-form select:focus{
 border-color:transparent!important;outline:none;
 background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--fx-a),var(--fx-b) 55%,color-mix(in srgb,var(--fx-a) 60%,#FFC400)) border-box!important;
 box-shadow:0 0 0 4px color-mix(in srgb,var(--fx-a) 16%,transparent),0 10px 30px -12px color-mix(in srgb,var(--fx-a) 60%,transparent)!important}
.sel:focus,select.inp:focus,.pg-mag form select:focus,.ch-form select:focus{background:var(--fx-chev) no-repeat right 15px center/14px,linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--fx-a),var(--fx-b)) border-box!important}
.opt label,.ch-form label,.ch-lbl{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--muted);margin-bottom:8px;transition:color .25s}
.opt:focus-within label{color:var(--fx-a)}
.sel{min-width:0;width:100%}.kpis .sel,.card-hd .sel,.page-hd .sel{width:auto;min-height:40px;padding-top:8px;padding-bottom:8px}
/* composer card + inline CTA forms glow on focus */
.composer{border:1.5px solid var(--line);transition:border-color .35s,box-shadow .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.composer:hover{border-color:color-mix(in srgb,var(--fx-a) 30%,var(--line))}
.composer:focus-within{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--fx-a),var(--fx-b) 50%,color-mix(in srgb,var(--fx-a) 55%,#FFC400)) border-box;box-shadow:0 0 0 5px color-mix(in srgb,var(--fx-a) 14%,transparent),0 30px 70px -30px color-mix(in srgb,var(--fx-a) 70%,transparent)}
.composer-row input{font-size:clamp(16px,1.6vw,19px)}
.mic-btn{transition:all .3s cubic-bezier(.22,1,.36,1)}.mic-btn:hover{border-color:var(--fx-a);color:var(--fx-a);transform:scale(1.05)}
.composer:focus-within .mic-btn{background:color-mix(in srgb,var(--fx-a) 12%,var(--surface));border-color:color-mix(in srgb,var(--fx-a) 40%,var(--line));color:var(--fx-a)}
.pg-go,.bi-search{transition:box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .3s}
.pg-go:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--pa,var(--fx-a)) 22%,transparent),0 24px 60px -22px color-mix(in srgb,var(--pa,var(--fx-a)) 80%,transparent)}
.bi-search:focus-within,#askForm2:focus-within .inp{border-color:transparent}
/* tabs, segmented controls, style cards */
.mode-tabs,.seg{background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid var(--line)}
.mode-tabs button,.seg button{transition:color .25s,background .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.mode-tabs button:hover,.seg button:hover{color:var(--ink)}
.mode-tabs button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--bg);color:var(--fx-a);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -8px color-mix(in srgb,var(--fx-a) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--fx-a) 25%,transparent)}
.opt .seg{display:flex;width:100%;min-height:48px;padding:4px;border-radius:14px}.opt .seg button{flex:1;font-size:14px;border-radius:10px}
.style-opt{position:relative;border-radius:18px;padding:14px;border:1.5px solid var(--line);transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .4s}
.style-opt:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fx-a) 35%,var(--line));box-shadow:0 14px 30px -18px color-mix(in srgb,var(--fx-a) 55%,transparent)}
.style-opt[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--fx-a),var(--fx-b)) border-box;box-shadow:0 0 0 4px color-mix(in srgb,var(--fx-a) 14%,transparent),0 18px 40px -20px color-mix(in srgb,var(--fx-a) 70%,transparent)}
.style-opt[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--f-body);color:#fff;background:linear-gradient(135deg,var(--fx-a),var(--fx-b))}
.switch{transition:background .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}.switch::after{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.switch:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--fx-a) 22%,transparent);outline:none}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--fx-a)}
@media (max-width:760px){.style-pick{grid-template-columns:1fr}}

/* ================= CHARTS v2 ================= */
.chart .bar .b{transform-box:fill-box;transform-origin:50% 100%;animation:barUp .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*80ms + .05s);transition:filter .3s,opacity .3s}
@keyframes barUp{from{transform:scaleY(0)}}
.chart .bar .bv{opacity:0;font:700 12.5px var(--f-mono)!important;fill:var(--ink)!important;transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1);transform:translateY(4px)}
.chart-bar:hover .bar .b{opacity:.45}
.chart-bar .bar:hover .b{opacity:1;filter:brightness(1.08) drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.chart-bar .bar:hover .bv{opacity:1;transform:none}
.chart .ln:not(.dash){stroke-dasharray:1;stroke-dashoffset:1;animation:lnDraw 1.4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes lnDraw{to{stroke-dashoffset:0}}
.chart .ln.dash,.chart .area{animation:fadeIn 1.2s ease both .3s}.chart .end{animation:fadeIn .4s ease both 1.2s}
@keyframes fadeIn{from{opacity:0}}
.chart .pt line{stroke:var(--muted);stroke-dasharray:3 4;opacity:0;transition:opacity .2s}.chart .pt circle{opacity:0;transition:opacity .2s;pointer-events:none}
.chart .pt:hover line,.chart .pt:hover circle{opacity:1}
.hbar{border-radius:12px;transition:background .25s;padding-inline:6px;cursor:default}
.hbar:hover{background:color-mix(in srgb,var(--surface) 80%,transparent)}
.hbar .fill{transform-origin:left;animation:hbarIn 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms + .1s);transition:filter .3s,transform .3s}
@keyframes hbarIn{from{transform:scaleX(0)}}
.hbar:hover .fill{filter:brightness(1.12) saturate(1.1);box-shadow:0 0 16px -2px currentColor}
.hbar:hover .v{color:var(--ink);font-weight:700}
.ch-tip{position:fixed;left:0;top:0;z-index:300;pointer-events:none;padding:10px 13px;border-radius:12px;background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);max-width:280px;opacity:0;transition:opacity .18s;font-size:13px;line-height:1.4}
.ch-tip.on{opacity:1}.ch-tip b{display:block;font:700 13.5px var(--f-display);color:var(--ink)}.ch-tip span{display:block;color:var(--muted);margin-top:2px}
@media (prefers-reduced-motion:reduce){.chart .bar .b,.chart .ln,.hbar .fill{animation:none}}
.chart-donut .dseg{transition:stroke-width .3s cubic-bezier(.22,1,.36,1),opacity .3s;animation:fadeIn .6s ease both;animation-delay:calc(var(--i)*120ms)}
.chart-donut:hover .dseg{opacity:.5}.chart-donut .dseg:hover{opacity:1;stroke-width:28}
.fstep{border-radius:10px;transition:background .25s}.fstep:hover{background:color-mix(in srgb,var(--surface) 80%,transparent)}
.fstep .bar{transform-origin:left;animation:hbarIn 1s cubic-bezier(.22,1,.36,1) both;transition:filter .3s}.fstep:hover .bar{filter:brightness(1.12)}
.heat>div[data-tip]{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;cursor:default}.heat>div[data-tip]:hover{transform:scale(1.08);box-shadow:0 8px 20px -8px rgba(0,0,0,.45);position:relative;z-index:1}
.progress i,.seo-bar i{transform-origin:left;animation:hbarIn 1.1s cubic-bezier(.22,1,.36,1) both}
.progress,.seo-bar,.cta-gauge{cursor:default}.progress:hover i,.seo-bar:hover i{filter:brightness(1.15)}
.cta-gauge svg path:last-child{transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1)}
/* hero rotating app name: fixed box, no reflow */
.h-rot{height:1.16em;align-items:center}
.h-rot .h-app.ghost{visibility:hidden;pointer-events:none;animation:none!important}
.h-rot .h-app{line-height:1.08}
/* founder photo in author avatars (initials stay underneath as a fallback) */
.b-av.has-img{position:relative;overflow:hidden}
.b-av.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:50%;opacity:0;transition:opacity .35s ease}
.b-av.has-img img.ld{opacity:1}
/* author box v3 — Invoice Studio layout: photo + identity, bio, grouped social links */
.b-auth.ba2{display:block;padding:28px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--pa) 13%,var(--surface)),var(--surface) 62%);border:1px solid color-mix(in srgb,var(--pa) 22%,var(--line))}
.b-auth.ba2::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pa) 28%,transparent),transparent);pointer-events:none}
.ba-hd{display:flex;align-items:center;gap:18px;position:relative}
.ba-ph{position:relative;flex:none}.ba-ph .b-av{box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--pa) 60%,transparent),0 12px 28px -10px color-mix(in srgb,var(--pa) 70%,transparent)}
.ba-ph .b-auth-badge{right:0;bottom:2px}
.ba-id{min-width:0}.ba-id small{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ba-id b{display:block;font:700 23px/1.2 var(--f-display);margin:3px 0 5px;color:var(--ink)}
.ba-role{display:block;font-size:14px;font-weight:600;line-height:1.45;color:color-mix(in srgb,var(--ink) 82%,var(--muted))}.ba-role i{font-style:normal;color:var(--pa);margin:0 4px}
.ba-bio{position:relative;margin:18px 0 0!important;font-size:15.5px!important;line-height:1.65!important;color:var(--muted)}
.ba-links{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.ba-g{display:flex;align-items:center;gap:8px}.ba-gl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ba-s{width:36px;height:36px;border-radius:12px;display:inline-grid;place-items:center;color:var(--ink);background:var(--bg);border:1px solid var(--line);text-decoration:none;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),border-color .2s,color .2s,box-shadow .2s}
.ba-s svg{width:16px;height:16px}.ba-s:hover{transform:translateY(-2px);color:var(--pa);border-color:var(--pa);box-shadow:0 8px 18px -10px var(--pa)}
.ba-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--pa);text-decoration:none}.ba-more svg{width:15px;height:15px;transition:transform .25s}.ba-more:hover svg{transform:translateX(3px)}
@media (max-width:760px){.b-auth.ba2{padding:22px 18px}.ba-hd{gap:14px}.ba-ph .b-av{width:68px!important;height:68px!important;font-size:24px!important}.ba-id b{font-size:20px}.ba-role{font-size:13px}.ba-bio{font-size:15px!important}.ba-more{margin-left:0;width:100%}}
/* ===== plan finder v2: one line of hover/tap dropdowns ===== */
.pz-f1 .pz-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch;margin-top:18px}
.pz-dd{position:relative;min-width:0}
.pz-dd-t{width:100%;height:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:border-color .2s,box-shadow .25s,transform .2s,background .2s}
.pz-dd-t:hover,.pz-dd.open .pz-dd-t{border-color:color-mix(in srgb,var(--red) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent),0 14px 30px -18px color-mix(in srgb,var(--red) 70%,transparent)}
.pz-dd-t:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent)}
.pz-dd-n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:800 13px var(--f-display);color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .25s,color .25s}
.pz-dd.set .pz-dd-n{background:linear-gradient(135deg,var(--red),var(--wine,#7A5CFF));color:#fff}
.pz-dd-l{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.pz-dd-l small{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-dd-l b{font:700 15px var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-dd:not(.set) .pz-dd-l b{color:color-mix(in srgb,var(--ink) 55%,var(--muted))}
.pz-dd-c{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),color .2s}
.pz-dd.open .pz-dd-c{transform:rotate(180deg);color:var(--red)}
.pz-dd-m{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:6px;border-radius:16px;background:var(--bg);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .18s ease,transform .25s cubic-bezier(.2,.9,.3,1.2),visibility 0s .25s}
.pz-dd-m::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.pz-dd.open .pz-dd-m{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .25s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.pz-dd-m button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:11px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;opacity:0;transform:translateY(-4px);transition:background .15s,opacity .2s,transform .25s}
.pz-dd.open .pz-dd-m button{opacity:1;transform:none}
.pz-dd.open .pz-dd-m button:nth-child(2){transition-delay:.03s}.pz-dd.open .pz-dd-m button:nth-child(3){transition-delay:.06s}.pz-dd.open .pz-dd-m button:nth-child(4){transition-delay:.09s}
.pz-dd-m button span{display:flex;flex-direction:column;gap:1px;min-width:0}.pz-dd-m button b{font-size:14.5px;font-weight:700}.pz-dd-m button small{font-size:12px;color:var(--muted)}
.pz-dd-m button svg{flex:none;width:16px;height:16px;color:var(--red);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s}
.pz-dd-m button:hover,.pz-dd-m button:focus-visible{outline:none;background:color-mix(in srgb,var(--red) 8%,transparent)}
.pz-dd-m button[aria-selected="true"]{background:color-mix(in srgb,var(--red) 11%,transparent)}.pz-dd-m button[aria-selected="true"] svg{opacity:1;transform:none}
.pz-dd.pick .pz-dd-t{animation:pzPick .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pzPick{0%{transform:scale(1)}35%{transform:scale(.97)}100%{transform:scale(1)}}
.pz-reset{align-self:center;border:0;background:none;color:var(--muted);font:600 13px var(--f-body);cursor:pointer;padding:8px 6px;text-decoration:underline;text-underline-offset:3px}.pz-reset:hover{color:var(--red)}
.pz-f1 .pz-out{margin-top:16px}
@media (max-width:900px){.pz-f1 .pz-row{grid-template-columns:1fr}.pz-dd-m{min-width:0}.pz-reset{justify-self:start}}
/* homepage: link to the full comparison on the pricing page */
.pz-cmp-link{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding:18px 22px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--red) 40%,var(--line));background:color-mix(in srgb,var(--red) 4%,var(--bg));color:var(--ink);text-decoration:none;transition:border-color .2s,transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s}
.pz-cmp-link span{display:flex;flex-direction:column;gap:2px}.pz-cmp-link b{font:700 17px var(--f-display)}.pz-cmp-link small{font-size:13.5px;color:var(--muted)}
.pz-cmp-link svg{flex:none;width:20px;height:20px;color:var(--red);transition:transform .25s}
.pz-cmp-link:hover{border-style:solid;border-color:var(--red);transform:translateY(-2px);box-shadow:0 16px 34px -22px var(--red)}.pz-cmp-link:hover svg{transform:translateX(4px)}
/* dedicated pricing page */
.pp-hero{position:relative;overflow:hidden;padding:56px 0 18px;text-align:center}.pp-hero .crumbs{justify-content:center}
.pp-hero h1{font:700 clamp(36px,5.4vw,64px)/1.05 var(--f-display);letter-spacing:-.035em;margin:12px auto 14px;max-width:900px}
.pp-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--pa),var(--pa2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-hero .pg-sub{max-width:720px;margin:0 auto}
.pp-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin:20px 0 26px;font-size:14px;font-weight:600;color:var(--muted)}.pp-trust span{display:inline-flex;align-items:center;gap:6px}.pp-trust svg{width:15px;height:15px;color:#16a34a}
.pp-hero .price-toggle{display:flex;justify-content:center}
.pp-body{padding:10px 0 30px}
.pp-cta{padding:10px 0 70px}.pp-cta-c{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px;border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 14%,var(--surface)),color-mix(in srgb,var(--pa2) 12%,var(--surface)));border:1px solid var(--line)}
.pp-cta-c h2{font:700 clamp(22px,3vw,30px) var(--f-display);margin:0 0 6px}.pp-cta-c p{margin:0;color:var(--muted);max-width:560px}
.pz-faq-h{font:700 clamp(22px,2.8vw,30px) var(--f-display);margin:0 0 14px}
.b-xcs{padding-block:10px 50px}
.pz-finder.pz-f1{display:block}.pz-f1 .pz-row{width:100%}
/* ===== deploy CTA: realistic iPhone home screen ===== */
.hs-ph .xp-scr{background:#0b0b12}
.hs-ph .xp-sb{position:relative;z-index:3;color:#fff;text-shadow:0 .3cqw 1cqw rgba(0,0,0,.25)}
.hs{position:absolute;inset:0;padding:17cqw 6.2cqw 3cqw;display:flex;flex-direction:column;font:500 3cqw/1.2 -apple-system,"SF Pro Text","Inter",system-ui,sans-serif;color:#fff}
.hs-wall{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 40% at 20% 18%,#FF8A4C 0%,transparent 70%),radial-gradient(55% 45% at 85% 30%,#FF2E6E 0%,transparent 70%),radial-gradient(70% 50% at 30% 70%,#7A3CFF 0%,transparent 72%),radial-gradient(60% 50% at 90% 85%,#1E4BFF 0%,transparent 70%),linear-gradient(180deg,#3A0F4F,#0E0B2E 70%,#070616);filter:saturate(1.15)}
.hs-wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0) 30%,rgba(0,0,0,.18));}
.hs>*:not(.hs-wall){position:relative;z-index:1}
.hs-wg{display:grid;grid-template-columns:1fr 1fr;gap:5.4cqw;margin-bottom:5.6cqw}
.hs-w{aspect-ratio:1;border-radius:6cqw;padding:3.6cqw 4cqw;display:flex;flex-direction:column;box-shadow:0 1.2cqw 4cqw rgba(0,0,0,.28);overflow:hidden;position:relative}
.hs-wx{background:linear-gradient(180deg,#3A8DFF,#1C5FD9 55%,#174CB3)}
.hs-wx b{font-size:3.4cqw;font-weight:700;display:flex;align-items:center;gap:1cqw}.hs-wx b svg{width:2.6cqw;height:2.6cqw;transform:rotate(45deg)}
.hs-wx strong{font:300 11cqw/1 -apple-system,"Inter",system-ui;letter-spacing:-.04em;margin-top:.6cqw}
.hs-sun{width:5.6cqw;height:5.6cqw;border-radius:50%;background:radial-gradient(circle,#FFE36E 55%,#FFC21A);box-shadow:0 0 3cqw #FFD84D;margin-top:auto;margin-bottom:1cqw}
.hs-wx small{font-size:2.8cqw;font-weight:600}.hs-wx small+small{opacity:.85;font-weight:500}
.hs-cal{background:#fff;color:#111}
.hs-cal small{font-size:2.7cqw;font-weight:700;color:#FF3B30;letter-spacing:.02em}
.hs-cal strong{font:400 11.5cqw/1 -apple-system,"Inter",system-ui;letter-spacing:-.04em;margin:.4cqw 0 auto}
.hs-ev{display:flex;gap:1.6cqw;align-items:stretch}.hs-ev i{width:.9cqw;border-radius:1cqw;background:#FF2E6E;flex:none}
.hs-ev span{display:flex;flex-direction:column;font-size:2.5cqw;color:#6B6B73;line-height:1.25}.hs-ev b{font-size:2.8cqw;color:#111;font-weight:700}
.hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4.6cqw 0;justify-items:center}
.hs-a{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5cqw;width:100%;animation:hsPop .7s var(--d,0s) cubic-bezier(.2,1.4,.3,1) both}
.hs-a i,.hs-dock i{width:15.4cqw;height:15.4cqw;border-radius:3.6cqw;display:grid;place-items:center;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.25),inset 0 0 0 .2cqw rgba(255,255,255,.08)}
.hs-a i svg,.hs-dock i svg{width:62%;height:62%}
.hs-a span{font-size:2.85cqw;font-weight:500;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.45);white-space:nowrap;letter-spacing:-.01em}
.hs-ring{position:absolute;top:0;left:50%;width:15.4cqw;height:15.4cqw;margin-left:-7.7cqw;border-radius:3.6cqw;background:rgba(0,0,0,.42);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 4.2cqw,#000 4.3cqw),conic-gradient(#000 0 0);animation:hsFade .5s 3.2s both}
.hs-ring::before{content:"";position:absolute;left:50%;top:50%;width:8cqw;height:8cqw;margin:-4cqw 0 0 -4cqw;border-radius:50%;background:conic-gradient(rgba(255,255,255,.95) var(--hp),rgba(255,255,255,.18) 0);-webkit-mask:radial-gradient(circle,transparent 3cqw,#000 3.1cqw);mask:radial-gradient(circle,transparent 3cqw,#000 3.1cqw);animation:hsProg 2.4s .8s cubic-bezier(.4,0,.2,1) both}
@property --hp{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes hsProg{from{--hp:0%}to{--hp:100%}}
@keyframes hsFade{to{opacity:0}}
.hs-bd{position:absolute;top:-1.4cqw;right:calc(50% - 9.2cqw);min-width:5cqw;height:5cqw;padding:0 1.2cqw;border-radius:3cqw;background:#FF3B30;color:#fff;font:700 3cqw/5cqw -apple-system,system-ui;text-align:center;font-style:normal;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.3);transform:scale(0);animation:hsBadge .5s 3.4s cubic-bezier(.2,1.8,.3,1) both}
@keyframes hsBadge{to{transform:scale(1)}}
@keyframes hsPop{from{opacity:0;transform:scale(.6) translateY(2cqw)}to{opacity:1;transform:none}}
.hs-dots{display:flex;justify-content:center;gap:1.6cqw;margin:6cqw 0 3cqw}.hs-dots i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:rgba(255,255,255,.4)}.hs-dots i.on{background:#fff}
.hs-srch{align-self:center;display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 4cqw;border-radius:5cqw;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:3cqw;font-weight:600;margin-bottom:3.6cqw}.hs-srch svg{width:3.2cqw;height:3.2cqw}
.hs-dock{display:flex;justify-content:space-around;padding:3.2cqw 2.6cqw;border-radius:8.4cqw;background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.18)}
.hs-home{align-self:center;width:34cqw;height:1.3cqw;border-radius:2cqw;background:#fff;margin-top:auto;opacity:.92}
.xc:not(.in) .hs-a,.xc:not(.in) .hs-ring::before,.xc:not(.in) .hs-ring,.xc:not(.in) .hs-bd{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hs-a,.hs-ring,.hs-ring::before,.hs-bd{animation-duration:.01s!important;animation-delay:0s!important}}
/* home screen pages swipe like iOS; dots follow */
.hs-pages{margin:0 -6.2cqw;overflow:hidden}
.hs-track{display:flex;width:200%;touch-action:pan-y;will-change:transform}
.hs-pg{width:50%;padding:0 6.2cqw;flex:none}
.hs-pg+.hs-pg .hs-grid{gap:5.2cqw 0;padding-top:1cqw}
@keyframes hsSwipe{0%,40%{transform:translateX(0)}48%,90%{transform:translateX(-50%)}98%,100%{transform:translateX(0)}}

@keyframes hsDot1{0%,40%{background:#fff}48%,90%{background:rgba(255,255,255,.4)}98%,100%{background:#fff}}
@keyframes hsDot2{0%,40%{background:rgba(255,255,255,.4)}48%,90%{background:#fff}98%,100%{background:rgba(255,255,255,.4)}}
.xc:not(.in) .hs-track,.xc:not(.in) .hs-dots i{animation-play-state:paused}
/* parallax on scroll */
.xa-deploy{--sp:0}
.xa-deploy .xa-float{transform:translate3d(0,calc(var(--sp) * 46px),0) rotate(calc(var(--sp) * -3deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.xa-deploy .slab{transform:translate3d(0,calc(var(--sp) * -28px),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.hs-track,.hs-dots i{animation:none!important}.xa-deploy .xa-float,.xa-deploy .slab{transform:none!important}}
.hs-pages{cursor:grab;user-select:none;-webkit-user-select:none}.hs-pages:active{cursor:grabbing}
.hs-dots i{cursor:pointer;transition:background .3s,transform .3s}.hs-dots i.on{background:#fff;transform:scale(1.15)}
.hs-a{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hs-a i{transition:transform .25s cubic-bezier(.2,1.4,.3,1),filter .2s}.hs-a:hover i{transform:translateY(-.8cqw) scale(1.05)}.hs-a:active i{transform:scale(.9);filter:brightness(.8)}
.hs-a.opened i{opacity:0}.hs-a:focus-visible{outline:none}.hs-a:focus-visible i{box-shadow:0 0 0 .7cqw #fff}
.hs-open{position:absolute;inset:0;z-index:5;border-radius:inherit;clip-path:circle(8cqw at var(--ox) var(--oy));opacity:.6;transition:clip-path .5s cubic-bezier(.3,.9,.2,1),opacity .25s;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;cursor:pointer}
.hs-open.on{clip-path:circle(150% at var(--ox) var(--oy));opacity:1}
.hs-open.off{clip-path:circle(8cqw at var(--ox) var(--oy));opacity:0;transition:clip-path .4s cubic-bezier(.5,0,.6,1),opacity .4s .05s}
.hs-op-in{display:flex;flex-direction:column;align-items:center;gap:2cqw;padding:0 9cqw;opacity:0;transform:scale(.85);transition:opacity .3s .18s,transform .45s .15s cubic-bezier(.2,1.3,.3,1)}
.hs-open.on .hs-op-in{opacity:1;transform:none}
.hs-op-ic{width:24cqw;height:24cqw;display:grid;place-items:center;border-radius:6cqw;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.25)}.hs-op-ic svg{width:64%;height:64%}
.hs-op-in b{font:800 7.4cqw/1.1 var(--f-display,system-ui);margin-top:2cqw;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.25)}
.hs-op-in p{margin:0;font-size:4cqw;font-weight:600;line-height:1.35;color:inherit;opacity:.95}
.hs-op-in small{font-size:3cqw;opacity:.75;font-weight:600}
.hs-open:not(.brand) .hs-op-in{color:#fff;text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.35)}
.hs-op-cta{margin-top:3cqw;padding:2.6cqw 6cqw;border-radius:6cqw;background:#fff;color:#FF2E6E!important;font:800 3.6cqw var(--f-body,system-ui);text-decoration:none;box-shadow:0 2cqw 5cqw -1cqw rgba(0,0,0,.35)}
.hs-op-home{position:absolute;left:50%;bottom:2.6cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border:0;border-radius:2cqw;background:rgba(255,255,255,.9);cursor:pointer;padding:0}
.hs-open.lt{color:#111}.hs-open.lt .hs-op-in{color:#111!important;text-shadow:none!important}.hs-open.lt .hs-op-ic{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.06)}.hs-open.lt .hs-op-home{background:rgba(0,0,0,.7)}
.hs-open{align-items:flex-start;padding-top:34cqw}.hs-ph .xp-sb{z-index:6}
/*/PG-CSS*/
[hidden]{display:none!important}img{max-width:100%}body{margin:0}