/* ========================================
   Javis Ng — Portfolio v2
   Design: Editorial dark, indigo accent
   Fonts: Outfit · Inter · JetBrains Mono
   ======================================== */

/* ── Tokens ─────────────────────────────── */
:root {
    --bg:            #0b0b11;
    --bg-subtle:     #131318;
    --surface:       rgba(255,255,255,0.03);
    --surface-hover: rgba(255,255,255,0.055);
    --border:        rgba(255,255,255,0.07);
    --border-hover:  rgba(255,255,255,0.13);
    --text:          #ededf0;
    --text-2:        #9999aa;
    --text-3:        #60606e;
    --primary:       #e8e4da;
    --primary-dim:   rgba(232,228,218,0.10);
    --accent:        #e8e4da;
    --font-display:  'Outfit', sans-serif;
    --font-body:     'Outfit', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
    --ease:          cubic-bezier(0.16,1,0.3,1);
    --radius:        16px;
    --radius-sm:     10px;
}

/* ── Reset ──────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
    scroll-padding-top:80px;
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    animation:page-in .7s ease-out both;
}

@keyframes page-in{from{opacity:0}to{opacity:1}}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14)}

img{display:block;max-width:100%;border-radius:var(--radius)}

a,button,[data-magnetic],[data-tilt],.stack-pills span,.project-tech span,.badge{cursor:pointer}

:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* ── Background ────────────────────────── */
.bg-mesh{
    position:fixed;inset:0;z-index:-3;pointer-events:none;
    background:radial-gradient(ellipse 80% 55% at 50% -8%,rgba(232,228,218,0.03) 0%,transparent 65%);
}

.bg-grid{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,0.025) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black 10%,transparent 65%);
    -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black 10%,transparent 65%);
}

.bg-noise{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:256px 256px;
}

/* ── Layout ─────────────────────────────── */
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 clamp(1.5rem,4vw,3rem);
}

.section{
    padding:clamp(5rem,10vw,9rem) 0;
}

.section-label{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--primary);
    letter-spacing:2px;
    margin-bottom:2.5rem;
    opacity:.8;
}

/* ── Typography ─────────────────────────── */
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(3.2rem,8vw,6.5rem);font-weight:800;letter-spacing:-.04em;line-height:1}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:700}
h3{font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:600}

.text-gradient{
    background:linear-gradient(135deg,#e8e4da,#ffffff);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.shiny-text{
    display:inline-block;
    color:#b5b5b5;
    background:linear-gradient(
        120deg,
        #b5b5b5 0%,
        #b5b5b5 35%,
        #ffffff 50%,
        #b5b5b5 65%,
        #b5b5b5 100%
    );
    background-size:200% auto;
    background-position:150% center;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shiny-text 2s linear infinite;
}

@keyframes shiny-text{
    from{background-position:150% center}
    to{background-position:-50% center}
}

/* ── Navigation — Full-width Bar ─────────── */
.nav{
    position:fixed;top:1.2rem;left:50%;transform:translateX(-50%);
    width:calc(100% - 6rem);max-width:1260px;
    z-index:100;
    display:flex;align-items:center;gap:.3rem;
    padding:.45rem .6rem .45rem 1.2rem;
    border-radius:14px;
    background:rgba(11,11,17,.6);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--border);
    box-shadow:0 4px 24px -4px rgba(0,0,0,.35);
}

.nav-logo{
    font-family:var(--font-display);font-weight:700;font-size:1.15rem;
    color:#fff;text-decoration:none;letter-spacing:-.02em;
    margin-right:.6rem;white-space:nowrap;
}
.nav-logo span{color:var(--primary)}

.nav-center{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-center a{
    color:var(--text-2);text-decoration:none;font-size:.84rem;
    padding:.4rem .75rem;border-radius:999px;
    transition:color .2s,background .2s;
}
.nav-center a:hover{color:#fff;background:rgba(255,255,255,.07)}

.nav-right{display:flex;align-items:center;gap:.3rem}

.nav-gh{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    color:var(--text-2);text-decoration:none;font-size:.95rem;
    background:rgba(255,255,255,.04);
    transition:color .2s,background .2s;
}
.nav-gh:hover{color:#fff;background:rgba(255,255,255,.09)}

.nav-toggle{
    display:none;align-items:center;justify-content:center;
    background:none;border:none;cursor:pointer;
    width:34px;height:34px;border-radius:50%;position:relative;
}
.nav-toggle span{
    display:block;width:16px;height:1.5px;background:#fff;border-radius:2px;
    position:absolute;left:50%;transform:translateX(-50%);transition:all .3s;
}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:50%;transform:translate(-50%,-50%)}
.nav-toggle span:nth-child(3){bottom:11px}
.nav-toggle.open span:nth-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(-45deg)}

.nav-dropdown{
    position:absolute;top:calc(100% + .6rem);right:0;
    min-width:180px;
    display:flex;flex-direction:column;padding:.4rem;
    border-radius:var(--radius);
    background:rgba(21,21,32,.92);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border);
    box-shadow:0 12px 32px -4px rgba(0,0,0,.5);
    opacity:0;visibility:hidden;
    transform:translateY(-6px) scale(.96);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
    pointer-events:none;
}
.nav-dropdown.open{
    opacity:1;visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}
