:root {
  color-scheme: dark;
  --bg-main: #08080d;
  --bg-elevated: rgba(15, 23, 42, 0.9);
  --bg-elevated-strong: rgba(15, 23, 42, 0.96);
  --bg-elevated-solid: #0f172a;
  --skeleton-bg: rgba(31, 41, 55, 0.9);
  --border-subtle: rgba(148, 163, 184, 0.2);
  --accent: #8b5cf6;
  --accent-2: #d946ef;
  --accent-soft: rgba(139, 92, 246, 0.25);
  --accent-strong: #a78bfa;
  --accent-gradient: linear-gradient(135deg, #8b5cf6, #d946ef);
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --text-soft: #6b7280;
  --danger: #ef4444;
  --success: #22c55e;
  --glass-blur: 18px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.8);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 999px;
  --transition-fast: 0.18s ease-out;
  --transition-med: 0.26s ease-out;
}

/* light mode override */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f3f4f6;
  --bg-elevated: rgba(255, 255, 255, 0.95);
  --bg-elevated-strong: rgba(255, 255, 255, 0.98);
  --bg-elevated-solid: #ffffff;
  --skeleton-bg: rgba(209, 213, 219, 0.7);
  --border-subtle: rgba(148, 163, 184, 0.3);
  --accent: #7c3aed;
  --accent-2: #c026d3;
  --accent-soft: rgba(124, 58, 237, 0.1);
  --accent-strong: #6d28d9;
  --accent-gradient: linear-gradient(135deg, #7c3aed, #c026d3);
  --text-main: #111827;
  --text-muted: #4b5563;
  --text-soft: #6b7280;
  --shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.12);
}

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

/* The UA stylesheet's [hidden] { display: none } is easily beaten by any
   author rule that sets `display` on the same element (e.g. a `display:
   grid` panel) — equal specificity, author styles win regardless of source
   order. Elements toggled via the `hidden` DOM property/attribute need this
   to actually disappear. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* background orbits */

.background-orbit {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  z-index: -2;
  pointer-events: none;
}

.orbit-1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  top: -120px;
  right: -60px;
}

.orbit-2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.22), transparent 70%);
  bottom: -140px;
  left: -80px;
}

.orbit-3 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.2), transparent 70%);
  top: 40%;
  left: 60%;
}

.page-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* top navigation */

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 12px;
  z-index: 20;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-title {
  display: flex;
  flex-direction: column;
}

.nav-name {
  font-size: 14px;
  font-weight: 600;
}

.nav-subtitle {
  font-size: 11px;
  color: var(--text-soft);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent-strong);
  transition: width var(--transition-med);
}

.nav-links a:hover {
  color: var(--text-main);
}

.nav-links a:hover::after {
  width: 100%;
}

/* account nav — signed-in indicator + dropdown (script.js's initAccountNav) */

.nav-account {
  position: relative;
}

.nav-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated-solid);
  color: var(--text-main);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nav-account-trigger:hover,
.nav-account-trigger[aria-expanded="true"] {
  border-color: var(--accent-strong);
  background: var(--bg-elevated);
}

.nav-account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  object-fit: cover;
}

.nav-account-email {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account-chevron {
  color: var(--text-soft);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.nav-account-trigger[aria-expanded="true"] .nav-account-chevron {
  transform: rotate(180deg);
}

.nav-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated-strong);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-account-menu-email {
  padding: 8px 10px 6px;
  font-size: 11px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account-menu a,
.nav-account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-account-menu a:hover,
.nav-account-menu button:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* hero */

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 36px;
  align-items: center;
}

.hero-content {
  animation: fadeUp 0.6s ease-out;
}

.hero-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  background: radial-gradient(circle at left, rgba(34, 197, 94, 0.18), transparent 65%);
  color: var(--text-muted);
  margin-bottom: 10px;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}

.hero-content h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.hero-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 14px;
  background: radial-gradient(
      circle at top left,
      rgba(148, 163, 184, 0.18),
      transparent 70%
    ),
    var(--bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.4);
  min-width: 180px;
}

.chip-label {
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chip-value {
  font-size: 12px;
  color: var(--text-main);
}

/* hero visual */

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform-origin: center;
  animation: subtleFloat 10s ease-in-out infinite;
}

.glass-panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.code-panel {
  padding: 12px 12px 6px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-soft);
}

.panel-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.panel-header .red {
  background: #f97373;
}
.panel-header .amber {
  background: #facc15;
}
.panel-header .green {
  background: #4ade80;
}

.panel-title {
  margin-left: 4px;
}

