*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bk:#0A0A0B;--ink:#18181B;--ink2:#3F3F46;--ink3:#52525B;--ink4:#71717A;
  --line:#E4E4E7;--line2:#F4F4F5;--w:#fff;--pg:#FCFCFD;
  --bl:#1D4ED8;--bl2:#1E3A8A;--bl-l:#EFF6FF;
  --gn:#16A34A;--gn-l:#F0FDF4;
  --am:#D97706;--am-l:#FEF3C7;
  --rd:#DC2626;
  --f:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --fm:'Geist Mono',monospace;
  --fs:'Newsreader',Georgia,serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--w);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01"}
a{text-decoration:none;color:inherit}
::selection{background:var(--bk);color:var(--w)}

/* ─── NAV ─── */
nav{position:fixed;inset:0 0 auto;z-index:200;height:62px;display:flex;align-items:center;padding:0 32px;background:rgba(10,10,11,.6);backdrop-filter:blur(20px) saturate(1.2);transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
nav.s{background:rgba(255,255,255,.92);border-bottom-color:rgba(228,228,231,.6)}
.nav-inner{max-width:1180px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nl{display:flex;align-items:center;gap:9px}
.nm{width:30px;height:30px;background:var(--w);border-radius:8px;display:grid;place-items:center;position:relative;transition:background .3s}
nav.s .nm{background:var(--bk)}
.nm svg path{stroke:var(--bk);transition:stroke .3s}
nav.s .nm svg path{stroke:var(--w)}
.nm::after{content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 50%);pointer-events:none}
.nw{font-size:17px;font-weight:700;color:var(--w);letter-spacing:-.045em;transition:color .3s}
nav.s .nw{color:var(--bk)}
.nlinks{display:flex;gap:0;justify-self:center}
.nlink{padding:6px 14px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.65);transition:color .15s;letter-spacing:-.005em}
nav.s .nlink{color:var(--ink3)}
.nlink:hover{color:var(--w)}
nav.s .nlink:hover{color:var(--bk)}
.nr{display:flex;align-items:center;gap:14px;justify-self:end}
.n-email{font-family:var(--fm);font-size:12.5px;font-weight:500;color:var(--ink3);transition:color .15s}
.n-email:hover{color:var(--bk)}
.n-cta{padding:8px 16px;background:var(--w);color:var(--bk);border-radius:8px;font-size:13px;font-weight:600;transition:transform .15s,background .15s,color .3s}
nav.s .n-cta{background:var(--bk);color:var(--w)}
.n-cta:hover{transform:translateY(-1px)}

/* ─── HERO ─── */
#hero{position:relative;min-height:100vh;padding:108px 32px 64px;display:flex;align-items:center;overflow:hidden;background:var(--bk);border-bottom:1px solid var(--line)}
/* sophisticated grid bg on black */
#hero::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
  pointer-events:none}
/* soft blue glow behind phone — stronger on black */
#hero::after{content:'';position:absolute;top:50%;left:50%;width:900px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(37,99,235,.18) 0%,rgba(37,99,235,.05) 40%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;filter:blur(60px)}
.hero-inner{max-width:1180px;margin:0 auto;width:100%;position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* serif eyebrow with line */
.h-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-family:var(--fm);font-size:10.5px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase}
.h-eyebrow::before{content:'';display:block;width:32px;height:1px;background:rgba(255,255,255,.3)}

h1{font-size:52px;font-weight:700;color:var(--w);letter-spacing:-.045em;line-height:1.02;margin-bottom:20px;font-feature-settings:"ss01"}
h1 i{font-style:normal;font-family:var(--fs);font-weight:400;color:var(--w);letter-spacing:-.02em}

.h-sub{font-size:16px;color:rgba(255,255,255,.65);line-height:1.55;margin-bottom:32px;font-weight:400;max-width:460px;letter-spacing:-.005em}
.h-sub strong{color:var(--w);font-weight:600}

.h-actions{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.btn-pri{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;background:var(--w);color:var(--bk);border-radius:8px;font-size:13px;font-weight:600;transition:all .18s;letter-spacing:-.005em;position:relative;overflow:hidden}
.btn-pri::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%);pointer-events:none}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,255,255,.15)}
.btn-pri svg{transition:transform .2s}
.btn-pri:hover svg{transform:translateX(2px)}
.btn-sec{display:inline-flex;align-items:center;gap:6px;padding:11px 4px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);transition:color .15s}
.btn-sec:hover{color:var(--w)}
.btn-sec svg{transition:transform .2s}
.btn-sec:hover svg{transform:translateX(2px)}


