/* =========================================================
   Mohammad Kargar Shouraki
   Personal Academic & Executive Website

   File: style.css
   Version: 1.0

   Design Direction:
   Executive + Academic + Technology
   ========================================================= */


/* =========================================================
   01. ROOT / DESIGN SYSTEM
========================================================= */

:root {

    /* -------------------------
       MAIN COLORS
    -------------------------- */

    --color-bg: #07111f;
    --color-bg-soft: #0a1728;
    --color-bg-light: #0d1c30;

    --color-surface: rgba(255, 255, 255, 0.055);
    --color-surface-hover: rgba(255, 255, 255, 0.085);

    --color-card: rgba(12, 27, 47, 0.82);
    --color-card-solid: #0d1d31;

    --color-primary: #22c58b;
    --color-primary-light: #55ddb0;
    --color-primary-dark: #149768;

    --color-secondary: #d6ad60;
    --color-secondary-light: #efd292;

    --color-blue: #4da3ff;

    --color-text: #f5f8fb;
    --color-text-soft: #c1cad6;
    --color-text-muted: #8795a8;

    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.15);

    --color-white: #ffffff;
    --color-black: #000000;

    --color-danger: #ef4444;


    /* -------------------------
       GRADIENTS
    -------------------------- */

    --gradient-primary:
        linear-gradient(
            135deg,
            #16a875 0%,
            #29d497 100%
        );

    --gradient-gold:
        linear-gradient(
            135deg,
            #c89843 0%,
            #ecd18e 100%
        );

    --gradient-text:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #c5d5e7 100%
        );

    --gradient-accent:
        linear-gradient(
            90deg,
            #26c991 0%,
            #58a9ff 100%
        );


    /* -------------------------
       SHADOWS
    -------------------------- */

    --shadow-small:
        0 8px 30px rgba(0, 0, 0, 0.16);

    --shadow-medium:
        0 20px 55px rgba(0, 0, 0, 0.24);

    --shadow-large:
        0 35px 90px rgba(0, 0, 0, 0.32);

    --shadow-primary:
        0 15px 40px rgba(34, 197, 139, 0.2);


    /* -------------------------
       SIZES
    -------------------------- */

    --container-width: 1240px;

    --header-height: 72px;

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;
    --radius-xl: 40px;

    --section-space: 82px;


    /* -------------------------
       TRANSITIONS
    -------------------------- */

    --transition-fast: 0.2s ease;

    --transition-normal:
        0.35s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-slow:
        0.6s cubic-bezier(0.4, 0, 0.2, 1);

}


/* =========================================================
   02. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}


body {

    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(29, 100, 89, 0.12),
            transparent 35%
        ),
        var(--color-bg);

    color: var(--color-text);

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.9;


    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

}


body.menu-open {
    overflow: hidden;
}


::selection {
    background: var(--color-primary);
    color: #03130d;
}


a {
    color: inherit;
    text-decoration: none;
}


ul,
ol {
    list-style: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


img {
    display: block;
    max-width: 100%;
}


strong {
    font-weight: 700;
}


/* =========================================================
   03. SCROLLBAR
========================================================= */

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


::-webkit-scrollbar-track {
    background: #050d18;
}


::-webkit-scrollbar-thumb {

    border: 2px solid #050d18;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            var(--color-primary),
            #167a63
        );

}


::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}


/* =========================================================
   04. GLOBAL CONTAINER
========================================================= */

.container {

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline: auto;

}


.section {

    position: relative;

    padding:
        var(--section-space)
        0;

}


/* =========================================================
   05. SITE BACKGROUND
========================================================= */

.site-background {

    position: fixed;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;

}


.bg-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

}


.bg-glow {

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    filter: blur(55px);

    opacity: 0.045;

}


.bg-glow-one {

    top: -250px;
    right: -180px;

    background: var(--color-primary);

}


.bg-glow-two {

    bottom: -300px;
    left: -200px;

    background: var(--color-blue);

}


/* =========================================================
   06. PAGE PROGRESS
========================================================= */

.page-progress {

    position: fixed;

    top: 0;
    right: 0;

    z-index: 99999;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 0 18px
        rgba(34, 197, 139, 0.45);

}


/* =========================================================
   PREMIUM 3D PRELOADER
========================================================= */


.preloader {

    position: fixed;

    inset: 0;

    z-index: 1000000;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            #0c201b 0%,
            #071410 28%,
            #030806 65%,
            #010302 100%
        );

    opacity: 1;

    visibility: visible;

    perspective: 1200px;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;

}


/* When loading is complete */

.preloader.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* =========================================================
   PRELOADER CONTENT
========================================================= */

.preloader-content {

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    width:
        min(
            90vw,
            650px
        );

    text-align: center;

    transform-style: preserve-3d;

    transition:
        transform 0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        opacity 0.7s ease;

}



.loader-logo {

    display: grid;

    place-items: center;

    width: 84px;
    height: 84px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.02)
        );

    color: var(--color-white);

    font-size: 23px;

    font-weight: 800;

    letter-spacing: 3px;

    box-shadow:
        var(--shadow-medium);

}

.preloader.complete
.preloader-content {

    transform:
        scale(1.12)
        translateZ(80px);

    opacity: 0;

}


/* =========================================================
   3D SCENE
========================================================= */

.loader-3d-scene {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 260px;
    height: 260px;

    margin-bottom: 34px;

    perspective: 900px;

    transform-style:
        preserve-3d;

}


.loader-3d-object {

    position: relative;

    width: 190px;
    height: 190px;

    transform-style:
        preserve-3d;

    animation:
        loaderFloat
        4s ease-in-out
        infinite;

}


/* =========================================================
   3D ORBITS
========================================================= */

.loader-orbit {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 190px;
    height: 190px;

    margin:
        -95px 0 0 -95px;

    border:

        1px solid
        rgba(84, 255, 144, 0.18);

    border-radius:
        50%;

    transform-style:
        preserve-3d;

    box-shadow:

        0 0 16px
        rgba(82, 255, 139, 0.06),

        inset 0 0 15px
        rgba(82, 255, 139, 0.025);

}


/* X Axis */

.orbit-x {

    transform:
        rotateX(68deg)
        rotateZ(0deg);

    animation:
        orbitX
        4.7s linear
        infinite;

}

.orbit-y {

    transform:
        rotateY(68deg)
        rotateZ(30deg);

    animation:
        orbitY
        5.5s linear
        infinite reverse;

}


/* Z Axis */

.orbit-z {

    width: 220px;
    height: 220px;

    margin:
        -110px 0 0 -110px;

    border-color:
        rgba(214, 173, 96, 0.13);

    transform:
        rotateX(60deg)
        rotateY(20deg);

    animation:
        orbitZ
        7s linear
        infinite;

}


/* =========================================================
   ORBIT LIGHT
========================================================= */

.orbit-light {

    position: absolute;

    top: -4px;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #72ff94;

    box-shadow:

        0 0 6px #72ff94,

        0 0 14px
        rgba(114,255,148,0.9),

        0 0 28px
        rgba(114,255,148,0.5);

}


/* =========================================================
   ENERGY RING
========================================================= */

.loader-energy-ring {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    margin:
        -72.5px 0 0 -72.5px;

    border-radius: 50%;

    border:

        1px solid
        rgba(103, 255, 150, 0.25);

    box-shadow:

        0 0 25px
        rgba(60, 255, 130, 0.12),

        inset 0 0 30px
        rgba(60, 255, 130, 0.08);

    animation:
        energyPulse
        2s ease-in-out
        infinite;

}


/* =========================================================
   CENTRAL CORE
========================================================= */

.loader-core {

    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 118px;
    height: 118px;

    margin:
        -59px 0 0 -59px;

    overflow: hidden;

    border:

        1px solid
        rgba(112, 255, 150, 0.25);

    border-radius: 28px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.012)
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:

        0 25px 55px
        rgba(0, 0, 0, 0.5),

        0 0 35px
        rgba(75, 255, 135, 0.15),

        inset 0 0 30px
        rgba(75, 255, 135, 0.035);

    transform:
        translateZ(45px);

    transform-style:
        preserve-3d;

}


.loader-core::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,0.10) 45%,
            transparent 62%
        );

    transform:
        translateX(-140%);

    animation:
        coreShine
        3.2s ease-in-out
        infinite;

}


/* Logo */

.loader-logo {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 8px;

}


.loader-logo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 20px;

}


/* Core glow */

.loader-core-glow {

    position: absolute;

    inset: 12%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(89, 255, 132, 0.28),
            transparent 68%
        );

    filter:
        blur(15px);

    animation:
        coreGlow
        2.4s ease-in-out
        infinite;

}


/* small white reflection */

.loader-core-light {

    position: absolute;

    top: 12px;
    right: 16px;

    z-index: 5;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.8);

    box-shadow:
        0 0 13px
        rgba(255,255,255,0.65);

}


/* =========================================================
   INFORMATION
========================================================= */

.loader-information {

    position: relative;

    z-index: 10;

    width:
        min(
            100%,
            470px
        );

}


.loader-eyebrow {

    display: block;

    margin-bottom: 7px;

    color:
        rgba(112, 255, 154, 0.72);

    font-family:
        Arial,
        "Vazirmatn",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        2px;

}


.loader-title {

    margin-bottom: 20px;

    color:
        #ffffff;

    font-size:
        clamp(
            19px,
            3vw,
            28px
        );

    font-weight: 800;

}


/* =========================================================
   STATUS
========================================================= */

.loader-status {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

}


.loader-status-text {

    color:
        rgba(255,255,255,0.54);

    font-size:
        10px;

}


.loader-percentage {

    direction: ltr;

    color:
        #73ff9a;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 800;

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.loader-progress {

    position: relative;

    width: 100%;
    height: 3px;

    overflow: visible;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.07);

}


.loader-progress-bar {

    position: absolute;

    top: 0;

    left: 0;

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,
            #27b65f,
            #73ff98,
            #d6ad60
        );

    box-shadow:

        0 0 12px
        rgba(103,255,148,0.5);

    transition:
        width 0.18s ease;

}


.loader-progress-light {

    position: absolute;

    top: 50%;
    left: 0%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #baffc8;

    box-shadow:

        0 0 8px #73ff98,

        0 0 20px
        rgba(115,255,152,0.65);

    transform:
        translate(-50%, -50%);

    transition:
        left 0.18s ease;

}


/* =========================================================
   LOADING STEP
========================================================= */

.loader-step {

    min-height: 18px;

    margin-top: 11px;

    color:
        rgba(255,255,255,0.32);

    font-size: 9px;

    transition:
        opacity 0.25s ease;

}


/* =========================================================
   PARTICLES
========================================================= */

.loader-particles {

    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

    pointer-events: none;

}


.loader-particle {

    position: absolute;

    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(112, 255, 150, 0.8);

    box-shadow:
        0 0 8px
        rgba(112, 255, 150, 0.8);

    opacity: 0;

    animation:
        loaderParticleMove
        var(--particle-duration)
        linear
        infinite;

    animation-delay:
        var(--particle-delay);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes loaderFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateX(2deg);

    }

    50% {

        transform:
            translateY(-8px)
            rotateX(-2deg);

    }

}


@keyframes orbitX {

    from {

        transform:
            rotateX(68deg)
            rotateZ(0deg);

    }

    to {

        transform:
            rotateX(68deg)
            rotateZ(360deg);

    }

}


@keyframes orbitY {

    from {

        transform:
            rotateY(68deg)
            rotateZ(0deg);

    }

    to {

        transform:
            rotateY(68deg)
            rotateZ(360deg);

    }

}


@keyframes orbitZ {

    from {

        transform:
            rotateX(60deg)
            rotateY(20deg)
            rotateZ(0deg);

    }

    to {

        transform:
            rotateX(60deg)
            rotateY(20deg)
            rotateZ(360deg);

    }

}


@keyframes energyPulse {

    0%,
    100% {

        transform:
            scale(0.94);

        opacity:
            0.55;

    }

    50% {

        transform:
            scale(1.06);

        opacity:
            1;

    }

}


@keyframes coreGlow {

    0%,
    100% {

        opacity:
            0.35;

        transform:
            scale(0.9);

    }

    50% {

        opacity:
            0.75;

        transform:
            scale(1.15);

    }

}


@keyframes coreShine {

    0%,
    45% {

        transform:
            translateX(-150%);

    }

    65%,
    100% {

        transform:
            translateX(150%);

    }

}


@keyframes loaderParticleMove {

    0% {

        transform:
            translate3d(
                0,
                30px,
                0
            )
            scale(0.3);

        opacity:
            0;

    }

    15% {

        opacity:
            0.7;

    }

    70% {

        opacity:
            0.45;

    }

    100% {

        transform:
            translate3d(
                var(--particle-x),
                -110vh,
                0
            )
            scale(1.1);

        opacity:
            0;

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 560px) {

    .loader-3d-scene {

        width: 210px;
        height: 210px;

        margin-bottom: 25px;

        transform:
            scale(0.86);

    }


    .loader-title {

        font-size:
            20px;

    }


    .loader-information {

        width:
            min(
                84vw,
                390px
            );

    }


    .loader-eyebrow {

        font-size:
            7px;

        letter-spacing:
            1px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .loader-3d-object,
    .loader-orbit,
    .loader-energy-ring,
    .loader-core-glow,
    .loader-core::before,
    .loader-particle {

        animation:
            none !important;

    }

}

/* =========================================================
   3D PRELOADER - LIGHT THEME
========================================================= */


/* =========================================================
   MAIN BACKGROUND
========================================================= */

html.light-theme
.preloader,
body.light-theme
.preloader {

    background:

        radial-gradient(
            circle at 50% 42%,
            #ffffff 0%,
            #f4faf6 28%,
            #edf6f0 58%,
            #e7f0eb 100%
        );

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

html.light-theme
.loader-grid,
body.light-theme
.loader-grid {

    opacity:
        0.35;

    background-image:

        linear-gradient(
            rgba(20, 151, 104, 0.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(20, 151, 104, 0.08) 1px,
            transparent 1px
        );

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

html.light-theme
.loader-bg-glow-one,
body.light-theme
.loader-bg-glow-one {

    background:
        rgba(34, 197, 139, 0.14);

}


html.light-theme
.loader-bg-glow-two,
body.light-theme
.loader-bg-glow-two {

    background:
        rgba(214, 173, 96, 0.12);

}


/* =========================================================
   3D ORBITS
========================================================= */

html.light-theme
.loader-orbit,
body.light-theme
.loader-orbit {

    border-color:
        rgba(20, 151, 104, 0.28);

    box-shadow:

        0 0 16px
        rgba(34, 197, 139, 0.10),

        inset 0 0 15px
        rgba(34, 197, 139, 0.045);

}


html.light-theme
.orbit-z,
body.light-theme
.orbit-z {

    border-color:
        rgba(170, 123, 41, 0.22);

}


/* =========================================================
   ORBIT LIGHT
========================================================= */

html.light-theme
.orbit-light,
body.light-theme
.orbit-light {

    background:
        #149768;

    box-shadow:

        0 0 5px
        rgba(20, 151, 104, 0.90),

        0 0 13px
        rgba(20, 151, 104, 0.50),

        0 0 24px
        rgba(20, 151, 104, 0.25);

}


/* =========================================================
   ENERGY RING
========================================================= */

html.light-theme
.loader-energy-ring,
body.light-theme
.loader-energy-ring {

    border-color:
        rgba(20, 151, 104, 0.34);

    box-shadow:

        0 0 22px
        rgba(34, 197, 139, 0.10),

        inset 0 0 26px
        rgba(34, 197, 139, 0.06);

}


/* =========================================================
   CENTRAL CORE
========================================================= */

html.light-theme
.loader-core,
body.light-theme
.loader-core {

    border-color:
        rgba(20, 151, 104, 0.22);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(241,248,244,0.82)
        );

    box-shadow:

        0 22px 48px
        rgba(26, 65, 49, 0.13),

        0 0 30px
        rgba(34, 197, 139, 0.10),

        inset 0 0 25px
        rgba(34, 197, 139, 0.045);

}


/* =========================================================
   CORE SHINE
========================================================= */

html.light-theme
.loader-core::before,
body.light-theme
.loader-core::before {

    background:

        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,0.80) 45%,
            transparent 62%
        );

}


/* =========================================================
   CORE GLOW
========================================================= */

html.light-theme
.loader-core-glow,
body.light-theme
.loader-core-glow {

    background:

        radial-gradient(
            circle,
            rgba(34, 197, 139, 0.18),
            transparent 68%
        );

}


/* =========================================================
   REFLECTION
========================================================= */

html.light-theme
.loader-core-light,
body.light-theme
.loader-core-light {

    background:
        rgba(255,255,255,0.95);

    box-shadow:

        0 0 8px
        rgba(255,255,255,0.9),

        0 0 14px
        rgba(34,197,139,0.22);

}


/* =========================================================
   LOGO
========================================================= */

html.light-theme
.loader-logo,
body.light-theme
.loader-logo {

    background:
        transparent;

}


/*
   چون لوگوی SustainAI خودش پس‌زمینه مشکی دارد
   کمی Shadow می‌دهیم تا در Light Mode
   مثل یک کارت مستقل دیده شود.
*/

html.light-theme
.loader-logo img,
body.light-theme
.loader-logo img {

    box-shadow:

        0 8px 24px
        rgba(0, 0, 0, 0.14);

}


/* =========================================================
   EYEBROW TEXT
========================================================= */

html.light-theme
.loader-eyebrow,
body.light-theme
.loader-eyebrow {

    color:
        #15845e;

}


/* =========================================================
   MAIN TITLE
========================================================= */

html.light-theme
.loader-title,
body.light-theme
.loader-title {

    color:
        #10271f;

}


/* =========================================================
   LOADING STATUS
========================================================= */

html.light-theme
.loader-status-text,
body.light-theme
.loader-status-text {

    color:
        rgba(25, 52, 43, 0.60);

}


html.light-theme
.loader-percentage,
body.light-theme
.loader-percentage {

    color:
        #148d63;

}


/* =========================================================
   PROGRESS TRACK
========================================================= */

html.light-theme
.loader-progress,
body.light-theme
.loader-progress {

    background:
        rgba(19, 91, 65, 0.10);

}


/* =========================================================
   PROGRESS BAR
========================================================= */

html.light-theme
.loader-progress-bar,
body.light-theme
.loader-progress-bar {

    background:

        linear-gradient(
            90deg,
            #12845d,
            #22c58b,
            #c99c49
        );

    box-shadow:

        0 0 10px
        rgba(34, 197, 139, 0.26);

}


/* =========================================================
   PROGRESS MOVING LIGHT
========================================================= */

html.light-theme
.loader-progress-light,
body.light-theme
.loader-progress-light {

    background:
        #15966a;

    box-shadow:

        0 0 7px
        rgba(21, 150, 106, 0.72),

        0 0 17px
        rgba(34, 197, 139, 0.30);

}


/* =========================================================
   LOADER STEP TEXT
========================================================= */

html.light-theme
.loader-step,
body.light-theme
.loader-step {

    color:
        rgba(35, 65, 54, 0.50);

}


/* =========================================================
   PARTICLES
========================================================= */

html.light-theme
.loader-particle,
body.light-theme
.loader-particle {

    background:
        rgba(20, 151, 104, 0.62);

    box-shadow:

        0 0 7px
        rgba(20, 151, 104, 0.42);

}


/* =========================================================
   LIGHT MODE - SLIGHTLY SOFTER 3D EFFECT
========================================================= */

html.light-theme
.loader-3d-object,
body.light-theme
.loader-3d-object {

    filter:
        drop-shadow(
            0 14px 22px
            rgba(28, 75, 55, 0.08)
        );

}


html.light-theme
.loader-logo img,
body.light-theme
.loader-logo img {

    transform:
        scale(0.88);

    border-radius:
        18px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.13);

}

/* =========================================================
   LOADER BACKGROUND
========================================================= */

.loader-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}
.loader-grid {

    position: absolute;

    inset: -20%;

    opacity: 0.16;

    background-image:

        linear-gradient(
            rgba(76, 255, 152, 0.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(76, 255, 152, 0.06) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    transform:
        perspective(550px)
        rotateX(68deg)
        translateY(26%);

    transform-origin:
        center bottom;

    mask-image:
        linear-gradient(
            to top,
            black,
            transparent 76%
        );

    -webkit-mask-image:
        linear-gradient(
            to top,
            black,
            transparent 76%
        );

}

.loader-bg-glow {

    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(100px);

}

.loader-bg-glow-one{

    top: -180px;
    right: -100px;

    width: 500px;
    height: 500px;

    background:
        rgba(66, 255, 129, 0.11);

}

.loader-bg-glow-two {

    bottom: -250px;
    left: -130px;

    width: 550px;
    height: 550px;

    background:
        rgba(214, 173, 96, 0.07);

}




.loader-line {

    position: relative;

    width: 140px;
    height: 2px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.08);

}


.loader-line span {

    position: absolute;

    top: 0;
    right: -40%;

    width: 40%;
    height: 100%;

    border-radius: inherit;

    background: var(--gradient-primary);

    animation:
        loaderMove
        1.15s ease-in-out
        infinite;

}


@keyframes loaderMove {

    0% {
        right: -40%;
    }

    100% {
        right: 100%;
    }

}


/* =========================================================
   08. HEADER
========================================================= */

.main-header {

    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: 5000;

    height:
        var(--header-height);

    border-bottom:
        1px solid
        transparent;

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        height var(--transition-normal);

}


.main-header.scrolled {

    height: 62px;

    border-color:
        var(--color-border);

    background:
        rgba(6, 16, 29, 0.82);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,0.15);

}


.navbar {

 display: flex;

    align-items: center;

    justify-content: space-between;

    height: 100%;

    gap: 30px;

    padding-top: 6px;
    padding-bottom: 4px;

}


/* =========================================================
   09. BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-shrink: 0;

}
/* =========================================================
   BRAND - SUSTAINAI LOGO
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}

/* ********************************************************* */

.brand-symbol {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    padding: 4px;

    overflow: hidden;

    border:
        1px solid
        rgba(96, 255, 140, 0.22);

    border-radius: 14px;

    background:
        #050505;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(96, 255, 140, 0.05) inset,
        0 0 18px rgba(96, 255, 140, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;

}


.brand-logo-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    border-radius: 10px;

}


.brand:hover .brand-symbol {

    transform:
        translateY(-2px)
        scale(1.04);

    border-color:
        rgba(112, 255, 120, 0.42);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(112, 255, 120, 0.15);

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.3;

}


.brand-text strong {

    color: var(--color-white);

    font-size: 14px;

    font-weight: 800;

}


.brand-text small {

    margin-top: 3px;

    color: var(--color-text-muted);

    font-size: 9px;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 0.15px;

}


@media (max-width: 980px) {

    .brand-symbol {

        width: 54px;
        height: 54px;

        border-radius: 13px;

    }

}


@media (max-width: 720px) {

    .brand-text {
        display: none;
    }

}


@media (max-width: 560px) {

        .about-card blockquote {

        padding-inline-end: 0;

        }


    .brand-symbol {

        width: 46px;
        height: 46px;

        padding: 3px;

        border-radius: 11px;

    }

}


.brand-symbol {

    position: relative;

    display: grid;

    place-items: center;

    width: 47px;
    height: 47px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.025)
        );

    color: var(--color-white);

    font-family: Arial, sans-serif;

    font-size: 22px;

    font-weight: 800;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,0.2);

    transition:
        var(--transition-normal);

}

/* =========================================================
   MAIN PROFILE IMAGE
========================================================= */

.profile-main-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center top;

    transition:
        transform 0.7s
        cubic-bezier(0.22, 1, 0.36, 1);

}



.profile-card:hover
.profile-main-image {

    transform: scale(1.035);

}


.brand:hover .brand-symbol {

    border-color:
        rgba(34,197,139,0.45);

    transform:
        translateY(-2px);

}


.brand-dot {

    position: absolute;

    bottom: 8px;
    left: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 10px
        rgba(34,197,139,0.7);

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.35;

}


.brand-text strong {

    color: var(--color-white);

    font-size: 14px;

    font-weight: 800;

}


.brand-text small {

    direction: ltr;

    margin-top: 4px;

    color: var(--color-text-muted);

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 0.2px;

}


/* =========================================================
   10. NAVIGATION
========================================================= */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 4px;

}


.nav-link {

    position: relative;

    display: block;

    padding: 9px 12px;

    color: var(--color-text-soft);

    font-size: 13px;

    font-weight: 500;

    transition:
        color var(--transition-fast);

}


.nav-link::after {

    content: "";

    position: absolute;

    right: 50%;
    bottom: 2px;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background:
        var(--color-primary);

    transform:
        translateX(50%);

    transition:
        width var(--transition-normal);

}


.nav-link:hover,
.nav-link.active {

    color: var(--color-white);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 18px;

}


/* =========================================================
   11. NAV ACTIONS
========================================================= */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


.icon-button,
.language-button {

    display: grid;

    place-items: center;

    height: 40px;

    border:
        1px solid
        var(--color-border);

    border-radius: 11px;

    background:
        rgba(255,255,255,0.035);

    color:
        var(--color-text-soft);

    cursor: pointer;

    transition:
        var(--transition-normal);

}


.icon-button {

    width: 40px;

}


.language-button {

    width: 43px;

    direction: ltr;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;

}


.icon-button:hover,
.language-button:hover {

    border-color:
        rgba(34,197,139,0.4);

    background:
        rgba(34,197,139,0.08);

    color:
        var(--color-primary-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   12. MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    border:
        1px solid
        var(--color-border);

    border-radius: 11px;

    background:
        rgba(255,255,255,0.035);

    cursor: pointer;

}


.mobile-menu-button span {

    display: block;

    width: 19px;
    height: 2px;

    border-radius: 10px;

    background:
        var(--color-text);

    transition:
        var(--transition-normal);

}


.mobile-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-menu-button.active span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


.mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 4000;

    visibility: hidden;

    opacity: 0;

    background:
        rgba(0,0,0,0.6);

    backdrop-filter:
        blur(4px);

    transition:
        var(--transition-normal);

}


.mobile-overlay.active {

    visibility: visible;

    opacity: 1;

}


/* =========================================================
   13. HERO
========================================================= */

.hero-section {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 100vh;

    padding:
        calc(var(--header-height) + 35px)
        0
        55px;

    overflow: hidden;

}


.hero-section::before {

    content: "";

    position: absolute;

    top: -25%;
    right: -10%;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,197,139,0.11),
            transparent 68%
        );

    pointer-events: none;

}


.hero-section::after {

    content: "";

    position: absolute;

    bottom: -30%;
    left: -15%;

    width: 800px;
    height: 800px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77,163,255,0.07),
            transparent 67%
        );

    pointer-events: none;

}


.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(400px, 0.9fr);

    align-items: center;

    gap: 80px;

}


/* =========================================================
   14. HERO CONTENT
========================================================= */

.hero-content {

    max-width: 700px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(34,197,139,0.18);

    border-radius: 50px;

    background:
        rgba(34,197,139,0.055);

    color:
        #9de7ce;

    font-size: 11px;

    font-weight: 600;

}


.badge-pulse {

    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

}


.badge-pulse::after {

    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        var(--color-primary);

    border-radius: 50%;

    animation:
        badgePulse
        1.8s ease-out
        infinite;

}


@keyframes badgePulse {

    0% {
        opacity: 1;
        transform: scale(0.7);
    }

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

}


.hero-intro {

    margin-bottom: 4px;

    color:
        var(--color-text-muted);

    font-size: 14px;

}


.hero-title {

    margin-bottom: 10px;

    line-height: 1.25;

}


.hero-title-small {

    display: block;

    margin-bottom: 5px;

    color:
        var(--color-text-soft);

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    font-weight: 500;

}


.hero-title-main {

    display: block;

    background:
        var(--gradient-text);

    -webkit-background-clip: text;

    background-clip: text;

    color: #000000 transparent;

    font-size:
        clamp(
            42px,
            5.2vw,
            72px
        );

    font-weight: 900;

    letter-spacing: -2.3px;

}


.hero-english-name {

    direction: ltr;

    width: fit-content;

    margin-bottom: 23px;

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            14px,
            1.5vw,
            18px
        );

    font-weight: 400;

    letter-spacing: 3.5px;

}


.hero-role {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    min-height: 35px;

    margin-bottom: 19px;

    font-size: 15px;

}


.role-static {

    color:
        var(--color-text-soft);

}


.role-dynamic {

    position: relative;

    color:
        var(--color-primary-light);

    font-weight: 700;

}


.role-dynamic::after {

    content: "";

    display: inline-block;

    width: 2px;
    height: 18px;

    margin-right: 6px;

    vertical-align: middle;

    background:
        var(--color-primary);

    animation:
        cursorBlink
        0.8s infinite;

}


@keyframes cursorBlink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }

}


.hero-description {

    max-width: 660px;

    margin-bottom: 30px;

    color:
        var(--color-text-soft);

    font-size:
        clamp(
            14px,
            1.25vw,
            16px
        );

    line-height: 2.15;

}


.hero-description strong {

    color:
        var(--color-white);

}


/* =========================================================
   15. BUTTONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 31px;

}


.btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 49px;

    padding:
        0 21px;

    overflow: hidden;

    border-radius:
        var(--radius-small);

    font-size: 13px;

    font-weight: 700;

    transition:
        var(--transition-normal);

}


.btn i {

    font-size: 12px;

    transition:
        transform var(--transition-normal);

}


.btn-primary {

    background:
        var(--gradient-primary);

    color:
        #031b13;

    box-shadow:
        var(--shadow-primary);

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 45px
        rgba(34,197,139,0.3);

}


.btn-primary:hover i {

    transform:
        translateX(-4px);

}


.btn-secondary {

    border:
        1px solid
        var(--color-border-strong);

    background:
        rgba(255,255,255,0.035);

    color:
        var(--color-text);

}


.btn-secondary:hover {

    border-color:
        rgba(255,255,255,0.28);

    background:
        rgba(255,255,255,0.07);

    transform:
        translateY(-3px);

}


/* =========================================================
   16. HERO SOCIAL
========================================================= */

.hero-social {

    display: flex;

    align-items: center;

    gap: 17px;

}


.social-label {

    color:
        var(--color-text-muted);

    font-size: 11px;

}


.social-links {

    display: flex;

    align-items: center;

    gap: 8px;

}


.social-links a {

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid
        var(--color-border);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);

    color:
        var(--color-text-soft);

    font-size: 14px;

    transition:
        var(--transition-normal);

}


.social-links a:hover {

    border-color:
        rgba(34,197,139,0.35);

    background:
        rgba(34,197,139,0.08);

    color:
        var(--color-primary-light);

    transform:
        translateY(-3px);

}


/* =========================================================
   17. HERO VISUAL
========================================================= */

.hero-visual {

    position: relative;

    display: flex;

    justify-content: center;

}


.profile-stage {

    position: relative;

    width: 440px;
    height: 545px;

}


.profile-stage::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,197,139,0.15),
            transparent 67%
        );

    filter: blur(20px);

    transform:
        translate(-50%, -50%);

}


.profile-circle {

    position: absolute;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 50%;

}


.profile-circle-one {

    inset: 20px;

    animation:
        slowRotate
        28s linear
        infinite;

}


.profile-circle-two {

    inset: 63px;

    border-style: dashed;

    border-color:
        rgba(34,197,139,0.12);

    animation:
        slowRotateReverse
        22s linear
        infinite;

}


.profile-circle-one::before {

    content: "";

    position: absolute;

    top: 38px;
    left: 38px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--color-secondary);

    box-shadow:
        0 0 20px
        rgba(214,173,96,0.6);

}


.profile-circle-two::after {

    content: "";

    position: absolute;

    right: -4px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 15px
        rgba(34,197,139,0.7);

}


@keyframes slowRotate {

    to {
        transform: rotate(360deg);
    }

}


@keyframes slowRotateReverse {

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   18. PROFILE CARD
========================================================= */

.profile-card {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 4;

    width: 310px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(17,36,59,0.95),
            rgba(8,21,37,0.95)
        );

    box-shadow:
        var(--shadow-large);

    transform:
        translate(-50%, -50%);

}


.profile-card::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 2;

    width: 120px;
    height: 120px;

    background:
        radial-gradient(
            circle at top right,
            rgba(34,197,139,0.15),
            transparent 70%
        );

    pointer-events: none;

}


.profile-card-top {

    display: flex;

    align-items: center;

    min-height: 52px;

    padding:
        0 19px;

}


.profile-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    direction: ltr;

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.7px;

}


.profile-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 10px
        rgba(34,197,139,0.6);

}


/* =========================================================
   19. PROFILE PLACEHOLDER
========================================================= */

.profile-image-wrapper {

    position: relative;

    height: 320px;

    overflow: hidden;

    margin:
        0 13px;

    border-radius:
        20px;

    background:
        #0a1728;

}


.profile-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 17px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(34,197,139,0.16),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            #102943,
            #081522
        );

    color:
        var(--color-text-muted);

    text-align: center;

}


.profile-placeholder::before {

    content: "";

    position: absolute;

    bottom: -100px;

    width: 270px;
    height: 270px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 50%;

}


.profile-initials {

    display: grid;

    place-items: center;

    width: 105px;
    height: 105px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);

    color:
        var(--color-white);

    font-family:
        Arial,
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    letter-spacing: 4px;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.25);

}


.profile-placeholder > span {

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 2px;

}


.profile-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(6,16,29,0.45),
            transparent 45%
        );

    pointer-events: none;

}


.profile-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    min-height: 83px;

    padding:
        13px 18px;

}


.profile-card-footer > div:first-child {

    display: flex;

    flex-direction: column;

}


.profile-card-footer span {

    color:
        var(--color-text-muted);

    font-size: 9px;

}


.profile-card-footer strong {

    direction: ltr;

    margin-top: 2px;

    color:
        var(--color-text);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

}


.profile-footer-icon {

    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border-radius: 11px;

    background:
        rgba(34,197,139,0.09);

    color:
        var(--color-primary-light);

}


/* =========================================================
   20. FLOATING CARDS
========================================================= */

.floating-card {

    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 154px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        14px;

    background:
        rgba(9, 24, 41, 0.82);

    backdrop-filter:
        blur(15px);

    box-shadow:
        var(--shadow-medium);

}


.floating-card > div:last-child {

    display: flex;

    flex-direction: column;

    direction: ltr;

}


.floating-card small {

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

}


.floating-card strong {

    margin-top: 1px;

    color:
        var(--color-text);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

}


.floating-icon {

    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius:
        10px;

    background:
        rgba(34,197,139,0.09);

    color:
        var(--color-primary-light);

    font-size: 13px;

}


.floating-card-education {

    top: 74px;
    right: -8px;

    animation:
        floatCard
        5s ease-in-out
        infinite;

}


.floating-card-focus {

    bottom: 80px;
    left: -14px;

    animation:
        floatCard
        6s ease-in-out
        0.5s infinite;

}


.floating-card-ai {

    right: -25px;
    bottom: 155px;

    animation:
        floatCard
        5.5s ease-in-out
        1s infinite;

}


@keyframes floatCard {

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

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

}


/* =========================================================
   21. HERO ORBITS
========================================================= */

.hero-decoration {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.hero-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.025);

}


.orbit-one {

    top: 18%;
    right: 5%;

    width: 170px;
    height: 170px;

}


.orbit-two {

    bottom: 14%;
    left: 8%;

    width: 110px;
    height: 110px;

}


.orbit-three {

    top: 33%;
    left: 38%;

    width: 60px;
    height: 60px;

}


/* =========================================================
   22. SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    bottom: 25px;
    left: 50%;

    z-index: 4;

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: 7px;

    color:
        var(--color-text-muted);

    transform:
        translateX(-50%);

}


.scroll-indicator > span {

    font-size: 8px;

}


.scroll-mouse {

    position: relative;

    width: 20px;
    height: 31px;

    border:
        1px solid
        rgba(118, 118, 118, 0.18);

    border-radius:
        20px;

}


.scroll-mouse span {

    position: absolute;

    top: 6px;
    left: 50%;

    width: 3px;
    height: 6px;

    border-radius:
        20px;

    background:
        var(--color-primary);

    transform:
        translateX(-50%);

    animation:
        scrollMouse
        1.8s ease
        infinite;

}


@keyframes scrollMouse {

    0% {
        opacity: 0;
        top: 5px;
    }

    30% {
        opacity: 1;
    }

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

}


/* =========================================================
   23. STATISTICS
========================================================= */

.stats-section {

    position: relative;

    z-index: 5;

    padding:
        0 0 45px;

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow: hidden;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        rgba(255,255,255,0.025);

    backdrop-filter:
        blur(12px);

    box-shadow:
        var(--shadow-small);

}


.stat-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 120px;

    padding:
        20px;

}


.stat-card:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 25%;
    left: 0;

    width: 1px;
    height: 50%;

    background:
        var(--color-border);

}


.stat-icon {

    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 43px;
    height: 43px;

    border-radius:
        12px;

    background:
        rgba(34,197,139,0.07);

    color:
        var(--color-primary-light);

    font-size: 15px;

}


.stat-information {

    display: flex;

    flex-direction: column;

}


.stat-number {

    direction: ltr;

    width: fit-content;

    color:
        var(--color-white);

    font-family:
        Arial,
        "Vazirmatn",
        sans-serif;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.4;

}


.stat-label {

    color:
        var(--color-text-muted);

    font-size: 10px;

}


/* =========================================================
   24. SECTION HEADER
========================================================= */

.section-header {

    max-width: 700px;

    margin:
        0 auto 42px;

    text-align: center;

}


.section-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    direction: ltr;

    margin-bottom: 12px;

    color:
        var(--color-primary-light);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.section-eyebrow span {

    width: 22px;
    height: 1px;

    background:
        var(--color-primary);

}


.section-title {

    margin-bottom: 14px;

    color:
        var(--color-white);

    font-size:
        clamp(
            29px,
            3.3vw,
            43px
        );

    font-weight: 850;

    line-height: 1.45;

    letter-spacing: -1.2px;

}


.section-title span {

    color:
        var(--color-primary-light);

}


.section-subtitle {

    max-width: 590px;

    margin-inline: auto;

    color:
        var(--color-text-muted);

    font-size: 13px;

    line-height: 2;

}


/* =========================================================
   25. ABOUT SECTION
========================================================= */

.about-section {

    overflow: hidden;

}


.about-section::before {

    content: "";

    position: absolute;

    top: 20%;
    right: -250px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,197,139,0.07),
            transparent 70%
        );

}


.about-grid {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    align-items: center;

    gap: 75px;

}


/* =========================================================
   26. ABOUT VISUAL
========================================================= */

.about-visual {

    position: relative;

}


.about-card {

    position: relative;

    min-height: 380px;

    overflow: hidden;

    padding:
        45px 39px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        var(--shadow-medium);

}


.about-card::before {

    content: "";

    position: absolute;

    right: -90px;
    bottom: -90px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,197,139,0.12),
            transparent 68%
        );

}


.about-card-decoration {

    position: absolute;

    top: 7px;

    left: auto;
    right: auto;

    inset-inline-end: 28px;

    z-index: 1;

    pointer-events: none;

}




.about-card-decoration span {

    color:
        rgba(255,255,255,0.05);

    font-family:
        Arial,
        sans-serif;

    font-size: 65px;

    font-weight: 900;

    /* .about-card-decoration span {

    display: block;

    line-height: 1;

} */

}


.about-quote-icon {

    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 28px;

    border-radius:
        14px;

    background:
        rgba(34,197,139,0.08);

    color:
        var(--color-primary-light);

    font-size: 19px;

}


.about-card blockquote {

    position: relative;

    z-index: 2;

    color:
        var(--color-text-soft);

    font-size:
        clamp(
            17px,
            1.8vw,
            22px
        );

    font-weight: 400;

    line-height: 2.05;

}


.about-card blockquote strong {

    color:
        var(--color-white);

}


.about-signature {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 31px;

}


.signature-line {

    width: 36px;
    height: 1px;

    background:
        var(--color-secondary);

}


.about-signature > div:last-child {

    display: flex;

    flex-direction: column;

}


.about-signature strong {

    color:
        var(--color-text);

    font-size: 11px;

}


.about-signature span {

    direction: ltr;

    margin-top: 2px;

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 0.5px;

}


/* =========================================================
   27. ABOUT MINI CARDS
========================================================= */

.about-mini-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 12px;

}


.about-mini-card {

    display: grid;

    grid-template-columns:
        36px 1fr;

    column-gap: 10px;

    align-items: center;

    min-height: 82px;

    padding:
        13px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        15px;

    background:
        rgba(255,255,255,0.025);

}


.about-mini-card i {

    grid-row:
        1 / span 2;

    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border-radius:
        10px;

    background:
        rgba(34,197,139,0.07);

    color:
        var(--color-primary-light);

    font-size: 13px;

}


.about-mini-card span {

    align-self: end;

    color:
        var(--color-text-muted);

    font-size: 8px;

}


.about-mini-card strong {

    direction: ltr;

    align-self: start;

    color:
        var(--color-text);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

}


/* =========================================================
   28. ABOUT CONTENT
========================================================= */

.about-content {

    max-width: 620px;

}


.about-label {

    display: inline-block;

    margin-bottom: 13px;

    color:
        var(--color-secondary-light);

    font-size: 10px;

    font-weight: 700;

}


.about-content h3 {

    margin-bottom: 23px;

    color:
        var(--color-white);

    font-size:
        clamp(
            27px,
            3vw,
            40px
        );

    font-weight: 850;

    line-height: 1.55;

    letter-spacing: -1px;

}


.about-content h3 span {

    color:
        var(--color-primary-light);

}


.about-content > p {

    margin-bottom: 16px;

    color:
        var(--color-text-soft);

    font-size: 13px;

    line-height: 2.15;

}


.about-content > p strong {

    color:
        var(--color-white);

}


/* =========================================================
   29. ABOUT FEATURES
========================================================= */

.about-features {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px 18px;

    margin-top: 26px;

}


.about-feature {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        var(--color-text-soft);

    font-size: 11px;

}


.feature-check {

    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 23px;
    height: 23px;

    border:
        1px solid
        rgba(34,197,139,0.18);

    border-radius: 7px;

    background:
        rgba(34,197,139,0.07);

    color:
        var(--color-primary-light);

    font-size: 8px;

}


.about-actions {

    margin-top: 29px;

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--color-primary-light);

    font-size: 11px;

    font-weight: 700;

}


.text-link i {

    font-size: 9px;

    transition:
        transform var(--transition-normal);

}


.text-link:hover i {

    transform:
        translateX(-5px);

}


/* =========================================================
   30. EXPERTISE SECTION
========================================================= */

.expertise-section {

    border-top:
        1px solid
        rgba(255,255,255,0.035);

    border-bottom:
        1px solid
        rgba(255,255,255,0.035);

    background:
        rgba(255,255,255,0.012);

}


.expertise-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

}


/* =========================================================
   31. EXPERTISE CARD
========================================================= */

.expertise-card {

    position: relative;

    min-height: 280px;

    overflow: hidden;

    padding:
        29px 27px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.015)
        );

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal),
        box-shadow var(--transition-normal);

}


.expertise-card::before {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        var(--gradient-primary);

    transition:
        width var(--transition-slow);

}


.expertise-card::after {

    content: "";

    position: absolute;

    top: -70px;
    left: -70px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(34,197,139,0.08),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity var(--transition-normal);

}


.expertise-card:hover {

    border-color:
        rgba(34,197,139,0.2);

    background:
        linear-gradient(
            145deg,
            rgba(34,197,139,0.045),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        var(--shadow-medium);

    transform:
        translateY(-7px);

}


.expertise-card:hover::before {

    width: 100%;

}


.expertise-card:hover::after {

    opacity: 1;

}


.expertise-card-number {

    position: absolute;

    top: 20px;

    left: auto;
    right: auto;

    inset-inline-end: 23px;

    z-index: 1;

    pointer-events: none;

    color:
        rgba(255,255,255,0.055);

    font-family:
        Arial,
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    line-height: 1;

}


.expertise-icon {

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(34,197,139,0.13);

    border-radius:
        14px;

    background:
        rgba(34,197,139,0.065);

    color:
        var(--color-primary-light);

    font-size: 17px;

    transition:
        var(--transition-normal);

}


.expertise-card:hover .expertise-icon {

    background:
        rgba(34,197,139,0.12);

    transform:
        rotate(-4deg)
        scale(1.05);

}


.expertise-content {

    position: relative;

    z-index: 2;

}


/* Reserve space for card number */

.expertise-content h3 {

    padding-inline-end: 48px;

}


.expertise-content h3 {

    margin-bottom: 3px;

    color:
        var(--color-white);

    font-size: 16px;

    font-weight: 750;

}


.expertise-en {

    display: block;

    direction: ltr;

    width: fit-content;

    margin-bottom: 15px;

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 0.8px;

}


.expertise-content p {

    color:
        var(--color-text-muted);

    font-size: 11px;

    line-height: 2;

}


.expertise-arrow {

    position: absolute;

    left: 24px;
    bottom: 22px;

    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    border:
        1px solid
        var(--color-border);

    border-radius: 9px;

    color:
        var(--color-text-muted);

    font-size: 9px;

    transition:
        var(--transition-normal);

}


.expertise-card:hover .expertise-arrow {

    border-color:
        rgba(34,197,139,0.25);

    color:
        var(--color-primary-light);

    transform:
        translate(-2px, -2px);

}


/* =========================================================
   32. VISION SECTION
========================================================= */

.vision-section {

    position: relative;

    padding:
       65px 0 75px;

}


.vision-wrapper {

    position: relative;

    display: grid;

    grid-template-columns:
        100px
        1fr
        150px;

    align-items: center;

    gap: 45px;

    min-height: 300px;

    overflow: hidden;

    padding:
        50px;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(34,197,139,0.055),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        var(--shadow-medium);

}


.vision-wrapper::before {

    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77,163,255,0.1),
            transparent 70%
        );

}


.vision-label {

    align-self: stretch;

    display: flex;

    align-items: center;
    justify-content: center;

    border-left:
        1px solid
        var(--color-border);

}


.vision-label span {

    writing-mode:
        vertical-rl;

    direction: ltr;

    color:
        var(--color-text-muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 5px;

}


.vision-content {

    position: relative;

    z-index: 2;

}


.vision-pretitle {

    margin-bottom: 10px;

    color:
        var(--color-secondary-light);

    font-size: 10px;

}


.vision-content h2 {

    max-width: 750px;

    margin-bottom: 16px;

    color:
        var(--color-white);

    font-size:
        clamp(
            27px,
            3.4vw,
            45px
        );

    font-weight: 850;

    line-height: 1.6;

    letter-spacing: -1px;

}


.vision-content h2 span {

    color:
        var(--color-primary-light);

}


.vision-content > p:last-child {

    max-width: 720px;

    color:
        var(--color-text-muted);

    font-size: 12px;

    line-height: 2.15;

}


.vision-symbol {

    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 120px;
    height: 120px;

    margin-inline: auto;

    border:
        1px solid
        rgba(34,197,139,0.14);

    border-radius: 50%;

    background:
        rgba(34,197,139,0.045);

    color:
        var(--color-primary);

    font-size: 43px;

    box-shadow:
        inset 0 0 50px
        rgba(34,197,139,0.04);

}


/* =========================================================
   33. DEVELOPMENT PLACEHOLDERS
========================================================= */

.development-placeholder {

    width: 100%;
    height: 0;

}


/* =========================================================
   34. TEMPORARY FOOTER
========================================================= */

.temporary-footer {

    position: relative;

    padding:
        30px 0;

    border-top:
        1px solid
        var(--color-border);

    background:
        rgba(0,0,0,0.12);

}


.temporary-footer-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.temporary-footer-content > div {

    display: flex;

    flex-direction: column;

}


.temporary-footer strong {

    color:
        var(--color-text);

    font-size: 11px;

}


.temporary-footer span,
.temporary-footer p {

    color:
        var(--color-text-muted);

    font-size: 9px;

}


.temporary-footer > .container
.temporary-footer-content
> div span {

    direction: ltr;

    margin-top: 2px;

    font-family:
        Arial,
        sans-serif;

}


/* =========================================================
   35. BACK TO TOP
========================================================= */

.back-to-top {

    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 3000;

    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    visibility: hidden;

    opacity: 0;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius:
        12px;

    background:
        rgba(10,25,42,0.9);

    backdrop-filter:
        blur(10px);

    color:
        var(--color-text);

    cursor: pointer;

    box-shadow:
        var(--shadow-small);

    transform:
        translateY(10px);

    transition:
        var(--transition-normal);

}


.back-to-top.visible {

    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);

}


