@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: light;
    --navy: #071735;
    --blue: #0878f9;
    --violet: #4938f5;
    --muted: #69758b;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    color: var(--navy);
    background:
      radial-gradient(ellipse at 12% 15%, rgba(109, 178, 255, .22), transparent 34%),
      radial-gradient(ellipse at 88% 75%, rgba(255, 190, 136, .23), transparent 30%),
      linear-gradient(145deg, #f5f9ff 0%, #fff 48%, #f2f5ff 100%);
}
body::before, body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 440px; height: 440px;
    border: 1px solid rgba(31, 112, 247, .09);
    border-radius: 48% 52% 63% 37%;
    transform: rotate(35deg);
    pointer-events: none;
}
body::before { left: -300px; top: 20%; box-shadow: 0 0 0 38px rgba(31,112,247,.025), 0 0 0 76px rgba(31,112,247,.018); }
body::after { right: -320px; bottom: -10%; box-shadow: 0 0 0 38px rgba(83,65,255,.025), 0 0 0 76px rgba(83,65,255,.018); }
.page-shell { width: min(1180px, calc(100% - 64px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.brand-mark { width: 35px; height: 35px; }
.brand-word { font: 800 25px/1 'Manrope', sans-serif; letter-spacing: .035em; }
.brand-word span, .hero-word span { color: var(--blue); }
.header-note { color: #65718a; font-size: 14px; letter-spacing: .02em; }
.header-note i { margin: 0 9px; color: #a7b0c2; font-style: normal; }
.hero { flex: 1; display: grid; place-items: center; position: relative; padding: 18px 0 34px; }
.hero-content { width: min(850px, 100%); text-align: center; position: relative; z-index: 1; }
.hero-brand { margin-bottom: 31px; }
.hero-mark { width: 65px; height: 65px; display: block; margin: 0 auto 10px; filter: drop-shadow(0 8px 16px rgba(17, 102, 245, .15)); }
.hero-word { font: 800 clamp(36px, 5vw, 54px)/1.1 'Manrope', sans-serif; letter-spacing: .025em; }
.tagline { color: #69758b; margin: 9px 0 0; font-size: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid #e0e9fa; border-radius: 99px; background: rgba(255,255,255,.72); color: #53637d; font-size: 12px; letter-spacing: .035em; }
.status-dot { width: 7px; height: 7px; background: #21bf86; border-radius: 50%; box-shadow: 0 0 0 4px rgba(33,191,134,.12); }
h1 { margin: 19px 0 14px; font: 800 clamp(48px, 7.5vw, 82px)/1.04 'Manrope', sans-serif; letter-spacing: -.065em; }
h1 span { color: #2458f5; }
.intro { margin: 0 auto; color: #5c6880; font-size: clamp(15px, 2vw, 18px); line-height: 1.75; }
.notify-card { margin: 30px auto 34px; width: min(540px, 100%); padding: 12px 13px 12px 17px; display: flex; align-items: center; gap: 13px; text-align: left; background: rgba(255,255,255,.86); border: 1px solid rgba(219,228,243,.9); border-radius: 17px; box-shadow: 0 14px 45px rgba(31,65,125,.08); }
.notify-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; color: #1769ef; background: #edf4ff; font-size: 20px; }
.notify-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.notify-copy strong { font-size: 13px; }
.notify-copy span { color: #7b879b; font-size: 11px; }
.notify-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; padding: 0 17px; border-radius: 12px; color: white; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 700; background: linear-gradient(110deg, #087cf8, #4c3cf5); box-shadow: 0 8px 18px rgba(50, 87, 245, .2); transition: transform .2s, box-shadow .2s; }
.notify-button:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(50,87,245,.27); }
.services-heading { color: #8792a5; font-size: 11px; text-transform: uppercase; letter-spacing: .17em; margin-bottom: 18px; }
.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.service { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 5px 12px; color: #5c6880; font-size: 12px; line-height: 1.5; }
.service + .service { border-left: 1px solid #e2e8f2; }
.service-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #176df3; border: 1px solid #dce8ff; background: rgba(255,255,255,.8); border-radius: 14px; font-size: 19px; font-weight: 600; }
.site-footer { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 23px 0 28px; color: #8792a5; font-size: 11px; }
.site-footer a { color: #66748c; text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
.footer-separator { width: 1px; height: 13px; background: #d9e1ed; }
@media (max-width: 680px) {
    .page-shell { width: min(100% - 36px, 520px); }
    .site-header { padding: 22px 0; }
    .brand-word { font-size: 21px; }
    .brand-mark { width: 30px; height: 30px; }
    .header-note { display: none; }
    .hero { padding: 28px 0 20px; }
    .hero-brand { margin-bottom: 27px; }
    .hero-mark { width: 55px; height: 55px; }
    .tagline { font-size: 13px; }
    h1 { font-size: clamp(47px, 12vw, 66px); }
    .intro { line-height: 1.65; }
    .desktop-break { display: none; }
    .notify-card { flex-wrap: wrap; padding: 13px; gap: 10px; }
    .notify-copy { flex: 1; }
    .notify-button { width: 100%; }
    .services { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .service { padding: 7px 5px; }
    .service + .service { border-left: 0; }
    .service:nth-child(even) { border-left: 1px solid #e2e8f2; }
    .service:last-child { grid-column: 1 / -1; }
    .site-footer { flex-wrap: wrap; text-align: center; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }