:root { color-scheme: light; font-family: Inter, "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #091f44; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
.ambience { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.gradient { position: absolute; border-radius: 50%; filter: blur(48px); }
.gradient-left { width: 510px; height: 880px; left: -400px; top: -360px; background: linear-gradient(165deg, #00e5b8 15%, #00becb 55%, #0c70fd 95%); transform: rotate(25deg); animation: drift 22s ease-in-out infinite alternate; }
.gradient-right { width: 860px; height: 440px; right: -420px; bottom: -290px; background: linear-gradient(120deg, #0c70fd 15%, #00bbd2 65%, #00e7b2); transform: rotate(-36deg); animation: drift 26s ease-in-out infinite alternate-reverse; }
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; width: min(100% - 112px, 1280px); margin: auto; }
header { padding-top: 52px; }
/* Original Gestileads logo extracted from the supplied brand reference. */
.brand { position: relative; overflow: hidden; width: 228px; height: 57px; background: white; }
.brand img { display: block; width: 100%; height: auto; }
main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 86px 0 98px; margin-left: 11%; }
.eyebrow { margin: 0 0 29px; color: #086879; font-size: .75rem; font-weight: 650; letter-spacing: .14em; line-height: 1.7; padding: 8px 13px; border: 1px solid #d5eae9; background: #f6fbfa; border-radius: 6px; }
h1 { margin: 0; max-width: 900px; font-size: clamp(2.5rem, 5.1vw, 4.7rem); font-weight: 650; letter-spacing: -.055em; line-height: 1.09; }
h1 span { display: block; color: #076fb9; background: linear-gradient(100deg, #086bea, #007d88); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.description { max-width: 580px; margin: 28px 0 0; font-size: 1.125rem; line-height: 1.8; color: #526177; }
.coming { display: flex; align-items: center; gap: 11px; margin: 40px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #008578; box-shadow: 0 0 0 5px #e5f7f2; }
.capabilities { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; font-size: .875rem; line-height: 1.8; color: #526177; }
.capabilities span { color: #64778d; }
footer { padding: 0 0 30px; color: #526177; font-size: .75rem; }
@keyframes drift { to { translate: 12px 16px; } }
@media (min-width: 1600px) { .gradient-left { left: -340px; } .gradient-right { right: -340px; } }
@media (max-width: 760px) { .page { width: calc(100% - 48px); } header { padding-top: 30px; } main { margin-left: 0; padding: 72px 0 82px; } h1 { font-size: clamp(2.45rem, 7.5vw, 3.6rem); } .eyebrow { font-size: .75rem; letter-spacing: .08em; max-width: 330px; } .description { font-size: 1rem; max-width: 500px; } .gradient-left { opacity: .4; left: -475px; } .gradient-right { opacity: .65; right: -690px; bottom: -250px; } .capabilities { gap: 8px; } footer { padding-bottom: 24px; } }
@media (max-width: 360px) { .page { width: calc(100% - 36px); } h1 { font-size: 2.25rem; } .capabilities { font-size: .8125rem; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .gradient { animation: none; } }
@media (forced-colors: active) { h1 span { background: none; -webkit-text-fill-color: currentColor; } .status-dot { background: CanvasText; } .ambience { display: none; } }