:root {
    --bg: #061426;
    --bg-soft: #0a1d35;

    --panel: #0c203b;
    --panel-2: #102a49;

    --border: #24486d;
    --border-hi: #3d74a5;

    --text: #f4f8fc;
    --muted: #a7b9cc;
    --muted-dim: #728ba5;

    --accent: #087cf0;
    --accent-2: #35d8ff;

    --steel: #d7e2ec;
    --steel-dim: #8297aa;

    --whatsapp: #25d366;

    --accent-soft: rgba(8, 124, 240, 0.16);

    --font-display: "Space Grotesk", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
    --font-body: "Inter", sans-serif;
}

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

html{scroll-behavior:smooth;}

body {
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(0, 174, 255, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 48%,
            rgba(20, 105, 230, 0.16),
            transparent 38%
        ),
        radial-gradient(
            circle at 75% 85%,
            rgba(181, 220, 244, 0.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #07182c 0%,
            #061426 45%,
            #091d35 100%
        );

    
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
}

#particle-canvas{

position:fixed;

top:0;left:0;

width:100%;height:100%;

z-index:0;

pointer-events:none;

}

.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(
            rgba(53, 216, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 124, 240, 0.055) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            ellipse 78% 68% at 50% 22%,
            black 0%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 78% 68% at 50% 22%,
            black 0%,
            transparent 78%
        );

    pointer-events: none;
}

.content{

position:relative;

z-index:1;

}

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

a{color:inherit;text-decoration:none;}

.wrap{

max-width:1080px;

margin:0 auto;

padding:0 32px;

}

/* ---------- scroll progress bar ---------- */

.scroll-progress{

position:fixed;

top:0;left:0;

height:2.5px;

width:0%;

background:linear-gradient(90deg, var(--accent), var(--accent-2));

box-shadow:0 0 10px rgba(0,212,255,0.6);

z-index:100;

transition:width .08s linear;

}

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

.scroll-progress{transition:none;}

}

/* ---------- nav ---------- */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;

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

    background: rgba(6, 20, 38, 0.82);
    border-bottom: 1px solid rgba(76, 151, 210, 0.3);

    box-shadow:
        0 8px 30px rgba(0, 43, 89, 0.22),
        inset 0 -1px 0 rgba(202, 232, 250, 0.04);
}

nav .wrap{

display:flex;

align-items:center;

justify-content:space-between;

height:64px;

}

.logo{

display:flex;

align-items:center;

gap:10px;

}

.logo-mark{

height:26px;

width:auto;

display:block;

}

.logo span{

font-family:var(--font-mono);

font-size:14px;

font-weight:600;

color:var(--text);

letter-spacing:.01em;

}

@media (max-width:480px){ .logo span{display:none;} }

.nav-links{

display:flex;

gap:36px;

font-family:var(--font-mono);

font-size:13px;

color:var(--muted);

}

.nav-links a{

position:relative;

transition:color .2s;

padding-bottom:2px;

}

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

.nav-links a::before{

content:'./';

color:var(--muted-dim);

}

.nav-links a.active{

color:var(--accent-2);

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

}

.nav-toggle{

display:none;

width:38px;height:38px;

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

background:rgba(255,255,255,0.02);

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

border-radius:6px;

color:var(--text);

cursor:pointer;

}

.nav-toggle:hover{color:var(--accent-2);border-color:var(--accent-2);}

@media (max-width:700px){

.nav-toggle{display:flex;}

.nav-links{

        position:fixed;

        top:64px;left:0;right:0;

        flex-direction:column;

        gap:0;

        background:rgba(3,6,12,0.97);

        backdrop-filter:blur(14px);

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

        max-height:0;

        overflow:hidden;

        transition:max-height .3s ease;

    }

.nav-links.open{max-height:320px;}

.nav-links a{

        padding:16px 32px;

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

    }

}

/* ---------- hero ---------- */

header.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

padding-top:64px;

position:relative;

}

.hero-mark{

height:64px;

width:auto;

margin-bottom:28px;

}

.eyebrow{

font-family:var(--font-mono);

font-size:13px;

color:var(--accent-2);

letter-spacing:.04em;

display:flex;

align-items:center;

gap:10px;

margin-bottom:22px;

}

.eyebrow .bracket{color:var(--muted-dim);}

.cursor-blink{

display:inline-block;

width:8px;height:16px;

background:var(--accent-2);

animation:blink 1s step-end infinite;

vertical-align:middle;

}

@keyframes blink{50%{opacity:0;}}

h1.title{

font-family:var(--font-display);

font-weight:700;

font-size:clamp(38px, 7vw, 76px);

line-height:1.04;

letter-spacing:-.01em;

max-width:820px;

}

h1.title .name-line{display:block;}

h1.title .accent-text{

background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);

-webkit-background-clip:text;

background-clip:text;

