/* ============================================================
   SAIYAM GELOT PORTFOLIO — Full CSS
   ============================================================ */

html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-prevent {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}

:root {
    --bg:      #060606;
    --surface: #0f0f0f;
    --s2:      #181818;
    --accent:  #7c5cfc;
    --accent2: #f472b6;
    --text:    #ededed;
    --muted:   #555;
    --border:  rgba(255,255,255,0.06);
    --ease:    cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    cursor: none;
}
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }

/* ── Cursor ─────────────────────────── */
#cur {
    width:8px; height:8px;
    background: var(--accent);
    border-radius:50%;
    position:fixed; top: 0; left: 0; pointer-events:none; z-index:9999;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
}
#cur2 {
    width:36px; height:36px;
    border: 1.5px solid rgba(124,92,252,.4);
    border-radius:50%;
    position:fixed; top: 0; left: 0; pointer-events:none; z-index:9998;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
    transition: width .4s var(--ease), height .4s var(--ease),
                background .4s, border-color .4s;
}
#cur2.big { width:56px; height:56px; background:rgba(124,92,252,.08); border-color:var(--accent); }

/* ── Loader ─────────────────────────── */
#loader {
    position:fixed; inset:0;
    background: var(--bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9000;
    flex-direction:column; gap:2rem;
}
.loader-box { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.loader-svg { width:220px; overflow:visible; }
.loader-svg-text {
    font-family:'Bebas Neue', sans-serif;
    font-size:36px;
    fill: none;
    stroke: var(--text);
    stroke-width: 1.5;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawText 1.5s var(--ease) forwards;
}
@keyframes drawText {
    to { stroke-dashoffset: 0; fill: var(--text); }
}
.loader-line {
    width: 220px; height:2px;
    background: var(--border); border-radius:2px; overflow:hidden;
}
.loader-fill {
    height:100%; width:0%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius:2px;
}

/* ── Nav ────────────────────────────── */
#nav {
    position:fixed; top:0; left:0; right:0;
    z-index:800; padding:1.2rem 0;
    transition: padding .4s var(--ease), background .4s, border .4s;
}
#nav.scrolled {
    background: rgba(6,6,6,.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}
.nav-wrap {
    max-width:1400px; margin:0 auto; padding:0 2.5rem;
    display:flex; justify-content:space-between; align-items:center;
}
.logo { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:2px; }
.logo span { color: var(--accent); }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:1px; transition:color .3s; }
.nav-links a:hover { color:var(--text); }
.nav-hire {
    background:var(--accent); color:#fff !important;
    padding:.65rem 1.5rem; border-radius:6px;
    transition: transform .3s var(--ease), box-shadow .3s !important;
}
.nav-hire:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(124,92,252,.35); }
.hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.hamburger span { display:block; width:26px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.mob-menu {
    position:fixed; inset:0; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3rem;
    z-index:700;
    clip-path: circle(0% at 95% 5%);
    transition: clip-path .7s var(--ease);
}
.mob-menu.open { clip-path: circle(150% at 95% 5%); }
.mob-menu a { font-family:'Bebas Neue',sans-serif; font-size:3.5rem; color:var(--muted); transition:color .3s; }
.mob-menu a:hover { color:var(--text); }

/* ── Buttons ────────────────────────── */
.btn-primary {
    display:inline-flex; align-items:center; gap:.6rem;
    background: var(--accent); color:#fff;
    padding:1rem 2.2rem; border-radius:6px;
    font-size:.9rem; font-weight:700; border:none; cursor:pointer;
    transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-primary:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(124,92,252,.35); }
.btn-primary.full { width:100%; justify-content:center; }

.btn-outline {
    display:inline-flex; align-items:center; gap:.6rem;
    background:transparent; color:var(--text);
    padding:1rem 2.2rem; border-radius:6px; border:1px solid var(--border);
    font-size:.9rem; font-weight:700;
    transition: transform .3s var(--ease), background .3s;
}
.btn-outline:hover { background:var(--surface); transform:translateY(-4px); }

/* ── HERO ───────────────────────────── */
#hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Gradient + noise BG */
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 50%, rgba(124,92,252,.15), transparent),
        radial-gradient(ellipse 50% 50% at 80% 20%, rgba(244,114,182,.1), transparent),
        radial-gradient(ellipse 60% 60% at 60% 80%, rgba(59,130,246,.08), transparent);
    animation: bgShift 12s ease-in-out infinite alternate;
}
@keyframes bgShift {
    0%   { opacity:.6; }
    100% { opacity:1; }
}

/* Grid overlay */
#hero::before {
    content:'';
    position:absolute; inset:0; z-index:0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 65px 65px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* ── Hero Track ── */
.hero-track {
    position: relative; z-index:2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7rem 2rem 8rem;
    gap: 12vh;
}

/* Panel: Name */
.panel-name {
    width: 100%;
    max-width: 1240px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

/* Huge ghosted BG word */
.name-bg-text {
    position:absolute;
    font-family:'Bebas Neue', sans-serif;
    font-size: clamp(10rem, 25vw, 22rem);
    color: rgba(255,255,255,0.02);
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    letter-spacing: -5px;
    line-height:1;
}

/* Intro content */
.hero-intro {
    display:flex;
    flex-direction:column;
    gap: 2rem;
    max-width: 780px;
}

/* Eyebrow tag */
.intro-line { overflow: hidden; }
.il-tag {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(124,92,252,.1);
    border: 1px solid rgba(124,92,252,.25);
    color: var(--accent);
    padding: .5rem 1.2rem;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    transform: translateY(100%);
}

/* Big name */
.intro-name { overflow: hidden; }
.big-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    line-height: .9;
}
.bn-word {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(5rem, 13vw, 10rem);
    letter-spacing: -2px;
    display: inline-block;
    transform: translateY(100%);
}
.bn-outline {
    -webkit-text-stroke: 2px var(--text);
    color: transparent;
}

/* Tagline */
.intro-sub {
    opacity: 0;
    transform: translateY(30px);
}
.intro-sub p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--muted);
    line-height: 1.8;
}
.intro-loc {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1rem;
    font-size: .8rem; color: var(--muted); letter-spacing: 1px;
}
.live-dot {
    width: 8px; height: 8px;
    background: #22c55e; border-radius: 50%;
    animation: livePulse 2s infinite;
    flex-shrink: 0;
}
@keyframes livePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Buttons */
.intro-btns {
    display: flex; gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    flex-wrap: wrap;
}

/* ── Scroll-driven skills panel ── */
.panel-skills {
    width: 100%;
    max-width: 1240px;
    opacity: 1;
}
.skills-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3rem;
}
.skills-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 2rem;
    align-items: stretch;
}
.skill-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: border-color .3s, transform .3s var(--ease);
}
.skill-item::before {
    content: attr(data-n);
    position: absolute;
    top: -1rem; right: 1.5rem;
    font-family:'Bebas Neue',sans-serif;
    font-size: 6rem;
    color: rgba(255,255,255,.03);
    line-height:1;
}
.skill-item:hover { border-color: var(--accent); transform: translateY(-8px); }
.skill-item i {
    font-size: 2.2rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
}
.skill-item h3 { font-size: 1.4rem; font-weight: 800; }

/* ── Scroll Cue ── */
.hero-scroll-cue {
    position: absolute;
    bottom: 2.5rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    z-index: 10;
    opacity: 0;
}
.hero-scroll-cue span { font-size:.65rem; letter-spacing:3px; color:var(--muted); text-transform:uppercase; }
.cue-mouse {
    width:20px; height:34px;
    border:2px solid rgba(255,255,255,.15); border-radius:12px;
    display:flex; justify-content:center; padding-top:4px;
}
.cue-dot {
    width:4px; height:7px;
    background: var(--accent); border-radius:4px;
    animation: cueDot 1.8s infinite;
}
@keyframes cueDot {
    0%   { transform:translateY(0); opacity:1; }
    100% { transform:translateY(12px); opacity:0; }
}

