/*
  jCoders — "Tavolina e punës" (The Workbench)
  Faqja vetë sillet si një sipërfaqe pune: tipografi e madhe editoriale +
  komponentë elektronikë realë të shpërndarë si objekte fizike + foto
  reale fëmijësh në veprim. Jo template, jo cards kudo, jo gradientë.
*/

:root {
  --ink: #00223B;
  --ink-70: rgba(0,34,59,.72);
  --ink-45: rgba(0,34,59,.5);
  --line: rgba(0,34,59,.14);
  --line-strong: rgba(0,34,59,.26);

  --paper: #FFFFFF;
  --paper-soft: #F3F7FA;

  --navy: #00416B;
  --yellow: #FFC72C;
  --yellow-deep: #C98A00;
  --warn: #D6303F;

  /* jCoders brand accents — used sparingly, as real color pops rather
     than a repaint of the whole palette */
  --jc-blue: #40B1E5;
  --jc-red: #F15B5B;
  --jc-orange: #FAA61A;
  --jc-purple: #9F64A9;
  --jc-green: #8CC63F;
  --jc-teal: #54C1A7;

  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-mono: "Poppins", "Segoe UI", sans-serif;

  --wrap: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; position: relative; }
@media (max-width: 640px) { .wrap { padding: 0 22px; } }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
strong { font-weight: 700; color: var(--ink); }
.mono { font-family: var(--font-mono); }

/* ---------- Spec tag: the mono "datasheet label" motif, used everywhere a
   real component appears ---------- */
.spec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--navy);
}
.spec-tag::before { content: ""; width: 14px; height: 1px; background: var(--yellow-deep); }

/* ---------- Shared patterns reused across the informational sections:
   a centered intro block, a dash-marked checklist (echoes the spec-tag
   dash), and a one-word emphatic answer. ---------- */
.section-intro { max-width: 620px; margin: 0 auto 32px; text-align: center; }
.section-intro .spec-tag { justify-content: center; margin-bottom: 16px; }
.section-intro h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 14px; }
.section-intro p { font-size: 16.5px; color: var(--ink-70); line-height: 1.7; }
.section-intro p + p { margin-top: 10px; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { position: relative; padding-left: 26px; font-size: 16.5px; color: var(--ink-70); line-height: 1.6; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 14px; height: 2px; background: var(--yellow-deep); }

.big-answer { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 64px); color: var(--navy); text-align: center; margin: 4px 0 20px; line-height: 1; }

/* ---------- Cutouts: real component photos, background-removed to true
   transparency (PNG alpha) — placed as physical objects in the composition,
   not product photography in a box. ---------- */
.cutout {
  position: absolute; filter: saturate(1.08) contrast(1.05);
  pointer-events: none; user-select: none; z-index: 3;
}

/* ---------- PCB trace divider: a thin line with right-angle jogs and via
   dots, standing in for a plain <hr> between sections. ---------- */
.trace {
  width: 100%; height: 20px; display: block;
}
.trace path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.trace circle { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  padding: 18px 36px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: background 0.15s ease, transform 0.12s ease;
}
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); clip-path: none; padding: 15px 30px; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; background: var(--yellow); transform: scaleX(0); transform-origin: left; }

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding: 12px 40px; }
.brand-logo { height: 32px; width: auto; display: block; }
.topbar .btn { padding: 11px 22px; font-size: 12.5px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-right .footer-social-icons { gap: 8px; }
.topbar-right .footer-social-icon { width: 30px; height: 30px; }
.topbar-right .footer-social-icon svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .topbar-right .footer-social-icons { display: none; } }

/* ================= HERO — full-screen photo =================
   The photo is the entire screen, uncropped by any panel. Text sits in
   the plain-wall side of the frame (the child's face lives on the right
   two-thirds), lifted by a scrim that spans the full hero edge-to-edge —
   so its fade always completes well inside its own box and can never
   clip into a visible seam. */