.nav-dropdown a{
    padding:.6rem .9rem;border-radius:var(--radius-sm);
    color:var(--text-2);text-decoration:none;font-size:.9rem;
    transition:background .2s,color .2s;
}
.nav-dropdown a:hover{background:rgba(255,255,255,.05);color:#fff}

/* ── Hero ───────────────────────────────── */
.section-hero{
    min-height:100vh;display:flex;align-items:center;
    padding-top:100px;padding-bottom:3rem;position:relative;overflow:hidden;
}
.hero-content{
    width:min(calc(100% - clamp(12rem,18vw,15rem)),1120px);
    max-width:none;
    margin:0 auto;
    position:relative;
    padding-left:0;
    padding-right:0;
}
.hero-copy{
    position:relative;
    z-index:2;
    max-width:760px;
}

.hero-badge{
    display:inline-flex;align-items:center;gap:.8rem;
    font-family:var(--font-mono);font-size:.72rem;
    color:var(--text-3);
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin-bottom:2rem;
}

.hero-name{
    display:block;
    margin-bottom:.12em;
    padding-bottom:.08em;
    line-height:1.08;
    color:rgba(255,255,255,.9);
    background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(224,236,255,.9) 52%,rgba(255,255,255,.82));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 18px 48px rgba(120,165,255,.10);
}
.hero-title{
    font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.6rem);
    font-weight:500;color:var(--text-2);margin-bottom:1.5rem;
}
.hero-sep{color:var(--primary);margin:0 .15em}
.hero-desc{
    color:var(--text-3);font-size:clamp(.95rem,1.5vw,1.1rem);
    max-width:600px;margin-bottom:2.5rem;line-height:1.7;
    text-wrap:balance;
}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}

.hero-mark{
    position:absolute;
    left:79%;
    top:42%;
    width:min(38vw,470px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    z-index:1;
    pointer-events:none;
    isolation:isolate;
}
.hero-particle-canvas{
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    opacity:0;
    filter:none;
    transition:opacity .8s var(--ease);
}
.hero-mark.is-particle-ready .hero-particle-canvas{
    opacity:.88;
}
.hero-mark-fallback{
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    display:block;
    transform:translate(-50%,-50%);
    font-family:var(--font-display);
    font-size:17rem;
    font-weight:800;
    line-height:.82;
    letter-spacing:0;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.09);
    text-shadow:0 0 70px rgba(255,255,255,.035);
    opacity:.86;
    transition:opacity .55s var(--ease);
}
.hero-mark.is-particle-ready .hero-mark-fallback{
    opacity:.03;
}

.logo-loop-wrap.hero-loop{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin-top:clamp(3rem,7vw,5.5rem);
    margin-left:0;
    margin-right:0;
    width:100%;
    padding:.8rem 0;
    border-top:1px solid rgba(255,255,255,.085);
    border-bottom:1px solid rgba(255,255,255,.055);
    mask-image:linear-gradient(to right,transparent 0%,black 8%,black 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 88%,transparent 100%);
}
.hero-loop .logo-loop-row{
    margin-bottom:0;
}
.hero-loop .logo-track{
    gap:.65rem;
}
.hero-loop .logo-item{
    min-width:auto;
    flex-direction:row;
    align-items:center;
    gap:.55rem;
    padding:.4rem .75rem;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.018);
}
.hero-loop .logo-item:hover{
    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.09);
}
.hero-loop .logo-item i,
.hero-loop .si-icon{
    width:1.05rem;
    height:1.05rem;
    font-size:1.05rem;
    opacity:.46;
}
.hero-loop .logo-badge{
    width:1.55rem;
    height:1.05rem;
    border-radius:4px;
    font-size:.48rem;
    opacity:.55;
}
.hero-loop .logo-item > span:last-child{
    font-size:.64rem;
    color:rgba(153,153,170,.8);
}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:.75rem 1.4rem;border-radius:var(--radius-sm);
    text-decoration:none;font-weight:500;font-size:.92rem;
    transition:all .25s var(--ease);border:none;cursor:pointer;
}
.btn:active{transform:scale(.98) translateY(1px)}

.btn-primary{
    background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(214,232,255,.68));
    color:var(--bg);
    border:1px solid rgba(255,255,255,.72);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 14px 34px -18px rgba(210,230,255,.5);
}
.btn-primary:hover{
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(226,239,255,.76));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 16px 38px -16px rgba(210,230,255,.58);
    transform:translateY(-1px);
}

.btn-ghost{
    background:transparent;color:#fff;
    border:1px solid var(--border);
}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-hover)}

/* Scroll hint */
.scroll-hint{
    position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);
    letter-spacing:2px;text-transform:uppercase;
    animation:scroll-bob 2.5s ease-in-out infinite;
}
.scroll-line{width:1px;height:28px;background:linear-gradient(to bottom,var(--text-3),transparent)}
@keyframes scroll-bob{0%,100%{opacity:.3;transform:translateX(-50%) translateY(0)}50%{opacity:.6;transform:translateX(-50%) translateY(6px)}}

/* ── About ──────────────────────────────── */
.about-grid{
    display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);
    align-items:start;
}
.about-text p{color:var(--text-2);margin-top:1.2rem;max-width:52ch;line-height:1.75}
.about-text h2{margin-bottom:.5rem}
.about-focuses{display:flex;flex-direction:column;margin-top:.5rem}
.focus-item{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:.9rem 0;border-top:1px solid var(--border);gap:2rem;
}
.focus-item:last-child{border-bottom:1px solid var(--border)}
.focus-item strong{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap}
.focus-item span{font-size:.8rem;color:var(--text-3);text-align:right;line-height:1.5}

/* ── Projects: Case studies ─────────────── */
.project-case{
    display:grid;
    grid-template-columns:minmax(320px,.86fr) minmax(420px,1fr);
    gap:clamp(2rem,4.5vw,4.5rem);
    align-items:center;
    padding:clamp(2.2rem,4vw,3.5rem) clamp(1.2rem,2.5vw,2rem);
    border-top:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius);
    overflow:visible;
}
.project-case:last-child{
    border-bottom:1px solid rgba(255,255,255,.07);
}
.project-case .project-info,
.project-case .project-visual{
    position:relative;
    z-index:2;
}
.project-case-secondary{
    grid-template-columns:minmax(360px,1fr) minmax(320px,.72fr);
}
.project-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-bottom:1.1rem;
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:1.1px;
    text-transform:uppercase;
    color:var(--text-3);
}
.project-meta span + span{
    padding-left:.7rem;
    border-left:1px solid rgba(255,255,255,.12);
}

.project-case h3{
    font-size:clamp(1.8rem,3.5vw,2.6rem);
    margin-bottom:1rem;
}
.project-case p{
    color:var(--text-2);
    font-size:clamp(.95rem,1.2vw,1.05rem);
    line-height:1.75;
    margin-bottom:1.4rem;
    max-width:54ch;
}

.project-outcomes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin:1.5rem 0;
    border-top:1px solid rgba(255,255,255,.075);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.project-outcomes span{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    padding:.9rem 1rem .95rem 0;
    color:var(--text-3);
    font-size:.78rem;
    line-height:1.45;
}
.project-outcomes span + span{
    padding-left:1rem;
    border-left:1px solid rgba(255,255,255,.06);
}
.project-outcomes strong{
    color:#fff;
    font-family:var(--font-mono);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:1px;
    text-transform:uppercase;
}

.project-tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.project-tech span{
    font-size:.75rem;font-family:var(--font-mono);
    background:var(--surface);border:1px solid var(--border);
    padding:3px 10px;border-radius:6px;color:var(--text-2);
    transition:all .25s;
}
.project-tech span:hover{color:#fff;border-color:var(--border-hover)}

.project-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.85rem 1.1rem;
}
.project-link{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--primary);text-decoration:none;font-size:.9rem;font-weight:500;
    transition:gap .25s var(--ease);
}
.project-link:hover{gap:10px}
.project-link-secondary{
    color:var(--text-3);
}
.project-link-secondary:hover{
    color:var(--text);
}

/* Project visuals */
.project-visual{position:relative}

.project-image-wrap{
    border-radius:var(--radius-sm);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.105);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    box-shadow:0 24px 60px rgba(0,0,0,.26);
    transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.project-image-wrap:hover{
    border-color:rgba(255,255,255,.16);
    box-shadow:0 28px 72px rgba(0,0,0,.34);
}
.project-window-bar{
    display:flex;
    align-items:center;
    gap:.42rem;
    height:34px;
    padding:0 .85rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(11,11,17,.72);
}
.project-window-bar span{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.18);
}
.project-window-bar span:first-child{background:rgba(232,228,218,.45)}
.project-window-bar strong{
    margin-left:.35rem;
    font-family:var(--font-mono);
    font-size:.64rem;
    font-weight:500;
    color:var(--text-3);
    letter-spacing:.6px;
}
.project-image-wrap img{width:100%;height:auto;display:block}
.project-terminal{
    margin:0;
    padding:1.1rem 1.15rem 1.25rem;
    font-family:var(--font-mono);
    font-size:.78rem;
    line-height:1.7;
    color:var(--text-2);
    background:rgba(11,11,17,.55);
    white-space:pre-wrap;
}

