:root {
    --navy: #050817;
    --navy-2: #111b5f;
    --logo-blue: #1397d5;
    --logo-light-blue: #55b7e8;
    --logo-indigo: #1c2675;
    --logo-deep-indigo: #111653;
    --cyan: #55b7e8;
    --blue: #1397d5;
    --gold: #f6c453;
    --dark: #101827;
    --text: #5d6679;
    --soft: #f4f9fd;
    --white: #ffffff;
    --radius: 24px;
}

/* Production V1 legal, trust, and accessibility refinements */
.legal-page {
    min-height: 70vh;
    padding: 9rem 0 5rem;
    background: #f7f9fc;
    color: #172033;
}

.legal-container {
    max-width: 860px;
    background: #fff;
    border: 1px solid #dce3ee;
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    box-shadow: 0 18px 50px rgba(16, 34, 65, .08);
}

.legal-container h1 {
    color: #0b1730;
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 1.05;
    margin: .6rem 0 1.5rem;
}

.legal-container h2 {
    color: #10274c;
    font-size: 1.35rem;
    margin: 2rem 0 .65rem;
}

.legal-container p,
.legal-container li {
    color: #43516a;
    line-height: 1.8;
}

.legal-kicker {
    color: #1167d8;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-facts {
    display: grid;
    gap: .75rem;
    padding-left: 1.2rem;
}

.aotech-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
}

.aotech-footer h2 {
    font-size: 1rem;
    color: #fff;
}

*:focus-visible {
    outline: 3px solid #ffcf40 !important;
    outline-offset: 3px;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 575.98px) {
    .legal-page {
        padding-top: 7rem;
    }

    .legal-container {
        border-radius: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    background: var(--white);
    line-height: 1.7;
}

h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.15;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

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

a {
    text-decoration: none;
}

.glass-nav {
    background: rgba(7, 27, 53, 0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    color: var(--navy);
    background: linear-gradient(135deg, var(--cyan), var(--gold));
    font-weight: 900;
}

.nav-link {
    font-weight: 600;
    color: rgba(255,255,255,0.86) !important;
    margin: 0 5px;
}

.nav-link:hover {
    color: var(--cyan) !important;
}

.btn-aotech {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border: 0;
    color: white;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.8rem 1.35rem;
    box-shadow: 0 15px 35px rgba(11,132,255,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-aotech:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(11,132,255,0.35);
}

.hero-section {
    color: white;
    background:
        radial-gradient(circle at 80% 20%, rgba(41,211,255,0.28), transparent 30%),
        linear-gradient(135deg, #06152b 0%, #082447 55%, #071b35 100%);
    overflow: hidden;
}

.hero-section p {
    color: rgba(255,255,255,0.78);
}

.hero-text {
    font-size: 1.2rem;
    max-width: 720px;
}

.eyebrow {
    display: inline-flex;
    color: var(--cyan);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

.eyebrow.dark {
    color: var(--blue);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-card,
.premium-panel,
.side-card,
.content-card,
.product-feature,
.contact-form {
    background: white;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 24px 70px rgba(7, 27, 53, 0.12);
}

.hero-card {
    color: var(--dark);
    background: rgba(255,255,255,0.96);
}

.hero-card i,
.premium-panel i {
    font-size: 3rem;
    color: var(--blue);
    margin-bottom: 1rem;
    display: inline-block;
}

.section-padding {
    padding: 6rem 0;
}

.section-heading {
    max-width: 820px;
    margin: 0 auto 3rem;
    text-align: center;
}

.service-card,
.service-detail-card,
.solution-card,
.brand-card {
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
    border-radius: var(--radius);
    padding: 1.8rem;
    box-shadow: 0 16px 40px rgba(7,27,53,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-detail-card:hover,
.solution-card:hover,
.brand-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px rgba(7,27,53,0.1);
}

.service-card i,
.card-icon i,
.solution-card > i {
    font-size: 2.4rem;
    color: var(--blue);
    margin-bottom: 1rem;
    display: inline-block;
}

.service-detail-card span {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.split-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
}

.premium-panel {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.95), rgba(244,248,252,0.95)),
        radial-gradient(circle at top right, rgba(41,211,255,0.2), transparent 40%);
}

.dark-panel {
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    color: white;
}

.dark-panel p {
    color: rgba(255,255,255,0.76);
}

.bg-soft {
    background: var(--soft);
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.brand-pill,
.brand-card {
    background: white;
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: 0 14px 36px rgba(7,27,53,0.07);
}

.brand-pill strong,
.brand-pill span {
    display: block;
}

.brand-pill span,
.brand-card p {
    color: var(--text);
    font-size: 0.95rem;
}

.page-hero {
    padding: 10rem 0 5rem;
    color: white;
    background:
        radial-gradient(circle at 20% 20%, rgba(41,211,255,0.22), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--navy-2));
}

.page-hero p {
    color: rgba(255,255,255,0.78);
    max-width: 820px;
    font-size: 1.15rem;
}

.solution-card ul,
.styled-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.solution-card li,
.styled-list li {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    color: var(--text);
}

.solution-card li i {
    color: var(--blue);
}

.note-box {
    background: #fff8e6;
    border-left: 4px solid var(--gold);
    padding: 1rem;
    border-radius: 14px;
    color: #6f5620;
}

.form-control,
.form-select {
    border-radius: 14px;
    padding: 0.9rem 1rem;
    border-color: rgba(7,27,53,0.14);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 0.2rem rgba(11,132,255,0.12);
}

.footer-section {
    background: var(--navy);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-section p {
    color: rgba(255,255,255,0.68);
}

.footer-section a {
    display: block;
    color: rgba(255,255,255,0.72);
    margin-bottom: 0.5rem;
}

.footer-section a:hover {
    color: var(--cyan);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
    padding-top: 1.5rem;
    color: rgba(255,255,255,0.58);
}

@media (max-width: 991px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .navbar-collapse {
        padding: 1rem 0;
    }
}

@media (max-width: 576px) {
    .section-padding {
        padding: 4rem 0;
    }

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

    .hero-actions .btn {
        width: 100%;
    }

    .hero-card,
    .premium-panel,
    .side-card,
    .content-card,
    .product-feature,
    .contact-form {
        padding: 1.4rem;
    }
}


/* AOTech logo integration */
.nav-logo {
    width: 52px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(19, 151, 213, 0.25));
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1rem;
}

.footer-brand img {
    width: 64px;
    height: auto;
}

/* Landing page server-room hero */
.hero-section {
    position: relative;
    color: white;
    overflow: hidden;
    background: var(--navy);
}

.hero-server-room {
    isolation: isolate;
}

.hero-background-blur {
    position: absolute;
    inset: -20px;
    background:
        linear-gradient(120deg, rgba(5, 8, 23, 0.55), rgba(17, 22, 83, 0.55)),
        url('/images/server-room-bg.jpg') center center / cover no-repeat;
    filter: blur(8px);
    transform: scale(1.04);
    z-index: -3;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(19, 151, 213, 0.34), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(85, 183, 232, 0.22), transparent 34%),
        linear-gradient(90deg, rgba(5, 8, 23, 0.94) 0%, rgba(5, 8, 23, 0.78) 47%, rgba(17, 22, 83, 0.68) 100%);
    z-index: -2;
}

.hero-card.logo-hero-card {
    text-align: left;
    border: 1px solid rgba(85, 183, 232, 0.22);
    background: rgba(255,255,255,0.94);
}

.hero-logo {
    width: 160px;
    max-width: 100%;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 18px 35px rgba(17, 22, 83, 0.18));
}

.btn-aotech {
    background: linear-gradient(135deg, var(--logo-indigo), var(--logo-blue));
    box-shadow: 0 15px 35px rgba(19,151,213,0.30);
}

.btn-aotech:hover {
    box-shadow: 0 20px 45px rgba(19,151,213,0.40);
}

.eyebrow {
    color: var(--logo-light-blue);
}

.eyebrow.dark {
    color: var(--logo-blue);
}

.service-card i,
.card-icon i,
.solution-card > i,
.hero-card i,
.premium-panel i {
    color: var(--logo-blue);
}

.glass-nav {
    background: rgba(5, 8, 23, 0.90);
    border-bottom: 1px solid rgba(85, 183, 232, 0.14);
}

.nav-link:hover {
    color: var(--logo-light-blue) !important;
}

.footer-section {
    background: linear-gradient(135deg, #050817, #111653);
}


/* =========================
   Premium Landing Page
   ========================= */
.premium-hero { min-height: 100vh; }
.premium-hero .container { z-index: 2; }
.hero-copy { max-width: 820px; }
.hero-eyebrow { align-items: center; gap: 10px; padding: .55rem .85rem; border: 1px solid rgba(85,183,232,.25); border-radius: 999px; background: rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.pulse-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--logo-light-blue); box-shadow: 0 0 0 8px rgba(85,183,232,.14); }
.premium-hero h1 { max-width: 900px; letter-spacing: -.065em; margin-bottom: 1.35rem; }
.hero-text { color: rgba(255,255,255,.78); max-width: 760px; font-size: clamp(1.05rem,2vw,1.25rem); }
.btn-glass { color: white; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(18px); font-weight: 800; padding: .8rem 1.35rem; }
.btn-glass:hover { color: white; background: rgba(255,255,255,.14); border-color: rgba(85,183,232,.42); }
.hero-trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 2.8rem; max-width: 760px; }
.hero-trust-row div { padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.07); backdrop-filter: blur(20px); }
.hero-trust-row strong,.hero-trust-row span { display:block; }
.hero-trust-row strong { color:white; font-size:.98rem; }
.hero-trust-row span { color: rgba(255,255,255,.62); font-size:.88rem; }
.premium-command-card { position:relative; overflow:hidden; border-radius:32px; padding:2rem; color:var(--dark); background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,249,253,.9)); border:1px solid rgba(255,255,255,.55); box-shadow:0 30px 90px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.75); }
.premium-command-card::before { content:""; position:absolute; width:240px; height:240px; right:-90px; top:-90px; background:radial-gradient(circle, rgba(19,151,213,.24), transparent 65%); }
.command-card-top { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:1.5rem; }
.status-pill { display:inline-flex; align-items:center; gap:8px; color:var(--logo-deep-indigo); background:rgba(19,151,213,.1); border:1px solid rgba(19,151,213,.2); padding:.45rem .75rem; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap; }
.status-pill span { width:8px; height:8px; background:#25d366; border-radius:50%; box-shadow:0 0 0 6px rgba(37,211,102,.12); }
.premium-command-card h3 { position:relative; font-size:1.55rem; letter-spacing:-.03em; }
.mini-dashboard { position:relative; margin-top:1.6rem; border-radius:22px; overflow:hidden; border:1px solid rgba(17,22,83,.08); background:white; }
.mini-dashboard-row { display:flex; justify-content:space-between; gap:16px; padding:1rem; border-bottom:1px solid rgba(17,22,83,.08); }
.mini-dashboard-row:last-child { border-bottom:0; }
.mini-dashboard-row span { color:var(--text); }
.mini-dashboard-row strong { color:var(--logo-indigo); }
.hero-brand-strip { position:relative; bottom:34px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:1rem; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(255,255,255,.08); backdrop-filter:blur(24px); }
.hero-brand-strip span { color:rgba(255,255,255,.78); font-weight:800; font-size:.9rem; padding:.55rem .85rem; }
.premium-intro-section { padding:5rem 0; background:linear-gradient(180deg,#fff 0%,#f4f9fd 100%); }
.premium-intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; align-items:stretch; }
.intro-copy { padding:2rem; border-radius:30px; background:white; box-shadow:0 24px 70px rgba(7,27,53,.08); }
.intro-copy h2 { letter-spacing:-.055em; }
.intro-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.metric-card { padding:1.5rem; border-radius:26px; background:linear-gradient(145deg,#fff,#f7fbff); border:1px solid rgba(7,27,53,.08); box-shadow:0 18px 50px rgba(7,27,53,.07); }
.metric-card strong { display:block; color:rgba(19,151,213,.25); font-size:2.4rem; line-height:1; font-weight:900; }
.metric-card span { display:block; color:var(--logo-indigo); font-weight:900; font-size:1.15rem; margin:1rem 0 .45rem; }
.premium-services-section { background:radial-gradient(circle at top left, rgba(85,183,232,.12), transparent 28%), white; }
.premium-service-card { position:relative; overflow:hidden; padding:1.65rem; border-radius:28px; background:linear-gradient(145deg,#fff,rgba(247,251,255,.96)); border:1px solid rgba(7,27,53,.08); box-shadow:0 18px 55px rgba(7,27,53,.07); transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.premium-service-card::after { content:""; position:absolute; inset:auto -60px -80px auto; width:180px; height:180px; background:radial-gradient(circle, rgba(19,151,213,.12), transparent 65%); transition:transform .24s ease; }
.premium-service-card:hover { transform:translateY(-7px); border-color:rgba(19,151,213,.22); box-shadow:0 26px 75px rgba(7,27,53,.12); }
.premium-service-card:hover::after { transform:scale(1.22); }
.service-icon-wrap { width:58px; height:58px; display:grid; place-items:center; border-radius:19px; color:white; background:linear-gradient(135deg,var(--logo-indigo),var(--logo-blue)); margin-bottom:1.2rem; box-shadow:0 14px 30px rgba(19,151,213,.25); }
.service-icon-wrap i { color:white!important; font-size:1.65rem; }
.premium-service-card span { display:inline-block; color:var(--logo-blue); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.55rem; }
.premium-service-card h4 { font-size:1.2rem; letter-spacing:-.025em; }
.premium-service-card p { font-size:.95rem; margin-bottom:0; }
.premium-split-showcase { padding:6rem 0; background:radial-gradient(circle at 25% 15%,rgba(85,183,232,.2),transparent 28%), linear-gradient(135deg,#050817,#111653 56%,#0b2b52); color:white; }
.showcase-panel { height:100%; position:relative; overflow:hidden; border-radius:34px; padding:2.4rem; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); backdrop-filter:blur(24px); box-shadow:0 28px 90px rgba(0,0,0,.22); }
.showcase-panel::before { content:""; position:absolute; width:340px; height:340px; right:-150px; top:-140px; background:radial-gradient(circle,rgba(85,183,232,.24),transparent 66%); }
.showcase-panel h2 { position:relative; max-width:760px; letter-spacing:-.055em; }
.showcase-panel p { position:relative; color:rgba(255,255,255,.72); max-width:760px; }
.showcase-feature-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:2rem; }
.showcase-feature-grid div { padding:1rem; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.showcase-feature-grid i,.showcase-feature-grid span { display:block; }
.showcase-feature-grid i { color:var(--logo-light-blue); font-size:1.45rem; margin-bottom:.55rem; }
.showcase-feature-grid span { color:rgba(255,255,255,.82); font-weight:800; font-size:.88rem; }
.btn-light-premium { position:relative; color:var(--logo-deep-indigo); background:white; border-radius:999px; font-weight:900; padding:.85rem 1.25rem; }
.btn-light-premium:hover { color:var(--logo-deep-indigo); background:#f2fbff; }
.premium-brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.premium-brand-card { position:relative; overflow:hidden; min-height:120px; border-radius:26px; padding:1.4rem; background:white; border:1px solid rgba(7,27,53,.08); box-shadow:0 18px 50px rgba(7,27,53,.07); }
.premium-brand-card::after { content:""; position:absolute; width:120px; height:120px; right:-55px; bottom:-55px; background:radial-gradient(circle,rgba(19,151,213,.16),transparent 65%); }
.premium-brand-card strong,.premium-brand-card span { display:block; position:relative; }
.premium-brand-card strong { color:var(--logo-deep-indigo); font-size:1.15rem; font-weight:900; }
.premium-brand-card span { color:var(--text); margin-top:.3rem; }
.final-cta-section { padding:6rem 0; background:white; }
.final-cta-card { display:flex; align-items:center; justify-content:space-between; gap:2rem; border-radius:36px; padding:clamp(2rem,4vw,3.5rem); color:white; background:radial-gradient(circle at 80% 10%, rgba(85,183,232,.22), transparent 28%), linear-gradient(135deg,#050817,#111653); box-shadow:0 30px 90px rgba(7,27,53,.18); }
.final-cta-card h2 { max-width:780px; letter-spacing:-.055em; }
.final-cta-card p { color:rgba(255,255,255,.72); margin-bottom:0; }
@media (max-width:1199px){ .showcase-feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:991px){ .premium-intro-grid{grid-template-columns:1fr;} .intro-metrics{grid-template-columns:1fr;} .hero-trust-row{grid-template-columns:1fr;} .premium-brand-grid{grid-template-columns:repeat(2,1fr);} .final-cta-card{align-items:flex-start; flex-direction:column;} .hero-brand-strip{bottom:0; margin-bottom:2rem;} }
@media (max-width:576px){ .premium-command-card,.showcase-panel,.intro-copy{border-radius:24px; padding:1.4rem;} .premium-brand-grid,.showcase-feature-grid{grid-template-columns:1fr;} .hero-brand-strip{justify-content:flex-start;} }


/* =========================
   Premium Inner Pages
   ========================= */

.premium-page-hero {
    position: relative;
    overflow: hidden;
    padding: 11rem 0 6rem;
    color: white;
    background:
        radial-gradient(circle at 20% 15%, rgba(85,183,232,0.22), transparent 30%),
        radial-gradient(circle at 90% 25%, rgba(19,151,213,0.18), transparent 28%),
        linear-gradient(135deg, #050817, #111653 58%, #0b2b52);
}

.premium-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.page-hero-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(85,183,232,0.35), transparent 68%);
    filter: blur(8px);
}

.premium-page-hero h1 {
    max-width: 1000px;
    letter-spacing: -0.065em;
    margin-bottom: 1.2rem;
}

.premium-page-hero p {
    max-width: 820px;
    color: rgba(255,255,255,0.74);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.premium-page-section {
    padding: 6rem 0;
    background: white;
}

.bg-premium-soft {
    background:
        radial-gradient(circle at top left, rgba(85,183,232,0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
}

.premium-section-intro {
    max-width: 860px;
    margin-bottom: 3rem;
}

.premium-section-intro h2 {
    letter-spacing: -0.055em;
}

.premium-service-large,
.premium-solution-panel,
.premium-content-panel,
.premium-side-panel,
.premium-contact-form,
.premium-product-spotlight {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 2rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,1), rgba(247,251,255,0.96));
    border: 1px solid rgba(7,27,53,0.08);
    box-shadow: 0 22px 65px rgba(7,27,53,0.08);
}

.premium-service-large::after,
.premium-solution-panel::after,
.premium-product-spotlight::after,
.premium-content-panel::after,
.premium-side-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(19,151,213,0.13), transparent 66%);
}

.premium-service-large > *,
.premium-solution-panel > *,
.premium-product-spotlight > *,
.premium-content-panel > *,
.premium-side-panel > * {
    position: relative;
}

.premium-service-large {
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.premium-service-large:hover {
    transform: translateY(-7px);
    border-color: rgba(19,151,213,0.22);
    box-shadow: 0 30px 85px rgba(7,27,53,0.13);
}

.premium-service-large span,
.solution-top span {
    color: var(--logo-blue);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.premium-service-large h3,
.premium-solution-panel h3,
.premium-product-spotlight h2,
.premium-content-panel h2 {
    letter-spacing: -0.04em;
}

.premium-card-line {
    width: 100%;
    height: 3px;
    margin-top: 1.5rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--logo-indigo), var(--logo-blue), transparent);
}

.premium-process-band {
    padding: 5rem 0;
    color: white;
    background: linear-gradient(135deg, #050817, #111653);
}

.process-card,
.slim-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    border-radius: 34px;
    padding: clamp(2rem, 4vw, 3.2rem);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(22px);
}

.process-card p,
.slim-cta-card p {
    color: rgba(255,255,255,0.72);
    margin-bottom: 0;
}

.solution-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.premium-solution-panel ul {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
}

.premium-solution-panel li {
    display: flex;
    gap: 0.75rem;
    color: var(--text);
    margin-bottom: 0.85rem;
}

.premium-solution-panel li i {
    color: var(--logo-blue);
}

.premium-cta-slim {
    padding: 5rem 0;
    color: white;
    background:
        radial-gradient(circle at 85% 20%, rgba(85,183,232,0.2), transparent 28%),
        linear-gradient(135deg, #050817, #0b2b52);
}

.slim-cta-card h2 {
    letter-spacing: -0.045em;
}

.premium-dark-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 2.2rem;
    color: white;
    background:
        radial-gradient(circle at 80% 10%, rgba(85,183,232,0.24), transparent 30%),
        linear-gradient(135deg, #050817, #111653);
    box-shadow: 0 25px 80px rgba(7,27,53,0.18);
}

.premium-dark-card i {
    font-size: 2.6rem;
    color: var(--logo-light-blue);
    margin-bottom: 1rem;
}

.premium-dark-card p {
    color: rgba(255,255,255,0.72);
}

.product-feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.product-feature-list div {
    padding: 1rem;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
}

.product-feature-list i,
.product-feature-list span {
    display: block;
}

.product-feature-list i {
    color: var(--logo-blue);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.product-feature-list span {
    font-weight: 800;
    color: var(--logo-deep-indigo);
}

.premium-feature-stack {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.premium-feature-stack div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    padding: 1rem;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
}

.premium-feature-stack i {
    grid-row: span 2;
    color: var(--logo-blue);
    font-size: 1.8rem;
}

.premium-feature-stack strong {
    color: var(--logo-deep-indigo);
}

.premium-feature-stack span {
    color: var(--text);
}

.premium-note {
    padding: 1rem;
    border-radius: 18px;
    background: #fff8e6;
    border-left: 4px solid var(--gold);
    color: #6f5620;
}

.premium-brand-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.premium-brand-tile {
    min-height: 180px;
    border-radius: 30px;
    padding: 1.6rem;
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
    box-shadow: 0 22px 65px rgba(7,27,53,0.08);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.premium-brand-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 85px rgba(7,27,53,0.13);
}

.brand-initial {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, var(--logo-indigo), var(--logo-blue));
    margin-bottom: 1.2rem;
}

.premium-check-list {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.premium-check-list div {
    display: flex;
    gap: 0.75rem;
    color: rgba(255,255,255,0.82);
}

.premium-check-list.dark-text div {
    color: var(--text);
}

.premium-check-list i {
    color: var(--logo-light-blue);
    font-size: 1.2rem;
}

.premium-side-panel.sticky-lg-top {
    top: 110px;
}

.premium-contact-form {
    background:
        linear-gradient(145deg, white, #f7fbff);
}

.premium-input {
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(7,27,53,0.12);
    background: white;
}

textarea.premium-input {
    min-height: 170px;
}

.premium-alert {
    border-radius: 18px;
    border: 0;
    box-shadow: 0 18px 45px rgba(7,27,53,0.08);
}

@media (max-width: 991px) {
    .process-card,
    .slim-cta-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-brand-showcase,
    .product-feature-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-page-hero {
        padding: 9rem 0 4rem;
    }
}

@media (max-width: 576px) {
    .premium-brand-showcase,
    .product-feature-list {
        grid-template-columns: 1fr;
    }

    .premium-service-large,
    .premium-solution-panel,
    .premium-content-panel,
    .premium-side-panel,
    .premium-contact-form,
    .premium-product-spotlight,
    .premium-dark-card {
        border-radius: 24px;
        padding: 1.45rem;
    }
}


/* =========================
   Enterprise Visual Upgrade
   Animated Hero, Image Cards, Floating Nav, Typography
   ========================= */

html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.section-heading h2,
.premium-section-intro h2,
.final-cta-card h2,
.premium-page-hero h1,
.premium-hero h1 {
    letter-spacing: -0.07em;
}

.section-heading p,
.premium-section-intro p {
    font-size: 1.05rem;
}

/* Floating navigation effects */
.glass-nav {
    top: 14px;
    left: 50%;
    width: min(1180px, calc(100% - 28px));
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(5, 8, 23, 0.72);
    box-shadow: 0 20px 70px rgba(0,0,0,0.22);
    transition:
        top 0.25s ease,
        width 0.25s ease,
        border-radius 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        padding 0.25s ease;
}

.glass-nav.nav-scrolled {
    top: 8px;
    width: min(1080px, calc(100% - 22px));
    background: rgba(5, 8, 23, 0.88);
    box-shadow: 0 22px 75px rgba(0,0,0,0.28);
}

.navbar .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.nav-logo {
    transition: width 0.25s ease, transform 0.25s ease;
}

.glass-nav.nav-scrolled .nav-logo {
    width: 44px;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--logo-light-blue), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Animated hero layers */
.animated-hero {
    min-height: 100vh;
}

.hero-network-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(85,183,232,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85,183,232,0.07) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle at 42% 35%, black 0%, transparent 72%);
    animation: gridFloat 16s linear infinite;
    pointer-events: none;
}

.hero-orb {
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.58;
    pointer-events: none;
}

.orb-one {
    top: 16%;
    right: 12%;
    background: radial-gradient(circle, rgba(85,183,232,0.38), transparent 65%);
    animation: orbDriftOne 12s ease-in-out infinite alternate;
}

.orb-two {
    bottom: 10%;
    left: 6%;
    background: radial-gradient(circle, rgba(19,151,213,0.32), transparent 66%);
    animation: orbDriftTwo 15s ease-in-out infinite alternate;
}

.hero-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    height: 220px;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, rgba(85,183,232,0.09), transparent);
    transform: skewY(-8deg);
    animation: scanLine 9s ease-in-out infinite;
    pointer-events: none;
}

.premium-command-card,
.hero-trust-row div,
.showcase-panel,
.premium-service-card,
.premium-service-large,
.premium-solution-panel,
.premium-content-panel,
.premium-side-panel,
.premium-contact-form,
.premium-product-spotlight,
.premium-brand-card,
.premium-brand-tile {
    will-change: transform;
}

.premium-command-card {
    animation: cardFloat 7s ease-in-out infinite alternate;
}

@keyframes gridFloat {
    from { background-position: 0 0; }
    to { background-position: 76px 76px; }
}

@keyframes orbDriftOne {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-35px, 26px, 0) scale(1.08); }
}

@keyframes orbDriftTwo {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(42px, -22px, 0) scale(1.12); }
}

@keyframes scanLine {
    0%, 18% { transform: translateY(-60%) skewY(-8deg); opacity: 0; }
    42% { opacity: 1; }
    82%, 100% { transform: translateY(720%) skewY(-8deg); opacity: 0; }
}

@keyframes cardFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}

/* Premium image cards */
.premium-image-showcase-section {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(85,183,232,0.14), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(19,151,213,0.10), transparent 26%),
        linear-gradient(180deg, #ffffff, #f4f9fd);
}

.premium-image-showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17,22,83,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,22,83,0.04) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, transparent, black 28%, transparent 100%);
}

