W/* ====== RESET + BASE ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
:root{
  /* ===== Study theme: světle zelená + bílá ===== */
  --primary: #2fd45f;
  --primary-dark: #1fb24b;
  --primary-light: #63f28f;

  --secondary: #22c55e;
  --accent: #16a34a;

  --dark: #0b1220;
  --light: #f6fbf7;
  --white: #ffffff;

  --shadow: rgba(15, 23, 42, 0.12);
  --gradient: linear-gradient(135deg, #2fd45f 0%, #a7f3d0 100%);

  /* mapping to existing vars for older styles */
  --bg0: var(--light);
  --bg1: #eaf7ef;
  --text: #0f172a;
  --muted: rgba(15,23,42,.70);
  --card: #ffffff;
  --stroke: rgba(15,23,42,.08);
  --stroke2: rgba(15,23,42,.05);
  --border: rgba(15,23,42,.10);
  --brand1: var(--primary);
  --brand2: var(--secondary);
  --brand3: var(--accent);

  --container-max: 100%;
  --gutter: clamp(18px, 4vw, 64px);
  --ui-scale: 0.9; /* global content scale (excluding navbar) */
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg0); /* soft light background */
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:hidden; /* lock native scroll, we drive sections */
}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid rgba(255,255,255,.65); outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ====== LOADER ====== */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(47,212,95,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(900px 600px at 40% 90%, rgba(16,185,129,.10), transparent 55%),
    var(--dark);
}
.loader[aria-hidden="true"]{display:none}
.loader-card{
  width:min(560px, calc(100vw - 48px));
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10, 12, 22, .78);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  border-radius:22px;
  padding:22px 22px 18px;
  overflow:hidden;
  position:relative;
}
.loader-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 190deg,
    rgba(34,197,94,.0),
    rgba(34,197,94,.45),
    rgba(16,185,129,.45),
    rgba(5,150,105,.45),
    rgba(34,197,94,.0)
  );
  filter: blur(18px);
  opacity:.65;
  animation: spin 1.6s linear infinite;
}
.loader-inner{position:relative; z-index:2}
.loader-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{
  display:flex; align-items:center; gap:10px;
  letter-spacing:.02em;
}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.92));
  box-shadow: 0 12px 40px rgba(34,197,94,.22);
  position:relative;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:9px;
  background:rgba(7,8,16,.85);
  transform: rotate(10deg);
}
.brand-name{font-weight:800; font-size:18px}
.loader-badge{
  font-size:12px; opacity:.8;
  border:1px solid rgba(255,255,255,.16);
  padding:6px 10px; border-radius:999px;
}
.loader-title{
  margin:14px 0 6px;
  font-size:28px; font-weight:900;
  line-height:1.05;
}
.loader-sub{opacity:.78; margin:0 0 16px}
.loader-bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.loader-bar > i{
  display:block; height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.85), rgba(5,150,105,.95));
  box-shadow: 0 0 40px rgba(34,197,94,.22);
  border-radius:999px;
  transition: width .25s ease;
}
.loader-hint{
  margin:12px 0 0;
  display:flex; align-items:center; gap:10px;
  opacity:.75;
  font-size:12px;
}
.loader-hint .kbd{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius:10px;
  padding:4px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

/* --- LOADER 3D WOW --- */
.loader-scene{perspective: 1200px}
.loader-3d{
  position:relative;
  height: 170px;
  display:grid;
  place-items:center;
  margin: 10px 0 6px;
  transform-style: preserve-3d;
}
.cube{
  width: 88px; height: 88px;
  position:relative;
  transform-style: preserve-3d;
  animation: cubeSpin 1.9s cubic-bezier(.2,.9,.2,1) infinite;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
}
.cube .face{
  position:absolute; inset:0;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    inset 0 18px 40px rgba(255,255,255,.06);
  overflow:hidden;
}
.cube .face::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(260px 160px at 25% 20%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(260px 160px at 80% 70%, rgba(16,185,129,.18), transparent 58%),
    radial-gradient(260px 180px at 40% 90%, rgba(5,150,105,.14), transparent 60%);
  filter: blur(10px);
  opacity:.95;
  transform: translateZ(1px);
}
.cube .f1{transform: translateZ(44px)}
.cube .f2{transform: rotateY(90deg) translateZ(44px)}
.cube .f3{transform: rotateY(180deg) translateZ(44px)}
.cube .f4{transform: rotateY(-90deg) translateZ(44px)}
.cube .f5{transform: rotateX(90deg) translateZ(44px)}
.cube .f6{transform: rotateX(-90deg) translateZ(44px)}

.ring{
  position:absolute;
  width: 170px; height: 170px;
  border-radius: 999px;
  border:1px solid rgba(34,197,94,.22);
  transform: rotateX(68deg) translateZ(-34px);
  box-shadow:
    0 0 0 1px rgba(5,150,105,.10),
    0 0 80px rgba(34,197,94,.12);
  animation: ringPulse 1.35s ease-in-out infinite;
}
.shadow{
  position:absolute;
  width: 130px; height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  filter: blur(18px);
  transform: translateY(78px) translateZ(-30px);
  opacity: .55;
  animation: shadowBreath 1.35s ease-in-out infinite;
}
@keyframes cubeSpin{
  0%{transform: rotateX(-18deg) rotateY(22deg) translateY(2px)}
  40%{transform: rotateX(-12deg) rotateY(200deg) translateY(-4px)}
  75%{transform: rotateX(22deg) rotateY(320deg) translateY(2px)}
  100%{transform: rotateX(-18deg) rotateY(382deg) translateY(2px)}
}
@keyframes ringPulse{
  0%,100%{opacity:.55; transform: rotateX(68deg) translateZ(-34px) scale(.98)}
  50%{opacity:.9; transform: rotateX(68deg) translateZ(-34px) scale(1.02)}
}
@keyframes shadowBreath{
  0%,100%{transform: translateY(78px) translateZ(-30px) scale(.95); opacity:.5}
  50%{transform: translateY(78px) translateZ(-30px) scale(1.06); opacity:.62}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== NAV ====== */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:3000;
  padding:14px 18px;
  pointer-events:none; /* container off; children on */
}
.nav{
  pointer-events:auto;
  max-width: var(--container-max);
  margin:0 auto;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.06);
  background:#ffffff;
  box-shadow: 0 14px 40px rgba(15,23,42,.18);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nav-left{display:flex; align-items:center; gap:12px}
.logo{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.logo:hover{transform: translateY(-1px); background: rgba(15,23,42,.06); box-shadow:0 6px 20px rgba(15,23,42,.15);}
.logo .mark{
  width:12px; height:12px; border-radius:4px;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary));
}
.logo .text{font-weight:900; letter-spacing:.02em}
.nav-menu{
  display:flex; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0;
}
.nav-menu a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  color: rgba(15,23,42,.80);
  border:1px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  font-size:14px;
  white-space:nowrap;
}
.nav-menu a:hover{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.26);
  transform: translateY(-1px);
  color: rgba(15,23,42,1);
}
.nav-menu a.is-active{
  background: rgba(47,212,95,.16);
  border-color: rgba(47,212,95,.55);
  color:#052e12;
}
.cta{
  margin-left:10px;
  padding:10px 18px !important;
  border-radius:999px;
  background: var(--gradient);
  border:1px solid rgba(34,197,94,.40) !important;
  box-shadow: 0 20px 70px rgba(34,197,94,.35);
  color:#052e12 !important;
  font-weight:900;
}
.cta:hover{transform: translateY(-2px) scale(1.01) !important}