.infra-map{
    position:relative;
    min-height:330px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:var(--radius-sm);
    background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 22%),
        radial-gradient(circle at 58% 38%,rgba(232,228,218,.03),transparent 38%),
        rgba(255,255,255,.016);
    overflow:hidden;
}
.infra-map::before{
    content:"";
    position:absolute;
    inset:12%;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}
.infra-map::after{
    content:"";
    position:absolute;
    inset:25%;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}
.infra-node{
    position:absolute;
    z-index:2;
    display:grid;
    place-items:center;
    width:82px;
    height:82px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(13,13,20,.72);
    color:#fff;
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:1px;
    text-transform:uppercase;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.node-core{
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    border-color:rgba(232,228,218,.28);
    box-shadow:0 0 32px rgba(232,228,218,.06);
}
.node-edge{left:10%;top:16%}
.node-proxy{right:10%;top:18%}
.node-ai{right:18%;bottom:14%}
.infra-line{
    position:absolute;
    left:50%;top:50%;
    width:34%;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);
    transform-origin:left center;
}
.line-a{transform:rotate(218deg)}
.line-b{transform:rotate(320deg)}
.line-c{transform:rotate(38deg);width:28%}

/* ── Token Monitor live widget ──────────── */
.tm-widget{
    border-radius:var(--radius-sm);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.105);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    box-shadow:0 24px 60px rgba(0,0,0,.26);
    transition:border-color .4s,box-shadow .4s;
}
.tm-widget:hover{
    border-color:rgba(255,255,255,.16);
    box-shadow:0 28px 72px rgba(0,0,0,.34);
}
.tm-widget.is-updated{
    animation:tm-flash 1.6s ease-out;
}
@keyframes tm-flash{
    0%   {border-color:rgba(111,199,122,.45);box-shadow:0 24px 60px rgba(0,0,0,.26),0 0 0 1px rgba(111,199,122,.35),0 0 32px rgba(111,199,122,.18)}
    100% {border-color:rgba(255,255,255,.105);box-shadow:0 24px 60px rgba(0,0,0,.26)}
}
.tm-value{
    transition:color .25s;
}
.tm-widget.is-updated .tm-value{
    color:#dff5e3;
    transition:color .15s;
}
.tm-widget-bar{
    display:flex;
    align-items:center;
    gap:.55rem;
    height:38px;
    padding:0 1rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(11,11,17,.72);
    font-family:var(--font-mono);
    font-size:.66rem;
    letter-spacing:.6px;
    color:var(--text-3);
}
.tm-widget-bar strong{
    color:var(--text-2);
    font-weight:500;
    letter-spacing:.4px;
}
.tm-widget-bar .tm-status{
    margin-left:auto;
    font-size:.56rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--text-3);
    transition:color .3s;
}
.tm-widget-bar .tm-status.is-error{color:#c97a7a}
.tm-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#6fc77a;
    box-shadow:0 0 0 0 rgba(111,199,122,.55);
    animation:tm-pulse 2.1s cubic-bezier(0.66,0,0,1) infinite;
}
.tm-dot.is-error{
    background:#c97a7a;
    animation:none;
    box-shadow:none;
}
@keyframes tm-pulse{
    0%{box-shadow:0 0 0 0 rgba(111,199,122,.45)}
    70%{box-shadow:0 0 0 10px rgba(111,199,122,0)}
    100%{box-shadow:0 0 0 0 rgba(111,199,122,0)}
}
.tm-widget-body{
    padding:1.45rem 1.55rem 1.25rem;
    display:flex;
    flex-direction:column;
    gap:1.1rem;
}
.tm-row{display:flex;flex-direction:column;gap:.45rem}
.tm-row + .tm-row{
    padding-top:1.1rem;
    border-top:1px solid rgba(255,255,255,.06);
}
.tm-label{
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--text-3);
}
.tm-value{
    font-family:var(--font-display);
    font-weight:700;
    color:#fff;
    line-height:1;
    letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
}
.tm-value-tokens{font-size:clamp(2rem,4.2vw,2.7rem)}
.tm-value-cost{font-size:clamp(1.5rem,3vw,2rem)}
.tm-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:.35rem;
    padding-top:1rem;
    border-top:1px solid rgba(255,255,255,.06);
    font-family:var(--font-mono);
    font-size:.64rem;
    color:var(--text-3);
    letter-spacing:.4px;
}
.tm-foot-tag{
    text-transform:uppercase;
    letter-spacing:1.4px;
    font-size:.56rem;
}

