/* Product detail page */

:root { --bg:#020713; --ink:#f6f8ff; --muted:#9aa8bd; --line:rgba(93,132,200,.28); --cyan:#28b8ff; --purple:#9a4dff; --light-ink:#08111f; --light-muted:#516072; --radius:14px; --container:1456px; --font-body:"Inter",system-ui,sans-serif; --shadow-dark:0 26px 80px rgba(0,0,0,.34); --shadow-light:0 18px 50px rgba(24,54,98,.1); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } button,input,select,textarea{ font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid rgba(40,184,255,.72); outline-offset:4px; }
.skip-link{ position:fixed; top:14px; left:14px; z-index:200; transform:translateY(-150%); border-radius:999px; background:var(--cyan); color:#031018; padding:10px 16px; font-weight:800; } .skip-link:focus{ transform:translateY(0); }
.container{ width:min(calc(100% - 40px),var(--container)); margin:0 auto; } .narrow{ max-width:800px; } .section{ position:relative; padding:clamp(86px,10vw,150px) 0; }
.page-hero{ padding-top:clamp(96px,10vw,150px); padding-bottom:clamp(46px,6vw,80px); } .page-hero p:not(.eyebrow){ max-width:700px; margin-top:20px; color:rgba(244,247,255,.82); font-size:1.08rem; }
.site-bg{ position:fixed; inset:0; z-index:-4; overflow:hidden; background:radial-gradient(ellipse at 67% 30%, rgba(40,133,255,.28), transparent 33%),radial-gradient(ellipse at 86% 35%, rgba(157,52,255,.28), transparent 32%),linear-gradient(180deg,#020712 0%,#030a17 44%,#020611 100%); }
.site-bg::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(42,115,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(42,115,224,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 86%); animation:gridDrift 28s linear infinite; }
.site-bg span{ position:absolute; width:42vw; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.16; animation:glowMove 18s ease-in-out infinite alternate; } .site-bg span:nth-child(1){ top:14%; left:-10%; background:var(--cyan); } .site-bg span:nth-child(2){ right:-12%; top:36%; background:var(--purple); animation-delay:-6s; } .site-bg span:nth-child(3){ left:36%; bottom:-28%; background:#3b82ff; animation-delay:-11s; }
.cursor-glow{ position:fixed; top:0; left:0; z-index:-1; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(40,184,255,.12),transparent 68%); pointer-events:none; transform:translate3d(-50%,-50%,0); }
h1,h2,h3{ color:var(--ink); font-family:var(--font-body); font-weight:800; line-height:1.04; letter-spacing:-.045em; } h1{ font-size:clamp(3.35rem,4.3vw,4.6rem); } h2{ font-size:clamp(1.7rem,2vw,2.15rem); } h3{ font-size:1.08rem; } p{ color:var(--muted); }
.eyebrow{ margin-bottom:8px; color:#a15dff; font-size:.72rem; font-weight:900; letter-spacing:.26em; text-transform:uppercase; }
.btn{ position:relative; display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:10px; overflow:hidden; border:1px solid transparent; border-radius:10px; padding:0 22px; color:var(--ink); font-size:.94rem; font-weight:800; line-height:1; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .btn-primary{ background:linear-gradient(135deg,#8f43ff 0%,#2ea8ff 100%); box-shadow:0 14px 38px rgba(50,130,255,.28); } .btn-secondary{ border-color:rgba(180,197,235,.34); background:rgba(2,9,22,.52); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }
.surface{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 20% 0%, rgba(62,136,255,.12), transparent 36%),linear-gradient(180deg, rgba(7,24,52,.82), rgba(3,13,30,.74)); box-shadow:var(--shadow-dark); backdrop-filter:blur(20px); }
.icon{ width:22px; height:22px; } .icon-small{ width:16px; height:16px; } .icon-large{ width:30px; height:30px; }
.light-section{ color:var(--light-ink); background:linear-gradient(180deg,#f8fbff 0%,#fff 46%,#f4f8ff 100%); } .light-section-soft{ background:linear-gradient(180deg,rgba(246,249,255,.96),rgba(255,255,255,.98)); } .light-transition{ border-top:1px solid rgba(115,147,196,.2); box-shadow:inset 0 38px 80px rgba(31,86,166,.08); }
.light-section h1,.light-section h2,.light-section h3{ color:var(--light-ink); } .light-section p,.light-section .muted,.light-section .best-for{ color:var(--light-muted); } .light-section .surface,.light-section .detail-card{ border-color:rgba(64,96,148,.16); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,251,255,.78)); box-shadow:var(--shadow-light),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.light-section .proof-list div,.light-section .feature-list li{ border:1px solid rgba(65,91,133,.14); border-radius:var(--radius); background:rgba(255,255,255,.72); color:#44556a; list-style:none; padding:16px 18px; box-shadow:0 12px 32px rgba(24,54,98,.06); }
.reveal{ opacity:0; transform:translateY(22px) scale(.985); transition:opacity .65s ease,transform .65s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
@keyframes gridDrift{ to{ background-position:44px 44px; } } @keyframes glowMove{ from{ transform:translate3d(-3%,-2%,0) scale(1); } to{ transform:translate3d(4%,3%,0) scale(1.08); } }
@media (max-width:760px){ .container{ width:min(calc(100% - 28px),var(--container)); } .section{ padding:78px 0; } h1{ font-size:clamp(2.75rem,13vw,4rem); } }

.detail-hero,
.detail-grid,
.split-layout {
    display: grid;
    gap: 34px;
}

.detail-hero {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
}

.detail-module {
    display: grid;
    min-height: 340px;
    place-items: center;
    align-content: center;
    gap: 20px;
}

.product-icon {
    display: grid;
    width: 120px;
    height: 120px;
    place-items: center;
    border: 1px solid rgba(40, 184, 255, 0.22);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(40, 184, 255, 0.16), rgba(154, 77, 255, 0.11));
    color: var(--cyan);
}

.detail-icon .icon-large {
    width: 54px;
    height: 54px;
}

.status-badge {
    border-radius: 999px;
    background: rgba(101, 244, 189, 0.12);
    color: #0f7a50;
    padding: 8px 12px;
    font-weight: 900;
}

.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card {
    padding: clamp(24px, 4vw, 38px);
}

.split-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
}

.feature-list,
.proof-list {
    display: grid;
    gap: 12px;
}

@media (max-width: 900px) {
    .detail-hero,
    .detail-grid,
    .split-layout {
        grid-template-columns: 1fr;
    }
}