.hero-v3 { position: relative; min-height: calc(100vh - 57px); overflow: hidden; background: var(--ink); }
.hero-v3-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }

.hero-v3-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(0,14,28,0.62) 0%, rgba(0,14,28,0.5) 26%, rgba(0,14,28,0.22) 44%, rgba(0,14,28,0) 58%);
}
/* Dissolves the photo into the page's own paper background at the seam,
   so scrolling into the next (plain white) section reads as one
   continuous page rather than a hard cut between two different moods. */
.hero-v3-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,247,241,0) 0%, var(--paper) 92%);
}

.hero-v3-copy {
  position: relative; z-index: 3;
  max-width: 620px; padding: 0 5vw; margin: 0 auto 0 0;
  min-height: calc(100vh - 57px); display: flex; flex-direction: column; justify-content: center;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 24px;
}
.hero-kicker::before { content: ""; width: 20px; height: 2px; background: var(--yellow); }

.hero-date-badge {
  position: absolute; top: 100px; right: 5vw; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.01em; color: var(--ink);
  background: var(--yellow); padding: 9px 18px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
}
@media (max-width: 640px) {
  .hero-date-badge { top: 76px; right: 20px; font-size: 14px; padding: 7px 14px; }
}

.hero-v3-copy h1 {
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700;
  text-transform: uppercase; color: #fff; margin-bottom: 24px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.hero-v3-copy h1 .accent { color: var(--yellow); }
.hero-v3-copy .hero-lede { font-size: clamp(15px, 1.1vw, 17px); color: rgba(255,255,255,0.86); line-height: 1.65; max-width: 42ch; margin: 0 0 22px; }
.hero-v3-copy .hero-lede strong { color: #fff; }
.hero-v3-copy .hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 32px; }
.hero-v3-copy .hero-facts .sep { color: rgba(255,255,255,0.3); }
.hero-v3-copy .hero-facts .hero-age {
  font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink);
  background: var(--yellow); padding: 5px 12px 4px;
}
.hero-v3-copy .hero-facts .hero-age-outline {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7);
  padding: 3.5px 12px 2.5px;
}
.hero-cta { box-shadow: 0 20px 40px -14px rgba(0,0,0,0.5); align-self: flex-start; }
.hero-cta:hover { transform: translateY(-3px); }

.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 30px; z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); text-decoration: none;
  padding: 8px 14px; background: rgba(0,14,28,0.4); border-radius: 3px; backdrop-filter: blur(2px);
}
.hero-scroll-cue .chevron {
  width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,0.85); border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg); animation: heroScrollBounce 1.6s ease-in-out infinite;
}
@keyframes heroScrollBounce { 0%, 100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }

@media (max-width: 900px) {
  .hero-v3 { min-height: 100vh; }
  .hero-v3-photo { object-position: 62% top; }
  .hero-v3-scrim {
    background: linear-gradient(0deg,
      rgba(0,14,28,0.68) 0%, rgba(0,14,28,0.58) 34%, rgba(0,14,28,0.24) 52%, rgba(0,14,28,0) 64%);
  }
  .hero-v3-copy {
    max-width: none; padding: 0 24px; margin: 0;
    min-height: 100vh; justify-content: flex-end; padding-bottom: 80px;
  }
  .hero-v3-copy h1 { font-size: clamp(32px, 8.6vw, 48px); }
  .hero-scroll-cue { bottom: 18px; }
}