.back-to-top:hover {

    border-color:
        rgba(34,197,139,0.3);

    background:
        rgba(34,197,139,0.1);

    color:
        var(--color-primary-light);

    transform:
        translateY(-3px);

}


/* =========================================================
   36. NOSCRIPT
========================================================= */

.noscript-message {

    position: fixed;

    right: 20px;
    bottom: 20px;
    left: 20px;

    z-index: 99999;

    padding:
        13px 18px;

    border:
        1px solid
        rgba(239,68,68,0.3);

    border-radius:
        12px;

    background:
        #321116;

    color:
        #ffd6d6;

    text-align: center;

    font-size: 12px;

}


/* =========================================================
   37. REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity 0.75s ease,
        transform 0.75s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   38. LIGHT MODE
========================================================= */

body.light-theme {

    --color-bg: #f5f8fb;
    --color-bg-soft: #edf2f7;
    --color-bg-light: #e7eef5;

    --color-surface: rgba(255,255,255,0.75);
    --color-surface-hover: rgba(255,255,255,0.95);

    --color-card: rgba(255,255,255,0.85);
    --color-card-solid: #ffffff;

    --color-text: #172334;
    --color-text-soft: #455568;
    --color-text-muted: #758397;

    --color-border: rgba(10,30,50,0.09);
    --color-border-strong: rgba(10,30,50,0.16);

    --color-white: #132033;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(34,197,139,0.09),
            transparent 35%
        ),
        var(--color-bg);

}


body.light-theme
.main-header.scrolled {

    background:
        rgba(247,250,252,0.85);

}


body.light-theme
.brand-symbol {

    background:
        rgba(255,255,255,0.75);

}


body.light-theme
.profile-card {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(236,243,248,0.96)
        );

}


body.light-theme
.profile-placeholder {

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(34,197,139,0.13),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            #edf4f7,
            #dfe9ef
        );

}


body.light-theme
.floating-card {

    background:
        rgba(255,255,255,0.84);

}


body.light-theme
.preloader {

    background:
        #f3f7fa;

}


body.light-theme
.loader-logo {

    color:
        #172334;

    background:
        rgba(255,255,255,0.85);

}


body.light-theme
.temporary-footer {

    background:
        rgba(255,255,255,0.4);

}


body.light-theme
.back-to-top {

    background:
        rgba(255,255,255,0.9);

}


/* =========================================================
   CUSTOM PREMIUM CURSOR
========================================================= */

/*
   فقط روی دستگاه‌هایی فعال می‌شود که
   واقعاً Mouse Pointer دقیق دارند.
*/

@media (hover: hover) and (pointer: fine) {

    body {
        cursor: none;
    }

    a,
    button,
    input,
    textarea,
    select,
    label,
    [role="button"] {
        cursor: none;
    }


    /* -----------------------------------------------------
       CURSOR CONTAINER
    ----------------------------------------------------- */

    .custom-cursor {

        position: fixed;

        top: 0;
        left: 0;

        z-index: 999999;

        width: 0;
        height: 0;

        pointer-events: none;

        opacity: 0;

        transition:
            opacity 0.25s ease;

    }


    .custom-cursor.visible {
        opacity: 1;
    }


    /* -----------------------------------------------------
       CENTER DOT
    ----------------------------------------------------- */

    .cursor-dot {

        position: fixed;

        top: 0;
        left: 0;

        width: 7px;
        height: 7px;

        border-radius: 50%;

        background:
            var(--color-primary);

        box-shadow:
            0 0 10px
            rgba(34, 197, 139, 0.7),
            0 0 22px
            rgba(34, 197, 139, 0.25);

        transform:
            translate(-50%, -50%);

        will-change:
            transform;

    }


    /* -----------------------------------------------------
       OUTER RING
    ----------------------------------------------------- */

    .cursor-ring {

        position: fixed;

        top: 0;
        left: 0;

        width: 34px;
        height: 34px;

        border:
            1px solid
            rgba(85, 221, 176, 0.7);

        border-radius: 50%;

        background:
            rgba(34, 197, 139, 0.025);

        box-shadow:
            0 0 18px
            rgba(34, 197, 139, 0.08);

        transform:
            translate(-50%, -50%);

        will-change:
            transform,
            width,
            height;

        transition:
            width 0.25s ease,
            height 0.25s ease,
            background 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;

    }


    /* -----------------------------------------------------
       HOVER STATE
    ----------------------------------------------------- */

    .custom-cursor.hovering
    .cursor-ring {

        width: 52px;
        height: 52px;

        border-color:
            rgba(85, 221, 176, 0.9);

        background:
            rgba(34, 197, 139, 0.08);

        box-shadow:
            0 0 28px
            rgba(34, 197, 139, 0.15);

    }


    .custom-cursor.hovering
    .cursor-dot {

        width: 5px;
        height: 5px;

        background:
            var(--color-primary-light);

    }


    /* -----------------------------------------------------
       CLICK STATE
    ----------------------------------------------------- */

    .custom-cursor.clicking
    .cursor-ring {

        width: 27px;
        height: 27px;

        background:
            rgba(34, 197, 139, 0.16);

        border-color:
            var(--color-primary-light);

    }


    /* -----------------------------------------------------
       TEXT STATE
    ----------------------------------------------------- */

    .custom-cursor.text-hover
    .cursor-ring {

        width: 25px;
        height: 42px;

        border-radius: 10px;

        border-color:
            rgba(214, 173, 96, 0.7);

        background:
            rgba(214, 173, 96, 0.04);

    }


    .custom-cursor.text-hover
    .cursor-dot {

        background:
            var(--color-secondary-light);

    }

}


/* =========================================================
   DISABLE CUSTOM CURSOR ON TOUCH DEVICES
========================================================= */

@media (hover: none),
(pointer: coarse) {

    .custom-cursor {
        display: none !important;
    }

}


/* =========================================================
   39. LARGE DESKTOP
========================================================= */

@media
(min-width: 1450px) {

    :root {

        --container-width:
            1320px;

    }


    .hero-grid {

        gap: 110px;

    }


    .profile-stage {

        transform:
            scale(1.05);

    }

}


/* =========================================================
   40. LAPTOP
========================================================= */

@media
(max-width: 1180px) {

    :root {

        --section-space:
            75px;

    }


    .nav-menu {

        gap: 0;

    }


    .nav-link {

        padding:
            9px 8px;

        font-size:
            12px;

    }


    .hero-grid {

        grid-template-columns:
            1fr
            420px;

        gap: 45px;

    }


    .profile-stage {

        transform:
            scale(0.93);

    }


    .about-grid {

        gap: 50px;

    }


    .vision-wrapper {

        grid-template-columns:
            80px
            1fr
            120px;

        gap: 30px;

        padding:
            40px;

    }


    .vision-symbol {

        width: 100px;
        height: 100px;

        font-size: 35px;

    }

}


/* =========================================================
   41. TABLET / MOBILE NAVIGATION
========================================================= */

@media
(max-width: 980px) {

    :root {

        --header-height:
            68px;

        --section-space:
            68px;

    }


    .container {

        width:
            min(
                calc(100% - 36px),
                var(--container-width)
            );

    }


    .mobile-menu-button {

        display: flex;

    }


    .nav-menu {

        position: fixed;

        top: 0;
        right: 0;

        z-index: 4500;

        display: flex;

        align-items: stretch;

        flex-direction: column;

        gap: 4px;

        width:
            min(
                330px,
                85vw
            );

        height: 100vh;

        padding:
            105px 25px 35px;

        border-left:
            1px solid
            var(--color-border);

        background:
            rgba(6,16,29,0.97);

        backdrop-filter:
            blur(20px);

        box-shadow:
            -20px 0 60px
            rgba(0,0,0,0.3);

        transform:
            translateX(105%);

        transition:
            transform
            0.4s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );

    }


    body.light-theme
    .nav-menu {

        background:
            rgba(247,250,252,0.98);

    }


    .nav-menu.active {

        transform:
            translateX(0);

    }


    .nav-link {

        padding:
            12px 14px;

        border-radius:
            10px;

        font-size:
            13px;

    }


    .nav-link:hover,
    .nav-link.active {

        background:
            rgba(34,197,139,0.07);

    }


    .nav-link::after {

        display: none;

    }


    .hero-section {

        min-height: auto;

        padding:
            130px 0 100px;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        gap: 70px;

    }


    .hero-content {

        max-width: 750px;

        margin-inline: auto;

        text-align: center;

    }


    .hero-badge {

        margin-inline: auto;

    }


    .hero-english-name {

        margin-inline:
            auto;

    }


    .hero-role {

        justify-content:
            center;

    }


    .hero-description {

        margin-inline:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-social {

        justify-content:
            center;

    }


    .hero-visual {

        min-height: 520px;

    }


    .profile-stage {

        transform:
            scale(0.95);

    }


    .scroll-indicator {

        display: none;

    }


    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .stat-card:nth-child(2)::after {

        display: none;

    }


    .stat-card:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--color-border);

    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .about-visual,
    .about-content {

        width: 100%;
        max-width: 720px;

        margin-inline:
            auto;

    }


    .expertise-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .vision-wrapper {

        grid-template-columns:
            60px
            1fr;

    }


    .vision-symbol {

        display: none;

    }

}


/* =========================================================
   42. SMALL TABLET
========================================================= */

@media
(max-width: 720px) {

    :root {

            --section-space:
            60px;

    }


    .brand-text small {

        display: none;

    }


    .hero-section {

        padding-top:
            115px;

    }


    .hero-title-main {

        letter-spacing:
            -1.5px;

    }


    .profile-stage {

        width: 390px;
        height: 500px;

        transform:
            scale(0.9);

    }


    .about-features {

        grid-template-columns:
            1fr;

    }


    .expertise-grid {

        grid-template-columns:
            1fr;

    }


    .expertise-card {

        min-height:
            250px;

    }


    .vision-wrapper {

        grid-template-columns:
            1fr;

        padding:
            35px 28px;

    }


    .vision-label {

        justify-content:
            flex-start;

        border-left: 0;

        border-bottom:
            1px solid
            var(--color-border);

        padding-bottom:
            15px;

    }


    .vision-label span {

        writing-mode:
            horizontal-tb;

    }


    .temporary-footer-content {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 10px;

    }

}


/* =========================================================
   43. MOBILE
========================================================= */

