/* styles.css */ :root{ --bg:#0f1419; --surface:#0b1015; --panel:#151c23; --text:#e6e9ef; --muted:#9aa4b2; --accent:#b3ff66; --accent-2:#78e3c5; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35); }

*{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:linear-gradient(180deg,var(--bg),#0d1319 60%,var(--surface)); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

.container{max-width:1120px;margin:0 auto;padding:0 20px} .section{padding:80px 0} .section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.00))} .section.split{background:var(--surface)} .section.highlight{background:linear-gradient(135deg,rgba(179,255,102,0.08),rgba(120,227,197,0.06))}

.site-header{ position:sticky;top:0;z-index:50; background:rgba(11,16,21,0.7);backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.06) } .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700} .logo-mark{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-2))} .logo-text{letter-spacing:.2px} .nav{display:flex;gap:22px;align-items:center} .nav a{color:var(--text);text-decoration:none;font-size:15px;opacity:.9} .nav a:hover{opacity:1}

.btn{ display:inline-block;padding:14px 18px;border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0d10;text-decoration:none;font-weight:700;box-shadow:var(--shadow) } .btn:hover{transform:translateY(-1px)} .btn.ghost{ background:transparent;border:1px solid rgba(255,255,255,0.18); color:var(--text);box-shadow:none } .btn-small{padding:10px 14px;border-radius:10px}

.hero{padding-top:96px} .hero-grid{ display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center } .hero-copy h1{font-size:46px;line-height:1.1;margin:0 0 18px} .hero-copy p{color:var(--muted);margin:0 0 18px} .cta-group{display:flex;gap:12px;margin:8px 0 16px} .hero-points{display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:10px 0 0;list-style:none} .hero-points li{ border:1px solid rgba(255,255,255,0.08);padding:8px 12px;border-radius:999px;color:var(--text);font-size:14px } .hero-media img{ width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow) }

.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .panel{ background:var(--panel);border:1px solid rgba(255,255,255,0.06); border-radius:16px;padding:28px } .panel.accent{background:linear-gradient(135deg,rgba(179,255,102,0.08),rgba(120,227,197,0.08))} .checklist{margin:10px 0 0;padding-left:18px} .checklist li{margin:8px 0}

.cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px } .card{ background:var(--panel);border:1px solid rgba(255,255,255,0.06); border-radius:16px;padding:20px;min-height:160px } .card h3{margin:0 0 8px} .card p{margin:0;color:var(--muted)}

.details-grid{display:grid;grid-template-columns:1fr .9fr;gap:36px;align-items:center} .specs{margin:14px 0 0;padding-left:18px} .specs li{margin:8px 0} .detail-media img{ width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow) }

.steps{counter-reset:step;margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .steps li{ position:relative;background:var(--panel);border:1px solid rgba(255,255,255,0.06); border-radius:14px;padding:16px;min-height:72px;display:flex;align-items:center } .steps li::before{ counter-increment:step;content:counter(step); width:26px;height:26px;display:inline-grid;place-items:center;margin-right:10px; border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0d10;font-weight:800 } .app-media img{ width:100%;height:auto;margin-top:18px;border-radius:16px;border:1px solid rgba(255,255,255,0.08) }

.gallery{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px } .gallery img{ width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,0.06) }

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .trust-card{ background:var(--panel);border:1px solid rgba(255,255,255,0.06); border-radius:16px;padding:20px } .trust-card p{color:var(--muted);margin:8px 0 0}

.cta-final{ display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center } .cta-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .note{color:var(--muted);font-size:14px;margin:0}

.site-footer{ padding:36px 0;border-top:1px solid rgba(255,255,255,0.06);background:rgba(11,16,21,0.7) } .footer-grid{display:grid;grid-template-columns:1.3fr .9fr .8fr;gap:20px;align-items:start} .footer-logo{margin-bottom:10px} .muted{color:var(--muted);margin:8px 0 0} .footer-nav a,.legal a{display:block;color:var(--text);text-decoration:none;opacity:.9;margin:6px 0} .footer-nav a:hover,.legal a:hover{opacity:1}

.visually-hidden{ position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap }

/* Responsive */ @media (max-width: 1024px){ .hero-grid{grid-template-columns:1fr;gap:24px} .details-grid{grid-template-columns:1fr} .cta-final{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr)} } @media (max-width: 720px){ .nav{display:none} .cards{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:1fr 1fr} .trust-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .hero-copy h1{font-size:34px} .section{padding:56px 0} }