/* ==========================================================================
   Per-section styles
   ========================================================================== */

/* ---- HERO --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 40px var(--sp-5);
  background: transparent;
  color: var(--fg-on-dark-1);
}

/* Hero's local radial blobs removed — page-wide cosmic-stage covers it */

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-7);
  align-items: center;
}

.hero-h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 3.55vw, 50px);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-on-dark-1);
  margin: 0 0 var(--sp-5);
}

.hero-h1-line {
  display: inline-block;
  white-space: nowrap;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .hero-h1-line { white-space: normal; }
}

#typewriter {
  display: inline-block;
  background: var(--aiu-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#typewriter::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--aiu-cyan);
  -webkit-text-fill-color: var(--aiu-cyan);
  animation: tw-blink 1s steps(1) infinite;
}

@keyframes tw-blink {
  50% { opacity: 0; }
}

.hero-subline {
  max-width: 560px;
  margin: 0 0 var(--sp-5);
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-on-dark-2);
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

.hero-cta .btn-meta {
  color: var(--fg-on-dark-2);
}

/* ---- HERO video --------------------------------------------------- */
.hero-video {
  position: relative;
}

.hero-video-placeholder {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;     /* matches the actual video (848 × 480) */
  background: var(--bg-card-dark);
  isolation: isolate;
  /* Layered glow: tight cyan rim + soft blue bloom + ambient teal halo */
  box-shadow:
    0 0 0 1px rgba(57, 215, 232, .25),
    0 0 24px 2px rgba(57, 215, 232, .28),
    0 0 70px 8px rgba(0, 148, 191, .25),
    0 0 140px 24px rgba(0, 176, 149, .12),
    0 24px 56px rgba(0, 0, 0, .55);
}

/* Faded-corner / vignette mask — radial fade so the video edges glow away
   into the page background. Only the edges fade; centre stays crisp. */
.hero-video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse at center,
      transparent 55%,
      rgba(3, 8, 26, .35) 85%,
      rgba(3, 8, 26, .75) 100%);
  mix-blend-mode: multiply;
}

/* Animated soft cyan/teal aura behind the panel */
.hero-video-placeholder::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(57, 215, 232, .35) 0%,
      rgba(0, 148, 191, .18) 35%,
      transparent 70%);
  filter: blur(40px);
  animation: hero-video-aura 6s ease-in-out infinite alternate;
}
@keyframes hero-video-aura {
  0%   { opacity: .55; transform: scale(.95); }
  100% { opacity: 1;   transform: scale(1.05); }
}

.hero-video-placeholder svg,
.hero-video-el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* keep video filling the rounded panel cleanly */
  position: relative;
  z-index: 0;
}

/* ============================================================
   Digital CRT POWER cycle for the hero video.
   JS-driven via two state classes on .crt-boot:

   .is-booting      glitch → cyan ignite line → shutters retract → flash
                    (total ~2.0s, leaves video visible)
   .is-powering-off shutters slam back to centre → line collapses to a
                    bright dot → dot fades to black (~1.1s)
   ============================================================ */
.crt-boot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  background: transparent;
}

/* Base layout for the inner pieces (all start in "resting" hidden state
   so when no class is set the overlay shows nothing — video is visible) */
.crt-shutter {
  position: absolute;
  left: 0; right: 0;
  background: #000;
  z-index: 2;
  transform: scaleY(0);          /* default: hidden (open) */
}
.crt-shutter-top {
  top: 0; height: 50%;
  transform-origin: top center;
}
.crt-shutter-bot {
  bottom: 0; height: 50%;
  transform-origin: bottom center;
}

.crt-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(57,215,232,.6) 20%,
    #FFFFFF 50%,
    rgba(57,215,232,.6) 80%,
    transparent 100%);
  box-shadow:
    0 0 12px #39D7E8,
    0 0 28px rgba(0,148,191,.8),
    0 0 60px rgba(0,148,191,.4);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  z-index: 4;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(57,215,232,.06) 2px,
    rgba(57,215,232,.06) 3px);
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
}

.crt-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(57,215,232,.45) 0%, transparent 65%);
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
}

/* ============================================================
   STATE: BOOTING — power-on sequence
   ============================================================ */
.crt-boot.is-booting .crt-shutter-top {
  transform: scaleY(1);   /* start covering */
  animation: crt-shutter-open-up 1.0s cubic-bezier(.7, 0, .3, 1) 0.55s forwards;
}
.crt-boot.is-booting .crt-shutter-bot {
  transform: scaleY(1);
  animation: crt-shutter-open-dn 1.0s cubic-bezier(.7, 0, .3, 1) 0.55s forwards;
}
.crt-boot.is-booting .crt-line {
  animation: crt-line-show 1.8s cubic-bezier(.7, 0, .3, 1) 0.35s forwards;
}
.crt-boot.is-booting .crt-scanlines {
  animation: crt-scanlines-show 1.6s ease-out 0.6s forwards;
}
.crt-boot.is-booting .crt-flash {
  animation: crt-flash-show 0.6s ease-out 1.45s forwards;
}

/* ============================================================
   STATE: POWERING OFF — reverse, collapse to a dot then black
   ============================================================ */