color:transparent;

}

.hero-role{

font-family:var(--font-mono);

font-size:clamp(14px,2vw,18px);

color:var(--muted);

margin-top:22px;

max-width:640px;

}

.hero-role .pipe{color:var(--border-hi);margin:0 10px;}

.hero-summary {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.8;
    max-width: 720px;
    color: var(--muted);
}

.hero-cta{

margin-top:40px;

display:flex;

gap:16px;

flex-wrap:wrap;

}

.btn{

font-family:var(--font-mono);

font-size:15.5px;

padding:13px 26px;

border-radius:6px;

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

transition:all .2s ease;

display:inline-flex;

align-items:center;

gap:8px;

}

.btn-primary{

background:var(--accent);

border-color:var(--accent);

color:#fff;

box-shadow:0 0 0 0 rgba(47,111,255,0.5);

}

.btn-primary:hover{

background:var(--accent-2);

border-color:var(--accent-2);

box-shadow:0 0 24px rgba(0,212,255,0.35);

transform:translateY(-1px);

}

.btn-ghost{

color:var(--text);

background:rgba(255,255,255,0.02);

}

.btn-ghost:hover{

border-color:var(--accent-2);

color:var(--accent-2);

}

.btn-whatsapp{

background:rgba(37,211,102,0.1);

border-color:var(--whatsapp);

color:var(--whatsapp);

}

.btn-whatsapp:hover{

background:var(--whatsapp);

color:#04140b;

box-shadow:0 0 24px rgba(37,211,102,0.35);

transform:translateY(-1px);

}

.hero-meta{

position:absolute;

bottom:40px;

left:32px;

right:32px;

max-width:1080px;

margin:0 auto;

display:flex;

justify-content:space-between;

font-family:var(--font-mono);

font-size:11.5px;

color:var(--muted-dim);

}

@media (max-width:700px){ .hero-meta{display:none;} }

/* ---------- section shell ---------- */

section{

padding:120px 0;

position:relative;

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

}

@media (max-width:700px){

    section{padding:80px 0;}

}

.sec-head{

display:flex;

align-items:baseline;

gap:16px;

margin-bottom:52px;

}

.sec-num{

font-family:var(--font-mono);

font-size:13px;

color:var(--accent-2);

}

.sec-title{

font-family:var(--font-display);

font-size:clamp(26px,4vw,36px);

font-weight:600;

}

.sec-line{

flex:1;

height:1px;

background:linear-gradient(90deg, var(--border-hi), transparent);

}

/* ---------- about ---------- */

.about-grid{

display:grid;

grid-template-columns:1.3fr 1fr;

gap:60px;

}

@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }

.about-text p{

color:var(--muted);

font-size:16px;

margin-bottom:18px;

}

.about-text strong{color:var(--text);font-weight:500;}

.about-text .mission-tag{

font-family:var(--font-mono);

color:var(--accent-2);

font-size:18px;

}

.stat-box{

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

border-radius:8px;

padding:20px;

background:var(--panel);

margin-bottom:14px;

}

.stat-box .k{

font-family:var(--font-mono);

font-size:11px;

color:var(--muted-dim);

text-transform:uppercase;

letter-spacing:.06em;

}

.stat-box .v{

font-family:var(--font-display);

font-size:22px;

margin-top:6px;

color:var(--accent-2);

}

/* ---------- skills (config-file style) ---------- */

.config-panel{

background:var(--panel);

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

border-radius:10px;

overflow:hidden;

}

.config-panel .titlebar{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

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

font-family:var(--font-mono);

font-size:12px;

color:var(--muted-dim);

}

.titlebar .tdot{width:9px;height:9px;border-radius:50%;background:var(--border-hi);}

.config-body{

padding:28px 32px;

font-family:var(--font-mono);

font-size:14.5px;

}

.config-row{

display:grid;

grid-template-columns:160px 1fr;

gap:18px;

padding:9px 0;

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

align-items:baseline;

}

.config-row:last-child{border-bottom:none;}

.config-key{color:var(--accent-2);}

.config-val{color:var(--muted);}

.config-val .item{

color:var(--text);

background:rgba(47,111,255,0.1);

border:1px solid rgba(47,111,255,0.25);

border-radius:4px;

padding:2px 8px;

margin:2px 6px 2px 0;

display:inline-block;

font-size:13px;

}

@media (max-width:600px){

.config-row{grid-template-columns:1fr;gap:4px;}

}

/* ---------- experience ---------- */

.exp-item{

display:grid;

grid-template-columns:200px 1fr;

gap:32px;

padding:32px 0;

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

}

.exp-item:first-child{padding-top:0;}

.exp-item:last-child{border-bottom:none;}

@media (max-width:700px){ .exp-item{grid-template-columns:1fr;gap:10px;} }

