/*
Theme Name: Isharka
Author: crezen.al
Version: 1.0.0
*/

/* =========================================================
   Tokens — Light (default) & Dark
   ========================================================= */
:root {
    --bg: #faf9f6;
    --bg-2: #ffffff;
    --surface: #f4f3f0;
    --line: rgba(10, 10, 11, 0.06);
    --line-2: rgba(10, 10, 11, 0.12);
    --ink: #111110;
    --ink-soft: #525250;
    --muted: #8c8c88;
    --accent: #e11d48;
    --accent-2: #f43f5e;
    --accent-glow: rgba(225, 29, 72, 0.15);
    --header-bg: rgba(250, 249, 246, 0.72);
    --header-bg-scrolled: rgba(255, 255, 255, 0.92);
    --noise-opacity: 0.35;
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 8px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --container: 1320px;
    --shadow: 0 12px 32px rgba(17, 17, 16, 0.04);
    --shadow-lg: 0 28px 90px rgba(17, 17, 16, 0.08);
    --shadow-accent: 0 12px 32px rgba(225, 29, 72, 0.25);
    --shadow-soft: 0 16px 48px -12px rgba(17, 17, 16, 0.06), 0 8px 24px -16px rgba(17, 17, 16, 0.03);
    --shadow-soft-hover: 0 24px 64px -12px rgba(17, 17, 16, 0.10), 0 12px 32px -16px rgba(17, 17, 16, 0.05), 0 0 40px rgba(225, 29, 72, 0.03);
    --sans: 'Outfit', sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #050505;
    --bg-2: #0f0f10;
    --surface: #1a1a1c;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --ink: #fafafa;
    --ink-soft: #a1a1a6;
    --muted: #6e6e73;
    --accent: #ff2a55;
    --accent-2: #ff4d70;
    --accent-glow: rgba(255, 42, 85, 0.2);
    --header-bg: rgba(5, 5, 5, 0.58);
    --header-bg-scrolled: rgba(10, 10, 12, 0.85);
    --noise-opacity: 0.5;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 22px 70px rgba(0, 0, 0, 0.65);
    --shadow-accent: 0 12px 32px rgba(255, 42, 85, 0.35);
    --shadow-soft: 0 16px 48px -12px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.3);
    --shadow-soft-hover: 0 24px 64px -12px rgba(0, 0, 0, 0.6), 0 12px 32px -16px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 42, 85, 0.08);
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
    transition: background-color .4s var(--ease);
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "ss01", "ss02", "cv11";
    transition: background-color .4s var(--ease), color .4s var(--ease);
}

/* Noise overlay removed for clean look + better performance */

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sans);
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
    color: var(--ink-soft);
}

