:root {
    --font-headline: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --font-serif: 'Merriweather', Georgia, serif;
    --bg: #f3f7fc;
    --surface: #ffffff;
    --surface-alt: #eaf1fb;
    --text: #111827;
    --muted: #4b5563;
    --line: #cfd9e8;
    --blue: #0e7bc7;
    --blue-dark: #085d97;
    --navy: #0d1f42;
    --teal: #0f766e;
    --amber: #00ff66;
    --red: #cc2c2c;
    --shadow-sm: 0 8px 24px rgba(9, 22, 45, 0.08);
    --shadow-md: 0 18px 45px rgba(9, 22, 45, 0.14);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --container: 1160px;
    --container-wide: 1320px;
    --transition: 220ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

.container {
    width: min(var(--container), 92vw);
    margin: 0 auto;
}

.container-wide {
    width: min(var(--container-wide), 95vw);
    margin: 0 auto;
}

.section {
    padding: 70px 0;
}

.section-soft {
    background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-headline);
    text-transform: uppercase;
    line-height: 1.12;
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(2rem, 5vw, 4.4rem);
}

h2 {
    font-size: clamp(1.5rem, 2.8vw, 3rem);
}

h3 {
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
}

p {
    color: var(--muted);
}

.eyebrow {
    font-family: var(--font-headline);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-size: 0.76rem;
    color: var(--blue);
    margin-bottom: 10px;
}

.section-head {
    max-width: 740px;
    margin-bottom: 36px;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head h2,
.section-head h1 {
    margin-bottom: 12px;
}

.section-head h2 {
    font-size: clamp(1.45rem, 2.25vw, 2.3rem);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 12px 24px;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform var(--transition), background var(--transition), border var(--transition), color var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-solid {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 10px 30px rgba(14, 123, 199, 0.3);
}

.btn-solid:hover {
    background: var(--blue-dark);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, 0.48);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
}

.btn-light {
    background: #fff;
    color: var(--text);
    border-color: #dbe4f2;
}

.btn-light:hover {
    background: #f4f8fd;
}

.btn-outline {
    border-color: var(--line);
    color: var(--blue-dark);
    background: #fff;
}

.btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 8px 22px rgba(9, 20, 36, 0.09);
}

.top-strip {
    background: linear-gradient(90deg, #070e1e 0%, #10264d 70%, #12466e 100%);
    color: #d7e6ff;
    max-height: 64px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 220ms ease, opacity 220ms ease;
}

.top-strip-inner {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    font-size: 0.8rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4555;
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 0 4px rgba(255, 69, 85, 0.16);
    transform-origin: center;
    animation: liveDotPulse 1.8s ease-in-out infinite;
}

@keyframes liveDotPulse {
    0% {
        opacity: 0.58;
        transform: scale(0.82);
        box-shadow: 0 0 0 2px rgba(255, 69, 85, 0.12), 0 0 0 0 rgba(255, 69, 85, 0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 69, 85, 0.2), 0 0 14px 2px rgba(255, 69, 85, 0.6);
    }

    100% {
        opacity: 0.58;
        transform: scale(0.82);
        box-shadow: 0 0 0 2px rgba(255, 69, 85, 0.12), 0 0 0 0 rgba(255, 69, 85, 0.5);
    }
}

.top-strip strong {
    color: #fff;
}

.top-strip-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.live-desk-ticker {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.live-desk-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-headline);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: none;
}

.live-ticker-viewport {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.live-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: liveDeskTicker 38s linear infinite;
}

.live-ticker-copy {
    display: inline-flex;
    align-items: center;
    padding-right: 2.8rem;
    color: #d7e6ff;
}

.live-desk-ticker:hover .live-ticker-track,
.live-desk-ticker:focus-within .live-ticker-track {
    animation-play-state: paused;
}

@keyframes liveDeskTicker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.top-strip-right p {
    color: #d7e6ff;
    white-space: nowrap;
}

.site-header.is-compact .top-strip {
    max-height: 0;
    opacity: 0;
}

.nav-shell {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(12, 24, 44, 0.08);
    backdrop-filter: blur(10px);
}

.site-nav {
    min-height: 84px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.brand-text {
    display: grid;
    gap: 2px;
    line-height: 1.02;
}

.brand-text strong {
    font-family: var(--font-headline);
    font-size: 1.55rem;
    text-transform: none;
    color: var(--navy);
    letter-spacing: 0.015em;
    line-height: 0.95;
}

.site-nav .brand-text {
    width: max-content;
}

.brand-text span {
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    font-weight: 600;
    text-transform: uppercase;
    color: #1e365f;
}

.brand-word {
    text-transform: none !important;
}

.menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--navy);
    border-radius: 999px;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    justify-content: flex-end;
}

.nav-links a {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1f2d45;
    transition: background var(--transition), color var(--transition);
}

.nav-links a:hover,
.nav-links a.is-active {
    background: #e5f1ff;
    color: var(--blue-dark);
}