.crt-boot.is-powering-off .crt-shutter-top {
  transform: scaleY(0);
  animation: crt-shutter-close-up 0.55s cubic-bezier(.6, 0, .25, 1) forwards;
}
.crt-boot.is-powering-off .crt-shutter-bot {
  transform: scaleY(0);
  animation: crt-shutter-close-dn 0.55s cubic-bezier(.6, 0, .25, 1) forwards;
}
.crt-boot.is-powering-off .crt-line {
  /* Once shutters slam, a bright line snaps on, then collapses to a dot */
  animation: crt-line-collapse 0.7s cubic-bezier(.55, 0, .35, 1) 0.5s forwards;
}
.crt-boot.is-powering-off .crt-flash {
  /* Brief dim flash as the dot snuffs out */
  animation: crt-power-off-flash 0.35s ease-out 0.95s forwards;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
/* Boot: shutters retract from centre */
@keyframes crt-shutter-open-up { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes crt-shutter-open-dn { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* Power-off: shutters slam back to centre */
@keyframes crt-shutter-close-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crt-shutter-close-dn { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Cyan ignite line during boot */
@keyframes crt-line-show {
  0%   { opacity: 0;   transform: translateY(-50%) scaleX(0);   }
  10%  { opacity: 1;   transform: translateY(-50%) scaleX(0.55);}
  18%  { opacity: 1;   transform: translateY(-50%) scaleX(1);   height: 2px; }
  60%  { opacity: 1;   transform: translateY(-50%) scaleX(1);   height: 2px; }
  78%  { opacity: 0.4; height: 4px; }
  100% { opacity: 0;   height: 6px; }
}

/* Line collapse to a dot during power-off */
@keyframes crt-line-collapse {
  0%   { opacity: 0; transform: translateY(-50%) scaleX(1);   height: 2px; }
  20%  { opacity: 1; transform: translateY(-50%) scaleX(1);   height: 2px; }
  85%  { opacity: 1; transform: translateY(-50%) scaleX(0.02);height: 6px; }
  100% { opacity: 0; transform: translateY(-50%) scaleX(0);   height: 1px; }
}

/* Scanline texture during boot */
@keyframes crt-scanlines-show {
  0%   { opacity: 0;   }
  30%  { opacity: 0.9; }
  100% { opacity: 0;   }
}

/* Boot end-flash bloom */
@keyframes crt-flash-show {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Power-off dim flash */
@keyframes crt-power-off-flash {
  0%   { opacity: 0;   }
  50%  { opacity: 0.6; }
  100% { opacity: 0;   }
}

/* Reduced motion: skip CRT animations entirely */
@media (prefers-reduced-motion: reduce) {
  .crt-boot { display: none; }
}

/* ---- HERO responsive ----------------------------------------------- */
@media (max-width: 920px) {
  .hero {
    padding: var(--sp-8) var(--sp-5);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .hero-content {
    order: 1;
    text-align: center;
  }

  .hero-subline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-pills {
    justify-content: center;
  }

  .hero-cta {
    align-items: center;
  }

  .hero-video {
    order: 2;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 56px 20px;
  }

  .hero-inner {
    gap: var(--sp-5);
  }

  .hero-h1 {
    font-size: clamp(30px, 8.5vw, 38px);
    margin-bottom: var(--sp-4);
  }

  .hero-subline {
    font-size: var(--fs-body);
    margin-bottom: var(--sp-4);
  }

  .hero-pills {
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
}

/* ==========================================================================
   Shared section heading helpers
   ========================================================================== */

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-7);
}

.section-head .section-lead {
  margin-top: var(--sp-4);
  color: var(--fg-on-light-2);
}

/* ==========================================================================
   CO DOSTANEŠ — 3 pilíře
   ========================================================================== */

/* Pillars section is now a dark hologram stage — same deep-space palette
   as the constellation. Brand gradient (blue → cyan → teal) preserved. */
.pillars {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  overflow: hidden;
}

/* Big soft blue halo behind the trio (keeps the "spotlight" feel) */

.pillars > * { position: relative; z-index: 1; }

/* Faint subtle scanline texture (mission-control vibe), barely visible */

/* Headline / lead get the on-dark palette */
.pillars .section-head .aiu-h2 { color: var(--fg-on-dark-1); text-shadow: 0 0 32px rgba(57,215,232,.22); }
.pillars .section-head .section-lead { color: var(--fg-on-dark-2); }

/* ============================================================
   Connector track above the pillars: horizontal gradient line
   draws left→right, three nodes pop on as it crosses them,
   short vertical drops fall down into each card top.
   Same reveal language as the constellation orbit.
   ============================================================ */
.pillars-track {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto 32px;
  height: 70px;
  pointer-events: none;
}

/* The horizontal line — fixed width, animated scaleX from left */
.pillars-line {
  position: absolute;
  top: 30px;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,148,191,0) 0%,
    var(--aiu-blue) 6%,
    var(--aiu-cyan) 50%,
    var(--aiu-teal) 94%,
    rgba(0,176,149,0) 100%);
  box-shadow: 0 0 8px rgba(0,148,191,.6), 0 0 18px rgba(0,148,191,.25);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
}
.pillars.is-drawing .pillars-line {
  animation: pillar-line-draw 3s linear forwards;
}
@keyframes pillar-line-draw {
  to { transform: scaleX(1); }
}

/* Open-circle nodes — chip-trace motif, styled for the dark bg */
.pillars-node {
  position: absolute;
  top: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #03081A;
  border: 2.5px solid var(--node-color, var(--aiu-cyan));
  box-shadow:
    0 0 0 3px rgba(57,215,232,.08),
    0 0 14px rgba(0,148,191,.55),
    inset 0 0 8px rgba(57,215,232,.25);
  opacity: 0;
  transform: scale(0);
}
.pillars-node.pn-1 { left: calc(16.67% - 9px); --node-color: var(--aiu-blue); }
.pillars-node.pn-2 { left: calc(50% - 9px);    --node-color: var(--aiu-cyan); }
.pillars-node.pn-3 { left: calc(83.33% - 9px); --node-color: var(--aiu-teal); }

.pillars.is-drawing .pillars-node.pn-1 {
  animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 0.3s forwards;
}
.pillars.is-drawing .pillars-node.pn-2 {
  animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 1.3s forwards;
}
.pillars.is-drawing .pillars-node.pn-3 {
  animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 2.3s forwards;
}
@keyframes pillar-node-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* Short vertical "drop" trace from each node down to the card top */
.pillars-drop {
  position: absolute;
  top: 40px;
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, var(--aiu-cyan), rgba(0,148,191,0));
  box-shadow: 0 0 6px rgba(0,148,191,.5);
  transform: scaleY(0);
  transform-origin: top center;
}
.pillars-drop.pd-1 { left: calc(16.67% - 1px); }
.pillars-drop.pd-2 { left: calc(50% - 1px); }
.pillars-drop.pd-3 { left: calc(83.33% - 1px); }

.pillars.is-drawing .pillars-drop.pd-1 {
  animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 0.65s forwards;
}
.pillars.is-drawing .pillars-drop.pd-2 {
  animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 1.65s forwards;
}
.pillars.is-drawing .pillars-drop.pd-3 {
  animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 2.65s forwards;
}
@keyframes pillar-drop-fall {
  to { transform: scaleY(1); }
}

.pillars-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: 0;
  list-style: none;
  counter-reset: pillar;
}

/* Hologram glass chip module — translucent dark panel, gradient
   hairline border, monospace HUD scaffolding (pin-1, LED, brackets,
   silkscreen number). Same chip-trace language as the constellation. */
.pillar-card {
  position: relative;
  background: rgba(2, 8, 22, 0.86);
  border: 1px solid rgba(57,215,232,.18);
  border-radius: 14px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 18px 44px rgba(0,4,16,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;

  /* Pre-reveal: thin strip at top, ready to unroll downward */
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-6px) scaleY(0.6);
  transform-origin: top center;
  filter: blur(1px);
  transition:
    opacity   0.55s ease                            var(--pillar-delay, 0s),
    clip-path 0.85s cubic-bezier(.22, 1, .36, 1)    var(--pillar-delay, 0s),
    transform 0.7s  cubic-bezier(.22, 1, .36, 1)    var(--pillar-delay, 0s),
    filter    0.5s  ease                            calc(var(--pillar-delay, 0s) + 0.2s),
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out);
}

/* Gradient hairline border layered above bg via masked pseudo */
.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(57,215,232,.55) 0%,
    rgba(0,148,191,.18) 35%,
    rgba(0,176,149,.45) 70%,
    rgba(0,117,238,.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Pin-1 indicator dot top-left (chip orientation marker) */
.pillar-pin1 {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aiu-teal);
  box-shadow: 0 0 6px var(--aiu-teal);
  z-index: 2;
}

/* Status LED top-right (blinks) — color varies per card */
.pillar-led {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aiu-cyan);
  box-shadow: 0 0 8px var(--aiu-cyan), 0 0 16px rgba(0,148,191,.45);
  animation: chip-led-blink 2.2s ease-in-out infinite;
  z-index: 2;
}
.pillars-grid .pillar-card:nth-child(1) .pillar-led { background: var(--aiu-blue); box-shadow: 0 0 8px var(--aiu-blue), 0 0 16px rgba(0,117,238,.45); animation-delay: 0s; }
.pillars-grid .pillar-card:nth-child(2) .pillar-led { animation-delay: 0.6s; }
.pillars-grid .pillar-card:nth-child(3) .pillar-led { background: var(--aiu-teal); box-shadow: 0 0 8px var(--aiu-teal), 0 0 16px rgba(0,176,149,.45); animation-delay: 1.2s; }

/* HUD targeting brackets at card corners */
.pillar-brk {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(57,215,232,.75);
  pointer-events: none;
  z-index: 2;
}
.pillar-brk-tl { top: -6px; left: -6px;  border-right: 0; border-bottom: 0; }
.pillar-brk-tr { top: -6px; right: -6px; border-left: 0;  border-bottom: 0; }
.pillar-brk-bl { bottom: -6px; left: -6px;  border-right: 0; border-top: 0; }
.pillar-brk-br { bottom: -6px; right: -6px; border-left: 0;  border-top: 0; }

/* Big monospace silkscreen number top-right (just inside the LED) */
.pillar-num {
  position: absolute;
  top: 30px;
  right: 24px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, rgba(57,215,232,.45) 0%, rgba(0,176,149,.10) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 30px rgba(57,215,232,.16);
  pointer-events: none;
  z-index: 1;
}

/* Per-card stagger matches when the line + drop reach each pillar */
.pillars-grid .pillar-card:nth-child(1) { --pillar-delay: 0.95s; }
.pillars-grid .pillar-card:nth-child(2) { --pillar-delay: 1.95s; }
.pillars-grid .pillar-card:nth-child(3) { --pillar-delay: 2.95s; }

.pillars.is-drawing .pillar-card {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scaleY(1);
  filter: blur(0);
}

.pillar-card:hover {
  transform: translateY(-6px) scaleY(1);
  border-color: rgba(57,215,232,.28);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.10),
    0 36px 70px rgba(0,4,16,.7),
    0 0 50px rgba(0,148,191,.16),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 40px rgba(57,215,232,.05);
}

/* Mobile: track collapses, simpler delay cascade */
@media (max-width: 920px) {
  /* Connector track hidden as soon as cards stack — they share the same breakpoint */
  .pillars-track { display: none; }
  .pillars-grid .pillar-card:nth-child(1) { --pillar-delay: 0s;   }
  .pillars-grid .pillar-card:nth-child(2) { --pillar-delay: 0.25s; }
  .pillars-grid .pillar-card:nth-child(3) { --pillar-delay: 0.5s;  }
  .pillar-num { font-size: 44px; top: 26px; right: 20px; }
  .pillar-card { padding: 28px 22px 24px; }
}

/* Reduced motion: skip reveal */
@media (prefers-reduced-motion: reduce) {
  .pillars-line,
  .pillars-node,
  .pillars-drop,
  .pillar-card,
  .pillar-led {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
  }
}

