:root{
  --bg0:#070a16;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --muted2:#7c7c8a;
  --accent:#7c3aed;
  --accent2:#22c55e;
  --accent3:#60a5fa;
  --danger:#fb7185;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(124,58,237,.25), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(34,197,94,.18), transparent 50%),
    radial-gradient(900px 600px at 30% 90%, rgba(96,165,250,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  overflow-x:hidden;
}

.skip-link{
  position:absolute; left:12px; top:10px;
  transform:translateY(-150%);
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}

.container{
  width:min(1140px, 100%);
  margin:0 auto;
  padding:0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  padding:max(12px, env(safe-area-inset-top)) 0 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(10,14,30,.25);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.nav-open{
  overflow:hidden;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:flex-start;
  gap:16px;
}
.topbar__trailing{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
  margin-left:auto;
  min-width:0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  flex:1 1 auto;
  min-width:0;
}
.brand__mark{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:transparent;
  border:none;
  padding:0;
  flex-shrink:0;
  overflow:visible;
}
.brand__mark-svg{
  display:block;
  width:36px;
  height:36px;
  border-radius:12px;
  box-shadow: 0 4px 22px rgba(228,181,4,.34);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.brand__name{
  font-weight:900;
  letter-spacing:.24px;
  color: #f5f5f5;
  text-transform: uppercase;
}
.brand__name-g{
  display: inline-block;
  font-weight: 950;
  letter-spacing: -0.02em;
  transform: skewX(-5deg);
  margin-right: 1px;
  background: linear-gradient(125deg, #fff4d2 0%, #f3cf53 48%, #e4b504 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(228,181,4,.26);
}
@media (hover: hover) and (pointer: fine){
  .brand:hover .brand__mark-svg{
    transform: scale(1.06) rotate(-6deg);
    box-shadow: 0 6px 32px rgba(228,181,4,.48), 0 0 0 1px rgba(255,255,255,.08);
  }
  .brand:hover .brand__name-g{
    filter: brightness(1.08);
    transform: skewX(-5deg) translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce){
  .brand__mark-svg{ transition: none; }
  .brand:hover .brand__mark-svg{ transform: none; }
  .brand:hover .brand__name-g{
    transform: skewX(-5deg);
  }
}

.nav{display:flex; gap:18px; align-items:center}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:650;
  font-size:14px;
}
.nav-mobile-only{
  display: none !important;
}
@media (max-width: 760px){
  .nav-mobile-only{
    display: inline-flex !important;
  }
}
.nav a:hover{color:var(--text)}
.nav a.is-active{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(124,58,237,.55);
}

.header-socials{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
@media (max-width: 400px){
  .header-socials{ gap: 4px; }
}
.header-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.header-social:hover{
  color:#fff;
}
.header-social--instagram:hover{
  border-color: rgba(236,72,153,.45);
  background: rgba(236,72,153,.1);
}
.header-social--whatsapp:hover{
  border-color: rgba(37,211,102,.45);
  background: rgba(37,211,102,.1);
}
.header-social--linkedin:hover{
  border-color: rgba(10,102,194,.45);
  background: rgba(10,102,194,.1);
}
.header-social__icon{
  display:block;
}
.nav-toggle{
  display:none;
  width:44px;
  min-width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action:manipulation;
  position:relative;
  z-index:5;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background: rgba(255,255,255,.85);
  margin:0 auto;
}
.nav-toggle span:nth-child(1){transform:translateY(-4px)}
.nav-toggle span:nth-child(3){transform:translateY(4px)}

main{
  position:relative;
  z-index:1;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.hero{
  padding:56px 0 26px;
  position:relative;
  min-height: 72vh;
  overflow:clip;
}
/* Keep hero clipped on narrow screens to avoid horizontal swipe shift. */
@media (max-width: 960px){
  .hero{
    overflow: clip;
    min-height:0;
  }
}

/* Aurora + noise + spotlight (depth layers) */
.hero__aurora{
  position:absolute;
  inset:-20% -10% auto -10%;
  height: 85%;
  pointer-events:none;
  z-index:0;
  filter: blur(0px);
}
.hero__blob{
  position:absolute;
  border-radius:50%;
  filter: blur(42px);
  opacity:.55;
  animation: blobFloat 14s ease-in-out infinite;
}
.hero__blob--1{
  width:min(520px, 70vw);
  height:min(520px, 70vw);
  left:5%;
  top:-8%;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.55), transparent 60%);
  animation-delay: 0s;
}
.hero__blob--2{
  width:min(420px, 55vw);
  height:min(420px, 55vw);
  right:-5%;
  top:10%;
  background: radial-gradient(circle at 70% 40%, rgba(34,197,94,.4), transparent 58%);
  animation-delay: -4s;
}
.hero__blob--3{
  width:min(380px, 50vw);
  height:min(380px, 50vw);
  left:35%;
  bottom:-15%;
  background: radial-gradient(circle at 50% 50%, rgba(96,165,250,.45), transparent 55%);
  animation-delay: -7s;
}
@keyframes blobFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(18px,-22px) scale(1.04); }
  66%{ transform: translate(-14px,12px) scale(.98); }
}

.hero__noise{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__spotlight{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  --spot-x: 50%;
  --spot-y: 35%;
  background: radial-gradient(
    680px circle at var(--spot-x) var(--spot-y),
    rgba(124,58,237,.16),
    transparent 52%
  );
  mix-blend-mode: screen;
  opacity:.75;
  transition: opacity .3s ease;
}

/* Galaxy particles — full-site (fixed) */
.particles--global{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-height:100dvh;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
  mix-blend-mode: screen;
}

.hero__content{
  position:relative;
  z-index:3;
  min-width:0;
  pointer-events:none;
}
.hero__grid{
  display:block;
  min-width:0;
  max-width: min(640px, 100%);
}
.hero__left{
  min-width:0;
  position:relative;
  pointer-events:auto;
}
.hero__title{
  font-size: clamp(28px, 4vw, 56px);
  line-height:1.18;
  margin:14px 0 10px;
  font-weight:900;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.hero__line{
  display:block;
}
.hero__line + .hero__line{
  margin-top:0.2em;
}
.hero__line--typed{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-height:2.85em;
}
.explore-hint__desk{display:inline}
.explore-hint__touch{display:none}
@media (hover: none), (pointer: coarse){
  .explore-hint__desk{display:none}
  .explore-hint__touch{display:inline}
}
.accent{
  background: linear-gradient(90deg, #a78bfa, #60a5fa, #34d399);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cursor{
  display:inline-block;
  animation: blink 1.05s steps(2) infinite;
  color: var(--accent3);
}
@keyframes blink{50%{opacity:0}}

.typed{color: var(--accent3)}

.hero__subtitle{
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  margin:0 0 22px;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight:700;
  max-width:100%;
  flex-wrap:wrap;
}
.pill__emoji{filter:saturate(1.2)}

.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 18px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  color:#fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn__emoji{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,197,94,.8));
  border-color: rgba(255,255,255,.16);
}
.btn--primary:hover{
  opacity:.98;
  box-shadow: 0 14px 44px rgba(124,58,237,.28), 0 4px 20px rgba(34,197,94,.12);
}
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
}

.stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px}
.stat{
  padding:14px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.stat__value{
  font-weight:950;
  font-size:22px;
  letter-spacing:.2px;
}
.stat__label{color:var(--muted); font-size:13px; margin-top:6px; font-weight:650}

.section{
  padding: 68px 0;
  position:relative;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.00));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section__head{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom: 28px;
}
.section__head h1,
.section__head h2{
  margin:0;
  font-size: 34px;
  line-height:1.1;
  font-weight:950;
  scroll-margin-top: calc(72px + env(safe-area-inset-top));
}
.section__head p{
  margin:0;
  color:var(--muted);
  font-size: 15px;
  line-height:1.65;
  max-width: 72ch;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  align-items: stretch;
}
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  align-items: stretch;
}
.feature{
  padding:18px 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.feature__icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size: 20px;
}
.feature h2,
.feature h3{margin:14px 0 8px; font-size:16px; font-weight:950}
.feature p{margin:0; color:var(--muted); line-height:1.65; font-size:14px}

.feature--link{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}
@media (hover: hover) and (pointer: fine){
  .feature--link:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.055);
  }
}
@media (hover: none){
  .feature--link:active{
    transform: scale(0.99);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.055);
  }
}
.feature--link h3{margin:14px 0 8px; font-size:16px; font-weight:950}
.feature__cta{
  display:inline-block;
  margin-top:12px;
  font-weight:800;
  font-size:13px;
  color: rgba(109,94,252,.92);
  letter-spacing: .01em;
}

.feature--link .feature__cta{
  margin-top: auto;
  padding-top: 12px;
}

.page-hero{padding-top: 28px;}
.page-next{margin-top: 28px;}
.home-contact-cta{
  margin-top: 28px;
  margin-bottom: 8px;
  text-align:center;
}
.explore-hint{margin:0; color: var(--muted2); font-size: 14px; font-weight: 650;}

