:root{
    --bg:#f5f8fc;
    --bg-soft:#ebf2f9;
    --surface:rgba(255,255,255,.86);
    --surface-strong:#ffffff;
    --surface-alt:#f7faff;
    --border:rgba(25, 54, 95, .12);
    --border-strong:rgba(25, 54, 95, .22);
    --text:#16253b;
    --muted:#617183;
    --primary:#285db5;
    --primary-strong:#1d478e;
    --primary-soft:#e4edfb;
    --accent:#0f9b87;
    --accent-soft:#e4faf6;
    --warm:#d88a47;
    --warm-soft:#fff1de;
    --rose:#d66c8f;
    --rose-soft:#fff0f5;
    --danger:#b24a53;
    --shadow:0 28px 64px rgba(24, 46, 84, .12);
    --shadow-soft:0 16px 34px rgba(24, 46, 84, .08);
    --radius:24px;
    --radius-sm:18px;
    --max:1180px;
}

*{box-sizing:border-box}
html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    overflow-x:clip;
}
body{
    margin:0;
    min-height:100vh;
    font-family:"Aptos","Segoe UI Variable","Segoe UI",sans-serif;
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
    background:
        radial-gradient(circle at 16% 6%, rgba(216,138,71,.18), transparent 18%),
        radial-gradient(circle at 36% 16%, rgba(214,108,143,.1), transparent 16%),
        radial-gradient(circle at 0% 0%, rgba(40,93,181,.18), transparent 28%),
        radial-gradient(circle at 100% 10%, rgba(15,155,135,.14), transparent 24%),
        radial-gradient(circle at 82% 34%, rgba(40,93,181,.08), transparent 18%),
        radial-gradient(circle at 88% 72%, rgba(214,108,143,.12), transparent 18%),
        radial-gradient(circle at 18% 84%, rgba(15,155,135,.1), transparent 20%),
        linear-gradient(125deg, #ffffff 0%, #f9fbff 18%, #f5f8fc 42%, #eff5fb 74%, #edf3f8 100%);
    position:relative;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(22,37,59,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,37,59,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.24), transparent 78%);
    opacity:.28;
}

body::after{
    content:"";
    position:fixed;
    top:4%;
    right:-160px;
    width:440px;
    height:440px;
    border-radius:38% 62% 58% 42% / 42% 38% 62% 58%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.88), transparent 28%),
        radial-gradient(circle at 66% 38%, rgba(228,237,251,.54), transparent 34%),
        radial-gradient(circle at 48% 72%, rgba(228,250,246,.4), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.48), rgba(228,237,251,.22), rgba(255,240,245,.18));
    filter:blur(10px);
    pointer-events:none;
    opacity:.92;
}

body.is-loading{cursor:progress}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}
section{padding:52px 0;scroll-margin-top:106px}

#site-shell,
.page-main,
section,
.container,
.hero-wrap,
.hero-card,
.card,
.profile-box,
.about-grid,
.about-copy,
.section-head,
.section-head > *,
.project-grid,
.project-card,
.contact-wrap,
.contact-box,
.timeline,
.timeline-item,
.two-col{
    max-width:100%;
    min-width:0;
}

section + section .container{
    position:relative;
}

section + section .container::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-26px;
    height:1px;
    background:linear-gradient(90deg, rgba(25,54,95,0), rgba(25,54,95,.14), rgba(15,155,135,.12), rgba(25,54,95,0));
}

h1,h2,h3,.brand{
    font-family:"Georgia","Times New Roman",serif;
}

.container{
    width:min(92%, var(--max));
    margin:auto;
}

.ajax-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    z-index:150;
    pointer-events:none;
    overflow:hidden;
}

.ajax-progress::after{
    content:"";
    display:block;
    width:28%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), var(--accent));
    opacity:0;
    transform:translateX(-140%);
}

body.is-loading .ajax-progress::after{
    opacity:1;
    animation:ajax-progress 1.15s linear infinite;
}

@keyframes ajax-progress{
    from{transform:translateX(-140%)}
    to{transform:translateX(420%)}
}

.navbar{
    position:sticky;
    top:0;
    z-index:90;
    padding:14px 0 2px;
    isolation:isolate;
    transition:padding .28s ease;
}