/* Eyebrow chip — monospace HUD label with bracket-like border */
.pillar-step {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.pillar-step-1 { background: rgba(0, 117, 238, .15); color: var(--aiu-blue); border: 1px solid rgba(0,117,238,.35); }
.pillar-step-2 { background: rgba(0, 148, 191, .15); color: var(--aiu-cyan); border: 1px solid rgba(0,148,191,.35); }
.pillar-step-3 { background: rgba(0, 176, 149, .15); color: var(--aiu-teal); border: 1px solid rgba(0,176,149,.35); }

.pillar-title {
  margin: 14px 0 8px;
  color: #FFFFFF;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-shadow: 0 0 26px rgba(57,215,232,.22);
  position: relative;
  z-index: 2;
}

.pillar-body {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.pillar-body strong {
  color: #FFFFFF;
  font-weight: 700;
}

@media (max-width: 920px) {
  .pillars-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ==========================================================================
   JAK VYTĚŽÍŠ TRIAL — timeline
   ========================================================================== */

.section-inner-narrow {
  max-width: 760px;
  margin: 0 auto;
}

/* ============================================================
   CONSTELLATION / STAR MAP — "10 dní s AIU"
   Apple Vision Pro × NASA mission control.
   Dark deep-space stage with a single elegant bezier orbit
   threading 4 luminous 3D orbs. HUD frame, mono readouts,
   tracking grid, signal particles. Žádný šum, hodně prostoru.
   ============================================================ */

.section-constellation {
  position: relative;
  isolation: isolate;
  padding: 140px 24px 160px;
  background: transparent;
  color: var(--fg-on-dark-1);
  overflow: hidden;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

/* ============================================================
   HUD frame: L-brackets at each section corner + mono readouts
   ============================================================ */
.con-frame-tl, .con-frame-tr, .con-frame-bl, .con-frame-br {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(57,215,232,.45);
  pointer-events: none;
  z-index: 2;
}
.con-frame-tl { top: 24px; left: 24px;  border-right: 0; border-bottom: 0; }
.con-frame-tr { top: 24px; right: 24px; border-left: 0;  border-bottom: 0; }
.con-frame-bl { bottom: 24px; left: 24px;  border-right: 0; border-top: 0; }
.con-frame-br { bottom: 24px; right: 24px; border-left: 0;  border-top: 0; }

.con-readout {
  position: absolute;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(57,215,232,.7);
  text-shadow: 0 0 8px rgba(57,215,232,.4);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.con-readout-top { top: 40px; left: 50%; transform: translateX(-50%); }
.con-readout-bot { bottom: 40px; left: 50%; transform: translateX(-50%); }

/* ============================================================
   Faint tracking grid + star particles in the deep field
   ============================================================ */
.con-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(57,215,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,215,232,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 75%);
}

.con-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.con-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 12px rgba(57,215,232,.4);
  opacity: 0.55;
  animation: star-twinkle 5s ease-in-out infinite;
}
.con-star:nth-child(1)  { top:  6%; left:  8%; animation-delay: 0s;   }
.con-star:nth-child(2)  { top: 11%; left: 74%; animation-delay: 0.7s; }
.con-star:nth-child(3)  { top: 18%; left: 36%; width: 3px; height: 3px; animation-delay: 1.4s; }
.con-star:nth-child(4)  { top: 24%; left: 88%; animation-delay: 2.1s; }
.con-star:nth-child(5)  { top: 32%; left:  4%; animation-delay: 2.8s; }
.con-star:nth-child(6)  { top: 38%; left: 62%; width: 3px; height: 3px; animation-delay: 0.3s; }
.con-star:nth-child(7)  { top: 46%; left: 20%; animation-delay: 1s;   }
.con-star:nth-child(8)  { top: 52%; left: 92%; animation-delay: 1.7s; }
.con-star:nth-child(9)  { top: 58%; left: 46%; animation-delay: 2.4s; }
.con-star:nth-child(10) { top: 64%; left:  8%; width: 3px; height: 3px; animation-delay: 3.1s; }
.con-star:nth-child(11) { top: 70%; left: 78%; animation-delay: 0.5s; }
.con-star:nth-child(12) { top: 76%; left: 30%; animation-delay: 1.2s; }
.con-star:nth-child(13) { top: 82%; left: 90%; animation-delay: 1.9s; }
.con-star:nth-child(14) { top: 88%; left:  6%; width: 3px; height: 3px; animation-delay: 2.6s; }
.con-star:nth-child(15) { top: 92%; left: 56%; animation-delay: 3.3s; }
.con-star:nth-child(16) { top: 14%; left: 50%; animation-delay: 1.6s; }
.con-star:nth-child(17) { top: 56%; left: 70%; animation-delay: 0.9s; }
.con-star:nth-child(18) { top: 80%; left: 50%; width: 3px; height: 3px; animation-delay: 2.3s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.3;  transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.1);  }
}

/* ============================================================
   Stage
   ============================================================ */
.con-stage { position: relative; z-index: 1; }
.con-head  { margin-bottom: 96px; }

/* ============================================================
   Map: SVG trajectory + node grid
   ============================================================ */
.con-map {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 700 / 1000;
}

.con-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ORIGIN DOT — the line emerges from here.
   Starts invisible. When .is-drawing fires:
     0.0s: dot fades in + pulses (announces "starting point")
     0.5s: line begins drawing from the dot downward */
.con-start-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.45s ease 0.05s;
}
.section-constellation.is-drawing .con-start-dot {
  opacity: 1;
  animation: con-dot-pulse 1.8s ease-in-out infinite 0.5s;
}
@keyframes con-dot-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(57,215,232,.6)); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 16px rgba(57,215,232,1)); }
}

/* The orbit draws itself, starting from the dot after a brief pause.
   Stroke-dasharray + dashoffset are set by JS using the real path length
   (path.getTotalLength()) — that's the only reliable way to hide the
   whole stroke. CSS-only fallback would render the line constantly. */
.section-constellation.is-drawing .con-orbit-main {
  animation: orbit-draw 4s linear forwards 0.6s;
}
@keyframes orbit-draw {
  to { stroke-dashoffset: 0; }
}

/* Ticks + signal particles hidden until the line is fully drawn
   (line start = 0.6s, draw = 4s → done at 4.6s) */
.con-orbit-ticks,
.con-signals {
  opacity: 0;
  transition: opacity 0.6s ease 4.6s;
}
.section-constellation.is-drawing .con-orbit-ticks,
.section-constellation.is-drawing .con-signals {
  opacity: 1;
}

.con-orbit-ticks {
  animation: orbit-tick-flow 18s linear infinite;
}
@keyframes orbit-tick-flow {
  from { stroke-dashoffset: 0;    }
  to   { stroke-dashoffset: -300; }
}

.con-nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1;
}

/* Each node anchored to a precise % point matching the SVG orbit path.
   path d="M 175 165 ..." (viewBox 700x1000) → orb1 at (25%, 16.5%) */
.con-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 32px;
  width: 50%;
}

.con-node-1 { top: 16.5%;  left: 25%; transform: translate(-50%, -50%); }
.con-node-2 { top: 41.5%; left: 75%; transform: translate(-50%, -50%);
              flex-direction: row-reverse; text-align: right; }
.con-node-3 { top: 66.5%; left: 25%; transform: translate(-50%, -50%); }
.con-node-4 { top: 90.5%; left: 75%; transform: translate(-50%, -50%);
              flex-direction: row-reverse; text-align: right; }

.con-node-2 .con-aha,
.con-node-4 .con-aha { margin-left: auto; }

/* ============================================================
   The orb — 3D glowing sphere with HUD reticle + mono tag
   Has a pop-up reveal animation on scroll-into-view.
   ============================================================ */
.con-orb {
  position: relative;
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  /* Pre-reveal state: small, blurred, transparent */
  transform: scale(0.22);
  opacity: 0;
  filter: blur(28px);
  transition:
    transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s),
    opacity   0.8s ease-out                     var(--reveal-delay, 0s),
    filter    0.7s ease-out                     var(--reveal-delay, 0s);
  will-change: transform, opacity, filter;
}
.con-node.is-revealed .con-orb {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

/* The big number inside the orb. Appears slightly after the orb settles. */
.con-orb::after {
  content: attr(data-num);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 28px rgba(57,215,232,.85),
    0 0 48px rgba(0,148,191,.55);
  opacity: 0;
  transform: scale(0.55);
  filter: blur(8px);
  transition:
    opacity   0.55s ease           calc(var(--reveal-delay, 0s) + 0.45s),
    transform 0.7s  cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-delay, 0s) + 0.45s),
    filter    0.55s ease           calc(var(--reveal-delay, 0s) + 0.45s);
  z-index: 5;
  pointer-events: none;
}
.con-node.is-revealed .con-orb::after {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* HUD reticle brackets + mono tag fade in last (orb settles in lock) */
.con-orb .brk,
.con-orb .orb-tag,
.con-orb .orb-ring {
  opacity: 0;
  transition: opacity 0.5s ease calc(var(--reveal-delay, 0s) + 0.75s);
}
.con-node.is-revealed .con-orb .brk,
.con-node.is-revealed .con-orb .orb-tag,
.con-node.is-revealed .con-orb .orb-ring {
  opacity: 1;
}

/* Card reveal: 2-PHASE HOLOGRAM
   Phase 1 — a thin glowing LINE extends out of the orb toward the card position
             (scaleX 0.03 → 1, clip-path locked to a 4 % horizontal slit).
   Phase 2 — that line UNROLLS vertically into the full panel
             (clip-path slit → full rect, blur → 0).
   Phase 3 — content fades into the unrolled panel. */
.con-card {
  opacity: 0;
  transform: scaleX(0.03);
  transform-origin: left center;
  clip-path: inset(48% 0 48% 0 round 14px);
  -webkit-clip-path: inset(48% 0 48% 0 round 14px);
  filter: blur(1px);
  /* Phase 1 (extend strip from orb) */
  transition:
    opacity   0.4s  ease                        calc(var(--reveal-delay, 0s) + 0.95s),
    transform 0.55s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-delay, 0s) + 0.95s),
    /* Phase 2 (unroll the strip vertically) — starts at the end of phase 1 */
    clip-path 0.6s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-delay, 0s) + 1.55s),
    -webkit-clip-path 0.6s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-delay, 0s) + 1.55s),
    filter    0.5s ease                          calc(var(--reveal-delay, 0s) + 1.55s);
}
/* Nodes 2 & 4: orb on RIGHT → strip extends LEFT-ward, anchored to right edge */
.con-node-2 .con-card,
.con-node-4 .con-card {
  transform-origin: right center;
}

