@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

: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 {
  /* Allow the page background to grow with content */
  /* Mirror the body gradient on the root so iOS overscroll shows it */
  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));
  /* Ensure non-gradient areas are still the deep space color */
  background-color: var(--bg-0);
  color-scheme: dark;
}
body {
  margin: 0;
  color: var(--text);
  /* Let the html element carry the base gradient to cover overscroll */
  background: transparent;
  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: 0; pointer-events: none; }
.stars-clip { position: absolute; inset: 0; overflow: hidden; }
#stars { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#stars img { position: absolute; pointer-events: none; }
.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; 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; pointer-events: none;
}
@keyframes twinkle { 0%,100%{opacity:.25} 50%{opacity:.7} }

/* Layout */
.wrap { min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; position: relative; z-index: 1; }
.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);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 9999px;
  object-fit: cover;
  border: none;
  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:wrap; 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 {
  --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)), rgba(0,0,0,0.4);
  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:visible; 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:1.5px; 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 6s linear infinite; opacity:.7; 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; position: relative; z-index: 1; }
.orb-glow {
  border-radius: 9999px;
  background: conic-gradient(from 0deg at 50% 50%, var(--accent-1), var(--accent-2), var(--accent-1));
  filter: blur(14px);
  opacity: 0.6;
  animation: spin 6s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orb::before, .orb-glow{ animation:none; } }

/* Orb wrapper for glow positioning */
.orb-wrap{ position: relative; display: grid; place-items: center; }
.orb-wrap .orb-glow{ position: absolute; inset: -8px; z-index: 0; transition: inset 160ms ease, opacity 200ms ease; }
.orb-wrap:hover .orb-glow{ inset: -14px; opacity: 0.8; }
.orb-wrap .orb{ position: relative; z-index: 1; }

/* Brand accents */
.orb-wrap.sora{ --accent-1:#044497; --accent-2:#7ec8e3; }
.orb-wrap.ig{ --accent-1:#E1306C; --accent-2:#833AB4; }
.orb-wrap.of{ --accent-1:#00aff0; --accent-2:#9ae3ff; }
.orb-wrap.fb{ --accent-1:#1877F2; --accent-2:#8ab4ff; }
.orb-wrap.tt{ --accent-1:#25F4EE; --accent-2:#FE2C55; }
.orb-wrap.yt{ --accent-1:#ff0033; --accent-2:#ff9999; }
.orb-wrap.x{ --accent-1:#fff; --accent-2:#444; }
.orb-wrap.th{ --accent-1:#fff; --accent-2:#555; }
.orb-wrap.sc{ --accent-1:#ff7700; --accent-2:#ffddbb; }
.orb-wrap.suno{ --accent-1:#ff5a00; --accent-2:#ffe066; }
.orb-wrap.sp{ --accent-1:#1DB954; --accent-2:#b9fbc0; }
.orb-wrap.am{ --accent-1:#fc3c44; --accent-2:#fa57c1; }

/* 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'); }

/* Discord CTA */
.cta {
  --accent-1: #5865F2; /* Discord blurple */
  --accent-2: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 28px;
  align-items: center;
  padding: 20px 22px;
  margin: 8px 0 26px;
  border-radius: calc(var(--radius) + 2px);
  text-decoration: none;
  color: var(--text);
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(138,92,255,0.16), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(0,255,208,0.12), transparent 60%),
    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 24px rgba(88,101,242,0.4), 0 0 48px rgba(88,101,242,0.2);
  isolation: isolate;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  overflow: visible;
  transform: translateY(0);
  transition: transform 200ms ease, box-shadow 220ms ease;
}
.cta::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; padding:1.5px;
  background: conic-gradient(from var(--gradient-angle) 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: gradient-spin 6s linear infinite; opacity:.7; pointer-events:none;
}
@keyframes gradient-spin { to { --gradient-angle: 360deg; } }
.cta-inner{
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.cta-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 46%, rgba(255,255,255,0.0) 62%);
  transform: translateX(-120%);
  transition: transform 600ms ease;
}
.cta:hover{ box-shadow: 0 12px 56px rgba(0,0,0,0.48), 0 0 36px rgba(88,101,242,0.55), 0 0 60px rgba(88,101,242,0.3); transform: translateY(-2px); }
.cta:hover .cta-inner::after{ transform: translateX(120%); }
.cta .icon{ width:40px; height:40px; display:block; color:#fff; filter: drop-shadow(0 0 10px rgba(138,92,255,0.35)) drop-shadow(0 0 18px rgba(0,255,208,0.18)); }
.cta .icon path{ fill: currentColor; }
.cta .cta-text{ display:grid; gap:6px; }
.cta .cta-text h2{ margin:0; font-size:1.14rem; letter-spacing:0.01em; text-shadow: 0 0 14px rgba(138,92,255,0.25), 0 0 10px rgba(0,255,208,0.18); }
.cta .cta-text p{ margin:4px 0 0; color:var(--muted); font-size:.95rem; line-height:1.4; }
.cta .cta-text ul.benefits{ margin:6px 0 0; padding:0; list-style:none; color: var(--muted); font-size:.95rem; line-height:1.45; display:grid; grid-template-columns: 1fr; gap: 4px 14px; }
.cta .cta-text ul.benefits li{ position:relative; padding-left: 1.1rem; }
.cta .cta-text ul.benefits li::before{ content:'✦'; position:absolute; left:0; top:0; color:#cfe8ff; opacity:.85; }
.cta .arrow{ color:#fff; opacity:.9; transition: transform 220ms ease; }
.cta:hover .arrow{ transform: translateX(2px); }
@media (max-width: 480px){ .cta{ grid-template-columns: 44px 1fr 16px; gap:20px; padding:14px 16px; } .cta .cta-text p{ font-size:.92rem; } }
@media (min-width: 620px){ .cta .cta-text ul.benefits{ grid-template-columns: 1fr 1fr; } }

.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;}
  .cta{ transition:none; }
  .cta::after{ display:none; }
  .cta:hover{ transform:none; }
  .cta .arrow{ transition:none; }
}