/* ============================================
   LENA B — PORTFOLIO STYLES
   Theme: analyst's ledger / dashboard workspace
   ============================================ */

:root{
  /* Light (default) palette */
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --surface-alt: #F2EEE3;
  --ink: #1C2B3A;
  --text: #2B2B2B;
  --text-muted: #5C5A52;
  --line: #D9D2C0;
  --amber: #E2A33D;
  --teal: #2E7D6B;
  --violet: #8E6FBE;
  --shadow: 0 1px 2px rgba(28,43,58,.04), 0 8px 24px rgba(28,43,58,.06);
  --radius: 14px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --nav-h: 72px;
  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #12181F;
  --surface: #1B2430;
  --surface-alt: #202B39;
  --ink: #F3F0E7;
  --text: #E9E6DD;
  --text-muted: #A7ACB4;
  --line: #303C4B;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
}

h1,h2,h3{ font-family: var(--font-display); color: var(--ink); margin: 0 0 .4em; line-height: 1.1; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; color: var(--text); line-height: 1.65; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink);
  padding:.6em 1em; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

.section-inner{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Ambient grid backdrop ---------- */
.grid-backdrop{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 10%, transparent 70%);
}
[data-theme="dark"] .grid-backdrop{ opacity: .18; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--teal); display:flex; align-items:center; gap:.5em; margin-bottom: .9em; text-transform: none;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.section-lede{ max-width: 620px; color: var(--text-muted); font-size: 1.02rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .8em 1.5em; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.btn-primary:hover{ background: var(--teal); }
.btn-outline{ border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--bg); }
.btn-ghost{ border-color: var(--line); color: var(--text); }
.btn-ghost:hover{ border-color: var(--amber); color: var(--ink); }
.btn-text{ color: var(--teal); text-decoration: underline; text-underline-offset: 3px; padding-inline: .2em; }
.btn-sm{ padding: .5em 1em; font-size: .82rem; }
.btn-block{ width: 100%; }
/* ============================================
   TOOLBAR / NAVBAR
============================================ */

.toolbar{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:min(1160px, calc(100% - 40px));
    height:var(--nav-h);
    z-index:100;

    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.35);
    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        width .35s ease,
        top .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.toolbar.is-scrolled{

    top:10px;

    width:min(1080px, calc(100% - 60px));

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

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);
}



.toolbar-inner{

    height:100%;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;

}



/* ===========================
   BRAND
=========================== */

.brand{

    display:flex;
    align-items:center;
    gap:.65rem;

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

}


.brand-mark{

    width:36px;
    height:36px;

    border-radius:10px;

    background:var(--amber);
    color:var(--ink);

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

    font-size:.9rem;

    box-shadow:
    0 5px 15px rgba(0,0,0,.12);

}


.brand-name{

    color:var(--ink);

}




/* ===========================
   NAV LINKS
=========================== */


.nav-links{

    display:flex;
    align-items:center;
    gap:2rem;

}


.nav-links a{

    font-size:.92rem;

    color:var(--text-muted);

    position:relative;

    padding:.4rem 0;

    transition:
    color .25s ease;

}



.nav-links a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-5px;

    width:0;
    height:3px;

    border-radius:10px;

    background:var(--amber);

    transform:translateX(-50%);

    transition:
    width .3s ease;

}



.nav-links a:hover,
.nav-links a.is-active{

    color:var(--ink);

}



.nav-links a:hover::after,
.nav-links a.is-active::after{

    width:100%;

}



/* ===========================
   ACTION BUTTONS
=========================== */


.toolbar-actions{

    display:flex;
    align-items:center;
    gap:.8rem;

}



.theme-toggle{

    width:40px;
    height:40px;

    border-radius:50%;

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

    background:var(--surface);

    color:var(--ink);

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

    transition:
    transform .3s ease,
    border-color .3s ease;

}



.theme-toggle:hover{

    transform:rotate(20deg) scale(1.05);

    border-color:var(--amber);

}



.icon-moon{
    display:none;
}


[data-theme="dark"] .icon-sun{
    display:none;
}


[data-theme="dark"] .icon-moon{
    display:block;
}



/* ===========================
   MOBILE MENU
=========================== */


.hamburger{

    display:none;

    flex-direction:column;

    gap:5px;

    background:none;

    border:none;

    padding:8px;

    cursor:pointer;

}



.hamburger span{

    width:23px;

    height:2px;

    background:var(--ink);

    border-radius:5px;

    transition:.3s ease;

}



.hamburger.is-open span:nth-child(1){

    transform:
    translateY(7px)
    rotate(45deg);

}


.hamburger.is-open span:nth-child(2){

    opacity:0;

}


.hamburger.is-open span:nth-child(3){

    transform:
    translateY(-7px)
    rotate(-45deg);

}




/* ===========================
   DARK MODE SUPPORT
=========================== */


[data-theme="dark"] .toolbar{

    background:rgba(20,20,20,.55);

    border-color:rgba(255,255,255,.08);

}


[data-theme="dark"] .toolbar.is-scrolled{

    background:rgba(20,20,20,.75);

}



/* ===========================
   RESPONSIVE
=========================== */


@media(max-width:850px){


.toolbar{

    width:calc(100% - 24px);

    top:12px;

}



.toolbar-inner{

    padding:0 16px;

}



.nav-links{

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    padding:1.5rem;

    border-radius:18px;

    flex-direction:column;

    gap:1.2rem;


    background:var(--surface);

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

    box-shadow:0 15px 35px rgba(0,0,0,.12);


    opacity:0;

    pointer-events:none;

    transform:translateY(-15px);

    transition:.3s ease;

}



.nav-links.active{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}
.hamburger{
    display:flex;

}
}
/* ============================================
   HERO
   ============================================ */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--nav-h) + 40px) 24px 80px;
}
.hero-inner{
  max-width: 1160px; margin: 0 auto; width:100%;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items:center;
}
.hero-copy{ animation: fadeUp .8s ease both; }
.hero-role{ font-family: var(--font-mono); color: var(--teal); font-size: 1.05rem; margin-bottom: .6em; }
.hero h1{ font-size: clamp(2.8rem, 6vw, 4.6rem); margin-bottom: .15em; }
.hero-tagline{ font-size: 1.08rem; color: var(--text-muted); max-width: 52ch; }
.hero-cta{ display:flex; flex-wrap: wrap; gap: .9em; margin: 1.6em 0 1.4em; }
.hero-social{ display:flex; gap: .9em; }
.hero-social a{
  width: 40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-muted);
  transition: all .2s ease;
}
.hero-social a:hover{ color: var(--ink); border-color: var(--amber); transform: translateY(-3px); }

/* Dashboard signature panel */
.dashboard{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  animation: fadeUp .9s ease .15s both;
}
.dashboard-head{
  display:flex; align-items:center; gap: .8em; padding: .9em 1.2em; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); background: var(--surface-alt);
}
.dashboard-dots{ display:flex; gap:5px; }
.dashboard-dots i{ width:8px; height:8px; border-radius:50%; background: var(--line); display:block; }
.dashboard-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
}
.tile{
  background: var(--surface); padding: 1.3em 1.2em 1.1em; position: relative;
  transition: transform .25s ease, background .2s ease;
}
.tile:hover{ transform: translateY(-3px); background: var(--surface-alt); z-index: 2; }
.tile-label{ display:block; font-size: .74rem; color: var(--text-muted); margin-bottom: .5em; letter-spacing: .01em; }
.tile-value{ font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.spark{ width: 100%; height: 26px; margin-top: .5em; }
.spark polyline{ fill:none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bars{ display:flex; align-items:flex-end; gap:5px; height: 26px; margin-top: .6em; }
.bars i{ display:block; width: 8px; height: var(--h); background: var(--amber); border-radius: 2px 2px 0 0; opacity:0; transform: scaleY(0); transform-origin: bottom; animation: growBar .6s ease forwards; }
.bars i:nth-child(1){ animation-delay: .1s; } .bars i:nth-child(2){ animation-delay: .22s; } .bars i:nth-child(3){ animation-delay: .34s; } .bars i:nth-child(4){ animation-delay: .46s; }
.ring{ width: 34px; height:34px; margin-top: .4em; transform: rotate(-90deg); }
.ring-bg{ fill:none; stroke: var(--line); stroke-width: 3; }
.ring-fg{ fill:none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 100; animation: ringFill 1.4s .3s ease forwards; }
.dashboard-caption{ font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); padding: .9em 1.2em; margin:0; border-top: 1px solid var(--line); }

@keyframes growBar{ to{ opacity:1; transform: scaleY(1); } }
@keyframes ringFill{ to{ stroke-dashoffset: 0; } }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform: translateY(0); } }

.scroll-cue{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--line); border-radius: 20px;
}
.scroll-cue span{
  display:block; width:4px; height:8px; background: var(--amber); border-radius: 2px;
  margin: 6px auto 0; animation: scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{ 0%{ transform: translateY(0); opacity:1; } 70%{ opacity:0; } 100%{ transform: translateY(16px); opacity:0; } }

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
/* ===========================
   HERO PREMIUM UPDATES
=========================== */


.hero h1 span{

    color:var(--amber);

}


.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

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

    font-size:.85rem;

    color:var(--text-muted);

    margin-bottom:1rem;

}



