html, body {
    margin: 0;
    background: var(--page-background, #F5F7FA);
    color: var(--ink, #1E293B);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

#blazor-error-ui {
    background: var(--error-soft, #FEF2F2);
    color: var(--error-soft-strong, #B91C1C);
    bottom: 0;
    box-shadow: var(--shadow-md);
    display: none;
    left: 0;
    padding: 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { display: none; }

.public-boot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: var(--text-muted);
}

.public-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--header-background);
    border-bottom: 1px solid var(--border);
}

.public-header__brand { display: inline-flex; align-items: center; }

.public-header__nav { display: flex; gap: 1.5rem; }
.public-header__nav a {
    color: var(--slate);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.public-header__nav a:hover { color: var(--color-primary); }

.public-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem 4rem;
}

.public-footer {
    text-align: center;
    padding: 1.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.public-card {
    width: 100%;
    max-width: 760px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.25rem 2.5rem;
}

.public-card h1 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    color: var(--ink-strong);
}

.public-subtitle {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
}

.public-form__section { margin-bottom: 1.75rem; }
.public-form__section h2 {
    font-size: 1rem;
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

.public-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.public-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.public-form__wide { grid-column: 1 / -1; }

.public-form__grid input,
.public-form__grid select,
.public-form__grid textarea,
.public-status input {
    font-weight: 400;
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-light);
    color: var(--ink);
    font-family: inherit;
}

.public-form__grid input:focus,
.public-form__grid select:focus,
.public-form__grid textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.validation-message {
    color: var(--error);
    font-weight: 400;
    font-size: 0.8rem;
}

.legal-document-preview {
    margin-bottom: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
}
.legal-document-preview summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
}
.legal-document-preview__content {
    margin: 0.6rem 0 0;
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.public-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.75rem;
}
.public-form__checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    flex: none;
}

.public-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.7rem 1.6rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
}

.public-button:disabled { opacity: 0.6; cursor: not-allowed; }

.public-button--secondary {
    background: none;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.public-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.public-alert--error {
    background: var(--error-soft);
    color: var(--error-soft-strong);
}

.public-result--success p { color: var(--ink); }
.public-result__hint { color: var(--text-muted); font-size: 0.85rem; }

.public-status__badge {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.public-status__badge--neutral { background: var(--info-soft); color: var(--info-soft-strong); }
.public-status__badge--positive { background: var(--success-soft); color: var(--success-soft-strong); }
.public-status__badge--negative { background: var(--error-soft); color: var(--error-soft-strong); }
.public-status__badge--warning { background: #FEF3C7; color: #92400E; }

.public-status__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.25rem;
}
.public-status__details dt { color: var(--text-muted); font-weight: 600; }
.public-status__details dd { margin: 0; color: var(--ink); }

@media (max-width: 640px) {
    .public-form__grid { grid-template-columns: 1fr; }
    .public-card { padding: 1.5rem; }
    .public-header { padding: 1rem; }
}

/* =========================================================================
   Marketing site (Home, Çözümlerimiz, Özellikler, Paketler, Hakkımızda,
   İletişim, Giriş yönlendirme, yasal sayfalar). The three original flows
   (/basvuru, /dogrulama, /durum) keep using the .public-* rules above
   unchanged — these are additive, new class names only.
   ========================================================================= */

* { box-sizing: border-box; }

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: 1rem;
    z-index: 2000;
    background: var(--ink-strong);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* FocusOnNavigate makes headings programmatically focusable after route changes. Keep that
   screen-reader behavior without drawing the browser's default rectangle around the page title. */
h1[tabindex="-1"]:focus { outline: none; }

.public-layout { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Header / nav --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-background);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

.site-header__brand { display: inline-flex; align-items: center; }

/* Visually hidden but still focusable/tabbable (unlike display:none) — real keyboard users can
   Tab to it and press Space to toggle; its <label> is the visible hamburger button. Zero JS. */
.site-nav-toggle-checkbox {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-light);
    cursor: pointer;
}
.site-header__toggle-bar { width: 20px; height: 2px; background: var(--ink); margin: 0 auto; }
.site-nav-toggle-checkbox:focus-visible ~ .site-header__toggle {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    flex-wrap: nowrap;
}
.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--color-primary); }

