:root{
  --ink:#080b12; --ink-2:#0e1320; --card:#121a2b; --line:#1e2a41;
  --text:#e8eef7; --muted:#93a2bd; --cyan:#3fd0e0; --cyan-2:#7ef0ff;
  --pink:#f19ad6; --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1000px 600px at 20% -10%, #17203a 0%, var(--ink) 55%) fixed;
  color:var(--text);
  font:16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--cyan-2)}
.wrap{width:min(1120px,92%); margin:0 auto}
.page{flex:1; padding:32px 0 64px}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h1{font-size:2rem} h2{font-size:1.35rem}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,11,18,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.announcement{text-align:center;background:var(--pink);color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--pink)}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);font-weight:600;position:relative;padding:4px 0;transition:color .2s}
.nav a:hover{color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);transition:width .25s ease}
.nav a:hover::after{width:100%}
.nav a.accent{color:var(--pink)}
.cart-link .badge{display:inline-block;min-width:22px;text-align:center;background:var(--cyan);color:#04131a;border-radius:999px;font-size:.75rem;padding:1px 7px;margin-left:4px;font-weight:800}

/* footer */
.site-footer{border-top:1px solid var(--line);background:rgba(8,11,18,.6);padding:28px 0}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.footer-inner a{display:block;color:var(--muted)}
.footer-inner a:hover{color:var(--cyan)}

/* buttons */
.btn{
  display:inline-block;border:0;cursor:pointer;font-weight:700;font-size:.95rem;
  padding:11px 20px;border-radius:999px;color:#04131a;
  background:linear-gradient(120deg,var(--cyan),var(--cyan-2));
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 6px 18px rgba(63,208,224,.18);
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px rgba(63,208,224,.32);color:#04131a}
.btn:active{transform:translateY(0) scale(.99)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.danger{background:linear-gradient(120deg,#fb7185,#f87171);color:#1b0709}
.btn.small{padding:7px 14px;font-size:.82rem}

/* cards, forms */
.card{background:linear-gradient(180deg,var(--card),var(--ink-2));border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
label{display:block;margin:0 0 14px;font-weight:600;font-size:.9rem;color:var(--muted)}
input,select,textarea{
  width:100%;margin-top:6px;padding:11px 13px;border-radius:10px;
  background:#0b1220;border:1px solid var(--line);color:var(--text);font:inherit;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(63,208,224,.15)}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.note{padding:12px 15px;border-radius:10px;margin:0 0 16px;border:1px solid var(--line);background:#0c1424}
.note.ok{border-color:rgba(74,222,128,.45);color:#bbf7d0}
.note.warn{border-color:rgba(251,191,36,.45);color:#fde68a}
.note.err{border-color:rgba(248,113,113,.45);color:#fecaca}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;margin-bottom:44px}
.hero-img{width:100%;border-radius:20px;border:1px solid var(--line);display:block}
.hero h1{font-size:2.6rem;background:linear-gradient(100deg,#fff,var(--cyan-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero{position:relative;min-height:68vh;margin:-32px calc(50% - 50vw) 0;background:url('hero.jpg') center/cover;display:flex;align-items:center;overflow:hidden}
.home-hero-shade{position:absolute;inset:0;background:rgba(8,11,18,.68)}
.home-hero-copy{position:relative;width:min(1120px,92%);margin:auto}.home-hero h1{font-size:clamp(3rem,8vw,6.5rem);margin:.15em 0}.home-hero h1 em{font-style:normal;color:var(--cyan)}.home-hero-copy>p{font-size:1.2rem}.home-hero-copy .btn{margin-top:22px}
.kicker{display:block;color:var(--cyan);font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.kicker.pink{color:var(--pink)}
.home-section{padding:64px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.section-band{position:relative}.section-band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:rgba(18,26,43,.35);border-block:1px solid var(--line);z-index:-1}
.category-icon{font-size:2rem}.split-feature{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:40px;align-items:center}.gift-art,.workshop-art{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);background:rgba(241,154,214,.08);display:grid;place-items:center;font-size:6rem}.workshop-art{background:var(--card)}.workshop-art span{display:block;font-size:.8rem;color:var(--muted)}.lead{font-size:1.1rem}.benefit-grid>div{padding:10px}.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.shipping-callout{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:50px 0;border-top:1px solid var(--line)}
@media(max-width:820px){.hero{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

/* products */
.product-card{overflow:hidden;position:relative;display:flex;flex-direction:column}
.product-badge{position:absolute;z-index:2;top:12px;left:12px;background:var(--pink);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:.7rem;font-weight:800;text-transform:uppercase}
.product-card .thumb{aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:#0b1220;margin:-4px 0 14px}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .thumb img{transform:scale(1.07)}
.product-card h3{transition:color .2s}
.product-card:hover h3{color:var(--cyan-2)}
.price{font-weight:800;color:var(--cyan-2);font-size:1.1rem}
.pill{display:inline-block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-right:6px}
.pill.promo{border-color:var(--pink);color:var(--pink)}.back-link{display:inline-block;margin-bottom:20px}.product-view{align-items:start}.product-photo{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.product-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.product-price{font-size:1.8rem}.product-price small{font-size:.75rem;color:var(--muted)}.buy-panel{display:flex;gap:12px;align-items:end;margin:24px 0}.buy-panel label{margin:0;max-width:180px}.gift-note{padding:16px;border:1px solid rgba(241,154,214,.35);border-radius:var(--radius);background:rgba(241,154,214,.08)}.product-info{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}.product-info dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.product-info dt{color:var(--muted);font-size:.8rem}.product-info dd{margin:2px 0}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(63,208,224,.05)}
.table-scroll{overflow-x:auto}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tab{padding:8px 15px;border-radius:999px;color:var(--muted);font-weight:600;border:1px solid transparent;transition:all .2s}
.tab:hover{color:var(--text);border-color:var(--line)}
.tab.active{background:rgba(63,208,224,.13);color:var(--cyan-2);border-color:rgba(63,208,224,.4)}

/* install */
.install-page{display:grid;place-items:center;padding:40px 16px}
.install-card{width:min(560px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.install-logo{width:70px;border-radius:50%;box-shadow:0 0 0 2px var(--pink);margin-bottom:12px}

/* animations */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.92)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ring{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sheen{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
.anim-rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.anim-pop{animation:pop .45s cubic-bezier(.2,.7,.3,1) both}
.anim-float{animation:float 5s ease-in-out infinite}
.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}
.hover-lift{transition:transform .25s ease, box-shadow .25s ease, border-color .25s}
.hover-lift:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:rgba(63,208,224,.45)}
.hover-pop{transition:transform .2s ease}
.hover-pop:hover{transform:scale(1.06)}
.hover-sheen{position:relative;overflow:hidden}
.hover-sheen::before{content:"";position:absolute;inset:0 auto 0 0;width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-120%)}
.hover-sheen:hover::before{animation:sheen .9s ease}

/* success tick */
.success-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  background:rgba(74,222,128,.12);border:2px solid rgba(74,222,128,.55);animation:ring .5s cubic-bezier(.2,.7,.3,1) both}
.success-ring svg{width:40px;height:40px;stroke:var(--ok);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success-ring path{stroke-dasharray:48;stroke-dashoffset:48;animation:draw .55s .3s ease forwards}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:820px){.split-feature,.social-grid{grid-template-columns:1fr}.shipping-callout{align-items:flex-start;flex-direction:column}.home-hero{min-height:64vh}.nav{gap:10px;font-size:.85rem}.buy-panel{align-items:stretch;flex-direction:column}.buy-panel label{max-width:none}}