.navbar::before{
    content:"";
    position:absolute;
    inset:-6px 0 -24px;
    z-index:-1;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(180deg, rgba(248,251,255,.88) 0%, rgba(246,249,254,.82) 56%, rgba(246,249,254,0) 100%);
    backdrop-filter:blur(14px) saturate(1.02);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    transition:opacity .28s ease, backdrop-filter .28s ease, background .28s ease;
}

.nav-inner{
    display:flex;
    align-items:center;
    gap:18px;
    padding:11px 16px;
    border:1px solid transparent;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    position:relative;
    overflow:visible;
    transition:
        padding .28s ease,
        border-radius .28s ease,
        background .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        backdrop-filter .28s ease;
}

body.nav-scrolled .navbar{
    padding-top:8px;
}

body.nav-scrolled .navbar::before{
    opacity:.94;
}

body.nav-scrolled .nav-inner{
    padding:10px 14px;
    border-color:rgba(255,255,255,.9);
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(247,250,255,.74));
    backdrop-filter:blur(16px);
    box-shadow:
        0 12px 26px rgba(24,46,84,.08),
        inset 0 1px 0 rgba(255,255,255,.86);
    overflow:hidden;
}

body.nav-scrolled .nav-inner::before{
    content:none;
}

body.nav-scrolled .nav-inner::after{
    content:none;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:0;
    border-radius:20px;
    background:transparent;
    border:none;
    box-shadow:none;
    font-weight:700;
    font-size:1.06rem;
    letter-spacing:.02em;
    color:var(--text);
    white-space:nowrap;
    position:relative;
    z-index:1;
    flex:0 0 auto;
    transition:transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.brand:hover{
    transform:translateY(-1px);
    box-shadow:none;
}

.brand-mark{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:14px;
    padding:3px;
    background:linear-gradient(140deg, rgba(223,148,82,.28) 0%, rgba(92,126,217,.3) 54%, rgba(15,155,135,.28) 100%);
    box-shadow:
        0 12px 22px rgba(40,93,181,.14),
        0 8px 16px rgba(216,138,71,.1);
    position:relative;
    overflow:hidden;
}

.brand-mark::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:20px;
    background:radial-gradient(circle, rgba(91,132,212,.24), rgba(91,132,212,0) 72%);
    z-index:-1;
}

.brand-mark-photo{
    width:100%;
    height:100%;
    border-radius:11px;
    object-fit:cover;
    object-position:center 18%;
    border:1px solid rgba(255,255,255,.82);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.brand-text{
    display:block;
    font-size:1rem;
    letter-spacing:.01em;
}

.nav-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex:1;
    min-width:0;
}

.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    flex:1;
    min-width:0;
    padding:6px;
    border-radius:999px;
    background:transparent;
    border:none;
    box-shadow:none;
    position:relative;
}

.menu a,
.lang-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid transparent;
    color:var(--muted);
    font-size:.92rem;
    font-weight:700;
    transition:.24s ease;
}

.menu a{
    position:relative;
    padding:9px 15px;
    font-size:.88rem;
    isolation:isolate;
    overflow:hidden;
}

.menu a::before{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,233,.92) 44%, rgba(228,237,251,.9));
    box-shadow:
        0 12px 24px rgba(24,46,84,.07),
        inset 0 1px 0 rgba(255,255,255,.86);
    opacity:0;
    transform:scale(.9);
    transition:.24s ease;
    z-index:-1;
}

.menu a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:6px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(216,138,71,.92), rgba(40,93,181,.88), rgba(40,93,181,0));
    opacity:0;
    transform:scaleX(.35);
    transition:.24s ease;
}

.menu a:hover,
.lang-btn:hover{
    color:var(--primary);
    border-color:rgba(40,93,181,.1);
}

.menu a:hover{
    color:var(--text);
    transform:translateY(-1px);
}

.menu a:hover::before{
    opacity:1;
    transform:scale(1);
}

.menu a:hover::after{
    opacity:1;
    transform:scaleX(1);
}

.lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    padding:4px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,239,.9) 46%, rgba(241,246,253,.92));
    border:1px solid rgba(255,255,255,.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 12px 24px rgba(24,46,84,.05);
}

.lang-btn{
    min-width:46px;
    min-height:36px;
    padding:7px 12px;
    font-size:.76rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    border-color:transparent;
    background:transparent;
    position:relative;
}