/* Three.js WebGL layer (home hero) */
.three-hero{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:auto;
  overflow:hidden;
  min-height:min(520px, 100%);
  cursor:grab;
}
.three-hero:active{
  cursor:grabbing;
}
@media (pointer: coarse){
  .three-hero{
    pointer-events:none;
  }
}
.three-hero canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* Spectacle — orbit of focus chips + Lottie */
.spectacle{
  padding: 48px 0 8px;
  position:relative;
  overflow: hidden;
}
.spectacle__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 22px;
}
.spectacle__hero-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 28px 36px;
  width:100%;
}
.spectacle__halo{
  position:relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
  display:grid;
  place-items:center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(255,255,255,.02) 52%, transparent 70%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.spectacle__core{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding: 14px 16px 10px;
  max-width: 78%;
}
.spectacle__core-glow{
  position:absolute;
  inset: -6% -8% -4% -8%;
  background: radial-gradient(ellipse at 50% 42%, rgba(124,58,237,.32), rgba(34,197,94,.08) 45%, transparent 68%);
  pointer-events:none;
  z-index:0;
}
.spectacle__monogram{
  position:relative;
  z-index:1;
  font-size: clamp(2.75rem, 9vw, 3.85rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 42%, #86efac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 28px rgba(124,58,237,.45));
}
.spectacle__core-line{
  position:relative;
  z-index:1;
  margin:0;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  line-height:1.35;
  max-width: 18ch;
}
.spectacle__core-sub{
  position:relative;
  z-index:1;
  margin:0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.lottie-spectacle__canvas{
  filter: drop-shadow(0 12px 32px rgba(124,58,237,.3));
}
.lottie-spectacle__canvas--inner{
  width: min(104px, 29vw) !important;
  height: min(104px, 29vw) !important;
  margin-top: 2px;
  position:relative;
  z-index:1;
  opacity: 0.92;
}
.spectacle__chips{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width:100%;
  max-width: 640px;
}
.spectacle__chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 16px 10px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  transition: border-color .2s ease, transform .2s ease;
  animation: chipBob 5s ease-in-out infinite;
}
.spectacle__ico{
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(124,58,237,.35));
}
.spectacle__chip--1{ animation-delay: 0s; }
.spectacle__chip--2{ animation-delay: -0.6s; }
.spectacle__chip--3{ animation-delay: -1.2s; }
.spectacle__chip--4{ animation-delay: -1.8s; }
.spectacle__chip--5{ animation-delay: -2.4s; }
.spectacle__chip--6{ animation-delay: -3s; }
@keyframes chipBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Home — bento + collapsible narrative */
.home-google__tagline{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(167,148,252,.95), rgba(96,165,250,.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-bento{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.home-bento__cell{
  padding: 18px 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  gap: 6px;
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.home-bento__cell::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at 40% 40%, rgba(124,58,237,.25), transparent 65%);
  pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .home-bento__cell:hover{
    transform: translateY(-3px);
    border-color: rgba(124,58,237,.35);
  }
}
.home-bento__cell:active{
  border-color: rgba(124,58,237,.28);
}
.home-bento__cell--wide{
  grid-row: span 1;
  min-height: 120px;
  justify-content:center;
}
.home-bento__emoji{ font-size: 28px; line-height:1; }
.home-bento__k{
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .02em;
}
.home-bento__v{
  font-size: 13px;
  color: var(--muted);
  font-weight: 650;
}
.home-google__details{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  padding: 0;
  max-width: min(72ch, 100%);
  width: 100%;
  margin-top: 28px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  clear: both;
  flex: 0 0 auto;
}
.home-google__summary{
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  min-height: 52px;
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.home-google__summary::-webkit-details-marker{display:none}
.home-google__chev{
  transition: transform .25s ease;
  display:inline-block;
  font-size: 12px;
  opacity: .85;
}
.home-google__details[open] .home-google__chev{
  transform: rotate(-180deg);
}
.home-google__details-body{
  padding: 0 18px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.flash{
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
}
.flash--ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
}
.flash--err{
  background: rgba(251,113,133,.10);
  border-color: rgba(251,113,133,.28);
}

.skill-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.skill-card{
  padding:18px 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.skill-card::after{
  content:"";
  position:absolute;
  inset:-30% -30% auto auto;
  width:160px; height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.22), transparent 60%);
  transform: rotate(10deg);
}
.skill-card__top{display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1}
.skill-card__top h2,
.skill-card__top h3{margin:0; font-size:16px; font-weight:950}
.skill-card__emoji{
  font-size: 20px;
  width:44px; height:44px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.bar{
  height: 12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  position:relative;
  margin:14px 0 10px;
}
.bar__fill{
  height:100%;
  width: var(--p, 60%);
  background: linear-gradient(90deg, rgba(124,58,237,.9), rgba(96,165,250,.85), rgba(34,197,94,.85));
  border-radius:999px;
  box-shadow: 0 12px 30px rgba(124,58,237,.18);
  transform-origin:left;
  animation: fillIn 1.2s ease-out both;
}
@keyframes fillIn{from{transform: scaleX(.2); opacity:.6} to{transform: scaleX(1); opacity:1}}
.skill-card__meta{color:var(--muted); margin:0; line-height:1.6; font-size:14px; position:relative; z-index:1}

.projects__bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom: 16px;
  flex-wrap:wrap;
}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-weight:850;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip.is-active{
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.35);
  color: #fff;
}
.projects__hint{color:var(--muted); font-weight:700; font-size:14px}
.projects__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.project-card{
  padding:16px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 178px;
  -webkit-tap-highlight-color: transparent;
}
.project-card__media{
  margin: -16px -14px 12px -14px;
  border-radius: calc(var(--radius2) - 1px) calc(var(--radius2) - 1px) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.22);
}
.project-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: hover) and (pointer: fine){
  .project-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.055);
  }
}
@media (hover: none){
  .project-card:active{
    transform: scale(0.99);
    border-color: rgba(255,255,255,.16);
  }
}
.project-card__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.project-card__title{
  margin:0;
  font-weight:950;
  font-size:16px;
}
.project-card__emoji{
  width:42px; height:42px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size: 18px;
}
.project-card__desc{
  color: var(--muted);
  margin:10px 0 14px;
  line-height:1.65;
  font-size:14px;
}
.project-card__meta{
  display:flex; gap:10px; flex-wrap:wrap;
}
.tag{
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.8);
  font-weight:750;
  font-size:12px;
}
.tag.tag--accent{
  background: rgba(124,58,237,.16);
  border-color: rgba(124,58,237,.28);
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  z-index: 5000;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop.is-open{display:flex}
.modal{
  width: min(860px, 100%);
  max-height: min(88vh, calc(100dvh - 24px));
  display:flex;
  flex-direction:column;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(34,197,94,.14), transparent 55%),
    rgba(10,14,30,.92);
  box-shadow: 0 26px 90px rgba(0,0,0,.7);
  overflow:hidden;
}
.modal__inner{
  padding:18px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.modal__header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  flex-wrap: wrap;
}
.modal__title{margin:0; font-weight:980; font-size:18px}
.modal__close{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  width:44px; height:44px;
}
.modal__grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}
.modal__panel{
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding:14px;
}
.modal__desc{margin:0; color:var(--muted); line-height:1.7; font-size:14px}
.modal__list{
  margin:10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
  line-height:1.7;
  font-size:14px;
}
.modal__links{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.modal__visual-default[hidden],
.modal__gallery[hidden]{
  display: none !important;
}
.modal__gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.modal__gallery--multi{
  grid-template-columns: 1fr;
}
@media (min-width: 520px){
  .modal__gallery--multi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.modal__fig{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.15);
}
.modal__fig img{
  width: 100%;
  height: auto;
  vertical-align: middle;
  display: block;
  max-height: min(52vh, 420px);
  object-fit: contain;
}
.link-btn{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:10px 14px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  font-size:13px;
  transition: background .15s ease, border-color .15s ease;
}
+.link-btn:hover{
+  background: rgba(255,255,255,.1);
+  border-color: rgba(255,255,255,.2);
+}

.contact{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:start;
}
.contact__form{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 26px;
  padding:16px;
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
label span{display:block; color: rgba(255,255,255,.88); font-weight:850; font-size:13px; margin:8px 0}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.15);
  color:#fff;
  outline:none;
}
textarea{resize:vertical; min-height: 120px}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.45)}
input:focus, textarea:focus{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}
.contact__status{
  margin-top:12px;
  font-weight:850;
  color: rgba(255,255,255,.92);
  min-height: 20px;
}

.contact__aside{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mini-card{
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:16px;
}
.mini-card__title{
  font-weight:950;
  margin:0 0 8px;
}
.mini-card__body{color:var(--muted); line-height:1.7}
.mini-card__hint{
  margin:10px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}
.social-links{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.social-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-decoration:none;
  color: rgba(255,255,255,.9);
  padding:10px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  font-weight:850;
}
.social-link:hover{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04)}

