/* =========================================================
           COLOR PALETTE
        ========================================================= */

        /*
            Bleu nuit très foncé : #050C16
            Bleu nuit principal   : #07111F
            Bleu foncé accent     : #075BB8
            Bleu principal vif    : #0787FF
            Bleu secondaire       : #087BFF
            Bleu clair / cyan     : #18A0FF
            Blanc                 : #FFFFFF
            Gris très clair       : #F4F4F5
            Gris clair            : #E5E7EB
            Gris moyen            : #BFC5CC
            Gris foncé            : #333333
            Noir texte            : #10141C
        */


        /* =========================================================
           LIGHT THEME
        ========================================================= */

        :root,
        html[data-theme="light"] {

            --bg: #F4F4F5;

            --bg-soft: #E5E7EB;

            --surface: #FFFFFF;

            --surface-soft: #F8FAFC;

            --text: #10141C;

            --text-soft: #333333;

            --muted: #6D7680;

            --muted-light: #BFC5CC;

            --border: rgba(16, 20, 28, .10);

            --border-strong: rgba(16, 20, 28, .18);

            --nav-bg: rgba(244, 244, 245, .84);

            --primary: #0787FF;

            --primary-alt: #087BFF;

            --primary-dark: #075BB8;

            --cyan: #18A0FF;

            --night: #07111F;

            --night-deep: #050C16;

            --shadow:
                0 30px 80px rgba(5, 12, 22, .10);

            --shadow-small:
                0 14px 40px rgba(5, 12, 22, .08);

            --hero-gradient:
                radial-gradient(
                    circle,
                    rgba(7, 135, 255, .18),
                    rgba(24, 160, 255, .08) 30%,
                    transparent 68%
                );

        }


        /* =========================================================
           DARK THEME
        ========================================================= */

        html[data-theme="dark"] {

            --bg: #050C16;

            --bg-soft: #07111F;

            --surface: #0A1727;

            --surface-soft: #0D1B2D;

            --text: #FFFFFF;

            --text-soft: #E5E7EB;

            --muted: #BFC5CC;

            --muted-light: #7F8A96;

            --border: rgba(255, 255, 255, .08);

            --border-strong: rgba(255, 255, 255, .15);

            --nav-bg: rgba(5, 12, 22, .86);

            --primary: #0787FF;

            --primary-alt: #087BFF;

            --primary-dark: #075BB8;

            --cyan: #18A0FF;

            --night: #07111F;

            --night-deep: #050C16;

            --shadow:
                0 30px 90px rgba(0, 0, 0, .42);

            --shadow-small:
                0 14px 40px rgba(0, 0, 0, .28);

            --hero-gradient:
                radial-gradient(
                    circle,
                    rgba(7, 135, 255, .22),
                    rgba(24, 160, 255, .10) 30%,
                    transparent 68%
                );

        }


        /* =========================================================
           GENERAL
        ========================================================= */

        * {
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            margin: 0;

            background: var(--bg);

            color: var(--text);

            font-family: "Manrope", sans-serif;

            overflow-x: hidden;

            transition:
                background .35s ease,
                color .35s ease;

        }


        ::selection {

            background: var(--primary);

            color: #FFFFFF;

        }


        a {
            text-decoration: none;
        }


        section {

            padding-top: 130px;
            padding-bottom: 130px;

        }


        .mono {
            font-family: "DM Mono", monospace;
        }


        .section-index {

            display: inline-flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 28px;

            color: var(--primary);

            font-family: "DM Mono", monospace;

            font-size: .68rem;

            letter-spacing: .12em;

        }


        .section-index::before {

            content: "";

            width: 30px;
            height: 1px;

            background: currentColor;

        }


        .section-title {

            max-width: 1050px;

            margin: 0;

            font-size:
                clamp(3rem, 6vw, 6.7rem);

            line-height: .93;

            letter-spacing: -.07em;

            font-weight: 650;

        }


        .section-description {

            max-width: 500px;

            margin: 0;

            color: var(--muted);

            line-height: 1.85;

        }


        /* =========================================================
           NAVBAR
        ========================================================= */

        .main-navbar {

            position: fixed;

            top: 20px;

            left: 0;
            right: 0;

            z-index: 1000;

            padding: 0 16px;

        }


        .navbar-inner {

            max-width: 1320px;

            margin: auto;

            padding: 10px 12px;

            background: var(--nav-bg);

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

            border-radius: 20px;

            backdrop-filter: blur(22px);

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

            box-shadow:
                0 10px 35px rgba(5, 12, 22, .05);

        }


        html[data-theme="dark"] .navbar-inner {

            box-shadow:
                0 10px 40px rgba(0, 0, 0, .18);

        }


        .navbar-brand {

            color: var(--text) !important;

            font-size: 1.02rem;

            font-weight: 800;

            letter-spacing: -.04em;

        }


        .brand-dot {

            display: inline-block;

            width: 8px;
            height: 8px;

            margin-left: 5px;

            background: var(--primary);

            border-radius: 50%;

            box-shadow:
                0 0 18px rgba(7, 135, 255, .65);

        }


        .nav-link {

            margin-left: 13px;

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

            font-size: .82rem;

            font-weight: 600;

            transition: .2s ease;

        }


        .nav-link:hover {

            color: var(--primary) !important;

        }


        .contact-nav {

            padding: 10px 17px !important;

            color: #FFFFFF !important;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF
                );

            border-radius: 999px;

            box-shadow:
                0 10px 25px rgba(7, 135, 255, .20);

        }


        .contact-nav:hover {

            color: #FFFFFF !important;

            background:
                linear-gradient(
                    135deg,
                    #0787FF,
                    #18A0FF
                );

            transform: translateY(-1px);

        }


        /* =========================================================
           THEME SWITCHER
        ========================================================= */

        .theme-switcher {

            display: flex;

            align-items: center;

            gap: 3px;

            margin-left: 14px;

            padding: 4px;

            background: var(--surface);

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

            border-radius: 999px;

        }


        .theme-button {

            width: 36px;
            height: 36px;

            display: flex;

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

            border: 0;

            border-radius: 50%;

            background: transparent;

            color: var(--muted);

            transition: .25s ease;

        }


        .theme-button:hover {

            color: var(--primary);

        }


        .theme-button.active {

            color: #FFFFFF;

            background:
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary)
                );

            box-shadow:
                0 8px 18px rgba(7, 135, 255, .25);

        }


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

        .hero {

            min-height: 100vh;

            position: relative;

            display: flex;

            align-items: flex-end;

            overflow: hidden;

            padding-top: 170px;
            padding-bottom: 70px;

            background: var(--bg);

        }


        .hero::before {

            content: "";

            position: absolute;

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

            width: 760px;
            height: 760px;

            background: var(--hero-gradient);

            border-radius: 50%;

            filter: blur(5px);

            pointer-events: none;

        }


        .hero::after {

            content: "";

            position: absolute;

            left: -180px;
            bottom: -320px;

            width: 620px;
            height: 620px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(7, 91, 184, .10),
                    transparent 70%
                );

            pointer-events: none;

        }


        .hero-content {

            position: relative;

            z-index: 2;

        }


        .hero-label {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 28px;

            color: var(--primary);

            font-family: "DM Mono", monospace;

            font-size: .7rem;

            text-transform: uppercase;

            letter-spacing: .11em;

        }


        .hero-status {

            position: relative;

            width: 8px;
            height: 8px;

            background: #18A0FF;

            border-radius: 50%;

            box-shadow:
                0 0 0 5px rgba(24, 160, 255, .12),
                0 0 20px rgba(24, 160, 255, .55);

        }


        .hero-title {

            max-width: 1200px;

            margin: 0;

            font-size:
                clamp(4.8rem, 10.5vw, 11rem);

            line-height: .79;

            letter-spacing: -.09em;

            font-weight: 700;

        }


        .hero-title span {

            color: var(--muted-light);

        }


        html[data-theme="dark"] .hero-title span {

            color: #BFC5CC;

            opacity: .62;

        }


        .hero-meta {

            margin-top: 80px;

            padding-top: 28px;

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

        }


        .hero-description {

            max-width: 600px;

            margin: 0;

            color: var(--text-soft);

            line-height: 1.8;

            font-size:
                clamp(1rem, 1.5vw, 1.2rem);

        }


        .hero-description strong {

            color: var(--text);

            font-weight: 700;

        }


        .hero-tech {

            color: var(--muted);

            font-family: "DM Mono", monospace;

            font-size: .66rem;

            line-height: 1.9;

        }


        .hero-scroll {

            width: 72px;
            height: 72px;

            display: flex;

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

            color: var(--text);

            background: var(--surface);

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

            border-radius: 50%;

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

            transition: .3s ease;

        }


        .hero-scroll:hover {

            color: #FFFFFF;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF,
                    #18A0FF
                );

            border-color: transparent;

            transform: translateY(6px);

        }


        /* =========================================================
           TICKER
        ========================================================= */

        .brand-band {

            overflow: hidden;

            padding: 17px 0;

            color: #FFFFFF;

            background:
                linear-gradient(
                    90deg,
                    #075BB8,
                    #0787FF,
                    #18A0FF,
                    #087BFF
                );

        }


        .band-track {

            display: flex;

            width: max-content;

            animation:
                scrollingBand 24s linear infinite;

        }


        .band-item {

            display: flex;

            align-items: center;

            white-space: nowrap;

            font-family: "DM Mono", monospace;

            text-transform: uppercase;

            letter-spacing: .08em;

            font-size: .7rem;

        }


        .band-item span {

            margin: 0 25px;

            opacity: .6;

        }


        @keyframes scrollingBand {

            from {
                transform: translateX(0);
            }

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

        }


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

        .projects-section {

            background: var(--surface);

        }


        .projects-wrapper {

            margin-top: 90px;

        }


        .project {

            padding: 55px 0 75px;

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

        }


        .project:last-child {

            border-bottom: 0;

        }


        .project-number {

            color: var(--primary);

            font-family: "DM Mono", monospace;

            font-size: .66rem;

            text-transform: uppercase;

            letter-spacing: .08em;

        }


        .project-title {

            margin: 12px 0 20px;

            font-size:
                clamp(2.6rem, 5vw, 5.2rem);

            font-weight: 650;

            letter-spacing: -.065em;

        }


        .project-text {

            max-width: 500px;

            color: var(--muted);

            line-height: 1.75;

        }


        .project-tech {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-top: 25px;

        }


        .project-tech span {

            padding: 7px 12px;

            background: var(--bg);

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

            border-radius: 999px;

            color: var(--text-soft);

            font-family: "DM Mono", monospace;

            font-size: .64rem;

        }


        .project-link {

            display: inline-flex;

            align-items: center;

            gap: 9px;

            margin-top: 30px;

            color: var(--text);

            font-weight: 650;

            transition: .25s;

        }


        .project-link:hover {

            color: var(--primary);

        }


        .project-link i {

            transition: .25s;

        }


        .project-link:hover i {

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

        }


        .project-preview {

            position: relative;

            min-height: 450px;

            overflow: hidden;

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

            border-radius: 28px;

            box-shadow: var(--shadow);

            transition:
                transform .4s cubic-bezier(.2,.8,.2,1);

        }


        .project:hover .project-preview {

            transform: scale(.985);

        }


        /* PROJECT 1 */

        .preview-web {

            background:
                linear-gradient(
                    145deg,
                    #07111F,
                    #075BB8 55%,
                    #0787FF
                );

        }


        .browser {

            position: absolute;

            top: 12%;
            left: 8%;

            width: 84%;
            height: 76%;

            overflow: hidden;

            border-radius: 15px;

            background: var(--surface);

            box-shadow:
                0 30px 70px rgba(0,0,0,.22);

        }


        .browser-top {

            height: 42px;

            display: flex;

            align-items: center;

            gap: 7px;

            padding-left: 16px;

            background: var(--surface-soft);

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

        }


        .browser-dot {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: var(--muted-light);

        }


        .browser-body {

            padding: 38px;

        }


        .ui-title {

            width: 65%;
            height: 25px;

            margin-bottom: 25px;

            background: var(--night);

            border-radius: 6px;

        }


        html[data-theme="dark"] .ui-title {

            background: #FFFFFF;

        }


        .ui-line {

            height: 10px;

            margin-bottom: 10px;

            border-radius: 4px;

            background: var(--bg-soft);

        }


        .ui-line.short {

            width: 65%;

        }


        .ui-button {

            width: 120px;
            height: 37px;

            margin-top: 28px;

            border-radius: 8px;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF
                );

        }


        /* PROJECT 2 */

        .preview-mobile {

            background:
                linear-gradient(
                    145deg,
                    #F4F4F5,
                    #E5E7EB 45%,
                    #BFC5CC
                );

        }


        html[data-theme="dark"] .preview-mobile {

            background:
                linear-gradient(
                    145deg,
                    #07111F,
                    #0B213B,
                    #075BB8
                );

        }


        .phone {

            position: absolute;

            top: 50%;
            left: 50%;

            width: 210px;
            height: 390px;

            padding: 10px;

            border-radius: 36px;

            background: #050C16;

            transform:
                translate(-50%, -50%) rotate(6deg);

            box-shadow:
                0 30px 70px rgba(0,0,0,.20);

        }


        .phone-screen {

            height: 100%;

            padding: 25px 15px;

            background: #FFFFFF;

            border-radius: 27px;

        }


        .phone-notch {

            width: 65px;
            height: 7px;

            margin: 0 auto 30px;

            background: #050C16;

            border-radius: 20px;

        }


        .phone-card {

            height: 74px;

            margin-bottom: 12px;

            border-radius: 15px;

            background: #E5E7EB;

        }


        .phone-card.accent {

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF,
                    #18A0FF
                );

        }


        /* PROJECT 3 */

        .preview-dashboard {

            background:
                linear-gradient(
                    145deg,
                    #E5E7EB,
                    #F4F4F5
                );

        }


        html[data-theme="dark"] .preview-dashboard {

            background:
                linear-gradient(
                    145deg,
                    #050C16,
                    #07111F
                );

        }


        .dashboard {

            position: absolute;

            top: 12%;
            left: 7%;

            width: 86%;
            height: 76%;

            display: grid;

            grid-template-columns: .85fr 2.2fr;

            gap: 14px;

            padding: 20px;

            background: var(--surface);

            border-radius: 16px;

            box-shadow: var(--shadow);

        }


        .dashboard-sidebar {

            border-radius: 10px;

            background:
                linear-gradient(
                    180deg,
                    #050C16,
                    #07111F
                );

        }


        .dashboard-grid {

            display: grid;

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

            gap: 14px;

        }


        .dashboard-box {

            background: var(--bg-soft);

            border-radius: 10px;

        }


        .dashboard-box.large {

            grid-column: span 2;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF,
                    #18A0FF
                );

        }


        /* =========================================================
           SERVICES
        ========================================================= */

        .services-section {

            background: var(--bg);

        }


        .services {

            margin-top: 85px;

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

        }


        .service {

            position: relative;

            padding: 38px 0;

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

            transition:
                padding-left .3s ease,
                background .3s ease;

        }


        .service:hover {

            padding-left: 16px;

        }


        .service-number {

            color: var(--primary);

            font-family: "DM Mono", monospace;

            font-size: .66rem;

        }


        .service-title {

            margin: 0;

            font-size:
                clamp(1.6rem, 3vw, 2.9rem);

            font-weight: 600;

            letter-spacing: -.045em;

        }


        .service-text {

            margin: 0;

            color: var(--muted);

            line-height: 1.7;

        }


        .service-icon {

            color: var(--cyan);

            font-size: 1.3rem;

        }


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

        .stack-section {

            background: var(--bg-soft);

        }


        .skills {

            margin-top: 80px;

        }


        .skill-card {

            height: 100%;

            min-height: 165px;

            padding: 25px;

            background: var(--surface);

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

            border-radius: 18px;

            transition: .3s ease;

        }


        .skill-card:hover {

            transform: translateY(-6px);

            border-color: var(--primary);

            box-shadow:
                0 20px 50px rgba(7, 135, 255, .12);

        }


        .skill-card i {

            display: block;

            margin-bottom: 45px;

            color: var(--primary);

            font-size: 1.55rem;

        }


        .skill-card span {

            color: var(--text);

            font-size: .87rem;

            font-weight: 650;

        }


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

        .about-section {

            background: var(--surface);

        }


        .about-large {

            max-width: 950px;

            margin: 0;

            color: var(--text);

            font-size:
                clamp(1.8rem, 3.7vw, 3.9rem);

            line-height: 1.2;

            letter-spacing: -.05em;

            font-weight: 500;

        }


        .about-large span {

            color: var(--muted);

        }


        .about-data {

            margin-top: 80px;

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

        }


        .about-row {

            padding: 30px 0;

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

        }


        .about-label {

            color: var(--primary);

            font-family: "DM Mono", monospace;

            font-size: .65rem;

            letter-spacing: .06em;

        }


        .about-value {

            color: var(--text);

            font-weight: 600;

        }


        /* =========================================================
           CONTACT
        ========================================================= */

        .contact-section {

            background: var(--bg-soft);

        }


        .contact-intro {

            max-width: 420px;

            margin-left: auto;

            color: var(--muted);

            line-height: 1.8;

        }


        .contact-panel {

            margin-top: 80px;

            overflow: hidden;

            background: var(--surface);

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

            border-radius: 28px;

            box-shadow: var(--shadow);

        }


        .contact-sidebar {

            height: 100%;

            min-height: 680px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            padding: 45px;

            color: #FFFFFF;

            background:
                linear-gradient(
                    155deg,
                    #050C16 0%,
                    #07111F 58%,
                    #075BB8 150%
                );

        }


        .contact-sidebar h3 {

            margin-bottom: 50px;

            font-size: 1.55rem;

            letter-spacing: -.04em;

        }


        .contact-item {

            display: flex;

            align-items: center;

            gap: 17px;

            margin-bottom: 31px;

        }


        .contact-icon {

            width: 44px;
            height: 44px;

            min-width: 44px;

            display: flex;

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

            border:
                1px solid rgba(255,255,255,.14);

            border-radius: 50%;

            color: #18A0FF;

            background:
                rgba(24, 160, 255, .06);

        }


        .contact-label {

            margin-bottom: 5px;

            color: #BFC5CC;

            font-family: "DM Mono", monospace;

            font-size: .6rem;

            letter-spacing: .08em;

        }


        .contact-value {

            color: #FFFFFF;

            font-size: .85rem;

        }


        .contact-value:hover {

            color: #18A0FF;

        }


        .contact-availability {

            display: flex;

            align-items: center;

            gap: 13px;

            padding-top: 27px;

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

        }


        .available-dot {

            position: relative;

            width: 9px;
            height: 9px;

            background: #18A0FF;

            border-radius: 50%;

            box-shadow:
                0 0 16px rgba(24, 160, 255, .7);

        }


        .available-dot::after {

            content: "";

            position: absolute;

            inset: -5px;

            border:
                1px solid #18A0FF;

            border-radius: 50%;

            opacity: .3;

        }


        .available-title {

            font-size: .8rem;

            font-weight: 600;

        }


        .available-text {

            margin-top: 3px;

            color: #BFC5CC;

            font-family: "DM Mono", monospace;

            font-size: .6rem;

        }


        .contact-form {

            padding: 55px;

        }


        .form-feedback {

            margin-bottom: 30px;

            padding: 14px 16px;

            border-left: 2px solid var(--primary);

            color: var(--text-soft);

            font-size: .85rem;

            line-height: 1.6;

        }


        .form-feedback.is-error {

            border-color: #D94A4A;

        }


        .contact-trap {

            position: absolute;

            left: -10000px;

            width: 1px;
            height: 1px;

            overflow: hidden;

        }


        .form-label-custom {

            display: block;

            margin-bottom: 10px;

            color: var(--muted);

            font-family: "DM Mono", monospace;

            font-size: .65rem;

            text-transform: uppercase;

            letter-spacing: .05em;

        }


        .form-control-custom {

            width: 100%;

            padding: 12px 0 14px;

            color: var(--text);

            background: transparent;

            border: 0;

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

            border-radius: 0;

            outline: 0;

            font-family: "Manrope", sans-serif;

            transition: .25s;

        }


        .form-control-custom::placeholder {

            color: var(--muted);

            opacity: .65;

        }


        .form-control-custom:focus {

            border-color: var(--primary);

        }


        textarea.form-control-custom {

            min-height: 135px;

            resize: none;

        }


        select.form-control-custom {

            cursor: pointer;

        }


        html[data-theme="dark"]
        select.form-control-custom option {

            background: #07111F;

            color: #FFFFFF;

        }


        .privacy-check label {

            color: var(--muted);

            font-size: .73rem;

            line-height: 1.6;

        }


        .privacy-check .form-check-input {

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

            background-color: var(--surface);

        }


        .privacy-check .form-check-input:checked {

            background-color: var(--primary);

            border-color: var(--primary);

        }


        .submit-button {

            display: inline-flex;

            align-items: center;

            gap: 25px;

            padding: 8px 9px 8px 24px;

            color: #FFFFFF;

            background:
                linear-gradient(
                    135deg,
                    #050C16,
                    #07111F
                );

            border: 0;

            border-radius: 999px;

            font-size: .84rem;

            font-weight: 650;

            box-shadow:
                0 12px 30px rgba(5, 12, 22, .14);

            transition: .3s;

        }


        .submit-icon {

            width: 42px;
            height: 42px;

            display: flex;

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

            color: #FFFFFF;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF,
                    #18A0FF
                );

            border-radius: 50%;

            transition: .3s;

        }


        .submit-button:hover {

            color: #FFFFFF;

            background:
                linear-gradient(
                    135deg,
                    #075BB8,
                    #0787FF
                );

        }


        .submit-button:hover .submit-icon {

            color: #07111F;

            background: #FFFFFF;

            transform: rotate(45deg);

        }


        .response-time {

            display: flex;

            align-items: center;

            gap: 7px;

            color: var(--muted);

            font-family: "DM Mono", monospace;

            font-size: .6rem;

        }


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

        footer {

            padding: 35px 0;

            color: #BFC5CC;

            background: #050C16;

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

        }


        .footer-brand {

            color: #FFFFFF;

            font-weight: 800;

            letter-spacing: -.04em;

        }


        .footer-text {

            font-family: "DM Mono", monospace;

            font-size: .63rem;

        }


        .footer-link {

            margin-left: 18px;

            color: #BFC5CC;

            font-family: "DM Mono", monospace;

            font-size: .63rem;

        }


        .footer-link:hover {

            color: #18A0FF;

        }


        /* =========================================================
           REVEAL
        ========================================================= */

        .reveal {

            opacity: 0;

            transform: translateY(28px);

            transition:
                opacity .75s ease,
                transform .75s ease;

        }


        .reveal.visible {

            opacity: 1;

            transform: translateY(0);

        }


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

        @media(max-width: 991px) {

            section {

                padding-top: 95px;
                padding-bottom: 95px;

            }


            .navbar-inner {

                border-radius: 17px;

            }


            .navbar-collapse {

                padding-top: 16px;

            }


            .nav-link {

                margin-left: 0;

                padding:
                    9px 0 !important;

            }


            .contact-nav {

                display: inline-flex;

                padding:
                    10px 17px !important;

                margin-top: 8px;

            }


            .theme-switcher {

                width: fit-content;

                margin:
                    14px 0 0;

            }


            .hero {

                min-height: auto;

                padding-top: 160px;

            }


            .hero-meta {

                margin-top: 55px;

            }


            .project-preview {

                min-height: 370px;

                margin-top: 45px;

            }


            .service:hover {

                padding-left: 0;

            }


            .contact-intro {

                margin-top: 30px;

                margin-left: 0;

            }


            .contact-sidebar {

                min-height: auto;

                padding: 40px;

            }


            .contact-availability {

                margin-top: 50px;

            }


            .contact-form {

                padding: 45px 40px;

            }

        }


        @media(max-width: 575px) {

            section {

                padding-top: 80px;
                padding-bottom: 80px;

            }


            .main-navbar {

                top: 10px;

                padding: 0 10px;

            }


            .hero {

                padding-top: 140px;

            }


            .hero-title {

                font-size:
                    clamp(4rem, 18vw, 6.4rem);

                line-height: .85;

            }


            .hero-scroll {

                width: 55px;
                height: 55px;

            }


            .project {

                padding:
                    40px 0 55px;

            }


            .project-preview {

                min-height: 300px;

                border-radius: 20px;

            }


            .browser {

                width: 90%;

                left: 5%;

            }


            .phone {

                width: 165px;
                height: 310px;

            }


            .dashboard {

                width: 90%;

                left: 5%;

            }


            .contact-panel {

                margin-top: 50px;

                border-radius: 20px;

            }


            .contact-sidebar {

                padding: 32px 25px;

            }


            .contact-form {

                padding: 35px 25px;

            }


            .submit-button {

                width: 100%;

                justify-content: space-between;

            }


            .footer-link {

                display: inline-block;

                margin:
                    10px 15px 0 0;

            }

        }


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

            html {

                scroll-behavior: auto;

            }


            *,

            *::before,

            *::after {

                animation-duration:
                    .01ms !important;

                transition-duration:
                    .01ms !important;

            }


            .reveal {

                opacity: 1;

                transform: none;

            }

        }

        .project-preview.preview-real {
            height: clamp(300px, 31vw, 450px);
            background: var(--night-deep);
            border: 0;
        }

        .project-preview.preview-real img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
        }

        .project-link-static {
            cursor: default;
        }

        .project-link-static:hover {
            color: var(--text);
        }

        .project-link-static:hover i {
            transform: none;
        }