/* =========================================================
   01. ROOT & GLOBAL
   ========================================================= */

:root {
    --primary-green: #0E3B36;
    --secondary-white: #FAF8F5;
    --accent-coral: #FF6F4C;
    --text-dark: #10241F;
    --text-gray: #6B7280;
    --border-gray: #E5E7EB;

    --white: #FFFFFF;
    --shadow-soft: 0 4px 18px rgba(16, 36, 31, 0.08);
    --shadow-medium: 0 8px 24px rgba(16, 36, 31, 0.12);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
}


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

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

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

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: var(--text-dark);
    background-color: var(--secondary-white);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   03. NAVBAR
   ========================================================= */

.navbar-custom {
    position: sticky;
    top: 0;
    z-index: 1030;

    background-color: rgba(250, 248, 245, 0.96);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);

    padding: 1rem 0;

    transition:
        background-color var(--transition-base),
        box-shadow var(--transition-base),
        padding var(--transition-base),
        border-color var(--transition-base);
}

/* État après scroll */
.navbar-custom.scrolled {
    background-color: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 0.7rem 0;
    box-shadow: var(--shadow-soft);
    border-bottom-color: rgba(229, 231, 235, 0.95);
}


/* =========================================================
   04. BRAND / LOGO
   ========================================================= */

.navbar-brand-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;
    padding: 0.5rem 1rem;

    background-color: var(--primary-green);
    color: var(--secondary-white) !important;

    border-radius: 8px;

    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.navbar-brand-custom:hover {
    color: var(--secondary-white) !important;
    background-color: #0a2e2a;

    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 59, 54, 0.22);
}

.navbar-brand-custom:focus-visible {
    outline: 3px solid rgba(255, 111, 76, 0.35);
    outline-offset: 4px;
}

.brand-text {
    letter-spacing: -0.03em;
}


/* =========================================================
   05. NAVIGATION LINKS
   ========================================================= */

.nav-link-custom {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 0.5rem 0 !important;

    color: var(--text-dark) !important;

    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

/* Ligne animée sous le lien */
.nav-link-custom::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -3px;

    width: 0;
    height: 2px;

    background-color: var(--accent-coral);
    border-radius: 999px;

    transition: width var(--transition-base);
}

.nav-link-custom:hover {
    color: var(--primary-green) !important;
}

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

/* Active */
.nav-link-custom.active {
    color: var(--primary-green) !important;
    font-weight: 600;
}

.nav-link-custom.active::after {
    width: 100%;
    background-color: var(--primary-green);
}

/* Focus clavier */
.nav-link-custom:focus-visible {
    outline: none;
    color: var(--primary-green) !important;
}

.nav-link-custom:focus-visible::after {
    width: 100%;
    background-color: var(--accent-coral);
}


/* =========================================================
   06. WHATSAPP BUTTON
   ========================================================= */

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: 0.55rem 1.15rem;

    background-color: var(--accent-coral);
    color: var(--white) !important;

    border: 0;
    border-radius: 999px;

    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-whatsapp:hover {
    background-color: #e65d3f;
    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 111, 76, 0.25);
}

.btn-whatsapp:active {
    transform: translateY(0);
    box-shadow:
        0 4px 10px rgba(255, 111, 76, 0.18);
}

.btn-whatsapp:focus-visible {
    outline: 3px solid rgba(255, 111, 76, 0.3);
    outline-offset: 3px;
}

.btn-whatsapp i {
    font-size: 1rem;
}


/* =========================================================
   07. HAMBURGER / TOGGLER
   ========================================================= */

.navbar-toggler-custom {
    border: 0;
    padding: 0.35rem 0.5rem;

    background: transparent;

    transition: transform var(--transition-fast);
}

.navbar-toggler-custom:hover {
    transform: scale(1.04);
}

.navbar-toggler-custom:focus {
    box-shadow: none;
    outline: 2px solid var(--primary-green);
    outline-offset: 3px;
}

.navbar-toggler-custom .navbar-toggler-icon {
    width: 1.6rem;
    height: 1.6rem;

    background-image: url(
        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230E3B36' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"
    );
}


/* =========================================================
   08. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {

    .navbar-custom {
        padding: 0.85rem 0;
    }

    .navbar-custom.scrolled {
        padding: 0.65rem 0;
    }

    .navbar-collapse {
        margin-top: 0.85rem;

        padding: 1rem;

        background-color: rgba(255, 255, 255, 0.98);

        border: 1px solid var(--border-gray);
        border-radius: 14px;

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

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .navbar-nav {
        gap: 0.25rem !important;
    }

    .nav-link-custom {
        width: 100%;
        padding: 0.75rem 0.9rem !important;

        border-radius: 8px;

        transition:
            background-color var(--transition-fast),
            color var(--transition-fast),
            transform var(--transition-fast);
    }

    .nav-link-custom::after {
        display: none;
    }

    .nav-link-custom:hover {
        background-color: rgba(14, 59, 54, 0.06);
        transform: translateX(3px);
    }

    .nav-link-custom.active {
        background-color: rgba(14, 59, 54, 0.1);

        border-left: 3px solid var(--primary-green);

        padding-left: calc(0.9rem - 3px) !important;
    }

    .nav-item.ms-lg-3 {
        width: 100%;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
    }

    .btn-whatsapp {
        width: 100%;
        min-height: 44px;
    }
}


/* =========================================================
   09. PLACEHOLDER SECTIONS
   ========================================================= */

.hero-placeholder {
    min-height: 75vh;

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

    padding: 5rem 1rem;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 111, 76, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(14, 59, 54, 0.08),
            rgba(255, 111, 76, 0.04)
        );
}

.hero-placeholder h1,
section h2 {
    font-family: "Poppins", sans-serif;
    color: var(--primary-green);
    font-weight: 700;
}

.hero-placeholder h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.hero-placeholder p {
    max-width: 680px;
    margin-inline: auto;

    color: var(--text-gray);
    font-size: 1.05rem;
}

section h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 1rem;
}

section p {
    color: var(--text-gray);
}


/* =========================================================
   10. MOBILE PLACEHOLDER
   ========================================================= */

@media (max-width: 575.98px) {

    .navbar-brand-custom {
        min-width: 100px;
        padding: 0.45rem 0.8rem;
        font-size: 1.2rem;
    }

    .navbar-collapse {
        margin-top: 0.7rem;
        padding: 0.8rem;
    }

    .nav-link-custom {
        font-size: 0.9rem;
    }

    .hero-placeholder {
        min-height: 70vh;
        padding: 4rem 1rem;
    }

    .hero-placeholder p {
        font-size: 0.98rem;
    }
}


/* =========================================================
   11. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .navbar-brand-custom {
        font-size: 1.3rem;
        min-width: 105px;
    }

    .btn-whatsapp {
        min-height: 44px;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@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;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   HERO SECTION
   ========================================================= */

.hero-section {
    position: relative;
    min-height: calc(100vh - 78px);
    padding: 6rem 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255, 111, 76, 0.12),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            var(--primary-green) 0%,
            #124c45 100%
        );

    color: var(--secondary-white);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 1.4rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: rgba(250, 248, 245, 0.82);
}

.eyebrow-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: var(--accent-coral);

    box-shadow:
        0 0 0 5px rgba(255, 111, 76, 0.12);
}

.hero-title {
    max-width: 720px;

    margin-bottom: 1.5rem;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--secondary-white);
}

.hero-highlight {
    position: relative;

    color: var(--accent-coral);
}

.hero-description {
    max-width: 650px;

    margin-bottom: 2rem;

    font-size: 1.08rem;
    line-height: 1.8;

    color: rgba(250, 248, 245, 0.78);
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    margin-bottom: 2rem;
}

.hero-btn-primary,
.hero-btn-secondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    padding: 0.8rem 1.25rem;

    border-radius: 999px;

    font-family: "Poppins", sans-serif;
    font-weight: 600;

    text-decoration: none;

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

.hero-btn-primary {
    background-color: var(--accent-coral);
    color: var(--white) !important;
    border: 2px solid var(--accent-coral);
}

.hero-btn-primary:hover {
    color: var(--white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(255, 111, 76, 0.28);
}

.hero-btn-secondary {
    background-color: transparent;
    color: var(--secondary-white) !important;

    border: 2px solid rgba(250, 248, 245, 0.3);
}

.hero-btn-secondary:hover {
    color: var(--secondary-white) !important;

    background-color: rgba(250, 248, 245, 0.08);
    border-color: rgba(250, 248, 245, 0.6);

    transform: translateY(-3px);
}


/* =========================================================
   HERO TECHNOLOGIES
   ========================================================= */

.hero-technologies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.tech-label {
    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(250, 248, 245, 0.55);
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-list span {
    display: inline-flex;
    align-items: center;

    padding: 0.4rem 0.72rem;

    border: 1px solid rgba(250, 248, 245, 0.14);
    border-radius: 999px;

    background: rgba(250, 248, 245, 0.06);

    color: rgba(250, 248, 245, 0.85);

    font-size: 0.72rem;
    font-weight: 500;

    backdrop-filter: blur(8px);

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.tech-list span:hover {
    transform: translateY(-2px);
    background: rgba(250, 248, 245, 0.1);
    border-color: rgba(250, 248, 245, 0.3);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 540px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);
}

.hero-orb-one {
    width: 220px;
    height: 220px;

    top: 5%;
    right: 4%;

    background:
        radial-gradient(
            circle,
            rgba(255, 111, 76, 0.2),
            transparent 70%
        );
}

.hero-orb-two {
    width: 170px;
    height: 170px;

    bottom: 2%;
    left: 4%;

    background:
        radial-gradient(
            circle,
            rgba(250, 248, 245, 0.11),
            transparent 70%
        );
}


/* =========================================================
   DASHBOARD MOCKUP
   ========================================================= */

.dashboard-card {
    position: relative;
    z-index: 3;

    width: min(100%, 560px);

    overflow: hidden;

    border: 1px solid rgba(250, 248, 245, 0.14);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

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

    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);

    animation:
        heroFloat 6s ease-in-out infinite;
}


/* =========================================================
   DASHBOARD TOPBAR
   ========================================================= */

.dashboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 1.1rem;

    border-bottom: 1px solid rgba(250, 248, 245, 0.09);
}

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;

    color: var(--secondary-white);
}