/* HERO PHONE — single hero phone, larger, more designed */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;height:520px}
/* decorative grid behind phone */

.phone-hero{width:264px;background:var(--w);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:7px;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.5),0 40px 80px rgba(37,99,235,.15);position:relative;z-index:2}

.phone-hero-screen{background:#FAFAFA;border-radius:21px;overflow:hidden}
.ph-hd{background:var(--w);padding:14px 18px;border-bottom:1px solid var(--line)}
.ph-hd-row{display:flex;align-items:center;justify-content:space-between}
.ph-org{font-size:13px;font-weight:700;color:var(--bk);letter-spacing:-.015em}
.ph-org-sub{font-size:10px;color:var(--ink3);margin-top:1px;font-family:var(--fm)}
.ph-secure{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--gn);font-weight:500}
.ph-secure-dot{width:5px;height:5px;border-radius:50%;background:var(--gn)}
.ph-progress{padding:12px 18px;background:var(--w)}
.ph-progress-row{display:flex;justify-content:space-between;font-size:9px;color:var(--ink4);font-family:var(--fm);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.ph-progress-bar{display:flex;gap:4px}
.ph-progress-seg{flex:1;height:3px;border-radius:2px;background:var(--line)}
.ph-progress-seg.on{background:var(--bk)}
.ph-bd{padding:16px 18px}
.ph-card{background:var(--w);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.ph-card-h{background:linear-gradient(135deg,#EEF2FF 0%,#E0E7FF 100%);border:1px solid #C7D2FE;border-radius:12px;padding:14px;margin-bottom:12px}
.ph-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;background:rgba(37,99,235,.1);border-radius:20px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--bl);font-family:var(--fm);margin-bottom:8px}
.ph-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--bl)}
.ph-h-title{font-size:14.5px;font-weight:700;color:var(--bk);line-height:1.25;margin-bottom:4px;letter-spacing:-.02em}
.ph-h-body{font-size:11.5px;color:var(--ink3);line-height:1.5}
.ph-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ph-info{background:var(--w);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.ph-info-l{font-size:9px;color:var(--ink4);text-transform:uppercase;letter-spacing:.05em;font-family:var(--fm);margin-bottom:2px}
.ph-info-v{font-size:12px;font-weight:700;color:var(--bk);letter-spacing:-.01em}
.ph-cta{background:var(--bk);color:var(--w);text-align:center;padding:11px;border-radius:9px;font-size:12px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;justify-content:center;gap:6px}
.ph-ft{padding:10px 18px;text-align:center;font-size:9px;color:var(--ink4);background:var(--w);border-top:1px solid var(--line);font-family:var(--fm)}

/* floating chips */
.chip{position:absolute;background:rgba(20,20,24,.85);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 14px;box-shadow:0 12px 36px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);z-index:5;backdrop-filter:blur(12px)}
.chip-row{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.chip-spark{flex-shrink:0;margin-top:4px}
.chip-v{font-size:24px;font-weight:700;letter-spacing:-.04em;color:var(--w);line-height:1;font-family:var(--f)}
.chip-v sup{font-size:14px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0;margin-left:1px}
.chip-l{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px;font-family:var(--fm);letter-spacing:-.005em}
.chip-trend-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.chip-trend{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--gn);font-weight:600;font-family:var(--fm);letter-spacing:-.005em}

.chip-1{top:8%;left:-6%;min-width:200px}
.chip-2{bottom:18%;right:-10%;min-width:190px}

/* ─── SECTION SHARED ─── */
section{position:relative}
.s-inner{max-width:1180px;margin:0 auto;padding:0 32px}
.s-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--bl);letter-spacing:.06em;text-transform:uppercase}
.s-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--bl)}
h2{font-size:38px;font-weight:700;color:var(--bk);letter-spacing:-.04em;line-height:1.08;margin-bottom:14px;font-feature-settings:"ss01"}
h2 i{font-style:normal;font-family:var(--fs);font-weight:400}
.s-sub{font-size:15px;font-weight:400;color:var(--ink3);line-height:1.6;max-width:540px;margin-bottom:56px;letter-spacing:-.005em}

