:root{--ink:#080c14;--ink2:#0c121d;--surface:#111826;--paper:#edf4f7;--muted:#9aaabc;--line:rgba(237,244,247,.15);--cyan:#38d9ff;--amber:#f0a251;--lime:#b7f36d;--display:"Space Grotesk",Arial,sans-serif;--body:"Inter",Arial,sans-serif;--mono:"DM Mono",monospace;--pad:clamp(1.25rem,5vw,4.5rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit}
h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-family:var(--display)}
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:200;padding:.7rem 1rem;background:var(--cyan);color:var(--ink);font-weight:700}.skip-link:focus{top:1rem}
/* age gate */
.age-gate{display:none;position:fixed;inset:0;z-index:300;background:rgba(5,8,14,.96);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:1.5rem}
.needs-age .age-gate{display:flex}.needs-age body{overflow:hidden}
.age-box{max-width:480px;text-align:center;border:1px solid var(--line);background:var(--surface);padding:2.5rem 2rem;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.age-stamp{display:inline-grid;place-items:center;width:84px;height:84px;border:2px solid var(--amber);color:var(--amber);border-radius:50%;font:700 1.7rem var(--display);margin-bottom:1.2rem;transform:rotate(-6deg)}
.age-box h2{font-size:2rem;letter-spacing:-.04em;margin-bottom:.8rem}.age-box p{color:var(--muted)}
.age-actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
/* header */
.site-header{display:flex;align-items:center;gap:1.5rem;min-height:80px;padding:0 var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:rgba(8,12,20,.92);backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;min-width:max-content}
.brand-mark{width:32px;height:32px;display:grid;place-items:center}.brand-mark svg{width:100%;height:100%}
.brand-type{display:flex;align-items:baseline;gap:.4rem;font-family:var(--display)}.brand-type strong{letter-spacing:.11em;font-size:.95rem}.brand-type span{color:var(--muted);font-size:.78rem}
.site-nav{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.site-nav a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;transition:color .18s}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--cyan)}
.site-nav .nav-cta{background:var(--cyan);color:var(--ink);padding:.55rem .9rem}.site-nav .nav-cta:hover{background:#85e8ff;color:var(--ink)}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--paper);padding:.5rem .8rem;font:600 .8rem var(--body);cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.3rem;border:1px solid transparent;font:700 .82rem var(--body);text-decoration:none;cursor:pointer;transition:transform .18s,background .18s}
.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--cyan);color:var(--ink)}.btn-primary:hover{background:#85e8ff}
.btn-ghost{border-color:var(--line);color:var(--paper);background:transparent}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.eyebrow{display:flex;gap:.7rem;margin:0 0 1.2rem;color:var(--cyan);font:.7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.eyebrow span{color:var(--amber)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center;padding:5rem var(--pad) 4rem}
h1{font-size:clamp(2.8rem,5.6vw,5.6rem);letter-spacing:-.06em;line-height:.96;margin-bottom:1.4rem}
h1 em{font-style:normal;color:var(--cyan);box-shadow:inset 0 -.12em 0 var(--amber)}
.hero-text{color:#c5d2dc;font-size:clamp(1rem,1.5vw,1.2rem);max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0}
.hero-points{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.hero-points li{border:1px solid var(--line);color:var(--muted);font:.66rem var(--mono);padding:.4rem .6rem}
.hero-visual{margin:0;position:relative;min-height:480px;overflow:hidden;background:var(--surface)}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,20,.6),transparent 45%)}
.hero-visual figcaption{position:absolute;right:1.2rem;bottom:1rem;z-index:2;font:.68rem var(--mono);color:var(--cyan)}
.strip{display:flex;gap:2.2rem;overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:1rem var(--pad);color:var(--muted);font:.72rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.strip span::before{content:"◆";color:var(--amber);margin-right:.7rem;font-size:.6rem}
/* sections */
.section{padding:6rem var(--pad)}.section.alt{background:var(--ink2)}
.section-head{display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:2rem;align-items:end;margin-bottom:3.5rem}
.section-head .eyebrow{margin-bottom:.5rem}.section-head h2{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.055em;line-height:1;margin:0}.section-head>p:last-child{color:var(--muted);margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tile{position:relative;display:block;min-height:480px;overflow:hidden;text-decoration:none;background:var(--surface);border:1px solid var(--line)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.tile:hover img{transform:scale(1.06)}
.tile-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,20,.96) 8%,rgba(8,12,20,.35) 60%,transparent)}
.tile-body{position:absolute;inset:auto 0 0;padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.tile-no{color:var(--amber);font:.7rem var(--mono)}.tile strong{font:700 1.9rem/1.05 var(--display);letter-spacing:-.04em}
.tile-text{color:#c5d2dc;font-size:.92rem}.tile-go{color:var(--cyan);font:700 .8rem var(--body);margin-top:.4rem}
.why,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;padding:0;margin:0}
.steps{grid-template-columns:repeat(4,1fr)}
.why>div,.steps li{border-top:2px solid var(--cyan);background:var(--surface);padding:1.6rem}
.why span,.steps li>span{display:inline-grid;color:var(--amber);font:.75rem var(--mono);margin-bottom:.8rem}
.steps li>span{width:34px;height:34px;place-items:center;border:1px solid var(--amber);border-radius:50%}
.why h3,.steps h3{font-size:1.25rem;letter-spacing:-.03em;margin-bottom:.5rem}.why p,.steps p{color:var(--muted);margin:0;font-size:.95rem}
.cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:4.5rem var(--pad);background:linear-gradient(100deg,#0e2432,#08111c 60%);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(1.8rem,3.4vw,3.2rem);letter-spacing:-.05em;line-height:1;margin-bottom:.8rem}.cta p{color:#c5d2dc;max-width:560px;margin:0}
/* category pages */
.page-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:4.5rem var(--pad) 3.5rem}
.page-hero.narrow{grid-template-columns:1fr;padding-bottom:2rem}.page-hero h1{font-size:clamp(2.4rem,4.8vw,4.8rem)}
.page-visual{margin:0;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--line)}.page-visual img{width:100%;height:100%;object-fit:cover}
.notice-bar{display:flex;align-items:center;gap:1.2rem;margin:0 var(--pad);padding:1rem 1.3rem;border:1px solid rgba(240,162,81,.4);background:rgba(240,162,81,.06)}
.notice-bar p{margin:0;color:#e5d4bf;font-size:.92rem}.notice-18{display:grid;place-items:center;flex:none;width:46px;height:46px;border:2px solid var(--amber);color:var(--amber);border-radius:50%;font:700 .9rem var(--display)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.product{background:var(--ink);padding:1.6rem;display:flex;flex-direction:column;gap:.5rem;transition:background .2s}
.product:hover{background:var(--surface)}
.product-no{color:var(--amber);font:.7rem var(--mono)}.product h3{font-size:1.2rem;letter-spacing:-.03em;margin:0}.product p{color:var(--muted);font-size:.92rem;margin:0 0 auto}
.product-link{color:var(--cyan);text-decoration:none;font:700 .8rem var(--body);margin-top:1rem}.product-link:hover{text-decoration:underline}
/* forms */
.form-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}.field{display:flex;flex-direction:column;gap:.35rem}.wide{grid-column:1/-1}
label{font-size:.82rem;font-weight:600;color:#c5d2dc}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--paper);padding:.85rem .9rem;font:1rem var(--body)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
input.invalid,select.invalid{border-color:#ff7a7a}
.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400}.check input{width:auto;margin-top:.3rem}
.form-hint{color:var(--muted);font-size:.82rem;margin:.9rem 0 0}
.side{border:1px solid var(--line);background:var(--surface);padding:1.8rem}.side h3{font-size:1rem;color:var(--cyan);margin:1.2rem 0 .4rem}.side h3:first-child{margin-top:0}
.side ul{padding-left:1.1rem;margin:0;color:var(--muted);font-size:.92rem}.side p{color:#c5d2dc;margin:0}
.legal{max-width:820px}.legal h2{font-size:1.6rem;letter-spacing:-.03em;margin:2.2rem 0 .8rem}.legal p{color:#c5d2dc}.legal a{color:var(--cyan)}
/* footer */
.site-footer{border-top:1px solid var(--line);padding:3rem var(--pad) 2rem;background:var(--ink2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}.foot-grid h4{font-size:.8rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem}
.foot-grid a:not(.brand){display:block;color:var(--muted);text-decoration:none;margin-bottom:.4rem;font-size:.92rem}.foot-grid a:not(.brand):hover{color:var(--paper)}
.foot-note{color:var(--muted);max-width:340px;margin:1rem 0 0;font-size:.9rem}
.foot-legal{border-top:1px solid var(--line);margin:2rem 0 0;padding-top:1.2rem;color:var(--muted);font-size:.78rem}
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.js [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:1000px){.hero,.page-hero,.form-wrap{grid-template-columns:1fr}.hero-visual{min-height:320px}.tiles,.why{grid-template-columns:1fr}.tile{min-height:360px}.steps{grid-template-columns:1fr 1fr}.products{grid-template-columns:1fr 1fr}.section-head{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.cta{flex-direction:column;align-items:flex-start}}
@media(max-width:1180px){.menu-toggle{display:block}.brand-type span{display:none}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--line);padding:.5rem var(--pad) 1rem;margin:0}.site-nav.is-open{display:flex}.site-nav a{padding:.8rem 0;border-bottom:1px solid var(--line)}.site-nav .nav-cta{margin-top:.8rem;text-align:center;border:0}}
@media(max-width:560px){.steps,.products,.form,.foot-grid{grid-template-columns:1fr}.section{padding:4rem var(--pad)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js [data-reveal]{opacity:1;transform:none;transition:none}.tile img{transition:none}}

.site-nav{gap:1.1rem}
.tiles.five{grid-template-columns:repeat(6,1fr)}.tiles.five .tile{grid-column:span 2}.tiles.five .tile:nth-child(n+4){grid-column:span 3}
.spot{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:3rem}
.spot.rev .spot-img{order:2}
.spot-img img{width:100%;display:block;border:1px solid var(--line)}
.spot h3{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.04em;margin-bottom:.8rem}
.spot p{color:#c5d2dc;max-width:520px}
.spot ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.6rem;color:#c5d2dc}
.spot li::before{content:"◆";color:var(--amber);margin-right:.7rem;font-size:.6rem}
.why.four{grid-template-columns:repeat(4,1fr)}
.note-box{margin-top:1.2rem;border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--surface);padding:1.6rem}
.note-box h3{font-size:1.1rem;margin-bottom:.6rem}.note-box ul{margin:0;padding-left:1.1rem;color:#c5d2dc;display:grid;gap:.4rem}
@media(max-width:1000px){.tiles.five{grid-template-columns:1fr}.tiles.five .tile,.tiles.five .tile:nth-child(n+4){grid-column:auto}.spot{grid-template-columns:1fr;gap:1.5rem}.spot.rev .spot-img{order:0}.why.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why.four{grid-template-columns:1fr}}