/* Loop — landing page styles. Editorial-warm system. */
:root{
  --paper:#F4F1EA; --paper2:#FBFAF6; --paper3:#EDE9DE;
  --ink:#1B1B1F; --ink2:#3A3A40;
  --sub:rgba(27,27,31,0.60); --muted:rgba(27,27,31,0.40);
  --accent:#3F6EE0; --accent-deep:#3257C4; --accent-soft:#E8EEFB;
  --emerald:#3E8E6F; --amber:#C58A3D;
  --card:#FFFFFF; --edge:rgba(20,20,20,0.07); --hair:rgba(20,20,20,0.09);
  --ink-dark:#0B0C0F; --ink-dark2:#15171C;
  --serif:"New York","Iowan Old Style","Charter",Georgia,serif;
  --sans:-apple-system,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,0.6),0 18px 44px rgba(20,20,20,0.07);
  --shadow-lg:0 30px 80px rgba(20,20,20,0.14);
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ── type ── */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em;margin:0;}
.serif{font-family:var(--serif);font-weight:400;}
p{margin:0;line-height:1.6;}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:rgba(244,241,234,0.72);border-bottom:0.5px solid transparent;transition:border-color .3s,background .3s;}
.nav.scrolled{border-bottom-color:var(--hair);background:rgba(244,241,234,0.86);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:-0.02em;display:flex;align-items:center;gap:9px;}
.brand .gmark{width:26px;height:26px;}
.brand .dot{color:var(--accent);}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:14.5px;color:var(--sub);font-weight:500;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:590;
  font-size:15px;letter-spacing:-0.01em;border:none;cursor:pointer;border-radius:13px;
  padding:12px 20px;background:var(--accent);color:#fff;transition:transform .15s,box-shadow .2s,background .2s;
  box-shadow:0 6px 18px rgba(63,110,224,0.32);}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(63,110,224,0.4);background:var(--accent-deep);}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;padding:12px 14px;}
.btn.ghost:hover{background:rgba(20,20,20,0.05);transform:none;}
.btn.sm{padding:10px 16px;font-size:14px;}

/* store badges */
.badges{display:flex;gap:12px;flex-wrap:wrap;}
.store{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;
  border-radius:14px;padding:10px 18px;transition:transform .15s,opacity .2s;}
.store:hover{transform:translateY(-2px);opacity:0.9;}
.store svg{flex-shrink:0;}
.store .s1{font-size:10px;letter-spacing:0.04em;opacity:0.8;display:block;line-height:1.1;}
.store .s2{font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.15;}

/* ── hero ── */
.hero{position:relative;padding:72px 0 40px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-glow{position:absolute;width:760px;height:760px;left:-180px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,110,224,0.13) 0%,transparent 62%);}
.ring-motif{position:absolute;right:-260px;top:60px;width:680px;height:680px;opacity:0.5;}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 0.95fr;gap:32px;align-items:center;}
.hero h1{font-size:62px;line-height:1.02;margin:20px 0 22px;max-width:11ch;}
.hero .lede{font-size:20px;color:var(--sub);max-width:30ch;margin-bottom:30px;}
.hero .undertag{margin-top:22px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.dotline{width:6px;height:6px;border-radius:6px;background:var(--emerald);box-shadow:0 0 8px rgba(62,142,111,0.6);}

/* phone */
.phone{display:block;width:100%;height:auto;}
.phone-shell{position:relative;filter:drop-shadow(0 40px 70px rgba(20,20,20,0.20));}
.hero-phones{position:relative;height:600px;}
.hero-phones .pf{position:absolute;}
.hero-phones .pf.main{width:300px;right:30px;top:-6px;z-index:3;}
.hero-phones .pf.back{width:262px;right:236px;top:74px;z-index:2;opacity:0.97;}

/* ── section scaffolding ── */
section{position:relative;}
.sec{padding:96px 0;}
.sec-head{max-width:680px;margin-bottom:14px;}
.sec-head.center{margin:0 auto 52px;text-align:center;}
.sec-head h2{font-size:42px;line-height:1.08;margin:14px 0 16px;}
.sec-head p{font-size:18px;color:var(--sub);}

/* problem cards */
.loopcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;}
.lc{background:var(--card);border:0.5px solid var(--edge);border-radius:22px;padding:26px;box-shadow:var(--shadow);}
.lc .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.lc h3{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-0.01em;margin-bottom:6px;}
.lc p{font-size:14.5px;color:var(--sub);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:20px;}
.step .n{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:0.1em;margin-bottom:14px;}
.step h3{font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-0.01em;margin-bottom:8px;}
.step p{font-size:15.5px;color:var(--sub);}
.step .bar{height:2px;background:var(--hair);margin-bottom:22px;position:relative;overflow:hidden;border-radius:2px;}
.step .bar i{position:absolute;inset:0;width:0;background:var(--accent);transition:width 1s cubic-bezier(.2,.8,.2,1);}
.step.in .bar i{width:100%;}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;}
.feat.rev .feat-copy{order:2;}
.feat.rev .feat-art{order:1;}
.feat-copy h2{font-size:38px;line-height:1.1;margin:14px 0 18px;}
.feat-copy p{font-size:17.5px;color:var(--sub);max-width:34ch;margin-bottom:22px;}
.feat-list{display:flex;flex-direction:column;gap:12px;}
.feat-list .fl{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink2);}
.feat-list .fl .ck{flex-shrink:0;margin-top:1px;}
.feat-art{display:flex;justify-content:center;}
.feat-art .pf{width:300px;}

/* trust band (dark) */
.trust{background:linear-gradient(170deg,#16181E 0%,#0A0B0E 100%);color:#F2EFE8;border-radius:36px;
  margin:40px 0;overflow:hidden;position:relative;}
.trust .wrap{padding:80px 28px;}
.trust-grid{display:grid;grid-template-columns:1fr 0.9fr;gap:56px;align-items:center;}
.trust .eyebrow{color:#7FA0FF;}
.trust h2{font-size:42px;line-height:1.08;margin:14px 0 18px;color:#fff;}
.trust p.lede{font-size:18px;color:rgba(242,239,232,0.62);margin-bottom:30px;max-width:38ch;}
.trust-pts{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.tp h3{font-family:var(--sans);font-weight:600;font-size:16px;margin-bottom:6px;color:#fff;}
.tp p{font-size:14px;color:rgba(242,239,232,0.55);line-height:1.5;}
.tp .ic{width:34px;height:34px;border-radius:10px;background:rgba(127,160,255,0.14);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.trust-glow{position:absolute;width:500px;height:500px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(82,124,235,0.28) 0%,transparent 60%);}

/* quote */
.quote{text-align:center;max-width:820px;margin:0 auto;}
.quote blockquote{font-family:var(--serif);font-size:34px;line-height:1.3;letter-spacing:-0.01em;margin:0 0 26px;}
.quote .who{display:flex;gap:12px;align-items:center;justify-content:center;}
.quote .av{width:44px;height:44px;border-radius:50%;background:#D9C7B0;display:flex;align-items:center;justify-content:center;font-weight:600;color:#3A3A3A;}
.quote .who div{text-align:left;}
.quote .who .nm{font-weight:600;font-size:15px;}
.quote .who .rl{font-size:13.5px;color:var(--sub);}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;margin-top:8px;}
.stat .big{font-family:var(--serif);font-size:58px;letter-spacing:-0.03em;line-height:1;}
.stat .lbl{font-size:14px;color:var(--sub);margin-top:10px;}

/* final cta */
.final{text-align:center;padding:110px 0 90px;position:relative;overflow:hidden;}
.final h2{font-size:54px;line-height:1.04;margin:0 auto 20px;max-width:16ch;}
.final p{font-size:19px;color:var(--sub);margin:0 auto 34px;max-width:40ch;}
.final .badges{justify-content:center;}
.final .ring-motif{right:50%;transform:translateX(50%);top:-120px;opacity:0.35;}

/* footer */
footer{border-top:0.5px solid var(--hair);padding:46px 0 60px;}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
.foot .col h4{font-family:var(--sans);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600;}
.foot .col a{display:block;font-size:14.5px;color:var(--sub);margin-bottom:10px;transition:color .2s;}
.foot .col a:hover{color:var(--ink);}
.foot-brand{max-width:260px;}
.foot-brand p{font-size:14px;color:var(--sub);margin-top:12px;line-height:1.55;}
.foot-legal{margin-top:38px;padding-top:22px;border-top:0.5px solid var(--hair);
  display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:10px;}

/* reveal anim — only hide when JS is present (never strand content) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.js .rv.in{opacity:1;transform:none;}

/* responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:10px;}
  .hero h1{font-size:48px;}
  .hero-phones{height:560px;margin-top:10px;}
  .hero-phones .pf.main{right:50%;transform:translateX(50%);}
  .hero-phones .pf.back{display:none;}
  .loopcards,.steps,.trust-pts,.stats{grid-template-columns:1fr;}
  .feat{grid-template-columns:1fr;gap:30px;padding:40px 0;}
  .feat.rev .feat-copy{order:1;} .feat.rev .feat-art{order:2;}
  .trust-grid{grid-template-columns:1fr;gap:30px;}
  .nav-links{display:none;}
  .sec-head h2,.feat-copy h2,.trust h2{font-size:32px;}
  .final h2{font-size:38px;}
}