.dashboard-logo {
    width: 22px;
    height: 22px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            var(--accent-coral),
            #ff967f
        );
}

.dashboard-actions {
    display: flex;
    gap: 0.35rem;
}

.dashboard-actions span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: rgba(250, 248, 245, 0.35);
}


/* =========================================================
   DASHBOARD BODY
   ========================================================= */

.dashboard-body {
    padding: 1.35rem;
}

.dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.25rem;
}

.dashboard-heading small {
    display: block;

    margin-bottom: 0.2rem;

    color: rgba(250, 248, 245, 0.48);

    font-size: 0.62rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.dashboard-heading h2 {
    margin: 0;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
}

.dashboard-date {
    padding: 0.4rem 0.65rem;

    border: 1px solid rgba(250, 248, 245, 0.1);
    border-radius: 999px;

    background: rgba(250, 248, 245, 0.06);

    color: rgba(250, 248, 245, 0.65);

    font-size: 0.65rem;
}


/* =========================================================
   DASHBOARD STATS
   ========================================================= */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;

    margin-bottom: 1rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;

    padding: 0.85rem;

    border: 1px solid rgba(250, 248, 245, 0.08);
    border-radius: 14px;

    background-color: rgba(250, 248, 245, 0.05);
}

.stat-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 0.8rem;
}

.stat-icon.coral {
    background: rgba(255, 111, 76, 0.13);
    color: var(--accent-coral);
}

.stat-icon.green {
    background: rgba(102, 190, 159, 0.12);
    color: #7fd1b1;
}

.stat-card small {
    display: block;

    margin-bottom: 0.15rem;

    color: rgba(250, 248, 245, 0.5);

    font-size: 0.63rem;
}

.stat-card strong {
    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
}


/* =========================================================
   DEMO CHART
   ========================================================= */

.dashboard-chart {
    padding: 1rem;

    border: 1px solid rgba(250, 248, 245, 0.08);
    border-radius: 16px;

    background: rgba(250, 248, 245, 0.035);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.8rem;

    color: rgba(250, 248, 245, 0.8);

    font-size: 0.72rem;
    font-weight: 600;
}

.chart-badge {
    padding: 0.22rem 0.5rem;

    border-radius: 999px;

    background: rgba(255, 111, 76, 0.12);
    color: var(--accent-coral);

    font-size: 0.55rem;
    letter-spacing: 0.08em;
}

.chart-area {
    position: relative;

    height: 145px;

    overflow: hidden;
}

.chart-grid {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-grid span {
    display: block;

    width: 100%;
    height: 1px;

    background: rgba(250, 248, 245, 0.07);
}

.chart-line {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.chart-line polyline {
    fill: none;

    stroke: var(--accent-coral);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 900;
    stroke-dashoffset: 900;

    animation:
        drawChart 2s ease-out 0.4s forwards;
}


/* =========================================================
   DASHBOARD FOOTER
   ========================================================= */

.dashboard-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;

    margin-top: 1rem;
}

.mini-progress {
    min-width: 0;
}

.mini-progress-top {
    display: flex;
    justify-content: space-between;

    margin-bottom: 0.45rem;

    color: rgba(250, 248, 245, 0.55);

    font-size: 0.62rem;
}

.mini-progress-top strong {
    color: var(--secondary-white);
}

.progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(250, 248, 245, 0.08);
}

.progress-track span {
    display: block;

    width: 78%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--accent-coral),
            #ff967f
        );

    animation:
        progressGrow 1.4s ease-out 0.6s both;
}

.dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: rgba(250, 248, 245, 0.62);

    font-size: 0.6rem;
    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #74d5ae;

    box-shadow:
        0 0 0 4px rgba(116, 213, 174, 0.1);
}


/* =========================================================
   FLOATING TECHNOLOGY CARDS
   ========================================================= */

.floating-tech-card {
    position: absolute;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.6rem 0.8rem;

    border: 1px solid rgba(250, 248, 245, 0.12);
    border-radius: 12px;

    background: rgba(14, 59, 54, 0.75);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.17);

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

    color: rgba(250, 248, 245, 0.85);

    font-size: 0.65rem;
    font-weight: 600;

    animation: floatingCard 5s ease-in-out infinite;
}

.floating-tech-card i {
    color: var(--accent-coral);
}

.floating-tech-one {
    top: 12%;
    left: -3%;
    animation-delay: 0s;
}

.floating-tech-two {
    right: -4%;
    bottom: 20%;
    animation-delay: 1s;
}

.floating-tech-three {
    left: 7%;
    bottom: 5%;
    animation-delay: 2s;
}


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

.hero-eyebrow,
.hero-title,
.hero-description,
.hero-actions,
.hero-technologies {
    opacity: 0;

    animation:
        heroReveal 0.8s ease forwards;
}

.hero-eyebrow {
    animation-delay: 0.1s;
}

.hero-title {
    animation-delay: 0.2s;
}

.hero-description {
    animation-delay: 0.35s;
}

.hero-actions {
    animation-delay: 0.5s;
}

.hero-technologies {
    animation-delay: 0.65s;
}

.hero-visual {
    opacity: 0;

    animation:
        visualReveal 1s ease 0.35s forwards;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visualReveal {
    from {
        opacity: 0;
        transform: translateX(35px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes heroFloat {
    0%,
    100% {
        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(-9px);
    }
}

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

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

@keyframes drawChart {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes progressGrow {
    from {
        width: 0;
    }

    to {
        width: 78%;
    }
}


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

@media (max-width: 991.98px) {

    .hero-section {
        min-height: auto;
        padding: 5rem 0;
    }

    .hero-title {
        font-size: clamp(2.3rem, 7vw, 3.8rem);
    }

    .hero-visual {
        min-height: 470px;
        margin-top: 1rem;
    }

    .floating-tech-one {
        left: 0;
    }

    .floating-tech-two {
        right: 0;
    }
}


@media (max-width: 575.98px) {

    .hero-section {
        padding: 4rem 0 4.5rem;
    }

    .hero-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.12;
    }

    .hero-description {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
    }

    .hero-technologies {
        display: block;
    }

    .tech-label {
        display: block;
        margin-bottom: 0.6rem;
    }

    .hero-visual {
        min-height: 390px;
    }

    .dashboard-card {
        width: 100%;

        transform: none;

        animation:
            heroFloatMobile 6s ease-in-out infinite;
    }

    .dashboard-body {
        padding: 1rem;
    }

    .dashboard-stats {
        gap: 0.55rem;
    }

    .stat-card {
        padding: 0.65rem;
    }

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

    .dashboard-status {
        justify-content: flex-start;
    }

    .floating-tech-card {
        font-size: 0.58rem;
        padding: 0.5rem 0.65rem;
    }

    .floating-tech-one {
        top: 8%;
        left: -2%;
    }

    .floating-tech-two {
        right: -2%;
        bottom: 18%;
    }

    .floating-tech-three {
        left: 5%;
        bottom: 1%;
    }
}

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

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
















/* =========================================================
/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
    position: relative;
    padding: 7rem 0;

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

    overflow: hidden;
}

.about-section::before {
    content: "";

    position: absolute;
    width: 380px;
    height: 380px;

    top: -170px;
    right: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 111, 76, 0.08),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 0.9rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;

    color: var(--accent-coral);
}

.section-eyebrow::before {
    content: "";

    width: 24px;
    height: 2px;

    margin-right: 0.6rem;

    border-radius: 999px;

    background-color: var(--accent-coral);
}

.section-title {
    margin-bottom: 1.2rem;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;

    color: var(--primary-green);
}

.section-title span {
    color: var(--accent-coral);
}

.section-intro {
    max-width: 760px;

    margin: 0 auto;

    font-size: 1.04rem;
    line-height: 1.8;

    color: var(--text-gray);
}


/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story {
    position: relative;

    padding-right: 2rem;
}

.about-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;

    margin-bottom: 1rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: var(--primary-green);
}

.about-label-line {
    width: 32px;
    height: 2px;

    border-radius: 999px;

    background-color: var(--accent-coral);
}

.about-story h3 {
    margin-bottom: 1.4rem;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.25;

    color: var(--text-dark);
}

.about-story p {
    margin-bottom: 1.1rem;

    font-size: 1rem;
    line-height: 1.85;

    color: var(--text-gray);
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    margin-top: 0.8rem;
    padding: 0.8rem 1.2rem;

    border: 1px solid rgba(14, 59, 54, 0.12);
    border-radius: 999px;

    background-color: rgba(14, 59, 54, 0.04);

    color: var(--primary-green);

    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none;

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

.about-cta:hover {
    color: var(--primary-green);

    background-color: rgba(14, 59, 54, 0.08);
    border-color: rgba(14, 59, 54, 0.22);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(14, 59, 54, 0.08);
}

.about-cta i {
    transition: transform var(--transition-fast);
}

.about-cta:hover i {
    transform: translateX(4px);
}


/* =========================================================
   FOCUS CARDS
   ========================================================= */

.about-focus-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-focus-card {
    position: relative;

    display: flex;
    gap: 1rem;

    padding: 1.35rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 18px;

    background-color: #FFFFFF;

    box-shadow: 0 6px 20px rgba(16, 36, 31, 0.04);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.about-focus-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;
    bottom: 20px;

    width: 3px;

    border-radius: 0 999px 999px 0;

    background-color: var(--accent-coral);

    transform: scaleY(0);

    transform-origin: center;

    transition: transform var(--transition-base);
}

.about-focus-card:hover {
    transform: translateY(-5px);

    border-color: rgba(14, 59, 54, 0.14);

    box-shadow:
        0 14px 32px rgba(16, 36, 31, 0.09);
}

.about-focus-card:hover::before {
    transform: scaleY(1);
}


/* =========================================================
   FOCUS ICON
   ========================================================= */

.about-focus-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background-color: rgba(14, 59, 54, 0.07);

    color: var(--primary-green);

    font-size: 1rem;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.about-focus-card:hover .about-focus-icon {
    background-color: var(--accent-coral);
    color: #FFFFFF;

    transform: rotate(-4deg);
}


/* =========================================================
   FOCUS CONTENT
   ========================================================= */

.about-focus-content {
    min-width: 0;
}

.about-card-number {
    margin-bottom: 0.2rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.about-focus-content h4 {
    margin-bottom: 0.45rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;

    color: var(--text-dark);
}

.about-focus-content p {
    margin: 0;

    font-size: 0.9rem;
    line-height: 1.7;

    color: var(--text-gray);
}


/* =========================================================
   TECH STRIP
   ========================================================= */

.about-tech-strip {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: center;

    margin-top: 4rem;
    padding: 1.4rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(14, 59, 54, 0.045),
            rgba(255, 111, 76, 0.035)
        );
}

.about-tech-intro span {
    display: block;

    margin-bottom: 0.25rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;

    color: var(--primary-green);
}

.about-tech-intro p {
    margin: 0;

    font-size: 0.82rem;
    line-height: 1.6;

    color: var(--text-gray);
}

.about-tech-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.about-tech-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.5rem 0.7rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 999px;

    background-color: #FFFFFF;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.about-tech-item i {
    color: var(--accent-coral);
}

.about-tech-item:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 111, 76, 0.3);

    box-shadow:
        0 6px 14px rgba(16, 36, 31, 0.06);
}


/* =========================================================
   ABOUT REVEAL ANIMATION
   ========================================================= */

.about-section .section-eyebrow,
.about-section .section-title,
.about-section .section-intro,
.about-story,
.about-focus-card,
.about-tech-strip {
    opacity: 0;

    transform: translateY(24px);
}


/* Classe ajoutée par JS */
.about-section.about-visible .section-eyebrow {
    animation: aboutReveal 0.65s ease 0.05s forwards;
}

.about-section.about-visible .section-title {
    animation: aboutReveal 0.65s ease 0.12s forwards;
}

.about-section.about-visible .section-intro {
    animation: aboutReveal 0.65s ease 0.2s forwards;
}

.about-section.about-visible .about-story {
    animation: aboutReveal 0.7s ease 0.28s forwards;
}

.about-section.about-visible .about-focus-card:nth-child(1) {
    animation: aboutReveal 0.6s ease 0.2s forwards;
}

.about-section.about-visible .about-focus-card:nth-child(2) {
    animation: aboutReveal 0.6s ease 0.32s forwards;
}

.about-section.about-visible .about-focus-card:nth-child(3) {
    animation: aboutReveal 0.6s ease 0.44s forwards;
}

.about-section.about-visible .about-tech-strip {
    animation: aboutReveal 0.7s ease 0.55s forwards;
}

@keyframes aboutReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 991.98px) {

    .about-section {
        padding: 5.5rem 0;
    }

    .about-story {
        padding-right: 0;
    }

    .about-tech-strip {
        grid-template-columns: 1fr;
    }

    .about-tech-list {
        justify-content: flex-start;
    }
}


