:root{
    --bg: #0A0E17;
    --bg-alt: #0D1220;
    --panel: #121826;
    --panel-2: #161E2E;
    --border: #232C3D;
    --text: #E7ECF4;
    --text-dim: #8A96AC;
    --text-faint: #576079;
    --orange: #FF9900;
    --orange-dim: #B96F00;
    --green: #3ECF8E;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --grid-line: rgba(255,255,255,0.02);
    --node-color: 255,255,255;
    --link-color: 62,207,142;
    --glow-strength: 0.45;
    --cloud-color: 180,196,224;
    --star-size: 1;
    --land-far: #10261E;
    --land-mid: #0C1C16;
    --land-near: #071310;
  }

  html[data-theme="light"]{
    --bg:#F3F6FB;
    --bg-alt:#EAEFF7;
    --panel:#FFFFFF;
    --panel-2:#F4F7FC;
    --border:#DEE4EF;
    --text:#0F1420;
    --text-dim:#525C71;
    --text-faint:#8892A6;
    --grid-line: rgba(15,20,32,0.035);
    --node-color: 30,38,58;
    --link-color: 217,133,0;
    --glow-strength: 0.3;
    --cloud-color: 80,96,130;
    --land-far: #C7D6C9;
    --land-mid: #9FB6A3;
    --land-near: #6E8C74;
  }

  html{ transition:background .35s ease; }
  body{ transition:background .35s ease, color .35s ease; }
 
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* ---------- ANIMATED CLOUD/DEVOPS BACKGROUND ---------- */
  #bg-canvas{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; will-change:transform, opacity;
    transition:opacity .6s ease;
  }
  .bg-glow-layer{
    position:fixed; inset:0; z-index:0; pointer-events:none; will-change:transform;
  }
  .bg-glow{
    position:absolute; border-radius:50%; filter:blur(90px);
    opacity:var(--glow-strength); will-change:transform;
  }
  .glow-1{
    width:560px; height:560px; top:-140px; left:-120px;
    background:radial-gradient(circle, var(--orange), transparent 72%);
    animation:drift1 24s ease-in-out infinite;
  }
  .glow-2{
    width:480px; height:480px; top:36%; right:-160px;
    background:radial-gradient(circle, var(--green), transparent 72%);
    animation:drift2 28s ease-in-out infinite;
  }
  .glow-3{
    width:420px; height:420px; bottom:-120px; left:26%;
    background:radial-gradient(circle, var(--orange-dim), transparent 72%);
    animation:drift3 32s ease-in-out infinite;
  }
  @keyframes drift1{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(70px,50px) rotate(18deg) scale(1.08); } }
  @keyframes drift2{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(-60px,70px) rotate(-14deg) scale(1.1); } }
  @keyframes drift3{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(50px,-60px) rotate(16deg) scale(1.05); } }

  /* ---------- FLOATING CLOUD SILHOUETTES ---------- */
  .bg-clouds{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    overflow:hidden; will-change:transform, opacity;
    transition:opacity .6s ease;
  }
  .cloud-shape{
    position:absolute; color:rgb(var(--cloud-color)); will-change:transform;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,0.15));
  }
  .cloud-shape svg{ display:block; width:100%; height:100%; }
  @keyframes cloud-drift-a{
    0%{ transform:translate(-6vw,0) scale(var(--s,1)); }
    50%{ transform:translate(6vw,-2.4vh) scale(var(--s,1)); }
    100%{ transform:translate(-6vw,0) scale(var(--s,1)); }
  }
  @keyframes cloud-drift-b{
    0%{ transform:translate(5vw,0) scale(var(--s,1)); }
    50%{ transform:translate(-5vw,2.2vh) scale(var(--s,1)); }
    100%{ transform:translate(5vw,0) scale(var(--s,1)); }
  }

  /* ---------- LAND / HORIZON (appears at end of scroll) ---------- */
  .bg-land{
    position:fixed; left:0; right:0; bottom:0; height:30vh; min-height:210px;
    z-index:0; pointer-events:none; opacity:0; transform:translateY(60px);
    transition:opacity .6s ease, transform .6s ease; will-change:transform, opacity;
  }
  .bg-land svg{ width:100%; height:100%; display:block; }
  .land-far{ fill:var(--land-far); }
  .land-mid{ fill:var(--land-mid); }
  .land-near{ fill:var(--land-near); }
  .land-tower{ fill:var(--land-near); stroke:var(--border); stroke-width:0.5; }
  .land-glow{ fill:var(--orange); filter:drop-shadow(0 0 6px var(--orange)) drop-shadow(0 0 12px var(--orange)); }

  /* ---------- THEME TOGGLE ---------- */
  .theme-toggle{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
    background:var(--panel); cursor:pointer; transition:all .2s; margin-left:16px;
    flex-shrink:0;
  }
  .theme-toggle:hover{ border-color:var(--orange); }
  .theme-toggle svg{ width:16px; height:16px; stroke:var(--text-dim); transition:stroke .2s; }
  .theme-toggle:hover svg{ stroke:var(--orange); }
  .theme-toggle .icon-sun{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
  html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--orange); color:#0A0E17; }
 
  .wrap{ max-width:1080px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
 
  /* focus visibility */
  a:focus-visible, button:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
 
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
 
  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; width:100%; z-index:9999;
    background:rgba(0, 0, 0, 0.3);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{
    font-family:var(--font-mono); font-weight:700; font-size:15px;
    letter-spacing:0.02em; color:white;
    display:flex; align-items:center; gap:8px;
  }
  .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
  .navlinks{ display:flex; gap:28px; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }
  .navlinks a{ position:relative; padding:4px 0; transition:color .2s; }
  .navlinks a:hover{ color:var(--orange); }
  .navlinks a::before{ content:'/'; color:var(--text-faint); margin-right:6px; }
  html[data-theme="light"] .navlinks{ color:var(--text-dim); }
  html[data-theme="light"] .navlinks a{ color:var(--text-dim); }
  html[data-theme="light"] .navlinks a:hover{ color:var(--orange); }
  html[data-theme="light"] .navlinks a::before{ color:var(--text-faint); }
  .navlinks a:hover::before{ color:var(--orange); }
  .nav-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
  .navtoggle{
    display:none; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:8px; border:1px solid var(--border);
    background:var(--panel); cursor:pointer; color:var(--text);
  }
  .navtoggle span{ display:block; width:18px; height:2px; background:currentColor; position:relative; }
  .navtoggle span::before, .navtoggle span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor; transition:transform .2s ease, top .2s ease; }
  .navtoggle span::before{ top:-6px; }
  .navtoggle span::after{ top:6px; }
  .navtoggle.open span{ background:transparent; }
  .navtoggle.open span::before{ top:0; transform:rotate(45deg); }
  .navtoggle.open span::after{ top:0; transform:rotate(-45deg); }
  header, .terminal, .badge-card, .exp-card, .project, .case-panel, .cert-card, .clink, .btn, .stat-tile, .pill, .tag{
    transition:background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
  }
 
  @media (max-width:760px){
    .navlinks{ display:none; }
    .nav-right{ margin-left:auto; }
    .navtoggle{ display:inline-flex; }
    .navlinks{
      position:fixed; top:64px; right:16px; width:min(240px, calc(100% - 32px));
      display:none; flex-direction:column; gap:12px; padding:14px;
      background:var(--panel); border:1px solid var(--border); border-radius:12px;
      box-shadow:0 24px 48px rgba(0,0,0,0.22); z-index:100000;
    }
    .navlinks.open{ display:flex; }
    .navlinks a::before{ display:none; }
  }
 
  /* ---------- HERO ---------- */
  .hero{ padding:96px 0 80px; position:relative; }
  .hero-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
  }
  @media (max-width:820px){ .hero-grid{ grid-template-columns:1fr; } }
 
  .eyebrow{
    font-family:var(--font-mono); font-size:12px; color:var(--green);
    letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow .bar{ width:24px; height:1px; background:var(--green); display:inline-block; }
 
  h1.name{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(34px, 5.5vw, 54px);
    line-height:1.06; letter-spacing:-0.01em; margin-bottom:16px;
  }
  h1.name .accent{ color:var(--orange); }
 
  .role-line{
    font-family:var(--font-mono); font-size:15px; color:var(--text-dim); margin-bottom:28px;
  }
 
  .terminal{
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    font-family:var(--font-mono); font-size:13px; overflow:hidden;
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.6);
  }
  .terminal-head{
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    border-bottom:1px solid var(--border); background:var(--panel-2);
  }
  .terminal-head span{ width:10px; height:10px; border-radius:50%; background:#3a4356; }
  .terminal-head .tlabel{ margin-left:8px; color:var(--text-faint); font-size:11px; }
  .terminal-body{ padding:18px 18px 20px; color:var(--text-dim); }
  .terminal-body .line{ margin-bottom:10px; }
  .terminal-body .prompt{ color:var(--green); }
  .terminal-body .out{ color:var(--text); }
  .terminal-body .cursor{
    display:inline-block; width:8px; height:14px; background:var(--orange);
    margin-left:2px; vertical-align:middle; animation:blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }
 
  .pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .pill{
    font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
    border:1px solid var(--border); padding:4px 10px; border-radius:5px;
    background:var(--bg-alt);
  }
 
  .hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-mono); font-size:13px; padding:12px 20px; border-radius:7px;
    border:1px solid var(--border); transition:all .2s; display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary{ background:var(--orange); color:#141005; border-color:var(--orange); font-weight:600; }
  .btn-primary:hover{ background:#ffab26; }
  .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
 
  /* profile badge card */
  .badge-card{
    position:relative; background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:22px; max-width:320px; margin:0 auto;
    box-shadow:0 30px 60px -30px rgba(0,0,0,0.7);
  }
  .badge-tag{
    position:absolute; top:-12px; right:18px; background:var(--orange); color:#141005;
    font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.05em;
    padding:5px 10px; border-radius:5px; transform:rotate(2deg);
  }
  .badge-photo{
    width:100%; aspect-ratio:3/3.6; border-radius:9px; overflow:hidden; border:1px solid var(--border);
    margin-bottom:16px;
  }
  .badge-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.03) contrast(1.03); }
  .badge-name{ font-family:var(--font-display); font-weight:600; font-size:18px; }
  .badge-role{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); margin-top:4px; }
  .badge-meta{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:11px; color:var(--text-faint); display:flex; justify-content:space-between; }
 
  /* ---------- SECTION SHELL ---------- */
  section{ padding:76px 0; border-top:1px solid var(--border); position:relative; }
  .sec-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:36px; }
  .sec-index{ font-family:var(--font-mono); font-size:12px; color:var(--orange); }
  h2.sec-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,32px); }
  .sec-sub{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); margin-left:auto; }
 
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
 
  /* ---------- ABOUT / STATS ---------- */
  .about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
  .about-text p{ color:var(--text-dim); font-size:15.5px; margin-bottom:16px; max-width:52ch; }
  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .stat-tile{
    background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px;
  }
  .stat-num{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--orange); }
  .stat-label{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-top:4px; }
 
  /* ---------- SKILLS ---------- */
  .skills-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  @media (max-width:900px){ .skills-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:520px){ .skills-grid{ grid-template-columns:1fr; } }
  .skill-col-title{
    font-family:var(--font-mono); font-size:11px; color:var(--green); letter-spacing:0.06em;
    text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px;
  }
  .skill-col-title::before{ content:'#'; color:var(--text-faint); }
  .skill-item{ font-size:14px; color:var(--text-dim); padding:6px 0; border-bottom:1px dashed var(--border); }
  .skill-item:last-child{ border-bottom:none; }
 
  /* ---------- EXPERIENCE ---------- */
  .exp-card{
    background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:28px 30px;
    display:grid; grid-template-columns:200px 1fr; gap:26px;
  }
  @media (max-width:700px){ .exp-card{ grid-template-columns:1fr; } }
  .exp-when{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
  .exp-role{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:2px; }
  .exp-org{ font-family:var(--font-mono); font-size:13px; color:var(--orange); margin-bottom:14px; }
  .exp-card ul{ list-style:none; }
  .exp-card li{ font-size:14.5px; color:var(--text-dim); padding-left:18px; position:relative; margin-bottom:10px; }
  .exp-card li::before{ content:'▹'; color:var(--green); position:absolute; left:0; }
 
  /* ---------- PROJECTS ---------- */
  .project{
    background:var(--panel); border:1px solid var(--border); border-radius:12px;
    padding:28px 30px; margin-bottom:24px;
  }
  .project-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:6px; }
  .project-title{ font-family:var(--font-display); font-size:20px; font-weight:600; }
  .project-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
  .project-desc{ color:var(--text-dim); font-size:14.5px; margin:12px 0 18px; max-width:70ch; }
  .project-desc li{ list-style:none; padding-left:18px; position:relative; margin-bottom:8px; }
  .project-desc li::before{ content:'▹'; color:var(--orange); position:absolute; left:0; }
 
  /* pipeline signature element */
  .pipeline{
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
    background:var(--bg-alt); border:1px solid var(--border); border-radius:8px;
    padding:14px 16px; overflow-x:auto; white-space:nowrap; position:relative; margin-bottom:16px;
  }
  .pipeline .stage{ color:var(--text); }
  .pipeline .arrow{ color:var(--orange); margin:0 8px; }
  .pipeline .flow-dot{
    position:absolute; top:50%; left:16px; width:6px; height:6px; border-radius:50%;
    background:var(--green); box-shadow:0 0 8px var(--green);
    animation:flow 4.5s linear infinite;
  }
  @keyframes flow{
    0%{ left:16px; opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ left:calc(100% - 20px); opacity:0; }
  }
 
  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{
    font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim);
    border:1px solid var(--border); border-radius:4px; padding:3px 8px;
  }
 
  /* ---------- CASE STUDY ---------- */
  .case-panel{
    background:linear-gradient(160deg, var(--panel) 0%, var(--bg-alt) 100%);
    border:1px solid var(--border); border-radius:14px; padding:34px;
  }
  .case-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
  .case-kicker{ font-family:var(--font-mono); font-size:11px; color:var(--green); text-transform:uppercase; letter-spacing:0.06em; }
  .case-title{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-top:6px; }
  .case-team{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
  .case-body{ color:var(--text-dim); font-size:14.5px; margin-top:16px; max-width:75ch; }
  .case-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
  @media (max-width:700px){ .case-cols{ grid-template-columns:1fr; } }
  .case-cols h4{ font-family:var(--font-mono); font-size:11.5px; color:var(--orange); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; }
  .case-cols ul{ list-style:none; }
  .case-cols li{ font-size:14px; color:var(--text-dim); padding-left:16px; position:relative; margin-bottom:8px; }
  .case-cols li::before{ content:'—'; color:var(--text-faint); position:absolute; left:0; }
 
  /* ---------- CERTIFICATIONS ---------- */
  .cert-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  @media (max-width:820px){ .cert-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:520px){ .cert-grid{ grid-template-columns:1fr; } }
  .cert-card{
    position:relative; background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:20px 18px 18px; overflow:hidden;
  }
  .cert-card::before{
    content:''; position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 34px 34px 0; border-color:transparent var(--orange) transparent transparent;
  }
  .cert-card .cert-icon{ font-family:var(--font-mono); font-size:10px; color:#141005; position:absolute; top:5px; right:4px; font-weight:700; }
  .cert-name{ font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:8px; padding-right:20px; }
  .cert-date{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
  .cert-issuer{ font-family:var(--font-mono); font-size:10.5px; color:var(--green); margin-top:8px; }
 
  .achv-row{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
  .achv{ font-size:14px; color:var(--text-dim); padding-left:18px; position:relative; }
  .achv::before{ content:'★'; color:var(--orange); position:absolute; left:0; font-size:11px; top:3px; }
 
  /* ---------- EDUCATION ---------- */
  .edu-item{
    display:grid; grid-template-columns:1fr auto; gap:16px; padding:18px 0;
    border-bottom:1px dashed var(--border);
  }
  .edu-item:last-child{ border-bottom:none; }
  .edu-degree{ font-family:var(--font-display); font-size:16.5px; font-weight:600; }
  .edu-school{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-top:3px; }
  .edu-score{ font-family:var(--font-mono); font-size:12px; color:var(--orange); text-align:right; }
  .edu-year{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:right; margin-top:3px; }
 
  /* ---------- CONTACT / FOOTER ---------- */
  footer{ border-top:1px solid var(--border); padding:72px 0 40px; }
  .contact-inner{ text-align:center; }
  .contact-eyebrow{ font-family:var(--font-mono); font-size:12px; color:var(--green); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
  h2.contact-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,40px); margin-bottom:22px; }
  .contact-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
  .clink{
    font-family:var(--font-mono); font-size:13px; border:1px solid var(--border); border-radius:8px;
    padding:12px 20px; transition:all .2s;
  }
  .clink:hover{ border-color:var(--orange); color:var(--orange); }
  .footer-bottom{ margin-top:56px; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }




  /* ---------- WELCOME SCREEN ---------- */
  body.locked {
    overflow: hidden;
    height: 100vh;
  }
  #welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center; /* Forces all standard text to center */
    transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.8s;
  }
  #welcome-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #ws-greetings-container {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .ws-greeting {
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center; /* Centers the absolute positioned text */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.2s ease-out;
  }
  .ws-greeting.active {
    opacity: 1;
    transform: scale(1);
  }
  #ws-final-greeting {
    font-family: var(--font-display);
    font-size: clamp(36px, 7vw, 64px);
    font-weight: 700;
    color: var(--orange);
    text-align: center;
    opacity: 0;
    display: none;
  }
  #ws-final-greeting.active {
    display: block;
    animation: stretchBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }
  @keyframes stretchBounce {
    0% { transform: scale(0.8); opacity: 0; letter-spacing: -2px; filter: blur(10px); }
    50% { transform: scale(1.05); opacity: 1; letter-spacing: 4px; filter: blur(0px); text-shadow: 0 0 15px rgba(255, 153, 0, 0.4); }
    100% { transform: scale(1); opacity: 1; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255, 153, 0, 0.2); }
  }
  #ws-intro {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    opacity: 0;
  }
  #ws-intro.active {
    display: flex;
    animation: blurFadeUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  .ws-intro-name {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
  }
  .ws-intro-role {
    font-family: var(--font-mono);
    font-size: clamp(14px, 3vw, 18px);
    color: var(--green);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  @keyframes blurFadeUp {
    0% { opacity: 0; transform: translateY(30px); filter: blur(12px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
  }





  /* =========================
   GLOBAL RESPONSIVE FIX
========================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
    max-width:100%;
}

img,
svg,
canvas,
video,
iframe{
    max-width:100%;
    height:auto;
    display:block;
}

section,
footer,
main{
    width:100%;
    overflow-x:hidden;
}

main{
    padding-top:64px;
}

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

@media (max-width:768px){

    .wrap{
        width:100%;
        padding:0 16px;
    }

    .hero{
        padding:70px 0;
    }

    .hero-grid,
    .about-grid,
    .skills-grid,
    .case-cols,
    .exp-card,
    .edu-item{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .badge-card,
    .project,
    .case-panel,
    .exp-card,
    .cert-card,
    .stat-tile{
        width:100%;
    }

    .hero-cta{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .hero-cta .btn{
        width:100%;
        justify-content:center;
    }

    .contact-links{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .contact-links .clink{
        width:100%;
        text-align:center;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    h1.name{
        font-size:36px;
        line-height:1.15;
    }

    .role-line{
        font-size:14px;
        word-break:break-word;
    }

    .project-title,
    .case-title,
    .contact-title{
        word-break:break-word;
    }

    .pipeline{
        white-space:normal;
        overflow-x:hidden;
        word-break:break-word;
        line-height:1.8;
    }

    .pipeline .flow-dot{
        display:none;
    }

    .project-top{
        flex-direction:column;
        gap:8px;
    }

    .badge-meta{
        flex-direction:column;
        gap:8px;
    }

    .navlinks{
        display:none;
    }

    .theme-toggle{
        margin-left:0;
    }
}


/* ===== MINIMAL THEME: quiet, light, one muted accent ===== */
:root{
  --bg:#0F1112; --bg-alt:#131517; --panel:transparent; --panel-2:transparent; --border:#25292C;
  --text:#E6E8E8; --text-dim:#9AA1A3; --text-faint:#7B8386; --accent:#8FC1B9;
  --orange:var(--accent); --green:var(--accent);
  --font-display:'Hanken Grotesk',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --node-color:150,160,160; --link-color:143,193,185; --cloud-color:120,130,135;
  --land-far:#15191A; --land-mid:#121516; --land-near:#0F1112;
}
html[data-theme="light"]{
  --bg:#F8F9F9; --bg-alt:#F1F3F3; --border:#E1E5E6; --text:#1B1F20; --text-dim:#5B6466; --text-faint:#6F787A; --accent:#2F6F6A;
  --node-color:90,100,100; --link-color:47,111,106; --cloud-color:140,150,155;
  --land-far:#E6EAEA; --land-mid:#DDE2E2; --land-near:#D2D8D8;
}
html body, html body *:not(svg):not(path){ font-weight:400 !important; }
html body h1, html body h2, html body .stat-num, html body .badge-name{ font-weight:300 !important; }
body{ font-size:16px; line-height:1.7; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.bg-glow{ opacity:.2; } .cloud-shape svg{ opacity:.45; }

header{ background:var(--bg); border-bottom:1px solid var(--border); backdrop-filter:none; }
.brand,.navlinks a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; text-transform:none; }
.navlinks a:hover{ color:var(--accent); }

.eyebrow{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-transform:none; letter-spacing:.02em; }
.eyebrow .bar{ background:var(--accent); }
h1.name{ font-family:var(--font-display); font-size:clamp(40px,6vw,80px); line-height:1.05; letter-spacing:-.02em; text-transform:none; margin:20px 0 18px; }
h1.name .accent{ background:none; color:var(--accent); padding:0; display:inline; }
.role-line{ font-size:15px; color:var(--text-dim); border:0; padding:0; max-width:54ch; font-family:var(--font-body); }

.btn,.btn-primary{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius:4px; box-shadow:none;
  font-family:var(--font-body); font-size:14px; letter-spacing:0; text-transform:none; padding:10px 18px; transform:none; }
.btn:hover,.btn-primary:hover{ border-color:var(--accent); color:var(--accent); background:transparent; transform:none; box-shadow:none; }
.hero-cta .btn:last-child{ border-color:var(--text); }
.badge-card{ background:transparent; border:1px solid var(--border); border-radius:6px; box-shadow:none; }
.badge-tag{ background:none; color:var(--text-dim); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; border-radius:0; }
.badge-photo,.badge-photo img{ border-radius:4px; }
.badge-name{ font-size:22px; text-transform:none; }

/* Sections: a small mono label, a light title, one hairline */
.sec-head{ display:flex; align-items:baseline; gap:14px; background:none; border:0; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:40px; }
.sec-index{ background:none; color:var(--accent); font-family:var(--font-mono); font-size:12px; padding:0; }
h2.sec-title{ font-family:var(--font-display); font-size:clamp(24px,3vw,32px); text-transform:none; color:var(--text); padding:0; flex:0 0 auto; }
.sec-sub{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); opacity:1; margin-left:auto; padding:0; }

/* Content: no boxes, just hairline-separated blocks */
.exp-card,.project,.case-panel,.cert-card,.stat-tile,.edu-item,.skills-grid{ background:transparent; border:0; border-radius:0; box-shadow:none; }
.exp-card,.project,.case-panel{ border-bottom:1px solid var(--border); padding-bottom:36px; margin-bottom:36px; }
.cert-card,.stat-tile{ border-top:1px solid var(--border); }
.stat-num{ font-family:var(--font-display); font-size:clamp(34px,4.5vw,52px); line-height:1.1; color:var(--text); }
.stat-label,.exp-when,.project-date,.cert-date,.edu-year,.case-kicker,.skill-col-title{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; text-transform:none; color:var(--text-faint); }
.skill-col-title{ background:none; padding:0; color:var(--accent); }
.exp-role,.project-title,.case-title,.edu-degree,.cert-name{ font-family:var(--font-display); text-transform:none; letter-spacing:0; color:var(--text); }
.project-title,.case-title{ font-size:22px; line-height:1.3; } .exp-role{ font-size:20px; }
.tag{ border:0; background:none; padding:0; border-radius:0; color:var(--text-dim); font-family:var(--font-mono); font-size:12px; }
.tag::after{ content:' ·'; color:var(--text-faint); } .tag:last-child::after{ content:''; }
.tag-row{ gap:6px 8px; }
.cert-icon{ color:var(--accent); }
.clink{ background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; color:var(--text-dim); font-family:var(--font-body); padding:2px 0; }
.clink:hover{ color:var(--accent); border-color:var(--accent); background:none; }

/* Pipelines: one thin quiet line of text */
.pipeline{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:12px 0 16px; background:none; border:0; padding:0; font-family:var(--font-mono); font-size:12px; }
.pipeline .flow-dot{ display:none; }
.pipeline .stage{ position:static; padding:0; min-width:0; background:none; border:0; border-radius:0; color:var(--text-dim); font-size:12px; }
.pipeline .stage::before,.pipeline .stage::after{ display:none; }
.pipeline .arrow{ display:inline; color:var(--text-faint); }

footer{ border-top:1px solid var(--border); }
h2.contact-title{ font-family:var(--font-display); font-size:clamp(30px,5vw,56px); line-height:1.1; text-transform:none; letter-spacing:-.01em; }
.contact-eyebrow,.footer-bottom{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
@media (max-width:760px){ .sec-sub{ display:none; } }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }
.brand{ color:var(--text); }
.exp-card,.project,.case-panel,.cert-card,.stat-tile,.edu-item{ padding-left:0; padding-right:0; }
.cloud-shape svg{ opacity:.25; }