/* Keep Google's own widget out of sight: it stays mounted (so translation
   keeps working) but no bar or icon of its own is ever shown. */
#google_translate_element,
#google_translate_element .skiptranslate,
body > .skiptranslate,
.goog-te-banner-frame,
.skiptranslate .goog-te-banner-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
#google_translate_element iframe,
body > iframe[name="google_translate_iframe"] {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    display: block !important;
    z-index: -2147483647 !important;
}

/* notranslate / translate="no" in the markup is the real guard; this is the
   belt-and-braces fallback for browsers that ignore the attribute. */
.language-switcher {
    position: relative;
    display: flex;
    flex-shrink: 0;
}

/* --- trigger button (globe) --- */
.lang-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--icon);
    color: var(--white);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
    background-color: var(--hover);
}

.lang-btn-globe {
    margin: auto;
    font-size: 22px;
    line-height: 1;
    color: var(--white);
}

/* Google writes `position:relative; top:40px` onto <body> to reserve room for
   its own hidden banner, which shifts the whole page down and fakes a second
   scrollbar. The banner is never shown, so the offset is always removed.
   `!important` beats the inline style so this holds even before JS runs. */
body {
    top: 0 !important;
}

/* --- dropdown --- */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    width: 11rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;
    background: var(--about-title);
    border: 1px solid var(--text-color3);
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
    backdrop-filter: blur(5px);
    z-index: 1000;
}

.lang-dropdown.show {
    display: block;
}

.lang-dropdown li {
    list-style: none;
    padding: 6px 10px;
    border-radius: 6px;
}

.lang-dropdown li:hover {
    background-color: var(--primary);
}

.lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-color2);
}

.lang-dropdown li:hover a,
.lang-option.active a {
    color: var(--white);
}

.lang-dropdown .flag-icon {
    width: 22px;
    height: 16px;
    margin-right: 4px;
    object-fit: cover;
    border-radius: 2px;
}

.lang-name {
    color: inherit;
}

.lang-option.active .lang-name {
    color: var(--primary);
    font-weight: 600;
}

.lang-option.active:hover .lang-name {
    color: var(--white);
}

/* The mobile switcher lives in the hamburger bar, so hide it on desktop. */
.responsive_menu_sec .language-switcher {
    display: none;
}

/*

Colors:
    Primary colour      : #b2e0dc
    Secondary colour    : #FC7E2F
    Tertiary colour     : #105558
	Body 		        : #e7eaf6 / rgb(21 29 30 / 99%)

Fonts: Montserrat

Table OF Contents
------------------------------------
01 -> GENERAL
02 -> Navber
02 -> BANNER

04 -> HOME
------
------
------
02 -> FOOTER
06 -> ABOUT
------
------
------
07 -> SERVICE WE PROVIDE
------
------
------
08 -> PROJECT start
------
------
------
09 -> CONTACT
------
------
------
10 -> FAQ
------
------
------
/*=========================================================
	01 -> GENERAL
===========================================================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    font-family: "Poppins", sans-serif;
    font-display: swap;
}
html {
    overflow-x: hidden;
}

body {
    background-color: var(---bg);
    /* blueprint grid spans the whole page — dark sections paint their own
       backgrounds over it, so it shows wherever the page surface shows */
    background-image:
        linear-gradient(rgb(0 84 97 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(0 84 97 / 0.045) 1px, transparent 1px);
    background-size: 92px 92px;
    color: var(--text-color);
    /* clip, not hidden — `hidden` coerces overflow-y to `auto`, which turns
       body into a second scroll container (double scrollbar + dead scroll
       area under the footer). `clip` never scrolls. */
    overflow-x: clip;
    scroll-behavior: smooth;
    /* whitespace text nodes between block children create anonymous line
       boxes = a ~9px light strip under the footer. flex column discards
       whitespace runs so the page ends flush at the copyright bar. */
    display: flex;
    flex-direction: column;
}

main {
    /* stop child margins (e.g. the hero .row) collapsing above the page —
       that collapse left a dead band at the very top */
    display: flow-root;
}
body[dir="rtl"] {
    text-align: right;
}

section {
    box-sizing: border-box;
}

ul li {
    text-decoration: none;
    list-style: none;
}

a {
    text-decoration: none;
}
p {
    margin: 0;
}
input {
    border: none;
    background: transparent;
    border-bottom: 1px solid rgb(102, 119, 55);
    border-radius: 5px;
    outline: none;
    width: 100%;
    color: white;
}

textarea {
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    border-radius: 5px;
    outline: none;
    width: 100%;
    color: white;
}

img {
    max-width: 100%;
    max-height: 100%;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-color3);
    border-radius: 20px;
}

::selection {
    background: var(--primary);
}

:root {
    --main: #005461;
    ---bg: #f4f4f4;
    --primary: #017a82;
    --primary-light: #b2e0dc;
    --secondary: #005461;
    --tertiary: #00b7b5;
    --white: #fff;
    --black: #000;
    --big-font: 3.5rem;
    --medium-font: 2.8rem;
    --small-font: 1.2rem;
    --p-font: 0.941rem;
    --text-color: #437477;
    --text-color2: #696969;
    --text-color3: #3eb5cf;
    --text-color4: #ceefea;
    --hover: #008b93;
    --navbar: var(--main);
    --icon: var(--tertiary);
    --footer-bg: #000000;
    --bisplay: block;
    transition: all 0.5s ease;
    --global-header-color: #3eb5cf;
    --box-shadow:
        rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    --about-title: #e7eaf680;
    --testimonial-color: #ceeaed9d;
    --service-list-color: #2a293e;
    --global-text-btn: #105558;
}

.darkMode {
    ---bg: rgb(21 29 30 / 99%);
    --black: #fff;

    --text-color: cadetblue;
    --text-color2: white;
    --text-color3: #3ea3ba;
    --text-color4: white;
    --footer-bg: #000000;
    --bisplay: none;
    transition: all 0.5s ease;
    --global-header-color: #b2e0dc;
    --about-title: rgba(21, 29, 30, 0.493);
    --testimonial-color: var(--primary);
    --service-list-color: var(--primary);
    --global-text-btn: #b2e0dc;
}

/* shared CTA — soft gradient pill; icons slide a touch on hover.
   `all: unset` clears native <button> chrome; the legacy <span> sweep
   element is hidden and kept only for backwards compatibility. */
.global-btn {
    all: unset;
    box-sizing: border-box; /* all:unset dropped this — width:100% + padding overflowed */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding: 0.95em 2.2em;
    font-size: var(--small-font);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(
        115deg,
        var(--primary) 5%,
        var(--tertiary) 125%
    );
    box-shadow: 0 14px 30px -12px rgb(0 183 181 / 55%);
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
}

.global-btn > span {
    display: none;
}

.global-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -14px rgb(0 183 181 / 65%);
}

.global-btn:active {
    transform: translateY(0);
}

.global-btn i,
.global-btn svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.global-btn:hover i,
.global-btn:hover svg {
    transform: translateX(4px);
}

/* All section headers follow the "Our Services" style —
   big bold ink title + italic accent word. */
.global-header {
    color: #10333a;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.global-header em {
    font-style: italic;
    color: var(--primary);
}

.darkMode .global-header {
    color: #e9f6f4;
}

.darkMode .global-header em {
    color: var(--tertiary);
}

/* dual mode part start */
#phone-switch-them {
    display: none;
}

.switch_theme {
    height: 40px;
    width: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    border: none;
}
.switch_theme:hover {
    background: var(--hover);
}

.switch_theme svg {
    fill: var(--white);
    margin: auto;
}

.switch_theme svg:last-child {
    display: none;
}

.darkMode .switch_theme svg:first-child {
    display: none;
}

.darkMode .switch_theme svg:last-child {
    display: block;
}

/* dual mode part end */

/* start back to top */
#back-to-top-btn {
    display: none;
    position: fixed;
    right: 45px;
    bottom: 60px;
    background-color: var(--text-color3);
    color: var(--white);
    border: none;
    cursor: pointer;
    /* fixed square + text-center/line-height — padding made the "circle"
       an ellipse with the glyph pushed off-centre */
    width: 54px;
    height: 54px;
    padding: 0;
    text-align: center;
    line-height: 54px;
    border-radius: 50%;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#back-to-top-btn:hover {
    transition: 0.3s;
    border-radius: 20px;
    background-color: black;
}

/*=========================================================
	02 -> Navber
===========================================================*/
nav {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 10%;
    transition: 0.2s;
}

.responsive_menu_sec {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shadow nav {
    background: var(---bg);
    border: 1px solid var(--text-color3);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: 1s;
    padding: 10px;
}

/* Inner pages carry the white logo over the dark banner — the nav itself
   stays transparent up top (painting it created a visible rectangle seam
   over the banner gradient). Only the SCROLLED state needs the dark bar,
   since .shadow would otherwise turn it light and swallow the white logo. */
header.is-inner.shadow nav {
    background: linear-gradient(115deg, #06282e, #005461 55%, #01767d);
    border-color: rgb(178 224 220 / 24%);
}

/* --- mobile tab bar — replaces the hamburger dropdown on ≤991px --- */
.mnav {
    display: none;
}

@media (max-width: 991px) {
    :root {
        --mobile-nav-item-height: clamp(48px, 7svh, 58px);
        --mobile-nav-edge-gap: clamp(8px, 2svh, 14px);
        --mobile-nav-clearance: calc(
            var(--mobile-nav-item-height) + 2.5rem +
                env(safe-area-inset-bottom, 0px)
        );
        --mobile-header-clearance: clamp(4rem, 10svh, 4.75rem);
    }

    /* floating Material-3-style tab bar — sits off the edges like a native
       app nav, blurred glass surface, pill highlight on the active icon */
    .mnav {
        position: fixed;
        z-index: 997;
        top: auto; /* it's a <nav> — override the shared `nav{top:0}` rule
                      or the bar stretches into a full-viewport overlay */
        right: 14px;
        left: 14px;
        width: auto; /* shared `nav{width:100%}` would push the bar 14px off-screen */
        box-sizing: border-box;
        bottom: calc(
            var(--mobile-nav-edge-gap) + env(safe-area-inset-bottom, 0px)
        );
        display: flex;
        align-items: stretch;
        gap: 4px;
        padding: 5px;
        border: 1px solid rgb(255 255 255 / 45%);
        border-radius: 26px;
        background: rgb(255 255 255 / 82%);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        box-shadow:
            0 18px 44px -16px rgb(0 60 70 / 30%),
            inset 0 1px 0 rgb(255 255 255 / 60%);
    }

    .darkMode .mnav {
        background: rgb(10 30 34 / 78%);
        border-color: rgb(126 224 222 / 16%);
        box-shadow:
            0 18px 44px -16px rgb(0 0 0 / 55%),
            inset 0 1px 0 rgb(255 255 255 / 6%);
    }

    .mnav-item {
        display: flex;
        flex: 1 1 0;
        min-width: 0; /* let cells shrink below content width on tiny screens */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--mobile-nav-item-height);
        padding: 4px 2px;
        border-radius: 18px;
        color: var(--text-color2);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition:
            color 0.25s ease,
            transform 0.15s ease;
    }

    .mnav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-item:active {
        transform: scale(0.94);
    }

    /* Material pill highlight behind the active icon — the icon sits in a
       span.mnav-ic wrapper so the pill + size survive FontAwesome's JS
       swapping <i> for <svg> (the svg inherits this font-size) */
    .mnav-ic {
        display: grid;
        place-items: center;
        width: min(
            60px,
            100%
        ); /* never wider than its flex cell — prevents edge overflow */
        height: clamp(28px, 4svh, 34px);
        border-radius: 999px;
        font-size: 1.4rem;
        transition:
            background-color 0.3s ease,
            color 0.3s ease,
            transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mnav-item.active {
        color: var(--primary);
        font-weight: 700;
    }

    .mnav-item.active .mnav-ic {
        background: linear-gradient(
            115deg,
            var(--primary) 10%,
            var(--tertiary) 130%
        );
        color: #fff;
        transform: scale(1.04);
        box-shadow: 0 8px 18px -6px rgb(0 183 181 / 55%);
    }

    .darkMode .mnav-item.active {
        color: var(--tertiary);
    }

    .darkMode .mnav-item.active .mnav-ic {
        background: linear-gradient(
            115deg,
            var(--primary) 10%,
            var(--tertiary) 130%
        );
        color: #06272b;
        box-shadow: 0 8px 18px -6px rgb(0 183 181 / 45%);
    }

    .mnav-item:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    /* very small screens — keep all five items comfortably inside the bar */
    @media (max-width: 359.98px) {
        .mnav {
            left: 10px;
            right: 10px;
            padding: 5px;
        }
        .mnav-item {
            font-size: 0.58rem;
        }
        .mnav-ic {
            height: 30px;
            font-size: 1.25rem;
        }
    }

    /* keep page content, chat launcher and back-to-top clear of the bar —
       the clearance lives on the footer so the space inherits the dark
       footer surface instead of leaving a white band under the page */
    .site-footer {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    .cw {
        bottom: calc(98px + env(safe-area-inset-bottom, 0px));
    }

    /* .cw-panel keeps its base `bottom: var(--cw-size)+14px` — an extra
       offset here double-counts .cw's own 98px and floats the panel */
    .cw-panel {
        right: 0;
        width: min(370px, calc(100vw - 40px));
        height: min(520px, calc(100svh - 190px));
    }

    #back-to-top-btn {
        /* stacked column: same 54px disc as the chat launcher, same right edge */
        right: 14px; /* matches .cw's mobile right offset */
        bottom: calc(98px + 54px + 14px + env(safe-area-inset-bottom, 0px));
        z-index: 1150;
        width: 54px;
        height: 54px;
        padding: 0;
        text-align: center;
        line-height: 54px;
        border-radius: 50%;
        box-shadow: 0 12px 28px -8px rgb(0 183 181 / 55%);
        background: linear-gradient(135deg, var(--primary), var(--tertiary));
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            opacity 0.2s ease;
    }

    #back-to-top-btn:hover {
        border-radius: 50%;
        transform: translateY(-3px);
        box-shadow: 0 16px 32px -8px rgb(0 183 181 / 65%);
    }

    /* open chat panel sits above the scroll button — hide it while chatting */
    body.chat-open #back-to-top-btn {
        opacity: 0;
        pointer-events: none;
    }
}

.shadow .navbar a {
    transition: 0.3s;
}

.navbar {
    display: flex;
    justify-content: center;
    margin: 0 100px;
    padding: 15px;
    background-color: var(--navbar);
    border-radius: 50px;
}

.navbar a {
    padding: 10px 20px;
    color: var(--white);
    margin: 0 2px;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s;
}

.navbar a:hover {
    color: var(--text-color3);
}

/* active page — accent color + a small dot under the link */
.navbar a.active {
    position: relative;
    color: var(--text-color3);
    font-weight: 700;
}

.navbar a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);
}

.logo img {
    height: 40px;
    width: auto; /* keep the image's natural ratio — prevents aspect-ratio stretch */
}

#whitemode {
    font-size: 22px;
    cursor: pointer;
}

/*Navber End*/

/* Action cluster that holds the language switcher + theme toggle. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/*=========================================================
	LANGUAGE SWITCHER
===========================================================*/

/*=========================================================
	02 -> BANNER
===========================================================*/
.banner_header {
    position: relative;
    width: 100%;
    padding: clamp(88px, 11vw, 128px) 20px clamp(52px, 6.5vw, 76px);
    background:
        radial-gradient(
            560px 220px at 84% 0%,
            rgb(0 183 181 / 30%),
            transparent 65%
        ),
        linear-gradient(115deg, #06282e 0%, #005461 55%, #01767d 100%);
    border-radius: 0 0 30px 30px;
    overflow: hidden;
    margin-bottom: clamp(48px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* faint blueprint grid, same motif as the home sections */
.banner_header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(178 224 220 / 6%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(178 224 220 / 6%) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(
        70% 120% at 50% 0%,
        #000 30%,
        transparent 75%
    );
    mask-image: radial-gradient(70% 120% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}

.our_banner::-webkit-scrollbar {
    display: none;
}

.our_banner {
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
}

.our_banner h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--white);
    margin: 0 0 10px;
}

.our_banner p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.85rem;
    color: rgb(255 255 255 / 55%);
}

.our_banner a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-light);
    transition: color 0.2s ease;
}

.our_banner a:hover {
    color: #fff;
}

.our_banner p span a,
.our_banner p span {
    color: #fff;
}

/* banner part end */

/*=========================================================
	04 -> HOME
===========================================================*/

/* page loader — full-viewport veil until window 'load'; markup in
   master.blade.php, hide logic inline there */
#site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(---bg);
    transition:
        opacity 0.5s ease,
        visibility 0.5s;
}

#site-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.loader-logo {
    height: 44px;
    width: auto;
}

.loader-logo--dark {
    display: none;
}

.darkMode .loader-logo--light {
    display: none;
}

.darkMode .loader-logo--dark {
    display: block;
}

.loader-bar {
    width: 160px;
    height: 3px;
    border-radius: 3px;
    background: rgb(0 84 97 / 14%);
    overflow: hidden;
}

.loader-bar span {
    display: block;
    height: 100%;
    width: 42%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--tertiary));
    animation: loader-sweep 1.15s ease-in-out infinite;
}

@keyframes loader-sweep {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(300%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader-bar span {
        animation: none;
        width: 100%;
    }
}

.home-fast-part {
    width: 100%;
    height: 100%;
    position: relative;
}

body.darkMode {
    background-image:
        linear-gradient(rgb(178 224 220 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(178 224 220 / 0.05) 1px, transparent 1px);
}

.home-fast-part .row {
    margin-top: clamp(3.5rem, 11vh, 7rem);
}
/* hero copy — same language as the section heads: numbered overline,
   ink title with italic accent, CTA pair, stat chips */
.hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 2.2vh, 24px);
    max-width: 36rem;
}

/* soft glow behind the copy — echoes the orbs inside the device art */
.hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8%;
    left: -18%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(0 183 181 / 12%), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

/* typewriter hero — script.js types each [data-type] target in order;
   lines reserve their height so nothing jumps as text appears */
.hero-overline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    min-height: 1.25em;
}

/* gradient dash leading the overline — same accent as the
   section titles' italic words */
.hero-overline::before {
    content: "";
    flex: none;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--tertiary));
}

.hero-title {
    margin: 0;
    min-height: 1.06em;
    font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: #10333a;
}

.hero-slogan {
    margin: 0;
    min-height: 1.5em;
    font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-color2);
}

.hero-slogan .it {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(100deg, var(--primary) 20%, var(--tertiary) 50%, var(--primary) 80%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: heroShine 4.5s linear infinite;
}

/* floating geometric accents — subtle architectural shapes drifting
   around the copy */
.hero-geo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero-geo i {
    position: absolute;
    display: block;
    border: 1.5px solid rgb(1 135 144 / 32%);
    animation: heroFloat 8s ease-in-out infinite;
}

.hero-geo .g1 {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    top: -30px;
    right: -40px;
}

.hero-geo .g2 {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(0 183 181 / 22%);
    border-color: transparent;
    top: 44%;
    right: -74px;
    animation-delay: -2.6s;
}

/* dashed coin — drifts while slowly rotating on itself */
.hero-geo .g3 {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border-style: dashed;
    bottom: -22px;
    left: -44px;
    animation: heroFloatSpin 11s ease-in-out -4.8s infinite;
}

/* plus mark — bare <i>, arms come from its two pseudo-elements */
.hero-geo .g4 {
    width: 22px;
    height: 22px;
    border: none;
    top: -16px;
    left: -56px;
    animation-delay: -6.2s;
}

.hero-geo .g4::before,
.hero-geo .g4::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 2px;
    background: rgb(1 135 144 / 42%);
    transform: translate(-50%, -50%);
}

.hero-geo .g4::before {
    width: 22px;
    height: 3px;
}

.hero-geo .g4::after {
    width: 3px;
    height: 22px;
}

.darkMode .hero-geo i {
    border-color: rgb(126 224 222 / 30%);
}

.darkMode .hero-geo .g2 {
    background: rgb(126 224 222 / 20%);
}

.darkMode .hero-geo .g4::before,
.darkMode .hero-geo .g4::after {
    background: rgb(126 224 222 / 38%);
}

@keyframes heroFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(10deg);
    }
}