/* ── Ticker ── */
.hero-ticker {
    position: absolute;
    bottom:0; left:0; right:0; z-index:3;
    border-top: 1px solid var(--border);
    background: rgba(6,6,6,.7);
    backdrop-filter: blur(10px);
    padding: .85rem 0;
    overflow: hidden;
}
.ticker-inner {
    display:flex; gap: 3rem;
    white-space: nowrap;
    width: max-content;
    animation: ticker 22s linear infinite;
}
.ticker-inner span { font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.ticker-inner .tx { color: var(--accent); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Scroll-reveal classes ── */
.reveal-left  { opacity:0; transform:translateX(-60px); }
.reveal-right { opacity:0; transform:translateX(60px); }

/* ── ABOUT ────────────────────────── */
.about-section { padding:10rem 0; border-top:1px solid var(--border); overflow: visible; }
.sec-label { font-size:.78rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:1.8rem; }
.about-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:5rem; align-items:flex-start; margin-top:3rem; }
.about-right { padding-top: 3rem; }

.about-left h2 { font-size:clamp(2.8rem,4.5vw,4.5rem); font-weight:800; letter-spacing:-2px; line-height:1.08; margin-bottom:2.5rem; overflow:visible; }
.about-left h2 em { font-style:italic; font-weight:300; color:var(--muted); }

/* Profile box */
.profile-wrap { position:relative; max-width:360px; }
.profile-border-glow {
    position:absolute; inset:-5px; border-radius:22px;
    background: linear-gradient(135deg, var(--accent), var(--accent2), transparent 50%, var(--accent));
    background-size:300% 300%;
    animation: glowRot 5s linear infinite;
    z-index:0;
}
@keyframes glowRot { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.profile-box {
    position:relative; z-index:1;
    border-radius:18px; overflow:hidden;
    aspect-ratio:4/5; background:var(--s2);
}
.profile-photo { width:100%; height:100%; object-fit:cover; object-position:top; }
.profile-fallback {
    display:none;
    position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center;
    gap:.8rem; color:var(--muted); font-size:.85rem; text-align:center;
}
.profile-fallback i { font-size:2.5rem; color:var(--border); }
.profile-fallback strong { color:var(--accent); }
.profile-box.no-photo .profile-photo { display:none; }
.profile-box.no-photo .profile-fallback { display:flex; }

.prof-badge {
    position:absolute; bottom:-1.2rem; right:-1.2rem; z-index:2;
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:1.2rem 1.8rem;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.prof-badge strong { font-size:2.2rem; font-weight:800; color:var(--accent); line-height:1; }
.prof-badge span { font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }

.about-right .ap, .ap { font-size:1.1rem; color:var(--muted); line-height:1.9; margin-bottom:1.8rem; }
.about-right .ap strong, .ap strong { color:var(--text); font-weight:700; }

.about-stats {
    display:flex; gap:3.5rem; margin-top:3rem; padding-top:3rem;
    border-top:1px solid var(--border);
    flex-wrap: wrap;
}
.ast { display:flex; flex-direction:column; align-items:flex-start; }
.ast-num-row { display:flex; align-items:baseline; gap:.2rem; }
.ast-n { font-size:3.5rem; font-weight:800; line-height:1; color:var(--text); display:inline; }
.ast sup { font-size:1.6rem; font-weight:800; color:var(--accent); line-height:1; vertical-align:baseline; margin-left:.05rem; }
.ast-l { font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:.6rem; display:block; }

/* ── SERVICES ────────────────────── */
.services-section { padding:8rem 0; border-top:1px solid var(--border); }

.svc-header {
    display:grid; grid-template-columns:1fr 1fr;
    gap:3rem; align-items:end; margin-bottom:5rem;
}
.svc-header .sec-title { margin-bottom:0; }
.svc-header .sec-title em { font-style:italic; font-weight:300; color:var(--muted); }
.svc-intro { font-size:1.1rem; color:var(--muted); line-height:1.8; align-self:end; }

/* Category block */
.svc-category { margin-bottom:5rem; }

.svc-cat-label {
    display:flex; align-items:center; gap:2rem;
    margin-bottom:2.5rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}
.cat-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:3.5rem; color:var(--border);
    line-height:1;
}
.cat-info { display:flex; align-items:center; gap:1rem; }
.cat-info i { font-size:1.5rem; color:var(--accent); }
.cat-info h3 { font-size:1.6rem; font-weight:800; }

/* Cards grid — 4 columns */
.svc-cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.2rem;
}

.svc-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:2rem;
    display:flex; flex-direction:column; gap:1rem;
    transition:border-color .3s, transform .4s var(--ease), box-shadow .4s;
    opacity:0; transform:translateY(40px);
}
.svc-card:hover {
    border-color:rgba(124,92,252,.4);
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.svc-card-icon {
    width:52px; height:52px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
    flex-shrink:0;
}
.svc-card h4 { font-size:1.05rem; font-weight:800; }
.svc-card p { font-size:.88rem; color:var(--muted); line-height:1.7; flex:1; }

.svc-card-tags {
    display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto;
}
.svc-card-tags span {
    background:var(--s2); border:1px solid var(--border);
    padding:.25rem .7rem; border-radius:100px;
    font-size:.68rem; font-weight:600; color:var(--muted); white-space:nowrap;
}

/* Tools row */
.tools-row {
    display:flex; align-items:center; gap:2rem;
    padding:2rem 2.5rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; flex-wrap:wrap;
    margin-top:1rem;
}
.tools-label { font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tools-list { display:flex; flex-wrap:wrap; gap:.8rem; }
.tool-chip {
    display:flex; align-items:center; gap:.5rem;
    background:var(--s2); border:1px solid var(--border);
    padding:.5rem 1.1rem; border-radius:100px;
    font-size:.8rem; font-weight:600; color:var(--text);
    transition:border-color .3s, transform .3s;
}
.tool-chip:hover { border-color:var(--accent); transform:translateY(-2px); }
.tool-chip i { color:var(--accent); }

@media(max-width:1100px) { .svc-cards { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px)  { .svc-cards { grid-template-columns:1fr; } .svc-header { grid-template-columns:1fr; } }



/* ── WORK ────────────────────────── */
.work-section { padding:8rem 0; border-top:1px solid var(--border); }

/* Portfolio categories */
.port-category { margin-bottom:5rem; }
.port-cat-header {
    display:flex; align-items:center; gap:2rem;
    margin-bottom:2.5rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}
.port-cat-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:3.5rem; color:var(--border);
    line-height:1;
}
.port-cat-title { display:flex; align-items:center; gap:1rem; }
.port-cat-title i { font-size:1.5rem; color:var(--accent); }
.port-cat-title h3 { font-size:1.6rem; font-weight:800; }

.work-grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}
.wi {
    display: block;
    color: inherit;
    border-radius:16px; overflow:hidden;
    border:1px solid var(--border); background:var(--surface);
    transition:transform .5s var(--ease), box-shadow .5s;
    opacity:1;
    transform: translate3d(0,0,0);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}
.wi:hover { transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.wi-img { height:260px; overflow:hidden; position:relative; }
.wi-img img,
.wi-img video {
    height:100%; width:100%; object-fit:cover;
    transition:transform .8s var(--ease);
    display:block;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
}
.wi:hover .wi-img img,
.wi:hover .wi-img video { transform: translate3d(0,0,0) scale(1); }
.wi-info { padding:1.5rem 2rem 2rem; }
.wi-tag { font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color: #06b6d4; }
.wi-info h3 { font-size:1.2rem; font-weight:800; margin:.5rem 0 .5rem; }
.wi-desc { font-size:.88rem; color:var(--muted); line-height:1.6; margin:0 0 1.2rem; }
.wi-link { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; color:var(--muted); transition:color .3s, gap .3s; }
.wi-link:hover { color:var(--text); gap:.7rem; }

/* ── CONTACT ─────────────────────── */
.contact-section { padding:10rem 0; border-top:1px solid var(--border); }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.contact-left h2 { font-size:clamp(3rem,6vw,5rem); font-weight:800; letter-spacing:-3px; line-height:1; margin:1rem 0 2.5rem; }
.clink {
    display:flex; align-items:center; gap:1rem;
    color:var(--muted); font-weight:600; margin-bottom:1.2rem;
    transition:color .3s;
}
.clink:hover { color:var(--text); }
.clink i { width:42px; height:42px; background:var(--s2); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1rem; flex-shrink:0; transition:background .3s; }
.clink:hover i { background:var(--accent); color:#fff; }

.contact-form { display:flex; flex-direction:column; gap:1.5rem; }
.fg { display:flex; flex-direction:column; gap:.5rem; }
.fg label { font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.fg input,.fg textarea {
    background:var(--surface); border:1px solid var(--border);
    padding:1rem 1.2rem; color:var(--text); font-family:inherit;
    font-size:.95rem; border-radius:8px; outline:none; resize:vertical; width:100%;
    transition:border-color .3s, box-shadow .3s;
}
.fg input:focus,.fg textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,252,.1); }

.service-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.2rem 0;
}
.service-tag {
    cursor: pointer;
}
.service-tag span {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    transition: all 0.3s var(--ease);
    user-select: none;
}
.service-tag input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 15px rgba(124,92,252,0.25);
}
.service-tag:hover span {
    border-color: var(--accent);
    color: var(--text);
}

/* ── FOOTER ──────────────────────── */
footer { border-top:1px solid var(--border); padding:2.5rem 0; }
.footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
footer p { font-size:.85rem; color:var(--muted); }
.socials { display:flex; gap:1rem; }
.socials a {
    width:38px; height:38px; border:1px solid var(--border); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:.85rem; transition:all .3s;
}
.socials a:hover { background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }

/* ── RESPONSIVE ──────────────────── */

/* ─ Tablet / Large Phone (≤ 1024px) ─ */
@media(max-width:1024px) {
    .svc-row { grid-template-columns:1fr; gap:1rem; }
    .svc-tags { justify-content:flex-start; }
    .svc-row::before { display:none; }
    .skills-list { grid-template-columns:repeat(2,1fr); }
    .about-grid { grid-template-columns:1fr; gap:3rem; }
    .svc-header { grid-template-columns:1fr; gap:2rem; }
    .svc-cards { grid-template-columns:repeat(2,1fr); }
    .contact-wrap { grid-template-columns:1fr; gap:3rem; }
    .work-grid { grid-template-columns:repeat(2,1fr); }
}

/* ─ Phone (≤ 768px) ─ */
@media(max-width:768px) {
    /* Hide custom cursor on touch devices */
    #cur, #cur2 { display:none; }
    body { cursor: auto; }

    .container { padding:0 1.2rem; }
    .nav-wrap { padding:0 1.2rem; }

    /* Nav */
    .nav-links { display:none; }
    .hamburger { display:flex; }

    /* Hero */
    .hero-track { padding:6rem 1.2rem 6rem; gap:6vh; }
    .bn-word { font-size:clamp(3.5rem,17vw,6rem); }
    .big-name { gap:0 .8rem; }
    .intro-sub p { font-size:.95rem; }
    .intro-btns { flex-direction:column; width:100%; }
    .intro-btns a, .intro-btns button { width:100%; justify-content:center; text-align:center; }
    .panel-skills { padding-top:2rem; }
    .skills-list { grid-template-columns:1fr; gap:1rem; }
    .skill-item { padding:1.8rem 1.5rem; }
    .hero-scroll-cue { display:none; }
    .name-bg-text { display:none; }

    /* About */
    .about-section { padding:6rem 0; }
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
    .about-right { padding-top:0; }
    .about-left h2 { font-size:clamp(2.2rem,8vw,3.5rem); letter-spacing:-1px; }
    .profile-wrap { max-width:280px; margin:0 auto; }
    .prof-badge { right:-.5rem; bottom:-.5rem; padding:.8rem 1.2rem; }
    .prof-badge strong { font-size:1.6rem; }
    .about-stats { flex-wrap:wrap; gap:1.5rem; }
    .ast-n { font-size:2.8rem; }

    /* Services */
    .services-section { padding:5rem 0; }
    .svc-header { grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; }
    .svc-cards { grid-template-columns:1fr; gap:1rem; }
    .svc-card { padding:1.5rem; }
    .cat-num { font-size:2.5rem; }
    .cat-info h3 { font-size:1.3rem; }
    .tools-row { flex-direction:column; align-items:flex-start; gap:1rem; padding:1.5rem; }
    .tools-list { justify-content:flex-start; }

    /* Work / Portfolio */
    .work-section { padding:5rem 0; }
    .work-grid { grid-template-columns:1fr; gap:1.2rem; }
    .wi-img { height:200px; }
    .port-cat-num { font-size:2.5rem; }
    .port-cat-title h3 { font-size:1.3rem; }

    /* Contact */
    .contact-section { padding:6rem 0; }
    .contact-wrap { grid-template-columns:1fr; gap:2.5rem; }
    .contact-left h2 { font-size:clamp(2.4rem,8vw,4rem); letter-spacing:-2px; }
    .service-selector { gap:.5rem; }
    .service-tag span { padding:.55rem .9rem; font-size:.8rem; }

    /* Footer */
    .footer-row { flex-direction:column; text-align:center; gap:1.2rem; }
    .socials { justify-content:center; }

    /* Sections general */
    .sec-title { font-size:clamp(2rem,7vw,3rem) !important; letter-spacing:-1px; }
}

/* ─ Small phones (≤ 480px) ─ */
@media(max-width:480px) {
    .container { padding:0 1rem; }
    .nav-wrap { padding:0 1rem; }
    .logo { font-size:1.5rem; }

    .hero-track { padding:5rem 1rem 5rem; }
    .bn-word { font-size:clamp(3rem,20vw,5.5rem); letter-spacing:-1px; }
    .il-tag { font-size:.72rem; padding:.4rem 1rem; }
    .hero-intro { gap:1.5rem; }

    .about-section { padding:4rem 0; }
    .profile-wrap { max-width:260px; }

    .services-section { padding:4rem 0; }
    .svc-card { padding:1.2rem; }
    .svc-card h4 { font-size:.95rem; }
    .svc-card p { font-size:.82rem; }
    .svc-card-tags span { font-size:.62rem; padding:.2rem .55rem; }

    .work-section { padding:4rem 0; }
    .wi-img { height:180px; }
    .wi-info { padding:1.2rem 1.5rem 1.5rem; }
    .wi-info h3 { font-size:1rem; }
    .wi-desc { font-size:.82rem; }

    .contact-section { padding:4rem 0; }
    .contact-left h2 { font-size:clamp(2rem,10vw,3rem); letter-spacing:-1px; }
    .clink { font-size:.88rem; }
    .clink i { width:36px; height:36px; }
    .fg label { font-size:.7rem; }
    .fg input, .fg textarea { padding:.85rem 1rem; font-size:.9rem; }
    .btn-primary { padding:.9rem 1.8rem; font-size:.85rem; }

    .mob-menu a { font-size:2.8rem; }
    footer { padding:2rem 0; }
}

/* ── Showcase Grid (Sub-pages) ── */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
@media(max-width: 1024px) {
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 640px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* GPU-promote animated elements to their own compositing layers */
.wi, .wi-img, .svc-card, .logo-card, .sm-card,
.brand-card, .masonry-item, .about-img-wrap,
.btn-primary, .btn-outline, .nav-hire {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Defer paint cost of off-screen sections */
.about-section,
.services-section,
#work,
.contact-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* Hardware-accelerate video rendering */
video {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth image rendering */
img {
    image-rendering: auto;
    decoding: async;
}

/* Reduce layout jitter on hover-animated cards */
.wi-img video,
.logo-card-img img,
.sm-card-img img,
.brand-card-img img,
.masonry-item img {
    will-change: transform;
}