.nav-right{display:flex; align-items:center; gap:10px}
.nav-chip{
  display:none;
  font-size:12px;
  opacity:.8;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius:999px;
  padding:6px 10px;
}
.menu-btn{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(246,247,255,.92);
  cursor:pointer;
}
.menu-btn i{font-size:18px}
@media (max-width: 920px){
  .nav-menu{display:none}
  .menu-btn{display:grid; place-items:center}
  .nav-chip{display:inline-flex}
}
.drawer{
  position:fixed; inset:0;
  z-index:3100;
  display:none;
}
.drawer.open{display:block}
.drawer-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
.drawer-panel{
  position:absolute; top:18px; right:18px; left:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.95);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  padding:10px;
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 8px 4px;
}
.drawer-close{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(246,247,255,.92);
  cursor:pointer;
}
.drawer-links{
  list-style:none; margin:0; padding:8px;
  display:grid; gap:6px;
}
.drawer-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* ====== STAGE / PANELS ====== */
/* ====== STAGE / PANELS ====== */
.stage{
  position:fixed;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  perspective: 2000px;
  perspective-origin: 50% 50%;
}

.stack{
  position:relative;
  width:100%;
  height:100%;
  transform-style: preserve-3d;
}

.panel{
  height:100vh;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style: preserve-3d;

  /* start slightly back, smaller, and soft */
  opacity:0;
  transform: translate3d(0,40px,-320px) scale(0.86);
  filter: blur(14px) brightness(0.9);

  transition:
    opacity 650ms ease-out,
    transform 950ms cubic-bezier(.22,1,.23,1),
    filter 800ms ease-out;
  pointer-events:none;
}

.panel > .container{
  transform: scale(var(--ui-scale));
  transform-origin: center center;
}

.panel.is-active{
  /* snap into focus in front */
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0) brightness(1);
  pointer-events:auto;
  z-index:2;
}

.panel.is-prev{
  /* drift up and slightly past, like exiting the foreground */
  opacity:0;
  transform: translate3d(0,-80px,120px) scale(1.06);
  filter: blur(18px) brightness(0.9);
  pointer-events:none;
  z-index:1;
}
.container{
  width:min(var(--container-max), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
  padding: 120px var(--gutter) 64px;
  position:relative;
  z-index:2;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.82;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
h1,h2,h3{margin:0 0 12px}
p{margin:0 0 16px; color: rgba(15,23,42,.80)}
.title-xl{font-size: clamp(40px, 5.2vw, 78px); font-weight: 950; letter-spacing:-.03em; line-height:1.02}
.title-lg{font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; letter-spacing:-.02em; line-height:1.06}
.sub{font-size: clamp(16px, 1.3vw, 18px); max-width: 64ch}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(246,247,255,.92);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22)}
.btn.primary{
  background: var(--gradient);
  color:#04120a;
  border-color: rgba(255,255,255,.22);
  font-weight:900;
}
.btn.primary:hover{transform: translateY(-3px) scale(1.01)}
.muted{opacity:.72}
.spacer{height:18px}

/* ====== GLOBAL ENTER ANIMS (base) ====== */
.panel [data-anim]{opacity:0; transform: translate3d(0,18px,0); filter: blur(6px)}
.panel.is-active [data-anim]{opacity:1; transform:none; filter:none}
.panel.is-active [data-anim]{
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(.2,.9,.2,1),
    filter 900ms ease;
  transition-delay: calc(var(--at, 0) * 1s);
}

/* ====== PANEL 0: HERO (aurora / editorial) ====== */
.p-hero{
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(47,212,95,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 95%, rgba(16,185,129,.10), transparent 65%),
    var(--bg0);
  display:block; /* stack hero content + mosaic vertically */
}
.p-hero::before,
.p-hero::after{
  content:"";
  position:absolute; inset:-20%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(700px 460px at 25% 25%, rgba(47,212,95,.16), transparent 62%),
    radial-gradient(740px 520px at 70% 70%, rgba(34,197,94,.12), transparent 64%),
    radial-gradient(900px 620px at 50% 40%, rgba(16,185,129,.10), transparent 66%);
  filter: blur(18px);
  opacity:.50;
  transform: translate3d(0,0,0);
  animation: auroraMove 10s ease-in-out infinite alternate;
}
.p-hero::after{
  opacity:.25;
  filter: blur(26px);
  animation-duration: 14s;
  animation-direction: alternate-reverse;
}
@keyframes auroraMove{
  from{transform: translate3d(-40px, 30px, 0) scale(1)}
  to{transform: translate3d(55px, -35px, 0) scale(1.03)}
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 32px;
  align-items:start;
  max-width: 100%;
}
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .hero-right{order: -1}
}

.hero-quote{
  border-left:3px solid rgba(34,197,94,.55);
  padding: 10px 0 10px 14px;
  margin-top: 18px;
  font-size:14px;
  color: rgba(15,23,42,.78);
}
.hero-quote b{color: rgba(15,23,42,.92)}
.hero-mosaic{
  border-radius: 26px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  padding: 20px;
  position:relative;
  overflow:hidden;
}
.hero-mosaic::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(700px 450px at 20% 25%, rgba(47,212,95,.20), transparent 60%),
    radial-gradient(600px 400px at 85% 30%, rgba(34,197,94,.16), transparent 62%),
    radial-gradient(700px 450px at 55% 85%, rgba(16,185,129,.14), transparent 62%);
  opacity:.65;
  filter: blur(18px);
  transform: translate3d(calc(var(--mx,0)*1px), calc(var(--my,0)*1px), 0);
  transition: transform 120ms linear;
}
.hero-mosaic > *{position:relative; z-index:2}