a {
    color: var(--ink);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a:hover {
    color: var(--accent);
}

::selection {
    background: var(--accent);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.site-content {
    position: relative;
    z-index: 10;
    /* Dynamic stack level to slide over reveal footer */
    width: 100%;
    max-width: 100%;
    /* Page background is always 100% full-width edge-to-edge */
    margin: 0;
    padding: 110px 0 0;
    background: var(--bg);
    min-height: 100vh;
    /* Ensures the fixed footer is hidden on short pages until scroll */
}

/* Elementor integration — header/footer stay PHP, content is full-width Elementor */
body.elementor-page .site-content,
.site-main--elementor {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.elementor-page .site-content {
    padding-top: 0;
}

/* Constrain standard (non-Elementor) post and page content to container width */
body:not(.elementor-page) .site-content {
    padding-left: 24px;
    padding-right: 24px;
}

body:not(.elementor-page) .site-main {
    max-width: var(--container);
    margin: 0 auto;
}

.site-main--elementor {
    padding-top: 0;
    min-height: 60vh;
}

body.home .site-content,
body.front-page .site-content {
    padding-top: 0;
}

/* Make Elementor's CSS variables match the theme's color tokens so flex containers
   you build automatically inherit the right palette (and switch with dark mode) */
:root,
.elementor-kit-default {
    --e-global-color-primary: var(--ink);
    --e-global-color-secondary: var(--ink-soft);
    --e-global-color-text: var(--ink-soft);
    --e-global-color-accent: var(--accent);
}

/* =========================================================
   Header — solid, predictable, theme-aware
   ========================================================= */
.isharka-floating-header,
.site-header,
.isharka-glass-header {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    width: calc(100% - 64px) !important;
    max-width: 1320px !important;
    min-height: 88px;
    z-index: 100000 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 28px 90px rgba(10, 10, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
    will-change: background-color;
    display: flex !important;
    align-items: center !important;
}

.isharka-floating-header>.elementor,
.isharka-floating-header>.elementor>.elementor-element {
    width: 100%;
    min-height: inherit;
    height: 100%;
    display: flex !important;
    align-items: center !important;
}

.isharka-floating-header .e-con-inner {
    width: 100%;
    max-width: none;
    min-height: inherit;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
}

.isharka-floating-header .elementor-element {
    --container-widget-width: initial;
}

.isharka-floating-header .e-con-full,
.isharka-floating-header .elementor-widget,
.isharka-floating-header .elementor-widget-container,
.isharka-floating-header .elementor-button-wrapper,
.isharka-floating-header .elementor-button,
.isharka-floating-header .elementor-heading-title {
    display: flex;
    align-items: center;
}

.isharka-floating-header .elementor-heading-title {
    margin: 0;
}

.isharka-floating-header .elementor-widget-icon .elementor-icon {
    color: #0a0a0b !important;
}

.isharka-floating-header .elementor-widget-icon .elementor-icon svg,
.isharka-floating-header .elementor-widget-icon .elementor-icon svg path {
    fill: #0a0a0b !important;
}

.isharka-floating-theme-toggle {
    position: absolute;
    top: 50%;
    right: 168px;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ─── Hamburger Button (Elementor floating header) ─── */
.isharka-mobile-burger {
    display: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: color .2s var(--ease);
}

.isharka-mobile-burger:hover {
    background: transparent;
}

.isharka-mobile-burger i,
.nav-toggle i {
    font-size: 26px;
    color: var(--ink);
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.isharka-mobile-burger:hover i,
.nav-toggle:hover i {
    color: var(--accent);
    transform: scale(1.15);
}

@media (max-width: 900px) {
    .isharka-mobile-burger {
        display: inline-flex;
    }

    .isharka-floating-theme-toggle {
        right: 58px;
    }
}


html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

* {
    box-sizing: border-box;
}

@media (max-width: 900px) {

    .elementor-section,
    .elementor-container,
    .e-con,
    .e-con-inner,
    .e-con-full {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-widget-wrap,
    .e-con,
    .e-con-inner,
    .e-con-full {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: hidden !important;
        display: block !important;
        /* Stack everything */
    }

    .elementor-widget {
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* Safety for images and absolute elements */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ─── Mobile Close Button (X) ─── */
.isharka-mobile-close {
    display: none;
}

/* ─── Mobile Slide Nav Overlay ─── */
.isharka-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg, #fafaf8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s cubic-bezier(.22, .61, .36, 1);
}

.isharka-mobile-nav.is-open {
    opacity: 1;
    pointer-events: auto;
}

.isharka-mobile-nav__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 100px 32px 60px;
}

.isharka-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.isharka-mobile-nav__list li {
    border-bottom: 1px solid var(--line, #e6e6e2);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li {
    opacity: 1;
    transform: none;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(1) {
    transition-delay: .08s;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(2) {
    transition-delay: .14s;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(3) {
    transition-delay: .20s;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(4) {
    transition-delay: .26s;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(5) {
    transition-delay: .32s;
}

.isharka-mobile-nav.is-open .isharka-mobile-nav__list li:nth-child(n+6) {
    transition-delay: .38s;
}

.isharka-mobile-nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 4px;
    font-family: var(--sans);
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    transition: color .2s ease;
}

.isharka-mobile-nav__list a:hover {
    color: var(--accent);
}

.isharka-mobile-nav__list a::after {
    content: "→";
    opacity: 0.3;
    font-weight: 300;
    font-size: 1.2rem;
    transition: opacity .2s, transform .2s;
}

.isharka-mobile-nav__list a:hover::after {
    opacity: 1;
    transform: translateX(4px);
}

:root[data-theme="dark"] .isharka-mobile-nav {
    background: var(--bg, #0a0a0b);
}

body.isharka-menu-open {
    overflow: hidden;
}

body.isharka-menu-open .isharka-floating-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.admin-bar .isharka-floating-header,
.admin-bar .site-header,
.admin-bar .isharka-glass-header {
    top: 90px !important;
}

.isharka-floating-header.is-scrolled,
.site-header.is-scrolled,
.isharka-glass-header.is-scrolled {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    box-shadow: 0 24px 80px rgba(10, 10, 11, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="dark"] .isharka-floating-header.is-scrolled,
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] .isharka-glass-header.is-scrolled {
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

/* Footer sticky (Zbulim gradual): content scrolls over the pinned footer */
body.footer-is-sticky .site-content {
    position: relative;
    z-index: 2;
}

body.footer-is-sticky .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 14px 28px;
    min-height: 88px;
}

.site-branding {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    min-width: 0;
}

.site-branding__mark {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
}

.site-branding__mark i {
    font-size: 16px;
}

.site-branding__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 4px;
    min-width: 0;
}

.site-title {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}

.site-description {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
    align-items: center;
}

.site-navigation a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 999px;
    transition: all .2s var(--ease);
    white-space: nowrap;
}

.site-navigation a:hover {
    color: var(--ink);
    background: transparent;
}

.site-navigation .current-menu-item>a {
    color: var(--ink);
    background: transparent;
}

.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s var(--ease);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    color: var(--accent);
}

.theme-toggle i {
    font-size: 18px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}

.theme-toggle__sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.theme-toggle__moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

:root[data-theme="dark"] .theme-toggle__sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}

:root[data-theme="dark"] .theme-toggle__moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--bg) !important;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    transition: all .2s var(--ease);
    white-space: nowrap;
}

.header-cta:hover {
    background: var(--accent);
    color: #fff !important;
    transform: translateY(-1px);
}

.header-cta i {
    font-size: 14px;
    margin-top: 1px;
}

.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =========================================================
   Hero - Dramatic Overhaul
   ========================================================= */
.hero {
    position: relative;
    padding: 100px 0 140px;
    isolation: isolate;
    min-height: max(100vh, 800px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hero__grid {
    position: absolute;
    inset: -200px 0 0 0;
    z-index: -1;
    pointer-events: none;
    animation: grid-drift 20s linear infinite;
}

@keyframes grid-drift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(80px);
    }
}

.hero__grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
    background-size: 100px 100px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%);
    opacity: 0.8;
}

.hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1000px 800px at 70% 30%, rgba(225, 29, 72, 0.15), transparent 60%),
        radial-gradient(800px 600px at 20% 80%, rgba(225, 29, 72, 0.10), transparent 60%);
    animation: glow-pulse 10s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .hero__glow {
    background:
        radial-gradient(1000px 800px at 70% 30%, rgba(255, 42, 85, 0.25), transparent 60%),
        radial-gradient(800px 600px at 20% 80%, rgba(255, 42, 85, 0.15), transparent 60%);
}

@keyframes glow-pulse {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1) translate(-2%, 2%);
        opacity: 1;
    }
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
    z-index: 2;
    position: relative;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px var(--shadow);
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink);
    font-weight: 600;
    animation: slide-down 0.8s var(--ease) forwards;
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes slide-down {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(225, 29, 72, .6);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, .6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(225, 29, 72, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
    }
}

.hero__title {
    font-family: var(--sans);
    font-size: clamp(3.2rem, 10vw, 8.5rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    animation: fade-up 1s var(--ease) 0.1s forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__line {
    display: block;
}

.hero__line--accent {
    background: linear-gradient(135deg, var(--accent) 0%, #ff8a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    padding-right: 10px;
    /* prevent clipping italic/bold ends */
}

.hero__line--outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--line-2);
}

.hero__lede {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--ink-soft);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
    animation: fade-up 1s var(--ease) 0.2s forwards;
    opacity: 0;
    transform: translateY(20px);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    animation: fade-up 1s var(--ease) 0.3s forwards;
    opacity: 0;
    transform: translateY(20px);
}

.hero__meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 80px;
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--line);
    width: 100%;
    max-width: 900px;
    animation: fade-up 1s var(--ease) 0.4s forwards;
    opacity: 0;
    transform: translateY(20px);
}