.premium-image-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 0.95fr;
    grid-auto-rows: 250px;
    gap: 1.1rem;
}

.premium-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.62);
    background:
        linear-gradient(135deg, rgba(5,8,23,0.9), rgba(17,22,83,0.9)),
        radial-gradient(circle at top right, rgba(85,183,232,0.25), transparent 36%);
    box-shadow: 0 24px 70px rgba(7,27,53,0.14);
    isolation: isolate;
}

.premium-image-card.tall {
    grid-row: span 2;
}

.premium-image-card.wide {
    grid-column: span 2;
}

.premium-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transform: scale(1.04);
    transition: transform 0.55s ease, opacity 0.55s ease, filter 0.55s ease;
    filter: saturate(0.92) contrast(1.08);
}

.premium-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(115deg, rgba(85,183,232,0.22), transparent 36%),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18), transparent 18%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.premium-image-card:hover img {
    transform: scale(1.11);
    opacity: 0.86;
    filter: saturate(1.05) contrast(1.12);
}

.premium-image-card:hover::before {
    opacity: 1;
}

.image-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(to top, rgba(5,8,23,0.94), rgba(5,8,23,0.45) 52%, rgba(5,8,23,0.10)),
        radial-gradient(circle at bottom left, rgba(19,151,213,0.26), transparent 42%);
}

.image-card-content {
    position: absolute;
    z-index: 4;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
}

.image-card-content span {
    display: inline-flex;
    color: var(--logo-light-blue);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.image-card-content h3 {
    color: white;
    max-width: 620px;
    margin-bottom: 0.4rem;
    letter-spacing: -0.04em;
}

.image-card-content p {
    color: rgba(255,255,255,0.74);
    margin-bottom: 0;
}

/* Section background imagery and premium texture */
.premium-services-section,
.premium-page-section,
.bg-premium-soft {
    position: relative;
    overflow: hidden;
}

.premium-services-section::before,
.premium-page-section::before,
.bg-premium-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(85,183,232,0.08), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(19,151,213,0.06), transparent 26%);
    pointer-events: none;
}

.premium-services-section > .container,
.premium-page-section > .container,
.bg-premium-soft > .container {
    position: relative;
}

.premium-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 46%, transparent 58%);
    transform: translateX(-100%);
    animation: heroSheen 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroSheen {
    0%, 30% { transform: translateX(-100%); opacity: 0; }
    48% { opacity: 1; }
    70%, 100% { transform: translateX(100%); opacity: 0; }
}

/* Reveal animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

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

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 991px) {
    .glass-nav {
        border-radius: 24px;
        top: 10px;
    }

    .premium-image-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 320px;
    }

    .premium-image-card.tall,
    .premium-image-card.wide {
        grid-row: span 1;
        grid-column: span 1;
    }
}

@media (max-width: 576px) {
    .glass-nav {
        width: calc(100% - 18px);
        border-radius: 22px;
    }

    .premium-image-grid {
        grid-auto-rows: 280px;
    }

    .image-card-content {
        left: 1.1rem;
        right: 1.1rem;
        bottom: 1.1rem;
    }
}


/* =========================
   Digital Service Voucher Flow
   ========================= */

.digital-voucher-form {
    position: relative;
}

.digital-voucher-options {
    padding: 1.1rem;
    border-radius: 22px;
    background: rgba(19,151,213,0.06);
    border: 1px solid rgba(19,151,213,0.14);
}

.premium-input-group {
    display: flex;
    gap: 0.75rem;
}

.premium-input-group .premium-input {
    border-radius: 16px !important;
}

.premium-input-group .btn {
    border-radius: 16px;
    white-space: nowrap;
}

.selected-network-box {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    color: var(--logo-deep-indigo);
    background: rgba(85,183,232,0.12);
    border: 1px solid rgba(19,151,213,0.2);
}

.premium-kyc-check {
    padding: 1rem 1rem 1rem 2.8rem;
    border-radius: 18px;
    background: rgba(17,22,83,0.04);
    border: 1px solid rgba(17,22,83,0.08);
}

.premium-network-modal {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(7,27,53,0.25);
}

.premium-network-modal .modal-header {
    color: white;
    background: linear-gradient(135deg, #050817, #111653);
    border-bottom: 0;
    padding: 1.25rem 1.5rem;
}

.premium-network-modal .modal-body {
    padding: 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(85,183,232,0.12), transparent 34%),
        #ffffff;
}

