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

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

:root{
  /* Flat modern palette — clean cards, single soft drop-shadow, no inset/emboss */ 
  --bg:#f7f8fb;
  --surface:#ffffff;
  --accent:#3355FF;
  --accent-glow:rgba(51,85,255,.24);
  --accent-hover:#2543D6;
  --accent-soft:#eef1ff;
  --text:#12162b;
  --muted:#565f7a;
  --dim:#8890a8;
  --border:#e6e8f0;
  --nav-h:96px;
  --max-w:1140px;
  --font-heading:'Sora', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --shadow-card: 0 1px 2px rgba(18,22,43,.04), 0 10px 28px -10px rgba(18,22,43,.10);
  --shadow-card-hover: 0 4px 10px rgba(18,22,43,.05), 0 22px 44px -12px rgba(18,22,43,.16);
  --shadow-pop: 0 14px 34px -10px var(--accent-glow);
}

html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
}
a,button{outline:none;-webkit-tap-highlight-color:transparent}
a:focus,button:focus{outline:none}
a:focus-visible,button:focus-visible{outline:none}
a{text-decoration:none}
input,textarea{font-family: var(--font-body); user-select:text!important;-webkit-user-select:text!important}
body.menu-open{overflow:hidden}
::-webkit-scrollbar{width:0;background:transparent}
html{scrollbar-width:none}

.container{width:90%;max-width:var(--max-w);margin:0 auto}

/* Background canvas must be taken out of normal document flow,
   otherwise its JS-set width/height reserves real space on the page
   and pushes all content below it down. */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  display:block;
}

h1,h2,h3,h4{color:var(--text);font-family:var(--font-heading);letter-spacing:-.02em}

/* NAV — floating centered pill, detached from the top edge */
#header{
  position:fixed;
  top:1.1rem;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 2.5rem);
  max-width:900px;
  height:auto;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:100px;
  padding:.6rem 1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  z-index:1000;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
#header.scrolled{background:rgba(255,255,255,.94);box-shadow:var(--shadow-card-hover);border-color:rgba(230,232,240,.9)}
.logo{
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
  position: relative;
  z-index: 1001;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.logo-dot{color:var(--text)}

#nav{
  display:flex;
  align-items:center;
  gap:1.7rem;
  margin:0 auto;
}
#nav a{
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius:100px;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
#nav a:hover{color:var(--text);background:var(--accent-soft)}
#nav a.active{color:var(--accent);font-weight:600;background:var(--accent-soft)}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:.6rem 1.3rem;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  flex-shrink:0;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
/* Arrow icon used inside the "Let's Talk" pill (desktop nav). Using an
   inline SVG here (instead of the old "↗" unicode character) means the
   icon renders identically everywhere — some mobile browsers (notably
   iOS Safari) swap that unicode arrow for a colorful emoji-style glyph,
   which looked out of place next to the plain text label. */
.cta-arrow{flex-shrink:0}
/* The "#header" prefix on every state below is required, not decorative:
   ".nav-cta" alone (0 IDs, 1 class) loses a specificity fight against the
   broader "#nav a" / "#nav a:hover" rules above (1 ID, 1 type), because an
   ID always outweighs any number of classes. That mismatch was why the
   "Let's Talk" pill only rendered correctly (black, no hover halo) on
   contact.html — where an extra ".active" class happened to win — and
   fell back to the muted grey text / light-blue hover background
   everywhere else. Scoping with "#header" gives these rules an ID of
   their own so they always win, regardless of ".active".
*/
#header .nav-cta,
#header .nav-cta:hover,
#header .nav-cta:active,
#header .nav-cta.active,
#header .nav-cta:visited{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
/* keep a light lift/shadow so it still feels interactive, without any
   color or background change on hover/click */
#header .nav-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-hover)}
#header .nav-cta:active{transform:translateY(0);box-shadow:var(--shadow-card)}

.hamburger{display:none;background:none;border:none;cursor:pointer;position:relative;z-index:1001;width:38px;height:38px;flex-shrink:0;border-radius:50%;transition:background .2s ease}
.hamburger:hover{background:var(--accent-soft)}
.hamburger span{position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s ease,opacity .3s ease;transform:translate(-50%,-50%) translateY(0) rotate(0)}
.hamburger span:nth-child(1){transform:translate(-50%,-50%) translateY(-6px) rotate(0)}
.hamburger span:nth-child(3){transform:translate(-50%,-50%) translateY(6px) rotate(0)}
.hamburger.open span:nth-child(1){transform:translate(-50%,-50%) translateY(0) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translate(-50%,-50%) translateY(0) rotate(-45deg)}

/* MOBILE NAV — stacked pill cards, matching the reference screenshot.
   Each link is its own rounded card; Contact keeps the same card style
   but with blue text instead of a solid filled button. */
.mobile-nav{
  display:flex;
  position:fixed;
  inset:0;
  background:var(--bg);
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:calc(var(--nav-h) - .5rem) 1.5rem 1.5rem;
  z-index:998;
  opacity:0;
  visibility:hidden;
  transform:scale(.97);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  padding:calc(var(--nav-h) - .5rem) 1.5rem 1.5rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:998;
}
.mobile-nav::before,
.mobile-nav::after{
  content:"";
  margin:auto 0;
}
.mobile-nav.open{opacity:1;visibility:visible;transform:scale(1)}

.mobile-nav a{
  width:100%;
  max-width:380px;
  text-align:center;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;
  padding:1.05rem 1.5rem;
  box-shadow:var(--shadow-card);
  transition:color .2s ease, box-shadow .2s ease, transform .15s ease;
  opacity: 0;
  transform: translateY(12px);
  /* without this, a short viewport (like a squeezed DevTools device
     panel) can flex-shrink these pills down to nothing instead of
     letting the menu scroll — this forces every pill, including the
     last "Let's Talk" one, to keep its full size and just scroll into
     view via .mobile-nav's own overflow-y:auto instead of vanishing */
  flex-shrink:0;
}
.mobile-nav a:hover{color:var(--accent);box-shadow:var(--shadow-card-hover)}
.mobile-nav a.active{color:var(--accent)}

/* Contact — same pill card as the rest, but blue text instead of a filled button.
   display:flex + justify-content:center keeps the label and arrow sitting
   right next to each other (like the desktop "Let's Talk" pill) instead of
   the label being centered alone with the arrow off on the far edge. */
