/* OSP unified site theme */
:root {
    --primary: #0757b8;
    --primary-700: #063f89;
    --cyan: #13b7d8;
    --orange: #f06b3b;
    --ink: #102033;
    --muted: #64748b;
    --line: #dbe5ef;
    --soft: #f4f8fb;
    --soft-2: #eaf3f9;
    --white: #ffffff;
    --shadow-sm: 0 8px 22px rgba(16, 32, 51, 0.08);
    --shadow-md: 0 18px 40px rgba(16, 32, 51, 0.12);
    --shadow-lg: 0 28px 60px rgba(7, 87, 184, 0.2);
    --radius: 8px;
    --section: clamp(56px, 8vw, 92px);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display: "Sora", var(--font);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(19, 183, 216, 0.1), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, #f8fbfd 46%, #ffffff 100%);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(19, 183, 216, 0.07) 34% 35%, transparent 35% 100%),
        linear-gradient(65deg, transparent 0 64%, rgba(240, 107, 59, 0.06) 64% 65%, transparent 65% 100%);
    background-size: 520px 520px, 620px 620px;
    animation: siteGridDrift 22s linear infinite;
}

img {
    max-width: 100%;
}

a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

a:hover {
    color: var(--primary-700);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.13;
}

h1 {
    max-width: 820px;
    margin: 0 0 1.15rem;
    font-size: clamp(2.45rem, 5vw, 5rem);
}

h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 3.2vw, 3.15rem);
}

h3 {
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

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

.container {
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    padding-right: 0;
    padding-left: 0;
}

.row {
    row-gap: 1.5rem;
}

main {
    overflow: hidden;
}

/* Navigation */
.navbar-custom {
    border-bottom: 1px solid rgba(219, 229, 239, 0.86);
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 30px rgba(16, 32, 51, 0.06);
    backdrop-filter: blur(18px);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink) !important;
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 800;
}

.navbar-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(7, 87, 184, 0.12));
    animation: logoSignal 4s ease-in-out infinite;
}

.navbar-nav {
    align-items: center;
    gap: 0.15rem;
}

.nav-link {
    position: relative;
    border-radius: var(--radius);
    color: #475569 !important;
    font-size: 0.95rem;
    font-weight: 750;
    padding: 0.65rem 0.85rem !important;
}

.nav-link:hover,
.nav-link.active,
.dropdown-toggle.show {
    color: var(--primary) !important;
    background: rgba(7, 87, 184, 0.07);
}

.dropdown-menu {
    min-width: 240px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 0.55rem !important;
    box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
    border-radius: 7px;
    color: #475569 !important;
    font-weight: 700;
    padding: 0.75rem 0.85rem !important;
}

.dropdown-item:hover {
    color: var(--primary) !important;
    background: rgba(7, 87, 184, 0.08) !important;
}

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none !important;
}

/* Buttons */
.btn {
    min-height: 44px;
    border-radius: var(--radius);
    font-weight: 800;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary-osp,
.btn-primary,
.btn-submit {
    border: 0 !important;
    color: var(--white) !important;
    background: linear-gradient(135deg, var(--primary), var(--cyan)) !important;
    box-shadow: 0 14px 28px rgba(7, 87, 184, 0.22);
    padding: 0.78rem 1.15rem;
    position: relative;
    overflow: hidden;
}

.btn-primary-osp::after,
.btn-primary::after,
.btn-submit::after,
.btn-light::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -65%;
    width: 46%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
    animation: buttonSweep 3.8s ease-in-out infinite;
    pointer-events: none;
}

.btn-primary-osp:hover,
.btn-primary:hover,
.btn-submit:hover {
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(7, 87, 184, 0.28);
}

.btn-outline-osp {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.72rem 1.1rem;
}

.btn-outline-osp:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white) !important;
}

.btn-light {
    border: 0;
    color: var(--primary) !important;
    background: var(--white) !important;
    box-shadow: 0 16px 32px rgba(16, 32, 51, 0.18);
    padding: 0.8rem 1.25rem;
    position: relative;
    overflow: hidden;
}