.exp-period{

font-family:var(--font-mono);

font-size:12.5px;

color:var(--muted-dim);

}

.exp-role{

font-family:var(--font-display);

font-size:19px;

font-weight:600;

color:var(--text);

}

.exp-org{

font-family:var(--font-mono);

font-size:13px;

color:var(--accent-2);

margin-top:4px;

margin-bottom:14px;

}

.exp-bullets{list-style:none;}

.exp-bullets li{

color:var(--muted);

font-size:14.5px;

padding-left:18px;

position:relative;

margin-bottom:8px;

}

.exp-bullets li::before{

content:'▹';

position:absolute;left:0;

color:var(--accent);

}

/* ---------- projects grid ---------- */

.proj-grid{

display:grid;

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

gap:24px;

}

@media (max-width:700px){ .proj-grid{grid-template-columns:1fr;} }

.proj-card{

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

border-radius:10px;

padding:0 28px 28px;

background:var(--panel);

transition:border-color .25s, transform .25s;

display:flex;

flex-direction:column;

min-height:200px;

overflow:hidden;

}

.proj-card:hover{

border-color:var(--accent-2);

transform:translateY(-3px);

}

.proj-visual{

margin:0 -28px 20px;

height:120px;

display:flex;

align-items:center;

justify-content:center;

background:

radial-gradient(circle at 25% 20%, rgba(0,212,255,0.16), transparent 55%),

radial-gradient(circle at 80% 85%, rgba(47,111,255,0.2), transparent 55%),

var(--panel-2);

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

position:relative;

}

.proj-visual::after{

content:attr(data-glyph);

font-family:var(--font-display);

font-size:44px;

font-weight:700;

color:transparent;

-webkit-text-stroke:1.2px rgba(170,182,200,0.45);

}

.proj-card .proj-index{

font-family:var(--font-mono);

font-size:11.5px;

color:var(--muted-dim);

margin-bottom:14px;

}

.proj-card h4{

font-family:var(--font-display);

font-size:19px;

margin-bottom:10px;

}

.proj-card > p{

color:var(--muted);

font-size:14px;

}

.proj-card .tech-tags{

display:flex;flex-wrap:wrap;gap:8px;

margin-top:14px;

}

.proj-card .tech-tags span{

font-family:var(--font-mono);

font-size:11px;

color:var(--muted);

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

padding:3px 9px;

border-radius:20px;

}

.proj-more{

max-height:0;

overflow:hidden;

transition:max-height .35s ease, margin-top .35s ease;

}

.proj-more p{

color:var(--muted);

font-size:14px;

padding-top:14px;

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

margin-top:14px;

}

.proj-more.open{max-height:260px;}

.proj-card .proj-actions{

margin-top:auto;

padding-top:18px;

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

flex-wrap:wrap;

}

.proj-toggle{

font-family:var(--font-mono);

font-size:12px;

color:var(--muted);

background:none;

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

border-radius:20px;

padding:7px 14px;

cursor:pointer;

transition:color .2s, border-color .2s;

}

.proj-toggle:hover, .proj-toggle:focus-visible{

color:var(--accent-2);

border-color:var(--accent-2);

}

.proj-card .proj-link{

font-family:var(--font-mono);

font-size:12.5px;

color:var(--accent-2);

display:inline-flex;

align-items:center;

gap:6px;

}

.proj-card .proj-link svg{width:12px;height:12px;}

/* ---------- project inquiry CTA ---------- */

.inquiry-section{padding:0 0 120px;border-top:none;}

@media (max-width:700px){ .inquiry-section{padding-bottom:80px;} }

.inquiry-panel{

display:flex;

align-items:center;

justify-content:space-between;

gap:32px;

flex-wrap:wrap;

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

border-radius:12px;

padding:40px 44px;

background:linear-gradient(160deg, var(--panel-2), var(--panel));

}

.inquiry-text .featured-tag{

font-family:var(--font-mono);

font-size:12px;

color:var(--accent-2);

margin-bottom:12px;

display:block;

}

.inquiry-text h3{

font-family:var(--font-display);

font-size:24px;

margin-bottom:10px;

}

.inquiry-text p{

color:var(--muted);

font-size:14.5px;

max-width:440px;

}

/* ---------- contact ---------- */

.contact-section{

text-align:center;

padding-bottom:100px;

}

.contact-section .sec-head{justify-content:center;}

.contact-section h2.big{

font-family:var(--font-display);

font-size:clamp(30px,5.5vw,52px);

font-weight:700;

max-width:640px;

margin:0 auto 26px;

}

.contact-section .accent-text{

background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);

-webkit-background-clip:text;background-clip:text;color:transparent;

}

.contact-links{

display:flex;

gap:16px;

justify-content:center;

flex-wrap:wrap;

margin-top:36px;

}

footer{

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

padding:28px 0;

}

footer .wrap{

display:flex;

justify-content:space-between;

font-family:var(--font-mono);

font-size:12px;

color:var(--muted-dim);

}

@media (max-width:600px){ footer .wrap{flex-direction:column;gap:8px;text-align:center;} }

/* reveal on scroll */

.reveal{

opacity:0;

transform:translateY(24px);

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

}

.reveal.visible{opacity:1;transform:translateY(0);}

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

html{scroll-behavior:auto;}

.reveal{opacity:1;transform:none;transition:none;}

.cursor-blink{animation:none;}

}

:focus-visible{

outline:2px solid var(--accent-2);

outline-offset:3px;

}

/* ---------- VWS visual refresh + responsive controls ---------- */
.hero-mark{
    width:clamp(210px,34vw,390px);
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:left center;
    filter:drop-shadow(0 14px 28px rgba(0,111,255,.24)) drop-shadow(0 0 16px rgba(0,212,255,.18));
}

.hero::before{
    content:'';
    position:absolute;
    width:min(660px,85vw);height:min(660px,85vw);
    left:-26%;top:2%;z-index:-1;
    background:radial-gradient(circle,rgba(0,212,255,.10),rgba(47,111,255,.055) 38%,transparent 70%);
    pointer-events:none;
}

.lang-toggle{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;
    min-width:58px;height:36px;padding:0 10px;margin-left:18px;
    color:var(--steel);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(47,111,255,.08));
    border:1px solid var(--border-hi);border-radius:8px;cursor:pointer;
    font:600 11px var(--font-mono);letter-spacing:.08em;transition:.22s ease;
}
.lang-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;}
.lang-toggle:hover{color:#fff;border-color:var(--accent-2);box-shadow:0 0 18px rgba(0,212,255,.16);transform:translateY(-1px);}

.contact-flip{
    position:relative;width:190px;height:58px;perspective:800px;border-radius:9px;
    font:600 13px var(--font-mono);letter-spacing:.02em;
}
.contact-face{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
    padding:0 16px;border:1px solid var(--border-hi);border-radius:9px;
    backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .3s,border-color .3s;
}
.contact-front{background:linear-gradient(135deg,rgba(47,111,255,.17),rgba(0,212,255,.07));color:var(--text);}
.contact-back{transform:rotateY(180deg);background:linear-gradient(135deg,#0967d8,#00a9d6);color:#fff;border-color:rgba(255,255,255,.25);}
.contact-face svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.7;}
.contact-email .contact-face svg{fill:none;}
.contact-flip:hover .contact-front,.contact-flip:focus .contact-front,.contact-flip.is-flipped .contact-front{transform:rotateY(180deg);}
.contact-flip:hover .contact-back,.contact-flip:focus .contact-back,.contact-flip.is-flipped .contact-back{transform:rotateY(360deg);box-shadow:0 10px 35px rgba(0,153,255,.28);}
.contact-whatsapp .contact-back{background:linear-gradient(135deg,#128c4b,#25d366);}
.contact-github .contact-back{background:linear-gradient(135deg,#29364c,#586a88);}

@media (max-width:900px){
    .wrap{padding-left:24px;padding-right:24px;}
    .hero-mark{width:clamp(220px,48vw,350px);}
}

@media (max-width:700px){
    nav .wrap{gap:10px;}
    .lang-toggle{margin-left:auto;min-width:54px;height:36px;}
    .nav-toggle{flex:0 0 38px;}
    .hero{align-items:flex-start;min-height:100svh;padding-bottom:54px;}
    .hero-mark{width:min(78vw,310px);margin-bottom:22px;}
    .hero-summary{max-width:100%;}
    .hero-cta{width:100%;}
    .hero-cta .btn{flex:1;justify-content:center;min-width:0;text-align:center;}
    section{padding-left:0;padding-right:0;}
    .config-row{grid-template-columns:1fr;gap:8px;}
    .contact-links{display:grid;grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto;}
    .contact-flip{width:100%;}
}

@media (max-width:480px){
    .wrap{padding-left:18px;padding-right:18px;}
    nav .wrap{height:60px;}
    .nav-links{top:60px;}
    .logo-mark{height:23px;}
    .lang-toggle{margin-left:auto;padding:0 8px;min-width:50px;}
    header.hero{padding-top:84px;}
    .hero-mark{width:min(82vw,280px);}
    .hero-cta{flex-direction:column;gap:10px;}
    .hero-cta .btn{width:100%;}
    .sec-head{gap:10px;}
    .sec-title{font-size:14px;}
    .inquiry-panel{padding:26px 20px;}
    .inquiry-panel .btn{width:100%;text-align:center;justify-content:center;}
}

@media (hover:none){
    .contact-face{transition-duration:.4s;}
}

@media (prefers-reduced-motion:reduce){
    .contact-face,.lang-toggle{transition:none;}
}