:root {
                           --bg: #0b0d10;
                           --panel: #12161b;
                           --text: #e6e9ef;
                           --muted: #a0a6b0;
                           --brand: #4cc9f0;
                           --accent: #80ffdb;
                           --shadow: 0 10px 30px rgba(0, 0, 0, .25);
                           --radius: 18px;
                           --maxw: 1100px;
                       }
                       
                       @media (prefers-color-scheme: light) {
                            :root {
                               --bg: #f7f8fb;
                               --panel: #ffffff;
                               --text: #101317;
                               --muted: #5b616e;
                               --brand: #2563eb;
                               --accent: #22c55e;
                               --shadow: 0 10px 25px rgba(0, 0, 0, .08);
                           }
                       }
                       
                       * {
                           box-sizing: border-box
                       }
                       
                       html,
                       body {
                           margin: 0
                       }
                       
                       body {
                           font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
                           background: var(--bg);
                           color: var(--text);
                           line-height: 1.6;
                           letter-spacing: .1px;
                       }
                       
                       a {
                           color: var(--brand);
                           text-decoration: none
                       }
                       
                       img {
                           max-width: 100%;
                           display: block
                       }
                       
                       .container {
                           width: min(100%, var(--maxw));
                           margin-inline: auto;
                           padding: 0 18px
                       }
                       /* Header */
                       
                       header {
                           position: sticky;
                           top: 0;
                           z-index: 50;
                           backdrop-filter: blur(8px);
                           background: color-mix(in oklab, var(--bg) 92%, transparent);
                           border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
                       }
                       
                       .nav {
                           display: flex;
                           align-items: center;
                           justify-content: space-between;
                           gap: 12px;
                           height: 64px
                       }
                       
                       img {
                           width: 120px;
                           height: 40px;
                           object-fit: contain;
                       }
                       
                       .nav ul {
                           display: flex;
                           gap: 16px;
                           list-style: none;
                           padding: 0;
                           margin: 0
                       }
                       
                       .btn {
                           display: inline-flex;
                           align-items: center;
                           gap: 8px;
                           padding: 10px 14px;
                           border-radius: 12px;
                           background: var(--brand);
                           color: white;
                           font-weight: 600;
                           box-shadow: var(--shadow);
                           border: 0
                       }
                       
                       .ghost {
                           background: transparent;
                           color: var(--text);
                           border: 1px solid color-mix(in oklab, var(--text) 18%, transparent)
                       }
                       
                       .toggle {
                           width: 42px;
                           height: 36px;
                           display: grid;
                           place-items: center;
                           border-radius: 12px;
                           border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
                           background: transparent;
                           color: var(--text)
                       }
                       /* Hero */
                       
                       .hero {
                           padding: 72px 0 36px
                       }
                       
                       .hero .wrap {
                           display: grid;
                           grid-template-columns: 1.2fr .8fr;
                           gap: 28px;
                           align-items: center
                       }
                       
                       .badge {
                           display: inline-flex;
                           align-items: center;
                           gap: 8px;
                           padding: 8px 12px;
                           border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
                           border-radius: 999px;
                           font-size: 12px;
                           opacity: .9
                       }
                       
                       .title {
                           font-size: clamp(28px, 6vw, 48px);
                           line-height: 1.1;
                           margin: 18px 0
                       }
                       
                       .subtitle {
                           color: var(--muted);
                           font-size: clamp(14px, 2.4vw, 18px)
                       }
                       
                       .cta {
                           display: flex;
                           gap: 12px;
                           margin-top: 22px;
                           flex-wrap: wrap
                       }
                       
                       .card {
                           background: var(--panel);
                           border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
                           border-radius: var(--radius);
                           padding: 18px;
                           box-shadow: var(--shadow);
                       }
                       
                       .avatar {
                           aspect-ratio: 1/1;
                           border-radius: 18px;
                           background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--accent) 18%, transparent));
                           display: grid;
                           place-items: center
                       }
                       
                       .avatar svg {
                           width: 48%;
                           opacity: .9
                       }
                       /* Section */
                       
                       section {
                           padding: 60px 0
                       }
                       
                       .section-title {
                           font-size: clamp(20px, 4vw, 30px);
                           margin: 0 0 14px
                       }
                       
                       .section-desc {
                           color: var(--muted);
                           margin: 0 0 24px
                       }
                       /* About */
                       
                       .about {
                           display: grid;
                           grid-template-columns: 1fr 1fr;
                           gap: 24px
                       }
                       
                       .kpis {
                           display: grid;
                           grid-template-columns: repeat(3, 1fr);
                           gap: 12px
                       }
                       
                       .kpibox {
                           padding: 14px;
                           border-radius: 16px;
                           border: 1px dashed color-mix(in oklab, var(--text) 20%, transparent)
                       }
                       
                       .tag {
                           display: inline-flex;
                           padding: 6px 10px;
                           border-radius: 999px;
                           border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
                           margin: 4px 6px 0 0;
                           font-size: 12px
                       }
                       /* Services */
                       
                       .grid {
                           display: grid;
                           grid-template-columns: repeat(3, 1fr);
                           gap: 16px
                       }
                       
                       .service {
                           transition: transform .25s ease, box-shadow .25s ease
                       }
                       
                       .service:hover {
                           transform: translateY(-4px);
                           box-shadow: 0 12px 30px rgba(0, 0, 0, .18)
                       }
                       
                       .service h3 {
                           margin: 10px 0 6px
                       }
                       
                       .service p {
                           margin: 0;
                           color: var(--muted)
                       }
                       
                       .pill {
                           display: inline-block;
                           padding: 6px 10px;
                           font-size: 12px;
                           background: color-mix(in oklab, var(--brand) 18%, transparent);
                           border-radius: 999px;
                           border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent)
                       }
                       /* Projects */
                       
                       .projects .grid {
                           grid-template-columns: repeat(3, 1fr)
                       }
                       
                       .project {
                           overflow: hidden
                       }
                       
                       .project img {
                           width: 100%;
                           height: auto;
                           aspect-ratio: 16/10;
                           object-fit: cover;
                           border-radius: 14px;
                           border: 1px solid color-mix(in oklab, var(--text) 12%, transparent)
                       }
                       
                       .project h4 {
                           margin: 12px 0 6px
                       }
                       
                       .project .stack {
                           font-size: 12px;
                           color: var(--muted)
                       }
                       /* Contact */
                       
                       .contact-card {
                           display: grid;
                           grid-template-columns: 1.1fr .9fr;
                           gap: 18px;
                           align-items: center
                       }
                       
                       form {
                           display: grid;
                           gap: 12px
                       }
                       
                       input,
                       textarea {
                           width: 100%;
                           padding: 12px 14px;
                           border-radius: 12px;
                           border: 1px solid color-mix(in oklab, var(--text) 18%, transparent);
                           background: transparent;
                           color: var(--text)
                       }
                       
                       textarea {
                           min-height: 120px
                       }
                       /* Footer */
                       
                       footer {
                           padding: 32px 0;
                           color: var(--muted);
                           border-top: 1px solid color-mix(in oklab, var(--text) 12%, transparent)
                       }
                       /* Responsiveness */
                       
                       @media (max-width: 980px) {
                           .hero .wrap {
                               grid-template-columns: 1fr
                           }
                           .about {
                               grid-template-columns: 1fr
                           }
                           .grid {
                               grid-template-columns: 1fr 1fr
                           }
                           .projects .grid {
                               grid-template-columns: 1fr 1fr
                           }
                           .contact-card {
                               grid-template-columns: 1fr
                           }
                       }
                       
                       @media (max-width: 640px) {
                           .grid,
                           .projects .grid {
                               grid-template-columns: 1fr
                           }
                       }
                       /* Micro-animations */
                       
                       .reveal {
                           opacity: 0;
                           transform: translateY(10px);
                           transition: opacity .6s ease, transform .6s ease
                       }
                       
                       .reveal.visible {
                           opacity: 1;
                           transform: translateY(0)
                       }
                       
                       html {
                           scroll-behavior: smooth
                       }
                       /*******animation de nav ******/