@media (max-width: 575.98px) {

    .about-section {
        padding: 4.5rem 0;
    }

    .section-intro {
        font-size: 0.96rem;
    }

    .about-focus-card {
        padding: 1.1rem;
    }

    .about-focus-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .about-focus-content p {
        font-size: 0.86rem;
    }

    .about-tech-strip {
        padding: 1.1rem;
    }
}


/* =========================================================
   SKILLS SECTION
========================================================= */

.skills-section {
    position: relative;
    padding: 7rem 0;

    background:
        linear-gradient(
            180deg,
            #FAF8F5 0%,
            #F4F6F3 100%
        );

    overflow: hidden;
}

.skills-section::before {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    left: -220px;
    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(14, 59, 54, 0.07),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   SKILL CATEGORY
========================================================= */

.skill-category {
    height: 100%;

    padding: 2rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 22px;

    background-color: #FFFFFF;

    box-shadow:
        0 8px 28px rgba(16, 36, 31, 0.04);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.skill-category:hover {
    transform: translateY(-5px);

    border-color: rgba(14, 59, 54, 0.15);

    box-shadow:
        0 18px 38px rgba(16, 36, 31, 0.08);
}

.skill-category-primary {
    border-top: 4px solid var(--primary-green);
}

.systems-category {
    border-top: 4px solid var(--accent-coral);
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.skill-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1rem;
}

.skill-category-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background-color: rgba(14, 59, 54, 0.08);

    color: var(--primary-green);

    font-size: 1.15rem;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.skill-category:hover .skill-category-icon {
    transform: rotate(-4deg);
    background-color: var(--primary-green);
    color: #FFFFFF;
}

.skill-category-label {
    display: block;

    margin-bottom: 0.15rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;

    color: var(--accent-coral);
}

.skill-category-header h3 {
    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;

    color: var(--text-dark);
}

.skill-category-description {
    margin-bottom: 1.4rem;

    font-size: 0.93rem;
    line-height: 1.75;

    color: var(--text-gray);
}


/* =========================================================
   SKILL ITEMS
========================================================= */

.skill-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.skill-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 0.85rem;

    border: 1px solid rgba(14, 59, 54, 0.07);
    border-radius: 14px;

    background-color: #FBFCFB;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.skill-item:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 111, 76, 0.22);

    background-color: #FFFFFF;
}

.skill-item-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 0.85rem;

    background-color: rgba(14, 59, 54, 0.07);
    color: var(--primary-green);
}

.skill-item-icon.javascript,
.skill-item-icon.jquery,
.skill-item-icon.chartjs {
    color: var(--accent-coral);
    background-color: rgba(255, 111, 76, 0.08);
}

.skill-item h4 {
    margin: 0 0 0.2rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;

    color: var(--text-dark);
}

.skill-item p {
    margin: 0;

    font-size: 0.72rem;
    line-height: 1.5;

    color: var(--text-gray);
}


/* =========================================================
   BROWSER DEMO
========================================================= */

.skill-browser-demo {
    margin-top: 1.5rem;

    overflow: hidden;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 15px;

    background-color: var(--primary-green);
}

.skill-browser-top {
    display: flex;
    gap: 0.35rem;

    padding: 0.7rem 0.9rem;

    border-bottom: 1px solid rgba(250, 248, 245, 0.08);
}

.skill-browser-top span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background-color: rgba(250, 248, 245, 0.3);
}

.skill-browser-body {
    padding: 1rem;
}

.browser-line {
    width: 75%;
    height: 7px;

    margin-bottom: 0.55rem;

    border-radius: 999px;

    background-color: rgba(250, 248, 245, 0.2);
}

.browser-line.large {
    width: 90%;
    height: 10px;

    background-color: rgba(250, 248, 245, 0.32);
}

.browser-line.short {
    width: 48%;
}

.browser-data-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;

    margin-top: 1rem;
}

.browser-data-row span {
    height: 48px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 111, 76, 0.3),
            rgba(250, 248, 245, 0.08)
        );
}


/* =========================================================
   SYSTEMS
========================================================= */

.systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.system-card {
    padding: 1rem;

    border: 1px solid rgba(14, 59, 54, 0.07);
    border-radius: 15px;

    background-color: #FBFCFB;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.system-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(16, 36, 31, 0.06);
}

.system-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;

    margin-bottom: 0.8rem;
}

.system-icon {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-size: 1rem;

    background-color: rgba(14, 59, 54, 0.08);
    color: var(--primary-green);
}

.system-icon.linux {
    color: var(--primary-green);
}

.system-icon.windows {
    color: #3478c5;
}

.system-icon.maintenance {
    color: var(--accent-coral);
}

.learning-badge {
    display: inline-flex;

    padding: 0.25rem 0.45rem;

    border-radius: 999px;

    background-color: rgba(255, 111, 76, 0.09);
    color: var(--accent-coral);

    font-size: 0.52rem;
    font-weight: 700;
}

.system-card h4 {
    margin-bottom: 0.6rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;

    color: var(--text-dark);
}

.system-card ul {
    margin: 0;
    padding-left: 1rem;
}

.system-card li {
    margin-bottom: 0.35rem;

    font-size: 0.68rem;
    line-height: 1.5;

    color: var(--text-gray);
}


/* =========================================================
   TOOLS
========================================================= */

.tools-category {
    border-top: 4px solid var(--primary-green);
}

.tool-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    padding: 0.8rem;

    border-radius: 12px;

    background-color: #FBFCFB;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.tool-item:hover {
    transform: translateY(-2px);
    background-color: rgba(14, 59, 54, 0.07);
}

.tool-item i {
    color: var(--accent-coral);
}


/* =========================================================
   DOM DEMO
========================================================= */

.skills-demo-box {
    margin-top: 2rem;
    padding: 2rem;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--primary-green),
            #124c45
        );

    color: var(--secondary-white);

    box-shadow:
        0 14px 35px rgba(14, 59, 54, 0.13);
}