.lang-btn.active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg, #d88a47, #5b82da 58%, #0f9b87);
    box-shadow:
        0 12px 20px rgba(40,93,181,.16),
        0 8px 16px rgba(216,138,71,.12),
        inset 0 1px 0 rgba(255,255,255,.24);
}

.nav-toggle{
    display:none;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.88);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,246,235,.92) 46%, rgba(239,245,253,.92));
    padding:0;
    cursor:pointer;
    color:var(--text);
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column;
    box-shadow:
        0 14px 24px rgba(24,46,84,.08),
        0 6px 14px rgba(216,138,71,.08),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.nav-toggle-line{
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:.24s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2){
    opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

.page-main{
    padding-top:34px;
    position:relative;
}

.hero{
    padding:34px 0 32px;
    position:relative;
}

.hero-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1.24fr) minmax(320px, .76fr);
    gap:24px;
    align-items:start;
}

.hero-card,
.card,
.glass{
    background:transparent;
    border:none;
    border-radius:var(--radius);
    box-shadow:none;
    backdrop-filter:none;
    position:relative;
    overflow:visible;
}

.hero-card,
.card{
    padding:30px;
}

.hero-card{
    padding-right:8px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--accent-soft);
    border:1px solid rgba(15,155,135,.14);
    color:var(--accent);
    font-size:.84rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:20px;
}

.eyebrow::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 5px rgba(15,155,135,.12);
}

h1{
    margin:0 0 16px;
    font-size:clamp(2.6rem, 5vw, 4.7rem);
    line-height:1.02;
    letter-spacing:-.035em;
}

.highlight{
    background:linear-gradient(135deg, var(--primary), #5b84d4 52%, var(--warm));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;
}

.hero-lead{
    margin:0;
    max-width:720px;
    color:var(--muted);
    font-size:1.05rem;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:28px 0 0;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 22px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:800;
    transition:.24s ease;
    cursor:pointer;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn[disabled],
.btn.is-loading{
    cursor:wait;
    opacity:.72;
    transform:none;
}

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg, var(--primary), #4e7fd0 60%, #74a0ea);
    box-shadow:0 16px 32px rgba(40,93,181,.24);
}

.btn-outline{
    color:var(--text);
    border-color:var(--border);
    background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,250,255,.86));
}

.btn-outline:hover{
    border-color:var(--border-strong);
    background:#fff;
}

.hero-aside{
    display:grid;
    align-items:center;
    justify-items:center;
}

.profile-box{
    padding:0;
    position:relative;
    width:100%;
}

.avatar{
    width:100%;
    min-height:auto;
    padding:0;
    border:none;
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
}

.avatar::before{
    content:none;
}

.avatar-photo-wrap{
    width:min(100%, 420px);
    aspect-ratio:4 / 5;
    margin:0 auto;
    padding:10px;
    border-radius:36px;
    background:linear-gradient(155deg, rgba(255,255,255,.92), rgba(220,232,251,.86) 58%, rgba(238,252,248,.74));
    box-shadow:0 20px 40px rgba(24,46,84,.14);
    position:relative;
}

.avatar-photo-wrap::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:42px;
    border:1px dashed rgba(40,93,181,.14);
    opacity:.65;
}

.avatar-photo{
    width:100%;
    height:100%;
    border-radius:28px;
    object-fit:cover;
    object-position:center 18%;
    border:2px solid rgba(40,93,181,.12);
}

.avatar-circle{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    margin:0;
    border-radius:28px;
    color:var(--primary-strong);
    background:linear-gradient(145deg, #ffffff, #dce8fb 55%, #eefcf8);
    font-size:4rem;
    font-weight:800;
}

.section-gap{
    margin-top:24px;
}

.section-head{
    display:grid;
    gap:10px;
    margin-bottom:24px;
    position:relative;
}

.section-head span{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:800;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.section-head h2{
    margin:0;
    font-size:clamp(1.95rem, 3vw, 2.8rem);
    line-height:1.15;
    position:relative;
    width:auto;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
}

.section-head h2::after{
    content:"";
    display:block;
    width:72px;
    height:4px;
    margin-top:14px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), rgba(40,93,181,0));
}

.section-head p{
    margin:0;
    max-width:760px;
    color:var(--muted);
}

.about-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:20px;
    max-width:1040px;
    margin:0 auto;
}

.info-title{
    margin:0 0 16px;
    font-size:1.26rem;
}

.card p:last-child{margin-bottom:0}

