/* ==========================================================================
   HouseHack — homepage-only styles (hero, phone mockups, sections)
   ========================================================================== */

/* Anchor targets clear the 76px sticky nav */
#how,#features,#pricing,#faq,#download{scroll-margin-top:96px}

/* ---------- HERO ---------- */
.hero{
  position:relative;padding:84px 28px 0;text-align:center;overflow:hidden;background:var(--bg);
}
.hero-glow{
  position:absolute;top:-240px;left:50%;transform:translateX(-50%);
  width:1100px;height:680px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(254,194,72,.34) 0%,rgba(11,143,122,.08) 48%,transparent 70%);
}
.hero > *:not(.hero-glow){position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--brand-tint);border:1px solid var(--brand-line);color:var(--brand-dark);
  font-family:var(--font);font-size:.94rem;font-weight:700;letter-spacing:-.01em;
  padding:9px 20px;border-radius:100px;margin-bottom:30px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px var(--brand-dark);flex-shrink:0}
.hero h1{
  font-size:clamp(2.05rem,8.6vw,5rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.03;margin-bottom:26px;
}
.hero h1 .accent{
  color:var(--brand-dark);
  background:linear-gradient(transparent 62%,rgba(254,194,72,.55) 62%,rgba(254,194,72,.55) 92%,transparent 92%);
  padding:0 .06em;
}
.hero-sub{
  font-size:clamp(1.12rem,2vw,1.38rem);color:var(--text-2);line-height:1.62;
  max-width:36ch;margin:0 auto 38px;
}
.hero-actions{margin-bottom:20px}
.hero-note{font-size:.98rem;color:var(--text-3);font-weight:600}

/* Phone fan */
.phone-fan{
  display:flex;justify-content:center;align-items:flex-end;
  margin-top:62px;padding-bottom:0;
}
.fan-item{flex-shrink:0;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.fan-1{transform:rotate(-6deg) translateY(30px);margin-right:-34px;z-index:1}
.fan-2{z-index:3;margin-bottom:-4px}
.fan-3{transform:rotate(6deg) translateY(30px);margin-left:-34px;z-index:1}
.fan-1 .phone,.fan-3 .phone{--pw:206px}
.fan-2 .phone{--pw:250px}
.fan-item:hover{transform:translateY(-8px) rotate(0)}
.hero-caption{position:relative;z-index:4;font-size:.88rem;color:var(--text-3);padding:64px 0 0;margin:0 auto;max-width:56ch}
.hero-shelf{height:44px}

/* ---------- PHONE FRAME ---------- */
.phone{
  --pw:240px;
  width:var(--pw);position:relative;flex:none;
  background:#1C2624;border-radius:calc(var(--pw)*.15);padding:calc(var(--pw)*.035);
  box-shadow:var(--shadow-lg),inset 0 0 0 1.5px #3A4744;
}
.phone::before{
  content:'';position:absolute;z-index:3;top:calc(var(--pw)*.062);left:50%;transform:translateX(-50%);
  width:calc(var(--pw)*.26);height:calc(var(--pw)*.07);border-radius:99px;background:#0B100F;
}
.phone-screen{
  /* 1em inside a screen = 1% of the screen's width, so mock layouts are written in em */
  --u:calc(var(--pw)*.0093);
  font-size:var(--u);
  aspect-ratio:390/844;border-radius:calc(var(--pw)*.12);overflow:hidden;
  background:var(--bg);position:relative;color:var(--text);
  font-family:var(--body-font);line-height:1.25;text-align:left;
}
.phone-screen > img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:var(--bg)}
.phone-screen *{-webkit-user-select:none;user-select:none}

/* ---------- MOCK SCREEN PARTS (placeholders built from the app's design) ---------- */
.s-status{height:calc(var(--u)*10);padding:calc(var(--u)*4.2) calc(var(--u)*8) 0 calc(var(--u)*8.4);display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--font);font-weight:700;font-size:3.7em}
.s-status .s-bat{display:flex;gap:calc(var(--u)*1.1);align-items:center}
.s-status .s-bat i{display:block;width:calc(var(--u)*5.6);height:calc(var(--u)*2.8);border-radius:calc(var(--u)*.9);border:calc(var(--u)*.35) solid var(--text);position:relative;opacity:.9}
.s-status .s-bat i::after{content:'';position:absolute;inset:calc(var(--u)*.3);border-radius:calc(var(--u)*.4);background:var(--text)}
.s-body{height:calc(100% - calc(var(--u)*10) - calc(var(--u)*14.5));overflow:hidden;padding:0 calc(var(--u)*5.4);position:relative}
.s-body::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*8);background:linear-gradient(transparent,var(--bg));pointer-events:none}
.s-tabbar{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*14.5);background:var(--card);border-top:calc(var(--u)*.3) solid var(--border);
  display:flex;justify-content:space-around;padding:calc(var(--u)*2.4) calc(var(--u)*2) 0;
}
.s-tab{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.7);font-size:2.8em;font-weight:600;color:var(--text-3);width:22%}
.s-tab svg{width:calc(var(--u)*2.1);height:calc(var(--u)*2.1)}
.s-tab.on{color:var(--brand-dark)}

.s-greet{font-size:3.6em;color:var(--text-2);margin-top:calc(var(--u)*1)}
.s-h1{font-family:var(--font);font-weight:800;font-size:6.6em;letter-spacing:calc(var(--u)*-.03);line-height:1.08;margin:calc(var(--u)*.2) 0 calc(var(--u)*.5)}
.s-sub{font-size:3.5em;color:var(--text-2);margin:calc(var(--u)*-.2) 0 calc(var(--u)*1.2)}
.s-brand{display:flex;align-items:center;gap:calc(var(--u)*2.2);margin:calc(var(--u)*1.2) 0 calc(var(--u)*2)}
.s-brand img{width:calc(var(--u)*8.4);height:calc(var(--u)*8.4)}
.s-brand span{font-family:var(--font);font-weight:800;font-size:5em;letter-spacing:calc(var(--u)*-.03)}

.s-hero{
  border-radius:calc(var(--u)*7.5);padding:calc(var(--u)*5.2);color:#fff;
  background:linear-gradient(150deg,var(--hero-from),var(--hero-to));
  box-shadow:0 calc(var(--u)*1.6) calc(var(--u)*3.6) rgba(6,99,86,.3);margin-bottom:calc(var(--u)*4);
}
.s-pill{display:inline-block;background:rgba(255,255,255,.2);color:#fff;border-radius:calc(var(--u)*99);padding:calc(var(--u)*1) calc(var(--u)*2.6);font-size:3em;font-weight:700;margin-bottom:calc(var(--u)*3.4)}
.s-hero-main{display:flex;gap:calc(var(--u)*3.4);align-items:center;margin-bottom:calc(var(--u)*4)}
.s-hero-title{font-family:var(--font);font-weight:700;font-size:5.4em;line-height:1.14;letter-spacing:calc(var(--u)*-.01)}
.s-hero-actions{display:flex;align-items:center;justify-content:space-between}
.s-btn-w{background:#fff;color:var(--hero-to);border-radius:calc(var(--u)*99);padding:calc(var(--u)*2) calc(var(--u)*4.4);font-family:var(--font);font-weight:700;font-size:3.7em}
.s-check{width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;border:calc(var(--u)*.5) solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.s-check svg{width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);opacity:.9}

.s-label{font-family:var(--font);font-weight:800;font-size:4.5em;letter-spacing:calc(var(--u)*-.01);margin:0 0 calc(var(--u)*2.2);display:flex;justify-content:space-between;align-items:baseline}
.s-label small{font-size:.66em;color:var(--brand-dark);font-weight:700}
.s-label.amber{color:var(--overdue)}
.s-list{display:flex;flex-direction:column;gap:calc(var(--u)*2.6);margin-bottom:calc(var(--u)*5)}
.s-row{
  display:flex;align-items:center;gap:calc(var(--u)*3.4);background:var(--card);border:calc(var(--u)*.3) solid var(--border);
  border-radius:calc(var(--u)*5.2);padding:calc(var(--u)*3) calc(var(--u)*3.4) calc(var(--u)*3) calc(var(--u)*3);
}
.s-tile{flex:none;width:calc(var(--u)*11.4);height:calc(var(--u)*11.4);border-radius:calc(var(--u)*3.4);display:flex;align-items:center;justify-content:center}
.s-tile svg{width:calc(var(--u)*6.6);height:calc(var(--u)*6.6)}
.s-tile.blue{background:#E3EEF8;color:#2F6FA8}
.s-tile.amber{background:#FBEBDA;color:#B5641B}
.s-tile.indigo{background:#EAEAFA;color:#5A5FC4}
.s-tile.teal{background:#E1F3EF;color:#0B8F7A}
.s-tile.green{background:#E7F2DD;color:#4B8A2C}
.s-tile.sm{width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:calc(var(--u)*2.8)}
.s-tile.sm svg{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4)}
.s-tile.xl{width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:calc(var(--u)*4.6)}
.s-tile.xl svg{width:calc(var(--u)*9);height:calc(var(--u)*9)}
.s-tile.on-hero{background:rgba(255,255,255,.94)}
.s-info{flex:1;min-width:0}
.s-title{font-family:var(--font);font-weight:700;font-size:3.9em;line-height:1.18;letter-spacing:calc(var(--u)*-.01)}
.s-meta{font-size:3.1em;color:var(--text-2);margin-top:calc(var(--u)*.5)}
.s-tag{flex:none;border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*.9) calc(var(--u)*2.1);font-size:2.8em;font-weight:700;background:var(--fill);color:var(--text-2);white-space:nowrap}
.s-tag.late{background:var(--overdue-soft);color:var(--overdue)}
.s-tag.ok{background:var(--brand-tint);color:var(--brand-dark)}
.s-chips{display:flex;gap:calc(var(--u)*2);margin:0 0 calc(var(--u)*3.6);overflow:hidden;white-space:nowrap}
.s-chip{flex:none;border-radius:calc(var(--u)*99);padding:calc(var(--u)*1.5) calc(var(--u)*3.6);font-size:3.3em;font-weight:600;background:var(--fill);color:var(--text-2)}
.s-chip.on{background:var(--brand-tint);color:var(--brand-dark);box-shadow:inset 0 0 0 calc(var(--u)*.4) var(--brand)}
.s-season{
  border-radius:calc(var(--u)*6);padding:calc(var(--u)*4.4);margin-bottom:calc(var(--u)*4.4);background:var(--yellow-soft);
  border:calc(var(--u)*.3) solid #F4DDA5;
}
.s-season .s-label{margin-bottom:calc(var(--u)*2.4)}
.s-season .s-row{border-radius:calc(var(--u)*4.6)}
.s-banner{border-radius:calc(var(--u)*5);padding:calc(var(--u)*3.6) calc(var(--u)*4);background:var(--yellow-soft);border:calc(var(--u)*.3) solid #F4DDA5;display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--u)*4);font-size:3.5em;font-weight:700}
.s-banner small{display:block;font-weight:500;font-size:.82em;color:var(--text-2);margin-top:calc(var(--u)*.3)}

.s-back{font-size:3.9em;color:var(--brand-dark);font-weight:600;margin:calc(var(--u)*.8) 0 calc(var(--u)*2.4);display:flex;align-items:center;gap:calc(var(--u)*.5)}
.s-back svg{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1)}
.s-head{display:flex;gap:calc(var(--u)*3.4);align-items:center;margin-bottom:calc(var(--u)*3)}
.s-attr{font-size:3.1em;color:var(--text-2);line-height:1.35;margin-bottom:calc(var(--u)*3.4)}
.s-remind{border-radius:calc(var(--u)*5);background:var(--brand-tint);padding:calc(var(--u)*3.4) calc(var(--u)*4);margin-bottom:calc(var(--u)*4.6);display:flex;justify-content:space-between;align-items:center}
.s-remind b{font-family:var(--font);font-size:3.9em;display:block}
.s-remind span{font-size:3.1em;color:var(--brand-dark);font-weight:600}
.s-steps{display:flex;flex-direction:column;gap:calc(var(--u)*4)}
.s-step{display:flex;gap:calc(var(--u)*3.4);align-items:flex-start}
.s-num{flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--brand);color:#fff;font-family:var(--font);font-weight:700;font-size:3.8em;display:flex;align-items:center;justify-content:center;margin-top:calc(var(--u)*.1)}
.s-step p{font-size:4.2em;line-height:1.32;letter-spacing:calc(var(--u)*-.005)}
.s-foot{position:absolute;left:0;right:0;bottom:calc(var(--u)*14.5);padding:calc(var(--u)*3) calc(var(--u)*5.4) calc(var(--u)*3.4);background:linear-gradient(transparent,var(--bg) 38%);z-index:1}
.s-btn{display:block;text-align:center;background:var(--brand);color:#fff;border-radius:calc(var(--u)*99);padding:calc(var(--u)*3.1);font-family:var(--font);font-weight:700;font-size:4.2em}

.s-ready{text-align:center;padding-top:calc(var(--u)*7)}
.s-ready .spark{display:block;margin:0 auto calc(var(--u)*3);width:calc(var(--u)*16);height:calc(var(--u)*16)}
.s-ready h4{font-family:var(--font);font-weight:800;font-size:7.4em;letter-spacing:calc(var(--u)*-.03);margin-bottom:calc(var(--u)*.4)}
.s-ready p{font-size:3.6em;color:var(--text-2);margin-bottom:calc(var(--u)*5)}
.s-ready .s-row{text-align:left;margin-bottom:calc(var(--u)*5)}
.s-month{font-family:var(--font);font-weight:800;font-size:3.3em;letter-spacing:calc(var(--u)*.06);text-transform:uppercase;color:var(--text-3);margin:calc(var(--u)*3) 0 calc(var(--u)*1.8)}

.phone-caption{margin-top:16px;font-size:.9rem;color:var(--text-3);text-align:center;max-width:34ch;margin-left:auto;margin-right:auto}

/* ---------- NUMBERS BAND ---------- */
.stats-bar{
  background:var(--brand-tint);border-top:1px solid var(--brand-line);
  border-bottom:1px solid var(--brand-line);padding:44px 28px;margin-top:56px;
}
.stats-inner{
  max-width:1060px;margin:0 auto;display:flex;align-items:flex-start;
  justify-content:space-between;gap:28px;
}
.stat-item{text-align:center;flex:1}
.stat-num{
  font-family:var(--font);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;color:var(--brand-dark);
  letter-spacing:-.035em;line-height:1;margin-bottom:10px;
}
.stat-label{font-size:.98rem;color:var(--text-2);font-weight:600;line-height:1.45;max-width:24ch;margin:0 auto}
.stat-divider{width:1px;height:64px;background:var(--brand-line);flex-shrink:0;align-self:center}

/* ---------- Generic section ---------- */
.section{padding:104px 28px;max-width:1120px;margin:0 auto}
.section-tinted{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-tinted .section-inner{max-width:1120px;margin:0 auto;padding:104px 28px}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px}
.step{
  background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:36px 32px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-line)}
.step-number{font-family:var(--font);font-size:.86rem;font-weight:800;letter-spacing:.12em;color:var(--brand-dark);margin-bottom:22px}
.step-icon-wrap{
  width:54px;height:54px;border-radius:17px;background:var(--brand-tint);
  display:flex;align-items:center;justify-content:center;color:var(--brand-dark);margin-bottom:22px;
}
.step-name{font-family:var(--font);font-size:1.3rem;font-weight:800;letter-spacing:-.022em;margin-bottom:11px}
.step-desc{font-size:1.03rem;color:var(--text-2);line-height:1.72}

/* ---------- FEATURE ROWS (copy + phone) ---------- */
.feature-row{
  max-width:1120px;margin:0 auto;padding:96px 28px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:80px;align-items:center;
}
.feature-row.reverse{grid-template-columns:.98fr 1.02fr}
.feature-row.reverse .feature-visual{order:-1}
.feature-copy h2{
  font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.1;margin-bottom:24px;
}
.feature-copy p{font-size:1.12rem;color:var(--text-2);line-height:1.8;margin-bottom:18px}
.feature-copy .kicker{
  font-family:var(--font);font-size:1.14rem;font-weight:700;color:var(--text);line-height:1.6;
  border-left:4px solid var(--yellow);padding-left:22px;margin-top:30px;
}
.check-list{list-style:none;margin:26px 0 0;padding:0}
.check-list li{
  display:flex;gap:13px;align-items:flex-start;font-size:1.06rem;color:var(--text-2);
  line-height:1.6;margin-bottom:14px;
}
.check-list li b{color:var(--text)}
.check-list svg{flex-shrink:0;margin-top:5px;color:var(--brand)}
.feature-visual{display:flex;flex-direction:column;align-items:center}
.phone-stage{
  position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding:34px 0;
}
.phone-stage::before{
  content:'';position:absolute;z-index:0;width:min(440px,92%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--yellow-soft) 0%,var(--brand-tint) 70%,transparent 72%);
}
.phone-stage .phone{position:relative;z-index:1}
.phone-stage.duo .phone:first-child{--pw:228px;transform:rotate(-4deg) translateX(18px);z-index:1}
.phone-stage.duo .phone:last-child{--pw:228px;transform:rotate(4deg) translateX(-18px) translateY(30px);z-index:2}

/* ---------- GALLERY ---------- */
.screenshots-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px;
}
.screenshot-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.screenshot-card .phone{--pw:230px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.screenshot-card:hover .phone{transform:translateY(-8px)}
.screenshot-caption{
  margin-top:22px;font-family:var(--font);font-size:1.04rem;font-weight:700;color:var(--text);letter-spacing:-.015em;
}
.gallery-note{margin-top:34px;text-align:center;font-size:.92rem;color:var(--text-3)}

/* ---------- PRICING ---------- */
.pricing-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:64px;
  max-width:900px;margin-left:auto;margin-right:auto;
}
.plan{
  background:var(--card);border:1px solid var(--border);border-radius:28px;padding:40px 36px;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;position:relative;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.plan-featured{border:2px solid var(--brand);box-shadow:var(--shadow-brand)}
.plan-tag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--yellow);color:var(--text);font-family:var(--font);font-size:.8rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:7px 18px;border-radius:100px;white-space:nowrap;
}
.plan-name{font-family:var(--font);font-size:1.4rem;font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.plan-for{font-size:1rem;color:var(--text-2);line-height:1.6;margin-bottom:26px}
.plan-price{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.plan-amount{font-family:var(--font);font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--text)}
.plan-period{font-size:1.05rem;color:var(--text-2);font-weight:600}
.plan-annual{font-size:1rem;color:var(--brand-dark);font-weight:700;margin-bottom:30px;min-height:1.6em}
.plan-list{list-style:none;padding:0;margin:0 0 32px;flex:1}
.plan-list li{
  display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;color:var(--text-2);line-height:1.6;margin-bottom:14px;
}
.plan-list svg{flex-shrink:0;margin-top:4px;color:var(--brand)}
.plan-cta{
  display:block;text-align:center;text-decoration:none;font-family:var(--font);
  padding:16px 26px;border-radius:100px;font-weight:800;font-size:1.05rem;
  letter-spacing:-.015em;transition:transform .2s,box-shadow .2s,background .2s;
}
.cta-solid{background:var(--brand-pressed);color:#fff;box-shadow:var(--shadow-brand)}
a.cta-solid:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,143,122,.36)}
.cta-outline{background:var(--card);color:var(--text);border:1.5px solid var(--border)}
a.cta-outline:hover{border-color:var(--brand);color:var(--brand-dark)}
.plan-cta.is-soon{background:var(--fill);color:var(--text-2);border:1px solid var(--border);box-shadow:none;cursor:default}
.pricing-footnote{
  max-width:700px;margin:42px auto 0;text-align:center;
  font-size:.96rem;color:var(--text-3);line-height:1.75;
}
.pricing-footnote p+p{margin-top:12px}
.pricing-footnote a{color:var(--brand-dark);font-weight:600}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:56px auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:20px;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--brand-line);box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font);font-weight:700;font-size:1.12rem;letter-spacing:-.015em;line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';flex:none;width:12px;height:12px;border-right:2.5px solid var(--brand-dark);border-bottom:2.5px solid var(--brand-dark);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-a{padding:0 26px 24px;color:var(--text-2);font-size:1.04rem;line-height:1.75}
.faq-a p+p{margin-top:12px}
.faq-a a{color:var(--brand-dark);font-weight:600}

/* ---------- FINAL CTA ---------- */
.cta-section{position:relative;overflow:hidden;text-align:center;padding:110px 28px 120px;background:var(--bg)}
.cta-glow{
  position:absolute;bottom:-320px;left:50%;transform:translateX(-50%);
  width:1000px;height:640px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(254,194,72,.34) 0%,rgba(11,143,122,.08) 50%,transparent 70%);
}
.cta-section > *:not(.cta-glow){position:relative;z-index:1}
.cta-mascot{width:96px;height:96px;margin:0 auto 26px;filter:drop-shadow(0 12px 22px rgba(6,99,86,.25))}
.cta-section h2{
  font-size:clamp(2.2rem,5vw,3.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-bottom:20px;
}
.cta-section h2 .accent{color:var(--brand-dark)}
.cta-section > p{font-size:1.18rem;color:var(--text-2);margin-bottom:40px}
.cta-note{margin-top:24px;font-size:.98rem;color:var(--text-3);font-weight:600}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:44px}
  .feature-row.reverse .feature-visual{order:0}
  .steps{grid-template-columns:1fr;gap:20px}
  .screenshots-grid{grid-template-columns:1fr 1fr;gap:40px 22px}
}
@media(max-width:820px){
  .hero{padding:52px 22px 0}
  .section,.section-tinted .section-inner,.feature-row{padding:72px 22px}
  .phone-fan{margin-top:44px}
  .fan-1{display:none}
  .fan-2 .phone{--pw:214px}
  .fan-3 .phone{--pw:170px}
  .fan-3{margin-left:-46px;transform:rotate(6deg) translateY(24px)}
  .stats-bar{margin-top:44px;padding:34px 22px}
  .stats-inner{flex-wrap:wrap;gap:30px 0}
  .stat-item{flex:0 0 50%}
  .stat-divider{display:none}
  .pricing-grid{grid-template-columns:1fr;gap:34px}
  .plan{padding:34px 26px}
  .cta-section{padding:78px 22px 88px}
  .phone-stage.duo .phone:first-child,.phone-stage.duo .phone:last-child{--pw:190px}
  .faq-item summary{padding:18px 20px;font-size:1.04rem}
  .faq-a{padding:0 20px 20px}
}
@media(max-width:520px){
  .screenshots-grid{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}
  .hero-actions .badge-row{flex-direction:column;align-items:stretch}
  .badge-appstore,.badge-googleplay{justify-content:center}
  .fan-2 .phone{--pw:200px}
  .fan-3 .phone{--pw:150px}
  .phone-stage.duo .phone:first-child,.phone-stage.duo .phone:last-child{--pw:164px}
  .phone-stage.duo .phone:first-child{transform:rotate(-4deg) translateX(14px)}
  .phone-stage.duo .phone:last-child{transform:rotate(4deg) translateX(-14px) translateY(22px)}
}