/* Basic Setup */
:root{
    --bg:#0b0d16;
    --bg-alt:#121528;
    --muted:#b3b9c9;
    --card:#141927cc;
    --accent:#4C7DFF;
    --accent-alt:#7C3AED;
    --danger:#ff4757;
    --success:#2ecc71;
    --focus-ring: 0 0 0 3px #4c7dff33, 0 0 0 6px #4c7dff18;
    --glow-accent: 0 0 0 2px #4c7dff66, 0 0 18px #4c7dff55, 0 0 36px #7c3aed55;
}

*{box-sizing: border-box}
html, body {background:#0b0d16; overscroll-behavior: contain;}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 20% 20%, #1d2440, #0b0d16 55%) fixed;
    background-size: 200% 200%;
    animation: bgShift 14s linear infinite;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 18px 10px;
    position:relative;
}
/* Hard top & bottom edges to avoid white flashes */
body:before, body:after{
    content:""; position:fixed; left:0; right:0; height:32px; pointer-events:none; z-index:2; mix-blend-mode:normal;
}
body:before{top:0; background:linear-gradient(to bottom, #0b0d16, rgba(11,13,22,0));}
body:after{bottom:0; background:linear-gradient(to top, #0b0d16, rgba(11,13,22,0));}

.container {
    --border-color: rgba(255,255,255,0.12);
    position: relative;
    padding: 34px 30px 32px;
    width: 92%;
    max-width: 460px;
    background: linear-gradient(140deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(26px) saturate(1.2);
    -webkit-backdrop-filter: blur(26px) saturate(1.2);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    box-shadow: 0 10px 50px -12px #000e3d, 0 0 0 1px rgba(255,255,255,0.05), 0 0 32px -4px #4c7dff44;
    overflow: visible; /* allow halo overflow */
    animation: riseFade 0.9s cubic-bezier(.16,.84,.44,1) both;
}

.container:before, .container:after{
    content: "";
    position: absolute;
    border-radius: inherit;
    inset: 0;
    pointer-events: none;
}
.container:before{
    background: radial-gradient(circle at 85% 15%, rgba(124,58,237,0.35), transparent 60%),
                radial-gradient(circle at 15% 85%, rgba(76,125,255,0.35), transparent 55%);
    mix-blend-mode: plus-lighter;
    opacity: 0.5;
}
.container:after{
    border: 1px solid rgba(255,255,255,0.06);
    mix-blend-mode: overlay;
    opacity: 0.6;
}

.logo {
    width: clamp(72px, 20vw, 170px);
    margin: 4px auto 28px;
    display:block;
    filter: drop-shadow(0 6px 22px #4c7dff55) drop-shadow(0 0 4px #7c3aed66);
    animation: floatY 6s ease-in-out infinite;
}

.app-name {
    font-size: clamp(1.1rem, 3.8vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: lowercase;
    margin: -12px 0 14px;
    background: linear-gradient(90deg, #8fb5ff, #d3b6ff 45%, #ffffff 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 8px #4c7dff33);
}

h1 {
    font-size: clamp(2.1rem, 6vw, 2.8rem);
    margin: 4px 0 24px;
    line-height: 1.4;
    background: linear-gradient(92deg, #fff 0%, #c5d9ff 30%, #bda8ff 60%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px #4c7dff33;
}

p {
    font-size: 1.02rem;
    color: var(--muted);
    margin: 0 0 22px;
}

.signup-count {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8fb5ff;
    margin: 0 0 18px;
    min-height: 1.1em;
    opacity: 0.9;
}

.floating-count {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    padding: 8px 18px 9px;
    border-radius: 999px;
    box-shadow: 0 4px 18px -4px #000c25aa, 0 0 0 1px rgba(255,255,255,0.25), 0 0 22px -4px #4c7dff55;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    margin:0;
    z-index: 50;
    font-size: 0.72rem;
    letter-spacing: 2px;
    display:flex;
    align-items:center;
    gap:6px;
    animation: fadeSlide .8s ease .2s both;
}

.floating-count .count-num{
    font-weight:700;
    font-size: .78rem;
    padding:2px 8px 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-alt) 100%);
    color:#fff;
    box-shadow: 0 0 0 1px #ffffff33, 0 4px 14px -4px #4c7dffb0;
    letter-spacing:1px;
}

@keyframes fadeSlide {
    0% {opacity:0; transform: translate(-50%, -8px);}
    100% {opacity:1; transform: translate(-50%, 0);}
}

/* Form Styles */
#waitlist-form input {
    width: 100%;
    padding: 15px 15px 13px;
    font-size: 1.02rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(140deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color: #fff;
    margin-bottom: 16px;
    transition: border-color .25s, box-shadow .25s, background .25s;
    backdrop-filter: blur(12px);
}

#waitlist-form input:focus{
    outline: none;
    border-color: #4c7dffcc;
    box-shadow: var(--focus-ring);
    background: linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
}

#waitlist-form button {
    width: 100%;
    padding: 16px 18px 15px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 18px;
    border: 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-alt) 95%);
    color: #fff;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 18px -4px #4c7dffb0, 0 6px 40px -8px #7c3aed80;
    transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .4s, filter .4s;
    overflow: hidden;
}

#waitlist-form button:before{
    content:"";
    position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(120deg, rgba(255,255,255,0.3), transparent 45%, transparent 55%, rgba(255,255,255,0.25));
    mix-blend-mode: overlay; opacity:0; transition: opacity .4s;
}

#waitlist-form button:hover{ box-shadow: var(--glow-accent); transform: translateY(-2px); }
#waitlist-form button:hover:before{opacity:1}
#waitlist-form button:active{transform: translateY(1px); box-shadow: 0 3px 14px -4px #4c7dffb0;}
#waitlist-form button:disabled{opacity:.6; filter:grayscale(.2); transform:none; box-shadow:none; cursor:not-allowed}

#message-display {
    margin-top: 6px;
    color: var(--danger);
    min-height: 22px;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

/* Confirmation Screen Styles */
/* Confirmation Screen Styles */
.confirmation .checkmark {
    font-size: clamp(4.2rem, 14vw, 5.6rem);
    color: var(--success);
    filter: drop-shadow(0 0 8px #2ecc7144) drop-shadow(0 0 18px #4c7dff44);
    animation: popIn .9s cubic-bezier(.16,.84,.44,1);
}

/* Ephemeral States */
.confirmation {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:320px;
}

.confirmation .state{animation: fadeState .4s ease both}
.confirmation .state-success h1{margin:18px 0 4px}
.confirmation .success-sub{margin:0; font-size:1rem; color:var(--muted); letter-spacing:.5px; text-transform:lowercase}
.cta-share{margin:18px 0 4px; font-size:.85rem; line-height:1.35; color:var(--muted);}
.primary-insta-cta{margin:-6px 0 20px; font-size:.75rem; line-height:1.3; color:var(--muted);}
.primary-insta-cta .insta-cta{margin-top:8px}
.insta-cta{display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:8px 14px 9px; border-radius:999px; background:linear-gradient(135deg, rgba(76,125,255,0.18), rgba(124,58,237,0.22)); color:#dfe9ff; text-decoration:none; font-weight:600; font-size:.8rem; letter-spacing:.5px; box-shadow:0 2px 10px -4px #000a, 0 0 0 1px rgba(255,255,255,0.12); transition:background .35s, box-shadow .4s, transform .35s;}
.insta-cta:hover{background:linear-gradient(135deg, rgba(76,125,255,0.32), rgba(124,58,237,0.36)); box-shadow:0 4px 16px -6px #4c7dff88, 0 0 0 1px rgba(255,255,255,0.18); transform:translateY(-2px);}
.insta-cta:active{transform:translateY(0); box-shadow:0 2px 10px -6px #4c7dff55, 0 0 0 1px rgba(255,255,255,0.18);}
.insta-icon{width:18px; height:18px; display:block; filter:drop-shadow(0 0 6px #4c7dff55);} 
.insta-cta .insta-handle{background:linear-gradient(90deg, #8fb5ff, #d3b6ff); -webkit-background-clip:text; background-clip:text; color:transparent;}

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

/* Spinner */
.spinner{
    width:70px; height:70px; border-radius:50%;
    border:5px solid rgba(255,255,255,0.12);
    border-top-color:var(--accent);
    border-right-color:var(--accent-alt);
    animation: spin 1s linear infinite, glowPulse 2.2s ease-in-out infinite;
    box-shadow:0 0 0 4px #ffffff05, 0 4px 22px -2px #4c7dff66, 0 0 50px -6px #7c3aedaa;
    margin:10px auto 26px;
}

@keyframes spin {to{transform:rotate(360deg)}}
@keyframes glowPulse {0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

.status-text{font-size:.95rem; letter-spacing:.6px; color:var(--muted); margin:0}

.confirmation .pulse-indicator {
    width: 68px;
    height: 68px;
    margin: 22px auto 0;
    background: conic-gradient(from 0deg, var(--accent), var(--accent-alt), var(--accent));
    border-radius: 50%;
    animation: pulse 1.6s infinite ease-in-out, rotateHue 7s linear infinite;
    box-shadow: 0 0 0 4px #ffffff05, 0 4px 22px -2px #4c7dff66, 0 0 50px -6px #7c3aedaa;
    position: relative;
}

.confirmation .pulse-indicator:after{
    content:""; position:absolute; inset:6px; background:#0d111b; border-radius:50%; box-shadow: inset 0 0 12px #4c7dff55;
}

@keyframes pulse {
    0% { transform: scale(0.92); opacity: 0.55; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0.55; }
}

@keyframes bgShift {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes floatY {
    0%,100% {transform:translateY(0)}
    50% {transform:translateY(-10px)}
}

@keyframes popIn {
    0% {transform: scale(.65) rotate(-8deg); opacity:0}
    60% {transform: scale(1.05) rotate(2deg); opacity:1}
    100% {transform: scale(1) rotate(0deg); opacity:1}
}

@keyframes rotateHue {
    0% {filter:hue-rotate(0deg)}
    100% {filter:hue-rotate(360deg)}
}

/* Floating Instagram Handles */
.insta-float {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0,0);
    font-size: clamp(.55rem, 2.2vw, .85rem);
    font-weight: 600;
    letter-spacing: .5px;
    padding: 6px 12px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(76,125,255,0.25), rgba(124,58,237,0.25));
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    color: #dfe9ff;
    box-shadow: 0 2px 8px -2px #000a, 0 0 0 1px rgba(255,255,255,0.15), 0 0 20px -6px #4c7dff88;
    pointer-events: none;
    opacity: 0;
    animation: instaFall var(--duration,6s) linear forwards;
    z-index: 30;
    will-change: transform, opacity;
}

/* movement now handled via JS for smooth bezier path */

@keyframes instaFall {
    0% {opacity:0; transform: translate(var(--x-start), var(--y-start)) scale(.9) rotate(0deg);}
    8% {opacity:1}
    70% {opacity:1}
    100% {opacity:0; transform: translate(var(--x-end), var(--y-end)) scale(.9) rotate(var(--rot,15deg));}
}

@media (prefers-reduced-motion: reduce){
    .insta-float{animation:none; opacity:0;}
}

/* Accessibility */
.visually-hidden{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
    body, .logo, .pulse-indicator, .container, .confirmation .checkmark{animation:none !important}
}

/* Responsive tweaks */
@media (min-width:600px){
    h1{font-size: clamp(2.4rem,4.6vw,3.1rem)}
}