:root{
  --navy:#081326;--navy2:#0E2044;--blue:#2563EB;--blue-2:#3B82F6;--blue-soft:#DBEAFE;
  --orange:#FF6B00;--orange-2:#FF8A2B;--ink:#0E1626;--muted:#5B6577;--bg:#F4F6FB;
  --card:#FFFFFF;--line:#E5E9F2;--green:#16A34A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.center{text-align:center}

/* confirm bar */
.confirm{background:#ECFDF3;border-bottom:1px solid #BBF7D0;color:#15803D;text-align:center;padding:11px 16px;font-weight:600;font-size:.95rem}
.confirm b{color:#166534}

/* hero / OTO */
.oto{position:relative;overflow:hidden;color:#fff;padding:40px 0 46px;
  background:radial-gradient(90% 60% at 20% 0%,rgba(37,99,235,.4) 0%,transparent 55%),
    radial-gradient(70% 60% at 100% 100%,rgba(255,107,0,.28) 0%,transparent 55%),
    linear-gradient(180deg,var(--navy2) 0%,var(--navy) 75%);}
.oto .wrap{position:relative;z-index:2;text-align:center}
.flag{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:16px;box-shadow:0 8px 18px rgba(255,107,0,.4)}
.oto h1{font-size:1.95rem;line-height:1.18;font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.oto h1 b{color:#FFB067}
.oto .sub{color:#C4D0E4;font-size:1.06rem;max-width:560px;margin:0 auto 26px}

/* bridge steps */
.steps{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 8px;max-width:560px}
.step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;flex:1;min-width:140px;text-align:left}
.step .n{font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9DB4E0}
.step h4{font-size:1rem;margin-top:2px}
.step p{font-size:.86rem;color:#B9C6DD;margin-top:2px}
.arrow{color:#7E9AD6;font-size:1.5rem;font-weight:800}
.done{color:#86EFAC}

/* phone */
.phone{width:232px;margin:26px auto 0;background:#0b0b12;border-radius:34px;padding:9px;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:78px;height:6px;border-radius:99px;background:#2a2a35;z-index:2}
.phone .screen{border-radius:26px;overflow:hidden}
.phone .ratio{position:relative;padding-top:216.216%}
.phone .ratio iframe{border:none;position:absolute;top:0;left:0;width:100%;height:100%}
.vcap{color:#9DB4E0;font-size:.92rem;max-width:400px;margin:16px auto 0}
.vcap b{color:#fff}

/* sections */
section{padding:46px 0}
h2{font-size:1.55rem;font-weight:800;letter-spacing:-.3px;text-align:center;margin-bottom:26px}
.benefits{background:#fff}
.b-list{max-width:600px;margin:0 auto;display:grid;gap:12px;list-style:none}
.b-list li{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:1.02rem}
.b-list .chk{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:900}

/* offer */
.offer{background:radial-gradient(80% 60% at 50% 0%,var(--navy2),var(--navy))}
.offer-card{position:relative;background:#fff;color:var(--ink);max-width:440px;margin:0 auto;border-radius:22px;padding:32px 26px 28px;box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:center}
.offer-card .kit{font-size:.8rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.offer-card .big{font-size:3rem;font-weight:800;line-height:1;letter-spacing:-1.5px}
.offer-card .big small{font-size:1rem;font-weight:600;color:var(--muted);letter-spacing:0}
.offer-card .once{display:inline-block;background:#FEF3C7;color:#92400E;font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;margin:14px 0 4px}
.mini{list-style:none;text-align:left;margin:18px 0;display:grid;gap:9px}
.mini li{display:flex;gap:11px;font-size:1rem;align-items:flex-start}
.mini .chk{color:var(--green);font-weight:900;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;text-decoration:none;font-weight:800;font-size:1.12rem;letter-spacing:.3px;text-transform:uppercase;padding:18px 26px;border-radius:14px;width:100%;box-shadow:0 12px 26px rgba(255,107,0,.4);transition:transform .12s ease,box-shadow .12s ease}
.btn::after{content:"›";font-size:1.5rem;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,107,0,.5)}
.btn:hover::after{transform:translateX(4px)}
.after{margin-top:12px;color:var(--muted);font-size:.9rem}
.decline{display:block;text-align:center;margin:22px auto 0;color:#93A0B5;font-size:.95rem;text-decoration:underline;background:none}

footer{background:var(--navy);color:#7E8CA8;text-align:center;padding:26px 20px;font-size:.85rem}
@media(min-width:760px){ .oto h1{font-size:2.5rem} }