.mobile-nav a.mnav-cta{
  background:var(--surface);
  color:var(--text);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.mobile-nav a.mnav-cta:hover{
  color:var(--accent-hover);
  background:var(--surface);
}
.mnav-cta-label{
  display:inline;
}
/* Sits directly after the label text now (normal flow, small gap) instead
   of being pinned to the pill's right edge. Still a plain vector icon
   rather than the old unicode "↗" character, so it renders identically on
   every platform instead of iOS swapping it for a colorful emoji glyph. */
.mnav-cta-arrow{
  flex-shrink:0;
}

.mobile-nav.open a{opacity:1;transform:translateY(0);transition:opacity .35s ease,transform .35s ease}
.mobile-nav.open a:nth-child(1){transition-delay:.07s}
.mobile-nav.open a:nth-child(2){transition-delay:.12s}
.mobile-nav.open a:nth-child(3){transition-delay:.17s}
.mobile-nav.open a:nth-child(4){transition-delay:.22s}
.mobile-nav.open a:nth-child(5){transition-delay:.27s}
.mobile-nav.open a:nth-child(6){transition-delay:.32s}
.mobile-nav.open a:nth-child(7){transition-delay:.37s}

/* SECTIONS */
/* scroll-margin-top reserves space for the floating fixed nav pill so
   jumping to any #anchor (via nav click or a direct URL hash) never
   scrolls a section's heading underneath the header. */
.section,
section[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.section{padding:7rem 0;position:relative;z-index:1}
.section-alt{background:transparent}
.section-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}
.section-big-heading{
  font-family: var(--font-heading);
  font-size: clamp(2rem,4.5vw,3.2rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1;
}
.section-label-right{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
  padding-top: .5rem;
}
.section-divider{width:100%;height:1px;background:rgba(163,177,198,.4);margin-bottom:3.5rem}

/* HERO */
.hero{min-height:100vh;padding-top:calc(var(--nav-h) + 2rem);display:flex;align-items:center;position:relative;overflow:hidden;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:3rem;position:relative;z-index:1}
.hero-name{
  font-family: var(--font-heading);
  font-size: clamp(2rem,4vw,3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 1.4rem;
  white-space: nowrap;
}
.hero-bio{
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 620px;
  margin-bottom: 2.4rem;
  font-weight: 400;
  text-wrap: balance;
}
.mobile-br{display:none}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{
  display: inline-flex;
  align-items:center;
  padding: .9rem 2.1rem;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 10px 24px var(--accent-glow);
  transition: background .2s,transform .15s,box-shadow .2s;
}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 30px var(--accent-glow)}
.btn-primary:active,.btn-primary:focus,.btn-primary:visited{color:#ffffff;transform:none}
.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 2.1rem;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.btn-outline:hover{color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.btn-outline:active,.btn-outline:focus,.btn-outline:visited{color:var(--text);transform:none;box-shadow:var(--shadow-card)}

/* HERO RIGHT — floating badge photo layout */
.hero-right{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.photo-orbit{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.photo-frame{position:relative;display:inline-block;z-index:2}
.photo-wrap{width:260px;height:260px;border-radius:50%;overflow:hidden;position:relative;z-index:1;border:6px solid var(--bg);box-shadow:var(--shadow-card)}
.photo-wrap img{width:100%;height:100%;object-fit:cover}

/* TECH STACK — icon-only badges floating around the profile photo.
   Fixed positions (angle set once per item via --angle), no orbit spin —
   each badge just bobs gently up and down at its own place. */
.orbit-ring{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  --radius:192px;
}

.orbit-item{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  transform:rotate(var(--angle)) translate(var(--radius));
}
.orbit-counter{
  position:absolute;
  top:0;
  left:0;
  pointer-events:auto;
  animation-name: floatBob;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.photo-orbit:hover .orbit-counter{animation-play-state:paused}

@keyframes floatBob{
  0%,100%{transform:translate(-50%,-50%) rotate(calc(var(--angle) * -1)) translateY(0)}
  50%{transform:translate(-50%,-50%) rotate(calc(var(--angle) * -1)) translateY(-8px)}
}

/* stagger delay/duration per icon so they don't all bob in unison —
   gives a natural, organic "floating" feel like the reference site */
.orbit-item.oi-0 .orbit-counter{animation-delay:0s;animation-duration:3s}
.orbit-item.oi-1 .orbit-counter{animation-delay:.2s;animation-duration:3.4s}
.orbit-item.oi-2 .orbit-counter{animation-delay:.4s;animation-duration:2.8s}
.orbit-item.oi-3 .orbit-counter{animation-delay:.1s;animation-duration:3.6s}
.orbit-item.oi-4 .orbit-counter{animation-delay:.5s;animation-duration:3.1s}
.orbit-item.oi-5 .orbit-counter{animation-delay:.3s;animation-duration:2.9s}
.orbit-item.oi-6 .orbit-counter{animation-delay:.6s;animation-duration:3.5s}
.orbit-item.oi-7 .orbit-counter{animation-delay:.15s;animation-duration:3.2s}
.orbit-item.oi-8 .orbit-counter{animation-delay:.45s;animation-duration:2.7s}
.orbit-item.oi-9 .orbit-counter{animation-delay:.25s;animation-duration:3.7s}
.orbit-item.oi-10 .orbit-counter{animation-delay:.55s;animation-duration:3.3s}
.orbit-item.oi-11 .orbit-counter{animation-delay:.35s;animation-duration:2.85s}
.orbit-item.oi-12 .orbit-counter{animation-delay:.05s;animation-duration:3.45s}
.orbit-item.oi-13 .orbit-counter{animation-delay:.5s;animation-duration:3.05s}
.orbit-item.oi-14 .orbit-counter{animation-delay:.3s;animation-duration:3.3s}
.orbit-item.oi-15 .orbit-counter{animation-delay:.55s;animation-duration:3.9s}

/* icon-only circular badge (no text) */
.stack-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:transparent;
  border:none;
  border-radius:50%;
  transition:transform .2s;
}
/* single-layer, full-bleed brand-colored circle — same bold treatment as
   the Technical Stack tiles, instead of a small icon in a pale ring */
.stack-badge > .fb-icon{width:100%;height:100%;border-radius:50%;box-shadow:var(--shadow-card)}
.stack-badge:hover{transform:scale(1.1)}
.stack-badge:hover > .fb-icon{box-shadow:var(--shadow-card-hover)}
.stack-badge .fb-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stack-badge .fb-icon img,
.stack-badge .fb-icon svg{width:20px;height:20px;object-fit:contain;display:block}

/* Force every orbiting hero badge onto the same neutral chip instead of
   the mismatched per-icon inline background colors (some brand-colored,
   some plain white that nearly vanishes against the light page bg). */
.stack-badge > .fb-icon{
  background: var(--accent-soft) !important;
  border: 1px solid var(--border);
}

/* shared "colored chip" icon used both in the hero orbit badges and the
   Technical Stack grid below — one true brand-colored logo per chip */
.fb-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fb-icon img,
.fb-icon svg{width:15px;height:15px;object-fit:contain;display:block}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;gap:0;
  transition:box-shadow .3s,transform .3s;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
}
.service-icon-wrap{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;background:var(--accent-soft);transition:background .3s,transform .3s}
.service-card:hover .service-icon-wrap{background:var(--accent);transform:scale(1.06)}
.service-card:hover .service-icon-wrap svg{stroke:#ffffff}
.service-icon-wrap svg{width:20px;height:20px;stroke:var(--accent);stroke-width:1.6;fill:none}
.service-card h3{
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .65rem;
  line-height: 1.3;
}
.service-card p{
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
}
.service-num{display:none}

/* PROJECTS — draggable/auto-scrolling marquee (same engine as Certificates):
   fixed-size cards in a straight single row. Cards are sized down from the
   original and the whole screenshot is always visible (object-fit:contain)
   instead of being cropped into a square. Since .project-track is a flex
   row with the default align-items:stretch, every card in the row is
   automatically the same height as the tallest one — so once the bio text
   isn't clamped anymore, all bios show in full AND stay lined up evenly. */
.projects-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.project-track{
  display:flex;
  align-items:stretch;
  gap:2.75rem;
  width:max-content;
  cursor:grab;
  touch-action:pan-y;
}
.project-track.dragging{cursor:grabbing}

.project-card{
  width:338px;
  flex:0 0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:26px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s ease, transform .3s ease;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
}

.project-img-wrap{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  padding:.7rem .7rem 0;
  background:var(--bg);
}
.project-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:18px;
  transition:transform .5s ease;
  -webkit-user-drag:none;
  user-drag:none;
}
.project-card:hover .project-img-wrap img{transform:scale(1.03)}

.project-body{padding:1.35rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}

.project-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.project-card-title{
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.project-link-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  color:var(--accent);
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.project-link-icon svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.project-link-icon:hover{background:var(--accent);color:#ffffff;transform:translateY(-2px)}
.project-link-locked{color:var(--dim)}
.project-link-locked:hover{background:var(--dim);color:#ffffff}

.project-sub-label{
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .02em;
}

.project-card-desc{
  font-family: var(--font-body);
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.65;
}

/* SKILLS — light "tech panel" card matching the site's surface style,
   holding a single flat grid of icon chips with a hover tooltip. */
.tech-panel{
  background:transparent;
  border:none;
  border-radius:22px;
  padding:2.75rem 2.25rem;
  box-shadow:none;
}
.tech-icon-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}
.tech-icon-box{
  position:relative;
  width:72px;
  height:72px;
  border-radius:16px;
  background:transparent;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* the colored badge now fills almost the entire tile — bold, single-layer,
   true-to-brand square instead of a small icon floating in a pale box */
.tech-icon-box > .fb-icon{width:100%;height:100%;border-radius:16px;box-shadow:var(--shadow-card)}
.tech-icon-box > .fb-icon img,
.tech-icon-box > .fb-icon svg{width:34px;height:34px}
.tech-icon-box:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 28px -8px rgba(18,22,43,.22);
  z-index:5;
}
.tech-icon-box:hover > .fb-icon{box-shadow:var(--shadow-card-hover)}

/* Force every Technical Stack tile (and its tooltip icon) onto the same
   neutral chip, instead of the mismatched per-icon inline background
   colors (some brand-colored, some plain white) set in the HTML. */
.tech-icon-box > .fb-icon{
  background: var(--accent-soft) !important;
  border: 1px solid var(--border);
}

/* simplified tooltip — name-only dark pill, no icon/tag/description */
.tech-tip{
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  --tip-shift:0px;
  transform:translateX(calc(-50% + var(--tip-shift, 0px))) translateY(6px);
  width:max-content;
  max-width:200px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.5rem .9rem;
  box-shadow:0 8px 20px -6px rgba(18,22,43,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:20;
  text-align:center;
}
.tech-icon-box:hover .tech-tip{
  opacity:1;
  visibility:visible;
  transform:translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0);
}
.tech-tip-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.tech-tip-icon{
  width:20px;
  height:20px;
  border-radius:6px;
  flex-shrink:0;
  background:none !important;
  border:none !important;
}
.tech-tip-tag, .tech-tip-desc{
  display:none;
}
.tech-tip-name{
  font-family: var(--font-body);
  font-size:.8rem;
  font-weight:600;
  color:#12162b;
  line-height:1.2;
  white-space:nowrap;
}
.tech-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(calc(-50% - var(--tip-shift, 0px)));
  border:6px solid transparent;
  border-top-color:#ffffff;
}
.tech-icon-box.tip-flip .tech-tip{
  bottom:auto;
  top:calc(100% + 12px);
  transform:translateX(calc(-50% + var(--tip-shift, 0px))) translateY(-6px);
}
.tech-icon-box.tip-flip:hover .tech-tip{
  transform:translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0);
}
.tech-icon-box.tip-flip .tech-tip::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:#ffffff;
}

/* SKILLS — DESKTOP: give the grid a little more breathing room, lock the
   icons to a fixed 9-per-row layout so they don't reflow, and shrink the
   panel itself to hug that fixed-width grid instead of stretching full width */
@media(min-width:961px){
  .tech-icon-grid{
    gap:1.15rem;
    width: calc(9 * 72px + 8 * 1.15rem);
    margin: 0 auto;
  }
  .tech-panel{
    width: fit-content;
    margin: 0 auto;
  }
}

/* EDUCATION — code-editor styled panel, title centered on top */
.edu-section{background:transparent;padding:6rem 0;position:relative;z-index:1}

.edu-header{
  text-align:center;
  max-width:700px;
  margin:0 auto 2.5rem;
}
.edu-eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-radius:100px;
  padding:.35rem 1rem;
  margin-bottom:1rem;
  letter-spacing:.02em;
}
.education-title{
  font-family: var(--font-heading);
  color: var(--text);
  font-size: clamp(1.7rem,3.5vw,2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

/* Code editor card */
.code-card{
  max-width:820px;
  margin:0 auto;
  background:#0d0f18;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-card-hover);
  border:1px solid #1f2333;
}
.code-titlebar{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.85rem 1.2rem;
  background:#141726;
  border-bottom:1px solid #1f2333;
}
.code-dots{display:flex;gap:.45rem;flex-shrink:0}
.dot{width:11px;height:11px;border-radius:50%;display:block}
.dot-r{background:#ff5f56}
.dot-y{background:#ffbd2e}
.dot-g{background:#27c93f}
.code-filename{
  font-family: var(--font-mono);
  font-size:.75rem;
  color:#8890a8;
  background:#0d0f18;
  border:1px solid #1f2333;
  border-radius:6px;
  padding:.3rem .8rem;
}

.code-body{
  counter-reset: codeline;
  padding:1.5rem 0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  height:360px;
}
.code-body::-webkit-scrollbar{display:none}

.code-line{
  counter-increment: codeline;
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  padding:.2rem 1.5rem;
  font-family: var(--font-mono);
  font-size:.82rem;
  line-height:1.9;
  white-space:pre-wrap;
  word-break:break-word;
  transition:background .15s ease;
  min-height:1.9em;
}
.code-line::before{
  content: counter(codeline);
  flex:0 0 22px;
  text-align:right;
  color:#3d4155;
  user-select:none;
}
.code-line:hover{background:rgba(255,255,255,.03)}

/* indentation lives on an inner wrapper (not the row) so the line
   number column always stays in a straight vertical line */
.code-content{display:inline}

.code-punct{color:#6b7280}
.code-key{color:#7dd3fc}
.code-string{color:#c9b3ff}
.code-string.code-current{color:#8fa8ff;font-weight:600}

/* real-HTML syntax palette used by the typed education snippet */
.code-tag{color:#7dd3fc}
.code-attr{color:#facc15}
.code-attr-val{color:#c9b3ff}
.code-comment{color:#4ade80}
.code-text{color:#e5e7eb}
.code-text.code-current{color:#8fa8ff;font-weight:600}

/* description text inside the typed <desc> tag — green, same as code-comment */
.code-desc{color:#4ade80}

/* blinking typing cursor, shown only on the actively-typed line */
.code-caret{
  display:inline-block;
  width:7px;
  height:1.1em;
  background:var(--accent);
  margin-left:2px;
  vertical-align:-2px;
  animation:blinkCursor 1s step-end infinite;
}
@keyframes blinkCursor{50%{opacity:0}}

/* CERTS */
.cert-section{background:transparent;position:relative;z-index:1}
.cert-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.cert-track{
  display:flex;
  gap:1.5rem;
  width:max-content;
  cursor:grab;
  touch-action:pan-y;
}
.cert-track.dragging{cursor:grabbing}
.cert-img-wrap img{-webkit-user-drag:none;user-drag:none}
.cert-item{
  width:360px;
  flex:0 0 auto;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s,transform .3s;
}
.cert-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.cert-img-wrap{width:calc(100% - 24px);margin:12px 12px 0;aspect-ratio:16/10;overflow:hidden;background:var(--bg);border-radius:14px;border:1px solid var(--border)}
.cert-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .4s ease}
.cert-item:hover .cert-img-wrap img{transform:scale(1.04)}
.cert-info{padding:1rem 1.35rem 1.5rem}
.cert-info h4{
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.cert-info p{
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--dim);
  font-weight: 500;
}

/* CONTACT SECTION */
.contact-section{background:transparent;padding:5rem 0 6rem;position:relative;z-index:1}
.contact-top{text-align:center;margin-bottom:2.5rem}
.contact-label-top{
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.contact-heading{
  font-family: var(--font-heading);
  font-size: clamp(1.7rem,3vw,2.3rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.contact-heading span{color:var(--accent)}
.contact-icon-row{display:flex;justify-content:center;gap:1.2rem}
.contact-round{
  width:54px;height:54px;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--muted);
  background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:color .2s,transform .15s,box-shadow .2s;
}
.contact-round svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none}
.contact-round:hover{color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}

/* CONTACT PAGE */
.contact-page-main{min-height:calc(100vh - var(--nav-h));padding-top:calc(var(--nav-h) + 1rem);position:relative;z-index:1}
.contact-page-section{padding:1rem 0 2.25rem}
.contact-page-head{max-width:600px;margin:0 auto 3.5rem;text-align:center}
.contact-page-head h1{
  font-family: var(--font-heading);
  color: var(--text);
  font-size: clamp(2.2rem,5vw,3.4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 1.4rem;
}
.contact-page-head p{
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}
.contact-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1050px;margin:0 auto}
.contact-panel{background:var(--surface);border:1px solid var(--border);border-radius:22px;min-height:520px;padding:3rem 2.25rem;box-shadow:var(--shadow-card)}
.contact-col-title{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2.25rem;
}
.contact-info-list{display:flex;flex-direction:column}
.contact-info-sep{height:1px;background:rgba(163,177,198,.35);display:block}
.contact-info-item{display:flex;align-items:center;gap:1.25rem;padding:1.1rem 0}
.contact-info-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);border-radius:10px;background:var(--accent-soft);transition:background .2s,color .2s}
.contact-info-icon svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
.contact-info-item:hover .contact-info-icon{background:var(--accent);color:#ffffff}
.contact-info-text{display:flex;flex-direction:column;gap:.15rem}
.contact-info-label{
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--dim);
  text-transform: uppercase;
}
.contact-info-value{
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text);
  font-weight: 500;
}
.contact-form{display:flex;flex-direction:column;gap:1.15rem}
.form-row{display:flex;flex-direction:column;gap:.4rem}
.form-row label{
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.form-row input,.form-row textarea{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
  padding: .9rem 1.1rem;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
  resize: vertical;
  width: 100%;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--dim)}
textarea{min-height:120px}
.contact-form button{
  padding: .9rem 2rem;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background .2s,transform .15s,box-shadow .2s;
  margin-top: .35rem;
  box-shadow: 0 10px 24px var(--accent-glow);
}
.contact-form button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 30px var(--accent-glow)}
.contact-form button:active,.contact-form button:focus{transform:translateY(0)}
.contact-form button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
#cf-status{font-size:.82rem;min-height:1.2em;color:var(--muted)}
.back-home{
  font-family: var(--font-body);
  color: var(--muted);
  display: block;
  font-size: .85rem;
  font-weight:500;
  margin: 3rem auto 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: color .2s;
}
.back-home:hover{color:var(--accent)}

/* FOOTER — layout unchanged, just restyled */
footer{background:transparent;border-top:1px solid rgba(163,177,198,.35);padding:2rem 0;position:relative;z-index:1}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
footer p{font-family: var(--font-body); font-size:.8rem;color:var(--dim)}
.footer-logo{font-family: var(--font-heading); font-size:.95rem;font-weight:700;color:var(--dim);letter-spacing:.02em}

/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* TESTIMONIALS — fanned card deck, cycles through with clicks/dots */
.testimonial-deck-wrap{max-width:460px;margin:0 auto;position:relative}
.testimonial-deck{position:relative;min-height:170px;transition:height .3s ease}
.testi-card{
  position:absolute;
  inset:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.75rem 1.75rem 1.5rem;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:1rem;
  cursor:pointer;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease,box-shadow .3s ease;
}

.testi-card.testi-active{transform:translateY(0) scale(1) rotate(0deg);z-index:3;opacity:1;box-shadow:var(--shadow-card-hover);cursor:default}
.testi-card.testi-behind-1{transform:translateY(16px) scale(.96) rotate(-3deg);z-index:2;opacity:.85}
.testi-card.testi-behind-2{transform:translateY(30px) scale(.92) rotate(3deg);z-index:1;opacity:.55}
.testi-card.testi-hidden{opacity:0;pointer-events:none;transform:translateY(36px) scale(.88)}

.testi-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.testi-quote-icon{
  font-family:var(--font-heading);
  font-size:2.1rem;
  line-height:1;
  color:var(--accent);
  font-weight:800;
}
/* rating pill — matches the "10/10" badge shown next to the reviewer name
   on the reference site, restyled to the portfolio's blue accent theme */
.testi-rating{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:100px;
  padding:.32rem .75rem;
  font-family: var(--font-body);
  font-size:.75rem;
  font-weight:700;
  margin-top:.2rem;
}
.testi-rating svg{width:13px;height:13px;flex-shrink:0;fill:#FFC107}
.testi-text{
  font-family:var(--font-body);
  font-size:.88rem;
  font-style:italic;
  color:var(--muted);
  line-height:1.65;
}
.testi-footer{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.testi-avatar{
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.95rem;
}
.testi-name{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--text);
  font-size:.88rem;
}

.testi-dots{display:flex;justify-content:center;gap:.5rem;margin-top:2rem}
.testi-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);
  border:none;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.testi-dot.testi-dot-active{background:var(--accent);transform:scale(1.35)}

@media(max-width:700px){
  .testimonial-deck-wrap{max-width:340px}
  .testimonial-deck{min-height:200px}
  .testi-card{padding:1.5rem 1.25rem 1.25rem;gap:.85rem}
  .testi-quote-icon{font-size:1.8rem}
  .testi-rating{font-size:.68rem;padding:.28rem .6rem}
  .testi-rating svg{width:11px;height:11px}
  .testi-text{font-size:.82rem;line-height:1.6}
  .testi-avatar{width:32px;height:32px;font-size:.85rem}
  .testi-name{font-size:.82rem}
}
/* RESPONSIVE */
@media(max-width:960px){
  #nav{display:none}
  #header .nav-cta{display:none}
  .hamburger{display:flex}

  .hero{padding-top:calc(var(--nav-h) + 3rem);padding-bottom:2rem;min-height:auto}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:3.5rem}
  .hero-actions{flex-direction:row;align-items:center;justify-content:center;width:100%;gap:.75rem;max-width:420px;margin:0 auto}
  .btn-primary,.btn-outline{flex:1 1 0;width:auto;max-width:none;padding-left:1rem;padding-right:1rem;justify-content:center}
  .hero-bio{margin-left:0;margin-right:0;text-align:left;max-width:100%;font-size:13px;line-height:1.7}
  .mobile-br{display:inline}
  .photo-orbit{max-width:370px;margin:0 auto}
  .photo-wrap{width:220px;height:220px}
  .stack-badge{width:37px;height:37px}
  .stack-badge .fb-icon img,
  .stack-badge .fb-icon svg{width:17px;height:17px}
  .orbit-ring{--radius:162px}
  .contact-page-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:.5rem;text-align:center}
.tech-icon-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem}
.tech-icon-box{width:calc(25% - .64rem);max-width:72px;aspect-ratio:1/1;height:auto}
}
@media(max-width:700px){
  .section-header{align-items:center}
  .section-big-heading{font-size:1.5rem;white-space:nowrap}
  .section-label-right{padding-top:0;text-align:right;white-space:nowrap}
  .section{padding:4.5rem 0}
  .services-grid{
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:1rem;
    padding:0 5% 1.25rem;
    margin:0 -5%;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{display:none}
  .service-card{flex:0 0 82%;scroll-snap-align:center;padding:2rem 1.5rem}
  .cert-item{width:300px}
  .hero-name{font-size:2.1rem;white-space:normal}
  .contact-icon-row{gap:.85rem}
  .contact-panel{padding:1.75rem 1.25rem}
  .mobile-nav a{font-size:1rem;padding:.95rem 1.25rem}
  .contact-page-main{padding-top:calc(var(--nav-h) - .5rem)}
  .contact-page-head{margin-bottom:2rem}

  .edu-header{margin-bottom:1.75rem}
  .code-titlebar{padding:.7rem 1rem;gap:.75rem}
  .code-filename{font-size:.68rem;padding:.25rem .6rem}
  .code-body{padding:1.1rem 0;height:300px}
  .code-line{font-size:.72rem;padding:.15rem 1rem;gap:.7rem;line-height:1.75}
  .code-line::before{flex:0 0 16px}
}
@media(max-width:480px){
  .photo-orbit{max-width:310px}
  .photo-wrap{width:185px;height:185px}
  .orbit-ring{--radius:130px}
  .stack-badge{width:32px;height:32px}
  .stack-badge .fb-icon img,
  .stack-badge .fb-icon svg{width:15px;height:15px}
  .hero-name{font-size:2.1rem}
  .section-big-heading{font-size:1.25rem}
  .cert-item{width:250px}
  .project-img-wrap{aspect-ratio:21/9}
  .project-body{padding:1rem 1.25rem 1.2rem;gap:.35rem}
  .project-card-title{font-size:1rem}
  .project-card-desc{font-size:.82rem;line-height:1.55}
  .hero-actions{gap:.5rem}
  .btn-primary,.btn-outline{font-size:.68rem;padding-left:.9rem;padding-right:.9rem;gap:.35rem}

  .code-line{font-size:.66rem}
  .code-body{height:260px}
}