:root {
    --ac: #00DEFF;
    --ac2: rgba(0, 222, 255, .12);
    --ac3: rgba(0, 222, 255, .06);
    --ac-glow: rgba(0, 222, 255, .55);
    --ac-bd: rgba(0, 222, 255, .28);
    --bg: #000;
    --bg2: #070707;
    --bg3: #0e0e0e;
    --bg4: #161616;
    --bd: rgba(255, 255, 255, .08);
    --bd2: rgba(255, 255, 255, .13);
    --tx: #fff;
    --tx-m: rgba(255, 255, 255, .62);
    --tx-d: rgba(255, 255, 255, .38);
    --f: 'DM Sans', sans-serif;
    --fh: 'Space Grotesk', sans-serif;
    --r: 12px;
    --rl: 20px;
    --ease: cubic-bezier(.25, .46, .45, .94);
    --t: .3s;
    --shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

html[data-theme="light"] {
    --ac: #0099bb;
    --ac2: rgba(0, 153, 187, .1);
    --ac3: rgba(0, 153, 187, .05);
    --ac-glow: rgba(0, 153, 187, .4);
    --ac-bd: rgba(0, 153, 187, .35);
    --bg: #f5f7fa;
    --bg2: #eef0f4;
    --bg3: #ffffff;
    --bg4: #f0f2f6;
    --bd: rgba(0, 0, 0, .09);
    --bd2: rgba(0, 0, 0, .13);
    --tx: #0d0d0d;
    --tx-m: rgba(0, 0, 0, .58);
    --tx-d: rgba(0, 0, 0, .38);
    --shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--f);
    background: var(--bg);
    color: var(--tx);
    overflow-x: hidden;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background .35s ease, color .35s ease;
    position: relative
}

/* Transitions ciblées dark/light mode — remplace l'ancien body *{} */
.pc,
.skc,
.svc,
.tec,
.stat,
.tli,
.np,
.sob,
.fta,
.cti,
.ptech,
.ptag,
.lbl,
.btn,
.ncta,
.pbtn,
#themeBtn,
.hpill,
.mtch,
.mclose button,
.mft a,
.msect,
.skbarlbl span:last-child,
.sktrack,
.skfill,
.stn,
.stl,
.ski,
.pd,
.abt,
.hl,
.hd,
.sm,
.sd,
.svcd,
.svct,
.tit,
.tip,
.pn,
.flb,
.fi,
.fte {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

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

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

button {
    font-family: var(--f)
}

html::-webkit-scrollbar {
    width: 6px
}

html::-webkit-scrollbar-track {
    background: var(--bg)
}

html::-webkit-scrollbar-thumb {
    background: var(--ac);
    border-radius: 6px
}

.skip {
    position: fixed;
    top: -120px;
    left: 20px;
    z-index: 99999;
    background: var(--ac);
    color: var(--bg);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    transition: top .2s
}

.skip:focus {
    top: 20px
}

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

#prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 9998;
    background: var(--ac);
    box-shadow: 0 0 8px var(--ac);
    width: 0;
    transition: width .08s linear
}

* {
    cursor: none
}

#cur {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--ac);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99996;
    mix-blend-mode: screen;
    box-shadow: 0 0 16px rgba(0, 222, 255, .9), 0 0 60px rgba(0, 222, 255, .5);
    will-change: left, top;
    transition: width .14s, height .14s, border-radius .14s
}

#cur-r {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 222, 255, .35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99995;
    will-change: left, top;
    transition: width .2s, height .2s, border-color .2s
}

#cur.hov {
    width: 4px;
    height: 4px
}

#cur-r.hov {
    width: 44px;
    height: 44px;
    border-color: rgba(0, 222, 255, .7)
}

#cur.txt {
    width: 2px;
    height: 20px;
    border-radius: 2px
}

#cur-r.txt {
    opacity: 0
}

@media(max-width:768px) {

    #cur,
    #cur-r {
        display: none
    }

    * {
        cursor: auto
    }
}

#ldr {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    transition: opacity .5s ease, visibility .5s ease
}

#ldr.out {
    opacity: 0;
    visibility: hidden
}

.lnm {
    font-family: var(--fh);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 10px
}

.lnm em {
    font-style: normal;
    color: var(--ac)
}

.lbar {
    width: 160px;
    height: 1.5px;
    background: rgba(255, 255, 255, .07);
    border-radius: 2px;
    overflow: hidden
}

html[data-theme="light"] .lbar {
    background: rgba(0, 0, 0, .1)
}

.lfill {
    height: 100%;
    width: 0;
    background: var(--ac);
    box-shadow: 0 0 10px var(--ac-glow);
    animation: lf 1.4s var(--ease) forwards
}

@keyframes lf {
    to {
        width: 100%
    }
}

.lpct {
    font-size: .72rem;
    letter-spacing: 4px;
    color: var(--tx-m)
}

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

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fdD {
    from {
        opacity: 0;
        transform: translateY(-22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fd {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes orb {
    to {
        transform: rotate(360deg)
    }
}

@keyframes flt {

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

    50% {
        transform: translateY(-9px)
    }
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(0, 222, 255, .38)
    }

    50% {
        box-shadow: 0 0 28px rgba(0, 222, 255, .82)
    }
}

@keyframes sDot {

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

    50% {
        transform: translateY(8px);
        opacity: .15
    }
}

@keyframes dyn {
    0% {
        opacity: 0;
        transform: translateY(14px) rotate(-3deg)
    }

    8% {
        opacity: 1;
        transform: none
    }

    30% {
        opacity: 1;
        transform: none
    }

    38% {
        opacity: 0;
        transform: translateY(-14px) rotate(3deg)
    }

    100% {
        opacity: 0
    }
}

@keyframes mq {
    from {
        transform: translateX(0)
    }

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

@keyframes glitch {

    0%,
    94%,
    100% {
        clip-path: none;
        transform: none
    }

    95% {
        clip-path: inset(20% 0 50% 0);
        transform: translateX(-4px)
    }

    96% {
        clip-path: inset(60% 0 10% 0);
        transform: translateX(4px)
    }

    97% {
        clip-path: inset(40% 0 30% 0);
        transform: translateX(-2px)
    }
}

@keyframes scanline {
    0% {
        top: -2px
    }

    100% {
        top: 100%
    }
}

.rv {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rvL {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rvR {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rv.on,
.rvL.on,
.rvR.on {
    opacity: 1;
    transform: none
}

#nav {
    position: fixed;
    top: 16px;
    left: 0;
    width: 100%;
    z-index: 1000;
    animation: fdD .6s ease .2s both;
    transition: top .32s var(--ease)
}

.ni {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 18px
}

.np {
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--bd);
    border-radius: 100px;
    padding: 8px 8px 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    transition: border-color var(--t)
}

html[data-theme="light"] .np {
    background: rgba(255, 255, 255, .88)
}

.np:hover {
    border-color: var(--ac-bd)
}

.logo {
    font-family: var(--fh);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .2px
}

.logo em {
    font-style: normal;
    color: var(--ac)
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1px
}

.nl {
    color: var(--tx-m);
    font-size: .83rem;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 100px;
    transition: color var(--t), background var(--t);
    position: relative
}

.nl::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--ac);
    opacity: 0;
    transition: opacity var(--t)
}

.nl:hover {
    color: var(--tx);
    background: rgba(255, 255, 255, .04)
}

html[data-theme="light"] .nl:hover {
    background: rgba(0, 0, 0, .05)
}

.nl.on {
    color: var(--tx)
}

.nl.on::after {
    opacity: 1
}

.ncta {
    font-family: var(--f);
    font-size: .8rem;
    font-weight: 600;
    background: var(--ac);
    color: var(--bg);
    padding: 10px 20px;
    border-radius: 100px;
    border: none;
    white-space: nowrap;
    transition: box-shadow var(--t), transform var(--t)
}

.ncta:hover {
    box-shadow: 0 0 24px rgba(0, 222, 255, .5);
    transform: scale(1.04)
}

.nmb {
    display: none;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--bd);
    color: var(--tx);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: .9rem;
    align-items: center;
    justify-content: center;
    transition: all var(--t)
}

.nmb:hover {
    background: var(--ac2);
    border-color: var(--ac-bd)
}

#mm {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .97);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all .35s var(--ease)
}

html[data-theme="light"] #mm {
    background: rgba(245, 247, 250, .98)
}

#mm.on {
    opacity: 1;
    visibility: visible
}

.ml {
    font-family: var(--fh);
    font-size: 1.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color .2s, transform .2s
}

html[data-theme="light"] .ml {
    color: rgba(0, 0, 0, .4)
}

.ml:hover {
    color: var(--ac);
    transform: translateX(8px)
}

.mc {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--bd);
    color: var(--tx);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem
}

#home {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 90px
}

.h-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 60% 55% at 65% 50%, rgba(0, 222, 255, .07) 0%, transparent 65%), radial-gradient(ellipse 30% 45% at 10% 85%, rgba(0, 222, 255, .045) 0%, transparent 55%);
    animation: hG 10s ease-in-out infinite alternate
}