.skills-demo-box .section-eyebrow {
    color: var(--accent-coral);
}

.skills-demo-box h3 {
    margin-bottom: 0.7rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;

    color: var(--secondary-white);
}

.skills-demo-box p {
    margin: 0;

    max-width: 650px;

    color: rgba(250, 248, 245, 0.72);
}

.dom-demo-card {
    padding: 1.1rem;

    border: 1px solid rgba(250, 248, 245, 0.13);
    border-radius: 16px;

    background-color: rgba(250, 248, 245, 0.06);
}

.dom-demo-text {
    min-height: 68px;

    display: flex;
    align-items: center;

    margin-bottom: 0.8rem;
    padding: 0.85rem;

    border-radius: 11px;

    background-color: rgba(250, 248, 245, 0.06);

    color: rgba(250, 248, 245, 0.85);

    font-size: 0.82rem;
    line-height: 1.5;
}

.dom-demo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    width: 100%;

    min-height: 44px;

    border: 0;
    border-radius: 999px;

    background-color: var(--accent-coral);
    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.dom-demo-button:hover {
    background-color: #e65d3f;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 111, 76, 0.24);
}

.dom-demo-button:focus-visible {
    outline: 3px solid rgba(250, 248, 245, 0.35);
    outline-offset: 3px;
}


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

@media (max-width: 991.98px) {

    .skills-section {
        padding: 5.5rem 0;
    }

    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 767.98px) {

    .skill-category {
        padding: 1.4rem;
    }

    .skill-items {
        grid-template-columns: 1fr;
    }

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

    .tool-list {
        grid-template-columns: 1fr;
    }

    .skills-demo-box {
        padding: 1.4rem;
    }
}


@media (max-width: 575.98px) {

    .skills-section {
        padding: 4.5rem 0;
    }

    .skill-category-header h3 {
        font-size: 1.1rem;
    }

    .skill-category-icon {
        width: 44px;
        height: 44px;
    }

    .skills-demo-box h3 {
        font-size: 1.4rem;
    }
}







/* =========================================================
   PROJECTS SECTION
========================================================= */

.projects-section {
    position: relative;

    padding: 7rem 0;

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

    overflow: hidden;
}


/* =========================================================
   FILTERS
========================================================= */

.project-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;

    margin-bottom: 2.2rem;
}

.project-filter {
    padding: 0.6rem 1rem;

    border: 1px solid rgba(14, 59, 54, 0.12);
    border-radius: 999px;

    background-color: #FFFFFF;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.74rem;
    font-weight: 600;

    cursor: pointer;

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

.project-filter:hover {
    transform: translateY(-2px);

    border-color: rgba(14, 59, 54, 0.25);

    box-shadow:
        0 5px 14px rgba(16, 36, 31, 0.06);
}

.project-filter.active {
    background-color: var(--primary-green);
    border-color: var(--primary-green);

    color: #FFFFFF;

    box-shadow:
        0 7px 16px rgba(14, 59, 54, 0.14);
}


/* =========================================================
   FEATURED PROJECT
========================================================= */

.project-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 560px;

    overflow: hidden;

    border: 1px solid rgba(14, 59, 54, 0.09);
    border-radius: 26px;

    background-color: #FFFFFF;

    box-shadow:
        0 12px 34px rgba(16, 36, 31, 0.06);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.project-featured:hover {
    transform: translateY(-4px);

    border-color: rgba(14, 59, 54, 0.15);

    box-shadow:
        0 20px 45px rgba(16, 36, 31, 0.09);
}


/* =========================================================
   FEATURED VISUAL
========================================================= */

.project-featured-visual {
    position: relative;

    min-height: 560px;

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

    padding: 2rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 111, 76, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--primary-green),
            #124c45
        );
}

.project-featured-visual::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -130px;
    bottom: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(250, 248, 245, 0.12),
            transparent 68%
        );
}


/* =========================================================
   PROTOTYPE BADGE
========================================================= */

.project-prototype-badge {
    position: absolute;

    top: 1.4rem;
    left: 1.4rem;

    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.48rem 0.7rem;

    border: 1px solid rgba(250, 248, 245, 0.15);
    border-radius: 999px;

    background-color: rgba(250, 248, 245, 0.08);

    color: rgba(250, 248, 245, 0.85);

    font-size: 0.62rem;
    font-weight: 700;

    backdrop-filter: blur(10px);
}


/* =========================================================
   DASHBOARD PREVIEW
========================================================= */

.project-dashboard-preview {
    position: relative;
    z-index: 2;

    width: min(100%, 520px);

    overflow: hidden;

    border: 1px solid rgba(250, 248, 245, 0.13);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.05)
        );

    box-shadow:
        0 28px 55px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(12px);

    transform: rotate(-2deg);

    animation:
        projectMockupFloat 6s ease-in-out infinite;
}

.prototype-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.9rem 1rem;

    border-bottom: 1px solid rgba(250, 248, 245, 0.09);
}

.prototype-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;

    color: rgba(250, 248, 245, 0.85);
}

.prototype-logo {
    width: 19px;
    height: 19px;

    border-radius: 6px;

    background-color: var(--accent-coral);
}

.prototype-menu {
    display: flex;
    gap: 0.3rem;
}

.prototype-menu span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background-color: rgba(250, 248, 245, 0.32);
}

.prototype-content {
    padding: 1.1rem;
}

.prototype-welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 1rem;
}

.prototype-welcome small {
    display: block;

    color: rgba(250, 248, 245, 0.45);

    font-size: 0.54rem;
    letter-spacing: 0.1em;
}

.prototype-welcome h4 {
    margin: 0.15rem 0 0;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
}

.prototype-period {
    padding: 0.35rem 0.55rem;

    border-radius: 999px;

    background-color: rgba(250, 248, 245, 0.07);

    color: rgba(250, 248, 245, 0.55);

    font-size: 0.55rem;
}

.prototype-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0.55rem;

    margin-bottom: 0.8rem;
}

.prototype-stat {
    padding: 0.7rem;

    border: 1px solid rgba(250, 248, 245, 0.07);
    border-radius: 11px;

    background-color: rgba(250, 248, 245, 0.04);
}

.prototype-stat span {
    display: block;

    margin-bottom: 0.25rem;

    color: rgba(250, 248, 245, 0.46);

    font-size: 0.54rem;
}

.prototype-stat strong {
    color: rgba(250, 248, 245, 0.86);

    font-size: 0.85rem;
}

.prototype-chart {
    padding: 0.85rem;

    border: 1px solid rgba(250, 248, 245, 0.07);
    border-radius: 13px;

    background-color: rgba(250, 248, 245, 0.035);
}

.prototype-chart-title {
    margin-bottom: 0.8rem;

    color: rgba(250, 248, 245, 0.62);

    font-size: 0.6rem;
    font-weight: 600;
}

.prototype-bars {
    height: 105px;

    display: flex;
    align-items: end;

    gap: 0.55rem;

    padding: 0 0.3rem;
}

.prototype-bars span {
    flex: 1;

    min-width: 12px;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            to top,
            var(--accent-coral),
            rgba(255, 111, 76, 0.38)
        );

    transform-origin: bottom;

    animation:
        barsPulse 3.5s ease-in-out infinite;
}

.prototype-bars span:nth-child(2) {
    animation-delay: 0.15s;
}

.prototype-bars span:nth-child(3) {
    animation-delay: 0.3s;
}

.prototype-bars span:nth-child(4) {
    animation-delay: 0.45s;
}

.prototype-bars span:nth-child(5) {
    animation-delay: 0.6s;
}

.prototype-bars span:nth-child(6) {
    animation-delay: 0.75s;
}

.prototype-bars span:nth-child(7) {
    animation-delay: 0.9s;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.prototype-floating-card {
    position: absolute;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.6rem 0.75rem;

    border: 1px solid rgba(250, 248, 245, 0.13);
    border-radius: 11px;

    background-color: rgba(14, 59, 54, 0.82);

    color: rgba(250, 248, 245, 0.85);

    font-size: 0.6rem;
    font-weight: 600;

    backdrop-filter: blur(10px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.16);

    animation:
        floatingProjectCard 5s ease-in-out infinite;
}

.prototype-floating-card i {
    color: var(--accent-coral);
}

.prototype-card-one {
    top: 22%;
    right: 2%;
}

.prototype-card-two {
    left: 2%;
    bottom: 18%;

    animation-delay: 1.2s;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.project-featured-content {
    display: flex;
    flex-direction: column;

    padding: 2.2rem;
}

.project-topline,
.project-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 0.8rem;

    margin-bottom: 1rem;
}

.project-category {
    display: inline-flex;

    padding: 0.3rem 0.55rem;

    border-radius: 999px;

    background-color: rgba(14, 59, 54, 0.07);

    color: var(--primary-green);

    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    font-size: 0.62rem;
    font-weight: 600;
}

.project-status > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.status-development {
    color: var(--accent-coral);
}

.status-development > span {
    background-color: var(--accent-coral);
}

.status-upcoming {
    color: var(--text-gray);
}

.project-featured-content h3 {
    margin-bottom: 0.85rem;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;

    color: var(--text-dark);
}

.project-description {
    margin-bottom: 1.25rem;

    color: var(--text-gray);

    font-size: 0.94rem;
    line-height: 1.75;
}


/* =========================================================
   CONTEXT
========================================================= */

.project-context {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;

    gap: 1rem;

    margin-bottom: 1.25rem;
}

.context-block span {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.context-block p {
    margin: 0;

    color: var(--text-gray);

    font-size: 0.77rem;
    line-height: 1.6;
}

.context-divider {
    background-color: rgba(14, 59, 54, 0.1);
}


/* =========================================================
   FEATURES
========================================================= */

.project-features {
    margin-bottom: 1.15rem;
}

.project-features h4 {
    margin-bottom: 0.65rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    color: var(--text-dark);
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.feature-list span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.4rem 0.55rem;

    border-radius: 999px;

    background-color: #F4F7F5;

    color: var(--text-gray);

    font-size: 0.63rem;
}

.feature-list i {
    color: var(--primary-green);
    font-size: 0.55rem;
}


/* =========================================================
   PROJECT TECH
========================================================= */

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;

    margin-top: auto;
    margin-bottom: 1rem;
}

.project-tech span {
    padding: 0.4rem 0.55rem;

    border: 1px solid rgba(14, 59, 54, 0.07);
    border-radius: 999px;

    background-color: #FBFCFB;

    color: var(--text-gray);

    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
}


/* =========================================================
   PROJECT ACTIONS
========================================================= */

.project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.project-btn {
    min-height: 42px;

    padding: 0.65rem 0.9rem;

    border: 0;
    border-radius: 999px;

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
}

.project-btn-disabled {
    background-color: #EEF1EF;
    color: #7B8581;

    cursor: not-allowed;
}

.project-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.5rem;

    border: 0;
    background: transparent;

    color: var(--primary-green);

    font-family: "Poppins", sans-serif;
    font-size: 0.67rem;
    font-weight: 600;

    cursor: not-allowed;
}