/* ================= EXPERIENCE (filmstrip) ================= */
.experience-band { padding: 90px 0; }
.experience-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
.experience-grid > * { min-width: 0; }
.experience-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; position: sticky; top: 90px; }
.experience-copy .spec-tag { margin-bottom: 20px; }
.experience-copy h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 20px; }
.experience-copy p { font-size: 17px; color: var(--ink-70); line-height: 1.7; max-width: 42ch; }
.experience-copy p + p { margin-top: 14px; }
.experience-copy strong { color: var(--ink); font-weight: 700; }
.experience-thus {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-45); margin-top: 24px !important;
}
.experience-steps {
  display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(4px, 1vw, 10px);
  margin-top: 14px; max-width: 100%; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.experience-steps::-webkit-scrollbar { display: none; }
.experience-steps .step { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.8vw, 17px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; }
.experience-steps .arrow { color: var(--ink-45); font-size: clamp(13px, 1.8vw, 16px); flex-shrink: 0; }
.experience-steps .step:nth-child(1) { color: var(--jc-blue); }
.experience-steps .step:nth-child(3) { color: var(--jc-red); }
.experience-steps .step:nth-child(5) { color: var(--jc-orange); }
.experience-steps .step:nth-child(7) { color: var(--jc-purple); }
.experience-steps .step:nth-child(9) { color: var(--jc-green); }
.experience-steps .step:nth-child(11) { color: var(--jc-teal); }
.filmstrip { display: flex; gap: 22px; margin-top: 40px; }
.filmstrip-item { flex: 1; padding-top: 8px; }
.filmstrip-photo {
  width: 100%; aspect-ratio: 1; object-fit: contain; object-position: center bottom;
  margin-bottom: 14px;
  filter: drop-shadow(0 16px 14px rgba(0,34,59,.22));
  transition: transform .25s ease;
}
.filmstrip-item:nth-child(1) .filmstrip-photo { transform: rotate(-4deg); }
.filmstrip-item:nth-child(2) .filmstrip-photo { transform: rotate(3deg) scale(1.03); }
.filmstrip-item:nth-child(3) .filmstrip-photo { transform: rotate(-2deg); }
.filmstrip-item:hover .filmstrip-photo { transform: translateY(-4px) rotate(0deg) scale(1.05); }
.filmstrip-item { text-align: center; }
.filmstrip-item .spec-tag { font-size: 14px; font-weight: 600; }
.filmstrip-item .spec-tag::before { display: none; }
@media (max-width: 900px) {
  .experience-grid { grid-template-columns: 1fr; gap: 36px; }
  .experience-photo { aspect-ratio: 16/10; position: static; top: auto; }
}
@media (max-width: 560px) { .filmstrip { flex-direction: column; } }

/* ================= JOURNEY (beads on a path, not cards) ================= */
.journey-band {
  padding: 60px 0 40px;
  background-color: var(--paper-soft);
  background-image: radial-gradient(var(--line-strong) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
.journey-head { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.journey-head h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 10px; }
.journey-head p { font-size: 16.5px; color: var(--ink-70); line-height: 1.65; }

.journey-path { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.journey-row { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.journey-row-line { position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line-strong); z-index: 0; }
.journey-node {
  position: relative; z-index: 1; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 0 8px;
}
.journey-dot {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: #fff;
  background: var(--jc-blue);
  box-shadow: 0 0 0 5px var(--paper-soft), 0 10px 18px -8px rgba(0,34,59,.4);
}
.journey-row:nth-child(1) .journey-node:nth-child(3) .journey-dot { background: var(--jc-red); }
.journey-row:nth-child(1) .journey-node:nth-child(4) .journey-dot { background: var(--jc-orange); }
.journey-row:nth-child(1) .journey-node:nth-child(5) .journey-dot { background: var(--jc-purple); }
.journey-row:nth-child(2) .journey-node:nth-child(2) .journey-dot { background: var(--jc-green); }
.journey-row:nth-child(2) .journey-node:nth-child(3) .journey-dot { background: var(--jc-teal); }
.journey-row:nth-child(2) .journey-node:nth-child(4) .journey-dot { background: var(--jc-red); }
.journey-row:nth-child(2) .journey-node:nth-child(5) .journey-dot { background: var(--jc-orange); }
.journey-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.journey-desc { font-size: 13.5px; color: var(--ink-45); line-height: 1.5; max-width: 20ch; }

@media (max-width: 820px) {
  .journey-path { gap: 34px; }
  .journey-row-line { left: 12.5%; right: 12.5%; }
  .journey-desc { max-width: none; }
}
@media (max-width: 620px) {
  .journey-band { padding: 50px 0 60px; }
  .journey-path { gap: 30px; }
  .journey-row { flex-direction: column; align-items: stretch; gap: 26px; }
  .journey-row-line { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .journey-node { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 0; }
  .journey-desc { max-width: none; }
}

/* ================= CIRCUIT STORY ================= */
.circuit-story {
  position: relative; padding: 40px 0 60px;
  background-color: var(--paper-soft);
  background-image: radial-gradient(var(--line-strong) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
@media (max-width: 760px) { .circuit-story { padding: 30px 0 44px; } }
.circuit-sticky { position: relative; display: flex; align-items: center; justify-content: center; overflow: visible; }
.circuit-stage { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.circuit-svg-wrap { width: 100%; }
.circuit-svg { width: 100%; height: auto; overflow: visible; }

.circuit-svg .wire { fill: none; stroke: #D8CBA0; stroke-width: 3; stroke-linecap: round; transition: stroke 0.35s ease; }
.circuit-svg .wire.is-drawn { stroke: var(--yellow-deep); }
.circuit-svg .wire.is-broken { stroke: var(--warn); stroke-dasharray: 4 10 !important; }
.circuit-svg .signal-dot { fill: var(--yellow-deep); filter: drop-shadow(0 0 8px rgba(201,138,0,0.6)); opacity: 0; }
.circuit-svg .signal-dot.is-live { opacity: 1; }
.circuit-svg .comp-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: var(--ink-70); letter-spacing: 0.08em; }
.circuit-svg image { filter: saturate(1.08) drop-shadow(0 12px 16px rgba(0,34,59,.3)); }
.circuit-svg .led-glow { fill: var(--yellow); opacity: 0; transition: opacity 0.4s ease; }
.circuit-svg .led-glow.is-on { opacity: 0.5; }
.circuit-svg .led-glow.is-bright { opacity: 0.85; }

/* lamp (final connected component) */
.circuit-svg .lamp-glass { fill: rgba(255,255,255,.75); stroke: var(--ink-45); stroke-width: 3; transition: fill .4s ease, stroke .4s ease; }
.circuit-svg .lamp-neck { fill: var(--ink-45); opacity: 0.55; }
.circuit-svg .lamp-base { fill: var(--ink-45); }
.circuit-svg .lamp-cap { fill: var(--ink); }
.circuit-svg .lamp-thread { stroke: var(--paper-soft); stroke-width: 1.5; }
.circuit-svg .lamp-filament { fill: none; stroke: var(--ink-45); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease, filter .4s ease; }
.circuit-svg .led-dome.is-on .lamp-glass { fill: rgba(255,199,44,.5); stroke: var(--yellow-deep); }
.circuit-svg .led-dome.is-on .lamp-filament { stroke: var(--yellow-deep); filter: drop-shadow(0 0 6px rgba(255,199,44,.95)); }
.circuit-svg .fault-mark { opacity: 0; transition: opacity 0.3s ease; }
.circuit-svg .fault-mark.is-visible { opacity: 1; }

.story-caption-stack { position: relative; height: 3.2em; margin-top: 48px; text-align: center; }
.story-caption {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 32px); color: var(--ink); opacity: 0; transition: opacity 0.4s ease;
}
.story-caption.is-active { opacity: 1; }
.story-caption .accent { color: var(--navy); }

.circuit-progress-rail { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); width: 2px; height: 200px; background: var(--line); z-index: 3; }
.circuit-progress-rail .fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--yellow-deep); }
@media (max-width: 760px) { .circuit-progress-rail { display: none; } }

/* ================= WHEN IT DOESN'T WORK (photo + a plain list, no cards) ================= */
.fail-band { padding: 80px 0; background: var(--paper); }
.fail-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: stretch; }
.fail-photo-wrap { position: relative; width: 100%; min-height: 320px; overflow: hidden; }
.fail-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fail-copy .spec-tag { margin-bottom: 18px; }
.fail-copy h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 16px; }
.fail-copy p { font-size: 16.5px; color: var(--ink-70); line-height: 1.7; }
.fail-copy p + p { margin-top: 8px; }
.fail-list { margin: 22px 0; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.fail-list li { display: flex; align-items: baseline; gap: 16px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.fail-list-num { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--warn); flex-shrink: 0; }
.fail-list-text { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); }
.fail-close { font-size: 16.5px; color: var(--ink-70); line-height: 1.7; }
.fail-close strong { color: var(--ink); }

/* ================= NO PRIOR KNOWLEDGE NEEDED ================= */
.noprereq-band { padding: 80px 0; background: var(--paper-soft); }
.noprereq-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: stretch; }
.noprereq-photo-wrap { position: relative; width: 100%; min-height: 320px; overflow: hidden; }
.noprereq-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.noprereq-copy .spec-tag { margin-bottom: 18px; }
.noprereq-copy h2 { font-size: clamp(28px, 3.2vw, 44px); margin-bottom: 16px; }
.noprereq-copy p { font-size: 16.5px; color: var(--ink-70); line-height: 1.7; margin-bottom: 14px; }
.noprereq-copy .check-list { margin-bottom: 18px; }
.noprereq-close { font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .fail-grid, .noprereq-grid { grid-template-columns: 1fr; gap: 32px; }
  .fail-photo-wrap, .noprereq-photo-wrap { min-height: 0; aspect-ratio: 16 / 10; }
  .noprereq-photo-wrap { order: -1; }
}

/* ================= AGE SPLIT ================= */
.age-band { padding: 80px 0; position: relative; }
.age-head { text-align: center; margin-bottom: 56px; }
.age-head .spec-tag { justify-content: center; margin-bottom: 18px; }
.age-head h2 { font-size: clamp(28px, 3.2vw, 44px); max-width: 30ch; margin: 0 auto; }
.age-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.age-group { padding: 0 48px; }
.age-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 8vw, 132px); line-height: 0.9; color: var(--navy); letter-spacing: -0.02em; }
.age-num .unit { font-size: 0.28em; font-weight: 600; color: var(--ink-45); margin-left: 6px; text-transform: uppercase; font-family: var(--font-mono); }
.age-group .desc { font-size: 16px; color: var(--ink-70); line-height: 1.7; margin: 20px 0 18px; max-width: 36ch; }
.age-contrast { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); line-height: 1.6; }
.age-wire-divider { position: relative; width: 130px; }
.age-wire-divider img { position: absolute; top: 50%; left: 50%; width: 108px; transform: translate(-50%,-50%) rotate(-6deg); filter: saturate(1.08) contrast(1.05) drop-shadow(0 18px 26px rgba(0,34,59,.22)); }
@media (max-width: 820px) {
  .age-split { grid-template-columns: 1fr; }
  .age-wire-divider { width: 100%; height: 200px; margin: 20px 0; }
  .age-wire-divider img { width: 60px; transform: translate(-50%,-50%) rotate(-6deg); }
  .age-group { padding: 0 4px; text-align: center; }
  .age-group .desc, .age-contrast { margin-left: auto; margin-right: auto; }
}