.network-options {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.network-option-button {
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(19,151,213,0.18);
    color: var(--logo-deep-indigo);
    background: white;
    font-weight: 800;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.network-option-button:hover {
    transform: translateY(-2px);
    border-color: rgba(19,151,213,0.42);
    box-shadow: 0 14px 35px rgba(7,27,53,0.12);
}

.network-warning {
    padding: 1rem;
    border-radius: 16px;
    color: #6f5620;
    background: #fff8e6;
    border-left: 4px solid var(--gold);
}

@media (max-width: 576px) {
    .premium-input-group {
        flex-direction: column;
    }

    .premium-input-group .btn {
        width: 100%;
    }
}


/* =========================
   Enterprise Motion & Interaction System
   ========================= */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    background: rgba(255,255,255,0.04);
}

.scroll-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--logo-indigo), var(--logo-blue), var(--logo-light-blue));
    box-shadow: 0 0 18px rgba(85,183,232,0.7);
}

.cursor-glow {
    position: fixed;
    top: -180px;
    left: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(85,183,232,0.12), transparent 64%);
    mix-blend-mode: screen;
    opacity: 0.75;
}

main,
footer,
.navbar {
    position: relative;
    z-index: 2;
}

.motion-reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition:
        opacity 720ms ease,
        transform 720ms cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--delay, 0ms);
}

.motion-reveal.motion-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.interactive-light-card {
    position: relative;
    isolation: isolate;
}

.interactive-light-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(85,183,232,0.18),
        rgba(19,151,213,0.06) 24%,
        transparent 48%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.interactive-light-card:hover::before {
    opacity: 1;
}

.btn-aotech,
.btn-glass,
.btn-light-premium {
    will-change: transform;
    transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.enterprise-metrics-band {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0;
    color: white;
    background:
        radial-gradient(circle at 80% 10%, rgba(85,183,232,0.18), transparent 30%),
        linear-gradient(135deg, #050817, #111653 62%, #0b2b52);
}

.enterprise-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.enterprise-metric {
    padding: 1.6rem;
    border-radius: 26px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.13);
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}

.enterprise-metric strong {
    display: block;
    color: white;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
    margin-bottom: 0.75rem;
}

.enterprise-metric p {
    color: rgba(255,255,255,0.72);
    margin: 0;
    font-weight: 600;
}

.motion-hero .hero-copy,
.motion-hero .premium-command-card {
    animation: heroEntrance 900ms cubic-bezier(.2,.8,.2,1) both;
}

.motion-hero .premium-command-card {
    animation-delay: 160ms;
}

@keyframes heroEntrance {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.premium-image-card,
.premium-service-card,
.premium-service-large,
.premium-solution-panel,
.premium-brand-card,
.premium-brand-tile,
.showcase-panel {
    transform-style: preserve-3d;
}

.premium-image-card:hover,
.premium-service-card:hover,
.premium-service-large:hover,
.premium-solution-panel:hover,
.premium-brand-card:hover,
.premium-brand-tile:hover,
.showcase-panel:hover {
    transform: translateY(-7px);
}

.hero-network-grid,
.hero-orb,
.hero-background-blur {
    will-change: transform;
}

@media (max-width: 991px) {
    .enterprise-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cursor-glow {
        display: none;
    }
}

@media (max-width: 576px) {
    .enterprise-metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-glow {
        display: none;
    }

    .motion-reveal,
    .motion-reveal.motion-visible,
    .motion-hero .hero-copy,
    .motion-hero .premium-command-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }

    .interactive-light-card::before {
        display: none;
    }
}


/* =========================
   Explicit Image Link System
   ========================= */

.optimized-picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #050817, #111653);
}

.optimized-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-linked-card {
    overflow: hidden;
    padding: 0 !important;
}

.linked-card-image {
    position: relative;
    height: 235px;
    overflow: hidden;
    background: linear-gradient(135deg, #050817, #111653);
}

.linked-card-image.solution-image {
    height: 280px;
}

.linked-card-image.product-image {
    height: 360px;
}

.linked-card-image .optimized-picture img {
    transform: scale(1.03);
    filter: saturate(0.95) contrast(1.08);
    transition: transform 0.55s ease, filter 0.55s ease;
}

.image-linked-card:hover .linked-card-image .optimized-picture img {
    transform: scale(1.1);
    filter: saturate(1.08) contrast(1.12);
}

.linked-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(5,8,23,0.68), rgba(5,8,23,0.12)),
        radial-gradient(circle at 80% 15%, rgba(85,183,232,0.24), transparent 32%);
    pointer-events: none;
}

.linked-card-body {
    position: relative;
    padding: 2rem;
}

.hero-background-blur {
    background:
        linear-gradient(120deg, rgba(5, 8, 23, 0.55), rgba(17, 22, 83, 0.55)),
        image-set(
            url('/images/hero/server-room-main.webp') type('image/webp'),
            url('/images/hero/server-room-main.jpg') type('image/jpeg'),
            url('/images/hero/server-room-main.png') type('image/png')
        ) center center / cover no-repeat !important;
}

@media (max-width: 576px) {
    .linked-card-image,
    .linked-card-image.solution-image,
    .linked-card-image.product-image {
        height: 240px;
    }

    .linked-card-body {
        padding: 1.45rem;
    }
}


/* =========================
   Optimized Header + Back To Top
   ========================= */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    transform: translateY(-160%);
    background: white;
    color: var(--logo-deep-indigo);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.optimized-header {
    min-height: 78px;
    padding: 0.55rem 0;
}

.optimized-header .container {
    gap: 1rem;
}

.premium-brand-mark {
    min-width: max-content;
}

.premium-brand-mark .nav-logo {
    width: 58px;
}

.brand-text {
    display: grid;
    line-height: 1.05;
}

.brand-text strong {
    color: white;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: 1.12rem;
}

.brand-text small {
    color: rgba(255,255,255,0.58);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.optimized-header .navbar-nav {
    gap: 0.15rem;
}

.optimized-header .nav-link {
    padding: 0.7rem 0.78rem !important;
    border-radius: 999px;
    line-height: 1;
}

.optimized-header .nav-link:hover,
.optimized-header .nav-link.active {
    background: rgba(85,183,232,0.10);
}

.optimized-header.header-compact {
    min-height: 64px;
    padding: 0.35rem 0;
}

.optimized-header.header-compact .nav-logo {
    width: 44px;
}

.optimized-header.header-compact .brand-text small {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(85,183,232,0.35);
    border-radius: 18px;
    color: white;
    background:
        radial-gradient(circle at 30% 20%, rgba(85,183,232,0.38), transparent 34%),
        linear-gradient(135deg, rgba(5,8,23,0.88), rgba(17,22,83,0.92));
    box-shadow: 0 22px 60px rgba(0,0,0,0.28);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(18px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    border-color: rgba(85,183,232,0.85);
    transform: translateY(-3px) scale(1.03);
}

.back-to-top i {
    font-size: 1.2rem;
}

@media (max-width: 991px) {
    .optimized-header {
        border-radius: 26px;
        min-height: auto;
    }

    .optimized-header .navbar-collapse {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border-radius: 22px;
        background: rgba(5,8,23,0.72);
        border: 1px solid rgba(85,183,232,0.12);
    }

    .optimized-header .navbar-nav {
        align-items: stretch !important;
        gap: 0.25rem;
    }

    .optimized-header .nav-link {
        padding: 0.95rem 1rem !important;
    }

    .optimized-header .btn-aotech {
        width: 100%;
        margin-top: 0.5rem;
        text-align: center;
    }

    .brand-text small {
        display: none;
    }
}

@media (max-width: 576px) {
    .premium-brand-mark .nav-logo {
        width: 46px;
    }

    .brand-text strong {
        font-size: 1rem;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }
}



/* =========================================================
   Home Page Mockup Layout
   ========================================================= */

.mockup-home-hero {
    position: relative;
    min-height: 620px;
    padding: 8.5rem 0 4.5rem;
    overflow: hidden;
    color: white;
    background: #050817;
    isolation: isolate;
}

.mockup-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/images/hero/server-room-main.jpg') center center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/hero/server-room-main.webp') type('image/webp'))) {
    .mockup-hero-bg {
        background:
            image-set(
                url('/images/hero/server-room-main.webp') type('image/webp'),
                url('/images/hero/server-room-main.jpg') type('image/jpeg'),
                url('/images/hero/server-room-main.png') type('image/png')
            ) center center / cover no-repeat;
    }
}

.mockup-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5,8,23,0.94) 0%, rgba(5,8,23,0.76) 48%, rgba(5,8,23,0.34) 100%),
        radial-gradient(circle at 18% 25%, rgba(19,151,213,0.34), transparent 35%);
}

.mockup-home-hero .container {
    position: relative;
    z-index: 2;
}

.mockup-hero-copy {
    max-width: 760px;
}

.mockup-eyebrow,
.mockup-section-heading span,
.mockup-about-content span,
.mockup-brand-card > span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.65rem;
}

.mockup-hero-copy h1 {
    max-width: 720px;
    color: white;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.075em;
    margin-bottom: 1.3rem;
}

.mockup-hero-copy h1 span {
    display: block;
    color: var(--logo-blue);
}

.mockup-hero-copy p {
    max-width: 650px;
    color: rgba(255,255,255,0.86);
    font-size: 1.08rem;
    line-height: 1.65;
}

.mockup-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.8rem 0 2rem;
}

.btn-outline-premium {
    color: white;
    border: 1px solid rgba(255,255,255,0.72);
    background: transparent;
    border-radius: 999px;
    padding: 0.8rem 1.35rem;
    font-weight: 800;
}

.btn-outline-premium:hover {
    color: white;
    background: rgba(255,255,255,0.12);
    border-color: var(--logo-light-blue);
}

.mockup-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    color: white;
}

.mockup-trust-row div {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    font-size: 0.92rem;
}

.mockup-trust-row i {
    color: white;
    font-size: 1.25rem;
}

.mockup-stats-card {
    max-width: 340px;
    margin-left: auto;
    padding: 2rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.96);
    color: var(--logo-deep-indigo);
    box-shadow: 0 28px 90px rgba(0,0,0,0.28);
}

.mockup-stats-card > span {
    display: block;
    color: var(--logo-blue);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.mockup-stat-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
}

.mockup-stat-item div {
    grid-row: span 2;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.mockup-stat-item i {
    font-size: 1.45rem;
}

.mockup-stat-item strong {
    color: #06152b;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
}

.mockup-stat-item p {
    margin: 0;
    color: #34405a;
    font-size: 0.94rem;
}

/* Services */
.mockup-services-section {
    padding: 4.5rem 0 2rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.10), transparent 36%),
        #f7fbff;
}