.project-link-btn i {
    transition: transform var(--transition-fast);
}


/* =========================================================
   SMALL PROJECT CARDS
========================================================= */

.project-card {
    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 22px;

    background-color: #FFFFFF;

    box-shadow:
        0 8px 25px rgba(16, 36, 31, 0.045);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.project-card:hover {
    transform: translateY(-5px);

    border-color: rgba(14, 59, 54, 0.14);

    box-shadow:
        0 16px 34px rgba(16, 36, 31, 0.08);
}

.project-card-visual {
    position: relative;

    min-height: 230px;

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

    overflow: hidden;
}

.association-visual {
    background:
        linear-gradient(
            135deg,
            rgba(14, 59, 54, 0.13),
            rgba(255, 111, 76, 0.08)
        );
}

.stock-visual {
    background:
        linear-gradient(
            135deg,
            rgba(255, 111, 76, 0.11),
            rgba(14, 59, 54, 0.08)
        );
}

.upcoming-icon {
    width: 72px;
    height: 72px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background-color: #FFFFFF;

    color: var(--primary-green);

    font-size: 1.5rem;

    box-shadow:
        0 14px 30px rgba(16, 36, 31, 0.09);
}

.upcoming-label {
    position: absolute;

    top: 1rem;
    right: 1rem;

    padding: 0.35rem 0.55rem;

    border-radius: 999px;

    background-color: rgba(16, 36, 31, 0.08);

    color: var(--text-gray);

    font-size: 0.56rem;
    font-weight: 700;
}

.abstract-lines {
    position: absolute;

    right: 12%;
    bottom: 18%;

    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    width: 110px;
}

.abstract-lines span {
    display: block;

    height: 7px;

    border-radius: 999px;

    background-color: rgba(14, 59, 54, 0.12);
}

.abstract-lines span:nth-child(2) {
    width: 75%;
}

.abstract-lines span:nth-child(3) {
    width: 50%;
}

.stock-illustration {
    position: absolute;

    left: 12%;
    bottom: 15%;

    display: flex;
    align-items: end;
    gap: 0.55rem;
}

.stock-illustration span {
    width: 28px;

    border-radius: 6px 6px 3px 3px;

    background-color: rgba(255, 111, 76, 0.2);
}

.stock-illustration span:nth-child(1) {
    height: 38px;
}

.stock-illustration span:nth-child(2) {
    height: 58px;
}

.stock-illustration span:nth-child(3) {
    height: 78px;
}


/* =========================================================
   CARD BODY
========================================================= */

.project-card-body {
    display: flex;
    flex-direction: column;

    min-height: 280px;

    padding: 1.5rem;
}

.project-card-body h3 {
    margin-bottom: 0.7rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;

    color: var(--text-dark);
}

.project-card-body > p {
    margin-bottom: 1rem;

    color: var(--text-gray);

    font-size: 0.85rem;
    line-height: 1.7;
}

.upcoming-footer {
    margin-top: auto;
    padding-top: 0.85rem;

    border-top: 1px solid rgba(14, 59, 54, 0.07);

    color: var(--text-gray);

    font-size: 0.65rem;
}

.upcoming-footer i {
    margin-right: 0.3rem;
    color: var(--accent-coral);
}


/* =========================================================
   NOTE
========================================================= */

.projects-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    margin-top: 1.5rem;
    padding: 1.15rem 1.25rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 16px;

    background-color: rgba(14, 59, 54, 0.035);
}

.projects-note-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background-color: var(--primary-green);
    color: #FFFFFF;
}

.projects-note strong {
    display: block;

    margin-bottom: 0.2rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;

    color: var(--text-dark);
}

.projects-note p {
    margin: 0;

    color: var(--text-gray);

    font-size: 0.72rem;
    line-height: 1.6;
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.project-item.project-hidden {
    display: none;
}

.project-item.project-filtering {
    animation: projectFilterIn 0.35s ease both;
}

@keyframes projectFilterIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


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

@keyframes projectMockupFloat {

    0%,
    100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

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

@keyframes floatingProjectCard {

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

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

@keyframes barsPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}


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

@media (max-width: 991.98px) {

    .projects-section {
        padding: 5.5rem 0;
    }

    .project-featured {
        grid-template-columns: 1fr;
    }

    .project-featured-visual {
        min-height: 480px;
    }

    .project-featured-content {
        padding: 1.7rem;
    }
}


@media (max-width: 767.98px) {

    .project-featured-visual {
        min-height: 390px;
        padding: 1.1rem;
    }

    .project-dashboard-preview {
        transform: rotate(0);
        animation: projectMockupFloatMobile 6s ease-in-out infinite;
    }

    .prototype-card-one {
        right: 1%;
    }

    .prototype-card-two {
        left: 1%;
    }

    .project-context {
        grid-template-columns: 1fr;
    }

    .context-divider {
        width: 100%;
        height: 1px;
    }

    .project-card-visual {
        min-height: 200px;
    }
}


@media (max-width: 575.98px) {

    .projects-section {
        padding: 4.5rem 0;
    }

    .project-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;

        padding-bottom: 0.5rem;
    }

    .project-filter {
        flex-shrink: 0;
    }

    .project-featured-content {
        padding: 1.35rem;
    }

    .project-featured-content h3 {
        font-size: 1.55rem;
    }

    .prototype-stats {
        grid-template-columns: 1fr;
    }

    .prototype-stat {
        padding: 0.55rem;
    }

    .prototype-floating-card {
        font-size: 0.53rem;
        padding: 0.48rem 0.6rem;
    }

    .project-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .project-btn {
        width: 100%;
    }

    .project-link-btn {
        justify-content: center;
    }
}

@keyframes projectMockupFloatMobile {

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

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



/* =========================================================
   DATA VISUALIZATION SECTION
========================================================= */

.data-section {
    position: relative;

    padding: 7rem 0;

    background-color: #FFFFFF;

    overflow: hidden;
}

.data-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(14, 59, 54, 0.06),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   CHART SHOWCASE
========================================================= */

.chart-showcase {
    height: 100%;

    padding: 1.8rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 24px;

    background-color: #FAF8F5;

    box-shadow:
        0 10px 30px rgba(16, 36, 31, 0.05);
}

.chart-showcase-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.4rem;
}

.chart-kicker {
    display: block;

    margin-bottom: 0.4rem;

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;

    color: var(--accent-coral);
}

.chart-showcase-header h3 {
    margin: 0 0 0.35rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;

    color: var(--text-dark);
}

.chart-showcase-header p {
    margin: 0;

    font-size: 0.8rem;

    color: var(--text-gray);
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    flex-shrink: 0;

    padding: 0.45rem 0.65rem;

    border: 1px solid rgba(255, 111, 76, 0.15);
    border-radius: 999px;

    background-color: rgba(255, 111, 76, 0.07);

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
}


/* =========================================================
   CHART WRAPPER
========================================================= */

.chart-wrapper {
    position: relative;

    height: 380px;

    padding: 1rem;

    border: 1px solid rgba(14, 59, 54, 0.06);
    border-radius: 18px;

    background-color: #FFFFFF;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   CHART FOOTER
========================================================= */

.chart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 0.9rem;

    font-size: 0.62rem;

    color: var(--text-gray);
}

.chart-footer i {
    margin-right: 0.2rem;

    color: var(--accent-coral);
}

.chart-footer > span:last-child {
    font-family: "Poppins", sans-serif;
    font-weight: 700;

    color: var(--primary-green);
}


/* =========================================================
   DATA EXPLANATION
========================================================= */

.data-explanation {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 1.8rem;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--primary-green),
            #124c45
        );

    color: var(--secondary-white);

    box-shadow:
        0 12px 30px rgba(14, 59, 54, 0.13);
}

.data-explanation-icon {
    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.25rem;

    border-radius: 15px;

    background-color: rgba(255, 111, 76, 0.13);

    color: var(--accent-coral);

    font-size: 1.05rem;
}

.data-explanation .chart-kicker {
    color: rgba(250, 248, 245, 0.58);
}

.data-explanation h3 {
    margin-bottom: 1rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.35rem;
    line-height: 1.3;

    color: var(--secondary-white);
}

.data-explanation > p {
    margin-bottom: 1.4rem;

    color: rgba(250, 248, 245, 0.7);

    font-size: 0.84rem;
    line-height: 1.75;
}