/* ================= SKILLS (scattered spec tags) ================= */
.skills-band { padding: 90px 0; background: var(--paper-soft); }
.skills-head { max-width: 640px; margin-bottom: 56px; }
.skills-head .spec-tag { margin-bottom: 18px; }
.skills-head h2 { font-size: clamp(28px, 3.2vw, 44px); }
.skills-head p { font-size: 17px; color: var(--ink-70); line-height: 1.7; margin-top: 16px; }
/* A learning cycle, not a card grid: five beads strung on one line, since
   the five skills are genuinely a sequence — predict, observe, solve,
   adapt, reflect — and the shape should say so. */
.skills-flow { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.skills-flow-line { position: absolute; top: 34px; left: 10%; right: 10%; height: 2px; background: var(--line-strong); z-index: 0; }
.skill-node {
  position: relative; z-index: 1; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  padding: 0 8px;
}
.skill-node-dot {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: #fff;
  background: var(--jc-blue);
  box-shadow: 0 0 0 6px var(--paper-soft), 0 16px 26px -12px rgba(0,34,59,.4);
}
.skill-node:nth-child(3) .skill-node-dot { background: var(--jc-red); }
.skill-node:nth-child(4) .skill-node-dot { background: var(--jc-orange); }
.skill-node:nth-child(5) .skill-node-dot { background: var(--jc-purple); }
.skill-node:nth-child(6) .skill-node-dot { background: var(--jc-green); }
.skill-node:nth-child(7) .skill-node-dot { background: var(--jc-teal); }
.skill-node .name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.skill-node .desc { font-size: 14.5px; color: var(--ink-45); line-height: 1.55; max-width: 22ch; }
.skills-flow-6 .skills-flow-line { left: 8.33%; right: 8.33%; }
.skills-close { text-align: center; max-width: 560px; margin: 32px auto 0; font-size: 16px; color: var(--ink-45); line-height: 1.6; }

@media (max-width: 760px) {
  .skills-band { padding: 90px 0; }
  .skills-flow { flex-direction: column; align-items: flex-start; gap: 34px; }
  .skills-flow-line, .skills-flow-6 .skills-flow-line { top: 34px; bottom: 34px; left: 34px; right: auto; width: 2px; height: auto; }
  .skill-node { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; padding: 0; width: 100%; }
  .skill-node-dot { width: 68px; }
  .skill-node .desc { max-width: none; }
}

/* ================= PAYOFF ================= */
.payoff { padding: 90px 0; }
.payoff-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.payoff-copy .spec-tag { margin-bottom: 20px; }
.payoff h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.12; max-width: 15ch; margin-bottom: 26px; }
.payoff-lines { font-size: 17px; color: var(--ink-70); line-height: 1.7; max-width: 44ch; margin-bottom: 22px; }
.payoff-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); color: var(--ink); }
.payoff-quote .accent { color: var(--navy); }
.payoff-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; }
.payoff-copy .accessory--wire {
  position: static; display: block; margin: 24px 0 0 4px;
  width: 190px; rotate: -6deg;
}
@media (max-width: 900px) {
  .payoff-grid { grid-template-columns: 1fr; gap: 36px; }
  .payoff-photo { order: -1; aspect-ratio: 16 / 10; }
}