.s-num{font-family:var(--fm);font-weight:600;color:var(--bl);margin-right:4px;padding:2px 7px;background:var(--bl-l);border-radius:5px;font-size:10.5px}
.cta-eyebrow .s-num{color:var(--bl)}
/* persistent corner annotation per section */
.s-corner{position:absolute;top:24px;right:24px;font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--ink4);letter-spacing:.06em;z-index:2;pointer-events:none;display:flex;align-items:center;gap:6px}
.s-corner::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bl);opacity:.5}
#enterprise .s-corner{color:var(--ink4)}
#uc .s-corner{color:rgba(255,255,255,.3)}


/* light-section eyebrows — dark, not blue */
#how .s-eyebrow,#enterprise .s-eyebrow{color:var(--ink2)}
#how .s-eyebrow::before,#enterprise .s-eyebrow::before{background:var(--ink3)}
#how .s-num,#enterprise .s-num{color:var(--bk);background:var(--line2)}
/* dark-section eyebrows — white not blue */
#uc .s-eyebrow,#cta .cta-eyebrow{color:rgba(255,255,255,.55)}
#uc .s-eyebrow::before{background:rgba(255,255,255,.35)}
#cta .cta-eyebrow::before,#cta .cta-eyebrow::after{background:rgba(255,255,255,.35)}
#uc .s-num,#cta .s-num{color:var(--w);background:rgba(255,255,255,.08)}
/* ─── HOW IT WORKS ─── */
#how{padding:96px 0;background:var(--w);border-top:1px solid var(--line);position:relative;overflow:hidden}
#how::before{content:'';position:absolute;top:50%;left:50%;width:800px;height:400px;background:radial-gradient(ellipse,rgba(37,99,235,.04) 0%,transparent 60%);transform:translate(-50%,-50%);pointer-events:none;filter:blur(40px)}
#how .s-inner{position:relative;z-index:1}
.flow-wrap{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--w)}
.flow-wrap::before{content:'';position:absolute;top:111px;left:8%;right:8%;height:1px;background-image:linear-gradient(90deg,var(--line) 50%,transparent 50%);background-size:8px 1px;pointer-events:none;z-index:0}
.flow-step{padding:30px 24px;border-right:1px solid var(--line);position:relative;transition:background .2s}
.flow-step:hover{background:var(--pg)}
.flow-step:last-child{border-right:none}
.flow-step.hl{background:linear-gradient(135deg,#0A0A0B 0%,#1a1a2e 100%);color:var(--w);position:relative}
.flow-step.hl::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--bl),transparent)}
.flow-step.hl:hover{background:#15151a}
.flow-num{font-family:var(--fm);font-size:11px;font-weight:500;color:var(--ink4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:8px}
.flow-num::after{content:'';flex:1;height:1px;background:var(--line);max-width:40px}
.flow-step.hl .flow-num{color:rgba(255,255,255,.3)}
.flow-step.hl .flow-num::after{background:rgba(255,255,255,.15)}
.flow-icon{width:42px;height:42px;border-radius:11px;background:var(--line2);display:grid;place-items:center;margin-bottom:18px;position:relative;z-index:1}
.flow-step.hl .flow-icon{background:rgba(255,255,255,.08)}
.flow-icon svg{color:var(--ink2)}
.flow-step.hl .flow-icon svg{color:rgba(255,255,255,.7)}
.flow-t{font-size:17px;font-weight:700;color:var(--bk);margin-bottom:8px;letter-spacing:-.022em;line-height:1.25}
.flow-step.hl .flow-t{color:var(--w)}
.flow-b{font-size:12.5px;font-weight:400;color:var(--ink3);line-height:1.55;letter-spacing:-.005em}
.flow-step.hl .flow-b{color:rgba(255,255,255,.5)}

.how-bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.how-bullet{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--w);border:1px solid var(--line);border-radius:10px;transition:all .2s}
.how-bullet:hover{border-color:var(--ink3);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.04)}
.how-bullet-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.how-bullet-text{font-size:12.5px;font-weight:400;color:var(--ink2);letter-spacing:-.005em;line-height:1.4}
.how-bullet-text strong{color:var(--bk);font-weight:600}
/* live activity card below flow */
.activity-card{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;margin-top:14px;padding:30px;background:var(--pg);border:1px solid var(--line);border-radius:12px;align-items:center}
.activity-left{}
.activity-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;font-weight:600;color:var(--gn);letter-spacing:.06em;margin-bottom:14px;text-transform:uppercase}
.activity-pulse{width:6px;height:6px;border-radius:50%;background:var(--gn);box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:pulse 2s ease-in-out infinite}
.activity-h{font-size:22px;font-weight:700;color:var(--bk);letter-spacing:-.025em;line-height:1.2;margin-bottom:8px}
.activity-b{font-size:13px;font-weight:400;color:var(--ink3);line-height:1.6;max-width:300px;letter-spacing:-.005em}
.activity-feed{background:var(--w);border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px}
.activity-row{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center;padding:9px 10px;border-radius:6px;transition:background .15s,box-shadow .15s;border-left:2px solid transparent}
.activity-row:hover{background:var(--w);box-shadow:0 1px 3px rgba(0,0,0,.06);border-left-color:var(--bl)}
.activity-row-icon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.activity-row-text{font-size:12.5px;color:var(--ink2);letter-spacing:-.005em}
.activity-row-text strong{color:var(--bk);font-weight:600;font-family:var(--fm);font-size:12px;background:var(--line2);padding:1px 6px;border-radius:4px}
.activity-row-time{font-family:var(--fm);font-size:11px;color:var(--ink4);letter-spacing:-.005em}

/* ─── USE CASES — montage grid ─── */
#uc{padding:96px 0;background:var(--bk);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
#uc::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--bl),transparent);opacity:.5}
#uc::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:24px 24px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 0%,#000 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 0%,#000 80%);opacity:.6}
#uc .s-inner{position:relative;z-index:1}
#uc h2{color:var(--w)}
#uc h2 i{color:var(--w)}
#uc .s-sub{color:rgba(255,255,255,.5)}
#uc .uc-header-left{flex:1;min-width:400px}
#uc .s-corner{color:rgba(255,255,255,.3)}

/* Mockup gallery — staggered, varied */
.uc-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:48px}

.gallery-card{position:relative;border-radius:18px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.gallery-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.06)}
.gc-content{padding:28px;position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;min-height:300px}
.gc-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-family:var(--fm);width:fit-content;margin-bottom:auto;color:rgba(255,255,255,.85)}
.gc-tag.dark{background:rgba(255,255,255,.1);color:var(--w);border:1px solid rgba(255,255,255,.12)}
.gc-title{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2;margin-bottom:6px;margin-top:auto;color:var(--w)}
.gc-body{font-size:13px;font-weight:400;line-height:1.6;letter-spacing:-.005em;color:rgba(255,255,255,.65)}

/* card variants */
.gc-1{grid-column:span 6;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);border:1px solid rgba(96,165,250,.15);color:var(--w)}
.gc-2{grid-column:span 6;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);color:var(--w);border:1px solid rgba(255,255,255,.08)}
.gc-3{grid-column:span 4;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);border:1px solid rgba(251,191,36,.15);color:var(--w)}
.gc-4{grid-column:span 6;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);border:1px solid rgba(34,197,94,.15);color:var(--w)}
.gc-5{grid-column:span 6;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);border:1px solid rgba(255,255,255,.08);color:var(--w)}
.gc-6{grid-column:span 4;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);border:1px solid rgba(239,68,68,.15);color:var(--w)}

.gallery-divider{grid-column:span 12;display:flex;align-items:center;gap:14px;margin:8px 0 -4px;opacity:.7}
.gc-1{order:1}
.gc-2{order:2}
.gc-4{order:3}
.gc-5{order:4}
.gallery-divider{order:5}
.gc-3{order:6}
.gc-6{order:7}
.gc-7{order:8}

.gallery-divider-line{flex:1;height:1px;background:rgba(255,255,255,.1)}
.gallery-divider-label{font-family:var(--fm);font-size:11px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.08em}
/* card mini-mockups */
.gc-visual{margin-top:auto;padding-top:18px}
.gc-mini-card{background:var(--w);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:10px}

/* card 1 — verification */
.gc-step-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.gc-step-dot{width:20px;height:20px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink3);flex-shrink:0;font-family:var(--fm)}
.gc-step-dot.done{background:var(--gn);color:var(--w)}
.gc-step-dot.active{background:var(--bl);color:var(--w);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.gc-step-line{flex:1;height:2px;background:var(--line);border-radius:1px}
.gc-step-line.done{background:var(--gn)}
.gc-doc-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--pg);border:1px solid var(--line);border-radius:8px}
.gc-doc-icon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.gc-doc-info{flex:1;min-width:0}
.gc-doc-name{font-size:11.5px;font-weight:600;color:var(--bk);letter-spacing:-.005em}
.gc-doc-meta{font-size:9.5px;color:var(--ink3);font-family:var(--fm);margin-top:1px}

/* card 2 — payment dark */
.gc-pay-amount{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.gc-pay-label{font-size:10px;color:rgba(255,255,255,.4);font-family:var(--fm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.gc-pay-val{font-size:22px;font-weight:700;color:var(--w);letter-spacing:-.03em}
.gc-pay-method{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;position:relative}
.gc-pay-method.active{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
.gc-pay-icon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.gc-pay-text{flex:1;font-size:11.5px;font-weight:600;letter-spacing:-.005em}
.gc-pay-tag{font-size:9px;color:#22C55E;font-weight:600;font-family:var(--fm);text-transform:uppercase;letter-spacing:.05em}

/* card 3 — QR */
.gc-qr{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:auto}
.gc-qr-grid{width:96px;height:96px;background:var(--w);border:1px solid #FCD34D;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1.5px}
.qm{background:transparent}
.gc-qr-url{font-family:var(--fm);font-size:10px;color:var(--ink2);font-weight:500;letter-spacing:-.005em}

/* card 4 — consent */
.gc-consent-h{font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;font-family:var(--fm)}
.gc-consent-body{font-size:11.5px;color:var(--ink2);line-height:1.5}
.gc-consent-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--gn-l);border:1px solid #BBF7D0;border-radius:8px;margin-top:4px}
.gc-check{width:18px;height:18px;border-radius:50%;background:var(--gn);color:var(--w);display:grid;place-items:center;flex-shrink:0}
.gc-consent-label{font-size:11.5px;font-weight:600;color:#15803D}
.gc-consent-meta{font-size:10px;color:var(--ink4);font-family:var(--fm);text-align:right}

/* card 5 — multi-option */
.gc-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--w);border:1px solid var(--line);border-radius:8px;transition:border-color .15s}
.gc-opt.active{border-color:var(--bk);background:var(--w);box-shadow:0 0 0 3px rgba(10,10,11,.06)}
.gc-opt-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink4);flex-shrink:0;display:grid;place-items:center}
.gc-opt-radio.active{border-color:var(--bk)}
.gc-opt-radio.active div{width:6px;height:6px;border-radius:50%;background:var(--bk)}
.gc-opt-text{flex:1;min-width:0}
.gc-opt-t{font-size:11.5px;font-weight:600;color:var(--bk);letter-spacing:-.005em}
.gc-opt-s{font-size:10px;color:var(--ink3);margin-top:1px}

/* card 6 — multilingual */
.gc-lang-row{display:flex;gap:5px;flex-wrap:wrap}
.gc-lang-pill{padding:4px 10px;background:var(--w);border:1px solid var(--line);border-radius:20px;font-size:10.5px;font-weight:600;color:var(--ink2)}
.gc-lang-pill.active{background:var(--bk);color:var(--w);border-color:var(--bk)}
.gc-audio-player{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--pg);border:1px solid var(--line);border-radius:8px;margin-top:4px}
.gc-audio-btn{width:22px;height:22px;border-radius:50%;background:var(--bk);display:grid;place-items:center;flex-shrink:0;padding-left:1px}
.gc-audio-bar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.gc-audio-fill{width:35%;height:100%;background:var(--bk);border-radius:2px}
.gc-audio-time{font-size:10px;color:var(--ink3);font-family:var(--fm)}

/* card 7 — analytics dashboard, full width */
.gc-7{grid-column:span 4;background:linear-gradient(135deg,#1a1f2e 0%,#0f1419 100%);color:var(--w);border:1px solid rgba(255,255,255,.08)}
.gc-row{display:flex;flex-direction:column;height:100%;gap:0}
.gc-row-left{padding-right:0;margin-bottom:auto}
.gc-row-right{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.gc-dash{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px}
.gc-dash-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gc-dash-h-l{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em}
.gc-trend{font-family:var(--fm);font-size:10.5px;color:#22C55E;font-weight:600}
.gc-dash-stat{font-size:28px;font-weight:700;color:var(--w);letter-spacing:-.04em;line-height:1;margin-bottom:12px;font-feature-settings:"ss01"}
.gc-dash-stat sup{font-size:18px;color:rgba(255,255,255,.4);font-weight:400}
.gc-dash-bars{display:flex;align-items:flex-end;gap:3px;height:40px;margin-bottom:6px}
.gc-dash-bar{flex:1;background:rgba(255,255,255,.15);border-radius:2px 2px 0 0;min-height:6px}
.gc-dash-bar.active{background:#22C55E}
.gc-dash-bar.accent-blue{background:rgba(96,165,250,.6)}
.gc-dash-foot{display:flex;justify-content:space-between;font-family:var(--fm);font-size:9.5px;color:rgba(255,255,255,.3)}
.gc-mini-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gc-tile{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px}
.gc-tile-l{font-family:var(--fm);font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.gc-tile-v{font-size:14px;font-weight:700;color:var(--w);letter-spacing:-.025em;line-height:1}
.gc-tile-v sup{font-size:11px;color:rgba(255,255,255,.4);font-weight:400}

/* ─── ENTERPRISE — light ─── */
#enterprise{padding:96px 0;background:var(--w);position:relative;overflow:hidden;border-top:1px solid var(--line)}
#enterprise::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(228,228,231,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(228,228,231,.4) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 80%)}
#enterprise h2{color:var(--bk)}
#enterprise .s-sub{color:var(--ink3)}
#enterprise .s-corner{color:var(--ink4)}
#uc .s-corner{color:rgba(255,255,255,.3)}
.ent-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;z-index:1;max-width:780px;margin:0 auto}
.ec{padding:30px 28px;background:var(--w);transition:background .15s}
.ec:hover{background:var(--pg)}
.ec-icon{width:40px;height:40px;border-radius:10px;background:var(--line2);display:grid;place-items:center;margin-bottom:18px;border:1px solid var(--line)}
.ec-icon svg{color:var(--ink2)}
.ec-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-bottom:14px;font-family:var(--fm)}
.ec-bullets{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.ec-bullet{font-size:13px;font-weight:400;color:var(--ink2);line-height:1.5;letter-spacing:-.005em;padding-left:16px;position:relative}
.ec-bullet::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gn)}
.ec-bullet strong{color:var(--bk);font-weight:600}
/* unified centered section header */
.s-header,.ent-header{text-align:center;max-width:780px;margin:0 auto 52px;display:flex;flex-direction:column;align-items:center}
.s-header .s-eyebrow,.ent-header .s-eyebrow{justify-content:center;margin-bottom:24px}
.s-header .s-eyebrow::before,.ent-header .s-eyebrow::before{display:none}
.s-header h2,.ent-header h2{text-align:center;margin-left:auto;margin-right:auto;max-width:none}
.s-header .s-sub,.ent-header .s-sub{text-align:center;max-width:560px;margin:0 auto !important}
.ent-proof{margin:24px auto 0;max-width:780px;padding:18px 24px;background:var(--pg);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:24px;font-family:var(--fm);font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:.06em;flex-wrap:wrap;position:relative;z-index:1}
.ent-proof-sep{width:4px;height:4px;border-radius:50%;background:var(--line)}

/* ─── CTA — black ─── */
#cta{padding:128px 32px;background:var(--bk);text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid rgba(255,255,255,.08)}
#cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,#000 0%,transparent 70%);pointer-events:none}
#cta::after{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;filter:blur(60px)}
.cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.cta-eyebrow{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:24px;font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--bl);letter-spacing:.06em;text-transform:uppercase}
.cta-eyebrow::before,.cta-eyebrow::after{content:'';display:block;width:32px;height:1px;background:var(--bl)}
#cta h2{font-size:48px;color:var(--w);margin-bottom:20px;letter-spacing:-.045em;font-weight:700;line-height:1.04}
#cta h2 i{color:var(--w)}
.cta-sub{font-size:15px;font-weight:400;color:rgba(255,255,255,.6);margin-bottom:48px;line-height:1.6;max-width:480px;margin-left:auto;margin-right:auto;letter-spacing:-.005em}
.cta-email-link{display:inline-flex;align-items:center;gap:14px;padding:18px 28px;background:var(--w);border:1px solid var(--w);border-radius:12px;font-size:18px;font-weight:600;color:var(--bk);font-family:var(--fm);letter-spacing:-.01em;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.cta-email-link::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 50%);pointer-events:none}
.cta-email-link:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,255,255,.15)}
.cta-email-link svg{transition:transform .25s cubic-bezier(.16,1,.3,1);position:relative;z-index:1}
.cta-email-link:hover svg{transform:translate(3px,-3px)}