.con-node.is-revealed .con-card {
  opacity: 1;
  transform: scaleX(1);
  clip-path: inset(0 0 0 0 round 14px);
  -webkit-clip-path: inset(0 0 0 0 round 14px);
  filter: blur(0);
}

/* Content INSIDE the panel fades in after the unroll completes */
.con-card > .con-when,
.con-card > .con-title,
.con-card > .con-body,
.con-card > .con-aha {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.5s ease                          calc(var(--reveal-delay, 0s) + 2.2s),
    transform 0.5s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-delay, 0s) + 2.2s);
}
.con-node.is-revealed .con-card > .con-when,
.con-node.is-revealed .con-card > .con-title,
.con-node.is-revealed .con-card > .con-body,
.con-node.is-revealed .con-card > .con-aha {
  opacity: 1;
  transform: translateY(0);
}

/* Card HUD brackets + data trace lock-in just before the content materialises */
.card-brk,
.card-trace {
  opacity: 0;
  transition: opacity 0.45s ease calc(var(--reveal-delay, 0s) + 2.1s);
}
.con-node.is-revealed .card-brk,
.con-node.is-revealed .card-trace {
  opacity: 1;
}

/* Reduced motion: skip the reveal entirely, just show final state */
@media (prefers-reduced-motion: reduce) {
  .con-orb,
  .con-orb::after,
  .con-orb .brk,
  .con-orb .orb-tag,
  .con-orb .orb-ring,
  .con-card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}

.orb-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%,
    #FFFFFF 0%,
    #BFEFFF 5%,
    #39D7E8 16%,
    #0094BF 42%,
    #001B45 78%,
    #000812 100%);
  box-shadow:
    0 0 28px rgba(57,215,232,.55),
    0 0 60px rgba(0,148,191,.4),
    0 0 120px rgba(0,176,149,.22),
    inset 0 -10px 22px rgba(0,8,28,.6);
  animation: orb-breathe 5.5s ease-in-out infinite;
}
.con-node-1 .orb-sphere { animation-delay: 0s;   }
.con-node-2 .orb-sphere { animation-delay: 1.3s; }
.con-node-3 .orb-sphere { animation-delay: 2.6s; }
.con-node-4 .orb-sphere { animation-delay: 3.9s; }
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.04); filter: brightness(1.15); }
}

/* Outer soft halo (slow breathing) */
.orb-halo {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(57,215,232,.20) 0%, transparent 60%);
  filter: blur(8px);
  animation: orb-halo-breathe 6s ease-in-out infinite;
}
@keyframes orb-halo-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.1);  }
}

/* Thin tracking ring around orb */
.orb-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(57,215,232,.42);
  box-shadow: 0 0 14px rgba(57,215,232,.35), inset 0 0 14px rgba(57,215,232,.16);
}

/* HUD targeting brackets around the orb */
.brk {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.4px solid rgba(57,215,232,.75);
  pointer-events: none;
}
.brk-tl { top: -16px; left: -16px;  border-right: 0; border-bottom: 0; }
.brk-tr { top: -16px; right: -16px; border-left: 0;  border-bottom: 0; }
.brk-bl { bottom: -16px; left: -16px;  border-right: 0; border-top: 0; }
.brk-br { bottom: -16px; right: -16px; border-left: 0;  border-top: 0; }

/* Mono mission tag under the orb */
.orb-tag {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(57,215,232,.85);
  text-shadow: 0 0 8px rgba(57,215,232,.5);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ============================================================
   The card — HOLOGRAM PANEL
   Translucent dark fill for readability + gradient hairline
   border + HUD corner brackets + subtle data trace from orb.
   ============================================================ */
.con-card {
  position: relative;
  flex: 1 1 auto;
  max-width: 340px;
  padding: 22px 24px 20px;
  border-radius: 14px;
  background: rgba(2, 8, 22, 0.66);
  border: 1px solid rgba(57,215,232,.18);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 20px 50px rgba(0,4,16,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;
}

/* Gradient hairline border layered above bg via masked pseudo */
.con-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(57,215,232,.55) 0%,
    rgba(0,148,191,.18) 35%,
    rgba(0,176,149,.45) 70%,
    rgba(0,117,238,.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* HUD targeting brackets at the 4 card corners */
.card-brk {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.4px solid rgba(57,215,232,.75);
  pointer-events: none;
  z-index: 2;
}
.card-brk-tl { top: -5px; left: -5px;  border-right: 0; border-bottom: 0; }
.card-brk-tr { top: -5px; right: -5px; border-left: 0;  border-bottom: 0; }
.card-brk-bl { bottom: -5px; left: -5px;  border-right: 0; border-top: 0; }
.card-brk-br { bottom: -5px; right: -5px; border-left: 0;  border-top: 0; }

/* Data trace — short cyan glow line from orb edge to card edge */
.card-trace {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(57,215,232,0) 0%, rgba(57,215,232,.85) 60%, rgba(57,215,232,0) 100%);
  box-shadow: 0 0 6px rgba(57,215,232,.6);
  pointer-events: none;
  transform: translateY(-50%);
}
.con-node-1 .card-trace,
.con-node-3 .card-trace { left: -34px; }
.con-node-2 .card-trace,
.con-node-4 .card-trace {
  right: -34px;
  background: linear-gradient(270deg, rgba(57,215,232,0) 0%, rgba(57,215,232,.85) 60%, rgba(57,215,232,0) 100%);
}

/* Card content sits above gradient border + brackets */
.con-card > .con-when,
.con-card > .con-title,
.con-card > .con-body,
.con-card > .con-aha { position: relative; z-index: 3; }

.con-when {
  margin: 0 0 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #39D7E8;
  text-shadow: 0 0 8px rgba(57,215,232,.5);
}

.con-title {
  margin: 0 0 10px;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: 22px;
  color: #FFFFFF;
  text-shadow: 0 0 24px rgba(57,215,232,.18);
  line-height: 1.2;
}

.con-body {
  margin: 0;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
  font-size: 14px;
}

.con-aha {
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00B095;
}
.con-aha::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #00B095;
  background: rgba(0,176,149,.35);
  box-shadow: 0 0 10px rgba(0,176,149,.8);
}

/* ============================================================
   Mobile: collapse to vertical chain, drop SVG curve,
   keep orbs + HUD brackets centered, simpler layout
   ============================================================ */
@media (max-width: 800px) {
  .section-constellation { padding: 96px 16px 110px; }
  .con-head { margin-bottom: 64px; }
  .con-frame-tl, .con-frame-tr, .con-frame-bl, .con-frame-br { width: 24px; height: 24px; }
  .con-readout { font-size: 9px; letter-spacing: 0.22em; }
  .con-readout-top { top: 56px; }
  .con-readout-bot { bottom: 56px; }

  .con-map {
    aspect-ratio: auto;
    max-width: 100%;
  }
  .con-svg { display: none; }

  .con-nodes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 0;
  }
  /* Vertical orbital line down the column */
  .con-nodes::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 56px;
    bottom: 56px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(57,215,232,.5), rgba(0,176,149,.5), transparent);
    transform: translateX(-50%);
  }

  .con-node,
  .con-node-1, .con-node-2, .con-node-3, .con-node-4 {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: 100%;
    transform: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }
  .con-node-2 .con-aha,
  .con-node-4 .con-aha { margin-left: 0; }
  .con-node-2, .con-node-4 { text-align: center; }

  .con-orb { width: 96px; height: 96px; }
  .con-card { max-width: 100%; padding: 20px 18px 18px; }
  .card-trace { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .con-star,
  .orb-sphere,
  .orb-halo,
  .con-orbit-ticks,
  .con-signals circle {
    animation: none !important;
  }
}



/* ==========================================================================
   KAŽDÝ TÝDEN TĚ POSUNEME
   ========================================================================== */

.weekly {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  overflow: hidden;
}

/* Big soft halo behind the trio (spotlight effect, identical to pillars) */

.weekly > * { position: relative; z-index: 1; }

/* Faint scanline texture (mission-control vibe) */

/* Headline / lead on dark */
.weekly .section-head .aiu-h2 { color: var(--fg-on-dark-1); text-shadow: 0 0 32px rgba(57,215,232,.22); }
.weekly .section-head .section-lead { color: var(--fg-on-dark-2); }

/* ============================================================
   Connector track above the weekly cards (same as pillars)
   ============================================================ */
.weekly-track {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto 32px;
  height: 70px;
  pointer-events: none;
}
.weekly-line {
  position: absolute;
  top: 30px;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,148,191,0) 0%,
    var(--aiu-blue) 6%,
    var(--aiu-cyan) 50%,
    var(--aiu-teal) 94%,
    rgba(0,176,149,0) 100%);
  box-shadow: 0 0 8px rgba(0,148,191,.6), 0 0 18px rgba(0,148,191,.25);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
}
.weekly.is-drawing .weekly-line { animation: pillar-line-draw 3s linear forwards; }

.weekly-node {
  position: absolute;
  top: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #03081A;
  border: 2.5px solid var(--node-color, var(--aiu-cyan));
  box-shadow:
    0 0 0 3px rgba(57,215,232,.08),
    0 0 14px rgba(0,148,191,.55),
    inset 0 0 8px rgba(57,215,232,.25);
  opacity: 0;
  transform: scale(0);
}
.weekly-node.wn-1 { left: calc(16.67% - 9px); --node-color: var(--aiu-blue); }
.weekly-node.wn-2 { left: calc(50% - 9px);    --node-color: var(--aiu-cyan); }
.weekly-node.wn-3 { left: calc(83.33% - 9px); --node-color: var(--aiu-teal); }

.weekly.is-drawing .weekly-node.wn-1 { animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 0.3s forwards; }
.weekly.is-drawing .weekly-node.wn-2 { animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 1.3s forwards; }
.weekly.is-drawing .weekly-node.wn-3 { animation: pillar-node-pop 0.5s cubic-bezier(.22,1,.36,1) 2.3s forwards; }

.weekly-drop {
  position: absolute;
  top: 40px;
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, var(--aiu-cyan), rgba(0,148,191,0));
  box-shadow: 0 0 6px rgba(0,148,191,.5);
  transform: scaleY(0);
  transform-origin: top center;
}
.weekly-drop.wd-1 { left: calc(16.67% - 1px); }
.weekly-drop.wd-2 { left: calc(50% - 1px); }
.weekly-drop.wd-3 { left: calc(83.33% - 1px); }

.weekly.is-drawing .weekly-drop.wd-1 { animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 0.65s forwards; }
.weekly.is-drawing .weekly-drop.wd-2 { animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 1.65s forwards; }
.weekly.is-drawing .weekly-drop.wd-3 { animation: pillar-drop-fall 0.4s cubic-bezier(.22,1,.36,1) 2.65s forwards; }

/* ============================================================
   Weekly grid + glass chip cards
   ============================================================ */
.weekly-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  padding: 0;
  list-style: none;
}

.weekly-card {
  position: relative;
  background: rgba(2, 8, 22, 0.86);
  border: 1px solid rgba(57,215,232,.18);
  border-radius: 14px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 18px 44px rgba(0,4,16,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation: isolate;

  /* Pre-reveal: collapsed to a thin strip at top, unrolls downward */
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-6px) scaleY(0.6);
  transform-origin: top center;
  filter: blur(1px);
  transition:
    opacity   0.55s ease                            var(--weekly-delay, 0s),
    clip-path 0.85s cubic-bezier(.22, 1, .36, 1)    var(--weekly-delay, 0s),
    transform 0.7s  cubic-bezier(.22, 1, .36, 1)    var(--weekly-delay, 0s),
    filter    0.5s  ease                            calc(var(--weekly-delay, 0s) + 0.2s),
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out);
}

.weekly-grid .weekly-card:nth-child(1) { --weekly-delay: 0.95s; }
.weekly-grid .weekly-card:nth-child(2) { --weekly-delay: 1.95s; }
.weekly-grid .weekly-card:nth-child(3) { --weekly-delay: 2.95s; }

.weekly.is-drawing .weekly-card {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scaleY(1);
  filter: blur(0);
}

/* Gradient hairline border */
.weekly-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(57,215,232,.55) 0%,
    rgba(0,148,191,.18) 35%,
    rgba(0,176,149,.45) 70%,
    rgba(0,117,238,.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.weekly-card:hover {
  transform: translateY(-6px) scaleY(1);
  border-color: rgba(57,215,232,.28);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.10),
    0 36px 70px rgba(0,4,16,.7),
    0 0 50px rgba(0,148,191,.16),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 40px rgba(57,215,232,.05);
}

/* HUD scaffolding — pin1 / LED / brackets / silkscreen number */
.weekly-pin1 {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aiu-teal);
  box-shadow: 0 0 6px var(--aiu-teal);
  z-index: 2;
}

.weekly-led {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aiu-cyan);
  box-shadow: 0 0 8px var(--aiu-cyan), 0 0 16px rgba(0,148,191,.45);
  animation: chip-led-blink 2.2s ease-in-out infinite;
  z-index: 2;
}
.weekly-grid .weekly-card:nth-child(1) .weekly-led { background: var(--aiu-blue); box-shadow: 0 0 8px var(--aiu-blue), 0 0 16px rgba(0,117,238,.45); animation-delay: 0s; }
.weekly-grid .weekly-card:nth-child(2) .weekly-led { animation-delay: 0.6s; }
.weekly-grid .weekly-card:nth-child(3) .weekly-led { background: var(--aiu-teal); box-shadow: 0 0 8px var(--aiu-teal), 0 0 16px rgba(0,176,149,.45); animation-delay: 1.2s; }

.weekly-brk {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(57,215,232,.75);
  pointer-events: none;
  z-index: 2;
}
.weekly-brk-tl { top: -6px; left: -6px;  border-right: 0; border-bottom: 0; }
.weekly-brk-tr { top: -6px; right: -6px; border-left: 0;  border-bottom: 0; }
.weekly-brk-bl { bottom: -6px; left: -6px;  border-right: 0; border-top: 0; }
.weekly-brk-br { bottom: -6px; right: -6px; border-left: 0;  border-top: 0; }

/* Silkscreen number top-right */
.weekly-num {
  position: absolute;
  top: 30px;
  right: 24px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, rgba(57,215,232,.45) 0%, rgba(0,176,149,.10) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 30px rgba(57,215,232,.16);
  pointer-events: none;
  z-index: 1;
}

/* Feature card (middle "Srdce AIU") — stronger glow + brighter border */
.weekly-card-feature {
  border-color: rgba(57,215,232,.38);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.15),
    0 24px 60px rgba(0,4,16,.65),
    0 0 60px rgba(0,148,191,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* "Srdce AIU" badge — monospace HUD chip */
.weekly-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aiu-blue) 0%, var(--aiu-cyan) 50%, var(--aiu-teal) 100%);
  color: #FFFFFF;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 8px 20px rgba(0,148,191,.45),
    0 0 28px rgba(0,148,191,.35);
  white-space: nowrap;
  z-index: 3;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}

/* Frequency = monospace silkscreen eyebrow */
.weekly-frequency {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aiu-cyan);
  text-shadow: 0 0 8px rgba(57,215,232,.4);
  position: relative;
  z-index: 2;
}
.weekly-grid .weekly-card:nth-child(1) .weekly-frequency { color: var(--aiu-blue); text-shadow: 0 0 8px rgba(0,117,238,.45); }
.weekly-grid .weekly-card:nth-child(3) .weekly-frequency { color: var(--aiu-teal); text-shadow: 0 0 8px rgba(0,176,149,.45); }

.weekly-title {
  margin: 14px 0 8px;
  color: #FFFFFF;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-shadow: 0 0 26px rgba(57,215,232,.22);
  position: relative;
  z-index: 2;
}

.weekly-body {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
.weekly-body strong { color: #FFFFFF; font-weight: 700; }

@media (max-width: 920px) {
  .weekly-track { display: none; }
  .weekly-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .weekly-grid .weekly-card:nth-child(1) { --weekly-delay: 0s;   }
  .weekly-grid .weekly-card:nth-child(2) { --weekly-delay: 0.25s; }
  .weekly-grid .weekly-card:nth-child(3) { --weekly-delay: 0.5s;  }
  .weekly-num { font-size: 44px; top: 26px; right: 20px; }
  .weekly-card { padding: 28px 22px 24px; }
  .weekly-badge { top: -10px; padding: 6px 14px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .weekly-line,
  .weekly-node,
  .weekly-drop,
  .weekly-card,
  .weekly-led {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
  }
}


/* ==========================================================================
   TVÍ UČITELÉ — Albert + 5 ambasadorů
   ========================================================================== */

.teachers {
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  position: relative;
  overflow: hidden;
}

/* Teachers' local radial blob removed — page-wide cosmic-stage covers it */
.teachers .section-inner { position: relative; }

/* ---- Albert hero card ---------------------------------------------- */
.albert-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-7);
  align-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  margin-bottom: var(--sp-8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.albert-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,117,238,.5), rgba(0,176,149,.4), transparent);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Albert hero avatar — the only mascot on the page. Bigger than the
   teacher avatars and intentionally OVERFLOWS its container so the
   robot's head + thumbs-up hand poke out beyond the circle. */
.albert-avatar {
  position: relative;
  width: 240px;
  height: 240px;
  justify-self: center;
  overflow: visible;                /* must be visible for the overflow effect */
  isolation: isolate;
}

/* Soft cyan glow halo that breathes in/out behind Albert */
.albert-glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0,148,191,.55) 0%,
    rgba(0,117,238,.30) 35%,
    transparent 70%);
  filter: blur(24px);
  animation: albert-glow-breathe 4.5s ease-in-out infinite;
  z-index: 0;
}

/* The "platform" circle Albert sits on — gradient ring like the logo */
.albert-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    linear-gradient(#03081A, #03081A) padding-box,
    linear-gradient(135deg, #0075EE 0%, #0094BF 50%, #00B095 100%) border-box;
  border: 3px solid transparent;
  box-shadow:
    0 0 0 1px rgba(57,215,232,.18),
    0 0 28px rgba(0,148,191,.35),
    inset 0 0 36px rgba(0,148,191,.18);
  z-index: 1;
}

/* Two expanding pulse rings (like sonar pings) for active-AI feel */
.albert-pulse-1,
.albert-pulse-2 {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1.5px solid rgba(57,215,232,.55);
  z-index: 1;
  opacity: 0;
}
.albert-pulse-1 { animation: albert-pulse 3.2s ease-out infinite; }
.albert-pulse-2 { animation: albert-pulse 3.2s ease-out infinite 1.6s; }

/* Albert image — INTENTIONALLY larger than the avatar container so the
   hat + hands break the circle, but evenly oversized so he stays centered. */
.albert-img {
  position: absolute;
  inset: -18%;                      /* symmetric overflow on all sides */
  width: 136%;
  height: 136%;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 3;
  filter: drop-shadow(0 8px 24px rgba(0,148,191,.45))
          drop-shadow(0 14px 30px rgba(0,4,16,.45));
  animation: albert-float 5.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* "Online" status LED bottom-right of the ring */
.albert-status {
  position: absolute;
  bottom: 10%;
  right: 8%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00B095;
  border: 2.5px solid #03081A;
  box-shadow: 0 0 10px rgba(0,176,149,.9), 0 0 22px rgba(0,176,149,.5);
  z-index: 4;
  animation: albert-status-blink 1.6s ease-in-out infinite;
}

/* ---- Animations ---- */
/* Float keeps a constant translateX baseline so Albert sits visually
   centered inside the ring (the source PNG has his thumbs-up hand
   extending out the left side, which makes him read as left-skewed
   without this offset). */
@keyframes albert-float {
  0%, 100% { transform: translateX(7%) translateY(0)     rotate(-1.2deg); }
  50%      { transform: translateX(7%) translateY(-10px) rotate(1.2deg); }
}
@keyframes albert-glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes albert-pulse {
  0%   { opacity: 0.55; transform: scale(1);   }
  80%  { opacity: 0;    transform: scale(1.45); }
  100% { opacity: 0;    transform: scale(1.45); }
}
@keyframes albert-status-blink {
  0%, 60%, 100% { opacity: 1; }
  70%, 90%      { opacity: 0.35; }
}

/* Hover: Albert leans forward slightly + extra glow */
.albert-card:hover .albert-img      { animation-duration: 3s; }
.albert-card:hover .albert-glow     { opacity: 1; filter: blur(28px); }

@media (prefers-reduced-motion: reduce) {
  .albert-img, .albert-glow, .albert-pulse-1, .albert-pulse-2,
  .albert-status { animation: none !important; }
}

/* Mobile sizing */
@media (max-width: 920px) {
  .albert-avatar { width: 200px; height: 200px; }
}

.albert-tag {
  margin: 0 0 var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aiu-cyan);
}

.albert-name {
  margin: 0 0 var(--sp-3);
  background: var(--aiu-gradient-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.albert-intro {
  margin: 0 0 var(--sp-4);
  color: var(--fg-on-dark-1);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
}

.albert-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.albert-features li {
  display: flex;
  gap: var(--sp-2);
  color: var(--fg-on-dark-2);
  line-height: var(--lh-snug);
}

.albert-check {
  flex-shrink: 0;
  color: var(--aiu-teal);
  font-weight: var(--fw-bold);
}

/* ---- Ambasadoři grid ----------------------------------------------- */
.ambassadors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
}

.ambassador-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.ambassador-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  border-color: rgba(0, 148, 191, .4);
}

/* Avatar = chip-trace styled circle. Gradient ring outside, dark fill inside,
   gradient initials in middle, small "node" dot top-right (logo pin echo). */
.ambassador-photo {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background:
    linear-gradient(#0A2154, #0A2154) padding-box,
    linear-gradient(135deg, #0075EE 0%, #0094BF 50%, #00B095 100%) border-box;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(0,148,191,.18), 0 8px 24px rgba(0,117,238,.22);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Real photo variant — fills the circle, gradient ring stays visible.
   Triggered by .has-image on the parent and <img> as the child. */
/* Photo variant — backgrounds removed via rembg, subjects keep their
   real colors and sit on a unified blue gradient backdrop (matching the
   brand). All 5 portraits now read as one consistent set. */
.ambassador-photo.has-image {
  padding: 0;
  isolation: isolate;
  /* Inside the ring: brand blue gradient — visible where each subject
     was masked away. Outer ring gradient stays as the colored border. */
  background:
    linear-gradient(135deg, #003170 0%, #006FA8 55%, #0094BF 100%) padding-box,
    linear-gradient(135deg, #0075EE 0%, #0094BF 50%, #00B095 100%) border-box;
}
/* Image self-clips into circle via border-radius; no overflow:hidden on
   parent so the orbiting pin (::after) stays visible outside the ring. */
.ambassador-photo.has-image::before { content: none; }

.ambassador-photo.has-image > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: contrast(1.03) saturate(1.04) brightness(1.02);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ambassador-card:hover .ambassador-photo.has-image > img {
  filter: contrast(1.06) saturate(1.10) brightness(1.05);
  transform: scale(1.03);
}

/* Initials, gradient text */
.ambassador-photo::before {
  content: attr(data-initials);
  font-family: var(--ff-display);
  font-weight: var(--fw-extrabold);
  font-size: 32px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0094BF 0%, #00B095 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Open-circle "pin" — logo's U pin endpoint, sitting at top-right of the avatar.
   Anchored at the avatar's center; `rotate(angle) translateY(-radius)` pushes
   it outward so animating the rotation makes it orbit around the ring. */
.ambassador-photo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;                       /* center on the avatar pivot */
  border-radius: 50%;
  border: 2px solid #00B095;
  background: #0A2154;
  box-shadow:
    0 0 10px rgba(0,176,149,.9),
    0 0 22px rgba(0,176,149,.55);
  transform: rotate(45deg) translateY(-54px);  /* rest position: top-right */
  transform-origin: center;
  animation: amb-pin-rest 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* Rest state: pin stays at ~45° and gently breathes on the spot */
@keyframes amb-pin-rest {
  0%, 100% { transform: rotate(45deg) translateY(-54px) scale(1);    }
  50%      { transform: rotate(45deg) translateY(-54px) scale(1.18); }
}

/* Hover: pin orbits 360° around the ring with easing.
   ease-in-out across each full revolution: slow start, accelerates mid,
   gently decelerates at the end — feels organic, not robotic. */
.ambassador-card:hover .ambassador-photo::after {
  animation: amb-pin-orbit 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes amb-pin-orbit {
  from { transform: rotate(45deg)  translateY(-54px) scale(1.1); }
  to   { transform: rotate(405deg) translateY(-54px) scale(1.1); }
}

.ambassador-card:hover .ambassador-photo {
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px rgba(0,148,191,.45),
    0 14px 36px rgba(0,117,238,.4),
    0 0 32px rgba(57,215,232,.25);
}

.ambassador-name {
  margin: 0 0 4px;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--fg-on-dark-1);
}

.ambassador-role {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-small);
  color: var(--aiu-cyan);
  font-weight: var(--fw-medium);
}

.ambassador-quote {
  margin: 0;
  font-size: 13px;
  color: var(--fg-on-dark-2);
  font-style: italic;
  line-height: var(--lh-snug);
}

.ambassadors-note {
  text-align: center;
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--fg-on-dark-3);
  font-style: italic;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 920px) {
  .albert-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--sp-5);
  }
  .albert-features { grid-template-columns: 1fr; text-align: left; }
  .ambassadors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ambassadors-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   POZNÁŠ SE? — archetypy
   ========================================================================== */

.archetypes {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  overflow: hidden;
}
.archetypes > * { position: relative; z-index: 1; }
.archetypes .section-head .aiu-h2 { color: var(--fg-on-dark-1); text-shadow: 0 0 32px rgba(57,215,232,.22); }

.archetypes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: 0;
  list-style: none;
}

.archetype-card {
  position: relative;
  background: rgba(2, 8, 22, 0.86);
  border: 1px solid rgba(57,215,232,.18);
  border-radius: 14px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-top-width: 3px;
  border-top-style: solid;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 18px 44px rgba(0,4,16,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.archetype-card:hover {
  transform: translateY(-6px);
  border-color: rgba(57,215,232,.32);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.10),
    0 36px 70px rgba(0,4,16,.7),
    0 0 50px rgba(0,148,191,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.archetype-card-1 { border-top-color: var(--aiu-blue); }
.archetype-card-2 { border-top-color: var(--aiu-cyan); }
.archetype-card-3 { border-top-color: var(--aiu-teal); }

.archetype-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.archetype-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--aiu-white);
  flex-shrink: 0;
}

.archetype-card-1 .archetype-avatar { background: linear-gradient(135deg, #0075EE, #0094BF); }
.archetype-card-2 .archetype-avatar { background: linear-gradient(135deg, #0094BF, #00B095); }
.archetype-card-3 .archetype-avatar { background: linear-gradient(135deg, #00B095, #0075EE); }

.archetype-name {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  line-height: var(--lh-snug);
  text-shadow: 0 0 18px rgba(57,215,232,.18);
}

.archetype-age {
  margin: 2px 0 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aiu-cyan);
  text-shadow: 0 0 6px rgba(57,215,232,.4);
}

.archetype-hook {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: #FFFFFF;
  line-height: var(--lh-snug);
  text-shadow: 0 0 22px rgba(57,215,232,.18);
}

.archetype-body {
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: var(--lh-body);
  font-size: 14.5px;
}

.archetypes-cta {
  margin-top: var(--sp-7);
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: #FFFFFF;
  text-shadow: 0 0 26px rgba(57,215,232,.22);
}

@media (max-width: 920px) {
  .archetypes-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ==========================================================================
   CO AIU NENÍ — antiklaim
   ========================================================================== */

.anticlaims {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  overflow: hidden;
}
.anticlaims > * { position: relative; z-index: 1; }
.anticlaims .section-head .aiu-h2 { color: var(--fg-on-dark-1); text-shadow: 0 0 32px rgba(57,215,232,.22); }

.anticlaims-table {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.anticlaims-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  background: rgba(2, 8, 22, 0.86);
  border-radius: 14px;
  padding: var(--sp-5);
  border: 1px solid rgba(57,215,232,.18);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 18px 44px rgba(0,4,16,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.anticlaims-row:hover {
  border-color: rgba(57,215,232,.28);
  transform: translateY(-2px);
}

.anticlaims-not, .anticlaims-is {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--ff-body);
  line-height: var(--lh-snug);
  font-size: 14.5px;
}

.anticlaims-not {
  color: rgba(255,255,255,.42);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 70, 91, .55);
}

.anticlaims-is {
  color: #FFFFFF;
  font-weight: var(--fw-medium);
}

/* Hologram pop-up icons — pulsating, scanline-shimmered red/green */
.anticlaims-x, .anticlaims-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--fw-bold);
  border: 1.5px solid;
  position: relative;
  isolation: isolate;
  transform-origin: center;
  /* baseline pop-in scale (lifted by animation) */
  transform: scale(1);
  text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
  /* subtle scanline overlay via repeating gradient */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, .06) 2px,
      rgba(255, 255, 255, .06) 3px
    );
  background-blend-mode: overlay;
}

/* Soft outer halo ring — rotating pulse */
.anticlaims-x::before,
.anticlaims-check::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: .65;
}

/* Inner highlight gloss (faux holographic depth) */
.anticlaims-x::after,
.anticlaims-check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 30% 25%,
    rgba(255, 255, 255, .35) 0%,
    transparent 55%);
  opacity: .6;
  mix-blend-mode: screen;
}

/* ✕ — RED HOLOGRAM */
.anticlaims-x {
  background-color: rgba(232, 70, 91, .14);
  color: #FFB1B9;
  border-color: rgba(232, 70, 91, .9);
  box-shadow:
    0 0 0 1px rgba(255, 100, 120, .35),
    0 0 12px rgba(232, 70, 91, .55),
    0 0 30px rgba(232, 70, 91, .35),
    inset 0 0 10px rgba(232, 70, 91, .35);
  animation: holo-pulse-red 2.4s ease-in-out infinite;
}
.anticlaims-x::before {
  background: radial-gradient(circle,
    rgba(232, 70, 91, .55) 0%,
    rgba(232, 70, 91, 0) 70%);
  animation: holo-halo 2.4s ease-in-out infinite;
}

/* ✓ — GREEN HOLOGRAM */
.anticlaims-check {
  background-color: rgba(0, 200, 165, .14);
  color: #6BFFD9;
  border-color: rgba(0, 200, 165, .9);
  box-shadow:
    0 0 0 1px rgba(100, 255, 200, .35),
    0 0 12px rgba(0, 200, 165, .55),
    0 0 30px rgba(0, 200, 165, .35),
    inset 0 0 10px rgba(0, 200, 165, .35);
  animation: holo-pulse-green 2.4s ease-in-out infinite;
  animation-delay: .6s;
}
.anticlaims-check::before {
  background: radial-gradient(circle,
    rgba(0, 200, 165, .55) 0%,
    rgba(0, 200, 165, 0) 70%);
  animation: holo-halo 2.4s ease-in-out infinite;
  animation-delay: .6s;
}

@keyframes holo-pulse-red {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 100, 120, .25),
      0 0 12px rgba(232, 70, 91, .45),
      0 0 26px rgba(232, 70, 91, .25),
      inset 0 0 10px rgba(232, 70, 91, .30);
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 1.5px rgba(255, 100, 120, .55),
      0 0 18px rgba(232, 70, 91, .85),
      0 0 44px rgba(232, 70, 91, .55),
      inset 0 0 14px rgba(232, 70, 91, .55);
  }
}

@keyframes holo-pulse-green {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(100, 255, 200, .25),
      0 0 12px rgba(0, 200, 165, .45),
      0 0 26px rgba(0, 200, 165, .25),
      inset 0 0 10px rgba(0, 200, 165, .30);
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 1.5px rgba(100, 255, 200, .55),
      0 0 18px rgba(0, 200, 165, .85),
      0 0 44px rgba(0, 200, 165, .55),
      inset 0 0 14px rgba(0, 200, 165, .55);
  }
}

@keyframes holo-halo {
  0%, 100% { transform: scale(.85); opacity: .4; }
  50%      { transform: scale(1.25); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .anticlaims-x,
  .anticlaims-check,
  .anticlaims-x::before,
  .anticlaims-check::before {
    animation: none;
  }
}

@media (max-width: 720px) {
  .anticlaims-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* ==========================================================================
   FAQ — accordion
   ========================================================================== */

.faq {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  overflow: hidden;
}
.faq > * { position: relative; z-index: 1; }
.faq .section-head .aiu-h2 { color: var(--fg-on-dark-1); text-shadow: 0 0 32px rgba(57,215,232,.22); }

/* Accordion within the FAQ section — dark hologram override */
.faq .accordion-item {
  background: rgba(2, 8, 22, 0.86);
  border: 1px solid rgba(57,215,232,.18);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(57,215,232,.06),
    0 12px 28px rgba(0,4,16,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.faq .accordion-item[open] {
  background: rgba(0,148,191,.08);
  border-color: rgba(57,215,232,.30);
}
.faq .accordion-item summary {
  color: #FFFFFF;
  text-shadow: 0 0 18px rgba(57,215,232,.18);
}
.faq .accordion-item summary::after {
  background: rgba(57,215,232,.16);
  color: var(--aiu-cyan);
  border: 1px solid rgba(57,215,232,.32);
}
.faq .accordion-item[open] summary::after {
  background: linear-gradient(135deg, var(--aiu-blue), var(--aiu-cyan), var(--aiu-teal));
  color: #FFFFFF;
  border-color: transparent;
}
.faq .accordion-body {
  color: rgba(255,255,255,.72);
}
.faq .accordion-body strong {
  color: #FFFFFF;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta {
  background: transparent;
  color: var(--fg-on-dark-1);
  padding: 40px var(--sp-5);
  position: relative;
  overflow: hidden;
}

/* Final-CTA's local radial blobs removed — page-wide cosmic-stage covers it */

.final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.final-cta-title {
  margin: 0 0 var(--sp-5);
  font-family: var(--ff-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-on-dark-1);
}

.final-cta-lead {
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-on-dark-2);
}

.final-cta-lead strong {
  color: var(--fg-on-dark-1);
  font-weight: var(--fw-semibold);
}

.final-cta-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.final-cta-action .btn-meta {
  color: var(--fg-on-dark-2);
}

.final-cta-guarantee {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--fg-on-dark-3);
  font-family: var(--ff-body);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: transparent;
  color: var(--fg-on-dark-2);
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-dark);
}

.footer-logo { display: block; margin-bottom: var(--sp-3); }

.footer-tagline {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--fg-on-dark-2);
  max-width: 320px;
}

.footer-heading {
  margin: 0 0 var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-on-dark-1);
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-nav a {
  color: var(--fg-on-dark-2);
  font-size: var(--fs-small);
  transition: color var(--dur-base) var(--ease-out);
}

.footer-nav a:hover { color: var(--fg-on-dark-1); }

.footer-bottom {
  padding-top: var(--sp-5);
  text-align: center;
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}


/* ============================================================
   COSMIC STAGE — page-wide fixed backdrop layered above body bg.
   Holds the tracking grid + 24 twinkling star particles. The
   konstelace section already has its own HUD frame; this is
   just the ambient deep-space, applied to every section.
   ============================================================ */
.cosmic-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  contain: layout style paint;
}

/* Grid removed — radial glows + stars give enough atmosphere on their own */
.cosmic-grid { display: none; }

.cosmic-stars { position: absolute; inset: 0; }