.hero__meta div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hero__meta strong {
    font-family: var(--sans);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__meta span {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-align: center;
    max-width: 200px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all .4s var(--ease);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.btn i {
    font-size: 18px;
    margin-top: 1px;
    transition: transform .4s var(--ease);
}

.btn--primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px var(--accent-glow);
}

.btn--primary:hover i {
    transform: translateX(4px);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
}

.btn--ghost:hover {
    border-color: var(--ink);
    background: var(--bg-2);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.btn--ghost:hover i {
    transform: translateX(4px);
}

/* =========================================================
   Marquee strip
   ========================================================= */
.strip {
    margin: 0;
    padding: 22px 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    position: relative;
    z-index: 2;
}

.strip__track {
    display: inline-flex;
    gap: 36px;
    white-space: nowrap;
    animation: marquee 36s linear infinite;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--ink);
    letter-spacing: -0.025em;
    align-items: center;
    will-change: transform;
}

.strip__track .dot {
    color: var(--accent);
    font-size: 0.5em;
}

.strip__track em {
    font-style: normal;
    color: var(--ink-soft);
    font-weight: 400;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

/* =========================================================
   Sections
   ========================================================= */
.section {
    padding: 140px 0;
    position: relative;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-bottom: 32px;
    font-weight: 500;
}

.section-label::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
}

/* =========================================================
   MRI flagship
   ========================================================= */
.mri {
    padding: 140px 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
}

.mri__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.mri__left {
    padding-right: 20px;
}

.mri__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 28px;
}

.mri__badge i {
    font-size: 16px;
    flex-shrink: 0;
}

.mri__title {
    font-family: var(--sans);
    color: var(--ink);
    font-size: clamp(3rem, 6.5vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    margin: 0 0 32px;
    font-weight: 700;
}

.mri__title em {
    display: block;
    font-style: normal;
    color: var(--ink-soft);
    font-weight: 400;
    font-size: 0.4em;
    margin-top: 18px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.mri__lede {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 36px;
    max-width: 540px;
}

.mri__points {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: grid;
    gap: 0;
}

.mri__points li {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: baseline;
}

.mri__points li:last-child {
    border-bottom: 1px solid var(--line);
}

.mri__points strong {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.mri__points span {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.mri__card {
    position: sticky;
    top: 120px;
    align-self: start;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.mri__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 100px var(--accent-glow);
}

.mri__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--accent), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.mri__card-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    margin-bottom: 20px;
    font-weight: 600;
}

.mri__pulse-line {
    color: var(--accent);
    margin: 32px 0 40px;
}

.mri__pulse-line svg {
    width: 100%;
    height: 80px;
    overflow: visible;
}

.mri__pulse-line path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ekg-pulse 3s var(--ease) infinite;
    filter: drop-shadow(0 4px 12px var(--accent-glow));
}

@keyframes ekg-pulse {
    0% {
        stroke-dashoffset: 1000;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -1000;
    }
}

.mri__card-title {
    font-family: var(--sans);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mri__card-desc {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 32px;
    font-weight: 500;
}

.mri__stats {
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mri__stats>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mri__stats dt {
    font-family: var(--sans);
    font-size: 1.7rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.03em;
}

.mri__stats dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.4;
}

/* =========================================================
   About
   ========================================================= */
.about {
    padding: 140px 0;
    border-top: 1px solid var(--line);
}

.about__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.about__media {
    position: relative;
}

.about__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--bg-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}

.about__portrait svg {
    width: 100%;
    height: 100%;
    display: block;
}

.about__badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about__badge i {
    color: var(--accent);
    font-size: 18px;
}

.about__title {
    font-family: var(--sans);
    font-size: clamp(2rem, 3.8vw, 3.4rem);
    line-height: 1.02;
    margin: 0 0 24px;
    letter-spacing: -0.035em;
    color: var(--ink);
    font-weight: 500;
}

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

.about__content p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.about__credentials {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
}

.about__credentials li {
    padding: 18px 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    font-size: 0.98rem;
}

.about__credentials li:last-child {
    border-bottom: 1px solid var(--line);
}

.about__credentials li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}

/* =========================================================
   Services — bento grid
   ========================================================= */
.services {
    padding: 140px 0;
    border-top: 1px solid var(--line);
}

.services__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.services__title {
    font-family: var(--sans);
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 16ch;
    color: var(--ink);
    font-weight: 500;
}

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

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.feature {
    position: relative;
    padding: 40px 36px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
    overflow: hidden;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    z-index: 1;
}

.feature:hover {
    transform: translateY(-8px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-lg);
}

.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
    pointer-events: none;
}

.feature::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% auto;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    opacity: 0;
    transition: opacity .6s var(--ease);
    pointer-events: none;
    z-index: -1;
}

.feature:hover::after {
    opacity: 1;
}

.feature__num {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.18em;
    margin-bottom: auto;
}

.feature h3 {
    font-family: var(--sans);
    font-size: 1.4rem;
    margin: 24px 0 8px;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-weight: 600;
}

.feature p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* =========================================================
   Process
   ========================================================= */
.process {
    padding: 140px 0;
    border-top: 1px solid var(--line);
}

.process__head {
    margin-bottom: 60px;
    max-width: 800px;
}

.process__title {
    font-family: var(--sans);
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    color: var(--ink);
    font-weight: 500;
}

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

.process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process__steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

.step {
    position: relative;
    padding: 0 24px 0 0;
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 16px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--muted);
    border-right: 1px solid var(--muted);
    transform: rotate(45deg);
    opacity: 0.4;
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.78rem;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.step:nth-child(1) .step__num {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.step h3 {
    font-family: var(--sans);
    font-size: 1.4rem;
    margin: 0 0 8px;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-weight: 600;
}

.step p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* =========================================================
   Quote
   ========================================================= */
.quote {
    padding: 160px 0;
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.quote::before {
    content: "“";
    position: absolute;
    top: -60px;
    left: -40px;
    font-family: var(--sans);
    font-size: 28rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.08;
    pointer-events: none;
    font-weight: 500;
}

.quote blockquote {
    max-width: 1000px;
    margin: 0;
    position: relative;
}

.quote p {
    font-family: var(--display);
    font-size: clamp(1.8rem, 4.2vw, 4.2rem);
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-weight: 500;
    font-style: italic;
    margin: 0 0 32px;
}

.quote cite {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
}

.quote cite::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--accent);
}

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials {
    padding: 140px 0;
    border-top: 1px solid var(--line);
}

.testimonials__head {
    margin-bottom: 60px;
    max-width: 720px;
}