/* drift + a full lazy turn, for the dashed coin */
@keyframes heroFloatSpin {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(180deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

@keyframes heroShine {
    to {
        background-position: 220% center;
    }
}

/* blinking caret — sits on whichever line is typing, stays on the last */
[data-type].is-typing::after,
.hero-copy.typed .hero-slogan .it::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.82em;
    margin-left: 4px;
    background: var(--primary);
    vertical-align: -0.1em;
    animation: heroCaret 0.8s step-end infinite;
}

@keyframes heroCaret {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slogan .it,
    [data-type]::after,
    .hero-geo i {
        animation: none !important;
    }
}

.slider-application {
    width: 100%;
}

/* Optional admin override (hero_image_url in Website Info settings). */
.slider-application img {
    max-width: 100%;
    max-height: 450px;
    object-fit: cover;
}

/* ----- Interactive device showcase ---------------------------------
   One scrollable "mini Codifyn site" rendered inside a monitor, tablet
   and phone. State lives in data-* attributes (set by
   device-showcase.js): data-focus on .device-stage decides which device
   sits in front — it defaults to the visitor's own screen and locks to
   the clicked device once the user pulls one forward. Each .ds-site
   carries its own data-page fed by a scrollspy, driving the active nav
   styles. Sizes are % of the stage; mini-site text scales via cqw so a
   narrower device simply sees a narrower viewport, like a real browser.
   The --ds-* palette re-maps under .darkMode. */
.device-stage {
    --ds-frame: var(--main);
    --ds-glass: #ffffff;
    --ds-panel: #e9f4f3;
    --ds-line: #c7e2e0;
    --ds-accent: var(--primary);
    --ds-accent-2: var(--tertiary);
    --ds-warn: #fc7e2f;
    --ds-blob: rgb(178 224 220 / 55%);
    --ds-ink: #0e3a40;
    --ds-mute: #57808a;
    --ds-on-accent: #ffffff;

    position: relative;
    width: min(100%, 660px);
    margin-left: auto;
    aspect-ratio: 16 / 11;
    container-type: inline-size; /* lets child text scale via cqw units */
}

/* Dark palette pushes glass/line contrast up so the scene stays legible
   on the dark background. */
.darkMode .device-stage {
    --ds-frame: #0c343a;
    --ds-glass: #1a414a;
    --ds-panel: #113035;
    --ds-line: #3d6b71;
    --ds-accent: var(--tertiary);
    --ds-accent-2: var(--text-color3);
    --ds-blob: rgb(0 183 181 / 22%);
    --ds-ink: #dcf2ef;
    --ds-mute: #8fb4ba;
    --ds-on-accent: #052e33;
}

/* Soft morphing shape behind the devices (replaces the old blob image). */
.ds-blob {
    position: absolute;
    inset: 10% 12% 14%;
    background: var(--ds-blob);
    border-radius: 44% 56% 58% 42% / 46% 44% 56% 54%;
    animation: ds-blob 14s ease-in-out infinite;
}

@keyframes ds-blob {
    0%,
    100% {
        border-radius: 44% 56% 58% 42% / 46% 44% 56% 54%;
        transform: scale(1) rotate(0deg);
    }
    33% {
        border-radius: 56% 44% 42% 58% / 52% 58% 42% 48%;
        transform: scale(1.04) rotate(4deg);
    }
    66% {
        border-radius: 48% 52% 50% 50% / 42% 50% 50% 58%;
        transform: scale(0.97) rotate(-3deg);
    }
}

/* Devices are absolutely positioned by `left` only (never `right`) so the
   focus-change transition can animate every property. The float loop
   runs on the inner wrapper so it never fights the layout transform. */
.ds-device {
    position: absolute;
    transition:
        left 0.7s cubic-bezier(0.33, 1, 0.38, 1),
        width 0.7s cubic-bezier(0.33, 1, 0.38, 1),
        bottom 0.7s cubic-bezier(0.33, 1, 0.38, 1),
        transform 0.7s cubic-bezier(0.33, 1, 0.38, 1),
        opacity 0.5s ease;
    will-change: left, width, transform;
}

.ds-float {
    position: relative;
    animation: ds-float 6s ease-in-out infinite;
    filter: drop-shadow(0 1.1cqw 1.4cqw rgb(0 60 66 / 20%));
}

.darkMode .ds-float {
    filter: drop-shadow(0 1.1cqw 1.4cqw rgb(0 0 0 / 45%));
}

@keyframes ds-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4%);
    }
}

.ds-screen {
    position: relative;
    width: 100%;
    padding: 2.6%;
    border-radius: 4%;
    background: var(--ds-frame);
    box-shadow:
        var(--box-shadow),
        inset 0 1px 0 rgb(255 255 255 / 14%);
    transition: transform 0.35s ease;
}

.darkMode .ds-screen {
    box-shadow:
        0 1.2cqw 3cqw rgb(0 0 0 / 50%),
        0 0 0 1px rgb(255 255 255 / 6%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
}

/* Diagonal sheen over the whole device face. */
.ds-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 42%,
        rgb(255 255 255 / 7%) 50%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 6;
}

/* Hovering any device gently lifts it — the click that follows pulls it
   into focus (handled by JS). */
.ds-device:hover .ds-screen {
    transform: scale(1.04);
}

.ds-cam {
    position: absolute;
    top: 1.1%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
    z-index: 7;
}

/* Physical buttons poking out of phone/tablet edges. */
.ds-hw {
    position: absolute;
    border-radius: 999px;
    background: var(--ds-frame);
    z-index: 1;
}

.ds-glass {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--ds-glass);
    border-radius: 2%;
    box-shadow: inset 0 0 0 1px rgb(2 30 34 / 18%); /* display hairline */
    overflow: hidden;
    transition: background-color 0.5s ease;
}

.ds-glass > .ds-site {
    flex: 1;
    min-height: 0;
}

/* --- monitor --- */
.ds-monitor {
    left: 13%;
    bottom: 20%;
    width: 66%;
    z-index: 3;
}

.ds-monitor .ds-float {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-duration: 7s;
}

/* iMac-style asymmetric bezel — thin top/sides, the chin below the
   glass forms the thicker bottom bezel. */
.ds-monitor .ds-screen {
    padding: 2.2% 2.2% 0;
    border-radius: 3.4% 3.4% 2% 2%;
}

.ds-monitor .ds-glass {
    aspect-ratio: 16 / 10.4;
    border-radius: 1.6% 1.6% 0 0;
}

/* Bottom chin with a slim brand pill — reads as a real display. */
.ds-chin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 1.9cqw; /* parent height is auto — % height would collapse */
    background: linear-gradient(180deg, #0e5963, var(--ds-frame));
}

.ds-chin i {
    height: 34%;
    aspect-ratio: 7 / 1;
    border-radius: 999px;
    background: rgb(255 255 255 / 15%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
}

.darkMode .ds-chin i {
    background: var(--ds-accent-2);
    opacity: 0.7;
}

/* Tapered neck + weighted metal foot. */
.ds-neck {
    width: 11%;
    aspect-ratio: 2 / 1.15;
    background: linear-gradient(
        90deg,
        #083f47,
        var(--ds-frame) 40%,
        var(--ds-frame) 60%,
        #083f47
    );
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.darkMode .ds-neck {
    background: linear-gradient(
        90deg,
        #06272c,
        var(--ds-frame) 40%,
        var(--ds-frame) 60%,
        #06272c
    );
}

.ds-foot {
    width: 38%;
    aspect-ratio: 9.5 / 1;
    border-radius: 999px;
    background: linear-gradient(180deg, #14606b, var(--ds-frame) 70%);
    box-shadow:
        0 0.5cqw 1.2cqw rgb(0 45 50 / 30%),
        inset 0 1px 0 rgb(255 255 255 / 15%);
}

/* --- tablet --- */
.ds-tablet {
    left: 1%;
    bottom: 7%;
    width: 25%;
    z-index: 2;
    transform: rotate(-5deg);
}

.ds-tablet .ds-float {
    animation-duration: 7.5s;
    animation-delay: 1.2s;
}

.ds-tablet .ds-screen {
    padding: 4.5%;
    border-radius: 8%;
}

.ds-tablet .ds-glass {
    aspect-ratio: 3 / 3.55;
    border-radius: 5%;
}

.ds-tablet .ds-cam {
    width: 2.4%;
}

.ds-tablet .ds-hw-top {
    top: -1.6%;
    left: 18%;
    width: 10%;
    height: 1.8%;
}

.ds-tablet .ds-hw-side {
    top: 14%;
    right: -1.6%;
    width: 1.8%;
    height: 8%;
}

/* --- phone --- */
.ds-phone {
    left: 81%;
    bottom: 4%;
    width: 16%;
    z-index: 4;
    transform: rotate(4deg);
}

.ds-phone .ds-float {
    animation-duration: 6.5s;
    animation-delay: 2.1s;
}

.ds-phone .ds-screen {
    padding: 4%;
    border-radius: 13%;
}

.ds-phone .ds-glass {
    aspect-ratio: 9 / 17;
    border-radius: 9%;
}

/* Dynamic-island style camera pill — slim, darker than the frame. */
.ds-notch {
    position: absolute;
    top: 2.6%;
    left: 50%;
    transform: translateX(-50%);
    width: 26%;
    aspect-ratio: 8 / 2.1;
    border-radius: 999px;
    background: #033a42;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 6%),
        0 0.2cqw 0.5cqw rgb(0 0 0 / 25%);
    z-index: 7;
}

.ds-phone .ds-hw-power {
    right: -2%;
    top: 22%;
    width: 2.4%;
    height: 11%;
}

.ds-phone .ds-hw-vol {
    left: -2%;
    top: 20%;
    width: 2.4%;
    height: 8%;
}

.ds-phone .ds-hw-vol2 {
    top: 30%;
}

/* ============================================================
   The mini Codifyn site inside every screen
   (.ds-site font-size scales all internals off the stage width)
   ============================================================ */
.ds-site {
    display: flex;
    flex-direction: column;
    font-size: 1.7cqw;
    background: var(--ds-glass);
    color: var(--ds-ink);
}

/* Browser chrome row — desktop window only. */
.ds-bchrome {
    display: none;
}

.ds-site--desktop .ds-bchrome {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: none;
    padding: 0.55em 0.9em;
    background: var(--ds-panel);
    border-bottom: 1px solid var(--ds-line);
}

/* direct children only — .ds-burl holds its own skeleton bar <i> */
.ds-bchrome > i {
    width: 0.55em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ds-line);
}

.ds-bchrome > i:nth-child(1) {
    background: #ff5f57;
}
.ds-bchrome > i:nth-child(2) {
    background: #febc2e;
}
.ds-bchrome > i:nth-child(3) {
    background: #28c840;
}

.ds-burl {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 15em;
    margin-left: 0.7em;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background: var(--ds-glass);
}

.ds-burl i {
    width: 55%;
    height: 0.5em;
    border-radius: 999px;
    background: var(--ds-line);
}

/* Site navbar — brand + links; burger on the phone build. */
.ds-navbar {
    display: flex;
    align-items: center;
    gap: 1em;
    flex: none;
    padding: 0.65em 0.9em;
    background: var(--ds-glass);
    border-bottom: 1px solid var(--ds-line);
}

.ds-brand {
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.ds-brand-bar {
    width: 3.4em;
    height: 0.8em;
    border-radius: 0.22em;
    background: var(--ds-ink);
}

.ds-brand-dot {
    width: 0.85em;
    aspect-ratio: 1;
    border-radius: 0.25em;
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2));
}

.ds-links {
    display: flex;
    gap: 0.15em;
    margin-left: auto;
    overflow: hidden; /* clip pills cleanly in narrow (backgrounded) viewports */
}

/* nav pills are skeleton bars — widths vary like real link text */
.ds-nav {
    width: 2.6em;
    height: 0.72em;
    border-radius: 999px;
    background: var(--ds-line);
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.15s ease;
}

.ds-nav:hover {
    background: var(--ds-mute);
}

.ds-nav:active {
    transform: scale(0.92);
}

.ds-nav.n1 {
    width: 2.1em;
}
.ds-nav.n2 {
    width: 2.9em;
}
.ds-nav.n3 {
    width: 2.5em;
}
.ds-nav.n4 {
    width: 2.7em;
}

.ds-site[data-page="home"] .ds-nav[data-nav="home"],
.ds-site[data-page="services"] .ds-nav[data-nav="services"],
.ds-site[data-page="projects"] .ds-nav[data-nav="projects"],
.ds-site[data-page="contact"] .ds-nav[data-nav="contact"] {
    background: var(--ds-accent);
    color: var(--ds-on-accent);
}

.ds-burger {
    display: none;
    margin-left: auto;
    flex-direction: column;
    gap: 0.24em;
    padding: 0.2em;
}

.ds-burger i {
    width: 1.15em;
    height: 0.14em;
    border-radius: 999px;
    background: var(--ds-mute);
}

/* The scrollable viewport — a real mini page, wheel/drag works. */
.ds-scroll {
    position: relative; /* anchor so section.offsetTop targets resolve here */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    /* scrollbar hidden — JS drives the auto-scroll; the bar read as a
       "second page scrollbar" on Windows' always-visible scrollbar UI */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ds-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.ds-scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

.ds-sec {
    padding: 1.2em 1.2em 0.4em;
}

.ds-sec-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    margin-bottom: 0.9em;
}

/* skeleton copy bars — kicker dash, title block, text line */
.ds-k {
    display: block;
    width: 5.2em;
    height: 0.55em;
    border-radius: 999px;
    background: var(--ds-accent);
}

.ds-t {
    display: block;
    width: 52%;
    height: 1.05em;
    border-radius: 0.3em;
    background: var(--ds-ink);
}

/* hero section */
.ds-hero {
    padding-top: 1.4em;
}

.ds-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1em;
    align-items: center;
}

.ds-site--tablet .ds-hero-grid,
.ds-site--phone .ds-hero-grid {
    grid-template-columns: 1fr;
}

.ds-hero-copy {
    min-width: 0;
}

/* headline = ink bar + accent bar (the theme's two-tone title) */
.ds-h1-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0.45em 0 0.55em;
}

.ds-h1-lines i {
    display: block;
    height: 1.05em;
    border-radius: 0.28em;
}

.ds-h1-lines .ink {
    width: 88%;
    background: var(--ds-ink);
}
.ds-h1-lines .acc {
    width: 58%;
    background: var(--ds-accent);
}

.ds-l {
    display: block;
    height: 0.62em;
    border-radius: 999px;
    background: var(--ds-line);
}

.ds-l + .ds-l {
    margin-top: 0.5em;
}

.ds-cta-row {
    display: flex;
    gap: 0.6em;
    margin-top: 0.9em;
}

.ds-cta {
    width: 6em;
    height: 1.55em;
    border-radius: 999px;
    background: var(--ds-accent);
}

.ds-cta-alt {
    width: 5em;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--ds-accent);
}

/* hero side art — a floating dashboard card + deco chips */
.ds-hero-art {
    position: relative;
}

.ds-ha-card {
    overflow: hidden;
    border: 1px solid var(--ds-line);
    border-radius: 0.8em;
    background: var(--ds-panel);
    box-shadow: 0 0.9em 1.8em rgb(0 80 86 / 10%);
}

.darkMode .ds-ha-card {
    box-shadow: 0 0.9em 1.8em rgb(0 0 0 / 35%);
}

.ds-ha-top {
    display: flex;
    gap: 0.4em;
    padding: 0.5em 0.7em;
    background: var(--ds-glass);
    border-bottom: 1px solid var(--ds-line);
}

.ds-ha-top i {
    width: 0.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ds-line);
}

.ds-ha-top i:first-child {
    background: var(--ds-accent-2);
}

.ds-ha-body {
    padding: 0.8em;
}

.ds-ha-line {
    display: block;
    height: 0.55em;
    margin-bottom: 0.55em;
    border-radius: 999px;
    background: var(--ds-line);
    animation: ds-shimmer 3.4s ease-in-out infinite;
}

.ds-ha-line.w70 {
    width: 70%;
}
.ds-ha-line.w45 {
    width: 45%;
    animation-delay: 0.7s;
}

@keyframes ds-shimmer {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.ds-ha-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.45em;
    height: 3.2em;
    margin-top: 0.4em;
}

.ds-ha-bars i {
    flex: 1;
    height: 100%;
    border-radius: 0.25em 0.25em 0 0;
    background: var(--ds-accent);
    transform-origin: bottom;
    animation: ds-bar 2.8s ease-in-out infinite;
}

.ds-ha-bars i:nth-child(even) {
    background: var(--ds-accent-2);
}

.ds-ha-bars i:nth-child(1) {
    animation-delay: 0s;
}
.ds-ha-bars i:nth-child(2) {
    animation-delay: 0.35s;
}
.ds-ha-bars i:nth-child(3) {
    animation-delay: 0.7s;
}
.ds-ha-bars i:nth-child(4) {
    animation-delay: 1.05s;
}
.ds-ha-bars i:nth-child(5) {
    animation-delay: 1.4s;
}

@keyframes ds-bar {
    0%,
    100% {
        transform: scaleY(0.35);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Floating "deployment" toast — small content pill overlapping the
   card's lower-left edge, reads as a real notification badge. */
.ds-ha-badge {
    position: absolute;
    bottom: -5%;
    left: -5%;
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.5em 0.8em;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background: var(--ds-glass);
    box-shadow: 0 0.5em 1.1em rgb(0 80 86 / 16%);
    font-size: 0.52em;
    font-weight: 700;
    line-height: 1;
    color: var(--ds-ink);
    white-space: nowrap;
    animation: ds-float 6s ease-in-out 0.8s infinite;
}

.darkMode .ds-ha-badge {
    box-shadow: 0 0.5em 1.1em rgb(0 0 0 / 45%);
}

.ds-ha-badge i {
    width: 0.7em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ds-accent-2);
    box-shadow: 0 0 0 0.2em rgb(0 183 181 / 22%);
}

.ds-ha-badge b {
    width: 3.6em;
    height: 0.55em;
    border-radius: 999px;
    background: var(--ds-line);
}

/* Small rotated accent square behind the card's top-right corner. */
.ds-ha-spark {
    position: absolute;
    top: -4%;
    right: -3%;
    z-index: -1;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 0.3em;
    background: var(--ds-accent-2);
    opacity: 0.85;
    transform: rotate(12deg);
    animation: ds-float 5s ease-in-out infinite;
}

.ds-hero-stats {
    display: flex;
    gap: 1.6em;
    margin-top: 1.2em;
    padding-top: 0.9em;
    border-top: 1px solid var(--ds-line);
}

.ds-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.ds-stat b {
    width: 2.1em;
    height: 0.85em;
    border-radius: 0.24em;
    background: var(--ds-ink);
}

.ds-stat i {
    width: 2.7em;
    height: 0.5em;
    border-radius: 999px;
    background: var(--ds-line);
}

/* services section — real service names, icons and start prices */
.ds-svc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}

.ds-site--phone .ds-svc-list {
    grid-template-columns: 1fr;
}

.ds-svc {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.65em 0.7em;
    border: 1px solid var(--ds-line);
    border-radius: 0.7em;
    background: var(--ds-panel);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.ds-svc:hover {
    transform: translateY(-2px);
    border-color: var(--ds-accent);
}

.ds-svc-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 2em;
    aspect-ratio: 1;
    border-radius: 0.55em;
    background: var(--ds-glass);
    color: var(--ds-accent);
    font-size: 0.95em;
    box-shadow: inset 0 0 0 1px var(--ds-line);
}

.ds-svc-tx {
    display: block;
    flex: 1;
    min-width: 0;
}

.ds-svc-tx i {
    display: block;
    width: 62%;
    height: 0.55em;
    border-radius: 999px;
    background: var(--ds-mute);
}

.ds-svc-tx i:last-child {
    width: 38%;
    height: 0.42em;
    margin-top: 0.4em;
    background: var(--ds-line);
}

/* projects section — real screenshots from the project catalog */
.ds-pgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7em;
}

.ds-site--phone .ds-pgrid {
    grid-template-columns: 1fr;
}

.ds-ptile {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 0.6em;
    overflow: hidden;
    background: var(--ds-panel);
    border: 1px solid var(--ds-line);
}

/* framed-picture glyph — generic image-placeholder icon drawn in CSS */
.ds-ptile-img {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28%;
    aspect-ratio: 4 / 3;
    border: 0.14em solid var(--ds-line);
    border-radius: 0.35em;
    background: var(--ds-glass);
    animation: ds-shimmer 3.4s ease-in-out infinite;
}

.ds-ptile-img::before {
    content: ""; /* sun */
    position: absolute;
    top: 16%;
    right: 14%;
    width: 0.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ds-line);
}

.ds-ptile-img::after {
    content: ""; /* mountains */
    position: absolute;
    right: 8%;
    bottom: 8%;
    left: 8%;
    height: 46%;
    clip-path: polygon(0 100%, 34% 22%, 58% 60%, 74% 30%, 100% 100%);
    background: var(--ds-line);
}

/* caption zone — gradient band with a small white skeleton bar */
.ds-ptile em {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    padding: 0.5em 0.7em 0.35em;
    background: linear-gradient(transparent, rgb(6 40 45 / 55%));
}

.ds-ptile em::before {
    content: "";
    width: 46%;
    height: 0.5em;
    border-radius: 999px;
    background: rgb(255 255 255 / 72%);
}

/* contact section */
.ds-field {
    display: block;
    height: 2.2em;
    margin-bottom: 0.7em;
    border-radius: 0.55em;
    background: var(--ds-panel);
    border: 1px solid var(--ds-line);
}

.ds-field-ta {
    height: 3.8em;
}

.ds-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    width: 6em;
    height: 1.7em;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ds-accent);
    color: var(--ds-on-accent);
    font-size: 0.82em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.15s ease;
}

.ds-send:active {
    transform: scale(0.94);
}

.ds-send .bi {
    display: none;
}

.ds-send.sent {
    background: var(--ds-accent-2);
}

.ds-send.sent .fa-paper-plane {
    display: none;
}

.ds-send.sent .bi {
    display: inline;
}

/* mini footer strip at the bottom of the scroll */
.ds-mini-foot {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-top: 1.4em;
    padding: 0.9em 1.2em;
    background: var(--ds-panel);
    border-top: 1px solid var(--ds-line);
}

.ds-mini-foot i {
    height: 0.55em;
    border-radius: 999px;
    background: var(--ds-line);
}

/* bottom icon tab bar — phone build only, icons need no translation */
.ds-tabbar {
    display: none;
}

.ds-site--phone .ds-tabbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: none;
    padding: 0.5em 0.8em;
    background: var(--ds-panel);
    border-top: 1px solid var(--ds-line);
}

.ds-tab {
    display: grid;
    place-items: center;
    width: 1.9em;
    aspect-ratio: 1;
    border-radius: 0.55em;
    color: var(--ds-mute);
    font-size: 1em;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.15s ease;
}

.ds-tab:active {
    transform: scale(0.88);
}

.ds-site[data-page="home"] .ds-tab[data-nav="home"],
.ds-site[data-page="services"] .ds-tab[data-nav="services"],
.ds-site[data-page="projects"] .ds-tab[data-nav="projects"],
.ds-site[data-page="contact"] .ds-tab[data-nav="contact"] {
    background: var(--ds-accent);
    color: var(--ds-on-accent);
}

/* phone swaps text links for a burger + tab bar */
.ds-site--phone .ds-links {
    display: none;
}

.ds-site--phone .ds-navbar {
    padding-top: 1.1em;
}

.ds-site--phone .ds-burger {
    display: flex;
}

/* narrow viewports: stats wrap instead of squeezing */
.ds-site--phone .ds-hero-stats {
    flex-wrap: wrap;
    gap: 0.6em 1em;
}

.ds-site--tablet .ds-nav {
    height: 0.6em;
}

/* skeleton width helpers */
.ds-site .w20 {
    width: 20%;
}
.ds-site .w30 {
    width: 30%;
}
.ds-site .w35 {
    width: 35%;
}
.ds-site .w45 {
    width: 45%;
}
.ds-site .w78 {
    width: 78%;
}

/* --- focus layouts -------------------------------------------------
   Default stage = desktop forward. JS picks the visitor's own device
   first; clicking any device pulls it forward and locks the choice.
   Background devices stay clickable — that's the whole interaction. */
.device-stage[data-focus="desktop"] .ds-monitor {
    cursor: default;
}

.device-stage[data-focus="desktop"] .ds-tablet,
.device-stage[data-focus="desktop"] .ds-phone {
    cursor: pointer;
}

/* Tablet forward: centered & large, others fall back. */
.device-stage[data-focus="tablet"] .ds-monitor {
    left: 2%;
    bottom: 48%;
    width: 44%;
    opacity: 0.4;
    z-index: 1;
    cursor: pointer;
}

.device-stage[data-focus="tablet"] .ds-tablet {
    left: 50%;
    bottom: 8%;
    width: 48%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 3;
    cursor: default;
}

.device-stage[data-focus="tablet"] .ds-phone {
    left: 85%;
    bottom: 3%;
    width: 13%;
    transform: rotate(8deg);
    opacity: 0.55;
    z-index: 2;
    cursor: pointer;
}

/* Phone forward: centered & large, others fall back. */
.device-stage[data-focus="mobile"] .ds-monitor {
    left: -6%;
    bottom: 48%;
    width: 48%;
    opacity: 0.35;
    z-index: 1;
    cursor: pointer;
}

.device-stage[data-focus="mobile"] .ds-tablet {
    left: 76%;
    bottom: 4%;
    width: 30%;
    transform: rotate(6deg);
    opacity: 0.45;
    z-index: 2;
    cursor: pointer;
}

.device-stage[data-focus="mobile"] .ds-phone {
    left: 50%;
    bottom: 8%;
    width: 42%;
    transform: translateX(-50%) rotate(0deg);
    z-index: 3;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .device-stage * {
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
/* ----- /device showcase ----- */

.home-fast-bottom-wave img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Fade and Move Up Animation */

/* wave animation end */
.home-down-arow {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: 50%;
    padding: 15px;
    z-index: 999;
    cursor: pointer;
}

#home-down-link {
    position: relative;
}

/* Compact nav kicks in at 991px — logo left, theme + language on the
   right; navigation itself lives in the fixed .mnav tab bar. */
@media (max-width: 991px) {
    nav {
        width: 100%;
        padding: 10px 14px;
        justify-content: space-between;
        gap: 12px;
    }

    nav .logo_section {
        margin-right: 0;
        flex-shrink: 0;
    }

    .shadow nav {
        border: 0;
        border-radius: 0;
        /* solid bar on scroll — transparent let the page content bleed
           through under the burger/logo/icons */
        background: var(---bg);
        padding: 10px 14px;
    }

    .responsive_menu_sec {
        margin-left: auto;
        gap: 8px;
    }

    /* the desktop action cluster is duplicated inside the mobile bar */
    .nav-actions {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --mobile-device-stage-width: min(80vw, 470px, 58svh);
        --mobile-device-gap: clamp(2.75rem, 1.5svh, 0.875rem);
    }

    .home-fast-part {
        min-height: 100svh;
        min-height: 100dvh;
        box-sizing: border-box;
        padding: calc(
                var(--mobile-header-clearance) + env(safe-area-inset-top, 0px)
            )
            0 var(--mobile-nav-clearance);
        display: flex;
        flex-direction: column;
    }

    .home-fast-part > .container {
        flex: 1 0 auto;
        display: flex;
        align-items: stretch;
    }

    .home-fast-part .row {
        width: 100%;
        flex: 1 0 auto;
        margin-top: 0;
        --bs-gutter-y: 0;
        flex-direction: column;
        justify-content: center;
    }

    .hero-copy {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .slider-application {
        width: 100%;
        padding-top: calc(
            var(--mobile-device-stage-width) * 0.16 + var(--mobile-device-gap)
        );
        transform: none;
    }

    .slider-application img {
        max-height: min(36svh, 20rem);
        object-fit: contain;
    }

    .device-stage {
        width: var(--mobile-device-stage-width);
        margin-inline: auto;
    }

    #home-down-link {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }

    .home-down-arow {
        position: static;
        display: block !important;
        transform: none;
        margin: 0 auto;
        font-size: 1rem;
        padding: 0.55rem;
    }

    .home-fast-bottom-wave {
        position: absolute;
        right: 0;
        bottom: var(--mobile-nav-clearance);
        left: 0;
        flex-shrink: 0;
        z-index: 0;
        pointer-events: none;
    }

    .home-fast-bottom-wave img {
        display: block;
        max-height: min(14svh, 7.5rem);
        object-fit: contain;
    }

    @media (max-height: 640px) {
        :root {
            --mobile-nav-item-height: clamp(46px, 7svh, 52px);
            --mobile-header-clearance: clamp(3.5rem, 9svh, 4rem);
            --mobile-device-stage-width: min(80vw, 420px, 46svh);
        }

        .slider-application img {
            max-height: 30svh;
        }

        .home-fast-bottom-wave img {
            max-height: 10svh;
        }
    }

    /* tighten the section rhythm — desktop paddings left dead bands on phones */
    .wc,
    .stack,
    .abt,
    .tst {
        padding: clamp(56px, 9vh, 80px) 0;
    }

    .stats {
        padding: clamp(38px, 6vw, 54px) 0;
    }
}

@keyframes hsb {
    0% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0);
    }
}

/* ============================================================
   Services rail — "selected work"-style horizontal gallery on the
   home page. Desktop: the section pins and the track scrubs with
   page scroll (services-rail.js + GSAP). Touch/fallback: native
   overflow-x swipe. Card scenes are pure-CSS .sm mockups per slug.
   ============================================================ */
.svc-rail {
    --svc-ink: #10333a;
    --svc-mute: #5c7f88;
    --svc-line: #d5e7e5;
    --svc-line-strong: #a9c9c7;
    --svc-card: #ffffff;
    --svc-chrome: #eef6f5;

    position: relative;
    background: linear-gradient(180deg, rgb(0 84 97 / 3%), rgb(0 183 181 / 5%));
}

.darkMode .svc-rail {
    --svc-ink: #e4f3f0;
    --svc-mute: #8fb4ba;
    --svc-line: #24474d;
    --svc-line-strong: #3d6b71;
    --svc-card: #122f35;
    --svc-chrome: #163840;
    background: linear-gradient(180deg, rgb(0 0 0 / 22%), rgb(0 183 181 / 5%));
}

.svc-rail-pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 10vh, 110px) 0 26px;
    overflow: hidden;
}

/* Full-viewport pin height applies only while the JS actually pins —
   coarse-pointer desktops keep the compact rail instead of an empty
   100svh band. */
/* JS toggles .svc--pin — fills the viewport so the rail centers
   vertically instead of leaving a dead band on tall screens */
.svc--pin .svc-rail-pin {
    height: 100svh;
}

.svc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 0 clamp(18px, 5vw, 72px);
    margin-bottom: 22px;
}

.svc-overline {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}

.darkMode .svc-overline {
    color: var(--tertiary);
}

.svc-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--svc-ink);
}

.svc-title .it {
    font-style: italic;
    color: var(--primary);
}

.darkMode .svc-title .it {
    color: var(--tertiary);
}

.svc-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.svc-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svc-arrow {
    all: unset;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--svc-line-strong);
    border-radius: 50%;
    color: var(--svc-ink);
    font-size: 1rem;
    cursor: pointer;
    transition:
        background-color 0.3s,
        color 0.3s,
        border-color 0.3s,
        transform 0.3s;
}

.svc-arrow:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.darkMode .svc-arrow:hover {
    border-color: var(--tertiary);
    background: var(--tertiary);
    color: #052e33;
}

.svc-count {
    min-width: 64px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--svc-mute);
}

.svc-viewport {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 0;
    /* native horizontal scroll by default — JS narrows this to hidden
       while pinning, so a dead script never leaves cards unreachable
       (matches .deck-scene, which has always scrolled natively) */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-user-select: none;
    user-select: none;
}

.svc-card {
    scroll-snap-align: start;
}

.svc-track {
    display: flex;
    gap: clamp(20px, 3vw, 44px);
    width: max-content;
    padding: 0 clamp(18px, 5vw, 72px);
    will-change: transform;
}

.svc-card {
    position: relative;
    display: block;
    flex: none;
    width: clamp(300px, 30vw, 430px);
    color: inherit;
    cursor: pointer;
}

.svc-card:hover {
    color: inherit;
}

/* Clean content panel — index, icon, name, blurb, price + arrow. */
.svc-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(
        200px,
        48svh,
        440px
    ); /* low floor so short screens don't clip the card */
    padding: clamp(24px, 2.6vw, 36px);
    border: 1px solid var(--svc-line);
    border-radius: 24px;
    background:
        radial-gradient(
            240px 190px at 100% 0%,
            rgb(0 183 181 / 9%),
            transparent 72%
        ),
        linear-gradient(
            145deg,
            var(--svc-card),
            var(--svc-card) 68%,
            rgb(1 135 144 / 3%)
        );
    box-shadow: 0 18px 48px -34px rgb(0 49 57 / 48%);
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

/* thin gradient hairline reveals on hover */
.svc-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--tertiary));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.svc-card:hover .svc-panel {
    transform: translateY(-7px);
    border-color: var(--svc-line-strong);
    box-shadow: 0 28px 64px -30px rgb(0 80 86 / 38%);
}

.svc-card:hover .svc-panel::before {
    opacity: 1;
}

.svc-card:focus-visible .svc-panel {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

.darkMode .svc-card:hover .svc-panel {
    border-color: var(--svc-line-strong);
    box-shadow: 0 28px 64px -30px rgb(0 0 0 / 70%);
}

.svc-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

.svc-idx {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.45em 0.85em;
    border-radius: 999px;
    background: rgb(1 135 144 / 8%);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--svc-mute);
}

.svc-ico {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgb(1 135 144 / 10%);
    border-radius: 20px;
    background: linear-gradient(145deg, #0a9299, #006b76);
    box-shadow: 0 10px 24px rgb(0 84 97 / 18%);
    color: #fff;
    font-size: 1.35rem;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.darkMode .svc-ico {
    border-color: rgb(126 224 222 / 14%);
    background: linear-gradient(145deg, #08747a, #064d57);
    box-shadow: 0 10px 26px rgb(0 0 0 / 24%);
    color: #a9f0e9;
}

.svc-card:hover .svc-ico {
    box-shadow: 0 14px 28px rgb(0 84 97 / 24%);
    color: #fff;
    transform: translateY(-3px) scale(1.04);
}

.darkMode .svc-card:hover .svc-ico {
    color: #a9f0e9;
}

.svc-name {
    font-size: clamp(1.22rem, 1rem + 0.9vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.25;
    color: var(--svc-ink);
    transition: color 0.3s ease;
}

.svc-card:hover .svc-name {
    color: var(--primary);
}

.darkMode .svc-card:hover .svc-name {
    color: var(--tertiary);
}

.svc-blurb {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--svc-mute);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* feature check-list shown when the service has no description */
.svc-feats {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.svc-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--svc-mute);
}

.svc-feats li i {
    display: grid;
    flex: 0 0 18px;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 0.12em;
    border-radius: 50%;
    background: rgb(1 135 144 / 10%);
    font-size: 0.58rem;
    color: var(--primary);
}

.darkMode .svc-feats li i {
    color: var(--tertiary);
}

.svc-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--svc-line);
}

.svc-price {
    padding: 0.62em 1em;
    border: 1px solid rgb(1 135 144 / 10%);
    border-radius: 999px;
    background: rgb(1 135 144 / 7%);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.darkMode .svc-price {
    background: rgb(0 183 181 / 12%);
    color: var(--tertiary);
}

.svc-go {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--svc-line-strong);
    border-radius: 50%;
    background: var(--svc-card);
    color: var(--svc-ink);
    font-size: 0.85rem;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s,
        transform 0.35s ease;
}

.svc-card:hover .svc-go {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    transform: translateX(4px);
}

.darkMode .svc-card:hover .svc-go {
    border-color: var(--tertiary);
    background: var(--tertiary);
    color: #052e33;
}

.svc-progress {
    height: 2px;
    margin: 26px clamp(18px, 5vw, 72px) 0;
    overflow: hidden;
    background: var(--svc-line);
}

.svc-progress-fill {
    height: 100%;
    width: 0;
    background: var(--primary);
}

.darkMode .svc-progress-fill {
    background: var(--tertiary);
}

.svc-empty {
    padding: 60px 0;
    color: var(--svc-mute);
}

/* Trailing CTA card — same panel anatomy as a service card,
   accent-filled so it reads as the rail's end-cap. Width and
   all hover mechanics are inherited from .svc-card/.svc-panel. */
.svc-panel--cta {
    border-color: transparent;
    color: #e9f6f4;
    background:
        radial-gradient(
            130% 160% at 92% -12%,
            rgb(0 183 181 / 55%),
            transparent 55%
        ),
        linear-gradient(165deg, #0b3941 5%, #005461 55%, #01767d 100%);
}

.svc-panel--cta::before {
    background: linear-gradient(90deg, var(--tertiary), #8be8e4);
}

.svc-panel--cta .svc-idx {
    background: rgb(255 255 255 / 8%);
    color: rgb(233 246 244 / 75%);
}

.svc-panel--cta .svc-ico {
    background: rgb(255 255 255 / 10%);
    color: #7fe0dd;
}

.svc-card:hover .svc-panel--cta .svc-ico {
    background: var(--tertiary);
    color: #052e33;
}

.svc-panel--cta .svc-name {
    color: #fff;
}

.svc-card:hover .svc-panel--cta .svc-name {
    color: #b2e0dc;
}

.svc-panel--cta .svc-feats li {
    color: rgb(233 246 244 / 78%);
}

.svc-panel--cta .svc-feats li i {
    color: #3ed6d2;
}

.svc-panel--cta .svc-panel-foot {
    border-top-color: rgb(255 255 255 / 14%);
}

.svc-panel--cta .svc-price {
    background: rgb(255 255 255 / 12%);
    color: #fff;
}

.svc-panel--cta .svc-go {
    border-color: rgb(255 255 255 / 22%);
    color: var(--primary);
}

.darkMode .svc-panel--cta .svc-go {
    color: var(--tertiary);
}

.svc-card:hover .svc-panel--cta .svc-go {
    border-color: var(--tertiary);
    background: var(--tertiary);
    color: #052e33;
}

.darkMode .svc-panel--cta {
    border-color: rgb(126 224 222 / 10%);
    background:
        radial-gradient(
            130% 160% at 92% -12%,
            rgb(0 183 181 / 35%),
            transparent 55%
        ),
        linear-gradient(165deg, #0d2f36 5%, #063d46 55%, #0a4a52 100%);
}

/* Native swipe mode — touch / small or short screens / no-GSAP
   fallback. The height check keeps the pin off laptop windows that
   are too short to hold a card without cropping it. */
@media (max-width: 991px), (max-height: 639px) {
    .svc-rail-pin {
        height: auto;
        min-height: 0;
        padding: 64px 0 36px;
    }

    .svc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 18px;
    }

    .svc-head-right {
        align-items: flex-start;
    }

    .svc-viewport {
        overflow-x: auto;
        /* mandatory snap = carousel behaviour — each swipe settles
           firmly on a single card like the testimonial slider */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .svc-viewport::-webkit-scrollbar {
        display: none;
    }

    .svc-card {
        /* compact boxes that leave a clear peek of the next card —
           sized to fit small screens instead of filling them */
        width: min(66vw, 320px);
        scroll-snap-align: center;
    }

    .svc-panel {
        min-height: clamp(240px, 38svh, 340px);
        padding: 20px;
        border-radius: 20px;
    }

    .svc-panel-top {
        margin-bottom: 18px;
    }

    .svc-ico {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 1.1rem;
    }

    .svc-name {
        font-size: 1.18rem;
    }

    .svc-blurb {
        font-size: 0.82rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .svc-feats {
        gap: 7px;
    }

    .svc-feats li {
        font-size: 0.78rem;
    }

    .svc-go {
        width: 38px;
        height: 38px;
    }

    .svc-progress {
        margin-top: 20px;
    }
}

/* short/landscape windows — the pinned 100svh area leaves little room;
   compact the head + card so nothing gets clipped by the viewport.
   NOTE: sits after the swipe-mode block above so these values win. */
@media (max-height: 480px) {
    .svc--pin .svc-rail-pin {
        padding-top: 48px;
        padding-bottom: 10px;
    }

    .svc-head {
        margin-bottom: 8px;
        gap: 10px;
    }

    .svc-title {
        font-size: clamp(1.3rem, 6svh, 2rem);
    }

    .svc-panel {
        min-height: 0;
        padding: 14px 18px;
    }

    .svc-panel-top {
        margin-bottom: 10px;
    }

    .svc-ico {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 1rem;
    }

    .svc-feats {
        gap: 4px;
        margin-top: 6px;
    }

    .svc-feats li {
        font-size: 0.76rem;
    }

    .svc-blurb {
        font-size: 0.8rem;
    }

    .svc-panel-foot {
        margin-top: 8px;
        padding-top: 10px;
    }
}

@media (max-width: 480px) {
    .svc-title {
        font-size: clamp(1.7rem, 8.5vw, 2.3rem);
    }

    .svc-arrow {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   Project deck — scroll-driven 3D card cascade (cards-deck.js).
   Shared card visuals live here; the 3D stage applies under
   .deck--3d on every viewport. Fallback = horizontal swipe rail.
   ============================================================ */
.deck {
    --deck-ink: #10333a;
    --deck-mute: #52737c;
    --deck-line: #d5e7e5;

    position: relative;
    /* translucent wash — the page's grid pattern stays visible
       behind the cascade instead of a flat solid band */
    background: linear-gradient(
        180deg,
        transparent,
        rgb(0 84 97 / 4%) 45%,
        transparent
    );
}

.darkMode .deck {
    --deck-ink: #e4f3f0;
    --deck-mute: #8fb4ba;
    --deck-line: #24474d;
    background: linear-gradient(
        180deg,
        transparent,
        rgb(0 0 0 / 18%) 45%,
        transparent
    );
}

.deck-grid {
    display: grid;
    grid-template-columns: minmax(250px, 26%) 1fr 72px;
    align-items: center;
    gap: clamp(24px, 3.4vw, 48px);
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 48px);
}

/* let grid children shrink below their content width so the
   swipe rail actually scrolls instead of blowing out the grid */
.deck-grid > * {
    min-width: 0;
}

.deck-desc {
    max-width: 320px;
    margin: 18px 0 28px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--deck-mute);
}

.deck-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.8em 1.6em;
    border-radius: 999px;
    background: var(--deck-ink);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    transition:
        transform 0.3s ease,
        background-color 0.3s;
}

.deck-cta i {
    font-size: 0.75em;
}

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

.darkMode .deck-cta {
    background: var(--tertiary);
    color: #052e33;
}

.darkMode .deck-cta:hover {
    background: var(--primary-light);
}

/* --- stage + cards (shared) --------------------------------- */
.deck-stage {
    position: relative;
    height: min(72svh, 640px);
}

.deck-card {
    position: relative;
    display: block;
    width: min(350px, 64%);
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    /* transparent — the device mockup floats inside on the page surface */
    background: transparent;
    /* faint edge + soft lift so the card still reads as a surface */
    box-shadow:
        inset 0 0 0 1px rgb(6 40 46 / 10%),
        0 26px 52px -22px rgb(0 84 97 / 26%);
    color: #fff;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.darkMode .deck-card {
    box-shadow:
        inset 0 0 0 1px rgb(126 224 222 / 10%),
        0 26px 52px -20px rgb(0 0 0 / 55%);
}

.deck-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.02);
    transition: transform 0.6s ease;
}

.deck-card:hover img {
    transform: scale(1.04);
}

.deck--3d .deck-card:hover img {
    transform: none;
}

.deck-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 0.4em 0.8em;
    border-radius: 999px;
    background: rgb(6 40 45 / 55%);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.deck-cat {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 0.4em 0.8em;
    border-radius: 999px;
    background: rgb(6 40 45 / 55%);
    backdrop-filter: blur(6px);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 85%);
}

.deck-card-ov {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 0 20px 18px;
    background: linear-gradient(transparent 30%, rgb(5 35 40 / 82%));
}

.deck-ch {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 75%);
}

.deck-card-title {
    margin: 4px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

/* live-demo pill inside the card overlay — the card itself opens the
   screenshot viewer; only this link navigates out */
.deck-demo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--primary);
    border: 1px solid rgb(126 224 222 / 45%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
    box-shadow: 0 6px 18px rgb(1 122 130 / 40%);
}

/* pulsing light ring — plain border + soft shadow, nothing paints
   outside the ring so it can't smear on any shape */
.deck-demo::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgb(126 224 222 / 85%);
    box-shadow: 0 0 14px rgb(126 224 222 / 50%);
    pointer-events: none;
    animation: lightbox-demo-pulse 1.9s ease-in-out infinite;
}

.deck-demo:hover {
    filter: brightness(1.12);
}

/* --- progress rail ------------------------------------------ */
.deck-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: min(72svh, 640px);
    padding: 6px 0;
}

.deck-cur {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--deck-ink);
}

.deck-total {
    margin-top: -6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--deck-mute);
}

.deck-line {
    position: relative;
    flex: 1;
    width: 2px;
    margin: 8px 0;
    border-radius: 2px;
    background: var(--deck-line);
}

.deck-line i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--p, 0%);
    border-radius: inherit;
    background: var(--primary);
}

.darkMode .deck-line i {
    background: var(--tertiary);
}

.deck-line b {
    position: absolute;
    top: var(--p, 0%);
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    transform: translate(-50%, -4px);
}

.darkMode .deck-line b {
    background: var(--tertiary);
}

.deck-name {
    writing-mode: vertical-rl;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--deck-mute);
    max-height: 34%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- 3D mode (pinned scroll cascade) ------------------------- */
.deck--3d .deck-pin {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(60px, 9vh, 90px) 0;
    overflow: hidden;
}

/* section progress bar — same visual language as .svc-progress */
.deck-progress {
    position: absolute;
    right: clamp(18px, 5vw, 72px);
    bottom: 14px;
    left: clamp(18px, 5vw, 72px);
    height: 2px;
    border-radius: 2px;
    background: var(--deck-line);
    overflow: hidden;
}

.deck-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary);
}

.darkMode .deck-progress-fill {
    background: var(--tertiary);
}

.deck--3d .deck-scene {
    position: absolute;
    inset: 0;
    perspective: 1700px;
    perspective-origin: 50% 46%;
}

.deck--3d .deck-card {
    position: absolute;
    top: 50%;
    left: 50%;
    /* svh cap keeps the 4/5 card inside the stage on short screens */
    width: min(350px, 64%, 48svh);
    transform: translate(-50%, -50%);
}

/* Desktop — landscape cards: project screenshots are wide, so a 16/9
   frame shows them properly and reads wider on the stage. */
@media (min-width: 992px) {
    .deck--3d .deck-card {
        aspect-ratio: 16 / 9;
        width: min(720px, 86%, 68svh);
    }
}

/* soft ground shadow under the floating crest card */
.deck--3d .deck-stage::after,
.deck--swipe .deck-stage::after {
    content: "";
    position: absolute;
    bottom: 6%;
    left: 50%;
    z-index: 90; /* under the cards (JS sets z ≥ 100) */
    width: min(360px, 62%);
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 40 46 / 32%), transparent);
    transform: translateX(-50%);
    filter: blur(6px);
    pointer-events: none;
}

.darkMode .deck--3d .deck-stage::after,
.darkMode .deck--swipe .deck-stage::after {
    background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent);
}

/* --- fallback: native swipe rail ---------------------------- */
.deck-scene {
    display: flex;
    gap: clamp(16px, 2.5vw, 28px);
    align-items: center;
    height: 100%;
    overflow-x: auto;
    padding: 12px 4px 26px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-user-select: none;
    user-select: none;
}

.deck-scene::-webkit-scrollbar {
    display: none;
}

.deck--3d .deck-scene {
    display: block;
    overflow: visible;
    padding: 0;
}

.deck-scene > .deck-card {
    flex: none;
    scroll-snap-align: center;
}

/* --- swipe stack fallback -------------------------------------
   .deck--swipe is used only if ScrollTrigger cannot load but GSAP
   remains available. */
.deck--swipe .deck-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 56px 0 8px;
}

.deck--swipe .deck-copy {
    padding: 0 clamp(18px, 5vw, 32px);
}

.deck--swipe .deck-desc {
    max-width: 100%;
    margin: 12px 0 20px;
}

/* stage heights to the card's 4/5 aspect + room for peeks/shadow */
.deck--swipe .deck-stage {
    height: calc(min(76vw, 320px) * 1.25 + 96px);
}

.deck--swipe .deck-scene {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
}

.deck--swipe .deck-card {
    position: absolute;
    top: 58px;
    left: calc(50% - min(38vw, 160px));
    width: min(76vw, 320px);
    cursor: grab;
    touch-action: pan-y; /* vertical pans still scroll the page */
    -webkit-user-select: none;
    user-select: none;
}

.deck--swipe .deck-scene.is-drag .deck-card {
    cursor: grabbing;
}

/* keep pointer targets on the <a> so hit tests hit the top card */
.deck--swipe .deck-card * {
    pointer-events: none;
}

/* counter rail becomes a slim horizontal progress row */
.deck--swipe .deck-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 10px clamp(18px, 5vw, 32px) 44px;
}

.deck--swipe .deck-cur {
    font-size: 1.5rem;
}

.deck--swipe .deck-total {
    margin-top: 0;
}

.deck--swipe .deck-line {
    flex: 1;
    width: auto;
    height: 2px;
    margin: 0;
}

.deck--swipe .deck-line i {
    width: var(--p, 0%);
    height: 100%;
}

.deck--swipe .deck-line b {
    top: 50%;
    left: var(--p, 0%);
    transform: translate(-50%, -50%);
}

.deck--swipe .deck-name {
    writing-mode: horizontal-tb;
    max-height: none;
    max-width: 34%;
}

/* --- small screens ------------------------------------------ */
@media (max-width: 991px) {
    .deck-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 56px 0 8px;
    }

    .deck-copy {
        padding: 0 clamp(18px, 5vw, 32px);
    }

    .deck-desc {
        max-width: 100%;
        margin: 12px 0 20px;
    }

    .deck-stage {
        height: auto;
    }

    .deck-rail {
        display: none;
    }

    .deck-card {
        width: min(300px, 74vw);
    }

    .deck-scene {
        padding: 10px clamp(18px, 5vw, 32px) 34px;
        align-items: flex-start;
    }

    /* --- pinned cascade on small screens ---------------------
       compact copy, shorter stage, horizontal counter rail so the
       whole section still fits in one mobile viewport */
    .deck--3d .deck-pin {
        /* the fixed .mnav tab bar overlays the bottom ~100px — the rail
           would sit underneath it, so reserve the same clearance the
           footer uses and keep everything above the bar */
        padding: 40px 0 calc(var(--mobile-nav-clearance, 20px) + 8px);
    }

    .deck--3d .deck-grid {
        padding: 0;
    }

    /* drop the caption on the pinned mobile layout — head + stage +
       rail must share one viewport next to the mnav clearance */
    .deck--3d .deck-desc {
        display: none;
    }

    .deck--3d .deck-stage {
        height: min(48vh, 430px);
        height: min(48svh, 430px);
        /* single-column layout stacks the copy above the stage — clip so
           leaving cards slide behind it instead of flying through it */
        overflow: hidden;
    }

    .deck--3d .deck-card {
        width: min(70vw, 320px, 46vh);
        width: min(70vw, 320px, 46svh);
    }

    /* the card frame is portrait on phones — anchor screenshots to the
       top so the site's header shows instead of a mid-page crop */
    .deck--3d .deck-card img {
        object-position: center top;
    }

    .deck--3d .deck-rail {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        height: auto;
        padding: 14px clamp(18px, 5vw, 32px) 6px;
    }

    .deck--3d .deck-cur {
        font-size: 1.5rem;
    }

    .deck--3d .deck-total {
        margin-top: 0;
    }

    .deck--3d .deck-line {
        flex: 1;
        width: auto;
        height: 2px;
        margin: 0;
    }

    .deck--3d .deck-line i {
        width: var(--p, 0%);
        height: 100%;
    }

    .deck--3d .deck-line b {
        top: 50%;
        left: var(--p, 0%);
        transform: translate(-50%, -50%);
    }

    .deck--3d .deck-name {
        writing-mode: horizontal-tb;
        max-height: none;
        max-width: 46%;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* short phones — the JS keeps the pinned cascade while innerHeight is
   ≥640px; on those heights also drop the CTA and slim the stage so the
   rail still clears the fixed mobile nav */
@media (max-width: 991px) and (max-height: 720px) {
    .deck--3d .deck-pin {
        padding-top: 24px;
    }

    .deck--3d .deck-cta {
        display: none;
    }

    .deck--3d .deck-stage {
        height: min(42svh, 430px);
    }
}

/* short screens — the pinned cascade gets a slimmer stage and hides
   non-essential copy so cards remain fully visible. */
@media (max-height: 639px) {
    .deck-stage {
        height: auto;
    }

    .deck-rail {
        display: none;
    }

    .deck--3d .deck-pin {
        padding: 10px 0;
    }

    .deck--3d .deck-desc,
    .deck--3d .deck-cta {
        display: none;
    }

    .deck--3d .deck-stage {
        height: 60vh;
        height: 60svh;
    }

    .deck--3d .deck-card {
        width: min(350px, 64%, 45vh);
        width: min(350px, 64%, 45svh);
    }

    .deck--3d .deck-rail {
        display: none;
    }
}

/* ============================================================
   Dark-mode readability fixes — legacy sections that were
   invisible or low-contrast on the dark background.
   ============================================================ */
/* logo is black text on a transparent PNG — invert luminance, keep hue */
.darkMode .logo img {
    filter: invert(1) hue-rotate(180deg);
}

/* inner pages already render the white logo on a dark pill — don't
   invert it into a dark-on-dark logo */
.darkMode header.is-inner nav .logo img {
    filter: none;
}

/* hero copy legibility on dark */
.darkMode .hero-title {
    color: #e9f6f4;
}

/* hero wave PNG is light — dim it into a dark silhouette */
.darkMode .home-fast-bottom-wave img {
    filter: brightness(0.2);
}

/* rating stars had no color rule — gold reads on both modes */
.stars {
    color: #f4a62a;
    letter-spacing: 0.15em;
}

.project_container button.active {
    background: #0089ff !important;
}

/*=========================================================
	02 -> FOOTER
===========================================================*/
/* ============================================================
   Site footer — deep-ink teal surface matching the home page
   section system (same tokens, hairlines, glass panels, dot
   grids). Dark in both themes.
   ============================================================ */
.site-footer {
    --ft-bg: #061c21;
    --ft-panel: rgb(255 255 255 / 3%);
    --ft-line: rgb(255 255 255 / 8%);
    --ft-ink: #ecf7f5;
    --ft-mute: rgb(178 224 220 / 62%);

    position: relative;
    /* visible overflow lets the subscribe card straddle the top edge —
       the 3D "half on page / half on footer" effect. overflow-x:clip keeps
       the watermark from adding a horizontal scrollbar */
    overflow: visible;
    overflow-x: clip;
    margin-top: clamp(64px, 8vw, 104px);
    background:
        radial-gradient(
            880px 320px at 88% -70px,
            rgb(0 183 181 / 12%),
            transparent 65%
        ),
        var(--ft-bg);
    color: var(--ft-ink);
}

.darkMode .site-footer {
    --ft-bg: #041316;
}

/* gradient hairline across the top edge */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tertiary) 28%,
        var(--primary-light) 55%,
        transparent 88%
    );
    opacity: 0.75;
}

/* keep the subscribe card's negative top margin from collapsing into the
   container — that's what lets it straddle the footer's top edge */
.site-footer > .container {
    display: flow-root;
}

/* --- newsletter CTA panel — gradient card straddling the footer top
   edge (top half on the page bg, bottom on the dark footer = 3D float) */
.footer-subscribe {
    position: relative;
    z-index: 2;
    margin-top: -56px;
    padding: 42px 40px;
    border-radius: 30px;
    background: linear-gradient(135deg, #0c3b69 0%, #005461 50%, #018790 100%);
    box-shadow: 0 20px 45px rgba(1, 34, 48, 0.28);
    overflow: hidden;
}

.footer-subscribe::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}

.footer-subscribe__pattern {
    position: absolute;
    right: 110px;
    top: 28px;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(
        var(--primary-light) 1.5px,
        transparent 1.5px
    );
    background-size: 14px 14px;
    opacity: 0.5;
    border-radius: 26px;
}

.footer-subscribe__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 28px;
}

.footer-subscribe__heading {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--white);
    max-width: 560px;
}

.footer-subscribe__description {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    max-width: 520px;
}

.footer-subscribe__form-wrap {
    justify-self: end;
    width: min(100%, 500px);
}

.footer-subscribe__form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.footer-subscribe__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--white);
    padding: 14px 12px;
    font-size: 0.96rem;
    border-radius: 12px;
    outline: none;
}

.footer-subscribe__input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.footer-subscribe__button {
    border: none;
    border-radius: 12px;
    padding: 15px 26px;
    background: var(--white);
    color: var(--main);
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.footer-subscribe__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.2);
}

.footer-subscribe__alert {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 0.9rem;
}

.footer-subscribe__orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0) 60%
    );
    filter: blur(2px);
}

.footer-subscribe__orb--one {
    width: 210px;
    height: 210px;
    right: -40px;
    bottom: -60px;
}

.footer-subscribe__orb--two {
    width: 110px;
    height: 110px;
    right: 190px;
    bottom: 30px;
    opacity: 0.7;
}
/* --- main columns ------------------------------------------- */
.footer-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 4vw, 56px);
    padding: clamp(46px, 6vw, 74px) 0 clamp(34px, 4.5vw, 56px);
}

.footer-column__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ft-ink);
}

.footer-column__title::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--tertiary);
}

.footer-column__list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 0;
    margin: 0;
}

.footer-column__list a {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    color: var(--ft-mute);
    transition: color 0.2s ease;
}

/* dash slides in on hover */
.footer-column__list a::before {
    content: "";
    width: 0;
    height: 1.5px;
    margin-right: 0;
    border-radius: 2px;
    background: var(--tertiary);
    transition:
        width 0.25s ease,
        margin-right 0.25s ease;
}

.footer-column__list a:hover {
    color: var(--ft-ink);
}

.footer-column__list a:hover::before {
    width: 14px;
    margin-right: 8px;
}

/* --- ghost wordmark ------------------------------------------ */
/* clipped to the wrap so the fade-up reveal slides in cleanly —
   the word itself no longer translates, so its descenders show */
.footer-word-wrap {
    overflow: hidden;
}

.footer-word {
    margin: -10px 0 -6px;
    text-align: center;
    font-size: clamp(4rem, 12vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: transparent;
    /* faint fill + a slow shine sweeping the outline — readable
       against the dark footer without shouting */
    background: linear-gradient(
        100deg,
        rgb(178 224 220 / 6%) 35%,
        rgb(126 224 222 / 24%) 50%,
        rgb(178 224 220 / 6%) 65%
    );
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1.5px rgb(178 224 220 / 32%);
    animation: footerWordShine 7s linear infinite;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes footerWordShine {
    to {
        background-position: 240% center;
    }
}

/* --- bottom bar ---------------------------------------------- */
.footer-bottom {
    position: relative;
    border-top: 1px solid var(--ft-line);
    background: rgb(0 0 0 / 22%);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
}

.footer-bottom__copy {
    font-size: 0.85rem;
    color: var(--ft-mute);
}

.footer-totop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ft-mute);
    transition: color 0.2s ease;
}

.footer-totop i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ft-line);
    border-radius: 50%;
    font-size: 0.68rem;
    transition:
        border-color 0.25s ease,
        transform 0.25s ease;
}

.footer-totop:hover {
    color: var(--tertiary);
}

.footer-totop:hover i {
    border-color: var(--tertiary);
    transform: translateY(-2px);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ft-line);
    border-radius: 50%;
    background: var(--ft-panel);
    color: var(--ft-mute);
    font-size: 0.85rem;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-social a:hover {
    background: var(--tertiary);
    color: #052e33;
    transform: translateY(-2px);
}

/* footer responsive */
@media (max-width: 991px) {
    .footer-subscribe__content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-subscribe__form-wrap {
        justify-self: stretch;
        width: 100%;
    }

    /* 3 equal columns all the way down to phones — the old 2-col grid
       left the third column wrapping alone on half a row */
    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 20px;
    }
}

@media (max-width: 640px) {
    .footer-subscribe {
        border-radius: 20px;
        padding: 28px 20px;
    }

    .footer-subscribe__pattern {
        display: none;
    }

    .footer-subscribe__form {
        flex-wrap: wrap;
    }

    .footer-subscribe__input {
        flex: 1 1 calc(100% - 34px);
    }

    .footer-subscribe__button {
        width: 100%;
        justify-content: center;
        padding: 13px 22px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 44px;
    }

    .footer-word {
        font-size: 19vw;
    }

    .footer-bottom__inner {
        flex-direction: column;
        gap: 12px;
        padding: 18px 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-subscribe__button,
    .footer-totop i,
    .footer-social a,
    .footer-column__list a::before {
        transition: none;
    }

    .footer-word {
        animation: none;
    }
}

/*=========================================================
	06 -> ABOUT
===========================================================*/

/* ============================================================
   Shared skill bars (About page) — thin teal meters, animated
   by script.js via data-percentage.
   ============================================================ */
.skill_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.skill-bar {
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgb(1 135 144 / 16%);
    background: rgb(1 135 144 / 7%);
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.darkMode .skill-bar {
    border-color: rgb(178 224 220 / 16%);
    background: rgb(178 224 220 / 7%);
}

.skill-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    width: 0;
    min-width: 0;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    overflow: hidden;
    transition: width 2s ease-in-out;
}

.skill-bar-inner::after {
    content: attr(data-percentage);
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgb(255 255 255 / 85%);
}

.skill-bar-text {
    position: static;
    padding-left: 0;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

/* .count_container is the IntersectionObserver hook in script.js —
   keep a flex fallback for any markup that uses it standalone. */
.count_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ============================================================
   CTA strip — shared end-of-page band (about, service details,
   project demo). Teal gradient matching the stats band.
   ============================================================ */
.join_wrapper {
    position: relative;
    width: 100%;
    padding: clamp(54px, 7vw, 92px) 0;
    margin-top: clamp(56px, 7vw, 90px);
    overflow: hidden;
    background: linear-gradient(115deg, #073b43 0%, #005461 45%, #01767d 100%);
}

.join_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        52% 140% at 82% 0%,
        rgb(0 183 181 / 32%),
        transparent 62%
    );
    pointer-events: none;
}

/* right side gets its own zone: soft halo + faint dot texture so the CTA
   reads as a destination instead of floating in the gradient */
.join_wrapper::after {
    content: "";
    position: absolute;
    top: -35%;
    right: -5%;
    width: 36%;
    height: 175%;
    background:
        radial-gradient(circle at 50% 50%, rgb(255 255 255 / 14%), transparent 60%),
        radial-gradient(circle, rgb(255 255 255 / 24%) 1.1px, transparent 1.3px);
    background-size: auto, 20px 20px;
    -webkit-mask-image: radial-gradient(58% 88% at 58% 50%, #000, transparent 72%);
    mask-image: radial-gradient(58% 88% at 58% 50%, #000, transparent 72%);
    pointer-events: none;
}

/* heading + CTA share one row; wraps to a centered stack on phones */
.joining_content,
.join_wrapper > .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 32px);
}

.join-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.join-copy h3 {
    margin: 0;
}

.join-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7fe0dd;
}

.join-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--tertiary);
}

.joining_content h3 {
    margin: 12px 0 0;
    color: #fff;
    font-size: clamp(1.8rem, 0.9rem + 2.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.join_start {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

@media (max-width: 640px) {
    .joining_content,
    .join_wrapper > .container {
        justify-content: center;
        text-align: center;
    }

    .join-copy {
        align-items: center;
    }
}

/* CTA: white pill with a teal icon disc — arrow swings up-right on hover
   like a "go" affordance; lift + shadow sell the float */
.join_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.5em 0.55em 0.5em 1.7em;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 999px;
    background: #fff;
    color: #052e33;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    box-shadow: 0 10px 26px -10px rgb(0 30 40 / 45%);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.join_btn i {
    display: grid;
    place-items: center;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--tertiary));
    color: #fff;
    font-size: 0.72em;
    transition: transform 0.3s ease;
}

.join_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgb(0 30 40 / 55%);
    color: #052e33;
}

.join_btn:hover i {
    transform: rotate(-45deg);
}

@media (max-width: 640px) {
    .join_wrapper::after {
        right: -30%;
        width: 80%;
    }
}

.pricing-table {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-table .ptable-item {
    width: 33.33%;
    padding: 14px 15px;
    display: flex;
}

/* card — same language as .wc-card/.tst-card: soft surface, hairline
   border, generous radius, gentle lift on hover */
.pricing-table .ptable-single {
    --pj-line: #dbe9e7;
    --pj-ink: #10333a;
    --pj-mute: #5c7f88;
    --pj-card: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 34px 30px 30px;
    background: var(--pj-card);
    border: 1px solid var(--pj-line);
    border-radius: 22px;
    box-shadow: 0 18px 44px -24px rgb(0 84 97 / 30%);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.darkMode .pricing-table .ptable-single {
    --pj-line: #24474d;
    --pj-ink: #e4f3f0;
    --pj-mute: #8fb4ba;
    --pj-card: #122f35;
}

.pricing-table .ptable-single:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 28px 54px -24px rgb(1 135 144 / 45%);
}

/* featured plan — teal accent, raised, floating "Popular" pill */
.pricing-table .ptable-item.featured-item .ptable-single {
    border-color: var(--primary);
    border-width: 1.5px;
    box-shadow: 0 26px 56px -24px rgb(1 135 144 / 50%);
}

.pricing-table .ptable-status {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin: 0;
    text-align: center;
}

.pricing-table .ptable-status span {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    background: linear-gradient(92deg, var(--primary), var(--tertiary));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px -6px rgb(0 183 181 / 55%);
}

/* header — name + price, no color block */
.pricing-table .ptable-header {
    width: 100%;
    margin: 0;
    padding: 0 0 22px;
    text-align: left;
    border-bottom: 1px solid var(--pj-line);
}

.pricing-table .ptable-title h2 {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}

.pricing-table .ptable-price h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--pj-ink);
    font-size: clamp(2rem, 2.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pricing-table .ptable-price h2 small {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
}

.pricing-table .ptable-price h2 span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pj-mute);
}

/* features — left-aligned check list */
.pricing-table .ptable-body {
    flex: 1;
    width: 100%;
    padding: 20px 0 4px;
}

.pricing-table .ptable-description ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-table .ptable-description ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border: 0;
    text-align: left;
    color: var(--pj-mute);
    font-size: 0.92rem;
    font-weight: 450;
    letter-spacing: 0.01em;
}

.pricing-table .ptable-description ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--tertiary);
}

.pricing-table .ptable-footer {
    width: 100%;
    padding: 18px 0 0;
}

.pric-btn {
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    .pricing-table .ptable-item {
        padding: 14px 0;
    }

    .pricing-table .ptable-single {
        padding: 32px 24px 26px;
    }
}

/*=========================================================
	08 -> PROJECT start
===========================================================*/
/* more project start */

#myBtnContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#myBtnContainer button {
    margin: 10px 5px;
}

/* Add padding BETWEEN each column */
.Project_row,
.Project_row > .project_align {
    padding: 8px;
}

/* more project start */

#myBtnContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#myBtnContainer button {
    margin: 10px 5px;
}

.project_align {
    float: left;
    width: 33.33%;
    display: none;
}

.show {
    display: block;
}

/* Image viewer — the inner body scrolls so long full-page
   screenshots stay fully viewable; closes via ×, backdrop or Esc. */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center; /* body scrolls internally, so centering never clips overflow */
    justify-content: center;
    padding: 4vh 4vw;
    background: rgb(4 26 30 / 82%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lightbox.is-open {
    display: flex;
    animation: lightbox-in 0.3s ease;
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}

.lightbox-body {
    max-width: min(1060px, 94vw);
    max-height: 92vh;
    /* before the image decodes the body is content-sized → 0×0, and a
       click in that gap hit the backdrop and closed the viewer. A
       floor keeps the open state stable while the image streams in */
    min-width: min(300px, 80vw);
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 30%) transparent;
}

.lightbox-body::-webkit-scrollbar {
    width: 8px;
}

.lightbox-body::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 9%);
    border-radius: 8px;
}

.lightbox-body::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 45%);
    border-radius: 8px;
}

/* grab affordance only when there's actually something to scroll */
.lightbox-body.is-scrollable {
    cursor: grab;
}

.lightbox-body.is-dragging {
    cursor: grabbing;
}

/* pointer events pass straight through to the scroll body — this stops the
   native image ghost-drag from feeling like "the scroll doesn't work" */
.lightbox-body img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none; /* global img cap would stop tall shots overflowing */
    border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 60%);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* shots that don't need scrolling are shown WHOLE at a natural, capped
   size instead of being stretched to fill the viewer — JS adds .is-fit
   when the shot is under ~1.8× the body's height */
.lightbox-body.is-fit {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-body.is-fit img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(84vh, 860px);
}

/* "scroll for more" chip — visible only while the image overflows */
.lightbox-hint {
    position: absolute;
    left: 50%;
    bottom: calc(4vh + 16px);
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: 999px;
    background: rgb(0 183 181 / 92%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    pointer-events: none;
    box-shadow: 0 10px 26px -8px rgb(0 0 0 / 50%);
    animation: lightbox-hint-bob 1.6s ease-in-out infinite;
}

.lightbox-hint i {
    margin-right: 6px;
}

@keyframes lightbox-hint-bob {
    50% {
        transform: translate(-50%, -5px);
    }
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 22%);
    background: rgb(8 40 46 / 70%);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.lightbox-close:hover {
    transform: rotate(90deg);
    background: var(--primary);
}

/* ============ Gallery nav (multi-screenshot projects) ============
   Edge arrows + a position pill — only unhidden when the open card has
   more than one shot; clicking cycles inside the viewer itself. */
.lightbox-nav {
    position: fixed;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 22%);
    background: rgb(8 40 46 / 70%);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.lightbox-nav[hidden] {
    display: none;
}

.lightbox-prev {
    left: 22px;
}

.lightbox-next {
    right: 22px;
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.08);
    background: var(--primary);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.08);
    background: var(--primary);
}

.lightbox-nav {
    transform: translateY(-50%);
}

.lightbox-count {
    position: fixed;
    left: 50%;
    bottom: calc(4vh + 20px);
    transform: translateX(-50%);
    z-index: 1;
    padding: 5px 16px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(8 40 46 / 70%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-count[hidden] {
    display: none;
}

/* ============ Live-demo button (inside the image viewer) ============
   Round floating action shown when the open project has a demo URL.
   "Lighting all around": a bright arc travels the ring (::before, a
   masked conic-gradient spinning) while a soft halo pulses outward. */
.lightbox-demo {
    position: fixed;
    right: 26px;
    bottom: calc(4vh + 22px);
    z-index: 1;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.25s ease;
    box-shadow: 0 6px 18px rgb(1 122 130 / 40%);
}

.lightbox-demo[hidden] {
    display: none; /* class display:grid would beat the UA [hidden] rule */
}

/* pulsing light ring — plain border + soft shadow, can't smear */
.lightbox-demo::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgb(126 224 222 / 85%);
    box-shadow: 0 0 16px rgb(126 224 222 / 55%);
    pointer-events: none;
    animation: lightbox-demo-pulse 1.9s ease-in-out infinite;
}

.lightbox-demo:hover {
    transform: scale(1.1);
}

/* "Click to see live demo" — a frosted pill floating left of the button */
.lightbox-demo__txt {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgb(8 28 33 / 78%);
    border: 1px solid rgb(126 224 222 / 32%);
    color: rgb(214 242 242 / 95%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px -6px rgb(0 0 0 / 55%);
    pointer-events: none; /* hover stays on the button's pill area only */
}

/* the light ring breathes — opacity + glow spread only */
@keyframes lightbox-demo-pulse {
    0%,
    100% {
        opacity: 0.4;
        box-shadow: 0 0 6px rgb(126 224 222 / 35%);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 18px rgb(126 224 222 / 60%);
    }
}

/* -- device-framed viewer — monitor/phone cards open a large mock of
   the same device; the frame stays fixed while prev/next swap only the
   shot inside its screen. The screen itself scrolls for tall shots and
   shows a bouncing scroll cue at its bottom edge. --------------------- */
.lightbox-body.has-device {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lb-dev {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}

/* shared screen — the scrollable region; its img stays full-width so
   tall screenshots overflow vertically and pan/scroll inside */
.lb-dev__screen {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: #000;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 30%) transparent;
    overscroll-behavior: contain;
}

.lb-dev__screen::-webkit-scrollbar { width: 6px; }
.lb-dev__screen::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 35%); border-radius: 6px; }

.lb-dev__screen img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    /* the global img reset caps max-height:100% — lift it so tall
       screenshots overflow the screen and scroll inside it */
    max-height: none;
    object-fit: cover;
    pointer-events: none; /* pan-drag, never ghost-drag */
    border-radius: 0;
}

.lb-dev__screen.is-scrollable { cursor: grab; }
.lb-dev__screen.is-dragging { cursor: grabbing; }

/* shots that only slightly overflow are letterboxed whole instead of
   scroll-cropped — JS adds .is-fit when the shot is under ~1.8× tall */
.lb-dev__screen.is-fit img {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #0a0e11;
}

/* monitor — graphite bezel + chrome bar, same language as the card */
.lb-dev--monitor { width: min(880px, 92%); }

.lb-dev__bezel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 14px 14px 30px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 18%),
        linear-gradient(160deg, #343d46 0%, #1a2027 48%, #0b0e12 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 14%),
        inset 0 -1px 0 rgb(0 0 0 / 55%),
        inset 0 0 0 1px rgb(255 255 255 / 8%),
        0 34px 64px -18px rgb(0 0 0 / 75%);
}

/* faint glass reflection across the whole bezel face */
.lb-dev__bezel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(115deg, rgb(255 255 255 / 6%) 0%, transparent 32%);
    pointer-events: none;
}

.lb-dev__cam {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #4a5058, #101315 70%);
}

.lb-dev__chrome {
    height: 26px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #14181b;
}

.lb-dev__chrome > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.lb-dev__chrome > i:nth-child(1) { background: #ff5f57; }
.lb-dev__chrome > i:nth-child(2) { background: #febc2e; }
.lb-dev__chrome > i:nth-child(3) { background: #28c840; }

.lb-dev__url {
    flex: 1;
    max-width: 300px;
    height: 16px;
    margin-left: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    background: #0b0e10;
    border: 1px solid rgb(255 255 255 / 5%);
    color: #8fa7ad;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-dev__url i { font-size: 7px; color: #5d7a83; }

.lb-dev--monitor .lb-dev__screen {
    aspect-ratio: 16 / 10;
    max-height: 62vh;
    border-radius: 0 0 8px 8px;
}

.lb-dev__neck {
    position: relative;
    z-index: 1;
    width: 11%;
    height: 34px;
    background: linear-gradient(90deg, #1b1e21, #4a525a 42%, #5d666e 50%, #4a525a 58%, #1b1e21);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.lb-dev__base {
    position: relative;
    z-index: 1;
    width: 44%;
    height: 13px;
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 42%),
        linear-gradient(180deg, #59616a 0%, #3a4149 52%, #191d22 100%);
    box-shadow: 0 10px 22px rgb(0 0 0 / 55%);
}

/* phone — portrait body, screen inset, island + home bar */
.lb-dev__phone {
    position: relative;
    z-index: 1;
    height: min(74vh, 660px);
    aspect-ratio: 9 / 19.5;
    border-radius: 42px;
    background:
        linear-gradient(160deg, rgb(255 255 255 / 10%), transparent 22%),
        linear-gradient(160deg, #3d434a, #14171a 55%, #0c0e10);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 14%),
        0 34px 64px -18px rgb(0 0 0 / 75%);
}

/* faint glass reflection across the phone face */
.lb-dev__phone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(115deg, rgb(255 255 255 / 7%) 0%, transparent 30%);
    pointer-events: none;
}

.lb-dev--phone .lb-dev__screen {
    position: absolute;
    inset: 3% 6.5%;
    border-radius: 30px;
}

.lb-dev__island {
    position: absolute;
    top: 1.6%;
    left: 50%;
    width: 30%;
    height: 1.5%;
    min-height: 7px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #050607;
    z-index: 4;
}

.lb-dev__home {
    position: absolute;
    bottom: 2.4%;
    left: 50%;
    width: 34%;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgb(255 255 255 / 80%);
    z-index: 4;
}

/* bouncing scroll cue — "Scroll to view" pill at the screen's bottom
   edge (a sibling so it doesn't scroll away), shown only while the
   shot overflows */
.lb-dev__scrollhint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgb(8 28 33 / 78%);
    border: 1px solid rgb(126 224 222 / 32%);
    color: var(--primary-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px -6px rgb(0 0 0 / 55%);
    pointer-events: none;
    animation: lb-hint-bounce 1.6s ease-in-out infinite;
}

.lb-dev__scrollhint i {
    font-size: 11px;
}

.lb-dev__scrollhint[hidden] { display: none; }

.lb-dev--monitor .lb-dev__scrollhint { bottom: 40px; }
.lb-dev--phone .lb-dev__scrollhint { bottom: 6.5%; }

@keyframes lb-hint-bounce {
    50% { transform: translateX(-50%) translateY(6px); }
}

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

@media (max-width: 575.98px) {
    .lb-dev--monitor { width: 96%; }
    .lb-dev__bezel { padding: 10px 10px 20px; border-radius: 10px; }
    .lb-dev__chrome { height: 20px; }
    .lb-dev--monitor .lb-dev__scrollhint { bottom: 28px; }
    .lb-dev__phone { height: min(68vh, 560px); border-radius: 32px; }
    .lb-dev--phone .lb-dev__screen { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-demo::before,
    a.pj-media__cta::before,
    .deck-demo::before {
        animation: none;
    }
}

/* theme-switch reveal — the incoming theme grows in a circle
   from the toggle button (script.js animates the clip-path) */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

/* Image hover effect */
.overlay-container {
    position: relative;
    display: inline-block;
}

.overlay-container img {
    width: 100%;
    height: 300px;
    border-radius: 8px;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
    border-radius: 10px;
}

.overlay-container:hover .overlay {
    height: 100%;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* When you mouse over the container, fade in the overlay */

/* ---------- Projects gallery (/more/demo) ----------
   Simple card grid in the home-page design language: hairline border,
   soft surface, hover zoom + "view demo" pill, category chip. */

.pj {
    --pj-line: #dbe9e7;
    --pj-ink: #10333a;
    --pj-mute: #5c7f88;
    --pj-card: #ffffff;
    padding: clamp(40px, 6vw, 64px) 0 clamp(64px, 8vw, 96px);
}

.darkMode .pj {
    --pj-line: #24474d;
    --pj-ink: #e4f3f0;
    --pj-mute: #8fb4ba;
    --pj-card: #122f35;
}

/* filter pills */
.pj-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

/* subcategory row — sits tighter under the top-level filters */
.pj-filters--sub {
    margin-top: -14px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.pj-filters--sub .pj-filter {
    font-size: 0.78rem;
    padding: 7px 16px;
    opacity: 0.9;
}

.pj-filter {
    appearance: none;
    border: 1px solid var(--pj-line);
    background: var(--pj-card);
    color: var(--pj-mute);
    padding: 9px 22px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.pj-filter:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pj-filter.active,
.pj-filter:focus-visible {
    border-color: transparent;
    background: linear-gradient(92deg, var(--primary), var(--tertiary));
    color: #fff;
    box-shadow: 0 8px 20px -8px rgb(0 183 181 / 60%);
}

.pj-filter:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* cards */
.pj-card {
    display: flex;
    flex-direction: column;
    background: var(--pj-card);
    border: 1px solid var(--pj-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 34px -22px rgb(0 84 97 / 30%);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.pj-card:hover,
.pj-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 26px 50px -24px rgb(1 135 144 / 45%);
}

.pj-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: transparent; /* device mockups float on the card surface itself */
}

/* cards that open the image viewer get the pointer affordance —
   applied via the data attr so image-less tiles stay neutral */
.pj-media[data-lightbox-src],
.deck-card[data-lightbox-src] {
    cursor: pointer;
}

.pj-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* non-device artwork (logos, posters, illustrations) is matted inside
   the card like a print — object-fit: contain so nothing is cropped,
   on a soft studio backdrop */
.pj-media img.dev-art,
.deck-card > img.dev-art {
    object-fit: contain;
    padding: 8%;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgb(126 224 222 / 10%), transparent 62%),
        linear-gradient(165deg, #fcfeff 0%, #edf3f5 100%);
}

.darkMode .pj-media img.dev-art,
.darkMode .deck-card > img.dev-art {
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgb(126 224 222 / 8%), transparent 62%),
        linear-gradient(165deg, #10232b 0%, #0a161c 100%);
}

/* shown when a project has no image — dark glyph on the light surface */
.pj-media__empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgb(6 40 46 / 28%);
    font-size: 1.6rem;
}

.darkMode .pj-media__empty {
    color: rgb(178 224 220 / 40%);
}

/* --- device frames — clean floating mockups -----------------------------
   Website-category projects show screenshots inside a monitor, app /
   mobile categories inside a phone (see WebsiteProject::deviceFrame() +
   the Frontend/includes/device-frame partial). The device sits frontal
   inside the card over a detached floor shadow. Multi-screenshot
   projects show an "N images" chip under the device — clicking the card
   opens the lightbox gallery, which owns prev/next navigation. */
.dev-frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* clicks/hover must land on the card itself — lightbox + demo link
       behavior is handled by the parent element */
    pointer-events: none;
}

/* the whole rig (bezel + stand, or phone body) lifts as ONE rigid body
   on card hover */
.dev-frame__device {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* detached floor shadow — the gap under the device is what reads as
   "floating"; it dims/shrinks as the device lifts on hover */
.dev-frame__shadow {
    position: absolute;
    left: 50%;
    bottom: 9%;
    width: 46%;
    height: 6%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgb(0 0 0 / 45%), transparent 70%);
    filter: blur(4px);
    transition:
        width 0.55s ease,
        bottom 0.55s ease,
        opacity 0.55s ease;
}

.pj-card:hover .dev-frame__shadow,
.deck-card:hover .dev-frame__shadow {
    bottom: 7%;
    width: 38%;
    opacity: 0.8;
}

.dev-frame__screen {
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 26px rgb(0 0 0 / 20%);
}

.dev-frame__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* layered glass reflections — a bright diagonal streak plus a wide
   soft one, like light hitting the panel at an angle */
.dev-frame__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(115deg, rgb(255 255 255 / 12%) 0%, transparent 24%),
        linear-gradient(105deg, transparent 55%, rgb(255 255 255 / 6%) 58%, transparent 72%);
    pointer-events: none;
}

/* -- browser chrome: the "software" the website runs in ----------------
   dots + an address pill showing the project's real demo host */
.dev-frame--monitor .dev-frame__screen {
    display: flex;
    flex-direction: column;
}

.dev-frame__chrome {
    flex: none;
    height: 11%;
    display: flex;
    align-items: center;
    gap: 2.6%;
    padding: 0 3.4%;
    background: #14181b;
}

.dev-frame__chrome > i {
    flex: none;
    width: 2.4%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.dev-frame__chrome > i:nth-child(1) { background: #ff5f57; }
.dev-frame__chrome > i:nth-child(2) { background: #febc2e; }
.dev-frame__chrome > i:nth-child(3) { background: #28c840; }

.dev-frame__url {
    flex: 1;
    max-width: 62%;
    height: 58%;
    margin-left: 2%;
    display: flex;
    align-items: center;
    gap: 3%;
    padding: 0 4%;
    border-radius: 999px;
    background: #0b0e10;
    border: 1px solid rgb(255 255 255 / 5%);
    color: #8fa7ad;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dev-frame__url i {
    flex: none;
    font-size: 6px;
    color: #5d7a83;
}

.dev-frame__viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 1px 8px rgb(0 0 0 / 35%);
}

/* -- phone software chrome: iOS-style status bar over the screenshot --- */
.dev-frame__status {
    position: absolute;
    top: 2.2%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

.dev-frame__status-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 7px;
}

/* -- screenshot view: one active shot inside the screen ----------------
   the frame is pointer-events:none so card clicks pass straight through
   to the media element's lightbox trigger */
.dev-shots {
    pointer-events: none;
}

.dev-shots img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- "N images" chip under the device — the card itself opens the
   lightbox gallery, so this is informational only --------------------- */
.dev-more {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgb(8 28 33 / 72%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(126 224 222 / 16%);
    color: rgb(210 240 240 / 92%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgb(0 0 0 / 45%);
}

.dev-more i {
    color: var(--primary-light);
    font-size: 11px;
}

/* the chip takes the frame's bottom edge — lift the device clear of it */
.dev-frame:has(.dev-more) {
    padding-bottom: 34px;
}

/* ...and lift the "View live demo" pill above the chip on hover */
.pj-media:has(.dev-more) .pj-media__cta {
    bottom: 44px;
}

/* -- monitor — standard frontal layout ------------------------------- */
.dev-frame--monitor {
    padding-bottom: 5%;
}

.dev-frame--monitor .dev-frame__device {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
}

.dev-frame__bezel {
    position: relative;
    width: 100%;
    padding: 3.1% 3.1% 6.8%; /* slim uniform bezel, slightly deeper chin */
    border-radius: 3% / 5.2%;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 18%),
        linear-gradient(160deg, #343d46 0%, #1a2027 48%, #0b0e12 100%); /* cool graphite */
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 14%),   /* top-edge glint */
        inset 0 -1px 0 rgb(0 0 0 / 55%),        /* bottom edge */
        inset 0 0 0 1px rgb(255 255 255 / 8%),
        0 22px 40px -12px rgb(0 0 0 / 60%);
}

.dev-frame__cam {
    position: absolute;
    top: 2.6%;
    left: 50%;
    width: 1.7%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #4a5058, #101315 70%);
    box-shadow: inset 0 0 1px #000;
}

/* power LED on the chin — brand-tinted dot */
.dev-frame__led {
    position: absolute;
    bottom: 2.1%;
    left: 50%;
    width: 1.5%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #67e8d0;
    box-shadow: 0 0 6px 1px rgb(103 232 208 / 70%);
    opacity: 0.9;
}

.dev-frame--monitor .dev-frame__screen {
    aspect-ratio: 16 / 10;
    border-radius: 1.2% / 2%;
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 60%),
        inset 0 0 26px rgb(0 0 0 / 18%);
}

/* stand — a slim neck that flares into a wide flat wedge foot, like a
   real display stand. Heights come from padding so they scale with the
   device wrapper's width; gradients fake brushed aluminum. */
.dev-frame__neck {
    width: 12%;
    padding-bottom: 6%;
    background: linear-gradient(90deg, #1b1e21, #4a525a 42%, #5d666e 50%, #4a525a 58%, #1b1e21);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.dev-frame__base {
    width: 46%;
    padding-bottom: 2.8%;
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 42%),
        linear-gradient(180deg, #59616a 0%, #3a4149 52%, #191d22 100%);
    box-shadow: 0 7px 14px rgb(0 0 0 / 45%);
}

/* -- phone — standard frontal layout --------------------------------- */
.dev-frame__phone {
    position: relative;
    height: 84%;
    aspect-ratio: 9 / 19.5;
    /* horizontal % of width / vertical % of height ≈ uniform corners
       since the body is ~9:19.5 */
    border-radius: 14% / 6.5%;
    background:
        linear-gradient(160deg, rgb(255 255 255 / 10%), transparent 22%),
        linear-gradient(160deg, #3d434a, #14171a 55%, #0c0e10);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 14%),
        0 22px 40px -10px rgb(0 0 0 / 65%);
}

.dev-frame--phone .dev-frame__shadow {
    width: 30%;
}

.dev-frame--phone .dev-frame__screen {
    position: absolute;
    inset: 2.8% 6%; /* equal px on a ~9:19.5 body */
    border-radius: 9.5% / 4.4%;
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 55%),
        inset 0 0 22px rgb(0 0 0 / 22%);
}

/* dynamic-island pill floating over the screen's top edge */
.dev-frame__island {
    position: absolute;
    top: 1.5%;
    left: 50%;
    width: 30%;
    height: 1.4%;
    min-height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #050607;
}

/* home-indicator bar over the screen's bottom edge */
.dev-frame__home {
    position: absolute;
    bottom: 3.9%;
    left: 50%;
    width: 34%;
    height: 0.7%;
    min-height: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgb(255 255 255 / 80%);
}

/* side power button on the right edge */
.dev-frame__btn {
    position: absolute;
    right: -1.4%;
    top: 19%;
    width: 1.4%;
    min-width: 2px;
    height: 10%;
    border-radius: 2px;
    background: linear-gradient(90deg, #3a4046, #212529);
}

/* faint brand glow behind the device so the card floor isn't dead space */
.dev-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 62% 74% at 50% 44%, rgb(126 224 222 / 12%), transparent 70%);
}

/* -- hover: the device lifts a touch while the floor shadow dims ----- */
.pj-card:hover .dev-frame__device,
.pj-card:focus-within .dev-frame__device,
.deck-card:hover .dev-frame__device {
    transform: translateY(-6px);
}

/* -- context tweaks ---------------------------------------------------- */
/* in the portrait deck cards the overlay covers the bottom — shift the
   device into the upper two-thirds so the title never collides with it */
.deck-card .dev-frame {
    padding-bottom: 16%;
}

/* the darken-on-hover gradient belongs to plain images — framed
   devices sit on the transparent card surface, so a dark veil would
   grey them out */
.pj-media:not(:has(.dev-frame))::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 45%,
        rgb(6 40 46 / 55%) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.pj-card:hover .pj-media img,
.pj-card:focus-within .pj-media img {
    transform: scale(1.06);
}

.pj-card:hover .pj-media:not(:has(.dev-frame))::after,
.pj-card:focus-within .pj-media:not(:has(.dev-frame))::after {
    opacity: 1;
}

/* the CTA is a real link when a live-demo URL exists — keep the pill
   look (no underline) and let it sit above the card's click layer.
   Glow: a conic disc (::before) whose gradient ANGLE animates while
   the element stays put — rotating the element itself smears on
   non-round shapes. A solid cover (::after) leaves only the trail. */
a.pj-media__cta {
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgb(1 122 130 / 40%);
}

a.pj-media__cta:hover {
    filter: brightness(1.1);
}

/* pulsing light ring — plain border + soft shadow, can't smear */
a.pj-media__cta::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgb(126 224 222 / 85%);
    box-shadow: 0 0 14px rgb(126 224 222 / 50%);
    pointer-events: none;
    animation: lightbox-demo-pulse 1.9s ease-in-out infinite;
}

.pj-media__cta {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 10px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgb(6 40 46 / 72%);
    backdrop-filter: blur(6px);
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.pj-card:hover .pj-media__cta,
.pj-card:focus-within .pj-media__cta {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* touch devices can't hover — keep an affordance, but as a compact
   icon chip in the corner instead of a pill covering the preview */
@media (hover: none) {
    .pj-media__cta {
        opacity: 1;
        left: auto;
        right: 12px;
        top: 12px;
        bottom: auto;
        transform: none;
        padding: 0;
        width: 38px;
        height: 38px;
        justify-content: center;
        font-size: 0; /* hide the label text, keep the icon */
        border-radius: 50%;
        background: rgb(6 40 46 / 60%);
    }
    .pj-media__cta i,
    .pj-media__cta svg {
        font-size: 0.85rem;
    }
}

.pj-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 18px;
}

.pj-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pj-ink);
}

.pj-cat {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgb(1 135 144 / 10%);
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.darkMode .pj-cat {
    background: rgb(0 183 181 / 14%);
    color: var(--primary-light);
}

/*=========================================================
	09 -> CONTACT
===========================================================*/

/*=========================================================
	10 -> FAQ
===========================================================*/

.contact-page-section {
    padding: 80px 0 96px;
}

.contact-page-intro {
    max-width: 680px;
    margin-bottom: 32px;
}

.contact-page-eyebrow,
.contact-map-heading span {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-page-intro h1 {
    color: var(--black);
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 10px;
}

.contact-page-intro p,
.contact-form-heading p,
.contact-info-heading p {
    color: var(--text-color2);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    opacity: 0.78;
}

.contact-form-shell,
.contact-info-panel {
    height: 100%;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid rgba(1, 135, 144, 0.18);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(1, 34, 48, 0.1);
}

.contact-form-shell {
    background: #ffffff;
}

.darkMode .contact-form-shell {
    background: #122226;
    border-color: rgba(178, 224, 220, 0.16);
}

.contact-info-panel {
    border-color: rgba(178, 224, 220, 0.14);
    background:
        radial-gradient(
            320px 200px at 90% 0%,
            rgba(0, 183, 181, 0.22),
            transparent 65%
        ),
        linear-gradient(150deg, #06282e, #005461 80%, #01767d);
}

.contact-form-heading span,
.contact-info-heading span {
    color: var(--black);
    display: block;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-info-heading span,
.contact-info-heading p,
.contact-info-item,
.contact-info-item small,
.contact-info-item strong {
    color: var(--white);
}

.contact-form-heading p,
.contact-info-heading p {
    color: rgba(255, 255, 255, 0.78);
}

.contact-form {
    margin-top: 32px;
}

.contact-form label {
    color: var(--black);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

input.contact_input,
textarea.contact_input {
    background: #f7fafb !important;
    border: 1px solid rgba(0, 84, 97, 0.24);
    border-radius: 12px;
    color: var(--black);
    font-size: 15px;
    margin-bottom: 0;
    min-height: 52px;
    padding: 14px 16px;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.darkMode input.contact_input,
.darkMode textarea.contact_input {
    background: #10191b !important;
    border-color: rgba(178, 224, 220, 0.26);
}

.contact_input::placeholder {
    color: var(--text-color2);
    opacity: 0.72;
}

textarea.contact_input {
    min-height: 150px;
    resize: vertical;
}

input.contact_input:focus,
textarea.contact_input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(40, 122, 112, 0.14);
}

.contact-form-footer {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 28px;
}

.contact-form-footer p {
    color: var(--text-color2);
    font-size: 12px;
    margin: 0;
    opacity: 0.7;
}

.contact-form-footer p i {
    margin-right: 5px;
}

.contact-submit-btn {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}

.contact-info-heading {
    margin-bottom: 28px;
}

.contact-info-item {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    gap: 14px;
    padding: 20px 0;
    text-decoration: none;
    transition: padding-left 0.25s ease;
}

a.contact-info-item:hover {
    padding-left: 6px;
}

.contact-info-icon {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: #7fe0dd;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    font-size: 15px;
}

.contact-info-item span:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.contact-info-item small {
    font-size: 12px;
    opacity: 0.72;
}

.contact-info-item strong {
    font-size: 15px;
    font-weight: 600;
}

.contact-info-arrow {
    font-size: 12px;
    opacity: 0.75;
}

.contact-map-section {
    padding-bottom: 90px;
}

.contact-map-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
}

.contact-map-heading h2 {
    color: var(--black);
    font-size: 30px;
    margin: 7px 0 0;
}

.contact-map-heading a {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.contact-map-heading a i {
    margin-left: 5px;
}

.contact-map-frame {
    height: 360px;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(1, 135, 144, 0.2);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(1, 34, 48, 0.1);
}

.contact-map-frame iframe {
    border: 0;
    height: 100%;
    width: 100%;
    display: block;
}

/* --------------FAQ css start------------- */

.question {
    border-bottom: 1px solid var(--text-color3);
    margin: 10px;
}

.question button {
    width: 100%;
    background-color: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 18px;
    border: none;
    border-radius: 14px;
    outline: none;
    font-size: var(--small-font);
    /* white on --primary teal ≈ 5.1:1 — the old --text-color-on-teal
       pairing was ~1.9:1 and unreadable */
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.question button:hover {
    background-color: var(--hover);
}

.question button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.faq-title {
    font-size: var(--p-font);
}

.faq-content {
    padding: 0 50px;
    background-color: var(--text-color4);
    border-radius: 0 50px;
    color: var(--black);
}

.d-arrow {
    color: #fff;
    opacity: 0.85;
    transition: transform 0.25s ease;
}

/* bootstrap collapse puts aria-expanded on the .question trigger, not the button */
.question[aria-expanded="true"] .d-arrow {
    transform: rotate(180deg);
}

/* ============================================================
   HOME — Why choose us / Tech marquee / About / Stats
   Scoped redesign (wc-*, stack-*, abt-*, stats-*). Shares the
   svc-rail/deck design language: overline labels, ink titles
   with italic accent, hairline borders, soft shadow lifts.
   Interactions: cursor spotlight + tilt on .wc-card,
   pointer-pausable CSS marquee on .stack-track.
   ============================================================ */

/* ---------- (03) Why choose us — dark band ---------- */
.wc {
    --wc-ink: #eaf7f5;
    --wc-mute: #93b7bd;
    --wc-line: rgb(178 224 220 / 14%);
    --wc-line-strong: rgb(126 224 222 / 34%);
    --wc-card: rgb(178 224 220 / 5%);

    position: relative;
    overflow: hidden;
    padding: clamp(84px, 11vh, 130px) 0;
    background:
        radial-gradient(
            58% 62% at 10% 0%,
            rgb(0 183 181 / 16%),
            transparent 62%
        ),
        radial-gradient(
            46% 55% at 96% 100%,
            rgb(1 135 144 / 22%),
            transparent 62%
        ),
        linear-gradient(180deg, #06222a 0%, #0a3339 55%, #072730 100%);
}

.darkMode .wc {
    --wc-ink: #eaf7f5;
    --wc-mute: #8fb4ba;
    --wc-line: rgb(126 224 222 / 12%);
    --wc-line-strong: rgb(126 224 222 / 30%);
    --wc-card: rgb(126 224 222 / 4%);
    background:
        radial-gradient(
            58% 62% at 10% 0%,
            rgb(0 183 181 / 10%),
            transparent 62%
        ),
        radial-gradient(
            46% 55% at 96% 100%,
            rgb(1 135 144 / 16%),
            transparent 62%
        ),
        linear-gradient(180deg, #040f12 0%, #072026 55%, #040f12 100%);
}

/* faint blueprint grid fading toward the edges — keeps the dark
   band from reading as a flat slab behind the cards */
.wc::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(178 224 220 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(178 224 220 / 5%) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(
        75% 70% at 50% 32%,
        #000 30%,
        transparent 100%
    );
    mask-image: radial-gradient(75% 70% at 50% 32%, #000 30%, transparent 100%);
    pointer-events: none;
}

.wc .container {
    position: relative;
}

.wc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.wc-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--wc-ink);
}

.wc-title .it {
    font-style: italic;
    color: var(--tertiary);
}

.wc-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    max-width: 340px;
    text-align: right;
}

/* pill with a bright icon disc — matches the .join_btn treatment so the
   two contact CTAs share one visual language */
.wc-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.5em 0.55em 0.5em 1.55em;
    border: 1px solid var(--wc-line-strong);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: var(--wc-ink);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s,
        transform 0.3s,
        box-shadow 0.3s;
}

.wc-cta i {
    display: grid;
    place-items: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--tertiary));
    color: #fff;
    font-size: 0.68em;
    transition: transform 0.3s ease;
}

.wc-cta:hover {
    border-color: var(--tertiary);
    background: rgb(0 183 181 / 12%);
    color: var(--wc-ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgb(0 0 0 / 40%);
}

.wc-cta:hover i {
    transform: rotate(-45deg);
}

.wc-cta:focus-visible {
    outline: 3px solid var(--tertiary);
    outline-offset: 3px;
}

.wc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    max-width: 1120px;
    margin: clamp(38px, 6vh, 62px) auto 0;
}

.wc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 196px;
    padding: clamp(20px, 2vw, 28px);
    border: 1px solid var(--wc-line);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgb(178 224 220 / 8%),
        var(--wc-card) 55%,
        rgb(1 135 144 / 4%)
    );
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.45s ease,
        opacity 0.35s ease;
}

/* gradient hairline that lights up on hover */
.wc-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--tertiary), #8be8e4);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* cursor-tracked spotlight */
.wc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        340px circle at var(--mx, 50%) var(--my, -20%),
        rgb(0 183 181 / 14%),
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.wc-card:hover {
    transform: translateY(-7px) perspective(900px) rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg));
    border-color: var(--wc-line-strong);
    box-shadow: 0 30px 60px -28px rgb(0 0 0 / 55%);
}

.wc-card:hover::before,
.wc-card:hover::after {
    opacity: 1;
}

/* oversized ghost index — watermark inside the card's right edge,
   clears the border; glows on hover */
.wc-num {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-54%);
    font-size: clamp(3.4rem, 4.6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(178 224 220 / 18%);
    transition:
        color 0.4s ease,
        -webkit-text-stroke-color 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
    pointer-events: none;
}

.wc-card:hover .wc-num {
    color: rgb(126 224 222 / 10%);
    -webkit-text-stroke-color: rgb(126 224 222 / 50%);
    transform: translateY(-54%) translateX(-6px);
}

.wc-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgb(126 224 222 / 14%);
    border-radius: 16px;
    background: linear-gradient(145deg, #0a9299, #006b76);
    box-shadow: 0 10px 24px rgb(0 0 0 / 30%);
    color: #fff;
    font-size: 1.15rem;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.wc-card:hover .wc-ico {
    transform: rotate(-7deg) scale(1.06);
    box-shadow:
        0 14px 30px rgb(0 0 0 / 40%),
        0 0 0 6px rgb(0 183 181 / 10%);
}

/* the value badge sits on a glass tile so its light artwork pops */
/* coded card title — one line per card; sized so the longest
   name ("On-time delivery") still fits the narrowest card */
.wc-name {
    margin: auto 0 0;
    font-size: clamp(1.18rem, 1.3vw, 1.42rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--wc-ink);
}

.wc-name em {
    font-style: normal;
    background: linear-gradient(115deg, var(--primary), var(--tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-card:hover .wc-name em {
    letter-spacing: 0.01em;
}

/* ---------- (04) Tech marquee ---------- */
.stack {
    --stack-ink: #10333a;
    --stack-mute: #5c7f88;
    --stack-line: #d5e7e5;
    --stack-line-strong: #a9c9c7;
    --stack-card: #ffffff;
    --stack-chrome: #eef6f5;
    --stack-gap: 18px;

    padding: clamp(80px, 10vh, 122px) 0;
    background: linear-gradient(
        180deg,
        transparent,
        rgb(0 183 181 / 4%) 55%,
        transparent
    );
}

.darkMode .stack {
    --stack-ink: #e4f3f0;
    --stack-mute: #8fb4ba;
    --stack-line: #24474d;
    --stack-line-strong: #3d6b71;
    --stack-card: #122f35;
    --stack-chrome: #163840;
    background: linear-gradient(
        180deg,
        transparent,
        rgb(0 183 181 / 5%) 55%,
        transparent
    );
}

.stack-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.stack-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--stack-ink);
}

.stack-title .it {
    font-style: italic;
    color: var(--primary);
}

.darkMode .stack-title .it {
    color: var(--tertiary);
}

.stack-viewport {
    margin-top: clamp(32px, 5vh, 54px);
    padding: 14px 0;
    overflow: hidden;
    direction: ltr;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
}

.stack-track {
    display: flex;
    gap: var(--stack-gap);
    width: max-content;
    will-change: transform;
    animation: stack-scroll 32s linear infinite;
}

.stack-viewport:hover .stack-track {
    animation-play-state: paused;
}

@keyframes stack-scroll {
    to {
        transform: translateX(calc(-50% - var(--stack-gap) / 2));
    }
}

/* second lane runs the same loop backwards — the two rows sweep
   past each other in opposite directions */
.stack-viewport--rev {
    margin-top: 14px;
}

.stack-track--rev {
    animation-direction: reverse;
}

.stack-item {
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 14px 14px;
    border: 1px solid var(--stack-line);
    border-radius: 18px;
    background:
        radial-gradient(
            200px 120px at 100% 0%,
            rgb(0 183 181 / 7%),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            var(--stack-card),
            var(--stack-card) 70%,
            rgb(1 135 144 / 3%)
        );
    box-shadow: 0 16px 34px -28px rgb(0 49 57 / 40%);
    transition:
        transform 0.35s ease,
        border-color 0.3s ease,
        box-shadow 0.35s ease;
}

.stack-item:hover {
    transform: translateY(-5px);
    border-color: var(--stack-line-strong);
    box-shadow: 0 24px 44px -28px rgb(0 80 86 / 45%);
}

.stack-logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgb(1 135 144 / 8%);
    border-radius: 16px;
    background: var(--stack-chrome);
}

.stack-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.stack-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.stack-meta b {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--stack-ink);
}

.stack-meta i {
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stack-mute);
}

.stack-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(30px, 5vh, 46px);
}

.stack-foot-note {
    margin-right: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stack-mute);
}

.stack-pill {
    padding: 0.5em 1.05em;
    border: 1px solid var(--stack-line-strong);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--stack-mute);
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}

.stack-pill:hover {
    border-color: var(--primary);
    background: rgb(1 135 144 / 8%);
    color: var(--primary);
}

.darkMode .stack-pill:hover {
    border-color: var(--tertiary);
    background: rgb(0 183 181 / 10%);
    color: var(--tertiary);
}

/* ---------- (05) About us ---------- */
.abt {
    --abt-ink: #10333a;
    --abt-mute: #5c7f88;
    --abt-lead: #2a5560;
    --abt-line: #d5e7e5;
    --abt-line-strong: #a9c9c7;
    --abt-card: #ffffff;
    --abt-chrome: #eef6f5;

    position: relative;
    padding: clamp(80px, 11vh, 140px) 0;
}

.darkMode .abt {
    --abt-ink: #e4f3f0;
    --abt-mute: #8fb4ba;
    --abt-lead: #b9d8d4;
    --abt-line: #24474d;
    --abt-line-strong: #3d6b71;
    --abt-card: #122f35;
    --abt-chrome: #163840;
}

.abt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(44px, 6vw, 92px);
}

.abt-media {
    position: relative;
}

/* offset outline frame behind the photo */
.abt-media::after {
    content: "";
    position: absolute;
    inset: 20px -18px -18px 20px;
    border: 1.5px solid rgb(1 135 144 / 30%);
    border-radius: 34px;
    pointer-events: none;
}

.darkMode .abt-media::after {
    border-color: rgb(126 224 222 / 18%);
}

