:root { --navy:#10204a; --blue:#2455e6; --blue-2:#1664ff; --teal:#23b7a7; --lime:#8ddc63; --ink:#111c3f; --muted:#687087; --cream:#f8f7f2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,"Helvetica Neue",sans-serif; }
a { color:inherit; text-decoration:none; }
svg { width:1.25rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.round-arrow { display:grid; place-items:center; width:40px; height:40px; color:var(--navy); border-radius:50%; background:var(--lime); font-size:1.5rem; }
.site-header { position:absolute; z-index:10; left:50%; transform:translateX(-50%); width:min(1320px,calc(100% - 72px)); height:104px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--navy); font-size:1.8rem; font-weight:900; letter-spacing:.035em; }
.brand-logo { display:flex; align-items:center; height:76px; }
.brand-logo img { display:block; width:216px; height:auto; object-fit:contain; }
nav { display:flex; gap:46px; align-items:center; }
nav a { position:relative; padding:14px 0; font-weight:600; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:5px; height:3px; border-radius:3px; background:var(--blue); transition:.25s ease; }
nav a:hover::after, nav a.active::after { right:0; }
.header-cta { padding:13px 21px; border:1px solid #d9e1f6; border-radius:12px; font-weight:700; background:rgba(255,255,255,.58); }
.hero { position:relative; overflow:hidden; min-height:900px; padding:170px max(72px,calc((100vw - 1320px)/2)) 80px; background:radial-gradient(circle at 78% 36%,#e8f1ff 0,rgba(232,241,255,.72) 18%,transparent 43%),linear-gradient(120deg,#fffdf8 0%,#f8f7f2 58%,#f4f8ff 100%); }
.hero::before { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(36,85,230,.06); border-radius:50%; right:-130px; top:70px; box-shadow:0 0 0 100px rgba(36,85,230,.025),0 0 0 200px rgba(36,85,230,.018); }
.hero-copy { position:relative; z-index:3; width:49%; max-width:630px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; border:1px solid #cfe3b9; border-radius:99px; background:#fbfff6; padding:9px 15px; font-size:.95rem; font-weight:700; }
.eyebrow span { font-size:1.35rem; }
h1 { margin:28px 0 20px; max-width:650px; color:var(--navy); font-size:clamp(3.35rem,5.2vw,5rem); line-height:1.01; letter-spacing:-.055em; font-weight:850; }
h1 em { color:var(--blue); font-style:normal; }
.hero-copy>p { margin:0; max-width:590px; color:#626978; font-size:1.28rem; line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:30px; min-height:68px; padding:0 22px 0 28px; color:#fff; border-radius:15px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 13px 25px rgba(36,85,230,.25); font-weight:800; transition:transform .2s,box-shadow .2s; }
.primary-button svg { padding:9px; width:40px; height:40px; color:var(--navy); border-radius:50%; background:var(--lime); }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 18px 32px rgba(36,85,230,.33); }
.price-callout { color:#666e81; white-space:nowrap; }
.price-callout strong { color:var(--blue); font-size:1.8rem; }
.trust-line { display:flex; gap:22px; margin-top:25px; color:#5f677b; font-size:.9rem; }
.trust-line span { display:flex; align-items:center; gap:6px; }.trust-line svg { width:17px; color:var(--teal); }
.hero-visual { position:absolute; z-index:2; width:min(53vw,720px); height:630px; top:125px; left:50%; display:flex; align-items:center; justify-content:center; }
.hero-visual img { position:relative; z-index:2; width:90%; max-height:570px; object-fit:contain; filter:drop-shadow(0 28px 32px rgba(37,79,145,.15)); animation:float 6s ease-in-out infinite; }
.glow { position:absolute; width:510px; height:510px; border-radius:50%; background:rgba(210,228,255,.72); filter:blur(12px); }
.status-card { position:absolute; z-index:4; right:0; top:170px; width:180px; padding:17px; border:1px solid rgba(135,170,231,.5); border-radius:18px; background:rgba(255,255,255,.78); box-shadow:0 18px 40px rgba(47,90,158,.12); backdrop-filter:blur(12px); }
.status { display:block; color:#5c6780; font-size:.8rem; }.status i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#4dca7b; box-shadow:0 0 0 4px #e4f8eb; }
.status-card strong { display:block; margin-top:14px; color:#39b96b; font-size:2rem; }.status-card small { color:#69728a; }
.bars { display:flex; align-items:end; gap:7px; height:42px; margin-top:10px; }.bars i { width:8px; border-radius:5px; background:linear-gradient(#42c4b0,#2b65ed); }.bars i:nth-child(1){height:35%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:45%}.bars i:nth-child(4){height:80%}.bars i:nth-child(5){height:100%}
.quick-benefits { position:absolute; z-index:5; left:calc(50% - 40px); right:max(72px,calc((100vw - 1320px)/2)); bottom:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quick-benefits article { min-width:0; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #edf0f6; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 12px 30px rgba(43,65,112,.09); }
.quick-benefits strong,.quick-benefits small { display:block; }.quick-benefits strong { font-size:.92rem; }.quick-benefits small { margin-top:4px; color:#788095; font-size:.76rem; }
.icon { display:grid; flex:0 0 45px; height:45px; place-items:center; border-radius:50%; }.icon.green{color:#44a431;background:#edf8e8}.icon.teal{color:#119d8d;background:#e7f8f6}.icon.blue{color:#2455e6;background:#e8efff}
.benefits-section { padding:105px max(72px,calc((100vw - 1320px)/2)) 120px; background:#fff; }
.section-heading { max-width:790px; }.section-heading span { color:var(--blue); font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.section-heading h2 { margin:14px 0 45px; color:var(--navy); font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.08; letter-spacing:-.04em; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.benefit-grid article { padding:30px; border:1px solid #e9edf5; border-radius:22px; background:#fbfcff; }.benefit-grid b { color:var(--teal); }.benefit-grid h3 { margin:28px 0 12px; font-size:1.3rem; }.benefit-grid p { margin:0; color:var(--muted); line-height:1.7; }
.plan-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; padding:120px max(72px,calc((100vw - 1180px)/2)); background:#f1f6ff; }
.plan-intro>span,.contact-section>div>span { color:var(--blue); font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plan-intro h2 { margin:15px 0 22px; color:var(--navy); font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:1.06; letter-spacing:-.045em; }.plan-intro>p { color:var(--muted); font-size:1.1rem; line-height:1.7; }
.support-note { display:flex; gap:14px; align-items:flex-start; margin-top:35px; }.support-note>span { display:grid; flex:0 0 34px; height:34px; place-items:center; color:#187a69; border-radius:50%; background:#dff7ee; font-weight:900; }.support-note p { margin:0; color:var(--muted); line-height:1.55; }.support-note strong{color:var(--navy)}
.pricing-card { position:relative; padding:38px 42px; border:1px solid #dfe8fb; border-radius:28px; background:#fff; box-shadow:0 28px 70px rgba(48,83,150,.14); }.popular { position:absolute; top:-14px; right:30px; padding:8px 16px; color:#173f16; border-radius:99px; background:var(--lime); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.pricing-card>p { margin:0 0 12px; color:var(--navy); font-weight:800; font-size:1.25rem; }.big-price { display:flex; align-items:center; color:var(--navy); }.big-price sup { align-self:flex-start; margin-top:18px; font-size:1.1rem; font-weight:800; }.big-price>strong { font-size:5rem; line-height:1; letter-spacing:-.06em; }.big-price>span { color:var(--muted); line-height:1.05; }.big-price small { font-size:.9rem; }
.plan-button { display:flex; align-items:center; justify-content:space-between; margin:27px 0; padding:18px 22px; color:#fff; border-radius:13px; background:var(--blue); font-weight:800; }.plan-button svg { transition:transform .2s }.plan-button:hover svg{transform:translateX(4px)}
.pricing-card ul { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin:0; padding:0; list-style:none; }.pricing-card li { display:flex; gap:8px; color:#5e6679; font-size:.9rem; }.pricing-card li svg { flex:0 0 18px; color:var(--teal); }.pricing-card li strong { color:var(--navy); }
.faq-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; padding:120px max(72px,calc((100vw - 1320px)/2)); background:#fff; }.faq-section .section-heading h2 { font-size:clamp(2.2rem,3.6vw,3.2rem); }.faq-list details { border-bottom:1px solid #e3e7ef; }.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; color:var(--navy); font-size:1.08rem; font-weight:800; cursor:pointer; list-style:none; }.faq-list summary::-webkit-details-marker{display:none}.faq-list summary i{font-style:normal;color:var(--blue);font-size:1.4rem;transition:transform .2s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details p{margin:-8px 40px 24px 0;color:var(--muted);line-height:1.7}
.contact-section { display:flex; align-items:center; justify-content:space-between; gap:50px; padding:80px max(72px,calc((100vw - 1180px)/2)); color:#fff; background:linear-gradient(135deg,#10204a,#163d93); }.contact-section>div>span{color:#87ddcf}.contact-section h2{max-width:720px;margin:13px 0 0;font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.035em}.contact-section>a{display:flex;align-items:center;gap:25px;flex:0 0 auto;padding:19px 22px;border-radius:14px;color:var(--navy);background:var(--lime);font-weight:900}.contact-section>a:hover svg{transform:translateX(4px)}.contact-section>a svg{transition:transform .2s}
footer { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; align-items:center; padding:38px max(72px,calc((100vw - 1320px)/2)); background:#09132e; color:#aeb9d3; font-size:.85rem; }footer .brand{color:#fff;font-size:1.35rem}footer .footer-logo{height:64px;width:max-content;padding:6px 10px;border-radius:8px;background:#fff}footer .footer-logo img{width:160px}footer p{margin:0;text-align:center}footer>span{text-align:right}
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }
@media(max-width:1000px){ .site-header{width:calc(100% - 36px)} nav{display:none}.hero{min-height:auto;padding:145px 30px 90px}.hero-copy{width:58%}.hero-visual{left:53%;width:55vw}.quick-benefits{position:relative;left:auto;right:auto;bottom:auto;margin-top:90px}.benefits-section,.faq-section{padding:80px 30px}.price-callout{display:none}.plan-section{gap:40px;padding:90px 30px}.faq-section{gap:45px}.contact-section{padding:70px 30px}footer{padding:42px 30px} }
@media(max-width:720px){ .site-header{height:84px}.brand{font-size:1.35rem}.brand-logo{height:66px}.brand-logo img{width:156px}.header-cta{padding:11px 14px;font-size:.8rem}.hero{padding:118px 20px 55px}.hero-copy{width:100%}h1{font-size:3.15rem}.hero-copy>p{font-size:1.08rem}.hero-actions{display:block}.primary-button{width:100%}.trust-line{flex-direction:column;gap:9px}.hero-visual{position:relative;left:auto;top:auto;width:100%;height:410px;margin-top:22px}.hero-visual img{width:110%}.status-card{right:-5px;top:110px;transform:scale(.82)}.quick-benefits{grid-template-columns:1fr;margin-top:0}.benefits-section{padding:70px 20px}.benefit-grid{grid-template-columns:1fr}.section-heading h2{font-size:2.35rem}.plan-section,.faq-section{grid-template-columns:1fr;padding:70px 20px;gap:45px}.pricing-card{padding:32px 22px}.pricing-card ul{grid-template-columns:1fr}.contact-section{align-items:flex-start;flex-direction:column;padding:65px 20px}.contact-section>a{width:100%;justify-content:space-between}footer{grid-template-columns:1fr;padding:42px 20px;text-align:left}footer .footer-logo{height:64px}footer .footer-logo img{width:160px}footer p,footer>span{text-align:left} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-visual img{animation:none}.primary-button{transition:none}}