/* ──────────────────────────────────────────────────────────────
   Utpal Bhadra — profile site
   Single stylesheet, no framework, no build step.
   Palette is defined once as tokens so the whole page can be
   re-themed from the :root block alone.
   ────────────────────────────────────────────────────────────── */

:root {
  --bg:        #07080c;
  --bg-soft:   #0d0f16;
  --bg-card:   #11141d;
  --line:      #1e2333;
  --line-soft: #171b28;

  --text:      #e8eaf2;
  --text-dim:  #9aa3bd;
  --text-mute: #6b7490;

  --accent:      #5b8cff;
  --accent-warm: #ff8a5b;
  --accent-glow: rgba(91, 140, 255, 0.35);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The page is deliberately dark-only: the canvas hero is built for a dark
   ground and a light repaint of it would be a different design, not a theme. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

/* ── Layout ─────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

section { position: relative; padding: 110px 0; }

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--line), transparent);
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 650;
}

h3 { font-size: 19px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }

p { color: var(--text-dim); margin: 0 0 18px; }

.lead { font-size: 19px; color: var(--text-dim); max-width: 62ch; }

/* ── Nav ────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  backdrop-filter: blur(14px);
  background: rgba(7, 8, 12, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.stuck {
  background: rgba(7, 8, 12, 0.82);
  border-bottom-color: var(--line-soft);
}
.nav-mark {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.nav-mark span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px;
  color: var(--text-mute);
  transition: color 0.25s var(--ease);
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 700px) { .nav-links { display: none; } }

/* ── Hero + canvas ──────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

#net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Vignette keeps the type legible wherever the particles happen to cluster. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(7, 8, 12, 0.86) 100%),
    linear-gradient(180deg, rgba(7, 8, 12, 0.5) 0%, transparent 25%, var(--bg) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-hi {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(44px, 8.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 680;
  margin: 0 0 22px;
}

.hero-role {
  font-size: clamp(19px, 2.6vw, 27px);
  color: var(--text-dim);
  font-weight: 400;
  min-height: 1.5em;
  margin-bottom: 26px;
  letter-spacing: -0.01em;
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.hero-blurb { max-width: 56ch; font-size: 18px; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { box-shadow: 0 10px 34px var(--accent-glow); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(91, 140, 255, 0.07); }

.scroll-hint {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  text-transform: uppercase;
  animation: float 2.4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* ── Scroll reveal ──────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .scroll-hint, .cursor { animation: none; }
}

/* ── Timeline (experience) ──────────────────────────────────── */

.timeline { position: relative; margin-top: 46px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--line) 55%, transparent);
}

.job { position: relative; padding-left: 40px; padding-bottom: 44px; }
.job::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.job:hover::before { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); }

.job-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.job-co { color: var(--accent); font-weight: 500; }
.job-when {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
  white-space: nowrap;
}
.job p { margin: 10px 0 0; font-size: 16px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-mute);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tag:hover { color: var(--text); border-color: var(--accent); }

/* ── Cards ──────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; margin-top: 42px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  position: relative;
  padding: 26px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.card::before {
  /* cursor-following sheen; --mx/--my are set from JS */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(91, 140, 255, 0.10), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card p { font-size: 15.5px; margin: 10px 0 0; }

.card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* ── Velaris feature block ──────────────────────────────────── */

.feature {
  border-radius: 22px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(90% 140% at 88% 0%, rgba(91, 140, 255, 0.13), transparent 58%),
    var(--bg-soft);
  padding: 44px;
  margin-top: 42px;
}
.feature-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feature-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.feature h3 { font-size: 30px; letter-spacing: -0.02em; }
.feature-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.feature-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 16px;
}
.feature-list li::before {
  content: "▸";
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.6;
}
.feature-links { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 640px) { .feature { padding: 28px 22px; } }

/* ── Stats ──────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 36px;
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.stat-n {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-l {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Writing ────────────────────────────────────────────────── */

.post {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left 0.35s var(--ease);
}
.post:hover { padding-left: 10px; }
.post:hover .post-t { color: var(--accent); }
.post-t { font-size: 17px; transition: color 0.3s var(--ease); }
.post-m { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }

/* ── Contact ────────────────────────────────────────────────── */

