:root {
    --bg: #071322;
    --bg-soft: #0f1f34;
    --text: #e6edf7;
    --muted: #9db0c9;
    --primary: #ff8a2b;
    --secondary: #1d9bf0;
    --card: rgba(15, 31, 52, 0.82);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 25%, rgba(29,155,240,.20), transparent 32%),
        radial-gradient(circle at 80% 70%, rgba(255,138,43,.15), transparent 30%),
        var(--bg);
}

a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 92vw); margin: 0 auto; }
.skip-link {
    position:absolute;
    left:-999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip-link:focus {
    left:12px;
    top:12px;
    width:auto;
    height:auto;
    padding:8px 12px;
    border-radius:8px;
    background:#0ea5e9;
    color:#00101f;
    z-index:1000;
}

.hero { position: relative; overflow: hidden; padding-bottom: 92px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero::before {
    content: "";
    position: absolute;
    inset: auto -20% -30% -20%;
    height: 55%;
    background:
        linear-gradient(to top, rgba(7,19,34,0.0), rgba(7,19,34,0.85)),
        linear-gradient(90deg, rgba(29,155,240,.25), rgba(255,138,43,.10));
    filter: blur(18px);
    opacity: .55;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -40% -52% -40%;
    height: 70%;
    background:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(800px) rotateX(62deg);
    transform-origin: center top;
    opacity: .12;
    pointer-events: none;
}
.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 0; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar nav { display:flex; gap:18px; color:var(--muted); font-size:14px; }
.topbar nav a { transition: color .2s ease; }
.topbar nav a:hover { color:#dbeafe; }
.brand { font-weight:700; letter-spacing:.4px; }
.brand span { color: var(--secondary); }
.theme-toggle {
    border:1px solid #265788;
    background:#10253f;
    color:#9fd3ff;
    border-radius:999px;
    padding:7px 12px;
    font-size:12px;
    cursor:pointer;
}
.theme-toggle:hover { background:#123458; }

.hero-grid { position: relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items:center; padding: 18px 0 0; z-index: 1; }
.hero-inner { padding: 70px 0 16px; max-width: 760px; }
.badge { display:inline-block; background:#142d49; color:#8dc7ff; border:1px solid #245789; padding:6px 12px; border-radius:999px; font-size:12px; }
h1 { margin:14px 0; font-size: clamp(32px, 5vw, 54px); line-height: 1.1; }
.sub { color: var(--muted); max-width: 620px; }
.cta { margin-top: 24px; display:flex; gap:12px; }
.btn { padding:12px 18px; border-radius:10px; font-weight:600; }
.btn-primary { background: var(--primary); color:#101010; }
.btn-secondary { background: #123458; color:#a4d7ff; border:1px solid #1c4d7e; }

.hero-visual { position: relative; height: 420px; min-height: 360px; }
.hero-glow {
    position:absolute;
    inset: -20px 0 0 0;
    background: radial-gradient(circle at 40% 35%, rgba(29,155,240,.35), transparent 45%),
        radial-gradient(circle at 70% 65%, rgba(255,138,43,.25), transparent 40%);
    filter: blur(10px);
    opacity: .9;
}
.device {
    position: absolute;
    background: linear-gradient(180deg, rgba(18,34,58,0.95), rgba(8,20,35,0.92));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.38);
    overflow: hidden;
}
.device::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(124,58,237,.18), rgba(29,155,240,.16)),
        repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 10px);
    opacity: .85;
}
.device.phone { width: 148px; height: 312px; border-radius: 22px; }
.device.phone.one { left: -10px; top: 92px; transform: rotate(-12deg); }
.device.phone.two { left: 78px; top: 52px; transform: rotate(10deg); }
.device.tablet { width: 300px; height: 210px; border-radius: 18px; right: 26px; top: 96px; transform: rotate(-2deg); }
.device.laptop { width: 340px; height: 210px; border-radius: 16px; right: -2px; top: 172px; transform: rotate(2deg); }
.device.laptop::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -18px;
    height: 26px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.10);
    border-top: 0;
}

section { padding: 56px 0; }
section h2 { margin-top: 0; margin-bottom: 18px; }
.card-grid, .price-grid, .why-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.card, .price-card, .why-grid > div {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
}
.feature-top { display:flex; align-items:center; gap: 12px; margin-bottom: 8px; }
.feature-top h3 { margin: 0; }
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(17, 27, 47, 0.85);
    color: #93c5fd;
}
.feature-icon.c1 { color: #7dd3fc; }
.feature-icon.c2 { color: #67e8f9; }
.feature-icon.c3 { color: #a78bfa; }
.feature-icon.c4 { color: #86efac; }
.price { font-size: 34px; color:#77f7ff; margin:10px 0; font-weight:700; }
.featured { border-color: rgba(29,155,240,.45); box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.price-card ul { margin:10px 0 0; padding-left:18px; color:var(--muted); }
.price-card li { margin:6px 0; }

.footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 28px 0 14px;
    background: #081423;
}
.footer-grid {
    display:grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
}
.footer h4, .footer h3 { margin-top: 0; }
.footer a { display:block; color: var(--muted); margin-bottom: 8px; }
.copy { text-align:center; color: var(--muted); font-size: 13px; margin-top: 14px; }

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}