/* Products listing 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; }
body::before { content:""; position:fixed; inset:0; z-index:-5; pointer-events:none; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at 50% 48%, transparent 0 42%, rgba(0,0,0,.18) 76%, rgba(0,0,0,.64) 100%),linear-gradient(90deg, rgba(0,0,0,.4), transparent 18%, transparent 78%, rgba(0,0,0,.4)); }
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); }
.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); }
.surface::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,0%), rgba(95,179,255,.14), transparent 36%); opacity:0; transition:opacity .22s ease; }
.surface:hover::before { opacity:1; }
.icon { width:22px; height:22px; } .icon-small{ width:16px; height:16px; } .icon-large{ width:30px; height:30px; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:#8bb7ff; font-size:.91rem; font-weight:600; }
.light-section { color:var(--light-ink); background:radial-gradient(circle at 12% 0%, rgba(48,132,255,.12), transparent 34%),radial-gradient(circle at 88% 18%, rgba(154,77,255,.1), transparent 28%),linear-gradient(180deg,#f8fbff 0%,#fff 46%,#f4f8ff 100%); }
.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 { 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); }
.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); } }

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.product-card {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 3vw, 32px);
}

.product-card .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

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

.card-category {
    width: max-content;
    border-radius: 999px;
    background: rgba(48, 132, 255, 0.08);
    color: #66758a;
    padding: 6px 10px;
    font-size: 0.76rem;
    font-weight: 800;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-row span {
    border: 1px solid rgba(62, 99, 159, 0.14);
    border-radius: 999px;
    background: rgba(243, 247, 255, 0.84);
    color: #405067;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

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

.text-link {
    margin-top: auto;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}