/* ============================================================
   DESIGN SYSTEM — matches lighthouseconsult.com's visual language
============================================================ */
:root {
  --green:        #2E6B4F;
  --green-dark:   #1E4A35;
  --green-darker: #123020;
  --green-light:  #3A8C65;
  --green-pale:   #EBF4EF;

  --gold:         #C9A84C;
  --gold-light:   #E8C96A;

  --text-dark:    #162018;
  --text-body:    #3C4E42;
  --text-light:   #6B7E72;
  --text-xlight:  #9AADA2;

  --bg:           #FFFFFF;
  --bg-alt:       #F7F9F7;

  --border:       #DDE5DF;
  --border-light: #EEF2EE;

  --shadow-sm:    0 1px 3px rgba(22,32,24,.07);
  --shadow-md:    0 4px 16px rgba(22,32,24,.08);
  --shadow-lg:    0 12px 36px rgba(22,32,24,.11);

  --r-sm:   4px;
  --r:      8px;
  --r-lg:   14px;
  --r-xl:   20px;

  --t:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   GRAIN OVERLAY
============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  body::before { opacity: 0.035; }
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }

/* ============================================================
   TYPOGRAPHY HELPERS
============================================================ */
/* .accent-green is defined later (ACCENT TEXT SHIMMER) — animated gradient text */

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
  padding-left: 11px;
  border-left: 2px solid var(--gold);
}

.section-title {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 18px;
}

.title-rule {
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  margin-bottom: 40px;
  border-radius: 2px;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--r);
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1;
}
.btn-full { width: 100%; justify-content: center; }

.btn-primary {
  background: var(--green);
  color: #fff;
  padding: 14px 26px;
  box-shadow: 0 2px 8px rgba(46,107,79,.25);
}
.btn-primary:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(46,107,79,.35); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--text-dark);
  border: 1.5px solid var(--border);
  padding: 13px 24px;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }

.btn-nav {
  background: var(--green);
  color: #fff;
  padding: 9px 22px;
  font-size: 0.875rem;
}
.btn-nav:hover { background: var(--green-dark); }

/* ============================================================
   INTRO — terminal-boot splash, plays once per session
============================================================ */
html.no-intro #intro { display: none !important; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 32%, #1a3f2c 0%, var(--green-darker) 75%);
  cursor: pointer;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.intro.intro-done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-inner { width: min(90vw, 560px); padding: 0 20px; cursor: default; }

.intro-lines {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  line-height: 2;
  min-height: 9em;
}
.intro-lines .line { color: #eafff2; }
.intro-lines .prompt { color: var(--gold-light); margin-right: 2px; }
.intro-lines .out { color: #7fd9a8; opacity: 0.85; padding-left: 1.2em; }
.intro-lines .cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: #eafff2;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: intro-blink 0.9s steps(1) infinite;
}
@keyframes intro-blink { 50% { opacity: 0; } }

.intro-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: rgba(234,255,242,.55);
  border: 1px solid rgba(234,255,242,.22);
  padding: 8px 14px;
  border-radius: var(--r);
  transition: color var(--t), border-color var(--t);
}
.intro-skip:hover { color: #eafff2; border-color: rgba(234,255,242,.55); }

@media (max-width: 560px) {
  .intro-skip { bottom: 20px; right: 20px; }
}

/* Blinking cursor tying the hero headline back to the intro's terminal motif */
.hero-cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.85em;
  background: var(--gold);
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: intro-blink 1s steps(1) infinite;
}

/* ============================================================
   NAVIGATION
============================================================ */
.nav-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow var(--t);
}
.nav-bar.scrolled { box-shadow: 0 2px 20px rgba(22,32,24,.09); }

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transition: width 0.08s linear;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; white-space: nowrap; }
.logo-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.15;
}
.logo-sub { font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.02em; }

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a:not(.btn), .nav-links button.resume-view-open {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-body);
  transition: color var(--t);
}
.nav-links a:not(.btn):hover, .nav-links button.resume-view-open:hover { color: var(--green); }