.site-nav__actions { display: flex; flex: none; align-items: center; gap: 0.75rem; margin-left: 0.5rem; white-space: nowrap; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.public-culture-switcher { display: inline-flex; align-items: center; }
.public-culture-switcher select {
    min-width: 58px;
    min-height: 42px;
    padding: 0.55rem 1.8rem 0.55rem 0.7rem;
    border: 1px solid rgba(127, 208, 245, 0.42);
    border-radius: 12px;
    color: #E8F7FF;
    background-color: rgba(255, 255, 255, 0.055);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}
.public-culture-switcher select:hover { border-color: rgba(22, 199, 252, 0.75); background-color: rgba(22, 199, 252, 0.1); }
.public-culture-switcher select:focus-visible { outline: 2px solid #7FD0F5; outline-offset: 2px; }
.public-culture-switcher option { color: #0F1F35; background: #fff; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}
.btn--primary { background: var(--gradient-brand); color: #fff; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover { background: var(--surface-tinted); }
.btn--lg { padding: 0.85rem 1.75rem; font-size: 1rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Hero --- */
.hero {
    background: linear-gradient(180deg, var(--surface-tinted) 0%, var(--page-background) 100%);
    padding: 4.5rem 1.5rem 4rem;
}
.hero__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.hero__inner--with-media {
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    text-align: left;
}
.hero__inner--with-media .hero__actions { justify-content: flex-start; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); color: var(--ink-strong); margin: 0.5rem 0 1rem; line-height: 1.15; }
.hero__subtitle { font-size: 1.1rem; color: var(--text-muted); margin: 0 0 2rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

/* --- Generic section layout --- */
.section { padding: 3.5rem 1.5rem; }
.section--alt { background: var(--surface-tinted); }
.section--cta { background: var(--gradient-brand); }
.section--cta h2, .section--cta p { color: #fff; }
.section--cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.7); }
.section--cta .btn--ghost:hover { background: rgba(255,255,255,0.12); }
.section--cta .btn--primary { background: #fff; color: var(--color-primary-dark); }

.section__inner { max-width: 1200px; margin: 0 auto; }
.section__inner--narrow { max-width: 760px; }
.split-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}
.section__inner h2 { font-size: 1.6rem; color: var(--ink-strong); margin: 0.35rem 0 1.5rem; }
.section--cta .section__inner h2 { margin-bottom: 0.75rem; }

.page-header { padding: 3rem 1.5rem 1rem; text-align: center; }
.page-header__inner { max-width: 760px; margin: 0 auto; }
.page-header__inner h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--ink-strong); margin: 0 0 0.75rem; }
.page-header__inner p { color: var(--text-muted); font-size: 1.05rem; }

/* --- Card grids --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.info-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.info-card h3 { margin: 0 0 0.5rem; color: var(--ink-strong); font-size: 1.05rem; }
.info-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

/* --- Lists --- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.check-list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--ink);
    line-height: 1.4;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gradient-brand);
}

.process-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.process-list__item { display: flex; gap: 1rem; align-items: flex-start; }
.process-list__number {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-list__item h3 { margin: 0 0 0.25rem; color: var(--ink-strong); font-size: 1rem; }
.process-list__item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.stacked-sections { display: grid; gap: 2.25rem; }
.stacked-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.stacked-section:nth-child(even) .stacked-section__copy { order: 2; }
.stacked-section:nth-child(even) .public-image-frame { order: 1; }
.stacked-section h2 { font-size: 1.25rem; color: var(--ink-strong); margin: 0 0 0.5rem; }
.stacked-section p { color: var(--text-muted); margin: 0 0 0.9rem; line-height: 1.55; }

/* --- Packages --- */
.package-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.package-card h2 { margin: 0; font-size: 1.2rem; color: var(--ink-strong); }
.package-card__description { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.package-card__price { margin: 0; }
.package-card__amount { font-size: 1.5rem; font-weight: 800; color: var(--ink-strong); }
.package-card__period { color: var(--text-muted); font-size: 0.85rem; }
.package-card .btn { margin-top: auto; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--surface-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.empty-state h2 { margin: 0; color: var(--ink-strong); font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.empty-state p { max-width: 58ch; margin: 0; color: var(--text-muted); }
.empty-state__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; color: var(--public-blue, #0A84F1); background: var(--surface-tinted); font-size: 1.5rem; font-weight: 800; }
.field-hint { display: block; color: var(--text-muted); font-size: 0.73rem; font-weight: 500; line-height: 1.45; }
.field-hint--warning { color: #8A5B07; }

/* --- Legal pages --- */
.legal-updated { color: var(--text-muted); font-size: 0.85rem; }
.legal-notice {
    background: #FEF3C7;
    color: #92400E;
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    margin-bottom: 2rem;
}
.legal-body .stacked-section { margin-bottom: 1.75rem; }

/* --- CMS media slots --- */
.public-image-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 180px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--surface-tinted), var(--surface-card));
    box-shadow: var(--shadow-sm);
}
.public-image-frame--hero { aspect-ratio: 4 / 3; min-height: 300px; }
.public-image-frame--section { aspect-ratio: 16 / 7; margin: 0 0 1.5rem; }
.public-image-frame--split, .public-image-frame--stacked { aspect-ratio: 4 / 3; }
.public-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.public-image-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 28%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 31%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 65%);
}
.public-image-fallback::after {
    content: "";
    position: absolute;
    width: 38%;
    aspect-ratio: 1;
    right: 9%;
    bottom: -18%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
}

/* --- Contact form honeypot: visually hidden, still in the tab/DOM/reading order for bots that
   ignore CSS but skip type="hidden"; screen-reader users never encounter it thanks to
   aria-hidden on the wrapping label in Contact.razor. --- */
.public-form__honeypot {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Footer --- */
.site-footer { background: var(--ink-strong); color: var(--muted-on-dark, #A1B1C7); margin-top: auto; }
.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
}
.site-footer__brand p { font-size: 0.85rem; margin-top: 0.75rem; max-width: 32ch; opacity: 0.85; }
.site-footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin: 0 0 0.35rem; }
.site-footer__col a { color: inherit; text-decoration: none; font-size: 0.88rem; opacity: 0.85; }
.site-footer__col a:hover { opacity: 1; text-decoration: underline; }
.site-footer__bottom {
    text-align: center;
    padding: 1.25rem;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    opacity: 0.75;
}

@media (max-width: 900px) {
    .site-header__toggle { display: flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--surface-light);
        border-bottom: 1px solid var(--border);
        padding: 1rem 1.5rem 1.5rem;
        gap: 0.85rem;
    }
    .site-nav-toggle-checkbox:checked ~ .site-nav { display: flex; }
    .site-nav__actions { flex-direction: column; align-items: stretch; margin-left: 0; }
    .card-grid, .card-grid--3 { grid-template-columns: 1fr; }
    .hero__inner--with-media, .split-section, .stacked-section { grid-template-columns: 1fr; }
    .hero__inner--with-media { text-align: center; }
    .hero__inner--with-media .hero__actions { justify-content: center; }
    .stacked-section:nth-child(even) .stacked-section__copy,
    .stacked-section:nth-child(even) .public-image-frame { order: initial; }
    .public-image-frame--hero { min-height: 220px; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* =========================================================================
   2026 public-site refresh
   Brand-led visual layer: deep route navy + electric azure/cyan from the logo.
   The rules below intentionally refine the existing class contract so static SSR,
   interactive forms and CMS-driven pages continue to share one design system.
   ========================================================================= */

:root {
    --public-navy: #00081C;
    --public-navy-soft: #061530;
    --public-blue: #0A84F1;
    --public-cyan: #16C7FC;
    --public-line: rgba(10, 132, 241, 0.16);
    --public-glow: 0 24px 70px rgba(10, 132, 241, 0.18);
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(22, 199, 252, 0.055), transparent 26rem),
        var(--page-background, #F5F7FA);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a, button, input, select, textarea { transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }

.site-main { flex: 1; min-width: 0; }
.site-main > .public-card { margin: clamp(2.5rem, 6vw, 5rem) auto; }

/* Header */
.site-header {
    background: rgba(0, 8, 28, 0.93);
    border-bottom-color: rgba(127, 208, 245, 0.16);
    box-shadow: 0 12px 36px rgba(0, 8, 28, 0.14);
    backdrop-filter: blur(18px) saturate(140%);
}

.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22, 199, 252, 0.6), transparent);
}

.site-header__inner { max-width: 1560px; min-height: 72px; padding: 0.8rem 1.5rem; }
.site-header__brand { gap: 0.85rem; text-decoration: none; flex: none; }
.site-header__brand .brand-logo { display: block; width: auto; height: 42px !important; margin: 0; }
.site-header__brand-note {
    max-width: 10rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(221, 227, 234, 0.22);
    color: var(--muted-on-dark);
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.site-nav { gap: 1.2rem; }
.site-nav a { color: #DCE7F5; font-size: 0.86rem; letter-spacing: 0.01em; }
.site-nav > a { position: relative; padding: 0.8rem 0; }
.site-nav > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0.45rem;
    height: 2px;
    border-radius: 999px;
    background: var(--gradient-brand);
    transition: right 160ms ease;
}
.site-nav > a:hover { color: #fff; }
.site-nav > a:hover::after { right: 0; }
.site-nav__actions { gap: 0.55rem; margin-left: 0; margin-inline-start: 0.5rem; }
.site-header .btn { padding: 0.65rem 1rem; }
.site-header .btn--ghost { color: #BDEEFF; border-color: rgba(127, 208, 245, 0.48); background: rgba(255,255,255,0.035); }
.site-header .btn--ghost:hover { background: rgba(22, 199, 252, 0.1); }
.site-header__toggle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.site-header__toggle-bar { background: #DCE7F5; }

/* Buttons */
.btn, .public-button {
    min-height: 46px;
    border-radius: 14px;
    font-weight: 750;
    letter-spacing: 0.005em;
}
.btn--primary, .public-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--public-blue), var(--public-cyan));
    box-shadow: 0 10px 28px rgba(10, 132, 241, 0.24);
}
.btn--primary:hover, .public-button:hover { filter: none; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10, 132, 241, 0.32); }
.btn--ghost { border-color: rgba(10, 132, 241, 0.45); background: rgba(255,255,255,0.62); }
.btn--ghost:hover { transform: translateY(-2px); }
.btn--lg { min-height: 52px; padding-inline: 1.65rem; }

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.5rem) 1.5rem clamp(4rem, 7vw, 6.5rem);
    background:
        radial-gradient(circle at 78% 18%, rgba(22, 199, 252, 0.19), transparent 25rem),
        radial-gradient(circle at 14% 78%, rgba(10, 132, 241, 0.2), transparent 30rem),
        linear-gradient(145deg, #00081C 0%, #061530 58%, #052044 100%);
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.24;
    background-image: linear-gradient(rgba(127,208,245,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(127,208,245,0.1) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.hero__inner--with-media { max-width: 1240px; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); }
.hero h1 { max-width: 15ch; color: #F7FBFF; font-size: clamp(2.45rem, 5.2vw, 4.65rem); line-height: 1.02; letter-spacing: -0.045em; }
.hero__subtitle { max-width: 62ch; color: #B8C7DA; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; }
.hero .eyebrow { color: #7FD0F5; }
.hero .btn--ghost { color: #E8F7FF; border-color: rgba(127,208,245,0.55); background: rgba(255,255,255,0.035); }
.hero .btn--ghost:hover { background: rgba(22,199,252,0.1); }

.hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 2.25rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(127, 208, 245, 0.18);
}
.hero__proof span { color: #8FA3BF; font-size: 0.73rem; line-height: 1.35; padding-right: 0.8rem; }
.hero__proof strong { display: block; color: #E7F1FB; font-size: 0.8rem; margin-bottom: 0.18rem; }

/* Typography and sections */
.section { padding: clamp(4rem, 7vw, 6.25rem) 1.5rem; }
.section--alt { background: linear-gradient(180deg, #EDF6FF 0%, #F7FBFF 100%); }
.section__inner { max-width: 1240px; }
.section__inner--narrow { max-width: 820px; }
.section__inner h2 { max-width: 25ch; margin-top: 0.45rem; font-size: clamp(1.8rem, 3.3vw, 2.75rem); line-height: 1.12; letter-spacing: -0.035em; }
.eyebrow { color: var(--public-blue); letter-spacing: 0.1em; font-size: 0.74rem; }

.page-header {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6rem) 1.5rem clamp(3rem, 5vw, 4.5rem);
    background: linear-gradient(140deg, #00081C 0%, #071B39 100%);
}
.page-header::after {
    content: "";
    position: absolute;
    width: 28rem;
    aspect-ratio: 1;
    right: -10rem;
    top: -17rem;
    border: 1px solid rgba(22,199,252,0.25);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(10,132,241,0.04), 0 0 0 8rem rgba(10,132,241,0.025);
}
.page-header__inner { position: relative; z-index: 1; max-width: 850px; }
.page-header__inner h1 { color: #F7FBFF; font-size: clamp(2.35rem, 4.5vw, 4rem); letter-spacing: -0.04em; }
.page-header__inner p { color: #AFC0D5; max-width: 68ch; margin-inline: auto; line-height: 1.7; }

/* Cards and iconography */
.card-grid { gap: 1.35rem; }
.info-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 1.7rem;
    border-color: var(--public-line);
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(15, 31, 53, 0.06);
}
.info-card::after {
    content: "";
    position: absolute;
    width: 8rem;
    aspect-ratio: 1;
    right: -5rem;
    bottom: -5rem;
    border-radius: 50%;
    background: rgba(22,199,252,0.08);
}
.info-card:hover { transform: translateY(-5px); border-color: rgba(10,132,241,0.38); box-shadow: var(--public-glow); }
.info-card h3 { margin-top: 1rem; font-size: 1.08rem; }
.info-card p { line-height: 1.68; }
.public-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--public-blue);
    border: 1px solid rgba(10,132,241,0.18);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(10,132,241,0.11), rgba(22,199,252,0.05));
}
.public-icon svg { width: 24px; height: 24px; }

.check-list { gap: 0.85rem; }
.check-list li { padding-left: 1.9rem; line-height: 1.55; }
.check-list li::before {
    top: 0.28rem;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #E8F6FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='%230A84F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 0.76fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.workflow-rail {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 1rem;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(127,208,245,0.16);
    border-radius: 26px;
    background: linear-gradient(145deg, #061530, #0A2346);
    box-shadow: var(--public-glow);
}
.workflow-rail::after { content: "366"; position: absolute; right: -0.3rem; bottom: -2.7rem; color: rgba(255,255,255,0.035); font-size: 9rem; font-weight: 800; }
.workflow-rail span { z-index: 1; color: #F2F8FE; font-weight: 700; font-size: 0.9rem; }
.workflow-rail i { width: 1px; height: 1.35rem; margin: 0.15rem 0 0.15rem 0.45rem; background: linear-gradient(var(--public-cyan), var(--public-blue)); }
.workflow-rail span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 0.75rem; border: 2px solid var(--public-cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(22,199,252,0.08); }

.process-list { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: steps; }
.process-list::before { content: ""; position: absolute; left: 2rem; right: 2rem; top: 1.45rem; height: 1px; background: linear-gradient(90deg, var(--public-blue), var(--public-cyan)); opacity: 0.32; }
.process-list__item { position: relative; z-index: 1; display: block; padding: 0 1rem 0 0; }
.process-list__number { width: 3rem; height: 3rem; margin-bottom: 1.15rem; box-shadow: 0 9px 24px rgba(10,132,241,0.22); }
.process-list__item h3 { font-size: 1.02rem; }
.process-list__item p { line-height: 1.58; }

/* CMS image and code-native fallback */
.public-image-frame { border-color: rgba(127,208,245,0.2); border-radius: 26px; box-shadow: 0 22px 58px rgba(0,8,28,0.16); }
.public-image-fallback {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 25%, rgba(22,199,252,0.2), transparent 22%),
        linear-gradient(145deg, #061530, #0A2B55);
}
.public-image-fallback::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(rgba(127,208,245,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(127,208,245,0.16) 1px, transparent 1px); background-size: 38px 38px; }
.public-image-fallback::after { width: 46%; right: -8%; bottom: -24%; border-color: rgba(22,199,252,0.28); }
.public-image-fallback__orbit { position: absolute; border: 1px solid rgba(127,208,245,0.24); border-radius: 50%; }
.public-image-fallback__orbit--one { width: 68%; aspect-ratio: 1; top: -34%; right: -18%; }
.public-image-fallback__orbit--two { width: 42%; aspect-ratio: 1; left: -20%; bottom: -26%; }
.public-image-fallback__route { position: absolute; left: 14%; right: 14%; top: 53%; height: 2px; transform: rotate(-10deg); transform-origin: center; background: linear-gradient(90deg, transparent, var(--public-cyan), var(--public-blue), transparent); box-shadow: 0 0 18px rgba(22,199,252,0.5); }
.public-image-fallback__node { position: absolute; z-index: 2; width: 12px; height: 12px; border: 3px solid #BDEEFF; border-radius: 50%; background: var(--public-blue); box-shadow: 0 0 0 6px rgba(22,199,252,0.11), 0 0 18px rgba(22,199,252,0.6); }
.public-image-fallback__node--one { left: 20%; top: 58%; }
.public-image-fallback__node--two { left: 49%; top: 47%; }
.public-image-fallback__node--three { right: 19%; top: 36%; }
.public-image-fallback__panel { position: absolute; right: 7%; bottom: 8%; width: 37%; padding: 0.8rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(0,8,28,0.68); backdrop-filter: blur(8px); box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
.public-image-fallback__panel i { display: block; height: 5px; margin: 0.35rem 0; border-radius: 999px; background: linear-gradient(90deg, rgba(22,199,252,0.75), rgba(255,255,255,0.12)); }
.public-image-fallback__panel i:nth-child(2) { width: 72%; }
.public-image-fallback__panel i:nth-child(3) { width: 48%; }

/* Stacked solution content */
.stacked-sections { gap: 2rem; }
.stacked-section { padding: clamp(1.3rem, 3vw, 2.25rem); border: 1px solid var(--public-line); border-radius: 26px; background: rgba(255,255,255,0.78); box-shadow: 0 15px 45px rgba(15,31,53,0.05); }
.stacked-section h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }

/* Packages */
.package-hero {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    display: grid;
    place-items: center;
    padding-block: clamp(5.5rem, 10vw, 8rem);
}

.package-hero .page-header__inner { position: relative; z-index: 2; }
.package-hero .eyebrow { margin-bottom: 1rem; color: #7FD0F5; }
.package-hero h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
.package-hero p { max-width: 72ch; }

.package-hero__motion,
.package-hero__motion > span { position: absolute; pointer-events: none; }
.package-hero__motion { inset: 0; }
.package-hero__motion::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: radial-gradient(circle, rgba(127,208,245,0.52) 1px, transparent 1.5px);
    background-size: 38px 38px;
    mask-image: linear-gradient(110deg, transparent 3%, #000 46%, transparent 92%);
    animation: package-dot-drift 18s linear infinite;
}
.package-hero__motion > span { border: 1px solid rgba(127,208,245,0.18); border-radius: 50%; }
.package-hero__motion > span:nth-child(1) { width: 28rem; aspect-ratio: 1; left: -10rem; top: -17rem; animation: package-orbit 14s ease-in-out infinite alternate; }
.package-hero__motion > span:nth-child(2) { width: 19rem; aspect-ratio: 1; right: 6%; bottom: -13rem; animation: package-orbit 11s -4s ease-in-out infinite alternate-reverse; }
.package-hero__motion > span:nth-child(3) { width: 7rem; aspect-ratio: 1; right: 24%; top: 12%; border-color: rgba(22,199,252,0.38); box-shadow: 0 0 55px rgba(22,199,252,0.16); animation: package-orbit 8s -2s ease-in-out infinite alternate; }

.packages-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 12%, rgba(22,199,252,0.12), transparent 26rem),
        radial-gradient(circle at 8% 58%, rgba(10,132,241,0.08), transparent 24rem),
        #F7FBFF;
}

.section-heading { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-heading--center { max-width: 760px; margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 0.55rem 0 0.8rem; color: var(--ink-strong); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.045em; }
.section-heading p { margin: 0; color: var(--text-muted); line-height: 1.7; }

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
}

.package-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    gap: 1.15rem;
    padding: clamp(1.5rem, 2.6vw, 2.15rem);
    border: 1px solid rgba(10,132,241,0.16);
    border-radius: 26px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 18px 50px rgba(15,31,53,0.075);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.package-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradient-brand); }
.package-card::after { content: ""; position: absolute; z-index: 0; width: 15rem; aspect-ratio: 1; right: -10rem; top: -10rem; border-radius: 50%; background: rgba(22,199,252,0.11); transition: scale 260ms ease; }
.package-card > * { position: relative; z-index: 1; }
.package-card:hover { transform: translateY(-7px); border-color: rgba(10,132,241,0.42); box-shadow: 0 28px 68px rgba(10,132,241,0.14); }
.package-card:hover::after { scale: 1.2; }
.package-card--featured {
    border-color: rgba(22,199,252,0.48);
    color: #DCEBFA;
    background: linear-gradient(155deg, #00132F 0%, #062D59 64%, #064E78 100%);
    box-shadow: 0 28px 72px rgba(0,32,75,0.25);
}
.package-card--featured::before { height: 5px; }
.package-card--featured::after { background: rgba(22,199,252,0.14); }
.package-card--featured h2,
.package-card--featured .package-card__amount,
.package-card--featured .package-card__currency,
.package-card--featured .package-card__feature-title { color: #F5FBFF; }
.package-card--featured .package-card__heading p,
.package-card--featured .package-card__period,
.package-card--featured .package-card__tax,
.package-card--featured .package-feature-list { color: #B9CCE0; }
.package-card--featured .package-card__price { border-color: rgba(127,208,245,0.18); }
.package-card--featured .package-card__availability { color: #D9F7FF; background: rgba(22,199,252,0.14); }
.package-card--featured .package-feature-list li { border-color: rgba(127,208,245,0.12); }

.package-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.package-card__number { color: rgba(10,132,241,0.34); font-size: 1.55rem; font-weight: 850; letter-spacing: -0.05em; }
.package-card--featured .package-card__number { color: rgba(127,208,245,0.48); }
.package-card__availability { display: inline-flex; width: fit-content; margin: 0; padding: 0.38rem 0.72rem; border-radius: 999px; background: #EAF6FF; color: #075EA9; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.package-card__heading { display: grid; gap: 0.55rem; min-height: 104px; }
.package-card__heading h2 { margin: 0; color: var(--ink-strong); font-size: 1.55rem; letter-spacing: -0.025em; }
.package-card__heading p { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; }
.package-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 1.15rem 0; border-block: 1px solid var(--gray-200); }
.package-card__currency { color: var(--ink-strong); font-size: 0.8rem; font-weight: 800; }
.package-card__amount { color: var(--ink-strong); font-size: clamp(2.65rem, 5vw, 3.55rem); font-weight: 850; line-height: 0.92; letter-spacing: -0.06em; }
.package-card__period { color: var(--text-muted); font-size: 0.82rem; }
.package-card__tax { flex-basis: 100%; display: block; margin-top: 0.35rem; color: var(--text-muted); font-size: 0.72rem; }
.package-card__feature-title { color: var(--ink-strong); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.package-feature-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; color: #42556D; font-size: 0.8rem; line-height: 1.42; }
.package-feature-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.5rem; padding: 0.66rem 0; border-bottom: 1px solid rgba(10,132,241,0.09); }
.package-feature-list li > span:first-child { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #0578C5; background: #E6F7FF; font-size: 0.66rem; font-weight: 900; }
.package-card__cta { justify-content: space-between; width: 100%; margin-top: auto; }
.package-card__cta span { font-size: 1.15rem; transition: transform 160ms ease; }
.package-card__cta:hover span { transform: translateX(4px); }

.package-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid rgba(10,132,241,0.15);
    border-radius: 20px;
    background: rgba(255,255,255,0.78);
}
.package-note .public-icon { flex: none; }
.package-note > div { display: grid; gap: 0.2rem; }
.package-note strong { color: var(--ink-strong); font-size: 0.88rem; }
.package-note div span { color: var(--text-muted); font-size: 0.75rem; line-height: 1.5; }
.package-note a { color: var(--public-blue); font-size: 0.78rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.package-note a span { display: inline-block; transition: transform 160ms ease; }
.package-note a:hover span { transform: translateX(4px); }

/* Forms and workflow pages */
.form-page { width: min(1180px, calc(100% - 3rem)); margin: clamp(2.5rem, 6vw, 5rem) auto; display: grid; grid-template-columns: minmax(270px, 0.65fr) minmax(0, 1.35fr); gap: 1.5rem; align-items: start; }
.form-aside, .contact-panel { position: relative; overflow: hidden; padding: clamp(1.7rem, 3vw, 2.5rem); border-radius: 26px; color: #C8D6E7; background: linear-gradient(150deg, #00081C, #08254A); box-shadow: var(--public-glow); }
.form-aside { position: sticky; top: 104px; }
.form-aside::after, .contact-panel::after { content: ""; position: absolute; width: 14rem; aspect-ratio: 1; right: -8rem; bottom: -9rem; border: 1px solid rgba(22,199,252,0.25); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(10,132,241,0.04); }
.form-aside .eyebrow, .contact-panel .eyebrow { color: #7FD0F5; }
.form-aside h2, .contact-panel h2 { position: relative; z-index: 1; color: #F5FAFF; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.16; letter-spacing: -0.03em; }
.form-aside p, .contact-panel p { position: relative; z-index: 1; color: #AFC0D5; font-size: 0.9rem; }
.form-aside__steps { position: relative; z-index: 1; display: grid; gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.form-aside__steps li { display: flex; gap: 0.8rem; align-items: flex-start; }
.form-aside__steps li > span { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(127,208,245,0.35); border-radius: 50%; color: #7FD0F5; font-size: 0.7rem; font-weight: 800; }
.form-aside__steps strong, .form-aside__steps small { display: block; }
.form-aside__steps strong { color: #F2F8FE; font-size: 0.88rem; }
.form-aside__steps small { color: #8FA3BF; font-size: 0.76rem; }
.form-aside__note { position: relative; z-index: 1; padding: 0.8rem 0.9rem; border: 1px solid rgba(127,208,245,0.16); border-radius: 13px; background: rgba(255,255,255,0.04); color: #BDEEFF; font-size: 0.76rem; }

.public-card { max-width: 820px; padding: clamp(1.5rem, 4vw, 2.75rem); border-color: var(--public-line); border-radius: 26px; box-shadow: 0 20px 60px rgba(15,31,53,0.09); }
.form-page .public-card { max-width: none; }
.public-card h1 { margin-top: 0.3rem; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -0.035em; }
.public-subtitle { line-height: 1.65; }
.public-form__section { margin-bottom: 2rem; padding: 1.25rem; border: 1px solid rgba(10,132,241,0.11); border-radius: 18px; background: rgba(248,251,255,0.72); }
.public-form__section h2 { margin: 0 0 1.25rem; padding: 0 0 0.75rem; color: var(--ink-strong); font-size: 1.02rem; }
.public-form__section h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.65rem; border-radius: 50%; background: var(--public-cyan); box-shadow: 0 0 0 5px rgba(22,199,252,0.1); }
.public-form__grid { gap: 1.1rem 1rem; }
.public-form__grid label { gap: 0.42rem; color: #26364C; font-size: 0.82rem; }
.public-form__grid input, .public-form__grid select, .public-form__grid textarea, .public-status input {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border-color: #CFDCE9;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(15,31,53,0.025);
}
.public-form__grid textarea { min-height: 98px; resize: vertical; }
.public-form__grid input:hover, .public-form__grid select:hover, .public-form__grid textarea:hover { border-color: rgba(10,132,241,0.45); }
.public-form__grid input:focus, .public-form__grid select:focus, .public-form__grid textarea:focus { outline: none; border-color: var(--public-blue); box-shadow: 0 0 0 4px rgba(10,132,241,0.11); }
.validation-message { margin-top: -0.15rem; }
.form-submit-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.form-submit-row .btn, .form-submit-row .public-button { flex: none; margin-top: 0; }
.form-submit-row p { margin: 0; color: var(--text-muted); font-size: 0.74rem; line-height: 1.5; }
.form-submit-row a { color: var(--public-blue); }

.contact-grid { display: grid; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: start; }
.contact-panel__item { position: relative; z-index: 1; display: grid; gap: 0.25rem; padding: 1rem 0; border-top: 1px solid rgba(127,208,245,0.15); }
.contact-panel__item strong { color: #F2F8FE; font-size: 0.88rem; }
.contact-panel__item span { color: #8FA3BF; font-size: 0.78rem; }
.contact-panel__item a { width: fit-content; color: #7FD0F5; font-size: 0.78rem; font-weight: 700; text-decoration: none; }

.public-recaptcha { display: grid; gap: 0.55rem; margin-top: 1.25rem; }
.public-recaptcha__label { color: #26364C; font-size: 0.82rem; font-weight: 650; }
.public-recaptcha .g-recaptcha { min-height: 78px; }
.public-recaptcha .public-alert { margin: 0; }

.contact-location-section { padding-top: clamp(3.5rem, 6vw, 5.25rem); }
.contact-location { display: grid; grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact-location__copy h2 { margin-bottom: 1.2rem; }
.contact-location__copy address { display: flex; align-items: flex-start; gap: 0.85rem; color: var(--ink-strong); font-size: 1rem; font-style: normal; font-weight: 700; line-height: 1.6; }
.contact-location__copy address .public-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; }
.contact-location__copy address .public-icon svg { width: 21px; height: 21px; }
.contact-location__copy > p { max-width: 42ch; color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }
.contact-map { min-height: 360px; overflow: hidden; border: 1px solid rgba(10,132,241,0.2); border-radius: 26px; background: #E8F2FB; box-shadow: 0 22px 60px rgba(15,31,53,0.12); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

.public-alert { border: 1px solid transparent; }
.public-alert--error { border-color: rgba(239,68,68,0.18); }
.public-result--success { position: relative; padding-top: 4.5rem; }
.public-result--success::before { content: "✓"; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #fff; font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #0A84F1, #16C7FC); box-shadow: 0 12px 28px rgba(10,132,241,0.25); }
.public-status__details { padding: 1.25rem; border: 1px solid var(--public-line); border-radius: 16px; background: #F8FBFF; }
.public-status__next-action { margin: 0 0 1rem; color: var(--text-muted); line-height: 1.6; }
.public-status__timeline, .public-status__response { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--public-line); }
.public-status__timeline h2, .public-status__response h2 { margin: 0 0 1rem; color: var(--ink-strong); font-size: 1.05rem; }
.public-status__timeline ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.public-status__timeline li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0 0 1.1rem 1.4rem; color: var(--ink); }
.public-status__timeline li::before { content: ""; position: absolute; left: 0; top: 0.25rem; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--public-blue); box-shadow: 0 0 0 2px rgba(10,132,241,0.24); }
.public-status__timeline li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 0.9rem; bottom: 0; width: 1px; background: rgba(10,132,241,0.2); }
.public-status__timeline time { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.public-status__response label { display: grid; gap: 0.45rem; color: #26364C; font-size: 0.82rem; font-weight: 650; }
.public-status__response textarea { width: 100%; min-height: 130px; padding: 0.8rem; border: 1px solid #CFDCE9; border-radius: 12px; resize: vertical; font: inherit; color: var(--ink); }
.public-status__response textarea:focus { outline: none; border-color: var(--public-blue); box-shadow: 0 0 0 4px rgba(10,132,241,0.11); }
.public-alert--warning { border-color: rgba(245,158,11,0.24); background: #FFF8E6; color: #82530A; }
.public-alert--success { border-color: rgba(16,185,129,0.22); background: var(--success-soft); color: var(--success-soft-strong); }
.tenant-finder { display: grid; gap: 0.55rem; width: 100%; margin-top: 1rem; }
.tenant-finder label { color: var(--ink-strong); font-size: 0.82rem; font-weight: 700; }
.tenant-finder__row { display: flex; gap: 0.65rem; }
.tenant-finder input { min-width: 0; flex: 1; min-height: 44px; padding: 0.65rem 0.8rem; border: 1px solid #CFDCE9; border-radius: 12px; font: inherit; }
.tenant-finder input:focus { outline: none; border-color: var(--public-blue); box-shadow: 0 0 0 4px rgba(10,132,241,0.11); }
.tenant-finder small { color: var(--text-muted); font-size: 0.72rem; line-height: 1.45; }
.tenant-finder__result { display: grid; gap: 0.3rem; margin: 0.9rem 0 0; }
.tenant-finder__result a { overflow-wrap: anywhere; color: var(--success-soft-strong); font-weight: 750; }

/* CTA and footer */
.section--cta { position: relative; overflow: hidden; background: linear-gradient(125deg, #0068C9, #0A84F1 52%, #16BDEB); }
.section--cta::after { content: ""; position: absolute; width: 25rem; aspect-ratio: 1; right: -10rem; top: -17rem; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,0.04); }
.section--cta .section__inner { position: relative; z-index: 1; }
.section--cta .section__inner h2 { max-width: none; }
.site-footer { background: #00081C; }
.site-footer__inner { max-width: 1240px; padding-top: 4rem; }
.site-footer__col h2 { color: #7FD0F5; }
.site-footer__col a { color: #C7D5E6; }
.site-footer__bottom { color: #8FA3BF; }
.site-footer__brand .brand-logo { width: auto; height: 40px !important; margin: 0; }

/* The descriptor is useful on wide screens, but it competes with the first navigation item in
   the fixed header before the rest of the page becomes narrow. Hide it early and keep a clear,
   stable brand/navigation boundary. */
@media (max-width: 1480px) {
    .site-header__brand-note { display: none; }
}

@media (max-width: 1280px) {
    .site-nav { gap: 0.85rem; }
    .site-nav__actions { margin-left: 0; }
    .site-nav a { font-size: 0.8rem; }
    .site-header .btn { padding-inline: 0.8rem; }
}

/* Switch to the compact menu before translated labels can crowd the action buttons. */
@media (max-width: 1180px) {
    .site-header__toggle { display: flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        background: rgba(0,8,28,0.98);
        border-bottom: 1px solid rgba(127,208,245,0.18);
        box-shadow: 0 20px 34px rgba(0,8,28,0.24);
        padding: 1rem 1.5rem 1.5rem;
        gap: 0.85rem;
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-nav-toggle-checkbox:checked ~ .site-nav { display: flex; }
    .site-nav > a { display: flex; align-items: center; min-height: 44px; padding: 0.55rem 0; }
    .site-nav > a::after { display: none; }
    .site-nav__actions { flex-direction: column; align-items: stretch; margin-inline-start: 0; }
    .public-culture-switcher, .public-culture-switcher select { width: 100%; }
}

@media (max-width: 900px) {
    .site-nav { background: rgba(0,8,28,0.98); border-bottom-color: rgba(127,208,245,0.18); box-shadow: 0 20px 34px rgba(0,8,28,0.24); }
    .site-nav > a { padding: 0.55rem 0; }
    .site-nav > a::after { display: none; }
    .public-culture-switcher, .public-culture-switcher select { width: 100%; }
    .hero__inner--with-media { grid-template-columns: 1fr; }
    .hero h1 { max-width: 17ch; margin-inline: auto; }
    .hero__subtitle { margin-inline: auto; }
    .hero__proof { max-width: 660px; margin-inline: auto; text-align: left; }
    .audience-grid, .contact-grid, .contact-location, .form-page { grid-template-columns: 1fr; }
    .form-aside { position: relative; top: auto; }
    .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
    .process-list::before { display: none; }
}

@media (max-width: 640px) {
    .site-header__inner { min-height: 64px; padding-inline: 1rem; }
    .site-header__brand .brand-logo { height: 36px !important; margin: 0; }
    .hero { padding-top: 4rem; }
    .hero h1 { font-size: clamp(2.2rem, 11vw, 3.15rem); }
    .hero__proof { grid-template-columns: 1fr; gap: 0.7rem; }
    .hero__proof span { padding-left: 0.8rem; border-left: 2px solid rgba(22,199,252,0.42); }
    .section { padding-inline: 1rem; }
    .section__inner h2 { font-size: 1.85rem; }
    .form-page { width: min(100% - 2rem, 1180px); margin-block: 2rem; }
    .public-card, .form-aside, .contact-panel { border-radius: 20px; }
    .public-form__section { margin-inline: -0.35rem; padding: 1rem; }
    .form-submit-row { align-items: stretch; flex-direction: column; }
    .form-submit-row .btn, .form-submit-row .public-button { width: 100%; }
    .public-recaptcha { overflow-x: auto; }
    .contact-map, .contact-map iframe { min-height: 300px; }
    .process-list { grid-template-columns: 1fr; }
    .workflow-rail { padding: 1.5rem; }
    .public-image-frame--hero { min-height: 245px; }
    .public-status__timeline li { display: grid; gap: 0.2rem; }
    .tenant-finder__row { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================================
   Home hero and transport-mode experience
   ========================================================================= */

.hero--network {
    display: grid;
    min-height: min(760px, calc(100svh - 72px));
    align-items: center;
    padding-block: clamp(4.5rem, 7vw, 6.5rem);
}

.hero--network .hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero--network .hero__copy {
    position: relative;
    z-index: 3;
}

.hero--network .hero__inner--with-media {
    grid-template-columns: minmax(0, 0.86fr) minmax(510px, 1.14fr);
    gap: clamp(2.25rem, 4.8vw, 5rem);
}

.hero--network h1 {
    max-width: 12.5ch;
    margin-block: 0.7rem 1.15rem;
    font-size: clamp(2.75rem, 4.9vw, 4.75rem);
}

.hero--network .hero__subtitle {
    max-width: 52ch;
    margin-bottom: 1.7rem;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #42D5FF !important;
    letter-spacing: 0.115em;
}

.hero__eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--public-cyan);
    box-shadow: 0 0 0 5px rgba(22, 199, 252, 0.1), 0 0 18px rgba(22, 199, 252, 0.65);
}

.hero__eyebrow b { color: rgba(127, 208, 245, 0.56); }

.hero--network .hero__actions { gap: 0.75rem; }

.hero--network .btn--primary::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -45%;
    width: 35%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
    animation: home-button-shine 5.4s ease-in-out infinite;
}

.hero--network .hero__proof {
    gap: 0.85rem;
    margin-top: 1.8rem;
    padding-top: 1rem;
}

.hero--network .hero__proof > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0;
    color: #8FA3BF;
}

.hero--network .hero__proof .public-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    color: #42D5FF;
    border-color: rgba(127,208,245,0.22);
    border-radius: 11px;
    background: rgba(10,132,241,0.1);
}

.hero--network .hero__proof .public-icon svg { width: 18px; height: 18px; }

.hero--network .hero__proof > span > span {
    display: block;
    min-width: 0;
    padding: 0;
    color: #8FA3BF;
    font-size: 0.69rem;
}

.hero--network .hero__proof strong {
    overflow-wrap: anywhere;
    color: #F2F8FE;
    font-size: 0.75rem;
}

.hero-motion,
.hero-motion > span {
    position: absolute;
    pointer-events: none;
}

.hero-motion {
    z-index: 0;
    inset: 0;
    overflow: hidden;
}

.hero-motion__grid {
    inset: -28% -14%;
    opacity: 0.16;
    transform: perspective(900px) rotateX(66deg) rotateZ(-8deg) scale(1.25);
    transform-origin: center 62%;
    background-image:
        linear-gradient(rgba(127,208,245,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,208,245,0.18) 1px, transparent 1px);
    background-size: 62px 62px;
    animation: home-grid-drift 22s linear infinite;
}

.hero-motion__beam {
    left: -18%;
    width: 62%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(22,199,252,0.08), rgba(22,199,252,0.86), transparent);
    filter: drop-shadow(0 0 8px rgba(22,199,252,0.65));
    animation: home-route-beam 9s ease-in-out infinite;
}

.hero-motion__beam--one { top: 31%; transform: rotate(13deg); }
.hero-motion__beam--two { bottom: 18%; transform: rotate(-9deg); animation-delay: -4.5s; }

.hero-motion__orb {
    width: clamp(15rem, 30vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.28;
    filter: blur(60px);
    animation: home-orb-float 12s ease-in-out infinite alternate;
}

.hero-motion__orb--one { top: -24%; right: 10%; background: rgba(22,199,252,0.34); }
.hero-motion__orb--two { left: -14%; bottom: -38%; background: rgba(10,132,241,0.42); animation-delay: -6s; }

.hero-motion__particle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #A9EEFF;
    box-shadow: 0 0 0 5px rgba(22,199,252,0.08), 0 0 18px rgba(22,199,252,0.75);
    animation: home-particle-float 8s ease-in-out infinite;
}

.hero-motion__particle--one { left: 9%; top: 24%; }
.hero-motion__particle--two { left: 47%; bottom: 17%; animation-delay: -2.5s; }
.hero-motion__particle--three { right: 8%; top: 28%; animation-delay: -5s; }

.hero-network {
    position: relative;
    min-width: 0;
    isolation: isolate;
    animation: home-visual-float 7s ease-in-out infinite;
}

.hero-network::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% -4% -8% 4%;
    border-radius: 36px;
    background: rgba(10,132,241,0.23);
    filter: blur(42px);
}

.hero-network__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border: 1px solid rgba(127,208,245,0.54);
    border-radius: 28px;
    background: #03142E;
    box-shadow: 0 32px 80px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.035);
}

.hero-network__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,0.055), transparent 30%, transparent 72%, rgba(22,199,252,0.07));
    pointer-events: none;
}

.hero-network__image,
.hero-network__frame > .public-image-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-network__image {
    display: block;
    object-fit: cover;
}

.hero-network__frame > .public-image-frame {
    min-height: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hero-network__scan {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: -18%;
    height: 12%;
    opacity: 0.7;
    background: linear-gradient(180deg, transparent, rgba(22,199,252,0.18), transparent);
    filter: blur(2px);
    animation: home-network-scan 7s linear infinite;
}

.hero-network__node {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    border: 2px solid #D9F7FF;
    border-radius: 50%;
    background: var(--public-cyan);
    box-shadow: 0 0 0 0 rgba(22,199,252,0.48), 0 0 18px rgba(22,199,252,0.85);
    animation: home-node-pulse 2.8s ease-out infinite;
}

.hero-network__node--one { left: 31%; top: 36%; }
.hero-network__node--two { left: 58%; top: 54%; animation-delay: -0.9s; }
.hero-network__node--three { right: 17%; top: 25%; animation-delay: -1.8s; }

.hero-network__badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 92px;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(127,208,245,0.28);
    border-radius: 12px;
    color: #EAF8FF;
    background: rgba(0,8,28,0.78);
    box-shadow: 0 12px 28px rgba(0,0,0,0.24);
    backdrop-filter: blur(12px);
    font-size: 0.7rem;
    font-weight: 750;
}

.hero-network__badge .public-icon {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: rgba(10,132,241,0.14);
}

.hero-network__badge .public-icon svg { width: 15px; height: 15px; }
.hero-network__badge--road { left: -2.25rem; bottom: 22%; }
.hero-network__badge--sea { right: -1.4rem; bottom: 12%; animation: home-badge-float 5.2s ease-in-out infinite; }
.hero-network__badge--air { right: 8%; top: -1.1rem; animation: home-badge-float 5.2s -2.6s ease-in-out infinite; }
.hero-network__badge--rail { left: 13%; top: -1.1rem; animation: home-badge-float 5.2s -1.3s ease-in-out infinite; }

.hero-network__mode-strip {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: -1.15rem;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.58rem 0.85rem;
    border: 1px solid rgba(127,208,245,0.3);
    border-radius: 14px;
    color: #DFF6FF;
    background: rgba(0,8,28,0.88);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
    backdrop-filter: blur(14px);
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}
.hero-network__mode-strip > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-network__mode-strip i { width: 1px; height: 18px; background: rgba(127,208,245,0.24); }
.hero-network__mode-strip .public-icon { width: 24px; height: 24px; border: 0; background: rgba(10,132,241,0.14); }
.hero-network__mode-strip .public-icon svg { width: 14px; height: 14px; }

.transport-modes {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 6vw, 5.25rem) 1.5rem;
    background:
        radial-gradient(circle at 88% 22%, rgba(22,199,252,0.17), transparent 24rem),
        radial-gradient(circle at 8% 82%, rgba(10,132,241,0.1), transparent 23rem),
        repeating-linear-gradient(118deg, rgba(10,132,241,0.028) 0 1px, transparent 1px 74px),
        linear-gradient(180deg, #F8FCFF 0%, #EAF5FF 100%);
}

.transport-modes::before {
    content: "";
    position: absolute;
    width: 32rem;
    height: 32rem;
    left: -18rem;
    bottom: -23rem;
    border: 1px solid rgba(10,132,241,0.08);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgba(10,132,241,0.018), 0 0 0 10rem rgba(10,132,241,0.012);
    animation: home-ring-breathe 10s ease-in-out infinite;
}

.transport-modes::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.26;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(10,132,241,0.52) 1px, transparent 1.8px);
    background-size: 34px 34px;
    mask-image: linear-gradient(110deg, transparent 2%, #000 42%, transparent 84%);
    animation: home-dot-field 24s linear infinite;
}

.transport-modes .section__inner { position: relative; z-index: 1; }

.transport-modes__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem;
}

.transport-modes__heading h2 {
    max-width: 22ch;
    margin: 0.4rem 0 0;
    color: var(--ink-strong);
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.transport-modes__heading p {
    margin: 0 0 0.3rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.transport-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.transport-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 142px;
    padding: 1.4rem;
    border: 1px solid rgba(10,132,241,0.16);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 14px 38px rgba(15,31,53,0.055);
}

.transport-card:hover {
    transform: translateY(-5px);
    border-color: rgba(10,132,241,0.4);
    box-shadow: 0 22px 54px rgba(10,132,241,0.14);
}

.transport-card .public-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
}

.transport-card .public-icon svg { width: 29px; height: 29px; }
.transport-card__copy { display: grid; gap: 0.35rem; }
.transport-card__copy strong { color: var(--ink-strong); font-size: 1.08rem; }
.transport-card__copy small { color: var(--text-muted); font-size: 0.76rem; line-height: 1.55; }
.transport-card__arrow { color: var(--public-blue); font-size: 1.55rem; transition: transform 160ms ease; }
.transport-card:hover .transport-card__arrow { transform: translateX(4px); }

/* Motion is progressively enhanced: content stays visible if JavaScript is unavailable. */
html.motion-ready [data-reveal],
html.motion-ready [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(24px);
}

html.motion-ready [data-reveal].is-revealed,
html.motion-ready [data-reveal-group] > .is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms cubic-bezier(.2,.75,.25,1), transform 650ms cubic-bezier(.2,.75,.25,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.home-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    margin-top: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(10,132,241,0.15);
    border-radius: 20px;
    background: linear-gradient(135deg, #F8FBFF, #EEF7FF);
}

.home-flow__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 1.1rem 1.25rem;
    list-style: none;
}

.home-flow__steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--ink-strong);
    font-size: 0.76rem;
    font-weight: 750;
}

.home-flow__steps li:not(:last-child)::after {
    content: "→";
    margin-left: auto;
    padding-right: 0.5rem;
    color: rgba(10,132,241,0.52);
    font-size: 1.1rem;
}

.home-flow__steps .public-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
}

.home-flow__steps .public-icon svg { width: 18px; height: 18px; }

.home-flow__security {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 215px;
    padding: 1rem 1.25rem;
    border-left: 1px solid rgba(10,132,241,0.16);
    background: rgba(255,255,255,0.58);
}

.home-flow__security .public-icon { flex: none; width: 42px; height: 42px; }
.home-flow__security span { display: grid; color: var(--text-muted); font-size: 0.7rem; }
.home-flow__security strong { color: var(--ink-strong); font-size: 0.8rem; }

/* Product proof: a code-native, clearly labelled sample workspace rather than unsupported metrics. */
.product-showcase {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 8vw, 7.5rem) 1.5rem;
    color: #C7D5E6;
    background:
        radial-gradient(circle at 92% 10%, rgba(22,199,252,0.16), transparent 28rem),
        radial-gradient(circle at 10% 92%, rgba(10,132,241,0.16), transparent 30rem),
        linear-gradient(145deg, #00081C 0%, #061530 58%, #08254A 100%);
}

.product-showcase::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.13;
    background-image:
        linear-gradient(rgba(127,208,245,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,208,245,0.14) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, #000, transparent 48%, #000);
}

.product-showcase__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(310px, 0.72fr) minmax(560px, 1.28fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6.5rem);
}

.product-showcase__copy .eyebrow { color: #7FD0F5; }

.product-showcase__copy h2 {
    max-width: 14ch;
    margin: 0.55rem 0 1.25rem;
    color: #F7FBFF;
    font-size: clamp(2.25rem, 4vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.product-showcase__copy > p {
    max-width: 55ch;
    margin: 0;
    color: #AFC0D5;
    line-height: 1.72;
}

.product-feature-list {
    display: grid;
    gap: 0;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.product-feature-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(127,208,245,0.13);
}

.product-feature-list li:last-child { border-bottom: 1px solid rgba(127,208,245,0.13); }

.product-feature-list .public-icon {
    width: 42px;
    height: 42px;
    color: #55D9FF;
    border-color: rgba(127,208,245,0.22);
    border-radius: 13px;
    background: rgba(10,132,241,0.1);
}

.product-feature-list .public-icon svg { width: 20px; height: 20px; }
.product-feature-list li > span { color: #90A6C1; font-size: 0.77rem; line-height: 1.5; }
.product-feature-list strong { display: block; margin-bottom: 0.2rem; color: #EDF7FF; font-size: 0.9rem; }

.product-showcase__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.product-showcase__text-link {
    color: #BDEEFF;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
}

.product-showcase__text-link span { display: inline-block; margin-left: 0.35rem; transition: transform 160ms ease; }
.product-showcase__text-link:hover { color: #fff; }
.product-showcase__text-link:hover span { transform: translateX(4px); }

.product-assurance {
    display: flex;
    gap: 0.55rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.product-assurance > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(127,208,245,0.14);
    border-radius: 10px;
    color: #AFC0D5;
    background: rgba(255,255,255,0.035);
    font-size: 0.64rem;
    font-weight: 650;
}

.product-assurance .public-icon { width: 20px; height: 20px; padding: 0; border: 0; background: none; }
.product-assurance .public-icon svg { width: 15px; height: 15px; }

.product-showcase__motion,
.product-showcase__motion > span {
    position: absolute;
    pointer-events: none;
}

.product-showcase__motion { z-index: 0; inset: 0; overflow: hidden; }

.product-showcase__route {
    left: -12%;
    width: 72%;
    height: 1px;
    transform-origin: left center;
    opacity: 0.48;
    background: linear-gradient(90deg, transparent, rgba(22,199,252,0.12), #16C7FC, transparent);
    filter: drop-shadow(0 0 7px rgba(22,199,252,0.62));
    animation: home-product-route 11s ease-in-out infinite;
}

.product-showcase__route--one { top: 24%; transform: rotate(8deg); }
.product-showcase__route--two { bottom: 18%; transform: rotate(-7deg); animation-delay: -5.5s; }

.product-showcase__glow {
    right: -10%;
    top: 8%;
    width: 38rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(10,132,241,0.18);
    filter: blur(80px);
    animation: home-orb-float 13s ease-in-out infinite alternate;
}

.product-window {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(127,208,245,0.33);
    border-radius: 24px;
    background: #061530;
    box-shadow: 0 42px 100px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
    transform: perspective(1500px) rotateY(-2.5deg) rotateX(0.7deg);
    transform-origin: center;
    animation: home-product-float 8s ease-in-out infinite;
}

.product-window::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12%;
    border-radius: 30%;
    background: rgba(22,199,252,0.12);
    filter: blur(55px);
}

.product-window__chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 46px;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid rgba(127,208,245,0.16);
    color: #AFC0D5;
    background: rgba(0,8,28,0.9);
    font-size: 0.66rem;
}

.product-window__dots { display: flex; gap: 5px; }
.product-window__dots i { width: 7px; height: 7px; border-radius: 50%; background: #344761; }
.product-window__dots i:nth-child(1) { background: #16C7FC; }
.product-window__dots i:nth-child(2) { background: #0A84F1; }
.product-window__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-window__live { display: inline-flex; align-items: center; gap: 0.4rem; color: #BDEEFF; font-weight: 700; }
.product-window__live i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,0.1); animation: home-live-pulse 2.2s ease-out infinite; }

.product-window__body {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 520px;
    background: #F2F7FC;
}

.product-window__sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 0.6rem;
    color: #8FA3BF;
    background: linear-gradient(180deg, #061530, #0A2346);
}

.product-window__sidebar > strong {
    margin-bottom: 0.75rem;
    color: #34D3FF;
    font-size: 0.88rem;
    font-style: italic;
}

.product-window__sidebar > span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
}

.product-window__sidebar > span.is-active { color: #fff; background: linear-gradient(135deg, #0A84F1, #16C7FC); box-shadow: 0 8px 18px rgba(10,132,241,0.27); }
.product-window__sidebar .public-icon { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; }
.product-window__sidebar .public-icon svg { width: 18px; height: 18px; }

.product-window__main {
    min-width: 0;
    padding: 1.25rem;
    color: #0F1F35;
}

.product-window__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.product-window__heading > div { display: grid; }
.product-window__heading small { color: #64748B; font-size: 0.61rem; }
.product-window__heading strong { font-size: 1rem; }
.product-window__heading > span { padding: 0.45rem 0.65rem; border: 1px solid #D5E3EF; border-radius: 9px; color: #52657B; background: #fff; font-size: 0.59rem; }

.product-mode-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.product-mode-cards article {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #DCE8F2;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15,31,53,0.04);
}

.product-mode-cards .public-icon { width: 34px; height: 34px; border-radius: 10px; }
.product-mode-cards .public-icon svg { width: 18px; height: 18px; }
.product-mode-cards article > span { display: grid; min-width: 0; }
.product-mode-cards small { color: #64748B; font-size: 0.54rem; }
.product-mode-cards strong { overflow: hidden; color: #1C304A; font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 6px; height: 6px; border-radius: 50%; }
.status-dot--blue { background: #0A84F1; }
.status-dot--cyan { background: #16C7FC; }
.status-dot--amber { background: #F5A524; }

.product-operations {
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid #DCE8F2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,31,53,0.045);
}

.product-operations__topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #E8EDF3;
}

.product-operations__topline strong { font-size: 0.68rem; }
.product-operations__topline span { color: #0A84F1; font-size: 0.56rem; font-weight: 700; }

.product-operation-row {
    display: grid;
    grid-template-columns: 0.72fr 1.2fr 0.82fr 0.92fr;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.68rem 0.85rem;
    border-bottom: 1px solid #EEF3F8;
    color: #64748B;
    font-size: 0.56rem;
}

.product-operation-row:last-child { border-bottom: 0; }
.product-operation-row--head { color: #8797AA; background: #F8FBFF; font-size: 0.51rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.035em; }
.product-operation-row > span, .product-operation-row > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-operation-row > strong { color: #26364C; font-size: 0.58rem; }
.product-operation-row > span:first-child { display: flex; align-items: center; gap: 0.35rem; color: #26364C; font-weight: 700; }
.product-operation-row .public-icon { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; }
.product-operation-row .public-icon svg { width: 15px; height: 15px; }
.product-status { width: fit-content; padding: 0.28rem 0.42rem; border-radius: 999px; font-weight: 750; }
.product-status--cyan { color: #08799A; background: #E2F9FF; }
.product-status--blue { color: #075EA9; background: #E7F2FF; }
.product-status--amber { color: #8A5B07; background: #FFF4D6; }

.product-window__workflow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 0.8rem;
    padding: 0.8rem 0.75rem;
    border: 1px solid #DCE8F2;
    border-radius: 13px;
    background: #fff;
}

.product-window__workflow > span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #8797AA;
    font-size: 0.53rem;
    font-weight: 700;
}

.product-window__workflow > span:not(:last-child)::after { content: ""; flex: 1; height: 1px; margin-inline: 0.25rem; background: #DCE8F2; }
.product-window__workflow i { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border: 1px solid #C5D5E4; border-radius: 50%; font-size: 0.48rem; font-style: normal; }
.product-window__workflow .is-complete { color: #08799A; }
.product-window__workflow .is-complete i { border-color: #16C7FC; color: #fff; background: #16C7FC; }
.product-window__workflow .is-current { color: #075EA9; }
.product-window__workflow .is-current i { border: 4px solid #D6ECFF; background: #0A84F1; }

.product-window__scan {
    position: absolute;
    z-index: 3;
    left: 64px;
    right: 0;
    top: 46px;
    height: 14%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(22,199,252,0.09), transparent);
    animation: home-product-scan 8s linear infinite;
}

.problems-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 15%, rgba(22,199,252,0.1), transparent 22rem),
        radial-gradient(circle at 88% 82%, rgba(10,132,241,0.08), transparent 24rem),
        linear-gradient(180deg, #F5FAFF, #FFFFFF);
}

.problems-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: radial-gradient(circle, rgba(10,132,241,0.32) 1px, transparent 1.5px);
    background-size: 42px 42px;
    mask-image: linear-gradient(120deg, transparent, #000 45%, transparent 78%);
}

.problems-section .section__inner { position: relative; z-index: 1; }

@keyframes home-grid-drift {
    to { background-position: 62px 62px, 62px 62px; }
}

@keyframes home-route-beam {
    0%, 100% { opacity: 0; translate: -8% 0; }
    20%, 70% { opacity: 0.72; }
    80% { opacity: 0; translate: 100% 0; }
}

@keyframes home-orb-float {
    to { translate: 8% 12%; scale: 1.12; }
}

@keyframes home-particle-float {
    0%, 100% { opacity: 0.25; translate: 0 14px; }
    50% { opacity: 1; translate: 18px -18px; }
}

@keyframes home-visual-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes home-network-scan {
    to { top: 112%; }
}

@keyframes home-node-pulse {
    0% { box-shadow: 0 0 0 0 rgba(22,199,252,0.5), 0 0 18px rgba(22,199,252,0.85); }
    70%, 100% { box-shadow: 0 0 0 13px rgba(22,199,252,0), 0 0 18px rgba(22,199,252,0.45); }
}

@keyframes home-badge-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

@keyframes home-button-shine {
    0%, 58%, 100% { left: -45%; }
    78% { left: 120%; }
}

@keyframes home-ring-breathe {
    0%, 100% { opacity: 0.52; scale: 0.96; }
    50% { opacity: 1; scale: 1.04; }
}

@keyframes home-dot-field {
    to { background-position: 68px 34px; }
}

@keyframes home-product-route {
    0%, 100% { opacity: 0; translate: -18% 0; }
    18%, 72% { opacity: 0.5; }
    84% { opacity: 0; translate: 112% 0; }
}

@keyframes home-product-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}

@keyframes home-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.28); }
    75%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

@keyframes home-product-scan {
    0%, 12% { top: 46px; opacity: 0; }
    22%, 72% { opacity: 0.65; }
    82%, 100% { top: 100%; opacity: 0; }
}

@keyframes package-dot-drift {
    to { background-position: 38px 38px; }
}

@keyframes package-orbit {
    to { translate: 18px 14px; scale: 1.08; }
}

@media (max-width: 1160px) {
    .hero--network .hero__inner--with-media { grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr); gap: 2.5rem; }
    .hero--network .hero__proof { grid-template-columns: 1fr; border-top: 0; gap: 0.6rem; }
    .hero--network .hero__proof > span { padding-left: 0; border-left: 0; }
    .home-flow { grid-template-columns: 1fr; }
    .home-flow__security { border-top: 1px solid rgba(10,132,241,0.16); border-left: 0; }
    .product-showcase__grid { grid-template-columns: 1fr; }
    .product-showcase__copy { max-width: 760px; }
    .product-showcase__copy h2 { max-width: 18ch; }
    .product-window { width: min(100%, 920px); margin-inline: auto; transform: none; }
    .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-card--featured { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .hero--network { min-height: auto; }
    .hero--network .hero__inner--with-media { grid-template-columns: 1fr; }
    .hero--network .hero__copy { max-width: 720px; margin-inline: auto; text-align: center; }
    .hero--network h1 { max-width: 15ch; }
    .hero--network .hero__proof { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(127,208,245,0.18); }
    .hero--network .hero__proof > span { text-align: left; }
    .hero-network { width: min(100%, 760px); margin-inline: auto; }
    .transport-modes__heading { grid-template-columns: 1fr; gap: 0.8rem; }
    .transport-modes__heading p { max-width: 64ch; }
    .transport-grid { grid-template-columns: 1fr; }
    .transport-card { min-height: 118px; }
    .package-grid { grid-template-columns: 1fr; }
    .package-card--featured { grid-column: auto; }
    .package-card__heading { min-height: 0; }
}

@media (max-width: 700px) {
    .hero--network { padding-inline: 1rem; }
    .hero--network h1 { font-size: clamp(2.35rem, 11vw, 3.3rem); }
    .hero--network .hero__proof { grid-template-columns: 1fr; gap: 0.75rem; }
    .hero--network .hero__proof > span { padding-left: 0.8rem; border-left: 2px solid rgba(22,199,252,0.42); }
    .hero-network__badge { display: none; }
    .hero-network__mode-strip { bottom: -0.85rem; }
    .hero-network__frame { border-radius: 20px; }
    .transport-modes { padding-inline: 1rem; }
    .home-flow__steps {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(118px, 1fr);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }
    .home-flow__steps li { scroll-snap-align: start; }
    .home-flow__security { min-width: 0; }
    .product-showcase { padding-inline: 1rem; }
    .product-showcase__actions { align-items: stretch; flex-direction: column; }
    .product-showcase__actions .btn { width: 100%; }
    .product-showcase__text-link { padding: 0.55rem 0; text-align: center; }
    .product-window { border-radius: 18px; }
    .product-window__body { grid-template-columns: 48px minmax(0, 1fr); }
    .product-window__sidebar { padding-inline: 0.35rem; }
    .product-window__sidebar > span { width: 32px; height: 32px; }
    .product-window__main { padding: 0.8rem; }
    .product-mode-cards { grid-template-columns: 1fr; }
    .product-operation-row { grid-template-columns: 0.75fr 1.25fr 0.9fr; }
    .product-operation-row > :nth-child(4) { display: none; }
    .product-window__workflow { overflow-x: auto; grid-template-columns: repeat(5, minmax(90px, 1fr)); }
    .product-window__scan { left: 48px; }
    .package-hero { min-height: 340px; padding-inline: 1rem; }
    .packages-section { padding-inline: 1rem; }
    .package-note { grid-template-columns: auto minmax(0, 1fr); }
    .package-note > a { grid-column: 2; white-space: normal; }
}

@media (max-width: 480px) {
    .hero__eyebrow { font-size: 0.66rem; }
    .hero--network .hero__actions { align-items: stretch; flex-direction: column; }
    .hero--network .hero__actions .btn { width: 100%; }
    .transport-card { grid-template-columns: auto minmax(0, 1fr); padding: 1.1rem; }
    .transport-card__arrow { display: none; }
    .product-showcase__copy h2 { font-size: 2.25rem; }
    .product-assurance { display: grid; grid-template-columns: 1fr; }
    .product-window__title { display: none; }
    .product-window__chrome { grid-template-columns: auto 1fr; }
    .product-window__live { justify-self: end; }
    .product-window__body { grid-template-columns: 1fr; }
    .product-window__sidebar { display: none; }
    .product-window__scan { left: 0; }
    .hero-network__mode-strip { display: none; }
    .package-card { padding: 1.35rem; border-radius: 22px; }
    .package-note { grid-template-columns: 1fr; text-align: center; }
    .package-note .public-icon { margin-inline: auto; }
    .package-note > a { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-motion > span,
    .hero-network,
    .hero-network__scan,
    .hero-network__node,
    .hero-network__badge,
    .hero--network .btn--primary::after,
    .transport-modes::before,
    .transport-modes::after,
    .product-showcase__motion > span,
    .product-window,
    .product-window__live i,
    .product-window__scan,
    .package-hero__motion,
    .package-hero__motion::before,
    .package-hero__motion > span { animation: none !important; }

    html.motion-ready [data-reveal],
    html.motion-ready [data-reveal-group] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}