/* =========================================================
   DATA POINTS
========================================================= */

.data-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    margin-top: auto;
}

.data-point {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 0.8rem;

    border: 1px solid rgba(250, 248, 245, 0.08);
    border-radius: 13px;

    background-color: rgba(250, 248, 245, 0.045);

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.data-point:hover {
    transform: translateX(4px);

    background-color: rgba(250, 248, 245, 0.08);
}

.data-point-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background-color: rgba(255, 111, 76, 0.1);

    color: var(--accent-coral);

    font-size: 0.72rem;
}

.data-point strong {
    display: block;

    margin-bottom: 0.15rem;

    color: rgba(250, 248, 245, 0.9);

    font-family: "Poppins", sans-serif;
    font-size: 0.73rem;
}

.data-point small {
    display: block;

    color: rgba(250, 248, 245, 0.55);

    font-size: 0.63rem;
    line-height: 1.5;
}


/* =========================================================
   DATA TECH LINE
========================================================= */

.data-tech-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: 1.5rem;
    padding: 1rem 1.2rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 16px;

    background-color: rgba(14, 59, 54, 0.035);
}

.data-tech-line span {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--text-gray);

    font-family: "Poppins", sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.data-tech-line strong {
    color: var(--primary-green);

    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
}

.data-tech-line p {
    max-width: 650px;

    margin: 0;

    color: var(--text-gray);

    font-size: 0.72rem;
    line-height: 1.6;
}


/* =========================================================
   CHART ANIMATION
========================================================= */

.chart-showcase,
.data-explanation,
.data-tech-line {
    opacity: 0;
    transform: translateY(24px);
}

.data-section.data-visible .chart-showcase {
    animation:
        dataReveal 0.7s ease 0.1s forwards;
}

.data-section.data-visible .data-explanation {
    animation:
        dataReveal 0.7s ease 0.2s forwards;
}

.data-section.data-visible .data-tech-line {
    animation:
        dataReveal 0.7s ease 0.35s forwards;
}

@keyframes dataReveal {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 991.98px) {

    .data-section {
        padding: 5.5rem 0;
    }

    .chart-wrapper {
        height: 340px;
    }
}


@media (max-width: 575.98px) {

    .data-section {
        padding: 4.5rem 0;
    }

    .chart-showcase,
    .data-explanation {
        padding: 1.25rem;
    }

    .chart-showcase-header {
        flex-direction: column;
    }

    .chart-wrapper {
        height: 290px;
        padding: 0.5rem;
    }

    .chart-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-tech-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }
}



/* =========================================================
   JQUERY SECTION
========================================================= */

.jquery-section {
    position: relative;
    padding: 7rem 0;

    background:
        linear-gradient(
            180deg,
            #F4F6F3 0%,
            #FAF8F5 100%
        );

    overflow: hidden;
}


/* =========================================================
   DEMO CARD
========================================================= */

.jquery-demo-card {
    padding: 1.8rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 24px;

    background-color: #FFFFFF;

    box-shadow:
        0 10px 30px rgba(16, 36, 31, 0.05);
}

.jquery-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.35rem;
}

.demo-kicker {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.jquery-demo-header h3 {
    margin: 0;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.jquery-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    flex-shrink: 0;

    padding: 0.45rem 0.65rem;

    border-radius: 999px;

    background-color: rgba(255, 111, 76, 0.08);

    color: var(--accent-coral);

    font-size: 0.6rem;
    font-weight: 700;
}


/* =========================================================
   FILTERS
========================================================= */

.jquery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;

    margin-bottom: 1.4rem;
}

.jquery-filter {
    padding: 0.55rem 0.9rem;

    border: 1px solid rgba(14, 59, 54, 0.1);
    border-radius: 999px;

    background-color: #FFFFFF;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.jquery-filter:hover {
    transform: translateY(-2px);

    border-color: rgba(14, 59, 54, 0.22);
}

.jquery-filter.active {
    background-color: var(--primary-green);
    border-color: var(--primary-green);

    color: #FFFFFF;
}


/* =========================================================
   SKILL CARDS
========================================================= */

.jquery-skill-card {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;

    min-height: 135px;

    padding: 1rem;

    border: 1px solid rgba(14, 59, 54, 0.07);
    border-radius: 16px;

    background-color: #FBFCFB;

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

.jquery-skill-card:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 111, 76, 0.2);

    background-color: #FFFFFF;

    box-shadow:
        0 10px 22px rgba(16, 36, 31, 0.07);
}

.jquery-skill-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background-color: rgba(14, 59, 54, 0.07);

    color: var(--primary-green);

    font-size: 1rem;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.jquery-skill-card:hover .jquery-skill-icon {
    transform: rotate(-4deg);

    background-color: var(--accent-coral);

    color: #FFFFFF;
}

.jquery-skill-category {
    display: block;

    margin-bottom: 0.15rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.jquery-skill-card h4 {
    margin: 0 0 0.3rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.jquery-skill-card p {
    margin: 0;

    color: var(--text-gray);

    font-size: 0.72rem;
    line-height: 1.55;
}


/* =========================================================
   FOOTER OF DEMO
========================================================= */

.jquery-demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1rem;
    padding-top: 1rem;

    border-top: 1px solid rgba(14, 59, 54, 0.07);

    color: var(--text-gray);

    font-size: 0.65rem;
}

.jquery-reset-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    border: 0;

    background: transparent;

    color: var(--primary-green);

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;

    cursor: pointer;
}

.jquery-reset-button:hover {
    color: var(--accent-coral);
}


/* =========================================================
   EXPLANATION
========================================================= */

.jquery-explanation {
    height: 100%;

    padding: 1.8rem;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--primary-green),
            #124c45
        );

    box-shadow:
        0 12px 30px rgba(14, 59, 54, 0.13);

    color: var(--secondary-white);
}

.jquery-explanation-icon {
    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.2rem;

    border-radius: 15px;

    background-color: rgba(255, 111, 76, 0.12);

    color: var(--accent-coral);
}

.jquery-explanation .demo-kicker {
    color: rgba(250, 248, 245, 0.58);
}

.jquery-explanation h3 {
    margin-bottom: 0.9rem;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    line-height: 1.3;
}

.jquery-explanation > p {
    margin-bottom: 1.3rem;

    color: rgba(250, 248, 245, 0.68);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* =========================================================
   CONCEPTS
========================================================= */

.jquery-concepts {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.jquery-concept {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;

    padding: 0.75rem;

    border: 1px solid rgba(250, 248, 245, 0.08);
    border-radius: 13px;

    background-color: rgba(250, 248, 245, 0.045);

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.jquery-concept:hover {
    transform: translateX(4px);

    background-color: rgba(250, 248, 245, 0.08);
}

.jquery-concept > span {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background-color: rgba(255, 111, 76, 0.1);

    color: var(--accent-coral);

    font-size: 0.68rem;
}

.jquery-concept strong {
    display: block;

    margin-bottom: 0.15rem;

    color: rgba(250, 248, 245, 0.9);

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
}

.jquery-concept small {
    display: block;

    color: rgba(250, 248, 245, 0.53);

    font-size: 0.6rem;
    line-height: 1.45;
}


/* =========================================================
   FILTER STATES
========================================================= */

.jquery-item.jquery-hidden {
    display: none;
}

.jquery-item.jquery-visible {
    animation:
        jqueryItemIn 0.35s ease both;
}

@keyframes jqueryItemIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


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

@media (max-width: 991.98px) {

    .jquery-section {
        padding: 5.5rem 0;
    }
}


@media (max-width: 767.98px) {

    .jquery-demo-card,
    .jquery-explanation {
        padding: 1.35rem;
    }

    .jquery-demo-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 575.98px) {

    .jquery-section {
        padding: 4.5rem 0;
    }

    .jquery-demo-header {
        flex-direction: column;
    }

    .jquery-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.4rem;
    }

    .jquery-filter {
        flex-shrink: 0;
    }

    .jquery-skill-card {
        min-height: auto;
    }
}


/* =========================================================
   SERVICES SECTION
========================================================= */

.services-section {
    position: relative;
    padding: 7rem 0;

    background-color: #FFFFFF;

    overflow: hidden;
}

.services-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 111, 76, 0.07),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   INTRO BOX
========================================================= */

.service-hero-box {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 1.2rem;

    margin-bottom: 2rem;
    padding: 1.35rem 1.5rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(14, 59, 54, 0.05),
            rgba(255, 111, 76, 0.04)
        );
}

.service-hero-icon {
    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background-color: var(--primary-green);
    color: #FFFFFF;

    font-size: 1rem;
}

.service-hero-content span {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.service-hero-content h3 {
    margin: 0 0 0.2rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.service-hero-content p {
    margin: 0;

    color: var(--text-gray);

    font-size: 0.74rem;
    line-height: 1.6;
}

.service-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    padding: 0.7rem 1rem;

    border-radius: 999px;

    background-color: var(--primary-green);
    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.service-hero-cta:hover {
    color: #FFFFFF;

    background-color: #124c45;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(14, 59, 54, 0.15);
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    height: 100%;
    min-height: 350px;

    display: flex;
    flex-direction: column;

    padding: 1.6rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 20px;

    background-color: #FAF8F5;

    box-shadow:
        0 7px 24px rgba(16, 36, 31, 0.04);

    overflow: hidden;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

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

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition-base);
}

.service-card:hover {
    transform: translateY(-6px);

    border-color: rgba(14, 59, 54, 0.15);

    box-shadow:
        0 17px 35px rgba(16, 36, 31, 0.08);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card-featured {
    background:
        linear-gradient(
            145deg,
            #FAF8F5,
            #F3F7F4
        );
}


/* =========================================================
   SERVICE ICON
========================================================= */

.service-icon {
    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 15px;

    background-color: rgba(14, 59, 54, 0.08);

    color: var(--primary-green);

    font-size: 1rem;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.service-card:hover .service-icon {
    transform: rotate(-4deg);

    background-color: var(--accent-coral);

    color: #FFFFFF;
}


/* =========================================================
   NUMBER
========================================================= */

.service-number {
    position: absolute;

    top: 1.4rem;
    right: 1.4rem;

    color: rgba(14, 59, 54, 0.18);

    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.service-featured-badge {
    position: absolute;

    top: 1rem;
    right: 1rem;

    padding: 0.3rem 0.5rem;

    border-radius: 999px;

    background-color: rgba(255, 111, 76, 0.08);

    color: var(--accent-coral);

    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-card h3 {
    margin-bottom: 0.7rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.service-card > p {
    margin-bottom: 1rem;

    color: var(--text-gray);

    font-size: 0.78rem;
    line-height: 1.7;
}

.service-use {
    margin-top: auto;
    margin-bottom: 1rem;
    padding-top: 0.85rem;

    border-top: 1px solid rgba(14, 59, 54, 0.07);
}

.service-use strong {
    display: block;

    margin-bottom: 0.18rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
}

.service-use span {
    color: var(--text-gray);

    font-size: 0.64rem;
}


/* =========================================================
   TAGS
========================================================= */

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.service-tags span {
    padding: 0.34rem 0.55rem;

    border: 1px solid rgba(14, 59, 54, 0.07);
    border-radius: 999px;

    background-color: #FFFFFF;

    color: var(--text-gray);

    font-family: "Poppins", sans-serif;
    font-size: 0.54rem;
    font-weight: 600;
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.service-bottom-note {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 1rem;

    margin-top: 1.5rem;
    padding: 1.25rem 1.4rem;

    border-radius: 18px;

    background-color: var(--primary-green);
}

.service-bottom-icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background-color: rgba(255, 111, 76, 0.13);

    color: var(--accent-coral);
}

.service-bottom-note strong {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
}

.service-bottom-note p {
    margin: 0;

    color: rgba(250, 248, 245, 0.62);

    font-size: 0.68rem;
    line-height: 1.5;
}

.service-bottom-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.65rem 0.85rem;

    border: 1px solid rgba(250, 248, 245, 0.16);
    border-radius: 999px;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.service-bottom-link:hover {
    color: #FFFFFF;

    background-color: rgba(250, 248, 245, 0.08);

    transform: translateY(-2px);
}


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

@media (max-width: 991.98px) {

    .services-section {
        padding: 5.5rem 0;
    }

    .service-hero-box {
        grid-template-columns: auto 1fr;
    }

    .service-hero-cta {
        grid-column: 2;
        justify-self: start;
    }
}


@media (max-width: 767.98px) {

    .service-hero-box {
        grid-template-columns: auto 1fr;
    }

    .service-hero-content h3 {
        font-size: 0.92rem;
    }

    .service-hero-cta {
        grid-column: 1 / -1;
    }

    .service-card {
        min-height: 320px;
    }

    .service-bottom-note {
        grid-template-columns: auto 1fr;
    }

    .service-bottom-link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


@media (max-width: 575.98px) {

    .services-section {
        padding: 4.5rem 0;
    }

    .service-hero-box {
        padding: 1rem;
    }

    .service-hero-icon {
        width: 42px;
        height: 42px;
    }

    .service-card {
        min-height: auto;
        padding: 1.35rem;
    }

    .service-bottom-note {
        padding: 1rem;
    }
}



/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    position: relative;

    padding: 7rem 0;

    background:
        linear-gradient(
            180deg,
            #FAF8F5 0%,
            #F1F5F2 100%
        );

    overflow: hidden;
}

.contact-section::before {
    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    right: -220px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 111, 76, 0.08),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-card {
    position: relative;
    z-index: 1;

    height: 100%;

    padding: 2rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 24px;

    background-color: #FFFFFF;

    box-shadow:
        0 10px 30px rgba(16, 36, 31, 0.05);
}

.contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.5rem;
}

.contact-card-kicker {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--accent-coral);

    font-family: "Poppins", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.contact-card-kicker.light {
    color: rgba(250, 248, 245, 0.55);
}

.contact-card-header h3 {
    margin-bottom: 0.35rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.contact-card-header p {
    margin: 0;

    color: var(--text-gray);

    font-size: 0.78rem;
}

.contact-card-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background-color: rgba(255, 111, 76, 0.08);

    color: var(--accent-coral);

    font-size: 1rem;
}


/* =========================================================
   FORM
========================================================= */

.contact-form-card .form-label {
    margin-bottom: 0.4rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
}

.contact-input {
    min-height: 46px;

    border: 1px solid #DDE4E0;
    border-radius: 11px;

    background-color: #FBFCFB;

    color: var(--text-dark);

    font-size: 0.78rem;

    box-shadow: none !important;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

textarea.contact-input {
    min-height: 140px;

    resize: vertical;
}

.contact-input::placeholder {
    color: #9AA39F;
}

.contact-input:focus {
    border-color: rgba(14, 59, 54, 0.45);

    background-color: #FFFFFF;

    box-shadow:
        0 0 0 4px rgba(14, 59, 54, 0.06) !important;
}


/* Validation */
.contact-input.is-invalid {
    border-color: #d95c4f !important;
}

.contact-input.is-valid {
    border-color: #4d987a !important;
}

.invalid-feedback {
    font-size: 0.65rem;
}

.form-help-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;
}

.message-counter {
    flex-shrink: 0;

    padding-top: 0.25rem;

    color: #9AA39F;

    font-size: 0.6rem;
}


/* =========================================================
   FORM ACTION
========================================================= */

.contact-form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-top: 1.2rem;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    min-height: 46px;

    padding: 0.7rem 1.1rem;

    border: 0;
    border-radius: 999px;

    background-color: var(--accent-coral);
    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.contact-submit-btn:hover {
    background-color: #E65D3F;

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(255, 111, 76, 0.22);
}

.contact-submit-btn:focus-visible {
    outline: 3px solid rgba(255, 111, 76, 0.24);
    outline-offset: 3px;
}

.contact-form-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--text-gray);

    font-size: 0.6rem;
}

.contact-form-note i {
    color: var(--primary-green);
}


/* Status */
.contact-form-status {
    display: none;

    margin-top: 1rem;
    padding: 0.8rem 0.9rem;

    border-radius: 12px;

    font-size: 0.7rem;
    line-height: 1.5;
}

.contact-form-status.show {
    display: block;
}

.contact-form-status.success {
    background-color: rgba(77, 152, 122, 0.08);
    color: #39765d;
}

.contact-form-status.warning {
    background-color: rgba(255, 111, 76, 0.08);
    color: #A64D39;
}


/* =========================================================
   CONTACT INFO CARD
========================================================= */

.contact-info-card {
    position: relative;
    z-index: 1;

    height: 100%;

    padding: 2rem;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--primary-green),
            #124c45
        );

    color: var(--secondary-white);

    box-shadow:
        0 14px 35px rgba(14, 59, 54, 0.13);
}

.contact-info-card h3 {
    margin-bottom: 0.8rem;

    font-family: "Poppins", sans-serif;
    font-size: 1.45rem;
    line-height: 1.25;

    color: var(--secondary-white);
}

.contact-info-card > p {
    margin-bottom: 1.5rem;

    color: rgba(250, 248, 245, 0.68);

    font-size: 0.8rem;
    line-height: 1.7;
}


/* =========================================================
   CONTACT METHODS
========================================================= */

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    padding: 0.85rem 0;

    border-top: 1px solid rgba(250, 248, 245, 0.08);
}

.contact-method-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background-color: rgba(250, 248, 245, 0.07);

    color: var(--accent-coral);

    font-size: 0.9rem;
}

.contact-method-icon.whatsapp {
    color: #79D2A4;
}

.contact-method-icon.github {
    color: #FFFFFF;
}

.contact-method-icon.facebook {
    color: #8BB8FF;
}

.contact-method-content {
    min-width: 0;
}