.footer{
  position:relative;
  z-index:2;
  padding: 28px 0 max(40px, calc(16px + env(safe-area-inset-bottom)));
  border-top: 1px solid rgba(255,255,255,.06);
  isolation: isolate;
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer__brand{font-weight:900; display:flex; align-items:center; gap:10px; font-size: 15px;}
.footer__copy{color:var(--muted2); font-weight:700; font-size: 13px;}
.to-top{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight:900;
}

.is-reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.is-reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* About page — LinkedIn-derived content */
.about-dek{
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  max-width: 65ch;
}
.about-layout{
  display: grid;
  gap: 28px 36px;
  align-items: start;
  margin-top: 8px;
}
@media (min-width: 900px){
  .about-layout{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 32px 48px;
  }
}
.about-layout__main{
  min-width: 0;
}
.about-layout__aside{
  min-width: 0;
}
.about-prose{
  margin-top: 18px;
}
.about-prose .about-summary:first-child{
  margin-top: 0;
}
.about-lead{
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: none;
  color: rgba(255,255,255,.92);
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}
.about-meta{
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
}
.about-summary{
  margin-top: 16px;
  color: rgba(255,255,255,.82);
  line-height: 1.75;
  max-width: 65ch;
  font-size: 15px;
}
.about-linkedin{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.about-aside-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  padding: 18px 18px 16px;
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(124,58,237,.14), transparent 55%),
    rgba(255,255,255,.04);
}
.about-aside-card__title{
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.95);
}
.about-aside-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-aside-list li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.about-aside-list__ico{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 18px;
}
.about-aside-list strong{
  color: rgba(255,255,255,.92);
  font-weight: 850;
}
.timeline-bullets{
  margin: 10px 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.timeline-bullets li{
  margin-bottom: 6px;
}
.subsection-intro a{
  color: rgba(96,165,250,.95);
  font-weight: 750;
}

.subsection-title{
  font-size: 26px;
  font-weight: 950;
  margin: 0 0 10px;
  scroll-margin-top: calc(72px + env(safe-area-inset-top));
}
.subsection-intro{
  color: var(--muted);
  margin: 0 0 1.25rem;
  font-size: 15px;
  max-width: 72ch;
}

/* Home — overview section */
.home-google{
  padding-top: 0.5rem;
  overflow: visible;
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.home-google .container{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.home-google__p{
  max-width: 72ch;
  color: rgba(255,255,255,.88);
  line-height: 1.75;
  font-size: 15px;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Skills — detailed bullet list */
.skills-google{
  margin: 0 0 2rem;
  max-width: 820px;
}
.skills-google__list{
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}
.skills-google__list li{
  margin-bottom: 10px;
}


.timeline{
  max-width: 820px;
}
.timeline__item{
  position: relative;
  padding: 14px 0 18px 22px;
  border-left: 2px solid rgba(124,58,237,.35);
  margin-left: 10px;
}
.timeline__item::before{
  content: '';
  position: absolute;
  left: -5px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border: 2px solid var(--bg1);
}
.timeline__title{
  font-weight: 950;
  font-size: 1.05rem;
}
.timeline__company{
  color: rgba(96,165,250,.95);
  font-weight: 850;
  font-size: 14px;
  margin-top: 4px;
}
.timeline__meta{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 8px;
  line-height: 1.45;
}
.timeline__desc{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.education-list,
.cert-list,
.org-list{
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
  max-width: 72ch;
}
.education-list li,
.cert-list li,
.org-list li{
  margin-bottom: 14px;
}

/* Modal injected by JS */

/* Tablets & large phones */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; gap:18px}
  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr)); }
  .skill-grid{grid-template-columns: repeat(2, minmax(0,1fr)); }
  .projects__grid{grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact{grid-template-columns: 1fr; }
  .row{grid-template-columns: 1fr}
  .modal__grid{grid-template-columns: 1fr}
  .stats{grid-template-columns: repeat(2, minmax(0,1fr)); }
  .section{padding: 48px 0}
}

@media (max-width: 760px){
  .grid-3,
  .grid-4,
  .skill-grid,
  .projects__grid{
    grid-template-columns: 1fr;
  }
  .stats{
    grid-template-columns: 1fr;
  }
}

/* Mobile navigation & small screens */
@media (max-width: 960px){
  .topbar__inner{
    align-items:center;
  }
  .topbar__trailing{
    gap:8px;
    align-items:center;
  }
  .header-social{
    width:40px;
    min-width:40px;
    height:40px;
  }
  .header-socials{
    gap:6px;
  }
  .nav-toggle{
    display:inline-flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
  }
  .nav{
    display:none !important;
    position:fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    top: calc(52px + env(safe-area-inset-top));
    z-index: 400;
    flex-direction:column;
    align-items:stretch;
    padding:8px;
    gap:2px;
    margin:0;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(12, 16, 30, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.55);
  }
  .topbar.is-menu-open .nav{
    display:flex !important;
  }
  .topbar.is-menu-open{
    z-index: 350;
  }
  .nav a{
    padding: 14px 16px;
    min-height: 48px;
    display:flex;
    align-items:center;
    border-radius: 12px;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav a:active{
    background: rgba(255,255,255,.08);
  }
  .brand{
    min-width:0;
    flex:1 1 auto;
  }
  .brand__name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hero{
    padding: 28px 0 20px;
    min-height: 0;
  }
  .hero__left{
    padding: 16px;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(10,14,30,.66), rgba(10,14,30,.52)),
      radial-gradient(900px 380px at 0% 0%, rgba(124,58,237,.20), transparent 62%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 42px rgba(0,0,0,.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .hero__content,
  .hero__grid,
  .hero__left{
    width:100%;
    max-width:100%;
  }
  .hero__grid{
    margin:0;
  }
  .particles--global{
    opacity: 0.42;
  }
  .hero__title{
    font-size: clamp(1.35rem, 5vw + 0.35rem, 2.1rem);
    line-height: 1.22;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .hero__subtitle{
    font-size: 15px;
    max-width: none;
    color: rgba(229,231,235,.94);
    line-height: 1.62;
  }
  .pill{
    font-size: 13px;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
    margin-top: 14px;
    margin-bottom: 16px;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 16px;
  }
  .btn--primary{
    box-shadow: 0 10px 32px rgba(124,58,237,.28);
  }
  .btn--ghost{
    background: rgba(8,12,26,.62);
    border-color: rgba(255,255,255,.18);
  }
  .stats{
    gap:12px;
  }
  .stat{
    background: rgba(8,12,26,.62);
    border-color: rgba(255,255,255,.14);
  }
  .hero__spotlight{
    opacity:.38;
  }
  .three-hero{
    opacity:.22;
  }
  .section__head h1,
  .section__head h2{
    font-size: clamp(1.5rem, 5vw + 0.5rem, 1.85rem);
  }
  .subsection-title{
    font-size: clamp(1.25rem, 4vw + 0.5rem, 1.5rem);
  }
  .projects__bar{
    flex-direction:column;
    align-items:stretch;
  }
  .chips{
    justify-content:flex-start;
  }
  .chip{
    font-size: 13px;
    padding: 10px 12px;
  }
  .modal{
    border-radius: 20px;
    max-height: min(90vh, calc(100dvh - 20px));
  }
  .modal__title{
    font-size: 16px;
    padding-right: 8px;
  }
  input, textarea{
    font-size: 16px;
  }
  .spectacle__chips{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width:100%;
    max-width:100%;
  }
  .spectacle__halo{
    width: min(220px, 85vw);
  }
  .spectacle{
    padding-top: 32px;
    overflow: visible;
  }
  .spectacle__hero-row{
    flex-direction:column;
  }
  .home-bento{
    grid-template-columns: 1fr;
    width:100%;
  }
  .home-bento__cell,
  .home-google__details,
  .grid-3 > .feature{
    width:100%;
    max-width:100%;
  }
  .home-bento__cell--wide{
    min-height: auto;
  }
  .section--alt{
    padding-bottom: 56px;
  }
  .footer__inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .footer__left,
  .footer__right{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__brand{
    justify-content: center;
  }
  .footer__copy{
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px){
  .topbar__trailing{
    gap:6px;
  }
  .header-socials{
    display:none;
  }
  .container{
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .section{padding: 36px 0}
  .section--alt{padding-bottom: 48px}
  .stat__value{font-size: 20px}
  .stat__label{font-size: 12px}
  .timeline__item{
    padding-left: 16px;
    margin-left: 6px;
  }
}

/* Short-height mobile landscape (common on phones turned sideways) */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px){
  .topbar{
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }
  .header-socials{
    display:none;
  }
  .hero{
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .hero__left{
    padding: 12px;
    border-radius: 18px;
  }
  .hero__actions{
    flex-direction: row;
    gap: 10px;
  }
  .hero__actions .btn{
    width: auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .stats{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }
  .stat{
    padding: 10px;
  }
  .stat__value{
    font-size: 18px;
  }
  .stat__label{
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cursor{animation:none !important}
  .bar__fill{animation:none !important}
  .hero__blob, .spectacle__chip{animation:none !important}
  .hero__spotlight{opacity:.4}
  .three-hero{display:none !important}
  .lottie-spectacle__canvas{display:none !important}
  .particles--global{opacity:0.22 !important; mix-blend-mode:normal}
}

/* =======================================================================
   Professional design refresh (global overrides)
   ======================================================================= */

:root{
  --bg0: #090d18;
  --bg1: #0f1629;
  --card: rgba(255,255,255,.045);
  --card2: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.12);
  --text: #eef2ff;
  --muted: #a7b0c4;
  --muted2: #8e98ad;
  --accent: #6d5efc;
  --accent2: #22c55e;
  --accent3: #60a5fa;
  --radius: 16px;
  --radius2: 20px;
}

body{
  background:
    radial-gradient(900px 520px at -8% -10%, rgba(109,94,252,.16), transparent 60%),
    radial-gradient(900px 520px at 108% -5%, rgba(96,165,250,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  letter-spacing: .01em;
}

.particles--global{ opacity: .18; }
.hero__aurora, .hero__noise{ opacity: .35; }
.hero__spotlight{ opacity: .28; }
.three-hero{ opacity: .20; }

.topbar{
  background: rgba(9,13,24,.72);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.topbar.is-elevated{
  background: rgba(9,13,24,.84) !important;
}
.nav a{
  color: var(--muted);
  font-weight: 700;
}
.nav a.is-active{
  color: #fff;
  text-decoration-color: rgba(109,94,252,.65);
}

.section{
  padding: 74px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
}
.section__head{
  margin-bottom: 30px;
}
.section__head h1,
.section__head h2{
  font-size: clamp(1.85rem, 2.2vw + 1.25rem, 2.45rem);
  line-height: 1.1;
}
.section__head p{
  color: var(--muted);
}

.hero{
  padding-top: 64px;
  padding-bottom: 34px;
}
.hero__grid{
  max-width: min(760px, 100%);
}
.hero__left{
  padding: 26px;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(10,14,26,.72), rgba(10,14,26,.58)),
    radial-gradient(700px 320px at 0% 0%, rgba(109,94,252,.16), transparent 62%);
  box-shadow: 0 18px 52px rgba(0,0,0,.36);
}
.hero__title{
  font-size: clamp(2rem, 2.4vw + 1.1rem, 3.2rem);
  margin-top: 12px;
}
.hero__subtitle{
  color: rgba(238,242,255,.9);
  max-width: 60ch;
}
.pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}

.btn{
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
  color: #fff;
}
.btn--primary{
  background: linear-gradient(135deg, #6d5efc, #2f8fff);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(55,87,255,.3);
}
.btn--ghost{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.15);
}

.stats{ gap: 12px; }
.stat{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
}

.feature,
.skill-card,
.project-card,
.home-bento__cell,
.about-aside-card,
.mini-card,
.contact__form,
.home-google__details,
.modal__panel{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  border-radius: var(--radius2);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.feature h3,
.skill-card__top h2,
.project-card__title,
.subsection-title{
  letter-spacing: .01em;
}

.about-summary,
.timeline__desc,
.timeline-bullets,
.education-list,
.cert-list,
.org-list{
  color: var(--muted);
}

.timeline__item{
  border-left-color: rgba(109,94,252,.45);
}
.timeline__meta{
  color: var(--muted2);
}

input, textarea{
  background: rgba(6,10,20,.6);
  border-color: rgba(255,255,255,.16);
}
input:focus, textarea:focus{
  border-color: rgba(109,94,252,.65);
  box-shadow: 0 0 0 4px rgba(109,94,252,.18);
}

.footer{
  border-top-color: rgba(255,255,255,.1);
}

@media (max-width: 980px){
  .section{ padding: 56px 0; }
  .hero{ padding-top: 32px; }
  .hero__left{ padding: 18px; border-radius: 20px; }
}

@media (max-width: 760px){
  .hero__title{
    font-size: clamp(1.8rem, 6vw + .4rem, 2.35rem);
  }
  .hero__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
  }
  .spectacle{
    padding-top: 24px;
  }
  .home-google__details{
    margin-top: 18px;
  }
}

/* =======================================================================
   Professional layout mode (clean, minimal, less effects)
   ======================================================================= */

:root{
  --bg0:#f3f6fb;
  --bg1:#eef2f9;
  --card:#ffffff;
  --card2:#f8fafc;
  --stroke:#d8e0ec;
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --accent:#2563eb;
  --accent2:#0ea5e9;
  --accent3:#1d4ed8;
  --shadow: 0 10px 24px rgba(15,23,42,.08);
  --radius:14px;
  --radius2:18px;
}

body{
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

/* Remove visual noise for a corporate look */
.particles--global,
.hero__aurora,
.hero__noise,
.hero__spotlight,
.three-hero,
.lottie-spectacle__canvas{
  display:none !important;
}
.spectacle{
  display:none;
}

.topbar{
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand__name{
  color:#0f172a;
}
.nav a{
  color: #334155;
}
.nav a:hover{
  color: #0f172a;
}
.nav a.is-active{
  color: #0f172a;
  text-decoration-color: rgba(37,99,235,.5);
}
.header-social,
.nav-toggle{
  background:#fff;
  border-color: var(--stroke);
  color:#334155;
}
.nav-toggle span{
  background:#334155;
}

.hero{
  min-height: 0;
  padding: 42px 0 22px;
}
.hero__grid{
  max-width: 860px;
}
.hero__left{
  background: #fff;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: 20px;
  padding: 26px;
}
.hero__title{
  color:#0f172a;
}
.accent{
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
}
.typed{
  color:#2563eb;
}
.cursor{
  color:#2563eb;
}
.hero__subtitle{
  color:#475569;
}
.pill{
  background:#f8fafc;
  border-color: var(--stroke);
  color:#334155;
}

.btn{
  border-radius: 12px;
}
.btn--primary{
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color:#fff;
  box-shadow: 0 8px 18px rgba(37,99,235,.24);
}
.btn--ghost{
  background:#fff;
  color:#1e293b;
  border-color: var(--stroke);
}

.stat,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel{
  background:#fff;
  border-color: var(--stroke);
  box-shadow: var(--shadow);
}

.stat__label,
.feature p,
.skill-card__meta,
.timeline__desc,
.about-summary,
.home-google__p,
.education-list,
.cert-list,
.org-list{
  color:#475569;
}
.timeline__company{
  color:#1d4ed8;
}
.timeline__item{
  border-left-color: rgba(37,99,235,.35);
}
.timeline__meta{
  color:#64748b;
}

.section{
  padding: 64px 0;
}
.section--alt{
  background: linear-gradient(180deg, #f8fafc, #f3f6fb);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.home-google__tagline{
  background: linear-gradient(90deg, #0f172a, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
}

.chip{
  background:#fff;
  border-color: var(--stroke);
  color:#334155;
}
.chip.is-active{
  background: #dbeafe;
  border-color: #93c5fd;
  color:#1d4ed8;
}

input, textarea{
  background:#fff;
  border-color: var(--stroke);
  color:#0f172a;
}
input::placeholder, textarea::placeholder{
  color:#94a3b8;
}
input:focus, textarea:focus{
  border-color:#60a5fa;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.flash--ok{
  background: #ecfdf3;
  border-color:#86efac;
  color:#166534;
}
.flash--err{
  background: #fef2f2;
  border-color:#fca5a5;
  color:#991b1b;
}

.footer{
  background:#f8fafc;
  border-top:1px solid var(--stroke);
}
.footer__copy{
  color:#64748b;
}
.to-top{
  color:#1d4ed8;
}

@media (max-width: 960px){
  .nav{
    background:#fff !important;
    border-color: var(--stroke);
    box-shadow: var(--shadow);
  }
  .nav a{
    color:#1e293b;
  }
  .nav a:active{
    background:#f1f5f9;
  }
}

/* =======================================================================
   Masterpiece theme: "Wasp Nest Atelier"
   Organic, hand-built, layered, premium.
   ======================================================================= */

:root{
  --bg0:#14110c;
  --bg1:#1d1711;
  --bg2:#2a2118;
  --card: rgba(255,248,229,.055);
  --card2: rgba(255,248,229,.085);
  --stroke: rgba(255,211,138,.2);
  --text:#f7efdd;
  --muted:#cfbf9d;
  --muted2:#b29f79;
  --accent:#e3a74b;
  --accent2:#f4c16e;
  --accent3:#b3762b;
  --shadow: 0 16px 40px rgba(0,0,0,.38);
  --radius:16px;
  --radius2:22px;
}

body{
  background:
    radial-gradient(1000px 620px at -10% -15%, rgba(227,167,75,.14), transparent 62%),
    radial-gradient(1200px 760px at 115% -5%, rgba(180,118,43,.1), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 38%, var(--bg2));
  color: var(--text);
}

/* subtle "nest cell" texture */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .16;
  background-image:
    radial-gradient(circle at 12px 8px, rgba(255,220,160,.12) 1px, transparent 1.8px),
    radial-gradient(circle at 2px 18px, rgba(255,220,160,.08) 1px, transparent 1.8px);
  background-size: 24px 24px;
}

main, .topbar, .footer{ position: relative; z-index: 1; }

.particles--global,
.hero__aurora,
.hero__noise,
.hero__spotlight,
.three-hero{ display:none !important; }

.topbar{
  background: rgba(24,18,12,.84) !important;
  border-bottom: 1px solid rgba(255,211,138,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand__name{ color: var(--text); }
.nav a{ color: var(--muted); }
.nav a:hover{ color: #fff5dc; }
.nav a.is-active{
  color: #fff3d2;
  text-decoration-color: rgba(244,193,110,.65);
}
.header-social,
.nav-toggle{
  background: rgba(255,248,229,.04);
  border-color: rgba(255,211,138,.24);
  color: #f4deb8;
}
.nav-toggle span{ background: #f4deb8; }

.hero{
  min-height: 0;
  padding: 52px 0 28px;
}
.hero__grid{ max-width: 860px; }
.hero__left{
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255,211,138,.24);
  background:
    linear-gradient(180deg, rgba(39,29,19,.9), rgba(28,21,14,.85)),
    radial-gradient(600px 280px at 0% 0%, rgba(244,193,110,.12), transparent 64%);
  box-shadow: var(--shadow);
}
.hero__left::before{
  content:"";
  position:absolute;
  top:16px; bottom:16px; left:-1px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent2), transparent);
  opacity:.85;
}

.accent{
  background: linear-gradient(90deg, #f9d391, #e3a74b, #f4c16e);
  -webkit-background-clip:text;
  background-clip:text;
}
.typed,.cursor{ color: #f4c16e; }
.hero__subtitle{ color: #ddc9a6; }
.pill{
  background: rgba(255,248,229,.07);
  border-color: rgba(255,211,138,.24);
  color: #f5e6c9;
}

.btn{
  border-radius: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}
.btn--primary{
  background: linear-gradient(135deg, #f0bd6a, #d79237);
  border-color: rgba(255,216,153,.55);
  color:#2a1d0f;
  box-shadow: 0 10px 24px rgba(227,167,75,.24);
}
.btn--ghost{
  background: rgba(255,248,229,.05);
  border-color: rgba(255,211,138,.26);
  color:#f5e7ca;
}

.section{
  padding: 68px 0;
}
.section--alt{
  background:
    linear-gradient(180deg, rgba(255,248,229,.02), rgba(255,248,229,0));
  border-top: 1px solid rgba(255,211,138,.15);
  border-bottom: 1px solid rgba(255,211,138,.15);
}
.section__head p,
.explore-hint,
.projects__hint{ color: var(--muted); }

.stat,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel{
  background:
    linear-gradient(180deg, rgba(255,248,229,.06), rgba(255,248,229,.035));
  border: 1px solid rgba(255,211,138,.2);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.feature__icon,
.skill-card__emoji,
.project-card__emoji,
.about-aside-list__ico{
  background: rgba(255,248,229,.07);
  border-color: rgba(255,211,138,.22);
}

.home-google__tagline{
  background: linear-gradient(90deg, #fff2d2, #f4c16e, #de9f48);
  -webkit-background-clip: text;
  background-clip: text;
}

.chip{
  background: rgba(255,248,229,.04);
  border-color: rgba(255,211,138,.22);
  color:#ead8b7;
}
.chip.is-active{
  background: rgba(227,167,75,.2);
  border-color: rgba(244,193,110,.45);
  color:#fff1d2;
}

.timeline__company{ color:#f0bd6a; }
.timeline__meta{ color: var(--muted2); }
.timeline__item{
  border-left-color: rgba(227,167,75,.4);
}
.timeline__item::before{
  background: linear-gradient(135deg, #f0bd6a, #d79237);
  border-color: #2a2118;
}

input, textarea{
  background: rgba(20,16,11,.6);
  border-color: rgba(255,211,138,.24);
  color:#f7efdd;
}
input::placeholder, textarea::placeholder{
  color:#a79067;
}
input:focus, textarea:focus{
  border-color: rgba(244,193,110,.65);
  box-shadow: 0 0 0 4px rgba(227,167,75,.18);
}

.link-btn{
  background: rgba(255,248,229,.06);
  border-color: rgba(255,211,138,.24);
  color:#fff1d2;
}
.link-btn:hover{
  background: rgba(255,248,229,.1);
  border-color: rgba(255,211,138,.34);
}

.modal{
  border-color: rgba(255,211,138,.24);
  background:
    radial-gradient(900px 500px at 8% 0%, rgba(227,167,75,.18), transparent 60%),
    rgba(26,20,13,.94);
}

.footer{
  background: rgba(20,16,11,.64);
  border-top: 1px solid rgba(255,211,138,.18);
}
.footer__copy{ color: var(--muted2); }
.to-top{ color: #f1c57d; }

/* Bring back a calm centerpiece, without flashy animation. */
.spectacle{
  display:block;
  padding-top: 26px;
}
.spectacle__halo{
  background: radial-gradient(circle at 50% 42%, rgba(255,248,229,.08), rgba(255,248,229,.02) 56%, transparent 74%);
  border-color: rgba(255,211,138,.22);
}
.lottie-spectacle__canvas{ display:none !important; }
.spectacle__chip{
  animation: none;
}

@media (max-width: 960px){
  .nav{
    background: rgba(28,22,15,.98) !important;
    border-color: rgba(255,211,138,.26);
  }
  .nav a{ color:#f0debe; }
  .nav a:active{ background: rgba(255,248,229,.08); }
  .hero__left{ padding: 18px; }
}

/* =======================================================================
   Creative Direction V2: Cinematic black + gold
   Inspired by award-style editorial portfolios.
   ======================================================================= */

:root{
  --bg0:#050505;
  --bg1:#0b0b0b;
  --bg2:#111111;
  --card: rgba(255,255,255,.03);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(228,181,4,.24);
  --text:#f5f5f5;
  --muted:#b6b6b6;
  --muted2:#8f8f8f;
  --accent:#e4b504;
  --accent2:#f3cf53;
  --accent3:#c89600;
  --shadow: 0 16px 40px rgba(0,0,0,.55);
}

body{
  background:
    radial-gradient(1200px 560px at 50% -10%, rgba(228,181,4,.09), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 38%, var(--bg2));
  color: var(--text);
}

body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.08;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.1px);
  background-size: 4px 4px;
}
main, .topbar, .footer{ position:relative; z-index:1; }

.particles--global,
.hero__aurora,
.hero__noise,
.hero__spotlight,
.three-hero,
.spectacle{
  display:none !important;
}

.topbar{
  background: rgba(5,5,5,.82) !important;
  border-bottom: 1px solid rgba(228,181,4,.2);
}
.brand__name{ color:#fff; }
.nav a{ color: var(--muted); font-weight:700; }
.nav a:hover{ color: #fff; }
.nav a.is-active{
  color: #fff;
  text-decoration-color: rgba(228,181,4,.7);
}
.header-social,
.nav-toggle{
  background: rgba(255,255,255,.03);
  border-color: rgba(228,181,4,.26);
  color:#f2d474;
}
.nav-toggle span{ background:#f2d474; }

.section{
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(228,181,4,.2), transparent);
  pointer-events:none;
}

.hero{
  padding-top: 72px;
  padding-bottom: 34px;
}
.hero__grid{ max-width: 920px; }
.hero__left{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(228,181,4,.2);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 32px;
}
.hero__title{
  font-size: clamp(2.5rem, 5vw + .6rem, 4.6rem);
  line-height: .96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.accent{
  background: linear-gradient(90deg, #fff, var(--accent2), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
}
.typed, .cursor{ color: var(--accent2); }
.hero__subtitle{
  color: #d0d0d0;
  font-size: 1.02rem;
  max-width: 65ch;
}
.pill{
  background: rgba(228,181,4,.12);
  border-color: rgba(228,181,4,.32);
  color: #ffe7a3;
}

.btn{
  border-radius: 10px;
  font-weight:800;
  letter-spacing:.02em;
}
.btn--primary{
  background: linear-gradient(135deg, #f3cf53, #e4b504);
  border-color: rgba(228,181,4,.8);
  color:#0d0d0d;
  box-shadow: 0 8px 24px rgba(228,181,4,.3);
}
.btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.16);
  color:#f1f1f1;
}

.stat,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-color: rgba(228,181,4,.2);
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}

.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.004));
  border-top: 1px solid rgba(228,181,4,.15);
  border-bottom: 1px solid rgba(228,181,4,.15);
}

.section__head h1,
.section__head h2,
.subsection-title{
  color:#fff;
}
.section__head p,
.timeline__desc,
.about-summary,
.education-list,
.cert-list,
.org-list,
.projects__hint,
.explore-hint{
  color: var(--muted);
}

.timeline__company{ color: var(--accent2); }
.timeline__meta{ color: var(--muted2); }
.timeline__item{ border-left-color: rgba(228,181,4,.4); }
.timeline__item::before{
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  border-color: #111;
}

.chip{
  background: rgba(255,255,255,.02);
  border-color: rgba(228,181,4,.24);
  color:#d8d8d8;
}
.chip.is-active{
  background: rgba(228,181,4,.2);
  border-color: rgba(228,181,4,.45);
  color:#fff;
}

input, textarea{
  background: rgba(0,0,0,.3);
  border-color: rgba(228,181,4,.2);
  color:#f5f5f5;
}
input::placeholder, textarea::placeholder{ color:#8f8f8f; }
input:focus, textarea:focus{
  border-color: rgba(228,181,4,.55);
  box-shadow: 0 0 0 4px rgba(228,181,4,.16);
}

.link-btn{
  background: rgba(255,255,255,.03);
  border-color: rgba(228,181,4,.24);
  color:#fff;
}
.link-btn:hover{
  background: rgba(228,181,4,.16);
  border-color: rgba(228,181,4,.44);
}

.modal{
  border-color: rgba(228,181,4,.24);
  background:
    radial-gradient(900px 380px at 60% -5%, rgba(228,181,4,.12), transparent 58%),
    rgba(8,8,8,.95);
}

.footer{
  background: rgba(5,5,5,.85);
  border-top: 1px solid rgba(228,181,4,.18);
}
.footer__copy{ color: var(--muted2); }
.to-top{ color: var(--accent2); }

/* Loader sequence */
body.is-loading{
  overflow: hidden;
}
.site-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(520px 240px at 50% 46%, rgba(228,181,4,.12), transparent 70%),
    #050505;
  opacity:1;
  transition: opacity .5s ease, visibility .5s ease;
}
.site-loader.is-hide{
  opacity:0;
  visibility:hidden;
}
.site-loader__inner{
  text-align:center;
}
.site-loader__mark{
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height:1;
  letter-spacing: -.03em;
  color: #f7da7e;
}
.site-loader__line{
  width: 140px;
  height: 2px;
  margin: 12px auto 10px;
  background: linear-gradient(90deg, transparent, #e4b504, transparent);
  animation: loaderPulse 1.1s ease-in-out infinite;
}
.site-loader__text{
  margin:0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9f8851;
}
@keyframes loaderPulse{
  0%,100%{ transform: scaleX(.65); opacity:.7; }
  50%{ transform: scaleX(1); opacity:1; }
}

@media (max-width: 960px){
  .topbar{
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }
  .topbar__inner{
    position: relative;
    gap: 10px;
    padding-right: 50px;
  }
  .brand{
    flex: 0 1 auto;
  }
  .brand__name{
    font-size: 17px;
    letter-spacing: .02em;
  }
  .topbar__trailing{
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 6px;
  }
  .header-socials{
    gap: 6px;
  }
  .header-social{
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .nav{
    background: rgba(10,10,10,.97) !important;
    border-color: rgba(228,181,4,.26);
  }
  .nav a{
    color:#f0f0f0;
  }
  .nav a:active{
    background: rgba(228,181,4,.15);
  }
  .nav-toggle{
    position: absolute !important;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 12;
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

/* Captions + gallery composition */
.modal__gallery{
  gap: 14px;
}
.modal__fig{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.modal__cap{
  font-size: 12px;
  line-height: 1.4;
  color: rgba(221,201,166,.88);
  padding: 0 2px;
}

/* 8pt rhythm + typography scale (per breakpoint) */
:root{
  --sp1: 8px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 32px;
  --sp5: 40px;
  --sp6: 48px;
  --sp7: 56px;
  --sp8: 64px;
  --sp9: 72px;

  --h-hero: clamp(2.2rem, 4.4vw + 0.6rem, 3.8rem);
  --h-section: clamp(1.55rem, 1.9vw + 1rem, 2.2rem);
  --h-sub: clamp(1.25rem, 1.2vw + 1rem, 1.55rem);
  --p-lead: 1.02rem;
}

.section{
  padding: var(--sp9) 0;
}
.section__head{
  gap: var(--sp2);
  margin-bottom: var(--sp4);
}
.section__head h1,
.section__head h2{
  font-size: var(--h-section);
  letter-spacing: -0.015em;
}
.subsection-title{
  font-size: var(--h-sub);
  letter-spacing: -0.01em;
}
.hero{
  padding: var(--sp7) 0 var(--sp4);
}
.hero__left{
  padding: var(--sp4);
}
.hero__title{
  font-size: var(--h-hero);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__subtitle{
  font-size: var(--p-lead);
  line-height: 1.65;
}
.hero__actions{
  gap: var(--sp2);
  margin: var(--sp3) 0 var(--sp3);
}
.stats{
  gap: 12px;
  margin-top: var(--sp3);
}

@media (max-width: 980px){
  :root{
    --sp9: 56px;
    --sp7: 48px;
    --sp4: 24px;
    --p-lead: 0.98rem;
  }
}

@media (max-width: 760px){
  :root{
    --sp9: 48px;
    --sp7: 40px;
    --sp4: 18px;
    --p-lead: 0.98rem;
  }
  .hero__title{
    line-height: 1.1;
  }
}

/* =======================================================================
   Interaction polish: custom cursor, progress, transitions, stagger reveal
   ======================================================================= */

.scroll-progress{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar{
  display:block;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(228,181,4,.25), rgba(228,181,4,.95));
  box-shadow: 0 0 14px rgba(228,181,4,.55);
}

.site-transition{
  position: fixed;
  inset: 0;
  background: #040404;
  z-index: 9998;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
body.is-leaving .site-transition{
  transform: scaleY(1);
}
body.is-leaving main,
body.is-leaving .topbar,
body.is-leaving .footer{
  opacity: .18;
  transition: opacity .16s ease;
}

.is-reveal{
  opacity:0;
  transform: translateY(20px) scale(.995);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    transform .72s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine){
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor [role="button"],
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor .chip,
  html.has-custom-cursor .project-card{
    cursor: none !important;
  }

  .custom-cursor{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
    pointer-events: none;
    will-change: transform;
    transition: opacity .18s ease;
  }
  .custom-cursor__halo{
    position: absolute;
    left: -24px;
    top: -24px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(228,181,4,.16), rgba(228,181,4,0) 70%);
    filter: blur(2px);
    z-index: 0;
    animation: cursorHaloPulse 1.8s ease-in-out infinite;
  }
  .custom-cursor__hammer{
    position: absolute;
    left: -4px;
    top: -15px;
    width: 8px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(243,207,83,.96), rgba(228,181,4,.72));
    box-shadow: 0 0 14px rgba(228,181,4,.40);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 1;
    transform: rotate(-28deg);
    transform-origin: 50% 80%;
  }
  .custom-cursor__hammer-head{
    position: absolute;
    left: -14px;
    top: -16px;
    width: 22px;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(232,236,240,.95), rgba(174,184,191,.86));
    border: 1px solid rgba(199,164,95,.35);
    box-shadow: 0 0 10px rgba(170,180,190,.28);
    z-index: 2;
    transform: rotate(-28deg);
    transform-origin: 50% 75%;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .custom-cursor__pivot{
    position: absolute;
    left: -2px;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #fff2c9;
    box-shadow: 0 0 10px rgba(243,207,83,.65);
    z-index: 3;
  }
  .custom-cursor.is-hover .custom-cursor__hammer{
    transform: scale(1.2) rotate(-8deg);
    box-shadow: 0 0 18px rgba(243,207,83,.66);
  }
  .custom-cursor.is-hover .custom-cursor__hammer-head{
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 0 14px rgba(190,200,210,.44);
  }
  .custom-cursor.is-down .custom-cursor__hammer{
    transform: scale(.95) rotate(20deg);
  }
  .custom-cursor.is-down .custom-cursor__hammer-head{
    transform: scale(.95) rotate(20deg);
  }
  .custom-cursor.is-hidden{
    opacity: 0;
  }
  @keyframes cursorHaloPulse{
    0%,100%{ opacity:.65; transform: scale(.92); }
    50%{ opacity:1; transform: scale(1.08); }
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-progress__bar{ transition: none !important; }
  .site-transition{ display:none !important; }
  .custom-cursor{ display:none !important; }
  .is-reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* =======================================================================
   Readability pass: high-contrast text across the full site
   ======================================================================= */

:root{
  --text:#f7f7f7;
  --muted:#d3d3d3;
  --muted2:#b6b6b6;
}

body{
  color: var(--text);
}

/* Navigation + top bar */
.brand__name,
.nav a,
.nav a.is-active,
.header-social{
  color:#f7f7f7;
}
.nav a{
  opacity:.9;
}
.nav a:hover,
.nav a.is-active{
  opacity:1;
}

/* Main heading readability */
.hero__title{
  color:#f9f9f9;
}
.hero__subtitle,
.section__head p,
.explore-hint,
.projects__hint,
.about-summary,
.timeline__desc,
.timeline-bullets,
.education-list,
.cert-list,
.org-list,
.skill-card__meta,
.feature p,
.home-google__p,
.home-bento__v,
.mini-card__body,
.mini-card__hint,
.contact__status,
.footer__copy{
  color:#d6d6d6;
}

.timeline__meta{
  color:#bbbbbb;
}

/* Card surfaces slightly darker so white text pops */
.hero__left,
.stat,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(228,181,4,.26);
}

/* Labels, headings inside cards */
.feature h2,
.feature h3,
.skill-card__top h2,
.project-card__title,
.stat__value,
.subsection-title,
.section__head h1,
.section__head h2,
.about-aside-card__title,
.mini-card__title,
.timeline__title{
  color:#f8f8f8;
}

.timeline__company{
  color:#ffd66f;
}

/* Buttons and chips */
.btn--primary{
  color:#111;
}
.btn--ghost{
  color:#f5f5f5;
}
.chip{
  color:#ececec;
}
.chip.is-active{
  color:#111;
  background:#f1c24f;
}

/* Inputs */
input, textarea{
  color:#f8f8f8;
}
input::placeholder,
textarea::placeholder{
  color:#9f9f9f;
}

/* Modal captions */
.modal__cap{
  color:#d9d9d9;
}

/* =======================================================================
   WCAG contrast hardening (final accessibility layer)
   Targets ~4.5:1 for normal text and stronger for small/meta text.
   ======================================================================= */

:root{
  --text:#f4f4f4;
  --muted:#d7d7d7;
  --muted2:#c3c3c3;
}

html, body{
  color: var(--text);
}

/* Primary copy + small copy */
p, li, label span,
.hero__subtitle,
.section__head p,
.timeline__desc,
.timeline-bullets,
.education-list,
.cert-list,
.org-list,
.about-summary,
.home-google__p,
.skill-card__meta,
.feature p,
.projects__hint,
.explore-hint,
.mini-card__body,
.mini-card__hint,
.contact__status,
.footer__copy{
  color: var(--muted) !important;
}

.timeline__meta,
.about-meta,
.stat__label{
  color: var(--muted2) !important;
}

/* Headings and key values */
h1, h2, h3, h4,
.hero__title,
.subsection-title,
.timeline__title,
.project-card__title,
.stat__value,
.mini-card__title,
.about-aside-card__title{
  color: #fafafa !important;
}

/* Link contrast */
a{
  color:#ffe08d;
}
a:hover{
  color:#ffecb5;
}
.nav a,
.to-top{
  color:#f1f1f1 !important;
}
.nav a.is-active{
  color:#ffffff !important;
}
.timeline__company{
  color:#ffd973 !important;
}

/* Form readability */
input, textarea{
  color:#f7f7f7 !important;
  background: rgba(0,0,0,.4) !important;
  border-color: rgba(228,181,4,.32) !important;
}
input::placeholder,
textarea::placeholder{
  color:#b8b8b8 !important;
}

/* Accessible focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid #ffe08d;
  outline-offset: 2px;
}

/* Keep strong contrast in accent controls */
.chip.is-active{
  background:#f1c24f !important;
  color:#111 !important;
}
.btn--primary{
  color:#111 !important;
}
.btn--ghost,
.link-btn{
  color:#f5f5f5 !important;
}

/* -----------------------------------------------------------------------
   Desktop alignment tuning (hero balance)
   ----------------------------------------------------------------------- */
@media (min-width: 1024px){
  .hero{
    padding-top: 84px;
    padding-bottom: 46px;
  }
  .hero__content{
    display:flex;
    justify-content:center;
  }
  .hero__grid{
    width: min(980px, 100%);
    max-width: min(980px, 100%);
    margin: 0 auto;
  }
  .hero__left{
    margin: 0 auto;
  }
}

/* -----------------------------------------------------------------------
   Websites page: landscape link showcase
   ----------------------------------------------------------------------- */
.website-showcase{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.website-strip{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px 18px;
  align-items:center;
  padding: 22px 22px;
  border-radius: 20px;
  border: 1px solid rgba(228,181,4,.3);
  background:
    linear-gradient(120deg, rgba(228,181,4,.1), rgba(255,255,255,.02) 22%, rgba(255,255,255,.02) 100%);
  text-decoration:none;
  color: inherit;
  position:relative;
  overflow:hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.website-strip::before{
  content: attr(data-domain);
  position:absolute;
  right:18px;
  bottom:12px;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: rgba(255,255,255,.035);
  pointer-events:none;
}
.website-strip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(112deg, transparent 0%, transparent 46%, rgba(255,255,255,.06) 52%, transparent 60%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.website-strip:hover{
  transform: translateY(-2px) scale(1.005);
  border-color: rgba(243,207,83,.55);
  background:
    linear-gradient(120deg, rgba(228,181,4,.18), rgba(255,255,255,.03) 25%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 20px 44px rgba(0,0,0,.34);
}
.website-strip:hover::after{
  transform: translateX(120%);
}
.website-strip__index{
  position:absolute;
  left: 14px;
  top: 12px;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,232,170,.72);
  font-weight: 800;
}
.website-strip__tag{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid rgba(243,207,83,.45);
  color:#ffdc84;
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-weight: 800;
  margin-left: 26px;
}
.website-strip__domain{
  grid-column: 1 / 2;
  font-size: clamp(1.5rem, 2.1vw + .62rem, 2.34rem);
  font-weight: 950;
  letter-spacing: -0.03em;
  color:#fff8de;
  line-height: 1.05;
}
.website-strip__title{
  grid-column: 1 / 2;
  font-size: 13px;
  font-weight: 850;
  color:#f7d98c;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.website-strip__summary{
  grid-column: 1 / 2;
  font-size: 14px;
  color:#e2e2e2;
  line-height: 1.5;
  max-width: 64ch;
}
.website-strip__cta{
  grid-column: 2 / 3;
  grid-row: 1 / span 4;
  align-self:center;
  justify-self:end;
  padding: 10px 14px;
  border-radius: 12px;
  border:1px solid rgba(243,207,83,.45);
  color:#121212;
  background: linear-gradient(135deg, #f3cf53, #e4b504);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.website-strip--amber{
  border-color: rgba(244,193,110,.35);
}
.website-strip--bronze{
  border-color: rgba(198,150,88,.38);
}
.website-strip--honey{
  border-color: rgba(255,216,138,.34);
}
.website-strip--sand{
  border-color: rgba(217,187,125,.34);
}

@media (max-width: 760px){
  .website-strip{
    grid-template-columns: 1fr;
    gap:9px;
    padding: 16px;
  }
  .website-strip__cta{
    grid-column: 1 / 2;
    grid-row: auto;
    justify-self:start;
    margin-top:4px;
  }
  .website-strip__domain{
    font-size: 1.42rem;
  }
  .website-strip__tag{
    margin-left: 20px;
  }
  .website-strip__index{
    left: 10px;
    top: 10px;
  }
}

/* -----------------------------------------------------------------------
   Mobile social icons (always visible, compact)
   ----------------------------------------------------------------------- */
@media (max-width: 480px){
  .header-socials{
    display: flex !important;
    gap: 4px;
  }
  .header-social{
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .header-social__icon{
    transform: scale(.82);
    transform-origin: center;
  }
  .topbar__trailing{
    gap: 6px;
  }
}

@media (max-width: 360px){
  .brand__name{
    display: none;
  }
}

/* Final wordmark tuning: GURII lettering */
.topbar .brand__name{
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .11em;
  font-size: 12.5px;
  line-height: 1;
}
.topbar .brand__name-g{
  transform: none;
  margin-right: .045em;
  letter-spacing: .08em;
}

/* -----------------------------------------------------------------------
   Homepage conversion flow sections
   ----------------------------------------------------------------------- */
.home-proof .proof__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap:14px;
}
.proof__clients,
.proof__stats,
.proof__machines{
  border:1px solid rgba(228,181,4,.22);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  padding:16px;
}
.proof__title{
  margin:0 0 12px;
  font-size: 15px;
  font-weight: 900;
}
.proof__chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.proof__chips li a{
  display:inline-flex;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(228,181,4,.3);
  background: rgba(255,255,255,.02);
  color:#f3f3f3;
  text-decoration:none;
  font-size: 12px;
  font-weight: 700;
}
.proof__stats-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.proof__list{
  margin:0;
  padding-left: 16px;
  color: var(--muted);
  line-height:1.6;
  font-size: 14px;
}
.proof__list li + li{
  margin-top:8px;
}

.home-categories .feature,
.home-usp .feature{
  height: 100%;
}

.home-cta__card{
  border:1px solid rgba(228,181,4,.28);
  border-radius: calc(var(--radius2) + 2px);
  background:
    linear-gradient(120deg, rgba(228,181,4,.12), rgba(255,255,255,.02) 30%, rgba(255,255,255,.02));
  padding: 22px;
  text-align:center;
}
.home-cta__card h2{
  margin:0;
  font-size: clamp(1.35rem, 2.1vw + .5rem, 2.1rem);
}
.home-cta__card p{
  margin:10px 0 0;
  color: var(--muted);
}
.home-cta .hero__actions{
  justify-content:center;
}

@media (max-width: 980px){
  .home-proof .proof__grid{
    grid-template-columns: 1fr;
  }
}

.blade-filter{
  border:1px solid rgba(216,177,95,.28);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  padding: 16px;
}
.blade-filter__controls{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.blade-filter__controls label{
  display:flex;
  flex-direction:column;
}
.blade-filter__controls label span{
  margin-bottom:6px;
  font-size:12px;
  color: var(--muted2);
  font-weight: 700;
}
.blade-filter__meta{
  margin: 12px 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.blade-filter__results{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.blade-card{
  border:1px solid rgba(216,177,95,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.blade-card h3{
  margin:0;
  font-size: 15px;
}
.blade-card p{
  margin:8px 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.blade-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.blade-filter__empty{
  margin:0;
  color: var(--muted);
}

@media (max-width: 980px){
  .blade-filter__controls,
  .blade-filter__results{
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   Visual Identity Reset (user brief)
   - 2 primary colors: dark green + gold
   - Single font family: Inter stack
   - High contrast dark UI
   - No random gradients / no clipart icon look
   ======================================================================= */

:root{
  --brand-dark: #0f2f27;
  --brand-dark-2: #10261f;
  --brand-gold: #d8b15f;
  --brand-gold-2: #e7c980;
  --text: #f3f5f2;
  --muted: #c4d0c8;
  --muted2: #9fb0a5;
  --surface: #132b23;
  --surface-2: #162f27;
  --stroke: rgba(216,177,95,.34);
}

html, body,
button, input, textarea, select{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body{
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2)) !important;
  color: var(--text) !important;
}

/* Remove random decorative gradients/noise */
body::before,
.hero__aurora,
.hero__noise,
.hero__spotlight,
.particles--global,
.spectacle,
.three-hero,
.lottie-spectacle__canvas{
  display: none !important;
}

.topbar,
.footer{
  background: rgba(12,34,28,.94) !important;
  border-color: var(--stroke) !important;
}

.section--alt{
  background: rgba(20,42,34,.45) !important;
  border-color: rgba(216,177,95,.22) !important;
}

.hero__left,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel,
.proof__clients,
.proof__stats,
.proof__machines,
.website-strip{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

.hero__title,
.section__head h1,
.section__head h2,
.subsection-title,
.feature h2, .feature h3,
.project-card__title,
.timeline__title,
.mini-card__title,
.about-aside-card__title{
  color: var(--text) !important;
}

.hero__subtitle,
.section__head p,
.feature p,
.skill-card__meta,
.timeline__desc,
.timeline-bullets,
.timeline__meta,
.about-summary,
.about-meta,
.education-list,
.cert-list,
.org-list,
.projects__hint,
.explore-hint,
.home-google__p,
.proof__list,
.proof__chips li a{
  color: var(--muted) !important;
}

.accent,
.timeline__company,
.typed,
.cursor{
  color: var(--brand-gold-2) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.btn--primary,
.website-strip__cta,
.chip.is-active{
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #1a1a1a !important;
}

.btn--ghost,
.chip,
.link-btn{
  background: var(--surface-2) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

.nav a,
.brand__name,
.to-top{
  color: var(--text) !important;
}
.nav a.is-active{
  text-decoration-color: var(--brand-gold) !important;
}

/* Replace clipart-style icon vibe with minimal geometric markers */
.feature__icon,
.skill-card__emoji,
.project-card__emoji,
.about-aside-list__ico{
  position: relative;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--brand-gold) !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  display: inline-block !important;
}
.feature__icon::before,
.skill-card__emoji::before,
.project-card__emoji::before,
.about-aside-list__ico::before{
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--brand-gold);
}

/* =======================================================================
   Industrial Premium Direction (final)
   Dark theme + bold typography + machinery brand feel
   ======================================================================= */

:root{
  --brand-dark:#0b0f12;
  --brand-dark-2:#13191d;
  --brand-gold:#c8a35a;
  --brand-gold-2:#dec183;
  --text:#f2f4f5;
  --muted:#b9c1c5;
  --muted2:#8f9ba2;
  --surface:#171f24;
  --surface-2:#1d262c;
  --stroke:rgba(200,163,90,.32);
}

body{
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2)) !important;
  color: var(--text) !important;
}

.topbar,
.footer{
  background: rgba(10,14,17,.96) !important;
  border-color: var(--stroke) !important;
}

.section{
  padding-top: 64px;
  padding-bottom: 64px;
}
.section--alt{
  background: rgba(255,255,255,.015) !important;
}

.hero__title,
.section__head h1,
.section__head h2,
.subsection-title{
  text-transform: uppercase;
  letter-spacing: .015em;
  font-weight: 900 !important;
}
.section__head h1,
.section__head h2{
  font-size: clamp(1.8rem, 2.3vw + .8rem, 2.7rem) !important;
}

.hero__left,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel,
.proof__clients,
.proof__stats,
.proof__machines,
.website-strip,
.blade-filter,
.blade-card,
.quick-inquiry,
.home-cta__card{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

.hero__subtitle,
.section__head p,
.feature p,
.skill-card__meta,
.timeline__desc,
.timeline-bullets,
.timeline__meta,
.about-summary,
.about-meta,
.education-list,
.cert-list,
.org-list,
.projects__hint,
.explore-hint,
.home-google__p,
.proof__list,
.proof__chips li a,
.blade-card p,
.quick-inquiry__hint,
.footer__copy{
  color: var(--muted) !important;
}

.timeline__company,
.accent,
.typed,
.cursor,
.feature__cta{
  color: var(--brand-gold-2) !important;
}

.btn--primary,
.website-strip__cta,
.chip.is-active{
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #121212 !important;
}

.btn--ghost,
.link-btn,
.chip{
  background: var(--surface-2) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

.proof__chips li a{
  background: var(--surface-2) !important;
  border-color: var(--stroke) !important;
}

.nav a,
.brand__name,
.to-top{
  color: var(--text) !important;
}
.nav a.is-active{
  text-decoration-color: var(--brand-gold) !important;
}

/* Minimal motion only */
.feature--link:hover,
.project-card:hover,
.website-strip:hover{
  transform: translateY(-2px) !important;
}

@media (max-width: 760px){
  .section{
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero__title{
    font-size: clamp(2rem, 8vw + .4rem, 2.9rem) !important;
  }
}

.hero__subline{
  margin: 4px 0 20px;
  color: var(--muted) !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Identity pillars */
.identity-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.identity-card{
  position:relative;
  border:1px solid var(--stroke);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px;
}
.identity-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 40px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border:1px solid rgba(216,177,95,.5);
  color: var(--brand-gold-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.identity-card h3{
  margin: 12px 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.identity-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

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

/* -----------------------------------------------------------------------
   Conversion layer
   ----------------------------------------------------------------------- */
.wa-sticky{
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 9000;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(216,177,95,.5);
  background: #1b3d33;
  color: #f5f5f5 !important;
  text-decoration:none;
  box-shadow: 0 12px 26px rgba(0,0,0,.3);
  font-weight: 800;
  font-size: 13px;
}
.wa-sticky__icon{font-size: 15px;}
.wa-sticky:hover{
  background:#21493e;
}

/* -----------------------------------------------------------------------
   Skills: capability stack
   ----------------------------------------------------------------------- */
.capability-stack{
  margin: 18px 0 20px;
}
.capability-stack__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.capability-card{
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  padding: 16px;
  overflow: hidden;
}
.capability-card::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
  opacity: .95;
}
.capability-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.capability-card__idx{
  min-width: 38px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(216,177,95,.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}
.capability-card__track{
  margin: 0;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  font-weight: 800;
}
.capability-card h2{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text);
}
.capability-card h2 span{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-gold-2);
  text-transform: none;
  letter-spacing: .01em;
}
.capability-card p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.capability-card__chips{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.capability-card__chips span{
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 750;
}
.capability-rail{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.capability-rail span{
  border: 1px dashed rgba(216,177,95,.45);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255,255,255,.01);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.skill-grid--support{
  margin-top: 14px;
}

@media (max-width: 980px){
  .capability-stack__grid{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   About: thoughts / philosophy
   ----------------------------------------------------------------------- */
.thoughts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.thought-card{
  border-radius: 16px;
}
.thought-card__kicker{
  margin: 0 0 8px;
  color: var(--brand-gold-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 980px){
  .thoughts-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px){
  .thoughts-grid{
    grid-template-columns: 1fr;
  }
}

.quick-inquiry{
  margin-top: 16px;
  border:1px solid rgba(216,177,95,.28);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
  padding: 16px;
}
.quick-inquiry__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}
.quick-inquiry__hint{
  margin:8px 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.quick-inquiry__form{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  align-items:end;
}
.quick-inquiry__form label{
  display:flex;
  flex-direction:column;
}
.quick-inquiry__form label span{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
}
.quick-inquiry__form .btn{
  width:100%;
  min-height: 44px;
}

@media (max-width: 980px){
  .quick-inquiry__form{
    grid-template-columns: 1fr;
  }
}

/* =======================================================================
   Design Direction Lock
   Dark + premium + industrial + minimal
   Headings: Inter Tight/Satoshi style (fallback)
   Body: Inter
   Palette: charcoal base + metallic gold + subtle green accent
   ======================================================================= */
:root{
  --font-heading: "Inter Tight", "Inter", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-dark: #0b0f12;
  --brand-dark-2: #141a1f;
  --brand-gold: #c7a45f;
  --brand-gold-2: #dfc58e;
  --brand-green: #2f6a55;
  --brand-green-2: #3f8068;
  --surface: #171d22;
  --surface-2: #1f272d;
  --stroke: rgba(199,164,95,.30);
  --text: #f2f4f5;
  --muted: #b4bdc2;
  --muted2: #8f9aa1;
}

html, body, button, input, textarea, select{
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.hero__title,
.section__head h1,
.section__head h2,
.subsection-title,
.timeline__title,
.project-card__title,
.mini-card__title,
.about-aside-card__title,
.capability-card h2{
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

body{
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2)) !important;
  color: var(--text) !important;
}

.topbar,
.footer{
  background: rgba(10,13,16,.96) !important;
  border-color: var(--stroke) !important;
}

.hero__left,
.feature,
.skill-card,
.project-card,
.home-bento__cell,
.home-google__details,
.about-aside-card,
.mini-card,
.contact__form,
.modal__panel,
.proof__clients,
.proof__stats,
.proof__machines,
.website-strip,
.blade-filter,
.blade-card,
.quick-inquiry,
.home-cta__card,
.capability-card{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
}

.btn--primary,
.website-strip__cta,
.chip.is-active{
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #121212 !important;
}

.btn--ghost,
.link-btn,
.chip,
.capability-card__chips span{
  background: var(--surface-2) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

.accent,
.timeline__company,
.typed,
.cursor,
.feature__cta,
.thought-card__kicker,
.capability-card h2 span{
  color: var(--brand-gold-2) !important;
}

/* Hero typewriter: caret follows text naturally */
.hero__title .typed{
  display: inline;
  font-size: 0.86em;
  line-height: 1.05;
  white-space: nowrap;
  vertical-align: baseline;
  letter-spacing: 0.005em;
  text-transform: none;
  position: relative;
}
.hero__title .typed::after{
  content: "|";
  display: inline-block;
  margin-left: 2px;
  color: var(--brand-gold-2);
  animation: blink 1.05s steps(2) infinite;
}
.hero__title .cursor{
  display: none !important;
}
.hero__title .hero__line--typed{
  min-height: 1.4em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .16em;
  overflow-wrap: normal;
  word-break: normal;
}
.hero__title .typed-prefix{
  display: inline-block;
  font-size: 0.92em;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (max-width: 760px){
  .hero__title .hero__line--typed{
    min-height: 2.25em;
    gap: .1em;
  }
  .hero__title .typed-prefix{
    font-size: .86em;
  }
  .hero__title .typed{
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    font-size: 0.78em;
    white-space: nowrap;
    overflow: visible;
  }
}

/* Final guard: prevent accidental page-width overflow on mobile */
html, body{
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Subtle industrial green only for secondary action cues */
.wa-sticky{
  background: var(--brand-green) !important;
  border-color: rgba(63,128,104,.65) !important;
}
.wa-sticky:hover{
  background: var(--brand-green-2) !important;
}
.header-social--whatsapp:hover{
  border-color: rgba(63,128,104,.62) !important;
  background: rgba(63,128,104,.20) !important;
}

/* Remove remaining neon/purple traces from interaction accents */
.bar__fill{
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-2), rgba(63,128,104,.72)) !important;
  box-shadow: 0 10px 24px rgba(199,164,95,.20) !important;
}
.tag.tag--accent{
  background: rgba(199,164,95,.16) !important;
  border-color: rgba(199,164,95,.30) !important;
  color: var(--text) !important;
}
input:focus, textarea:focus{
  border-color: rgba(199,164,95,.55) !important;
  box-shadow: 0 0 0 4px rgba(199,164,95,.18) !important;
}

/* Homepage: What I'm Building Right Now */
.now-building__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Experiments page (mobile-first interactive brick wall) */
.experiments__hint{
  margin: 10px 0 0;
  color: var(--brand-gold-2) !important;
  font-weight: 700;
}
.experiments-stage{
  position: relative;
  margin-top: 14px;
  min-height: 66vh;
  border-radius: 18px;
  border: 1px solid rgba(115,62,44,.68);
  background:
    linear-gradient(180deg, rgba(58,34,27,.62), rgba(45,26,21,.82)),
    #2e1a15;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.experiments-wall{
  position: absolute;
  inset: 0;
}
.exp-brick{
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid rgba(136,66,42,.9);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,180,138,.18), rgba(255,255,255,.02) 30%),
    linear-gradient(180deg, #a74f31, #8f4329 55%, #7a3722);
  color: #fff4e5;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.exp-brick.is-hit{
  border-color: rgba(247,197,128,.96);
  box-shadow: 0 0 0 2px rgba(247,197,128,.30), 0 10px 20px rgba(0,0,0,.3);
}
@media (min-width: 981px){
  .experiments-stage{
    min-height: 72vh;
  }
}
.now-building__meta{
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(199,164,95,.34);
  border-radius: 999px;
  background: rgba(199,164,95,.08);
  color: var(--brand-gold-2) !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  letter-spacing: .02em;
}
.now-card{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  padding: 16px;
}
.now-card__status{
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(199,164,95,.42);
  background: rgba(199,164,95,.10);
  color: var(--brand-gold-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.now-card h3{
  margin: 0 0 8px;
  font-family: var(--font-heading) !important;
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}
.now-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
@media (max-width: 980px){
  .now-building__grid{
    grid-template-columns: 1fr;
  }
}

/* Motion restore: keep premium, bring back life */
#home .hero__aurora,
#home .hero__noise,
#home .hero__spotlight{
  display: block !important;
}
#home .hero__aurora{
  opacity: .36;
}
#home .hero__noise{
  opacity: .12;
}
#home .hero__spotlight{
  opacity: .22;
}
#home .hero__blob{
  animation-duration: 16s;
}
#three-hero{
  display: block !important;
  opacity: .34;
  filter: saturate(.68) brightness(.78);
}