/* ================= EVENT DETAILS — a ticket, not a form ================= */
.specsheet-band { position: relative; padding: 90px 0; }
.specsheet-head { text-align: center; margin-bottom: 44px; }
.specsheet-head .spec-tag { justify-content: center; margin-bottom: 18px; }
.specsheet-head h2 { font-size: clamp(28px, 3.2vw, 44px); }

.event-ticket {
  position: relative; max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 240px;
  background: var(--paper); border: 1px solid var(--line-strong);
  box-shadow: 0 34px 60px -34px rgba(0,34,59,.35);
}
.event-ticket::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--yellow);
}
.event-ticket-main { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 26px; }
.et-row .et-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.et-label { font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); }
.et-icon { width: 16px; height: 16px; color: var(--navy); flex-shrink: 0; }

.event-ticket-stub {
  position: relative; padding: 40px 30px; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  background: var(--paper-soft); border-left: 2px dashed var(--line-strong);
}
.event-ticket-stub::before, .event-ticket-stub::after {
  content: ""; position: absolute; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper);
}
.event-ticket-stub::before { top: -14px; }
.event-ticket-stub::after { bottom: -14px; }
.et-fact { display: flex; flex-direction: column; gap: 4px; }
.et-fact-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45); }
.et-fact-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.et-fact-value.accent { color: var(--navy); }