/* ── Border Glow ─────────────────────────── */
.border-glow-card {
  --card-bg:            #0d0d14;
  --edge-proximity:     0;
  --cursor-angle:       45deg;
  --edge-sensitivity:   30;
  --color-sensitivity:  calc(var(--edge-sensitivity) + 20);
  --border-radius:      16px;
  --glow-padding:       40px;
  --cone-spread:        25;
  --fill-opacity:       0.35;

  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0,0,0.01px);
  display: grid;
  overflow: visible;
  padding: 0;
  background: var(--card-bg);
  border: 1px solid rgb(255 255 255 / 10%);
}

.border-glow-card:hover {
  background: var(--card-bg);
  border-color: rgb(255 255 255 / 10%);
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity .25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}

/* mesh-gradient border (directional cone) */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one,   none) border-box,
    var(--gradient-two,   none) border-box,
    var(--gradient-three, none) border-box,
    var(--gradient-four,  none) border-box,
    var(--gradient-five,  none) border-box,
    var(--gradient-six,   none) border-box,
    var(--gradient-seven, none) border-box,
    var(--gradient-base,  linear-gradient(#e8e4da 0 100%)) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black      calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black      calc((100 - var(--cone-spread)) * 1%)
  );
}

/* mesh-gradient edge fill (soft-light) */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one,   none) padding-box,
    var(--gradient-two,   none) padding-box,
    var(--gradient-three, none) padding-box,
    var(--gradient-four,  none) padding-box,
    var(--gradient-five,  none) padding-box,
    var(--gradient-six,   none) padding-box,
    var(--gradient-seven, none) padding-box,
    var(--gradient-base,  linear-gradient(#e8e4da 0 100%)) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%,  transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%,  transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%,  transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%,  transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow beam (plus-lighter, extends beyond card) */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px    var(--glow-color,    hsl(40deg 10% 88% / 100%)),
    inset 0 0 1px 0    var(--glow-color-60, hsl(40deg 10% 88% / 60%)),
    inset 0 0 3px 0    var(--glow-color-50, hsl(40deg 10% 88% / 50%)),
    inset 0 0 6px 0    var(--glow-color-40, hsl(40deg 10% 88% / 40%)),
    inset 0 0 15px 0   var(--glow-color-30, hsl(40deg 10% 88% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 10% 88% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 10% 88% / 10%)),
    0 0 1px 0    var(--glow-color-60, hsl(40deg 10% 88% / 60%)),
    0 0 3px 0    var(--glow-color-50, hsl(40deg 10% 88% / 50%)),
    0 0 6px 0    var(--glow-color-40, hsl(40deg 10% 88% / 40%)),
    0 0 15px 0   var(--glow-color-30, hsl(40deg 10% 88% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 10% 88% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 10% 88% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: clamp(1.5rem,3vw,2.5rem);
  border-radius: inherit;
}

/* ── Skill Universe ─────────────────────── */
.section-stack{
    position:relative;
    overflow:hidden;
}
.section-stack::before{
    content:"";
    position:absolute;inset:8% -10% auto auto;
    width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(232,228,218,.04),transparent 68%);
    filter:blur(4px);pointer-events:none;
}
.stack-hero{
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(460px,1fr);
    align-items:center;
    gap:clamp(2.5rem,4.5vw,4rem);
}
.eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:1rem;
}
.stack-copy h2{margin-bottom:1.25rem}
.stack-copy{
    position:relative;
    padding-bottom:150px;
}
.stack-desc{
    max-width:520px;
    color:var(--text-2);
    line-height:1.75;
    text-wrap:balance;
}
.stack-stats{
    display:flex;flex-wrap:wrap;gap:.75rem;
    margin-top:2rem;
}
.stack-stats span{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.58rem .8rem;
    border:1px solid var(--border);
    background:rgba(255,255,255,.035);
    border-radius:999px;
    color:var(--text-3);
    font-family:var(--font-mono);
    font-size:.72rem;
}
.stack-stats strong{color:#fff;font-family:var(--font-display);font-size:.9rem}

.skill-universe{
    --size:min(44vw,520px);
    position:relative;
    width:var(--size);height:var(--size);
    min-width:420px;min-height:420px;
    margin-inline:auto;
    display:grid;place-items:center;
    border-radius:50%;
    isolation:isolate;
}
.skill-universe::before{
    content:"";position:absolute;inset:6%;border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 22%),
        radial-gradient(circle at 58% 44%,rgba(232,228,218,.03),transparent 42%);
    filter:blur(.3px);
    z-index:-2;
}
.skill-universe::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.2px);
    background-size:42px 42px;
    mask-image:radial-gradient(circle,black 0 18%,transparent 75%);
    -webkit-mask-image:radial-gradient(circle,black 0 18%,transparent 75%);
    opacity:.16;z-index:-3;
}
.orbit{
    position:absolute;border-radius:50%;
    border:1px solid rgba(255,255,255,.065);
    box-shadow:inset 0 0 30px rgba(255,255,255,.012);
}
.orbit::before{
    content:"";position:absolute;top:-2px;left:50%;
    width:4px;height:4px;border-radius:50%;
    background:rgba(232,228,218,.5);
    box-shadow:0 0 10px rgba(232,228,218,.2);
}
.orbit-1{width:28%;height:28%;animation:orbit-spin 24s linear infinite}
.orbit-2{width:46%;height:46%;animation:orbit-spin 34s linear infinite reverse}
.orbit-3{width:66%;height:66%;animation:orbit-spin 46s linear infinite}
.orbit-4{width:86%;height:86%;animation:orbit-spin 62s linear infinite reverse}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

.universe-core{
    width:134px;height:134px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.35rem;text-align:center;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.022));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 0 52px rgba(232,228,218,.06), inset 0 0 26px rgba(255,255,255,.03);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    z-index:2;
}
.universe-core span{
    font-family:var(--font-mono);font-size:.62rem;letter-spacing:3px;color:var(--primary);
}
.universe-core strong{
    font-size:.82rem;letter-spacing:1.5px;color:#fff;
}
.skill-planet{
    position:absolute;left:50%;top:50%;
    width:54px;height:54px;border-radius:50%;
    --orbit-angle:var(--a);
    transform:translate(-50%,-50%) rotate(var(--orbit-angle)) translateX(var(--r)) rotate(calc(-1 * var(--orbit-angle)));
    animation:planet-orbit 150s linear infinite;
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(18,18,25,.68);
    color:rgba(255,255,255,.72);
    box-shadow:0 10px 28px rgba(0,0,0,.32), inset 0 0 18px rgba(255,255,255,.022);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:border-color .28s,background .28s,box-shadow .28s,color .28s;
    cursor:pointer;
    z-index:3;
}
@property --orbit-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}
@keyframes planet-orbit{to{--orbit-angle:calc(var(--a) + 360deg)}}
.skill-planet i{font-size:1.65rem;filter:brightness(0) invert(1);opacity:.72;transition:opacity .25s}
.skill-planet img{width:1.55rem;height:1.55rem;filter:brightness(0) invert(1);opacity:.72;border-radius:0;transition:opacity .25s}
.skill-planet::after{
    content:attr(data-skill);
    position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
    padding:.32rem .55rem;border-radius:999px;
    background:rgba(11,11,17,.88);border:1px solid rgba(255,255,255,.12);
    color:var(--text-2);font-family:var(--font-mono);font-size:.64rem;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.skill-planet:hover,.skill-planet:focus-visible,.skill-planet.active{
    border-color:rgba(232,228,218,.35);
    background:rgba(232,228,218,.06);
    color:#fff;
    box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 24px rgba(232,228,218,.08);
    animation-play-state:paused;
}
.skill-planet:hover::after,.skill-planet:focus-visible::after,.skill-planet.active::after{opacity:1;transform:translateX(-50%) translateY(0)}
.skill-planet:hover i,.skill-planet:hover img,.skill-planet.active i,.skill-planet.active img{opacity:1}

.skill-detail{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    min-height:118px;
    margin-top:0;
    padding:1rem 1.05rem;
    border-radius:var(--radius);
    background:rgba(11,11,17,.72);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.skill-detail-domain{
    display:block;font-family:var(--font-mono);font-size:.64rem;color:var(--primary);
    letter-spacing:1.4px;text-transform:uppercase;margin-bottom:.4rem;
}
.skill-detail-name{display:block;font-size:1.1rem;margin-bottom:.35rem;color:#fff}
.skill-detail-use{font-size:.86rem;color:var(--text-2);line-height:1.55}
.section-stack.has-active .skill-detail{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.stack-categories{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.85rem;
    margin-top:clamp(2rem,4vw,3rem);
}
.stack-category{
    padding:0;
    border-radius:var(--radius-sm);
    border:0;
    background:transparent;
    transition:background .25s,border-color .25s,transform .25s var(--ease);
    overflow:visible;
}
.stack-category:hover{
    transform:translateY(-2px);
}
.stack-category.border-glow-card{
    --card-bg:#0d0d14;
    --border-radius:var(--radius-sm);
    --fill-opacity:0;
    border:1px solid rgb(255 255 255 / 10%);
    background:var(--card-bg);
}
.stack-category.border-glow-card::after{
    opacity:0!important;
}
.stack-category.border-glow-card .border-glow-inner{
    padding:1rem;
    overflow:hidden;
    border-radius:inherit;
}
.stack-category .border-glow-inner > span{
    display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--primary);
    letter-spacing:1.3px;text-transform:uppercase;margin-bottom:.55rem;
}
.stack-category p{color:var(--text-2);font-size:.9rem;line-height:1.65}

/* ── Legacy Logo Loop (unused fallback) ──── */
.logo-loop-wrap{
    overflow:hidden;
    margin-top:2.5rem;
    padding:.5rem 0 1rem;
    max-width:1320px;
    width:calc(100% - clamp(3rem,8vw,6rem));
    margin-inline:auto;
    mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
}
.logo-loop-row{display:flex;margin-bottom:.75rem;overflow:hidden}
.logo-loop-row:last-child{margin-bottom:0}
.logo-track{display:flex;gap:.75rem;width:max-content;will-change:transform}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:.6rem .9rem;flex-shrink:0;min-width:70px;border-radius:var(--radius-sm);transition:background .25s;cursor:default}
.logo-item:hover{background:rgba(255,255,255,0.04)}
.logo-item i{font-size:1.75rem;line-height:1;display:block;filter:brightness(0) invert(1);opacity:.5;transition:opacity .25s}
.logo-item:hover i{opacity:.85}
.si-icon{width:1.75rem;height:1.75rem;object-fit:contain;display:block;filter:brightness(0) invert(1);opacity:.5;transition:opacity .25s;pointer-events:none}
.logo-item:hover .si-icon{opacity:.85}
.logo-item > span{font-family:var(--font-mono);font-size:.67rem;color:var(--text-3);white-space:nowrap;letter-spacing:.3px;transition:color .25s}
.logo-item:hover > span{color:var(--text-2)}
.logo-badge{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.09);transition:all .25s}
.logo-item:hover .logo-badge{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.16)}

/* ── Contact ────────────────────────────── */
.contact-wrap{text-align:center;max-width:640px;margin:0 auto}
.contact-wrap h2{margin-bottom:1rem}
.contact-desc{color:var(--text-2);margin-bottom:2.5rem;line-height:1.7}
.contact-email{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:clamp(1rem,2vw,1.25rem);
    color:var(--primary);text-decoration:none;
    padding:.8rem 1.6rem;border-radius:var(--radius-sm);
    border:1px solid rgba(232,228,218,.15);background:rgba(232,228,218,.04);
    transition:all .25s var(--ease);
}
.contact-email:hover{
    background:rgba(232,228,218,.08);border-color:rgba(232,228,218,.28);
    gap:14px;
}

/* ── Contact Socials ─────────────────────── */
.contact-socials{display:flex;gap:.8rem;margin-top:2rem;justify-content:center}
.contact-socials a{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;
    color:var(--text-3);border:1px solid var(--border);
    font-size:1rem;text-decoration:none;
    transition:all .25s var(--ease);
}
.contact-socials a:hover{color:var(--text);border-color:var(--border-hover);background:var(--surface-hover)}

/* ── Footer ─────────────────────────────── */
.footer{
    border-top:1px solid var(--border);padding:2.5rem 0;margin-top:2rem;
    background:rgba(0,0,0,.2);
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1rem}
.footer-links{display:flex;gap:1.2rem}
.footer-links a{
    color:var(--text-3);font-size:1.1rem;
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid var(--border);
    transition:all .25s var(--ease);
}
.footer-links a:hover{color:#fff;border-color:var(--border-hover);background:var(--surface-hover)}
.footer-meta{
    display:flex;align-items:center;gap:.6rem;
    font-size:.78rem;color:var(--text-3);
}
.footer-dot{opacity:.4}
.footer-visitors{font-family:var(--font-mono);font-size:.75rem}
.footer-visitors span:first-child{color:var(--primary);font-weight:500}

/* ── Scroll reveal ──────────────────────── */
[data-reveal]{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* ── Responsive ─────────────────────────── */
@media(max-width:1150px){
    .stack-categories{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:901px) and (max-width:1320px){
    #about > .container,
    #projects > .container,
    #stack > .container{
        width:min(calc(100% - 7rem),1120px);
        max-width:none;
        padding-left:0;
        padding-right:0;
    }
    .hero-mark{width:min(36vw,430px)}
    .hero-mark-fallback{font-size:15rem}
}

@media(max-width:900px){
    .nav{
        top:.8rem;left:.8rem;right:.8rem;
        width:auto;max-width:none;transform:none;
        justify-content:space-between;
        border-radius:var(--radius);
        padding:.4rem .4rem .4rem .9rem;
    }
    .nav-center{display:none}
    .nav-toggle{display:flex}
    .nav-dropdown{right:.4rem}

    .section-hero{
        min-height:100svh;
        align-items:flex-start;
        padding-top:8.25rem;
        padding-bottom:4rem;
    }
    .hero-content{
        width:100%;
        margin-left:0;
        margin-right:0;
        padding-left:clamp(1.5rem,4vw,3rem);
        padding-right:clamp(1.5rem,4vw,3rem);
    }
    .hero-copy{max-width:680px}
    .hero-mark{
        left:auto;
        right:1rem;
        top:3.5rem;
        width:320px;
        transform:none;
        opacity:.2;
    }
    .hero-mark-fallback{font-size:11rem}
    .logo-loop-wrap.hero-loop{
        max-width:100%;
        width:100%;
        margin-top:2.75rem;
    }
    .about-grid{grid-template-columns:1fr}
    .about-focuses{margin-top:2rem}
    .project-case,
    .project-case-secondary{grid-template-columns:1fr}
    .project-visual{max-width:720px}
    .stack-hero{grid-template-columns:1fr;gap:2.25rem}
    .skill-universe{--size:min(82vw,420px);min-width:0;min-height:0;margin-top:.75rem}
    .stack-categories{grid-template-columns:repeat(2,1fr)}
    .scroll-hint{display:none}
}

@media(max-width:640px){
    .project-outcomes{grid-template-columns:1fr}
    .project-outcomes span{padding:.85rem 0}
    .project-outcomes span + span{
        padding-left:0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.06);
    }
    .project-meta{gap:.55rem}
    .project-meta span + span{
        padding-left:.55rem;
    }
    .project-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:.7rem;
    }
    .stack-categories{grid-template-columns:1fr}
}