.testimonials__title {
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    color: var(--ink);
    font-weight: 500;
    font-style: italic;
}

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

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.testimonial {
    background: var(--bg-2);
    border-radius: var(--r-lg);
    padding: 36px 32px;
    margin: 0;
    border: 1px solid var(--line);
    transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.testimonial:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    background: var(--surface);
}

.testimonial__stars {
    color: var(--accent);
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.testimonial blockquote {
    margin: 0 0 28px;
}

.testimonial blockquote p {
    font-family: var(--sans);
    font-size: 1.18rem;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    font-weight: 500;
}

.testimonial figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.testimonial figcaption strong {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
}

.testimonial figcaption span {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
    padding: 140px 0;
    border-top: 1px solid var(--line);
}

.faq__grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;
    align-items: start;
}

.faq__title {
    font-family: var(--sans);
    font-size: clamp(2rem, 3.8vw, 3.6rem);
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 1;
    color: var(--ink);
    font-weight: 500;
}

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

.faq__list {
    display: grid;
}

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

.faq__item:last-child {
    border-bottom: 1px solid var(--line);
}

.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 60px 28px 0;
    font-family: var(--sans);
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    position: relative;
    transition: color .25s var(--ease);
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ink-soft);
    transition: all .3s var(--ease);
}

.faq__item[open] summary::after {
    content: "−";
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.faq__item summary:hover {
    color: var(--accent);
}

.faq__item p {
    margin: 0;
    padding: 0 60px 32px 0;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
    animation: fade-in .3s var(--ease);
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   Contact
   ========================================================= */
.contact {
    padding: 140px 0 160px;
    border-top: 1px solid var(--line);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: start;
}

.contact__title {
    font-family: var(--display);
    font-size: clamp(2.4rem, 5vw, 5rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin: 12px 0 24px;
    color: var(--ink);
    font-weight: 500;
    font-style: italic;
}

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

.contact__lede {
    font-size: 1.05rem;
    margin-bottom: 40px;
    max-width: 420px;
    color: var(--ink-soft);
}

.contact__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
}

.contact__list li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.contact__list li:last-child {
    border-bottom: 1px solid var(--line);
}

.contact__label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-weight: 500;
    padding-top: 4px;
}

.contact__value {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.5;
}

a.contact__value:hover {
    color: var(--accent);
}

.contact__form-wrap {
    display: grid;
    gap: 16px;
}

.contact__form {
    background: var(--bg-2);
    padding: 48px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid;
    gap: 24px;
}

.contact__website-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.contact__notice {
    padding: 16px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.45;
}

.contact__notice--success {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #badbcc;
}

.contact__notice--error {
    color: #842029;
    background: #f8d7da;
    border-color: #f5c2c7;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field>span {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink);
    font-weight: 600;
}

.field input,
.field textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-family: var(--sans);
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--bg);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
    font-weight: 500;
}

.field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
    font-weight: 400;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-2);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.contact__form .btn {
    justify-self: start;
    margin-top: 16px;
}

.contact__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--sans);
    letter-spacing: 0;
    line-height: 1.5;
}

/* =========================================================
   Footer
   ========================================================= */
.awwwards-footer {
    background: var(--bg);
    color: var(--ink-soft);
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Lower z-index so content rolls over it */
    border-top: none;
    width: 100%;
}

.awwwards-footer a {
    color: var(--ink);
}

.awwwards-footer a:hover {
    color: var(--accent);
}

.footer-marquee {
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 24px 0;
    background: var(--bg-2);
}

.footer-marquee__track {
    display: inline-flex;
    gap: 28px;
    white-space: nowrap;
    animation: marquee 36s linear infinite;
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    /* Fine luxury uppercase text */
    color: var(--ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-items: center;
}

.footer-marquee__track .dot {
    color: var(--accent);
    font-size: 0.6em;
}

.footer-content-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 24px 24px;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1.3fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 991px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Brand Column */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand-logo {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: inline-block;
}

.footer-brand-tagline {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 16px;
    font-weight: 500;
}

.footer-brand-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--ink-soft);
    background: var(--bg-2);
    padding: 6px 12px;
    border-radius: 30px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-brand-clock i {
    color: var(--accent);
    animation: footerClockSpin 15s linear infinite;
}

/* Shared Col Label */
.footer-col-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 12px;
}

/* Contact Column */
.footer-contact-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-contact-email {
    font-family: var(--sans);
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-contact-email .email-arrow {
    font-size: 0.6em;
    color: var(--muted);
    transition: transform 0.3s var(--ease), color 0.25s var(--ease);
}

.footer-contact-email:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

.footer-contact-email:hover .email-arrow {
    transform: translate(3px, -3px);
    color: var(--accent);
}

.footer-contact-phone {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.2s var(--ease);
}

.footer-contact-phone:hover {
    color: var(--accent);
}

/* Credentials Column */
.footer-credentials-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.credential-item p {
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
}

/* Footer Bottom Base */
.footer-bottom-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom-base .copyright-text {
    opacity: 0.85;
}

.footer-bottom-base .made-by {
    font-weight: 600;
    color: var(--ink-soft);
}

.footer-bottom-base .made-by a.dev-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.footer-bottom-base .made-by a.dev-link:hover {
    color: var(--accent);
}

.footer-bottom-base .dev-logos {
    display: inline-flex;
    align-items: center;
}

.footer-bottom-base .dev-logo {
    max-height: 24px;
    width: auto;
    display: block;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-bottom-base a.dev-link:hover .dev-logo {
    transform: translateY(-1px);
    opacity: 0.85;
}

/* Light / Dark Mode logo switcher */
:root[data-theme="dark"] .footer-bottom-base .dev-logo--light {
    display: none !important;
}

:root[data-theme="dark"] .footer-bottom-base .dev-logo--dark {
    display: block !important;
}

:root:not([data-theme="dark"]) .footer-bottom-base .dev-logo--light {
    display: block !important;
}

:root:not([data-theme="dark"]) .footer-bottom-base .dev-logo--dark {
    display: none !important;
}

.site-content {
    background: var(--bg);
    /* Solid background to overlay fixed footer, letting custom page overrides work */
    position: relative;
    z-index: 10;
}

@media (min-width: 769px) {

    /* Fixed reveal state active on desktop */
    .site-footer.awwwards-footer.footer-reveal-fixed {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1;
        /* Sits behind content */
    }
}

/* --- PREMIUM FOOTER DYNAMIC STYLES --- */
.footer-glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    opacity: 0.8;
}

.footer-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.08;
    mix-blend-mode: screen;
}