.spec-table-cta { display: table; margin: 40px auto 0; }

.spec-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 10px; }
.spec-chip {
  font-family: var(--font-mono); font-size: 14.5px; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--ink); background: var(--paper-soft); border: 1px solid var(--line-strong);
  padding: 8px 15px;
}
.spec-chip-loc { border-left-width: 3px; }
.spec-chip-loc:nth-of-type(1) { border-left-color: var(--jc-blue); }
.spec-chip-loc:nth-of-type(2) { border-left-color: var(--jc-teal); }
.spec-chip-loc:nth-of-type(3) { border-left-color: var(--jc-orange); }
.spec-chip-loc:nth-of-type(4) { border-left-color: var(--jc-purple); }
.spec-chip-loc:nth-of-type(5) { border-left-color: var(--jc-green); }
.spec-chip-note { font-size: 14.5px; color: var(--ink-45); font-style: italic; }
@media (max-width: 560px) { .spec-chip-note { flex-basis: 100%; } }

@media (max-width: 760px) {
  .event-ticket { grid-template-columns: 1fr; }
  .event-ticket-stub {
    border-left: none; border-top: 2px dashed var(--line-strong);
    flex-direction: row; flex-wrap: wrap; gap: 24px 28px; padding: 28px 30px;
  }
  .event-ticket-stub::before, .event-ticket-stub::after { top: -14px; bottom: auto; }
  .event-ticket-stub::before { left: -14px; }
  .event-ticket-stub::after { left: auto; right: -14px; }
  .et-fact { min-width: 40%; }
}