.nav-consulting {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--green-dark) !important;
  background: var(--green-pale);
  border: 1px solid rgba(46,107,79,.25);
  border-radius: var(--r-full);
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-consulting:hover {
  background: var(--green);
  color: #fff !important;
  border-color: var(--green);
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text-dark); border-radius: 2px; }

/* ============================================================
   HERO
============================================================ */
.hero {
  padding: 168px 0 96px;
  position: relative;
  background-image: radial-gradient(rgba(46,107,79,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.hero-headline {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 14px 0 20px;
}
.hero-rule {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 2px;
  margin-bottom: 22px;
}
.hero-desc { font-size: 1.05rem; color: var(--text-body); max-width: 54ch; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.hero-stats strong {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--green);
}
.hero-stats span { font-size: 0.82rem; color: var(--text-light); max-width: 16ch; }

.hero-right { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.hero-photo-wrap { position: relative; z-index: 1; width: 300px; height: 300px; }
.hero-photo-backdrop {
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: linear-gradient(135deg, var(--gold), var(--green-light));
  border-radius: var(--r-xl);
  z-index: 0;
}
.hero-photo-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid #fff;
  outline: 1px solid var(--border);
}
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  position: absolute;
  bottom: -14px;
  right: -14px;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--green-darker);
  border: 2px solid var(--gold);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  box-shadow: var(--shadow-lg);
}
.hero-badge-since {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero-badge-year {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 1px 0;
}
.hero-badge-label {
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* Stat counters reuse hero-stats layout; just ensure numerals don't jump width */
.hero-stats strong { font-variant-numeric: tabular-nums; }

/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESUME MODAL
============================================================ */
.resume-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.resume-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.resume-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 48, 32, 0.82);
  backdrop-filter: blur(3px);
}
.resume-modal-frame {
  position: relative;
  z-index: 1;
  width: min(94vw, 1040px);
  height: min(calc(var(--app-height, 100vh) - 36px), 900px);
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(201,168,76,.35), var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.resume-modal.open .resume-modal-frame { transform: translateY(0) scale(1); opacity: 1; }
.resume-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--green-pale), #fff);
  flex-shrink: 0;
}
.resume-modal-header h2 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text-dark);
  font-weight: 700;
  white-space: nowrap;
}
.resume-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-sm { padding: 8px 13px !important; font-size: 0.8rem !important; gap: 6px !important; }
.resume-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  transition: background var(--t), color var(--t), border-color var(--t);
  flex-shrink: 0;
}
.resume-modal-close:hover { background: var(--text-dark); color: #fff; border-color: var(--text-dark); }
.resume-modal-body { flex: 1; min-height: 0; background: #f4f6f4; }
.resume-pdf { width: 100%; height: 100%; border: 0; display: block; }
.resume-pdf-fallback { height: 100%; display: grid; place-items: center; text-align: center; padding: 32px; color: var(--text-body); }
.resume-pdf-fallback h3 { font-family: 'Lora', Georgia, serif; color: var(--text-dark); font-size: 1.5rem; margin-bottom: 10px; }
.resume-pdf-fallback p { max-width: 430px; margin: 0 auto 22px; color: var(--text-light); }
.resume-fallback-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .resume-modal { padding: 0; }
  .resume-modal-frame { width: 100vw; height: var(--app-height, 100vh); border-radius: 0; }
  .resume-modal-header { align-items: flex-start; flex-direction: column; }
  .resume-modal-actions { width: 100%; justify-content: space-between; }
}

/* ============================================================
   ABOUT + EXPERTISE
============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  margin-bottom: 64px;
}
.about-body p { margin-bottom: 16px; font-size: 1rem; }
.about-body a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.expertise-card {
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  transition: box-shadow var(--t), transform var(--t);
}
.expertise-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.expertise-icon { width: 30px; height: 30px; color: var(--green); margin-bottom: 16px; }
.expertise-card h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.02rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.expertise-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; }

/* ============================================================
   IMPACT CARDS
============================================================ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.impact-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
}
.impact-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,.12);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.impact-metric {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 10px;
}
.impact-card p:last-child { font-size: 0.92rem; color: var(--text-body); }

/* ============================================================
   WEB PROJECTS
============================================================ */
.work-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-pale);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
}
.work-intro { max-width: 62ch; font-size: 0.98rem; color: var(--text-light); margin-top: -8px; margin-bottom: 8px; }
.work-more { margin-top: 24px; font-size: 0.92rem; color: var(--text-light); }
.work-more a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ── Slider shell ─────────────────────────────────────── */
.ws-slider { position: relative; }