.about-copy{
    text-align:left;
    padding:50px 54px 42px;
}

.about-copy p{
    margin:0;
    max-width:920px;
    font-size:1.18rem;
    line-height:1.95;
    text-wrap:pretty;
}

.about-copy p + p{
    margin-top:20px;
    padding-top:20px;
    position:relative;
}

.about-copy p + p::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:74px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(40,93,181,.46), rgba(40,93,181,0));
}

.about-copy::before{
    content:"";
    position:absolute;
    top:18px;
    left:48px;
    width:68px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), rgba(40,93,181,.18));
    pointer-events:none;
}

.skill-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.skill-item{
    padding:16px;
    border-radius:18px;
    text-align:center;
    background:linear-gradient(135deg, #ffffff 0%, #eef5fd 100%);
    border:1px solid rgba(25,54,95,.08);
    font-size:.94rem;
    font-weight:800;
    color:var(--text);
    position:relative;
    overflow:hidden;
    transition:transform .24s ease, box-shadow .24s ease;
}

.skill-item::before{
    content:"";
    display:block;
    width:12px;
    height:12px;
    margin:0 auto 12px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 8px rgba(40,93,181,.08);
}

.skill-item::after{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-22px;
    width:74px;
    height:74px;
    border-radius:50%;
    background:rgba(40,93,181,.08);
}

.skill-item:nth-child(3n+2)::before{
    background:var(--accent);
    box-shadow:0 0 0 8px rgba(15,155,135,.08);
}

.skill-item:nth-child(3n+2)::after{
    background:rgba(15,155,135,.08);
}

.skill-item:nth-child(3n)::before{
    background:var(--warm);
    box-shadow:0 0 0 8px rgba(216,138,71,.08);
}

.skill-item:nth-child(3n)::after{
    background:rgba(216,138,71,.08);
}

.skill-item:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 34px rgba(24,46,84,.12);
}

.timeline{
    display:grid;
    gap:16px;
}

.timeline-item{
    position:relative;
    padding:24px 24px 24px 30px;
    border-left:3px solid rgba(40,93,181,.24);
    background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    overflow:hidden;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-8px;
    top:27px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow:0 0 0 5px rgba(40,93,181,.08);
}

.timeline-item::after{
    content:"";
    position:absolute;
    top:-18px;
    right:-22px;
    width:110px;
    height:110px;
    border-radius:30px;
    background:
        linear-gradient(rgba(255,255,255,.52) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.52) 1px, transparent 1px),
        linear-gradient(135deg, rgba(40,93,181,.09), rgba(15,155,135,.08));
    background-size:16px 16px, 16px 16px, auto;
    transform:rotate(16deg);
    opacity:.75;
}

.timeline-item h3{
    margin:0 0 6px;
    font-size:1.14rem;
}

.timeline-meta{
    margin-bottom:8px;
    color:var(--primary);
    font-size:.9rem;
    font-weight:800;
}

.timeline-item p{
    margin:0;
    color:var(--muted);
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.project-card{
    display:flex;
    flex-direction:column;
    gap:16px;
    height:100%;
    transition:.24s ease;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.project-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 62px rgba(24,46,84,.14);
}

.project-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:8px;
    background:linear-gradient(90deg, var(--primary), rgba(40,93,181,0));
}

.project-card::after{
    content:"";
    position:absolute;
    right:-28px;
    bottom:-34px;
    width:128px;
    height:128px;
    border-radius:50%;
    background:rgba(40,93,181,.08);
    z-index:0;
}

.project-card:nth-child(3n+1){
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,246,255,.95) 100%);
}

.project-card:nth-child(3n+2){
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(240,252,247,.95) 100%);
}

.project-card:nth-child(3n+2)::before{
    background:linear-gradient(90deg, var(--accent), rgba(15,155,135,0));
}

.project-card:nth-child(3n+2)::after{
    background:rgba(15,155,135,.08);
}

.project-card:nth-child(3n){
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,247,238,.96) 100%);
}

.project-card:nth-child(3n)::before{
    background:linear-gradient(90deg, var(--warm), rgba(216,138,71,0));
}

.project-card:nth-child(3n)::after{
    background:rgba(216,138,71,.08);
}

.project-card > *{
    position:relative;
    z-index:1;
}

.project-top{
    display:flex;
    justify-content:space-between;
    gap:14px;
}

.project-card small{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:800;
}

.project-card h3{
    margin:0;
    font-size:1.18rem;
}

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

.tag-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tag{
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    background:var(--accent-soft);
    border:1px solid rgba(15,155,135,.16);
    color:var(--accent);
    font-size:.8rem;
    font-weight:800;
}

.tag::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:8px;
    border-radius:50%;
    background:currentColor;
    opacity:.65;
}

.project-link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    color:var(--primary);
    font-weight:800;
}

.project-link:hover{
    color:var(--primary-strong);
}

.project-link-muted{
    color:var(--muted);
}

.two-col{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
}

.list-clean{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
}

.list-clean li{
    padding:16px 18px;
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
    border:1px solid rgba(25,54,95,.08);
    position:relative;
    overflow:hidden;
}

.list-clean li::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg, var(--primary), rgba(40,93,181,0));
}

.list-clean strong{
    display:block;
    margin-bottom:6px;
    font-size:.98rem;
    color:var(--text);
}

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

.contact-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(280px, .95fr);
    gap:20px;
}

.contact-box{
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(242,247,253,.98) 100%);
    position:relative;
}

.contact-box::before{
    content:"";
    position:absolute;
    top:-60px;
    right:-44px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(15,155,135,.14), transparent 68%);
    pointer-events:none;
}

.contact-box h3,
.contact-title{
    margin-top:0;
}

.contact-form{
    margin-top:20px;
    display:grid;
    gap:12px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.form-field{
    display:grid;
    gap:6px;
}

.form-field label{
    font-size:.92rem;
    font-weight:800;
    color:var(--text);
}

.form-field input,
.form-field textarea{
    width:100%;
    border:1px solid rgba(25,54,95,.12);
    background:linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
    color:var(--text);
    border-radius:14px;
    padding:12px 14px;
    outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.form-field textarea{
    min-height:128px;
    resize:vertical;
}

.form-field input:focus,
.form-field textarea:focus{
    border-color:rgba(40,93,181,.34);
    box-shadow:0 0 0 4px rgba(40,93,181,.12);
}

.form-status{
    padding:12px 14px;
    border-radius:14px;
    border:1px solid transparent;
    font-size:.95rem;
}

.form-status[tabindex="-1"]{
    outline:none;
}

.form-status.success{
    color:#0e6f57;
    background:#e7fbf4;
    border-color:rgba(15,155,135,.24);
}

.form-status.error{
    color:var(--danger);
    background:#fff1f2;
    border-color:rgba(178,74,83,.18);
}

.form-submit{
    justify-self:start;
}

.contact-list{
    list-style:none;
    margin:20px 0 0;
    padding:0;
    display:grid;
    gap:14px;
}

.contact-list li{
    padding:18px 18px 18px 84px;
    min-height:94px;
    border-radius:22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.96) 100%);
    border:1px solid rgba(25,54,95,.09);
    box-shadow:0 16px 30px rgba(24,46,84,.08);
    position:relative;
    overflow:hidden;
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.contact-list li::after{
    content:"";
    position:absolute;
    left:20px;
    top:50%;
    width:42px;
    height:42px;
    border-radius:14px;
    transform:translateY(-50%);
    background:linear-gradient(135deg, rgba(40,93,181,.18), rgba(228,237,251,.92));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
    opacity:1;
    z-index:0;
}

.contact-list li::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg, var(--primary), rgba(40,93,181,0));
    opacity:.9;
    z-index:0;
}

.contact-list li > :not(.contact-icon){
    position:relative;
    z-index:1;
}

.contact-icon{
    position:absolute;
    left:29px;
    top:50%;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    transform:translateY(-50%);
    color:var(--primary);
    pointer-events:none;
}