html[data-theme="light"] .h-mesh {
    background: radial-gradient(ellipse 60% 55% at 65% 50%, rgba(0, 153, 187, .07) 0%, transparent 65%), radial-gradient(ellipse 30% 45% at 10% 85%, rgba(0, 153, 187, .04) 0%, transparent 55%)
}

@keyframes hG {
    from {
        opacity: .5;
        transform: scale(1)
    }

    to {
        opacity: 1;
        transform: scale(1.05)
    }
}

.h-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .032;
    background-image: linear-gradient(rgba(0, 222, 255, .8) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 222, 255, .8) 1px, transparent 1px);
    background-size: 60px 60px
}

.h-scan {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: .022
}

.h-scan::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(transparent, var(--ac), transparent);
    animation: scanline 10s linear infinite
}

.hw {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: 0 auto;
    padding: 44px 18px 88px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
    width: 100%
}

.hbadge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(0, 222, 255, .07);
    border: 1px solid rgba(0, 222, 255, .2);
    border-radius: 100px;
    padding: 5px 16px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: 24px;
    animation: fd .9s ease .4s both
}

.hdot {
    width: 6px;
    height: 6px;
    background: var(--ac);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0
}

.h1 {
    font-family: var(--fh);
    font-size: clamp(2.7rem, 8vw, 6.8rem);
    font-weight: 700;
    line-height: .98;
    margin-bottom: 4px;
    animation: glitch 12s ease-in-out infinite
}

.h1s {
    display: block;
    animation: fdU .7s ease .5s both
}

.h1dw {
    display: block;
    position: relative;
    height: 1.06em;
    overflow: hidden
}

.h1d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(14px) rotate(-3deg);
    background: linear-gradient(135deg, var(--ac) 0%, #009bb8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: dyn 7.5s ease infinite
}

.h1d:nth-child(1) {
    animation-delay: 0s
}

.h1d:nth-child(2) {
    animation-delay: 2.5s
}

.h1d:nth-child(3) {
    animation-delay: 5s
}

.hn {
    font-family: var(--fh);
    font-size: clamp(1.9rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--tx);
    margin-bottom: 24px;
    animation: fdU .7s ease .65s both
}

.hd {
    font-size: 1rem;
    line-height: 1.88;
    color: var(--tx-m);
    max-width: 470px;
    margin-bottom: 38px;
    animation: fd 1s ease .8s both
}

.ha {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    animation: fdU .7s ease 1s both
}

.sh2b {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .25);
    animation: fd 1s ease 1.5s both
}

.sm {
    width: 20px;
    height: 32px;
    border: 1.5px solid rgba(0, 222, 255, .28);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 5px
}

.sd {
    width: 3px;
    height: 6px;
    background: var(--ac);
    border-radius: 2px;
    animation: sDot 1.8s ease-in-out infinite
}

.hpc {
    animation: fd 1s ease .6s both
}

@media(max-width:1100px) {
    .hw {
        grid-template-columns: 1fr
    }

    .pg {
        grid-template-columns: 1fr
    }

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

    .svg2 {
        grid-template-columns: 1fr 1fr
    }

    .exg {
        grid-template-columns: 1fr
    }

    .ctw {
        grid-template-columns: 1fr
    }

    .teg {
        grid-template-columns: 1fr 1fr
    }

    .skg {
        grid-template-columns: 1fr
    }

    .hpills {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
        animation: none
    }

    .hpf {
        width: clamp(190px, 28vw, 250px);
        margin: 0 auto
    }
}

@media(max-width:768px) {
    .hpc {
        display: flex;
        justify-content: center;
        margin-top: 32px
    }
}

.hpf {
    position: relative;
    width: clamp(190px, 18vw, 250px);
    aspect-ratio: 1
}

.hpo {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 222, 255, .2);
    animation: orb 14s linear infinite
}

.hpo::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ac);
    box-shadow: 0 0 12px var(--ac)
}

.hp {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    border: 2px solid rgba(0, 222, 255, .2);
    box-shadow: 0 0 40px rgba(0, 222, 255, .16), 0 0 100px rgba(0, 222, 255, .08);
    animation: flt 6.5s ease-in-out infinite;
    position: relative;
    z-index: 1
}

.hpfb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d0d0d, #1c1c1c);
    border: 2px solid rgba(0, 222, 255, .2);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-size: 3rem;
    font-weight: 700;
    color: var(--ac);
    animation: flt 6.5s ease-in-out infinite
}

html[data-theme="light"] .hpfb {
    background: linear-gradient(135deg, #e0f0f5, #c8e8f0)
}

.hpills {
    position: absolute;
    right: -88px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fd 1s ease 1.2s both
}

.hpill {
    background: rgba(0, 0, 0, .88);
    border: 1px solid var(--bd);
    border-radius: 100px;
    padding: 6px 13px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--tx-m);
    white-space: nowrap;
    backdrop-filter: blur(10px);
    transition: border-color var(--t), color var(--t)
}

.hpill:hover {
    border-color: var(--ac-bd);
    color: var(--ac)
}

html[data-theme="light"] .hpill {
    background: rgba(255, 255, 255, .92)
}

@media(max-width:768px) {
    .hpc {
        display: block !important
    }

    .hpf {
        width: clamp(150px, 42vw, 220px);
        margin: 0 auto
    }

    .hw {
        grid-template-columns: 1fr !important
    }

    .hpills {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
        animation: none
    }

    .hpo {
        inset: -10px
    }
}

@media(max-width:480px) {
    .hpf {
        width: clamp(140px, 52vw, 190px)
    }

    .hpills {
        gap: 7px
    }

    .hpill {
        font-size: .68rem;
        padding: 6px 12px
    }
}

section {
    padding: 106px 0
}

.page-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    filter: saturate(1.05) contrast(1.05) brightness(.75);
    opacity: .35;
    pointer-events: none;
    transform: scale(1.02)
}

.page-bg::selection {
    background: transparent
}

.c {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 18px
}

.lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ac);
    display: block;
    margin-bottom: 10px
}

.st {
    font-family: var(--fh);
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 13px
}

.sh2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 54px;
    gap: 18px;
    flex-wrap: wrap
}

.div {
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent, rgba(0, 222, 255, .18), transparent)
}

.btn {
    font-family: var(--f);
    font-size: .86rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    border: none;
    transition: all var(--t);
    position: relative;
    overflow: hidden
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(255, 255, 255, .07);
    transition: opacity .2s
}

.btn:hover::before {
    opacity: 1
}

.btn-p {
    background: var(--ac);
    color: var(--bg);
    box-shadow: 0 0 20px rgba(0, 222, 255, .28)
}

.btn-p:hover {
    box-shadow: 0 0 36px rgba(0, 222, 255, .6);
    transform: translateY(-2px)
}

.btn-g {
    background: transparent;
    color: var(--tx);
    border: 1px solid var(--bd)
}

.btn-g:hover {
    border-color: var(--ac-bd);
    color: var(--ac);
    transform: translateY(-2px)
}

#projects {
    background: var(--bg2)
}

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

.pc {
    border-radius: var(--rl);
    border: 1px solid var(--bd);
    background: var(--bg3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
    position: relative
}

.pc::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t);
    background: radial-gradient(ellipse at center, rgba(0, 222, 255, .06) 0%, transparent 70%)
}

.pc:hover {
    border-color: var(--ac-bd);
    transform: translateY(-6px);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .55)
}

.pc:hover::after {
    opacity: 1
}

.pbar {
    height: 2.5px;
    width: 100%;
    flex-shrink: 0
}

.pvis {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg4);
    overflow: hidden
}

.pvis svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.pov {
    position: absolute;
    inset: 0;
    background: rgba(0, 222, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t)
}

.pc:hover .pov {
    opacity: 1
}

.pov span {
    font-family: var(--fh);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ac);
    border: 1px solid var(--ac-bd);
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(8px)
}

.pb {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ptags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.ptag {
    font-size: .68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 222, 255, .08);
    color: var(--ac);
    border: 1px solid rgba(0, 222, 255, .14)
}

.pn {
    font-family: var(--fh);
    font-size: 1.28rem;
    font-weight: 700
}

.pd {
    font-size: .86rem;
    line-height: 1.75;
    color: var(--tx-m);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.pst {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px
}

.ptech {
    font-size: .72rem;
    padding: 3px 11px;
    border-radius: 100px;
    border: 1px solid var(--bd);
    color: var(--tx-d);
    transition: border-color .2s, color .2s
}

.pc:hover .ptech {
    border-color: rgba(0, 222, 255, .18);
    color: rgba(0, 222, 255, .65)
}

#about {
    background: var(--bg)
}

.abt {
    font-family: var(--fh);
    font-size: clamp(1.25rem, 2.5vw, 1.95rem);
    font-weight: 500;
    line-height: 1.58;
    color: rgba(255, 255, 255, .6);
    max-width: 840px;
    margin: 0
}

html[data-theme="light"] .abt {
    color: rgba(0, 0, 0, .74)
}

.abt .hl {
    background: linear-gradient(135deg, var(--ac), #009bb8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin-top: 68px
}

.stat {
    padding: 24px 16px;
    border-radius: var(--r);
    border: 1px solid var(--bd);
    background: var(--bg3);
    text-align: center;
    transition: border-color var(--t), transform var(--t)
}

.stat:hover {
    border-color: var(--ac-bd);
    transform: translateY(-4px)
}

.stn {
    font-family: var(--fh);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--ac), #009bb8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.stl {
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--tx-m)
}

#skills {
    background: var(--bg2)
}

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

.skc {
    padding: 28px;
    border-radius: var(--r);
    border: 1px solid var(--bd);
    background: var(--bg3);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t)
}

.skc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ac), #006078);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t)
}

.skc:hover {
    border-color: var(--ac-bd);
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .35)
}

.skc:hover::before {
    transform: scaleX(1)
}

.ski {
    font-size: 1.4rem;
    color: var(--ac);
    margin-bottom: 12px
}

.skt {
    font-family: var(--fh);
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: 18px
}

.skbars {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.skbar {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.skbarlbl {
    display: flex;
    justify-content: space-between;
    font-size: .74rem;
    color: var(--tx-m)
}

.skbarlbl span:last-child {
    color: var(--ac);
    font-weight: 600
}

.sktrack {
    height: 3px;
    background: rgba(255, 255, 255, .06);
    border-radius: 3px;
    overflow: hidden
}

html[data-theme="light"] .sktrack {
    background: rgba(0, 0, 0, .08)
}

.skfill {
    height: 100%;
    background: linear-gradient(90deg, var(--ac), #006e88);
    border-radius: 3px;
    width: 0;
    transition: width 1.2s var(--ease)
}

.skfill.on {
    width: var(--w)
}

#services {
    background: var(--bg)
}

.svg2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.svc {
    padding: 32px 24px;
    border-radius: var(--rl);
    border: 1px solid var(--bd);
    background: var(--bg3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: all var(--t)
}

.svc::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 110%, rgba(0, 222, 255, .09) 0%, transparent 65%);
    opacity: 0;
    transition: opacity var(--t)
}

.svc:hover {
    border-color: var(--ac-bd);
    transform: translateY(-7px);
    box-shadow: 0 26px 52px rgba(0, 0, 0, .45)
}

.svc:hover::after {
    opacity: 1
}

.svci {
    width: 46px;
    height: 46px;
    border-radius: var(--r);
    background: rgba(0, 222, 255, .09);
    border: 1px solid rgba(0, 222, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--ac);
    transition: background var(--t)
}

.svc:hover .svci {
    background: rgba(0, 222, 255, .16)
}

.svct {
    font-family: var(--fh);
    font-size: 1.1rem;
    font-weight: 600
}

.svcd {
    font-size: .86rem;
    line-height: 1.78;
    color: var(--tx-m);
    flex: 1
}

.svcl {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--t)
}

.svc:hover .svcl {
    gap: 9px
}

#experience {
    background: var(--bg2)
}

.exg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px
}

.excl {
    font-family: var(--fh);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tx-m);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px
}

.excl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd)
}

.tl {
    position: relative;
    padding-left: 26px
}

.tl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--ac) 0%, rgba(0, 222, 255, .03) 100%)
}

.tli {
    position: relative;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: var(--r);
    border: 1px solid var(--bd);
    background: var(--bg4);
    transition: border-color var(--t), transform var(--t)
}

.tli:hover {
    border-color: var(--ac-bd);
    transform: translateX(5px)
}

.tli::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ac);
    border: 2px solid var(--bg);
    box-shadow: 0 0 9px rgba(0, 222, 255, .65)
}

html[data-theme="light"] .tli::before {
    border-color: var(--bg3);
    box-shadow: 0 0 9px rgba(0, 153, 187, .5)
}

.tip {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ac);
    opacity: .75;
    margin-bottom: 3px;
    text-transform: uppercase
}

.tit {
    font-family: var(--fh);
    font-size: .94rem;
    font-weight: 600;
    margin-bottom: 3px
}

.tic {
    font-size: .8rem;
    color: var(--tx-m);
    margin-bottom: 6px
}

.tid {
    font-size: .83rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .4)
}

html[data-theme="light"] .tid {
    color: rgba(0, 0, 0, .42)
}

#testi {
    background: var(--bg)
}

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

.tec {
    padding: 28px 24px;
    border-radius: var(--rl);
    border: 1px solid var(--bd);
    background: var(--bg3);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--t), transform var(--t)
}

.tec:hover {
    border-color: var(--ac-bd);
    transform: translateY(-5px)
}

.teq {
    font-size: .88rem;
    line-height: 1.82;
    color: rgba(255, 255, 255, .58);
    font-style: italic;
    flex: 1;
    position: relative;
    padding-top: 4px
}

html[data-theme="light"] .teq {
    color: rgba(0, 0, 0, .55)
}

.teq::before {
    content: '\201C';
    font-size: 2.6rem;
    color: var(--ac);
    line-height: 0;
    vertical-align: -.6em;
    font-style: normal;
    margin-right: 2px
}

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

.teav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #262626);
    border: 1px solid var(--ac-bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ac);
    flex-shrink: 0
}

html[data-theme="light"] .teav {
    background: linear-gradient(135deg, #e8f4f7, #d0eaf0)
}

.tean {
    font-family: var(--fh);
    font-size: .88rem;
    font-weight: 600
}

.tear {
    font-size: .76rem;
    color: var(--tx-m)
}

.testars {
    color: var(--ac);
    font-size: .72rem;
    letter-spacing: 2px
}

#contact {
    background: var(--bg2)
}

.ctw {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 52px;
    align-items: start
}

.ctl p {
    font-size: .92rem;
    color: var(--tx-m);
    line-height: 1.82;
    margin-bottom: 30px;
    max-width: 350px
}

.ctis {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px
}

.cti {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--r);
    border: 1px solid var(--bd);
    background: var(--bg3);
    font-size: .86rem;
    transition: border-color var(--t);
    min-width: 0
}

.cti:hover {
    border-color: var(--ac-bd)
}

.cti i {
    color: var(--ac);
    font-size: .9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0
}

.cti a,
.cti span {
    color: var(--tx-m);
    transition: color .2s;
    word-break: break-all;
    overflow-wrap: anywhere;
    min-width: 0
}

.cti a:hover {
    color: var(--ac)
}

.socrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.sob {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--bd);
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-m);
    font-size: .9rem;
    transition: all var(--t)
}

.sob:hover {
    background: var(--ac);
    color: var(--bg);
    border-color: var(--ac);
    transform: translateY(-4px) rotate(10deg);
    box-shadow: 0 0 16px rgba(0, 222, 255, .45)
}

.cf {
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: var(--rl);
    padding: 32px;
    width: 100%;
    min-width: 0
}

.fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px
}

.flb {
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tx-m)
}

.fi,
.fta {
    background: var(--bg4);
    border: 1px solid var(--bd);
    color: var(--tx);
    border-radius: 9px;
    font-family: var(--f);
    font-size: .86rem;
    padding: 11px 14px;
    transition: border-color var(--t), box-shadow var(--t);
    width: 100%
}

.fi:focus,
.fta:focus {
    outline: none;
    border-color: var(--ac-bd);
    box-shadow: 0 0 0 3px rgba(0, 222, 255, .08)
}

.fi::placeholder,
.fta::placeholder {
    color: rgba(255, 255, 255, .2)
}

html[data-theme="light"] .fi::placeholder,
html[data-theme="light"] .fta::placeholder {
    color: rgba(0, 0, 0, .3)
}

.fta {
    resize: vertical;
    min-height: 112px
}

.fsub {
    width: 100%;
    margin-top: 16px;
    justify-content: center;
    font-size: .9rem;
    padding: 14px 28px
}

.mqs {
    border-top: 1px solid var(--bd);
    overflow: hidden;
    padding: 28px 0;
    background: var(--bg3)
}

.mqt {
    display: inline-flex;
    white-space: nowrap;
    animation: mq 24s linear infinite
}

.mqt span {
    font-family: var(--fh);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .16);
    padding: 0 22px;
    transition: color .3s
}

html[data-theme="light"] .mqt span {
    color: rgba(0, 0, 0, .2)
}

.mqt span:hover {
    color: var(--ac)
}

.mqt .dot {
    color: var(--ac);
    font-size: .42rem;
    vertical-align: middle;
    opacity: .7;
    padding: 0 6px
}

footer {
    background: var(--bg);
    padding: 42px 0;
    border-top: 1px solid var(--bd)
}

.fi2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px
}

.fb {
    font-family: var(--fh);
    font-size: .95rem;
    font-weight: 700
}

.fb em {
    font-style: normal;
    color: var(--ac)
}

.fc {
    font-size: .78rem;
    color: rgba(255, 255, 255, .25);
    margin-top: 3px
}

html[data-theme="light"] .fc {
    color: rgba(0, 0, 0, .3)
}