.ws-main {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@keyframes wsSlideIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
@keyframes wsKenBurns {
  from { transform: scale(1.0)  translate(0, 0); }
  to   { transform: scale(1.07) translate(-1%, -0.5%); }
}
@keyframes wsCaptionUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wsProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.ws-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.ws-slide.ws-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  animation: wsSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ws-browser { background: #1c1c1e; }

.wcb-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #1c1c1e; }
.wcb-dots { display: flex; gap: 5px; flex-shrink: 0; }
.wcb-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.wcb-urlbar {
  flex: 1;
  padding: 4px 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255,255,255,0.5);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcb-ext-link { font-size: 0.72rem; font-weight: 600; color: #7ee2ab; white-space: nowrap; flex-shrink: 0; transition: color var(--t); }
.wcb-ext-link:hover { color: #a8f0c6; }

.wcb-screenshot { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-alt); }
.wcb-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform-origin: center top;
  transition: transform 0.6s ease;
}
.ws-slide.ws-active .wcb-screenshot img { animation: wsKenBurns 9s ease-out forwards; }
.ws-slide.ws-active:hover .wcb-screenshot img { animation-play-state: paused; }

.wcb-visit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22,32,24,0);
  transition: background var(--t);
}
.wcb-visit-overlay span {
  padding: 11px 26px;
  border-radius: var(--r-full);
  background: var(--green);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
}
.ws-slide.ws-active .wcb-screenshot:hover .wcb-visit-overlay { background: rgba(22,32,24,0.4); }
.ws-slide.ws-active .wcb-screenshot:hover .wcb-visit-overlay span { opacity: 1; transform: translateY(0); }

.ws-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}
.ws-caption-text { display: flex; flex-direction: column; gap: 2px; }
.ws-caption-name { font-family: 'Lora', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--text-dark); }
.ws-caption-sub { font-size: 0.8rem; color: var(--text-light); }
.ws-caption-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.ws-caption-build { font-size: 0.78rem; color: var(--text-light); }
.ws-caption-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color var(--t), gap var(--t);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ws-caption-link:hover { color: var(--green-dark); gap: 8px; }