@media(min-width:481px) and (max-width:900px){
    .section-hero{
        min-height:112svh;
        padding-top:8.5rem;
    }
    .hero-content{
        padding-top:clamp(8.5rem,15svh,11rem);
    }
    .logo-loop-wrap.hero-loop{
        margin-top:3.5rem;
    }
}

@media(max-width:480px){
    .hero-cta{flex-direction:column;width:100%}
    .btn{width:100%;justify-content:center;padding:.9rem}
    h1{font-size:2.8rem}
    .section-hero{
        min-height:100svh;
        padding-top:13rem;
        padding-bottom:4rem;
    }
    .hero-content{
        padding-left:1.25rem;
        padding-right:1.25rem;
    }
    .hero-badge{margin-bottom:1.35rem}
    .hero-title{margin-bottom:1.1rem}
    .hero-desc{margin-bottom:1.8rem}
    .hero-mark{display:none}
    .logo-loop-wrap.hero-loop{margin-top:2rem}
    .hero-loop .logo-item{padding:.4rem .65rem;min-width:auto}
    .hero-loop .logo-item i,
    .hero-loop .si-icon{width:1rem;height:1rem;font-size:1rem}
    .project-case{padding:2rem 1rem}
    .infra-map{min-height:260px}
    .infra-node{width:66px;height:66px;font-size:.58rem}
    .footer-meta{flex-wrap:wrap;justify-content:center}
    .logo-item{min-width:68px;padding:.7rem .85rem}
    .logo-item i{font-size:1.5rem}
    .stack-stats{gap:.55rem}
    .stack-stats span{font-size:.66rem;padding:.48rem .65rem}
    .skill-universe{--size:min(84vw,340px)}
    .universe-core{width:104px;height:104px}
    .universe-core strong{font-size:.7rem}
    .skill-planet{width:42px;height:42px}
    .skill-planet i{font-size:1.25rem}
    .skill-planet img{width:1.2rem;height:1.2rem}
    .skill-planet::after{display:none}
    .stack-copy{padding-bottom:140px}
    .skill-detail{width:100%}
}

@media(max-width:480px) and (max-height:720px){
    .section-hero{padding-top:10.75rem}
    .hero-badge{margin-bottom:1rem}
    .hero-title{margin-bottom:.9rem}
    .hero-desc{margin-bottom:1.35rem;line-height:1.6}
    .logo-loop-wrap.hero-loop{margin-top:1.5rem}
}

@media(min-width:1600px){
    .container{max-width:1320px}
    h1{font-size:7.5rem}
    h2{font-size:3.4rem}
    .hero-content{max-width:1320px}
    .hero-title{font-size:1.8rem}
    .hero-desc{font-size:1.15rem;max-width:680px}
    .hero-badge{font-size:.85rem}
    .section{padding:10rem 0}
    .stack-grid{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:2200px){
    h1{font-size:9rem}
    h2{font-size:3.8rem}
    .hero-content{max-width:1480px}
    .hero-title{font-size:2.1rem}
    .hero-desc{font-size:1.25rem;max-width:760px}
    .section{padding:12rem 0}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .shiny-text{background-position:center}
    .skill-planet{animation:none!important}
    [data-reveal]{opacity:1;transform:none}
}