.contact-icon svg{
    width:100%;
    height:100%;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contact-list li:hover{
    transform:translateY(-3px);
    border-color:rgba(40,93,181,.16);
    box-shadow:0 22px 38px rgba(24,46,84,.12);
}

.contact-item strong{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(228,237,251,.82);
    color:var(--primary);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.contact-item-phone strong{
    background:rgba(228,250,246,.84);
    color:var(--accent);
}

.contact-item-phone .contact-icon{
    color:var(--accent);
}

.contact-item-linkedin strong{
    background:rgba(226,241,255,.92);
    color:#0a66c2;
}

.contact-item-linkedin .contact-icon{
    color:#0a66c2;
}

.contact-item-github strong{
    background:rgba(255,241,222,.9);
    color:var(--warm);
}

.contact-item-github .contact-icon{
    color:var(--warm);
}

.contact-item-instagram strong{
    background:rgba(255,240,245,.84);
    color:var(--rose);
}

.contact-item-instagram .contact-icon{
    color:var(--rose);
}

.contact-item-phone::before{
    background:linear-gradient(90deg, var(--accent), rgba(15,155,135,0));
}

.contact-item-linkedin::before{
    background:linear-gradient(90deg, rgba(10,102,194,.92), rgba(10,102,194,0));
}

.contact-item-instagram::before{
    background:linear-gradient(90deg, var(--rose), rgba(214,108,143,0));
}

.contact-item-github::before{
    background:linear-gradient(90deg, var(--warm), rgba(216,138,71,0));
}

.contact-item-phone::after{
    background:linear-gradient(135deg, rgba(15,155,135,.18), rgba(228,250,246,.96));
}

.contact-item-linkedin::after{
    background:linear-gradient(135deg, rgba(10,102,194,.16), rgba(226,241,255,.96));
}

.contact-item-instagram::after{
    background:linear-gradient(135deg, rgba(214,108,143,.16), rgba(255,240,245,.96));
}

.contact-item-github::after{
    background:linear-gradient(135deg, rgba(216,138,71,.18), rgba(255,241,222,.96));
}

.contact-value{
    display:block;
    margin-top:12px;
    color:var(--text);
    font-size:1.08rem;
    font-weight:700;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.contact-list a{
    overflow-wrap:anywhere;
}

.contact-list a:hover{
    color:var(--primary);
}

footer{
    padding:28px 0 42px;
    text-align:center;
    color:var(--muted);
}

#projects .section-head span{
    background:var(--warm-soft);
    color:var(--warm);
}

#projects .section-head h2::after{
    background:linear-gradient(90deg, var(--warm), rgba(216,138,71,0));
}

#experience .section-head span,
#contact .section-head span{
    background:var(--accent-soft);
    color:var(--accent);
}

#experience .section-head h2::after,
#contact .section-head h2::after{
    background:linear-gradient(90deg, var(--accent), rgba(15,155,135,0));
}

#education .section-head span{
    background:var(--rose-soft);
    color:var(--rose);
}

#education .section-head h2::after{
    background:linear-gradient(90deg, var(--rose), rgba(214,108,143,0));
}

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .65s ease, transform .65s ease;
}

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