.footer-glow--1 {
    width: 450px;
    height: 450px;
    background: #007484;
    top: -120px;
    left: -120px;
}

.footer-glow--2 {
    width: 550px;
    height: 550px;
    background: #ff521d;
    bottom: -150px;
    right: -100px;
}

.footer-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #10b981;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    top: -1px;
    animation: footerStatusPulse 2s infinite ease-in-out;
}

@keyframes footerStatusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.footer-hero__email-arrow {
    display: inline-block;
    font-size: 0.45em;
    vertical-align: middle;
    margin-left: 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
    color: var(--muted);
}

.footer-hero__email:hover .footer-hero__email-arrow {
    transform: translate(8px, -8px);
    color: var(--accent);
}

.col-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    /* Cohesive brand accent color */
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    top: -2px;
}

.footer-link-hover {
    position: relative;
    display: inline-block;
    color: var(--ink) !important;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-link-hover::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    /* Dynamic brand accent color */
    transition: width 0.3s ease;
}

.footer-link-hover:hover {
    color: var(--accent) !important;
    /* Dynamic brand accent color */
}

.footer-link-hover:hover::after {
    width: 100%;
}

.footer-text-highlight {
    color: var(--ink) !important;
    font-weight: 500;
}

.footer-base__clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft) !important;
}

.footer-base__clock i {
    font-size: 14px;
    color: var(--accent);
    /* Dynamic brand accent color */
    animation: footerClockSpin 15s linear infinite;
}

@keyframes footerClockSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* =========================================================
   Reveal
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--ease-out-expo, var(--ease)), transform .9s var(--ease-out-expo, var(--ease));
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   Footer reveal — cinematic stagger
   ========================================================= */
.footer-reveal__item {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: 0s;
    will-change: transform, opacity;
}