.panel-body {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: radial-gradient(
    circle at top left,
    rgba(139, 92, 246, 0.16),
    transparent 70%
  );
  border-radius: 10px;
  padding: 10px;
}

.panel-body pre {
  margin: 0;
  white-space: pre-wrap;
}

.stats-panel {
  padding: 10px 12px 12px;
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-item {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 13px;
}

/* sections */

.section {
  margin-top: 50px;
}

.section-header {
  max-width: 540px;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 20px;
  margin: 0 0 8px;
}

.section-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* projects */

.project-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.project-card {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  padding: 16px 16px 14px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  transform-origin: center;
  transition: transform var(--transition-med), box-shadow var(--transition-med),
    border var(--transition-med), background var(--transition-med);
  opacity: 0;
  transform: translateY(16px);
}

.project-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* gallery — horizontal scrolling showcase, not a grid (small, cropped grid
   cells made dense UI screenshots illegible) */

.gallery-showcase {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

/* One slide fully fills the viewport at a time — a real fix, not a style
   tweak: the previous horizontal-scroll version showed part of a second
   slide and exposed a native scrollbar, both reported as looking bad.
   `.gallery-viewport` clips to exactly one slide's width; `.gallery-track`
   is the full-width flex row of ALL slides, moved via `transform`
   (JS-driven index, see script.js's initGalleryCarousel) rather than
   native scrolling — nothing left to show a scrollbar for. */
.gallery-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.gallery-track {
  display: flex;
  transition: transform 0.5s ease;
}

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
}

.gallery-slide img {
  width: 100%;
  /* A fixed aspect ratio + `object-fit: cover`, not `height: auto` — the
     auto-height version (every slide sized to its own image) fixed the
     letterboxing but looked messy in its own way: slides of wildly
     different heights sitting in one row, jagged and inconsistent. This
     crops each image to a uniform frame instead — CSS-only, the actual
     stored file on the CDN is untouched — but at a large enough box
     (480px wide, 16:10) that the original "too small to read" problem
     doesn't come back; cropping now trims edges, not the ability to read
     the screenshot.
  */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.gallery-slide figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.gallery-nav-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated-solid);
  color: var(--text-main);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.gallery-nav-btn:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.project-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-soft);
  border-color: var(--accent-strong);
  background: var(--bg-elevated-strong);
}

.project-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.project-card p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.project-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.project-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}

.project-lang-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.project-updated {
  color: var(--text-soft);
}

.project-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.project-actions .btn.small {
  font-size: 11px;
}

.project-private-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-soft);
}

/* skeleton loading */

.skeleton {
  overflow: hidden;
  position: relative;
  background: var(--bg-elevated);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(148, 163, 184, 0.2) 18%,
    transparent 40%
  );
  animation: shimmer 1.2s infinite;
}

.skeleton-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--skeleton-bg);
  margin-bottom: 8px;
}

.skeleton-bar.title {
  width: 60%;
  height: 14px;
  margin-top: 4px;
}

.skeleton-bar.line {
  width: 100%;
}
.skeleton-bar.line.short {
  width: 70%;
}

.skeleton-pill {
  width: 40%;
  height: 18px;
  border-radius: 999px;
  background: var(--skeleton-bg);
  margin-top: 14px;
}

/* skills */

.two-column .section-header {
  margin-bottom: 24px;
}

.skills-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
}

.skills-panel {
  padding: 16px 16px 14px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: radial-gradient(
      circle at top left,
      rgba(139, 92, 246, 0.22),
      transparent 60%
    ),
    var(--bg-elevated-strong);
  color: var(--text-main);
}

.plain-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.plain-list li + li {
  margin-top: 6px;
}

/* about */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.about-grid .glass-panel {
  padding: 16px 16px 14px;
}

/* contact */

.section-contact {
  margin-top: 60px;
}

.contact-panel {
  padding: 18px 18px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: var(--bg-elevated-strong);
}

.contact-panel h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.contact-panel p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid transparent;
  background: var(--bg-elevated-solid);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast), color var(--transition-fast);
}

.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn.primary {
  background: var(--accent-gradient);
  border-color: rgba(139, 92, 246, 0.9);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.btn.ghost {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--text-muted);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn.primary:hover {
  filter: brightness(1.05);
}

.btn.ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-main);
}

/* subtle ripple — primary (solid gradient) buttons only. A light-on-white
   ripple reads as a shine on top of a solid gradient fill, but on a
   transparent ghost button (Dashboard/Sign in/Theme toggle) there's no fill
   for it to blend into — it just shows up as a stark, mismatched blob
   sweeping across the pill, which is what actually looked broken here, not
   just the sizing. Scoping to .primary removes it from ghost buttons
   entirely rather than trying to tune its size down further. */
