/* Elegant, minimal coming soon styles */
:root{
  /* Designer palette: deep cosmic background with vivid violet->cyan accents */
  --bg1:#060617; /* near-black indigo */
  --bg2:#0b0820; /* deep cosmic */
  --accent1:#7C5CFF; /* vivid violet */
  --accent2:#00D4FF; /* electric cyan */
  --muted: rgba(232,240,255,0.66);
  --glass: rgba(255,255,255,0.03);
  --card-radius:22px;
  --max-width:980px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  background: radial-gradient(900px 520px at 10% 18%, rgba(124,92,255,0.05), transparent), linear-gradient(180deg,var(--bg1), var(--bg2));
  color:#E8F0FF;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px}
.gradient-bg{position:fixed;inset:0;background:radial-gradient(600px 400px at 10% 20%, rgba(96,165,250,0.08), transparent), radial-gradient(400px 300px at 90% 80%, rgba(110,231,183,0.06), transparent);pointer-events:none}
.card{position:relative;z-index:2;max-width:var(--max-width);width:100%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--card-radius);padding:40px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);box-shadow: 0 24px 80px rgba(4,6,18,0.65);text-align:center}
.card::before{content:'';position:absolute;inset:-2px;background:linear-gradient(90deg, rgba(124,92,255,0.03), rgba(0,212,255,0.02));border-radius:calc(var(--card-radius) + 2px);pointer-events:none}
.card-inner{opacity:0;transform:translateY(8px) scale(.996);transition:opacity .66s cubic-bezier(.2,.9,.25,1), transform .66s cubic-bezier(.2,.9,.25,1)}
.card.is-loaded .card-inner{opacity:1;transform:none}
.card-header{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}
.logo{font-weight:700;letter-spacing:0.6px;font-size:28px}
.logo span{color:var(--accent1)}
.logo-img{height:48px;display:block;margin:0 auto;filter:drop-shadow(0 10px 30px rgba(4,6,18,0.55));}
.tag{margin:0;font-size:13px;color:var(--muted)}
.title{margin:10px 0 6px;font-size:32px;line-height:1.05}
.lead{color:var(--muted);margin:0 auto 18px;font-size:17px;line-height:1.6;max-width:820px}
.title{font-weight:800;letter-spacing:0.2px}

.features{display:flex;gap:10px;justify-content:center;margin:14px 0 20px}
.features span{background:linear-gradient(90deg, rgba(124,92,255,0.14), rgba(0,212,255,0.06));padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted);font-weight:600}
.countdown{display:flex;gap:16px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.timebox{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:16px 20px;border-radius:14px;min-width:110px;border:1px solid rgba(255,255,255,0.03);-webkit-backdrop-filter: blur(2px);backdrop-filter:blur(2px)}
.timebox span{display:block;font-weight:900;font-size:24px;color:var(--accent2);letter-spacing:0.6px}
.timebox small{display:block;font-size:12px;color:rgba(232,240,255,0.6);margin-top:6px}
.contact{margin-top:18px}
.contact-title{font-size:18px;margin:10px 0 6px}
.contact-lead{margin:0 0 12px;color:rgba(232,240,255,0.78)}
.contact-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.contact-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;min-width:220px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.03);transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s cubic-bezier(.2,.9,.2,1)}
.contact-card svg{flex-shrink:0;width:22px;height:22px}
.contact-card .icon{display:block}

/* Icon color rules: keep icons consistent with card types */
.contact-card.whatsapp svg{fill:var(--accent2);stroke:none;opacity:0.95}
.contact-card.email svg{fill:var(--accent1);stroke:none;opacity:0.98}
.contact-card.email path[stroke-width]{stroke:rgba(232,240,255,0.9);stroke-width:1.2}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(2,6,23,0.5)}
.contact-card .card-main{font-weight:700}
.contact-card .card-sub{font-size:13px;color:rgba(230,238,248,0.76)}
.contact-card.whatsapp{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#021428}
.contact-card.email{background:linear-gradient(90deg, rgba(124,92,255,0.06), rgba(0,212,255,0.02));color:#ffffff;border:1px solid rgba(124,92,255,0.18);box-shadow:0 6px 20px rgba(124,92,255,0.06)}
.contact-card.email .card-main{color:var(--accent1);font-weight:800}
.contact-card.email .card-sub{color:rgba(232,240,255,0.95);font-weight:700}
.contact-card.email svg *{stroke:var(--accent2) !important; fill:var(--accent2) !important}
.contact-card.email:hover{transform:translateY(-6px);box-shadow:0 20px 70px rgba(124,92,255,0.18)}

/* Primary CTA button */
.primary-cta{display:inline-block;padding:12px 20px;border-radius:14px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#061026;font-weight:800;text-decoration:none;box-shadow:0 12px 40px rgba(124,92,255,0.12);transition:transform .14s ease, box-shadow .14s ease;border:0}
.primary-cta:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(124,92,255,0.16)}
.primary-cta:focus{outline:3px solid rgba(124,92,255,0.18);outline-offset:3px}

/* make contact details very visible */
.contact-card{min-width:240px;padding:16px 18px}
.contact-card .card-sub{font-size:15px;color:rgba(2,32,58,0.85);font-weight:700}

/* CTA wrapper spacing */
.cta-wrap{margin-top:14px}
.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:rgba(230,238,248,0.6);font-size:13px}
.social a{color:rgba(230,238,248,0.7);text-decoration:none;margin-left:12px;padding:6px 8px;border-radius:8px;transition:background .15s;display:inline-flex;align-items:center}
.social a:hover{background:rgba(255,255,255,0.02)}
.social-icon{width:18px;height:18px;fill:var(--accent1);margin-right:8px}

/* Legal / footer small print */
.legal{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:12px;width:100%;border-top:1px solid rgba(255,255,255,0.02);padding-top:12px}
.copyright{color:rgba(232,240,255,0.6);font-size:13px}
.founder{font-size:13px}
.founder a{color:var(--accent2);text-decoration:none;font-weight:700}
.founder a:hover{text-decoration:underline}
.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}
#confetti-root{position:fixed;inset:0;pointer-events:none;z-index:5}
/* Responsive */
@media (max-width:840px){
  .card{padding:28px}
  .title{font-size:28px}
}

@media (max-width:420px){
  .logo-img{height:36px}
}

@media (max-width:640px){
  .title{font-size:20px}
  .timebox{min-width:66px;padding:10px}
  .contact-grid{flex-direction:column;align-items:center}
  .card-footer{flex-direction:column;gap:8px;align-items:center}
  .legal{flex-direction:column;align-items:center;text-align:center}
}
/* small flourish */
.timebox{transition:transform .28s cubic-bezier(.2,.9,.2,1)}
.timebox:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(18,0,36,0.18)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card-inner, .timebox, .primary-cta { transition: none !important; transform: none !important }
}