.contact { text-align: center; padding-bottom: 130px; }
.contact h2 { font-size: clamp(34px, 6vw, 58px); }
.contact-mail {
  display: inline-block;
  font-size: clamp(19px, 3.4vw, 30px);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin: 12px 0 40px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-mail:hover { color: var(--accent); border-color: var(--accent); }
.socials { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

footer {
  padding: 30px 0 44px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ── Print: the page has to survive being saved as a PDF ────── */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .nav, .scroll-hint, #net, .hero::after, .hero-cta, .socials { display: none !important; }
  .hero { min-height: auto; padding: 0 0 20pt; }
  section { padding: 14pt 0; page-break-inside: avoid; }
  .card, .feature, .product { border: 1px solid #ccc; background: none; }
  p, .lead, .job p, .feature-list li, .product-feats li { color: #222; }
  .product-cta, .card-links { display: none !important; }
  h1, h2, h3 { color: #000; }
  a { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Additions for the populated page ───────────────────────── */

.hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.hero-meta::before { content: "◉ "; color: var(--accent); }

.quote {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-size: 18px;
  color: var(--text);
  font-style: italic;
  max-width: 52ch;
}

/* Certification rows: issuer sits beside the name, muted. */
.post-issuer {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mute);
  margin-left: 10px;
  letter-spacing: 0.03em;
}
.post:hover .post-issuer { color: var(--text-dim); }

/* Project cards carry a date line where other cards carry a number. */
#projects .card-num { display: block; margin-bottom: 12px; color: var(--text-mute); }
#projects .card h3 { line-height: 1.35; }

/* Education entries have no body text, so tighten the timeline gap. */
#credentials .job { padding-bottom: 26px; }
#credentials .job h3 { line-height: 1.4; }

@media (max-width: 560px) {
  .post { flex-direction: column; gap: 4px; }
  .post-issuer { margin-left: 0; display: block; }
  .job-when { white-space: normal; }
}

/* The centred CONTACT label must not keep the trailing rule line — the flex
   line eats the free space and the label reads as left-aligned. */
.contact .section-label { justify-content: center; }
.contact .section-label::after { display: none; }

/* On a narrow screen the longest typed phrase wraps to two lines. Reserve the
   space up front, or every cycle nudges the paragraph below it up and down. */
@media (max-width: 620px) {
  .hero-role { min-height: 2.7em; }
}

/* Education dates must not depend on how long the degree title happens to be:
   a long title wraps the date onto its own line, a short one leaves it inline,
   and the two entries then disagree. Stack them always. */
#credentials .job-top { flex-direction: column; align-items: flex-start; gap: 3px; }

/* One line of footer text now, so centre it rather than pushing it to the
   left edge with the space-between left over from the two-span layout. */
footer { justify-content: center; text-align: center; }
footer .wrap { display: flex; justify-content: center; }

/* Inline SVG marks in buttons. currentColor means they pick up the button's
   own hover colour, so there is no second place to keep the palette in sync. */
.ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  /* Optical alignment: a glyph's visual centre sits slightly above the text
     baseline's midpoint, so nudge it down rather than trusting align-items. */
  transform: translateY(0.5px);
}
.socials .btn { padding: 12px 20px; }

/* ── Project card links ─────────────────────────────────────── */

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
}
.card-links a { transition: color 0.3s var(--ease); }
.card-links a:hover { color: var(--accent); }

/* ── MyStore ────────────────────────────────────────────────── */

.store-grid {
  display: grid;
  gap: 22px;
  margin-top: 42px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(90% 130% at 88% 0%, rgba(91, 140, 255, 0.11), transparent 58%),
    var(--bg-soft);
  padding: 34px 30px;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.product:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.product-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(91, 140, 255, 0.07);
  color: var(--accent);
}
.product-mark svg { width: 23px; height: 23px; }

.product-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.product-status.is-live { color: var(--accent); }
.product-status.is-soon { color: var(--accent-warm); }

.product h3 { font-size: 25px; letter-spacing: -0.02em; }

.product-tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 6px;
}
.product > p { font-size: 15.5px; margin: 16px 0 0; }

/* The price sits on its own rule so an unfilled placeholder still reads as a
   deliberate slot rather than a rendering fault. */
.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.price-amount {
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.price-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
}

.product-feats {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 11px;
}
.product-feats li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.55;
}
.product-feats li::before {
  content: "▸";
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.55;
}

/* margin-top:auto keeps the buttons on the bottom edge, so two cards with
   different feature counts still line their calls to action up. */
.product-cta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 28px;
}

/* A placeholder for a link that does not exist yet. It must not look
   clickable, and it must not lift on hover the way a real button does. */
.btn-soon {
  color: var(--text-mute);
  border-color: var(--line-soft);
  cursor: not-allowed;
}
.btn-soon:hover {
  transform: none;
  border-color: var(--line-soft);
  background: none;
}

.store-note {
  margin-top: 34px;
  font-size: 15.5px;
  color: var(--text-mute);
}
.store-note a { color: var(--accent); }
.store-note a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .product { padding: 28px 22px; }
  .product-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Two product cards side by side should show their price on the same line.
   The blurbs wrap to different heights, and grid siblings cannot align their
   own internals, so reserve four lines for the blurb while the cards are in
   fact side by side. Below that they stack and the reservation is dropped. */
@media (min-width: 720px) {
  .product > p { min-height: 6.6em; }
}

/* The one line a buyer should remember. Both product cards carry one, which
   also keeps the row below it — the price — level across the two columns. */
.product-claim {
  margin-top: 12px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Free and open source is a claim in its own right, so it gets its own badge
   colour rather than sharing "available now" with a paid product. */
.product-status.is-open { color: #6fd6a3; }

/* "Open source · Available now" is wider than a phone-width card once the
   icon and its gap are taken out, and the badge is nowrap by design. Let the
   top row wrap so the badge drops to its own line rather than overflowing. */
@media (max-width: 640px) {
  .product-top { flex-wrap: wrap; }
  .product-status { white-space: normal; }
}

/* ── Product marks ──────────────────────────────────────────── */

/* The Velaris V is a dark navy artwork on transparency — on this card it is
   almost the background colour. Lift it rather than repainting the asset, so
   dropping in a new export needs no image editing. */
.product-mark-img { padding: 3px; }
.product-mark-img img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(2.25) saturate(1.35) drop-shadow(0 0 7px rgba(91, 140, 255, 0.35));
}

.card-mark {
  width: 34px;
  margin: 0 0 12px;
}
.card-mark img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(2.25) saturate(1.35);
}

/* Print flattens the lift: on white the artwork's own navy is legible, and a
   brightened one is not. */
@media print {
  .product-mark-img img, .card-mark img { filter: none; }
}

/* ── Tech stack logos ───────────────────────────────────────── */
.stack { display: grid; gap: 22px; margin-top: 36px; }
.stack-h {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px;
}
.stack-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-tile {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.stack-tile svg { width: 18px; height: 18px; fill: currentColor; flex: none; transition: fill .25s var(--ease); }
.stack-tile:hover { color: var(--text); border-color: var(--line); transform: translateY(-2px); }
.stack-tile:hover svg { fill: var(--brand, var(--accent)); }
.stack-glyph {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--line); color: var(--text);
}
@media (max-width: 560px) { .stack-tile { font-size: 13px; padding: 7px 11px; } }

/* Velaris's own mark, drawn through its PNG alpha so it takes the button's text colour. */
.ico-velaris {
  display: inline-block;
  width: 20px;
  background: currentColor;
  /* Inlined (64px): a mask from a separate file is blocked when the page is opened as file://. */
  -webkit-mask: url(data:image/png;base64,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) center / contain no-repeat;
          mask: url(data:image/png;base64,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) center / contain no-repeat;
}

/* ── Save contact: QR on the left, button on the right, the pair centred ── */
.vcard {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  margin-top: 40px; flex-wrap: wrap;
}
.vcard-qr {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
}
.vcard-qr-box {
  width: 196px; height: 196px; padding: 10px; border-radius: 12px; box-sizing: border-box;
  background: #e8eaf2; box-shadow: 0 0 32px var(--accent-glow);
}
.vcard-qr-box svg { display: block; width: 100%; height: 100%; }
.vcard-btn { padding: 12px 22px; margin-bottom: 26px; } /* centre on the QR box, not box + caption */
@media (max-width: 700px) { .vcard-qr { display: none; } }

/* ── Skills: bento tech stack + disciplines ─────────────────── */
.sk-sub {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
  margin: 46px 0 16px; display: flex; align-items: center; gap: 12px;
}
.sk-sub::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento-card {
  padding: 20px 20px 16px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  transition: border-color .3s var(--ease);
}
.bento-card:hover { border-color: var(--line); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.bento-h h3 { font-size: 15px; margin: 0; }
.bento-n { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }
.bento-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 4px; }
.bento .stack-tile { min-width: 0; line-height: 1.3; }
.bento-card.span-3 .bento-tiles { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.bento .stack-tile {
  background: transparent; border-color: transparent; border-radius: 10px;
  padding: 8px 10px; font-size: 14px;
}
.bento .stack-tile:hover { background: var(--bg-soft); border-color: var(--line-soft); transform: none; }

.disc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.disc-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 22px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--line-soft);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.disc-item:hover { border-color: var(--line); transform: translateY(-2px); }
.disc-item:last-child:nth-child(odd) { grid-column: span 2; }
.disc-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: rgba(91, 140, 255, .1); border: 1px solid rgba(91, 140, 255, .22);
}
.disc-ico svg { width: 22px; height: 22px; }
.disc-item h3 { font-size: 17px; margin: 2px 0 6px; }
.disc-item p { margin: 0 0 10px; font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.disc-terms { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); line-height: 1.7; }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-card.span-2, .bento-card.span-3 { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento, .disc { grid-template-columns: 1fr; }
  .bento-card.span-2, .bento-card.span-3, .disc-item:last-child:nth-child(odd) { grid-column: auto; }
  .bento-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ── Hero portrait, beside the name ─────────────────────────── */
.hero-name { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); margin-bottom: 12px; }
.hero-name h1 { margin: 0; }
.hero-photo {
  position: relative; flex: none; width: clamp(96px, 13vw, 168px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(91, 140, 255, .35), rgba(17, 20, 29, .95) 72%);
  border: 1px solid rgba(91, 140, 255, .35);
  box-shadow: 0 0 0 6px rgba(91, 140, 255, .06), 0 18px 50px rgba(0, 0, 0, .45), 0 0 60px var(--accent-glow);
}
.hero-photo img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
@media (max-width: 560px) { .hero-name { gap: 14px; } .hero-photo { width: 84px; } }
.hero-fit { width: fit-content; max-width: 100%; }
.hero-fit .hero-blurb { width: 0; min-width: 100%; max-width: none; }

/* Page scrollbar hidden; scrolling (wheel, touch, keys) still works. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }