:root{
  --bg0:#05070a;
  --bg1:#060b12;
  --fg:#e9eef7;
  --muted:#a5b2c6;
  --line:rgba(255,255,255,.08);
  --accent:#7cf7ff;
  --accent2:#a78bff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:radial-gradient(1200px 600px at 10% 10%, rgba(124,247,255,.08), transparent 60%),
             radial-gradient(900px 450px at 85% 30%, rgba(167,139,255,.08), transparent 55%),
             linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
.hero3d{
  position:absolute;
  top:0;
  bottom:0;
  /* Move the *frame* to the harmonious right side */
  left:52%;
  width:48%;

  /* Nudge frame down slightly to mirror text block vertical placement */
  transform: translateY(18px);

  height:100%;
  display:block;
  opacity:.78;
}

.wave{
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  height:260px;
  width:100%;
  display:block;
  opacity:1;
  mix-blend-mode: screen;
  /* Fade edges so the wave feels infinite (no visible ends) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.grid{
  position:absolute; inset:-40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 50% at 50% 20%, black 35%, transparent 70%);
  opacity:.25;
  transform: perspective(900px) rotateX(62deg) translateY(-140px);
  transform-origin: top;
}
.glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side at 30% 25%, rgba(124,247,255,.16), transparent 60%),
    radial-gradient(closest-side at 70% 35%, rgba(167,139,255,.14), transparent 62%);
  filter: blur(18px);
  animation: glowDrift 12s ease-in-out infinite alternate;
}

/* Hypnotic orbital field behind the logo */
.orbital{
  position:absolute;
  left:50%;
  top:120px;
  width:min(620px, 92vw);
  height:min(620px, 92vw);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    conic-gradient(from 0deg,
      rgba(124,247,255,.00),
      rgba(124,247,255,.35),
      rgba(167,139,255,.22),
      rgba(124,247,255,.00),
      rgba(167,139,255,.30),
      rgba(124,247,255,.00)
    );
  filter: blur(18px);
  opacity: .26;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, black 38%, transparent 64%);
  animation: orbitalSpin 18s linear infinite;
}

.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.25;
}

@keyframes orbitalSpin {
  from { transform: translateX(-50%) rotate(0deg) scale(1); }
  to   { transform: translateX(-50%) rotate(360deg) scale(1); }
}

@keyframes glowDrift {
  from { transform: translateZ(0) translateY(0px); opacity: .22; }
  to   { transform: translateZ(0) translateY(-12px); opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
  .orbital, .glow { animation: none; }
}

.shell{max-width:980px; margin:0 auto; padding:28px 18px 40px}

.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0 26px}
.brand{display:flex; align-items:center; gap:12px}
.mark{
  width:14px; height:14px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, white, rgba(255,255,255,.1) 45%, rgba(124,247,255,.9) 60%, rgba(167,139,255,.9) 100%);
  box-shadow: 0 0 18px rgba(124,247,255,.35), 0 0 22px rgba(167,139,255,.18);
  animation: markPulse 4.5s ease-in-out infinite;
}

@keyframes markPulse {
  0%   { transform: scale(1);   filter: saturate(1.0); }
  50%  { transform: scale(1.08); filter: saturate(1.25); }
  100% { transform: scale(1);   filter: saturate(1.0); }
}
.name{font-weight:700; letter-spacing:.2px}
.meta{color:var(--muted); font-size:13px; letter-spacing:.8px; text-transform:uppercase}

.eyebrow{color:rgba(124,247,255,.85); font-size:12px; letter-spacing:2.2px; text-transform:uppercase}

.heroSplit{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:center;
  padding: 18px 0 10px;
}
@media (min-width: 920px){
  .heroSplit{ grid-template-columns: 1.05fr 0.95fr; gap: 28px; }
}

.heroLeft h1{
  margin:12px 0 10px;
  font-size: clamp(40px, 5.2vw, 70px);
  line-height:0.98;
  letter-spacing:-.9px;
}

.accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sub{margin:0; color:rgba(233,238,247,.78); font-size:15px; line-height:1.55; max-width:56ch}
.sub a{color:rgba(124,247,255,.9); text-decoration:none; border-bottom:1px solid rgba(124,247,255,.25)}
.sub a:hover{border-bottom-color:rgba(124,247,255,.6)}
.smallLine{margin-top:10px; font-size:13px; color:rgba(165,178,198,.86)}

.simpleLink{
  display:inline-block;
  color:rgba(124,247,255,.92);
  text-decoration:none;
  letter-spacing:0.6px;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid rgba(124,247,255,.18);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
.simpleLink:hover{border-color: rgba(124,247,255,.45)}

.foot{display:flex; justify-content:flex-start; gap:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); margin-top:18px}
.fine{color:rgba(165,178,198,.82); font-size:12px}