.btn.primary::after {
  content: "";
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 60%);
  opacity: 0;
  transition: width 0.28s ease-out, height 0.28s ease-out,
    opacity 0.28s ease-out;
}

.btn.primary:hover::after {
  width: 220%;
  height: 220%;
  opacity: 1;
}

/* 220% looks like a subtle ripple on a normal-sized button, but on a
   compact primary pill it's large enough relative to the button's own small
   box to read as an oversized blob — scaled down here so it stays
   proportional. */
.btn.primary.small:hover::after {
  width: 140%;
  height: 140%;
}

/* theme toggle */

.btn.theme-toggle-btn {
  padding: 0;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.theme-icon {
  display: none;
}

/* Dark is the default (no [data-theme] attribute set at all until a choice
   is made or restored from localStorage — see `color-scheme: dark` on
   :root), so the moon shows without needing a `[data-theme="dark"]`
   attribute selector to match against. */
.theme-icon-moon {
  display: inline-flex;
}

:root[data-theme="light"] .theme-icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-icon-sun {
  display: inline-flex;
}

/* footer */

.site-footer {
  margin-top: 40px;
  padding: 10px 4px;
  font-size: 11px;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.footer-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

.footer-dot {
  opacity: 0.6;
}

.site-footer a {
  color: var(--text-soft);
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--accent-strong);
}

/* signup page quick alignment */

.signup-container {
  max-width: 380px;
  margin: 90px auto 40px;
  padding: 22px 18px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.signup-container h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.signup-container p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}

/* real branded OAuth buttons — GitHub's dark convention, Google's official
   white/colored-G convention, rather than a generic gradient button doing
   double duty for every action on the page. */
.oauth-btn {
  width: 100%;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}

.oauth-btn + .oauth-btn {
  margin-top: 10px;
}

.github-btn {
  background: #24292e;
  color: #ffffff;
  border-color: #24292e;
}

.github-btn:hover {
  background: #1a1e22;
}

.google-btn {
  background: #ffffff;
  color: #3c4043;
  border-color: rgba(148, 163, 184, 0.5);
}

.google-btn:hover {
  background: #f8f9fa;
}

.back-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--accent-strong);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* animations */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(120%);
  }
}

/* responsive */

@media (max-width: 900px) {
  .top-nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    order: -1;
  }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 18px 12px 34px;
  }

  .top-nav {
    border-radius: 16px;
  }

  .hero-section {
    margin-top: 28px;
  }

  .skills-layout,
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .nav-links {
    justify-content: flex-start;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* signup page layout */

.signup-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.signup-container {
  max-width: 420px;
  width: 100%;
  padding: 28px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
  animation: fadeUp 0.6s ease-out;
}

.signup-container h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.signup-subtext {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.signup-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.signup-divider span {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.signup-divider p {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup-form label {
  font-size: 12px;
  color: var(--text-soft);
}

.signup-form input {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated-solid);
  color: var(--text-main);
  font-size: 14px;
}

.signup-form input:focus {
  outline: none;
  border-color: var(--accent-strong);
}

.signup-error {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
}

.signup-error a {
  color: var(--accent-strong);
  font-weight: 600;
}

.signup-switch {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.signup-switch a {
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.signup-switch a:hover {
  text-decoration: underline;
}

.full-width {
  width: 100%;
  justify-content: center;
}

/* ---- pricing page ---- */

.pricing-intro {
  margin-top: 8px;
}

.pricing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 24px;
}

.pricing-card {
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--transition-med), border-color var(--transition-med);
}

.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-strong);
}

.pricing-card h3 {
  margin: 0;
  font-size: 18px;
}

.payment-panel {
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  margin: 28px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-elevated-strong);
}

.payment-panel-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
}

.payment-panel h3 {
  margin: 0;
  font-size: 19px;
}

/* Two-column "landscape" checkout: card form on the left, order summary on
   the right — collapses to one column on narrow viewports, since Stripe's
   own Payment Element needs real width to lay its fields out comfortably. */
.payment-panel-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 26px;
  align-items: start;
}