/* ─── FOOTER ─── */
footer{background:#050506;padding:36px 32px;border-top:1px solid rgba(255,255,255,.12)}
.f-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:40px}
.f-brand{display:flex;align-items:center;gap:14px}
.f-mark{width:36px;height:36px;background:var(--w);border-radius:9px;display:grid;place-items:center}
.f-mark svg path{stroke:var(--bk)}
.f-w-big{font-size:20px;font-weight:700;color:var(--w);letter-spacing:-.04em;line-height:1}
.f-tag{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;letter-spacing:-.005em}
.f-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.f-note{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:-.005em}
.f-links{display:flex;gap:20px;align-items:center}
.f-link{font-size:12.5px;color:rgba(255,255,255,.4);transition:color .15s;font-family:var(--fm);letter-spacing:-.005em}
.f-link:hover{color:var(--w)}
.f-linkedin{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.4);transition:color .15s;font-size:12.5px}
.f-linkedin:hover{color:var(--w)}

/* PNG logo (replaces inline SVG marks in nav and footer) */
.logo-img{display:block;height:30px;width:auto;flex-shrink:0}
.f-logo-img{display:block;height:36px;width:auto;flex-shrink:0;border-radius:9px}
/* Nav logo swaps light → dark when nav becomes white on scroll */
.logo-dark{display:none}
nav.s .logo-light{display:none}
nav.s .logo-dark{display:block}

