/* shared.css — product pages */
:root {
    --surface: #0a0a0a; --surface-1: #111; --surface-2: #181818;
    --white: #fff; --zinc-300: #d4d4d4; --zinc-400: #a3a3a3;
    --zinc-500: #737373; --zinc-600: #525252; --emerald: #10b981;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0a0a; color: #d4d4d4; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; overflow-x: hidden; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,.headline { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.03em; color: #fff; }
h1,h2 { font-weight: 400; }
h3,h4,.headline { font-weight: 600; }
.display { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; }
.heading-lg { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.heading-md { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.1; }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #525252; }
.glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(0,0,0,0.15), 0 8px 32px rgba(0,0,0,0.35); }
.glass-strong { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(56px) saturate(200%); -webkit-backdrop-filter: blur(56px) saturate(200%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.2), 0 16px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05); }
.btn { display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);padding:10px 20px;border-radius:9999px;text-decoration:none;cursor:pointer;transition:all 240ms ease; }
.btn:hover { background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.22); }
.btn-primary { background:rgba(255,255,255,0.92);border-color:transparent;color:#0a0a0a;font-weight:600; }
.btn-primary:hover { background:#fff;box-shadow:0 0 24px rgba(255,255,255,0.15); }
.dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 10px rgba(16,185,129,0.5);flex-shrink:0; }
hr.hairline { border:none;border-top:1px solid rgba(255,255,255,0.07); }
.tile { border-radius:18px;padding:28px;transition:all 300ms ease; }
.tile:hover { background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.16);transform:translateY(-2px); }
.container { max-width:1100px;margin:0 auto;padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px); }
.section { padding:96px 0; }
/* Dropdown nav */
.has-dropdown { position:relative; }
.dropdown { position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:280px;opacity:0;pointer-events:none;transition:opacity 250ms ease,transform 250ms ease;z-index:100;border-radius:20px; }
.dropdown::before { content:'';position:absolute;top:-12px;left:0;right:0;height:12px; }
.dropdown > div { border-radius:20px;overflow:hidden; }
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown { opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); }
/* Hero video */
.video-wrap { position:absolute;inset:0;overflow:hidden;background:#0a0a0a; }
.video-wrap::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(16,185,129,0.28) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 75% 65%,rgba(5,150,105,0.18) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 50% 20%,rgba(16,185,129,0.12) 0%,transparent 50%); }
.video-wrap video { width:100%;height:100%;object-fit:cover;opacity:0;position:relative;z-index:1;transition:opacity 0.9s ease; }
.video-wrap video.playing { opacity:0.75; }
.video-wrap::after { content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(10,10,10,0.2) 0%,rgba(10,10,10,0.55) 55%,#0a0a0a 100%); }
/* Section video gradient overlay */
.sv-grad { position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(10,10,10,0.2) 0%,rgba(10,10,10,0.45) 55%,#0a0a0a 100%);pointer-events:none; }
/* Scroll fade-in */
.fade-up { opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-up.visible { opacity:1;transform:translateY(0); }
::selection { background:rgba(255,255,255,0.15);color:#fff; }
/* Prose (legal/document pages) */
.prose-dark h2 { font-family:'Space Grotesk',sans-serif;color:#fff;font-size:1.25rem;font-weight:700;margin-top:2.5rem;margin-bottom:0.75rem;letter-spacing:-0.025em; }
.prose-dark h3 { font-family:'Space Grotesk',sans-serif;color:#d1fae5;font-size:1rem;font-weight:600;margin-top:1.5rem;margin-bottom:0.5rem;letter-spacing:-0.015em; }
.prose-dark p { color:#9ca3af;line-height:1.8;margin-bottom:1rem; }
.prose-dark ul { color:#9ca3af;line-height:1.8;margin-bottom:1rem;padding-left:1.5rem;list-style:disc; }
.prose-dark li { margin-bottom:0.35rem; }
.prose-dark a { color:#10b981;text-decoration:underline; }
.prose-dark strong { color:#e5e7eb; }
.notice-box { background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.22);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.5rem; }
.notice-box p { margin-bottom:0;color:#a7f3d0; }
.notice-box strong { color:#10b981; }
.warning-box { background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.22);border-radius:14px;padding:1.25rem 1.5rem;margin-bottom:1.5rem; }
.warning-box p { margin-bottom:0;color:#fde68a; }
.warning-box strong { color:#fbbf24; }
.cookie-table { width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:0.875rem; }
.cookie-table th { background:#111;color:#d1fae5;font-weight:600;text-align:left;padding:0.65rem 0.9rem;border:1px solid rgba(255,255,255,0.08); }
.cookie-table td { color:#9ca3af;padding:0.6rem 0.9rem;border:1px solid rgba(255,255,255,0.05);vertical-align:top; }
.cookie-table tr:nth-child(even) td { background:rgba(255,255,255,0.02); }