:root{

    --bg:#0A0A0B;
    --surface:#141416;
    --surface-2:#1B1B1E;
    --text:#F5F3EF;
    --text-light:#9C9691;
    --text-dim:#6B6660;
    --accent:#C9A869;
    --accent-bright:#E4C48A;
    --accent-glow:rgba(201,168,105,.35);
    --border:rgba(255,255,255,.08);
    --border-soft:rgba(255,255,255,.05);

    --font-display:'Poppins',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'Fira Code','Consolas',monospace;

    --mx:50%;
    --my:50%;
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    position:relative;
    overflow-x:hidden;
}

::selection{
    background:var(--accent);
    color:#0A0A0B;
}

/* ==========================
   AMBIENT MOUSE SPOTLIGHT
========================== */

.spotlight{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(
        600px circle at var(--mx) var(--my),
        rgba(201,168,105,.10),
        rgba(201,168,105,.045) 32%,
        transparent 65%
    );
    transition:background .25s ease-out;
}

/* trailing ring — slow, sits furthest behind the cursor */
.cursor-ring{
    position:fixed;
    top:0;
    left:0;
    width:38px;
    height:38px;
    margin-left:-19px;
    margin-top:-19px;
    border-radius:50%;
    border:1.5px solid rgba(201,168,105,.65);
    pointer-events:none;
    z-index:2000;
    transform:translate(var(--mx), var(--my));
    opacity:0;
    transition:opacity .3s ease, width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease;
    will-change:transform;
}

.cursor-ring.visible{
    opacity:1;
}

.cursor-ring.active{
    width:30px;
    height:30px;
    margin-left:-15px;
    margin-top:-15px;
    border-color:rgba(228,196,138,.9);
}

/* leading dot — fast, stays close to the real cursor position */
.cursor-dot{
    position:fixed;
    top:0;
    left:0;
    width:5px;
    height:5px;
    margin-left:-2.5px;
    margin-top:-2.5px;
    border-radius:50%;
    background:var(--accent-bright);
    pointer-events:none;
    z-index:2001;
    transform:translate(var(--dx), var(--dy));
    opacity:0;
    transition:opacity .3s ease, width .2s ease, height .2s ease, margin .2s ease;
    will-change:transform;
}

.cursor-dot.visible{
    opacity:1;
}

.cursor-dot.active{
    width:3px;
    height:3px;
    margin-left:-1.5px;
    margin-top:-1.5px;
}

@media (hover:none), (pointer:coarse){
    .cursor-ring, .cursor-dot{
        display:none;
    }
}

/* ==========================
   BOOT SEQUENCE OVERLAY
========================== */

.boot-screen{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    transition:opacity .5s ease, filter .5s ease, transform .5s ease;
}

.boot-screen.fade-out{
    opacity:0;
    filter:blur(6px);
    transform:scale(1.03);
    pointer-events:none;
}

.boot-terminal{
    width:min(90vw, 480px);
    padding:28px 30px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(20,20,22,.6);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-family:var(--font-mono);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.boot-lines{
    min-height:130px;
}

.boot-line{
    font-size:.85rem;
    line-height:1.9;
    color:var(--text-light);
    white-space:pre;
}

.boot-line::before{
    content:'> ';
    color:var(--accent);
}

.boot-progress{
    margin-top:18px;
    height:2px;
    width:100%;
    background:var(--border-soft);
    border-radius:2px;
    overflow:hidden;
}

.boot-progress-bar{
    height:100%;
    width:0%;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent-glow);
    transition:width .2s linear;
}

.boot-skip{
    margin-top:14px;
    font-size:.7rem;
    letter-spacing:.06em;
    color:var(--text-dim);
    text-align:right;
}

@media (prefers-reduced-motion: reduce){
    .boot-screen{
        transition:none;
    }
}


header, main{
    position:relative;
    z-index:1;
}

