:root{
  --bg:#020205; --panel:#080811; --text:#f7f7ff; --muted:#c9c9d5;
  --purple:#c63cff; --cyan:#21eaff; --blue:#1682ff; --gold:#ffb331; --pink:#ff37e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; overflow-x:hidden;
  min-height:100vh;
}
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-4;
  background:
    radial-gradient(ellipse at 16% 72%,rgba(135,20,255,.42),transparent 34%),
    radial-gradient(ellipse at 52% 68%,rgba(0,132,255,.32),transparent 33%),
    radial-gradient(ellipse at 82% 71%,rgba(255,140,26,.28),transparent 28%),
    radial-gradient(circle at 50% 18%,rgba(198,60,255,.26),transparent 24%),
    linear-gradient(180deg,#000 0%,#04030a 46%,#020206 100%);
}
body:after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-3; opacity:.58;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.027) 1px, transparent 1px),
    radial-gradient(ellipse at bottom,rgba(255,255,255,.14),transparent 46%);
  background-size:100% 4px, 72px 72px, 100% 100%;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 16%, #000 88%, transparent 100%);
}
main{position:relative; isolation:isolate}
main:before{
  content:""; position:absolute; inset:110px -10vw auto; height:520px; pointer-events:none; z-index:-2;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(33,234,255,.32), transparent 38%),
    radial-gradient(ellipse at 38% 78%, rgba(198,60,255,.42), transparent 34%),
    radial-gradient(ellipse at 74% 80%, rgba(255,55,232,.24), transparent 34%);
  filter:blur(20px);
}
main:after{
  content:""; position:absolute; left:-10vw; right:-10vw; top:520px; height:250px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(198,60,255,.45),rgba(33,234,255,.38),rgba(255,179,49,.22),transparent);
  transform:perspective(600px) rotateX(64deg); filter:blur(16px); opacity:.7;
}
.site-header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:16px 5vw; background:rgba(0,0,0,.74); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(33,234,255,.42); box-shadow:0 12px 45px rgba(0,0,0,.55),0 0 28px rgba(198,60,255,.12);
}
.brand img{height:58px; max-width:280px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(198,60,255,.55))}
.nav{display:flex; gap:32px}.nav a,.header-btn{color:var(--text); text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.9rem}.nav a:hover{color:var(--cyan)}
.header-btn{border:1px solid var(--cyan); border-radius:12px; padding:14px 22px; box-shadow:0 0 18px rgba(33,234,255,.25), inset 0 0 18px rgba(198,60,255,.13)}
.hero{
  min-height:650px; display:grid; grid-template-columns:1fr; align-items:center; padding:68px 6vw 86px;
  border-bottom:1px solid rgba(198,60,255,.35); position:relative; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.28) 48%,rgba(0,0,0,.7)),
    radial-gradient(circle at 64% 42%,rgba(198,60,255,.52),transparent 22%),
    radial-gradient(circle at 74% 45%,rgba(33,234,255,.32),transparent 28%);
}
.hero:before{content:""; position:absolute; inset:0; pointer-events:none; background:url('images/pryzm-design-reference.png') center 23%/cover no-repeat; opacity:.20; mix-blend-mode:screen}
.hero:after{content:""; position:absolute; left:5vw; right:5vw; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent); box-shadow:0 0 24px var(--cyan)}
.hero-copy,.hero-mark{position:relative; z-index:1}
.eyebrow,.section-title p{text-transform:uppercase; letter-spacing:.45em; color:var(--cyan); font-family:Rajdhani,sans-serif; font-weight:700; text-shadow:0 0 16px rgba(33,234,255,.75)}
.hero h1{font-family:Rajdhani,sans-serif; text-transform:uppercase; font-size:clamp(4rem,9vw,9rem); line-height:.82; margin:12px 0; background:linear-gradient(100deg,var(--purple),#fff 38%,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; font-style:italic; filter:drop-shadow(0 0 18px rgba(198,60,255,.34))}
.hero h1 span{color:#fff; -webkit-text-fill-color:#fff}.hero p{max-width:600px; font-size:1.16rem; line-height:1.55; color:#ededf5}.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}.btn{display:inline-flex; align-items:center; justify-content:center; padding:16px 25px; border-radius:12px; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-weight:900; border:none; cursor:pointer; font-family:inherit}.primary{color:#fff; background:linear-gradient(90deg,var(--purple),var(--blue)); box-shadow:0 0 28px rgba(198,60,255,.42), inset 0 0 20px rgba(255,255,255,.12)}.ghost{color:#fff; border:1px solid var(--purple); background:rgba(0,0,0,.22)}
.hero-mark{display:flex; justify-content:center}.hero-mark img{width:min(450px,80%); filter:drop-shadow(0 0 42px rgba(33,234,255,.65)) drop-shadow(0 0 72px rgba(198,60,255,.62))}
.lineup{padding:56px 4vw 70px; position:relative}.section-title{text-align:center}.section-title h2{font-family:Rajdhani,sans-serif; text-transform:uppercase; font-size:clamp(2.3rem,5vw,4.5rem); margin:0 0 28px; letter-spacing:.08em; text-shadow:0 0 22px rgba(198,60,255,.32)}
.product-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; align-items:end}.product{text-align:center; position:relative; padding:22px 10px 20px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); border:1px solid color-mix(in srgb,var(--accent),transparent 54%); box-shadow:0 0 25px color-mix(in srgb,var(--accent),transparent 84%), inset 0 0 28px rgba(255,255,255,.035); overflow:hidden}.product:before{content:""; position:absolute; inset:auto -35% 15% -35%; height:180px; background:radial-gradient(ellipse,color-mix(in srgb,var(--accent),transparent 42%),transparent 62%); filter:blur(20px); opacity:.82}.product:after{content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 24%,transparent 76%,color-mix(in srgb,var(--accent),transparent 70%)); opacity:.65}.product h3,.product p,.product img,.product strong{position:relative; z-index:1}.product h3{font-family:Rajdhani,sans-serif; font-size:1.45rem; margin:0; text-transform:uppercase; font-style:italic}.product h3 span{color:var(--accent); text-shadow:0 0 16px var(--accent)}.product p{min-height:76px; color:#e5e5ee; line-height:1.45; margin:10px 0}.product img{width:100%; max-width:310px; filter:drop-shadow(0 0 25px color-mix(in srgb,var(--accent),transparent 35%))}.product strong{display:inline-block; margin-top:4px; padding:10px 24px; border:1px solid var(--accent); border-radius:10px; color:var(--accent); font-size:1.45rem; letter-spacing:.05em; background:rgba(0,0,0,.62); box-shadow:0 0 18px color-mix(in srgb,var(--accent),transparent 65%)}.live{--accent:var(--purple)}.rise{--accent:var(--cyan)}.elite{--accent:var(--blue)}.prime{--accent:#e046ff}.ascend{--accent:var(--gold)}
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:36px 5vw; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.42); backdrop-filter:blur(8px)}.feature{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; padding:14px; border-radius:16px; background:rgba(255,255,255,.035)}.feature b{font-size:3rem; color:var(--purple); text-shadow:0 0 22px var(--purple)}.feature h4{margin:0; text-transform:uppercase; letter-spacing:.08em}.feature p{grid-column:2; margin:4px 0 0; color:var(--muted)}
.cta-panel{margin:56px auto; max-width:1180px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; padding:28px; border:1px solid var(--gold); border-radius:18px; background:linear-gradient(90deg,rgba(198,60,255,.20),rgba(33,234,255,.10),rgba(255,179,49,.16)),rgba(0,0,0,.68); box-shadow:0 0 34px rgba(255,179,49,.18), inset 0 0 35px rgba(255,255,255,.035)}.cta-panel img{width:92px; filter:drop-shadow(0 0 22px var(--purple))}.cta-panel h2{margin:0; font-family:Rajdhani,sans-serif; font-size:2.3rem; text-transform:uppercase; letter-spacing:.2em}.cta-panel p{color:#efeff8; margin:8px 0 0; line-height:1.45}
.contact-section{padding:70px 6vw 90px; max-width:820px; margin:0 auto}
.contact-section .section-title{margin-bottom:28px}
.contact-form{display:grid; gap:18px; background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:32px; box-shadow:0 0 30px rgba(198,60,255,.14), inset 0 0 24px rgba(255,255,255,.03)}
.contact-form label{display:grid; gap:8px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem}
.contact-form input, .contact-form textarea{width:100%; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:14px 16px; background:rgba(0,0,0,.55); color:var(--text); font:inherit}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 14px rgba(33,234,255,.4)}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(255,255,255,.45)}
.contact-form .btn{justify-self:start}
.hidden-field{position:absolute; left:-9999px}
footer{text-align:center; color:#aaa; padding:28px 5vw 50px; background:#000}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;text-align:center}.hero p{margin-inline:auto}.hero-actions{justify-content:center}.features{grid-template-columns:repeat(2,1fr)}.cta-panel{grid-template-columns:1fr;text-align:center}.cta-panel img{margin:auto}.nav{display:none}}
@media(max-width:640px){.site-header{padding:14px 18px}.brand img{height:42px;max-width:185px}.header-btn{font-size:.75rem;padding:10px 12px}.hero{padding:50px 22px;min-height:590px}.product-grid,.features{grid-template-columns:1fr}.product p{min-height:auto}.cta-panel{margin:34px 18px}.cta-panel h2{font-size:1.65rem}.hero h1{font-size:4rem}.hero:before{opacity:.13}.contact-section{padding:50px 22px 70px}.contact-form{padding:22px}}