.abt-dots {
    position: absolute;
    top: -26px;
    left: -26px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(var(--primary) 1.6px, transparent 1.6px);
    background-size: 15px 15px;
    border-radius: 22px;
    opacity: 0.35;
}

.darkMode .abt-dots {
    opacity: 0.5;
    background-image: radial-gradient(var(--tertiary) 1.6px, transparent 1.6px);
}

.abt-frame {
    position: relative;
    z-index: 2;
    margin: 0;
    border: 1px solid var(--abt-line);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 34px 70px -38px rgb(0 49 57 / 45%);
}

.abt-frame img,
.abt-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.2;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.abt-media:hover .abt-frame img,
.abt-media:hover .abt-frame video {
    transform: scale(1.045);
}

.abt-badge {
    position: absolute;
    bottom: -24px;
    left: -18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 24px;
    border: 1px solid var(--abt-line);
    border-radius: 18px;
    background: var(--abt-card);
    box-shadow: 0 22px 44px -20px rgb(0 49 57 / 40%);
    animation: abt-float 5s ease-in-out infinite;
}

.abt-badge-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, var(--primary), var(--tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.abt-badge-num em {
    font-style: normal;
}

.abt-badge-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--abt-mute);
}

.abt-chip {
    position: absolute;
    top: -18px;
    right: -12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.62em 1.15em;
    border-radius: 999px;
    background: linear-gradient(120deg, #0a9299, #005f6b);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: 0 14px 30px -14px rgb(0 84 97 / 60%);
    animation: abt-float 6s ease-in-out 1.2s infinite;
    white-space: nowrap;
}

.abt-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7fe0dd;
    animation: abt-pulse 1.8s ease-in-out infinite;
}

@keyframes abt-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes abt-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgb(127 224 221 / 50%);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 5px rgb(127 224 221 / 0%);
    }
}

.abt-copy {
    min-width: 0;
}

.abt-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--abt-ink);
}

.abt-title .it {
    font-style: italic;
    color: var(--primary);
}

.darkMode .abt-title .it {
    color: var(--tertiary);
}

.abt-lead {
    margin-top: 20px;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--abt-lead);
}

.abt-desc {
    margin-top: 14px;
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--abt-mute);
}

.abt-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
}

.abt-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.abt-points li:hover {
    border-color: var(--abt-line);
    background: var(--abt-card);
    transform: translateY(-2px);
}

.darkMode .abt-points li:hover {
    box-shadow: 0 14px 30px -22px rgb(0 0 0 / 60%);
}

.abt-point-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #0a9299, #006b76);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 8px 18px rgb(0 84 97 / 20%);
}

.darkMode .abt-point-ico {
    color: #a9f0e9;
}

.abt-point-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.abt-point-body b {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--abt-ink);
}

.abt-point-body i {
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--abt-mute);
}

.abt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin-top: 32px;
}

.abt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95em 1.9em;
    border-radius: 999px;
    background: linear-gradient(120deg, #0a9299, #005f6b);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 34px -16px rgb(0 84 97 / 55%);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}

.abt-btn i {
    font-size: 0.78rem;
    transition: transform 0.3s ease;
}

.abt-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -18px rgb(0 84 97 / 65%);
    filter: brightness(1.06);
}

.abt-btn:hover i {
    transform: translateX(4px);
}

.abt-btn:focus-visible,
.abt-link:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.darkMode .abt-link {
    color: var(--tertiary);
}

.darkMode .abt-link:hover {
    color: #7fe0dd;
}

/* ---------- Stats band ---------- */
.stats {
    position: relative;
    overflow: hidden;
    padding: clamp(46px, 6vw, 74px) 0;
    background: linear-gradient(115deg, #073b43 0%, #005461 45%, #01767d 100%);
}

.stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        60% 130% at 85% 0%,
        rgb(0 183 181 / 30%),
        transparent 60%
    );
    pointer-events: none;
}

.stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-cell {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 8px clamp(16px, 2.5vw, 40px);
    justify-content: center;
}

.stat-cell + .stat-cell {
    border-left: 1px solid rgb(255 255 255 / 14%);
}

.stat-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 16px;
    background: rgb(255 255 255 / 10%);
    color: #7fe0dd;
    font-size: 1.15rem;
    transition:
        transform 0.35s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.stat-cell:hover .stat-ico {
    transform: translateY(-3px);
    background: var(--tertiary);
    color: #052e33;
}

.stat-num {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: clamp(1.7rem, 1rem + 2vw, 2.55rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    /* white → soft teal gradient makes the figures pop off the band */
    background: linear-gradient(180deg, #ffffff, #9fe9e6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* neutralise the old outlined .count style inside the new band */
.stats-grid .count {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-text-stroke: 0;
}

.stat-plus {
    font-size: 0.72em;
    font-weight: 700;
    color: #3ed6d2;
}

.stat-label {
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 62%);
}

/* ---------- (06) Testimonials ---------- */
.tst {
    --tst-ink: #10333a;
    --tst-mute: #5c7f88;
    --tst-line: #d5e7e5;
    --tst-line-strong: #a9c9c7;
    --tst-card: #ffffff;
    --tst-chrome: #eef6f5;

    padding: clamp(80px, 10vh, 122px) 0;
    background: linear-gradient(180deg, rgb(0 84 97 / 3%), transparent 60%);
}

.darkMode .tst {
    --tst-ink: #e4f3f0;
    --tst-mute: #8fb4ba;
    --tst-line: #24474d;
    --tst-line-strong: #3d6b71;
    --tst-card: #122f35;
    --tst-chrome: #163840;
    background: linear-gradient(180deg, rgb(0 183 181 / 5%), transparent 60%);
}

.tst-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(40px, 5vw, 84px);
}

.tst-title {
    margin-top: 10px;
    font-size: clamp(1.8rem, 0.9rem + 2.35vw, 3.05rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--tst-ink);
}

.tst-title .it {
    font-style: italic;
    color: var(--primary);
}

.darkMode .tst-title .it {
    color: var(--tertiary);
}


.tst-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.tst-arrow {
    all: unset;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--tst-line-strong);
    border-radius: 50%;
    color: var(--tst-ink);
    font-size: 0.85rem;
    cursor: pointer;
    transition:
        background-color 0.3s,
        color 0.3s,
        border-color 0.3s,
        transform 0.3s;
}

.tst-arrow:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.darkMode .tst-arrow:hover {
    border-color: var(--tertiary);
    background: var(--tertiary);
    color: #052e33;
}

.tst-arrow:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.tst-count {
    min-width: 58px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tst-mute);
}

.tst-count b {
    color: var(--tst-ink);
}

/* fills while autoplay runs; JS sets the width */
.tst-progress {
    width: min(100%, 230px);
    height: 2px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--tst-line);
}

.tst-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary);
}

.darkMode .tst-progress-fill {
    background: var(--tertiary);
}

.tst-stage {
    min-width: 0;
    overflow: hidden;
    padding: 14px 2px 26px;
}

.tst-track {
    display: flex;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.tst-card {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(26px, 3vw, 42px);
    border: 1px solid var(--tst-line);
    border-radius: 24px;
    background:
        radial-gradient(
            320px 200px at 100% 0%,
            rgb(0 183 181 / 8%),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            var(--tst-card),
            var(--tst-card) 70%,
            rgb(1 135 144 / 3%)
        );
    box-shadow: 0 22px 52px -34px rgb(0 49 57 / 45%);
    overflow: hidden;
    transition: border-color 0.35s ease;
}

/* same cursor spotlight as the why-choose-us cards */
.tst-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        320px circle at var(--mx, 50%) var(--my, -20%),
        rgb(0 183 181 / 8%),
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.tst-card:hover {
    border-color: var(--tst-line-strong);
}

.tst-card:hover::after {
    opacity: 1;
}

.tst-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tst-quote {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgb(1 135 144 / 10%);
    border-radius: 16px;
    background: linear-gradient(145deg, #0a9299, #006b76);
    box-shadow: 0 10px 24px rgb(0 84 97 / 20%);
    color: #fff;
    font-size: 1.05rem;
}

.darkMode .tst-quote {
    color: #a9f0e9;
}

.tst-card .stars {
    font-size: 0.95rem;
}

.tst-text {
    margin: 24px 0 26px;
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--tst-ink);
}

.tst-who {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--tst-line);
}

.tst-avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border: 2px solid var(--tst-line);
    border-radius: 50%;
    object-fit: cover;
    background: var(--tst-chrome);
}

.tst-who-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.tst-who-meta b {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tst-ink);
}

.tst-who-meta i {
    font-size: 0.78rem;
    font-style: normal;
    color: var(--tst-mute);
}

.tst-who-meta em {
    font-weight: 700;
    color: var(--primary);
}

.darkMode .tst-who-meta em {
    color: var(--tertiary);
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .wc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 640px;
    }

    .wc-card {
        min-height: 0;
    }
}

@media (max-width: 991px) {
    .wc-head,
    .stack-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .wc-head-right {
        align-items: flex-start;
        max-width: 560px;
        text-align: left;
    }

    .abt-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .abt-media {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }

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

    .stat-cell {
        padding: 8px 18px;
    }

    .stat-cell + .stat-cell {
        border-left: none;
    }

    .stat-cell:nth-child(even) {
        border-left: 1px solid rgb(255 255 255 / 14%);
    }

    .stat-cell:nth-child(n + 3) {
        border-top: 1px solid rgb(255 255 255 / 14%);
        padding-top: 26px;
    }

    .tst-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* compact mobile header: overline row, then title + arrows on one
       line, progress bar full-width underneath the card cluster */
    .tst-copy {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
    }

    .tst-copy .svc-overline {
        flex: 1 1 100%;
    }

    .tst-copy .tst-title {
        flex: 1 1 auto;
        margin: 0;
    }

    .tst-nav {
        margin-top: 0;
    }

    .tst-progress {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 4px;
    }
}

@media (max-width: 640px) {
    .wc {
        padding: 70px 0;
    }

    .wc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 400px;
    }

    .stack {
        padding: 70px 0;
    }

    .stack-item {
        padding: 12px 18px 12px 12px;
    }

    .stack-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .stack-logo img {
        width: 30px;
        height: 30px;
    }

    .abt {
        padding: 70px 0;
    }

    .abt-points {
        grid-template-columns: 1fr;
    }

    .abt-badge {
        left: 10px;
        bottom: -18px;
        padding: 12px 18px;
    }

    .abt-badge-num {
        font-size: 1.6rem;
    }

    .abt-chip {
        right: 6px;
        top: -14px;
    }

    .abt-media::after {
        inset: 12px -8px -10px 12px;
        border-radius: 26px;
    }

    .abt-dots {
        width: 110px;
        height: 110px;
        top: -18px;
        left: -10px;
    }

    .tst {
        padding: 70px 0;
    }

    .tst-card {
        padding: 24px 20px;
    }

    .tst-avatar {
        width: 48px;
        height: 48px;
    }

    .tst-quote {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 0.9rem;
    }

    .tst-nav {
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .stat-num {
        font-size: 1.7rem;
    }

    .stat-ico {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 1rem;
    }

    .stat-cell {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .stat-num {
        justify-content: center;
    }
}

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

    .stack-viewport {
        overflow-x: auto;
    }

    .abt-badge,
    .abt-chip,
    .abt-chip-dot {
        animation: none;
    }
}

/* ============================================================
   INNER PAGES — about / services / shared
   Same tokens + motifs as the home sections (hairlines, tiles,
   teal gradient surfaces).
   ============================================================ */

.svc-overline--center {
    display: block;
    text-align: center;
}

.apg-intro,
.apg-story,
.apg-services,
.apg-mv,
.apg-skills,
.team,
.spg {
    --pg-ink: #10333a;
    --pg-mute: #5c7f88;
    --pg-line: rgb(1 135 144 / 16%);
    --pg-card: #fff;
}

.darkMode .apg-intro,
.darkMode .apg-story,
.darkMode .apg-services,
.darkMode .apg-mv,
.darkMode .apg-skills,
.darkMode .team,
.darkMode .spg {
    --pg-ink: #e4f3f0;
    --pg-mute: #8fb4ba;
    --pg-line: rgb(178 224 220 / 14%);
    --pg-card: #122f35;
}

.apg-intro {
    padding: clamp(44px, 6vw, 84px) 0;
}

.apg-story {
    padding: clamp(44px, 6vw, 84px) 0;
}

.apg-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
}

.apg-lead {
    margin: 18px 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--pg-ink);
}

.apg-text {
    margin: 16px 0 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--pg-mute);
}

.apg-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 30px;
}

.apg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.9em 1.7em;
    border-radius: 999px;
    background: var(--main);
    color: #f4fbfa;
    font-size: 0.88rem;
    font-weight: 700;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.apg-btn i {
    font-size: 0.8em;
    transition: transform 0.25s ease;
}

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

.apg-btn:hover i {
    transform: translateX(4px);
}

.darkMode .apg-btn {
    background: var(--tertiary);
    color: #052e33;
}

.darkMode .apg-btn:hover {
    background: var(--primary-light);
    color: #052e33;
}

.darkMode .apg-link {
    color: var(--tertiary);
}

/* framed media + floating bits, mirroring the home about block */
.apg-media {
    position: relative;
}

.apg-frame {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--pg-line);
    /* white surface — matches the home-page card language, lets the
       image breathe instead of sitting on the old dark gradient */
    background: var(--pg-card);
    box-shadow: 0 30px 60px rgb(1 34 48 / 16%);
    aspect-ratio: 4 / 3.4;
}

.apg-frame img,
.apg-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.apg-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgb(0 183 181 / 14%), transparent 45%);
    pointer-events: none;
}

.apg-frame--alt::after {
    background: linear-gradient(160deg, rgb(0 183 181 / 14%), transparent 45%);
}

.apg-media::before {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid var(--pg-line);
    border-radius: 32px;
    pointer-events: none;
}

.apg-float {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(8px);
    border: 1px solid var(--pg-line);
    box-shadow: 0 14px 34px rgb(1 34 48 / 18%);
}

.apg-float strong {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--primary);
    line-height: 1;
}

.apg-float span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pg-mute);
}

.apg-chip {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5em 1em;
    border-radius: 999px;
    background: rgb(6 40 45 / 55%);
    backdrop-filter: blur(6px);
    border: 1px solid rgb(255 255 255 / 16%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
}

.apg-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tertiary);
    animation: apg-pulse 2.2s ease-in-out infinite;
}

@keyframes apg-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgb(0 183 181 / 55%);
    }
    55% {
        box-shadow: 0 0 0 7px rgb(0 183 181 / 0%);
    }
}

.darkMode .apg-float {
    background: rgb(10 30 34 / 88%);
}

.darkMode .apg-float strong {
    color: var(--tertiary);
}

.apg-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.apg-facts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--pg-mute);
}

.apg-facts li i {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgb(0 183 181 / 14%);
    color: var(--primary);
    font-size: 0.6rem;
}

.darkMode .apg-facts li i {
    color: var(--tertiary);
}

/* --- team ----------------------------------------------------- */
.team {
    padding: clamp(44px, 6vw, 84px) 0;
}

.team-head {
    max-width: 560px;
    margin: 0 auto clamp(32px, 4.5vw, 50px);
    text-align: center;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 32px);
    max-width: 820px;
    margin: 0 auto;
}

.team-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--pg-line);
    background: var(--pg-card);
    box-shadow: 0 16px 40px rgb(1 34 48 / 9%);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    border-color: rgb(0 183 181 / 45%);
    box-shadow: 0 28px 60px rgb(1 34 48 / 15%);
}

.team-photo {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 4.1;
    background: linear-gradient(150deg, #0c3941, #01767d);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.team-card:hover .team-photo img {
    transform: scale(1.05);
}

.team-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgb(6 40 45 / 0%) 55%,
        rgb(6 40 45 / 45%)
    );
    pointer-events: none;
}

.team-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 0.5em 1em;
    border-radius: 999px;
    background: rgb(6 40 45 / 62%);
    backdrop-filter: blur(6px);
    border: 1px solid rgb(255 255 255 / 18%);
    color: #7fe0dd;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.team-meta {
    padding: 20px 22px 24px;
}

.team-name {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pg-ink);
}

.team-role {
    margin: 6px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

.darkMode .team-role {
    color: var(--tertiary);
}

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px dashed var(--pg-line);
    padding-bottom: 3px;
    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.team-link:hover {
    color: var(--secondary);
    gap: 12px;
}

.darkMode .team-link {
    color: var(--tertiary);
}

.darkMode .team-link:hover {
    color: var(--primary-light);
}

/* --- about mini services — auto-scrolling marquee -------------- */
.apg-services {
    padding: clamp(44px, 6vw, 84px) 0;
}

.apg-services-head {
    margin-bottom: clamp(30px, 4.5vw, 48px);
    text-align: center;
}

.apg-svc-marquee {
    overflow: hidden;
    direction: ltr;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
}

.apg-svc-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 10px 0;
    will-change: transform;
    animation: apg-svc-scroll 30s linear infinite;
}

.apg-svc-marquee:hover .apg-svc-track {
    animation-play-state: paused;
}

@keyframes apg-svc-scroll {
    to {
        transform: translateX(calc(-50% - 8px));
    }
}

.apg-svc {
    width: clamp(250px, 26vw, 320px);
    flex: none;
}

.apg-svc {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--pg-line);
    background: var(--pg-card);
    color: inherit;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.apg-svc:hover {
    transform: translateY(-4px);
    border-color: rgb(0 183 181 / 45%);
    box-shadow: 0 18px 40px rgb(1 34 48 / 12%);
    color: inherit;
}

.apg-svc-idx {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--pg-mute);
    opacity: 0.8;
}

.apg-svc-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    color: #fff;
    font-size: 1.05rem;
    flex: none;
}

.apg-svc-name {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pg-ink);
    padding-right: 30px;
}

.apg-svc-go {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--pg-line);
    color: var(--pg-mute);
    font-size: 0.68rem;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.apg-svc:hover .apg-svc-go {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.darkMode .apg-svc:hover .apg-svc-go {
    background: var(--tertiary);
    border-color: var(--tertiary);
    color: #052e33;
}

.apg-svc-empty,
.spc-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    text-align: center;
    color: var(--pg-mute);
}

.apg-services-foot {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* --- mission / vision cards ------------------------------------ */
.apg-mv {
    padding: clamp(44px, 6vw, 84px) 0;
}

.apg-mv-head {
    margin-bottom: clamp(30px, 4.5vw, 46px);
    text-align: center;
}

.apg-mv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
    max-width: 900px;
    margin: 0 auto;
}

.apg-mv-card {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 3.5vw, 42px);
    border-radius: 22px;
    border: 1px solid var(--pg-line);
    background: var(--pg-card);
    box-shadow: 0 14px 36px rgb(1 34 48 / 8%);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* gradient hairline — same accent trick as .wc-card */
.apg-mv-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--tertiary), #8be8e4);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.apg-mv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        300px 160px at 92% -10%,
        rgb(0 183 181 / 12%),
        transparent 65%
    );
    pointer-events: none;
}

.apg-mv-card:hover {
    transform: translateY(-5px);
    border-color: rgb(0 183 181 / 40%);
    box-shadow: 0 26px 54px rgb(1 34 48 / 14%);
}

.apg-mv-card:hover::before {
    opacity: 1;
}

.apg-mv-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgb(1 135 144 / 10%);
    color: var(--primary);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.apg-mv-card--alt .apg-mv-tag {
    background: rgb(0 183 181 / 12%);
    color: var(--tertiary);
}

.darkMode .apg-mv-tag {
    color: var(--primary-light);
}

.apg-mv-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 18px;
    box-shadow: 0 10px 22px -8px rgb(0 183 181 / 55%);
}

.apg-mv-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--pg-mute);
}

/* --- skills ----------------------------------------------------- */
.apg-skills {
    padding: clamp(44px, 6vw, 84px) 0;
}

.apg-skills-head {
    text-align: center;
    margin-bottom: clamp(30px, 4.5vw, 48px);
}

/* --- services page ---------------------------------------------- */
.spg {
    padding: clamp(44px, 6vw, 84px) 0;
}

.spg-head {
    max-width: 600px;
    margin: 0 auto clamp(34px, 4.5vw, 52px);
    text-align: center;
}

.spg-sub {
    margin: 14px 0 0;
    font-size: 0.95rem;
    color: var(--pg-mute);
}

.spg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
}

.spc {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--pg-line);
    background: var(--pg-card);
    color: inherit;
    overflow: hidden;
    transition:
        transform 0.32s ease,
        border-color 0.32s ease,
        box-shadow 0.32s ease;
}

.spc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        260px 150px at 95% -5%,
        rgb(0 183 181 / 10%),
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.32s ease;
    pointer-events: none;
}

.spc:hover {
    transform: translateY(-5px);
    border-color: rgb(0 183 181 / 45%);
    box-shadow: 0 24px 55px rgb(1 34 48 / 13%);
    color: inherit;
}

.spc:hover::before {
    opacity: 1;
}

.spc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.spc-idx {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary);
    background: rgb(1 135 144 / 9%);
    border-radius: 999px;
    padding: 0.45em 0.9em;
    white-space: nowrap;
}

.darkMode .spc-idx {
    color: var(--tertiary);
    background: rgb(0 183 181 / 10%);
}

.spc-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    color: #fff;
    font-size: 1.05rem;
    flex: none;
}

.spc-name {
    margin: 18px 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--pg-ink);
}

