:root {
  --bg-0: #030617;
  --bg-1: #070b2a;
  --bg-2: #0f1035;
  --star: #cfe8ff;
  --nebula-a: #8a5cff;
  --nebula-b: #00ffd0;
  --text: #e6ecff;
  --muted: #b6c2ff;
  --card: rgba(255, 255, 255, 0.06);
  --card-strong: rgba(255, 255, 255, 0.12);
  --glow: 0 0 0.75rem rgba(138, 92, 255, 0.45), 0 0 2.25rem rgba(0, 255, 208, 0.25);
  --radius: 16px;
  --gap: 14px;
  --accent-1: #8a5cff;
  --accent-2: #00ffd0;
}

html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 800px at 80% 10%, var(--bg-2), transparent 60%),
              radial-gradient(800px 600px at 10% 20%, #001c31, transparent 55%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  overflow-x: hidden;
}

/* Cosmic layers */
.sky { position: fixed; inset: 0; z-index: -3; }
canvas#stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 1px var(--star)); }
.nebula {
  position: absolute; inset: -10vmax;
  background: radial-gradient(45vmax 45vmax at 65% 20%, rgba(138,92,255,0.25), transparent 55%),
              radial-gradient(35vmax 35vmax at 30% 10%, rgba(0,255,208,0.18), transparent 55%),
              radial-gradient(30vmax 30vmax at 10% 70%, rgba(91,156,255,0.18), transparent 60%);
  filter: blur(40px) saturate(110%);
  mix-blend-mode: screen; z-index: -2; pointer-events: none;
}
.twinkle {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.7), transparent 60%);
  animation: twinkle 5.5s ease-in-out infinite;
  opacity: 0.6; z-index: -1; pointer-events: none;
}
@keyframes twinkle { 0%,100%{opacity:.25} 50%{opacity:.7} }

/* Layout */
.wrap { min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
.container { width: min(980px, calc(100vw - 40px)); margin: 0 auto; padding: 56px 0 24px; }
header { display: grid; justify-items: center; gap: 16px; margin: 18px 0 28px; text-align: center; }
header .logo { width: clamp(84px, 18vw, 132px); height: auto; filter: drop-shadow(0 0 24px rgba(255,255,255,0.35)) drop-shadow(0 0 48px rgba(138,92,255,0.35)); }
h1 { margin: 0; font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem); letter-spacing: 0.02em; font-weight: 700; text-shadow: 0 0 24px rgba(138,92,255,0.35), 0 0 12px rgba(0,255,208,0.25); }
.tagline { margin: 0; font-size: 1.05rem; color: var(--muted); letter-spacing: 0.02em; }
.subline { display:block; margin-top:6px; color:#c7d2fe; opacity:.95; }

/* Icon grid */
.links { margin: 40px auto 12px; display: grid; grid-template-columns: repeat( auto-fit, minmax(84px, 1fr) ); gap: calc(var(--gap) + 10px); max-width: 980px; }
@media (min-width: 1024px){ .links { display:flex; flex-wrap:nowrap; justify-content:center; gap: calc(var(--gap) + 14px);} }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.orb {
  --accent-1: var(--accent-1); --accent-2: var(--accent-2); --p: 1;
  position: relative; width:84px; height:84px; border-radius:9999px; display:grid; place-items:center;
  text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 40px rgba(0,0,0,0.35), 0 0 18px rgba(138,92,255,0.25), 0 0 22px rgba(0,255,208,0.14);
  isolation:isolate; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  overflow:hidden; transform: translateZ(0) scale(var(--p)); transition: transform 160ms ease, box-shadow 200ms ease; will-change: transform, box-shadow;
}
.orb::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: conic-gradient(from 0deg at 50% 50%, var(--accent-1), var(--accent-2), var(--accent-1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation: spin 8s linear infinite; opacity:.6; pointer-events:none; }
.orb::after{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,0.28), transparent 50%); pointer-events:none; }
.orb:hover{ transform: scale(var(--p)); box-shadow: 0 10px 50px rgba(0,0,0,0.45), 0 0 28px rgba(138,92,255,0.45), 0 0 34px rgba(0,255,208,0.24); }
.orb svg { width:28px; height:28px; display:block; fill:#fff; }
@keyframes spin { to { transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .orb::before{ animation:none; } }

/* Brand accents */
.orb.ig{ --accent-1:#f58529; --accent-2:#dd2a7b; }
.orb.tt{ --accent-1:#25F4EE; --accent-2:#FE2C55; }
.orb.yt{ --accent-1:#ff0033; --accent-2:#ff6b6b; }
.orb.x{ --accent-1:#fff; --accent-2:#9aa0a6; }
.orb.th{ --accent-1:#fff; --accent-2:#bfbfbf; }
.orb.sc{ --accent-1:#ff7700; --accent-2:#ff9a3d; }
.orb.sora{ --accent-1:#10A37F; --accent-2:#6EE7B7; }
.orb.suno{ --accent-1:#ff5a00; --accent-2:#ffb347; }

/* Mask helper (unused by inline Sora SVG, kept for flexibility) */
.mask-icon{ width:28px; height:28px; display:block; background:#fff; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.mask-icon.sora{ -webkit-mask-image:url('sora.svg'); mask-image:url('sora.svg'); }

.meta{ margin-top:24px; text-align:center; color:var(--muted); font-size:.9rem; }
footer{ padding:24px 0 36px; text-align:center; color:#94a3b8; font-size:.85rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .twinkle{ animation:none; opacity:.4;} .card{ transition:none;} .card:hover{ transform:none;} }