.ws-slide.ws-active .ws-caption-name { animation: wsCaptionUp 0.5s 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.ws-slide.ws-active .ws-caption-sub  { animation: wsCaptionUp 0.5s 0.34s cubic-bezier(0.22,1,0.36,1) both; }
.ws-slide.ws-active .ws-caption-link { animation: wsCaptionUp 0.5s 0.42s cubic-bezier(0.22,1,0.36,1) both; }

.ws-arrow {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--text-dark);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--t), color var(--t), transform var(--t);
}
.ws-arrow:hover { background: var(--green); color: #fff; transform: scale(1.08); }
.ws-prev { left: 16px; }
.ws-next { right: 16px; }

.ws-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.ws-thumb {
  flex: 0 0 calc(20% - 10px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.55;
  transition: opacity var(--t);
}
.ws-thumb:hover  { opacity: 0.85; }
.ws-thumb.active { opacity: 1; }

.ws-thumb-browser {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.ws-thumb.active .ws-thumb-browser { border-color: var(--green); box-shadow: var(--shadow-md), 0 0 0 3px var(--green-pale); }
.ws-thumb:not(.active):hover .ws-thumb-browser { border-color: var(--border); }

.ws-thumb-chrome { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #1c1c1e; }
.ws-thumb-dot { width: 6px; height: 6px; border-radius: 50%; display: block; flex-shrink: 0; }
.ws-thumb-url {
  flex: 1;
  font-size: 0.58rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255,255,255,0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.ws-thumb-browser img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; display: block; }
.ws-thumb-label { font-size: 0.75rem; font-weight: 600; color: var(--text-body); text-align: center; transition: color var(--t); }
.ws-thumb.active .ws-thumb-label { color: var(--green-dark); }

.ws-thumb-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(255,255,255,0.15); overflow: hidden; }
.ws-thumb-progress::after { content: ''; display: block; height: 100%; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.ws-thumb.active .ws-thumb-progress::after { animation: wsProgress 5s linear both; }

@media (max-width: 640px) {
  .ws-thumbs {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .ws-thumbs::-webkit-scrollbar { display: none; }
  .ws-thumb { flex: 0 0 120px; scroll-snap-align: start; }
  .ws-thumb-url { display: none; }
  .ws-thumb-label { font-size: 0.7rem; }
  .ws-arrow { width: 36px; height: 36px; }
  .ws-prev { left: 8px; }
  .ws-next { right: 8px; }
}

/* ============================================================
   QUOTE BAND
============================================================ */
.quote-band {
  background: linear-gradient(135deg, var(--green-darker), var(--green-dark) 70%);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}
.quote-inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.quote-mark {
  font-family: 'Lora', Georgia, serif;
  font-size: 5rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: -14px;
  opacity: 0.9;
}
.quote-text {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  color: #fff;
  line-height: 1.55;
}
.quote-attribution {
  margin-top: 22px;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ============================================================
   TIMELINE / EXPERIENCE
============================================================ */
.timeline { display: flex; flex-direction: column; gap: 36px; }
.timeline-item {
  border-left: 2px solid var(--border);
  padding-left: 26px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--green);
}
.timeline-consulting::before { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.timeline-head h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.2rem;
  color: var(--text-dark);
}
.timeline-role { font-size: 0.9rem; font-weight: 600; color: var(--green); margin-top: 2px; }
.timeline-dates { font-size: 0.85rem; font-weight: 600; color: var(--text-light); white-space: nowrap; }
.timeline-context { font-size: 0.88rem; font-style: italic; color: var(--text-light); margin: 6px 0 10px; }

.timeline-item ul { margin-top: 10px; }
.timeline-item li {
  font-size: 0.92rem;
  color: var(--text-body);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.timeline-item li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.timeline-earlier {
  border-left: 2px solid var(--border);
  padding-left: 26px;
}
.timeline-earlier summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green);
  font-size: 0.92rem;
  list-style: none;
}
.timeline-earlier summary::-webkit-details-marker { display: none; }
.timeline-earlier summary::before { content: '+ '; }
.timeline-earlier[open] summary::before { content: '– '; }
.timeline-earlier-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.timeline-earlier-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-body);
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 8px;
}
.timeline-earlier-list span { color: var(--text-light); white-space: nowrap; }

/* ============================================================
   SKILLS
============================================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.skills-group h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.aside-note {
  margin-top: 48px;
  padding-left: 22px;
  border-left: 3px solid var(--gold);
  max-width: 56ch;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-dark);
  line-height: 1.6;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--green-dark);
  background: var(--green-pale);
  border: 1px solid rgba(46,107,79,.15);
  border-radius: var(--r);
  padding: 6px 12px;
  cursor: default;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t),
              opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chips span:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(46,107,79,.25);
  z-index: 1;
}

/* Staggered pop-in, triggered by the same .revealed class the shared
   scroll-reveal observer already adds to .skills-group — no extra JS. */
.skills-group.revealed .chips span {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.skills-group.revealed .chips span:hover { transform: translateY(-4px) scale(1.12); }
.skills-group .chips span:nth-child(1)  { transition-delay: 0.04s; }
.skills-group .chips span:nth-child(2)  { transition-delay: 0.09s; }
.skills-group .chips span:nth-child(3)  { transition-delay: 0.14s; }
.skills-group .chips span:nth-child(4)  { transition-delay: 0.19s; }
.skills-group .chips span:nth-child(5)  { transition-delay: 0.24s; }
.skills-group .chips span:nth-child(6)  { transition-delay: 0.29s; }
.skills-group .chips span:nth-child(7)  { transition-delay: 0.34s; }
.skills-group .chips span:nth-child(8)  { transition-delay: 0.39s; }
.skills-group .chips span:nth-child(9)  { transition-delay: 0.44s; }
.skills-group .chips span:nth-child(10) { transition-delay: 0.49s; }

/* The nth-child delays above are for the one-time entrance stagger only —
   reset to instant once revealed so hover feels snappy, not laggy. */
.skills-group.revealed .chips span { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .chips span { opacity: 1; transform: none; transition: background var(--t), color var(--t); }
}

/* ============================================================
   EDUCATION
============================================================ */
.education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.edu-block { margin-bottom: 20px; }
.edu-title { font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }

/* ============================================================
   CONTACT
============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-lead { font-size: 1rem; margin-bottom: 32px; max-width: 46ch; }
.contact-details { display: flex; flex-direction: column; gap: 16px; }
.contact-details li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
}
.contact-details strong { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.contact-details a { font-weight: 600; color: var(--text-dark); transition: color var(--t); }
.contact-details a:hover { color: var(--green); }

.consulting-callout {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--green-pale);
  border: 1px solid rgba(46,107,79,.2);
  border-radius: var(--r-lg);
}
.consulting-callout p {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 14px;
}
.consulting-callout strong { color: var(--text-dark); }

.contact-form {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); }
.form-row label span { font-weight: 400; color: var(--text-light); }
.form-row input, .form-row textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 0.92rem;
  color: var(--text-dark);
  transition: border-color var(--t);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--green); }

.form-msg { font-size: 0.85rem; text-align: center; display: none; }
.form-msg-success { color: var(--green); }
.form-msg-success.visible { display: block; }
.form-msg-error:not(:empty) { display: block; color: #C0392B; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer { background: var(--green-darker); color: #fff; padding: 36px 0; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}
.footer-inner p { color: rgba(255,255,255,.7); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: rgba(255,255,255,.85); transition: color var(--t); }
.footer-links a:hover { color: var(--gold-light); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { order: -1; }
  .hero-photo-frame { width: 220px; height: 220px; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .education-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    inset: 64px 0 auto;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 28px 24px;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t), opacity var(--t);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { padding: 10px 0; width: 100%; }
  .nav-links .btn { margin-top: 8px; }
  .nav-toggle { display: flex; }
  .hero { padding-top: 128px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ============================================================
   CHAT WIDGET
============================================================ */
.chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 2500; }

.chat-launcher {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(46,107,79,.35);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  animation: chatPop 0.5s 1.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
.chat-launcher:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46,107,79,.42); }
.chat-launcher::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
}
.chat-widget.chat-open .chat-launcher::after { display: none; }
@keyframes chatPop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

.chat-launcher-icon-close { display: none; }
.chat-widget.chat-open .chat-launcher-icon-open { display: none; }
.chat-widget.chat-open .chat-launcher-icon-close { display: block; }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(360px, calc(100vw - 48px));
  height: min(500px, calc(100vh - 140px));
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.2s;
}
.chat-widget.chat-open .chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--green-darker), var(--green-dark));
  color: #fff;
  flex-shrink: 0;
}
.chat-header-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a0; box-shadow: 0 0 0 3px rgba(110,231,160,.25); flex-shrink: 0; }
.chat-header-sub { font-size: 0.72rem; color: rgba(255,255,255,.65); margin-top: 3px; }
.chat-close {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8); flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.chat-close:hover { background: rgba(255,255,255,.15); color: #fff; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-alt);
}
.chat-msg { max-width: 84%; font-size: 0.86rem; line-height: 1.5; padding: 10px 13px; border-radius: var(--r-lg); }
.chat-msg a { color: inherit; text-decoration: underline; }
.chat-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-body);
  border-bottom-left-radius: 4px;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-lg); border-bottom-left-radius: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-xlight); animation: chatTyping 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; flex-shrink: 0; border-top: 1px solid var(--border-light); }
.chat-chip {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--green-dark);
  background: var(--green-pale);
  border: 1px solid rgba(46,107,79,.15);
  border-radius: var(--r-full);
  padding: 6px 11px;
  transition: background var(--t), transform var(--t);
}
.chat-chip:hover { background: #dcefe4; transform: translateY(-1px); }

.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-light); flex-shrink: 0; }
.chat-input-row input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 9px 15px;
  font-size: 0.86rem;
  color: var(--text-dark);
  transition: border-color var(--t);
}
.chat-input-row input:focus { outline: none; border-color: var(--green); }
.chat-send {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.chat-send:hover { background: var(--green-dark); }

@media (max-width: 480px) {
  .chat-widget { right: 16px; bottom: 16px; }
  .chat-panel { width: calc(100vw - 32px); height: min(70vh, 560px); bottom: 70px; }
}

/* ============================================================
   HERO ENTRANCE CHOREOGRAPHY
   Staggered cascade once the intro clears (or immediately if
   the intro is skipped via sessionStorage / reduced-motion).
============================================================ */
.hero-left > *,
.hero-right {
  opacity: 0;
  transform: translateY(28px);
}
.hero-right { transform: translateY(20px) scale(0.94); }

@keyframes heroCascade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroCascadePhoto {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.hero-ready .hero-left > * {
  animation: heroCascade 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.hero-ready .hero-right {
  animation: heroCascadePhoto 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}
body.hero-ready .hero-left > *:nth-child(1) { animation-delay: 0.02s; }
body.hero-ready .hero-left > *:nth-child(2) { animation-delay: 0.12s; }
body.hero-ready .hero-left > *:nth-child(3) { animation-delay: 0.22s; }
body.hero-ready .hero-left > *:nth-child(4) { animation-delay: 0.32s; }
body.hero-ready .hero-left > *:nth-child(5) { animation-delay: 0.42s; }
body.hero-ready .hero-left > *:nth-child(6) { animation-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .hero-left > *, .hero-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================
   ACCENT TEXT SHIMMER
============================================================ */
.accent-green {
  background: linear-gradient(100deg, var(--green) 30%, var(--gold-light) 50%, var(--green) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -20% center; }
}
@media (prefers-reduced-motion: reduce) {
  .accent-green { animation: none; background-position: 0 center; color: var(--green); }
}

/* ============================================================
   TIMELINE DRAW-IN LINE
============================================================ */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--green) 45%, var(--green-dark));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.timeline.drawn::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .timeline::before { transition: none; transform: scaleY(1); }
}

/* ============================================================
   3D TILT CARDS
============================================================ */
.expertise-card, .impact-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--t);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .expertise-card, .impact-card { transform: none !important; }
}