.contact-method-content > span {
    display: block;

    margin-bottom: 0.15rem;

    color: rgba(250, 248, 245, 0.45);

    font-family: "Poppins", sans-serif;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.contact-method-content > strong {
    display: block;

    margin-bottom: 0.35rem;

    color: rgba(250, 248, 245, 0.9);

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
}

.contact-method-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-method-links a,
.contact-main-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    max-width: 100%;

    color: rgba(250, 248, 245, 0.78);

    font-size: 0.68rem;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.contact-method-links a:hover,
.contact-main-link:hover {
    color: var(--accent-coral);

    transform: translateX(3px);
}

.contact-main-link {
    word-break: break-word;
}

.contact-main-link i,
.contact-method-links i {
    font-size: 0.55rem;
}


/* =========================================================
   QUICK CTA
========================================================= */

.contact-quick-cta {
    margin-top: 1.3rem;
    padding: 1rem;

    border: 1px solid rgba(250, 248, 245, 0.1);
    border-radius: 15px;

    background-color: rgba(250, 248, 245, 0.045);
}

.contact-quick-cta > span {
    display: block;

    margin-bottom: 0.45rem;

    color: rgba(250, 248, 245, 0.45);

    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.contact-quick-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    color: var(--secondary-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.contact-quick-cta a:hover {
    color: var(--accent-coral);
    transform: translateX(3px);
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.contact-bottom-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    margin-top: 1.5rem;
}

.contact-bottom-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 1rem 1.1rem;

    border: 1px solid rgba(14, 59, 54, 0.08);
    border-radius: 16px;

    background-color: #FFFFFF;
}

.contact-bottom-item > i {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background-color: rgba(14, 59, 54, 0.07);

    color: var(--primary-green);

    font-size: 0.72rem;
}

.contact-bottom-item strong {
    display: block;

    margin-bottom: 0.15rem;

    color: var(--text-dark);

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
}

.contact-bottom-item span {
    display: block;

    color: var(--text-gray);

    font-size: 0.62rem;
    line-height: 1.5;
}


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

@media (max-width: 991.98px) {

    .contact-section {
        padding: 5.5rem 0;
    }
}


@media (max-width: 767.98px) {

    .contact-form-card,
    .contact-info-card {
        padding: 1.4rem;
    }

    .contact-bottom-strip {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {

    .contact-section {
        padding: 4.5rem 0;
    }

    .contact-card-header {
        gap: 0.7rem;
    }

    .contact-card-header h3 {
        font-size: 1.15rem;
    }

    .contact-form-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-submit-btn {
        width: 100%;
    }

    .contact-form-note {
        align-self: center;
    }
}


 /* =========================================================
    FOOTER
 ========================================================= */

.site-footer {
    position: relative;

    padding: 5rem 0 1.5rem;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 111, 76, 0.08),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #0E3B36 0%,
            #082C29 100%
        );

    color: #FAF8F5;

    overflow: hidden;
}

.site-footer::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -170px;
    bottom: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(250, 248, 245, 0.07),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   MAIN FOOTER
 ========================================================= */

.footer-main {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr 1.2fr;

    gap: 3rem;
}


/* =========================================================
   BRAND
 ========================================================= */

.footer-logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 1.2rem;

    color: #FAF8F5;

    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}

.footer-logo span {
    color: var(--accent-coral);
}

.footer-logo:hover {
    color: #FAF8F5;

    transform: translateY(-2px);
}

.footer-description {
    max-width: 360px;

    margin-bottom: 1.2rem;

    color: rgba(250, 248, 245, 0.65);

    font-size: 0.8rem;
    line-height: 1.75;
}


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

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.55rem 0.75rem;

    border: 1px solid rgba(250, 248, 245, 0.1);
    border-radius: 999px;

    background-color: rgba(250, 248, 245, 0.045);

    color: rgba(250, 248, 245, 0.65);

    font-size: 0.62rem;
}

.footer-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background-color: #74D5AE;

    box-shadow:
        0 0 0 4px rgba(116, 213, 174, 0.08);
}


/* =========================================================
   COLUMNS
 ========================================================= */

.footer-column h3 {
    margin-bottom: 1rem;

    color: #FAF8F5;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}


/* =========================================================
   NAV LINKS
 ========================================================= */

.footer-links {
    list-style: none;

    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.55rem;
}

.footer-links a {
    color: rgba(250, 248, 245, 0.6);

    font-size: 0.72rem;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-links a:hover {
    color: var(--accent-coral);

    transform: translateX(3px);
}


/* =========================================================
   TECHNOLOGIES
 ========================================================= */

.footer-tech {
    display: flex;
    flex-wrap: wrap;

    gap: 0.45rem;
}

.footer-tech span {
    padding: 0.4rem 0.55rem;

    border: 1px solid rgba(250, 248, 245, 0.1);
    border-radius: 999px;

    background-color: rgba(250, 248, 245, 0.045);

    color: rgba(250, 248, 245, 0.65);

    font-size: 0.57rem;
    font-weight: 600;
}


/* =========================================================
   CONTACT
 ========================================================= */

.footer-contact > p {
    margin-bottom: 1rem;

    color: rgba(250, 248, 245, 0.58);

    font-size: 0.7rem;
    line-height: 1.6;
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin-bottom: 0.65rem;

    color: rgba(250, 248, 245, 0.65);

    font-size: 0.68rem;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-contact-link i {
    width: 20px;

    color: var(--accent-coral);

    text-align: center;
}

.footer-contact-link:hover {
    color: #FAF8F5;

    transform: translateX(3px);
}


/* =========================================================
   FOOTER CTA
 ========================================================= */

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin-top: 0.55rem;
    padding: 0.65rem 0.85rem;

    border-radius: 999px;

    background-color: var(--accent-coral);

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.footer-cta:hover {
    color: #FFFFFF;

    background-color: #E65D3F;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 111, 76, 0.2);
}


/* =========================================================
   DIVIDER
 ========================================================= */

.footer-divider {
    position: relative;
    z-index: 1;

    height: 1px;

    margin: 3rem 0 1.4rem;

    background-color: rgba(250, 248, 245, 0.1);
}


/* =========================================================
   BOTTOM
 ========================================================= */

.footer-bottom {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 1rem;
}

.footer-copyright {
    color: rgba(250, 248, 245, 0.45);

    font-size: 0.62rem;
}

.footer-copyright strong {
    color: rgba(250, 248, 245, 0.75);
}


/* =========================================================
   SOCIALS
 ========================================================= */

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;
}

.footer-socials a {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(250, 248, 245, 0.1);
    border-radius: 50%;

    background-color: rgba(250, 248, 245, 0.045);

    color: rgba(250, 248, 245, 0.65);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.footer-socials a:hover {
    transform: translateY(-3px);

    background-color: var(--accent-coral);

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

    color: #FFFFFF;
}


/* =========================================================
   BACK TO TOP
 ========================================================= */

.footer-back-top {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    color: rgba(250, 248, 245, 0.55);

    font-size: 0.62rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-back-top:hover {
    color: var(--accent-coral);

    transform: translateY(-2px);
}


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

@media (max-width: 991.98px) {

    .site-footer {
        padding-top: 4.5rem;
    }

    .footer-main {
        grid-template-columns: 1.2fr 1fr;

        gap: 2.5rem;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
    }

    .footer-socials {
        justify-content: flex-end;
    }

    .footer-back-top {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


@media (max-width: 575.98px) {

    .site-footer {
        padding: 4rem 0 1.2rem;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .footer-logo {
        font-size: 1.75rem;
    }

    .footer-description {
        max-width: 100%;
    }

    .footer-divider {
        margin-top: 2.3rem;
    }

    .footer-bottom {
        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-back-top {
        grid-column: auto;

        justify-self: center;
    }
}









/* About section reveal */
.about-section .section-eyebrow,
.about-section .section-title,
.about-section .section-intro,
.about-story,
.about-focus-card,
.about-tech-strip {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-section.about-visible .section-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}
.about-section.about-visible .section-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}
.about-section.about-visible .section-intro {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.about-section.about-visible .about-story {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.28s;
}
.about-section.about-visible .about-focus-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.about-section.about-visible .about-focus-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
}
.about-section.about-visible .about-focus-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.44s;
}
.about-section.about-visible .about-tech-strip {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

/* Data section reveal */
.chart-showcase,
.data-explanation,
.data-tech-line {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.data-section.data-visible .chart-showcase {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}
.data-section.data-visible .data-explanation {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.data-section.data-visible .data-tech-line {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

/* =========================================================
   HERO PHOTO BADGE
   ========================================================= */

.hero-photo-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.65rem;

    padding: 0.4rem 0.9rem 0.4rem 0.4rem;

    border: 1px solid rgba(250, 248, 245, 0.16);
    border-radius: 999px;

    background: rgba(250, 248, 245, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}

.hero-photo-frame {
    width: 44px;
    height: 44px;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;
    border: 2px solid var(--accent-coral);

    background: linear-gradient(135deg, rgba(255, 111, 76, 0.35), rgba(14, 59, 54, 0.55));

    color: rgba(250, 248, 245, 0.9);
    font-size: 1.1rem;

    box-shadow: 0 8px 18px rgba(255, 111, 76, 0.22);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

/* Rehefa asolo <img> tena izy ilay placeholder */
.hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-photo-name {
    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;

    color: rgba(250, 248, 245, 0.9);
    white-space: nowrap;
}

/* Hover mivantana eo amin'ny badge */
.hero-photo-badge:hover {
    background: rgba(250, 248, 245, 0.1);
    border-color: rgba(250, 248, 245, 0.32);
}

.hero-photo-badge:hover .hero-photo-frame {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 12px 24px rgba(255, 111, 76, 0.32);
}

/* 🎁 Bonus : mihetsika koa ny sary rehefa hover-ana ny bouton akaiky azy */
.hero-actions:has(.btn:hover) .hero-photo-frame {
    transform: scale(1.1) rotate(4deg);
    border-color: var(--secondary-white);
    box-shadow: 0 14px 28px rgba(255, 111, 76, 0.4);
}

@media (max-width: 575.98px) {
    .hero-photo-badge {
        margin-top: 0.25rem;
    }
}

/* =========================================================
   PHOTO MODAL
   ========================================================= */

.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 2rem;

    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-modal.active {
    display: flex;
    opacity: 1;
}

.photo-modal-img {
    max-width: min(90vw, 700px);
    max-height: 85vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    border: 2px solid rgba(250, 248, 245, 0.2);

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 111, 76, 0.18);

    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.photo-modal.active .photo-modal-img {
    transform: scale(1);
}

/* Bouton fermer */
.photo-close {
    position: absolute;
    top: 1.5rem;
    right: 1.8rem;

    width: 45px;
    height: 45px;

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

    border: 1px solid rgba(250, 248, 245, 0.2);
    border-radius: 50%;

    background: rgba(250, 248, 245, 0.08);
    color: var(--secondary-white);

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}

.photo-close:hover {
    transform: rotate(90deg) scale(1.08);

    background: rgba(255, 111, 76, 0.2);
    border-color: var(--accent-coral);
}

/* Tsy hisy style default an'ny button hanimba ny badge */
.hero-photo-badge {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}