.mockup-section-heading {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.mockup-section-heading.compact {
    margin-bottom: 1.5rem;
}

.mockup-section-heading h2 {
    color: #06152b;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    margin-bottom: 0.35rem;
    letter-spacing: -0.04em;
}

.mockup-section-heading p {
    margin: 0;
    color: #5d6679;
}

.mockup-service-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.mockup-service-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
    box-shadow: 0 16px 42px rgba(7,27,53,0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mockup-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 65px rgba(7,27,53,0.14);
}

.mockup-service-image {
    height: 130px;
    overflow: hidden;
    background: #06152b;
}

.mockup-service-image .optimized-picture,
.mockup-service-image img {
    width: 100%;
    height: 100%;
}

.mockup-service-image img {
    object-fit: cover;
    transition: transform 0.45s ease;
}

.mockup-service-card:hover .mockup-service-image img {
    transform: scale(1.08);
}

.mockup-card-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: -26px 0 0 1rem;
    position: relative;
    z-index: 2;
    border: 3px solid white;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 12px 28px rgba(19,151,213,0.28);
}

.mockup-card-icon i {
    font-size: 1.35rem;
}

.mockup-service-card h3 {
    padding: 0.75rem 1rem 0;
    color: #06152b;
    font-size: 1.08rem;
    line-height: 1.15;
    margin-bottom: 0.55rem;
}

.mockup-service-card p {
    padding: 0 1rem;
    color: #4f5a70;
    font-size: 0.9rem;
    line-height: 1.55;
    min-height: 84px;
}

.mockup-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1rem 1.15rem;
    color: var(--logo-blue);
    font-weight: 800;
    font-size: 0.88rem;
}

/* About + Brands */
.mockup-about-brand-section {
    padding: 2rem 0;
    background: #f7fbff;
}

.mockup-about-card,
.mockup-brand-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(7,27,53,0.08);
}

.mockup-about-card {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: 1.4rem;
    padding: 1.7rem;
    color: white;
    background: linear-gradient(135deg, #050817, #071b35);
}

.mockup-about-content h2,
.mockup-brand-card h2 {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    letter-spacing: -0.04em;
}

.mockup-about-content p,
.mockup-about-content li {
    color: rgba(255,255,255,0.82);
    font-size: 0.94rem;
}

.mockup-about-content ul {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0;
    display: grid;
    gap: 0.55rem;
}

.mockup-about-content li {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.mockup-about-content i {
    color: var(--logo-blue);
}

.mockup-about-image {
    min-height: 220px;
    overflow: hidden;
    border-radius: 12px;
    align-self: center;
}

.mockup-about-image .optimized-picture,
.mockup-about-image img {
    width: 100%;
    height: 100%;
}

.mockup-about-image img {
    object-fit: cover;
}

.mockup-brand-card {
    padding: 1.7rem;
    background: white;
}

.mockup-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin: 1.3rem 0;
}

.mockup-brand-grid div {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 0.55rem;
    border-radius: 8px;
    background: #f6f8fb;
    border: 1px solid rgba(7,27,53,0.06);
    color: #1d2840;
    font-weight: 900;
    text-align: center;
    font-size: 0.88rem;
}

.mockup-brand-card p {
    max-width: 520px;
    margin: 0 auto 0.6rem;
    text-align: center;
    font-size: 0.92rem;
}

.mockup-brand-card a {
    display: block;
    text-align: center;
    color: var(--logo-blue);
    font-weight: 800;
}

/* Why Choose Us */
.mockup-why-section {
    padding: 2rem 0 4rem;
    background: #f7fbff;
}

.mockup-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
}

.mockup-why-card {
    padding: 1.2rem;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.08);
    box-shadow: 0 14px 38px rgba(7,27,53,0.06);
}

.mockup-why-card i {
    display: block;
    color: var(--logo-blue);
    font-size: 2rem;
    margin-bottom: 0.65rem;
}

.mockup-why-card h3 {
    color: #06152b;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.mockup-why-card p {
    color: #5d6679;
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

/* Header adjustment for the new home layout */
.optimized-header,
.glass-nav {
    top: 0;
    width: 100%;
    max-width: none;
    left: 0;
    transform: none;
    border-radius: 0;
    background: rgba(5,8,23,0.94);
    border-bottom: 1px solid rgba(19,151,213,0.22);
}

.glass-nav.nav-scrolled,
.optimized-header.header-compact {
    top: 0;
    width: 100%;
    background: rgba(5,8,23,0.98);
}

.premium-brand-mark .nav-logo,
.nav-logo {
    width: 50px;
}

.brand-text strong {
    color: white;
}

.brand-text small {
    color: rgba(255,255,255,0.72);
}

@media (max-width: 1199px) {
    .mockup-service-grid { grid-template-columns: repeat(3, 1fr); }
    .mockup-why-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .mockup-home-hero { padding: 8rem 0 3.5rem; }
    .mockup-stats-card { max-width: none; margin-left: 0; }
    .mockup-service-grid { grid-template-columns: repeat(2, 1fr); }
    .mockup-about-card { grid-template-columns: 1fr; }
    .mockup-brand-grid { grid-template-columns: repeat(3, 1fr); }
    .mockup-why-grid { grid-template-columns: repeat(2, 1fr); }
    .optimized-header,
    .glass-nav { width: calc(100% - 20px); left: 10px; top: 10px; border-radius: 22px; }
}

@media (max-width: 576px) {
    .mockup-home-hero { min-height: auto; padding: 7.5rem 0 3rem; }
    .mockup-hero-copy h1 { font-size: clamp(2.55rem, 14vw, 3.35rem); }
    .mockup-hero-actions .btn { width: 100%; justify-content: center; }
    .mockup-service-grid,
    .mockup-why-grid,
    .mockup-brand-grid { grid-template-columns: 1fr; }
    .mockup-service-image { height: 170px; }
    .mockup-service-card p { min-height: auto; }
    .mockup-about-card,
    .mockup-brand-card { padding: 1.25rem; }
}
/* End Home Page Mockup Layout */


/* =========================================================
   Services Page Mockup Layout
   ========================================================= */

.services-mockup-hero {
    position: relative;
    min-height: 350px;
    padding: 8.5rem 0 4rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.services-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/images/services/structured-cabling.jpg') right center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/services/structured-cabling.webp') type('image/webp'))) {
    .services-hero-bg {
        background:
            image-set(
                url('/images/services/structured-cabling.webp') type('image/webp'),
                url('/images/services/structured-cabling.jpg') type('image/jpeg')
            ) right center / cover no-repeat;
    }
}

.services-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5,8,23,0.98) 0%, rgba(5,8,23,0.78) 45%, rgba(5,8,23,0.26) 100%),
        radial-gradient(circle at 20% 25%, rgba(19,151,213,0.28), transparent 34%);
}

.services-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.services-hero-copy {
    max-width: 620px;
}

.services-hero-copy span,
.services-section-heading span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.services-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    margin-bottom: 1rem;
}

.services-hero-copy h1 strong {
    color: var(--logo-blue);
}

.services-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 560px;
}

.services-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.5rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
}

.services-breadcrumb a,
.services-breadcrumb span {
    color: rgba(255,255,255,0.82);
}

.services-breadcrumb span {
    color: var(--logo-light-blue);
}

.services-mockup-section {
    padding: 3.6rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.services-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.2rem;
}

.services-section-heading h2 {
    color: #06152b;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    letter-spacing: -0.052em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.heading-line {
    width: 48px;
    height: 3px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--logo-blue);
}

.services-mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
}

.services-page-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.services-page-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(7,27,53,0.14);
}

.services-card-image {
    height: 190px;
    overflow: hidden;
    background: #06152b;
}

.services-card-image .optimized-picture,
.services-card-image img {
    width: 100%;
    height: 100%;
}

.services-card-image img {
    object-fit: cover;
    transition: transform 0.45s ease;
}

.services-page-card:hover .services-card-image img {
    transform: scale(1.08);
}

.services-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: -30px 0 0 1.35rem;
    position: relative;
    z-index: 2;
    border: 3px solid white;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 12px 28px rgba(19,151,213,0.28);
}

.services-card-icon i {
    font-size: 1.45rem;
}

.services-card-body {
    padding: 1rem 1.35rem 1.25rem;
}

.services-card-body h3 {
    color: #06152b;
    font-size: 1.23rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin-bottom: 0.6rem;
}

.services-card-body p {
    color: #4f5a70;
    font-size: 0.93rem;
    line-height: 1.56;
    margin-bottom: 1rem;
    min-height: 48px;
}

.services-card-body a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--logo-blue);
    font-size: 0.9rem;
    font-weight: 850;
}

.services-custom-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.45rem;
    padding: 1.4rem 1.65rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.services-custom-cta .cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.services-custom-cta .cta-icon i {
    font-size: 1.8rem;
}

.services-custom-cta h3 {
    color: white;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.services-custom-cta p {
    color: rgba(255,255,255,0.74);
    margin: 0;
    font-size: 0.94rem;
}

.services-custom-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991px) {
    .services-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

    .services-mockup-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-custom-cta {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .services-custom-cta .cta-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .services-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .services-mockup-grid {
        grid-template-columns: 1fr;
    }

    .services-card-image {
        height: 175px;
    }

    .services-card-body p {
        min-height: auto;
    }

    .services-custom-cta .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* End Services Page Mockup Layout */


/* =========================================================
   Solutions Page Mockup Layout
   ========================================================= */

.solutions-mockup-hero {
    position: relative;
    min-height: 350px;
    padding: 8.5rem 0 4rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.solutions-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
        url('/images/backgrounds/network-lines.png') center center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/backgrounds/network-lines.webp') type('image/webp'))) {
    .solutions-hero-bg {
        background:
            linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
            image-set(
                url('/images/backgrounds/network-lines.webp') type('image/webp'),
                url('/images/backgrounds/network-lines.png') type('image/png')
            ) center center / cover no-repeat;
    }
}

.solutions-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 46%, rgba(19,151,213,0.34), transparent 30%),
        linear-gradient(90deg, rgba(5,8,23,0.96), rgba(5,8,23,0.72), rgba(5,8,23,0.2));
}

.solutions-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 74% 34%, rgba(85,183,232,0.16), transparent 34%),
        linear-gradient(90deg, rgba(5,8,23,0.96) 0%, rgba(5,8,23,0.58) 55%, rgba(5,8,23,0.18) 100%);
}

.solutions-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.solutions-hero-copy {
    max-width: 680px;
}

.solutions-hero-copy span,
.solutions-section-heading span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.solutions-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.solutions-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 560px;
}

.solutions-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.5rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
}