/* ============================================================
   HERO PARALLAX
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo-wrap { will-change: transform; }
}

/* ============================================================
   FUN & GAMES SECTION
============================================================ */
.fun-lead { max-width: 640px; color: var(--text-body); margin-bottom: 8px; }
.fun-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 8px;
}
.game-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 22px 22px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--t);
}
.game-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .game-card:hover { transform: none; }
}
.game-card-preview {
  position: relative;
  height: 190px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.game-card h3 { font: 700 1.25rem/1.2 'Lora', Georgia, serif; color: var(--text-heading); margin: 0 0 6px; }
.game-card p { color: var(--text-body); font-size: 0.92rem; line-height: 1.6; margin: 0 0 16px; }

/* --- flappy mini preview --- */
.gp-flappy { background: linear-gradient(180deg, #70c5ce 0%, #b8e4ee 78%, #ded895 78%, #c5b966 100%); }
.gp-fly-cloud {
  position: absolute;
  width: 40px; height: 15px;
  background: rgba(255,255,255,0.88);
  border-radius: 30px;
}
.gp-fly-cloud::before, .gp-fly-cloud::after {
  content: ''; position: absolute; background: rgba(255,255,255,0.88); border-radius: 50%;
}
.gp-fly-cloud::before { width: 20px; height: 20px; top: -8px; left: 5px; }
.gp-fly-cloud::after  { width: 15px; height: 15px; top: -6px; left: 17px; }
.gp-fly-cloud.c1 { top: 18px; left: 14px; }
.gp-fly-cloud.c2 { top: 34px; right: 20px; transform: scale(0.75); }
.gp-fly-pipe {
  position: absolute;
  width: 26px;
  background: linear-gradient(90deg, #3a9e4a, #4ecb62 40%, #2d7a3a);
  border-radius: 3px;
}
.gp-fly-pipe.top    { top: 0; height: 58px; left: 68%; }
.gp-fly-pipe.bottom { bottom: 30px; height: 46px; left: 68%; }
.gp-fly-bird {
  position: absolute;
  top: 74px; left: 34%;
  width: 22px; height: 22px;
  background: radial-gradient(circle at 35% 38%, #FFE866, #FFD700 60%, #E6B800);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.gp-fly-bird::after {
  content: '';
  position: absolute; right: -6px; top: 7px;
  width: 8px; height: 5px;
  background: #FF8C00;
  clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0 70%);
}

/* --- tetris mini preview --- */
.gp-tetris {
  background: #0e1a14;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 20px;
  align-content: end;
  gap: 2px;
  padding: 10px;
}
.gp-tetris span { border-radius: 3px; opacity: 0; }
.gp-tetris span.on { opacity: 1; }

/* --- breakout mini preview --- */
.gp-breakout {
  background: linear-gradient(180deg, #123020 0%, #0e1a14 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 14px;
  align-content: start;
}
.gp-bo-brick { grid-row: 1; height: 12px; border-radius: 3px; }
.gp-bo-ball {
  position: absolute;
  top: 92px; left: 46%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #cfe9e0);
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
.gp-bo-paddle {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, #E8C96A, #C9A84C);
}

/* --- cannon duel mini preview --- */
.gp-cannon {
  background: linear-gradient(180deg, #0d2318 0%, #173d2a 60%, #2a5c3f 100%);
}
.gp-cn-terrain {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 46px;
  background: linear-gradient(180deg, #5b4a30, #2c2318);
  clip-path: polygon(0% 60%, 15% 40%, 32% 55%, 50% 20%, 68% 50%, 85% 35%, 100% 55%, 100% 100%, 0% 100%);
}
.gp-cn-cannon {
  position: absolute;
  bottom: 18px;
  width: 16px; height: 10px;
  border-radius: 3px;
}
.gp-cn-cannon.left  { left: 22px; background: #4ecb62; }
.gp-cn-cannon.right { right: 22px; background: #ff5f57; }
.gp-cn-arc {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  bottom: 70px;
}
.gp-cn-arc.d1 { left: 20%; bottom: 60px; }
.gp-cn-arc.d2 { left: 34%; bottom: 84px; }
.gp-cn-arc.d3 { left: 50%; bottom: 96px; }
.gp-cn-arc.d4 { left: 66%; bottom: 84px; }
.gp-cn-arc.d5 { left: 80%; bottom: 60px; }

.game-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 0;
  border-radius: 30px;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.game-play-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.game-play-btn span {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  font-size: 9px;
}

@media (max-width: 720px) {
  .fun-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   GAME MODALS (Flappy Bird + Tetris)
============================================================ */
.game-modal {
  position: fixed;
  z-index: 350;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.game-modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.game-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 55%, rgba(112,197,206,.16), transparent 35%),
    rgba(7,18,12,.9);
  backdrop-filter: blur(2px);
}
.game-modal-close {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 24px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.game-demo-stage {
  position: relative;
  z-index: 2;
  width: min(900px, 92vw);
  height: min(780px, calc(var(--app-height, 100vh) * 0.92));
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 70px;
  align-items: center;
}
.game-demo-intro { color: #fff; }
.game-demo-intro .eyebrow { color: #7ee2ab; }
.game-demo-intro h2 { margin: 8px 0 14px; font: 700 clamp(2rem,4vw,3.2rem)/1 'Lora',Georgia,serif; }
.game-demo-intro p:not(.eyebrow) { max-width: 360px; color: rgba(255,255,255,.68); line-height: 1.7; }
.game-demo-intro strong { color: rgba(255,255,255,.9); }
.game-demo-tip { display: inline-block; margin-top: 20px; color: rgba(255,255,255,.45); font-size: .75rem; }
.game-phone {
  position: relative;
  width: 320px;
  height: min(640px, calc(var(--app-height, 100vh) * 0.84));
  max-height: 640px;
  border: 7px solid #090d0b;
  border-radius: 50px;
  background: #090d0b;
  box-shadow: 0 50px 100px rgba(0,0,0,.55);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
}
.game-modal.open .game-phone { transform: translateY(0); }
.game-phone-notch { position: absolute; z-index: 5; top: 14px; left: 50%; width: 100px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #090d0b; }
.game-phone-home { position: absolute; z-index: 5; bottom: 14px; left: 50%; width: 100px; height: 5px; transform: translateX(-50%); border-radius: 6px; background: #18211c; }
#flappy-canvas, #tetris-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  cursor: pointer;
  touch-action: none;
}
.tetris-phone #tetris-canvas { flex: 1; border-radius: 40px 40px 0 0; min-height: 0; }
.cannon-phone #cannon-canvas { flex: 1; border-radius: 40px 40px 0 0; min-height: 0; }
.tetris-controls, .cannon-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 10px;
  background: #090d0b;
}
.cannon-field {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 10px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 700;
}
.cannon-field input {
  width: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
  -moz-appearance: textfield;
}
.cannon-field input::-webkit-outer-spin-button,
.cannon-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cannon-field input:focus { outline: none; }
.cannon-field span { color: rgba(255,255,255,.6); }
.game-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.game-btn:active { background: rgba(255,255,255,.2); }
.game-btn-accent { background: rgba(95,212,224,0.22); border-color: rgba(95,212,224,0.4); }

@media (max-width: 800px) {
  .flappy-preview { min-height: 500px; }
  .game-demo-stage { display: flex; width: auto; height: auto; }
  .game-demo-intro { display: none; }
  .game-phone { width: min(340px, 92vw); height: min(640px, 86vh); }
  .tetris-phone { height: min(690px, 90vh); }
  .game-modal-close { top: 8px; right: 10px; }
}

@media (max-width: 400px) {
  .game-phone { width: 100vw; height: var(--app-height, 100vh); max-height: none; border: 0; border-radius: 0; }
  .tetris-phone #tetris-canvas, #flappy-canvas { border-radius: 0; }
  .game-phone-notch, .game-phone-home { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .game-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .game-phone { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-modal, .game-phone { transition: none !important; transform: none !important; }
}