:root{
  --orange:#ED7D2F;
  --orange-600:#D86A1F;
  --orange-100:#FCE6D2;
  --orange-50:#FDF1E5;
  --navy:#14365C;
  --navy-700:#0F2A48;
  --navy-200:#C5D2E1;
  --cream:#FAF6F0;
  --cream-2:#F4EEE4;
  --gray:#6B7280;
  --gray-soft:#9AA1AB;
  --line:#E7E0D3;
  --white:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(20,54,92,.06), 0 2px 8px rgba(20,54,92,.04);
  --shadow-md:0 4px 14px rgba(20,54,92,.08), 0 12px 36px rgba(20,54,92,.06);
  --shadow-lg:0 18px 48px rgba(20,54,92,.14), 0 6px 16px rgba(20,54,92,.08);
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--navy);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans', sans-serif; color:var(--navy); margin:0; line-height:1.15; letter-spacing:-0.02em; font-weight:700}
p{margin:0; text-wrap:pretty}
.num{font-family:'Manrope', sans-serif; font-feature-settings:"tnum" 1; letter-spacing:-0.04em}

.container{max-width:1200px; margin:0 auto; padding:0 28px}
@media (max-width:640px){ .container{padding:0 20px} }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,240,.85);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(20,54,92,.04), 0 6px 18px rgba(20,54,92,.05)}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:38px; height:38px; flex:0 0 38px}
.brand-name{font-weight:800; letter-spacing:-0.01em; font-size:17px}
.brand-sub{display:block; font-size:11px; color:var(--gray); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-top:1px}
.nav-links{display:flex; align-items:center; gap:8px}
.nav-link{padding:10px 14px; font-weight:600; font-size:15px; color:var(--navy); border-radius:10px; transition:background .2s}
.nav-link:hover{background:rgba(20,54,92,.06)}
.nav-link.pill{border:1.5px solid var(--navy); padding:9px 16px; border-radius:999px; margin-left:6px}
.nav-link.pill:hover{background:var(--navy); color:var(--cream)}
.menu-btn{display:none; width:44px; height:44px; border-radius:10px; align-items:center; justify-content:center; color:var(--navy)}
.menu-btn:hover{background:rgba(20,54,92,.06)}
@media (max-width:880px){
  .nav-links{display:none}
  .menu-btn{display:flex}
}
.mobile-menu{
  position:fixed; inset:72px 0 0 0; z-index:55;
  background:var(--cream);
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  border-top:1px solid var(--line);
}
.mobile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto}
.mobile-menu-inner{padding:22px; display:flex; flex-direction:column; gap:6px}
.mobile-menu a{padding:16px 18px; border-radius:12px; font-size:18px; font-weight:600; border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a.pill{margin-top:10px; border:1.5px solid var(--navy); border-radius:14px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:14px; font-weight:600; font-size:16px; min-height:48px; transition:transform .15s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(237,125,47,.32)}
.btn-primary:hover{background:var(--orange-600); box-shadow:0 10px 24px rgba(237,125,47,.38)}
.btn-secondary{background:transparent; color:var(--navy); border:1.5px solid var(--navy)}
.btn-secondary:hover{background:var(--navy); color:var(--cream)}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy); background:#fff}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; padding:72px 0 96px}
.hero::before{
  content:""; position:absolute; right:-180px; top:-220px; width:680px; height:680px;
  background:radial-gradient(closest-side, rgba(237,125,47,.32), rgba(237,125,47,0) 70%);
  filter:blur(8px); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; left:-200px; bottom:-260px; width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(20,54,92,.08), rgba(20,54,92,0) 70%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; position:relative}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:48px} .hero{padding:48px 0 64px} }
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:rgba(237,125,47,.12); color:var(--orange-600); font-weight:600; font-size:13px; letter-spacing:.02em}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--orange)}
.hero h1{font-size:clamp(40px, 6vw, 76px); font-weight:800; margin-top:22px; letter-spacing:-0.035em}
.hero .subhead{font-size:clamp(20px, 2.4vw, 28px); color:var(--orange-600); font-weight:600; margin-top:14px; letter-spacing:-0.01em}
.hero .lead{margin-top:22px; font-size:18px; color:#3a4a60; max-width:560px}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero .footnote{margin-top:24px; font-size:13px; color:var(--gray); display:flex; align-items:center; gap:10px}
.hero .footnote .seal{width:22px; height:22px}
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:560px}
.hero-visual .swoosh-bg{position:absolute; inset:auto; width:480px; height:480px; opacity:.18}

