*{box-sizing:border-box}
:root{
  --bg:#0a0612;
  --bg2:#130a25;
  --fg:#e9e9f1;
  --muted:#b5b3c6;
  --brand1:#8a2be2;
  --brand2:#ff2d55;
  --glass:rgba(255,255,255,0.06);
  --stroke:rgba(255,255,255,0.08);
}

html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 20% 10%, #1c0a36, transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, #2b0a23, transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

.container{
  max-width:1100px;
  padding:0 24px;
  margin:0 auto;
}

.noise{
  position:fixed;inset:0;
  pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"1600\" height=\"900\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"3\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.03\"/></svg>');
  opacity:.5;
}

header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(120%) blur(6px);
}

.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .logo{font-size:24px}
.brand .name{letter-spacing:.5px}
.brand .tag{background:linear-gradient(45deg,var(--brand1),var(--brand2));
            -webkit-background-clip:text;background-clip:text;color:transparent}

header nav a{
  color:var(--muted);text-decoration:none;margin-left:18px;
}
header nav a:hover{color:var(--fg)}

.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;
  align-items:center;min-height:70vh;padding:56px 24px 24px;
}

.copy h1{
  font-family:Orbitron,Inter,sans-serif;
  font-size:clamp(2.6rem,5vw,4rem);
  margin:0 0 8px;
  line-height:1.05;
}
.copy .spark{
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.subtitle{color:var(--muted);margin:0 0 14px;font-size:1.1rem}
.date{font-size:1.05rem;margin:0 0 26px}

.signup{
  display:flex;gap:10px;flex-wrap:wrap;
  background:var(--glass);padding:10px;border:1px solid var(--stroke);
  border-radius:14px;backdrop-filter:blur(8px);
}
.signup input{
  flex:1;min-width:220px;
  background:transparent;border:none;color:var(--fg);padding:12px;
  outline:none;font-size:1rem
}
.signup button{
  padding:12px 18px;border-radius:12px;border:none;cursor:pointer;
  color:white;font-weight:700;letter-spacing:.3px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 8px 24px rgba(255,45,85,.25);
}
.signup button:active{transform:translateY(1px)}

.tiny{opacity:.7;margin-top:8px;font-size:.85rem}

.art{
  position:relative;
  background:radial-gradient(600px 300px at 50% 10%, rgba(138,43,226,.25), transparent 60%);
  border-radius:20px;padding:10px;
}
.art img{
  width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

.about{padding:40px 0 20px}
.card{
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:16px;padding:24px;margin-bottom:22px
}
.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px
}
.fcard{
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:16px;padding:18px
}

.cta{padding:40px 0;text-align:center}

.footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 0 60px;border-top:1px solid var(--stroke);margin-top:40px
}
.footer .links a{color:var(--muted);text-decoration:none;margin-left:16px}
.footer .links a:hover{color:var(--fg)}

/* Hero Taglines - New prominent section */
.hero-taglines {
  text-align: center;
  margin: 4rem 0 3rem 0;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.hero-taglines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.main-tagline {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
  animation: glow 2s ease-in-out infinite alternate;
}

.sub-tagline {
  font-size: 1.8rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: fadeInUp 1s ease-out 0.5s both;
}

@keyframes glow {
  from { text-shadow: 0 0 30px rgba(102, 126, 234, 0.5); }
  to { text-shadow: 0 0 50px rgba(102, 126, 234, 0.8), 0 0 70px rgba(102, 126, 234, 0.3); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for taglines */
@media (max-width: 768px) {
  .hero-taglines {
    margin: 3rem 0 2rem 0;
    padding: 2rem 1rem;
  }
  
  .main-tagline {
    font-size: 2rem;
  }
  
  .sub-tagline {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .main-tagline {
    font-size: 1.8rem;
  }
  
  .sub-tagline {
    font-size: 1.3rem;
  }
}

/* Waitlist Counter */
.waitlist-counter {
  text-align: center;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  animation: fadeInUp 1s ease-out 1s both;
}

.counter-number {
  font-size: 2rem;
  font-weight: 800;
  color: #667eea;
  text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  display: block;
  margin-bottom: 0.5rem;
}

.counter-text {
  font-size: 0.9rem;
  color: #a0aec0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .counter-number {
    font-size: 1.5rem;
  }
  
  .counter-text {
    font-size: 0.8rem;
  }
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:22px}
  .art{order:-1}
  .features{grid-template-columns:1fr}
}