.container{
    width:min(1120px,90%);
    margin:auto;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:linear-gradient(180deg, rgba(26,20,11,.82), rgba(15,12,8,.72));
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(201,168,105,.16);
}

nav{
    height:84px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    color:var(--text);
    text-decoration:none;
    font-family:var(--font-display);
    font-size:1.85rem;
    letter-spacing:4px;
    font-weight:700;
    text-shadow:0 0 24px rgba(201,168,105,.25);
    transition:text-shadow .3s ease;
}

.logo:hover{
    text-shadow:0 0 32px rgba(201,168,105,.4);
}

.logo-dot{
    color:var(--accent-bright);
    font-size:1.1em;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:44px;
}

.nav-links a{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-light);
    text-decoration:none;
    transition:color .3s ease;
    font-size:.92rem;
    letter-spacing:.2px;
}

.nav-index{
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:.72rem;
}

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

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

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

.hero{
    position:relative;
    min-height:100vh;
    padding-top:84px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-bg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity: 0.08;;
}

.hero-container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    align-items:center;
    gap:64px;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--accent);
    letter-spacing:4px;
    margin-bottom:24px;
    font-size:.82rem;
    font-weight:500;
}

.eyebrow-dash{
    width:28px;
    height:1px;
    background:var(--accent);
}

.hero h1{
    font-family:var(--font-display);
    font-size:6rem;
    line-height:1;
    letter-spacing:-1px;
    margin-bottom:22px;
}

.hero h2{
    font-size:1.9rem;
    font-weight:500;
    color:var(--text);
    margin-bottom:24px;
    line-height:1.3;
}

.hero-description{
    color:var(--text-light);
    line-height:1.85;
    max-width:480px;
    margin-bottom:44px;
    font-size:1.02rem;
    font-weight:300;
}

.hero-buttons{
    display:flex;
    gap:18px;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    border-radius:999px;
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, color .3s ease;
}

.btn-primary{
    background:linear-gradient(135deg,var(--accent-bright),var(--accent));
    color:#141416;
    font-weight:600;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 10px 24px -8px rgba(201,168,105,.55);
}

.btn-primary svg{
    transition:transform .3s ease;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.3) inset,
        0 16px 32px -8px rgba(201,168,105,.7);
}

.btn-primary:hover svg{
    transform:translateX(3px);
}

.btn-primary:active{
    transform:translateY(-1px);
}

.btn-secondary{
    border:1px solid var(--border);
    color:var(--text-light);
    background:rgba(255,255,255,.02);
}

.btn-secondary:hover{
    border-color:var(--accent);
    color:var(--accent-bright);
    background:rgba(201,168,105,.06);
    transform:translateY(-3px);
}

/* ==========================
   WORKSPACE (floating glass editor)
========================== */

.hero-visual{
    display:flex;
    justify-content:center;
    perspective:1400px;
    min-width:0;
}

.workspace{
    position:relative;
    width:100%;
    max-width:640px;
    min-width:0;
    border-radius:20px;
    overflow:hidden;
    background:rgba(20,20,22,.68);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:
        0 2px 0 rgba(255,255,255,.05) inset,
        0 30px 60px -20px rgba(0,0,0,.65),
        0 18px 36px -18px rgba(0,0,0,.55),
        0 0 90px -30px var(--accent-glow);
    animation:float 7s ease-in-out infinite;
    transform-style:preserve-3d;
    will-change:transform;
    transition:box-shadow .4s ease;
}

.workspace:hover{
    box-shadow:
        0 2px 0 rgba(255,255,255,.06) inset,
        0 34px 70px -18px rgba(0,0,0,.7),
        0 0 110px -26px var(--accent-glow);
}

.workspace::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(
        135deg,
        rgba(201,168,105,.35),
        rgba(255,255,255,.05) 40%,
        rgba(201,168,105,.12)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
    z-index:2;
}

@keyframes float{
    0%,100%{ transform:translateY(0px); }
    50%{ transform:translateY(-12px); }
}

/* -- header bar / tabs -- */

.workspace-header{
    display:flex;
    align-items:center;
    gap:18px;
    height:50px;
    padding:0 20px;
    background:rgba(255,255,255,.02);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.traffic-lights{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

.dot{
    width:11px;
    height:11px;
    border-radius:50%;
    opacity:.9;
}

.red{ background:#FF5F57; }
.yellow{ background:#FEBC2E; }
.green{ background:#28C840; }

.tabs{
    display:flex;
    align-items:stretch;
    height:100%;
    overflow:hidden;
}

.tab{
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 16px;
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:.78rem;
    border-right:1px solid rgba(255,255,255,.05);
    position:relative;
    cursor:default;
    transition:color .25s ease, background .25s ease;
}

.tab:hover{
    color:var(--text-light);
    background:rgba(255,255,255,.03);
}

.tab-icon{
    flex-shrink:0;
    opacity:.85;
}

.tab.active{
    color:var(--text);
    background:rgba(255,255,255,.045);
}

.tab.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--accent);
}

.tab-close{
    margin-left:4px;
    opacity:0;
    font-size:.9rem;
    transition:opacity .2s ease;
}

.tab.active:hover .tab-close{
    opacity:.6;
}

/* -- body: sidebar + editor -- */

.workspace-content{
    display:flex;
    min-height:340px;
}

.sidebar{
    width:175px;
    flex-shrink:0;
    background:rgba(255,255,255,.015);
    border-right:1px solid rgba(255,255,255,.05);
    padding:24px 18px;
}

.folder{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--text-dim);
    letter-spacing:1px;
    margin-bottom:16px;
    font-size:.72rem;
    font-weight:600;
}

.chevron{
    font-size:.65rem;
    color:var(--accent);
}

.file{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--text-dim);
    margin-bottom:13px;
    font-size:.82rem;
    cursor:pointer;
    padding:5px 8px;
    margin-inline:-8px;
    border-radius:6px;
    transition:background .2s ease, color .2s ease;
}

.file:hover{
    background:rgba(255,255,255,.04);
    color:var(--text-light);
}

.file-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
}