/* ---------- PHONE MOCKUP ---------- */
.phone{
  width:300px; border-radius:42px; background:#0F1115;
  padding:12px; box-shadow:var(--shadow-lg);
  position:relative;
}
.phone-screen{
  background:#fff; border-radius:32px; overflow:hidden;
  aspect-ratio: 9/19;
  position:relative;
  display:flex; flex-direction:column;
}
.phone-notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:96px; height:24px; background:#0F1115; border-radius:14px; z-index:5}
.phone-screen .status{display:flex; justify-content:space-between; padding:14px 24px 0; font-size:12px; font-weight:600; color:var(--navy)}
.phone-screen .status .right{display:flex; gap:5px; align-items:center}
.phone-screen .status .bar{width:14px; height:8px; border:1.2px solid var(--navy); border-radius:2px; position:relative}
.phone-screen .status .bar::after{content:""; position:absolute; inset:1px; right:auto; width:9px; background:var(--navy); border-radius:1px}
.phone-screen .app-header{padding:36px 18px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #F0EAE0}
.phone-screen .app-header .back{width:30px; height:30px; border-radius:50%; background:#F4EFE6; display:flex; align-items:center; justify-content:center; color:var(--navy)}
.phone-screen .app-header .title{font-weight:700; font-size:15px; flex:1; text-align:center; padding-right:30px}
.phone-screen .toggles{display:flex; gap:8px; padding:14px 14px 8px}
.phone-screen .pill-tag{flex:1; text-align:center; padding:10px 8px; border-radius:10px; font-size:11px; font-weight:600}
.pill-safe{background:#E8F5EC; color:#1F8B43; border:1px solid #CDE8D5}
.pill-risk{background:#FBECE4; color:#C04B14; border:1px solid #F5D2BE}
.phone-screen .list{flex:1; padding:6px 14px 14px; display:flex; flex-direction:column; gap:8px; overflow:hidden}
.row{display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #F0EAE0; border-radius:12px; background:#fff; min-width:0}
.row .ico{width:28px; height:28px; border-radius:8px; background:var(--orange-50); color:var(--orange); display:flex; align-items:center; justify-content:center; flex:0 0 28px}
.row .meta{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.row .meta .t{display:block; font-size:11px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.row .meta .s{display:block; font-size:9px; color:var(--gray); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.row .call{width:22px; height:22px; color:var(--orange); flex:0 0 22px}
.phone-tabbar{display:flex; padding:8px 6px 12px; border-top:1px solid #F0EAE0; gap:4px}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; font-weight:600; color:var(--gray); padding:4px}
.tab.active{color:var(--orange)}
.tab svg{width:18px; height:18px}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
@media (max-width:760px){ section{padding:72px 0} }
.section-eyebrow{display:flex; justify-content:center; margin-bottom:18px}
.section-eyebrow span{font-size:13px; font-weight:600; color:var(--orange-600); letter-spacing:.12em; text-transform:uppercase}
.section-title{font-size:clamp(32px, 4vw, 46px); text-align:center; max-width:780px; margin:0 auto; letter-spacing:-0.025em}
.section-sub{text-align:center; color:var(--gray); font-size:18px; margin:18px auto 0; max-width:680px}

/* ---------- ABOUT ---------- */
.about{background:#fff; padding:104px 0}
.about-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
@media (max-width:880px){ .about-grid{grid-template-columns:1fr; gap:40px} }
.about-grid h2{font-size:clamp(30px, 3.6vw, 42px); letter-spacing:-0.025em}
.about-grid .body p{color:#3d4a5e; font-size:17px; margin-top:18px}
.about-grid .body .badge{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px; background:var(--cream); color:var(--navy); font-size:13px; font-weight:600; margin-top:22px; border:1px solid var(--line)}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fact{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; min-height:170px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s, box-shadow .25s, border-color .25s}
.fact:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--orange-100)}
.fact .n{font-size:54px; font-weight:800; color:var(--navy); letter-spacing:-0.04em; line-height:1}
.fact .l{font-size:14px; color:var(--gray); font-weight:500; line-height:1.4}
.fact.accent{background:var(--navy); color:var(--cream); border-color:var(--navy)}
.fact.accent .n{color:#fff}
.fact.accent .l{color:rgba(250,246,240,.78)}

/* ---------- FEATURES ---------- */
.features{background:var(--cream)}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px}
@media (max-width:780px){ .feat-grid{grid-template-columns:1fr} }
.feat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 32px; display:grid; grid-template-columns:1fr 130px; gap:28px;
  align-items:start;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.feat:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--orange-100)}
.feat .ico-wrap{width:54px; height:54px; border-radius:14px; background:var(--orange-50); color:var(--orange); display:flex; align-items:center; justify-content:center}
.feat h3{font-size:21px; margin-top:18px; letter-spacing:-0.015em}
.feat p{margin-top:10px; color:#475467; font-size:15.5px}
.feat .mini-phone{
  width:130px; aspect-ratio: 9/19;
  background:#0F1115; border-radius:18px; padding:5px;
  align-self:end;
  box-shadow:0 8px 22px rgba(20,54,92,.14);
}
.feat .mini-phone .mp-screen{background:#fff; border-radius:14px; height:100%; overflow:hidden; padding:8px 6px; display:flex; flex-direction:column; gap:4px}
.feat .mini-phone .mp-bar{height:6px; border-radius:3px; background:#F0EAE0}
.feat .mini-phone .mp-bar.s{width:60%}
.feat .mini-phone .mp-card{border:1px solid #F0EAE0; border-radius:6px; padding:5px; display:flex; gap:4px; align-items:center}
.feat .mini-phone .mp-card .d{width:10px; height:10px; border-radius:3px; background:var(--orange-50)}
.feat .mini-phone .mp-card .ll{flex:1; display:flex; flex-direction:column; gap:2px}
.feat .mini-phone .mp-card .ll i{display:block; height:3px; border-radius:2px; background:#E5DECE}
.feat .mini-phone .mp-card .ll i:nth-child(1){width:80%}
.feat .mini-phone .mp-card .ll i:nth-child(2){width:55%; background:#F0EAE0}
@media (max-width:520px){
  .feat{grid-template-columns:1fr}
  .feat .mini-phone{justify-self:start; margin-top:6px}
}

/* ---------- DOWNLOAD ---------- */
.download{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #ED7D2F 0%, #E16A1A 60%, #D85F12 100%);
  color:#fff;
}
.download::before{
  content:""; position:absolute; top:-50%; right:-10%; width:600px; height:600px;
  background:radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
}
.download .ghost-phone{
  position:absolute; right:-60px; bottom:-80px; width:340px; opacity:.13; pointer-events:none;
  transform:rotate(8deg);
}
.download-inner{position:relative; text-align:center; max-width:780px; margin:0 auto}
.download h2{color:#fff; font-size:clamp(34px, 4.6vw, 52px); letter-spacing:-0.03em}
.download .sub{margin-top:14px; font-size:18px; color:rgba(255,255,255,.86); font-weight:500}
.stores{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.store-badge{
  display:flex; align-items:center; gap:14px;
  background:#0F1115; color:#fff; border-radius:14px;
  padding:12px 22px; min-width:200px; min-height:64px;
  transition:transform .15s, background .2s;
  text-align:left;
}
.store-badge:hover{transform:translateY(-2px); background:#000}
.store-badge .glyph{width:28px; height:28px; flex:0 0 28px}
.store-badge .stack{display:flex; flex-direction:column; line-height:1.15}
.store-badge .lbl{display:block; font-size:11px; color:rgba(255,255,255,.7); font-weight:500; letter-spacing:.04em}
.store-badge .name{display:block; font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.1}
.qr-block{margin-top:36px; display:flex; align-items:center; gap:18px; justify-content:center; flex-wrap:wrap}
.qr{width:128px; height:128px; background:#fff; border-radius:16px; padding:10px; box-shadow:0 14px 28px rgba(0,0,0,.18)}
.qr svg{width:100%; height:100%}
.qr-cap{font-size:14px; color:rgba(255,255,255,.92); max-width:200px; text-align:left}

/* ---------- METHODOLOGY ---------- */
.methods{background:var(--cream)}
.meth-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:56px}
@media (max-width:980px){ .meth-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .meth-grid{grid-template-columns:1fr} }
.meth{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.meth:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--orange-100)}
.meth .ico{width:40px; height:40px; border-radius:10px; background:var(--orange-50); color:var(--orange); display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.meth h4{font-size:17px; font-weight:700; line-height:1.25; letter-spacing:-0.012em}
.meth p{font-size:13.5px; color:#516076; line-height:1.5}
.meth .meta{font-size:12px; color:var(--gray-soft); margin-top:auto; padding-top:10px}
.meth .dl{margin-top:10px; padding:10px 12px; min-height:40px; font-size:13.5px; border-radius:10px; width:100%}
.meth-note{margin-top:36px; text-align:center; color:var(--gray); font-size:13.5px}

/* ---------- PARTNERS ---------- */
.partners{background:#fff}
.partners h3{text-align:center; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); font-weight:600}
.partner-row{display:flex; flex-wrap:wrap; gap:18px 36px; justify-content:center; align-items:center; margin-top:32px}
.partner{display:flex; align-items:center; gap:10px; padding:10px 14px; color:#7C8794; font-weight:600; font-size:15px; filter:grayscale(1); opacity:.85}
.partner svg{width:24px; height:24px}

/* ---------- FOOTER ---------- */
.footer{background:var(--navy); color:var(--cream); padding:80px 0 28px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:48px}
@media (max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr; gap:36px} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr; gap:32px} }
.footer h5{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:#9FB3CC; font-weight:700; margin-bottom:14px}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer a{color:#D6DEEA; transition:color .2s}
.footer a:hover{color:#fff}
.footer .brand-lockup{display:flex; align-items:center; gap:12px}
.footer .brand-lockup .name{color:#fff; font-weight:800; font-size:18px}
.footer .tagline{color:#9FB3CC; font-size:14px; margin-top:14px; max-width:280px}
.socials{display:flex; gap:10px; margin-top:6px}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition:background .2s}
.socials a:hover{background:rgba(255,255,255,.14)}
.socials svg{width:18px; height:18px; color:#D6DEEA}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:16px; color:#7E96B3; font-size:13px; flex-wrap:wrap}

/* ---------- ANIMATIONS ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .reveal{opacity:1; transform:none}
}