.dot{

    width:8px;

    height:8px;

    background:var(--teal);

    border-radius:50%;

    animation:pulse 2s infinite;

}


@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(0,180,180,.5);
    }

    70%{
        box-shadow:0 0 0 10px rgba(0,180,180,0);
    }

    100%{
        box-shadow:none;
    }

}




.dashboard{

    transform:translateY(0);

    animation:
    fadeUp .9s ease .15s both,
    floatDashboard 6s ease-in-out infinite;

}



@keyframes floatDashboard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}




.hero-tagline strong{

    color:var(--ink);

    font-weight:600;

}




@media(max-width:850px){

.hero-inner{

    grid-template-columns:1fr;

    gap:2rem;

}


.hero{

    padding-top:120px;

}


.hero h1{

    font-size:clamp(2.4rem,10vw,3.5rem);

}


.dashboard{

    margin-top:1rem;

}

}

/* ============================================
   ABOUT
   ============================================ */
.about{
  padding: 120px 0 100px;
}

.about-grid{
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 4rem;
  align-items: start;
}

.about-frame{
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-width: 280px;
  margin: 0 auto;
}

.frame-card{
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.frame-card img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.frame-tag{
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .4em .8em;
  border-radius: 999px;
}

.frame-ledger{
  margin-top: 1.2em;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .35em 1.2em;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--line);
  padding-top: 1em;
}

.frame-ledger span:nth-child(3n+1){
  color: var(--amber);
}

.about-copy{
  max-width: 720px;
}

.about-copy h2{
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.15;
  max-width: 20ch;
  margin-bottom: .9rem;
}

.about-copy p{
  line-height: 1.8;
  margin-bottom: 1.3rem;
  color: var(--text);
}

.about-highlights{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1em;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.about-highlights div{
  display: flex;
  flex-direction: column;
  gap: .45em;
}

.about-highlights strong{
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.about-highlights span{
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--ink);
}
/* ============================================
   SKILLS
   ============================================ */
.skills{ padding: 100px 0; background: var(--surface-alt); }
.skill-tabs{ display:flex; flex-wrap: wrap; gap: .6em; margin: 2em 0 1.6em; }
.skill-tab{
  padding: .7em 1.3em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-muted); font-size: .88rem; font-weight: 600; transition: all .2s ease;
}
.skill-tab:hover{ border-color: var(--amber); color: var(--ink); }
.skill-tab.is-active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.skill-panel{ display:flex; flex-wrap:wrap; gap: .7em; }
.skill-panel[hidden]{ display:none; }
.badge{
  display:inline-flex; align-items:center; padding: .6em 1.1em; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono);
  font-size: .85rem; color: var(--ink); box-shadow: var(--shadow); opacity:0; transform: translateY(10px) scale(.96);
  animation: badgeIn .5s ease forwards; transition: border-color .2s ease, transform .2s ease;
}
.badge:hover{ border-color: var(--amber); transform: translateY(-3px); }
.badge-outline{ background: transparent; }
.skill-panel .badge:nth-child(1){ animation-delay: .02s; } .skill-panel .badge:nth-child(2){ animation-delay: .07s; }
.skill-panel .badge:nth-child(3){ animation-delay: .12s; } .skill-panel .badge:nth-child(4){ animation-delay: .17s; }
.skill-panel .badge:nth-child(5){ animation-delay: .22s; } .skill-panel .badge:nth-child(6){ animation-delay: .27s; }
.skill-panel .badge:nth-child(7){ animation-delay: .32s; }
@keyframes badgeIn{ to{ opacity:1; transform: translateY(0) scale(1); } }

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

.projects{
    padding:110px 0;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:2rem;
    margin-top:3rem;
}

/* Card */

.project-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:all .35s ease;
    display:flex;
    flex-direction:column;
    height:100%;
    position:relative;
}

.project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 50px rgba(0,0,0,.18);
    border-color:color-mix(in srgb,var(--teal) 45%,var(--line));
}

/* =====================
   Project Image
===================== */

.project-image{
    position:relative;
    width:100%;
    height:230px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease;
}

.project-card:hover .project-image img{
    transform:scale(1.08);
}

/* Dark overlay */

.project-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.28),
        rgba(0,0,0,.05),
        transparent
    );
    pointer-events:none;
}

/* =====================
   Placeholder
===================== */

