/* AirInbox landing UI only. No page background color, gradient, image, or overlay. */
:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8faff; font-synthesis: none;}
* { box-sizing: border-box;   -webkit-user-select: none;
    user-select: none;}
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden;
    background: url('./assets/bg.png'); height:100vh; background-color:#012560;}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.landing { position: relative; min-height: 100svh; width: 100%; padding: clamp(24px, 3vw, 48px) clamp(25px, 5.45vw, 96px) 35px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand__logo { width: clamp(35px, 3vw, 46px); height: clamp(35px, 3vw, 46px); object-fit: contain; }
.brand__name { font-size: clamp(26px, 2.45vw, 39px); font-weight: 590; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.brand__air { color: #fff; }
.brand__inbox { background: linear-gradient(95deg, #0ecdf1 0%, #4a93ff 55%, #c458ed 100%); color: transparent; background-clip: text; -webkit-background-clip: text; }
.nav-dashboard { border: 1px solid rgba(110,143,255,.65); background: rgba(34,45,98,.16); border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; padding: 11px 24px; font-size: 14px; line-height: 1; color: #e7e8ff; transition: border-color .4s, box-shadow .4s; }
.nav-dashboard:hover, .nav-dashboard:focus-visible { border-color: #cf6bff; box-shadow: 0 0 16px rgba(107,93,255,.22); }
.hero { display: flex; align-items: flex-start; min-height: calc(100svh - 105px); padding-top: clamp(66px, 9.6vh, 118px); }
.hero__copy { width: min(100%, 645px); }
.hero__eyebrow { margin: 0 0 25px; color: #c5cdea; font-size: 11px; font-weight: 550; letter-spacing: .34em; text-transform: uppercase; }
.hero__title { font-size: clamp(38px, 4.25vw, 74px); line-height: 1.11; letter-spacing: -.056em; font-weight: 520; margin: 0; }
.hero__title-line { display: block; white-space: nowrap; }
.hero__title-gradient { width: fit-content; max-width: 100%; padding-right: .05em; background-image: linear-gradient(100deg, #04e2f0 0%, #3aa6ff 23%, #b4a4ff 51%, #f64dce 76%, #26e5e9 100%); background-size: 240% 100%; background-position: 0% 50%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: title-color-drift 24s ease-in-out infinite alternate; }
@keyframes title-color-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero__description { color: #bcc8e6; font-size: clamp(16px, 1.45vw, 21px); font-weight: 360; line-height: 1.55; margin: 23px 0 30px; }
/* One shared gradient and one synchronized 18s movement for button fill, neon edge and halo. */
.neon-button {display:none !important; --neon-flow: linear-gradient(100deg, #00dff2 0%, #087cfb 18%, #6654ff 42%, #f62bd9 65%, #3475ff 82%, #02d9f1 100%); --neon-size: 275% 100%; position: relative; isolation: isolate; z-index: 0; display: inline-flex; width: fit-content; min-width: 266px; min-height: 60px; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; background-image: var(--neon-flow); background-size: var(--neon-size); background-position: 0% 50%; animation: neon-flow 18s ease-in-out infinite alternate; transition: transform .35s ease; }
.neon-button::before, .neon-button::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; background-image: var(--neon-flow); background-size: var(--neon-size); background-position: 0% 50%; animation: neon-flow 18s ease-in-out infinite alternate; }
/* crisp, bright 1.5px matching gradient rim */
.neon-button::before { z-index: 1; inset: -1.5px; padding: 1.5px; background-image: linear-gradient(100deg, #8efaff 0%, #59b7ff 18%, #c099ff 43%, #ff80e9 66%, #79b8ff 83%, #8efaff 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* diffuse glow follows exact same stops/time as the fill */
.neon-button::after { z-index: -1; inset: -9px; filter: blur(16px); opacity: .66; transition: opacity .35s ease; }
@keyframes neon-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.neon-button__content { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 15px; white-space: nowrap; font-size: 19px; font-weight: 510; text-shadow: 0 1px 3px rgba(22,23,66,.2); }
.arrow-icon { flex: 0 0 auto; }
.neon-button:hover { transform: translateY(-1px); }
.neon-button:hover::after, .neon-button:focus-visible::after { opacity: .88; }
.neon-button:focus-visible, .nav-dashboard:focus-visible, .brand:focus-visible { outline: 2px solid #c5eaff; outline-offset: 5px; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 49px; max-width: 535px; }
.feature-card { position: relative; min-height: 195px; padding: 28px 25px 25px; border-radius: 17px; overflow: hidden; background: rgba(42,51,109,.17); border: 1px solid rgba(139,123,248,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 32px rgba(5,10,29,.10); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.feature-card--pink { border-color: rgba(237,75,221,.68); }
.feature-card--cyan { border-color: rgba(29,199,255,.76); }
.feature-card__icon { width: 34px; height: 34px; margin-bottom: 14px; }
.feature-card--pink .feature-card__icon { color: #ee88ff; filter: drop-shadow(0 0 6px rgba(241,84,249,.55)); }
.feature-card--cyan .feature-card__icon { color: #17dafa; filter: drop-shadow(0 0 6px rgba(22,219,255,.47)); }
.feature-card h2 { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 9px; }
.feature-card p { margin: 0; color: #bdc7e8; font-size: 14px; line-height: 1.52; font-weight: 380; }
.feature-card__accent { position: absolute; bottom: 20px; left: 25px; width: 40px; height: 3px; border-radius: 2px; }
.feature-card--pink .feature-card__accent { background: linear-gradient(90deg,#f44af7,transparent); }
.feature-card--cyan .feature-card__accent { background: linear-gradient(90deg,#00d5ff,transparent); }
@media (max-width: 1100px) { .hero__copy { max-width: 58%; } .hero__title { font-size: clamp(35px, 4.3vw, 56px); } .hero__description { font-size: 16px; } .features { margin-top: 36px; } }
@media (max-width: 750px) { .landing { padding: 25px 22px 32px; } .brand__name { font-size: 28px; } .nav-dashboard { padding: 10px 15px; font-size: 12px; } .hero { padding-top: 85px; min-height: auto; } .hero__copy { max-width: 100%; } .hero__eyebrow { font-size: 9px; letter-spacing: .23em; } .hero__title { font-size: clamp(32px, 7.2vw, 53px); } .hero__title-line { white-space: normal; } .hero__description { font-size: 16px; } .desktop-break { display: none; } .feature-card { min-height: 172px; padding: 22px 19px; } .features { margin-top: 55px; } }
@media (max-width: 430px) { .topbar { gap: 10px; } .brand { gap: 6px; } .brand__logo { width: 33px; height: 33px; } .brand__name { font-size: 24px; } .nav-dashboard { padding: 10px 12px; } .hero { padding-top: 73px; } .hero__title { font-size: 35px; } .neon-button { min-width: 235px; min-height: 56px; } .neon-button__content { font-size: 17px; } .features { gap: 10px; } .feature-card { min-height: 185px; padding: 19px 13px; } .feature-card h2 { font-size: 15px; } .feature-card p { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .neon-button, .neon-button::before, .neon-button::after, .hero__title-gradient { animation: none; } .neon-button, .neon-button::after { transition: none; } }