:root {
  /* ───────────── BACKGROUND ───────────── */
  --bg: #050505;
  --bg-soft: #080808;

  /* ───────────── SURFACES ───────────── */
  --surface: #0b0b0b;
  --surface-2: #111111;
  --surface-3: #161616;

  /* ───────────── TEXT ───────────── */
  --text: #f5f5f0;
  --text-secondary: #c4c4c0;
  --text-muted: #858585;
  --text-subtle: #5f5f5f;

  /* ───────────── BRAND / ACCENT ───────────── */
  --accent: #d7ff00;
  --accent-hover: #c5ed00;
  --accent-soft: rgba(215, 255, 0, 0.12);
  --accent-glow: rgba(215, 255, 0, 0.25);

  /* ───────────── BORDERS ───────────── */
  --border: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.16);
  --border-dark: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(215, 255, 0, 0.35);

  /* ───────────── STATUS ───────────── */
  --success: #d7ff00;
  --danger: #ff4d4d;
  --warning: #ffb800;
  --info: #4da6ff;

  /* ───────────── OVERLAYS ───────────── */
  --overlay: rgba(0, 0, 0, 0.65);
  --glass: rgba(11, 11, 11, 0.75);

  /* ───────────── SHADOWS ───────────── */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 80px rgba(0, 0, 0, 0.50);

  /* ───────────── GLOW ───────────── */
  --glow-sm: 0 0 15px rgba(215, 255, 0, 0.15);
  --glow-md: 0 0 35px rgba(215, 255, 0, 0.20);
  --glow-lg: 0 0 70px rgba(215, 255, 0, 0.15);

  /* ───────────── RADIUS ───────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ───────────── TRANSITIONS ───────────── */
  --transition-fast: 180ms ease;
  --transition: 300ms ease;
  --transition-slow: 600ms ease;
}

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

html{
    scroll-behavior: smooth;
}

section[id]{
    scroll-margin-top: 90px;
}

body{
    background: var(--bg);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', sans-serif;
}

.navbar{
    background: var(--bg-soft);
    display: flex;
    justify-content:space-between;
    align-items: center;
    /* margin: 0; */
    padding: 1.5em;
    position: sticky;
     top: 0;
    z-index: 1000;
}

.logo h2{
    color: var(--text-secondary);
}

.nav-links{
    display: flex;
}

.nav-links a{
    color: var(--text-muted);
    text-decoration: none;
    margin: 1em;
}

.nav-links a:hover{
    color: var(--accent);
}

.hamburger{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    width: 40px;
    height: 40px;
    padding: 8px;

    background: none;
    border: none;
    cursor: pointer;

    z-index: 1001;
}

.hamburger span{
    display: block;
    width: 100%;
    height: 2px;

    background: var(--text-secondary);
    border-radius: 2px;

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

.hamburger.active span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity: 0;
}

.hamburger.active span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

.side-indicator {
    position: fixed;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 10;
}

.location {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);

    margin-bottom: 18px;
}
.indicator-line {
    width: 1px;
    height: 170px;
    background: rgba(255, 255, 255, 0.35);

    margin-bottom: 20px;
}
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scroll-indicator span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;

    color: var(--accent);
}

.scroll-line {
    width: 2px;
    height: 20px;
    background: var(--accent);
}
@media (max-width: 768px) {
    .side-indicator {
        display: none;
    }
}


.hero-section{
    background: var(--surface-3);
    /* padding: 7em; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    min-height: 90vh;

}

.left{
    margin: 2.7em;
}

.left h3{
    color: var(--accent);
    font-size: small;
    margin: 1em;
}


.hero-left-text{
    margin: 1em;
}

.hero-left-text h1{
      color: var(--text-secondary);
      font-size: 70px;
}

.hero-left-text h1 span{
    color: var(--text-subtle);
    font-size: 50px;
}

.hero-section p{
      color: var(--text-muted);
}

.left p {
    margin: 1em;
}


.oxzenon-image{
    width: 80%;
    height: 80%;
}

.oxzenon-image img{
    width: 100%;
}

.hero-btn {
    margin: .5em;
    display: inline-flex;
    align-items: center;
    gap: 22px;

    padding: 14px 22px;

    color: var(--text-secondary);
    text-decoration: none;

    border: 1px solid var(--text-secondary);
    border-radius: 999px;

    transition: 0.3s ease;
}

.hero-btn:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent-hover);
}

.skill-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head {
    color: var(--text-secondary);
}

.skill-head a {
    color: var(--accent);
    text-decoration: none;
    font-size: small;
}

.work {
    margin: 4em;
    padding: 2em 0;

    border-top: 1px solid #d9ff0062;
    border-bottom: 1px solid #d9ff0082;
}

.projects {
    margin: 1em;
    padding: 2em 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.project-card figure {
    margin: 0;
}

.project-card figure img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 20px;
}

.project-card figcaption {
    padding: 1rem 0.5rem;
}

.project-card figcaption h3 {
    margin: 0 0 0.4rem;
    color: var(--text);
}

.project-card figcaption p {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.project-card figcaption a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.75rem;
}

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

.about {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    align-items: center;

    gap: 5rem;

    margin: 6rem 2rem;
    padding: 5rem 0;

    border-top: 1px solid rgba(215,255,0,.15);
    border-bottom: 1px solid rgba(215,255,0,.15);
}

.image img{
    width:200px;
    height:200px;

    object-fit:cover;

    border-radius:14px;

    transition:.4s ease;
}

.image img:hover{
    transform:translateY(-5px);
}


.text h4{
    color:var(--accent);

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:1.2rem;
}

.text h2{
    font-size:3.2rem;

    line-height:.92;

    letter-spacing:-2px;

    color:var(--text);

    max-width:420px;
}


.about-text{
    max-width:520px;
}

.about-text p{
    color:var(--text-muted);

    line-height:1.8;

    font-size:17px;

    margin-bottom:1.5rem;
}

.min-text{
    margin-bottom:2rem;
}

.signature{
    font-size:3.2rem;

    color:var(--accent);

    font-family:cursive;

    font-weight:400;

    margin-top:1.5rem;

    filter:drop-shadow(0 0 10px rgba(215,255,0,.25));
}

.skill{
    margin: 7rem 2rem;
}

.skill-slider{
    overflow: hidden;
    width: 100%;
    position: relative;
}

.skill-track{
    display: flex;
    gap: 1rem;
    width: max-content;

    animation: scroll 25s linear infinite;
}

.skill-card{

    min-width: 220px;

    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 1.5rem;

    background: #0B0B0B;

    border: 1px solid #202020;

    border-radius: 14px;

    flex-shrink: 0;
}

@keyframes scroll{

    from{
        transform: translateX(0);
    }

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

}

.skill-track:hover{
    animation-play-state: paused;
}

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

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:1.2rem;
}

.skill-card span{
    color:var(--text);

    font-size:14px;
}

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

.footer{

    margin:6rem 2rem 2rem;

    background:#0B0B0B;

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

    border-radius:24px;

    overflow:hidden;

}

.footer-cta{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:2rem;

    padding:5rem;

}

.footer-label{

    color:var(--accent);

    letter-spacing:3px;

    font-size:.75rem;

}

.footer-content h2{

    margin:1rem 0;

    font-size:4rem;

    line-height:.9;

    letter-spacing:-2px;

    color:var(--text);

}

.footer-content p{

    max-width:500px;

    color:var(--text-muted);

    margin-bottom:2rem;

}

.footer-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    background:var(--accent);

    color:#000;

    font-weight:700;

    border-radius:14px;

    text-decoration:none;

    transition:.35s;

}

.footer-btn:hover{

    transform:translateY(-6px);

}

.footer-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.footer-image img{

    width:100%;

    max-width:420px;

    animation:float 8s ease-in-out infinite;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:2rem 5rem;

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

}

.footer-bottom h3{
    color:var(--text);

    font-size:1.2rem;
}


.footer-bottom nav{

    display:flex;

    gap:2rem;

}

.footer-bottom nav a{

    color:var(--text-muted);

    text-decoration:none;

    transition:.3s;

}

.footer-bottom nav a:hover{

    color:var(--accent);

}

.copyright{

    padding:0 5rem 2rem;

    color:var(--text-muted);

    font-size:.9rem;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

@media(max-width:900px){

    .footer-cta{

        grid-template-columns:1fr;

        text-align:center;

        padding:3rem 2rem;

    }

    .footer-content h2{

        font-size:2.8rem;

    }

    .footer-bottom{

        flex-direction:column;

        gap:1.5rem;

        padding:2rem;

    }

    .footer-bottom nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:1rem 1.5rem;

        row-gap:.8rem;

    }

    .copyright{

        text-align:center;

        padding:0 2rem 2rem;

    }

}

/* ===========================
   BOOKING MODAL
=========================== */

.modal-overlay{
    position: fixed;
    inset: 0;

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

    padding: 1.5rem;

    background: var(--overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    z-index: 2000;

    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.modal-overlay.show{
    opacity: 1;
    visibility: visible;
}

.modal{
    position: relative;

    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);

    padding: 2.5rem;

    box-shadow: var(--shadow-lg), var(--glow-sm);

    transform: translateY(24px) scale(.97);
    transition: transform var(--transition);
}

.modal-overlay.show .modal{
    transform: none;
}

.modal::-webkit-scrollbar{
    display: none;
}

.modal-close{
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;

    background: none;
    border: none;

    color: var(--text-muted);
    font-size: 1.9rem;
    line-height: 1;

    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal-close:hover{
    color: var(--accent);
}

.modal-label{
    color: var(--accent);
    letter-spacing: 3px;
    font-size: .7rem;
}

.modal h2{
    color: var(--text);
    font-size: 1.8rem;
    letter-spacing: -1px;
    margin: .8rem 0 1.8rem;
}

.form-group{
    display: flex;
    flex-direction: column;
    gap: .5rem;

    flex: 1;

    margin-bottom: 1.2rem;
}

.form-row{
    display: flex;
    gap: 1rem;
}

.form-group label{
    color: var(--text-muted);
    font-size: .7rem;
    letter-spacing: 2px;
}

.form-group input,
.form-group select,
.form-group textarea{
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    padding: .9rem 1rem;

    color: var(--text);
    font-family: inherit;
    font-size: .95rem;

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

.form-group input::placeholder,
.form-group textarea::placeholder{
    color: var(--text-subtle);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.form-group textarea{
    resize: vertical;
}

.form-submit{
    width: 100%;

    padding: 1rem 2rem;
    margin-top: .5rem;

    background: var(--accent);
    color: #000;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;

    border: none;
    border-radius: 14px;

    cursor: pointer;
    transition: var(--transition);
}

.form-submit:hover{
    background: var(--accent-hover);
    box-shadow: var(--glow-md);
}

.form-success{
    display: none;
    text-align: center;
    padding: 2rem 0;
}

.form-success.show{
    display: block;
}

.success-icon{
    width: 64px;
    height: 64px;

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

    margin: 0 auto 1.2rem;

    background: var(--accent-soft);
    border: 1px solid var(--border-accent);
    border-radius: 50%;

    color: var(--accent);
    font-size: 1.8rem;
}

.form-success h3{
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: .6rem;
}

.form-success p{
    color: var(--text-muted);
}

.tg-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 1.5rem;
    padding: .8rem 1.6rem;

    color: var(--accent);
    text-decoration: none;
    font-size: .9rem;

    border: 1px solid var(--border-accent);
    border-radius: 999px;

    transition: var(--transition);
}

.tg-btn:hover{
    background: var(--accent);
    color: var(--bg);
    box-shadow: var(--glow-sm);
}

@media (max-width: 480px){

    .modal{
        padding: 1.8rem 1.2rem;
    }

    .form-row{
        flex-direction: column;
        gap: 0;
    }

}

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

img{
    max-width:100%;
}

/* --- Tablets / small laptops --- */

@media (max-width: 1024px){

    .hero-left-text h1{
        font-size: 52px;
    }

    .hero-left-text h1 span{
        font-size: 38px;
    }

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

}

/* --- Tablets portrait --- */

@media (max-width: 900px){

    .hero-section{
        grid-template-columns: 1fr;
        gap: 1rem;
        min-height: auto;
        padding: 1rem 0 3rem;
    }

    .oxzenon-image{
        width: 70%;
        height: auto;
        margin: 0 auto;
    }

    .about{
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin: 4rem 1.5rem;
        padding: 3rem 0;
    }

    .text h2{
        font-size: 2.4rem;
        letter-spacing: -1px;
    }

    .work{
        margin: 2em 1.5em;
    }

    .skill{
        margin: 4rem 1.5rem;
    }

}

/* --- Phones --- */

@media (max-width: 768px){

    .navbar{
        padding: 1em 1.25em;
    }

    .hamburger{
        display: flex;
    }

    .nav-links{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: center;
        gap: 0.25em;

        background: var(--bg-soft);
        border-bottom: 1px solid var(--border);

        padding: 1em 0 1.5em;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

    .nav-links.open{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a{
        margin: 0.5em;
        font-size: 1rem;
    }

    .left{
        margin: 1.5em;
    }

    .hero-left-text h1{
        font-size: 42px;
    }

    .hero-left-text h1 span{
        font-size: 32px;
    }

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

    .skill-card{
        min-width: 170px;
        padding: 0.8rem 1.2rem;
    }

}

/* --- Small phones --- */

@media (max-width: 480px){

    .navbar{
        padding: 1em;
    }

    .left{
        margin: 1em;
    }

    .hero-left-text h1{
        font-size: 32px;
    }

    .hero-left-text h1 span{
        font-size: 26px;
    }

    .hero-btn{
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    .oxzenon-image{
        width: 85%;
    }

    .work{
        margin: 2em 1em;
    }

    .skill-head{
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .text h2{
        font-size: 1.9rem;
    }

    .about-text p{
        font-size: 15px;
    }

    .signature{
        font-size: 2.4rem;
    }

    .skill{
        margin: 3rem 1rem;
    }

    .footer{
        margin: 4rem 1rem 1rem;
    }

    .footer-cta{
        padding: 2.5rem 1.25rem;
    }

    .footer-content h2{
        font-size: 2.1rem;
    }

    .copyright{
        padding: 0 1.25rem 1.5rem;
    }

}