/* Montserrat global font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');

:root {
    --accent: #ff5a7a;
    --accent-2: #ff9066;
    --bg-deep: #0e1423;
    --bg-hero-start: #421b73;
    --bg-hero-end: #0f1631;
    --muted: #9aa3b2;
}

html, body { height: 100%; }
body {
    font-family: 'Montserrat', Arial, sans-serif;
    background: var(--bg-deep);
    color: #e9eef7;
}

/* Utility spacing to mimic large paddings in wireframe */
.pt-7 { padding-top: 5rem; }
.pt-9 { padding-top: 7rem; }
.py-6 { padding-block: 4rem; }

@media (min-width: 992px) {
    .pt-lg-9 { padding-top: 9rem !important; }
}

/* Brand bits */
.text-accent { color: var(--accent); }
.btn-accent {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border: 0;
    color: #fff;
    box-shadow: 0 10px 25px rgba(255, 105, 130, 0.35);
}
.btn-accent:hover { filter: brightness(1.05); color: #fff; }

.launching-pill {
    background: linear-gradient(90deg, rgba(255,90,122,.2), rgba(255,144,102,.2));
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
}

/* Navbar */
.navbar { backdrop-filter: blur(2px); }
.navbar .nav-link { color: #c5ccda !important; }
.brand-text { letter-spacing: .2px; }

/* Hero */
.hero-section { position: relative; }
.gradient-bg {
    position: absolute; inset: 0;
    background: radial-gradient(80vw 60vw at -10% 10%, rgba(130, 0, 255, .35), transparent 60%),
                            radial-gradient(60vw 60vw at 90% 10%, rgba(255, 0, 150, .25), transparent 60%),
                            radial-gradient(100vw 80vw at 50% -10%, rgba(120, 60, 200, .35), transparent 60%),
                            linear-gradient(180deg, var(--bg-hero-start) 0%, var(--bg-hero-end) 70%);
    z-index: -1;
}
.hero-subtitle { max-width: 820px; color: var(--muted); }
.hero-circle {
    position: absolute; right: 5%; top: -2rem; width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02));
    filter: blur(0.5px);
}

/* Signup card */
.signup-card {
    max-width: 760px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.signup-card .form-control {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
}
.signup-card .form-control:focus {
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 .25rem rgba(255,90,122,.15);
    color: #fff;
}
.form-floating>label { color: #c5ccda; }

/* Community */
.community-section { background: transparent; }
.icon-tile i { font-size: 2rem; }
.icon-tile .icon-svg { width: 2rem; height: 2rem; display: inline-block; vertical-align: middle; }
.icon-red { color: #ff6b6b; }
.icon-blue { color: #4fc3ff; }
.icon-green { color: #3ddc84; }
.icon-orange { color: #ffa54f; }

.update-card {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
}
.social { font-size: 1.25rem; opacity: .9; }
.social:hover { opacity: 1; color: #fff; }

/* Footer */
.footer { border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.2); }

/* Tweaks */
.text-muted { color: var(--muted) !important; }
.display-lg-2 { font-size: 3.25rem; }
@media (min-width: 992px) {.display-lg-2 { font-size: 5rem; }}