.footer-hero__email.footer-reveal__item {
    transform: translateY(64px) scale(0.94);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

[data-footer-reveal].is-revealed .footer-reveal__item {
    opacity: 1;
    transform: none;
}

.footer-reveal__giant {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
    transition-delay: 0.35s;
    will-change: transform, opacity;
}

[data-footer-reveal].is-revealed .footer-reveal__giant {
    opacity: 1;
    transform: none;
}

[data-footer-reveal] .footer-marquee {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

[data-footer-reveal].is-revealed .footer-marquee {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .footer-reveal__item,
    .footer-reveal__giant,
    [data-footer-reveal] .footer-marquee {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   Back to Top — Floating glass
   ========================================================= */
.isharka-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition:
        opacity .4s var(--ease),
        transform .4s var(--ease),
        visibility .4s,
        background-color .3s,
        color .3s,
        border-color .3s;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    outline: none;
}

.isharka-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.isharka-back-to-top:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-accent);
}

.isharka-back-to-top i {
    font-size: 24px;
    transition: transform .3s var(--ease);
}

.isharka-back-to-top:hover i {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .isharka-back-to-top {
        bottom: 24px;
        right: 24px;
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   Inner pages
   ========================================================= */
.site-main {
    display: grid;
    gap: 60px;
    padding-bottom: 80px;
}

.entry-title {
    font-family: var(--sans);
    color: var(--ink);
    font-weight: 600;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.entry-content>*+* {
    margin-top: 1.1em;
}

.entry-content blockquote {
    margin: 1.6em 0;
    padding: 1.2em 1.4em;
    border-left: 3px solid var(--accent);
    background: var(--bg-2);
    border-radius: var(--r-sm);
    color: var(--ink);
}

.post-thumbnail {
    margin: 0 0 28px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-weight: 500;
    color: var(--accent);
}

.read-more::after {
    content: "→";
    transition: transform .2s var(--ease);
}

.read-more:hover::after {
    transform: translateX(4px);
}

.widget-area {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--line);
}

.widget {
    margin-bottom: 40px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    position: relative;
    overflow: hidden;
}

.widget::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--accent), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.widget:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px var(--accent-glow);
}

.widget:hover::before {
    opacity: 0.7;
}

.widget-title {
    font-family: var(--sans);
    font-size: 1.25rem;
    color: var(--ink);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.widget-title::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget ul li {
    padding: 14px 16px;
    border-radius: var(--r-sm);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all .3s var(--ease);
    border: 1px solid transparent;
}

.widget ul li::before {
    content: "\e948";
    font-family: "Phosphor";
    font-size: 16px;
    color: var(--accent);
    opacity: 0.6;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.widget ul li:hover {
    transform: translateX(4px);
    background: var(--surface);
    border-color: var(--line-2);
}

.widget ul li:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

.widget a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color .3s var(--ease);
    flex: 1;
}

.widget a:hover {
    color: var(--ink);
}

/* =========================================================
   Elementor
   ========================================================= */
body.elementor-template-canvas .site-header,
body.elementor-template-canvas .site-footer {
    display: none;
}

body.elementor-template-canvas .site-content {
    padding-top: 0;
}

.elementor-full-width {
    padding-top: 0;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
    .mri__inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .mri__visual {
        position: relative;
        top: 0;
        aspect-ratio: auto;
    }

    .mri__left {
        padding-right: 0;
    }

    .about__grid,
    .faq__grid,
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

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

    .feature {
        grid-column: span 2;
    }

    .process__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }

    .process__steps::before {
        display: none;
    }
}

@media (max-width: 900px) {

    .isharka-floating-header,
    .site-header,
    .isharka-glass-header {
        top: 16px !important;
        width: calc(100% - 32px) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        min-height: 60px;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        padding: 0 !important;
    }

    .admin-bar .isharka-floating-header,
    .admin-bar .site-header,
    .admin-bar .isharka-glass-header {
        top: 64px !important;
    }

    .isharka-floating-header>.elementor>.e-con>.e-con-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 60px;
        padding: 0 16px 0 20px;
    }

    .isharka-floating-header .elementor-nav-menu--toggle,
    .isharka-floating-header .elementor-menu-toggle {
        background: transparent !important;
        border: none !important;
        color: var(--ink) !important;
        padding: 8px !important;
        border-radius: 50% !important;
        transition: background .2s;
    }

    .isharka-floating-header .elementor-nav-menu--toggle:hover,
    .isharka-floating-header .elementor-menu-toggle:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    .isharka-floating-header .elementor-heading-title {
        font-size: 16px !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap;
    }

    .isharka-floating-header .elementor-button {
        min-height: 40px;
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    .isharka-floating-theme-toggle {
        right: 54px;
        width: 34px;
        height: 34px;
    }

    .site-header__inner {
        padding: 8px 8px 8px 16px;
        min-height: 64px;
        gap: 6px;
    }

    .site-description {
        display: none;
    }

    .site-branding__mark {
        width: 30px;
        height: 30px;
    }

    .site-title {
        font-size: 0.92rem;
    }

    /* Mobile Close Button (X) */
    .isharka-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        color: var(--ink);
        cursor: pointer;
        z-index: 10000;
        transition: all 0.3s var(--ease);
        padding: 0;
    }

    .isharka-mobile-close:hover,
    .isharka-mobile-close:focus-visible {
        background: transparent;
        transform: scale(1.15) rotate(90deg);
        color: var(--accent);
    }

    .isharka-mobile-close i {
        font-size: 28px;
        transition: transform 0.3s var(--ease);
    }

    .site-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: var(--bg);
        padding: 100px 28px 40px;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .3s var(--ease), transform .3s var(--ease);
        z-index: 99;
    }

    .site-navigation.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .site-navigation ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-navigation li {
        border-bottom: 1px solid var(--line);
    }

    .site-navigation a {
        padding: 22px 4px;
        font-size: 1.5rem;
        font-family: var(--sans);
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        border-radius: 0;
        justify-content: space-between;
    }

    .site-navigation a:hover {
        background: transparent;
        color: var(--accent);
    }

    .site-navigation a::after {
        content: "↗";
        opacity: 0.4;
        font-weight: 300;
    }

    .header-cta span {
        display: none;
    }

    .header-cta {
        padding: 10px 12px;
    }

    .header-cta i {
        font-size: 14px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-content {
        padding-top: 72px;
    }

    body.home .site-content,
    body.front-page .site-content,
    body.elementor-page .site-content {
        padding-top: 0;
    }

    .hero__bottombar {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero__topbar {
        gap: 10px 18px;
    }

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

    .feature {
        grid-column: span 1;
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open .isharka-floating-header,
    body.menu-open .site-header,
    body.menu-open .isharka-glass-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body.menu-open .site-branding,
    body.menu-open .site-header__actions,
    body.menu-open .isharka-floating-theme-toggle {
        position: relative;
        z-index: 100;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 24px 0 60px;
        min-height: auto;
    }

    .section,
    .about,
    .services,
    .process,
    .testimonials,
    .faq,
    .mri {
        padding: 80px 0;
    }

    .quote {
        padding: 100px 0;
    }

    .quote::before {
        font-size: 16rem;
        top: -30px;
    }

    .contact {
        padding: 80px 0 100px;
    }

    .footer-hero {
        padding: 80px 20px 50px;
    }

    .footer-grid {
        padding: 50px 20px;
        gap: 32px;
    }

    .mri__points li {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .contact__list li {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 0;
    }

    .contact__form {
        padding: 32px 24px;
    }

    .testimonial {
        padding: 28px 24px;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
    }

    .nav-toggle {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   Section Indicator — Floating right dots
   ========================================================= */
.section-indicator {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 997;
}

.section-indicator a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    padding: 4px;
}

.section-indicator__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-2);
    transition: all .4s var(--ease);
}

.section-indicator__label {
    position: absolute;
    right: 24px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    opacity: 0;
    transform: translateX(10px);
    transition: all .3s var(--ease);
    pointer-events: none;
    white-space: nowrap;
}

.section-indicator a:hover .section-indicator__label {
    opacity: 1;
    transform: translateX(0);
}

.section-indicator a:hover .section-indicator__dot {
    background: var(--accent);
    transform: scale(1.4);
}

.section-indicator a.is-active .section-indicator__dot {
    background: var(--accent);
    transform: scale(1.6);
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15);
}

@media (max-width: 1200px) {
    .section-indicator {
        display: none;
    }
}

/* =========================================================
   Scroll progress, noise, CTA glow, gradient titles, blur reveal
   ========================================================= */

/* --- Scroll Progress Bar --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), #ff8a00);
    z-index: 100001;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
    opacity: 0;
    transition: opacity 0.3s;
}

.scroll-progress.is-visible {
    opacity: 1;
}

/* --- Noise / Grain Texture Overlay --- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    mix-blend-mode: overlay;
}

:root[data-theme="dark"] body::after {
    opacity: 0.04;
}

/* --- CTA Button Glow Pulse --- */
.btn--primary {
    animation: cta-glow-pulse 3s ease-in-out infinite;
}

.btn--primary:hover {
    animation: none;
}

@keyframes cta-glow-pulse {

    0%,
    100% {
        box-shadow: 0 4px 14px var(--accent-glow);
    }

    50% {
        box-shadow: 0 8px 32px var(--accent-glow), 0 0 60px rgba(225, 29, 72, 0.08);
    }
}

:root[data-theme="dark"] .btn--primary {
    animation-name: cta-glow-pulse-dark;
}

@keyframes cta-glow-pulse-dark {

    0%,
    100% {
        box-shadow: 0 4px 14px rgba(255, 42, 85, 0.25);
    }

    50% {
        box-shadow: 0 8px 32px rgba(255, 42, 85, 0.35), 0 0 60px rgba(255, 42, 85, 0.15);
    }
}

/* --- Gradient Section Titles --- */
.services__title,
.process__title,
.about__title {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink) 60%, var(--muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact__title {
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Enhanced Reveal — Blur-to-Sharp --- */
.reveal {
    filter: blur(4px);
    transition: opacity .9s var(--ease-out-expo, var(--ease)),
        transform .9s var(--ease-out-expo, var(--ease)),
        filter .9s var(--ease-out-expo, var(--ease));
}

.reveal.is-visible {
    filter: blur(0);
}

/* --- Eyebrow Letter-spacing Entrance --- */
.hero__eyebrow {
    letter-spacing: 0.35em;
    transition: letter-spacing 1.2s var(--ease), opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.hero__eyebrow.is-ready {
    letter-spacing: 0.2em;
}

/* --- Hero Stats Vertical Dividers --- */
.hero__meta div {
    position: relative;
}

.hero__meta div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -40px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line-2), transparent);
}

@media (max-width: 600px) {
    .hero__meta div:not(:last-child)::after {
        display: none;
    }
}

/* =========================================================
   Nav underline, spotlight cards, progressive steps, FAQ smooth
   ========================================================= */

/* --- Nav Link Underline Draw --- */
@media (min-width: 901px) {
    .site-navigation a {
        position: relative;
    }

    .site-navigation a::after {
        content: "";
        position: absolute;
        bottom: -2px; /* Positioned perfectly below the text within the vertical breathing room */
        left: 50%;
        transform: translateX(-50%) scale(0);
        width: 5px;
        height: 5px;
        background: var(--accent);
        border-radius: 50%;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
        opacity: 0;
    }

    .site-navigation a:hover::after {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    .site-navigation .current-menu-item>a::after {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        background: var(--accent);
    }
}

/* --- Service Card Spotlight (cursor glow) --- */
.feature {
    --mx: 50%;
    --my: 50%;
}

.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(500px circle at var(--mx) var(--my), rgba(225, 29, 72, 0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.feature:hover::before {
    opacity: 1;
}

:root[data-theme="dark"] .feature::before {
    background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255, 42, 85, 0.1), transparent 50%);
}

/* Card number slide on hover */
.feature__num {
    transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.feature:hover .feature__num {
    transform: translateX(4px);
}

/* --- Progressive Process Steps --- */
.step {
    transition: opacity 0.6s var(--ease);
}

.step:not(.is-active) {
    opacity: 0.4;
}

.step.is-active {
    opacity: 1;
}

.step .step__num {
    transition: all 0.5s var(--ease);
}

.step.is-active .step__num {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.12), 0 6px 20px rgba(225, 29, 72, 0.2);
}

:root[data-theme="dark"] .step.is-active .step__num {
    box-shadow: 0 0 0 6px rgba(255, 42, 85, 0.15), 0 6px 20px rgba(255, 42, 85, 0.25);
}

/* --- Smooth FAQ Transitions --- */
.faq__item {
    transition: border-color 0.3s var(--ease);
}

.faq__item[open] {
    border-color: var(--line-2);
}

.faq__item summary::after {
    transition: all 0.4s var(--ease), transform 0.4s var(--ease) !important;
}

.faq__item[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq__item p {
    animation: faq-slide-in 0.4s var(--ease);
}

@keyframes faq-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Hero Parallax Hint --- */
.hero__grid {
    will-change: transform;
}

/* --- Dark Mode Enhanced Card Glows --- */
:root[data-theme="dark"] .feature:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 42, 85, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .mri__card:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(255, 42, 85, 0.1);
}

:root[data-theme="dark"] .contact__form {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* --- Enhanced Input Focus States --- */
.field input:focus,
.field textarea:focus {
    transform: translateY(-2px);
}

.field input,
.field textarea {
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
        background .3s var(--ease), transform .3s var(--ease);
}

.field:focus-within>span {
    color: var(--accent);
    transition: color 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .btn--primary {
        animation: none;
    }
}

/* =========================================================
   HERO 
   ========================================================= */
.hero-wow {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #030305;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 0 80px;
    overflow: hidden;
    font-family: var(--sans);
}

.hero-wow__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 30, 0.8) 0%, #000 80%);
}

.hero-wow__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.hero-wow__title {
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.hero-wow__title--top {
    text-align: left;
}

.hero-wow__title--bottom {
    text-align: right;
    margin-top: -40px;
}

.hero-wow__center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 600px;
    margin: 40px 0;
}

.hero-wow__left-text {
    width: 320px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    z-index: 3;
}

.hero-wow__visual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: auto;
    z-index: 1;
}

