:root{
  --bg:#05060a;
  --text:#f5f7ff;
  --muted:rgba(245,247,255,.72);
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  --shadow: 0 30px 120px rgba(0,0,0,.55);
  --c1:#7dd3fc;
  --c2:#a78bfa;
  --c3:#86efac;
  --c4:#fbbf24;
  --radius:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(900px 700px at 20% 10%, rgba(125,211,252,.14), transparent 62%),
              radial-gradient(800px 600px at 85% 15%, rgba(167,139,250,.14), transparent 58%),
              radial-gradient(900px 650px at 60% 95%, rgba(134,239,172,.10), transparent 60%),
              linear-gradient(180deg, #05060a, #070a12);
  overflow-x:hidden;
}
#glow{
  position:fixed; width:36px; height:36px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(125,211,252,.55), rgba(167,139,250,.28), transparent 62%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translate(-999px,-999px);
  z-index:9999;
}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,6,10,.62);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.wrap{max-width:1180px; margin:0 auto; padding:18px 22px;}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.brand img{width:40px; height:40px; border-radius:14px; border:1px solid rgba(255,255,255,.18)}
.brand .name{font-weight:1000; letter-spacing:.4px}
.brand .tag{font-size:12px; color:var(--muted); margin-top:2px}
nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
nav a{color:rgba(245,247,255,.72); padding:8px 12px; border-radius:14px; border:1px solid transparent; text-decoration:none;}
nav a:hover{color:var(--text); border-color: rgba(255,255,255,.16)}
nav a.active{color:var(--text); border-color: rgba(125,211,252,.38); background: rgba(125,211,252,.08);}
.container{max-width:1180px; margin:0 auto; padding:22px;}
.card{border:1px solid rgba(255,255,255,.14); background: var(--glass); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden;}
.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); font-weight:900; font-size:13px;}
.badge i{width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--c1), var(--c2)); display:inline-block;}
h1{font-size: clamp(38px, 5.2vw, 74px); line-height: .98; margin: 14px 0 10px; letter-spacing:-1px; font-weight:1000;}
h2{font-size: clamp(22px, 2.5vw, 34px); letter-spacing:-.3px; margin:0 0 10px; font-weight:950;}
p{color:var(--muted); line-height:1.7; margin:0}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 15px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:var(--text); font-weight:950; text-decoration:none; position:relative; overflow:hidden;}
.btn:before{content:""; position:absolute; inset:-2px; background: linear-gradient(135deg, rgba(125,211,252,.55), rgba(167,139,250,.42), rgba(134,239,172,.35)); opacity:0; transition:opacity .25s ease;}
.btn span{position:relative; z-index:1}
.btn:hover:before{opacity:.22}
.btn.primary{border-color: rgba(125,211,252,.42); background: linear-gradient(135deg, rgba(125,211,252,.18), rgba(167,139,250,.16));}
.btn.ghost{background:transparent}
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px;}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }
.hero-left{padding:24px}
.hero-right{padding:18px}
.hero .bigline{font-weight:1000; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 10px 45px rgba(125,211,252,.12));}
.sub{margin-top:8px; font-size:16px}
.strip{margin-top:16px; border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); overflow:hidden;}
.marquee{display:flex; gap:32px; padding:12px 0; white-space:nowrap; will-change: transform; animation: scroll 18s linear infinite; font-weight:950; letter-spacing:.5px; color:rgba(245,247,255,.78);}
.marquee span{display:inline-flex; align-items:center; gap:10px;}
.marquee b{width:8px; height:8px; border-radius:50%; background: linear-gradient(135deg,var(--c1),var(--c2)); display:inline-block;}
@keyframes scroll{from{transform: translateX(0)} to{transform: translateX(-50%)}}
.frame{border-radius:20px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); overflow:hidden;}
.frame img{width:100%; height:240px; object-fit:cover}
.frame .cap{padding:14px}
.frame .cap .t{font-weight:1000}
.frame .cap .s{margin-top:6px; font-size:13px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
@media (max-width: 980px){ .grid3,.grid2{grid-template-columns:1fr} }
.tile{padding:16px; border-radius:22px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); position:relative; overflow:hidden;}
.tile:after{content:""; position:absolute; inset:-60px; background: radial-gradient(circle at 20% 20%, rgba(125,211,252,.12), transparent 55%), radial-gradient(circle at 80% 30%, rgba(167,139,250,.12), transparent 55%); transform: rotate(6deg); opacity:.75;}
.tile > *{position:relative; z-index:1}
.tile h3{margin:0 0 8px; font-size:16px; font-weight:1000}
.tile p{margin:0; font-size:14px}
.product{border-radius:22px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); overflow:hidden; transform-style:preserve-3d; transition: transform .18s ease, border-color .18s ease;}
.product img{width:100%; height:190px; object-fit:cover}
.product .body{padding:14px}
.product .t{font-weight:1000}
.product .s{margin-top:6px; font-size:13px}
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.pill{font-size:12px; font-weight:950; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(245,247,255,.88);}
.product:hover{border-color: rgba(125,211,252,.35)}
.section{margin-top:18px}
.callout{padding:14px 16px; border-radius:20px; border:1px solid rgba(125,211,252,.35); background: rgba(125,211,252,.08); color: rgba(245,247,255,.90);}
footer{margin-top:22px; border-top:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18);}
.footer{display:grid; grid-template-columns: 1.2fr .8fr; gap:12px;}
@media (max-width: 980px){ .footer{grid-template-columns:1fr} }
small{color:rgba(245,247,255,.65); line-height:1.7}
form{display:grid; gap:10px}
label{font-weight:950; font-size:13px}
input,textarea,select{width:100%; padding:12px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text); outline:none;}
textarea{min-height:150px; resize:vertical}
input:focus,textarea:focus,select:focus{border-color: rgba(125,211,252,.48)}
.gallery{columns: 3 240px; column-gap: 12px;}
.gitem{break-inside: avoid; margin: 0 0 12px; border-radius: 22px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor:pointer;}
.gcap{padding:12px}
.gcap .t{font-weight:1000}
.gcap .s{margin-top:6px; font-size:13px}
.lb{position:fixed; inset:0; display:none; z-index:1000; background: rgba(0,0,0,.82)}
.lb.open{display:flex; align-items:center; justify-content:center}
.lb-inner{width:min(1100px, 92vw); border-radius: 24px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(10,12,18,.95)}
.lb-top{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.12)}
.lb-top .meta{display:flex; flex-direction:column; gap:2px}
.lb-top .meta .t{font-weight:1000}
.lb-top .meta .s{color:rgba(245,247,255,.70); font-size:13px}
.lb-img{background:#000; height:min(70vh, 680px)}
.lb-img img{width:100%; height:100%; object-fit:contain}
.lb-nav{display:flex; justify-content:flex-end; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.12)}
.lb-btn{cursor:pointer; padding:8px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:var(--text); font-weight:950}
.lb-btn:hover{border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.10)}