/* Redesigned pages (index, request-early-access, contact) — shared base styles.
   Section and component styles live inline in the page markup, as produced by
   the redesign; this file holds only what inline styles cannot express:
   @font-face, resets, hover states, keyframes and media queries. */

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: linear-gradient(180deg, #eef7f9 0%, #DEEBF0 60%, #e7f1f4 100%);
}

body {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #033847;
    background: transparent;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: #033847; text-decoration: none; transition: color .2s ease; }
a:hover { color: #0f8f88; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
input::placeholder { color: #7a9aa5; }

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

.fd-fade { animation: fdFade .5s ease both; }

@media (prefers-reduced-motion: reduce) {
    .fd-wave { display: none !important; }
}

/* The section anchor links don't fit in the nav pill on phones — keep just
   the logo and CTA there; every section is reachable by scrolling. */
@media (max-width: 720px) {
    .fd-nav-links { display: none !important; }
}

/* Hover states — !important because the base styles are inline on the elements. */
.fd-btn-nav:hover { background: #00EEC4 !important; color: #033847 !important; box-shadow: 0 8px 24px rgba(0, 238, 196, 0.4); }
.fd-btn-dark:hover { background: #012530 !important; box-shadow: 0 10px 28px rgba(3, 56, 71, 0.35); }
.fd-btn-outline:hover { background: rgba(3, 56, 71, 0.08) !important; border-color: #033847 !important; }
.fd-btn-teal:hover { background: #9FF5DF !important; box-shadow: 0 10px 28px rgba(0, 238, 196, 0.4); }