.solutions-breadcrumb a,
.solutions-breadcrumb span {
    color: rgba(255,255,255,0.82);
}

.solutions-breadcrumb span {
    color: var(--logo-light-blue);
}

.solutions-mockup-section {
    padding: 3.6rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.solutions-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.2rem;
}

.solutions-section-heading h2 {
    color: #06152b;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    letter-spacing: -0.052em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.solutions-mockup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem;
}

.solutions-page-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.solutions-page-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(7,27,53,0.14);
}

.solutions-card-image {
    height: 225px;
    overflow: hidden;
    background: #06152b;
}

.solutions-card-image .optimized-picture,
.solutions-card-image img {
    width: 100%;
    height: 100%;
}

.solutions-card-image img {
    object-fit: cover;
    transition: transform 0.45s ease;
}

.solutions-page-card:hover .solutions-card-image img {
    transform: scale(1.08);
}

.solutions-card-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: -32px 0 0 1.35rem;
    position: relative;
    z-index: 2;
    border: 3px solid white;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 12px 28px rgba(19,151,213,0.28);
}

.solutions-card-icon i {
    font-size: 1.55rem;
}

.solutions-card-body {
    padding: 1rem 1.35rem 1.25rem;
}

.solutions-card-body h3 {
    color: #06152b;
    font-size: 1.35rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin-bottom: 0.6rem;
}

.solutions-card-body p {
    color: #4f5a70;
    font-size: 0.93rem;
    line-height: 1.56;
    margin-bottom: 1rem;
}

.solutions-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.32rem;
}

.solutions-card-body li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #26324a;
    font-size: 0.86rem;
}

.solutions-card-body li i {
    color: var(--logo-blue);
    font-size: 0.88rem;
}

.solutions-card-body a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--logo-blue);
    font-size: 0.9rem;
    font-weight: 850;
}

.solutions-custom-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.45rem;
    padding: 1.4rem 1.65rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.solutions-custom-cta .cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.solutions-custom-cta .cta-icon i {
    font-size: 1.8rem;
}

.solutions-custom-cta h3 {
    color: white;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.solutions-custom-cta p {
    color: rgba(255,255,255,0.74);
    margin: 0;
    font-size: 0.94rem;
}

.solutions-custom-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991px) {
    .solutions-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

    .solutions-mockup-grid {
        grid-template-columns: 1fr;
    }

    .solutions-custom-cta {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .solutions-custom-cta .cta-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .solutions-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .solutions-card-image {
        height: 180px;
    }

    .solutions-custom-cta .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* End Solutions Page Mockup Layout */


/* =========================================================
   Products Page Mockup Layout
   ========================================================= */

.products-mockup-hero {
    position: relative;
    min-height: 360px;
    padding: 8.5rem 0 4rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.products-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        url('/images/solutions/enterprise-network.jpg') right center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/solutions/enterprise-network.webp') type('image/webp'))) {
    .products-hero-bg {
        background:
            image-set(
                url('/images/solutions/enterprise-network.webp') type('image/webp'),
                url('/images/solutions/enterprise-network.jpg') type('image/jpeg')
            ) right center / cover no-repeat;
    }
}

.products-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5,8,23,0.98) 0%, rgba(5,8,23,0.75) 45%, rgba(5,8,23,0.2) 100%),
        radial-gradient(circle at 76% 35%, rgba(19,151,213,0.24), transparent 34%);
}

.products-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.products-hero-copy {
    max-width: 660px;
}

.products-hero-copy span,
.products-section-heading span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.products-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.products-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 560px;
}

.products-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.5rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
}

.products-breadcrumb a,
.products-breadcrumb span {
    color: rgba(255,255,255,0.82);
}

.products-breadcrumb span {
    color: var(--logo-light-blue);
}

.products-mockup-section {
    padding: 3.6rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.products-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.2rem;
}

.products-section-heading h2 {
    color: #06152b;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    letter-spacing: -0.052em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.products-mockup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.35rem;
}

.products-page-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.products-page-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(7,27,53,0.14);
}

.products-card-image {
    height: 175px;
    overflow: hidden;
    background: #06152b;
}

.products-card-image .optimized-picture,
.products-card-image img {
    width: 100%;
    height: 100%;
}

.products-card-image img {
    object-fit: cover;
    transition: transform 0.45s ease;
}

.products-page-card:hover .products-card-image img {
    transform: scale(1.08);
}

.products-card-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: -29px 0 0 1.2rem;
    position: relative;
    z-index: 2;
    border: 3px solid white;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 12px 28px rgba(19,151,213,0.28);
}

.products-card-icon i {
    font-size: 1.42rem;
}

.products-card-body {
    padding: 1rem 1.2rem 1.25rem;
}

.products-card-body h3 {
    color: #06152b;
    font-size: 1.15rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin-bottom: 0.6rem;
}

.products-card-body p {
    color: #4f5a70;
    font-size: 0.9rem;
    line-height: 1.56;
    margin-bottom: 1rem;
    min-height: 78px;
}

.products-card-body a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--logo-blue);
    font-size: 0.9rem;
    font-weight: 850;
}

.products-brand-strip {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.7rem;
    padding: 1.45rem 1.65rem;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.06);
}

.brand-strip-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.brand-strip-intro i {
    color: var(--logo-blue);
    font-size: 2.6rem;
}

.brand-strip-intro h3 {
    color: #06152b;
    font-size: 1.03rem;
    margin: 0 0 0.25rem;
}

.brand-strip-intro p {
    color: #4f5a70;
    margin: 0;
    font-size: 0.9rem;
}

.brand-strip-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.35rem;
}

.brand-strip-logos span {
    color: #1d2840;
    font-weight: 900;
    font-size: 1rem;
}

.products-brand-strip a {
    color: var(--logo-blue);
    font-weight: 850;
    white-space: nowrap;
}

.products-custom-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.35rem;
    padding: 1.4rem 1.65rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.products-custom-cta .cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.products-custom-cta .cta-icon i {
    font-size: 1.8rem;
}

.products-custom-cta h3 {
    color: white;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.products-custom-cta p {
    color: rgba(255,255,255,0.74);
    margin: 0;
    font-size: 0.94rem;
}

.products-custom-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 1199px) {
    .products-mockup-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-brand-strip {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .brand-strip-intro {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .products-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

    .products-custom-cta {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .products-custom-cta .cta-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .products-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .products-mockup-grid {
        grid-template-columns: 1fr;
    }

    .products-card-image {
        height: 175px;
    }

    .products-card-body p {
        min-height: auto;
    }

    .brand-strip-intro {
        grid-template-columns: 1fr;
    }

    .products-custom-cta .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* End Products Page Mockup Layout */


/* =========================================================
   About Page Mockup Layout
   ========================================================= */

.about-mockup-hero {
    position: relative;
    min-height: 390px;
    padding: 8.5rem 0 4.5rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/images/solutions/smart-office.jpg') right center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/solutions/smart-office.webp') type('image/webp'))) {
    .about-hero-bg {
        background:
            image-set(
                url('/images/solutions/smart-office.webp') type('image/webp'),
                url('/images/solutions/smart-office.jpg') type('image/jpeg')
            ) right center / cover no-repeat;
    }
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5,8,23,0.98) 0%, rgba(5,8,23,0.74) 48%, rgba(5,8,23,0.18) 100%),
        radial-gradient(circle at 20% 30%, rgba(19,151,213,0.28), transparent 34%);
}

.about-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.about-hero-copy {
    max-width: 720px;
}

.about-hero-copy span,
.about-story-panel span,
.about-values-wrap > span,
.about-team-copy span,
.about-office-copy span,
.about-partners-strip > span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.about-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.about-hero-copy h1 strong {
    color: var(--logo-blue);
}

.about-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 590px;
}

.about-mockup-section {
    padding: 3.5rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3rem;
    align-items: start;
}

.about-story-panel h2,
.about-team-copy h2,
.about-office-copy h2,
.about-partners-strip h2 {
    color: #06152b;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.048em;
    margin-bottom: 1rem;
}

.about-story-panel p,
.about-team-copy p,
.about-office-copy p {
    color: #34405a;
    font-size: 0.98rem;
    line-height: 1.68;
}

.btn-outline-blue {
    color: var(--logo-blue);
    border: 1px solid var(--logo-blue);
    border-radius: 999px;
    padding: 0.78rem 1.25rem;
    font-weight: 850;
    background: white;
}

.btn-outline-blue:hover {
    color: white;
    background: var(--logo-blue);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

.about-value-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 1.1rem;
    padding: 1.35rem;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 16px 45px rgba(7,27,53,0.06);
}

.about-value-card div {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.about-value-card i {
    font-size: 1.45rem;
}

.about-value-card h3 {
    color: #06152b;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

.about-value-card p {
    color: #4f5a70;
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.about-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 2rem 0 3rem;
    padding: 1.35rem 1.6rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.about-stats-strip div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 0 1rem;
    border-right: 1px solid rgba(255,255,255,0.18);
}

.about-stats-strip div:last-child {
    border-right: 0;
}

.about-stats-strip i {
    grid-row: span 2;
    color: var(--logo-blue);
    font-size: 2.4rem;
}

.about-stats-strip strong {
    color: white;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.about-stats-strip span {
    color: rgba(255,255,255,0.78);
    font-size: 0.88rem;
}

.about-team-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr 0.9fr;
    gap: 2rem;
    align-items: center;
}

.about-team-copy ul {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0;
    display: grid;
    gap: 0.5rem;
}

.about-team-copy li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #26324a;
    font-size: 0.93rem;
}

.about-team-copy li i {
    color: var(--logo-blue);
}

.about-team-image {
    height: 320px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(7,27,53,0.12);
}

.about-team-image .optimized-picture,
.about-team-image img {
    width: 100%;
    height: 100%;
}

.about-team-image img {
    object-fit: cover;
}

.about-address {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    margin: 1rem 0 1.3rem;
}

.about-address i {
    color: var(--logo-blue);
    font-size: 1.35rem;
    margin-top: 0.2rem;
}

.about-address p {
    margin: 0;
}

.about-partners-strip {
    margin-top: 3rem;
    padding: 1.7rem;
    text-align: center;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.06);
}

.about-partners-strip h2 {
    margin-bottom: 1.2rem;
}