#stp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ac);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 900;
    border: none;
    box-shadow: 0 0 20px rgba(0, 222, 255, .35);
    opacity: 0;
    visibility: hidden;
    transition: all var(--t)
}

#stp.on {
    opacity: 1;
    visibility: visible
}

#stp:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 32px rgba(0, 222, 255, .62)
}

@media(max-width:768px) {
    section {
        padding: 78px 0
    }

    nav ul,
    .ncta {
        display: none
    }

    .nmb {
        display: flex
    }

    .np {
        padding: 8px 10px 8px 18px
    }

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

    .cf {
        padding: 20px
    }

    .ha {
        flex-direction: column
    }

    .ha .btn {
        width: 100%;
        justify-content: center
    }

    .fi2 {
        flex-direction: column;
        text-align: center
    }

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

    .svg2 {
        grid-template-columns: 1fr
    }

    .teg {
        grid-template-columns: 1fr
    }

    .pg {
        grid-template-columns: 1fr
    }

    .exg {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ctw {
        grid-template-columns: 1fr;
        gap: 32px
    }
}

@media(max-width:480px) {
    .stats {
        grid-template-columns: 1fr
    }

    .h1 {
        font-size: 2.4rem
    }

    .hn {
        font-size: 1.8rem
    }
}

/* ── THEME TOGGLE BUTTON ── */
#themeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--bg4);
    color: var(--tx-m);
    font-size: .88rem;
    cursor: none;
    flex-shrink: 0;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}

#themeBtn:hover {
    background: var(--ac2);
    border-color: var(--ac-bd);
    color: var(--ac);
    transform: rotate(18deg)
}

html[data-theme="light"] #themeBtn {
    background: #e8f4f7;
    border-color: rgba(0, 153, 187, .25)
}

/* PROJECT BUTTON */
.pbtn {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--f);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ac);
    background: rgba(0, 222, 255, .07);
    border: 1px solid rgba(0, 222, 255, .22);
    border-radius: 100px;
    padding: 9px 20px;
    transition: all var(--t)
}

.pbtn:hover {
    background: var(--ac);
    color: var(--bg);
    gap: 11px
}

/* ── MODAL OVERLAY ── */
#modalOverlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s var(--ease), visibility .38s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

html[data-theme="light"] #modalOverlay {
    background: rgba(0, 0, 0, .65)
}

#modalOverlay.open {
    opacity: 1;
    visibility: visible
}

.modal {
    background: var(--bg3);
    border: 1px solid var(--bd2);
    border-radius: 24px;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(28px) scale(.97);
    transition: transform .38s var(--ease);
    scrollbar-width: thin;
    scrollbar-color: var(--ac) transparent
}

#modalOverlay.open .modal {
    transform: none
}

.modal::-webkit-scrollbar {
    width: 4px
}

.modal::-webkit-scrollbar-thumb {
    background: var(--ac);
    border-radius: 4px
}

.mclose {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px 0;
    background: linear-gradient(var(--bg3), transparent)
}

.mclose button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--bd);
    color: var(--tx-m);
    font-size: 1rem;
    transition: all var(--t);
    cursor: none
}

html[data-theme="light"] .mclose button {
    background: rgba(0, 0, 0, .06)
}

.mclose button:hover {
    background: rgba(239, 68, 68, .2);
    border-color: rgba(239, 68, 68, .4);
    color: #ef4444
}

.mbody {
    padding: 0 32px 36px
}

.mheader {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px
}

.mico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0
}

.mttl {
    font-family: var(--fh);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px
}

.msubtl {
    font-size: .88rem;
    color: var(--tx-m);
    line-height: 1.6;
    max-width: 560px
}

.mtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px
}

.mtag {
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(0, 222, 255, .08);
    border: 1px solid rgba(0, 222, 255, .22);
    color: var(--ac)
}

.mscreens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px
}

.mscreen {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--bd);
    background: var(--bg4)
}

.mscreen svg {
    width: 100%;
    display: block
}

.mslbl {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tx-m);
    text-align: center;
    padding: 10px 0 8px;
    background: var(--bg4)
}

.msec {
    margin-bottom: 22px
}

.msect {
    font-family: var(--fh);
    font-size: .88rem;
    font-weight: 700;
    color: var(--ac);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

.msect::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd)
}

.mfeats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.mfeat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg4);
    border: 1px solid var(--bd);
    font-size: .83rem;
    color: var(--tx-m);
    line-height: 1.55
}

.mfeat i {
    color: var(--ac);
    margin-top: 2px;
    flex-shrink: 0;
    font-size: .82rem
}

.mtech {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.mtch {
    font-size: .8rem;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--bg4);
    border: 1px solid var(--bd);
    color: var(--tx-m);
    transition: all .2s
}

.mtch:hover {
    border-color: var(--ac-bd);
    color: var(--ac)
}

.mfooter {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bd);
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

@media(max-width:600px) {
    .mscreens {
        grid-template-columns: 1fr
    }

    .mfeats {
        grid-template-columns: 1fr
    }

    .mbody {
        padding: 0 18px 24px
    }
}

/* ── 3D TILT CARDS ──────────────────────────────────────────── */
.pc {
    transform-style: preserve-3d;
    will-change: transform
}

.pc .pb,
.pc .pvis {
    transform: translateZ(0);
    transition: transform var(--t)
}

.pc:hover .pb {
    transform: translateZ(12px)
}

/* ── MAGNETIC BTN ────────────────────────────────────────────── */
.btn-mag {
    transition: transform .18s var(--ease), box-shadow .18s var(--ease)
}

/* ── CANVAS PARTICLES ────────────────────────────────────────── */
#c3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .55
}

/* ── HERO NOISE GRAIN ────────────────────────────────────────── */
.h-grain {
    position: absolute;
    inset: -50%;
    z-index: 2;
    pointer-events: none;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    animation: grain 0.4s steps(1) infinite;
    opacity: .028
}

@media(max-width:768px) {
    .h-grain {
        display: none
    }
}

@keyframes grain {
    0% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-3%, -4%)
    }

    20% {
        transform: translate(-7%, 2%)
    }

    30% {
        transform: translate(4%, -6%)
    }

    40% {
        transform: translate(-4%, 7%)
    }

    50% {
        transform: translate(-6%, -3%)
    }

    60% {
        transform: translate(3%, 8%)
    }

    70% {
        transform: translate(-7%, -4%)
    }

    80% {
        transform: translate(6%, 3%)
    }

    90% {
        transform: translate(-3%, 6%)
    }

    100% {
        transform: translate(5%, -5%)
    }
}

/* ── SERVICE CARDS 3D FLIP ───────────────────────────────────── */
.svc-wrap {
    perspective: 900px
}

.svc {
    transform-style: preserve-3d;
    backface-visibility: hidden
}

.svc:hover {
    transform: translateY(-7px) rotateX(4deg) rotateY(-3deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 30px rgba(0, 222, 255, .08)
}

/* ── FLOATING TECH ORBS (hero) ───────────────────────────────── */
.orb-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: orbF var(--d, 12s) ease-in-out infinite alternate
}

@keyframes orbF {
    from {
        transform: translate(0, 0) scale(1)
    }

    to {
        transform: translate(var(--tx, 30px), var(--ty, -20px)) scale(1.15)
    }
}

/* ── GLOWING BORDER PULSE on section headers ─────────────────── */
.lbl::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--ac);
    margin-left: 10px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--ac);
    animation: lblPulse 2s ease-in-out infinite alternate
}

@keyframes lblPulse {
    from {
        opacity: .4;
        width: 20px
    }

    to {
        opacity: 1;
        width: 36px
    }
}

/* ── SKILL BARS SHIMMER ──────────────────────────────────────── */
.skfill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: shimmer 2.2s ease-in-out infinite
}

.sktrack {
    position: relative
}

@keyframes shimmer {
    0% {
        left: -60%
    }

    100% {
        left: 120%
    }
}

/* ── TESTIMONIAL 3D HOVER ────────────────────────────────────── */
.tec {
    transform-style: preserve-3d;
    transition: border-color var(--t), transform .4s var(--ease), box-shadow .4s var(--ease)
}

.tec:hover {
    transform: translateY(-5px) rotateX(3deg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45), 0 0 20px rgba(0, 222, 255, .06)
}

/* ── TIMELINE DOT PULSE ──────────────────────────────────────── */
.tli::before {
    animation: tlPulse 2.5s ease-in-out infinite
}

@keyframes tlPulse {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(0, 222, 255, .5)
    }

    50% {
        box-shadow: 0 0 16px rgba(0, 222, 255, .9), 0 0 30px rgba(0, 222, 255, .4)
    }
}

/* ── STAT CARD 3D ────────────────────────────────────────────── */
.stat {
    transform-style: preserve-3d;
    transition: border-color var(--t), transform .35s var(--ease), box-shadow .35s var(--ease)
}

.stat:hover {
    transform: translateY(-4px) rotateX(6deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 0 18px rgba(0, 222, 255, .07)
}

/* ── SCROLL REVEAL STAGGER FIX ───────────────────────────────── */
.rv {
    transition: opacity .65s var(--ease), transform .65s var(--ease)
}