/* Page rhythm */
section:not(.hero):not(.cta),
section[style*="padding: 80px"] {
    padding: var(--section) 0 !important;
}

section[style*="background-color: #F5F7FA"],
section[style*="linear-gradient(135deg, #F5F7FA"],
.about {
    background: linear-gradient(180deg, var(--soft) 0%, #ffffff 100%) !important;
}

section[style*="background-color: white"] {
    background: var(--white) !important;
}

section .container > div[style*="text-align: center"],
section .container > h2[style*="text-align: center"] {
    max-width: 760px;
    margin-right: auto !important;
    margin-left: auto !important;
}

section .container > div[style*="text-align: center"] p {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Hero */
.hero,
.hero[style] {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: clamp(76px, 10vw, 132px) 0 !important;
    color: var(--white);
    background:
        linear-gradient(110deg, rgba(5, 35, 71, 0.94), rgba(7, 87, 184, 0.9) 54%, rgba(19, 183, 216, 0.82)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 78px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 78px) !important;
    isolation: isolate;
}

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

.hero::before {
    content: "";
    position: absolute;
    inset: auto -8% -34% auto;
    width: min(56vw, 620px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.17), transparent 62%);
    animation: haloBreathe 7s ease-in-out infinite;
    z-index: -1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,0.12) 48% 49%, transparent 49% 100%),
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16), transparent 13rem);
    pointer-events: none;
    animation: heroScan 10s linear infinite;
    z-index: -1;
}

.hero h1 {
    animation: heroCopyIn 850ms var(--ease-out) both;
}

.hero p {
    animation: heroCopyIn 850ms var(--ease-out) 120ms both;
}

.hero .btn {
    animation: heroCopyIn 850ms var(--ease-out) 220ms both;
}

.fiber-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fiber-strand {
    position: absolute;
    left: -12%;
    width: 124%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), rgba(19,183,216,.78), rgba(255,255,255,.55), transparent);
    box-shadow: 0 0 18px rgba(19, 183, 216, .45);
    transform: rotate(var(--angle));
    opacity: .55;
    animation: strandFlow var(--speed) linear infinite;
}

.fiber-strand:nth-child(1) { top: 18%; --angle: -7deg; --speed: 8s; }
.fiber-strand:nth-child(2) { top: 38%; --angle: 5deg; --speed: 10s; animation-delay: -2s; }
.fiber-strand:nth-child(3) { top: 58%; --angle: -4deg; --speed: 7s; animation-delay: -4s; }
.fiber-strand:nth-child(4) { top: 76%; --angle: 8deg; --speed: 11s; animation-delay: -1s; }

.fiber-node {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 8px rgba(19, 183, 216, 0.12), 0 0 22px rgba(255,255,255,.9);
    animation: nodePulse 2.8s ease-in-out infinite;
}

.fiber-node:nth-child(5) { left: 16%; top: 27%; }
.fiber-node:nth-child(6) { left: 42%; top: 62%; animation-delay: .55s; }
.fiber-node:nth-child(7) { right: 18%; top: 34%; animation-delay: 1.1s; }
.fiber-node:nth-child(8) { right: 30%; bottom: 16%; animation-delay: 1.65s; }

.hero h1,
.hero h1[style] {
    color: var(--white) !important;
}

.hero p,
.hero p[style] {
    max-width: 680px;
    margin-bottom: 1.65rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(1.05rem, 1.8vw, 1.28rem) !important;
}

.hero-image,
.about-image,
div[style*="overflow: hidden"][style*="box-shadow"] {
    position: relative;
    overflow: hidden !important;
    min-height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius) !important;
    background:
        linear-gradient(135deg, rgba(7, 87, 184, 0.12), rgba(19, 183, 216, 0.16)),
        repeating-linear-gradient(90deg, rgba(7,87,184,0.12) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(19,183,216,0.12) 0 1px, transparent 1px 28px);
    box-shadow: var(--shadow-lg) !important;
    transform-style: preserve-3d;
    animation: visualRise 950ms var(--ease-out) 160ms both, visualFloat 6s ease-in-out 1.15s infinite;
}