@media (max-width: 640px) {
  .payment-panel-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.payment-panel-form-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.order-summary-card {
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
  background: radial-gradient(
      circle at top left,
      rgba(139, 92, 246, 0.18),
      transparent 70%
    ),
    var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-summary-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.order-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.order-summary-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.order-summary-divider {
  border-top: 1px solid var(--border-subtle);
  margin: 4px 0;
}

.order-summary-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.order-summary-total-price {
  font-size: 22px;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.payment-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
}

.payment-trust-line svg {
  flex-shrink: 0;
  color: var(--success);
}

.tier-price {
  font-size: 28px;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tier-quota {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tier-features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.tier-features li::before {
  content: "✓ ";
  color: var(--accent-strong);
  font-weight: 700;
}

/* ---- store page ---- */

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

.product-card {
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-strong);
  box-shadow: 0 20px 50px rgba(139, 92, 246, 0.25);
}

.product-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.product-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}

.product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.product-price-suffix {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.product-card h3 {
  margin: 0;
  font-size: 19px;
}

.product-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.product-feature-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-feature-list li {
  font-size: 12.5px;
  color: var(--text-muted);
}

.product-feature-list li::before {
  content: "✓ ";
  color: var(--accent-strong);
  font-weight: 700;
}

.product-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 4px;
}

/* store homepage hero + trust strip */

.store-hero {
  text-align: center;
  max-width: 720px;
  margin: 48px auto 0;
  animation: fadeUp 0.6s ease-out;
}

.store-hero .hero-badge {
  margin: 0 auto 14px;
}

.store-hero h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 16px;
}

.store-hero-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.store-hero .hero-actions {
  justify-content: center;
  margin-bottom: 0;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}

.trust-item {
  text-align: center;
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(var(--glass-blur));
}

.trust-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.trust-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---- dashboard page ---- */

.dashboard-empty,
.dashboard-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-empty {
  align-items: flex-start;
  gap: 12px;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-card-header h3 {
  margin: 0;
  font-size: 18px;
}

.status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.status-warning {
  background: rgba(217, 70, 239, 0.15);
  color: var(--accent-2, var(--accent-strong));
}

.status-canceled {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.dashboard-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-label {
  font-size: 12px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.license-key-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated-solid);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.license-key-display code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: var(--text-main);
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
}

.downloads-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.downloads-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- portfolio photo management (dashboard) ---- */

.photo-preview-row {
  display: flex;
}

.photo-preview {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.photo-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.photo-upload-row input[type="file"] {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 220px;
}

.gallery-caption-field {
  background: var(--bg-elevated-solid);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-main);
  font-size: 13px;
  min-width: 160px;
}

.gallery-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.gallery-manage-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elevated-solid);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px;
}

.gallery-manage-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.gallery-manage-caption {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- benchmarks page ---- */

.bench-lang-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.bench-lang-card {
  padding: 22px 22px 20px;
}

.bench-lang-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.bench-lang-header h3 {
  margin: 0;
  font-size: 18px;
}

.bench-lang-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bench-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .bench-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.metric-diff {
  font-weight: 600;
}

.metric-diff.neutral {
  color: var(--success);
}

.metric-diff.warn {
  color: var(--danger);
}

.metric-diff.na {
  color: var(--text-soft);
  font-weight: 400;
}

.code-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 720px) {
  .code-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

.code-compare .code-panel {
  padding: 10px 10px 8px;
}

.code-compare .panel-body {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: auto;
}

.code-compare .panel-body pre {
  white-space: pre;
}

.bench-caption {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

.tech-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 20px;
}

.tech-item {
  padding: 16px 16px 14px;
}

.tech-item h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.tech-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.methodology-panel {
  margin-top: 24px;
  padding: 16px 18px;
}

.methodology-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.methodology-panel p,
.methodology-panel li {
  font-size: 13px;
  color: var(--text-muted);
}

.methodology-panel ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.bench-cta {
  margin-top: 40px;
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated-strong);
}

.bench-cta h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.bench-cta p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- pricing page: trust/value content ---- */

.truthseeker-hook {
  margin: 20px 0 28px;
  padding: 18px 22px;
  background: var(--bg-elevated-strong);
}

.truthseeker-hook p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
  max-width: 720px;
}

.pricing-value-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 20px 0 36px;
}

.pricing-value-item {
  padding: 16px 16px 14px;
}

.pricing-value-item h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.pricing-value-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.pricing-proof-panel {
  margin: 36px 0 0;
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated-strong);
}

.pricing-proof-panel h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.pricing-proof-panel p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 480px;
}

/* Truth Seeker pricing page — "how it works" pipeline steps */

.truthseeker-steps-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 20px;
}

.truthseeker-step {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.truthseeker-step-number {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truthseeker-step h3 {
  margin: 0;
  font-size: 15px;
}

.truthseeker-step p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.dashboard-note {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}