.spc-blurb {
    flex: 1;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--pg-mute);
}

.spc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pg-line);
}

.spc-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    background: rgb(1 135 144 / 9%);
    padding: 0.45em 0.95em;
    border-radius: 999px;
    white-space: nowrap;
}

.darkMode .spc-price {
    color: var(--tertiary);
    background: rgb(0 183 181 / 10%);
}

.spc-go {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pg-line);
    color: var(--pg-mute);
    font-size: 0.72rem;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.spc:hover .spc-go {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: rotate(-40deg);
}

.darkMode .spc:hover .spc-go {
    background: var(--tertiary);
    border-color: var(--tertiary);
    color: #052e33;
}

/* --- inner pages responsive ------------------------------------- */
@media (max-width: 991px) {
    .apg-split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .apg-split--rev .apg-media {
        order: -1;
    }

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

@media (max-width: 640px) {
    .team-grid,
    .apg-mv-grid,
    .spg-grid,
    .apg-svc-grid {
        grid-template-columns: 1fr;
    }

    .apg-media::before {
        inset: -10px;
    }
}

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

    .team-card:hover .team-photo img {
        transform: none;
    }
}

/* ============================================================
   Client portal — /portal/* pages. Same card language as the rest
   of the site: hairline border, soft surface, teal accents.
   ============================================================ */
.cp {
    --cp-ink: #10333a;
    --cp-mute: #5c7f88;
    --cp-line: #dbe9e7;
    --cp-card: #ffffff;
    padding: clamp(100px, 12vh, 140px) 0 clamp(70px, 8vw, 110px);
}

.darkMode .cp {
    --cp-ink: #e4f3f0;
    --cp-mute: #8fb4ba;
    --cp-line: #24474d;
    --cp-card: #122f35;
}

/* ---------- auth card (/portal/login) ---------- */
.cp-auth {
    min-height: 78svh;
    display: flex;
    align-items: center;
    padding: clamp(110px, 14vh, 150px) 0 80px;
}

.cp-auth-card {
    width: min(430px, 100%);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 44px);
    border-radius: 24px;
    border: 1px solid var(--cp-line, #dbe9e7);
    background: var(--cp-card, #fff);
    box-shadow: 0 24px 56px -28px rgb(0 84 97 / 35%);
}

body:not(.darkMode) .cp-auth-card {
    --cp-line: #dbe9e7;
    --cp-card: #fff;
}
.darkMode .cp-auth-card {
    --cp-line: #24474d;
    --cp-card: #122f35;
}

.cp-auth-head {
    text-align: center;
    margin-bottom: 26px;
}

.cp-auth-ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 12px 26px -10px rgb(0 183 181 / 55%);
}

.cp-auth-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-ink, #10333a);
}

.cp-auth-head p {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--cp-mute, #5c7f88);
}

body:not(.darkMode) .cp-auth-head h1 {
    color: #10333a;
}
.darkMode .cp-auth-head h1 {
    color: #e4f3f0;
}
body:not(.darkMode) .cp-auth-head p {
    color: #5c7f88;
}
.darkMode .cp-auth-head p {
    color: #8fb4ba;
}

.cp-auth-foot {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cp-mute, #5c7f88);
}

.cp-auth-foot a {
    color: var(--primary);
    font-weight: 700;
}

/* ---------- shared form controls ---------- */
.cp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cp-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-mute, #5c7f88);
}

.cp-field input,
.cp-field select,
.cp-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cp-line, #dbe9e7);
    border-radius: 13px;
    background: transparent;
    color: var(--cp-ink, #10333a);
    font-size: 0.95rem;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.darkMode .cp-field input,
.darkMode .cp-field select,
.darkMode .cp-field textarea {
    color: #e4f3f0;
    border-color: #24474d;
}

.cp-field input:focus,
.cp-field select:focus,
.cp-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(0 183 181 / 18%);
}

.cp-field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.darkMode .cp-field select option {
    background: #122f35;
    color: #e4f3f0;
}

.cp-field textarea {
    resize: vertical;
    min-height: 110px;
}

.cp-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--cp-mute, #5c7f88);
    cursor: pointer;
}

.cp-remember input {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
}

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

.cp-hint {
    margin: 0 0 18px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--cp-mute);
}

/* ---------- portal shell ---------- */
.cp-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(22px, 3.5vw, 40px);
    align-items: start;
}

.cp-side {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid var(--cp-line);
    background: var(--cp-card);
    box-shadow: 0 18px 44px -26px rgb(0 84 97 / 28%);
}

.cp-profile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cp-line);
}

.cp-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        var(--secondary),
        var(--primary) 60%,
        var(--tertiary)
    );
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.cp-profile-meta {
    min-width: 0;
}

.cp-profile-meta strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--cp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-profile-meta small {
    display: block;
    font-size: 0.74rem;
    color: var(--cp-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 13px;
    color: var(--cp-mute);
    font-size: 0.88rem;
    font-weight: 600;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.cp-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}

.cp-nav-item:hover {
    background: rgb(1 135 144 / 8%);
    color: var(--primary);
}

.cp-nav-item.active {
    background: rgb(0 183 181 / 12%);
    color: var(--primary);
    font-weight: 700;
}

.darkMode .cp-nav-item.active {
    color: var(--tertiary);
}

.cp-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #c1524a;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.cp-logout:hover {
    background: rgb(193 82 74 / 10%);
}

/* ---------- main column ---------- */
.cp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cp-head h1 {
    margin: 6px 0 0;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-ink);
}

.cp-head h1 em {
    color: var(--primary);
    font-style: italic;
}

/* the two action buttons next to the heading */
.cp-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- standard portal buttons ---------- */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    padding: 10px 19px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.cp-btn--primary {
    background: linear-gradient(115deg, var(--primary), var(--tertiary));
    color: #fff;
    box-shadow: 0 12px 26px -10px rgb(0 183 181 / 55%);
}

.cp-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
}

/* white button for use inside the dark attention banner */
.cp-btn--light {
    background: #fff;
    color: var(--primary);
}

.cp-btn--light:hover {
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgb(0 0 0 / 35%);
}

.cp-btn--ghost {
    border-color: var(--cp-line);
    color: var(--cp-ink);
    background: var(--cp-card);
    box-shadow: 0 2px 10px -4px rgb(6 33 39 / 14%);
}

.cp-btn--ghost i {
    color: var(--primary);
    transition: transform 0.25s ease;
}

.cp-btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgb(0 183 181 / 35%);
}

.cp-btn--ghost:hover i {
    transform: scale(1.12);
}

.darkMode .cp-btn--ghost {
    box-shadow: none;
}

.cp-btn--danger {
    border-color: rgb(193 82 74 / 35%);
    color: #c1524a;
    background: transparent;
}

.cp-btn--danger:hover {
    background: rgb(193 82 74 / 8%);
    color: #c1524a;
}

.darkMode .cp-btn--danger {
    color: #e0837c;
    border-color: rgb(224 131 124 / 35%);
}

.darkMode .cp-btn--danger:hover {
    color: #e0837c;
    background: rgb(224 131 124 / 8%);
}

.cp-btn--sm {
    padding: 7px 14px;
    font-size: 0.76rem;
    border-radius: 9px;
}

/* submit buttons in portal forms stay compact instead of stretching */
.cp-form > .cp-btn {
    align-self: flex-start;
}

.cp-count {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cp-mute);
    white-space: nowrap;
}

/* ---------- needs-attention banner ---------- */
.cp-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin-bottom: 22px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(115deg, #062127, #0a4a52 70%, var(--primary) 140%);
    box-shadow: 0 18px 40px -24px rgb(0 84 97 / 55%);
}

.cp-alert-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgb(255 255 255 / 14%);
    font-size: 1rem;
}

.cp-alert-body {
    flex: 1;
    min-width: 0;
}

.cp-alert-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
}

.cp-alert-body small {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: rgb(255 255 255 / 72%);
}

/* ---------- glanceable stat cards ---------- */
.cp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.cp-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--cp-line);
    background: var(--cp-card);
    color: inherit;
    text-decoration: none;
}

a.cp-stat:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgb(0 183 181 / 30%);
    color: inherit;
}

.cp-stat-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgb(1 135 144 / 10%);
    color: var(--primary);
    font-size: 0.95rem;
}

.cp-stat-body {
    min-width: 0;
}

.cp-stat-num {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-stat-label {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-mute);
}

.cp-stat--progress .cp-stat-num {
    color: var(--primary);
}
.cp-stat--await .cp-stat-ico {
    background: rgb(201 138 27 / 12%);
    color: #c98a1b;
}
.cp-stat--await .cp-stat-num {
    color: #b07a17;
}
.cp-stat--due .cp-stat-ico {
    background: rgb(179 84 62 / 12%);
    color: #b3543e;
}
.cp-stat--due .cp-stat-num {
    color: #b3543e;
}

.darkMode .cp-stat--progress .cp-stat-num {
    color: var(--tertiary);
}
.darkMode .cp-stat--await .cp-stat-num {
    color: #e2ab4a;
}
.darkMode .cp-stat--due .cp-stat-num {
    color: #e0837c;
}

/* content cards + rows */
.cp-card {
    padding: clamp(20px, 3vw, 28px);
    border-radius: 20px;
    border: 1px solid var(--cp-line);
    background: var(--cp-card);
    box-shadow: 0 14px 36px -24px rgb(0 84 97 / 25%);
    margin-bottom: 22px;
}

.cp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--cp-line);
}

.cp-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cp-ink);
}

.cp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
}

.cp-card-link i {
    font-size: 0.68rem;
    transition: transform 0.25s ease;
}

.cp-card-link:hover i {
    transform: translateX(3px);
}

.cp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cp-line);
}

.cp-row:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.cp-row-main {
    flex: 1;
    min-width: 0;
}

.cp-row-main strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cp-ink);
}

.cp-row-main small {
    display: block;
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--cp-mute);
}

.cp-empty {
    margin: 0;
    padding: 26px 0 10px;
    font-size: 0.9rem;
    color: var(--cp-mute);
}

/* status chips */
.cp-status {
    flex: none;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-status--pending {
    background: rgb(201 138 27 / 14%);
    color: #b07a17;
}
.cp-status--todo {
    background: rgb(91 127 212 / 14%);
    color: #5b7fd4;
}
.cp-status--in_progress,
.cp-status--quoted {
    background: rgb(1 135 144 / 12%);
    color: var(--primary);
}
.cp-status--done,
.cp-status--completed,
.cp-status--accepted {
    background: rgb(31 163 103 / 13%);
    color: #1f9c63;
}
.cp-status--declined {
    background: rgb(193 82 74 / 12%);
    color: #c1524a;
}

.darkMode .cp-status--pending {
    color: #e2ab4a;
}
.darkMode .cp-status--todo {
    color: #8aa6e8;
}
.darkMode .cp-status--in_progress,
.darkMode .cp-status--quoted {
    color: var(--tertiary);
}
.darkMode .cp-status--done,
.darkMode .cp-status--completed,
.darkMode .cp-status--accepted {
    color: #4cd191;
}
.darkMode .cp-status--declined {
    color: #e0837c;
}

/* price + request blocks */
.cp-price {
    flex: none;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary);
}

.darkMode .cp-price {
    color: var(--tertiary);
}

.cp-price--tbd {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--cp-mute);
}

.cp-pagination {
    padding-top: 18px;
}

/* quote accept/decline actions */
.cp-req-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.cp-req {
    padding: 16px 0;
    border-bottom: 1px solid var(--cp-line);
}

.cp-req:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.cp-req-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cp-req-body {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--cp-mute);
}

.cp-req-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}

.cp-req-note {
    font-size: 0.8rem;
    color: var(--cp-mute);
}

.cp-req-note i {
    color: var(--primary);
    margin-right: 4px;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .cp {
        padding-top: 96px;
    }

    .cp-shell {
        grid-template-columns: minmax(
            0,
            1fr
        ); /* 0 min stops the column growing to the nav's 500px+ content width */
    }

    /* portal nav moves to the floating bottom tab bar (.mnav) — the side
       card slims down to just the profile strip + sign out */
    /* portal top bar — frosted surface so content doesn't bleed through */
    header.is-portal nav {
        background: rgb(255 255 255 / 82%);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border-bottom: 1px solid rgb(16 51 58 / 8%);
    }

    .darkMode header.is-portal nav {
        background: rgb(10 30 34 / 78%);
        border-bottom-color: rgb(126 224 222 / 12%);
    }

    .cp {
        padding-bottom: calc(var(--mobile-nav-clearance, 90px) + 24px);
    }

    .cp-side {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 14px 16px;
        gap: 8px;
        border-radius: 18px;
        border-color: rgb(0 183 181 / 18%);
        background:
            linear-gradient(115deg, rgb(0 84 97 / 5%), rgb(0 183 181 / 9%)),
            var(--cp-card);
    }

    .darkMode .cp-side {
        border-color: rgb(126 224 222 / 18%);
        background:
            linear-gradient(115deg, rgb(0 183 181 / 7%), rgb(62 163 186 / 10%)),
            var(--cp-card);
    }

    .cp-profile {
        border-bottom: 0;
        margin: 0;
        padding: 0;
        flex: 1;
        min-width: 0;
    }

    .cp-avatar {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 0.85rem;
        box-shadow:
            0 0 0 2px var(--cp-card),
            0 0 0 4px rgb(0 183 181 / 25%);
    }

    .cp-logout {
        font-size: 0.8rem;
    }

    .cp-logout i {
        font-size: 0.75rem;
    }

    .cp-nav {
        display: none;
    }

    .cp-logout {
        width: auto;
        margin-top: 0;
        padding: 9px 12px;
    }

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

@media (max-width: 560px) {
    .cp-alert {
        flex-wrap: wrap;
    }

    .cp-alert .cp-btn {
        width: 100%;
    }

    /* heading + stacked full-width actions */
    .cp-head {
        margin-bottom: 18px;
    }

    .cp-head-actions {
        width: 100%;
    }

    /* side by side — equal split, tighter padding so labels fit 375px */
    .cp-head-actions .cp-btn {
        flex: 1 1 0;
        padding: 12px 10px;
        border-radius: 14px;
        font-size: 0.8rem;
    }

    /* stat cards: compact 2-col grid with larger tap targets */
    .cp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cp-stat {
        padding: 14px;
        gap: 12px;
        border-radius: 16px;
    }

    .cp-stat-num {
        font-size: 1.25rem;
    }

    /* status pills + prices drop under the title instead of squeezing it */
    .cp-row,
    .cp-req-top {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .cp-card {
        padding: 18px 16px;
    }
}

/* ============================================================
   Chat widget — floating launcher + slide-up panel, themed to the
   site. Sits above the bottom nav on mobile; back-to-top stacks
   above it.
   ============================================================ */
.cw {
    --cw-ink: #10333a;
    --cw-mute: #5c7f88;
    --cw-line: #dbe9e7;
    --cw-card: #ffffff;
    --cw-size: 54px;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1100;
    font-family: var(--font-primary, "Space Grotesk", sans-serif);
}

.darkMode .cw {
    --cw-ink: #e4f3f0;
    --cw-mute: #8fb4ba;
    --cw-line: #24474d;
    --cw-card: #122f35;
}

/* launcher */
.cw-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--cw-size);
    height: var(--cw-size);
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--tertiary));
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgb(0 183 181 / 65%);
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
}

.cw-launcher:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 20px 44px -12px rgb(0 183 181 / 70%);
}

.cw-launcher.is-open i::before {
    content: "\f00d"; /* fa-xmark glyph */
}

.cw-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e05b52;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    border: 2px solid var(--bg, #f5f8f7);
}

/* panel */
.cw-panel {
    position: absolute;
    right: 0;
    bottom: calc(var(--cw-size) + 14px);
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 40px));
    height: min(520px, calc(100svh - 140px));
    border-radius: 22px;
    border: 1px solid var(--cw-line);
    background: var(--cw-card);
    box-shadow: 0 30px 70px -24px rgb(0 40 45 / 45%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transform-origin: bottom right;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cw-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(115deg, #06282e, #005461 60%, #01767d);
    color: #fff;
    flex: none;
}

.cw-head-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cw-head-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgb(255 255 255 / 14%);
    font-size: 1rem;
}

.cw-head-meta strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.cw-head-meta small {
    display: block;
    font-size: 0.7rem;
    color: rgb(255 255 255 / 70%);
}

.cw-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.cw-close:hover {
    background: rgb(255 255 255 / 24%);
    transform: rotate(90deg);
}

.cw-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(0 135 144 / 30%) transparent;
}

.cw-body::-webkit-scrollbar {
    width: 5px;
}
.cw-body::-webkit-scrollbar-thumb {
    background: rgb(0 135 144 / 30%);
    border-radius: 5px;
}

/* start form */
.cw-start {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.cw-start-note {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--cw-mute);
}

.cw-start .global-btn {
    width: 100%;
}

.cw-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cw-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgb(193 82 74 / 10%);
    color: #c1524a;
    font-size: 0.8rem;
    font-weight: 600;
}

/* messages */
.cw-msgs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
    min-height: 100%;
}

.cw-msg {
    display: flex;
    flex-direction: column;
    width: fit-content; /* bubble hugs its text; cap stays the safety bound */
    max-width: 82%;
    gap: 3px;
}

.cw-msg--guest {
    align-self: flex-end;
    align-items: flex-end;
}

.cw-msg--admin {
    align-self: flex-start;
    align-items: flex-start;
}

.cw-msg-body {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.86rem;
    line-height: 1.5;
    overflow-wrap: anywhere; /* URLs/long tokens wrap instead of punching through */
    white-space: pre-wrap;
}

.cw-msg--guest .cw-msg-body {
    background: linear-gradient(115deg, var(--primary), var(--tertiary));
    color: #fff;
    border-bottom-right-radius: 5px;
}

.cw-msg--admin .cw-msg-body {
    background: rgb(1 135 144 / 10%);
    color: var(--cw-ink);
    border: 1px solid var(--cw-line);
    border-bottom-left-radius: 5px;
}

.cw-msg-time {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cw-mute);
    padding: 0 4px;
}

.cw-note {
    align-self: center;
    margin: 6px 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgb(1 135 144 / 8%);
    color: var(--cw-mute);
    font-size: 0.74rem;
    text-align: center;
}

/* composer */
.cw-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--cw-line);
    flex: none;
}

.cw-composer input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    border: 1px solid var(--cw-line);
    border-radius: 999px;
    background: transparent;
    color: var(--cw-ink);
    font-size: 0.88rem;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.cw-composer input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(0 183 181 / 16%);
}

.cw-composer button {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, var(--primary), var(--tertiary));
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cw-composer button:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 22px -8px rgb(0 183 181 / 60%);
}

/* FAB column — scroll-to-top sits directly above the chat launcher */

@media (max-width: 991px) {
    /* stacked above the floating nav bar — bar occupies ~84px from the
       bottom edge, chat launcher sits above it, panel above the launcher */
    .cw {
        right: 14px;
        bottom: calc(98px + env(safe-area-inset-bottom, 0px));
    }

    .cw-panel {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: calc(166px + env(safe-area-inset-bottom, 0px));
        width: auto;
        /* keep ~30px of clearance above — on short landscape screens a
           62svh height + 166px bottom pushed the top edge off-viewport */
        height: min(480px, calc(100svh - 196px));
        transform-origin: bottom center;
    }

    /* very short screens (landscape phones): the panel takes over —
       fills edge-to-edge instead of being squeezed into a sliver */
    @media (max-height: 500px) {
        .cw-panel {
            top: 10px;
            bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            height: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-panel,
    .cw-launcher,
    .cw-close,
    .cw-composer button {
        transition: none;
    }
}

/* ============ Client portal — invoice preview + toolbar ============ */
.cp-invoice-shell {
    max-width: 980px;
    margin: 0 auto;
}

.cp-invoice-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.cp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--cp-line, rgb(1 35 42 / 12%));
    color: var(--cp-ink, #0f2430);
    font-weight: 600;
    font-size: 0.88rem;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.cp-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 767px) {
    .cp-invoice-toolbar {
        padding: 0 4px;
    }
}

/* faq empty state */
.faq-empty {
    max-width: 520px;
    margin: 0 auto;
    padding: 70px 20px;
    text-align: center;
}
.faq-empty i {
    font-size: 42px;
    color: var(--primary);
    margin-bottom: 14px;
}
.faq-empty h3 {
    font-weight: 700;
    color: var(--cp-ink, #0f2430);
    margin-bottom: 8px;
}
.faq-empty p {
    color: #5a6d74;
}
.faq-empty a {
    color: var(--primary);
    font-weight: 600;
}

/* --- branded 404 page ------------------------------------------------- */
.nf-404 {
    padding: clamp(48px, 7vw, 88px) 0;
}

.nf-404__card {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(30px, 4.5vw, 52px);
    border: 1px solid var(--primary-light);
    border-radius: 24px;
    background: var(--white);
    text-align: center;
}

.nf-404__card h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 800;
    color: var(--secondary);
}

.nf-404__card p {
    margin-top: 12px;
    color: var(--text-color);
    line-height: 1.7;
}

.nf-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.nf-404__link {
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.darkMode .nf-404__card {
    background: rgb(255 255 255 / 4%);
    border-color: rgb(255 255 255 / 10%);
}

.darkMode .nf-404__card h3 {
    color: var(--global-header-color);
}