.project-placeholder{
    height:230px;
    background:linear-gradient(135deg,#16202a,#233243);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:2rem;
}

.project-placeholder h3{
    color:#fff;
    margin-bottom:.6rem;
}

.project-placeholder p{
    color:#cbd5e1;
    margin-bottom:1rem;
}

.project-placeholder span{
    padding:.55rem 1rem;
    background:var(--amber);
    color:#111;
    border-radius:999px;
    font-weight:600;
    font-size:.85rem;
}

/* =====================
   Content
===================== */

.project-content{
    padding:1.7rem;
    display:flex;
    flex-direction:column;
    flex:1;
}

.project-index{
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    margin-bottom:.7rem;
}

.project-content h3{
    font-size:1.4rem;
    margin-bottom:.8rem;
    line-height:1.25;
}

.project-content p{
    color:var(--text-muted);
    line-height:1.75;
    margin-bottom:1.4rem;
}

/* =====================
   Technologies
===================== */

.project-tech{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:1.5rem;
}

.project-tech span{
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.45rem .9rem;
    font-family:var(--font-mono);
    font-size:.78rem;
    transition:.25s;
}

.project-tech span:hover{
    border-color:var(--amber);
    transform:translateY(-2px);
}

/* =====================
   Bullet Points
===================== */

.project-points{
    display:flex;
    flex-direction:column;
    gap:.8rem;
    margin-bottom:1.7rem;
    flex:1;
}

.project-points li{
    position:relative;
    padding-left:1.25rem;
    line-height:1.65;
    color:var(--text);
}

.project-points li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--teal);
    font-weight:700;
}

/* =====================
   Links
===================== */

.project-links{
    display:flex;
    gap:1.2rem;
    align-items:center;
    border-top:1px solid var(--line);
    padding-top:1.2rem;
    margin-top:auto;
}

.project-links a{
    color:var(--teal);
    font-weight:600;
    transition:.25s;
}

.project-links a:hover{
    color:var(--amber);
    transform:translateX(3px);
}

/* =====================
   Responsive
===================== */

@media (max-width:768px){

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

.project-image,
.project-placeholder{
    height:200px;
}

.project-content{
    padding:1.4rem;
}

}
/* ============================================
   LEARNING → BUILDING → GROWING
   ============================================ */

.journey{
    padding:100px 0;
    background:var(--surface-alt);
}

.timeline{
    position:relative;
    margin-top:3rem;
    padding-left:30px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:52px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--line);
}

.t-item{
    position:relative;
    display:grid;
    grid-template-columns:80px 1fr;
    gap:2rem;
    align-items:flex-start;
    margin-bottom:2.5rem;
}

.t-axis{
    display:flex;
    justify-content:center;
    align-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--surface);
    border:2px solid var(--teal);
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:.85rem;
    font-weight:700;
    position:relative;
    z-index:2;
    box-shadow:var(--shadow);
}

.t-content{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.4rem 1.6rem;
    box-shadow:var(--shadow);
    transition:all .3s ease;
}

.t-content:hover{
    transform:translateY(-6px);
    border-color:var(--teal);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.t-content h3{
    font-size:1.2rem;
    margin-bottom:.7rem;
    color:var(--ink);
}

.t-content p{
    margin:0;
    color:var(--text-muted);
    line-height:1.7;
    font-size:.95rem;
}

/* Current milestone */

.t-item.is-current .t-axis{
    background:var(--amber);
    color:#fff;
    border-color:var(--amber);
    box-shadow:0 0 0 8px rgba(226,163,61,.18);
}

.t-item.is-current .t-content{
    border-color:var(--amber);
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--amber) 10%, var(--surface)),
        var(--surface)
    );
}

.t-item.is-current h3{
    color:var(--amber);
}

/* Responsive */

@media (max-width:760px){

.timeline{
    padding-left:0;
}

.timeline::before{
    left:30px;
}

.t-item{
    grid-template-columns:60px 1fr;
    gap:1.2rem;
}

.t-axis{
    width:48px;
    height:48px;
    font-size:.72rem;
}

.t-content{
    padding:1.1rem;
}

.t-content h3{
    font-size:1.05rem;
}

}
/* ============================================
   EDUCATION
   ============================================ */

.education{
    padding:100px 0;
}

.education-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-top:2.5rem;
}

.edu-card,
.cert-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:var(--shadow);
    transition:.3s ease;
}

.edu-card:hover,
.cert-card:hover{
    transform:translateY(-6px);
}

.edu-card{
    border-left:4px solid var(--teal);
}

.cert-card{
    border-left:4px solid var(--amber);
}