/* ================= FAQ ================= */
.faq-band { padding: 80px 0; background: var(--paper); }
.faq-list { max-width: 680px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.faq-item { padding: 22px 4px; border-bottom: 1px solid var(--line); }
.faq-q { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink); margin-bottom: 8px; }
.faq-a { font-size: 16px; color: var(--ink-70); line-height: 1.65; }
.faq-a.faq-tbd { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }

/* ================= FINAL CTA ================= */
.cta-final { position: relative; text-align: center; padding: 90px 0; overflow: hidden; background: var(--paper-soft); }
.cta-final h2 { font-size: clamp(32px, 5vw, 68px); font-weight: 700; text-transform: uppercase; max-width: 16ch; margin: 0 auto 18px; line-height: 1.05; }
.cta-final .accent { color: var(--navy); }
.cta-final-lede { font-size: 18px; font-weight: 600; color: var(--yellow-deep); margin: 0 auto 36px; }

/* ---------- Registration form: styled to match the page, submits
   straight into the connected Google Form's own responses. ---------- */
#regjistrohu { scroll-margin-top: 80px; }

.reg-form {
  max-width: 640px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); padding: 44px 48px;
  border: 1px solid var(--line); border-top: 4px solid var(--yellow);
  box-shadow: 0 30px 60px -30px rgba(0,34,59,0.18);
}
.reg-form[hidden] { display: none; }

.reg-section { display: flex; flex-direction: column; gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); }
.reg-section:first-child { padding-top: 0; border-top: none; }
.reg-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}

.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.reg-field { display: flex; flex-direction: column; gap: 8px; }
.reg-field label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-45); font-weight: 600;
}
.reg-field:has(input:required, textarea:required) label::after,
.reg-field:has(.reg-chips[data-required="true"]) label::after {
  content: " *"; color: var(--warn); font-style: normal;
}
.reg-optional { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ink-45); }
.reg-field input, .reg-field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--paper-soft); border: 1px solid var(--line-strong); padding: 13px 16px;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.reg-field input:hover, .reg-field textarea:hover { border-color: var(--ink-45); }
.reg-field input:focus, .reg-field textarea:focus { background: var(--paper); border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,65,107,0.12); }
.reg-field textarea { resize: vertical; font-family: var(--font-body); }

