@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

*,
*::before,
*::after { box-sizing:border-box; }

:root{
  --ink:#151821;
  --surface:#f8f8f5;
  --blue:#2563eb;
  --violet:#7c3aed;
  --coral:#ff6b6b;
  --yellow:#ffd54a;
  --mint:#4fd1b5;
  --pink:#ff78b7;
  --sky:#7dd3fc;
  --ease:cubic-bezier(.16,1,.3,1);
  --section-y:clamp(92px,8vh,122px);
}

html{scroll-behavior:smooth;}
body{margin:0;background:#fbfaf7;color:var(--ink);font-family:'Manrope',sans-serif;overflow-x:clip;}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;}
a,button,input,textarea{font:inherit;}
button{cursor:pointer;}
img{display:block;max-width:100%;}
main{position:relative;z-index:2;}

.theme-section{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:clip;
  padding:var(--section-y) 0;
  scroll-margin-top:0;
}
.site-shell{
  position:relative;
  z-index:3;
  width:min(1760px,calc(100vw - 34px));
  margin:0 auto;
  padding-left:112px;
  padding-right:clamp(28px,4vw,72px);
}

.section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--blue);font:800 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;
  margin-bottom:22px;text-transform:uppercase;
}
.section-eyebrow.light{color:#a9c3ff;}
.section-eyebrow.dark{color:#93b3ff;}

.btn-blue,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 31px;border-radius:999px;text-decoration:none;
  font:700 16px/1 'Plus Jakarta Sans',sans-serif;transition:.22s var(--ease);
}
.btn-blue{background:#2563eb;color:#fff;border:0;box-shadow:0 12px 30px rgba(37,99,235,.25);}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,99,235,.34);}
.btn-ghost{color:#171717;border:2px solid #d1d5db;background:rgba(255,255,255,.3);}
.btn-ghost:hover{transform:translateY(-3px);border-color:#9ca3af;}

/* NAV — V17 light glass theme, now hover-collapsible */
.theme-side-nav{
  position:fixed;z-index:160;left:18px;top:50%;transform:translateY(-50%);
  width:78px;height:100px;padding:12px;border-radius:26px;overflow:hidden;
  background:rgba(250,252,255,.82);border:1px solid rgba(255,255,255,.94);
  box-shadow:0 22px 65px rgba(31,42,68,.14),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(24px) saturate(1.28);
  transition:width .34s var(--ease),height .34s var(--ease),box-shadow .25s ease;
}
.theme-side-nav.is-open,.theme-side-nav:focus-within{
  width:230px;height:min(650px,calc(100vh - 30px));
  box-shadow:0 30px 88px rgba(31,42,68,.19),inset 0 1px 0 rgba(255,255,255,.97);
}
.theme-side-nav-head{height:52px;display:flex;align-items:center;gap:11px;padding:0 4px 8px;white-space:nowrap;}
.theme-side-nav-brand{
  width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;
  color:white;text-decoration:none;font:800 12px/1 'Plus Jakarta Sans',sans-serif;
  background:linear-gradient(135deg,#2563eb,#7c3aed 60%,#ff78b7);
  box-shadow:0 10px 25px rgba(91,77,224,.26);transition:transform .25s var(--ease);
}
.theme-side-nav-brand:hover{transform:rotate(-5deg) scale(1.05);}
.theme-side-nav-name{opacity:0;transform:translateX(-8px);color:#1e2533;font:780 15px/1 'Plus Jakarta Sans',sans-serif;transition:.22s ease;}
.theme-side-nav.is-open .theme-side-nav-name,.theme-side-nav:focus-within .theme-side-nav-name{opacity:1;transform:none;}
.theme-side-nav-progress{height:3px;border-radius:999px;background:rgba(33,45,70,.08);overflow:hidden;margin:2px 4px 9px;opacity:0;}
.theme-side-nav.is-open .theme-side-nav-progress,.theme-side-nav:focus-within .theme-side-nav-progress{opacity:1;}
.theme-side-nav-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3978ff,#8b5cf6,#ff78b7,#4fd1b5);}
.theme-side-nav-list{display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(5px);}
.theme-side-nav.is-open .theme-side-nav-list,.theme-side-nav:focus-within .theme-side-nav-list{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:.18s .06s ease;}
.theme-side-nav-link{
  --menu-tone:#2563eb;position:relative;width:100%;height:42px;display:flex;align-items:center;
  padding:0 13px 0 16px;border-radius:13px;color:#505969;text-decoration:none;border:1px solid transparent;
  transition:.18s ease;
}
.theme-side-nav-link::before{content:'';position:absolute;left:5px;top:10px;bottom:10px;width:3px;border-radius:999px;background:var(--menu-tone);opacity:0;transform:scaleY(.35);transition:.2s var(--ease);}
.theme-side-nav-link strong{font:720 13px/1 'Plus Jakarta Sans',sans-serif;white-space:nowrap;}
.theme-side-nav-link:hover,.theme-side-nav-link.is-active{color:#172033;background:rgba(255,255,255,.85);border-color:rgba(37,99,235,.08);box-shadow:0 8px 22px rgba(31,42,68,.07);}
.theme-side-nav-link:hover::before,.theme-side-nav-link.is-active::before{opacity:1;transform:scaleY(1);}
.theme-side-nav-cv{
  position:absolute;left:12px;right:12px;bottom:12px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;color:#fff;text-decoration:none;background:linear-gradient(110deg,#3978ff,#7255ef 64%,#8b5cf6);
  box-shadow:0 12px 26px rgba(77,82,220,.22);opacity:0;visibility:hidden;
}
.theme-side-nav.is-open .theme-side-nav-cv,.theme-side-nav:focus-within .theme-side-nav-cv{opacity:.8;visibility:visible;}
.theme-side-nav-collapsed-label{
  position:absolute;left:0;right:0;bottom:9px;text-align:center;color:#9097a5;
  font:800 7px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.15em;
}
.theme-side-nav.is-open .theme-side-nav-collapsed-label,.theme-side-nav:focus-within .theme-side-nav-collapsed-label{opacity:0;}
.mobile-dock{display:none;}

/* HERO */
.hero-shell{
  padding-top:clamp(88px,8vh,118px);
  background:
    radial-gradient(circle at 72% 25%,rgba(37,99,235,.12),transparent 31%),
    radial-gradient(circle at 12% 70%,rgba(124,58,237,.10),transparent 27%),
    radial-gradient(circle at 54% 78%,rgba(255,213,74,.12),transparent 24%),
    linear-gradient(135deg,#fffdf9 0%,#f7fbff 45%,#fff9f7 100%);
}
.hero-blob{position:absolute;border-radius:50%;filter:blur(85px);pointer-events:none;opacity:.18;animation:blobMove 13s ease-in-out infinite alternate;}
.hero-blob-a{width:520px;height:520px;background:#2563eb;right:-100px;top:-120px;}
.hero-blob-b{width:420px;height:420px;background:#7c3aed;left:-130px;top:37%;}
.hero-blob-c{width:360px;height:360px;background:#ffd54a;left:42%;bottom:-140px;}
@keyframes blobMove{to{transform:translate3d(40px,-22px,0) scale(1.08);}}
.grid-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.22) 78%,transparent);opacity:.6;}
.hero-inner{
  position:relative;z-index:5;width:min(1810px,calc(100% - 42px));margin:0 auto;
  padding-left:112px;padding-right:clamp(20px,2.5vw,45px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(580px,.95fr);gap:clamp(55px,5vw,100px);align-items:center;
}
.hero-copy{max-width:900px;}
.hero-availability{display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;border-radius:999px;padding:10px 17px;font:650 14px/1 'Plus Jakarta Sans',sans-serif;background:linear-gradient(135deg,rgba(79,209,181,.18),rgba(125,211,252,.13));color:#0d8c76;border:1px solid rgba(79,209,181,.4);}
.hero-availability>span{width:9px;height:9px;border-radius:50%;background:#4fd1b5;box-shadow:0 0 0 7px rgba(79,209,181,.14);}
.hero-name{margin:0 0 24px;font:800 clamp(88px,8vw,158px)/.86 'Plus Jakarta Sans',sans-serif;letter-spacing:-.065em;white-space:nowrap;}
.hero-name>span{display:inline-block;}
.hero-name-gradient{
  background:linear-gradient(100deg,#163b8c 0%,#2563eb 35%,#7c3aed 70%,#df66b7 100%);
  background-size:180% 180%;background-clip:text;-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 24px rgba(37,99,235,.14));animation:nameFlow 6s ease-in-out infinite alternate;
}
@keyframes nameFlow{to{background-position:100% 50%;}}
.hero-role{display:inline-flex;padding:12px 23px;border-radius:999px;color:white;font:700 clamp(16px,1.2vw,21px)/1 'Plus Jakarta Sans',sans-serif;background:linear-gradient(110deg,#2563eb,#6d4df7 60%,#ff5fa7 135%);box-shadow:0 14px 34px rgba(94,71,229,.22);margin-bottom:22px;}
.hero-stackline{margin:0 0 22px;font:700 clamp(17px,1.2vw,21px)/1.5 'Plus Jakarta Sans',sans-serif;background:linear-gradient(90deg,var(--violet),var(--blue),#d93483);background-clip:text;-webkit-background-clip:text;color:transparent;}
.hero-stackline span{color:#6b7280;opacity:.48;margin:0 .3em;}
.hero-intro{margin:0 0 32px;max-width:760px;color:#404654;font-size:clamp(18px,1.25vw,22px);line-height:1.7;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.hero-socials{display:flex;gap:26px;flex-wrap:wrap;}
.hero-socials a{color:#747b88;text-decoration:none;font:600 15px/1 'Plus Jakarta Sans',sans-serif;transition:.2s ease;}
.hero-socials a:hover{color:#2563eb;transform:translateY(-2px);}
.hero-visual-wrap{position:relative;width:min(100%,810px);aspect-ratio:1;justify-self:end;min-height:700px;perspective:1100px;}
.hero-visual-orbit{position:absolute;border-radius:50%;pointer-events:none;}
.hero-orbit-one{width:470px;height:470px;right:5%;top:13%;background:radial-gradient(circle at 34% 36%,rgba(125,211,252,.35),rgba(37,99,235,.11) 55%,rgba(37,99,235,.03));}
.hero-orbit-two{width:330px;height:330px;left:7%;bottom:6%;background:radial-gradient(circle,rgba(255,213,74,.32),rgba(255,120,183,.12) 56%,transparent 75%);}
.hero-portrait-stage{position:absolute;inset:15% 11% 9% 17%;transition:transform .18s linear;}
.portrait-backplate{position:absolute;inset:8%;border-radius:34px;}
.portrait-backplate-one{background:linear-gradient(145deg,rgba(37,99,235,.18),rgba(124,58,237,.12));transform:rotate(8deg) translate(28px,-16px);}
.portrait-backplate-two{border:2px solid rgba(21,24,33,.08);transform:rotate(-5deg) translate(-18px,20px);}
.hero-portrait-card{position:absolute;inset:0;border-radius:32px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,249,255,.84));border:1px solid rgba(37,99,235,.12);box-shadow:0 38px 90px rgba(50,68,110,.22),0 8px 28px rgba(124,58,237,.09);overflow:hidden;}
.hero-portrait-photo{height:calc(100% - 68px);border-radius:24px;overflow:hidden;}
.hero-portrait-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;}
.hero-portrait-meta{height:68px;display:flex;justify-content:space-between;align-items:center;padding:0 8px 0 10px;}
.hero-portrait-meta strong{font:800 16px/1 'Plus Jakarta Sans',sans-serif;}
.hero-portrait-meta span{color:#8b8b8b;font:600 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;}
.hero-orbit-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.orbit-line{fill:none;stroke-width:1.25;transform-origin:center;}
.orbit-line-a{stroke:rgba(37,99,235,.16);stroke-dasharray:7 11;animation:orbitA 28s linear infinite;}
.orbit-line-b{stroke:rgba(124,58,237,.11);stroke-dasharray:2 14;animation:orbitB 36s linear infinite;}
@keyframes orbitA{to{transform:rotate(360deg)}} @keyframes orbitB{to{transform:rotate(-360deg)}}
.hero-tech-field{position:absolute;inset:0;}
.hero-tech-signal{position:absolute;min-width:112px;padding:12px 14px;border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--signal-color) 15%,white),rgba(255,255,255,.96));border:1px solid color-mix(in srgb,var(--signal-color) 22%,transparent);box-shadow:0 16px 34px color-mix(in srgb,var(--signal-color) 13%,transparent);transform:rotate(var(--signal-rotate));transition:.25s var(--ease);}
.hero-tech-signal::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--signal-color);}
.hero-tech-signal strong{display:block;padding-left:5px;font:800 15px/1.1 'Plus Jakarta Sans',sans-serif;}
.hero-tech-signal span{display:block;padding:5px 0 0 5px;color:#8a8a8a;font:600 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;}
.hero-tech-signal:hover{transform:rotate(0) translateY(-6px);box-shadow:0 22px 48px rgba(21,24,33,.14);}
.hero-status-card{position:absolute;z-index:8;left:3%;top:10%;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(21,24,33,.96),rgba(48,37,99,.96));color:#fff;box-shadow:0 22px 52px rgba(37,22,85,.22);}
.hero-status-label{display:block;margin-bottom:9px;color:rgba(255,255,255,.46);font:700 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.18em;}
.hero-status-values{display:flex;gap:12px}.hero-status-values span{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.78);font:600 10px/1 'Plus Jakarta Sans',sans-serif;}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.status-dot-blue{background:#2563eb}.status-dot-violet{background:#7c3aed}.status-dot-coral{background:#ff6b6b}
.hero-scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:8}.hero-scroll-cue>span{color:#aaa;font:700 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.2em}.hero-scroll-track{width:22px;height:34px;border:1.5px solid rgba(21,24,33,.22);border-radius:999px;padding:5px 0;display:flex;justify-content:center}.hero-scroll-track i{width:4px;height:7px;border-radius:999px;background:#2563eb;animation:scrollCue 1.7s ease-in-out infinite}@keyframes scrollCue{50%{transform:translateY(10px);opacity:1}}

/* ABOUT — exact approved visual language */
.about-signature{
  background:radial-gradient(circle at 8% 15%,rgba(255,107,107,.15),transparent 27%),radial-gradient(circle at 92% 74%,rgba(125,211,252,.20),transparent 31%),linear-gradient(135deg,#fff9f5,#fbfbff 48%,#f3f8ff);
}
.about-signature::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 82%,transparent);}
.about-glow{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none}.about-glow-a{width:360px;height:360px;background:rgba(124,58,237,.08);top:12%;right:6%}.about-glow-b{width:310px;height:310px;background:rgba(79,209,181,.09);bottom:2%;left:15%}
.about-topline{display:flex;align-items:center;gap:20px;color:#858b99;font:700 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em;margin-bottom:clamp(42px,5vh,62px)}.about-topline-rule{height:1px;flex:1;background:linear-gradient(90deg,#d7dce7,transparent)}
.about-signature-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(440px,.82fr);gap:clamp(42px,5vw,88px);align-items:center;}
.about-kicker{color:#ff5d6c;font:800 14px 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;margin-bottom:20px}
.about-mega-title{margin:0 0 28px;max-width:12ch;font:800 clamp(58px,5.5vw,100px)/.98 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.about-mega-title span{display:block;color:#2563eb}
.about-lead{max-width:780px;font-size:clamp(19px,1.45vw,27px);line-height:1.62;color:#343b49;margin-bottom:18px}.about-copy{max-width:740px;font-size:clamp(16px,1.1vw,20px);line-height:1.75;color:#667080}
.about-control-panel{position:relative;padding:30px;border-radius:32px;min-height:455px;background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(245,248,255,.72));border:1px solid rgba(33,40,57,.08);box-shadow:0 30px 70px rgba(38,50,78,.13);backdrop-filter:blur(18px);overflow:hidden}
.about-control-panel::before{content:'';position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.10),transparent 68%)}
.about-control-top{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(21,24,33,.08)}
.about-control-avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;color:white;font:800 15px 'Plus Jakarta Sans',sans-serif;background:linear-gradient(135deg,#2563eb,#7c3aed 65%,#ff78b7);box-shadow:0 12px 28px rgba(67,84,212,.24)}
.about-control-name{font:800 20px/1.1 'Plus Jakarta Sans',sans-serif}.about-control-role{margin-top:4px;color:#7b8391;font-size:13px}
.about-control-tabs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.about-control-tabs button{border:0;border-radius:999px;padding:10px 12px;background:rgba(255,255,255,.7);color:#808898;font:800 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.05em;transition:.2s ease}.about-control-tabs button.active{color:#fff;background:linear-gradient(135deg,#151821,#2a3350 68%,#2563eb);box-shadow:0 10px 20px rgba(21,24,33,.14)}
.about-control-list{position:relative;z-index:1;display:none;gap:12px}.about-control-list.active{display:grid}.about-control-item{display:grid;grid-template-columns:12px 100px minmax(0,1fr);gap:12px;align-items:start;padding:15px 16px;border-radius:18px;border:1px solid rgba(21,24,33,.07);background:rgba(255,255,255,.72);transition:.22s ease}.about-control-item:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(36,47,74,.08)}.about-control-item i{width:10px;height:10px;margin-top:6px;border-radius:50%;box-shadow:0 0 0 6px rgba(37,99,235,.08)}.about-control-item span{color:#8a91a0;font:800 10px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em}.about-control-item strong{font:700 15px/1.48 'Plus Jakarta Sans',sans-serif}
.about-control-status{position:relative;z-index:1;margin-top:18px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 16px;background:rgba(37,99,235,.08);color:#2563eb;font:700 13px/1 'Plus Jakarta Sans',sans-serif;border:1px solid rgba(37,99,235,.15)}.about-control-status span{width:10px;height:10px;border-radius:50%;background:#4fd1b5;box-shadow:0 0 0 7px rgba(79,209,181,.14)}

/* JOURNEY */
.journey-section{background:radial-gradient(circle at 82% 18%,rgba(125,211,252,.16),transparent 27rem),radial-gradient(circle at 8% 78%,rgba(124,58,237,.11),transparent 25rem),linear-gradient(180deg,#f8fbff,#fbf8ff 52%,#fffaf7)}
.journey-shell{position:relative;z-index:3;width:min(1760px,calc(100vw - 34px));margin:0 auto;padding-left:112px;padding-right:clamp(28px,4vw,72px);display:grid;grid-template-columns:minmax(330px,.58fr) minmax(720px,1.42fr);gap:clamp(50px,6vw,110px);align-items:center}
.journey-heading{align-self:center}.journey-kicker{display:inline-flex;color:#2563eb;font:800 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.22em;margin-bottom:20px}.journey-heading h2{margin:0;font:800 clamp(58px,5.2vw,94px)/.94 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.journey-heading h2 span{color:#2563eb;position:relative}.journey-heading p{max-width:520px;color:#505868;font-size:18px;line-height:1.75;margin:28px 0 0}.journey-legend{display:flex;gap:20px;margin-top:28px;color:#8a8a8a;font:700 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em}.journey-legend span{display:inline-flex;align-items:center;gap:7px}.journey-legend i{width:18px;height:2px;background:#2563eb}.journey-legend span:last-child i{background:#7c3aed}
.journey-canvas{min-height:760px;position:relative}.journey-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.journey-path-base,.journey-path-progress,.journey-branch{fill:none;stroke-linecap:round}.journey-path-base{stroke:rgba(21,24,33,.08);stroke-width:5}.journey-path-progress{stroke:#2563eb;stroke-width:5;stroke-dasharray:2500;stroke-dashoffset:2500}.journey-path-progress.is-visible{animation:journeyDraw 2.4s .1s var(--ease) forwards}.journey-branch{stroke:#7c3aed;stroke-width:3;stroke-dasharray:7 10;opacity:.45}.commit-card{position:absolute;width:min(355px,34vw);z-index:3;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .6s var(--commit-delay) ease,transform .7s var(--commit-delay) var(--ease)}.commit-card.is-visible{opacity:1;transform:none}.commit-node{position:absolute;width:20px;height:20px;border-radius:50%;background:#f8f8f5;border:4px solid var(--commit-color);box-shadow:0 0 0 6px color-mix(in srgb,var(--commit-color) 14%,transparent)}.commit-card-left .commit-node{right:-32px;top:20px}.commit-card-right .commit-node{left:-32px;top:20px}.commit-body{background:rgba(255,255,255,.90);border:1px solid rgba(21,24,33,.08);border-radius:20px;padding:21px;box-shadow:0 18px 50px rgba(21,24,33,.08);backdrop-filter:blur(12px);transition:.25s var(--ease)}.commit-body:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(21,24,33,.13)}.commit-topline{display:flex;justify-content:space-between;color:#959595;font:800 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em;margin-bottom:12px}.commit-topline span{color:var(--commit-color)}.commit-body h3{margin:0 0 7px;font:800 18px/1.2 'Plus Jakarta Sans',sans-serif}.commit-subtitle{display:block;color:#7b8391;font-size:11px;margin-bottom:8px}.commit-body p{margin:0;color:#666;font-size:12.5px;line-height:1.6}.commit-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.commit-meta span{padding:5px 8px;border-radius:999px;color:var(--commit-color);background:color-mix(in srgb,var(--commit-color) 10%,white);font:700 9px/1 'Plus Jakarta Sans',sans-serif}.journey-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}.journey-glow-blue{width:430px;height:430px;background:#7dd3fc33;right:-90px;top:100px}.journey-glow-violet{width:350px;height:350px;background:#7c3aed18;left:-110px;bottom:110px}@keyframes journeyDraw{to{stroke-dashoffset:0}}

/* EXPERIENCE */
.experience-signature{background:radial-gradient(circle at 12% 18%,rgba(37,99,235,.24),transparent 31rem),radial-gradient(circle at 88% 80%,rgba(124,58,237,.20),transparent 33rem),linear-gradient(145deg,#101722,#121926 48%,#0f1420);color:white}
.experience-noise{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.28) .65px,transparent .65px);background-size:24px 24px}
.experience-heading-row{display:grid;grid-template-columns:1.1fr .7fr;gap:60px;align-items:end;margin-bottom:58px}.section-title-dark{max-width:850px;margin:0;font:800 clamp(52px,4.8vw,90px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em;color:white}.experience-intro{margin:0 0 8px;color:#aeb7c7;font-size:18px;line-height:1.7;max-width:560px}.experience-stage{display:grid;grid-template-columns:330px minmax(0,1fr);gap:32px}.experience-rail-item{display:grid;grid-template-columns:55px 1fr;gap:14px;align-items:center;width:100%;padding:22px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);color:#fff;background:linear-gradient(120deg,#1d2d52,#151c29);text-align:left}.experience-number{font:800 24px 'Plus Jakarta Sans',sans-serif;color:#6f96ff}.experience-rail-copy strong{display:block;font:800 14px 'Plus Jakarta Sans',sans-serif}.experience-rail-copy small{display:block;font-size:11px;margin-top:5px;color:#7e8898}.experience-panel{position:relative;min-height:580px;padding:clamp(32px,4vw,58px);border-radius:34px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));box-shadow:0 40px 100px rgba(0,0,0,.28);overflow:hidden}.experience-panel-watermark{position:absolute;right:26px;bottom:-55px;font:900 220px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,.025)}.experience-panel-top{position:relative;display:flex;justify-content:space-between;gap:25px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}.experience-company{display:block;color:#6f96ff;font:800 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.15em;margin-bottom:10px}.experience-panel h3{margin:0;font:800 clamp(30px,2.5vw,47px)/1.08 'Plus Jakarta Sans',sans-serif}.experience-panel-top p{margin:10px 0 0;color:#8c96a7}.experience-period{flex:none;height:max-content;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 16px;font:700 12px 'Plus Jakarta Sans',sans-serif}.experience-description{position:relative;max-width:970px;margin:30px 0 34px;color:#cbd3df;font-size:18px;line-height:1.75}.experience-panel-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px}.experience-mini-title{display:block;color:#6f7a8c;font:800 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.15em;margin-bottom:15px}.experience-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.experience-list li{position:relative;padding-left:23px;color:#dce2eb;font-size:15px;line-height:1.55}.experience-list li::before{content:'↗';position:absolute;left:0;color:#6f96ff}.experience-learned{padding:20px;border-radius:20px;color:#dce2eb;line-height:1.65;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18)}.experience-tech-row{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}.experience-tech-row span{color:#d4ddeb;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 11px;font:700 11px 'Plus Jakarta Sans',sans-serif}

/* EDUCATION */
.education-signature{background:linear-gradient(135deg,#eef4ff,#f4efff 48%,#edfbff)}.education-mesh{position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(124,58,237,.12),transparent 28%),radial-gradient(circle at 8% 82%,rgba(37,99,235,.12),transparent 30%)}.education-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(60px,7vw,130px);align-items:center}.education-title{margin:0 0 24px;max-width:840px;font:800 clamp(54px,5vw,96px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.education-lead{max-width:700px;color:#566174;font-size:19px;line-height:1.72}.education-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px}.education-meta-grid div{min-height:105px;padding:18px 20px;border-radius:20px;border:1px solid rgba(79,82,122,.09);background:rgba(255,255,255,.72)}.education-meta-grid span{display:block;color:#8b93a1;font:800 9px 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em;margin-bottom:8px}.education-meta-grid strong{font:700 14px 'Plus Jakarta Sans',sans-serif}.education-visual{display:flex;justify-content:center}.education-visual-card{position:relative;width:min(610px,90vw);aspect-ratio:1.04;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:48px;color:white;background:linear-gradient(135deg,#2b67eb,#7a54ed 56%,#f46fa0);box-shadow:0 45px 100px rgba(71,72,188,.32);overflow:hidden;transform:rotate(2deg);transition:.45s var(--ease)}.education-visual-card:hover{transform:rotate(0) scale(1.015)}.education-visual-card::before{content:'';position:absolute;inset:18px;border:1px solid rgba(255,255,255,.18);border-radius:37px}.education-visual-code{position:absolute;top:32px;left:34px;font:800 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.17em;color:rgba(255,255,255,.7)}.education-visual-mark{font:900 clamp(100px,10vw,170px)/.8 'Plus Jakarta Sans',sans-serif;letter-spacing:-.09em}.education-visual-card p{margin:28px 0 0;font:700 13px 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,.73)}.education-orbit{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%}.education-orbit-a{width:310px;height:310px;right:-110px;top:-100px}.education-orbit-b{width:190px;height:190px;left:-50px;bottom:-55px}.education-track{margin-top:60px;padding-top:24px;border-top:1px solid rgba(44,53,85,.11)}.education-track-label{display:block;color:#7b8493;font:800 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;margin-bottom:18px}.education-track-items{display:flex;flex-wrap:wrap;gap:10px}.education-track-items span{padding:11px 15px;border-radius:999px;color:#315cca;font:700 12px 'Plus Jakarta Sans',sans-serif;background:rgba(255,255,255,.7);border:1px solid rgba(37,99,235,.12)}

/* TRAINING */
.training-signature{background:linear-gradient(125deg,#fffaf1,#fff8f4 45%,#fff5fa)}.training-heading{display:grid;grid-template-columns:1.1fr .65fr;gap:70px;align-items:end;margin-bottom:52px}.training-heading h2{margin:0;max-width:900px;font:800 clamp(52px,4.7vw,88px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em}.training-heading p{margin:0 0 7px;color:#6e7480;font-size:17px;line-height:1.7;max-width:520px}.training-track{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.training-card{position:relative;min-height:380px;padding:34px;border-radius:30px;background:var(--training-soft);border:1px solid color-mix(in srgb,var(--training-accent) 17%,transparent);box-shadow:0 20px 55px rgba(45,52,78,.09);overflow:hidden;transition:.3s var(--ease)}.training-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(45,52,78,.14)}.training-card-top{display:flex;justify-content:space-between}.training-index{color:var(--training-accent);font:900 46px/1 'Plus Jakarta Sans',sans-serif}.training-date{font:800 12px 'Plus Jakarta Sans',sans-serif}.training-provider{margin-top:55px;color:var(--training-accent);font:800 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em}.training-card h3{margin:12px 0 14px;font:800 clamp(27px,2vw,39px)/1.15 'Plus Jakarta Sans',sans-serif}.training-card p{max-width:850px;color:#626b79;line-height:1.7}.training-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.training-tags span{padding:8px 11px;border-radius:999px;color:var(--training-accent);background:rgba(255,255,255,.62);border:1px solid color-mix(in srgb,var(--training-accent) 14%,transparent);font:700 10px 'Plus Jakarta Sans',sans-serif}.training-corner{position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;bottom:-100px;background:color-mix(in srgb,var(--training-accent) 12%,transparent)}

/* PROJECTS */
.projects-signature{background:radial-gradient(circle at 15% 20%,rgba(79,124,255,.23),transparent 30rem),radial-gradient(circle at 86% 78%,rgba(124,58,237,.20),transparent 32rem),linear-gradient(145deg,#111827,#161c2b 55%,#111624);color:white}.projects-aurora{position:absolute;inset:0;opacity:.18;background:linear-gradient(115deg,transparent 10%,rgba(37,99,235,.25),transparent 55%,rgba(124,58,237,.22),transparent 90%);background-size:200% 100%;animation:aurora 12s linear infinite}@keyframes aurora{to{background-position:200% 0}}.projects-heading-row{display:grid;grid-template-columns:1.1fr .65fr;gap:70px;align-items:end;margin-bottom:52px}.projects-heading-row h2{margin:0;font:800 clamp(56px,5vw,96px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.projects-heading-row p{margin:0 0 8px;color:#9ca7b8;font-size:17px;line-height:1.7}.project-wall{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.project-digital-card{position:relative;border-radius:27px;overflow:hidden;background:#111722;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 75px rgba(0,0,0,.3);transition:.3s var(--ease);transform-style:preserve-3d}.project-digital-card:hover{border-color:color-mix(in srgb,var(--project-accent) 45%,transparent);box-shadow:0 40px 100px rgba(0,0,0,.39)}.project-digital-bar{height:42px;display:flex;align-items:center;gap:13px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.075);color:#718096;font:800 8px 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em}.project-window-dots{display:flex;gap:5px}.project-window-dots i{width:7px;height:7px;border-radius:50%;background:#384052}.project-window-dots i:first-child{background:#ff6b6b}.project-window-dots i:nth-child(2){background:#ffd54a}.project-window-dots i:nth-child(3){background:#4fd1b5}.project-preview{position:relative;height:260px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--project-accent) 26%,#182132),#101722)}.project-digital-wide .project-preview{height:180px}.project-preview-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:28px 28px}.project-preview-emoji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:70px}.project-preview-glow{position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-70px;background:radial-gradient(circle,color-mix(in srgb,var(--project-accent) 55%,transparent),transparent 70%)}.project-preview-label{position:absolute;left:15px;bottom:14px;padding:7px 10px;border-radius:999px;color:white;background:rgba(12,17,28,.56);font:800 8px 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em}.project-digital-copy{padding:25px}.project-digital-title-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.project-digital-copy h3{margin:0;font:800 clamp(22px,2vw,30px) 'Plus Jakarta Sans',sans-serif}.project-featured{color:var(--project-accent);font:800 8px 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em}.project-digital-copy p{color:#9ea9ba;font-size:13px;line-height:1.58;margin:11px 0 15px}.project-digital-tags{display:flex;flex-wrap:wrap;gap:6px}.project-digital-tags span{padding:6px 9px;border-radius:999px;color:color-mix(in srgb,var(--project-accent) 75%,#fff);background:color-mix(in srgb,var(--project-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--project-accent) 20%,transparent);font:700 9px 'Plus Jakarta Sans',sans-serif}.project-digital-links{display:flex;gap:18px;margin-top:20px}.project-digital-links a{color:#fff;text-decoration:none;font:800 11px 'Plus Jakarta Sans',sans-serif}.projects-footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;color:#7f8a9e;font-size:13px}.projects-footer-row a{color:#fff;text-decoration:none;font:800 12px 'Plus Jakarta Sans',sans-serif;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.15)}

/* STACK */
.stack-signature{background:linear-gradient(145deg,#fffdf7,#f4fbff 50%,#fbf6ff)}.stack-bg-text{position:absolute;left:-20px;top:4%;color:rgba(21,24,33,.025);font:900 clamp(180px,20vw,390px)/.75 'Plus Jakarta Sans',sans-serif;letter-spacing:-.09em;pointer-events:none}.stack-heading-row{display:grid;grid-template-columns:1.1fr .6fr;gap:70px;align-items:end;margin-bottom:52px}.stack-heading-row h2{margin:0;max-width:930px;font:800 clamp(56px,5vw,94px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.stack-heading-row p{margin:0 0 8px;max-width:500px;color:#687180;font-size:17px;line-height:1.7}.stack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stack-category-card{position:relative;min-height:270px;padding:28px;border-radius:28px;overflow:hidden;border:1px solid rgba(21,24,33,.08);background:rgba(255,255,255,.78);box-shadow:0 18px 50px rgba(54,67,92,.08);transition:.3s var(--ease);transform-style:preserve-3d}.stack-category-card:hover{transform:translateY(-7px);box-shadow:0 28px 70px color-mix(in srgb,var(--stack-accent) 11%,transparent)}.stack-category-card::before{content:'';position:absolute;width:170px;height:170px;right:-65px;top:-65px;border-radius:50%;background:color-mix(in srgb,var(--stack-accent) 11%,transparent)}.stack-category-big{position:absolute;right:17px;bottom:-18px;color:color-mix(in srgb,var(--stack-accent) 7%,transparent);font:900 clamp(65px,6vw,115px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.08em}.stack-category-head{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:28px}.stack-category-head>span{width:10px;height:10px;border-radius:50%;background:var(--stack-accent)}.stack-category-head strong{font:800 15px 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em}.stack-category-head small{margin-left:auto;padding:6px 9px;border-radius:999px;color:var(--stack-accent);background:color-mix(in srgb,var(--stack-accent) 8%,white);font:800 7px 'Plus Jakarta Sans',sans-serif;text-transform:uppercase}.stack-chip-cloud{position:relative;display:flex;flex-wrap:wrap;gap:9px;max-width:92%}.stack-chip-cloud span{padding:10px 13px;color:var(--stack-accent);background:color-mix(in srgb,var(--stack-accent) 8%,#fff);border:1px solid color-mix(in srgb,var(--stack-accent) 17%,transparent);border-radius:13px;font:700 11px 'Plus Jakarta Sans',sans-serif}

/* LEARNING */
.learning-signature{background:linear-gradient(120deg,#eefdf8,#eef5ff 48%,#f8efff)}.learning-heading h2{margin:0 0 50px;font:800 clamp(56px,5vw,94px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.learning-note{min-height:210px;padding:26px;border-radius:22px;background:rgba(255,255,255,.75);border:1px solid rgba(21,24,33,.07);box-shadow:0 18px 44px rgba(51,63,86,.09);transition:.3s var(--ease)}.learning-note:hover{transform:translateY(-8px);box-shadow:0 26px 58px rgba(51,63,86,.15)}.learning-note>span{color:#7c3aed;font-size:24px}.learning-note h3{font-size:20px;margin:18px 0 10px}.learning-note p{color:#687180;line-height:1.65;font-size:14px}

/* GITHUB */
.github-signature{background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.14),transparent 40%),#171717;color:#fff}.github-shell{text-align:center;max-width:1450px}.github-heading h2{margin:0;font:800 clamp(60px,6vw,108px)/.95 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em}.github-heading h2 em{font-style:normal;color:#2563eb}.github-heading p{max-width:620px;margin:22px auto 50px;color:rgba(255,255,255,.55);line-height:1.7}.github-repos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;text-align:left}.github-repo{padding:28px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.25s ease}.github-repo:hover{transform:translateY(-6px);border-color:rgba(125,211,252,.3)}.github-repo>span{color:#7dd3fc}.github-repo h3{color:#7dd3fc;margin:12px 0 8px}.github-repo p{color:rgba(255,255,255,.55);line-height:1.6}.github-repo div{display:flex;gap:7px;flex-wrap:wrap}.github-repo i{font-style:normal;padding:6px 9px;border-radius:999px;background:rgba(37,99,235,.15);color:#7dd3fc;font-size:11px}.github-cta{margin-top:34px}

/* CONTACT */
.contact-signature{background:radial-gradient(circle at 20% 50%,rgba(37,99,235,.22),transparent 45%),radial-gradient(circle at 80% 20%,rgba(255,107,107,.14),transparent 40%),linear-gradient(135deg,#1e3a8a 0%,#4c1d95 48%,#86198f 100%);color:white}.contact-dot-grid{position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1px);background-size:32px 32px}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(60px,8vw,120px);align-items:center}.contact-badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font:800 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em}.contact-copy h2{margin:20px 0 20px;font:800 clamp(58px,5.5vw,100px)/.97 'Plus Jakarta Sans',sans-serif;letter-spacing:-.055em}.contact-copy h2 em{font-style:normal;color:#7dd3fc}.contact-copy>p{max-width:560px;color:rgba(255,255,255,.65);line-height:1.7}.contact-links{display:grid;gap:12px;margin-top:30px}.contact-links a{display:grid;grid-template-columns:44px 1fr auto;grid-template-areas:'icon small arrow' 'icon strong arrow';gap:3px 13px;align-items:center;padding:15px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:white;text-decoration:none;transition:.2s ease}.contact-links a:hover{transform:translateX(5px);background:rgba(255,255,255,.09)}.contact-links a>span{grid-area:icon;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);font-weight:800}.contact-links small{grid-area:small;color:#7dd3fc;font:800 8px 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em}.contact-links strong{grid-area:strong;font-size:13px}.contact-links i{grid-area:arrow;font-style:normal;color:rgba(255,255,255,.35)}.contact-form{padding:32px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px)}.contact-form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.contact-form label{display:grid;gap:8px;margin-bottom:15px}.contact-form label>span{color:rgba(255,255,255,.58);font:700 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}.contact-form input,.contact-form textarea{width:100%;padding:15px 17px;border-radius:13px;border:1px solid rgba(255,255,255,.12);outline:none;background:rgba(15,22,48,.62);color:white;font-size:16px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(125,211,252,.6)}.contact-form button{width:100%;border:0}.form-note{min-height:18px;color:rgba(255,255,255,.65);font-size:12px}

/* REVEALS / TILT */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .75s var(--ease)}.reveal-left{transform:translateX(-34px)}.reveal-right{transform:translateX(34px)}.reveal.is-visible{opacity:1;transform:none}.tilt-card{will-change:transform}

/* RESPONSIVE */
@media(max-width:1350px) and (min-width:901px){
  .site-shell,.journey-shell{padding-left:100px;padding-right:28px}
  .hero-inner{padding-left:100px;grid-template-columns:minmax(0,1fr) minmax(450px,.85fr)}
  .hero-name{font-size:clamp(72px,7.2vw,110px)}
  .hero-visual-wrap{min-height:600px}
  .about-signature-grid{grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);gap:34px}
  .experience-stage{grid-template-columns:270px 1fr}
}
@media(max-width:1120px) and (min-width:901px){
  .hero-inner,.about-signature-grid,.journey-shell,.experience-heading-row,.experience-stage,.education-layout,.training-heading,.projects-heading-row,.stack-heading-row,.contact-layout{grid-template-columns:1fr}
  .hero-visual-wrap{justify-self:center;width:min(100%,690px)}
  .journey-canvas{min-height:850px}
  .experience-rail{display:none}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .learning-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--section-y:72px}
  .theme-side-nav{display:none}
  .site-shell,.journey-shell{width:min(100% - 30px,820px);padding:0}
  .hero-inner{width:min(100% - 30px,820px);padding:0;grid-template-columns:1fr}
  .hero-name{font-size:clamp(62px,15vw,96px);white-space:normal}
  .hero-visual-wrap{justify-self:center;width:min(100%,650px);min-height:570px}
  .about-signature-grid,.experience-heading-row,.experience-stage,.education-layout,.training-heading,.projects-heading-row,.project-wall,.stack-heading-row,.contact-layout{grid-template-columns:1fr}
  .journey-shell{grid-template-columns:1fr}
  .journey-canvas{min-height:auto;padding-left:36px;display:grid;gap:20px}
  .journey-path{display:none}.journey-canvas::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:3px;background:linear-gradient(#2563eb,#7c3aed,#ff6b6b,#4fd1b5);opacity:.25}
  .commit-card{position:relative!important;left:auto!important;top:auto!important;width:100%}.commit-card .commit-node{left:-36px!important;right:auto!important}
  .experience-rail{display:none}.experience-panel-grid{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:1fr}.learning-grid{grid-template-columns:1fr}.github-repos{grid-template-columns:1fr}
  .contact-form-row{grid-template-columns:1fr}
  .mobile-dock{display:block;position:fixed;z-index:160;left:12px;right:12px;bottom:12px;padding:7px;border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 16px 45px rgba(28,39,67,.18);backdrop-filter:blur(20px)}
  .mobile-dock-scroll{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.mobile-dock a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:14px;color:#737a89;text-decoration:none;font:750 12px/1 'Plus Jakarta Sans',sans-serif}.mobile-dock a.is-active{color:#2563eb;background:rgba(37,99,235,.1)}
  body{padding-bottom:74px}
}
@media(max-width:560px){
  .hero-name{font-size:clamp(54px,16vw,80px)}
  .hero-actions{display:grid}.btn-blue,.btn-ghost{width:100%}
  .hero-visual-wrap{min-height:475px}.hero-portrait-stage{inset:18% 7% 12% 9%}.hero-tech-signal{min-width:82px;padding:9px 10px}.hero-tech-signal span{display:none}
  .about-control-tabs{grid-template-columns:1fr}.about-control-item{grid-template-columns:10px 1fr}.about-control-item span,.about-control-item strong{grid-column:2}
  .education-meta-grid{grid-template-columns:1fr}.education-visual-card{width:100%}
  .experience-panel-top{display:grid}.experience-period{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}


/* ==========================================================
   WOW LAYER — larger scale, denser compositions, richer motion
   ========================================================== */

:root{
  --section-y:clamp(82px,7vh,108px);
}

/* Overall readable scale */
body{font-size:17px;}
.site-shell{width:min(1840px,calc(100vw - 26px));padding-left:126px;padding-right:clamp(28px,3vw,56px);}
.hero-inner{width:min(1860px,calc(100vw - 26px));padding-left:126px;padding-right:clamp(24px,3vw,52px);}

/* ---------- GLOBAL FX ---------- */
.global-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.fx-orb,.fx-bubble,.fx-ray,.fx-cursor-glow{position:absolute;pointer-events:none;}
.fx-orb{border-radius:50%;filter:blur(95px);opacity:.13;animation:fxOrb 18s ease-in-out infinite alternate;}
.fx-orb-a{width:520px;height:520px;background:#2563eb;left:-150px;top:12%;}
.fx-orb-b{width:460px;height:460px;background:#7c3aed;right:-120px;top:42%;animation-delay:-8s;}
.fx-orb-c{width:400px;height:400px;background:#ff78b7;left:42%;bottom:-160px;animation-delay:-13s;}
@keyframes fxOrb{to{transform:translate3d(80px,-45px,0) scale(1.12)}}

.fx-bubble{border-radius:50%;border:1px solid rgba(37,99,235,.13);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(125,211,252,.05));backdrop-filter:blur(3px);animation:fxBubble 14s ease-in-out infinite alternate;}
.fx-bubble-1{width:48px;height:48px;left:7%;top:17%;}
.fx-bubble-2{width:22px;height:22px;left:29%;top:72%;animation-delay:-5s;border-color:rgba(124,58,237,.16);}
.fx-bubble-3{width:68px;height:68px;right:12%;top:24%;animation-delay:-9s;border-color:rgba(255,120,183,.16);}
.fx-bubble-4{width:30px;height:30px;right:32%;bottom:14%;animation-delay:-3s;border-color:rgba(79,209,181,.18);}
.fx-bubble-5{width:17px;height:17px;left:57%;top:11%;animation-delay:-11s;}
@keyframes fxBubble{from{transform:translate3d(-10px,20px,0) rotate(0);opacity:.25}to{transform:translate3d(35px,-45px,0) rotate(35deg);opacity:.7}}

.fx-ray{width:42vw;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.2),rgba(124,58,237,.18),transparent);animation:fxRay 16s linear infinite;}
.fx-ray-a{top:27%;left:-45vw;transform:rotate(-4deg);}
.fx-ray-b{top:68%;left:-55vw;transform:rotate(5deg);animation-delay:-7s;}
@keyframes fxRay{to{translate:160vw 0}}

.fx-cursor-glow{width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.08),rgba(124,58,237,.035) 42%,transparent 70%);opacity:0;transition:opacity .25s ease;}

/* ---------- NAV bigger ---------- */
.theme-side-nav{width:88px;height:112px;border-radius:28px;}
.theme-side-nav.is-open,.theme-side-nav:focus-within{width:264px;height:min(686px,calc(100vh - 24px));}
.theme-side-nav-brand{width:62px;height:62px;flex-basis:62px;border-radius:19px;font-size:14px;}
.theme-side-nav-head{height:62px;}
.theme-side-nav-name{font-size:16px;}
.theme-side-nav-link{height:46px;}
.theme-side-nav-link strong{font-size:14px;}
.theme-side-nav-collapsed-label{font-size:8px;bottom:8px;}

/* ---------- HERO larger ---------- */
.hero-shell{padding-bottom:92px;}
.hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(640px,.92fr);gap:clamp(50px,4vw,86px);}
.hero-copy{max-width:970px;}
.hero-name{font-size:clamp(104px,8.6vw,172px);margin-bottom:28px;}
.hero-role{font-size:clamp(18px,1.25vw,23px);padding:13px 25px;}
.hero-stackline{font-size:clamp(19px,1.35vw,23px);}
.hero-intro{font-size:clamp(20px,1.35vw,24px);max-width:820px;}
.hero-socials a{font-size:16px;}
.hero-visual-wrap{width:min(100%,870px);min-height:760px;}
.hero-status-card{padding:16px 18px;}
.hero-status-values span{font-size:11px;}
.hero-tech-signal{min-width:126px;padding:14px 16px;}
.hero-tech-signal strong{font-size:17px;}
.hero-tech-signal span{font-size:10.5px;}
.hero-code-ribbon{position:absolute;z-index:4;padding:8px 12px;border-radius:999px;color:#7a8392;background:rgba(255,255,255,.64);border:1px solid rgba(37,99,235,.09);font:800 8px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em;backdrop-filter:blur(8px);animation:ribbonFloat 7s ease-in-out infinite alternate;}
.hero-code-ribbon-a{left:12%;top:5%;transform:rotate(-4deg);}
.hero-code-ribbon-b{right:6%;bottom:4%;transform:rotate(4deg);animation-delay:-3s;}
@keyframes ribbonFloat{to{translate:12px -10px}}
.hero-marquee{position:absolute;left:0;right:0;bottom:0;height:38px;overflow:hidden;border-top:1px solid rgba(37,99,235,.08);border-bottom:1px solid rgba(124,58,237,.06);background:rgba(255,255,255,.32);backdrop-filter:blur(8px);}
.hero-marquee-track{width:max-content;height:100%;display:flex;align-items:center;gap:22px;white-space:nowrap;animation:marquee 26s linear infinite;color:#737d8c;font:800 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;}
.hero-marquee-track i{font-style:normal;color:#7c3aed;}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero-scroll-cue{bottom:52px;}

/* ---------- ABOUT more filled ---------- */
.about-signature-grid{grid-template-columns:minmax(0,1.08fr) minmax(540px,.92fr);gap:clamp(54px,5vw,92px);}
.about-mega-title{font-size:clamp(70px,6vw,112px);max-width:11.5ch;}
.about-lead{font-size:clamp(21px,1.5vw,29px);}
.about-copy{font-size:clamp(17px,1.15vw,21px);}
.about-control-panel{padding:36px;min-height:520px;}
.about-control-avatar{width:62px;height:62px;font-size:17px;}
.about-control-name{font-size:23px;}
.about-control-role{font-size:14px;}
.about-control-item{padding:18px 18px;grid-template-columns:14px 116px minmax(0,1fr);}
.about-control-item span{font-size:10.5px;}
.about-control-item strong{font-size:16px;}
.section-watermark{position:absolute;pointer-events:none;font:900 clamp(150px,16vw,310px)/.8 'Plus Jakarta Sans',sans-serif;letter-spacing:-.08em;color:rgba(21,24,33,.024);}
.about-watermark{left:-15px;bottom:4%;}
.about-float-tags{position:absolute;right:7%;top:7%;z-index:4;display:flex;gap:8px;transform:rotate(3deg);}
.about-float-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(37,99,235,.1);color:#6f78a1;font:800 8px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em;animation:tagBob 5s ease-in-out infinite alternate;}
.about-float-tags span:nth-child(2){animation-delay:-1s}.about-float-tags span:nth-child(3){animation-delay:-2s}.about-float-tags span:nth-child(4){animation-delay:-3s}.about-float-tags span:nth-child(5){animation-delay:-4s}
@keyframes tagBob{to{transform:translateY(-8px)}}

/* ---------- JOURNEY larger ---------- */
.journey-shell{width:min(1840px,calc(100vw - 26px));padding-left:126px;padding-right:50px;grid-template-columns:minmax(390px,.62fr) minmax(820px,1.38fr);gap:clamp(56px,6vw,120px);}
.journey-heading h2{font-size:clamp(70px,6vw,108px);}
.journey-heading p{font-size:20px;max-width:560px;}
.journey-canvas{min-height:820px;}
.commit-card{width:min(390px,35vw);}
.commit-body{padding:24px;}
.commit-body h3{font-size:20px;}
.commit-subtitle{font-size:12px;}
.commit-body p{font-size:13.5px;}
.journey-runner{fill:#fff;stroke:#2563eb;stroke-width:3;filter:drop-shadow(0 0 8px rgba(37,99,235,.55))}
.journey-runner-b{stroke:#7c3aed;fill:#fff;}

/* ---------- EXPERIENCE fuller ---------- */
.experience-heading-row{margin-bottom:66px;}
.section-title-dark{font-size:clamp(64px,5.4vw,102px);}
.experience-intro{font-size:20px;}
.experience-stage{grid-template-columns:360px minmax(0,1fr);}
.experience-panel{min-height:650px;padding:clamp(40px,4vw,64px);}
.experience-panel h3{font-size:clamp(36px,2.8vw,54px);}
.experience-description{font-size:20px;max-width:1080px;}
.experience-list li{font-size:16px;}
.experience-learned{font-size:16px;}
.experience-kinetic{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:22px;white-space:nowrap;width:max-content;color:rgba(255,255,255,.035);font:900 clamp(44px,4vw,70px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;animation:kinetic 28s linear infinite;}
.experience-kinetic i{font-style:normal;color:rgba(111,150,255,.08);}
@keyframes kinetic{to{transform:translateX(-45%)}}

/* ---------- EDUCATION fuller ---------- */
.education-layout{grid-template-columns:1.08fr .92fr;}
.education-title{font-size:clamp(66px,5.6vw,108px);}
.education-lead{font-size:21px;}
.education-meta-grid div{min-height:120px;padding:20px 22px;}
.education-meta-grid strong{font-size:15px;}
.education-visual-card{width:min(680px,94vw);}
.education-visual-mark{font-size:clamp(120px,12vw,190px);}
.education-watermark{right:-30px;bottom:5%;}

/* ---------- TRAINING fuller ---------- */
.training-heading h2{font-size:clamp(64px,5.5vw,104px);}
.training-heading p{font-size:19px;}
.training-card{min-height:440px;padding:42px;}
.training-index{font-size:58px;}
.training-card h3{font-size:clamp(32px,2.4vw,46px);}
.training-card p{font-size:17px;max-width:980px;}
.training-tags span{font-size:11px;padding:9px 12px;}
.training-ticker{position:absolute;left:0;right:0;top:18px;overflow:hidden;opacity:.10;pointer-events:none;}
.training-ticker>div{display:flex;gap:22px;width:max-content;white-space:nowrap;animation:trainingTicker 22s linear infinite;color:#d08324;font:900 clamp(32px,3vw,56px)/1 'Plus Jakarta Sans',sans-serif;}
.training-ticker i{font-style:normal;color:#ff78b7;}
@keyframes trainingTicker{to{transform:translateX(-50%)}}

/* ---------- PROJECTS fuller ---------- */
.projects-heading-row h2{font-size:clamp(68px,5.8vw,108px);}
.projects-heading-row p{font-size:19px;}
.project-wall{grid-template-columns:1.18fr .82fr;gap:22px;}
.project-preview{height:320px;}
.project-digital-wide .project-preview{height:230px;}
.project-digital-copy{padding:30px;}
.project-digital-copy h3{font-size:clamp(26px,2.2vw,36px);}
.project-digital-copy p{font-size:15px;line-height:1.65;}
.project-digital-tags span{font-size:10px;padding:7px 10px;}
.projects-code-rain{position:absolute;left:1.5%;top:22%;display:grid;gap:20px;z-index:1;color:rgba(125,211,252,.16);font:900 18px/1 'Plus Jakarta Sans',sans-serif;animation:codeFloat 8s ease-in-out infinite alternate;}
.projects-code-rain span:nth-child(even){color:rgba(255,120,183,.12);margin-left:20px}
@keyframes codeFloat{to{transform:translateY(36px)}}

/* ---------- STACK larger ---------- */
.stack-heading-row h2{font-size:clamp(68px,5.8vw,110px);}
.stack-heading-row p{font-size:19px;}
.stack-grid{gap:20px;}
.stack-category-card{min-height:330px;padding:34px;}
.stack-category-head strong{font-size:17px;}
.stack-category-head small{font-size:8px;padding:7px 10px;}
.stack-chip-cloud{gap:11px;}
.stack-chip-cloud span{padding:12px 15px;font-size:12px;}
.stack-category-big{font-size:clamp(78px,6.7vw,132px);}
.stack-orbit-dots span{position:absolute;width:12px;height:12px;border-radius:50%;background:#2563eb22;animation:orbitDot 9s ease-in-out infinite alternate;}
.stack-orbit-dots span:nth-child(1){left:8%;top:22%}.stack-orbit-dots span:nth-child(2){left:92%;top:32%;background:#ff78b733;animation-delay:-2s}.stack-orbit-dots span:nth-child(3){left:17%;top:82%;background:#4fd1b533;animation-delay:-4s}.stack-orbit-dots span:nth-child(4){left:75%;top:78%;background:#7c3aed33;animation-delay:-6s}.stack-orbit-dots span:nth-child(5){left:54%;top:13%;background:#ffd54a55;animation-delay:-8s}
@keyframes orbitDot{to{transform:translate3d(24px,-28px,0) scale(1.6)}}

/* ---------- LEARNING becomes 2x2 and fills screen ---------- */
.learning-heading h2{font-size:clamp(68px,5.8vw,110px);margin-bottom:58px;}
.learning-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.learning-note{min-height:290px;padding:34px;border-radius:28px;display:flex;flex-direction:column;}
.learning-note-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;}
.learning-note-top>span{color:#7c3aed;font:900 28px/1 'Plus Jakarta Sans',sans-serif;}
.learning-note-top strong{padding:8px 12px;border-radius:999px;background:rgba(124,58,237,.08);color:#7c3aed;font:800 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.1em;}
.learning-note h3{font-size:clamp(24px,2vw,34px);margin:0 0 14px;}
.learning-note p{font-size:16px;line-height:1.7;max-width:560px;}
.learning-note-line{height:1px;background:linear-gradient(90deg,rgba(124,58,237,.35),transparent);margin-top:auto;margin-bottom:16px;}
.learning-note-line i{display:block;width:70px;height:2px;background:#7c3aed;animation:linePulse 3s ease-in-out infinite alternate;}
.learning-note small{color:#8a92a1;font:800 9px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;}
@keyframes linePulse{to{width:55%}}

/* ---------- GITHUB more alive ---------- */
.github-heading h2{font-size:clamp(72px,6.5vw,120px);}
.github-heading p{font-size:18px;}
.github-repo{padding:34px;min-height:240px;}
.github-repo h3{font-size:24px;}
.github-repo p{font-size:15px;}
.github-grid-fx{position:absolute;inset:0;opacity:.09;background-image:linear-gradient(rgba(125,211,252,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.3) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle,#000 15%,transparent 68%);}
.github-stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 12px #7dd3fc;animation:starBlink 3s ease-in-out infinite alternate;}
.github-stars i:nth-child(1){left:9%;top:18%}.github-stars i:nth-child(2){left:24%;top:78%;animation-delay:-1s}.github-stars i:nth-child(3){left:64%;top:14%;animation-delay:-2s}.github-stars i:nth-child(4){left:84%;top:69%;animation-delay:-.7s}.github-stars i:nth-child(5){left:75%;top:36%;animation-delay:-1.7s}.github-stars i:nth-child(6){left:42%;top:86%;animation-delay:-2.4s}
@keyframes starBlink{to{opacity:.15;transform:scale(.55)}}

/* ---------- CONTACT larger ---------- */
.contact-copy h2{font-size:clamp(70px,6vw,116px);}
.contact-copy>p{font-size:18px;}
.contact-links a{padding:17px;}
.contact-links strong{font-size:14px;}
.contact-form{padding:38px;border-radius:28px;}
.contact-form input,.contact-form textarea{padding:17px 18px;}
.contact-bubble{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);backdrop-filter:blur(3px);animation:contactBubble 12s ease-in-out infinite alternate;}
.contact-bubble-a{width:180px;height:180px;right:5%;top:12%}.contact-bubble-b{width:90px;height:90px;left:8%;bottom:11%;animation-delay:-5s}.contact-bubble-c{width:45px;height:45px;left:45%;top:12%;animation-delay:-8s}
@keyframes contactBubble{to{transform:translate3d(30px,-30px,0) scale(1.08)}}

/* Responsive keep strong scale */
@media(max-width:1450px) and (min-width:1121px){
  .site-shell,.journey-shell{padding-left:110px;}
  .hero-inner{padding-left:110px;grid-template-columns:minmax(0,1fr) minmax(500px,.86fr)}
  .hero-name{font-size:clamp(84px,7.6vw,126px)}
  .hero-visual-wrap{min-height:650px}
  .about-signature-grid{grid-template-columns:minmax(0,1fr) minmax(450px,.84fr)}
  .about-mega-title{font-size:clamp(62px,5.4vw,90px)}
  .journey-shell{grid-template-columns:minmax(330px,.55fr) minmax(700px,1.45fr)}
  .journey-canvas{min-height:760px}
}
@media(max-width:1120px) and (min-width:901px){
  .site-shell,.journey-shell,.hero-inner{padding-left:104px}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .learning-grid{grid-template-columns:repeat(2,1fr)}
  .experience-stage{grid-template-columns:1fr}
  .experience-rail{display:none}
}
@media(max-width:900px){
  .site-shell,.journey-shell,.hero-inner{padding:0}
  .learning-grid{grid-template-columns:1fr}
  .global-fx{opacity:.65}
  .hero-marquee{display:none}
  .hero-code-ribbon{display:none}
  .about-float-tags{display:none}
}
@media(max-width:560px){
  .learning-note{min-height:240px;padding:25px}
  .contact-copy h2{font-size:clamp(56px,14vw,78px)}
}


/* ============================================================
   JOURNEY FULLSCREEN — reference-inspired full-viewport density
   ============================================================ */

.journey-full {
    min-height: 100svh;
    padding-top: clamp(60px, 6vh, 78px);
    padding-bottom: clamp(72px, 7vh, 96px);
    background:
        radial-gradient(circle at 78% 17%, rgba(125, 211, 252, .23), transparent 30rem),
        radial-gradient(circle at 9% 82%, rgba(124, 58, 237, .14), transparent 28rem),
        radial-gradient(circle at 53% 63%, rgba(255, 120, 183, .09), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #fbf8ff 50%, #fff9f5 100%);
}

.journey-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 92%, transparent 100%);
}

.journey-big-type {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    font: 900 clamp(180px, 20vw, 380px)/.78 "Plus Jakarta Sans", sans-serif;
    letter-spacing: -.1em;
    color: rgba(21, 24, 33, .022);
    user-select: none;
}

.journey-big-type-a {
    left: -36px;
    top: 4%;
}

.journey-big-type-b {
    right: -55px;
    bottom: 2%;
    color: rgba(37, 99, 235, .026);
}

.journey-glow-mint {
    width: 320px;
    height: 320px;
    background: rgba(79, 209, 181, .11);
    right: 28%;
    bottom: 2%;
}

.journey-shell-full {
    width: min(1940px, calc(100vw - 18px));
    padding-left: 118px;
    padding-right: 34px;
    grid-template-columns: minmax(430px, .60fr) minmax(1000px, 1.40fr);
    gap: clamp(50px, 4.6vw, 88px);
    align-items: center;
}

.journey-shell-full .journey-heading {
    align-self: center;
    padding-left: clamp(8px, 1vw, 20px);
}

.journey-shell-full .journey-kicker {
    font-size: 13px;
    margin-bottom: 22px;
}

.journey-shell-full .journey-heading h2 {
    font-size: clamp(82px, 6.8vw, 124px);
    line-height: .90;
    max-width: 5.3ch;
}

.journey-shell-full .journey-heading p {
    font-size: clamp(19px, 1.22vw, 22px);
    max-width: 620px;
    line-height: 1.72;
    margin-top: 30px;
}

.journey-shell-full .journey-legend {
    margin-top: 25px;
    font-size: 11px;
}

.journey-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 30px;
    max-width: 610px;
}

.journey-stats > div {
    min-height: 88px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(37,99,235,.09);
    box-shadow: 0 12px 32px rgba(37,49,77,.07);
    backdrop-filter: blur(10px);
}

.journey-stats strong {
    display: block;
    margin-bottom: 6px;
    color: #1b2232;
    font: 900 22px/1 "Plus Jakarta Sans", sans-serif;
}

.journey-stats span {
    color: #8c93a1;
    font: 800 8px/1.2 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .12em;
}

.journey-canvas-full {
    min-height: 860px;
    width: 100%;
}

.journey-path-full {
    inset: -1% -1% 0;
    width: 102%;
    height: 102%;
}

.commit-card-xl {
    width: min(420px, 38vw);
}

.commit-card-xl .commit-body {
    padding: 25px 27px;
    border-radius: 23px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 20px 50px rgba(39,51,76,.10),
        0 6px 18px rgba(37,99,235,.04);
}

.commit-card-xl .commit-topline {
    font-size: 10px;
    margin-bottom: 13px;
}

.commit-card-xl .commit-body h3 {
    font-size: clamp(20px, 1.35vw, 25px);
    margin-bottom: 8px;
}

.commit-card-xl .commit-subtitle {
    font-size: 12.5px;
    margin-bottom: 9px;
}

.commit-card-xl .commit-body p {
    font-size: 14px;
    line-height: 1.62;
}

.commit-card-xl .commit-meta {
    margin-top: 16px;
}

.commit-card-xl .commit-meta span {
    font-size: 9.5px;
    padding: 6px 9px;
}

.journey-side-note {
    position: absolute;
    z-index: 5;
    min-width: 150px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(37,99,235,.09);
    box-shadow: 0 15px 32px rgba(37,49,77,.07);
    backdrop-filter: blur(10px);
    animation: journeySideBob 7s ease-in-out infinite alternate;
}

.journey-side-note span,
.journey-side-note strong {
    display: block;
}

.journey-side-note span {
    color: #9aa1ad;
    font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .13em;
}

.journey-side-note strong {
    margin-top: 5px;
    color: #273044;
    font: 800 11px/1.2 "Plus Jakarta Sans", sans-serif;
}

.journey-side-note-a {
    left: 2.3%;
    top: 20%;
    transform: rotate(-5deg);
}

.journey-side-note-b {
    right: 1.8%;
    top: 13%;
    transform: rotate(4deg);
    animation-delay: -3s;
}

@keyframes journeySideBob {
    to { translate: 0 -10px; }
}

.journey-code-card {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(21,24,33,.08);
    box-shadow: 0 20px 50px rgba(23,34,58,.09);
    backdrop-filter: blur(12px);
}

.journey-code-card-a {
    width: 270px;
    right: 0;
    top: 4%;
    overflow: hidden;
    border-radius: 18px;
    color: rgba(255,255,255,.85);
    background: linear-gradient(145deg, #141b27, #202a3c);
    transform: rotate(3deg);
}

.journey-code-top {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.journey-code-top > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b6b;
}

.journey-code-top > span:nth-child(2) { background: #ffd54a; }
.journey-code-top > span:nth-child(3) { background: #4fd1b5; }

.journey-code-top small {
    margin-left: auto;
    color: rgba(255,255,255,.36);
    font: 700 8px/1 "Plus Jakarta Sans", sans-serif;
}

.journey-code-card-a pre {
    margin: 0;
    padding: 15px 17px 18px;
    font: 600 10px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #cbd5e1;
}

.journey-code-card-a code {
    font: inherit;
}

.journey-code-card-b {
    left: 1%;
    bottom: 1%;
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 15px;
    background: rgba(255,255,255,.82);
    transform: rotate(-4deg);
}

.journey-code-card-b > span,
.journey-code-card-b > strong,
.journey-code-card-b > small {
    display: block;
}

.journey-code-card-b > span {
    color: #8f97a6;
    font: 800 7px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .12em;
}

.journey-code-card-b > strong {
    margin: 6px 0;
    color: #1c2433;
    font: 800 11px/1.2 "Plus Jakarta Sans", sans-serif;
}

.journey-code-card-b > small {
    color: #19a77e;
    font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
}

.journey-floating-tag {
    position: absolute;
    z-index: 5;
    padding: 7px 10px;
    border-radius: 999px;
    color: #4c5a72;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(37,99,235,.10);
    box-shadow: 0 10px 24px rgba(38,49,74,.07);
    font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .09em;
    animation: journeyFloatTag 6s ease-in-out infinite alternate;
}

.journey-floating-tag-a { left: 42%; top: 5%; }
.journey-floating-tag-b { right: 6%; top: 45%; animation-delay: -2s; }
.journey-floating-tag-c { left: 5%; top: 44%; animation-delay: -4s; }
.journey-floating-tag-d { right: 4%; bottom: 13%; animation-delay: -5s; }

@keyframes journeyFloatTag {
    to { transform: translateY(-12px) rotate(3deg); }
}

.journey-bottom-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    overflow: hidden;
    border-top: 1px solid rgba(37,99,235,.08);
    background: rgba(255,255,255,.34);
    backdrop-filter: blur(8px);
}

.journey-bottom-strip > div {
    width: max-content;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    color: #7b8595;
    font: 900 8px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .14em;
    animation: journeyTicker 24s linear infinite;
}

.journey-bottom-strip i {
    font-style: normal;
    color: #7c3aed;
}

@keyframes journeyTicker {
    to { transform: translateX(-50%); }
}

/* make the page feel full even on huge 1920+ screens */
@media (min-width: 1600px) {
    .journey-shell-full {
        grid-template-columns: minmax(470px, .62fr) minmax(1120px, 1.38fr);
        gap: 72px;
    }

    .journey-canvas-full {
        min-height: 900px;
    }

    .commit-card-xl {
        width: 435px;
    }
}

@media (max-width: 1450px) and (min-width: 1121px) {
    .journey-shell-full {
        padding-left: 110px;
        grid-template-columns: minmax(360px, .57fr) minmax(760px, 1.43fr);
        gap: 46px;
    }

    .journey-shell-full .journey-heading h2 {
        font-size: clamp(70px, 6.2vw, 96px);
    }

    .journey-canvas-full {
        min-height: 780px;
    }

    .commit-card-xl {
        width: min(360px, 34vw);
    }

    .journey-code-card-a {
        width: 230px;
    }
}

@media (max-width: 1120px) and (min-width: 901px) {
    .journey-shell-full {
        grid-template-columns: 1fr;
        padding-left: 104px;
        padding-right: 26px;
    }

    .journey-shell-full .journey-heading h2 {
        max-width: 8ch;
    }

    .journey-canvas-full {
        min-height: 930px;
    }

    .journey-side-note {
        display: none;
    }
}

@media (max-width: 900px) {
    .journey-big-type,
    .journey-side-note,
    .journey-code-card,
    .journey-floating-tag,
    .journey-bottom-strip {
        display: none;
    }

    .journey-shell-full {
        width: min(100% - 30px, 820px);
        padding: 0;
    }

    .journey-stats {
        grid-template-columns: 1fr;
    }

    .journey-canvas-full {
        min-height: auto;
    }

    .commit-card-xl {
        width: 100%;
    }
}


/* ======================================================================
   FULLSCREEN WOW — FINAL DESKTOP DENSITY LAYER
   Goal: monitor/laptop screens should feel occupied, not centered-and-empty.
   ====================================================================== */

@media (min-width: 1121px) {
    :root {
        --section-y: clamp(54px, 5.4vh, 76px);
    }

    .theme-section {
        min-height: 100svh;
    }

    .site-shell,
    .journey-shell,
    .hero-inner {
        width: calc(100vw - 14px) !important;
        max-width: none !important;
        padding-left: 132px !important;
        padding-right: clamp(34px, 3.3vw, 66px) !important;
    }

    /* Turn each section into a real screen composition. */
    .about-signature > .site-shell,
    .experience-signature > .site-shell,
    .education-signature > .site-shell,
    .training-signature > .site-shell,
    .projects-signature > .site-shell,
    .stack-signature > .site-shell,
    .learning-signature > .site-shell,
    .github-signature > .site-shell,
    .contact-signature > .site-shell {
        min-height: calc(100svh - 120px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ---------- HERO ---------- */
    .hero-fullscreen {
        min-height: 100svh;
        padding-top: 52px;
        padding-bottom: 72px;
    }

    .hero-inner {
        min-height: calc(100svh - 145px);
        grid-template-columns: minmax(0, 1.03fr) minmax(690px, .97fr) !important;
        gap: clamp(38px, 3vw, 66px) !important;
        align-items: center;
    }

    .hero-copy {
        max-width: 1080px;
        padding-left: clamp(35px, 4vw, 84px);
    }

    .hero-name {
        font-size: clamp(118px, 9.5vw, 194px) !important;
        line-height: .84;
    }

    .hero-role {
        font-size: clamp(19px, 1.35vw, 25px);
    }

    .hero-stackline {
        font-size: clamp(20px, 1.4vw, 25px);
    }

    .hero-intro {
        max-width: 900px;
        font-size: clamp(20px, 1.42vw, 26px);
    }

    .hero-actions .btn-blue,
    .hero-actions .btn-ghost {
        min-height: 58px;
        padding-inline: 34px;
        font-size: 16px;
    }

    .hero-visual-wrap {
        width: min(100%, 940px);
        min-height: 800px;
        justify-self: center;
    }

    .hero-portrait-stage {
        inset: 11% 8% 7% 14%;
    }

    .hero-portrait-meta strong {
        font-size: 18px;
    }

    .hero-tech-signal {
        min-width: 138px;
        padding: 15px 18px;
    }

    .hero-tech-signal strong {
        font-size: 18px;
    }

    .hero-watermark {
        position: absolute;
        left: -24px;
        bottom: 8%;
        color: rgba(21,24,33,.025);
        font: 900 clamp(170px, 18vw, 350px)/.75 "Plus Jakarta Sans", sans-serif;
        letter-spacing: -.09em;
        pointer-events: none;
        user-select: none;
    }

    .hero-dashboard-float {
        position: absolute;
        z-index: 7;
        min-width: 190px;
        padding: 13px 15px;
        border-radius: 16px;
        border: 1px solid rgba(37,99,235,.10);
        background: rgba(255,255,255,.72);
        box-shadow: 0 18px 42px rgba(42,54,82,.09);
        backdrop-filter: blur(12px);
        animation: dashboardBob 7s ease-in-out infinite alternate;
    }

    .hero-dashboard-float small,
    .hero-dashboard-float strong,
    .hero-dashboard-float span {
        display: block;
    }

    .hero-dashboard-float small {
        color: #9aa2af;
        font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .13em;
    }

    .hero-dashboard-float strong {
        margin: 6px 0;
        color: #1b2230;
        font: 800 13px/1.1 "Plus Jakarta Sans", sans-serif;
    }

    .hero-dashboard-float span {
        color: #6f7887;
        font-size: 10px;
    }

    .hero-dashboard-float-a {
        left: 8.4%;
        top: 16%;
        transform: rotate(-4deg);
    }

    .hero-dashboard-float-b {
        right: 2.4%;
        top: 9%;
        transform: rotate(4deg);
        animation-delay: -3s;
    }

    @keyframes dashboardBob {
        to { translate: 0 -10px; }
    }

    .hero-bottom-metrics {
        position: absolute;
        z-index: 7;
        left: 11.5%;
        bottom: 59px;
        width: min(650px, 40vw);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
    }

    .hero-bottom-metrics > div {
        min-height: 75px;
        padding: 12px 14px;
        border-radius: 15px;
        background: rgba(255,255,255,.62);
        border: 1px solid rgba(37,99,235,.08);
        backdrop-filter: blur(10px);
    }

    .hero-bottom-metrics span,
    .hero-bottom-metrics strong,
    .hero-bottom-metrics small {
        display: block;
    }

    .hero-bottom-metrics span {
        color: #2563eb;
        font: 900 9px/1 "Plus Jakarta Sans", sans-serif;
    }

    .hero-bottom-metrics strong {
        margin-top: 8px;
        color: #1a2130;
        font: 800 13px/1 "Plus Jakarta Sans", sans-serif;
    }

    .hero-bottom-metrics small {
        margin-top: 5px;
        color: #939baa;
        font: 800 7px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .11em;
    }

    /* ---------- ABOUT ---------- */
    .about-signature-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(590px, .88fr) !important;
        gap: clamp(48px, 4vw, 78px) !important;
    }

    .about-mega-title {
        font-size: clamp(76px, 6.4vw, 124px) !important;
        max-width: 11ch;
    }

    .about-lead {
        max-width: 880px;
        font-size: clamp(22px, 1.55vw, 30px);
    }

    .about-copy {
        max-width: 850px;
        font-size: clamp(18px, 1.18vw, 22px);
    }

    .about-control-panel {
        min-height: 565px;
        padding: 38px;
    }

    .about-bottom-deck {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 13px;
        margin-top: 34px;
    }

    .about-bottom-deck article {
        min-height: 135px;
        padding: 19px;
        border-radius: 20px;
        background: rgba(255,255,255,.67);
        border: 1px solid rgba(37,99,235,.075);
        box-shadow: 0 15px 36px rgba(38,50,76,.065);
    }

    .about-bottom-deck span {
        color: #2563eb;
        font: 900 9px/1 "Plus Jakarta Sans", sans-serif;
    }

    .about-bottom-deck strong {
        display: block;
        margin: 10px 0 8px;
        font: 800 17px/1 "Plus Jakarta Sans", sans-serif;
    }

    .about-bottom-deck p {
        margin: 0;
        color: #687180;
        font-size: 12px;
        line-height: 1.55;
    }

    /* ---------- JOURNEY ---------- */
    .journey-shell-full {
        min-height: calc(100svh - 110px);
        grid-template-columns: minmax(500px, .64fr) minmax(1120px, 1.36fr) !important;
        gap: 58px !important;
    }

    .journey-shell-full .journey-heading h2 {
        font-size: clamp(92px, 7.2vw, 136px) !important;
    }

    .journey-canvas-full {
        min-height: 900px !important;
    }

    .commit-card-xl {
        width: 440px !important;
    }

    /* ---------- EXPERIENCE ---------- */
    .experience-heading-row {
        grid-template-columns: 1.08fr .72fr;
        gap: 80px;
        margin-bottom: 44px;
    }

    .section-title-dark {
        font-size: clamp(72px, 5.8vw, 112px);
    }

    .experience-intro {
        font-size: 21px;
        max-width: 650px;
    }

    .experience-stage {
        grid-template-columns: 390px minmax(0, 1fr);
        gap: 35px;
    }

    .experience-panel {
        min-height: 610px;
    }

    .experience-rail-item {
        min-height: 108px;
    }

    .experience-side-code {
        position: absolute;
        right: 25px;
        top: 17%;
        display: grid;
        gap: 12px;
        z-index: 2;
    }

    .experience-side-code span {
        padding: 8px 11px;
        border-radius: 9px;
        color: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.06);
        font: 900 9px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .13em;
    }

    /* ---------- EDUCATION ---------- */
    .education-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(650px, .95fr);
        gap: 72px;
    }

    .education-title {
        font-size: clamp(76px, 6.2vw, 120px);
        max-width: 980px;
    }

    .education-lead {
        max-width: 830px;
        font-size: 22px;
    }

    .education-meta-grid div {
        min-height: 135px;
        padding: 24px;
    }

    .education-meta-grid strong {
        font-size: 16px;
    }

    .education-visual-card {
        width: min(760px, 100%);
    }

    .education-floating-modules {
        position: absolute;
        right: 3%;
        bottom: 7%;
        display: flex;
        gap: 8px;
        z-index: 4;
        transform: rotate(-2deg);
    }

    .education-floating-modules span {
        padding: 8px 11px;
        border-radius: 999px;
        color: #4761bf;
        background: rgba(255,255,255,.66);
        border: 1px solid rgba(37,99,235,.10);
        font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .1em;
        animation: moduleBob 5s ease-in-out infinite alternate;
    }

    .education-floating-modules span:nth-child(2) { animation-delay: -1s; }
    .education-floating-modules span:nth-child(3) { animation-delay: -2s; }
    .education-floating-modules span:nth-child(4) { animation-delay: -3s; }

    @keyframes moduleBob {
        to { translate: 0 -8px; }
    }

    /* ---------- BOOTCAMP ---------- */
    .training-heading h2 {
        font-size: clamp(72px, 5.8vw, 112px);
    }

    .training-heading p {
        font-size: 21px;
    }

    .training-track-full {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 22px;
        align-items: stretch;
    }

    .training-card {
        min-height: 505px;
        padding: 44px;
    }

    .training-card h3 {
        font-size: clamp(38px, 2.8vw, 52px);
    }

    .training-card p {
        font-size: 18px;
    }

    .training-module-grid {
        display: grid;
        gap: 12px;
    }

    .training-module-grid article {
        min-height: 150px;
        padding: 22px;
        border-radius: 22px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(233,171,76,.13);
        box-shadow: 0 17px 40px rgba(73,53,33,.06);
        transition: transform .25s ease;
    }

    .training-module-grid article:hover {
        transform: translateX(-6px);
    }

    .training-module-grid span {
        color: #d08324;
        font: 900 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .12em;
    }

    .training-module-grid strong {
        display: block;
        margin: 11px 0 8px;
        font: 800 19px/1.15 "Plus Jakarta Sans", sans-serif;
    }

    .training-module-grid p {
        margin: 0;
        color: #6e7480;
        font-size: 13px;
        line-height: 1.55;
    }

    /* ---------- PROJECTS ---------- */
    .projects-heading-row h2 {
        font-size: clamp(76px, 6.2vw, 118px);
    }

    .projects-heading-row p {
        font-size: 21px;
    }

    .project-wall {
        grid-template-columns: 1.22fr .78fr;
    }

    .project-preview {
        height: 355px;
    }

    .project-digital-wide .project-preview {
        height: 270px;
    }

    .project-digital-copy {
        padding: 34px;
    }

    .project-digital-copy h3 {
        font-size: clamp(30px, 2.45vw, 42px);
    }

    .project-digital-copy p {
        font-size: 16px;
    }

    .projects-signal-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 11px;
        margin-top: 20px;
    }

    .projects-signal-row > div {
        min-height: 82px;
        padding: 14px 17px;
        border-radius: 17px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.075);
    }

    .projects-signal-row span,
    .projects-signal-row strong {
        display: block;
    }

    .projects-signal-row span {
        color: #7dd3fc;
        font: 900 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .13em;
    }

    .projects-signal-row strong {
        margin-top: 9px;
        color: #d8e0ec;
        font: 700 13px/1.3 "Plus Jakarta Sans", sans-serif;
    }

    /* ---------- TECHNOLOGIES ---------- */
    .stack-heading-row h2 {
        font-size: clamp(76px, 6.2vw, 120px);
        max-width: 1100px;
    }

    .stack-heading-row p {
        font-size: 21px;
        max-width: 620px;
    }

    .stack-focus-bar {
        min-height: 66px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        padding: 0 21px;
        border-radius: 18px;
        background: rgba(255,255,255,.64);
        border: 1px solid rgba(37,99,235,.07);
        box-shadow: 0 13px 30px rgba(42,55,82,.055);
    }

    .stack-focus-bar span {
        color: #2563eb;
        font: 900 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .13em;
    }

    .stack-focus-bar strong {
        font: 800 13px/1 "Plus Jakarta Sans", sans-serif;
    }

    .stack-focus-bar i {
        width: 1px;
        height: 25px;
        background: rgba(31,43,67,.10);
    }

    .stack-grid {
        gap: 20px;
    }

    .stack-category-card {
        min-height: 355px;
        padding: 36px;
    }

    .stack-category-head strong {
        font-size: 18px;
    }

    .stack-chip-cloud span {
        font-size: 13px;
        padding: 13px 16px;
    }

    /* ---------- LEARNING ---------- */
    .learning-fullscreen .site-shell {
        justify-content: center;
    }

    .learning-heading h2 {
        font-size: clamp(78px, 6.4vw, 122px);
        margin-bottom: 44px;
    }

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

    .learning-note {
        min-height: 330px;
        padding: 38px;
    }

    .learning-note h3 {
        font-size: clamp(29px, 2.2vw, 40px);
    }

    .learning-note p {
        font-size: 17px;
        max-width: 680px;
    }

    .learning-bottom-flow {
        margin-top: 25px;
        min-height: 76px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(18px, 2vw, 34px);
        border-radius: 20px;
        background: rgba(255,255,255,.58);
        border: 1px solid rgba(124,58,237,.08);
    }

    .learning-bottom-flow span {
        color: #242b39;
        font: 900 clamp(14px, 1vw, 18px)/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .10em;
    }

    .learning-bottom-flow i {
        color: #7c3aed;
        font-style: normal;
        font-size: 19px;
    }

    .learning-watermark {
        position: absolute;
        right: -30px;
        top: 7%;
        color: rgba(124,58,237,.025);
        font: 900 clamp(200px, 21vw, 420px)/.8 "Plus Jakarta Sans", sans-serif;
        letter-spacing: -.1em;
        pointer-events: none;
    }

    .learning-orbit {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(124,58,237,.10);
        animation: learningOrbit 10s ease-in-out infinite alternate;
    }

    .learning-orbit-a {
        width: 230px;
        height: 230px;
        left: 3%;
        top: 16%;
    }

    .learning-orbit-b {
        width: 110px;
        height: 110px;
        right: 7%;
        bottom: 13%;
        border-color: rgba(79,209,181,.16);
        animation-delay: -4s;
    }

    @keyframes learningOrbit {
        to { transform: translate3d(22px,-16px,0) scale(1.06); }
    }

    /* ---------- GITHUB ---------- */
    .github-heading h2 {
        font-size: clamp(84px, 7vw, 134px);
    }

    .github-heading p {
        font-size: 20px;
        max-width: 750px;
    }

    .github-profile-band {
        min-height: 105px;
        display: grid;
        grid-template-columns: 1.15fr .7fr 1fr;
        gap: 13px;
        margin: 0 auto 20px;
        text-align: left;
    }

    .github-profile-band > div {
        min-height: 100px;
        padding: 18px 20px;
        border-radius: 18px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
    }

    .github-profile-band > div:first-child {
        display: grid;
        grid-template-columns: 52px 1fr;
        align-items: center;
        column-gap: 13px;
    }

    .github-profile-band > div:first-child > span {
        grid-row: 1 / 3;
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 15px;
        background: linear-gradient(135deg,#2563eb,#7c3aed);
        font-weight: 900;
    }

    .github-profile-band small {
        color: rgba(255,255,255,.42);
        font: 800 8px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .12em;
    }

    .github-profile-band strong {
        display: block;
        margin-top: 7px;
        color: #fff;
        font: 800 14px/1.25 "Plus Jakarta Sans", sans-serif;
    }

    .github-repo {
        min-height: 270px;
        padding: 38px;
    }

    /* ---------- CONTACT ---------- */
    .contact-layout {
        grid-template-columns: minmax(0, .92fr) minmax(650px, 1.08fr);
        gap: 82px;
    }

    .contact-copy h2 {
        font-size: clamp(78px, 6.6vw, 126px);
    }

    .contact-copy > p {
        max-width: 650px;
        font-size: 20px;
    }

    .contact-status-line {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 15px;
        color: rgba(255,255,255,.70);
        font: 800 9px/1 "Plus Jakarta Sans", sans-serif;
        letter-spacing: .12em;
    }

    .contact-status-line > span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #4fd1b5;
        box-shadow: 0 0 0 7px rgba(79,209,181,.12);
    }

    .contact-links a {
        min-height: 78px;
        padding: 17px 19px;
    }

    .contact-form {
        padding: 44px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 17px;
    }
}

/* Ultra-wide: don't leave giant unused margins. */
@media (min-width: 1700px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        padding-left: 138px !important;
        padding-right: 48px !important;
    }

    .hero-copy {
        padding-left: 58px;
    }

    .hero-visual-wrap {
        width: 970px;
    }

    .stack-category-card {
        min-height: 370px;
    }

    .learning-note {
        min-height: 350px;
    }
}

/* Laptop: keep fullness but fit safely. */
@media (max-width: 1450px) and (min-width: 1121px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        padding-left: 108px !important;
        padding-right: 28px !important;
    }

    .hero-inner {
        grid-template-columns: minmax(0,1fr) minmax(500px,.9fr) !important;
    }

    .hero-copy {
        padding-left: 12px;
    }

    .hero-name {
        font-size: clamp(80px, 7.4vw, 118px) !important;
    }

    .hero-visual-wrap {
        min-height: 620px;
    }

    .hero-bottom-metrics {
        left: 7%;
        width: 530px;
    }

    .about-signature-grid {
        grid-template-columns: minmax(0,1fr) minmax(450px,.82fr) !important;
    }

    .about-mega-title {
        font-size: clamp(62px, 5.3vw, 88px) !important;
    }

    .journey-shell-full {
        grid-template-columns: minmax(350px,.57fr) minmax(760px,1.43fr) !important;
    }

    .journey-canvas-full {
        min-height: 780px !important;
    }

    .commit-card-xl {
        width: 360px !important;
    }

    .education-layout {
        grid-template-columns: 1fr minmax(480px,.82fr);
    }

    .training-track-full {
        grid-template-columns: 1fr .72fr;
    }

    .stack-category-card {
        min-height: 300px;
        padding: 28px;
    }

    .learning-note {
        min-height: 290px;
        padding: 30px;
    }

    .contact-layout {
        grid-template-columns: .9fr 1.1fr;
        gap: 45px;
    }
}

@media (max-width: 1120px) {
    .hero-watermark,
    .hero-dashboard-float,
    .hero-bottom-metrics,
    .experience-side-code,
    .education-floating-modules {
        display: none;
    }

    .training-track-full {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .about-bottom-deck,
    .projects-signal-row,
    .github-profile-band {
        grid-template-columns: 1fr;
    }

    .stack-focus-bar {
        flex-wrap: wrap;
        height: auto;
        padding-block: 15px;
    }

    .stack-focus-bar i {
        display: none;
    }
}


/* =========================
   FINAL PRODUCTION POLISH
   ========================= */

.skip-link {
    position: fixed;
    z-index: 1000;
    left: 16px;
    top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff;
    background: #151821;
    text-decoration: none;
    font: 800 12px/1 "Plus Jakarta Sans", sans-serif;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

button.btn-ghost,
button.theme-side-nav-cv {
    cursor: default;
}

.is-disabled {
    opacity: .62 !important;
    filter: saturate(.72);
}

button.btn-ghost.is-disabled:hover,
button.theme-side-nav-cv.is-disabled:hover {
    transform: none !important;
}

.site-footer {
    position: relative;
    z-index: 5;
    min-height: 70px;
    padding: 20px clamp(22px, 4vw, 70px) 20px clamp(110px, 8vw, 150px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: #10131d;
    color: rgba(255,255,255,.46);
    border-top: 1px solid rgba(255,255,255,.07);
    font: 700 10px/1.4 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .08em;
}

.site-footer a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: color .18s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #7dd3fc;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37,99,235,.38);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .site-footer {
        padding: 22px 20px 100px;
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =============================
   BILINGUAL TR / EN SWITCH
   ============================= */
.language-switch {
    position: fixed;
    z-index: 190;
    top: 18px;
    right: 22px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(250,252,255,.84);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 14px 38px rgba(31,42,68,.12);
    backdrop-filter: blur(18px) saturate(1.2);
}

.language-switch > span {
    width: 1px;
    height: 18px;
    background: rgba(31,43,67,.10);
}

.language-switch__option {
    min-width: 42px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #727b8a;
    text-decoration: none;
    font: 800 10px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .08em;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.language-switch__option:hover {
    color: #1d2637;
    transform: translateY(-1px);
}

.language-switch__option.is-active {
    color: #fff;
    background: linear-gradient(120deg,#2563eb,#7255ef 66%,#d75eb3);
    box-shadow: 0 8px 18px rgba(80,75,218,.22);
}

.theme-side-nav-cv {
    border: 0;
    cursor: pointer;
}

@media (max-width: 900px) {
    .language-switch {
        top: 10px;
        right: 12px;
        height: 40px;
        padding: 4px;
    }
    .language-switch__option {
        height: 32px;
        min-width: 38px;
        font-size: 9px;
    }
}


/* =====================================================================
   RESPONSIVE SAFETY v2
   Added after every previous rule so the portfolio scales safely across
   ultra-wide monitors, desktop, laptops, tablets and phones.
   ===================================================================== */

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

main,
.theme-section,
.site-shell,
.hero-inner,
.journey-shell,
.hero-copy,
.hero-visual-wrap,
.about-signature-grid,
.about-control-panel,
.journey-heading,
.journey-canvas,
.experience-stage,
.experience-panel,
.education-layout,
.training-track,
.project-wall,
.stack-grid,
.learning-grid,
.github-repos,
.contact-layout,
.contact-form {
    min-width: 0;
}

img,
svg {
    max-width: 100%;
}

/* A safe default shell. The earlier 100vw rules could include the browser
   scrollbar and made some live viewports wider than the visible page. */
@media (min-width: 901px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        width: 100% !important;
        max-width: 2100px !important;
        margin-inline: auto !important;
        padding-left: 118px !important;
        padding-right: clamp(24px, 3vw, 52px) !important;
    }
}

/* ---------------------------------------------------------------------
   LARGE / NORMAL MONITORS — 1600px+
   Keep the WOW scale but prevent the name from entering the portrait.
   --------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
        gap: clamp(34px, 2.4vw, 54px) !important;
        min-height: calc(100svh - 132px);
    }

    .hero-copy {
        max-width: none !important;
        padding-left: clamp(30px, 2.8vw, 58px) !important;
    }

    .hero-name {
        font-size: clamp(104px, 7.35vw, 142px) !important;
        line-height: .86 !important;
        white-space: nowrap !important;
        max-width: 100%;
    }

    .hero-intro {
        max-width: 820px !important;
        font-size: clamp(19px, 1.18vw, 23px) !important;
        line-height: 1.68;
    }

    .hero-role {
        font-size: clamp(18px, 1.05vw, 22px) !important;
    }

    .hero-stackline {
        font-size: clamp(18px, 1.12vw, 22px) !important;
    }

    .hero-visual-wrap {
        width: min(43vw, 850px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: end !important;
    }

    .hero-portrait-stage {
        inset: 10% 6% 7% 12% !important;
    }

    .hero-dashboard-float-a {
        left: 7.2% !important;
        top: 6.5% !important;
    }

    .hero-dashboard-float-b {
        right: 2.5% !important;
        top: 6.5% !important;
    }

    .hero-bottom-metrics {
        left: 10.5% !important;
        width: min(560px, 34vw) !important;
        bottom: 49px !important;
    }

    .about-signature-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(500px, .82fr) !important;
        gap: clamp(38px, 3.5vw, 70px) !important;
    }

    .about-mega-title {
        font-size: clamp(68px, 5.35vw, 104px) !important;
    }

    .journey-shell-full {
        grid-template-columns: minmax(390px, .56fr) minmax(0, 1.44fr) !important;
        gap: clamp(36px, 3vw, 58px) !important;
    }

    .journey-shell-full .journey-heading h2 {
        font-size: clamp(72px, 5.7vw, 110px) !important;
    }

    .journey-canvas-full {
        min-height: min(860px, 82vh) !important;
    }

    .commit-card-xl {
        width: min(390px, 23vw) !important;
    }

    .education-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr) !important;
        gap: clamp(44px, 4vw, 78px) !important;
    }

    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2 {
        font-size: clamp(64px, 5.15vw, 100px) !important;
    }

    .education-visual-card {
        width: min(620px, 37vw) !important;
    }

    .contact-layout {
        grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr) !important;
        gap: clamp(46px, 4vw, 78px) !important;
    }

    .contact-copy h2 {
        font-size: clamp(68px, 5.45vw, 106px) !important;
    }
}

/* Extra-wide monitors get a little more visual size, but never by forcing
   fixed minimum columns that can collide. */
@media (min-width: 2200px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        max-width: 2320px !important;
        padding-left: 136px !important;
        padding-right: 64px !important;
    }

    .hero-name {
        font-size: clamp(126px, 6.4vw, 158px) !important;
    }

    .hero-visual-wrap {
        width: min(42vw, 970px) !important;
    }
}

/* ---------------------------------------------------------------------
   DESKTOP / LAPTOP — 1360–1599
   --------------------------------------------------------------------- */
@media (min-width: 1360px) and (max-width: 1599px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        padding-left: 108px !important;
        padding-right: 28px !important;
    }

    .hero-inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
        gap: 28px !important;
        min-height: calc(100svh - 125px);
    }

    .hero-copy {
        padding-left: 14px !important;
    }

    .hero-name {
        font-size: clamp(82px, 7.15vw, 108px) !important;
        line-height: .87 !important;
        white-space: nowrap !important;
    }

    .hero-intro {
        font-size: clamp(17px, 1.24vw, 20px) !important;
        max-width: 710px !important;
    }

    .hero-visual-wrap {
        width: min(42vw, 620px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: end !important;
    }

    .hero-portrait-stage {
        inset: 11% 5% 8% 12% !important;
    }

    .hero-dashboard-float-a,
    .hero-bottom-metrics {
        display: none !important;
    }

    .hero-dashboard-float-b {
        top: 5.5% !important;
        right: 2% !important;
        transform: scale(.9) rotate(4deg) !important;
        transform-origin: top right;
    }

    .hero-tech-signal {
        min-width: 105px !important;
        padding: 11px 13px !important;
    }

    .hero-tech-signal strong {
        font-size: 14px !important;
    }

    .about-signature-grid {
        grid-template-columns: minmax(0, 1fr) minmax(410px, .78fr) !important;
        gap: 30px !important;
    }

    .about-mega-title {
        font-size: clamp(58px, 4.9vw, 76px) !important;
    }

    .about-control-panel {
        min-height: 470px !important;
        padding: 28px !important;
    }

    .journey-shell-full {
        grid-template-columns: minmax(300px, .48fr) minmax(0, 1.52fr) !important;
        gap: 30px !important;
    }

    .journey-shell-full .journey-heading h2 {
        font-size: clamp(60px, 5vw, 78px) !important;
    }

    .journey-canvas-full {
        min-height: 720px !important;
    }

    .commit-card-xl {
        width: min(320px, 25vw) !important;
    }

    .experience-stage {
        grid-template-columns: 280px minmax(0, 1fr) !important;
    }

    .education-layout {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr) !important;
        gap: 36px !important;
    }

    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2 {
        font-size: clamp(54px, 4.7vw, 74px) !important;
    }

    .education-visual-card {
        width: min(500px, 39vw) !important;
    }

    .project-preview {
        height: 265px !important;
    }

    .project-digital-wide .project-preview {
        height: 205px !important;
    }

    .stack-category-card {
        min-height: 285px !important;
        padding: 27px !important;
    }

    .learning-note {
        min-height: 270px !important;
        padding: 28px !important;
    }

    .contact-layout {
        grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr) !important;
        gap: 36px !important;
    }

    .contact-copy h2 {
        font-size: clamp(56px, 5vw, 78px) !important;
    }
}

/* ---------------------------------------------------------------------
   SMALL LAPTOP / LARGE TABLET LANDSCAPE — 1180–1359
   --------------------------------------------------------------------- */
@media (min-width: 1180px) and (max-width: 1359px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        padding-left: 104px !important;
        padding-right: 24px !important;
    }

    .hero-inner {
        grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr) !important;
        gap: 22px !important;
        min-height: auto !important;
    }

    .hero-copy {
        padding-left: 0 !important;
    }

    .hero-name {
        font-size: clamp(70px, 6.9vw, 92px) !important;
        white-space: nowrap !important;
    }

    .hero-intro {
        font-size: 17px !important;
        line-height: 1.62 !important;
    }

    .hero-visual-wrap {
        width: min(43vw, 510px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon {
        display: none !important;
    }

    .hero-tech-signal {
        min-width: 92px !important;
        padding: 9px 11px !important;
    }

    .hero-tech-signal strong {
        font-size: 13px !important;
    }

    .about-signature-grid {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr) !important;
        gap: 26px !important;
    }

    .about-mega-title {
        font-size: clamp(52px, 4.7vw, 66px) !important;
    }

    .about-control-panel {
        min-height: 440px !important;
        padding: 25px !important;
    }

    /* The large curved path needs more horizontal room than this viewport.
       Stack heading + path vertically instead of squeezing it. */
    .journey-shell-full {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .journey-shell-full .journey-heading h2 {
        max-width: 8ch !important;
        font-size: clamp(58px, 5.8vw, 76px) !important;
    }

    .journey-stats {
        max-width: 720px !important;
    }

    .journey-canvas-full {
        min-height: 760px !important;
        width: 100% !important;
    }

    .commit-card-xl {
        width: min(340px, 31vw) !important;
    }

    .experience-stage {
        grid-template-columns: 1fr !important;
    }

    .experience-rail {
        display: none !important;
    }

    .education-layout {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .8fr) !important;
        gap: 28px !important;
    }

    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2 {
        font-size: clamp(50px, 4.7vw, 66px) !important;
    }

    .education-visual-card {
        width: min(450px, 38vw) !important;
    }

    .training-track-full {
        grid-template-columns: 1fr .72fr !important;
    }

    .project-wall {
        grid-template-columns: 1.08fr .92fr !important;
    }

    .stack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .learning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-layout {
        grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr) !important;
        gap: 28px !important;
    }

    .contact-copy h2 {
        font-size: clamp(50px, 5vw, 68px) !important;
    }
}

/* ---------------------------------------------------------------------
   TABLET / VERY SMALL LAPTOP — 901–1179
   Keep the desktop side menu but stack complex two-column compositions.
   --------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1179px) {
    .site-shell,
    .journey-shell,
    .hero-inner {
        padding-left: 100px !important;
        padding-right: 28px !important;
    }

    .theme-section {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .hero-fullscreen {
        min-height: 100svh !important;
    }

    .hero-inner {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero-copy {
        max-width: 820px !important;
        padding-left: 0 !important;
    }

    .hero-name {
        font-size: clamp(72px, 8vw, 96px) !important;
        white-space: normal !important;
    }

    .hero-visual-wrap {
        width: min(680px, 76vw) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        justify-self: center !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon {
        display: none !important;
    }

    .about-signature-grid,
    .experience-heading-row,
    .education-layout,
    .training-heading,
    .projects-heading-row,
    .stack-heading-row,
    .contact-layout {
        grid-template-columns: 1fr !important;
    }

    .about-control-panel {
        width: min(760px, 100%);
    }

    .journey-shell-full {
        grid-template-columns: 1fr !important;
    }

    .journey-canvas-full {
        min-height: 820px !important;
    }

    .commit-card-xl {
        width: min(340px, 38vw) !important;
    }

    .experience-stage {
        grid-template-columns: 1fr !important;
    }

    .experience-rail {
        display: none !important;
    }

    .education-visual-card {
        width: min(610px, 68vw) !important;
    }

    .training-track-full {
        grid-template-columns: 1fr !important;
    }

    .training-module-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

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

    .project-digital-wide .project-preview,
    .project-preview {
        height: 280px !important;
    }

    .stack-grid,
    .learning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-form {
        max-width: 820px;
    }
}

/* ---------------------------------------------------------------------
   TABLETS — 601–900
   --------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 900px) {
    .theme-section {
        min-height: auto !important;
        padding: 86px 0 !important;
    }

    .hero-shell {
        padding-top: 92px !important;
    }

    .hero-inner,
    .site-shell,
    .journey-shell {
        width: min(100% - 34px, 860px) !important;
        padding: 0 !important;
    }

    .hero-name {
        font-size: clamp(62px, 10vw, 82px) !important;
        line-height: .9 !important;
        white-space: nowrap !important;
    }

    .hero-intro {
        font-size: 18px !important;
    }

    .hero-visual-wrap {
        width: min(620px, 86vw) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon,
    .hero-watermark {
        display: none !important;
    }

    .hero-tech-signal {
        min-width: 96px !important;
    }

    .about-mega-title,
    .journey-heading h2,
    .section-title-dark,
    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2,
    .github-heading h2,
    .contact-copy h2 {
        font-size: clamp(48px, 8vw, 68px) !important;
    }

    .about-bottom-deck {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .journey-canvas-full {
        min-height: auto !important;
    }

    .stack-grid,
    .learning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stack-category-card {
        min-height: 260px !important;
    }

    .training-module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .projects-signal-row,
    .github-profile-band {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .contact-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------------------------------------------------------------------
   PHONES — up to 600
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
    :root {
        --section-y: 64px;
    }

    body {
        font-size: 16px !important;
    }

    .theme-section {
        min-height: auto !important;
        padding: 68px 0 !important;
    }

    .hero-shell {
        padding-top: 84px !important;
        padding-bottom: 78px !important;
    }

    .hero-inner,
    .site-shell,
    .journey-shell {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .hero-name {
        font-size: clamp(48px, 14.2vw, 70px) !important;
        line-height: .9 !important;
        white-space: normal !important;
        letter-spacing: -.07em !important;
    }

    .hero-role {
        font-size: 15px !important;
    }

    .hero-stackline {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .hero-intro {
        font-size: 16.5px !important;
        line-height: 1.68 !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-actions .btn-blue,
    .hero-actions .btn-ghost {
        width: 100% !important;
    }

    .hero-socials {
        gap: 16px !important;
    }

    .hero-visual-wrap {
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.08 !important;
    }

    .hero-portrait-stage {
        inset: 17% 4% 10% 6% !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon,
    .hero-watermark,
    .hero-orbit-svg {
        display: none !important;
    }

    .hero-tech-signal {
        min-width: 76px !important;
        padding: 8px 9px !important;
        border-radius: 12px !important;
    }

    .hero-tech-signal strong {
        font-size: 12px !important;
    }

    .hero-tech-signal span {
        display: none !important;
    }

    .about-topline {
        gap: 10px !important;
    }

    .about-topline > span:last-child {
        display: none;
    }

    .about-mega-title,
    .journey-heading h2,
    .section-title-dark,
    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2,
    .github-heading h2,
    .contact-copy h2 {
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 1 !important;
    }

    .about-lead,
    .education-lead {
        font-size: 18px !important;
    }

    .about-control-panel,
    .experience-panel,
    .training-card,
    .project-digital-copy,
    .stack-category-card,
    .learning-note,
    .github-repo,
    .contact-form {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .about-bottom-deck,
    .training-module-grid,
    .projects-signal-row,
    .stack-grid,
    .learning-grid,
    .github-profile-band,
    .github-repos {
        grid-template-columns: 1fr !important;
    }

    .journey-stats {
        grid-template-columns: 1fr !important;
    }

    .experience-panel-grid,
    .education-meta-grid,
    .contact-form-row {
        grid-template-columns: 1fr !important;
    }

    .education-visual-card {
        width: 100% !important;
        border-radius: 32px !important;
    }

    .project-preview,
    .project-digital-wide .project-preview {
        height: 210px !important;
    }

    .stack-focus-bar,
    .learning-bottom-flow {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 15px !important;
    }

    .stack-focus-bar i {
        display: none !important;
    }

    .contact-links strong {
        overflow-wrap: anywhere;
    }

    .language-switch {
        top: 9px !important;
        right: 10px !important;
        transform: scale(.92);
        transform-origin: top right;
    }

    .site-footer {
        padding-inline: 18px !important;
    }
}

/* Phones narrower than 390px: reduce only the decorative tech chips. */
@media (max-width: 390px) {
    .hero-tech-signal:nth-child(4),
    .hero-tech-signal:nth-child(5) {
        display: none !important;
    }

    .hero-name {
        font-size: clamp(44px, 13.7vw, 55px) !important;
    }

    .mobile-dock a {
        padding-inline: 10px !important;
    }
}

/* Short laptop screens: do not force an 800–900px visual into a 700px tall
   viewport. Sections are allowed to grow vertically instead of clipping. */
@media (min-width: 1180px) and (max-height: 820px) {
    .hero-inner {
        min-height: auto !important;
    }

    .hero-visual-wrap {
        width: min(39vw, 620px) !important;
    }

    .hero-name {
        font-size: clamp(74px, 6.4vw, 112px) !important;
    }

    .journey-canvas-full {
        min-height: 690px !important;
    }

    .about-signature > .site-shell,
    .experience-signature > .site-shell,
    .education-signature > .site-shell,
    .training-signature > .site-shell,
    .projects-signature > .site-shell,
    .stack-signature > .site-shell,
    .learning-signature > .site-shell,
    .github-signature > .site-shell,
    .contact-signature > .site-shell {
        min-height: auto !important;
    }
}


/* =====================================================================
   RESPONSIVE v3 — HARD DESKTOP/MONITOR COLLISION FIX
   This block is intentionally last and uses stronger constraints.
   ===================================================================== */

/* Never allow the hero title to visually spill into the portrait column. */
.hero-copy {
    position: relative;
    z-index: 6;
    min-width: 0 !important;
    overflow: visible;
}

.hero-name {
    max-width: 100% !important;
}

.hero-visual-wrap {
    position: relative;
    z-index: 5;
    min-width: 0 !important;
}

/* Typical monitor / browser zoom combinations */
@media (min-width: 1280px) and (max-width: 1599px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
        column-gap: clamp(24px, 2vw, 38px) !important;
    }

    .hero-copy {
        padding-left: 8px !important;
        padding-right: 6px !important;
    }

    .hero-name {
        font-size: clamp(72px, 6.05vw, 96px) !important;
        line-height: .88 !important;
        letter-spacing: -.068em !important;
        white-space: nowrap !important;
    }

    .hero-visual-wrap {
        width: min(38.5vw, 585px) !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1.02 !important;
        min-height: 0 !important;
        justify-self: end !important;
    }

    .hero-portrait-stage {
        inset: 10% 3% 8% 8% !important;
    }

    .hero-intro {
        max-width: 690px !important;
        font-size: clamp(16.5px, 1.15vw, 19px) !important;
    }

    .hero-stackline {
        font-size: clamp(17px, 1.22vw, 20px) !important;
    }

    .hero-role {
        font-size: clamp(16px, 1.08vw, 19px) !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics {
        display: none !important;
    }

    .hero-code-ribbon {
        transform: scale(.84) !important;
    }

    .hero-tech-signal {
        min-width: 92px !important;
        padding: 9px 11px !important;
    }

    .hero-tech-signal strong {
        font-size: 13px !important;
    }
}

/* 1600–1999: large monitor but not ultra-wide */
@media (min-width: 1600px) and (max-width: 1999px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr) !important;
        column-gap: clamp(30px, 2.2vw, 46px) !important;
    }

    .hero-copy {
        padding-left: clamp(20px, 2vw, 40px) !important;
        padding-right: 4px !important;
    }

    .hero-name {
        font-size: clamp(92px, 6.2vw, 118px) !important;
        line-height: .87 !important;
        letter-spacing: -.068em !important;
        white-space: nowrap !important;
    }

    .hero-visual-wrap {
        width: min(39vw, 720px) !important;
        aspect-ratio: 1 / 1.02 !important;
        min-height: 0 !important;
        justify-self: end !important;
    }

    .hero-portrait-stage {
        inset: 9% 4% 7% 9% !important;
    }

    .hero-intro {
        max-width: 790px !important;
        font-size: clamp(18px, 1.12vw, 21px) !important;
    }

    .hero-dashboard-float-a,
    .hero-bottom-metrics {
        display: none !important;
    }
}

/* 2000+ monitors */
@media (min-width: 2000px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
        column-gap: 54px !important;
    }

    .hero-copy {
        padding-left: clamp(36px, 2.2vw, 58px) !important;
    }

    .hero-name {
        font-size: clamp(118px, 5.9vw, 146px) !important;
        line-height: .86 !important;
        white-space: nowrap !important;
    }

    .hero-visual-wrap {
        width: min(40vw, 900px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.02 !important;
    }
}

/* Browser zoom can make a 1920px physical monitor behave like a 1200-ish
   CSS viewport. Keep the two-column hero safe until 1180, then stack. */
@media (min-width: 1180px) and (max-width: 1279px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
        gap: 20px !important;
    }

    .hero-name {
        font-size: clamp(64px, 5.9vw, 76px) !important;
        white-space: nowrap !important;
    }

    .hero-visual-wrap {
        width: min(40vw, 470px) !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.04 !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon {
        display: none !important;
    }
}

/* Keep side nav from visually covering the first letters while expanded.
   It still overlays the page, but the title begins farther to the right
   on desktop monitor widths. */
@media (min-width: 1280px) {
    .hero-copy {
        margin-left: clamp(18px, 1.4vw, 30px);
    }
}

/* When the desktop navigation is actually open, create visual breathing
   room without shifting the whole page abruptly. */
@media (min-width: 1180px) {
    body:has(.theme-side-nav.is-open) .hero-copy,
    body:has(.theme-side-nav:focus-within) .hero-copy {
        opacity: .97;
    }
}

/* English title/paragraphs can be wider: allow natural wrapping in text,
   while keeping the actual name locked safely inside its column. */
html[lang="en"] .hero-intro {
    max-width: 760px;
}

/* Hard overflow guards for all major desktop grids. */
@media (min-width: 1180px) {
    .hero-inner > *,
    .about-signature-grid > *,
    .journey-shell-full > *,
    .experience-heading-row > *,
    .experience-stage > *,
    .education-layout > *,
    .training-track-full > *,
    .project-wall > *,
    .stack-grid > *,
    .learning-grid > *,
    .contact-layout > * {
        min-width: 0 !important;
        max-width: 100%;
    }
}


/* =====================================================================
   MOBILE v4 — PHONE/TABLET HARD RESPONSIVE LAYER
   This block is intentionally LAST.
   ===================================================================== */

@media (max-width: 900px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    body {
        padding-bottom: 82px !important;
    }

    .theme-side-nav {
        display: none !important;
    }

    .mobile-dock {
        display: block !important;
        position: fixed !important;
        z-index: 500 !important;
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        padding: 7px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.92) !important;
        border: 1px solid rgba(37,99,235,.08) !important;
        box-shadow: 0 16px 46px rgba(26,38,67,.18) !important;
        backdrop-filter: blur(22px) saturate(1.2) !important;
    }

    .mobile-dock-scroll {
        display: flex !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    .mobile-dock-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-dock a {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 13px !important;
        font-size: 11px !important;
        scroll-snap-align: center !important;
        white-space: nowrap !important;
    }

    .language-switch {
        position: fixed !important;
        z-index: 520 !important;
        top: max(9px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        transform: scale(.9) !important;
        transform-origin: top right !important;
    }

    .global-fx {
        opacity: .45 !important;
    }

    .fx-ray,
    .fx-bubble-3,
    .fx-bubble-5 {
        display: none !important;
    }

    .site-shell,
    .hero-inner,
    .journey-shell {
        width: min(100% - 28px, 820px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .theme-section {
        min-height: auto !important;
        padding: 70px 0 !important;
        align-items: stretch !important;
    }

    .about-signature > .site-shell,
    .experience-signature > .site-shell,
    .education-signature > .site-shell,
    .training-signature > .site-shell,
    .projects-signature > .site-shell,
    .stack-signature > .site-shell,
    .learning-signature > .site-shell,
    .github-signature > .site-shell,
    .contact-signature > .site-shell {
        min-height: auto !important;
        display: block !important;
    }

    /* HERO — dedicated mobile composition */
    .hero-shell {
        min-height: auto !important;
        padding-top: 92px !important;
        padding-bottom: 76px !important;
    }

    .hero-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        min-height: auto !important;
    }

    .hero-copy {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        overflow: visible !important;
    }

    .hero-availability {
        margin-bottom: 18px !important;
        padding: 9px 13px !important;
        font-size: 12px !important;
    }

    .hero-name {
        margin: 0 0 18px !important;
        max-width: 100% !important;
        font-size: clamp(50px, 13.5vw, 78px) !important;
        line-height: .91 !important;
        letter-spacing: -.075em !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-name > span {
        display: inline !important;
    }

    .hero-role {
        margin-bottom: 16px !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
    }

    .hero-stackline {
        margin-bottom: 17px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .hero-intro {
        max-width: none !important;
        margin-bottom: 24px !important;
        font-size: 16.5px !important;
        line-height: 1.7 !important;
    }

    .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .hero-actions .btn-blue,
    .hero-actions .btn-ghost {
        width: 100% !important;
        min-height: 52px !important;
        padding-inline: 20px !important;
        font-size: 15px !important;
    }

    .hero-socials {
        display: flex !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
    }

    .hero-socials a {
        font-size: 13px !important;
    }

    .hero-visual-wrap {
        order: 2 !important;
        position: relative !important;
        width: min(100%, 620px) !important;
        max-width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.08 !important;
        margin-inline: auto !important;
        justify-self: center !important;
    }

    .hero-portrait-stage {
        inset: 12% 4% 8% 5% !important;
    }

    .hero-portrait-card {
        border-radius: 24px !important;
        padding: 11px !important;
    }

    .hero-portrait-photo {
        border-radius: 18px !important;
    }

    .portrait-backplate {
        border-radius: 24px !important;
    }

    .hero-portrait-meta {
        height: 54px !important;
    }

    .hero-portrait-meta strong {
        font-size: 13px !important;
    }

    .hero-portrait-meta span {
        font-size: 9px !important;
    }

    .hero-dashboard-float,
    .hero-bottom-metrics,
    .hero-code-ribbon,
    .hero-watermark,
    .hero-orbit-svg,
    .hero-marquee,
    .hero-scroll-cue {
        display: none !important;
    }

    .hero-tech-field {
        inset: 0 !important;
    }

    .hero-tech-signal {
        min-width: 76px !important;
        padding: 8px 9px !important;
        border-radius: 11px !important;
        box-shadow: 0 10px 24px rgba(38,49,74,.12) !important;
    }

    .hero-tech-signal strong {
        font-size: 12px !important;
    }

    .hero-tech-signal span {
        display: none !important;
    }

    /* Reposition visible chips for mobile */
    .hero-tech-signal:nth-child(1) {
        left: 1% !important;
        top: 61% !important;
    }

    .hero-tech-signal:nth-child(2) {
        left: auto !important;
        right: 0 !important;
        top: 15% !important;
    }

    .hero-tech-signal:nth-child(3) {
        left: auto !important;
        right: 0 !important;
        top: 61% !important;
    }

    .hero-tech-signal:nth-child(4) {
        left: 6% !important;
        top: 82% !important;
    }

    .hero-tech-signal:nth-child(5) {
        left: auto !important;
        right: 8% !important;
        top: 82% !important;
    }

    /* Big titles across sections */
    .about-mega-title,
    .journey-heading h2,
    .section-title-dark,
    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2,
    .github-heading h2,
    .contact-copy h2 {
        max-width: 100% !important;
        font-size: clamp(42px, 10.8vw, 64px) !important;
        line-height: .99 !important;
        letter-spacing: -.05em !important;
        overflow-wrap: anywhere !important;
    }

    /* ABOUT */
    .about-topline {
        margin-bottom: 34px !important;
        gap: 10px !important;
    }

    .about-topline > span:last-child {
        display: none !important;
    }

    .about-signature-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .about-lead {
        font-size: 18px !important;
        line-height: 1.65 !important;
    }

    .about-copy {
        font-size: 15.5px !important;
        line-height: 1.72 !important;
    }

    .about-control-panel {
        min-height: 0 !important;
        width: 100% !important;
        padding: 21px !important;
        border-radius: 24px !important;
    }

    .about-control-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 7px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    .about-control-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .about-control-tabs button {
        flex: 0 0 auto !important;
        padding: 10px 13px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .about-control-item {
        grid-template-columns: 12px minmax(0,1fr) !important;
        gap: 8px 10px !important;
        padding: 14px !important;
    }

    .about-control-item span,
    .about-control-item strong {
        grid-column: 2 !important;
    }

    .about-control-item strong {
        font-size: 14px !important;
        overflow-wrap: anywhere !important;
    }

    .about-bottom-deck {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .about-bottom-deck article {
        min-height: 0 !important;
        padding: 17px !important;
    }

    /* JOURNEY — true vertical mobile timeline */
    .journey-full {
        padding-bottom: 74px !important;
    }

    .journey-shell-full {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .journey-heading {
        width: 100% !important;
        padding: 0 !important;
    }

    .journey-heading h2 {
        max-width: 7ch !important;
    }

    .journey-heading p {
        max-width: none !important;
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    .journey-stats {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 7px !important;
        max-width: none !important;
    }

    .journey-stats > div {
        min-height: 72px !important;
        padding: 11px !important;
        border-radius: 14px !important;
    }

    .journey-stats strong {
        font-size: 16px !important;
    }

    .journey-stats span {
        font-size: 7px !important;
    }

    .journey-canvas,
    .journey-canvas-full {
        position: relative !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 0 0 0 31px !important;
        display: grid !important;
        gap: 13px !important;
    }

    .journey-canvas::before,
    .journey-canvas-full::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 8px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 3px !important;
        border-radius: 999px !important;
        background: linear-gradient(#2563eb,#7c3aed,#ff6b6b,#4fd1b5) !important;
        opacity: .28 !important;
    }

    .journey-path,
    .journey-path-full,
    .journey-code-card,
    .journey-floating-tag,
    .journey-side-note,
    .journey-big-type,
    .journey-bottom-strip {
        display: none !important;
    }

    .commit-card,
    .commit-card-xl {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .commit-card .commit-node,
    .commit-card-left .commit-node,
    .commit-card-right .commit-node {
        left: -31px !important;
        right: auto !important;
        top: 21px !important;
        width: 17px !important;
        height: 17px !important;
    }

    .commit-card-xl .commit-body,
    .commit-body {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .commit-card-xl .commit-body h3,
    .commit-body h3 {
        font-size: 18px !important;
    }

    .commit-card-xl .commit-body p,
    .commit-body p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* EXPERIENCE */
    .experience-heading-row,
    .experience-stage,
    .experience-panel-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .experience-rail,
    .experience-side-code {
        display: none !important;
    }

    .experience-panel {
        min-height: 0 !important;
        padding: 22px !important;
        border-radius: 24px !important;
    }

    .experience-panel-top {
        display: grid !important;
        gap: 12px !important;
    }

    .experience-period {
        justify-self: start !important;
    }

    .experience-description {
        margin: 22px 0 !important;
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    .experience-list li,
    .experience-learned {
        font-size: 14px !important;
    }

    /* EDUCATION */
    .education-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .education-lead {
        font-size: 17px !important;
        line-height: 1.68 !important;
    }

    .education-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .education-meta-grid div {
        min-height: 0 !important;
        padding: 17px !important;
    }

    .education-visual-card {
        width: 100% !important;
        max-width: 520px !important;
        margin-inline: auto !important;
        border-radius: 30px !important;
    }

    .education-floating-modules {
        display: none !important;
    }

    .education-track-items {
        gap: 7px !important;
    }

    .education-track-items span {
        padding: 9px 11px !important;
        font-size: 10px !important;
    }

    /* TRAINING */
    .training-heading,
    .training-track-full,
    .training-module-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .training-card {
        min-height: 0 !important;
        padding: 23px !important;
        border-radius: 24px !important;
    }

    .training-card h3 {
        font-size: 27px !important;
    }

    .training-card p {
        font-size: 15px !important;
    }

    .training-module-grid article {
        min-height: 0 !important;
        padding: 18px !important;
    }

    /* PROJECTS */
    .projects-heading-row,
    .project-wall,
    .projects-signal-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .project-digital-card {
        width: 100% !important;
        border-radius: 22px !important;
    }

    .project-preview,
    .project-digital-wide .project-preview {
        height: clamp(180px, 52vw, 250px) !important;
    }

    .project-digital-copy {
        padding: 20px !important;
    }

    .project-digital-copy h3 {
        font-size: 23px !important;
    }

    .project-digital-copy p {
        font-size: 14px !important;
    }

    .projects-footer-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    /* STACK */
    .stack-heading-row,
    .stack-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .stack-focus-bar {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 8px 12px !important;
        height: auto !important;
        padding: 15px !important;
    }

    .stack-focus-bar i {
        display: none !important;
    }

    .stack-category-card {
        min-height: 0 !important;
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .stack-category-big {
        font-size: 75px !important;
    }

    .stack-chip-cloud span {
        padding: 9px 11px !important;
        font-size: 11px !important;
    }

    /* LEARNING */
    .learning-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .learning-note {
        min-height: 0 !important;
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .learning-note h3 {
        font-size: 24px !important;
    }

    .learning-note p {
        font-size: 14px !important;
    }

    .learning-bottom-flow {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
        gap: 5px !important;
        min-height: 0 !important;
        padding: 14px 10px !important;
        text-align: center !important;
    }

    .learning-bottom-flow span {
        font-size: 9px !important;
    }

    .learning-bottom-flow i {
        font-size: 12px !important;
    }

    /* GITHUB */
    .github-profile-band,
    .github-repos {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .github-profile-band > div {
        min-height: 0 !important;
        padding: 16px !important;
    }

    .github-repo {
        min-height: 0 !important;
        padding: 21px !important;
        border-radius: 20px !important;
    }

    .github-repo h3 {
        font-size: 21px !important;
    }

    .github-cta {
        width: 100% !important;
        margin-top: 22px !important;
    }

    /* CONTACT */
    .contact-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .contact-copy > p {
        max-width: none !important;
        font-size: 16px !important;
    }

    .contact-links a {
        min-height: 70px !important;
        padding: 14px !important;
        grid-template-columns: 40px minmax(0,1fr) auto !important;
    }

    .contact-links a > span {
        width: 40px !important;
        height: 40px !important;
    }

    .contact-links strong {
        min-width: 0 !important;
        font-size: 12px !important;
        overflow-wrap: anywhere !important;
    }

    .contact-form {
        width: 100% !important;
        padding: 21px !important;
        border-radius: 22px !important;
    }

    .contact-form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 15px !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    /* Footer */
    .site-footer {
        min-height: 0 !important;
        padding: 22px 18px 100px !important;
        display: grid !important;
        justify-content: start !important;
        gap: 8px !important;
    }
}

/* PHONE-specific refinement */
@media (max-width: 600px) {
    .site-shell,
    .hero-inner,
    .journey-shell {
        width: calc(100% - 24px) !important;
    }

    .theme-section {
        padding-top: 62px !important;
        padding-bottom: 62px !important;
    }

    .hero-shell {
        padding-top: 82px !important;
    }

    .hero-name {
        font-size: clamp(48px, 14vw, 66px) !important;
    }

    .hero-visual-wrap {
        aspect-ratio: 1 / 1.12 !important;
    }

    .about-mega-title,
    .journey-heading h2,
    .section-title-dark,
    .education-title,
    .training-heading h2,
    .projects-heading-row h2,
    .stack-heading-row h2,
    .learning-heading h2,
    .github-heading h2,
    .contact-copy h2 {
        font-size: clamp(39px, 11.5vw, 54px) !important;
    }

    .journey-stats {
        grid-template-columns: 1fr !important;
    }

    .journey-stats > div {
        min-height: 62px !important;
    }

    .learning-bottom-flow {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        text-align: left !important;
    }

    .learning-bottom-flow i {
        transform: rotate(90deg);
        justify-self: start;
    }
}

/* NARROW PHONE */
@media (max-width: 390px) {
    .hero-name {
        font-size: clamp(44px, 13.6vw, 53px) !important;
    }

    .hero-tech-signal:nth-child(4),
    .hero-tech-signal:nth-child(5) {
        display: none !important;
    }

    .mobile-dock {
        left: 7px !important;
        right: 7px !important;
        padding: 6px !important;
    }

    .mobile-dock a {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
    }

    .contact-links a {
        grid-template-columns: 36px minmax(0,1fr) auto !important;
    }

    .contact-links a > span {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Landscape phones: keep content readable instead of forcing full height. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .theme-section,
    .hero-shell {
        min-height: auto !important;
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .hero-inner {
        grid-template-columns: minmax(0,1fr) minmax(0,.82fr) !important;
        gap: 22px !important;
    }

    .hero-copy {
        order: 1 !important;
    }

    .hero-visual-wrap {
        order: 2 !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .hero-name {
        font-size: clamp(46px, 7vw, 64px) !important;
    }

    .hero-intro {
        font-size: 14.5px !important;
    }
}