/* ==========================================================================
   NXT Designs — design system
   Tokens: Inter Tight display + DM Sans body, cool bone #F4F6FB, dark #111827,
   indigo→cyan→mint gradient accents, dark panels with grid lines
   ========================================================================== */

:root {
    --ink: #0f172a;
    --ink-rgb: 15, 23, 42;
    --bg: #f8fafc;
    --paper: #ffffff;
    --panel: #0f172a;
    --accent: #2563eb;
    --accent-rgb: 37, 99, 235;
    --accent-2: #14b8a6;
    --accent-3: #06b6d4;
    --accent-4: #10b981;
    --accent-warm: #f97316;
    --accent-soft: #e4ecff;
    --accent-grad: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
    --muted: #475569;
    --dim: #94a3b8;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --line-invert: rgba(255, 255, 255, .14);
    --radius: 16px;
    --radius-lg: 26px;
    --radius-btn: 12px;
    --shadow-card: 0 10px 30px rgba(15, 23, 42, .08);
    --ease: cubic-bezier(.625, .05, 0, 1);
    --ff: "Inter", system-ui, sans-serif;
    --ff-display: "Inter", system-ui, sans-serif;
    --grid-lines:
        repeating-linear-gradient(to right, rgba(255, 255, 255, .045) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, .045) 0 1px, transparent 1px 90px);
}

body {
    font-family: var(--ff);
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
}

a { color: var(--ink); text-decoration: none; transition: color .3s var(--ease); }
a:hover { color: var(--accent); }
p { color: var(--muted); }
::selection { background: var(--ink); color: var(--bg); }

.dim { color: var(--dim); }

/* --- Buttons ------------------------------------------------------------ */

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
    transition: all .35s var(--ease);
}

.btn-pill i { transition: transform .35s var(--ease); }
.btn-pill:hover i { transform: translate(2px, -2px); }

.btn-pill-dark { background: var(--ink); color: #fff; }
.btn-pill-dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-pill-lime { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-pill-lime:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-pill-ghost { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn-pill-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-pill-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-pill-light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    font-size: 1.05rem;
    transition: all .35s var(--ease);
    flex-shrink: 0;
}

.btn-circle:hover, .btn-circle.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Labels & headings ---------------------------------------------------- */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.section-label::before { content: ""; width: 9px; height: 9px; background: var(--accent); flex-shrink: 0; }
.section-label i { display: none; }
.section-label.label-lime { color: #fff; }

.section-heading {
    font-size: clamp(2.1rem, 4.5vw, 3.6rem);
    margin-bottom: 1.25rem;
}

.section-heading em, .hero-heading em, .cta-heading em { font-style: normal; color: var(--accent); }
.section-heading .dim { color: var(--dim); }

.section-heading-sm { font-size: 1.5rem; margin: 3rem 0 1.25rem; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.section-head .section-heading { margin-bottom: 0; }
.section-head > :first-child { flex-basis: 100%; }
.section-head .section-label { margin-bottom: 1rem; }

.section-pad { padding: 110px 0; }

.section-dark { background: var(--panel); color: #fff; }
.section-dark p { color: rgba(255, 255, 255, .6); }
.section-dark .section-heading em { color: var(--accent); }

/* --- Header --------------------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 1030;
    background: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.05rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--ff-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.brand em { font-style: normal; color: var(--accent); }
.brand:hover { color: var(--ink); }
.brand-light, .brand-light:hover { color: var(--ink); }

.main-nav { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }

.main-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .95rem;
    font-weight: 600;
    font-size: .95rem;
    border-radius: 100px;
    color: var(--ink);
}

.main-nav .nav-link:hover, .main-nav .nav-link.active { color: var(--accent); background: transparent; }
.main-nav .nav-link i { font-size: .65rem; transition: transform .3s var(--ease); }
.main-nav .has-mega:hover .nav-link i { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1.1rem;
    transition: all .3s var(--ease);
}

.nav-icon-btn:hover { background: var(--bg); color: var(--accent); }

/* Floating MENU pill (appears once the header scrolls away) */
.menu-pill {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.4rem;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 14px 40px rgba(19, 19, 19, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: all .35s var(--ease);
}

.menu-pill i { font-size: 1.05rem; }
.menu-pill.visible { opacity: 1; visibility: visible; transform: none; }
.menu-pill:hover { color: var(--accent); }

/* Back to top */
.to-top {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1040;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .35s var(--ease);
}

.to-top.visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Mega menu */
.has-mega { position: relative; }

.mega-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 12px);
    width: 620px;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 60px rgba(19, 19, 19, .12);
    opacity: 0;
    visibility: hidden;
    transition: all .3s var(--ease);
}

.mega-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-menu-sm { width: 220px; display: grid; gap: .25rem; }

.mega-link {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .7rem .8rem;
    border-radius: 14px;
    transition: background .3s var(--ease);
}

.mega-link:hover { background: var(--bg); color: var(--ink); }
.mega-link strong { display: block; font-size: .93rem; }
.mega-link small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; margin-top: .1rem; }

.mega-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg);
    font-size: 1.05rem;
}

.mega-link:hover .mega-icon { background: var(--accent); color: #fff; }

/* Mobile nav */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: transparent;
}

.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

.mobile-nav { max-width: 340px; background: var(--bg); }
.mobile-nav .offcanvas-header { padding: 1.25rem; border-bottom: 1px solid var(--line); }
.mobile-menu { margin: 0 0 1.5rem; }
.mobile-menu > li > a { display: flex; justify-content: space-between; align-items: center; padding: .8rem .25rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-menu ul { padding: .5rem 0 .5rem 1rem; }
.mobile-menu ul a { display: block; padding: .45rem 0; font-size: .93rem; color: var(--muted); }
.mobile-menu ul a i { margin-right: .4rem; color: var(--accent); }
.mobile-contact { display: grid; gap: .6rem; margin-top: 1.5rem; font-size: .95rem; }
.mobile-contact i { margin-right: .5rem; color: var(--accent); }

/* --- Hero ------------------------------------------------------------------ */

.hero { padding: 60px 0 0; overflow: hidden; }

.hero-brandline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.hero-wordmark {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    background: linear-gradient(100deg, #2563eb 0%, #14b8a6 62%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-wordmark sup { font-size: .42em; top: -.85em; font-weight: 700; color: var(--accent-3); -webkit-text-fill-color: currentColor; }

.hero-estab {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero-stage {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(760px 440px at 85% 12%, rgba(37, 99, 235, .14), transparent 60%),
        radial-gradient(680px 520px at 6% 92%, rgba(20, 184, 166, .13), transparent 60%),
        radial-gradient(560px 440px at 55% 110%, rgba(6, 182, 212, .12), transparent 66%),
        linear-gradient(160deg, var(--paper) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: clamp(2rem, 5vw, 4.5rem);
    padding-bottom: clamp(9rem, 16vw, 11rem);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to right, rgba(var(--ink-rgb), .03) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(to bottom, rgba(var(--ink-rgb), .03) 0 1px, transparent 1px 90px);
}

.hero-stage-visual {
    position: absolute;
    top: clamp(2rem, 5vw, 4rem);
    right: clamp(1.5rem, 4vw, 3.5rem);
    width: min(40%, 520px);
    opacity: .92;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .5));
    pointer-events: none;
}

.hero-stage-body { position: relative; max-width: 44rem; }

.hero-tags {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .4rem .85rem .4rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    background: var(--paper);
    margin-bottom: 1.4rem;
}

.hero-tags-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
    animation: heroPulse 2.4s var(--ease) infinite;
}

@keyframes heroPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .28); }
    50%      { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

.hero-stage-heading {
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.04;
    color: var(--ink);
    max-width: 15em;
    margin: 0;
    position: relative;
    text-wrap: balance;
}

.hero-stage-heading em {
    font-style: normal;
    background: linear-gradient(100deg, #2563eb 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-hl {
    position: relative;
    white-space: nowrap;
    color: var(--ink);
    background: linear-gradient(90deg, rgba(37, 99, 235, .22), rgba(20, 184, 166, .22)) no-repeat;
    background-size: 100% 36%;
    background-position: 0 86%;
    border-radius: 3px;
}

.hero-stage-sub {
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.6;
    max-width: 34rem;
    margin: 1.4rem 0 0;
}

.hero-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.9rem;
}

.hero-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}

.hero-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.75rem;
    list-style: none;
    padding: 1.9rem 0 0;
    margin: 1.9rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
}

.hero-trust i { color: var(--accent); font-size: 1rem; }

.hero-scroll {
    position: absolute;
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(10rem, 17vw, 12rem);
    display: grid;
    gap: .6rem;
}

.hero-scroll span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

/* Service cards strip overlapping the hero stage */
.hero-services {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: calc(clamp(9rem, 16vw, 11rem) * -.62);
    padding: 0 clamp(1rem, 3vw, 2.75rem);
}

.hero-service-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    transition: transform .35s var(--ease);
}

.hero-service-card:hover { transform: translateY(-6px); color: var(--ink); }

.hero-service-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--panel);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hero-service-card:hover .hero-service-thumb { background: var(--accent-grad); }
.hero-service-card small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); margin-bottom: .15rem; }
.hero-service-card strong { display: block; font-family: var(--ff-display); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }

/* Three-pillar strip overlapping the hero stage: AI · Lean · ABDM */
.hero-pillars {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: calc(clamp(9rem, 16vw, 11rem) * -.6);
    padding: 0 clamp(1rem, 3vw, 2.75rem);
}

.hero-pillar {
    --sv: var(--accent);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.hero-pillar:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sv) 45%, var(--line));
    box-shadow: 0 24px 54px rgba(15, 23, 42, .16);
}

.hero-pillar-media {
    margin: -1.5rem -1.5rem 1.3rem;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--sv) 10%, #fff);
    border-bottom: 1px solid var(--line);
}

.hero-pillar-media img {
    display: block;
    width: 100%;
    height: 136px;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.hero-pillar:hover .hero-pillar-media img { transform: scale(1.04); }

.hero-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.hero-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sv) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--sv) 28%, #fff);
    color: var(--sv);
    font-size: 1.5rem;
    transition: all .35s var(--ease);
}

.hero-pillar:hover .hero-pillar-icon { background: var(--sv); border-color: var(--sv); color: #fff; }

.hero-pillar-index {
    font-family: var(--ff-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--dim);
}

.hero-pillar-title {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 .5rem;
}

.hero-pillar-desc {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 1.2rem;
}

.hero-pillar-tag {
    margin-top: auto;
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sv);
    padding: .32rem .7rem;
    border-radius: 100px;
    background: color-mix(in srgb, var(--sv) 12%, #fff);
}

/* --- Services (full-stack capabilities) ---------------------------------- */

.services-head { max-width: 60rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.services-heading {
    font-family: var(--ff-display);
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
    margin: 1rem 0 0;
    text-wrap: balance;
}

.services-heading em { font-style: normal; color: var(--accent); }

.services-lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    max-width: 42rem;
    margin: 1.1rem 0 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.1rem;
}

.service-card {
    --sv: var(--accent);
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sv) 45%, var(--line));
    box-shadow: 0 20px 44px rgba(15, 23, 42, .14);
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sv) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--sv) 28%, #fff);
    color: var(--sv);
    font-size: 1.4rem;
    transition: all .35s var(--ease);
}

.service-card:hover .service-icon { background: var(--sv); border-color: var(--sv); color: #fff; }

.service-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sv);
    padding: .35rem .7rem;
    background: color-mix(in srgb, var(--sv) 12%, #fff);
    border-radius: 100px;
}

.service-title {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 .5rem;
}

.service-desc {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 1.1rem;
}

.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}

.service-chips li {
    font-size: .76rem;
    font-weight: 600;
    color: var(--ink);
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}

.service-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
}

.service-badge i { color: var(--accent); font-size: .95rem; }

.services-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.services-cta p {
    font-family: var(--ff-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0;
    max-width: 32rem;
}

/* --- About (Imagine. Create. Construct.) ------------------------------------ */

.about-label-rail { padding-top: .4rem; }

.avail-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.15rem;
    background: #fff;
    border-radius: 100px;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
}

.avail-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fbf4f; box-shadow: 0 0 0 4px rgba(47, 191, 79, .18); }

.about-heading {
    font-size: clamp(1.9rem, 3.8vw, 3.3rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 2.5rem;
}

.about-heading .dim { color: var(--dim); }

.about-side p { color: var(--ink); font-size: 1rem; line-height: 1.6; }

.avatar-stack { display: flex; margin: 1.5rem 0 1.75rem; }

.avatar-stack span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--bg);
    background: var(--panel);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    margin-left: -14px;
}

.avatar-stack span:first-child { margin-left: 0; }
.avatar-stack span:nth-child(2n) { background: var(--accent); }

.about-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }

.about-tile {
    border-radius: var(--radius);
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    padding: 1.75rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.about-tile i { font-size: 2rem; position: relative; }

.about-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.about-tile-badge {
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    left: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.about-tile-a {
    background:
        radial-gradient(500px 300px at 80% 0%, rgba(37, 99, 235, .35), transparent 60%),
        linear-gradient(150deg, #33302b, #131313 70%);
}

.about-tile-b {
    background:
        radial-gradient(400px 320px at 20% 100%, rgba(255, 255, 255, .22), transparent 60%),
        linear-gradient(200deg, #dfe4e6, #aebfc6 60%, #8fa6af);
    color: var(--ink);
}

.about-tile::before { content: ""; position: absolute; inset: 0; background: var(--grid-lines); }

.about-expertise h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin: 1.5rem 0 .9rem; }
.about-expertise p { max-width: 46ch; }

/* --- Stats band ---------------------------------------------------------------- */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem;
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--line);
}

.stat-item { position: relative; }

.stat-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 1.1rem;
}

.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
}

.stat-value {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(2.6rem, 4.5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.stat-label { display: block; color: var(--muted); font-size: .92rem; margin-top: 1rem; }

/* --- Ticker ----------------------------------------------------------------- */

.ticker { overflow: hidden; padding: 26px 0; background: var(--panel); }
.ticker-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: ticker 30s linear infinite; }
.ticker-item { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.ticker-sep { color: var(--accent); font-size: 1.1rem; }

@keyframes ticker { to { transform: translateX(-50%); } }

/* --- Selected work rows ---------------------------------------------------------- */

.work-heading {
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    letter-spacing: -.04em;
    line-height: 1.02;
    color: var(--dim);
    margin: 0;
}

.work-heading .ink { color: var(--ink); }
.work-heading em { font-style: italic; color: var(--ink); }

.work-list { margin-top: 4rem; }

.work-row {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: 3.5rem 0;
    border-top: 1px solid var(--line);
}

.work-meta-top { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.work-meta-top .sep { margin: 0 .75rem; color: var(--dim); }

.work-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; margin-bottom: .9rem; }

.work-view {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.work-view::after { content: "···"; letter-spacing: .1em; color: var(--muted); }
.work-row:hover .work-view { color: var(--accent); }

.work-media {
    border-radius: 10px;
    min-height: 320px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .9);
    font-size: 3.2rem;
}

.work-media::before { content: ""; position: absolute; inset: 0; background: var(--grid-lines); z-index: 2; pointer-events: none; }

.work-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .6s var(--ease); }
.work-row:hover .work-media-img { transform: scale(1.05); }

.work-media-badge {
    position: absolute;
    z-index: 3;
    top: 1.1rem;
    left: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.work-media-a { background: radial-gradient(420px 300px at 75% 20%, rgba(37, 99, 235, .4), transparent 60%), linear-gradient(160deg, #2b2f33, #101214 75%); }
.work-media-b { background: radial-gradient(420px 300px at 25% 85%, rgba(255, 255, 255, .25), transparent 55%), linear-gradient(200deg, #cfd8dc, #90a4ae 70%, #607d8b); }
.work-media-c { background: radial-gradient(420px 300px at 70% 80%, rgba(37, 99, 235, .3), transparent 60%), linear-gradient(140deg, #3e3a34, #17150f 70%); }

.work-desc { color: var(--muted); line-height: 1.65; margin-bottom: 1.75rem; }

.work-specs { display: grid; }

.work-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}

.work-spec dt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.work-spec dd { font-weight: 700; font-size: .95rem; margin: 0; text-align: right; }

/* --- CTA panel (Build with us.) --------------------------------------------------- */

.cta-section { padding-top: 0; }

.cta-banner {
    position: relative;
    padding: clamp(2.5rem, 6vw, 5rem);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(820px 560px at 82% 30%, rgba(37, 99, 235, .55), transparent 62%),
        radial-gradient(720px 520px at 15% 100%, rgba(6, 182, 212, .4), transparent 60%),
        linear-gradient(150deg, #13294f 0%, #0f2036 55%, #0b1120 100%);
    color: #fff;
    overflow: hidden;
    text-align: left;
}

.cta-banner::before { content: ""; position: absolute; inset: 0; background: var(--grid-lines); pointer-events: none; }
.cta-banner > * { position: relative; }

.cta-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.cta-meta .live { color: #fff; }
.cta-meta .live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: .55rem; }

.cta-badge {
    display: inline-flex;
    padding: 0;
    background: transparent;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cta-heading {
    font-size: clamp(3rem, 9vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .95;
    color: #fff;
    max-width: none;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.cta-heading em { font-style: italic; font-weight: 600; color: #fff; }

.cta-banner p { color: rgba(255, 255, 255, .7); max-width: 520px; margin: 0 0 1.5rem; }

.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-start; }

.cta-actions .btn-pill { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; padding: .7rem 1.3rem; font-size: .88rem; }
.cta-actions .btn-pill:hover { background: #fff; border-color: #fff; color: var(--ink); }

.cta-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }

.cta-contact { text-align: right; }
.cta-contact small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: .75rem; }
.cta-contact .cta-mail { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--ff-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 700; color: #fff; }
.cta-contact .cta-mail:hover { color: var(--accent); }

.cta-mail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- Process ------------------------------------------------------------------------ */

.process-intro p { color: var(--muted); }

.process-stats { display: flex; gap: 3rem; margin-top: 2rem; }
.process-stat strong { display: block; font-family: var(--ff-display); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.process-stat small { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 4.5rem;
    border-top: 1px solid var(--line);
}

.process-step { padding: 1.75rem 1.5rem 0 0; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.process-step:first-child { border-left: 0; padding-left: 0; }

.process-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem; }
.process-num { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem; }
.process-num::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.process-step:first-child .process-num::before { background: var(--accent); box-shadow: 0 0 0 6px rgba(37, 99, 235, .15); }
.process-week { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.process-step h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.process-step > p { font-size: .92rem; line-height: 1.6; }

.process-deliv { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.process-deliv small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.process-deliv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.process-deliv li { font-size: .9rem; font-weight: 500; }
.process-deliv li::before { content: "+"; color: var(--accent); font-weight: 700; margin-right: .6rem; }

/* --- Testimonials (portrait + quote) -------------------------------------------------- */

.testimonials-section { background: transparent; }

.testimonial-portrait {
    border-radius: var(--radius);
    min-height: 520px;
    height: 100%;
    background:
        radial-gradient(420px 320px at 70% 10%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(170deg, #3a3d40, #191a1b 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.testimonial-portrait::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, .62)); pointer-events: none; }

.testimonial-portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; z-index: 1; }

.testimonial-portrait-name {
    position: absolute;
    z-index: 3;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: #fff;
}

.testimonial-portrait-name strong {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.testimonial-portrait-name small { font-size: .82rem; color: rgba(255, 255, 255, .82); }

.testimonial-lead { font-size: 1.05rem; max-width: 54ch; }

.quote-mark { color: var(--accent); font-family: var(--ff-display); font-size: 4rem; font-weight: 800; line-height: 1; margin: 2.5rem 0 1rem; }

.testimonial-slide blockquote {
    margin: 0 0 2rem;
    font-family: var(--ff-display);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.45;
    color: var(--ink);
}

.testimonial-byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.testimonial-byline .who { display: flex; align-items: center; gap: 1rem; }
.testimonial-byline strong { font-size: 1.02rem; }
.testimonial-byline .rule { display: inline-block; width: 34px; height: 1px; background: var(--line-strong); }
.testimonial-byline small { color: var(--muted); font-size: .95rem; }
.testimonial-stars { color: #f6a90e; font-size: .85rem; letter-spacing: .1em; }

.slider-nav { display: flex; gap: .6rem; }

.slider-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    transition: all .3s var(--ease);
}

.slider-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Legacy card slider (kept for any page still using it) */
.testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(420px, 85%);
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .5rem;
}

.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-card {
    scroll-snap-align: start;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.testimonial-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; flex-grow: 1; }
.testimonial-author { display: flex; align-items: center; gap: .9rem; }
.testimonial-author strong { display: block; font-size: .98rem; }
.testimonial-author small { color: var(--muted); }

.testimonial-avatar, .leader-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Distinction (numbered index list) -------------------------------------------------- */

.distinct-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.distinct-heading { font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -.035em; margin: 0; max-width: 16em; }

.distinct-media {
    border-radius: var(--radius);
    min-height: 420px;
    background:
        radial-gradient(400px 300px at 30% 15%, rgba(255, 255, 255, .35), transparent 55%),
        linear-gradient(180deg, #cdd9e0, #9fb4bf 55%, #7c939f);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.75rem;
    color: var(--ink);
    font-size: 2rem;
}

.distinct-media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--grid-lines); pointer-events: none; }

.distinct-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.distinct-list { border-top: 1px solid var(--line); }

.distinct-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.9rem .25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    transition: padding .35s var(--ease);
}

.distinct-row:hover { padding-left: 1rem; color: var(--ink); }
.distinct-index { font-size: 1.05rem; font-weight: 600; color: var(--muted); }
.distinct-row h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.distinct-row:hover .btn-circle { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Page title / breadcrumb ----------------------------------------------------------- */

.page-title {
    padding: clamp(64px, 9vw, 96px) 0 clamp(48px, 7vw, 72px);
    background:
        radial-gradient(680px 380px at 88% 116%, rgba(37, 99, 235, .1), transparent 62%),
        radial-gradient(520px 320px at 3% -12%, rgba(20, 184, 166, .09), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--bg) 100%);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to right, rgba(var(--ink-rgb), .03) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(to bottom, rgba(var(--ink-rgb), .03) 0 1px, transparent 1px 90px);
}
.page-title .container { position: relative; }
.page-title .display-heading { font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: -.04em; max-width: 900px; margin: 0; }
.page-lead { margin-top: 1.25rem; max-width: 620px; color: var(--muted); font-size: 1.1rem; }
.error-page .page-lead { color: var(--muted); }

.breadcrumb-trail { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumb-trail a { color: var(--muted); }
.breadcrumb-trail a:hover { color: var(--accent); }
.breadcrumb-trail li + li::before { content: "/"; margin: 0 .5rem; color: var(--dim); }
.breadcrumb-trail span { color: var(--accent); }

.page-intro { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }

/* --- Panels, timeline, leaders ----------------------------------------------------------- */

.card-panel { padding: 2.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.card-panel + .card-panel { margin-top: 1.5rem; }
.panel-heading { font-size: 1.4rem; margin-bottom: .6rem; }
.panel-note { font-size: .95rem; margin-bottom: 1.5rem; }

.panel-lime { background: var(--accent); border-color: var(--accent); color: #fff; }
.panel-lime p { color: rgba(255, 255, 255, .85); }
.panel-lime .panel-heading { color: #fff; }
.panel-dark { background: var(--panel); border-color: var(--panel); color: #fff; }
.panel-dark p { color: rgba(255, 255, 255, .6); }
.panel-dark .panel-heading { color: #fff; }

.timeline { display: grid; gap: 0; border-left: 1px solid var(--line-strong); margin-left: .5rem; }

.timeline-item { position: relative; padding: 0 0 2.25rem 2rem; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: .4rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    border: 4px solid var(--bg);
}

.timeline-year { font-size: .85rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.timeline-item h3 { font-size: 1.2rem; margin: .3rem 0 .4rem; }
.timeline-item p { max-width: 640px; margin: 0; }

.leader-card { padding: 2rem; border: 1px solid var(--line-invert); border-radius: var(--radius); height: 100%; }
.leader-card h3 { font-size: 1.1rem; margin: 1.1rem 0 .15rem; }
.leader-role { font-size: .85rem; color: var(--accent); display: block; margin-bottom: .6rem; }
.leader-card p { font-size: .9rem; margin: 0; }

/* --- Cards & tiles ------------------------------------------------------------ */

.icon-card {
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.icon-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(19, 19, 19, .1); }
.icon-card h3 { font-size: 1.15rem; margin: 1.1rem 0 .5rem; }
.icon-card p { font-size: .95rem; margin: 0; }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--bg);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.badge-lime { background: var(--panel); color: #fff; }

.feature-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.feature-tile { padding: 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.feature-tile i { font-size: 1.6rem; }
.feature-tile h3 { font-size: 1.05rem; margin: .8rem 0 .4rem; }
.feature-tile p { font-size: .88rem; margin: 0; }

.tile-lime { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile-lime p { color: rgba(255, 255, 255, .85); }
.tile-dark { background: var(--panel); border-color: var(--panel); color: #fff; }
.tile-dark i { color: var(--accent); }
.tile-dark p { color: rgba(255, 255, 255, .6); }

.check-list { margin: 0 0 2rem; display: grid; gap: .7rem; }
.check-list i { color: var(--accent); margin-right: .5rem; }

/* --- Service list (dark modules section) -------------------------------------- */

.service-list { border-top: 1px solid var(--line-invert); }

.service-row {
    display: grid;
    grid-template-columns: 90px 1.2fr 1fr 60px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.9rem .5rem;
    border-bottom: 1px solid var(--line-invert);
    color: #fff;
    transition: all .35s var(--ease);
}

.service-row:hover { padding-left: 1.25rem; color: #fff; }
.service-index { font-size: 1rem; color: rgba(255, 255, 255, .4); font-weight: 600; }
.service-name { display: flex; align-items: center; gap: .9rem; font-family: var(--ff-display); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; }
.service-name i { color: rgba(255, 255, 255, .5); font-size: 1.15rem; }
.service-row:hover .service-name i { color: var(--accent); }
.service-tagline { color: rgba(255, 255, 255, .5); font-size: .95rem; }

.service-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-invert);
    border-radius: 50%;
    font-size: 1rem;
    justify-self: end;
    transition: all .35s var(--ease);
}

.service-row:hover .service-arrow { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }

/* --- Modules -------------------------------------------------------------------------------- */

.module-card {
    display: block;
    height: 100%;
    padding: 2.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: all .35s var(--ease);
}

.module-card:hover { background: var(--panel); color: #fff; transform: translateY(-6px); }
.module-card:hover p { color: rgba(255, 255, 255, .6); }
.module-card:hover .module-more { color: var(--accent); }
.module-card:hover .icon-badge { background: var(--accent); color: #fff; }
.module-card h3 { font-size: 1.25rem; margin: 1.2rem 0 .6rem; }
.module-card p { font-size: .95rem; }
.module-card-wide { display: flex; gap: 1.5rem; align-items: flex-start; }
.module-card-wide h3 { margin-top: 0; }
.module-more { font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }

.workflow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; counter-reset: step; }

.workflow-step { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.workflow-index { font-size: .85rem; font-weight: 700; color: var(--accent); }
.workflow-step h3 { font-size: 1.05rem; margin: .5rem 0 .4rem; }
.workflow-step p { font-size: .88rem; margin: 0; }

.sidebar-sticky { position: sticky; top: 100px; display: grid; gap: 1.5rem; }
.sidebar-sticky .card-panel + .card-panel { margin-top: 0; }
.sidebar-links { display: grid; gap: .2rem; margin: 0; }
.sidebar-links a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 12px; font-size: .95rem; font-weight: 500; }
.sidebar-links a:hover { background: var(--bg); color: var(--ink); }
.sidebar-links i { color: var(--accent); }

/* --- Accordion (Bootstrap overrides) ----------------------------------------------------------- */

.accordion-item { border: 1px solid var(--line) !important; border-radius: 16px !important; margin-bottom: .75rem; overflow: hidden; background: #fff; }
.accordion-button { font-family: var(--ff); font-weight: 600; font-size: 1rem; padding: 1.15rem 1.4rem; background: #fff; color: var(--ink); box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--ink); color: #fff; }
.accordion-button:not(.collapsed)::after { filter: invert(1) grayscale(1) brightness(3); }
.accordion-body { color: var(--muted); font-size: .95rem; padding: 1.15rem 1.4rem; }
.faq-group { margin-bottom: 3rem; }
.faq-group .section-heading-sm { margin-top: 0; }

/* --- Pricing --------------------------------------------------------------------------------------- */

.price-card {
    position: relative;
    height: 100%;
    padding: 2.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    display: flex;
    flex-direction: column;
}

.price-card-featured { background: var(--panel); color: #fff; border-color: var(--panel); }
.price-card-featured .price-blurb, .price-card-featured .price-includes li { color: rgba(255, 255, 255, .7); }
.price-card-featured .price-figure small { color: rgba(255, 255, 255, .55); }

.price-flag {
    position: absolute;
    top: -14px;
    left: 2.5rem;
    padding: .35rem 1rem;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.price-card h3 { font-size: 1.3rem; }
.price-blurb { font-size: .93rem; margin: .4rem 0 1.5rem; }
.price-figure { font-family: var(--ff-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 1.5rem; }
.price-figure small { font-size: .9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-includes { display: grid; gap: .6rem; margin-bottom: 2rem; flex-grow: 1; font-size: .93rem; }
.price-includes i { color: var(--accent); margin-right: .4rem; }
.price-card-featured .price-includes i { color: var(--accent); }

.compare-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare-table th { background: var(--panel); color: #fff; font-weight: 600; padding: 1rem 1.25rem; }
.compare-table td { padding: .9rem 1.25rem; color: var(--muted); }
.compare-table .featured-col { background: rgba(37, 99, 235, .06); }
.compare-table th.featured-col { background: var(--panel); color: var(--accent); }
.text-included { color: var(--accent); }
.text-excluded { color: rgba(19, 19, 19, .25); }

.enterprise-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 2.25rem 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--panel);
    color: #fff;
}

.enterprise-strip h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.enterprise-strip p { margin: 0; color: rgba(255, 255, 255, .6); }

/* --- Assurance band -------------------------------------------------------------------------------- */

.assurance-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 3rem;
    border-radius: var(--radius-lg);
    background: var(--panel);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.assurance-band::before { content: ""; position: absolute; inset: 0; background: var(--grid-lines); }
.assurance-band > * { position: relative; }
.assurance-value { display: block; font-family: var(--ff-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; }
.assurance-label { font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* --- Blog -------------------------------------------------------------------------------------------- */

.blog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; }

.filter-pill {
    display: inline-flex;
    padding: .5rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-size: .88rem;
    font-weight: 600;
    transition: all .3s var(--ease);
}

.filter-pill:hover, .filter-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-pill-sm { padding: .25rem .75rem; font-size: .75rem; background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

.blog-search { position: relative; min-width: 260px; }
.blog-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.blog-search .form-control { padding-left: 2.5rem; border-radius: 100px; }

.blog-card { height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(19, 19, 19, .1); }

.blog-thumb {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background:
        radial-gradient(300px 200px at 80% 20%, rgba(37, 99, 235, .4), transparent 60%),
        linear-gradient(150deg, #26262a, #111 75%);
}

.blog-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .5s var(--ease); }
.blog-card:hover .blog-thumb-img { transform: scale(1.05); }

.blog-thumb-mark {
    position: absolute;
    z-index: 2;
    bottom: .9rem;
    left: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
}

.blog-card-body { padding: 1.5rem; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; font-size: .85rem; color: var(--muted); }
.blog-card h2 { font-size: 1.15rem; line-height: 1.4; margin-bottom: .6rem; }
.blog-card p { font-size: .9rem; margin-bottom: 1rem; }
.blog-author { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }

.post p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.5rem; }
.post .blog-meta { margin-bottom: 2rem; }

.related-post { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.related-post strong { display: block; font-size: .95rem; line-height: 1.4; }
.related-post small { color: var(--muted); }

.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state i { font-size: 3rem; color: var(--muted); }
.empty-state h2 { margin: 1rem 0 .5rem; }
.empty-state .btn-pill { margin-top: 1rem; }

/* --- Careers ---------------------------------------------------------------------------------------------- */

.openings { border-top: 1px solid var(--line); }

.opening-row {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 50px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.6rem .75rem;
    border-bottom: 1px solid var(--line);
    transition: all .35s var(--ease);
}

.opening-row:hover { background: rgba(255, 255, 255, .7); padding-left: 1.5rem; }
.opening-title { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.opening-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem; color: var(--muted); }
.opening-meta i { color: var(--accent); margin-right: .3rem; }

/* --- Contact ----------------------------------------------------------------------------------------------- */

.form-control, .form-select { border-color: var(--line-strong); border-radius: 14px; padding: .75rem 1rem; font-family: var(--ff); background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.form-label { font-weight: 600; font-size: .9rem; }

.contact-cards { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.contact-card { display: flex; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.contact-card a { display: block; font-weight: 600; color: var(--accent); }
.contact-card small { display: block; color: var(--muted); margin-top: .2rem; }

.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-frame iframe { display: block; width: 100%; height: 260px; border: 0; }

/* --- 404 --------------------------------------------------------------------------------------------------- */

.error-page { padding: 140px 0; }
.error-code { font-family: var(--ff-display); font-size: clamp(6rem, 18vw, 11rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--ink); display: block; }
.error-page .cta-actions { margin-top: 2rem; justify-content: center; }
.error-page .cta-actions .btn-pill { border-color: var(--ink); color: var(--ink); }
.error-page .cta-actions .btn-pill-dark { background: var(--ink); color: #fff; }

/* --- Footer (light, editorial) ------------------------------------------------------------------------------- */

.site-footer { background: var(--bg); color: var(--ink); padding-top: 100px; border-top: 1px solid var(--line); overflow: hidden; }
.footer-top { padding-bottom: 70px; }

.footer-about { margin: 1.5rem 0 2.25rem; color: var(--muted); font-size: 1rem; max-width: 40ch; }

.footer-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }

.footer-contact { display: grid; gap: .7rem; margin: 0; font-size: .95rem; color: var(--muted); }
.footer-contact i { color: var(--accent); margin-right: .6rem; }
.footer-contact a { color: var(--ink); }
.footer-contact a:hover { color: var(--accent); }

.footer-heading { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.footer-links { display: grid; gap: .8rem; margin: 0; }
.footer-links a { color: var(--ink); font-size: 1rem; font-weight: 500; }
.footer-links a:hover { color: var(--accent); }
.footer-note { color: var(--muted); font-size: .9rem; }

.newsletter-form { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line-strong); padding-bottom: .6rem; max-width: 460px; }
.newsletter-form .form-control { background: transparent; border: 0; border-radius: 0; color: var(--ink); padding: .4rem 0; box-shadow: none !important; }
.newsletter-form .form-control::placeholder { color: var(--muted); }

.newsletter-form .btn-pill, .newsletter-submit {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    white-space: nowrap;
    transition: color .3s var(--ease);
}

.newsletter-form .btn-pill:hover, .newsletter-submit:hover { color: var(--accent); background: transparent; }
.newsletter-form .btn-pill i, .newsletter-submit i { color: var(--accent); }

.footer-social { display: flex; gap: .6rem; margin-top: 1.75rem; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink);
    transition: all .3s var(--ease);
}
.footer-social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Offices */
.footer-offices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 55px 0 30px;
    border-top: 1px solid var(--line);
}

.footer-office + .footer-office { border-left: 1px solid var(--line); padding-left: 2rem; }

.office-city { display: flex; align-items: center; gap: .7rem; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; }
.office-city::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.footer-office p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; }
.office-status { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Giant wordmark */
.footer-wordmark {
    font-family: var(--ff-display);
    font-size: clamp(3.5rem, 10.6vw, 11rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .9;
    white-space: nowrap;
    margin: 3rem 0 -.16em;
    color: var(--ink);
}

.footer-wordmark sup { font-size: .25em; top: -2.2em; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    font-size: .85rem;
}

.footer-bottom p { margin: 0; color: var(--muted); }
.footer-bottom i { color: var(--accent); }

/* --- Reveal animation ------------------------------------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .ticker-track { animation: none; }
}

/* --- Responsive --------------------------------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .hero-pillars { margin-top: 1.5rem; padding: 0; }
    .hero-stage { padding-bottom: clamp(2rem, 5vw, 4.5rem); min-height: 480px; }
    .hero-scroll { bottom: clamp(2rem, 5vw, 4rem); }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
    .process-step { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .process-grid { border-top: 0; }
}

@media (max-width: 991.98px) {
    .section-pad { padding: 70px 0; }
    .hero-wordmark { white-space: normal; }
    .hero-pillars { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .assurance-band { grid-template-columns: repeat(2, 1fr); padding: 2rem; }
    .service-row { grid-template-columns: 50px 1fr 48px; }
    .service-tagline { display: none; }
    .opening-row { grid-template-columns: 1fr 40px; }
    .opening-meta { grid-column: 1 / -1; }
    .sidebar-sticky { position: static; }
    .work-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .work-media { min-height: 260px; }
    .footer-offices { grid-template-columns: 1fr; gap: 1.75rem; }
    .footer-office + .footer-office { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.75rem; }
    .cta-foot { flex-direction: column; align-items: flex-start; }
    .cta-contact { text-align: left; }
    .testimonial-portrait { min-height: 380px; margin-bottom: 2rem; }
}

@media (max-width: 575.98px) {
    .hero { padding-top: 40px; }
    .hero-stage { min-height: 420px; }
    .hero-pillar { box-shadow: 0 10px 30px rgba(15, 23, 42, .1); }
    .stats-row { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
    .feature-tiles { grid-template-columns: 1fr; }
    .about-media { grid-template-columns: 1fr; }
    .section-head { margin-bottom: 2rem; }
    .process-grid { grid-template-columns: 1fr; }
    .process-stats { gap: 2rem; }
    .distinct-row { grid-template-columns: 56px 1fr auto; gap: .75rem; }
    .cta-actions { justify-content: flex-start; }
    .footer-bottom { justify-content: center; text-align: center; }
}

/* --- Dark mode ----------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f8fafc;
        --ink-rgb: 248, 250, 252;
        --bg: #0f172a;
        --paper: #1e293b;
        --panel: #0b1120;
        --accent: #3b82f6;
        --accent-rgb: 59, 130, 246;
        --accent-2: #2dd4bf;
        --accent-3: #22d3ee;
        --accent-soft: rgba(59, 130, 246, .18);
        --muted: #94a3b8;
        --dim: #64748b;
        --line: rgba(255, 255, 255, .1);
        --line-strong: rgba(255, 255, 255, .18);
        --shadow-card: 0 12px 34px rgba(0, 0, 0, .45);
    }

    .site-header { background: var(--paper); }

    /* Dark-surface buttons would invert to light; keep them blue/teal */
    .btn-pill-dark { background: var(--accent); border-color: var(--accent); }
    .btn-pill-dark:hover,
    .btn-pill-lime:hover { background: var(--accent-2); border-color: var(--accent-2); color: #0f172a; }
    .btn-pill-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }

    /* Outlined icons/tags: tint against the dark card, not white */
    .service-icon,
    .hero-pillar-icon { background: color-mix(in srgb, var(--sv) 22%, transparent); border-color: color-mix(in srgb, var(--sv) 42%, transparent); }
    .service-tag,
    .hero-pillar-tag { background: color-mix(in srgb, var(--sv) 22%, transparent); }
    .service-chips li { background: rgba(255, 255, 255, .05); }
    .hero-pillar { box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
}