.hero-media{margin-top: 0}
.media-card{
  position:relative;
  border-radius: 32px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  overflow:hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: clamp(260px, 32vh, 380px);
  max-height: clamp(320px, 44vh, 460px);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  box-shadow: 0 40px 140px rgba(15,23,42,.16), 0 0 0 1px rgba(34,197,94,.10);
}
.media-card:hover{
  border-color: rgba(34,197,94,.32);
  box-shadow: 0 50px 180px rgba(15,23,42,.18), 0 0 60px rgba(34,197,94,.12);
}
.media-video,.media-img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: translateZ(20px) scale(1.03);
  filter: saturate(1.05) contrast(1.02);
}
.media-glow{
  position:absolute; inset:-1px;
  background:
    radial-gradient(800px 420px at 20% 20%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(900px 460px at 80% 70%, rgba(34,197,94,.14), transparent 62%),
    radial-gradient(900px 520px at 50% 90%, rgba(5,150,105,.12), transparent 64%);
  opacity:.65;
  filter: blur(22px);
  mix-blend-mode: multiply;
  transform: translateZ(1px);
  pointer-events:none;
}
.media-badge{
  position:absolute;
  left: 14px; bottom: 14px;
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  font-size:12px;
  transform: translateZ(36px);
}
.media-caption{
  margin-top: 14px;
  font-size:13px;
  opacity:.80;
  text-align:center;
  color: rgba(15,23,42,.72);
}
.hero-media-wrapper{
  display:flex;
  flex-direction:column;
  gap: 20px;
}
.hero-extra{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
}
.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.stat-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.stat-value{
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat-label{
  font-size: 12px;
  opacity: .75;
  color: rgba(15,23,42,.72);
}
@media (max-width: 980px){
  .hero-stats{grid-template-columns: 1fr; gap: 16px}
  .stat-value{font-size: 24px}
}
.mosaic-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mosaic-pill{
  display:inline-flex; gap:10px; align-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  opacity:.9;
}
.mosaic-pill .dot{
  width:8px; height:8px; border-radius:99px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 20px rgba(34,197,94,.22);
}
.mosaic-sim{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tile{
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  padding: 16px;
  min-height: 130px;
  position:relative;
  overflow:hidden;
}

/* mosaic band under hero – full container width */
.hero-mosaic-wide{
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  display:flex;
  flex-direction:column;
}

/* spacing tuning for hero */
.p-hero > .container.hero-grid{
  padding-top: clamp(72px, 9vh, 112px);
  padding-bottom: 0;          /* was 8px */
}
.p-hero > .container.hero-grid + .container{
  padding-top: 0;
  padding-bottom: 32px;       /* slightly tighter */
}

@media (max-width: 980px){
  .mosaic-sim{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .mosaic-sim{
    grid-template-columns: 1fr;
  }
}

.p-hero .container{
  padding-top: clamp(56px, 7vh, 96px);
  padding-bottom: clamp(28px, 6vh, 64px);
}
.tile::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(120deg, rgba(15,23,42,.06), transparent 40%);
  opacity: .55;
  transform: translateX(-40%) rotate(2deg);
}
.tile h3{font-size:14px; margin:0 0 10px; opacity:.9}
.tile .big{font-size:24px; font-weight:900; letter-spacing:-.02em}
.tile .tiny{font-size:12px; opacity:.75}
.wave{
  height: 10px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  overflow:hidden;
  margin-top: 10px;
}
.wave i{
  display:block; height:100%;
  width: 55%;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(5,150,105,.95));
  border-radius:999px;
  animation: wave 1.4s ease-in-out infinite alternate;
}
@keyframes wave{to{width: 88%}}

.p-hero.is-active .title-xl{
  animation: heroTitle 900ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes heroTitle{
  from{letter-spacing:.02em; transform: translate3d(0,10px,0) scale(.98); filter: blur(10px); opacity:0}
  to{letter-spacing:-.03em; transform:none; filter:none; opacity:1}
}

/* ====== PANEL 1: FEATURES ====== */
.p-features{
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 40%),
    radial-gradient(1000px 700px at 10% 20%, rgba(47,212,95,.20), transparent 60%),
    radial-gradient(900px 650px at 90% 55%, rgba(34,197,94,.14), transparent 60%),
    var(--bg0);
}
.features-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 48px;
  align-items:start;
  max-width: 100%;
}
@media (max-width: 980px){ .features-grid{grid-template-columns:1fr; gap:32px} }
.features-left .sub{max-width: 58ch}
.stamp{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top: 14px;
  color: rgba(15,23,42,.78);
}
.stamp i{opacity:.8}
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px){ .cards{grid-template-columns:1fr} }
.card{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  padding: 14px 14px 16px;
  position:relative;
  overflow:hidden;
  transform-origin: 50% 60%;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(500px 260px at var(--px, 30%) var(--py, 20%), rgba(34,197,94,.14), transparent 60%),
    radial-gradient(540px 260px at calc(var(--px, 30%) + 40%) calc(var(--py, 20%) + 30%), rgba(16,185,129,.12), transparent 65%);
  opacity:.65;
  filter: blur(14px);
  transform: translate3d(0,0,0);
}
.card > *{position:relative; z-index:2}
.card .icon{
  width:40px; height:40px;
  border-radius:16px;
  display:grid; place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  margin-bottom: 10px;
}
.card h3{font-size:16px; margin:0 0 6px}
.card p{margin:0; font-size:13px; color: rgba(15,23,42,.72)}
.card .tag{
  display:inline-flex;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px dashed rgba(15,23,42,.18);
  margin-top: 10px;
  opacity:.82;
}
.p-features .card{transform: translate3d(0,18px,0) rotate(-1.2deg) skewX(-1deg); opacity:0}
.p-features.is-active .card{
  opacity:1;
  transform:none;
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 700ms ease;
  transition-delay: calc(var(--st, 0) * 1ms);
}