.about-partner-logos {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.about-partner-logos div {
    min-height: 54px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f6f8fb;
    color: #1d2840;
    font-weight: 900;
    border: 1px solid rgba(7,27,53,0.06);
}

.about-partners-strip a {
    color: var(--logo-blue);
    font-weight: 850;
}

@media (max-width: 1199px) {
    .about-team-grid {
        grid-template-columns: 1fr;
    }

    .about-team-image {
        order: -1;
    }

    .about-partner-logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .about-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .about-stats-strip div {
        border-right: 0;
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .about-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .about-values-grid,
    .about-stats-strip,
    .about-partner-logos {
        grid-template-columns: 1fr;
    }

    .about-value-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .about-team-image {
        height: 230px;
    }
}

/* End About Page Mockup Layout */


/* =========================================================
   Contact Page Mockup Layout
   ========================================================= */

.contact-mockup-hero {
    position: relative;
    min-height: 370px;
    padding: 8.5rem 0 4rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
        url('/images/backgrounds/network-lines.png') center center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/backgrounds/network-lines.webp') type('image/webp'))) {
    .contact-hero-bg {
        background:
            linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
            image-set(
                url('/images/backgrounds/network-lines.webp') type('image/webp'),
                url('/images/backgrounds/network-lines.png') type('image/png')
            ) center center / cover no-repeat;
    }
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 76% 38%, rgba(19,151,213,0.28), transparent 36%),
        linear-gradient(90deg, rgba(5,8,23,0.98) 0%, rgba(5,8,23,0.68) 50%, rgba(5,8,23,0.18) 100%);
}

.contact-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero-copy {
    max-width: 720px;
}

.contact-hero-copy span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.contact-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.contact-hero-copy h1 strong {
    color: var(--logo-blue);
}

.contact-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 600px;
}

.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.8rem;
}

.contact-mockup-section {
    padding: 2rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.95fr;
    gap: 2rem;
    align-items: stretch;
}

.contact-info-card,
.contact-form-card,
.visit-office-card,
.contact-map-card {
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
}

.contact-info-card {
    padding: 1.75rem;
}

.contact-info-card h2,
.contact-form-card h2,
.visit-office-card h3 {
    color: #06152b;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
    margin-bottom: 0.5rem;
}

.contact-info-card > p,
.contact-form-card > p,
.visit-office-card p {
    color: #34405a;
    font-size: 0.95rem;
}

.contact-info-list {
    margin-top: 1.4rem;
    display: grid;
    gap: 1rem;
}

.contact-info-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(7,27,53,0.08);
}

.contact-info-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.contact-info-item > div {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.contact-info-item i {
    font-size: 1.35rem;
}

.contact-info-item h3 {
    color: #06152b;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.contact-info-item p {
    color: #26324a;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}

.contact-form-card {
    padding: 1.75rem;
}

.contact-form-card label {
    color: #06152b;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.contact-form-card label span {
    color: #e63946;
}

.contact-input {
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid rgba(7,27,53,0.14);
    font-size: 0.95rem;
    box-shadow: none;
}

textarea.contact-input {
    min-height: 110px;
}

.contact-input:focus {
    border-color: var(--logo-blue);
    box-shadow: 0 0 0 0.18rem rgba(19,151,213,0.12);
}

.contact-privacy {
    color: #5d6679;
    font-size: 0.86rem;
    margin: 0;
}

.contact-privacy i {
    color: var(--logo-blue);
    margin-right: 0.4rem;
}

.contact-map-grid {
    display: grid;
    grid-template-columns: 0.9fr 2fr;
    gap: 0;
    margin-top: 1.6rem;
}

.visit-office-card {
    padding: 1.25rem;
    border-radius: 14px 0 0 14px;
    z-index: 2;
}

.visit-office-image {
    height: 118px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.visit-office-image .optimized-picture,
.visit-office-image img {
    width: 100%;
    height: 100%;
}

.visit-office-image img {
    object-fit: cover;
}

.contact-map-card {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border-radius: 0 14px 14px 0;
    background: #eaf2f8;
}

.mock-map-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(30deg, rgba(240,246,251,0.92), rgba(224,237,247,0.92)),
        repeating-linear-gradient(38deg, transparent 0 20px, rgba(19,151,213,0.09) 21px 22px),
        repeating-linear-gradient(-42deg, transparent 0 34px, rgba(7,27,53,0.07) 35px 36px);
}

.mock-map-bg::before {
    content: "Gros Islet";
    position: absolute;
    left: 16%;
    top: 26%;
    color: #1f8f4a;
    font-size: 0.85rem;
    font-weight: 800;
}

.mock-map-bg::after {
    content: "Gros Islet Beach";
    position: absolute;
    right: 9%;
    top: 12%;
    color: #1f8f4a;
    font-size: 0.85rem;
    font-weight: 800;
}

.map-location-pin {
    position: absolute;
    left: 33%;
    top: 34%;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 16px 35px rgba(19,151,213,0.28);
}

.map-location-pin i {
    font-size: 1.6rem;
}

.map-location-card {
    position: absolute;
    left: 42%;
    top: 28%;
    width: 260px;
    padding: 1.2rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 16px 40px rgba(7,27,53,0.14);
}

.map-location-card h3 {
    color: #06152b;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.map-location-card p {
    color: #4f5a70;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.contact-assistance-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.45rem;
    padding: 1.4rem 1.65rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.contact-assistance-cta .cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.contact-assistance-cta .cta-icon i {
    font-size: 1.8rem;
}

.contact-assistance-cta h3 {
    color: white;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.contact-assistance-cta p {
    color: rgba(255,255,255,0.74);
    margin: 0;
    font-size: 0.94rem;
}

.contact-assistance-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991px) {
    .contact-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

    .contact-main-grid,
    .contact-map-grid {
        grid-template-columns: 1fr;
    }

    .visit-office-card,
    .contact-map-card {
        border-radius: 14px;
    }

    .contact-assistance-cta {
        grid-template-columns: 1fr;
    }

    .contact-assistance-cta .cta-actions {
        flex-wrap: wrap;
    }

    .map-location-card {
        left: 36%;
        top: 30%;
    }
}

@media (max-width: 576px) {
    .contact-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 1.25rem;
    }

    .contact-info-item {
        grid-template-columns: 1fr;
    }

    .contact-map-card {
        min-height: 260px;
    }

    .map-location-pin {
        left: 15%;
        top: 25%;
    }

    .map-location-card {
        left: 25%;
        right: 1rem;
        top: 36%;
        width: auto;
    }

    .contact-assistance-cta .cta-actions .btn,
    .contact-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* End Contact Page Mockup Layout */


/* =========================================================
   Digital Service Voucher Page Mockup Layout
   ========================================================= */

.voucher-mockup-hero {
    position: relative;
    min-height: 430px;
    padding: 8.5rem 0 4.5rem;
    color: white;
    overflow: hidden;
    background: #050817;
    isolation: isolate;
}

.voucher-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
        url('/images/backgrounds/network-lines.png') center center / cover no-repeat;
    transform: scale(1.02);
}

@supports (background-image: image-set(url('/images/backgrounds/network-lines.webp') type('image/webp'))) {
    .voucher-hero-bg {
        background:
            linear-gradient(rgba(5,8,23,0.1), rgba(5,8,23,0.1)),
            image-set(
                url('/images/backgrounds/network-lines.webp') type('image/webp'),
                url('/images/backgrounds/network-lines.png') type('image/png')
            ) center center / cover no-repeat;
    }
}

.voucher-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 73% 40%, rgba(19,151,213,0.34), transparent 34%),
        linear-gradient(90deg, rgba(5,8,23,0.98) 0%, rgba(5,8,23,0.72) 50%, rgba(5,8,23,0.24) 100%);
}

.voucher-mockup-hero .container {
    position: relative;
    z-index: 2;
}

.voucher-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
}

.voucher-hero-copy {
    max-width: 690px;
}

.voucher-hero-copy span,
.voucher-section-heading span {
    display: inline-flex;
    color: var(--logo-blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}

.voucher-hero-copy h1 {
    color: white;
    font-size: clamp(2.45rem, 5vw, 4.15rem);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.voucher-hero-copy h1 strong {
    color: var(--logo-blue);
}

.voucher-hero-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
    max-width: 600px;
}

.voucher-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.8rem;
}

.voucher-ticket-card {
    position: relative;
    min-height: 260px;
    border-radius: 24px;
    border: 1px solid rgba(85,183,232,0.48);
    background:
        linear-gradient(135deg, rgba(85,183,232,0.45), rgba(19,151,213,0.2)),
        linear-gradient(135deg, rgba(5,8,23,0.82), rgba(17,22,83,0.78));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12) inset,
        0 28px 90px rgba(19,151,213,0.26);
    overflow: hidden;
}

.voucher-ticket-card::before,
.voucher-ticket-card::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #050817;
    transform: translateY(-50%);
    box-shadow: 0 0 0 1px rgba(85,183,232,0.38);
}

.voucher-ticket-card::before {
    left: -24px;
}

.voucher-ticket-card::after {
    right: -24px;
}

.voucher-ticket-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.28), transparent 28%),
        linear-gradient(90deg, rgba(85,183,232,0.24), transparent 45%);
}

.voucher-ticket-content {
    position: relative;
    z-index: 2;
    padding: 2.2rem;
}

.voucher-ticket-content span {
    color: #ff3c52;
    font-size: 2rem;
    font-weight: 950;
    text-transform: uppercase;
}

.voucher-ticket-content h2 {
    color: #031738;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin: 0.3rem 0 1rem;
    text-shadow: 0 1px 0 rgba(255,255,255,0.38);
}

.voucher-ticket-content p {
    color: rgba(255,255,255,0.88);
    max-width: 300px;
    margin-bottom: 1.4rem;
}

.voucher-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.16);
}

.voucher-ticket-badge i {
    color: var(--logo-light-blue);
}

.voucher-mockup-section {
    padding: 3rem 0 4.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 32%),
        #f7fbff;
}

.voucher-section-heading {
    max-width: 820px;
    margin: 0 auto 2rem;
    text-align: center;
}

.voucher-section-heading.compact {
    margin-bottom: 2.4rem;
}

.voucher-section-heading h2 {
    color: #06152b;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    letter-spacing: -0.052em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.voucher-section-heading p {
    color: #34405a;
    font-size: 1rem;
}

.voucher-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.35rem;
    margin-bottom: 2rem;
}

.voucher-benefit-card {
    padding: 2rem 1.55rem;
    border-radius: 14px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
}

.voucher-benefit-card div {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    margin-bottom: 1.5rem;
}

.voucher-benefit-card i {
    font-size: 1.65rem;
}

.voucher-benefit-card h3 {
    color: #06152b;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.voucher-benefit-card p {
    color: #4f5a70;
    font-size: 0.93rem;
    line-height: 1.62;
    margin: 0;
}