@media
(max-width: 560px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .main-header {

        height:
            66px;
    }


    .main-header.scrolled {

        height:
            60px;

    }


    .brand {

        gap: 9px;

    }


    .brand-symbol {

        width: 40px;
        height: 40px;

        border-radius:
            12px;

        font-size: 18px;

    }


    .brand-text strong {

        font-size:
            11px;

    }


    .language-button {

        display: none;

    }


    .hero-section {

        padding:
            105px 0 75px;

    }


    .hero-badge {

        font-size:
            9px;

    }


    .hero-title-main {

        font-size:
            clamp(
                36px,
                11vw,
                52px
            );

        line-height:
            1.35;

    }


    .hero-title-small {

        font-size:
            19px;

    }


    .hero-english-name {

        font-size:
            11px;

        letter-spacing:
            2px;

    }


    .hero-role {

        font-size:
            12px;

    }


    .hero-description {

        font-size:
            12px;

        line-height:
            2.1;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .btn {

        width: 100%;

    }


    .hero-social {

        flex-direction:
            column;

        gap: 10px;

    }


    .hero-visual {

        min-height:
            430px;

    }


    .profile-stage {

        width: 350px;
        height: 450px;

        transform:
            scale(0.82);

    }


    .floating-card-ai {

        right: -4px;

    }


    .floating-card-education {

        right: 0;

    }


    .floating-card-focus {

        left: 0;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .stat-card {

        justify-content:
            flex-start;

        min-height:
            92px;

        padding:
            18px 30px;

    }


    .stat-card::after {

        display: none !important;

    }


    .stat-card:not(:last-child) {

        border-bottom:
            1px solid
            var(--color-border);

    }


    .section-header {

        margin-bottom:
            45px;

    }


    .section-title {

        font-size:
            28px;

    }


    .section-subtitle {

        font-size:
            11px;

    }


    .about-card {

        min-height:
            auto;

        padding:
            32px 25px;

    }


    .about-card blockquote {

        font-size:
            16px;

            position: relative;

            z-index: 2;

            padding-inline-end: 55px;

    }


    .about-mini-grid {

        grid-template-columns:
            1fr;

    }


    .about-content h3 {

        font-size:
            27px;

    }


    .about-content > p {

        font-size:
            12px;

    }


    .expertise-card {

        padding:
            25px 23px;

    }


    .vision-section {

        padding:
            70px 0 90px;

    }


    .vision-wrapper {

        padding:
            30px 23px;

    }


    .vision-content h2 {

        font-size:
            25px;

    }


    .back-to-top {

        left: 15px;
        bottom: 15px;

        width: 40px;
        height: 40px;

    }

}


/* =========================================================
   44. VERY SMALL MOBILE
========================================================= */

@media
(max-width: 390px) {

    .brand-text {

        display: none;

    }


    .profile-stage {

        margin-right:
            -10px;

        transform:
            scale(0.75);

    }


    .hero-visual {

        min-height:
            400px;

    }


    .hero-title-main {

        font-size:
            34px;

    }

}



/* =========================================================
   BILINGUAL LANGUAGE / DIRECTION SUPPORT
========================================================= */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="ltr"] body {
    direction: ltr;
}

html[lang="en"] body {
    font-family:
        Arial,
        "Vazirmatn",
        sans-serif;
}

html[lang="en"] .hero-content,
html[lang="en"] .about-content {
    text-align: left;
}

html[lang="fa"] .hero-content,
html[lang="fa"] .about-content {
    text-align: right;
}

html[lang="en"] .hero-title-main {
    letter-spacing: -1.5px;
    line-height: 1.12;
}

html[lang="en"] .hero-english-name {
    direction: rtl;
    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
    letter-spacing: 0;
}

html[lang="en"] .brand-text small {
    direction: rtl;
    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
}

html[lang="fa"] .profile-status,
html[lang="fa"] .profile-card-footer strong,
html[lang="fa"] .floating-card > div:last-child,
html[lang="fa"] .about-signature span,
html[lang="fa"] .about-mini-card strong {
    direction: rtl;
    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
}

html[lang="en"] .expertise-en {
    direction: rtl;
    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
    letter-spacing: 0;
}

html[lang="fa"] .expertise-en {
    direction: ltr;
}

html[lang="en"] .temporary-footer > .container
.temporary-footer-content > div span {
    direction: rtl;
    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
}

html[dir="ltr"] .page-progress {
    right: auto;
    left: 0;
}

html[dir="ltr"] .btn-primary .fa-arrow-left,
html[dir="ltr"] .text-link .fa-arrow-left {
    transform: rotate(180deg);
}

html[dir="ltr"] .btn-primary:hover .fa-arrow-left,
html[dir="ltr"] .text-link:hover .fa-arrow-left {
    transform: rotate(180deg) translateX(4px);
}

@media (max-width: 980px) {
    html[dir="ltr"] .nav-menu {
        right: auto;
        left: 0;
        border-left: 0;
        border-right:
            1px solid
            var(--color-border);
        transform: translateX(-105%);
        box-shadow:
            20px 0 60px
            rgba(0,0,0,0.3);
    }

    html[dir="ltr"] .nav-menu.active {
        transform: translateX(0);
    }
}


/* =========================================================
   45. REDUCED MOTION ACCESSIBILITY
========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}


/* =========================================================
   END OF STYLE.CSS
========================================================= */.brand-fallback{display:grid;place-items:center;width:100%;height:100%;font-family:Arial,sans-serif;font-weight:800;letter-spacing:-.08em;color:#20c994;font-size:1.25rem}
.loader-logo .brand-fallback{font-size:2rem}

/* Education journey: milestone cards expand on hover, keyboard focus and tap. */
.education-section{position:relative;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(34,197,139,.035),transparent)}
.education-section .section-header{max-width:760px;margin-inline:auto}
.education-section .section-subtitle{max-width:650px;margin:1rem auto 0;color:var(--color-text-soft);font-size:1.05rem;line-height:1.9}
.education-hint{margin:.8rem 0 0;color:var(--color-text-muted);font-size:.9rem}
.education-timeline{position:relative;max-width:1040px;margin:3.2rem auto 0;display:flex;flex-direction:column;gap:1.15rem}
.education-timeline::before{content:"";position:absolute;top:1.1rem;bottom:1.1rem;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--color-primary),rgba(77,163,255,.72),var(--color-secondary),transparent);opacity:.72}
.education-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 5.25rem minmax(0,1fr);align-items:start;min-height:116px}
.education-item:nth-child(odd) .education-card{grid-column:1}
.education-item:nth-child(even) .education-card{grid-column:3}
.education-year{z-index:1;grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;width:4.25rem;height:4.25rem;margin-top:1rem;border:1px solid rgba(34,197,139,.55);border-radius:50%;background:var(--color-bg);box-shadow:0 0 0 7px rgba(34,197,139,.07),0 0 28px rgba(34,197,139,.14);color:var(--color-primary-light);font-weight:800;font-size:.94rem;font-variant-numeric:tabular-nums;transition:transform .28s ease,box-shadow .28s ease}
.education-card{position:relative;grid-row:1;width:100%;min-height:94px;padding:1.15rem 1.3rem;text-align:start;direction:inherit;color:var(--color-text);border:1px solid var(--color-border);border-radius:18px;background:linear-gradient(145deg,var(--color-card),rgba(9,22,38,.92));box-shadow:var(--shadow-small);cursor:pointer;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background .25s ease}
.education-card:hover,.education-card:focus-visible,.education-card.is-open{border-color:rgba(34,197,139,.58);background:linear-gradient(145deg,rgba(22,64,61,.7),var(--color-card-solid));box-shadow:0 16px 48px rgba(0,0,0,.24),0 0 26px rgba(34,197,139,.11);transform:translateY(-3px)}
.education-item:has(.education-card:hover) .education-year,.education-item:has(.education-card:focus-visible) .education-year,.education-item:has(.education-card.is-open) .education-year{transform:scale(1.08);box-shadow:0 0 0 9px rgba(34,197,139,.1),0 0 34px rgba(34,197,139,.28)}
.education-level,.education-subject,.education-prompt{display:block}
.education-level{color:var(--color-primary-light);font-size:.9rem;font-weight:700;letter-spacing:.015em}
.education-subject{margin-top:.38rem;font-size:1.08rem;font-weight:700;line-height:1.65}
.education-prompt{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;color:var(--color-text-muted);font-size:.82rem;transition:color .2s ease}
.education-prompt i{transition:transform .25s ease}
.education-card:hover .education-prompt,.education-card:focus-visible .education-prompt,.education-card.is-open .education-prompt{color:var(--color-primary-light)}
.education-card:hover .education-prompt i,.education-card:focus-visible .education-prompt i,.education-card.is-open .education-prompt i{transform:rotate(180deg)}
.education-detail{display:grid;grid-template-rows:0fr;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease,margin .25s ease}
.education-card:hover .education-detail,.education-card:focus-visible .education-detail,.education-card.is-open .education-detail{max-height:180px;margin-top:.75rem;opacity:1}
.education-detail span{padding:.23rem 0;color:var(--color-text-soft);font-size:.91rem;line-height:1.65}
html.light-theme .education-year{background:#f4f8f7}
html.light-theme .education-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,248,246,.95))}
html.light-theme .education-card:hover,html.light-theme .education-card:focus-visible,html.light-theme .education-card.is-open{background:linear-gradient(145deg,#fff,#eef9f5)}
@media(max-width:760px){.education-timeline{margin-top:2.25rem;gap:.9rem}.education-timeline::before{left:auto;right:1.7rem;transform:none}.education-item{grid-template-columns:3.4rem minmax(0,1fr);min-height:0;gap:.75rem;align-items:start}.education-item:nth-child(odd) .education-card,.education-item:nth-child(even) .education-card{grid-column:2}.education-year{grid-column:1;grid-row:1;width:3.35rem;height:3.35rem;margin-top:.65rem;font-size:.79rem}.education-card{min-height:90px;padding:1rem;border-radius:15px}.education-subject{font-size:1rem}.education-hint{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.education-year,.education-card,.education-prompt i,.education-detail{transition:none}}

/* Corporate history and expertise carousels */
.experience-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(34,197,139,.035),transparent 45%,rgba(77,163,255,.025))}
.experience-section .section-subtitle{max-width:760px;margin:1rem auto 0;color:var(--color-text-soft);font-size:1.04rem;line-height:1.85}
.experience-groups{display:grid;gap:2.8rem;margin-top:3.25rem}
.experience-group{min-width:0}
.experience-group-heading{display:flex;align-items:center;gap:1rem;margin:0 0 1.1rem}
.experience-group-icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid rgba(34,197,139,.3);border-radius:15px;color:var(--color-primary-light);background:linear-gradient(145deg,rgba(34,197,139,.16),rgba(77,163,255,.08));box-shadow:0 7px 24px rgba(0,0,0,.12)}
.experience-group-heading h3{margin:0;color:var(--color-text);font-size:1.18rem;line-height:1.55;font-weight:750}
.experience-group-heading p{margin:.2rem 0 0;color:var(--color-text-muted);font-size:.93rem}
.experience-logo-viewport{--logo-gap:1rem;--logo-width:clamp(128px,calc(20vw - 24px),230px);overflow:hidden;position:relative;padding:.45rem .15rem 1.05rem;outline:none;direction:ltr;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.experience-logo-viewport:focus-visible{border-radius:18px;outline:2px solid var(--color-primary);outline-offset:2px}
.experience-logo-track{display:flex;width:max-content;animation:experience-logos-right var(--marquee-duration,55s) linear infinite;will-change:transform}
.experience-logo-set{display:flex;align-items:stretch;gap:var(--logo-gap);flex:none;list-style:none;margin:0;padding:0 calc(var(--logo-gap) / 2) 0 0}
.experience-logo-tile{display:grid;place-items:center;box-sizing:border-box;flex:0 0 var(--logo-width);width:var(--logo-width);height:132px;padding:8px;border:1px solid rgba(17,35,53,.09);border-radius:18px;background:linear-gradient(145deg,#fff,#f1f5f7);box-shadow:0 12px 32px rgba(0,0,0,.14);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.experience-logo-tile img{display:block;width:100%;height:100%;max-width:200px;max-height:108px;object-fit:contain;object-position:center;mix-blend-mode:multiply;filter:contrast(1.07) saturate(1.02);transition:filter .28s ease,transform .28s ease}
.experience-logo-tile:hover{z-index:1;transform:translateY(-5px) scale(1.035);border-color:rgba(34,197,139,.5);box-shadow:0 18px 38px rgba(0,0,0,.2),0 0 23px rgba(34,197,139,.12)}
.experience-logo-tile:hover img{filter:contrast(1.1) saturate(1.12);transform:scale(1.04)}
.experience-logo-viewport:hover .experience-logo-track,.experience-logo-viewport:has(:focus-visible) .experience-logo-track{animation-play-state:paused}
@keyframes experience-logos-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
html.light-theme .experience-section{background:linear-gradient(180deg,rgba(20,151,104,.035),transparent 50%,rgba(77,163,255,.025))}
html.light-theme .experience-logo-tile{background:linear-gradient(145deg,#fff,#fbfcfd);border-color:rgba(17,35,53,.12);box-shadow:0 10px 26px rgba(26,50,68,.09)}
html.light-theme .experience-group-icon{background:linear-gradient(145deg,rgba(20,151,104,.1),rgba(77,163,255,.06));box-shadow:0 6px 18px rgba(26,50,68,.07)}
@media(max-width:760px){.experience-groups{gap:2.1rem;margin-top:2.4rem}.experience-group-heading{gap:.8rem}.experience-group-heading h3{font-size:1.05rem}.experience-logo-viewport{--logo-width:clamp(142px,43vw,190px);--logo-gap:.8rem}.experience-logo-tile{height:116px;padding:7px;border-radius:15px}.experience-logo-tile img{max-width:160px;max-height:88px}}
@media(prefers-reduced-motion:reduce){.experience-logo-track{animation:none;transform:none}.experience-logo-tile,.experience-logo-tile img{transition:none}}

/* Compact expertise cards and a proportionally shorter Vision panel */
.expertise-section{padding-block:68px}
.expertise-section .section-header{margin-bottom:28px}
.expertise-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;align-items:stretch}
.expertise-card{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;column-gap:14px;min-height:0;padding:18px 16px 38px;overflow:visible;border:0;border-top:1px solid var(--color-border);border-radius:0;background:transparent;box-shadow:none;transform:none}
.expertise-card::after{display:none}
.expertise-card:hover{border-color:var(--color-border);background:rgba(255,255,255,.018);box-shadow:none;transform:translateY(-2px)}
.expertise-card::before{height:2px}
.expertise-card-number{top:19px;inset-inline-end:16px;font-size:21px}
.expertise-icon{grid-column:1;grid-row:1;width:36px;height:36px;margin:2px 0 0;border-radius:11px;font-size:15px}
.expertise-content{grid-column:2;grid-row:1;min-width:0}
.expertise-content h3{margin:0 0 3px;padding-inline-end:32px;font-size:16px;line-height:1.55}
.expertise-en{margin-bottom:8px;font-size:10px;letter-spacing:.35px}
.expertise-content p{font-size:13px;line-height:1.85}
.expertise-arrow{inset-inline-start:16px;left:auto;bottom:10px;width:24px;height:24px;border-radius:8px;font-size:8px}

.vision-wrapper{grid-template-columns:80px minmax(0,1fr) 112px;gap:35px;min-height:285px;padding:42px 44px}
.vision-label{min-width:0}
.vision-content{min-width:0}
.vision-pretitle{margin-bottom:8px;font-size:11px}
.vision-content h2{max-width:700px;margin-bottom:12px;font-size:clamp(25px,3.1vw,41px);line-height:1.45;letter-spacing:-.6px}
.vision-content>p:last-child{max-width:760px;font-size:13px;line-height:1.9}
.vision-symbol{width:104px;height:104px;font-size:38px}

@media(max-width:980px){
  .expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
  .vision-wrapper{grid-template-columns:60px minmax(0,1fr);gap:24px;padding:36px 32px;min-height:285px}
  .vision-symbol{display:none}
}
@media(max-width:720px){
  .expertise-section{padding-block:54px}
  .expertise-section .section-header{margin-bottom:22px}
  .expertise-grid{grid-template-columns:1fr;gap:6px}
  .expertise-card{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:16px 12px 34px}
  .expertise-card-number{top:17px;inset-inline-end:12px;font-size:19px}
  .expertise-content h3{font-size:15px}
  .expertise-content p{font-size:13px;line-height:1.8}
  .expertise-arrow{inset-inline-start:12px;bottom:7px}
  .vision-section{padding:65px 0 85px}
  .vision-wrapper{grid-template-columns:minmax(0,1fr);gap:16px;min-height:0;padding:27px 22px}
  .vision-label{justify-content:flex-start;min-height:0;padding-bottom:10px;border-left:0;border-bottom:1px solid var(--color-border)}
  .vision-label span{writing-mode:horizontal-tb;letter-spacing:3px}
  .vision-content h2{font-size:23px;line-height:1.48}
  .vision-content>p:last-child{font-size:12px;line-height:1.85}
}

/* Site-wide color polish */
:root{
  --color-bg:#071321;
  --color-bg-soft:#0a1a2b;
  --color-bg-light:#10243a;
  --color-primary:#2bd3a0;
  --color-primary-light:#7de9c6;
  --color-primary-dark:#14966e;
  --color-secondary:#e8bd70;
  --color-secondary-light:#f5d99e;
  --color-blue:#62b5ff;
  --color-text:#f5f9fd;
  --color-text-soft:#c7d3e1;
  --color-text-muted:#8fa1b6;
  --color-border:rgba(133,177,203,.14);
  --color-border-strong:rgba(133,177,203,.23);
  --gradient-primary:linear-gradient(135deg,#1bb987 0%,#39dca9 100%);
  --gradient-gold:linear-gradient(135deg,#bd8b3e 0%,#f2d187 100%);
  --gradient-text:linear-gradient(100deg,#ffffff 0%,#d9efff 62%,#a8e9d2 100%);
  --gradient-accent:linear-gradient(100deg,#24c995 0%,#61b8ff 58%,#e8bd70 100%);
  --shadow-primary:0 14px 42px rgba(43,211,160,.23);
}

html{color-scheme:dark}
body{
  background:
    radial-gradient(ellipse at 8% 9%,rgba(35,199,148,.06),transparent 25%),
    radial-gradient(ellipse at 92% 24%,rgba(66,142,228,.05),transparent 26%),
    radial-gradient(ellipse at 58% 100%,rgba(211,169,92,.025),transparent 28%),
    var(--color-bg);
  transition:background-color .45s ease,color .35s ease;
}

body.light-theme{
  --color-bg:#f2f7fb;
  --color-bg-soft:#eaf2f7;
  --color-bg-light:#e0ebf3;
  --color-primary:#168561;
  --color-primary-light:#147b5c;
  --color-primary-dark:#0e6b4e;
  --color-secondary:#9d6e27;
  --color-secondary-light:#84591d;
  --color-blue:#267bb8;
  --color-text:#14283d;
  --color-text-soft:#43586d;
  --color-text-muted:#687d91;
  --color-border:rgba(17,53,78,.12);
  --color-border-strong:rgba(17,53,78,.2);
  --gradient-primary:linear-gradient(135deg,#168561 0%,#2db889 100%);
  --gradient-gold:linear-gradient(135deg,#a7752c 0%,#d4ac5f 100%);
  --gradient-text:linear-gradient(100deg,#14283d 0%,#31536d 62%,#147b5c 100%);
  --gradient-accent:linear-gradient(100deg,#168561 0%,#267bb8 58%,#b18135 100%);
  --shadow-primary:0 14px 38px rgba(22,133,97,.17);
  color-scheme:light;
  background:
    radial-gradient(ellipse at 8% 9%,rgba(40,174,130,.045),transparent 25%),
    radial-gradient(ellipse at 92% 24%,rgba(74,150,211,.04),transparent 26%),
    #f2f7fb;
}
html.light-theme{color-scheme:light}

.site-background::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(220px circle at var(--ambient-x,76%) var(--ambient-y,22%),rgba(54,220,171,.05),transparent 72%);
  opacity:.48;
  transition:opacity .4s ease;
}
body.light-theme .site-background::after{
  background:radial-gradient(220px circle at var(--ambient-x,76%) var(--ambient-y,22%),rgba(25,147,107,.045),transparent 72%);
}
.bg-glow{opacity:.05;will-change:transform;animation:ambient-drift 23s ease-in-out infinite alternate}
.bg-glow-two{animation-delay:-11s;animation-direction:alternate-reverse}
@keyframes ambient-drift{from{transform:translate3d(-12px,-10px,0) scale(.96)}to{transform:translate3d(12px,9px,0) scale(1.02)}}
html.light-theme .bg-grid{opacity:.25;background-image:linear-gradient(rgba(24,125,94,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(24,125,94,.045) 1px,transparent 1px)}

.main-header.scrolled{border-color:var(--color-border);box-shadow:0 12px 36px rgba(3,13,24,.2)}
body.light-theme .main-header.scrolled{background:rgba(244,249,252,.86);box-shadow:0 12px 32px rgba(25,52,76,.09)}
.nav-link{border-radius:999px;transition:color var(--transition-fast),background var(--transition-fast)}
.nav-link:hover,.nav-link.active{color:var(--color-primary-light);background:rgba(43,211,160,.075)}
.nav-link::after{background:var(--gradient-primary)}
.section-eyebrow span{background:var(--gradient-primary);box-shadow:0 0 7px rgba(43,211,160,.2)}
.section-title span{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-title-main{background-image:var(--gradient-text);color:transparent;-webkit-text-fill-color:transparent}
.hero-badge{border-color:rgba(43,211,160,.28);background:linear-gradient(100deg,rgba(43,211,160,.1),rgba(98,181,255,.055));box-shadow:inset 0 1px rgba(255,255,255,.045)}
.btn-primary{background-size:140% 100%;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background-position .45s ease}
.btn-primary:hover{background-position:100% 0;box-shadow:0 12px 28px rgba(43,211,160,.19)}
.profile-card{border-color:rgba(125,233,198,.2);box-shadow:0 32px 88px rgba(0,0,0,.34),0 0 20px rgba(43,211,160,.04)}
.education-year{border-color:rgba(43,211,160,.66)}
.vision-wrapper{border-color:rgba(133,177,203,.18)}

:where(a,button,[role="button"],input,textarea,select):focus-visible{outline:2px solid var(--color-primary-light);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.bg-glow{animation:none}.site-background::after{transition:none}}
@media(max-width:760px){.site-background::after{background-size:200px 200px}.bg-glow{opacity:.035}}


/* Final visual polish: portrait edge, section rhythm, and heading scale */
.profile-image-wrapper{
  border:1px solid rgba(125,233,198,.25);
  box-shadow:0 0 22px rgba(43,211,160,.11),0 14px 32px rgba(0,0,0,.2);
}
body.light-theme .profile-image-wrapper{
  border-color:rgba(22,133,97,.24);
  box-shadow:0 0 18px rgba(22,133,97,.08),0 12px 26px rgba(25,52,76,.12);
}
.section:not(.hero-section){padding-block:clamp(58px,6.4vw,76px)}
.section-header{max-width:760px;margin:0 auto 36px}
.section-eyebrow{margin-bottom:10px}
.section-title{margin:0 0 12px;font-size:clamp(27px,3.1vw,40px);line-height:1.4;letter-spacing:-.6px}
.section-subtitle{max-width:640px;font-size:clamp(13px,1.08vw,15px);line-height:1.85}
@media(max-width:760px){
  .section:not(.hero-section){padding-block:50px}
  .section-header{margin-bottom:27px}
  .section-title{font-size:clamp(25px,7vw,30px);line-height:1.45}
  .section-subtitle{font-size:13px;line-height:1.8}
}


/* Expertise check badges: tuned for both color themes */
.expertise-arrow{
  border-color:rgba(43,211,160,.28);
  background:rgba(43,211,160,.09);
  color:#37c997;
  font-size:11px;
}
.expertise-arrow i{line-height:1;font-weight:900}
.expertise-card:hover .expertise-arrow{
  border-color:rgba(43,211,160,.55);
  background:rgba(43,211,160,.16);
  color:#55dfad;
  transform:translateY(-1px) scale(1.06);
}
body.light-theme .expertise-arrow{
  border-color:rgba(20,133,97,.24);
  background:rgba(20,133,97,.08);
  color:#147b5c;
}
body.light-theme .expertise-card:hover .expertise-arrow{
  border-color:rgba(20,133,97,.4);
  background:rgba(20,133,97,.13);
  color:#0e684d;
}

/* Compact editorial imagery for expertise and knowledge sections */
.expertise-card--visual{grid-template-columns:60px minmax(0,1fr)}
.expertise-card--visual .expertise-icon.expertise-image{width:54px;height:54px;margin:0;overflow:hidden;border:1px solid rgba(125,233,198,.23);border-radius:14px;background:var(--color-card);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.expertise-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.expertise-card--visual:hover .expertise-image img{transform:scale(1.07)}
body.light-theme .expertise-card--visual .expertise-icon.expertise-image{border-color:rgba(22,133,97,.2);box-shadow:0 5px 14px rgba(25,52,76,.12)}
.visual-cover-section .section-header{margin-bottom:28px}
.editorial-cover{position:relative;isolation:isolate;min-height:clamp(205px,24vw,280px);overflow:hidden;border:1px solid rgba(133,177,203,.17);border-radius:24px;background:#071321;box-shadow:0 24px 64px rgba(0,0,0,.22)}
.editorial-cover>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.editorial-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,12,22,.9) 0%,rgba(4,12,22,.72) 38%,rgba(4,12,22,.12) 76%,rgba(4,12,22,.04) 100%)}
.editorial-cover-copy{max-width:56%;padding:clamp(24px,4.3vw,48px);color:#f5f9fd}
.editorial-cover-label{display:inline-flex;align-items:center;gap:9px;color:#8de3c4;font-size:12px;font-weight:700;letter-spacing:.02em}
.editorial-cover-label i{font-size:14px}
.editorial-cover-copy h3{margin:14px 0 7px;color:#fff;font-size:clamp(22px,2.5vw,31px);font-weight:800;line-height:1.45}
.editorial-cover-copy p{margin:0;color:rgba(231,240,247,.82);font-size:14px;line-height:1.9}
.media-cover-section{padding-top:10px}
.editorial-cover-media>img{object-position:center 55%}
body.light-theme .editorial-cover{border-color:rgba(17,53,78,.16);box-shadow:0 20px 48px rgba(25,52,76,.14)}
@media(max-width:720px){
  .expertise-card--visual{grid-template-columns:50px minmax(0,1fr)}
  .expertise-card--visual .expertise-icon.expertise-image{width:46px;height:46px;border-radius:12px}
  .visual-cover-section .section-header{margin-bottom:20px}
  .editorial-cover{min-height:185px;border-radius:19px}
  .editorial-cover-copy{max-width:72%;padding:22px 19px}
  .editorial-cover-copy h3{margin-top:10px;font-size:21px}
  .editorial-cover-copy p{font-size:12px;line-height:1.75}
  .editorial-cover-label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.expertise-image img{transition:none}}

/* Works / books strip */
.works-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(77,163,255,.035),transparent 52%,rgba(34,197,139,.025))}
.works-section .section-subtitle{max-width:760px;margin:1rem auto 0;color:var(--color-text-soft);font-size:1.04rem;line-height:1.85}
.works-groups{display:grid;gap:2.8rem;margin-top:3rem}
.works-group{min-width:0}
.works-viewport{--logo-width:clamp(164px,calc(17vw - 12px),204px);--logo-gap:1rem;padding-top:.8rem;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.works-viewport.is-dragging,.experience-logo-viewport.is-dragging{cursor:grabbing}
.works-book-set{display:flex;align-items:stretch;gap:var(--logo-gap);flex:none;list-style:none;margin:0;padding:0 calc(var(--logo-gap) / 2) 0 0}
.works-book-tile{display:block;flex:0 0 var(--logo-width);width:var(--logo-width);height:auto}
.book-cover-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;aspect-ratio:2/3;overflow:hidden;width:100%;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:#102230;box-shadow:0 14px 36px rgba(0,0,0,.22);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.book-cover-card::after{content:"";position:absolute;inset:28% 0 0;z-index:1;background:linear-gradient(180deg,transparent 0%,rgba(7,15,25,.18) 28%,rgba(7,15,25,.91) 100%);pointer-events:none}
.book-cover-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.book-cover-kicker{position:relative;z-index:2;align-self:flex-start;margin:0 16px 10px;padding:5px 9px;border:1px solid rgba(255,255,255,.46);border-radius:99px;color:#fff;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(7,15,25,.25);backdrop-filter:blur(6px)}
.book-cover-card h4{position:relative;z-index:2;margin:0;padding:0 16px 19px;color:#fff;font-size:1.04rem;line-height:1.7;font-weight:760;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.book-cover-accent{position:absolute;z-index:2;right:16px;bottom:10px;width:35px;height:2px;border-radius:2px;background:linear-gradient(90deg,#42dfad,#8ac7ff)}
html[dir="ltr"] .book-cover-accent{right:auto;left:16px}
.works-book-tile:hover .book-cover-card{transform:translateY(-5px) scale(1.025);border-color:rgba(83,219,174,.66);box-shadow:0 21px 44px rgba(0,0,0,.28),0 0 25px rgba(34,197,139,.12)}
.works-book-tile:hover .book-cover-card img{transform:scale(1.045)}
.works-viewport:focus-visible{border-radius:18px;outline:2px solid var(--color-primary);outline-offset:2px}
html.light-theme .works-section{background:linear-gradient(180deg,rgba(20,151,104,.03),transparent 52%,rgba(77,163,255,.025))}
html.light-theme .book-cover-card{border-color:rgba(17,35,53,.14);box-shadow:0 12px 30px rgba(26,50,68,.13)}
@media(max-width:760px){.works-groups{gap:2.1rem;margin-top:2.25rem}.works-viewport{--logo-width:clamp(148px,42vw,180px);--logo-gap:.8rem}.book-cover-card{border-radius:14px}.book-cover-card h4{padding:0 12px 16px;font-size:.95rem;line-height:1.65}.book-cover-kicker{margin:0 12px 8px;font-size:.59rem}.book-cover-accent{right:12px;bottom:8px}.works-viewport:focus-visible{border-radius:15px}}
@media(prefers-reduced-motion:reduce){.works-viewport .experience-logo-track{animation:none;transform:translateX(-50%)}.book-cover-card,.book-cover-card img{transition:none}}
.experience-logo-viewport{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}

/* Keep the user's original cover images intact inside a uniform gallery frame. */
.works-book-tile{display:flex;flex-direction:column;justify-content:flex-start;gap:.7rem;height:auto}
.book-cover-card{display:block;aspect-ratio:2/3;background:#f4f6f7;border-color:rgba(17,35,53,.12);box-shadow:0 13px 32px rgba(0,0,0,.18)}
.book-cover-card::after,.book-cover-kicker,.book-cover-accent{display:none}
.book-cover-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:#f4f6f7;transform:none}
.book-title-caption{min-height:3.2rem;margin:0;padding:0 4px;color:var(--color-text);font-size:.89rem;line-height:1.65;font-weight:680;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.works-book-tile:hover .book-cover-card img{transform:none}
.works-book-tile:hover .book-title-caption{color:var(--color-primary-light)}
html.light-theme .book-cover-card,html.light-theme .book-cover-card img{background:#f7f8f9}
.experience-logo-track:has(.experience-logo-tile:hover),.experience-logo-track:has(.works-book-tile:hover){animation-play-state:paused}
.experience-logo-tile,.works-book-tile{cursor:grab}
.experience-logo-tile:active,.works-book-tile:active{cursor:grabbing}
@media(max-width:760px){.works-viewport{--logo-width:clamp(148px,42vw,180px)}.book-title-caption{font-size:.82rem;min-height:2.9rem}}

.experience-logo-viewport img,.works-viewport img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}

/* Compact editorial rows for the Donyaye Eqtesad notes and research papers. */
.works-publication-group{margin-top:2.15rem}
.publication-viewport{--logo-width:clamp(292px,28vw,350px);--logo-gap:1rem;position:relative;padding:12px 4px 18px;margin-inline:-4px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 2%,black 98%,transparent)}
html[dir="rtl"] .publication-viewport{mask-image:linear-gradient(270deg,transparent,black 2%,black 98%,transparent)}
.publication-track{gap:var(--logo-gap);padding:4px 0 14px;animation-duration:var(--marquee-duration,120s)}
.publication-set{display:flex;align-items:stretch;gap:var(--logo-gap);margin:0;padding:0;list-style:none}
.publication-tile{display:flex;flex:0 0 var(--logo-width);width:var(--logo-width);min-width:0}
.publication-card-link{display:block;width:100%;height:100%;color:inherit;text-decoration:none;border-radius:17px;touch-action:pan-y}
.publication-card-link:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:4px}
.publication-card{--accent:linear-gradient(110deg,#42d6ac,#69b5fa);position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-height:296px;height:100%;padding:18px 18px 16px;overflow:hidden;border:1px solid rgba(145,198,214,.19);border-radius:17px;background:linear-gradient(145deg,rgba(17,40,57,.98),rgba(11,26,40,.97));box-shadow:0 10px 26px rgba(0,0,0,.17);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.publication-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent);opacity:.88}
.publication-card::after{content:"";position:absolute;inset-inline-end:-44px;top:42px;width:118px;height:118px;border:1px solid rgba(139,195,215,.08);border-radius:50%;box-shadow:0 0 0 17px rgba(139,195,215,.025),0 0 0 34px rgba(139,195,215,.018);pointer-events:none}
.publication-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:15px}
.publication-card-kind{display:flex;align-items:center;gap:7px;color:var(--color-primary-light);font-size:.78rem;font-weight:730}
.publication-card-kind i{font-size:.8rem}
.publication-card-year{color:var(--color-text-soft);font-size:.77rem;font-variant-numeric:tabular-nums}
.publication-card h4{position:relative;z-index:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:4.75rem;margin:0 0 9px;color:var(--color-text);font-size:1.02rem;line-height:1.65;font-weight:760;text-wrap:pretty}
.publication-card-teaser{position:relative;z-index:1;margin:0;color:var(--color-text-soft);font-size:.88rem;line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.publication-card-meta{position:relative;z-index:1;display:grid;gap:4px;margin-top:auto;padding-top:12px;color:var(--color-text-soft);font-size:.75rem;line-height:1.55;border-top:1px solid rgba(175,209,220,.1)}
.publication-card-authors{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;opacity:.84}
.publication-card-action{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:12px;color:var(--color-primary-light);font-size:.82rem;font-weight:720}
.publication-card-action i{font-size:.75rem;transition:transform .2s ease}
html[dir="rtl"] .publication-card-action i{transform:rotate(180deg)}
.publication-card-link:hover .publication-card{transform:translateY(-4px);border-color:rgba(87,224,184,.46);box-shadow:0 17px 34px rgba(0,0,0,.24),0 0 22px rgba(54,202,155,.07)}
.publication-card-link:hover .publication-card-action i{transform:translate(3px,-2px)}
html[dir="rtl"] .publication-card-link:hover .publication-card-action i{transform:rotate(180deg) translate(3px,-2px)}
.paper-publication-card{--accent:linear-gradient(110deg,#69b5fa,#8ce0c0)}
.publication-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0 .35rem}
.publication-search{display:flex;align-items:center;gap:.65rem;width:min(100%,360px);min-height:42px;padding:0 13px;border:1px solid rgba(153,194,207,.19);border-radius:12px;color:var(--color-text-soft);background:rgba(117,161,178,.06)}
.publication-search:focus-within{border-color:var(--color-primary-light);box-shadow:0 0 0 3px rgba(61,206,156,.09)}
.publication-search input{width:100%;min-width:0;border:0;outline:0;color:var(--color-text);background:transparent;font:inherit;font-size:.88rem}
.publication-search input::placeholder{color:var(--color-text-soft);opacity:.8}
.publication-filters{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap}
.publication-filter{padding:.45rem .75rem;border:1px solid rgba(153,194,207,.17);border-radius:999px;color:var(--color-text-soft);background:rgba(117,161,178,.05);font:inherit;font-size:.82rem;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.publication-filter:hover,.publication-filter.is-active{border-color:rgba(77,219,170,.42);color:var(--color-text);background:rgba(53,184,135,.13)}
.publication-count{min-width:54px;color:var(--color-text-soft);font-size:.76rem;text-align:end}
.publication-track.is-filtered{animation-play-state:paused}
.publication-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--color-text-soft);text-align:center;pointer-events:none}
.publication-empty[hidden]{display:none}
html.light-theme .publication-card{border-color:rgba(23,65,83,.13);background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(239,248,249,.98));box-shadow:0 10px 25px rgba(25,59,75,.1)}
html.light-theme .publication-card-meta{border-color:rgba(29,72,91,.12)}
html.light-theme .publication-search,html.light-theme .publication-filter{border-color:rgba(29,72,91,.15);background:rgba(34,104,128,.045)}
html.light-theme .publication-filter.is-active,html.light-theme .publication-filter:hover{background:rgba(31,165,118,.1)}
.experience-logo-track:has(.publication-card-link:hover),.experience-logo-track:has(.publication-card-link:focus-visible){animation-play-state:paused}
@media(max-width:760px){
 .works-publication-group{margin-top:1.8rem}
 .publication-viewport{--logo-width:clamp(276px,83vw,340px);--logo-gap:.82rem;padding-top:9px}
 .publication-card{min-height:286px;padding:16px;border-radius:15px}
 .publication-card h4{font-size:.98rem;min-height:4.55rem}
 .publication-card-teaser{font-size:.86rem}
 .publication-tools{align-items:stretch;flex-direction:column;gap:.7rem;margin-top:.8rem}
 .publication-search{width:auto}
 .publication-filters{justify-content:flex-start}
 .publication-filter{font-size:.78rem;padding:.4rem .65rem}
 .publication-count{margin-inline-start:auto}
}
@media(prefers-reduced-motion:reduce){.publication-track{animation:none;transform:translateX(-50%)}.publication-card,.publication-card-action i{transition:none}}
.publication-card-venue{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.74rem;line-height:1.55;opacity:.87}
.publication-card-meta{gap:3px}
@media(max-width:760px){.publication-card-venue{font-size:.73rem}}

/* Match other publication rails: stop while a card area is hovered or focused. */
.publication-viewport:hover .publication-track,.publication-viewport:has(:focus-visible) .publication-track{animation-play-state:paused!important}

/* Keep every moving row still for the full time the pointer remains over it. */
.experience-logo-viewport:hover .experience-logo-track,.experience-logo-viewport:has(:focus-visible) .experience-logo-track,.works-viewport:hover .experience-logo-track,.works-viewport:has(:focus-visible) .experience-logo-track{animation-play-state:paused!important}

/* Field journal: weekly assessment visits, appearances and media stories. */
.media-journal-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 83% 9%,rgba(32,193,147,.08),transparent 28%),radial-gradient(ellipse at 8% 55%,rgba(76,154,236,.055),transparent 25%),linear-gradient(180deg,rgba(6,19,32,.1),rgba(13,32,47,.32))}
.media-journal-section::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.14;background-image:linear-gradient(rgba(172,212,221,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(172,212,221,.08) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,black,transparent 73%)}
.media-section-header{max-width:none;margin-inline:0;text-align:start}
.media-section-header .section-subtitle{max-width:700px;margin-inline:0}
.media-journal-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;min-height:360px;overflow:hidden;border:1px solid rgba(142,194,207,.18);border-radius:28px;background:linear-gradient(115deg,rgba(12,31,46,.97),rgba(11,28,43,.84));box-shadow:0 25px 70px rgba(0,0,0,.22)}
.media-journal-hero::before{content:"";position:absolute;z-index:0;inset-inline-start:34%;top:-170px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(48,210,163,.08),transparent 70%);pointer-events:none}
.media-journal-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,4.5vw,58px)}
.media-journal-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--color-primary-light);font-size:.82rem;font-weight:750;letter-spacing:.02em}
.media-journal-kicker i{font-size:.9rem}
.media-journal-copy h3{max-width:580px;margin:17px 0 12px;color:var(--color-text);font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.42;font-weight:790;letter-spacing:-.025em;text-wrap:balance}
.media-journal-copy>p{max-width:560px;margin:0;color:var(--color-text-soft);font-size:.98rem;line-height:1.95}
.media-journal-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.media-journal-topics span{padding:6px 10px;border:1px solid rgba(152,203,215,.16);border-radius:999px;color:#d0e2e9;background:rgba(160,213,224,.045);font-size:.77rem}
.media-journal-cta{display:inline-flex;align-items:center;gap:11px;margin-top:24px;padding:10px 15px;border:1px solid rgba(91,221,183,.36);border-radius:12px;color:var(--color-primary-light);background:rgba(51,202,151,.09);font-size:.87rem;font-weight:720;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.media-journal-cta:hover{transform:translateY(-2px);border-color:rgba(91,221,183,.65);background:rgba(51,202,151,.15)}
.media-journal-cta i{font-size:.74rem}
.media-map-art{position:relative;display:grid;place-items:center;min-height:340px;padding:16px;overflow:hidden;direction:ltr}
.media-map-art svg{display:block;width:100%;max-height:390px;border:1px solid rgba(160,216,224,.1);border-radius:24px;box-shadow:0 16px 42px rgba(0,0,0,.25)}
.media-map-caption{position:absolute;inset-inline-end:30px;bottom:28px;display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(185,220,225,.13);border-radius:9px;color:rgba(221,239,240,.75);background:rgba(7,19,30,.76);font-size:.68rem;backdrop-filter:blur(8px)}
.media-map-caption i{color:var(--color-primary-light)}
.media-archive{margin-top:clamp(44px,6vw,70px);scroll-margin-top:100px}
.media-archive-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:20px}
.media-archive-label{color:var(--color-primary-light);font-size:.68rem;font-weight:760;letter-spacing:.16em;text-transform:uppercase}
.media-archive-heading h3{margin:5px 0;color:var(--color-text);font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:760}
.media-archive-heading p{margin:0;color:var(--color-text-soft);font-size:.9rem;line-height:1.8}
.media-archive-mark{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid rgba(71,215,174,.25);border-radius:15px;color:var(--color-primary-light);background:rgba(58,205,157,.08);font-size:1rem}
.media-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:18px 0}
.media-search{display:flex;align-items:center;gap:10px;width:min(100%,360px);min-height:43px;padding:0 13px;border:1px solid rgba(153,194,207,.2);border-radius:12px;color:var(--color-text-muted);background:rgba(117,161,178,.055)}
.media-search:focus-within{border-color:var(--color-primary-light);box-shadow:0 0 0 3px rgba(61,206,156,.09)}
.media-search input{width:100%;min-width:0;border:0;outline:0;color:var(--color-text);background:transparent;font:inherit;font-size:.87rem}
.media-search input::placeholder{color:var(--color-text-muted)}
.media-filters{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px}
.media-filter{padding:7px 11px;border:1px solid rgba(153,194,207,.16);border-radius:999px;color:var(--color-text-soft);background:rgba(117,161,178,.04);font:inherit;font-size:.78rem;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.media-filter:hover,.media-filter.is-active{border-color:rgba(77,219,170,.42);color:var(--color-text);background:rgba(53,184,135,.13)}
.media-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.media-story-card{min-width:0;overflow:hidden;border:1px solid rgba(143,192,206,.17);border-radius:19px;background:linear-gradient(145deg,rgba(17,39,55,.94),rgba(10,26,40,.96));box-shadow:0 12px 32px rgba(0,0,0,.15);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.media-story-card:hover{transform:translateY(-4px);border-color:rgba(76,216,174,.4);box-shadow:0 18px 40px rgba(0,0,0,.23)}
.media-story-button{display:flex;width:100%;height:100%;flex-direction:column;padding:0;border:0;color:inherit;background:transparent;text-align:inherit;font:inherit;cursor:pointer}
.media-story-button:focus-visible{outline-offset:-4px;border-radius:18px}
.media-card-image{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#0d2938,#12253a)}
.media-card-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.media-story-card:hover .media-card-image>img{transform:scale(1.035)}
.media-card-no-image{display:grid;place-items:center;width:100%;height:100%;color:rgba(124,221,192,.65);background:radial-gradient(circle at 65% 35%,rgba(54,205,157,.19),transparent 29%),linear-gradient(140deg,#0d2938,#12253a);font-size:2.2rem}
.media-card-type{position:absolute;inset-inline-start:13px;top:13px;padding:6px 9px;border:1px solid rgba(226,249,245,.2);border-radius:999px;color:#e4f6f3;background:rgba(5,19,30,.62);font-size:.72rem;font-weight:700;backdrop-filter:blur(9px)}
.media-card-image-count{position:absolute;inset-inline-end:13px;bottom:13px;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:9px;color:#f0f8fb;background:rgba(5,19,30,.64);font-size:.72rem}
.media-card-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:17px 17px 15px}
.media-card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-bottom:10px;color:var(--color-text-muted);font-size:.72rem}
.media-card-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-card-content>strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:3.1rem;color:var(--color-text);font-size:1.04rem;line-height:1.55;font-weight:740}
.media-card-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:8px;color:var(--color-text-soft);font-size:.86rem;line-height:1.75}
.media-card-open{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:auto;padding-top:13px;color:var(--color-primary-light);font-size:.8rem;font-weight:720}
.media-empty{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);align-items:center;gap:8px 28px;min-height:230px;padding:clamp(22px,3.3vw,38px);border:1px dashed rgba(125,190,204,.28);border-radius:22px;background:linear-gradient(125deg,rgba(20,48,64,.72),rgba(12,29,44,.72))}
.media-empty[hidden],.media-controls[hidden],.media-no-results[hidden]{display:none}
.media-empty-icon{position:relative;display:grid;place-items:center;width:clamp(112px,15vw,164px);aspect-ratio:1;justify-self:center;border:1px solid rgba(98,223,183,.24);border-radius:34% 66% 58% 42% / 41% 38% 62% 59%;color:rgba(112,228,192,.88);background:radial-gradient(circle at 65% 30%,rgba(89,216,180,.22),transparent 38%),linear-gradient(145deg,rgba(36,93,101,.23),rgba(16,37,55,.68));font-size:2.5rem;box-shadow:inset 0 0 32px rgba(63,206,163,.06),0 16px 36px rgba(0,0,0,.14);animation:media-orbit 13s ease-in-out infinite alternate}
.media-empty-icon span{position:absolute;width:12px;height:12px;top:14%;inset-inline-end:12%;border-radius:50%;background:#71ebc4;box-shadow:0 0 18px rgba(99,233,192,.75)}
@keyframes media-orbit{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.media-empty-kicker{color:var(--color-primary-light);font-size:.66rem;font-weight:750;letter-spacing:.19em}
.media-empty-copy h4{margin:7px 0 8px;color:var(--color-text);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:750}
.media-empty-copy p{max-width:650px;margin:0;color:var(--color-text-soft);font-size:.91rem;line-height:1.9}
.media-empty-fields{grid-column:2;display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.media-empty-fields span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(147,196,207,.14);border-radius:9px;color:var(--color-text-soft);background:rgba(136,191,203,.045);font-size:.73rem}
.media-empty-fields i{color:var(--color-primary-light);font-size:.73rem}
.media-no-results{padding:44px 15px;border:1px solid var(--color-border);border-radius:18px;color:var(--color-text-soft);text-align:center;background:rgba(112,169,183,.035)}
.media-story-principles{display:grid;grid-template-columns:1.45fr repeat(4,minmax(0,1fr));gap:10px;margin-top:31px;padding-top:23px;border-top:1px solid rgba(142,192,205,.14)}
.media-principle-title{padding-inline-end:12px}
.media-principle-title>span{color:var(--color-text);font-size:.96rem;font-weight:740}
.media-principle-title p{margin:5px 0 0;color:var(--color-text-muted);font-size:.77rem;line-height:1.65}
.media-principle{display:flex;align-items:center;gap:9px;min-height:48px;padding:8px 10px;border:1px solid rgba(145,192,205,.12);border-radius:12px;background:rgba(123,179,190,.035)}
.media-principle b{color:var(--color-primary-light);font-size:.69rem;letter-spacing:.08em}
.media-principle span{color:var(--color-text-soft);font-size:.76rem;line-height:1.5}
.media-future-note{display:flex;align-items:center;gap:9px;margin:18px 0 0;color:var(--color-text-muted);font-size:.82rem;line-height:1.7}
.media-future-note i{color:var(--color-primary-light)}
.media-story-dialog{box-sizing:border-box;width:min(92vw,940px);max-width:none;max-height:90vh;padding:clamp(18px,3vw,32px);overflow:auto;border:1px solid rgba(143,199,209,.24);border-radius:22px;color:var(--color-text);background:linear-gradient(150deg,#10293b,#091a2a);box-shadow:0 28px 95px rgba(0,0,0,.58)}
.media-story-dialog[open]{display:grid;gap:13px}
.media-story-dialog::backdrop{background:rgba(3,12,21,.76);backdrop-filter:blur(8px)}
.media-dialog-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.media-dialog-kicker{color:var(--color-primary-light);font-size:.75rem;font-weight:740}
.media-dialog-top h3{margin:5px 0 0;font-size:clamp(1.25rem,2.8vw,1.8rem);line-height:1.55}
.media-dialog-close{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid rgba(201,225,231,.19);border-radius:50%;color:var(--color-text);background:rgba(255,255,255,.045);font-size:1rem;cursor:pointer}
.media-dialog-meta{color:var(--color-text-muted);font-size:.83rem;line-height:1.8}
.media-dialog-summary,.media-dialog-body{margin:0;color:var(--color-text-soft);font-size:.95rem;line-height:1.9;white-space:pre-line}
.media-dialog-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.media-dialog-gallery img{display:block;width:100%;max-height:440px;aspect-ratio:16/10;object-fit:cover;border-radius:13px;background:rgba(255,255,255,.04)}
body.light-theme .media-journal-section{background:radial-gradient(ellipse at 83% 9%,rgba(32,193,147,.055),transparent 28%),radial-gradient(ellipse at 8% 55%,rgba(76,154,236,.035),transparent 25%),linear-gradient(180deg,rgba(255,255,255,.15),rgba(226,240,243,.5))}
body.light-theme .media-journal-section::before{opacity:.12;background-image:linear-gradient(rgba(31,82,102,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(31,82,102,.12) 1px,transparent 1px)}
body.light-theme .media-journal-hero{border-color:rgba(24,71,90,.15);background:linear-gradient(115deg,#fff,rgba(239,248,249,.97));box-shadow:0 22px 56px rgba(23,57,72,.11)}
body.light-theme .media-journal-topics span{border-color:rgba(34,91,106,.13);color:#36586a;background:rgba(34,91,106,.04)}
body.light-theme .media-story-card{border-color:rgba(24,71,90,.14);background:linear-gradient(145deg,#fff,#f5fafb);box-shadow:0 10px 27px rgba(23,57,72,.09)}
body.light-theme .media-empty{border-color:rgba(31,109,102,.25);background:linear-gradient(125deg,rgba(255,255,255,.88),rgba(228,242,241,.78))}
body.light-theme .media-empty-fields span,body.light-theme .media-principle{border-color:rgba(24,71,90,.12);background:rgba(36,99,110,.035)}
body.light-theme .media-story-dialog{border-color:rgba(24,71,90,.17);background:linear-gradient(150deg,#fff,#eaf3f6);box-shadow:0 28px 90px rgba(23,57,72,.28)}
body.light-theme .media-dialog-close{border-color:rgba(24,71,90,.15);background:rgba(24,71,90,.04)}
@media(max-width:980px){.media-journal-hero{grid-template-columns:minmax(0,1fr) minmax(0,.88fr)}.media-stories{grid-template-columns:repeat(2,minmax(0,1fr))}.media-story-principles{grid-template-columns:repeat(4,minmax(0,1fr))}.media-principle-title{grid-column:1/-1;padding:0 0 7px}}
@media(max-width:700px){
 .media-journal-section{padding-block:48px!important}
 .media-section-header{margin-bottom:22px}
 .media-journal-hero{grid-template-columns:minmax(0,1fr);border-radius:21px}
 .media-journal-copy{padding:25px 21px 12px}
 .media-journal-copy h3{margin-top:13px;font-size:1.56rem}
 .media-journal-copy>p{font-size:.9rem;line-height:1.85}
 .media-journal-topics{gap:6px;margin-top:15px}
 .media-journal-topics span{padding:5px 8px;font-size:.69rem}
 .media-journal-cta{margin-top:17px}
 .media-map-art{min-height:230px;padding:8px 10px 15px}
 .media-map-art svg{max-height:255px;border-radius:16px}
 .media-map-caption{inset-inline-end:18px;bottom:22px;font-size:.59rem}
 .media-archive{margin-top:39px;scroll-margin-top:80px}
 .media-archive-heading{align-items:flex-start;margin-bottom:14px}
 .media-archive-heading h3{font-size:1.3rem}
 .media-archive-heading p{max-width:270px;font-size:.79rem}
 .media-archive-mark{width:40px;height:40px;border-radius:12px}
 .media-controls{align-items:stretch;flex-direction:column}
 .media-search{width:auto}
 .media-filters{justify-content:flex-start}
 .media-filter{padding:6px 9px;font-size:.73rem}
 .media-stories{grid-template-columns:minmax(0,1fr);gap:13px}
 .media-story-card{border-radius:16px}
 .media-card-image{aspect-ratio:16/9}
 .media-card-content{padding:15px}
 .media-card-content>strong{min-height:0}
 .media-empty{grid-template-columns:minmax(0,1fr);gap:17px;padding:22px 17px;border-radius:18px;text-align:center}
 .media-empty-icon{width:93px;grid-row:1}
 .media-empty-copy{grid-row:2}
 .media-empty-copy h4{font-size:1.16rem}
 .media-empty-copy p{font-size:.83rem;line-height:1.8}
 .media-empty-fields{grid-column:1;justify-content:center;margin-top:0}
 .media-empty-fields span{font-size:.68rem}
 .media-story-principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:23px;padding-top:17px}
 .media-principle-title{grid-column:1/-1;padding-bottom:4px}
 .media-principle{min-height:43px;padding:7px}
 .media-principle span{font-size:.71rem}
 .media-future-note{align-items:flex-start;margin-top:15px;font-size:.76rem}
 .media-story-dialog{width:95vw;max-height:88vh;padding:16px;border-radius:18px}
 .media-dialog-gallery{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.media-empty-icon,.media-story-card,.media-story-card img,.media-journal-cta{animation:none;transition:none}}

/* Contact: a personal, action-first closing section. */
.contact-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 88% 20%,rgba(45,201,155,.075),transparent 27%),radial-gradient(ellipse at 8% 76%,rgba(83,151,236,.055),transparent 29%),linear-gradient(180deg,rgba(8,21,35,.18),rgba(13,31,46,.46))}
.contact-section::before{position:absolute;z-index:-1;inset:0;content:"";opacity:.11;background-image:radial-gradient(rgba(150,195,206,.54) .7px,transparent .7px);background-size:24px 24px;mask-image:linear-gradient(110deg,transparent 15%,black 90%)}
.contact-section-header{max-width:none;margin-inline:0;text-align:start}
.contact-section-header .section-subtitle{max-width:760px;margin-inline:0}
.contact-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,.62fr);align-items:center;gap:24px;min-height:330px;padding:clamp(25px,4.5vw,52px);overflow:hidden;border:1px solid rgba(144,191,206,.18);border-radius:28px;background:linear-gradient(118deg,rgba(14,34,51,.97),rgba(9,25,40,.92));box-shadow:0 24px 66px rgba(0,0,0,.2)}
.contact-hero::before{position:absolute;inset-inline-end:24%;top:-220px;width:500px;height:500px;border-radius:50%;content:"";pointer-events:none;background:radial-gradient(circle,rgba(38,202,151,.12),rgba(70,145,221,.035) 47%,transparent 70%)}
.contact-hero-copy{position:relative;z-index:1;max-width:650px}
.contact-hero-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--color-primary-light);font-size:.84rem;font-weight:730}
.contact-hero-kicker i{font-size:.88rem}
.contact-hero-copy h3{margin:16px 0 10px;color:var(--color-text);font-size:clamp(1.65rem,3.2vw,2.42rem);line-height:1.42;font-weight:790;letter-spacing:-.025em;text-wrap:balance}
.contact-hero-copy>p{max-width:550px;margin:0;color:var(--color-text-soft);font-size:.96rem;line-height:1.9}
.contact-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.contact-primary-action,.contact-secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:0 15px;border-radius:12px;text-decoration:none;font-size:.85rem;font-weight:720;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.contact-primary-action{border:1px solid rgba(95,230,188,.55);color:#071e1b;background:linear-gradient(120deg,#5ce1b2,#7de6d1);box-shadow:0 8px 25px rgba(32,195,143,.15)}
.contact-primary-action:hover,.contact-secondary-action:hover{transform:translateY(-2px)}
.contact-primary-action:hover{box-shadow:0 11px 29px rgba(32,195,143,.26)}
.contact-action-arrow{margin-inline-start:3px;font-size:.7rem;opacity:.75}
.contact-secondary-action{border:1px solid rgba(154,195,207,.2);color:var(--color-text);background:rgba(153,194,207,.055)}
.contact-secondary-action:hover{border-color:rgba(99,220,182,.42);background:rgba(57,197,150,.1)}
.contact-secondary-action i{color:var(--color-primary-light)}
.contact-portrait-panel{position:relative;display:flex;align-items:center;justify-content:center;min-height:265px;isolation:isolate}
.contact-portrait-panel::before{position:absolute;z-index:-1;width:255px;height:255px;border-radius:50%;content:"";background:radial-gradient(circle,rgba(55,213,166,.17),rgba(83,163,223,.065) 48%,transparent 72%)}
.contact-portrait-panel img{display:block;width:clamp(170px,20vw,232px);height:clamp(198px,23vw,270px);object-fit:cover;object-position:50% 19%;border:1px solid rgba(174,225,222,.42);border-radius:46% 46% 24px 24px;box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 34px rgba(47,204,161,.13)}
.contact-portrait-caption{position:absolute;inset-inline-start:50%;bottom:0;display:flex;flex-direction:column;gap:4px;width:max-content;max-width:94%;padding:10px 15px;border:1px solid rgba(173,214,219,.2);border-radius:12px;transform:translateX(-50%);color:#f2fbfb;background:rgba(7,21,33,.85);box-shadow:0 9px 30px rgba(0,0,0,.2);text-align:center;backdrop-filter:blur(12px)}
.contact-portrait-caption span{color:#b2d0d8;font-size:.66rem}
.contact-portrait-caption strong{font-size:.84rem;font-weight:730}
.contact-orbit{position:absolute;z-index:-1;left:50%;top:48%;border:1px solid rgba(117,206,204,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg)}
.contact-orbit-one{width:290px;height:176px}
.contact-orbit-two{width:290px;height:176px;transform:translate(-50%,-50%) rotate(35deg);border-color:rgba(91,209,175,.17)}
.contact-portrait-spark{position:absolute;width:8px;height:8px;border:2px solid rgba(190,255,234,.95);border-radius:50%;background:#44d8a8;box-shadow:0 0 17px rgba(80,233,185,.76)}
.contact-spark-one{top:15%;inset-inline-end:17%}
.contact-spark-two{bottom:23%;inset-inline-start:11%;width:6px;height:6px}
.contact-details-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:clamp(37px,5vw,55px) 0 17px}
.contact-details-overline{color:var(--color-primary-light);font-size:.68rem;font-weight:760;letter-spacing:.15em;text-transform:uppercase}
.contact-details-heading h3{margin:5px 0 0;color:var(--color-text);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:750}
.contact-details-note{display:flex;align-items:center;gap:7px;color:var(--color-text-muted);font-size:.75rem}
.contact-details-note i{color:var(--color-primary-light)}
.contact-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.contact-method{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:83px;padding:13px 14px;border:1px solid rgba(142,190,205,.15);border-radius:16px;color:inherit;background:linear-gradient(145deg,rgba(17,39,57,.91),rgba(10,26,41,.94));text-decoration:none;box-shadow:0 9px 24px rgba(0,0,0,.1);transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.contact-method:hover{transform:translateY(-3px);border-color:rgba(73,219,171,.43);background:linear-gradient(145deg,rgba(19,49,63,.98),rgba(11,31,45,.98));box-shadow:0 14px 29px rgba(0,0,0,.17)}
.contact-method-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid rgba(74,218,168,.24);border-radius:13px;color:#7de9c6;background:rgba(51,197,147,.09);font-size:1rem}
.contact-icon-blue{border-color:rgba(91,169,255,.25);color:#82c3ff;background:rgba(72,143,226,.1)}
.contact-icon-gold{border-color:rgba(233,190,112,.28);color:#efd292;background:rgba(218,166,77,.1)}
.contact-icon-pink{border-color:rgba(241,136,184,.24);color:#ffa8cf;background:rgba(222,92,157,.1)}
.contact-method-copy{display:flex;min-width:0;flex-direction:column;gap:5px}
.contact-method-copy small{color:var(--color-text-muted);font-size:.7rem}
.contact-method-copy strong{overflow:hidden;color:var(--color-text);font-size:.84rem;font-weight:680;text-overflow:ellipsis;white-space:nowrap}
.contact-method-copy strong[dir="ltr"]{font-family:Arial,sans-serif;letter-spacing:.005em}
.contact-method-arrow{margin-inline-start:auto;flex:none;color:var(--color-primary-light);font-size:.72rem;opacity:.7;transition:transform .2s ease,opacity .2s ease}
.contact-method:hover .contact-method-arrow{transform:translate(2px,-2px);opacity:1}
.contact-social .contact-method-copy strong{font-size:.82rem}
.site-footer{position:relative;padding:24px 0 28px;border-top:1px solid var(--color-border);background:rgba(0,0,0,.12)}
.site-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-footer-brand{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.site-footer-brand strong{color:var(--color-text);font-size:.88rem;font-weight:740}
.site-footer-brand span,.site-footer-copy{color:var(--color-text-muted);font-size:.69rem}
.site-footer-nav{display:flex;align-items:center;flex-wrap:wrap;gap:15px}
.site-footer-nav a{color:var(--color-text-soft);font-size:.75rem;text-decoration:none;transition:color .2s ease}
.site-footer-nav a:hover{color:var(--color-primary-light)}
body.light-theme .contact-section{background:radial-gradient(ellipse at 88% 20%,rgba(24,139,105,.07),transparent 27%),radial-gradient(ellipse at 8% 76%,rgba(83,151,236,.04),transparent 29%),linear-gradient(180deg,rgba(255,255,255,.2),rgba(224,239,241,.58))}
body.light-theme .contact-section::before{opacity:.1;background-image:radial-gradient(rgba(50,91,109,.52) .7px,transparent .7px)}
body.light-theme .contact-hero{border-color:rgba(31,75,91,.15);background:linear-gradient(118deg,#fff,rgba(240,248,249,.96));box-shadow:0 23px 55px rgba(22,60,76,.11)}
body.light-theme .contact-primary-action{color:#06261d}
body.light-theme .contact-secondary-action{border-color:rgba(31,75,91,.14);color:var(--color-text);background:rgba(31,75,91,.04)}
body.light-theme .contact-secondary-action:hover{background:rgba(39,150,113,.08)}
body.light-theme .contact-portrait-caption{border-color:rgba(26,73,91,.16);color:#173247;background:rgba(255,255,255,.89);box-shadow:0 8px 25px rgba(22,60,76,.12)}
body.light-theme .contact-portrait-caption span{color:#587083}
body.light-theme .contact-orbit{border-color:rgba(43,139,144,.24)}
body.light-theme .contact-orbit-two{border-color:rgba(48,156,123,.2)}
body.light-theme .contact-method{border-color:rgba(30,76,94,.13);background:linear-gradient(145deg,#fff,#f3f8fa);box-shadow:0 8px 20px rgba(28,65,80,.065)}
body.light-theme .contact-method:hover{border-color:rgba(24,145,105,.37);background:linear-gradient(145deg,#fff,#eef8f5);box-shadow:0 13px 25px rgba(28,65,80,.1)}
@media(max-width:900px){.contact-hero{grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);gap:10px}.contact-methods{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-social:last-child{grid-column:span 1}}
@media(max-width:650px){.contact-section{padding-block:48px!important}.contact-section-header{margin-bottom:22px}.contact-hero{grid-template-columns:minmax(0,1fr);gap:0;padding:23px 20px 16px;border-radius:21px}.contact-hero-copy h3{margin-top:13px;font-size:1.55rem}.contact-hero-copy>p{font-size:.88rem;line-height:1.82}.contact-hero-actions{gap:8px;margin-top:18px}.contact-primary-action,.contact-secondary-action{min-height:42px;padding-inline:12px;font-size:.79rem}.contact-portrait-panel{min-height:230px;margin-top:11px}.contact-portrait-panel img{width:160px;height:190px}.contact-portrait-panel::before{width:205px;height:205px}.contact-orbit-one,.contact-orbit-two{width:225px;height:142px}.contact-portrait-caption{bottom:0;padding:8px 12px}.contact-portrait-caption span{font-size:.61rem}.contact-portrait-caption strong{font-size:.76rem}.contact-details-heading{align-items:flex-start;margin-top:34px}.contact-details-heading h3{max-width:255px;font-size:1.16rem}.contact-details-note{max-width:130px;align-items:flex-start;font-size:.65rem;line-height:1.55}.contact-methods{grid-template-columns:minmax(0,1fr);gap:9px}.contact-method{min-height:72px;padding:11px 12px;border-radius:14px}.contact-method-icon{width:39px;height:39px;border-radius:12px}.contact-method-copy strong{font-size:.82rem}.contact-social .contact-method-copy strong{font-size:.8rem}.site-footer{padding:21px 0}.site-footer-inner{align-items:flex-start;flex-direction:column;gap:13px}.site-footer-nav{gap:13px}.site-footer-brand strong{font-size:.84rem}}
@media(prefers-reduced-motion:reduce){.contact-primary-action,.contact-secondary-action,.contact-method,.contact-method-arrow{transition:none}}

/* Compact footer contact directory, including the channels shared for publication. */
.site-footer-inner{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(340px,1.35fr);align-items:start;gap:18px 28px}
.site-footer-about>p{max-width:330px;margin:8px 0 0;color:var(--color-text-muted);font-size:.7rem;line-height:1.75}
.site-footer-nav{align-self:center;gap:12px}
.site-footer-contact>strong{display:block;margin:0 0 9px;color:var(--color-text);font-size:.76rem;font-weight:730}
.site-footer-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}
.site-footer-contact-grid a{display:flex;align-items:center;gap:7px;min-width:0;color:var(--color-text-soft);font-size:.66rem;line-height:1.5;text-decoration:none;transition:color .18s ease}
.site-footer-contact-grid a:hover{color:var(--color-primary-light)}
.site-footer-contact-grid a i{width:13px;flex:none;color:var(--color-primary-light);text-align:center}
.site-footer-contact-grid a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-footer-contact-grid a span[dir="ltr"]{font-family:Arial,sans-serif}
.site-footer-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--color-border)}
.site-footer-bottom span,.site-footer-bottom a{color:var(--color-text-muted);font-size:.68rem}
.site-footer-bottom a{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.site-footer-bottom a:hover{color:var(--color-primary-light)}
@media(max-width:900px){.site-footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px}.site-footer-nav{grid-row:2;align-self:start}.site-footer-contact{grid-column:2;grid-row:1/3}.site-footer-bottom{grid-row:3}}
@media(max-width:560px){.site-footer-inner{grid-template-columns:minmax(0,1fr);gap:16px}.site-footer-about,.site-footer-nav,.site-footer-contact,.site-footer-bottom{grid-column:1;grid-row:auto}.site-footer-nav{gap:15px}.site-footer-contact-grid{gap:8px 10px}.site-footer-contact-grid a{font-size:.64rem}.site-footer-bottom{margin-top:2px}}