@media (max-width: 1080px){
    .hero-wrap,
    .about-grid,
    .contact-wrap,
    .two-col{
        grid-template-columns:1fr;
    }

    .hero-wrap,
    .two-col,
    .contact-wrap{
        gap:18px;
    }

    .about-grid{
        max-width:100%;
    }

    .hero-aside{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px){
    .skill-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .hero-aside{
        grid-template-columns:1fr;
    }

    .section-head p,
    .hero-lead{
        max-width:100%;
    }
}

@media (max-width: 780px){
    .navbar{
        padding-top:12px;
    }

    .navbar::before{
        background:linear-gradient(180deg, rgba(248,251,255,.9) 0%, rgba(246,249,254,.84) 58%, rgba(246,249,254,0) 100%);
    }

    .nav-inner{
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px;
        padding:12px 14px;
        border-radius:0;
    }

    body.nav-scrolled .nav-inner{
        padding:11px 13px;
        border-radius:22px;
    }

    body.nav-scrolled .nav-inner::after{
        content:none;
    }

    .nav-toggle{
        display:flex;
    }

    .nav-panel{
        grid-column:1 / -1;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:14px;
        border-radius:22px;
        background:linear-gradient(145deg, rgba(255,250,244,.98), rgba(246,249,255,.96) 52%, rgba(240,249,246,.95));
        border:1px solid rgba(255,255,255,.9);
        box-shadow:
            0 18px 34px rgba(24,46,84,.1),
            0 8px 18px rgba(216,138,71,.08),
            inset 0 1px 0 rgba(255,255,255,.94);
    }

    body.nav-ready .nav-panel{
        display:none;
    }

    body.nav-ready .nav-panel.open{
        display:flex;
    }

    .menu{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding:6px;
        background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,234,.88) 42%, rgba(239,245,253,.88));
        border:1px solid rgba(255,255,255,.76);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.88),
            0 10px 18px rgba(24,46,84,.04);
    }

    .menu a{
        width:100%;
        justify-content:flex-start;
        padding:10px 12px;
        font-size:.92rem;
    }

    .lang-switch{
        width:100%;
        max-width:100%;
        justify-content:space-between;
        align-self:stretch;
    }

    .lang-btn{
        flex:1 1 0;
    }

    .page-main{
        padding-top:24px;
    }

    .hero{
        padding-top:18px;
    }

    .hero-wrap{
        gap:18px;
    }

    .page-main::before,
    .page-main::after,
    .hero::before,
    #experience::before,
    #projects::before,
    #education::before,
    #contact::before,
    body::after{
        display:none;
    }

    .hero-card,
    .card,
    .profile-box{
        padding:22px;
    }

    .brand{
        min-width:0;
        gap:10px;
        padding:0;
    }

    .brand-text{
        max-width:calc(100vw - 170px);
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .avatar{
        min-height:auto;
        padding:0;
    }

    .avatar-photo-wrap{
        width:min(100%, 320px);
        aspect-ratio:4 / 5;
        padding:8px;
        border-radius:30px;
    }

    .avatar-photo-wrap::after{
        inset:-8px;
        border-radius:34px;
    }

    .avatar-photo{
        border-radius:22px;
    }

    .eyebrow{
        margin-bottom:16px;
        font-size:.78rem;
        letter-spacing:.06em;
    }

    h1{
        font-size:clamp(2.2rem, 10vw, 3.5rem);
        line-height:1.05;
    }

    .hero-lead{
        font-size:1rem;
        line-height:1.8;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn{
        width:100%;
    }

    .section-head{
        gap:8px;
        margin-bottom:20px;
    }

    .section-head span{
        font-size:.72rem;
        letter-spacing:.12em;
        padding:6px 10px;
    }

    .section-head h2{
        width:auto;
        font-size:clamp(1.85rem, 7.8vw, 2.4rem);
    }

    .section-head p{
        font-size:.98rem;
    }

    .about-copy{
        padding:30px 24px 26px;
    }

    .about-copy p{
        max-width:100%;
        font-size:1.05rem;
        line-height:1.82;
        overflow-wrap:anywhere;
    }

    .about-copy p + p{
        margin-top:18px;
        padding-top:18px;
    }

    .about-copy::before{
        top:16px;
        left:24px;
        width:58px;
    }

    .skill-item{
        padding:14px 12px;
        border-radius:16px;
        font-size:.9rem;
    }

    .timeline-item{
        padding:18px 18px 18px 22px;
    }

    .timeline-item::before{
        top:22px;
        left:-7px;
        width:11px;
        height:11px;
    }

    .timeline-item::after{
        top:-12px;
        right:-16px;
        width:84px;
        height:84px;
        opacity:.55;
    }

    .timeline-item h3{
        font-size:1.08rem;
        line-height:1.35;
    }

    .project-card{
        gap:14px;
    }

    .project-card::after{
        width:96px;
        height:96px;
        right:-18px;
        bottom:-22px;
    }

    .project-top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .project-card h3{
        font-size:1.08rem;
        line-height:1.28;
    }

    .project-link{
        width:100%;
        justify-content:flex-start;
        overflow-wrap:anywhere;
    }

    .tag{
        font-size:.76rem;
        padding:6px 10px;
    }

    .list-clean li{
        padding:14px 16px;
    }

    .contact-wrap{
        gap:16px;
    }

    .contact-box::before{
        top:-38px;
        right:-24px;
        width:120px;
        height:120px;
    }

    .contact-form{
        gap:10px;
    }

    .form-field label{
        font-size:.88rem;
    }

    .form-field input,
    .form-field textarea{
        padding:11px 12px;
        border-radius:12px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .form-submit{
        width:100%;
    }

    .contact-list{
        gap:12px;
    }

    .contact-list li{
        padding:16px 14px 16px 68px;
        min-height:82px;
        border-radius:18px;
    }

    .contact-list li::after{
        left:14px;
        width:36px;
        height:36px;
        border-radius:12px;
    }

    .contact-icon{
        left:21px;
        width:20px;
        height:20px;
    }

    .contact-item strong{
        padding:5px 9px;
        font-size:.68rem;
        letter-spacing:.1em;
    }

    .contact-value{
        margin-top:10px;
        font-size:1rem;
        line-height:1.4;
        overflow-wrap:anywhere;
    }
}

@media (max-width: 520px){
    section{
        padding:38px 0;
    }

    .container{
        width:min(93%, var(--max));
    }

    .nav-inner{
        padding:10px 12px;
        border-radius:0;
    }

    .navbar::before{
        background:linear-gradient(180deg, rgba(248,251,255,.9) 0%, rgba(246,249,254,.82) 58%, rgba(246,249,254,0) 100%);
    }

    body.nav-scrolled .nav-inner{
        padding:10px 11px;
        border-radius:18px;
    }

    body.nav-scrolled .nav-inner::after{
        content:none;
    }

    .brand{
        font-size:1rem;
    }

    .brand-mark{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:.7rem;
    }

    .brand-text{
        max-width:140px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .menu{
        padding:5px;
    }

    .menu a{
        padding:10px 11px;
    }

    .hero-card,
    .card,
    .profile-box{
        padding:16px;
    }

    .about-copy{
        padding:30px 20px 24px;
    }

    .about-copy p{
        font-size:1rem;
        line-height:1.78;
    }

    .about-copy p + p{
        margin-top:16px;
        padding-top:16px;
    }

    .about-copy p + p::before{
        width:56px;
    }

    .about-copy::before{
        top:16px;
        left:20px;
        width:50px;
    }

    .avatar-photo-wrap{
        width:min(100%, 250px);
        aspect-ratio:4 / 5;
        height:auto;
        padding:7px;
        border-radius:24px;
    }

    .avatar-photo-wrap::after{
        inset:-6px;
        border-radius:30px;
    }

    .avatar-photo{
        border-radius:20px;
    }

    .contact-list li{
        padding:14px 14px 14px 64px;
        min-height:80px;
    }

    .contact-list li::after{
        left:14px;
        width:34px;
        height:34px;
    }

    .contact-icon{
        left:20px;
        width:18px;
        height:18px;
    }

    .contact-value{
        font-size:.96rem;
    }

    .contact-box::before,
    .timeline-item::after{
        display:none;
    }

    .timeline-item{
        padding:16px 16px 16px 20px;
        border-left-width:2px;
    }

    .timeline-item h3{
        font-size:1.04rem;
    }

    .project-card h3{
        font-size:1rem;
    }

    .project-card small{
        font-size:.72rem;
        padding:5px 9px;
    }

    .tag-wrap{
        gap:6px;
    }

    .tag{
        font-size:.74rem;
    }

    .project-link{
        width:100%;
        font-size:.95rem;
    }

    .two-col{
        gap:16px;
    }

    .list-clean li{
        padding:14px 14px 14px 16px;
        border-radius:16px;
    }

    .list-clean strong{
        font-size:.94rem;
    }

    .eyebrow{
        font-size:.72rem;
        padding:7px 12px;
        margin-bottom:14px;
    }

    .hero-wrap{
        gap:14px;
    }

    .hero-lead{
        font-size:.98rem;
        line-height:1.75;
    }

    .btn{
        min-height:46px;
        padding:11px 16px;
    }

    h1{
        font-size:clamp(2rem, 11vw, 3rem);
    }

    .section-head h2{
        font-size:clamp(1.7rem, 9vw, 2.2rem);
    }

    .skill-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .lang-switch{
        width:100%;
        max-width:100%;
        justify-content:flex-start;
    }
}

@media (max-width: 390px){
    .container{
        width:min(95%, var(--max));
    }

    .nav-inner{
        padding:10px;
    }

    .brand-text{
        max-width:120px;
    }

    .hero-card,
    .card,
    .profile-box{
        padding:14px;
    }

    .about-copy{
        padding:26px 18px 22px;
    }

    .about-copy::before{
        left:18px;
        width:44px;
    }

    .about-copy p{
        font-size:.98rem;
    }

    .section-head h2{
        font-size:clamp(1.55rem, 8.6vw, 2rem);
    }

    .contact-list li{
        padding-left:60px;
    }
}

@media (hover: none){
    .btn:hover,
    .skill-item:hover,
    .project-card:hover,
    .contact-list li:hover{
        transform:none;
    }

    .project-card:hover,
    .skill-item:hover,
    .contact-list li:hover{
        box-shadow:inherit;
    }
}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation:none !important;transition:none !important}
    .reveal{
        opacity:1;
        transform:none;
    }
}