.file-dot.html{ background:#E5A94E; }
.file-dot.css{ background:#61AFEF; }
.file-dot.js{ background:#E5C07B; }

.active-file{
    color:var(--text);
    background:rgba(201,168,105,.08);
}

.editor{
    flex:1;
    display:flex;
    padding:28px 30px;
    overflow:hidden;
}

.line-numbers{
    display:flex;
    flex-direction:column;
    color:#4E4B48;
    margin-right:22px;
    user-select:none;
    text-align:right;
    min-width:16px;
    line-height:2.1;
    font-family:var(--font-mono);
    font-size:.92rem;
}

.editor pre{
    margin:0;
    flex:1;
    line-height:2.1;
    font-family:var(--font-mono);
    font-size:.92rem;
    white-space:pre-wrap;
    word-break:break-word;
}

/* -- syntax colors -- */

.keyword{ color:#C678DD; }
.variable{ color:#F5F3EF; }
.property{ color:#61AFEF; }
.string{ color:#E5C07B; }
.operator{ color:#ABB2BF; }
.bracket{ color:#D6D6D6; }
.comma{ color:#ABB2BF; }
.boolean{ color:#D19A66; }

.cursor{
    display:inline-block;
    width:2px;
    height:15px;
    background:var(--accent-bright);
    margin-left:2px;
    transform:translateY(3px);
    animation:blink 1s step-end infinite;
}

@keyframes blink{
    0%,100%{ opacity:1; }
    50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
    .workspace{ animation:none; }
    .cursor{ animation:none; opacity:1; }
}

/* ==========================================================
   SHARED SECTION UTILITIES
========================================================== */

.section-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--accent);
    letter-spacing:4px;
    margin-bottom:18px;
    font-size:.8rem;
    font-weight:500;
}

.section-eyebrow.center{
    justify-content:center;
}

.section-title{
    font-family:var(--font-display);
    font-size:2.6rem;
    line-height:1.2;
    font-weight:600;
    margin-bottom:20px;
    letter-spacing:-.5px;
}

.section-title.center{
    text-align:center;
    margin-bottom:56px;
}

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

section{
    padding:120px 0;
}

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

.tech-strip{
    padding:36px 0;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
}

.tech-strip-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
}

.tech-pill{
    display:inline-flex;
    align-items:center;
    padding:9px 20px;
    border-radius:999px;
    border:1px solid rgba(201,168,105,.22);
    color:var(--text-light);
    font-size:.82rem;
    letter-spacing:.3px;
    text-decoration:none;
    background:rgba(255,255,255,.015);
    transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}

.tech-pill:hover{
    border-color:var(--accent);
    color:var(--accent-bright);
    background:rgba(201,168,105,.07);
    transform:translateY(-2px);
}

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

.about-container{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:90px;
    align-items:start;
}

.about-description{
    color:var(--text-light);
    line-height:1.9;
    font-size:1rem;
    font-weight:300;
    margin-bottom:20px;
    max-width:520px;
}

.about-stats{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.stat-card{
    position:relative;
    padding:24px 26px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
    overflow:hidden;
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
}

.stat-card:hover{
    transform:translateY(-4px);
    border-color:rgba(201,168,105,.3);
    background:rgba(255,255,255,.03);
}

.stat-bar{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg, var(--accent-bright), var(--accent));
}

.stat-label{
    color:var(--text-dim);
    font-size:.72rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.stat-value{
    color:var(--text);
    font-size:.98rem;
    font-weight:500;
}

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

.project-group{
    margin-bottom:64px;
}

.project-group:last-child{
    margin-bottom:0;
}

.project-group-label{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-display);
    font-size:.95rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:26px;
}

.group-index{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--accent);
    border:1px solid var(--border);
    padding:3px 10px;
    border-radius:999px;
    letter-spacing:0;
}

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

.project-card{
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease;
}

.project-card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,168,105,.3);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.6), 0 0 60px -30px var(--accent-glow);
}

.project-card-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

/* Flagship highlight — subtle, not shouty: a soft gold ring,
   lifted glow, and a slightly larger presence at rest. */
.flagship-card{
    position:relative;
    border-color:rgba(201,168,105,.4);
    box-shadow:0 0 0 1px rgba(201,168,105,.14), 0 30px 60px -32px rgba(201,168,105,.3);
}

.flagship-card:hover{
    border-color:rgba(201,168,105,.55);
    box-shadow:0 0 0 1px rgba(201,168,105,.22), 0 28px 56px -24px rgba(0,0,0,.6), 0 0 70px -26px var(--accent-glow);
}

.flagship-tag{
    background:linear-gradient(135deg, var(--accent-bright), var(--accent));
    color:#0A0A0B;
    font-weight:600;
}

.project-thumb{
    position:relative;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.thumb-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index:1;
}

.project-thumb svg{
    position:relative;
    z-index:0;
}

.thumb-game{
    background:linear-gradient(135deg, #E4C48A, #C9A869);
}

.thumb-portfolio{
    background:linear-gradient(135deg, #B9C4D4, #8FA0B8);
}

.thumb-render{
    background:linear-gradient(135deg, #D9A6A0, #B77E77);
}

.thumb-ryouken{
    background:linear-gradient(135deg, #3A3A3E, var(--accent-bright));
}

.thumb-wrenbean{
    background:linear-gradient(135deg, #D9B48F, #A9764F);
}

.thumb-websites{
    background:linear-gradient(135deg, #9FB0C6, #6F819A);
}

.thumb-experimental{
    background:linear-gradient(135deg, #BBA3D9, #8267AE);
}

.project-tag{
    position:absolute;
    top:14px;
    right:14px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(10,10,11,.55);
    color:#F5F3EF;
    font-size:.68rem;
    letter-spacing:.5px;
    backdrop-filter:blur(6px);
    z-index:2;
}

.project-info{
    padding:24px 24px 28px;
}

.project-info h3{
    font-family:var(--font-display);
    font-size:1.15rem;
    margin-bottom:10px;
    font-weight:600;
}

.project-info p{
    color:var(--text-light);
    font-size:.9rem;
    line-height:1.7;
    margin-bottom:18px;
}

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}

.project-tags span{
    font-size:.72rem;
    color:var(--text-dim);
    border:1px solid var(--border);
    padding:4px 10px;
    border-radius:999px;
}

.project-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.82rem;
    font-weight:500;
    color:var(--accent);
    transition:gap .25s ease, color .25s ease;
}

.project-card-link:hover .project-link{
    gap:10px;
    color:var(--accent-bright);
}

/* ==========================================================
   UPCOMING
========================================================== */

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

.upcoming-item{
    position:relative;
    padding:28px 24px 26px;
    border-radius:16px;
    border:1px dashed var(--border);
    background:rgba(255,255,255,.015);
    transition:border-color .3s ease, background .3s ease;
}

.upcoming-item:hover{
    border-color:rgba(201,168,105,.3);
    background:rgba(255,255,255,.03);
}

.upcoming-tag{
    display:inline-block;
    font-size:.66rem;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--accent);
    border:1px solid rgba(201,168,105,.3);
    padding:3px 10px;
    border-radius:999px;
    margin-bottom:16px;
}

.upcoming-item h4{
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:600;
    margin-bottom:10px;
}

.upcoming-item p{
    color:var(--text-light);
    font-size:.85rem;
    line-height:1.65;
}

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

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

.service-card{
    position:relative;
    padding:32px 26px;
    border-radius:16px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
}

.service-card:hover{
    transform:translateY(-6px);
    border-color:rgba(201,168,105,.3);
    background:rgba(255,255,255,.035);
}

/* Services not currently offered — kept visible as a roadmap,
   but visually stepped back so Frontend + UI/UX read as primary. */
.service-card.dimmed{
    opacity:.5;
    filter:grayscale(.5);
}

.service-card.dimmed:hover{
    opacity:.8;
    transform:none;
    border-color:var(--border);
    background:rgba(255,255,255,.02);
}

.service-soon{
    position:absolute;
    top:16px;
    right:16px;
    font-size:.62rem;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--text-dim);
    border:1px solid var(--border);
    padding:4px 9px;
    border-radius:999px;
}

.service-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(201,168,105,.08);
    border:1px solid rgba(201,168,105,.18);
    margin-bottom:22px;
}

.service-card h3{
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:12px;
}

.service-card p{
    color:var(--text-light);
    font-size:.88rem;
    line-height:1.7;
}

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

.contact-container{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:80px;
    align-items:start;
}

.contact-socials{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
}

.contact-socials a{
    cursor:pointer;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:36px;
    border-radius:18px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.form-group label{
    color:var(--text-dim);
    font-size:.78rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.form-group input,
.form-group textarea{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:10px;
    padding:13px 16px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:.92rem;
    resize:vertical;
    transition:border-color .3s ease, background .3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--accent);
    background:rgba(255,255,255,.045);
}

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

.contact-form .btn-primary{
    border:none;
    cursor:pointer;
    align-self:flex-start;
    margin-top:4px;
}

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

footer{
    border-top:1px solid var(--border-soft);
    padding:40px 0;
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
}

.footer-logo{
    font-size:1.3rem;
    text-shadow:none;
}

.footer-socials{
    display:flex;
    gap:28px;
}

.footer-socials a{
    color:var(--text-light);
    text-decoration:none;
    font-size:.88rem;
    transition:color .3s ease;
}

.footer-socials a:hover{
    color:var(--accent-bright);
}

.footer-copy{
    color:var(--text-dim);
    font-size:.82rem;
}