@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Orbitron:wght@600;700;800;900&display=swap');

:root{
  --bg:#05010a;
  --bg2:#090311;
  --panel:rgba(17,7,26,.76);
  --panel-2:rgba(10,4,17,.9);
  --text:#f7f0ff;
  --muted:#b9a9c8;
  --purple:#b65cff;
  --purple-2:#7c2cff;
  --pink:#ff3b88;
  --red:#ff334f;
  --cyan:#57ddff;
  --line:rgba(213,167,255,.18);
  --line-strong:rgba(213,167,255,.34);
  --glow:0 0 30px rgba(173,79,255,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%,rgba(102,32,155,.16),transparent 28%),
    radial-gradient(circle at 80% 25%,rgba(131,20,93,.12),transparent 30%),
    linear-gradient(180deg,#050109 0%,#090211 44%,#030106 100%);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 80%);
  z-index:-2;
}

a{color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit}

.page-noise{
  position:fixed;
  inset:0;
  opacity:.028;
  pointer-events:none;
  z-index:30;
  background-image:repeating-radial-gradient(circle at 0 0,transparent 0,#fff 1px,transparent 2px);
  background-size:4px 4px;
  mix-blend-mode:overlay;
}

.aurora{
  position:fixed;
  width:46vw;
  height:46vw;
  border-radius:50%;
  filter:blur(100px);
  opacity:.12;
  pointer-events:none;
  z-index:-1;
}
.aurora-a{left:-18vw;top:18vh;background:#a33cff;animation:drift 12s ease-in-out infinite}
.aurora-b{right:-20vw;top:45vh;background:#ff285f;animation:drift 16s ease-in-out infinite reverse}

.stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 12%,rgba(255,255,255,.45) 0 1px,transparent 1.5px),
    radial-gradient(circle at 62% 63%,rgba(255,255,255,.32) 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 76%,rgba(255,255,255,.28) 0 1px,transparent 1.5px);
  background-size:270px 270px,330px 330px,410px 410px,360px 360px;
}

.site-header{
  width:min(1220px,calc(100% - 36px));
  margin:0 auto;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-mark{width:50px;height:50px;filter:drop-shadow(0 0 12px rgba(182,92,255,.46))}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-copy strong{font-family:Orbitron,sans-serif;font-size:.86rem;letter-spacing:.15em}
.brand-copy small{font-size:.56rem;color:#a994b9;letter-spacing:.11em}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  text-decoration:none;
  color:#cdbddd;
  font-size:.86rem;
  font-weight:700;
  transition:.2s ease;
}
.nav a:hover{color:#fff;text-shadow:0 0 14px rgba(182,92,255,.8)}

.hero{
  width:min(1220px,calc(100% - 36px));
  margin:0 auto;
  min-height:760px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:40px;
  padding:58px 0 84px;
}

.hero-copy{position:relative;z-index:5}

.status-pill{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(120,255,180,.18);
  background:rgba(29,90,54,.13);
  color:#90ffbb;
  padding:9px 14px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:22px;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;background:#6fff9b;
  box-shadow:0 0 15px #6fff9b;animation:pulse 1.8s ease-in-out infinite
}

.eyebrow{
  color:#c68cff;
  font-size:.72rem;
  letter-spacing:.27em;
  font-weight:800;
  margin:0 0 14px;
}

h1,h2,h3,p{margin-top:0}
.hero h1{
  font-family:Orbitron,sans-serif;
  font-size:clamp(3rem,6vw,6.15rem);
  line-height:.92;
  letter-spacing:-.05em;
  margin:0;
  text-transform:uppercase;
}
.hero h1 span{font-size:.42em;color:#c398e7;vertical-align:top}
.hero h1 em{
  font-style:normal;
  display:inline-block;
  background:linear-gradient(110deg,#fff 3%,#dfc3ff 28%,#b052ff 53%,#ff527f 80%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(165,68,255,.18));
}
.subtitle{
  font-family:Orbitron,sans-serif;
  font-size:clamp(1rem,2.1vw,1.55rem);
  margin:18px 0 18px;
  color:#f2dfff;
  letter-spacing:.035em;
}
.intro{
  color:var(--muted);
  max-width:650px;
  line-height:1.75;
  font-size:1.03rem;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.button{
  min-width:190px;
  text-align:center;
  padding:15px 20px;
  border-radius:12px;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  transition:.2s ease;
  border:1px solid var(--line-strong);
}
.button:hover{transform:translateY(-2px)}
.button-primary{
  background:linear-gradient(135deg,#7c2cff,#d83787);
  box-shadow:0 0 28px rgba(154,57,255,.26);
}
.button-primary:hover{box-shadow:0 0 40px rgba(154,57,255,.48)}
.button-ghost{background:rgba(255,255,255,.035)}
.button-ghost:hover{background:rgba(255,255,255,.07)}

.launch-panel{
  margin-top:34px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(18,8,28,.9),rgba(7,2,12,.72));
  box-shadow:inset 0 0 30px rgba(98,29,153,.08);
}
.launch-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px;
}
.launch-heading span{font-size:.68rem;color:#ff75ad;font-weight:900;letter-spacing:.15em}
.launch-heading strong{font-size:.68rem;color:#ad9aba;letter-spacing:.09em}
.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.count-card{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.026);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
}
.count-card strong{
  display:block;
  font-family:Orbitron,sans-serif;
  font-size:1.45rem;
  color:#fff;
}
.count-card span{font-size:.55rem;color:#967fa8;letter-spacing:.14em}
.countdown-note{font-size:.74rem;color:#8e7c9d;margin:12px 0 0;text-align:center}

.hero-art{
  height:620px;
  position:relative;
  display:grid;
  place-items:center;
}
.ghost-glow{
  position:absolute;
  width:430px;height:430px;border-radius:50%;
  background:radial-gradient(circle,rgba(179,87,255,.20),rgba(82,22,125,.04) 54%,transparent 70%);
  filter:blur(10px);
}
.ghost-art{
  position:absolute;
  width:310px;
  top:60px;
  z-index:4;
  filter:drop-shadow(0 0 26px rgba(194,122,255,.46));
  animation:floatGhost 5s ease-in-out infinite;
}
.browser-art{
  width:560px;
  position:absolute;
  bottom:28px;
  right:-20px;
  z-index:5;
  filter:drop-shadow(0 32px 45px rgba(0,0,0,.58));
  transform:rotate(-3deg);
}
.orbit{
  position:absolute;
  border:1px solid rgba(181,108,255,.14);
  border-radius:50%;
  animation:spin 20s linear infinite;
}
.orbit::before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background:#c67aff;box-shadow:0 0 16px #bd6cff;
  position:absolute;top:50%;left:-5px;
}
.orbit-one{width:480px;height:480px}
.orbit-two{width:580px;height:580px;animation-duration:30s;animation-direction:reverse}

.floating-tag{
  position:absolute;
  z-index:8;
  background:rgba(12,4,19,.83);
  border:1px solid var(--line);
  box-shadow:var(--glow);
  backdrop-filter:blur(10px);
  padding:12px 14px;
  border-radius:12px;
}
.floating-tag span{display:block;color:#ae83c9;font-size:.55rem;letter-spacing:.15em}
.floating-tag strong{font-size:.66rem;letter-spacing:.05em}
.tag-1{left:-18px;top:240px;animation:floatTag 5.5s ease-in-out infinite}
.tag-2{right:-15px;bottom:110px;animation:floatTag 7s ease-in-out infinite reverse}

.marquee-strip{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.016);
}
.marquee-track{
  width:max-content;
  display:flex;
  gap:24px;
  align-items:center;
  padding:17px 0;
  animation:marquee 28s linear infinite;
}
.marquee-track span{
  font-family:Orbitron,sans-serif;
  font-size:.72rem;
  color:#d8c4e9;
  letter-spacing:.1em;
}
.marquee-track i{font-style:normal;color:#b654ff}

.section{
  width:min(1220px,calc(100% - 36px));
  margin:0 auto;
  padding:110px 0;
}
.section-heading{max-width:760px;margin-bottom:45px}
.section-heading.compact{margin-bottom:30px}
.section h2,.notify-section h2{
  font-family:Orbitron,sans-serif;
  font-size:clamp(2rem,4.7vw,4rem);
  line-height:1.06;
  letter-spacing:-.035em;
  margin-bottom:18px;
}
.section-heading>p:last-child,
.skin-copy>p:nth-of-type(2),
.notify-content>p{
  color:var(--muted);line-height:1.72
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.feature-card{
  min-height:275px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%,rgba(168,68,255,.09),transparent 40%),
    rgba(255,255,255,.018);
  border-radius:22px;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(206,145,255,.42);
  box-shadow:0 18px 55px rgba(0,0,0,.28),0 0 30px rgba(140,44,235,.08)
}
.feature-card.featured{grid-row:span 2;min-height:566px}
.feature-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line-strong);
  background:rgba(173,80,255,.08);
  color:#d6a6ff;font-size:1.25rem;margin-bottom:22px
}
.feature-kicker{font-size:.62rem;letter-spacing:.18em;color:#b67bd6;font-weight:900;margin-bottom:10px}
.feature-card h3{font-family:Orbitron,sans-serif;font-size:1.42rem;margin-bottom:12px}
.feature-card p:last-of-type{color:var(--muted);line-height:1.7}
.feature-art-lines{
  position:absolute;
  inset:auto -10% -8% 20%;
  height:56%;
  background:
    repeating-linear-gradient(135deg,transparent 0 13px,rgba(192,108,255,.08) 14px 15px);
  transform:skewY(-8deg);
}

.skin-section{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  align-items:center
}
.skin-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:11px}
.skin-list li{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:#d9cce4
}
.skin-list span{
  font-family:Orbitron,sans-serif;color:#a953e6;font-size:.68rem;min-width:26px
}

.skin-showcase{min-height:560px;position:relative}
.skin-window{
  width:76%;
  max-width:520px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 26px 55px rgba(0,0,0,.45);
  position:absolute;
}
.skin-window-top{
  min-height:44px;
  display:flex;align-items:center;gap:7px;
  padding:0 14px
}
.skin-window-top span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.skin-window-top strong{
  margin-left:auto;font-size:.55rem;letter-spacing:.1em;color:rgba(255,255,255,.75)
}
.skin-window-body{padding:14px;min-height:250px}
.mock-toolbar{height:36px;border-radius:8px;margin-bottom:9px}
.mock-address{height:27px;border-radius:999px;margin-bottom:11px}
.mock-page{
  height:180px;border-radius:10px;display:grid;place-items:center;overflow:hidden
}
.mock-page img{width:92px;opacity:.76}

.skin-purple{left:0;top:95px;z-index:3;transform:rotate(-5deg)}
.skin-purple .skin-window-top{background:linear-gradient(90deg,#4a1768,#23102d)}
.skin-purple .skin-window-body{background:#13091b}
.skin-purple .mock-toolbar,.skin-purple .mock-address{background:rgba(190,95,255,.14)}
.skin-purple .mock-page{background:radial-gradient(circle,#4c1b69,#09040c 66%)}

.skin-red{right:0;top:10px;z-index:2;transform:rotate(5deg)}
.skin-red .skin-window-top{background:linear-gradient(90deg,#681528,#2d0c12)}
.skin-red .skin-window-body{background:#1b080b}
.skin-red .mock-toolbar,.skin-red .mock-address{background:rgba(255,72,89,.12)}
.skin-red .mock-page{background:radial-gradient(circle,#6b1927,#0c0305 66%)}

.skin-ice{right:7%;bottom:0;z-index:4;transform:rotate(1.5deg)}
.skin-ice .skin-window-top{background:linear-gradient(90deg,#145467,#0a2530)}
.skin-ice .skin-window-body{background:#071318}
.skin-ice .mock-toolbar,.skin-ice .mock-address{background:rgba(72,211,255,.12)}
.skin-ice .mock-page{background:radial-gradient(circle,#145265,#031015 66%)}

.platform-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.platform-card{
  min-height:155px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.018);
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;
  transition:.2s ease
}
.platform-card:hover{transform:translateY(-3px);border-color:rgba(202,140,255,.4);box-shadow:0 0 28px rgba(156,52,255,.08)}
.platform-card img{width:40px;height:40px}
.platform-card strong{font-family:Orbitron,sans-serif;font-size:.68rem;letter-spacing:.08em}
.platform-card span{font-size:.7rem;color:#8e799e}

.notify-section{
  width:min(1100px,calc(100% - 36px));
  margin:50px auto 110px;
  padding:68px clamp(25px,6vw,80px);
  border-radius:28px;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(circle at 50% 0%,rgba(178,64,255,.19),transparent 44%),
    linear-gradient(135deg,rgba(23,7,35,.94),rgba(7,2,12,.92));
  position:relative;overflow:hidden;text-align:center
}
.notify-glow{
  width:430px;height:430px;border-radius:50%;
  background:rgba(160,48,255,.11);filter:blur(80px);
  position:absolute;left:50%;top:-250px;transform:translateX(-50%)
}
.notify-content{position:relative;z-index:2;max-width:720px;margin:0 auto}
.notify-form{
  display:grid;grid-template-columns:1fr auto;gap:10px;margin:30px auto 0;max-width:620px
}
.notify-form input{
  min-width:0;padding:16px 18px;border-radius:12px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.045);color:#fff;outline:none
}
.notify-form input:focus{border-color:#b55cff;box-shadow:0 0 0 3px rgba(181,92,255,.08)}
.notify-form button{
  border:0;border-radius:12px;padding:0 22px;
  background:linear-gradient(135deg,#832cff,#dc347b);
  color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.1em;cursor:pointer
}
.form-message{min-height:20px;margin:10px 0 0;font-size:.78rem;color:#9bffbe}

.site-footer{
  width:min(1220px,calc(100% - 36px));
  margin:0 auto;
  min-height:100px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  border-top:1px solid var(--line);
  color:#8f7d9d;font-size:.76rem
}
.site-footer>div{display:flex;align-items:center;gap:10px;color:#c9b8d7;font-weight:700}
.site-footer img{width:28px;height:28px}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.52;transform:scale(.75)}}
@keyframes floatGhost{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-3vh) scale(1.08)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:980px){
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:38px}
  .hero-art{height:560px}
  .browser-art{right:50%;transform:translateX(50%) rotate(-2deg);width:min(560px,90vw)}
  .tag-1{left:3%}.tag-2{right:3%}
  .skin-section{grid-template-columns:1fr}
  .skin-showcase{min-height:620px}
  .platform-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  .site-header{min-height:76px}
  .brand-mark{width:42px;height:42px}
  .brand-copy small{display:none}
  .hero{min-height:auto;padding-bottom:55px}
  .hero h1{font-size:clamp(2.6rem,15vw,4.2rem)}
  .hero-art{height:480px}
  .ghost-art{width:220px;top:48px}
  .orbit-one{width:340px;height:340px}
  .orbit-two{width:430px;height:430px}
  .browser-art{width:460px;max-width:100%;bottom:15px}
  .floating-tag{display:none}
  .launch-heading{align-items:flex-start;flex-direction:column}
  .countdown-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr}
  .feature-card.featured{grid-row:auto;min-height:300px}
  .section{padding:75px 0}
  .skin-showcase{min-height:500px}
  .skin-window{width:88%}
  .skin-purple{top:85px}
  .skin-red{top:0}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .notify-section{padding:48px 20px}
  .notify-form{grid-template-columns:1fr}
  .notify-form button{min-height:50px}
  .site-footer{padding:25px 0;flex-direction:column;align-items:flex-start}
}