* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0f1320; --muted:#a3acc3; --card:#151a2c; --card2:#0f1b2f; --brand:#5de2a5; --brand2:#4cc3ff; --txt:#e9eef7; --accent:#ff9a62; --danger:#ff5d5d; --shadow: 0 20px 40px rgba(3,10,26,.3); }
html, body { height: 100%; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(120deg,#0d1222 0%,#0a1a2f 50%,#081524 100%); color: var(--txt); -webkit-font-smoothing: antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: min(1200px, 92%); margin-inline:auto; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 14px; padding: .95rem 1.25rem; font-weight:600; letter-spacing: .2px; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.btn.small { padding: .6rem .9rem; border-radius: 12px; font-size:.95rem }
.btn.primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color:#031022; }
.btn.secondary { background: #1e2742; color:#e9eef7; border:1px solid rgba(255,255,255,.06); }
.btn.ghost { background: transparent; border:1px solid rgba(255,255,255,.18); color: var(--txt); }
.btn:hover { transform: translateY(-1px); }
.btn.full { width:100%; }
.hide-sm { display:none }
.site-header { position: sticky; top:0; z-index:50; background: rgba(10,16,35,.6); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.header-row { display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.brand { font-size: 1.4rem; font-weight:700; letter-spacing:.5px; background: linear-gradient(90deg,#fff,#b9d6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav { position:relative; }
.nav-toggle { width:42px; height:42px; border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:#11182f; border:1px solid rgba(255,255,255,.08); }
.nav-toggle span { width:20px; height:2px; background:#e9eef7; transition: .2s ease }
.nav-list { position: fixed; inset: 64px 0 auto 0; background: rgba(10,16,35,.96); border-top:1px solid rgba(255,255,255,.06); padding: .75rem 1rem; display:none; }
.nav-list li a { display:block; padding: .9rem 1rem; border-radius:10px; color:#dbe6ff }
.nav-list li a:hover { background: rgba(255,255,255,.06) }
.nav.open .nav-list { display:block }
.hero { padding: 3.5rem 0 2rem; }
.hero-grid { display:grid; grid-template-columns: 1fr; gap: 2rem; align-items:center }
.hero-copy h1 { font-size: clamp(2rem, 4vw + 1rem, 3.4rem); line-height: 1.05; letter-spacing:.3px; }
.hero-copy p { margin-top: 1rem; color: var(--muted); font-size: 1.05rem }
.actions { margin-top: 1.5rem; display:flex; gap:.75rem; flex-wrap:wrap }
.trust { margin-top: 1.5rem; display:flex; gap: 1rem; color:#c5d1ea; font-size:.95rem; flex-wrap:wrap }
.hero-image { position:relative }
.hero-image img { border-radius: 18px; box-shadow: var(--shadow) }
.deal { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; width: min(720px, 92%); }
.deal.hidden { display:none }
.deal-inner { display:flex; align-items:center; gap: 14px; background: linear-gradient(90deg,#0c1c33,#0b243f); border: 1px solid rgba(255,255,255,.08); padding:.9rem 1rem; border-radius: 14px; box-shadow: var(--shadow) }
.deal-badge { background: linear-gradient(135deg, #ff7b66 0%, #ffbc6a 100%); color:#1b0d0d; padding:.35rem .6rem; border-radius:10px; font-weight:700; font-size:.85rem }
.deal-text { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.deal-text strong { font-size:1.05rem }
.deal-text .time { color:#b8c6e6 }
.deal-close { margin-left:auto; width:36px; height:36px; border-radius:10px; background:#101a33; color:#cfd9f8; font-size:1.2rem }
.section-head { text-align:center; margin-bottom: 1.25rem }
.section-head h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); }
.section-head p { color: var(--muted) }
.listings { padding: 2.5rem 0; }
.cards { display:grid; grid-template-columns: 1fr; gap: 1.2rem }
.card { background: linear-gradient(180deg, #141a2d 0%, #10162a 100%); border:1px solid rgba(255,255,255,.06); border-radius: 16px; overflow:hidden; display:flex; flex-direction:column; }
.card figure { overflow:hidden; aspect-ratio: 16/10 }
.card img { width:100%; height:100%; object-fit: cover; transition: transform .5s ease }
.card:hover img { transform: scale(1.05) }
.card-body { padding: 1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.6rem }
.card h3 { font-size: 1.15rem }
.card .meta { color:#b8c6e6; font-size:.95rem }
.features { display:flex; gap:.6rem; flex-wrap:wrap; color:#c8d4ef; font-size:.9rem }
.features li { background:#0f1b31; padding:.35rem .55rem; border-radius:10px; border:1px solid rgba(255,255,255,.06) }
.price { margin-top: .2rem; display:flex; align-items:baseline; gap:.5rem }
.price-old { color:#9fb0d8; text-decoration: line-through; opacity:.85 }
.price-now { font-size:1.15rem; font-weight:700; color:#8df8c0 }
.why { padding: 2.2rem 0 }
.why-grid { display:grid; grid-template-columns: 1fr; gap: 1rem }
.why-card { background: linear-gradient(180deg,#151d33,#0f1b2f); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding:1.1rem }
.how { padding: 2.2rem 0 }
.steps { display:grid; grid-template-columns: 1fr; gap: 1rem; counter-reset: s }
.steps li { background: linear-gradient(180deg,#141c32,#0f1830); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding:1rem }
.steps h4 { font-size:1.05rem }
.reviews { padding: 2.2rem 0 }
.quotes { display:grid; grid-template-columns: 1fr; gap: 1rem }
blockquote { background: linear-gradient(180deg,#121b31,#0e1730); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding:1rem; color:#dbe6ff }
blockquote cite { display:block; margin-top:.75rem; color:#9fb0d8; font-style: normal }
.cta { padding: 2.5rem 0 }
.cta-row { background: linear-gradient(90deg, rgba(93,226,165,.12), rgba(76,195,255,.12)); border:1px solid rgba(255,255,255,.08); padding: 1.1rem; border-radius: 16px; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.site-footer { margin-top: 2rem; border-top:1px solid rgba(255,255,255,.06); background: rgba(9,14,30,.6); backdrop-filter: blur(8px) }
.footer-grid { display:grid; grid-template-columns: 1fr; gap: 1.2rem; padding: 1.2rem 0 }
.brand.foot { font-size:1.2rem }
.contact { display:grid; gap:.6rem }
.contact input, .contact textarea { width:100%; background:#0f1730; color:#e9eef7; border:1px solid rgba(255,255,255,.08); padding:.8rem .9rem; border-radius: 12px }
.socials { display:flex; gap:.8rem; margin-top:.3rem }
.legal { text-align:center; color:#98a7c8; font-size:.9rem; padding: .9rem 0; border-top:1px solid rgba(255,255,255,.06) }
@media (min-width: 700px){ .hide-sm{display:inline-flex} .hero { padding: 5rem 0 3rem } .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 2.4rem } .nav-list { position: static; display:flex; background: transparent; padding:0; gap:.4rem } .nav-list li a { padding:.6rem .8rem } .nav-toggle{display:none} .cards{grid-template-columns: repeat(2, 1fr)} .why-grid{grid-template-columns: repeat(3, 1fr)} .steps{grid-template-columns: repeat(3, 1fr)} .quotes{grid-template-columns: repeat(3, 1fr)} .footer-grid{grid-template-columns: 1.2fr 1fr .8fr} }
@media (min-width: 1024px){ .cards{grid-template-columns: repeat(3, 1fr)} }