.hero-wow__heart {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 40px rgba(0, 200, 255, 0.4));
    animation: heart-float 6s ease-in-out infinite;
}

@keyframes heart-float {

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

    50% {
        transform: translateY(-20px);
    }
}

.hero-wow__scanner {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 4px;
    background: #0ff;
    box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
    animation: scan-vertical 4s linear infinite;
    z-index: 2;
    opacity: 0.8;
}

@keyframes scan-vertical {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.hero-wow__card {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    z-index: 3;
}

.hero-wow__card--left {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 280px;
}

.hero-wow__card--right {
    width: 360px;
    align-self: center;
}

.hw-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.hw-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.hw-card__dot--red {
    background: #ff2a55;
    box-shadow: 0 0 10px #ff2a55;
}

.hw-card__ekg {
    width: 100%;
    height: 40px;
    margin-bottom: 16px;
}

.ekg-line {
    animation: ekg-dash 2s linear infinite;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

@keyframes ekg-dash {
    to {
        stroke-dashoffset: 0;
    }
}

.hw-card__footer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

.hw-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.hw-card__status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0ff;
    letter-spacing: 1px;
}

.hw-card__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ff;
    box-shadow: 0 0 8px #0ff;
    animation: hw-pulse 1.5s infinite;
}

@keyframes hw-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.hw-card__badge {
    background: rgba(0, 255, 255, 0.1);
    color: #0ff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.hw-card__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hw-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.hw-stat__label {
    color: rgba(255, 255, 255, 0.5);
}

.hw-stat__value {
    color: #fff;
    font-weight: 600;
}

.hw-stat__value--highlight {
    color: #0ff;
}

.hw-card__desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

@media (max-width: 1024px) {
    .hero-wow__center {
        flex-direction: column;
        justify-content: flex-start;
        gap: 40px;
    }

    .hero-wow__visual {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 400px;
    }

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

    .hero-wow__card--left {
        position: relative;
        bottom: auto;
        width: 100%;
        max-width: 360px;
    }

    .hero-wow__title--bottom {
        text-align: center;
        margin-top: 40px;
    }

    .hero-wow__title--top {
        text-align: center;
    }
}

/* =========================================================
   Theme Settings structural fallbacks
   ========================================================= */

.elementor-section.elementor-section-boxed>.elementor-container,
.e-con-boxed>.e-con-inner {
    max-width: var(--container, 1320px) !important;
}