.voucher-steps-panel {
    margin-top: 2rem;
    padding: 2.5rem 1.5rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(19,151,213,0.08), transparent 30%),
        rgba(255,255,255,0.52);
}

.voucher-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    text-align: center;
}

.voucher-step {
    position: relative;
}

.voucher-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 46px;
    right: -34px;
    width: 58px;
    height: 3px;
    background: radial-gradient(circle, var(--logo-blue) 2px, transparent 3px) left center / 12px 3px repeat-x;
    opacity: 0.45;
}

.voucher-step-icon {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    box-shadow: 0 18px 42px rgba(19,151,213,0.22);
}

.voucher-step-icon i {
    font-size: 2.1rem;
}

.voucher-step > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: 0 auto 0.75rem;
    color: white;
    font-size: 0.82rem;
    font-weight: 900;
    border-radius: 999px;
    background: var(--logo-blue);
}

.voucher-step h3 {
    color: #06152b;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.voucher-step p {
    color: #4f5a70;
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.voucher-assistance-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1.45rem;
    padding: 1.4rem 1.65rem;
    border-radius: 14px;
    color: white;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.28), transparent 34%),
        linear-gradient(135deg, #050817, #071b35);
    box-shadow: 0 18px 55px rgba(7,27,53,0.14);
}

.voucher-assistance-cta .cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
}

.voucher-assistance-cta .cta-icon i {
    font-size: 1.8rem;
}

.voucher-assistance-cta h3 {
    color: white;
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
}

.voucher-assistance-cta p {
    color: rgba(255,255,255,0.74);
    margin: 0;
    font-size: 0.94rem;
}

.voucher-assistance-cta .cta-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991px) {
    .voucher-mockup-hero {
        padding: 8rem 0 3.5rem;
    }

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

    .voucher-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voucher-steps-grid {
        grid-template-columns: 1fr;
    }

    .voucher-step:not(:last-child)::after {
        display: none;
    }

    .voucher-assistance-cta {
        grid-template-columns: 1fr;
    }

    .voucher-assistance-cta .cta-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .voucher-mockup-hero {
        min-height: auto;
        padding: 7.5rem 0 3rem;
    }

    .voucher-benefit-grid {
        grid-template-columns: 1fr;
    }

    .voucher-ticket-content {
        padding: 1.5rem;
    }

    .voucher-assistance-cta .cta-actions .btn,
    .voucher-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* End Digital Service Voucher Page Mockup Layout */


/* =========================================================
   Digital Voucher Functional Form Restore
   ========================================================= */

.voucher-functional-grid {
    display: grid;
    grid-template-columns: 1.7fr 0.9fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.voucher-form-card,
.voucher-info-card {
    border-radius: 16px;
    background: white;
    border: 1px solid rgba(7,27,53,0.07);
    box-shadow: 0 18px 50px rgba(7,27,53,0.075);
}

.voucher-form-card {
    padding: 1.75rem;
}

.voucher-info-card {
    padding: 1.5rem;
}

.voucher-form-card label {
    color: #06152b;
    font-size: 0.86rem;
    font-weight: 850;
}

.voucher-form-card label span {
    color: #e63946;
}

.voucher-input {
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid rgba(7,27,53,0.14);
    font-size: 0.95rem;
}

.voucher-input:focus {
    border-color: var(--logo-blue);
    box-shadow: 0 0 0 0.18rem rgba(19,151,213,0.12);
}

.voucher-help {
    display: block;
    margin-top: 0.35rem;
    color: #5d6679;
    font-size: 0.82rem;
}

.voucher-conditional-panel {
    display: none;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(19,151,213,0.055);
    border: 1px solid rgba(19,151,213,0.12);
}

.voucher-radio-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.voucher-radio-row label {
    cursor: pointer;
}

.voucher-radio-row input {
    display: none;
}

.voucher-radio-row span {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: white;
    border: 1px solid rgba(7,27,53,0.1);
    color: #06152b;
    font-weight: 850;
}

.voucher-radio-row input:checked + span {
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    border-color: transparent;
}

.voucher-address-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

.voucher-kyc-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(7,27,53,0.035);
    border: 1px solid rgba(7,27,53,0.08);
}

.voucher-kyc-check input {
    margin-top: 0.25rem;
}

.voucher-info-card h3 {
    color: #06152b;
    font-size: 1.3rem;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

.voucher-info-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.voucher-info-step span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    font-weight: 900;
}

.voucher-info-step p {
    margin: 0;
    color: #34405a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.voucher-warning {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding: 0.95rem;
    border-radius: 12px;
    color: #6f5620;
    background: #fff8e6;
    border-left: 4px solid var(--gold);
}

.voucher-warning p {
    margin: 0;
    color: #6f5620;
    font-size: 0.86rem;
}

.selected-network-box {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: #06152b;
    background: rgba(85,183,232,0.12);
    border: 1px solid rgba(19,151,213,0.2);
}

.premium-network-modal {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(7,27,53,0.25);
}

.premium-network-modal .modal-header {
    color: white;
    background: linear-gradient(135deg, #050817, #111653);
    border-bottom: 0;
}

.network-options {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.network-option-button {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(19,151,213,0.18);
    color: #06152b;
    background: white;
    font-weight: 850;
    text-align: left;
}

.network-option-button:hover {
    border-color: rgba(19,151,213,0.42);
    box-shadow: 0 14px 35px rgba(7,27,53,0.12);
}

.network-warning {
    padding: 1rem;
    border-radius: 12px;
    color: #6f5620;
    background: #fff8e6;
    border-left: 4px solid var(--gold);
}

@media (max-width: 991px) {
    .voucher-functional-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .voucher-form-card,
    .voucher-info-card {
        padding: 1.2rem;
    }

    .voucher-radio-row,
    .voucher-address-row {
        grid-template-columns: 1fr;
    }

    .voucher-address-row .btn {
        width: 100%;
    }
}

/* End Digital Voucher Functional Form Restore */

/* =========================================================
   Standard AOTech Footer - All Pages
   ========================================================= */

.aotech-footer {
    position: relative;
    z-index: 3;
    color: white;
    background:
        radial-gradient(circle at 12% 0%, rgba(19,151,213,0.18), transparent 28%),
        linear-gradient(135deg, #050817 0%, #071b35 55%, #06152b 100%);
    border-top: 1px solid rgba(85,183,232,0.16);
    padding: 2.25rem 0 0;
}

.aotech-footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.8fr 1fr 1.15fr 1fr;
    gap: 2.2rem;
    align-items: start;
}

.footer-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer-logo {
    width: 58px;
    height: auto;
    object-fit: contain;
}

.footer-logo-wrap span {
    display: grid;
    line-height: 1.03;
}

.footer-logo-wrap strong {
    color: white;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.footer-logo-wrap small {
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.36em;
    text-transform: uppercase;
}

.footer-brand-block p,
.footer-newsletter-block p,
.footer-contact-item p {
    color: rgba(255,255,255,0.76);
    font-size: 0.92rem;
    line-height: 1.58;
    margin: 0;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.footer-socials a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: white;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-socials a:hover {
    color: white;
    transform: translateY(-3px);
    border-color: var(--logo-light-blue);
    background: rgba(19,151,213,0.2);
}

.aotech-footer h3 {
    color: white;
    font-size: 1.05rem;
    font-weight: 850;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.footer-link-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
}

.footer-link-block a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-link-block a:hover {
    color: var(--logo-light-blue);
    transform: translateX(3px);
}

.footer-link-block i {
    font-size: 0.75rem;
    color: rgba(85,183,232,0.9);
}

.footer-contact-block {
    display: grid;
    gap: 0.75rem;
}

.footer-contact-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.65rem;
    align-items: start;
}

.footer-contact-item i {
    color: var(--logo-blue);
    font-size: 1rem;
    margin-top: 0.2rem;
}

.footer-newsletter-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.footer-newsletter-form input {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.9rem;
    color: white;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(5,8,23,0.56);
    outline: none;
}

.footer-newsletter-form input::placeholder {
    color: rgba(255,255,255,0.52);
}

.footer-newsletter-form input:focus {
    border-color: var(--logo-blue);
    box-shadow: 0 0 0 0.18rem rgba(19,151,213,0.14);
}

.footer-newsletter-form button {
    min-height: 46px;
    border: 0;
    border-radius: 5px;
    color: white;
    font-weight: 850;
    background: linear-gradient(135deg, var(--logo-blue), #1776e9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(19,151,213,0.22);
}

.aotech-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.aotech-footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,0.66);
    font-size: 0.86rem;
}

.aotech-footer-bottom div {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.aotech-footer-bottom a,
.aotech-footer-bottom span {
    color: rgba(255,255,255,0.68);
    font-size: 0.86rem;
    text-decoration: none;
}

.aotech-footer-bottom a:hover {
    color: var(--logo-light-blue);
}

@media (max-width: 1199px) {
    .aotech-footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .aotech-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .aotech-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-logo-wrap strong {
        font-size: 1.25rem;
    }
}

/* End Standard AOTech Footer */


/* =========================================================
   Voucher Pricing Preview
   ========================================================= */

.voucher-price-preview {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background:
        radial-gradient(circle at 90% 10%, rgba(19,151,213,0.10), transparent 34%),
        rgba(7,27,53,0.035);
    border: 1px solid rgba(19,151,213,0.14);
}

.voucher-price-preview div {
    display: grid;
    gap: 0.25rem;
}

.voucher-price-preview strong {
    color: #06152b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.voucher-price-preview span {
    color: #34405a;
    font-size: 0.95rem;
    font-weight: 700;
}

#VoucherFinalAmount {
    color: var(--logo-blue);
    font-size: 1.2rem;
    font-weight: 950;
}

@media (max-width: 576px) {
    .voucher-price-preview {
        grid-template-columns: 1fr;
    }
}

/* End Voucher Pricing Preview */


/* =========================================================
   Voucher Gift Privacy / Crypto Disclosure Control
   ========================================================= */

#GiftAddressPanel .voucher-help {
    color: #5d6679;
}

body:not(.gift-destination-valid) .selected-network-box {
    display: none !important;
}

body.gift-destination-valid .selected-network-box {
    display: block;
}

body:not(.gift-destination-valid) #networkOptions .network-option-button {
    display: none;
}

/* End Voucher Gift Privacy / Crypto Disclosure Control */


/* =========================================================
   Voucher Modal Freeze Protection
   ========================================================= */

.premium-network-modal {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

#DetectNetworkButton:disabled {
    opacity: 0.75;
    cursor: wait;
}

/* End Voucher Modal Freeze Protection */