.nav-links .nav-cta {
    background: var(--blue);
    color: #fff;
    padding-inline: 16px;
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta.is-active {
    background: var(--blue-dark);
    color: #fff;
}

.hero {
    position: relative;
    min-height: clamp(520px, 70vh, 700px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(5, 18, 40, 0.92) 12%, rgba(8, 34, 68, 0.76) 55%, rgba(10, 73, 112, 0.35) 100%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 10% auto auto -10%;
    width: min(450px, 54vw);
    height: min(450px, 54vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 130, 210, 0.3) 0%, rgba(17, 130, 210, 0) 70%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(780px, 92vw);
}

.hero h1 {
    color: #fff;
    margin-bottom: 14px;
}

.hero p {
    color: rgba(235, 243, 255, 0.92);
    font-size: clamp(1rem, 1.8vw, 1.14rem);
    margin-bottom: 26px;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-note {
    margin-top: 16px;
    font-size: 0.84rem;
    color: rgba(220, 233, 255, 0.86);
}

.page-hero {
    padding: 95px 0 75px;
    color: #fff;
    background: linear-gradient(135deg, #081a38 0%, #123867 55%, #136f87 100%);
    position: relative;
    overflow: hidden;
}

.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.page-hero::before {
    width: 280px;
    height: 280px;
    top: -120px;
    right: 10%;
}

.page-hero::after {
    width: 220px;
    height: 220px;
    bottom: -120px;
    left: 14%;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    margin-bottom: 12px;
}

.page-hero p,
.page-hero .breadcrumb,
.page-hero .breadcrumb a {
    color: rgba(229, 239, 255, 0.9);
}

.page-hero .breadcrumb {
    margin-bottom: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-headline);
}

.rings-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 6px;
}

.rings-strip span:nth-child(1) { background: #0081c8; }
.rings-strip span:nth-child(2) { background: #fcb131; }
.rings-strip span:nth-child(3) { background: #000000; }
.rings-strip span:nth-child(4) { background: #00a651; }
.rings-strip span:nth-child(5) { background: #ee334e; }

.panel,
.card,
.metric,
.module-card,
.timeline-item,
.contact-card,
.service-card,
.value-card,
.legal-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card,
.module-card,
.metric,
.timeline-item,
.contact-card,
.service-card,
.value-card,
.legal-panel {
    padding: 22px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ieics-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.home-statement {
    margin-top: -52px;
    position: relative;
    z-index: 5;
}

.statement-wrap {
    background: var(--surface);
    border: 1px solid #d7e4f4;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    gap: 16px;
}

.statement-wrap h2 {
    color: var(--navy);
}

.statement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.list-check,
.list-bullets,
.list-inline {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.list-check li,
.list-bullets li,
.list-inline li {
    position: relative;
    color: #334155;
    padding-left: 26px;
}

.list-check li::before,
.list-bullets li::before,
.list-inline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.list-check li::before {
    background: linear-gradient(120deg, #0e7bc7, #0f766e);
}

.list-bullets li::before {
    background: #0e7bc7;
}

.list-inline li::before {
    width: 10px;
    height: 10px;
    background: #00ff66;
}

.ieics-grid .value-card {
    text-align: center;
    padding-block: 26px;
    border-top: 4px solid transparent;
}

.ieics-grid .value-card:nth-child(1) { border-top-color: #0e7bc7; }
.ieics-grid .value-card:nth-child(2) { border-top-color: #085d97; }
.ieics-grid .value-card:nth-child(3) { border-top-color: #cc2c2c; }
.ieics-grid .value-card:nth-child(4) { border-top-color: #00ff66; }
.ieics-grid .value-card:nth-child(5) { border-top-color: #0f766e; }

.ieics-grid h3 {
    margin-bottom: 6px;
}

.deliver-grid .metric strong {
    display: block;
    font-family: var(--font-headline);
    font-size: 1.35rem;
    color: var(--blue-dark);
    margin-bottom: 8px;
}

.route-grid .card h3 {
    margin-bottom: 8px;
}

.route-grid .card p {
    margin-bottom: 16px;
}

.route-grid .card a {
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--blue-dark);
}

.route-grid .card a:hover {
    color: var(--blue);
}

.metrics-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.metrics-band article {
    background: linear-gradient(140deg, #0e223f 0%, #113d68 100%);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 18px;
}

.metrics-band strong {
    display: block;
    font-family: var(--font-headline);
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 6px;
}

.metrics-band p {
    color: rgba(225, 236, 255, 0.9);
    font-size: 0.9rem;
}

.timeline {
    display: grid;
    gap: 16px;
}

.timeline-item {
    position: relative;
    padding-left: 56px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 23px;
    width: 2px;
    bottom: -26px;
    background: linear-gradient(180deg, #0e7bc7, #bcd7f4);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-marker {
    position: absolute;
    left: 12px;
    top: 18px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid #eaf1fb;
    background: var(--blue);
}

.timeline-item h3 {
    margin-bottom: 6px;
}

.callout {
    margin-top: 24px;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px dashed #95b8e3;
    background: #f1f7ff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title action"
        "copy action";
    align-items: center;
    gap: 8px 18px;
}

.callout strong {
    grid-area: title;
    color: var(--navy);
    display: block;
    margin-bottom: 0;
}

.callout p {
    grid-area: copy;
    margin: 0;
}

.callout .btn {
    grid-area: action;
    justify-self: end;
    white-space: nowrap;
}

.breadcrumb-nav {
    margin-bottom: 12px;
}

.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
}

.breadcrumb-nav li {
    color: rgba(230, 241, 255, 0.84);
}

.breadcrumb-nav li + li::before {
    content: "/";
    margin-right: 6px;
    color: rgba(175, 197, 230, 0.78);
}

.seo-glance .card h2,
.seo-glance .card h3 {
    margin-bottom: 10px;
}

.seo-visual {
    margin-top: 16px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.seo-visual img {
    width: 100%;
    height: auto;
}

.seo-visual figcaption {
    padding: 8px 10px;
    font-size: 0.8rem;
    color: rgba(214, 227, 249, 0.86);
    background: rgba(9, 16, 31, 0.58);
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid rgba(150, 181, 226, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    padding: 12px 16px;
    color: #f6f9ff;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item p {
    margin: 0;
    padding: 0 16px 14px;
    color: rgba(217, 232, 255, 0.9);
}

.related-grid .card {
    transition: transform var(--transition), box-shadow var(--transition), border var(--transition);
}

.related-grid .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.related-grid .card p {
    margin-bottom: 14px;
}

.related-grid .inline-link {
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.76rem;
    color: #00ff66;
}

.system-bands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.system-bands article {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #111c35 0%, #0d162c 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.system-bands article::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0e7bc7 0%, #00ff66 100%);
    opacity: 0.72;
}

.system-bands article:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 102, 0.5);
    box-shadow: 0 16px 30px rgba(4, 12, 28, 0.38);
}

.system-bands h4 {
    margin-bottom: 8px;
    color: #ffffff;
}

.system-bands p {
    color: rgba(217, 232, 255, 0.9);
}

@media (max-width: 900px) {
    .system-bands {
        grid-template-columns: 1fr;
    }
}

.extended-solutions .section-head {
    max-width: 980px;
}

.extended-solutions .section-head h2 {
    color: #ffffff;
}

.extended-solutions .section-head p {
    color: rgba(222, 235, 255, 0.9);
}

.extended-solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.extended-solution-card {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 154, 211, 0.34);
    background: linear-gradient(150deg, rgba(17, 29, 55, 0.96) 0%, rgba(10, 18, 36, 0.98) 100%);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.extended-solution-card::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0e7bc7 0%, #00ff66 100%);
    opacity: 0.7;
}

.extended-solution-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(1.05rem, 1.5vw, 1.36rem);
    letter-spacing: 0.02em;
}

.extended-solution-card p {
    margin: 0;
    color: rgba(221, 234, 255, 0.9);
}

.extended-solution-card:hover,
.extended-solution-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 102, 0.58);
    box-shadow: 0 18px 38px rgba(4, 12, 28, 0.44), 0 0 0 2px rgba(0, 255, 102, 0.26);
}

.extended-solution-card:focus-visible {
    outline: none;
}

.extended-solution-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #00ff66;
    background: rgba(0, 255, 102, 0.12);
    border: 1px solid rgba(0, 255, 102, 0.34);
    font-size: 1rem;
}

.extended-solutions-note {
    margin-top: 24px;
    max-width: 940px;
    color: rgba(213, 229, 252, 0.9);
    font-size: 0.95rem;
}

@media (min-width: 700px) {
    .extended-solutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1120px) {
    .extended-solutions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #edf4ff;
    border: 1px solid #d3e2f8;
    border-radius: 999px;
    padding: 8px 14px;
    color: #1e3762;
    font-family: var(--font-headline);
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.module-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.module-filter {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #c9d9ef;
    background: #fff;
    font-family: var(--font-headline);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: #2d4469;
    transition: background var(--transition), color var(--transition), border var(--transition);
}

.module-filter:hover,
.module-filter.is-active {
    background: #0e7bc7;
    color: #fff;
    border-color: #0e7bc7;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.module-card {
    transition: transform var(--transition), box-shadow var(--transition);
}

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.module-card h3 {
    margin-bottom: 8px;
}

.module-card .tag {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-headline);
    background: #ecf3ff;
    color: #274b7b;
}

.module-card.is-hidden {
    display: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
}

.contact-card h3 {
    margin-bottom: 8px;
}

.contact-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.contact-topic {
    border: 1px solid #cddcf2;
    background: #fff;
    color: #1f3d66;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.74rem;
    border-radius: 999px;
    padding: 9px 14px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border var(--transition);
}

.contact-topic:hover,
.contact-topic.is-selected {
    background: #0e7bc7;
    color: #fff;
    border-color: #0e7bc7;
}

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-form label {
    display: grid;
    gap: 6px;
    font-size: 0.84rem;
    color: #334155;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    border: 1px solid #c8d6eb;
    border-radius: 12px;
    padding: 11px 12px;
    font: inherit;
    color: var(--text);
    background: #fff;
}

.contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: #0e7bc7;
    box-shadow: 0 0 0 3px rgba(14, 123, 199, 0.24);
}

.contact-form textarea {
    min-height: 130px;
    resize: vertical;
}

.engagement-pathways-card {
    display: grid;
    gap: 12px;
}

.engagement-pathways-card .btn {
    justify-self: end;
}

.form-note {
    font-size: 0.78rem;
}

.logo-cloud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.logo-card {
    background: #fff;
    border: 1px solid #d9e4f2;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}

.logo-card img {
    max-height: 56px;
    object-fit: contain;
    opacity: 0.92;
}

.site-footer {
    background: linear-gradient(130deg, #09172e 0%, #0c2a4a 45%, #0a3d5b 100%);
    color: #d6e6ff;
    margin-top: 50px;
}

.footer-grid {
    padding: 54px 0 28px;
    display: grid;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    gap: 20px;
}

.footer-brand {
    margin-bottom: 10px;
    --footer-title-size: clamp(1.78rem, 2.4vw, 2.08rem);
    --footer-brand-width: calc(var(--footer-title-size) * 2.88);
}

.footer-brand .brand-text {
    width: max-content;
}

.site-footer .footer-brand .footer-brand-home {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.site-footer .footer-brand .footer-brand-title {
    display: block;
    color: inherit;
}

.site-footer .footer-brand .brand-text strong {
    color: #fff;
    font-size: var(--footer-title-size);
    letter-spacing: 0.048em;
    line-height: 0.96;
    display: block;
    width: 100%;
}

.site-footer .footer-brand .powered-by {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    width: auto;
}

.site-footer .footer-brand .powered-by-link {
    display: block;
    line-height: 0;
    width: var(--footer-brand-width);
    max-width: 100%;
}

.site-footer .footer-brand .powered-by-label {
    color: #fff;
    font-size: 0.44rem;
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    opacity: 0.55;
}

.site-footer .footer-brand .powered-by-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.footer-copy,
.footer-credit {
    color: rgba(214, 230, 255, 0.84);
}

body[data-page='home'] .footer-copy {
    font-size: 0.82rem;
    line-height: 1.5;
}

.site-footer h3 {
    font-size: 0.96rem;
    margin-bottom: 10px;
    color: #fff;
}

.site-footer li + li {
    margin-top: 7px;
}

.site-footer a {
    color: rgba(214, 230, 255, 0.9);
    font-size: 0.9rem;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer li a.footer-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 10px;
    transition: transform var(--transition), opacity var(--transition);
}

.site-footer li a.footer-app-btn:hover {
    transform: translateY(-1px);
}

.site-footer li a.footer-app-btn.footer-store-link {
    max-width: 156px;
    height: 46px;
    padding: 0;
}

.site-footer li a.footer-app-btn.footer-store-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.footer-social-icons a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #e6eef9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.footer-social-icons a:hover,
.footer-social-icons a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(0, 255, 102, 0.72);
    background: rgba(0, 255, 102, 0.2);
    color: #fff;
}

.footer-social-icons a[aria-label="Instagram"]:hover,
.footer-social-icons a[aria-label="Instagram"]:focus-visible {
    background: linear-gradient(135deg, #f58529, #dd2a7b 58%, #8134af);
    border-color: rgba(245, 133, 41, 0.72);
}

.footer-social-icons a[aria-label="AstraSports Website"]:hover,
.footer-social-icons a[aria-label="AstraSports Website"]:focus-visible {
    background: #0f4fa8;
    border-color: rgba(15, 79, 168, 0.78);
}

.footer-social-icons a[aria-label="LinkedIn"]:hover,
.footer-social-icons a[aria-label="LinkedIn"]:focus-visible {
    background: #0a66c2;
    border-color: rgba(10, 102, 194, 0.72);
}

.footer-social-icons a[aria-label="YouTube"]:hover,
.footer-social-icons a[aria-label="YouTube"]:focus-visible {
    background: #ff0000;
    border-color: rgba(255, 0, 0, 0.72);
}

.footer-social-icons a[aria-label="Facebook"]:hover,
.footer-social-icons a[aria-label="Facebook"]:focus-visible {
    background: #1877f2;
    border-color: rgba(24, 119, 242, 0.72);
}

.footer-social-icons a.social-link-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.footer-social-icons a.social-link-disabled:hover,
.footer-social-icons a.social-link-disabled:focus-visible {
    transform: none;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #e6eef9;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: 14px 0 20px;
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.footer-bottom-social {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.footer-bottom-social span {
    color: rgba(214, 230, 255, 0.78);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.footer-bottom-social .footer-social-icons {
    gap: 7px;
}

.footer-bottom-social .footer-social-icons a {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.site-footer .to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 102, 0.78);
    background: #00ff66;
    color: #071426;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.site-footer .to-top::before {
    content: 'Back to top';
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(9, 23, 47, 0.92);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}

.site-footer .to-top:hover,
.site-footer .to-top:focus-visible {
    transform: translateY(-2px);
    background: #00e65c;
    color: #071426;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.42);
}

.site-footer .to-top:hover::before,
.site-footer .to-top:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.site-footer .to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .footer-bottom-inner {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .footer-bottom-social span {
        display: none;
    }

    .site-footer .to-top {
        right: 12px;
        bottom: 12px;
        width: 42px;
        height: 42px;
    }
}

.legal-wrap {
    max-width: 920px;
    margin: 0 auto;
}

.legal-panel section + section {
    margin-top: 18px;
}

.legal-panel h2 {
    font-size: 1.28rem;
    margin-bottom: 6px;
}

.reveal-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.olympic-home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 8vw, 96px) 0 clamp(52px, 6vw, 74px);
    background:
        radial-gradient(circle at 90% 10%, rgba(14, 123, 199, 0.28) 0%, rgba(14, 123, 199, 0) 42%),
        radial-gradient(circle at 12% 74%, rgba(214, 163, 0, 0.2) 0%, rgba(214, 163, 0, 0) 40%),
        linear-gradient(125deg, #061126 0%, #0a2244 46%, #0f4f74 100%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.hero-orb.orb-a {
    width: min(36vw, 440px);
    height: min(36vw, 440px);
    right: -120px;
    top: -160px;
    background: radial-gradient(circle, rgba(14, 123, 199, 0.55) 0%, rgba(14, 123, 199, 0) 70%);
}

.hero-orb.orb-b {
    width: min(28vw, 360px);
    height: min(28vw, 360px);
    left: -140px;
    bottom: -170px;
    background: radial-gradient(circle, rgba(214, 163, 0, 0.42) 0%, rgba(214, 163, 0, 0) 70%);
}

.olympic-home-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    gap: clamp(20px, 3.6vw, 42px);
    align-items: center;
}

.olympic-copy h1 {
    color: #fff;
    margin-bottom: 16px;
    font-size: clamp(2rem, 4.2vw, 4.3rem);
}

.olympic-copy > p {
    color: rgba(223, 237, 255, 0.95);
    max-width: 62ch;
}

.hero-kpis {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hero-kpis article {
    border: 1px solid rgba(183, 213, 250, 0.35);
    background: rgba(9, 28, 56, 0.62);
    border-radius: 14px;
    padding: 10px 12px;
}

.hero-kpis strong {
    display: block;
    color: #fff;
    font-family: var(--font-headline);
    font-size: 1.12rem;
    line-height: 1.1;
}

.hero-kpis span {
    color: rgba(219, 232, 252, 0.9);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-family: var(--font-headline);
}

.olympic-home-hero .btn-outline {
    color: #fff;
    border-color: rgba(204, 226, 252, 0.54);
    background: rgba(255, 255, 255, 0.05);
}

.olympic-home-hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.olympic-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(12, 34px);
    gap: 10px;
}

.mosaic-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(186, 214, 243, 0.28);
    box-shadow: 0 18px 35px rgba(3, 10, 24, 0.32);
}

.mosaic-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform var(--transition);
}

.mosaic-tile:hover img {
    transform: scale(1.08);
}

.mosaic-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 16, 33, 0) 30%, rgba(5, 16, 33, 0.28) 100%);
}

.mosaic-tile.t1 { grid-column: 1 / 6; grid-row: 1 / 5; }
.mosaic-tile.t2 { grid-column: 6 / 13; grid-row: 1 / 4; }
.mosaic-tile.t3 { grid-column: 1 / 5; grid-row: 5 / 9; }
.mosaic-tile.t4 { grid-column: 5 / 9; grid-row: 4 / 8; }
.mosaic-tile.t5 { grid-column: 9 / 13; grid-row: 4 / 7; }
.mosaic-tile.t6 { grid-column: 9 / 13; grid-row: 7 / 10; }
.mosaic-tile.t7 { grid-column: 1 / 9; grid-row: 9 / 13; }

.mosaic-tech {
    grid-column: 9 / 13;
    grid-row: 10 / 13;
    border-radius: 16px;
    border: 1px solid rgba(189, 220, 252, 0.36);
    background: linear-gradient(135deg, rgba(8, 32, 60, 0.92) 0%, rgba(13, 56, 94, 0.9) 100%);
    color: #fff;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.mosaic-tech p {
    color: rgba(215, 232, 255, 0.9);
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.68rem;
}

.mosaic-tech h3 {
    font-size: 1rem;
}

.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 44px;
}

.mini-bars span {
    flex: 1 1 auto;
    height: var(--v, 60%);
    border-radius: 999px 999px 3px 3px;
    background: linear-gradient(180deg, #58c7ff 0%, #0ea5e9 100%);
}

.olympic-intro .card img {
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid #d3e1f4;
    box-shadow: 0 12px 28px rgba(8, 18, 36, 0.14);
}

.olympic-gallery {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d6e2f3;
    box-shadow: var(--shadow-sm);
    position: relative;
    background: #fff;
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 1.06;
    object-fit: cover;
    transition: transform var(--transition), filter var(--transition);
}

.gallery-card:hover img {
    transform: scale(1.06);
    filter: saturate(1.16);
}

.gallery-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    color: #fff;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.73rem;
    background: linear-gradient(180deg, rgba(5, 15, 33, 0) 0%, rgba(5, 15, 33, 0.82) 100%);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tech-panel {
    background: linear-gradient(140deg, #0a1f3f 0%, #123f67 100%);
    border-radius: 16px;
    border: 1px solid rgba(166, 201, 238, 0.26);
    color: #fff;
    box-shadow: 0 18px 36px rgba(6, 17, 34, 0.22);
    padding: 18px;
}

.tech-panel h3 {
    margin-bottom: 12px;
}

.tech-panel .eyebrow {
    color: rgba(192, 222, 255, 0.96);
    margin-bottom: 6px;
}

.tech-panel p,
.tech-note {
    color: rgba(218, 235, 255, 0.9);
}

.tech-chart {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(176, 211, 246, 0.24);
    background: rgba(4, 16, 35, 0.36);
    padding: 10px 8px 0;
}

.tech-note {
    margin-top: 10px;
    font-size: 0.84rem;
}

.bar-group {
    display: grid;
    gap: 11px;
}

.bar-group div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    align-items: center;
}

.bar-group span {
    color: rgba(228, 239, 255, 0.96);
    font-size: 0.86rem;
}

.bar-group strong {
    font-family: var(--font-headline);
    font-size: 0.98rem;
}

.bar-group i {
    grid-column: 1 / -1;
    display: block;
    width: var(--bar, 70%);
    max-width: 100%;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 45%, #00ff66 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.donut-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tech-donut {
    width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(#ef4444 0 22%, #f59e0b 22% 60%, #00ff66 60% 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.tech-donut::after {
    content: '';
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: #0f2b4d;
    border: 1px solid rgba(188, 216, 248, 0.22);
}

.legend-list {
    display: grid;
    gap: 8px;
}

.legend-list li {
    color: rgba(228, 239, 255, 0.95);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend-list .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-list .dot.high { background: #ef4444; }
.legend-list .dot.med { background: #f59e0b; }
.legend-list .dot.low { background: #00ff66; }

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.matrix-grid article {
    border: 1px solid rgba(177, 208, 243, 0.28);
    background: rgba(5, 20, 41, 0.48);
    border-radius: 12px;
    padding: 12px;
}

.matrix-grid strong {
    display: block;
    font-family: var(--font-headline);
    font-size: 1.25rem;
    color: #fff;
    line-height: 1.04;
}

.matrix-grid span {
    color: rgba(222, 236, 255, 0.9);
    font-size: 0.78rem;
}

@media (max-width: 1150px) {
    .nav-links {
        gap: 6px;
    }

    .nav-links a {
        font-size: 0.76rem;
        padding: 8px 10px;
    }

    .metrics-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ieics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .olympic-home-grid {
        grid-template-columns: 1fr;
    }

    .olympic-mosaic {
        max-width: 760px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .site-nav {
        min-height: 76px;
    }

    .site-nav .brand {
        gap: 0;
    }

    .site-nav .brand-text {
        display: none;
    }

    .site-nav .brand img {
        width: 56px;
        height: 56px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 1px);
        background: #fff;
        border-bottom: 1px solid #d5dfec;
        box-shadow: 0 20px 34px rgba(9, 19, 32, 0.14);
        padding: 14px 4vw 20px;
        display: grid;
        gap: 6px;
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
    }

    body.nav-open .nav-links {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links a {
        font-size: 0.86rem;
    }

    .grid-2,
    .grid-3,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .module-grid,
    .logo-cloud {
        grid-template-columns: 1fr;
    }

    .ieics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .olympic-mosaic {
        grid-template-rows: repeat(10, 28px);
    }

    .mosaic-tile.t1 { grid-column: 1 / 7; grid-row: 1 / 4; }
    .mosaic-tile.t2 { grid-column: 7 / 13; grid-row: 1 / 3; }
    .mosaic-tile.t3 { grid-column: 1 / 5; grid-row: 4 / 7; }
    .mosaic-tile.t4 { grid-column: 5 / 9; grid-row: 3 / 6; }
    .mosaic-tile.t5 { grid-column: 9 / 13; grid-row: 3 / 5; }
    .mosaic-tile.t6 { grid-column: 9 / 13; grid-row: 5 / 7; }
    .mosaic-tile.t7 { grid-column: 1 / 9; grid-row: 7 / 10; }
    .mosaic-tech { grid-column: 9 / 13; grid-row: 7 / 10; }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .callout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "copy"
            "action";
        gap: 10px;
    }

    .callout .btn {
        justify-self: start;
    }

    .engagement-pathways-card .btn {
        justify-self: start;
    }

    .section {
        padding: 56px 0;
    }

    .timeline-item {
        padding-left: 46px;
    }

    .timeline-item::before {
        left: 20px;
    }

    .timeline-marker {
        left: 8px;
    }
}

@media (max-width: 640px) {
    .top-strip-inner {
        justify-content: space-between;
        text-align: left;
        min-height: 40px;
        flex-direction: row;
        padding: 6px 0;
        gap: 8px;
    }

    .top-strip-right {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .live-desk-ticker {
        width: auto;
    }

    .live-desk-label {
        font-size: 0.62rem;
    }

    .live-ticker-copy {
        padding-right: 1.6rem;
        font-size: 0.72rem;
    }

    .site-nav .brand img {
        width: 54px;
        height: 54px;
    }

    .site-nav .brand-text strong {
        font-size: 1.2rem;
    }

    .site-nav .brand-text span {
        font-size: 0.66rem;
    }

    .hero-actions,
    .statement-actions {
        display: grid;
        align-items: stretch;
    }

    .btn {
        justify-content: center;
        width: 100%;
    }

    .metrics-band {
        grid-template-columns: 1fr;
    }

    .ieics-grid {
        grid-template-columns: 1fr;
    }

    .hero-kpis {
        grid-template-columns: 1fr;
    }

    .olympic-copy h1 {
        font-size: clamp(1.8rem, 9.2vw, 2.6rem);
    }

    .olympic-mosaic {
        grid-template-rows: repeat(10, 22px);
        gap: 7px;
    }

    .mosaic-tech {
        padding: 9px;
    }

    .mosaic-tech h3 {
        font-size: 0.86rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .donut-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .matrix-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        padding-top: 42px;
    }
}

/* AstraGMS visual refresh */
:root {
    --bg: #070f1f;
    --surface: #111b33;
    --surface-alt: #0c172d;
    --text: #eef4ff;
    --muted: #c5d2e6;
    --line: rgba(255, 255, 255, 0.14);
    --blue: #005f9f;
    --blue-dark: #00ff66;
    --navy: #0b1220;
    --amber: #00ff66;
    --red: #ff6568;
    --shadow-sm: 0 14px 34px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 24px 52px rgba(0, 0, 0, 0.45);
}

body {
    background:
        radial-gradient(circle at 10% -12%, rgba(0, 255, 102, 0.2) 0%, rgba(0, 255, 102, 0) 42%),
        radial-gradient(circle at 92% 8%, rgba(0, 255, 102, 0.16) 0%, rgba(0, 255, 102, 0) 36%),
        linear-gradient(180deg, #060d1a 0%, #0b1630 45%, #0a1428 100%);
    color: var(--text);
}

p {
    color: var(--muted);
}

.section-soft {
    background: linear-gradient(180deg, #0d1830 0%, #0a1428 100%);
}

.section-head h1,
.section-head h2,
.section-head h3,
.card h1,
.card h2,
.card h3,
.card h4,
.module-card h1,
.module-card h2,
.module-card h3,
.value-card h1,
.value-card h2,
.value-card h3,
.contact-card h1,
.contact-card h2,
.contact-card h3,
.service-card h1,
.service-card h2,
.service-card h3,
.timeline-item h1,
.timeline-item h2,
.timeline-item h3,
.legal-panel h1,
.legal-panel h2,
.legal-panel h3 {
    color: #fff;
}

.eyebrow {
    color: #00ff66;
}

.site-header {
    box-shadow: none;
}

.top-strip {
    background: linear-gradient(90deg, #081329 0%, #0d1f42 60%, #0f2d59 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-shell {
    background: rgba(7, 15, 31, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
}

.brand-text strong {
    color: #fff;
}

.brand-text span {
    color: rgba(226, 236, 255, 0.85);
}

.nav-links a {
    color: rgba(233, 242, 255, 0.74);
}

.nav-links a:hover,
.nav-links a.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.nav-links .nav-cta {
    background: #00ff66;
    color: #0b1220;
    box-shadow: 0 10px 24px rgba(0, 255, 102, 0.24);
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta.is-active {
    background: #00e65c;
    color: #0b1220;
}

.btn-solid {
    background: #00ff66;
    border-color: #00ff66;
    color: #0b1220;
    box-shadow: 0 12px 28px rgba(0, 255, 102, 0.28);
}

.btn-solid:hover {
    background: #00e65c;
    color: #0b1220;
}

.btn-outline {
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.page-hero {
    background:
        linear-gradient(125deg, rgba(6, 14, 30, 0.88) 0%, rgba(8, 24, 52, 0.84) 100%),
        url("../../img/photo-1461896836934-ffe607ba8211.jpg") center/cover no-repeat;
}

.page-hero p,
.page-hero .breadcrumb,
.page-hero .breadcrumb a {
    color: rgba(236, 243, 255, 0.9);
}

.rings-strip {
    background: transparent;
}

.rings-strip span:nth-child(1) { background: #0081c8; }
.rings-strip span:nth-child(2) { background: #fcb131; }
.rings-strip span:nth-child(3) { background: #000000; }
.rings-strip span:nth-child(4) { background: #00a651; }
.rings-strip span:nth-child(5) { background: #ee334e; }

.panel,
.card,
.metric,
.module-card,
.timeline-item,
.contact-card,
.service-card,
.value-card,
.legal-panel {
    background: linear-gradient(160deg, #111c35 0%, #0d162c 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-sm);
}

.list-check li,
.list-bullets li,
.list-inline li {
    color: rgba(224, 235, 252, 0.93);
}

.list-check li::before {
    background: linear-gradient(120deg, #66ffad, #00ff66);
}

.list-bullets li::before {
    background: #00ff66;
}

.list-inline li::before {
    background: #00ff66;
}

.badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #e6efff;
}

.route-grid .card a {
    color: #00ff66;
}

.route-grid .card a:hover {
    color: #c8ffe4;
}

.callout {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.callout strong {
    color: #fff;
}

.module-filter {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #e5efff;
}

.module-filter:hover,
.module-filter.is-active {
    background: #00ff66;
    border-color: #00ff66;
    color: #0b1220;
}

.module-card .tag {
    background: rgba(0, 255, 102, 0.18);
    color: #ffe28a;
}

.contact-topic {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: #e4eeff;
}

.contact-topic:hover,
.contact-topic.is-selected {
    background: #00ff66;
    color: #0b1220;
    border-color: #00ff66;
}

.contact-form label {
    color: rgba(221, 233, 252, 0.92);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(7, 14, 30, 0.7);
    color: #f5f8ff;
}

.logo-card {
    background: #fff;
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.logo-card img {
    opacity: 1;
}

.site-footer {
    background: linear-gradient(160deg, #040914 0%, #0a1833 60%, #0e2447 100%);
}

.site-footer a {
    color: rgba(224, 236, 255, 0.9);
}

.site-footer a:hover {
    color: #fff;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.olympic-home-hero {
    height: calc(100vw / 3);
    min-height: 380px;
    max-height: 560px;
    padding: clamp(28px, 3.8vw, 48px) 0 clamp(14px, 2.4vw, 26px);
    background: #060d1a;
}

.hero-cinematic {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    transform: translate3d(var(--hero-pan-x, 0px), var(--hero-pan-y, 0px), 0);
    transition: transform 260ms ease-out;
}

.hero-cinematic::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, rgba(4, 10, 20, 0.88) 0%, rgba(6, 18, 36, 0.78) 52%, rgba(6, 18, 36, 0.68) 100%),
        radial-gradient(circle at 84% 14%, rgba(0, 255, 102, 0.16) 0%, rgba(0, 255, 102, 0) 38%);
    pointer-events: none;
}

.hero-cinematic-frame {
    position: absolute;
    top: -6%;
    left: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.1) translate3d(-0.8%, 0, 0);
    filter: saturate(1.18) contrast(1.06);
    animation: heroFrameCycle 24s linear infinite;
}

.hero-cinematic-frame.frame-a { animation-delay: 0s; }
.hero-cinematic-frame.frame-b { animation-delay: 6s; }
.hero-cinematic-frame.frame-c { animation-delay: 12s; }
.hero-cinematic-frame.frame-d { animation-delay: 18s; }

@keyframes heroFrameCycle {
    0% {
        opacity: 0;
        transform: scale(1.1) translate3d(-0.8%, 0, 0);
    }
    6% {
        opacity: 1;
    }
    24% {
        opacity: 1;
        transform: scale(1.03) translate3d(0.8%, -1%, 0);
    }
    32% {
        opacity: 0;
        transform: scale(1.06) translate3d(1%, -1.2%, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1.06) translate3d(1%, -1.2%, 0);
    }
}

.hero-orb {
    display: none;
}

.olympic-copy h1 {
    max-width: 14ch;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
}

.hero-slider {
    display: grid;
    gap: 10px;
}

.hero-slides {
    display: grid;
    isolation: isolate;
}

.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px) scale(0.985);
    filter: blur(1px);
    transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease, visibility 520ms ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    filter: none;
}

.hero-slide h1,
.hero-slide h2 {
    margin-bottom: 14px;
}

.hero-slide > p {
    max-width: 62ch;
    font-size: 0.96rem;
}

.hero-kpis {
    margin-top: 14px;
}

.hero-kpis article {
    padding: 8px 10px;
}

.hero-kpis strong {
    font-size: 0.96rem;
}

.hero-kpis span {
    font-size: 0.66rem;
}

.olympic-mosaic {
    grid-template-rows: repeat(9, 24px);
    gap: 8px;
}

.hero-slide.is-active .eyebrow {
    animation: heroSlideReveal 600ms ease both;
}

.hero-slide.is-active h1,
.hero-slide.is-active h2 {
    animation: heroSlideReveal 660ms ease 60ms both;
}

.hero-slide.is-active > p {
    animation: heroSlideReveal 720ms ease 120ms both;
}

.hero-slider-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-progress {
    width: min(280px, 62vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.hero-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: inherit;
    background: linear-gradient(90deg, #66ffad 0%, #00ff66 100%);
}

.hero-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-dot {
    width: 30px;
    height: 6px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: width 240ms ease, background 240ms ease, border 240ms ease;
}

.hero-dot.is-active {
    width: 42px;
    background: #00ff66;
    border-color: #00ff66;
    box-shadow: 0 0 0 2px rgba(0, 255, 102, 0.2);
}

.hero-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(7, 20, 41, 0.56);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: 0.76rem;
    cursor: pointer;
}

.hero-kpis article {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(6, 15, 32, 0.68);
}

.mosaic-tile {
    border-color: rgba(255, 255, 255, 0.14);
}

.mosaic-tech {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, rgba(0, 255, 102, 0.16) 0%, rgba(16, 30, 59, 0.9) 42%, rgba(8, 20, 41, 0.94) 100%);
}

.mosaic-tech p {
    color: rgba(255, 233, 170, 0.95);
}

.mini-bars span {
    background: linear-gradient(180deg, #66ffad 0%, #00ff66 100%);
}

.gms-cta-band {
    background: linear-gradient(90deg, #091730 0%, #0a1f42 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gms-cta-band-inner {
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.gms-cta-band h2 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: #fff;
}

.olympic-gallery {
    background: linear-gradient(180deg, #0d1830 0%, #0b1427 100%);
}

.gallery-card {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-sm);
}

.tech-panel {
    background: linear-gradient(150deg, #0c1831 0%, #132a52 100%);
    border-color: rgba(255, 255, 255, 0.15);
}

.tech-chart {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(5, 12, 26, 0.5);
}

.bar-group i {
    background: linear-gradient(90deg, #00ff66 0%, #66ffad 50%, #00ff66 100%);
}

.matrix-grid article {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(7, 16, 34, 0.56);
}

.btn,
.module-filter,
.contact-topic,
.nav-links .nav-cta,
.hero-arrow {
    position: relative;
    overflow: hidden;
}

.btn::after,
.module-filter::after,
.contact-topic::after,
.nav-links .nav-cta::after,
.hero-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -130%;
    width: 58%;
    transform: skewX(-18deg);
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.3) 48%, transparent 100%);
    pointer-events: none;
    transition: left 560ms ease;
}

.btn:hover::after,
.btn:focus-visible::after,
.module-filter:hover::after,
.module-filter:focus-visible::after,
.contact-topic:hover::after,
.contact-topic:focus-visible::after,
.nav-links .nav-cta:hover::after,
.nav-links .nav-cta:focus-visible::after,
.hero-arrow:hover::after,
.hero-arrow:focus-visible::after {
    left: 140%;
}

.module-filter:hover,
.module-filter:focus-visible,
.contact-topic:hover,
.contact-topic:focus-visible,
.hero-arrow:hover,
.hero-arrow:focus-visible {
    transform: translateY(-2px);
}

.btn:active,
.module-filter:active,
.contact-topic:active,
.nav-links .nav-cta:active,
.hero-arrow:active {
    transform: translateY(0) scale(0.98);
}

.btn-solid,
.nav-links .nav-cta {
    animation: ctaPulse 2.8s ease-in-out infinite;
}

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

@keyframes heroProgressFill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes ctaPulse {
    0%,
    100% {
        box-shadow: 0 10px 24px rgba(0, 255, 102, 0.24);
    }
    50% {
        box-shadow: 0 15px 34px rgba(0, 255, 102, 0.36);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .btn,
    .module-filter,
    .contact-topic,
    .extended-solution-card,
    .nav-links .nav-cta,
    .hero-arrow,
    .hero-dot {
        transition: none !important;
    }

    .btn-solid,
    .nav-links .nav-cta {
        animation: none !important;
    }

    .hero-slide.is-active .eyebrow,
    .hero-slide.is-active h1,
    .hero-slide.is-active h2,
    .hero-slide.is-active > p {
        animation: none !important;
    }

    .hero-cinematic-frame {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
    }

    .hero-cinematic-frame.frame-a {
        opacity: 1 !important;
    }

    .hero-cinematic {
        transform: none !important;
    }

    .hero-progress-bar {
        animation: none !important;
        transform: scaleX(1);
    }

    .extended-solution-card:hover,
    .extended-solution-card:focus-visible {
        transform: none;
    }
}

@media (max-width: 900px) {
    .olympic-home-hero {
        min-height: min(640px, 78vh);
        height: auto;
        padding-top: clamp(42px, 8vw, 62px);
    }

    .nav-links {
        background: #0c172d;
        border-bottom-color: rgba(255, 255, 255, 0.14);
    }

    .nav-links a {
        color: rgba(236, 244, 255, 0.9);
    }

    .gms-cta-band-inner {
        min-height: 96px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 16px 0;
    }

    .hero-slide h1,
    .hero-slide h2 {
        font-size: clamp(1.85rem, 8vw, 2.8rem);
    }

    .hero-slider-controls {
        justify-content: space-between;
    }

    .hero-progress {
        width: 100%;
    }
}

/* Banner fit tuning */
.olympic-home-grid {
    gap: clamp(12px, 2.2vw, 24px);
    align-items: stretch;
}

.hero-slider {
    gap: 8px;
}

.olympic-copy {
    display: grid;
    align-content: start;
}

.hero-slide h1,
.hero-slide h2 {
    max-width: 20ch;
    margin-bottom: 10px;
    font-size: clamp(1.45rem, 2.25vw, 2.3rem);
}

.hero-slide > p {
    max-width: 58ch;
    font-size: 0.86rem;
    line-height: 1.45;
}

.hero-slider-controls {
    gap: 8px;
}

.hero-progress {
    width: min(220px, 52vw);
    height: 3px;
}

.hero-actions {
    margin-top: 6px;
    gap: 8px;
}

.hero-actions .btn {
    padding: 8px 14px;
    font-size: 0.74rem;
}

.hero-kpis {
    margin-top: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.hero-kpis article {
    border-radius: 10px;
    padding: 7px 8px;
}

.hero-kpis strong {
    font-size: 0.84rem;
}

.hero-kpis span {
    font-size: 0.56rem;
    letter-spacing: 0.02em;
}

.olympic-mosaic {
    width: 86%;
    max-width: 86%;
    height: auto;
    justify-self: center;
    align-self: center;
    grid-template-rows: repeat(8, 14px);
    gap: 4px;
    transform: none;
    margin-block: 6px;
}

.mosaic-tech {
    padding: 6px;
    gap: 4px;
}

.mosaic-tech h3 {
    font-size: 0.72rem;
}

.mini-bars {
    min-height: 24px;
    gap: 3px;
}

@media (max-width: 1150px) {
    .hero-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .olympic-home-grid {
        align-items: center;
    }

    .olympic-mosaic {
        height: auto;
        align-self: auto;
        grid-template-rows: repeat(8, 14px);
        gap: 4px;
    }
}

@media (max-width: 640px) {
    .hero-kpis {
        grid-template-columns: 1fr;
    }
}

/* Latest news slider */
.latest-news {
    background:
        radial-gradient(circle at 12% -16%, rgba(0, 255, 102, 0.14) 0%, rgba(0, 255, 102, 0) 42%),
        linear-gradient(180deg, #091327 0%, #0b172f 100%);
}

.latest-news .section-head h2,
.latest-news .section-head p {
    color: #eaf3ff;
}

.latest-news-slider {
    --news-per-view: 3;
    --news-gap: 14px;
    display: grid;
    gap: 12px;
}

.news-viewport {
    overflow: hidden;
}

.news-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--news-gap) * (var(--news-per-view) - 1))) / var(--news-per-view));
    gap: var(--news-gap);
    transition: transform 460ms ease;
    will-change: transform;
}

.news-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(160deg, rgba(15, 29, 55, 0.95) 0%, rgba(9, 19, 38, 0.98) 100%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.news-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.news-media .news-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform var(--transition), filter var(--transition);
}

.news-card:hover .news-media .news-photo,
.news-card:focus-within .news-media .news-photo {
    transform: scale(1.07);
    filter: saturate(1.08);
}

.news-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    padding: 4px;
    pointer-events: none;
}

.news-body {
    padding: 14px 14px 16px;
    display: grid;
    align-content: start;
    gap: 10px;
}

.news-date {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: var(--font-headline);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #052e17;
    background: #00ff66;
    border-radius: 999px;
    padding: 5px 10px;
}

.news-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #fff;
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-headline);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #66ffad;
}

.news-link:hover,
.news-link:focus-visible {
    color: #00ff66;
}

.news-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.news-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(8, 20, 41, 0.8);
    color: #fff;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

.news-arrow:hover,
.news-arrow:focus-visible {
    transform: translateY(-1px);
    border-color: #00ff66;
    color: #00ff66;
}

.news-arrow:disabled {
    opacity: 0.34;
    cursor: not-allowed;
    transform: none;
}

.news-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.news-dot {
    width: 28px;
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 0;
    transition: width 220ms ease, background 220ms ease, border-color 220ms ease;
}

.news-dot.is-active {
    width: 42px;
    border-color: #00ff66;
    background: #00ff66;
}

.latest-news-foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.latest-news-foot p {
    margin: 0;
    color: rgba(216, 230, 250, 0.88);
    font-size: 0.86rem;
}

@media (max-width: 1080px) {
    .latest-news-slider {
        --news-gap: 12px;
    }
}

@media (max-width: 760px) {
    .latest-news-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .news-card h3 {
        font-size: 0.94rem;
    }
}

@media (max-width: 640px) {
    .news-controls {
        justify-content: space-between;
    }

    .news-dot {
        width: 18px;
    }

    .news-dot.is-active {
        width: 30px;
    }
}

/* Top ticker social + login menu */
.top-strip {
    overflow: visible;
}

.site-header.is-compact .top-strip {
    overflow: hidden;
}

.top-strip-right {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.top-social {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top-social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(219, 233, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(223, 237, 255, 0.88);
    font-size: 0.72rem;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.top-social a:hover,
.top-social a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(0, 255, 102, 0.72);
    background: rgba(0, 255, 102, 0.2);
    color: #fff;
}

.top-social a[aria-label="Instagram"]:hover,
.top-social a[aria-label="Instagram"]:focus-visible {
    background: linear-gradient(135deg, #f58529, #dd2a7b 58%, #8134af);
    border-color: rgba(245, 133, 41, 0.72);
}

.top-social a[aria-label="AstraSports Website"]:hover,
.top-social a[aria-label="AstraSports Website"]:focus-visible {
    background: #0f4fa8;
    border-color: rgba(15, 79, 168, 0.78);
}

.top-social a[aria-label="LinkedIn"]:hover,
.top-social a[aria-label="LinkedIn"]:focus-visible {
    background: #0a66c2;
    border-color: rgba(10, 102, 194, 0.72);
}

.top-social a[aria-label="YouTube"]:hover,
.top-social a[aria-label="YouTube"]:focus-visible {
    background: #ff0000;
    border-color: rgba(255, 0, 0, 0.72);
}

.top-social a[aria-label="Facebook"]:hover,
.top-social a[aria-label="Facebook"]:focus-visible {
    background: #1877f2;
    border-color: rgba(24, 119, 242, 0.72);
}

.top-social a.social-link-disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.top-social a.social-link-disabled:hover,
.top-social a.social-link-disabled:focus-visible {
    transform: none;
    border-color: rgba(219, 233, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(223, 237, 255, 0.88);
}

.ticker-login {
    position: relative;
    z-index: 1200;
}

.ticker-login-btn {
    border: 1px solid rgba(219, 233, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f3f9ff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 5px;
    font-family: var(--font-headline);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.ticker-login-btn:hover,
.ticker-login-btn:focus-visible {
    border-color: rgba(0, 255, 102, 0.75);
    background: rgba(0, 255, 102, 0.14);
    color: #fff;
}

.ticker-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(145deg, #5cd1ff 0%, #2a5bd4 100%);
    color: #fff;
    font-size: 0.56rem;
}

.ticker-login-caret {
    font-size: 0.56rem;
    transition: transform var(--transition);
}

.ticker-login.is-open .ticker-login-caret {
    transform: rotate(180deg);
}

.ticker-login-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    border-radius: 12px;
    border: 1px solid rgba(174, 199, 228, 0.34);
    background: rgba(8, 18, 37, 0.96);
    box-shadow: 0 14px 34px rgba(1, 6, 14, 0.45);
    padding: 6px;
    display: grid;
    gap: 2px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}

.ticker-login.is-open .ticker-login-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ticker-login-menu a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    padding: 7px 9px;
    color: rgba(228, 238, 255, 0.92);
    font-size: 0.75rem;
}

.ticker-login-menu a i {
    width: 14px;
    text-align: center;
    color: rgba(0, 255, 102, 0.9);
}

.ticker-login-menu a:hover,
.ticker-login-menu a:focus-visible {
    background: rgba(0, 255, 102, 0.16);
    color: #fff;
}

@media (max-width: 640px) {
    #current-date {
        display: none;
    }

    .top-social {
        display: none;
    }

    .ticker-login-text {
        display: none;
    }

    .ticker-login-btn {
        padding: 3px 6px 3px 4px;
        gap: 5px;
    }

    .top-strip-right {
        justify-content: flex-end;
    }

    .ticker-login-menu {
        right: auto;
        left: 50%;
        transform: translate(-50%, 8px);
    }

    .ticker-login.is-open .ticker-login-menu {
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot {
        animation: none;
    }

    .live-ticker-track {
        animation: none;
    }

    .live-ticker-copy[aria-hidden='true'] {
        display: none;
    }
}