:root{
  --bg:#000;
  --fg:#fff;
  --muted:#9aa0a6;
  --accent:#ffffff;
  --glow:0 0 20px rgba(255,255,255,.25), 0 0 50px rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  overflow-x:hidden;
}
#flow{position:fixed;inset:0;z-index:-2}
.grain{pointer-events:none;position:fixed;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\\"0 0 120 120\\"><filter id=\\"n\\"><feTurbulence type=\\"fractalNoise\\" baseFrequency=\\"0.65\\" numOctaves=\\"2\\" stitchTiles=\\"stitch\\"/></filter><rect width=\\"100%\\" height=\\"100%\\" filter=\\"url(%23n)\\" opacity=\\"0.035\\"/></svg>');background-size:cover;mix-blend-mode:screen;z-index:-1}
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:clamp(24px,5vw,60px);position:relative;overflow:hidden}
.wrap{width:100%;max-width:1100px;margin:auto}
.title{font-size:clamp(48px,8vw,140px);letter-spacing:0.06em;font-weight:800;margin:0;line-height:.9;text-shadow:var(--glow)}
.tag{margin:16px auto 32px;font-size:clamp(16px,2.2vw,24px);color:#dfe2e6;opacity:.9}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:var(--fg);text-decoration:none;position:relative;overflow:hidden;backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease}
.cta:hover{transform:translateY(-2px);background:rgba(255,255,255,.04)}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:60px}
.card{border:1px solid rgba(255,255,255,.12);padding:20px;border-radius:14px;background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:.06em}
p{margin:0;color:#b6bbc3;line-height:1.6}
.holo{width:min(62vw,520px);aspect-ratio:1/1.1;position:relative;margin:10px auto 28px;filter:drop-shadow(0 0 4px rgba(255,255,255,.35)) drop-shadow(0 0 18px rgba(255,255,255,.12));transform-style:preserve-3d;perspective:1200px}
.holo img{width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;animation:spin 16s linear infinite;opacity:.96}
.holo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(255,255,255,.05) 2px 3px);mix-blend-mode:screen;animation:sweep 4s linear infinite;pointer-events:none}
@keyframes spin{0%{transform:rotateY(-18deg)}50%{transform:rotateY(18deg)}100%{transform:rotateY(-18deg)}}
@keyframes sweep{0%{transform:translateY(-10%);opacity:.15}50%{transform:translateY(10%);opacity:.28}100%{transform:translateY(-10%);opacity:.15}}
section{padding:80px 24px}
.center{text-align:center}
.muted{color:var(--muted)}
footer{padding:40px 24px;color:#9aa0a6;text-align:center;border-top:1px solid rgba(255,255,255,.1)}
a{color:#fff}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);margin:50px 0}
@media(max-width:600px){.tag{margin-top:10px}}