/* mobile hero stats — hidden on desktop, shown on small screens */
.hero-mobile-stats{display:none}
@media (max-width:480px){
  .hero-mobile-stats{display:flex;align-items:center;gap:16px;padding:18px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;margin-top:24px;justify-content:space-between;backdrop-filter:blur(8px)}
  .hms-item{flex:1;text-align:center}
  .hms-v{font-size:22px;font-weight:700;color:var(--w);letter-spacing:-.04em;line-height:1}
  .hms-v sup{font-size:12px;color:rgba(255,255,255,.5);font-weight:400}
  .hms-l{font-size:10px;color:rgba(255,255,255,.5);font-family:var(--fm);margin-top:4px;letter-spacing:-.005em}
  .hms-divider{width:1px;height:32px;background:rgba(255,255,255,.1)}
}
/* ─── REVEAL ─── */
.r{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s}

/* ─── MODAL ─── */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(10,10,11,.6);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:24px}
.modal-ov.on{display:flex}
.modal-box{background:var(--w);border-radius:16px;padding:40px 36px;max-width:540px;width:100%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.2)}
.modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--w);cursor:pointer;font-size:14px;color:var(--ink3);display:grid;place-items:center;transition:all .15s}
.modal-close:hover{background:var(--line2);color:var(--bk)}
.modal-h{font-size:24px;font-weight:700;color:var(--bk);margin-bottom:6px;letter-spacing:-.025em}
.modal-meta{font-family:var(--fm);font-size:11px;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:24px}
.modal-box p{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:14px}
.modal-box h4{font-size:14px;font-weight:700;color:var(--bk);margin:18px 0 8px;letter-spacing:-.015em}
.modal-box a{color:var(--bl);font-weight:500}

/* responsive */
/* ─── TABLET (max 1024) ─── */
@media (max-width:1024px){
  section{padding:80px 0}
  #hero{padding:100px 32px 60px}
  .hero-inner{gap:48px}
  h1{font-size:48px}
  h2{font-size:38px}
  .phone-hero{width:280px}
  .chip-1{left:-12px}
  .chip-2{right:-12px}
  .ent-cols{grid-template-columns:repeat(2,1fr)}
  .activity-card{grid-template-columns:1fr;gap:24px}
}

/* ─── MOBILE LANDSCAPE / SMALL TABLET (max 768) ─── */
@media (max-width:768px){
  nav{padding:0 18px;height:52px}
  .nav-inner{grid-template-columns:auto 1fr auto;gap:10px}
  .nlinks{display:none}
  .n-cta{padding:6px 12px;font-size:11.5px}

  section{padding:64px 0}
  .s-inner{padding:0 18px}
  .s-corner{top:18px;right:18px;font-size:9.5px}

  #hero{padding:80px 18px 48px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  h1{font-size:36px;line-height:1.06;letter-spacing:-.04em}
  .h-sub{font-size:15px;max-width:none;margin-bottom:28px}
  .hero-visual{height:auto;order:2}
  .phone-hero{width:240px}
  .chip{padding:11px 15px}
  .chip-v{font-size:22px}
  .chip-1{top:-8px;left:0}
  .chip-2{bottom:30px;right:0}
  .h-actions{flex-wrap:wrap;gap:10px}
  .btn-pri,.btn-sec{padding:12px 18px;font-size:13.5px}

  /* How it works */
  #how{padding:72px 0}
  .flow-wrap{grid-template-columns:1fr 1fr}
  .flow-wrap::before{display:none}
  .flow-step{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 20px}
  .flow-step:nth-child(2n){border-right:none}
  .flow-step:nth-child(3),.flow-step:nth-child(4){border-bottom:none}
  .activity-card{padding:24px;gap:20px}
  .activity-feed{padding:4px}
  .activity-row{padding:9px 11px}
  .activity-row-text{font-size:12.5px}
  .how-bullets{grid-template-columns:1fr;gap:8px}

  /* Platform gallery */
  .uc-gallery{grid-template-columns:1fr;gap:14px}
  .gc-1,.gc-2,.gc-3,.gc-4,.gc-5,.gc-6,.gc-7{grid-column:span 1 !important}
  .gallery-divider{grid-column:span 1 !important;margin:14px 0 0}
  .gc-content{padding:24px;min-height:0}
  .gc-title{font-size:19px}
  .gc-body{font-size:13px}

  /* Enterprise */
  .s-header,.ent-header{margin-bottom:40px}
  .s-header h2,.ent-header h2{font-size:32px}
  .s-header .s-sub,.ent-header .s-sub{font-size:15px}
  .ent-cols{grid-template-columns:1fr}
  .ec{padding:28px 24px}
  .ent-proof{flex-direction:column;gap:10px;align-items:center;font-size:10.5px;padding:16px}
  .ent-proof-sep{display:none}

  /* CTA */
  #cta{padding:104px 20px}
  #cta h2{font-size:40px}
  .cta-sub{font-size:15px}
  .cta-email-link{padding:18px 24px;font-size:17px;gap:12px}

  /* Footer */
  footer{padding:32px 20px}
  .f-inner{flex-direction:column;align-items:flex-start;gap:24px}
  .f-meta{align-items:flex-start;width:100%}
  .f-links{flex-wrap:wrap;gap:14px}

  .phone-hero-screen .ph-info-grid{grid-template-columns:1fr 1fr}
}

/* ─── MOBILE PHONE (max 480) ─── */
@media (max-width:480px){
  .hero-visual{display:none}
  h1{font-size:30px;line-height:1.08;letter-spacing:-.04em}
  .h-sub{font-size:14.5px}

  h2{font-size:26px;line-height:1.1}
  .s-sub{font-size:13.5px;margin-bottom:40px}
  .s-eyebrow{font-size:9.5px}

  .flow-wrap{grid-template-columns:1fr}
  .flow-step{border-right:none !important;border-bottom:1px solid var(--line) !important;padding:22px}
  .flow-step:last-child{border-bottom:none !important}

  #cta h2{font-size:34px}
  .cta-email-link{padding:16px 22px;font-size:16px}

  .modal-box{padding:32px 24px}
  .modal-h{font-size:20px}

  .f-w-big{font-size:18px}
}