.isharka-floating-header,
.site-header,
.isharka-glass-header {
    top: 24px !important;
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    min-height: 60px !important;
    z-index: 100000 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(180%) blur(22px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 28px 90px rgba(10, 10, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    display: flex !important;
    align-items: center !important;
}

.isharka-floating-header .e-con-inner {
    width: 100%;
    max-width: none;
    min-height: inherit;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    padding: 0 28px 0 24px !important;
}

.isharka-floating-header .elementor-element {
    --container-widget-width: initial;
}

.isharka-floating-header .e-con-full,
.isharka-floating-header .elementor-widget,
.isharka-floating-header .elementor-widget-container,
.isharka-floating-header .elementor-button-wrapper,
.isharka-floating-header .elementor-button,
.isharka-floating-header .elementor-heading-title {
    display: flex;
    align-items: center;
}

.isharka-floating-header .elementor-heading-title {
    margin: 0;
}

.isharka-floating-header .elementor-widget-icon .elementor-icon {
    color: var(--ink) !important;
}

.isharka-floating-header .elementor-widget-icon .elementor-icon svg,
.isharka-floating-header .elementor-widget-icon .elementor-icon svg path {
    fill: var(--ink) !important;
}

.isharka-floating-theme-toggle {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.admin-bar .isharka-floating-header,
.admin-bar .site-header,
.admin-bar .isharka-glass-header {
    top: 56px !important;
}

@media (max-width: 900px) {

    .isharka-floating-header,
    .site-header,
    .isharka-glass-header {
        top: 18px !important;
        width: calc(100% - 28px) !important;
        min-height: 64px !important;
    }

    .isharka-floating-header>.elementor>.e-con>.e-con-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 64px;
        padding-inline: 14px;
    }

    .isharka-floating-header>.elementor>.e-con>.e-con-inner>.e-con-full:nth-child(2) {
        display: none !important;
    }

    .isharka-floating-header .elementor-heading-title {
        font-size: 16px !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap;
    }

    .isharka-floating-header .elementor-button {
        min-height: 40px;
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    .isharka-floating-theme-toggle {
        right: 54px;
        width: 34px;
        height: 34px;
    }

    .admin-bar .isharka-floating-header,
    .admin-bar .site-header,
    .admin-bar .isharka-glass-header {
        top: 64px !important;
    }
}

.elementor-card,
.e-con,
.e-con-inner,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-widget-image img,
.elementor-image img,
.elementor-image-box-img img,
.elementor-cta,
.elementor-cta__bg,
.elementor-icon-box-wrapper,
.elementor-image-box-wrapper,
.card,
.post-card,
.service-card,
.isharka-card,
.widget,
.widget-inner,
.wp-block-group,
.wp-block-column,
.wp-block-image img,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap>.elementor-element {
    border-radius: var(--r-lg) !important;
}

:not(.isharka-floating-header):not(.site-header):not(.isharka-glass-header) .elementor-card,
:not(.isharka-floating-header):not(.site-header):not(.isharka-glass-header) .e-con,
:not(.isharka-floating-header):not(.site-header):not(.isharka-glass-header) .e-con-inner,
:not(.isharka-floating-header):not(.site-header):not(.isharka-glass-header) .elementor-widget-wrap,
:not(.isharka-floating-header):not(.site-header):not(.isharka-glass-header) .elementor-widget-container,
.card,
.widget,
.service-card,
.isharka-card,
.elementor-column,
.elementor-column-wrap {
    overflow: hidden !important;
}

.button,
.btn,
.elementor-button,
.header-cta,
.theme-toggle,
.isharka-mobile-burger,
.elementor-cta__button,
.wp-block-button__link {
    border-radius: var(--r-md) !important;
}

input,
textarea,
select,
.badge,
.tag {
    border-radius: var(--r-sm) !important;
}

.elementor-section,
.elementor-top-section,
.e-con.elementor-top-section,
section.elementor-element {
    padding-top: var(--section-pad-top, 120px) !important;
    padding-bottom: var(--section-pad-bot, 120px) !important;
}

:root[data-theme="dark"] {
    --bg: #000000;
    --bg-2: #0a0a0b;
    --ink: #f5f5f4;
    --ink-soft: #b8b8b3;
    --muted: #7a7a76;
    --line: #26262a;
    --accent: #ff3b5b;
    --accent-2: #ff8499;
    color-scheme: dark;
}

:root[data-theme="dark"] body {
    background-color: var(--bg) !important;
    color: var(--ink-soft) !important;
}

:root[data-theme="dark"] .isharka-floating-header,
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .isharka-glass-header {
    background: rgba(10, 10, 12, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

:root[data-theme="dark"] .isharka-floating-header .elementor-heading-title,
:root[data-theme="dark"] .isharka-floating-header a,
:root[data-theme="dark"] .isharka-floating-header span,
:root[data-theme="dark"] .site-header a,
:root[data-theme="dark"] .site-navigation a {
    color: var(--ink) !important;
}

:root[data-theme="dark"] .elementor-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .isharka-card,
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .widget-inner,
:root[data-theme="dark"] .wp-block-group,
:root[data-theme="dark"] .wp-block-column {
    background-color: var(--bg-2) !important;
    background-image: none !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .site-content,
:root[data-theme="dark"] .site-main,
:root[data-theme="dark"] #content {
    background-color: var(--bg) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .elementor-heading-title,
:root[data-theme="dark"] .elementor-heading-title a,
:root[data-theme="dark"] .elementor-heading-title span,
:root[data-theme="dark"] .elementor-icon-box-title,
:root[data-theme="dark"] .elementor-icon-box-title a,
:root[data-theme="dark"] .elementor-image-box-title,
:root[data-theme="dark"] .elementor-image-box-title a,
:root[data-theme="dark"] strong {
    color: var(--ink) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] span,
:root[data-theme="dark"] li,
:root[data-theme="dark"] .elementor-text-editor,
:root[data-theme="dark"] .elementor-icon-box-description,
:root[data-theme="dark"] .elementor-image-box-description,
:root[data-theme="dark"] a:not(.btn):not(.button):not(.elementor-button) {
    color: var(--ink-soft) !important;
}

:root[data-theme="dark"] a:hover {
    color: var(--accent) !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__title {
    color: #0a0a0b !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__eyebrow {
    color: #555555 !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__eyebrow strong {
    color: #0a0a0b !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__q-text {
    color: #0a0a0b !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__a-inner {
    color: #4a4a48 !important;
}

:root:not([data-theme="dark"]) .isharka-faq-p__a-inner p {
    color: #4a4a48 !important;
}

.isharka-heart,
.isharka-heart__num,
.isharka-heart__tooltip-num,
.isharka-heart__tooltip strong,
.isharka-heart__tooltip em,
.isharka-heart__legend-num,
.isharka-heart__legend-text strong,
.isharka-heart__legend-text em,
.isharka-heart__legend-arrow {
    font-family: var(--sans) !important;
}

/* Card images rounded corners */
.isharka-s-card__img {
    border-radius: 16px !important;
}