.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-chip {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink); background: var(--paper-soft); border: 1px solid var(--line-strong);
  padding: 10px 18px; cursor: pointer; transition: all .15s ease;
}
.reg-chip:hover { border-color: var(--navy); color: var(--navy); }
.reg-chip.is-selected { background: var(--navy); border-color: var(--navy); color: #fff; }

.reg-error {
  color: var(--warn); font-size: 14px; font-weight: 600; text-align: center;
  background: rgba(214,48,63,0.08); border: 1px solid rgba(214,48,63,0.3); padding: 12px 16px;
}
.reg-submit { align-self: stretch; width: 100%; margin-top: 6px; }

.reg-success { max-width: 480px; margin: 0 auto; text-align: center; }
.reg-success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); margin-bottom: 20px;
  position: relative;
}
.reg-success-mark::after {
  content: ""; position: absolute; left: 18px; top: 27px; width: 8px; height: 14px;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}
.reg-success h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.reg-success p { font-size: 16px; color: var(--ink-70); line-height: 1.65; }

@media (max-width: 640px) {
  .reg-row { grid-template-columns: 1fr; }
  .reg-form { padding: 32px 22px; }
}

/* ---------- Floating component accessories ----------
   Real jCoders modules (cut from the Labbox product photos), floating in the
   empty side margins as physical objects rather than photos — only shown
   once the viewport is wide enough to have real margin beside the 1280px
   .wrap, so they never compete with content on laptop/tablet/mobile. */
.accessory {
  position: absolute; top: 0; width: 180px; height: auto;
  pointer-events: none; z-index: 1;
  filter: drop-shadow(0 24px 30px rgba(0,34,59,0.22));
  animation: accessoryFloat 7s ease-in-out infinite;
}
.accessory--servo   { width: 190px; top: 20px;      right: -160px; rotate: -9deg; animation-delay: -1s; }
.accessory--wire    { width: 210px; top: auto; bottom: 30px; right: -150px; rotate: 6deg; animation-delay: -3.5s; }
.accessory--display { width: 130px; top: 10px;      right: -130px; rotate: 6deg;  animation-delay: -5s; }
.accessory--sensor  { width: 170px; top: 30px;      left: -150px;  rotate: -5deg; animation-delay: -2s; }

@keyframes accessoryFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

@media (max-width: 1500px) {
  .accessory { display: none; }
  .payoff-copy .accessory--wire { display: block; }
}
@media (max-width: 640px) {
  .payoff-copy .accessory--wire { width: 160px; margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .accessory { animation: none; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 40px 0; border-top: 1px solid var(--line); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-45); }
.footer-row a { color: var(--ink-70); text-decoration: none; }
.footer-row a:hover { color: var(--navy); }

.footer-social-icons { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(0,34,59,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-social-icon:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px -6px rgba(0,34,59,0.5); }
.footer-social-icon svg { width: 22px; height: 22px; }
.footer-social-icon--facebook { background: #1877F2; }
.footer-social-icon--instagram {
  background: radial-gradient(circle at 30% 110%, #ffdd55 0%, #ffdd55 10%, #ff543e 40%, #c837ab 60%, #5851db 90%);
}

.footer-credit {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
  margin-top: 28px; padding: 22px 26px; background: var(--paper-soft); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 16px; color: var(--ink-70);
}
.footer-credit-link { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 19px; }
.footer-credit-link:hover { color: var(--yellow-deep); }
.footer-credit-logo { width: 36px; height: 36px; display: block; }

/* ---------- Floating quick-registration ---------- */
.quick-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--yellow); color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 22px; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,34,59,0.18);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.quick-cta.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }