*{margin:0;padding:0;box-sizing:border-box}
:root{
  --o:#2563eb;--od:#1d4ed8;--ol:#60a5fa;--o5:rgba(37,99,235,.05);--o10:rgba(37,99,235,.1);--o15:rgba(37,99,235,.15);
  --s9:#0f172a;--s8:#1e293b;--s7:#334155;--s6:#475569;--s5:#64748b;--s4:#94a3b8;--s3:#cbd5e1;--s2:#e2e8f0;--s1:#f1f5f9;--s0:#f8fafc;
  --bg:#faf8f6;--w:#fff;
}
body{font-family:'Inter',sans-serif;color:var(--s9);line-height:1.6;background:var(--w);-webkit-font-smoothing:antialiased}
.w{max-width:1160px;margin:0 auto;padding:0 28px}
a{text-decoration:none;color:inherit}
h1,h2,.serif{font-family:'DM Serif Display',serif}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--s2)}
.nav .w{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.n-logo{font-family:'DM Serif Display',serif;font-size:24px;color:var(--o);font-weight:400}
.n-links{display:flex;align-items:center;gap:28px}
.n-links a{font-size:14px;font-weight:500;color:var(--s6);transition:.2s}
.n-links a:hover,.n-links a.active{color:var(--o)}
.n-links .n-btn,.n-links .n-btn:hover,.n-links .n-btn.active{color:var(--w)}
.n-btn{padding:12px 32px;border-radius:50px;font-size:14px;font-weight:700;background:#e8461e;color:var(--w);box-shadow:0 4px 14px rgba(232,70,30,.3);transition:.25s}
.n-btn:hover{background:#d13a15;transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,70,30,.4)}
.n-toggle{display:none;background:none;border:none;font-size:24px;color:var(--s7);cursor:pointer;padding:4px 8px}

/* HERO */
.hero{background:var(--bg);padding:80px 0 60px;border-bottom:1px solid var(--s2)}
.hero .w{display:flex;align-items:center;gap:60px}
.hero-l{flex:1.1}.hero-r{flex:1}
.h-badge{display:inline-block;background:var(--o15);color:var(--o);padding:6px 16px;border-radius:50px;font-size:12px;font-weight:700;margin-bottom:24px}
.hero h1{font-size:clamp(36px,5vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.5px;margin-bottom:20px}
.hero p{font-size:16px;color:var(--s5);max-width:460px;margin-bottom:32px;line-height:1.75}
.h-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.h-p{padding:14px 28px;border-radius:50px;font-size:14px;font-weight:700;background:#e8461e;color:var(--w);transition:.25s;box-shadow:0 4px 14px rgba(232,70,30,.3)}
.h-p:hover{background:var(--od)}
.h-o{padding:14px 28px;border-radius:50px;font-size:14px;font-weight:600;border:1.5px solid var(--s3);color:var(--s7);transition:.2s}
.h-o:hover{border-color:var(--o);color:var(--o)}
.h-tag{font-size:13px;font-weight:600;color:var(--o)}

/* MOCKUP */
.mk{width:100%;max-width:500px;background:var(--s8);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mk-top{background:var(--s9);padding:10px 16px;display:flex;align-items:center;gap:8px}
.mk-dot{width:8px;height:8px;border-radius:50%}
.mk-d1{background:#ef4444}.mk-d2{background:#f59e0b}.mk-d3{background:#22c55e}
.mk-top span{flex:1;text-align:center;font-size:11px;color:var(--s4)}
.mk-body{padding:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mk-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;text-align:center}
.mk-card small{font-size:9px;color:var(--s4);display:block;margin-bottom:4px}
.mk-card b{font-size:18px;color:var(--w)}
.mk-card b span{color:var(--o)}
.mk-bar2{grid-column:1/-1;height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.mk-fill{height:100%;width:65%;background:linear-gradient(90deg,var(--o),var(--ol));border-radius:3px}

/* SECTIONS */
.sec{padding:90px 0}
.sec-bg{background:var(--bg)}
.sec-dk{background:linear-gradient(135deg,var(--s9),#162035);color:var(--w)}
.sh{text-align:center;margin-bottom:56px}
.sh h2{font-size:clamp(28px,3.5vw,42px);font-weight:400;letter-spacing:-.3px;margin-bottom:14px}
.sh p{font-size:15px;color:var(--s5);max-width:580px;margin:0 auto;line-height:1.7}
.sh .tags{font-size:13px;color:var(--s5);margin-top:6px}
.sh .tags b{color:var(--s7)}
.sec-dk .sh p{color:var(--s4)}

/* PAGE HERO */
.page-hero{background:var(--bg);padding:60px 0 40px;border-bottom:1px solid var(--s2)}
.page-hero .w{display:flex;align-items:center;gap:50px}
.page-hero-l{flex:1}
.page-hero-r{flex:1;display:flex;justify-content:flex-end}
.page-hero .h-badge{margin-bottom:20px}
.page-hero h1{font-size:clamp(32px,4.5vw,48px);font-weight:400;line-height:1.1;margin-bottom:16px}
.page-hero p{font-size:15px;color:var(--s5);line-height:1.7;max-width:460px}
.page-hero p strong{color:var(--s9)}
.page-hero-img{width:340px;height:220px;border-radius:16px;background:linear-gradient(135deg,var(--o10),var(--o5));display:flex;align-items:center;justify-content:center;font-size:60px}
.page-hero .trust{font-size:13px;color:var(--s4);margin-top:16px}

/* FEATURE CARDS */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fc{background:var(--w);border:1px solid var(--s2);border-radius:14px;padding:30px;transition:.3s}
.fc:hover{border-color:var(--o);box-shadow:0 12px 40px rgba(241,98,50,.07);transform:translateY(-3px)}
.fc-icon{width:52px;height:52px;border-radius:14px;background:var(--o10);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px}
.fc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fc h3{font-size:16px;font-weight:700}
.fc-tag{font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;background:var(--o10);color:var(--o)}
.fc-tag.green{background:rgba(34,197,94,.1);color:#16a34a}
.fc-tag.blue{background:rgba(59,130,246,.1);color:#2563eb}
.fc-tag.purple{background:rgba(168,85,247,.1);color:#9333ea}
.fc p{font-size:13.5px;color:var(--s5);line-height:1.7}
.sec-dk .fc{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.sec-dk .fc:hover{border-color:var(--o);background:rgba(255,255,255,.08)}
.sec-dk .fc h3{color:var(--w)}.sec-dk .fc p{color:var(--s4)}
.sec-dk .fc-icon{background:rgba(241,98,50,.15)}

/* STEPS */
.steps{display:flex;gap:28px;counter-reset:s}
.step{flex:1;text-align:center;counter-increment:s}
.step-num{width:40px;height:40px;border-radius:50%;background:var(--o);color:var(--w);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step-ico{font-size:28px;margin-bottom:14px;margin-top:8px}
.step h3{font-size:16px;font-weight:700;margin-bottom:6px}
.step p{font-size:13px;color:var(--s5);line-height:1.65;max-width:260px;margin:0 auto}

/* TESTIMONIALS */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{background:var(--w);border:1px solid var(--s2);border-radius:16px;padding:28px;transition:.3s}
.tc:hover{border-color:var(--o)}
.tc q{display:block;font-size:14px;color:var(--s6);line-height:1.7;font-style:italic;margin-bottom:18px;quotes:none}
.tc-who{display:flex;align-items:center;gap:10px}
.tc-avi{width:36px;height:36px;border-radius:50%;background:var(--o10);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--o)}
.tc-name{font-size:13px;font-weight:700}.tc-loc{font-size:12px;color:var(--s5)}

/* BLOG */
.bg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bc{background:var(--w);border:1px solid var(--s2);border-radius:16px;overflow:hidden;transition:.3s}
.bc:hover{border-color:var(--o);transform:translateY(-3px)}
.bc-img{height:180px;background:var(--s1);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--s4)}
.bc-body{padding:20px}
.bc-date{font-size:11px;color:var(--s5);margin-bottom:6px}
.bc h3{font-size:15px;font-weight:700;line-height:1.4}

/* PRICING */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.pc{background:var(--w);border:1.5px solid var(--s2);border-radius:20px;padding:36px 28px;text-align:center;transition:.3s;position:relative}
.pc:hover{border-color:var(--o)}
.pc.pop{border-color:var(--o);box-shadow:0 12px 40px rgba(241,98,50,.12)}
.pc.pop::before{content:'MOST POPULAR';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--o);color:var(--w);font-size:10px;font-weight:800;letter-spacing:1.5px;padding:5px 16px;border-radius:50px}
.pc-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--s5);margin-bottom:12px}
.pc-price{font-family:'DM Serif Display',serif;font-size:44px;color:var(--s9);margin-bottom:4px}
.pc-price span{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:var(--s4)}
.pc-per{font-size:13px;color:var(--s5);margin-bottom:24px}
.pc-feats{list-style:none;text-align:left;margin-bottom:28px}
.pc-feats li{padding:8px 0;border-bottom:1px solid var(--s1);font-size:13px;color:var(--s6)}
.pc-feats li::before{content:'✓';color:var(--o);font-weight:700;margin-right:8px}
.pc-btn{display:block;width:100%;padding:14px;border-radius:50px;font-size:14px;font-weight:700;transition:.25s}
.pc-btn-o{background:var(--o);color:var(--w)}.pc-btn-o:hover{background:var(--od)}
.pc-btn-g{background:var(--s0);color:var(--s7);border:1px solid var(--s2)}.pc-btn-g:hover{border-color:var(--o);color:var(--o)}

/* FAQ */
.faq{max-width:720px;margin:0 auto}
.fi{border-bottom:1px solid var(--s2);padding:20px 0}
.fq{font-size:15px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.fq::after{content:'+';font-size:20px;color:var(--o);transition:.2s}
.fi.open .fq::after{content:'\2212'}
.fa{max-height:0;overflow:hidden;transition:.3s;font-size:14px;color:var(--s5);line-height:1.7}
.fi.open .fa{max-height:200px;padding-top:12px}

/* FORM */
.form-wrap{max-width:600px;margin:0 auto}
.fl{display:block;font-size:13px;font-weight:700;color:var(--s7);margin-bottom:6px}
.fl span{color:var(--o)}
.fi2{width:100%;padding:12px 16px;border:1.5px solid var(--s2);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;color:var(--s9);background:var(--w);transition:.2s;margin-bottom:18px}
.fi2:focus{outline:none;border-color:var(--o)}
select.fi2{appearance:none;background:var(--w) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center}
textarea.fi2{resize:vertical;min-height:100px}
.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:18px}
.radio-group label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--s6);cursor:pointer}
.radio-group input[type=radio]{accent-color:var(--o);width:16px;height:16px}
.check-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:24px}
.check-row input{accent-color:var(--o);width:16px;height:16px;margin-top:2px}
.check-row span{font-size:13px;color:var(--s6)}
.submit-btn{width:100%;padding:16px;border-radius:50px;border:none;background:var(--o);color:var(--w);font-size:15px;font-weight:700;cursor:pointer;transition:.25s;font-family:'Inter',sans-serif}
.submit-btn:hover{background:var(--od)}

/* CTA */
.cta{background:linear-gradient(135deg,var(--o),var(--od));border-radius:24px;padding:64px 48px;text-align:center;color:var(--w);max-width:860px;margin:0 auto;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.cta h2{font-size:32px;margin-bottom:14px;position:relative}
.cta p{font-size:16px;color:rgba(255,255,255,.85);margin-bottom:32px;position:relative;max-width:480px;margin-left:auto;margin-right:auto}
.cta-btn{display:inline-flex;padding:16px 36px;border-radius:50px;font-size:15px;font-weight:800;background:var(--w);color:var(--o);transition:.25s;position:relative}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.15)}

/* FOOTER */
.foot{background:var(--s9);color:var(--s4);padding:56px 0 28px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.f-brand{font-family:'DM Serif Display',serif;font-size:22px;color:var(--o);margin-bottom:12px}
.f-desc{font-size:13px;line-height:1.7;max-width:260px}
.f-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--s4);margin-bottom:14px}
.f-col a{display:block;font-size:13px;color:var(--s5);padding:3px 0;transition:.2s}
.f-col a:hover{color:var(--o)}
.fb{border-top:1px solid rgba(255,255,255,.06);padding-top:20px;display:flex;justify-content:space-between;font-size:12px}
.f-soc{display:flex;gap:10px}
.f-s{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--s4);transition:.2s}
.f-s:hover{background:var(--o);border-color:var(--o);color:var(--w)}

/* RESPONSIVE */
@media(max-width:900px){
  .n-toggle{display:block}
  .n-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--w);flex-direction:column;padding:16px 28px;border-bottom:1px solid var(--s2);box-shadow:0 8px 24px rgba(0,0,0,.08)}
  .n-links.open{display:flex}
  .n-links a{padding:8px 0}
  .hero .w,.page-hero .w{flex-direction:column;text-align:center}
  .hero-r,.page-hero-r{display:none}.hero p,.page-hero p{margin-left:auto;margin-right:auto}
  .h-btns{justify-content:center}
  .fg,.tg,.bg,.pg{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .ft{grid-template-columns:1fr 1fr}
  .radio-group{grid-template-columns:1fr}
}
@media(max-width:600px){.sec{padding:60px 0}.ft{grid-template-columns:1fr}.fb{flex-direction:column;gap:12px;text-align:center}}
