*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#000;color:#fff;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:#fff}.w{max-width:1100px;margin:auto;padding:0 20px}nav{position:sticky;top:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);border-bottom:1px solid #222;z-index:5}
nav .w{display:flex;align-items:center;gap:18px;height:76px}nav img{height:clamp(26px,5vw,46px);width:auto;display:block}@media(max-width:640px){nav .w{height:64px}}nav .sp{flex:1}nav a{text-decoration:none;color:#bbb;font-size:14px}nav a:hover{color:#fff}
.btn{display:inline-block;background:#fff;color:#000;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid #fff}.btn.o{background:transparent;color:#fff}
.btn:hover{opacity:.85}nav .btn{padding:7px 16px;font-size:14px;color:#000}
.hero{padding:90px 0 70px;text-align:center}.hero img{height:min(230px,40vw)}.hero h1{font-size:clamp(30px,6vw,56px);line-height:1.1;margin:24px 0 12px;letter-spacing:-1px}
.hero p{color:#aaa;font-size:clamp(16px,2.4vw,20px);max-width:640px;margin:0 auto 30px}.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{padding:70px 0;border-top:1px solid #161616}h2{font-size:clamp(26px,4vw,38px);margin:0 0 8px;letter-spacing:-.5px}.sub{color:#999;margin:0 0 34px}
.g{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.c{border:1px solid #262626;border-radius:16px;padding:22px;background:#0a0a0a}
.c h3{margin:0 0 6px;font-size:18px}.c p{margin:0;color:#aaa;font-size:15px}.n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#000;font-weight:800;margin-bottom:10px}
.price{font-size:46px;font-weight:800}.price small{font-size:16px;color:#999;font-weight:400}details{border-bottom:1px solid #222;padding:14px 0}summary{cursor:pointer;font-weight:600}details p{color:#aaa}
footer{padding:40px 0;color:#777;font-size:14px;border-top:1px solid #161616}footer .w{display:flex;gap:20px;flex-wrap:wrap;align-items:center}footer img{height:48px}
.dl{display:flex;flex-direction:column;gap:10px}.dl .meta{font-size:12px;color:#888;word-break:break-all}code{background:#151515;padding:2px 6px;border-radius:6px}
@media(max-width:700px){nav .hide-m{display:none}}
/* v3: lime accent */
body{background:#0b0b0c}.btn{background:#c8f169;color:#0b0b0c;transition:transform .15s}.btn:active{transform:scale(.96)}.btn.ghost,.btn.alt{background:#1e1e21;color:#fff}
h1 em,h2 em,.accent{color:#c8f169;font-style:normal}
/* Landing motion: works on desktop + mobile (targets new glass hero markup) */
nav a[data-home] img{
  animation:rpNavIn .9s cubic-bezier(.2,.8,.2,1) both,rpNavPulse 2.4s ease-in-out 1s infinite;
  will-change:clip-path,opacity,filter
}
.hero .hero-main>img{
  animation:rpHeroIn 1s cubic-bezier(.2,.8,.2,1) .1s both,rpHeroGlow 2.2s ease-in-out 1.1s infinite;
  will-change:transform,opacity,filter
}
.hero-main{
  animation:rpPanelIn .85s cubic-bezier(.2,.8,.2,1) both
}
.hero-side .glass{
  animation:rpCardIn .75s cubic-bezier(.2,.8,.2,1) both
}
.hero-side .glass:nth-child(1){animation-delay:.15s}
.hero-side .glass:nth-child(2){animation-delay:.28s}
.hero-side .glass:nth-child(3){animation-delay:.4s}
@keyframes rpNavIn{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes rpNavPulse{0%,100%{filter:drop-shadow(0 0 0 transparent);opacity:1}50%{filter:drop-shadow(0 0 10px rgba(200,241,105,.55));opacity:.88}}
@keyframes rpHeroIn{from{opacity:0;transform:scale(.72) translateY(18px);filter:blur(6px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes rpHeroGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 28px rgba(200,241,105,.65))}}
@keyframes rpPanelIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rpCardIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  nav a[data-home] img,.hero .hero-main>img,.hero-main,.hero-side .glass{animation:none}
}
/* v4: glass layered landing */
body{background:radial-gradient(900px 600px at 15% -10%,rgba(200,241,105,.18),transparent 60%),radial-gradient(800px 600px at 100% 30%,rgba(90,120,255,.12),transparent 60%),#0b0b0c;background-attachment:fixed}
nav{background:rgba(11,11,12,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08)}
section{border-top:0}
.hero{padding:60px 0 50px;text-align:left}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero-main{position:relative;border-radius:36px;padding:48px 40px;background:linear-gradient(160deg,rgba(200,241,105,.16),rgba(255,255,255,.03) 55%);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.hero .hero-main>img{height:84px;display:block}
.hero h1{font-size:clamp(38px,6.4vw,76px);font-weight:900;letter-spacing:-2px;line-height:1;margin:22px 0 14px}
.hero p{margin:0 0 28px}.cta{justify-content:flex-start}
.hero-side{display:grid;gap:16px}
.glass{border-radius:28px;padding:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.glass .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c8f169;font-weight:700}
.glass .big{font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-1px;margin:6px 0}
.glass .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.chip{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600}
.glass.lime{background:#c8f169;color:#0b0b0c}.glass.lime .k{color:#0b0b0c;opacity:.7}
.hero-side .glass:nth-child(2){animation-name:rpCardIn2}
@keyframes rpCardIn2{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateX(-24px)}}
@media(max-width:820px){.hero-side .glass:nth-child(2){animation-name:rpCardIn}}
.c{border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .2s,border-color .2s}
.c:hover{transform:translateY(-4px);border-color:rgba(200,241,105,.4)}
h2{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-1.5px}
.n{background:#c8f169}
details{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px 18px;margin-bottom:10px;background:rgba(255,255,255,.035)}
@media(max-width:820px){.hero .w{grid-template-columns:1fr}.hero-main{padding:32px 22px}.hero-side .glass:nth-child(2){transform:none}}
/* v5: breathing room */
.cta{gap:16px}.g{gap:24px}section{padding:90px 0}.sub{margin-bottom:40px}.c p+p{margin-top:12px}nav .w{gap:24px}.hero-side{gap:20px}footer .w{gap:24px}#contact .btn{margin:6px 10px 6px 0}