/* =====================================================================
   TECHXENTRI — design system
   Inspired by the FIT Solutions visual language:
   light theme, navy #083e68 + orange #f26522 accents, gold highlights,
   geometric-sans headings (Jost as a free substitute for Futura),
   Roboto body text.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --navy: #083e68;
    --navy-700: #0b4f83;
    --navy-900: #052b49;
    --orange: #f26522;
    --orange-dark: #d2500e;
    --gold: #f9a12f;
    --blue: #009fdf;
    --cyan: #38c7ff;
    --ink: #16222e;
    --muted: #5c6773;
    --line: #d5dae2;
    --bg-soft: #eff0f2;
    --white: #ffffff;
    --radius: 14px;
    --shadow-sm: 0 2px 10px rgba(8, 62, 104, .07);
    --shadow-md: 0 14px 34px rgba(8, 62, 104, .14);
    --font-head: 'Jost', 'Futura', 'Century Gothic', Arial, sans-serif;
    --font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    background: var(--white);
}

h1, h2, h3, .brand {
    font-family: var(--font-head);
}

a {
    transition: color .18s;
}

/* ---------------------------------------------------------------------
   Top utility bar (emergency hotline strip)
   --------------------------------------------------------------------- */
.topbar {
    background: var(--navy);
    color: #cfe0ee;
    font-size: 13.5px;
    padding: 8px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.topbar .hotline {
    display: flex;
    align-items: center;
    gap: 9px;
}

.topbar .hotline i {
    color: var(--gold);
}

.topbar .hotline a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.topbar .hotline a:hover {
    color: var(--gold);
}

.topbar .social {
    display: flex;
    gap: 16px;
}

.topbar .social a {
    color: #cfe0ee;
    text-decoration: none;
    font-size: 14px;
}

.topbar .social a:hover {
    color: var(--gold);
}

/* ---------------------------------------------------------------------
   Header / navigation (white, sticky)
   --------------------------------------------------------------------- */
.navbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* extra right room for the EN | ID switcher pill */
    padding: 0 calc(6% + 112px) 0 6%;
    background: var(--white);
    color: var(--navy);
    position: sticky;
    top: 0;
    /* above the mobile menu panel so the burger stays clickable while open */
    z-index: 9502;
    box-shadow: 0 2px 14px rgba(8, 62, 104, .08);
    border-bottom: 1px solid var(--line);
}

/* EN | ID pill, top-right corner of the header */
.lang-switch {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(8, 62, 104, .08);
}

.lang-switch button {
    min-width: 38px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.lang-switch button:hover { color: var(--navy); }

.lang-switch button.active {
    background: var(--navy);
    color: var(--white);
}

.lang-switch > span {
    color: var(--line);
    font-size: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--navy);
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--orange);
    font-weight: 700;
}

.brand-image {
    height: 46px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.brand-image img {
    display: block;
    width: 210px;
    height: auto;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
}

nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

nav a, .link-button {
    color: var(--navy);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-head);
}

nav a:hover, .link-button:hover {
    color: var(--orange);
}

.nav-cta {
    padding: 11px 20px;
    background: var(--orange);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(242, 101, 34, .3);
}

.nav-cta:hover {
    background: var(--orange-dark);
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, #f6fafd 0%, #ffffff 100%);
    color: var(--ink);
    padding: 105px 6% 90px;
}

.hero-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.eyebrow {
    font-size: 12.5px;
    letter-spacing: 2.5px;
    color: var(--orange);
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-head);
}

.hero h1, .page-hero h1 {
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.05;
    margin: 18px 0;
    color: var(--navy);
    font-weight: 700;
}

.hero h1 span {
    color: var(--orange);
}

.hero p {
    font-size: 19px;
    color: var(--muted);
    max-width: 560px;
}

.actions {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 9px;
    text-decoration: none;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 15.5px;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}

.primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 6px 16px rgba(242, 101, 34, .32);
}

.primary:hover {
    background: var(--orange-dark);
    color: #fff;
    transform: translateY(-2px);
}

.ghost {
    border: 1.5px solid var(--navy);
    color: var(--navy);
    background: transparent;
}

.ghost:hover {
    background: var(--navy);
    color: #fff;
}

.hero-visual {
    min-height: 400px;
    position: relative;
    display: grid;
    place-items: center;
}

.orb {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, .18), transparent 65%);
    border: 1px solid rgba(242, 101, 34, .35);
}

.architecture {
    position: relative;
    width: 280px;
    display: grid;
    gap: 12px;
}

.architecture div {
    padding: 18px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    color: var(--navy);
    font-weight: 600;
    font-family: var(--font-head);
}

.architecture i {
    color: var(--orange);
    width: 28px;
}

/* ---------------------------------------------------------------------
   Hero slider — full-bleed rotating slides with IT solution imagery.
   Shares the .slides track mechanism with the testimonial slider, so
   js/slider.js drives both.
   --------------------------------------------------------------------- */
.hero-slider {
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--navy-900);
}

.hero-slides {
    display: flex;
    transition: transform .8s cubic-bezier(.2, .65, .4, 1);
}

.hero-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    /* Clips the Ken Burns layer so its zoom never bleeds into the next slide. */
    overflow: hidden;
    color: #fff;
}

/* Background sits on its own layer so the slow Ken Burns zoom can run without
 * scaling the slide's text. The easing is linear because a pan/zoom that
 * slows down would call attention to the loop point. */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 6.5s linear;
}

.hero-slide.active .hero-slide-bg {
    transform: scale(1.15) translate3d(-1.2%, -1.5%, 0);
}

/* Navy gradient keeps the text legible over any photograph. */
.hero-slide-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(5, 43, 73, .93) 0%,
                rgba(5, 43, 73, .80) 40%,
                rgba(8, 62, 104, .38) 100%);
}

.hero-slide .hero-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 100px 6% 110px;
}

/* Slide content animates in as each slide becomes active. Children stagger
 * (eyebrow → heading → text → buttons) so the eye reads them in sequence, and
 * each .fx-* class flies in from a different direction for variety. The
 * transition-delay lives on the .active state only, so leaving a slide
 * resets the children without the stagger dragging the exit. */
.hero-copy > * {
    opacity: 0;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .65, .4, 1);
}

.hero-slide.active .hero-copy > * {
    opacity: 1;
    transform: none;
}

.hero-slide.active .hero-copy > *:nth-child(1) { transition-delay: .12s; }
.hero-slide.active .hero-copy > *:nth-child(2) { transition-delay: .26s; }
.hero-slide.active .hero-copy > *:nth-child(3) { transition-delay: .40s; }
.hero-slide.active .hero-copy > *:nth-child(4) { transition-delay: .54s; }

/* rise: everything lifts up from below (the default). */
.fx-rise .hero-copy > * {
    transform: translateY(26px);
}

/* drift: content sweeps in horizontally, the eyebrow from the opposite side
 * so the first beat comes from the left. */
.fx-drift .hero-copy > * {
    transform: translateX(46px);
}

.fx-drift .hero-copy > *:first-child {
    transform: translateX(-46px);
}

/* zoom: content pushes in from slightly smaller. */
.fx-zoom .hero-copy > * {
    transform: scale(.9) translateY(12px);
}

/* fade: a quiet crossfade, only a hint of movement. */
.fx-fade .hero-copy > * {
    transform: scale(1.03);
}

.hero-slider h1 {
    color: #fff;
}

.hero-slider p {
    color: #dce8f4;
    max-width: 620px;
}

.hero-slider .ghost {
    border-color: rgba(255, 255, 255, .65);
    color: #fff;
}

.hero-slider .ghost:hover {
    background: #fff;
    color: var(--navy);
}

.hero-controls {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 2;
}

/* ---------------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--navy);
    color: #fff;
    padding: 40px 8%;
    text-align: center;
}

.stats strong {
    display: block;
    font-size: 38px;
    color: var(--gold);
}

.stats span {
    color: #cfe0ee;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.section {
    padding: 95px 6%;
    max-width: 1250px;
    margin: auto;
}

.section-head {
    max-width: 800px;
    margin-bottom: 46px;
}

.section-head h2 {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.12;
    margin: 12px 0;
    color: var(--navy);
    font-weight: 700;
}

.section-head p {
    color: var(--muted);
    font-size: 18px;
}

.soft-section {
    max-width: none;
    background: var(--bg-soft);
}

.soft-section > * {
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
}

.dark-section {
    max-width: none;
    background: var(--navy);
    color: #fff;
}

.dark-section > * {
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
}

.dark-section .section-head h2 {
    color: #fff;
}

.dark-section .section-head p {
    color: #cfe0ee;
}

.dark-section .eyebrow,
.cta-section .eyebrow {
    color: var(--gold);
}

/* Feature grid (why-us / differentiators) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-grid article {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.feature-grid article:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .4);
}

.feature-grid i {
    font-size: 26px;
    color: var(--orange);
}

.feature-grid h3 {
    font-size: 20px;
    color: var(--navy);
    margin: 12px 0 6px;
}

.feature-grid p {
    color: var(--muted);
    font-size: 15.5px;
    margin: 0;
}

/* Cards (services + products) */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .45);
}

.card i {
    font-size: 26px;
    color: var(--orange);
}

.card h3 {
    font-size: 21px;
    color: var(--navy);
    margin: 12px 0 6px;
}

.card p {
    color: var(--muted);
    font-size: 15.5px;
}

.card a {
    color: var(--orange-dark);
    text-decoration: none;
    font-weight: 600;
}

.card a:hover {
    text-decoration: underline;
}

.dark-section .card {
    background: var(--navy-700);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.dark-section .card:hover {
    background: #0d5a94;
    border-color: rgba(56, 199, 255, .55);
}

.dark-section .card i {
    color: var(--gold);
}

.dark-section .card h3 {
    color: #fff;
}

.dark-section .card p {
    color: #cfe0ee;
}

.dark-section .card a {
    color: var(--cyan);
}

.product-badge {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-family: var(--font-head);
    font-weight: 700;
}

/* Solutions */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.solution {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.solution:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .4);
}

.number {
    font-weight: 700;
    color: var(--orange);
    font-family: var(--font-head);
    font-size: 15px;
    letter-spacing: 1px;
}

.solution h3 {
    font-size: 22px;
    color: var(--navy);
    margin: 8px 0 6px;
}

.solution p {
    color: var(--muted);
    font-size: 16px;
}

/* Technology grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 16px;
}

/* Icon + name card. The name is rendered beneath the icon (previously it lived
 * only in the title/aria-label), and the category is disclosed on hover. Space
 * for the category is always reserved, so the tile never grows on hover. */
.tech {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    min-height: 138px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--white), #f6f8fb);
    color: var(--navy);
    text-align: center;
    transition: transform .28s cubic-bezier(.2, .65, .4, 1), box-shadow .28s ease, border-color .2s, color .25s;
}

.tech:hover,
.tech:focus-visible {
    border-color: var(--orange);
    box-shadow: 0 14px 30px rgba(8, 62, 104, .15);
    transform: translateY(-5px);
    color: var(--orange);
}

.tech-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    transition: transform .3s cubic-bezier(.2, .65, .4, 1);
}

.tech:hover .tech-icon,
.tech:focus-visible .tech-icon {
    transform: scale(1.14) translateY(-2px);
}

/* Brand SVGs are vendored with fill="currentColor", so they tint with the tile;
 * the Font Awesome fallbacks inherit color the same way. The icon itself eases
 * up in scale to make the hover feel responsive. */
.tech svg,
.tech img {
    width: 46px;
    height: 46px;
}

.tech svg {
    fill: currentColor;
}

.tech i {
    font-size: 40px;
}

.tech-name {
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.25;
    transition: color .25s;
    /* Long names ("Microsoft Azure", "OpenTelemetry") wrap instead of
     * overflowing the tile. */
    overflow-wrap: anywhere;
}

.tech:hover .tech-name,
.tech:focus-visible .tech-name {
    color: var(--orange);
}

/* Category slides in on hover as a small uppercase label. */
.tech-cat {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
}

.tech:hover .tech-cat,
.tech:focus-visible .tech-cat {
    opacity: 1;
    transform: none;
}

/* Light sweep travelling edge to edge across the tile on hover. The band is
 * wider than the tile and clipped by .tech's overflow, so it reads as a
 * diagonal sheen rather than a fading tint. */
.tech-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 25%, rgba(242, 101, 34, .16) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .6s cubic-bezier(.2, .65, .4, 1);
}

.tech:hover .tech-shine,
.tech:focus-visible .tech-shine {
    transform: translateX(130%);
}

/* Industries */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.industry {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.industry:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.industry i {
    color: var(--orange);
}

.industry span {
    color: var(--navy);
    font-weight: 600;
    font-family: var(--font-head);
}

/* Call to action */
.cta-section {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 100px 6%;
}

.cta-section h2 {
    font-size: clamp(30px, 4.5vw, 52px);
    margin: 12px;
    color: #fff;
}

.cta-section p {
    color: #cfe0ee;
    margin-bottom: 28px;
    font-size: 18px;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer {
    background: var(--navy-900);
    color: #fff;
    padding: 64px 7%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

footer strong {
    display: block;
    margin-bottom: 15px;
    color: #fff;
    font-family: var(--font-head);
    font-size: 16px;
    letter-spacing: .5px;
}

footer a {
    display: block;
    color: #c2d2e2;
    text-decoration: none;
    margin: 8px 0;
    font-size: 15px;
}

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

footer p {
    color: #a9bdd0;
    font-size: 15px;
}

footer .brand-image {
    height: 50px;
    margin-bottom: 14px;
}

footer .brand-image img {
    width: 230px;
    max-height: 50px;
}

footer .social {
    display: flex;
    gap: 14px;
    margin-top: 16px;
}

footer .social a {
    display: inline;
    color: #c2d2e2;
    font-size: 17px;
    margin: 0;
}

footer .social a:hover {
    color: var(--gold);
}

.copyright {
    background: #04213a;
    color: #7e93a8;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    padding: 20px;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------
   Interior page hero + detail
   --------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 50%, var(--navy-700) 100%);
    background-size: 220% 220%;
    animation: heroDrift 24s ease-in-out infinite;
    color: #fff;
    padding: 100px 8%;
    text-align: center;
    overflow: hidden;
}

.page-hero h1 {
    font-size: clamp(34px, 5vw, 60px);
    color: #fff;
    margin: 14px 0;
}

.page-hero p {
    max-width: 700px;
    margin: auto;
    color: #cfe0ee;
    font-size: 18px;
}

.page-hero .eyebrow {
    color: var(--gold);
}

.detail-box {
    max-width: 900px;
    margin: auto;
    font-size: 18px;
}

.detail-box h2 {
    color: var(--navy);
    font-size: 32px;
    margin: 40px 0 10px;
}

.detail-box p {
    color: var(--muted);
}

.process {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.process span {
    padding: 10px 18px;
    border-radius: 99px;
    background: #fdf0e8;
    color: var(--orange-dark);
    font-weight: 600;
    font-family: var(--font-head);
    font-size: 14.5px;
    border: 1px solid #f7d9c6;
}

/* ---------------------------------------------------------------------
   Product pages
   --------------------------------------------------------------------- */
.product-hero {
    background: var(--navy);
    color: #fff;
    padding: 100px 6%;
}

.product-hero-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.platform-pill {
    display: inline-block;
    font-size: 11.5px;
    letter-spacing: 2px;
    color: var(--navy);
    background: var(--gold);
    padding: 8px 16px;
    border-radius: 99px;
    font-weight: 700;
    font-family: var(--font-head);
    text-transform: uppercase;
}

.product-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.08;
    margin: 20px 0;
    color: #fff;
}

.product-hero h1 span {
    color: var(--gold);
}

.product-hero p {
    font-size: 18px;
    color: #cfe0ee;
}

.dashboard {
    background: var(--navy-700);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.dash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-family: var(--font-head);
    margin-bottom: 16px;
}

.dash-top span {
    color: #7dcba7;
    font-size: 13px;
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7dcba7;
    margin-right: 6px;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.metric {
    background: rgba(255, 255, 255, .07);
    border-radius: 10px;
    padding: 14px;
}

.metric small {
    display: block;
    color: #cfe0ee;
    font-size: 12px;
}

.metric strong {
    font-size: 22px;
    color: #fff;
    font-family: var(--font-head);
}

.chart {
    height: 90px;
    margin-top: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(56, 199, 255, .35), rgba(56, 199, 255, .05));
    border: 1px solid rgba(56, 199, 255, .25);
}

.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.cap-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.cap-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .4);
}

.cap-card i {
    font-size: 24px;
    color: var(--orange);
}

.cap-card h3 {
    font-size: 19px;
    color: var(--navy);
    margin: 10px 0 6px;
}

.cap-card p {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
}

.workflow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 1100px;
    margin: auto;
}

.workflow span {
    padding: 10px 18px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    font-weight: 600;
    font-family: var(--font-head);
    font-size: 14px;
}

.workflow b {
    color: var(--orange);
    font-size: 18px;
}

.benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 1000px;
    margin: auto;
}

.benefit {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--ink);
    font-size: 17px;
}

.benefit i, .accent {
    color: var(--orange);
}

.tech-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1100px;
    margin: auto;
}

.tech-cloud span {
    padding: 10px 18px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    font-weight: 600;
    font-family: var(--font-head);
    font-size: 14px;
    transition: border-color .18s, color .18s;
}

.tech-cloud span:hover {
    border-color: var(--orange);
    color: var(--orange-dark);
}

.product-cta {
    background: var(--orange);
    color: #fff;
    text-align: center;
    padding: 90px 6%;
}

.product-cta h2 {
    font-size: clamp(28px, 4vw, 46px);
    margin: 12px;
    color: #fff;
}

.product-cta p {
    color: #fff3ea;
    margin-bottom: 26px;
    font-size: 18px;
}

.product-cta .eyebrow {
    color: #fff;
}

.product-cta .btn.primary {
    background: #fff;
    color: var(--orange-dark);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.product-cta .btn.primary:hover {
    background: #ffe9dd;
}

/* ---------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------- */
.contact-form {
    max-width: 920px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px;
    box-shadow: var(--shadow-sm);
}

.contact-form label, .login-card label {
    font-weight: 600;
    color: var(--navy);
    font-size: 14.5px;
    font-family: var(--font-head);
}

.contact-form input, .contact-form select, .contact-form textarea, .login-card input {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fbfcfd;
}

.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .login-card input:focus {
    outline: 2px solid rgba(242, 101, 34, .4);
    border-color: var(--orange);
}

.contact-form .full {
    grid-column: 1 / -1;
}

.success {
    grid-column: 1 / -1;
    background: #e7f8ed;
    color: #176b38;
    padding: 14px;
    border-radius: 9px;
}

/* ---------------------------------------------------------------------
   Login + admin
   --------------------------------------------------------------------- */
.login-body {
    min-height: 100vh;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
}

.login-card {
    background: #fff;
    padding: 40px;
    border-radius: 18px;
    width: min(420px, 92vw);
    display: grid;
    gap: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}

.login-card h1 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
}

.login-card .brand {
    justify-content: center;
}

.login-card small {
    color: var(--muted);
    line-height: 1.5;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.admin-grid > div {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-grid strong, .admin-grid span {
    display: block;
}

.admin-grid strong {
    font-size: 34px;
    color: var(--orange);
    font-family: var(--font-head);
}

.admin-grid span {
    color: var(--muted);
    font-size: 14px;
}

#messages pre {
    background: var(--navy);
    color: #dcecff;
    padding: 18px;
    border-radius: 12px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Animations: scroll reveal, hero motion, hover micro-interactions
   --------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .65, .4, 1),
                transform .7s cubic-bezier(.2, .65, .4, 1),
                box-shadow .2s, border-color .2s, background .2s;
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

/* Hero: continuously breathing orb + drifting gradient */
.orb {
    animation: orbPulse 6s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .85;
    }
    50% {
        transform: scale(1.14);
        opacity: 1;
    }
}

.hero {
    background-size: 200% 200%;
    animation: heroDrift 20s ease-in-out infinite;
}

@keyframes heroDrift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.architecture div {
    animation: archFloat 5s ease-in-out infinite;
}

.architecture div:nth-child(2) { animation-delay: .4s; }
.architecture div:nth-child(3) { animation-delay: .8s; }
.architecture div:nth-child(4) { animation-delay: 1.2s; }
.architecture div:nth-child(5) { animation-delay: 1.6s; }

@keyframes archFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

/* Hover micro-interactions */
.card i,
.cap-card i,
.feature-grid i,
.industry i {
    transition: transform .25s cubic-bezier(.2, .65, .4, 1), color .2s;
    display: inline-block;
}

.card:hover i,
.cap-card:hover i,
.feature-grid article:hover i,
.industry:hover i {
    transform: scale(1.18) rotate(-6deg);
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .6s;
}

.btn:hover::after {
    transform: translateX(120%);
}

nav a:not(.nav-cta)::after {
    content: '';
    display: block;
    height: 2px;
    width: 0;
    margin-top: 4px;
    background: var(--orange);
    transition: width .25s cubic-bezier(.2, .65, .4, 1);
}

nav a:not(.nav-cta):hover::after {
    width: 100%;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(242, 101, 34, .42);
}

.solution:hover .number {
    color: var(--navy);
}

/* ---------------------------------------------------------------------
   Testimonial slider
   --------------------------------------------------------------------- */
.slider {
    max-width: 840px;
    margin: auto;
    position: relative;
    /* Clip the offscreen slides in the translating track. Without this the
       track overflows the page and the browser draws a horizontal scrollbar. */
    overflow-x: clip;
}

.slides {
    display: flex;
    transition: transform .6s cubic-bezier(.2, .65, .4, 1);
}

.slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 46px 48px 40px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    margin: 0;
    position: relative;
}

.quote-mark {
    position: absolute;
    top: 6px;
    left: 26px;
    font-size: 90px;
    line-height: 1;
    color: rgba(242, 101, 34, .16);
    font-family: var(--font-head);
}

.slide blockquote {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink);
    position: relative;
}

.slide figcaption {
    display: flex;
    gap: 14px;
    align-items: center;
}

.avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
}

.slide figcaption > span:last-child strong {
    display: block;
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 16px;
}

.slide figcaption > span:last-child small {
    color: var(--muted);
    font-size: 14px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.rating .stars {
    color: var(--gold);
    font-size: 20px;
    letter-spacing: 3px;
}

.rating strong {
    color: var(--navy);
    font-family: var(--font-head);
    font-size: 20px;
}

.rating small {
    color: var(--muted);
    font-size: 14px;
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

.slider-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s, border-color .2s;
}

.slider-btn:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
    transform: scale(1.08);
}

.dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--line);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.dot:hover {
    background: var(--orange-dark);
}

.dot.active {
    background: var(--orange);
    transform: scale(1.3);
}

/* ---------------------------------------------------------------------
   Reduced motion: respect the user's OS preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --- Mobile burger menu --------------------------------------------------
 * The button and its panel are built by js/animations.js from the page's own
 * <nav> links, so every page gets the same menu with no duplicated markup.
 * Hidden on desktop; it takes over at the 900px breakpoint where the inline
 * nav links disappear. The base rule has to sit above the Responsive section
 * below — same-specificity rules are decided by source order, so a display:none
 * declared after the media query would win at every width. */
.burger {
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    margin-left: 12px;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
    cursor: pointer;
    flex: 0 0 auto;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(8, 62, 104, .28);
    transition: transform .2s cubic-bezier(.2, .65, .4, 1), box-shadow .25s ease, background .35s ease;
}

/* Light sheen sweeps across the button on hover/focus. */
.burger::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transition: left .5s cubic-bezier(.2, .65, .4, 1);
}

.burger:hover::before,
.burger:focus-visible::before {
    left: 130%;
}

.burger:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 9px 22px rgba(242, 101, 34, .4);
}

.burger:active {
    transform: scale(.93);
}

.burger span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform .32s cubic-bezier(.2, .65, .4, 1), opacity .18s ease, background .3s ease;
}

.burger:hover span {
    background: var(--gold);
}

/* Open state: the button flips to the brand orange and the buns fold into an X. */
.burger.active {
    background: linear-gradient(150deg, var(--orange), var(--orange-dark));
    box-shadow: 0 9px 24px rgba(242, 101, 34, .45);
}

.burger.active span {
    background: var(--white);
}

.burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    nav a {
        display: none;
    }

    .burger {
        display: inline-flex;
    }

    /* switcher moves in-flow, beside the burger */
    .navbar {
        padding-right: 6%;
    }

    .lang-switch {
        position: static;
        transform: none;
        margin-left: auto;
    }

    .topbar .hotline .full-note {
        display: none;
    }

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

    .cards, .feature-grid, .industry-grid, .admin-grid, .cap-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .solution-grid, .benefits {
        grid-template-columns: 1fr;
    }

    footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .cards, .feature-grid, .industry-grid, .admin-grid, .contact-form, .cap-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 65px 5%;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-slide {
        min-height: 500px;
    }

    /* Ken Burns stays subtler on a phone to limit repaint cost. */
    .hero-slide.active .hero-slide-bg {
        transform: scale(1.1);
    }

    .hero-slide .hero-grid {
        padding: 80px 5% 100px;
    }

    .section-head h2 {
        font-size: 30px;
    }

    .cta-section h2 {
        font-size: 34px;
    }

    footer {
        grid-template-columns: 1fr;
    }

    .brand-image img {
        width: 175px;
    }

    /* Technology tiles tighten up so three still fit per row on a phone. */
    .tech-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
    }

    .tech {
        padding: 16px 8px;
        min-height: 118px;
        border-radius: 14px;
        gap: 8px;
    }

    .tech-icon {
        height: 40px;
    }

    .tech svg,
    .tech img {
        width: 38px;
        height: 38px;
    }

    .tech i {
        font-size: 32px;
    }

    .tech-name {
        font-size: 12.5px;
    }
}

/* ---------------------------------------------------------------------
   Dynamic UI: page transitions, scroll progress, header shrink,
   floating WhatsApp button
   --------------------------------------------------------------------- */

/* --- Page entrance: staggered rise/fade for the arriving page -----------
 * The .page-enter class is added to <html> by js/page-transition.js as soon
 * as the document is interactive, so the first paint already animates. */
.page-enter .navbar {
    animation: fxDown .55s cubic-bezier(.2, .65, .4, 1) both;
}

.page-enter main,
.page-enter #app {
    animation: fxRise .6s cubic-bezier(.2, .65, .4, 1) both;
    animation-delay: .06s;
}

.page-enter footer,
.page-enter .copyright {
    animation: fxFade .6s ease both;
    animation-delay: .14s;
}

.page-enter .page-hero .eyebrow {
    animation: fxRise .5s cubic-bezier(.2, .65, .4, 1) .16s both;
}

.page-enter .page-hero h1 {
    animation: fxRise .6s cubic-bezier(.2, .65, .4, 1) .26s both;
}

.page-enter .page-hero p {
    animation: fxRise .6s cubic-bezier(.2, .65, .4, 1) .36s both;
}

@keyframes fxDown {
    from { opacity: 0; transform: translateY(-26px); }
    to   { opacity: 1; transform: none; }
}

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

@keyframes fxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Page departure: navy curtain wiped by an orange light blade ------- */
#page-fx {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-700) 100%);
    transform: scaleY(0);
    transform-origin: top;
}

#page-fx.out {
    animation: fxCover .48s cubic-bezier(.7, 0, .3, 1) forwards;
}

.page-fx-blade {
    position: absolute;
    top: -40%;
    left: -70%;
    width: 46%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(242, 101, 34, .55) 45%, rgba(249, 161, 47, .35) 62%, transparent);
    filter: blur(2px);
}

#page-fx.out .page-fx-blade {
    animation: bladeSweep .48s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes fxCover {
    from { transform: scaleY(0); transform-origin: top; }
    to   { transform: scaleY(1); transform-origin: top; }
}

@keyframes bladeSweep {
    from { left: -70%; }
    to   { left: 130%; }
}

/* --- Scroll progress bar ---------------------------------------------- */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 60;
    background: linear-gradient(90deg, var(--orange), var(--gold));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* --- Sticky header compacts once the page is scrolled ------------------ */
.navbar {
    transition: height .25s cubic-bezier(.2, .65, .4, 1), box-shadow .25s;
}

.navbar.compact {
    height: 62px;
    box-shadow: 0 8px 22px rgba(8, 62, 104, .16);
}

.navbar.compact .brand-image img {
    width: 185px;
}