.hero-image img,
.about-image img,
div[style*="overflow: hidden"][style*="box-shadow"] img {
    width: 100%;
    height: 100% !important;
    min-height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}

.hero-image:hover img,
.about-image:hover img,
div[style*="overflow: hidden"][style*="box-shadow"]:hover img {
    filter: saturate(1.16) contrast(1.04);
    transform: scale(1.04);
}

.hero-image::after,
.about-image::after,
div[style*="overflow: hidden"][style*="box-shadow"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.24) 46%, transparent 56% 100%);
    transform: translateX(-115%);
    animation: glassSweep 5.5s ease-in-out infinite;
    pointer-events: none;
}

.image-fallback img {
    display: none !important;
}

.image-fallback::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(7, 87, 184, 0.18);
    border-radius: var(--radius);
}

.image-fallback::after {
    content: "OSP";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(7, 87, 184, 0.82);
    font-family: var(--display);
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 800;
}

/* Cards and repeated blocks */
.service-card,
.contact-info-card,
.contact-form,
.card-hover,
.accordion-item,
div[style*="border: 1px solid #E2E8F0"],
div[style*="background: white"][style*="border-radius"],
div[style*="background-color: white"][style*="border-radius"] {
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)) !important;
    box-shadow: 
        0 4px 6px -1px rgba(16, 32, 51, 0.08),
        0 2px 4px -2px rgba(16, 32, 51, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    backdrop-filter: blur(10px);
}

.service-card,
.card-hover,
.contact-info-card,
div[style*="border: 1px solid #E2E8F0"] {
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 320ms var(--ease-out);
}

.service-card::before,
.card-hover::before,
.contact-info-card::before,
div[style*="border: 1px solid #E2E8F0"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(7, 87, 184, 0.03) 0%, 
        rgba(19, 183, 216, 0.02) 50%,
        rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
    z-index: 0;
}

.service-card::after,
.card-hover::after,
.contact-info-card::after,
div[style*="border: 1px solid #E2E8F0"]::after {
    content: "";
    position: absolute;
    inset: auto -30% -60% -30%;
    height: 90%;
    background: radial-gradient(ellipse at 50% 0%, rgba(19, 183, 216, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
    z-index: 0;
}

.service-card:hover,
.card-hover:hover,
.contact-info-card:hover {
    border-color: rgba(7, 87, 184, 0.4) !important;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px -12px rgba(7, 87, 184, 0.25),
        0 8px 16px -8px rgba(19, 183, 216, 0.15),
        0 0 0 1px rgba(7, 87, 184, 0.1) inset;
}

.service-card:hover::before,
.card-hover:hover::before,
.contact-info-card:hover::before,
div[style*="border: 1px solid #E2E8F0"]:hover::before {
    opacity: 1;
}

.service-card:hover::after,
.card-hover:hover::after,
.contact-info-card:hover::after,
div[style*="border: 1px solid #E2E8F0"]:hover::after {
    opacity: 1;
}

.service-icon,
.contact-icon,
div[style*="width: 70px"][style*="height: 70px"],
div[style*="width: 60px"][style*="height: 60px"],
div[style*="width: 50px"][style*="height: 50px"] {
    border-radius: 14px !important;
    color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(7, 87, 184, 0.12), rgba(19, 183, 216, 0.18)) !important;
    box-shadow: 
        0 8px 16px -4px rgba(7, 87, 184, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: iconBreathe 4.2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.service-icon::before,
.contact-icon::before,
div[style*="width: 70px"][style*="height: 70px"]::before,
div[style*="width: 60px"][style*="height: 60px"]::before,
div[style*="width: 50px"][style*="height: 50px"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    border-radius: inherit;
}

.service-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    position: relative;
    z-index: 1;
}

.service-card > *,
.contact-info-card > *,
.card-hover > * {
    position: relative;
    z-index: 1;
}

.service-card h3,
.contact-info-card h3,
.card-hover h3,
.card-hover h4 {
    margin-bottom: 0.75rem !important;
    font-weight: 700;
}

ul[style*="list-style: none"] li {
    color: var(--muted) !important;
}

ul[style*="list-style: none"] i.fa-check {
    color: var(--cyan) !important;
}

/* Stats and pricing */
.stat,
div[style*="font-size: 2.5rem"][style*="font-weight: 700"],
div[style*="font-size: 3rem"][style*="font-weight: 700"] {
    letter-spacing: 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.stat,
div[style*="text-align: center"][style*="color: white"] {
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88)) !important;
    padding: 1.5rem;
    box-shadow: 
        0 4px 12px -4px rgba(7, 87, 184, 0.12),
        0 2px 6px -2px rgba(19, 183, 216, 0.08);
    transition: all 280ms var(--ease-out);
}

.stat:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 24px -8px rgba(7, 87, 184, 0.2),
        0 6px 12px -4px rgba(19, 183, 216, 0.12);
}

.stat-number,
div[style*="font-size: 2.5rem"][style*="font-weight: 700"],
div[style*="font-size: 3rem"][style*="font-weight: 700"] {
    color: var(--primary);
    text-shadow: 0 0 24px rgba(19, 183, 216, .25);
    font-weight: 800;
}

.stat-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* Breadcrumb */
nav[style*="background-color: #F5F7FA"] {
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: rgba(244, 248, 251, 0.9) !important;
}

nav ol {
    flex-wrap: wrap;
}

/* Contact */
.contact-section {
    padding: var(--section) 0;
    background: var(--white);
}

.contact-info-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.contact-info-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}

.contact-info-card p {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.contact-info-card small {
    color: var(--muted);
    font-size: 0.85rem;
}

.contact-form {
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-label {
    color: var(--ink);
    font-weight: 800;
}

.form-control {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.8rem 0.95rem;
    color: var(--ink);
    background: #fbfdff;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(7, 87, 184, 0.12);
}

textarea.form-control {
    min-height: 160px;
}

.btn-submit {
    width: 100%;
}

/* Accordion and tables */
.accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-active-bg: #eef7fb;
    --bs-accordion-active-color: var(--primary);
}

.accordion-item {
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 12px -4px rgba(16, 32, 51, 0.08),
        0 2px 6px -2px rgba(16, 32, 51, 0.04);
    transition: all 280ms var(--ease-out);
}

.accordion-item:hover {
    box-shadow: 
        0 8px 20px -6px rgba(7, 87, 184, 0.15),
        0 4px 10px -4px rgba(19, 183, 216, 0.1);
}

.accordion-button {
    color: var(--ink) !important;
    background: var(--white) !important;
    box-shadow: none !important;
    font-weight: 800;
    border-radius: 16px !important;
    padding: 1.25rem 1.5rem !important;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(7, 87, 184, 0.05), rgba(19, 183, 216, 0.08)) !important;
    color: var(--primary) !important;
}

.accordion-body {
    color: var(--muted);
    background: var(--soft) !important;
    padding: 1.5rem !important;
}

table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 
        0 4px 12px -4px rgba(16, 32, 51, 0.08),
        0 2px 6px -2px rgba(16, 32, 51, 0.04);
}

th {
    background: linear-gradient(135deg, var(--primary), var(--primary-700)) !important;
    color: var(--white) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

td,
th {
    padding: 1.15rem 1.25rem !important;
    border-bottom: 1px solid var(--line);
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: linear-gradient(135deg, rgba(7, 87, 184, 0.03), rgba(19, 183, 216, 0.02));
}

/* CTA */
.cta {
    width: min(1180px, calc(100% - 32px));
    margin: clamp(48px, 7vw, 84px) auto !important;
    padding: clamp(48px, 7vw, 78px) 24px !important;
    border-radius: 20px !important;
    color: var(--white);
    text-align: center;
    background:
        linear-gradient(135deg, rgba(7, 87, 184, 0.96), rgba(16, 32, 51, 0.96)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 58px) !important;
    box-shadow: 
        0 20px 60px -12px rgba(7, 87, 184, 0.4),
        0 10px 30px -8px rgba(19, 183, 216, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 320ms var(--ease-out);
}

.cta:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 28px 72px -12px rgba(7, 87, 184, 0.5),
        0 14px 40px -8px rgba(19, 183, 216, 0.35);
}

.cta::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background:
        linear-gradient(90deg, transparent, rgba(19,183,216,.24), transparent),
        repeating-linear-gradient(115deg, transparent 0 44px, rgba(255,255,255,.1) 45px 46px, transparent 47px 92px);
    animation: ctaSignal 8s linear infinite;
    pointer-events: none;
}

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

.cta h2 {
    color: var(--white) !important;
}

.cta p {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 1.1rem;
}

/* Footer */
.footer,
footer {
    padding: 70px 0 28px;
    color: #cbd5e1;
    background: linear-gradient(180deg, #102033, #071425) !important;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.footer-brand {
    color: var(--white);
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
}

.footer-title,
footer h4 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.footer-description,
footer p {
    color: #aebdd0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.62rem;
}

footer a {
    color: #cbd5e1;
}

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

.social-links {
    display: flex;
    gap: 0.55rem;
}

.social-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    transition: transform 220ms var(--ease-out), border-color 220ms ease, background 220ms ease;
}

.social-link:hover {
    transform: translateY(-4px) rotate(-2deg);
    border-color: rgba(19, 183, 216, .8);
    background: rgba(19, 183, 216, .18);
}

.reveal-ready {
    opacity: 0;
    transform: translateY(28px) scale(.98);
}

.reveal-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}

.tilt-ready {
    will-change: transform;
}

@keyframes siteGridDrift {
    to { background-position: 520px 520px, -620px 620px; }
}

@keyframes logoSignal {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 8px 16px rgba(7, 87, 184, 0.12)); }
    50% { transform: translateY(-2px); filter: drop-shadow(0 10px 22px rgba(19, 183, 216, 0.28)); }
}

@keyframes buttonSweep {
    0%, 55% { transform: translateX(0) skewX(-18deg); }
    100% { transform: translateX(420%) skewX(-18deg); }
}

@keyframes haloBreathe {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.12); opacity: .55; }
}

@keyframes heroScan {
    to { background-position: 280px 280px, 0 0; }
}

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

@keyframes strandFlow {
    from { background-position: -280px 0; }
    to { background-position: 980px 0; }
}

@keyframes nodePulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50% { transform: scale(1.65); opacity: 1; }
}

@keyframes visualRise {
    from { opacity: 0; transform: translateY(30px) rotateX(8deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes visualFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes glassSweep {
    0%, 62% { transform: translateX(-115%); }
    100% { transform: translateX(115%); }
}

@keyframes iconBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes ctaSignal {
    to { transform: translateX(18%); }
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .navbar-nav {
        align-items: stretch;
    }

    .navbar .btn-primary-osp {
        width: 100%;
        margin: 0.75rem 0 0 !important;
    }

    .hero {
        min-height: auto;
    }

    .hero-image,
    .about-image,
    div[style*="overflow: hidden"][style*="box-shadow"] {
        min-height: 260px;
    }

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

@media (max-width: 575.98px) {
    .container {
        width: min(100% - 24px, 1180px);
    }

    .hero {
        padding: 64px 0 !important;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .d-flex.gap-3 {
        gap: 0.75rem !important;
    }

    .d-flex.gap-3 .btn {
        width: 100%;
    }

    .card-hover,
    .service-card,
    .contact-info-card,
    div[style*="border: 1px solid #E2E8F0"] {
        padding: 1.25rem !important;
    }

    .cta {
        width: min(100% - 24px, 1180px);
    }
}