/* ====== PANEL 2: WORKFLOW ====== */
.p-flow{
  background:
    radial-gradient(1000px 700px at 50% 30%, rgba(47,212,95,.18), transparent 60%),
    radial-gradient(900px 650px at 85% 70%, rgba(34,197,94,.12), transparent 60%),
    var(--bg0);
  --prog: 0;
}
.scanlines{
  position:absolute; inset:0; z-index:1;
  background:
    repeating-linear-gradient(180deg, rgba(15,23,42,.05) 0, rgba(15,23,42,.05) 1px, transparent 2px, transparent 6px);
  opacity:.35;
  mix-blend-mode: multiply;
  pointer-events:none;
}
.flow-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:stretch;
}
@media (max-width: 980px){ .flow-grid{grid-template-columns:1fr; gap:16px} }
.terminal{
  border-radius: 22px;
  border:1px solid rgba(34,197,94,.22);
  background: rgba(255,255,255,.74);
  padding: 16px 16px 14px;
  position:relative;
  overflow:hidden;
}
.terminal::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(850px 420px at 20% 20%, rgba(16,185,129,.12), transparent 62%);
  filter: blur(18px);
  opacity:.8;
}
.terminal > *{position:relative; z-index:2}
.term-head{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(34,197,94,.18);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.term-dots{display:flex; gap:6px}
.term-dots span{
  width:10px; height:10px; border-radius:99px;
  background: rgba(34,197,94,.65);
  opacity:.7;
}
.term-title{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  opacity:.75;
}
.steps{display:grid; gap:10px; margin-top: 10px}
.step{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid rgba(34,197,94,.18);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 12px 12px;
}
.step .n{
  width:28px; height:28px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(34,197,94,.28);
  background: rgba(34,197,94,.12);
  font-weight:900;
  color: rgba(15,23,42,.92);
  flex:0 0 auto;
}
.step h3{font-size:14px; margin:0 0 4px}
.step p{margin:0; font-size:13px; color: rgba(15,23,42,.72)}
.right-stack{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  padding: 16px;
  display:grid;
  align-content:center;
  gap: 12px;
  position:relative;
  overflow:hidden;
}
.right-stack::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(900px 520px at 70% 30%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(18px);
  opacity:.8;
}
.right-stack > *{position:relative; z-index:2}
.block{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  padding: 14px 14px;
  transform: translate3d(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px), 0) rotate(calc(var(--br, 0) * 1deg));
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}
.block .top{display:flex; align-items:center; justify-content:space-between; font-size:12px; opacity:.85}
.block .meter{height:10px; border-radius:999px; background: rgba(15,23,42,.08); overflow:hidden; margin:10px 0 8px}
.block .meter i{display:block; height:100%; width: var(--mw, 60%); border-radius:999px; background: linear-gradient(90deg, rgba(34,197,94,.85), rgba(16,185,129,.75))}
.block .btm{font-size:12px; opacity:.78}
.p-flow .b1{ --bx: calc((1 - var(--prog)) * -34); --by: calc((1 - var(--prog)) * 26); --br: calc((1 - var(--prog)) * -6); --mw: 72% }
.p-flow .b2{ --bx: calc((1 - var(--prog)) * 38);  --by: calc((1 - var(--prog)) * 10); --br: calc((1 - var(--prog)) * 6);  --mw: 44% }
.p-flow .b3{ --bx: calc((1 - var(--prog)) * -12); --by: calc((1 - var(--prog)) * -18); --br: calc((1 - var(--prog)) * 3);  --mw: 86% }
.p-flow .b4{ --bx: calc((1 - var(--prog)) * 28);  --by: calc((1 - var(--prog)) * -24); --br: calc((1 - var(--prog)) * -4); --mw: 72% }
.p-flow .b5{ --bx: calc((1 - var(--prog)) * -22); --by: calc((1 - var(--prog)) * 18);  --br: calc((1 - var(--prog)) * 5);  --mw: 58% }

/* ====== PANEL 3: PRICING ====== */
.p-pricing{
  background:
    radial-gradient(1100px 750px at 35% 20%, rgba(47,212,95,.18), transparent 62%),
    radial-gradient(900px 650px at 80% 65%, rgba(34,197,94,.12), transparent 62%),
    var(--bg0);
}
.pricing-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){ .pricing-grid{grid-template-columns:1fr; gap:12px} }
.price-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  /* equal horizontal padding so inner button has symmetric gap */
  padding: 18px 24px 18px;
  position:relative;
  overflow:hidden;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform 350ms ease, box-shadow 350ms ease;
}
.price-card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    linear-gradient(120deg, rgba(15,23,42,.06), transparent 45%),
    radial-gradient(650px 340px at 30% 25%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(650px 340px at 70% 65%, rgba(16,185,129,.08), transparent 60%);
  opacity:.7;
  filter: blur(12px);
}
.price-card > *{position:relative; z-index:2}
.price-card .plan{display:flex; align-items:center; justify-content:space-between}
.price-card .name{font-weight:900; font-size:16px}
.price-card .chip{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  opacity:.88;
}
.price{font-size:44px; font-weight:950; letter-spacing:-.03em; margin:10px 0 8px}
.price small{font-size:14px; font-weight:700; opacity:.7}
.features{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.features li{display:flex; gap:10px; align-items:flex-start; font-size:13px; color: rgba(15,23,42,.76)}
.features i{opacity:.85}
.price-cta{
  margin-top: auto;
  /* center horizontally with equal left/right gap */
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  justify-content:center;
}

/* extra spacing under pricing cards so the "Ask a question / Start Free" row
   sits comfortably below and doesn't visually collide with the cards */
.p-pricing .btns{
  margin-top: 32px;
}
.price-card.featured{
  border-color: rgba(34,197,94,.28);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.62));
}
.price-card.featured .chip{border-color: rgba(34,197,94,.22)}
.price-card:hover{box-shadow: 0 30px 90px rgba(15,23,42,.16)}
.p-pricing .price-card{opacity:0; transform: perspective(900px) rotateX(18deg) rotateY(-8deg) translateY(18px)}
.p-pricing.is-active .price-card{
  opacity:1;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 700ms ease;
  transition-delay: calc(var(--st, 0) * 1ms);
}

/* ====== PANEL 4: OUTRO ====== */
.p-outro{
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(47,212,95,.18), transparent 60%),
    radial-gradient(900px 650px at 20% 70%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(900px 650px at 90% 75%, rgba(16,185,129,.10), transparent 60%),
    var(--bg0);
}
.stars{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(15,23,42,.18) 50%, transparent 52%),
    radial-gradient(2px 2px at 60% 20%, rgba(15,23,42,.14) 50%, transparent 52%),
    radial-gradient(1px 1px at 80% 60%, rgba(15,23,42,.10) 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 70%, rgba(15,23,42,.10) 50%, transparent 52%),
    radial-gradient(1px 1px at 10% 50%, rgba(15,23,42,.10) 50%, transparent 52%);
  background-size: 320px 280px, 420px 360px, 500px 420px, 380px 320px, 540px 460px;
  opacity:.55;
  animation: drift 16s linear infinite;
  pointer-events:none;
  filter: blur(.2px);
  z-index:1;
  transform: translate3d(0,0,0);
}
@keyframes drift{to{transform: translate3d(-120px, 80px, 0)}}
.outro-card{
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 40px 140px rgba(15,23,42,.16);
  padding: 24px;
  max-width: 760px;
}
.outro-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  font-size:12px;
  opacity:.9;
}

/* ====== FOOTER (minimalist modern) ====== */
.site-footer{
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap: 24px;
  color: rgba(15,23,42,.70);
}
.site-footer::before{
  content:"";
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, rgba(34,197,94,.8), transparent);
  margin-bottom: -2px;
}
.footer-main{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  align-items:start;
}
@media (max-width: 980px){
  .footer-main{grid-template-columns:1fr; gap:24px}
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-logo{
  display:inline-flex; align-items:center; gap:10px;
  width: fit-content;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(15,23,42,.92);
}
.footer-logo .mark{
  width:14px; height:14px; border-radius:4px;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.90));
  box-shadow: 0 0 20px rgba(34,197,94,.22);
}
.footer-tagline{
  font-size:14px;
  line-height:1.6;
  opacity:.85;
  max-width: 48ch;
  color: rgba(15,23,42,.72);
}
.footer-col h5{
  margin:0 0 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.9;
  color: rgba(15,23,42,.90);
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  opacity:.8;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
  color: rgba(15,23,42,.72);
}
.footer-links a:hover{
  opacity:1;
  transform: translateX(4px);
  color: rgba(22,163,74,.95);
}
.footer-links a i{font-size:12px; opacity:.7}
.footer-social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-social a{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  opacity:.85;
  transition: all .25s ease;
  color: rgba(15,23,42,.78);
}
.footer-social a:hover{
  opacity:1;
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  box-shadow: 0 8px 24px rgba(34,197,94,.12);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: 20px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size:12px;
  opacity:.7;
  flex-wrap:wrap;
  gap:12px;
}
@media (max-width: 980px){
  .footer-bottom{flex-direction:column; align-items:flex-start}
}
.footer-bottom-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.footer-bottom-links a{
  opacity:.75;
  transition: opacity .2s ease;
}
.footer-bottom-links a:hover{opacity:1}

/* ====== PANEL 3: ROADMAP (animated card grid) ====== */
.p-roadmap{
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 650px at 80% 70%, rgba(16,185,129,.08), transparent 62%),
    radial-gradient(900px 650px at 50% 95%, rgba(5,150,105,.08), transparent 62%),
    var(--bg0);
  overflow-x: hidden;
}
.p-roadmap > .container{
  transform: scale(0.8); /* 20% smaller */
  transform-origin: center center;
}

/* Hero content 20% smaller */
.p-hero > .container{
  transform: scale(0.8);
}
.p-roadmap .container{
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 140px;
  padding-bottom: 120px;
}
.road-container{
  max-width: 100%;
  padding: 0 var(--gutter);
}
.road-header{
  text-align:center;
  margin-bottom: 56px;
  padding: 0 var(--gutter);
}
.road-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 0 var(--gutter);
  max-width: 1200px;
  margin: 0 auto 40px auto;
}
@media (min-width: 1024px){
  .road-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .road-grid{grid-template-columns: 1fr; gap: 20px}
}
.road-card{
  position:relative;
  border-radius: 28px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
  padding: 32px;
  cursor:pointer;
  overflow:hidden;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}
.p-roadmap.is-active .road-card{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.p-roadmap.is-active .road-card:nth-child(1){transition-delay: 0.1s}
.p-roadmap.is-active .road-card:nth-child(2){transition-delay: 0.2s}
.p-roadmap.is-active .road-card:nth-child(3){transition-delay: 0.3s}
.p-roadmap.is-active .road-card:nth-child(4){transition-delay: 0.4s}
.road-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(400px 300px at var(--mx, 50%) var(--my, 50%), rgba(34,197,94,.12), transparent 70%),
    radial-gradient(300px 250px at calc(var(--mx, 50%) + 30%) calc(var(--my, 50%) + 20%), rgba(16,185,129,.10), transparent 65%);
  opacity:0;
  transition: opacity 0.4s ease;
  border-radius: 28px;
  z-index:0;
}
.road-card:hover::before{opacity:1;}
.road-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.18), rgba(5,150,105,.22));
  opacity:0;
  transition: opacity 0.4s ease;
  z-index:-1;
  filter: blur(20px);
}
.road-card:hover::after{opacity:0.6;}
.road-card:hover{
  transform: translateY(-8px) scale(1.02) rotateX(2deg);
  border-color: rgba(34,197,94,.28);
  box-shadow:
    0 30px 80px rgba(15,23,42,.18),
    0 0 40px rgba(34,197,94,.12);
}
.road-card.active{
  border-color: rgba(34,197,94,.36);
  background: rgba(34,197,94,.08);
  box-shadow:
    0 40px 100px rgba(15,23,42,.20),
    0 0 60px rgba(34,197,94,.12);
}
.road-card > *{position:relative; z-index:1}
.road-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.road-card-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.85);
  transition: all 0.3s ease;
}
.road-card.active .road-card-badge{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.28);
  color: rgba(15,23,42,.95);
  transform: scale(1.05);
}
.road-card-progress{
  width: 56px;
  height: 56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.72);
  border:2px solid rgba(15,23,42,.08);
  position:relative;
  overflow:visible;
}
.road-card-progress svg{
  position:absolute;
  width:100%;
  height:100%;
  transform: rotate(-90deg);
  top:0;
  left:0;
}
.road-card-progress-circle{
  fill:none;
  stroke: rgba(34,197,94,.25);
  stroke-width:3;
  stroke-dasharray: 157.08;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.9,.2,1), stroke 0.4s ease;
}
.road-card[data-quarter="q1"] .road-card-progress-circle{
  stroke-dashoffset: 39.27;
  stroke: rgba(34,197,94,.70);
}
.road-card[data-quarter="q2"] .road-card-progress-circle{
  stroke-dashoffset: 109.96;
  stroke: rgba(34,197,94,.50);
}
.road-card[data-quarter="q3"] .road-card-progress-circle{
  stroke-dashoffset: 141.37;
  stroke: rgba(34,197,94,.40);
}
.road-card[data-quarter="q4"] .road-card-progress-circle{
  stroke-dashoffset: 157.08;
  stroke: rgba(34,197,94,.22);
}
.road-card.active .road-card-progress-circle{
  stroke: rgba(34,197,94,.92);
  filter: drop-shadow(0 0 8px rgba(34,197,94,.22));
}
.road-card-progress-icon{
  position:relative;
  z-index:2;
  font-size:24px;
  color: rgba(34,197,94,.82);
  transition: all 0.4s ease;
}
.road-card:hover .road-card-progress-icon,
.road-card.active .road-card-progress-icon{
  color: rgba(34,197,94,1);
  transform: scale(1.1);
}
.road-card h3{
  font-size:24px;
  font-weight:900;
  margin:0 0 12px;
  line-height:1.2;
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: all 0.3s ease;
}
.road-card:hover h3{
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.95));
  -webkit-background-clip: text;
  background-clip: text;
}
.road-card p{
  font-size:15px;
  opacity:.85;
  margin:0 0 24px;
  line-height:1.6;
  color: rgba(15,23,42,.75);
}
.road-card-features{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  max-height:0;
  overflow:hidden;
  transition: max-height 0.5s cubic-bezier(.2,.9,.2,1), margin 0.5s ease, padding 0.5s ease;
}
.road-card.active .road-card-features{
  max-height:500px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.road-card-features li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  opacity:0;
  transform: translateX(-10px);
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
  color: rgba(15,23,42,.76);
}
.road-card.active .road-card-features li{
  opacity:1;
  transform: translateX(0);
}
.road-card.active .road-card-features li:nth-child(1){transition-delay: 0.1s}
.road-card.active .road-card-features li:nth-child(2){transition-delay: 0.2s}
.road-card.active .road-card-features li:nth-child(3){transition-delay: 0.3s}
.road-card-features i{
  margin-top:3px;
  font-size:16px;
  color: rgba(34,197,94,.9);
  flex-shrink:0;
  animation: checkPulse 2s ease-in-out infinite;
}
@keyframes checkPulse{
  0%, 100%{transform: scale(1); opacity:0.9}
  50%{transform: scale(1.1); opacity:1}
}
.road-card-icon{
  position:absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius:18px;
  background: rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.20);
  display:grid;
  place-items:center;
  font-size:28px;
  color: rgba(34,197,94,.78);
  opacity:0.6;
  transition: all 0.4s cubic-bezier(.2,.9,.2,1);
  transform: rotate(-5deg) scale(0.9);
}
.road-card:hover .road-card-icon{
  opacity:1;
  transform: rotate(0deg) scale(1);
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
}
.road-card.active .road-card-icon{
  opacity:1;
  transform: rotate(0deg) scale(1.1);
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.34);
  box-shadow: 0 8px 24px rgba(34,197,94,.12);
}
.road-card-progress-bar{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.road-card-progress-bar-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 8px;
  font-size:12px;
  font-weight:700;
  color: rgba(15,23,42,.65);
}
.road-card-progress-bar-track{
  height: 8px;
  border-radius:999px;
  background: rgba(15,23,42,.08);
  overflow:hidden;
  position:relative;
}
.road-card-progress-bar-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(34,197,94,.9), rgba(16,185,129,.9));
  box-shadow: 0 0 12px rgba(34,197,94,.18);
  transition: width 1.2s cubic-bezier(.2,.9,.2,1);
  position:relative;
  overflow:hidden;
}
.road-card-progress-bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(100%)}
}
.road-card[data-quarter="q1"] .road-card-progress-bar-fill{width: 75%}
.road-card[data-quarter="q2"] .road-card-progress-bar-fill{width: 30%}
.road-card[data-quarter="q3"] .road-card-progress-bar-fill{width: 10%}
.road-card[data-quarter="q4"] .road-card-progress-bar-fill{width: 0%}

/* ====== PAGE HUD ====== */
.hud{
  position:fixed;
  right: 18px;
  bottom: 18px;
  z-index:2500;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
  transform: scale(var(--ui-scale));
  transform-origin: bottom right;
}
.dots{
  pointer-events:auto;
  display:flex; flex-direction:column; gap:8px;
  padding:10px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 80px rgba(15,23,42,.14);
}
.dotbtn{
  width:10px; height:10px;
  border-radius:99px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.06);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.dotbtn:hover{transform: scale(1.1); background: rgba(34,197,94,.14)}
.dotbtn.active{background: rgba(34,197,94,.70); border-color: rgba(34,197,94,.85)}
.scroll-tip{
  pointer-events:auto;
  font-size:12px;
  opacity:.78;
  padding:10px 12px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
}

/* Global container & spacing tweaks for shorter viewports */
@media (max-height: 900px){
  .container{
    padding-top: 96px;
    padding-bottom: 52px;
  }
  .outro-card{
    padding: 20px;
  }
}

@media (max-height: 780px){
  .container{
    padding-top: 80px;
    padding-bottom: 44px;
  }
  .hero-grid{
    gap: 32px;
  }
  .hero-mosaic{
    padding: 12px;
  }
  .media-card{
    min-height: clamp(220px, 38vh, 360px);
    max-height: min(50vh, 480px);
  }
  .hero-stats{
    padding: 14px;
    gap: 14px;
  }
  .terminal,
  .right-stack{
    padding: 12px;
  }
  .step{
    padding: 10px;
  }
  .road-card{
    padding: 24px;
  }
  .price-card{
    padding: 14px 14px 12px;
  }
}

/* Very short viewports – compress vertical rhythm a bit more */
@media (max-height: 680px){
  .container{
    padding-top: 64px;
    padding-bottom: 36px;
  }
  .title-xl{
    font-size: clamp(32px, 4vw, 56px);
  }
  .title-lg{
    font-size: clamp(26px, 2.6vw, 38px);
  }
  .sub{
    font-size: clamp(14px, 1.1vw, 16px);
  }
}

/* Extra width-related tweaks for tablets & smaller laptops */
@media (max-width: 768px){
  .container{
    padding-top: 96px;
    padding-bottom: 52px;
  }
  .hero-grid{
    gap: 28px;
  }
  .hero-mosaic{
    padding: 14px;
  }
  .mosaic-sim{
    grid-template-columns: 1fr;
  }
  .hero-stats{
    grid-template-columns: 1fr;
  }
  .flow-grid{
    gap: 18px;
  }
  .road-grid{
    gap: 20px;
  }
  .road-card{
    padding: 24px;
  }
  .pricing-grid{
    gap: 16px;
  }
}

/* Narrow phones / very small widths (in case of windowed layouts) */
@media (max-width: 520px){
  :root{
    --gutter: 14px;
  }
  .hero-quote{
    font-size: 13px;
  }
  .road-card{
    padding: 20px 18px;
  }
  .road-card-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .price-card{
    padding: 14px 14px 12px;
  }
  .outro-card{
    padding: 18px;
  }
}

/* ====== RESPONSIVE TUNING (small screens & narrow viewports) ====== */
/* (ponecháno – stejné jako výše, jen tvůj původní duplicitní blok) */

@media (max-height: 900px){
  .container{
    padding-top: 96px;
    padding-bottom: 52px;
  }
  .outro-card{
    padding: 20px;
  }
}

@media (max-height: 780px){
  .container{
    padding-top: 80px;
    padding-bottom: 44px;
  }
  .hero-grid{
    gap: 32px;
  }
  .hero-mosaic{
    padding: 12px;
  }
  .media-card{
    min-height: clamp(220px, 38vh, 360px);
    max-height: min(50vh, 480px);
  }
  .hero-stats{
    padding: 14px;
    gap: 14px;
  }
  .terminal,
  .right-stack{
    padding: 12px;
  }
  .step{
    padding: 10px;
  }
  .road-card{
    padding: 24px;
  }
  .price-card{
    padding: 14px 14px 12px;
  }
}

@media (max-height: 680px){
  .container{
    padding-top: 64px;
    padding-bottom: 36px;
  }
  .title-xl{
    font-size: clamp(32px, 4vw, 56px);
  }
  .title-lg{
    font-size: clamp(26px, 2.6vw, 38px);
  }
  .sub{
    font-size: clamp(14px, 1.1vw, 16px);
  }
}

@media (max-width: 768px){
  .container{
    padding-top: 96px;
    padding-bottom: 52px;
  }
  .hero-grid{
    gap: 28px;
  }
  .hero-mosaic{
    padding: 14px;
  }
  .mosaic-sim{
    grid-template-columns: 1fr;
  }
  .hero-stats{
    grid-template-columns: 1fr;
  }
  .flow-grid{
    gap: 18px;
  }
  .road-grid{
    gap: 20px;
  }
  .road-card{
    padding: 24px;
  }
  .pricing-grid{
    gap: 16px;
  }
}

@media (max-width: 520px){
  :root{
    --gutter: 14px;
  }
  .hero-quote{
    font-size: 13px;
  }
  .road-card{
    padding: 20px 18px;
  }
  .road-card-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .price-card{
    padding: 14px 14px 12px;
  }
  .outro-card{
    padding: 18px;
  }
}
/* ===========================
   STUDY THEME — CONTRAST PATCH
   (dej na konec CSS)
=========================== */
:root{
  /* trochu tvrdší kontury + stíny */
  --stroke-strong: rgba(15,23,42,.14);
  --shadow-soft: 0 12px 34px rgba(15,23,42,.10);
  --shadow-mid: 0 18px 50px rgba(15,23,42,.14);
  --shadow-hard: 0 26px 70px rgba(15,23,42,.18);

  /* čitelnější text v kartách */
  --text-strong: rgba(15,23,42,.92);
  --text-mid: rgba(15,23,42,.78);
  --text-soft: rgba(15,23,42,.66);

  /* “study” surface vrstvy (aby se neblendingovalo) */
  --surface-1: rgba(255,255,255,.92);
  --surface-2: rgba(255,255,255,.82);
  --surface-3: rgba(255,255,255,.72);

  /* CTA gradient víc “punch” */
  --cta-gradient: linear-gradient(135deg, #22c55e 0%, #86efac 100%);
}

/* --- Globální text čitelnost --- */
p{color: var(--text-mid)}
h1,h2,h3{color: var(--text-strong)}

/* --- NAV: ať je jasně oddělený od pozadí --- */
.nav{
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 44px rgba(15,23,42,.18);
}
.nav-menu a{
  color: rgba(15,23,42,.84);
}
.nav-menu a:hover{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.20);
}

/* --- ZÁKLAD: karty/bloky ať "vystoupí" --- */
.card,
.tile,
.terminal,
.right-stack,
.block,
.price-card,
.road-card,
.outro-card,
.hero-mosaic,
.hero-stats,
.media-card{
  background: var(--surface-2) !important;
  border-color: var(--stroke-strong) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* jemné zvýraznění na hover */
.card:hover,
.tile:hover,
.block:hover,
.price-card:hover,
.road-card:hover,
.media-card:hover{
  box-shadow: var(--shadow-mid) !important;
  transform: translateY(-2px);
}

/* vnitřní text v kartách */
.card p,
.step p,
.block .btm,
.road-card p{
  color: var(--text-mid) !important;
}

/* --- HERO quote: aby byla čitelná i na světlém --- */
.hero-quote{
  background: rgba(255,255,255,.70);
  border-left-color: rgba(34,197,94,.65);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text-mid);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

/* --- Buttons: hlavně TRY IT OUT a CTA --- */
.btn{
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.84) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.14);
}

/* primární tlačítka - více kontrast + outline */
.btn.primary,
.cta{
  background: var(--cta-gradient) !important;
  color: #052e12 !important;
  border: 1px solid rgba(5,150,105,.40) !important;
  box-shadow: 0 18px 48px rgba(34,197,94,.26), 0 0 0 3px rgba(34,197,94,.12);
  font-weight: 950;
}
.btn.primary:hover,
.cta:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 22px 60px rgba(34,197,94,.30), 0 0 0 3px rgba(34,197,94,.16);
}

/* pokud máš "Try it out" jako link/button bez .primary, dej mu class .primary
   nebo sem přidej selektor na konkrétní třídu (např. .try-btn) */

/* --- Pill / chip: aby nebyly washed out --- */
.mosaic-pill,
.pill,
.price-card .chip,
.road-card-badge{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.78) !important;
}

/* --- Progress / active state: ať je jasné co je aktivní --- */
.nav-menu a.is-active{
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.38) !important;
  color: rgba(6,48,20,.95) !important;
}
.road-card.active{
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.34) !important;
  box-shadow: var(--shadow-hard) !important;
}

/* --- HUD: aby byl čitelný --- */
.dots,
.scroll-tip{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 14px 44px rgba(15,23,42,.14) !important;
}
.dotbtn{ background: rgba(15,23,42,.10) !important; }
.dotbtn.active{ background: rgba(34,197,94,.80) !important; }

/* --- Meter/track: více kontrastu --- */
.block .meter,
.road-card-progress-bar-track,
.wave{
  background: rgba(15,23,42,.10) !important;
}
.block .meter i,
.road-card-progress-bar-fill,
.wave i{
  filter: saturate(1.1) contrast(1.05);
}

/* --- Zamezit "blendění" pseudo-glow vrstev na světlém --- */
.media-glow,
.card::before,
.terminal::before,
.right-stack::before,
.hero-mosaic::before,
.road-card::before{
  opacity: .42 !important;
  mix-blend-mode: normal !important;
}

/* --- Pokud někde tlačítka mizí kvůli barvě textu v sekcích --- */
.p-features .btn,
.p-flow .btn,
.p-pricing .btn,
.p-roadmap .btn,
.p-hero .btn{
  color: rgba(15,23,42,.90) !important;
}
/* ===========================
   HERO LAYOUT FIX — mosaic výš, ale pořád u spodku (responsive)
   dej úplně na konec CSS
=========================== */

/* Hero jako flex sloupec: grid nahoře, mozaika se opře o spodek */
.p-hero{
  display:flex !important;
  flex-direction: column;
  min-height: 100vh;
}

/* První hero container (text + video) nech růst přirozeně */
.p-hero > .container.hero-grid{
  flex: 0 0 auto;
  padding-bottom: 0 !important; /* ať zbytečně netlačí dolů */
}

/* Druhý container s mozaikou přitlač dolů + dej mu mezery */
.p-hero > .container.hero-grid + .container{
  margin-top: auto;                         /* drží mozaiku dole */
  padding-top: clamp(8px, 2vh, 18px) !important;
  padding-bottom: clamp(22px, 6vh, 56px) !important; /* mezera POD mozaikou */
}

/* Mozaiku lehce “zvedni” (jemně, viewportově) */
.hero-mosaic.hero-mosaic-wide{
  margin-top: clamp(-18px, -3.2vh, -6px);   /* zvednutí bez fix px */
}
/* ===========================
   MOBILE — komplet ladění pro telefony
=========================== */
@media (max-width: 640px){
  :root{
    --ui-scale: 1; /* na mobilu neškáluj dolů, ať je to čitelné */
    --gutter: 14px;
  }

  header{padding: 10px 12px;}
  .nav{padding: 10px;}

  /* HERO: tlačítka přes celou šířku */
  .btns{
    flex-direction: column;
    align-items: stretch;
  }
  .btns .btn,
  .btns a.btn{
    width: 100%;
    justify-content: center;
  }

  /* HERO: video karta menší, ať se vejde mozaika */
  .media-card{
    min-height: 210px !important;
    max-height: 320px !important;
  }

  /* Stats a mozaika – všechno do jednoho sloupce */
  .hero-stats{
    grid-template-columns: 1fr !important;
  }
  .mosaic-sim{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .tile{
    min-height: auto;
    padding: 14px;
  }

  /* Roadmap grid už máš, ale na mobilu víc dýchej */
  .road-grid{padding: 0 var(--gutter) !important;}
  .road-card{padding: 20px 18px;}

  /* Pricing: lepší čitelnost */
  .price{
    font-size: 38px;
  }

  /* HUD na mobilu často překáží */
  .hud{
    display: none;
  }
}

@media (max-width: 420px){
  .title-xl{
    font-size: clamp(30px, 9vw, 44px);
  }
  .sub{
    font-size: 15px;
  }
  .hero-quote{
    font-size: 13px;
  }
}

/* ===========================
   HERO PIN — jen pro větší obrazovky
   (na mobilech to vypneme, aby se nezvedal top)
=========================== */

/* DEFAULT: vrať HERO do původního chování */
.p-hero{
  display:block !important;
}

/* default: mozaika normálně pod obsahem */
.p-hero > .container.hero-grid + .container{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(18px, 5vh, 48px) !important; /* mezera POD mozaikou */
}
.hero-mosaic.hero-mosaic-wide{
  margin-top: clamp(12px, 2vh, 20px) !important; /* lehká mezera NAD mozaikou */
}

/* PIN režim zapni jen na větších viewportecha (desktop/tablet na šířku) */
@media (min-width: 981px) and (min-height: 760px){
  .p-hero{
    display:flex !important;
    flex-direction: column;
    min-height: 100vh;
  }

  .p-hero > .container.hero-grid{
    flex: 0 0 auto;
    padding-bottom: 0 !important;
  }

  .p-hero > .container.hero-grid + .container{
    margin-top: auto !important; /* drží mozaiku u spodku */
    padding-top: clamp(8px, 2vh, 18px) !important;
    padding-bottom: clamp(22px, 6vh, 56px) !important; /* mezera POD mozaikou */
  }

  /* jemné zvednutí mozaiky jen na desktopu */
  .hero-mosaic.hero-mosaic-wide{
    margin-top: clamp(-18px, -3.2vh, -6px) !important;
  }
}

/* extra pojistka: když je výška malá, pin režim nechceme ani na širším okně */
@media (max-height: 740px){
  .p-hero{
    display:block !important;
  }
  .p-hero > .container.hero-grid + .container{
    margin-top: 0 !important;
  }
  .hero-mosaic.hero-mosaic-wide{
    margin-top: 12px !important;
  }
}
/* ===========================
   HERO MOSAIC LIFT — bez flexu (nezvedá top), responsive
   dej úplně na konec CSS
=========================== */

/* Hero nech normálně (žádný flex pin) */
.p-hero{
  display:block !important;
}

/* druhý container (ten s mozaikou) zvedni směrem k hero obsahu */
.p-hero > .container.hero-grid + .container{
  /* zvednutí mozaiky nahoru, ale responsivně */
  margin-top: clamp(-72px, -10vh, -28px) !important;

  /* mezera POD mozaikou, ať není utopená u spodku panelu */
  padding-top: 0 !important;
  padding-bottom: clamp(22px, 6vh, 56px) !important;
}

/* jistota: mozaika ať má trochu “air” i kdyby paddingy přepsal jiný blok */
.hero-mosaic.hero-mosaic-wide{
  margin-bottom: clamp(10px, 2vh, 18px) !important;
}

/* Když je viewport fakt nízký, uber lift, ať se to nepřekrývá moc */
@media (max-height: 740px){
  .p-hero > .container.hero-grid + .container{
    margin-top: clamp(-44px, -6vh, -18px) !important;
    padding-bottom: clamp(18px, 5vh, 44px) !important;
  }
}

/* Na mobilech (úzkých) drž lift, ale méně agresivní */
@media (max-width: 640px){
  .p-hero > .container.hero-grid + .container{
    margin-top: clamp(-40px, -6vh, -16px) !important;
    padding-bottom: clamp(18px, 5vh, 40px) !important;
  }
}

/* ===========================
   HERO MOSAIC — COMPACT MODE
   zmenšení výšky + méně prázdna dole
=========================== */

/* samotná band-a */
.hero-mosaic.hero-mosaic-wide{
  padding: clamp(14px, 2.2vh, 18px) !important; /* bylo ~20px */
}

/* horní řádek (Live coaching / scroll-driven) */
.mosaic-top{
  margin-bottom: 12px !important; /* bylo víc */
}

/* grid s tiles */
.mosaic-sim{
  gap: 12px !important; /* bylo 16px */
}

/* jednotlivé karty */
.tile{
  padding: 14px !important;        /* bylo 16px */
  min-height: auto !important;     /* zruší zbytečný “stretch” */
}

/* spodní vzduch celé mozaiky */
.p-hero > .container.hero-grid + .container{
  padding-bottom: clamp(16px, 4vh, 32px) !important;
}

/* ještě víc kompaktní na menších výškách */
@media (max-height: 780px){
  .hero-mosaic.hero-mosaic-wide{
    padding: 12px !important;
  }
  .mosaic-sim{
    gap: 10px !important;
  }
  .tile{
    padding: 12px !important;
  }
}