.edu-label{
    display:inline-block;
    padding:.45rem .9rem;
    border-radius:999px;
    background:var(--surface-alt);
    font-family:var(--font-mono);
    font-size:.78rem;
    color:var(--teal);
    margin-bottom:1rem;
}

.edu-card h3{
    font-size:1.45rem;
    margin-bottom:.45rem;
}

.edu-school{
    color:var(--text-muted);
    margin-bottom:1.8rem;
}

.edu-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-bottom:2rem;
}

.edu-details div{
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:12px;
    padding:1rem;
}

.edu-details strong{
    display:block;
    font-size:.78rem;
    color:var(--text-muted);
    margin-bottom:.45rem;
}

.edu-details span{
    font-size:1rem;
    font-weight:700;
    color:var(--ink);
}

.language-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
}

.language-tags span{
    padding:.55rem 1rem;
    border-radius:999px;
    background:var(--surface-alt);
    border:1px solid var(--line);
    font-family:var(--font-mono);
    font-size:.82rem;
    transition:.25s;
}

.language-tags span:hover{
    border-color:var(--amber);
    transform:translateY(-2px);
}

.cert-list{
    list-style:none;
    margin:1.2rem 0 0;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.cert-list li{
    display:flex;
    align-items:center;
    gap:.9rem;
    padding:1rem 1.1rem;
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:12px;
    transition:.25s;
}

.cert-list li:hover{
    border-color:var(--teal);
    transform:translateX(5px);
}

.cert-list li::before{
    content:"✓";
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--teal);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}
/* ============================================
   CONTACT
   ============================================ */

.contact{
    padding:100px 0 70px;
    background:var(--surface-alt);
}

.contact-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:2.5rem;
    margin-top:2.5rem;
}

.contact-card,
.contact-form-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:.3s ease;
}

.contact-card:hover,
.contact-form-card:hover{
    transform:translateY(-6px);
}

.contact-card{
    padding:2rem;
    border-left:4px solid var(--teal);
}

.contact-card h3{
    margin-bottom:.7rem;
    font-size:1.4rem;
}

.contact-card p{
    color:var(--text-muted);
    margin-bottom:2rem;
}

.contact-item{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    padding:1rem 0;
    border-bottom:1px solid var(--line);
}

.contact-item:last-of-type{
    border-bottom:none;
}

.contact-item strong{
    font-size:.8rem;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.contact-item a,
.contact-item span{
    font-size:.95rem;
    color:var(--ink);
    word-break:break-word;
}

.contact-item a:hover{
    color:var(--teal);
}

.contact-status{
    margin-top:2rem;
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem;
    background:var(--surface-alt);
    border-radius:12px;
    font-family:var(--font-mono);
    font-size:.82rem;
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 12px #22c55e;
    animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
transform:scale(.9);
opacity:.6;
}

50%{
transform:scale(1.2);
opacity:1;
}

100%{
transform:scale(.9);
opacity:.6;
}

}

.contact-form-card{
    overflow:hidden;
}

.form-header{
    padding:1rem 1.5rem;
    background:var(--surface-alt);
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono);
    font-size:.8rem;
    color:var(--text-muted);
}

.contact-form-card form{
    padding:2rem;
}

.contact-form-card input,
.contact-form-card textarea{
    width:100%;
    margin-bottom:1.2rem;
    padding:.95rem 1rem;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--bg);
    color:var(--text);
    font-size:.95rem;
    transition:.25s;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus{
    outline:none;
    border-color:var(--amber);
    box-shadow:0 0 0 4px rgba(226,163,61,.15);
}

.contact-form-card textarea{
    resize:vertical;
    min-height:150px;
}

.contact-form-card button{
    width:100%;
}
/* ============================================
   FOOTER + BACK TO TOP
   ============================================ */
.site-footer{ padding: 2.4em 0; border-top: 1px solid var(--line); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 1em; }
.footer-inner p{ margin:0; font-size: .84rem; color: var(--text-muted); }
.footer-social{ display:flex; gap: 1.4em; }
.footer-social a{ font-size: .84rem; color: var(--text-muted); }
.footer-social a:hover{ color: var(--ink); }

.to-top{
  position: fixed; right: 24px; bottom: 24px; width: 46px; height:46px; border-radius: 50%;
  background: var(--ink); color: var(--bg); border:none; font-size: 1.1rem;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow);
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .3s ease; z-index: 90;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.to-top:hover{ background: var(--teal); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
  }

  .project-grid{
    grid-template-columns: repeat(2,1fr);
  }

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

  .dashboard{
    order:-1;
    max-width:480px;
  }
}