/* --- Floating WhatsApp button ----------------------------------------- */
.wa-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    display: flex;
    align-items: center;
    height: 58px;
    width: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 26px rgba(18, 140, 74, .45);
    text-decoration: none;
    transition: width .3s cubic-bezier(.2, .65, .4, 1),
                border-radius .3s cubic-bezier(.2, .65, .4, 1),
                box-shadow .25s,
                transform .25s;
    animation: waFloat 4s ease-in-out infinite;
}

.wa-fab:hover,
.wa-fab:focus-visible {
    width: 212px;
    border-radius: 34px;
    box-shadow: 0 14px 34px rgba(18, 140, 74, .55);
    transform: translateY(-2px);
}

.wa-fab svg {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin: 0 14px;
}

.wa-fab .wa-label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s cubic-bezier(.2, .65, .4, 1), opacity .22s;
}

.wa-fab:hover .wa-label,
.wa-fab:focus-visible .wa-label {
    max-width: 140px;
    opacity: 1;
}

/* Expanding pulse ring. Sits behind the button so it is not clipped. */
.wa-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 2px solid #25d366;
    animation: waPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes waPulse {
    0%   { transform: scale(1);   opacity: .65; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes waFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.wa-greet {
    position: fixed;
    right: 94px;
    bottom: 34px;
    z-index: 8999;
    max-width: 250px;
    padding: 13px 16px;
    background: #fff;
    color: var(--muted);
    border-radius: 14px 14px 4px 14px;
    box-shadow: var(--shadow-md);
    font-size: 14px;
    cursor: pointer;
    animation: greetIn .5s cubic-bezier(.2, .65, .4, 1) both;
}

.wa-greet strong {
    display: block;
    color: var(--navy);
    font-size: 15px;
}

.wa-greet.hide {
    animation: greetOut .3s ease both;
}

@keyframes greetIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes greetOut {
    to { opacity: 0; transform: translateY(8px) scale(.97); }
}

@media (max-width: 600px) {
    .wa-greet {
        right: 76px;
        bottom: 30px;
        max-width: 190px;
        font-size: 13px;
    }
}

.mobile-nav {
    display: block;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(330px, 86vw);
    /* The sticky page header (z-index 9502) overlays the panel's top edge so
     * its burger stays clickable while open; this padding clears it. The
     * mobile header carries extra breathing room, so clear its full height. */
    padding: 128px 0 40px;
    background:
        radial-gradient(circle at 100% 0, rgba(242, 101, 34, .1), transparent 52%),
        linear-gradient(180deg, var(--white) 0%, #f8fafc 100%);
    box-shadow: -14px 0 44px rgba(5, 43, 73, .2);
    overflow-y: auto;
    z-index: 9501;
    transform: translateX(102%);
    transition: transform .38s cubic-bezier(.7, 0, .3, 1);
    visibility: hidden;
}

.mobile-nav.open {
    transform: translateX(0);
    visibility: visible;
}

/* Brand header: logo on the left, explicit close button on the right. The
 * sticky page header sits above the panel (z-index 9502) so its own burger
 * stays clickable too, but a button inside the panel is what mobile users
 * reach for first. */
.mn-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px 16px;
    border-bottom: 1px solid var(--line);
    margin: 0 16px 14px;
}

.mn-eyebrow {
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--orange);
}

.mn-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--navy);
    font-size: 17px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.2, .65, .4, 1), background .2s ease, color .2s ease;
}

.mn-close:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
    transform: rotate(90deg);
}

.mn-close:active {
    transform: scale(.9);
}

.mn-list {
    padding: 0 16px;
}

.mobile-nav a.mn-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    color: var(--ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    position: relative;
    opacity: 0;
    transform: translateX(22px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .65, .4, 1),
                background .22s ease, color .22s ease;
}

/* Icon chip: muted navy tile that warms up on hover/active. */
.mobile-nav a.mn-link .mn-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--navy);
    font-size: 15px;
    transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2, .65, .4, 1);
}

.mobile-nav a.mn-link:hover {
    color: var(--navy);
    background: rgba(8, 62, 104, .06);
}

.mobile-nav a.mn-link:hover .mn-ico {
    background: rgba(242, 101, 34, .14);
    color: var(--orange);
    transform: scale(1.07);
}

/* Scroll-spy marker: the section currently in view gets an orange rail and a
 * filled chip, so the menu carries information instead of being decoration. */
.mobile-nav a.mn-link.active {
    background: rgba(242, 101, 34, .1);
    color: var(--orange-dark);
    font-weight: 600;
}

.mobile-nav a.mn-link.active .mn-ico {
    background: var(--orange);
    color: var(--white);
}

.mobile-nav a.mn-link.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: var(--orange);
}

/* Suppress the inline-nav underline pseudo-element inside the panel. */
.mobile-nav a::after {
    display: none;
}

.mobile-nav.open a.mn-link {
    opacity: 1;
    transform: none;
}