.cs {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 4px rgba(255,255,255,.25), 0 0 9px rgba(57,215,232,.18);
  opacity: 0.3;
  animation: cs-twinkle 7s ease-in-out infinite;
}
.cs:nth-child(1)  { top:  5%; left:  7%; animation-delay: 0s;   }
.cs:nth-child(2)  { top:  9%; left: 38%; width: 3px; height: 3px; animation-delay: 0.6s; }
.cs:nth-child(3)  { top: 13%; left: 71%; animation-delay: 1.2s; }
.cs:nth-child(4)  { top: 18%; left: 92%; animation-delay: 1.8s; }
.cs:nth-child(5)  { top: 22%; left: 22%; animation-delay: 2.4s; }
.cs:nth-child(6)  { top: 27%; left: 55%; width: 3px; height: 3px; animation-delay: 3.0s; }
.cs:nth-child(7)  { top: 32%; left:  4%; animation-delay: 3.6s; }
.cs:nth-child(8)  { top: 37%; left: 83%; animation-delay: 0.3s; }
.cs:nth-child(9)  { top: 42%; left: 44%; animation-delay: 0.9s; }
.cs:nth-child(10) { top: 47%; left: 16%; width: 3px; height: 3px; animation-delay: 1.5s; }
.cs:nth-child(11) { top: 52%; left: 67%; animation-delay: 2.1s; }
.cs:nth-child(12) { top: 56%; left: 95%; animation-delay: 2.7s; }
.cs:nth-child(13) { top: 61%; left:  9%; animation-delay: 3.3s; }
.cs:nth-child(14) { top: 65%; left: 35%; width: 3px; height: 3px; animation-delay: 0.45s; }
.cs:nth-child(15) { top: 70%; left: 78%; animation-delay: 1.05s; }
.cs:nth-child(16) { top: 74%; left: 26%; animation-delay: 1.65s; }
.cs:nth-child(17) { top: 78%; left: 58%; animation-delay: 2.25s; }
.cs:nth-child(18) { top: 83%; left: 90%; width: 3px; height: 3px; animation-delay: 2.85s; }
.cs:nth-child(19) { top: 87%; left: 12%; animation-delay: 3.45s; }
.cs:nth-child(20) { top: 91%; left: 47%; animation-delay: 0.15s; }
.cs:nth-child(21) { top: 94%; left: 73%; animation-delay: 0.75s; }
.cs:nth-child(22) { top: 96%; left: 32%; animation-delay: 1.35s; }
.cs:nth-child(23) { top: 50%; left: 50%; animation-delay: 1.95s; }
.cs:nth-child(24) { top: 25%; left: 65%; width: 3px; height: 3px; animation-delay: 2.55s; }

@keyframes cs-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 0.55; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .cs { animation: none !important; }
}

/* Make sure all top-level content sits ABOVE the cosmic stage */
.nav, main, .footer { position: relative; z-index: 1; }

/* Konstelace had its own stars + tracking grid — now redundant since the
   cosmic-stage covers the whole page. Hide them locally. */
.con-stars,
.con-grid { display: none; }

/* ============================================================
   Hero video custom mute toggle (replaces native controls)
   ============================================================ */
.hero-video-mute {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(57,215,232,.4);
  border-radius: 999px;
  background: rgba(2, 8, 22, 0.78);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: #FFFFFF;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(0,4,16,.45),
    0 0 18px rgba(0,148,191,.25);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-video-mute:hover {
  transform: translateY(-1px);
  border-color: rgba(57,215,232,.7);
  box-shadow:
    0 6px 22px rgba(0,4,16,.55),
    0 0 26px rgba(0,148,191,.45);
}
.hero-video-mute .muted-icon,
.hero-video-mute .unmuted-icon {
  font-size: 14px;
  line-height: 1;
}
.hero-video-mute .unmuted-icon { display: none; }
.hero-video-mute.is-unmuted .muted-icon   { display: none; }
.hero-video-mute.is-unmuted .unmuted-icon { display: inline; }
.hero-video-mute.is-unmuted .mute-label::before { content: ''; }
.hero-video-mute.is-unmuted .mute-label::after  { content: 'Vypnout'; }
.hero-video-mute.is-unmuted .mute-label         { font-size: 0; }
.hero-video-mute.is-unmuted .mute-label::after  { font-size: 11px; }

/* ============================================================
   ALBERT SCROLL BUDDY — mobile-first floating AI companion
   ============================================================ */
.albert-buddy {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right));
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 100;
  /* hidden until user scrolls down */
  opacity: 0;
  transform: translateY(40px) scale(0.6);
  pointer-events: none;
  transition:
    opacity   .35s cubic-bezier(.22, 1, .36, 1),
    transform .45s cubic-bezier(.22, 1, .36, 1);
  -webkit-tap-highlight-color: transparent;
}
.albert-buddy.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Soft blue halo behind Albert */
.albert-buddy .buddy-glow {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0,148,191,.55) 0%, rgba(0,117,238,.25) 40%, transparent 70%);
  filter: blur(14px);
  z-index: 0;
  animation: buddy-glow-breathe 3.5s ease-in-out infinite;
}

/* Sonar ping (only one — keeps mobile light) */
.albert-buddy .buddy-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(57,215,232,.55);
  opacity: 0;
  z-index: 1;
  animation: buddy-pulse 3s ease-out infinite;
}

/* Gradient ring "platform" */
.albert-buddy .buddy-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(#03081A, #03081A) padding-box,
    linear-gradient(135deg, #0075EE 0%, #0094BF 50%, #00B095 100%) border-box;
  border: 2.5px solid transparent;
  box-shadow:
    0 0 0 1px rgba(57,215,232,.2),
    0 6px 18px rgba(0,4,16,.45),
    0 0 20px rgba(0,148,191,.4),
    inset 0 0 18px rgba(0,148,191,.15);
  z-index: 1;
}

/* Albert image overflows the ring (cap + hand stick out) */
.albert-buddy .buddy-img {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  object-fit: contain;
  object-position: center;
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0,148,191,.5))
          drop-shadow(0 6px 14px rgba(0,4,16,.45));
  animation: buddy-float 4s ease-in-out infinite;
  pointer-events: none;
}

/* Up-arrow badge that floats above his shoulder */
.albert-buddy .buddy-badge {
  position: absolute;
  top: -6px;
  left: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0075EE, #00B095);
  box-shadow: 0 0 0 2px #03081A, 0 0 14px rgba(0,148,191,.7);
  z-index: 4;
  animation: buddy-badge-bob 2s ease-in-out infinite;
}

/* Hover tooltip — visible on desktop only */
.albert-buddy .buddy-bubble {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(2, 8, 22, 0.92);
  color: #FFFFFF;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(57,215,232,.32);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
  z-index: 4;
}
.albert-buddy:hover .buddy-bubble {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hover state: lift + bigger glow + speed up float */
.albert-buddy:hover { transform: translateY(-4px) scale(1.06); }
.albert-buddy:hover .buddy-img { animation-duration: 2.4s; }
.albert-buddy:hover .buddy-glow { filter: blur(18px); }

/* Active (mid-tap on mobile) */
.albert-buddy:active { transform: translateY(-2px) scale(0.96); transition-duration: .1s; }

/* ---- Animations ---- */
@keyframes buddy-float {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
@keyframes buddy-glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes buddy-pulse {
  0%   { opacity: 0.55; transform: scale(1);    }
  80%  { opacity: 0;    transform: scale(1.55); }
  100% { opacity: 0;    transform: scale(1.55); }
}
@keyframes buddy-badge-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- Responsive sizing ---- */
@media (min-width: 800px) {
  .albert-buddy {
    width: 88px;
    height: 88px;
    bottom: 24px;
    right: 24px;
  }
  .albert-buddy .buddy-badge { width: 28px; height: 28px; font-size: 15px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .albert-buddy,
  .albert-buddy * {
    animation: none !important;
    transition: opacity .2s ease !important;
    transform: none !important;
  }
  .albert-buddy.is-visible { transform: none !important; }
}

/* ============================================================
   SECTION LINK — vertical chip-trace drop between sections.
   Same draw animation as the pillar connector (scaleY 0 → 1)
   so the whole page reads as one continuous trace.
   ============================================================ */
.section-link {
  position: relative;
  width: 100%;
  height: 84px;
  pointer-events: none;
  z-index: 1;
}
.link-trace {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 12px;
  width: 2px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  background: linear-gradient(180deg,
    var(--aiu-blue)  0%,
    var(--aiu-cyan)  50%,
    var(--aiu-teal)  100%);
  box-shadow:
    0 0 6px  rgba(0,148,191,.6),
    0 0 14px rgba(0,148,191,.28);
  border-radius: 2px;
}
.link-node {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #03081A;
  border: 2.5px solid var(--aiu-cyan);
  box-shadow:
    0 0 0 3px rgba(57,215,232,.08),
    0 0 16px rgba(0,148,191,.55),
    inset 0 0 8px rgba(57,215,232,.25);
  transform: translateX(-50%) scale(0);
  opacity: 0;
}
.section-link.is-drawn .link-trace {
  animation: section-link-draw 1.0s cubic-bezier(.22, 1, .36, 1) forwards;
}
.section-link.is-drawn .link-node {
  animation: section-link-node 0.5s cubic-bezier(.22, 1, .36, 1) 0.8s forwards;
}
@keyframes section-link-draw {
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes section-link-node {
  0%   { opacity: 0; transform: translateX(-50%) scale(0);    }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.25); }
  100% { opacity: 1; transform: translateX(-50%) scale(1);    }
}
@media (max-width: 800px) {
  .section-link { height: 56px; }
  .link-node { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-link .link-trace,
  .section-link .link-node {
    animation: none !important;
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
}