/* Staggered entrance for the links as the panel slides in. */
.mobile-nav.open a.mn-link:nth-child(1) { transition-delay: .09s; }
.mobile-nav.open a.mn-link:nth-child(2) { transition-delay: .15s; }
.mobile-nav.open a.mn-link:nth-child(3) { transition-delay: .21s; }
.mobile-nav.open a.mn-link:nth-child(4) { transition-delay: .27s; }
.mobile-nav.open a.mn-link:nth-child(5) { transition-delay: .33s; }
.mobile-nav.open a.mn-link:nth-child(6) { transition-delay: .39s; }
.mobile-nav.open a.mn-link:nth-child(7) { transition-delay: .45s; }
.mobile-nav.open a.mn-link:nth-child(8) { transition-delay: .51s; }

/* The consultation CTA becomes a full-width gradient button rather than
 * another list row, so it reads as the primary action. */
.mobile-nav a.mn-cta {
    margin: 22px 4px 0;
    justify-content: center;
    padding: 15px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(242, 101, 34, .32);
}

.mobile-nav a.mn-cta .mn-ico {
    background: rgba(255, 255, 255, .22);
    color: var(--white);
}

.mobile-nav a.mn-cta:hover {
    background: linear-gradient(135deg, var(--orange-dark), var(--orange));
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(242, 101, 34, .42);
}

.mobile-nav a.mn-cta:hover .mn-ico {
    background: rgba(255, 255, 255, .3);
    color: var(--white);
}

.mobile-nav a.mn-cta.active::before {
    display: none;
}

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(5, 27, 41, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s ease, visibility .38s;
}

.mobile-nav-backdrop.open {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   About page
   --------------------------------------------------------------------- */
.page-hero .breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    letter-spacing: .5px;
    margin-bottom: 26px;
}

.page-hero .breadcrumb a {
    color: var(--cyan);
}

.page-hero .breadcrumb i {
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
}

.page-hero .breadcrumb span {
    color: rgba(255, 255, 255, .75);
}

.vm-grid article p {
    font-size: 16px;
}

/* Narrative + image split */
.about-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.about-split h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    color: var(--navy);
    margin: 10px 0 16px;
    line-height: 1.15;
}

.about-split p {
    color: var(--muted);
    font-size: 17px;
}

.about-facts {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.about-facts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink);
    font-size: 16px;
}

.about-facts i {
    margin-top: 5px;
}

.about-media {
    position: relative;
}

.about-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* Floating stat card overlapping the image corner, in the spirit of the
 * reference page's CEO-portrait + caption block. */
.about-media-badge {
    position: absolute;
    left: -18px;
    bottom: -22px;
    background: var(--white);
    border-radius: var(--radius);
    border-top: 3px solid var(--orange);
    box-shadow: var(--shadow-md);
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 290px;
}

.about-media-badge strong {
    font-family: var(--font-head);
    font-size: 40px;
    color: var(--orange);
    line-height: 1;
}

.about-media-badge span {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

/* Timeline / milestones ("Our Great Story") — a vertical centre line with
 * cards alternating sides, collapsing to a single left-aligned rail under
 * 860px. */
.timeline {
    position: relative;
    max-width: 980px;
    margin: auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--orange), var(--navy));
    transform: translateX(-50%);
}

.tl-item {
    position: relative;
    width: 50%;
    padding: 0 40px 44px 0;
    text-align: right;
}

.tl-item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 44px 40px;
    text-align: left;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-item::after {
    content: '';
    position: absolute;
    top: 6px;
    right: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--orange);
    z-index: 1;
}

.tl-item:nth-child(even)::after {
    right: auto;
    left: -7px;
}

.tl-place {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 6px;
}

.tl-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tl-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .4);
}

.tl-year {
    display: block;
    font-family: var(--font-head);
    font-size: 30px;
    color: var(--navy);
    line-height: 1;
}

.tl-card h3 {
    font-size: 19px;
    color: var(--navy);
    margin: 8px 0 6px;
}

.tl-card p {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
}

/* Core values */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 20px;
}

.value {
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 34px 22px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.value:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(242, 101, 34, .4);
}

.value-ico {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(8, 62, 104, .08), rgba(242, 101, 34, .12));
    color: var(--orange);
    font-size: 24px;
    transition: transform .22s cubic-bezier(.2, .65, .4, 1), background .22s, color .22s;
}

.value:hover .value-ico {
    transform: scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, var(--navy), var(--orange));
    color: #fff;
}

.value h3 {
    font-size: 19px;
    color: var(--navy);
    margin: 0 0 8px;
}

.value p {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0;
}

.cta-accent {
    color: var(--gold);
}

/* About page — responsive */
@media (max-width: 980px) {
    .about-split {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .about-media-badge {
        left: 18px;
    }
}

@media (max-width: 860px) {
    .timeline::before {
        left: 18px;
    }

    .tl-item,
    .tl-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 36px 46px;
        text-align: left;
    }

    .tl-item::after,
    .tl-item:nth-child(even)::after {
        left: 13px;
        right: auto;
    }
}