/* ═══════════════════════════════════════════════════════════════════
   SOLVE — v2 "hybrid": light editorial base + one Linear-grade dark theatre.
   Display = Instrument Serif (as the constitution asks) · body Inter · data mono.
   Dark rooms are LAYERED (room → frame → card), never black-on-black.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* light */
  --r-card: 26px;
  --border-card: 1px solid rgba(16,16,16,0.10);
  --shadow-card: 0 1px 2px rgba(16,16,16,0.05), 0 50px 100px -34px rgba(16,16,16,0.20);

  /* dark theatre — layered near-blacks (Linear language) */
  --d-bg:      #0B0C0E;          /* the room */
  --d-frame:   rgba(255,255,255,0.035); /* frame around a card */
  --d-card:    #16181D;          /* a card/panel — clearly lifted off the room */
  --d-card-2:  #1D2027;          /* elevated element inside a card */
  --d-line:    rgba(255,255,255,0.09);
  --d-line-2:  rgba(255,255,255,0.14);
  --d-text:    rgba(255,255,255,0.95);
  --d-mut:     rgba(255,255,255,0.62);
  --d-faint:   rgba(255,255,255,0.42);
  --d-lift:    0 30px 70px -34px rgba(0,0,0,0.85);
}

body { font-family: Inter, -apple-system, "SF Pro Text", system-ui, sans-serif; }
.wrap { max-width: 1240px; padding-left: 48px; padding-right: 48px; }
@media (max-width: 640px) { .wrap { padding-left: 22px; padding-right: 22px; } }

/* serif display voice */
h1, .d-title, .sec-t, .cta-dark h2, .wb-title, .t-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
em { font-style: italic; }

/* ── buttons (pills) ── */
.btn-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform .45s var(--spring), box-shadow .3s ease, background .3s; white-space: nowrap; }
.btn-pill:hover { transform: scale(1.04); }
.btn-pill:active { transform: scale(0.97); }
.btn-pill.dark { background: var(--ink); color: #fff; padding: 13px 26px; font-size: 15.5px; box-shadow: 0 1px 2px rgba(16,16,16,0.04), 0 24px 48px -16px rgba(16,16,16,0.22); }
.btn-pill.white { background: #fff; color: var(--ink); padding: 13px 22px; font-size: 15.5px; font-weight: 500; border: 1px solid rgba(16,16,16,0.10); box-shadow: 0 1px 2px rgba(16,16,16,0.03); }
.btn-pill.blue { background: var(--blue); color: #fff; padding: 9px 17px; font-size: 14px; box-shadow: 0 6px 20px -8px rgba(10,132,255,0.55); }
.btn-pill.ghost { background: transparent; color: #fff; padding: 13px 22px; font-size: 15.5px; font-weight: 500; border: 1px solid rgba(255,255,255,0.25); }
.btn-pill.ghost:hover { border-color: rgba(255,255,255,0.5); }

/* ── nav ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .35s ease, box-shadow .35s ease; }
.nav.scrolled { background: rgba(250,250,250,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--hairline); }
.nav.on-dark { background: rgba(11,12,14,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.nav.on-dark .nav-links a { color: rgba(255,255,255,0.72); }
.nav.on-dark .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav.on-dark .brand, .nav.on-dark .nav-login { color: #fff; }
.nav.on-dark .brand-name em { color: rgba(255,255,255,0.55); }
.nav.on-dark .brand-mark { background: #fff; color: var(--ink); }
.nav.on-dark .nav-mob summary i { background: #fff; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 15px; padding-bottom: 15px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; font-family: "Instrument Serif", serif; font-style: italic; font-size: 20px; line-height: 1; padding-bottom: 2px; }
.brand-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; display: flex; gap: 6px; }
.brand-name em { font-style: normal; color: var(--muted); font-weight: 500; }
.nav-links { display: flex; gap: 3px; }
.nav-links a { text-decoration: none; font-size: 14.5px; color: var(--muted-2); padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-login { text-decoration: none; font-size: 14.5px; color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 430px) { .brand-name em { display: none; } }

/* ── hero ── */
.hero { padding: 168px 0 92px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 42% at 80% -6%, rgba(10,132,255,0.10), transparent 60%),
              radial-gradient(40% 34% at 2% 108%, rgba(182,99,224,0.06), transparent 60%); }
.hero-in { position: relative; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 9px 18px; margin-bottom: 30px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; background: var(--blue-soft); color: var(--blue-text); border: 1px solid rgba(10,132,255,0.16); }
.badge i { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); animation: pip 2.4s ease-in-out infinite; }
@keyframes pip { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.55; } }
h1 { font-size: clamp(52px, 8vw, 108px); line-height: 0.98; letter-spacing: -0.015em; }
h1 em { color: var(--ink); position: relative; }
h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.055em; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: underline .8s var(--ease-out) .7s forwards; }
@keyframes underline { to { transform: scaleX(1); } }
.sub { margin: 26px auto 0; max-width: 560px; font-size: 18px; color: var(--muted-2); line-height: 1.55; }
.hero-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.hero-scroll { display: inline-flex; align-items: center; gap: 8px; margin-top: 54px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-2); text-decoration: none; }
.hero-scroll svg { width: 15px; height: 15px; animation: bob 2.2s ease-in-out infinite; }
.hero-scroll:hover { color: var(--ink); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ═══ THE THEATRE — one recessed dark room ═══ */
.theatre { padding: 0 0 8px; }
.theatre-room { position: relative; margin: 0 16px; background: var(--d-bg); border-radius: 30px; overflow: clip; color: var(--d-text);
  box-shadow: 0 40px 120px -60px rgba(11,12,14,0.9), inset 0 1px 0 rgba(255,255,255,0.05); }
@media (max-width: 640px) { .theatre-room { margin: 0 10px; border-radius: 22px; } }
.theatre-glow { position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  background: radial-gradient(56% 30% at 22% -2%, rgba(10,132,255,0.16), transparent 60%),
              radial-gradient(50% 26% at 92% 4%, rgba(182,99,224,0.08), transparent 62%); }
.theatre-div { position: relative; height: 1px; margin: 0 clamp(24px,6vw,90px); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }

/* dark section heads */
.sec-head { max-width: 720px; }
.kick { display: inline-flex; align-items: center; gap: 9px; font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--d-mut); margin-bottom: 20px; }
.kick i { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 12px rgba(10,132,255,0.9); }
.kick.dark { color: var(--muted-2); }
.kick.dark i { box-shadow: none; }
.d-title { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.01em; }
.d-title .dim { color: var(--d-faint); }
.d-lede { margin-top: 18px; max-width: 540px; font-size: 16.5px; line-height: 1.6; color: var(--d-mut); }

/* ── 1 · stage (interactive demo) ── */
.stage-sec { padding: 96px 0 44px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.stage-sec .wrap { width: 100%; }
.try-head { max-width: none; margin-bottom: 18px; }
.try-head .d-title { font-size: clamp(28px, 3.6vw, 44px); }
.try { margin-top: 0; }
.try-panels { position: relative; height: clamp(440px, 60vh, 560px); }
.try-panel { height: 100%; }
.try-panel.on { display: flex; flex-direction: column; }
.stage-sec .ds-foot { display: none; }
.stage-sec #demo-root { height: 100%; display: flex; }
.stage-sec #demo-root .ds { flex: 1; }
.stage-mount { margin-top: clamp(30px,4vw,46px); }
.ds { position: relative; }
/* scene chips */
.ds { display: flex; flex-direction: column; height: 100%; gap: 14px; }
/* filtri DENTRO la card, in alto */
.ds-stage .ds-filters { position: absolute; z-index: 5; top: 14px; left: 16px; max-width: calc(100% - 190px); display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ds-filter { position: relative; display: inline-flex; align-items: center; gap: 11px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--d-frame); border: 1px solid var(--d-line); color: var(--d-mut); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .35s var(--spring); }
.ds-filter::before { content: ""; width: 30px; height: 30px; border-radius: 999px; background-size: cover; background-position: top center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.ds-filter[data-scene="negotiation"]::before { background-image: url("../../assets/chris_poster.jpg"); }
.ds-filter[data-scene="firing"]::before { background-image: url("../../assets/gabriel_poster.jpg"); }
.ds-filter[data-scene="client"]::before { background-image: url("../../assets/mia_poster.jpg"); }
.ds-filter[data-scene="sales"]::before { background-image: url("../../assets/finn_poster.jpg"); }
.ds-filter:hover { color: #fff; border-color: var(--d-line-2); background: rgba(255,255,255,0.06); }
.ds-filter.on { color: #fff; border-color: rgba(10,132,255,0.6); background: rgba(10,132,255,0.12); box-shadow: 0 0 0 3px rgba(10,132,255,0.14); }
.ds-filter:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* stage — cinematic video with live captions */
.ds-stage { --tint: var(--blue); position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; background: #0d0f13; border: 1px solid var(--d-line); box-shadow: var(--d-lift); }

.ds-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(30px) brightness(0.42) saturate(1.1); transform: scale(1.15); }
.ds-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ds-stage.ds-swap .ds-video { animation: swap .6s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.ds-stage::before { content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 90px; background: linear-gradient(to bottom, rgba(8,8,10,0.72), transparent); pointer-events: none; }
.ds-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8,9,12,0.92) 0%, rgba(8,9,12,0.55) 26%, transparent 52%), linear-gradient(to right, rgba(8,9,12,0.5), transparent 40%); }
.ds-id { display: none; position: absolute; left: 18px; top: 16px; flex-direction: column; gap: 1px; padding: 9px 15px; border-radius: 13px; background: rgba(10,11,14,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.10); }
.ds-who { font-size: 15px; font-weight: 600; color: #fff; }
.ds-role { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.ds-live-dot { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(10,11,14,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.10); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; color: rgba(255,255,255,0.82); }
.ds-live-dot i { width: 7px; height: 7px; border-radius: 999px; background: var(--tint); box-shadow: 0 0 10px var(--tint); animation: pip 1.8s ease-in-out infinite; }
.ds-cap { position: absolute; left: 0; right: 0; bottom: 6%; padding: 0 clamp(20px,3vw,36px); z-index: 3; }
.ds-stage::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(8,9,12,0.82), transparent); pointer-events: none; }
.ds-play { position: absolute; z-index: 6; left: 50%; top: 44%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.ds-play .pl-btn { width: 76px; height: 76px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6); transition: transform .4s var(--spring), background .3s; }
.ds-play .pl-btn::after { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.ds-play:hover .pl-btn { transform: scale(1.08); background: rgba(255,255,255,0.22); }
.ds-play .pl-lbl { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.ds-play.off { pointer-events: none; }
.ds-play.off .pl-lbl { color: rgba(255,255,255,0.6); }
.ds-cap-tag { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 7px; min-height: 1em; }
.ds-cap-text { font-size: clamp(17px, 2.1vw, 25px); font-weight: 500; line-height: 1.4; color: #fff; max-width: 24em; min-height: 1.4em; letter-spacing: -0.01em; }
.ds-wave { position: absolute; right: clamp(20px,3vw,36px); bottom: clamp(20px,3vw,30px); display: flex; gap: 3px; align-items: flex-end; height: 18px; opacity: 0.9; }
.ds-wave i { width: 3px; border-radius: 2px; background: var(--tint); animation: wave 1s ease-in-out infinite; }
.ds-wave i:nth-child(1){height:40%} .ds-wave i:nth-child(2){height:90%;animation-delay:.12s} .ds-wave i:nth-child(3){height:60%;animation-delay:.24s} .ds-wave i:nth-child(4){height:100%;animation-delay:.36s} .ds-wave i:nth-child(5){height:50%;animation-delay:.48s}
@keyframes wave { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.ds-stage[data-speaker="you"] .ds-wave i { background: #7dbcff; }
.ds-stage[data-speaker="pause"] .ds-wave i { animation-play-state: paused; transform: scaleY(0.28); }
/* foot */
.ds-foot { flex: 0 0 auto; margin-top: 14px; display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.ds-replay { font-size: 13.5px; font-weight: 600; color: var(--d-mut); padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: all .3s; }
.ds-replay:hover { color: #fff; background: rgba(255,255,255,0.07); }
.ds-live { display: inline-flex; align-items: center; border-radius: 999px; background: var(--blue); color: #fff; padding: 11px 22px; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px -8px rgba(10,132,255,0.55); transition: transform .45s var(--spring); }
.ds-live:hover { transform: scale(1.04); }
.ds-live.off { background: rgba(255,255,255,0.08); color: var(--d-faint); box-shadow: none; cursor: not-allowed; }
.ds-live-note { font-size: 12.5px; color: var(--d-mut); margin-left: auto; }
.ds-live-note.ok { color: #7ede9b; font-weight: 600; }

/* ── 2 · how it works carousel ── */
.how { padding: clamp(56px,7vw,88px) 0 clamp(60px,7vw,96px); }
.carousel { margin-top: clamp(32px,4vw,48px); position: relative; }
.c-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 720px) { .c-tabs { grid-template-columns: 1fr; gap: 8px; } }
.c-tab { position: relative; text-align: left; padding: 15px 18px 16px; border-radius: 16px; background: var(--d-frame); border: 1px solid var(--d-line); cursor: pointer; transition: all .35s var(--ease-out); overflow: hidden; }
.c-tab:hover { background: rgba(255,255,255,0.06); }
.c-tab-n { display: block; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--d-faint); }
.c-tab-l { display: block; margin-top: 5px; font-size: 15.5px; font-weight: 600; color: var(--d-mut); letter-spacing: -0.01em; }
.c-tab.on { background: rgba(255,255,255,0.07); border-color: var(--d-line-2); }
.c-tab.on .c-tab-l { color: #fff; }
.c-tab.on .c-tab-n { color: var(--blue); }
.c-tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.08); }
.c-tab-bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.c-tab.on .c-tab-bar i { width: 100%; transition: width var(--autodur, 8s) linear; }
.c-tab.paused .c-tab-bar i { transition: none; }
@media (max-width: 720px) { .c-tab-bar { top: 0; bottom: auto; } }

.c-viewport { overflow: hidden; border-radius: 24px; }
.c-track { display: flex; transition: transform .6s var(--spring); will-change: transform; align-items: flex-start; overflow: visible; }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,4vw,56px); align-items: center; padding: 4px; }
@media (max-width: 900px) { .slide { grid-template-columns: 1fr; gap: 26px; } }
.slide-copy h3 { font-size: clamp(24px,2.6vw,34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.slide-copy p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--d-mut); max-width: 30em; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--d-text); }
.ticks i { width: 8px; height: 8px; border-radius: 999px; background: var(--c); flex: 0 0 auto; box-shadow: 0 0 10px -1px var(--c); }

/* the viz card — lifted off the room */
.viz { position: relative; border-radius: 20px; background: var(--d-card); border: 1px solid var(--d-line); padding: clamp(22px,2.6vw,30px); box-shadow: var(--d-lift);
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 26px 26px; }
.viz::before { content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; pointer-events: none; opacity: 0.6;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.viz-k { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; color: var(--d-faint); margin-bottom: 20px; }
.viz-k i { width: 7px; height: 7px; border-radius: 999px; }
.viz[data-glow="blue"] .viz-k i { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.viz[data-glow="green"] .viz-k i { background: var(--green); box-shadow: 0 0 10px var(--green); }
.viz[data-glow="amber"] .viz-k i { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.viz-foot { margin-top: 16px; font-size: 12.5px; color: var(--d-faint); font-family: ui-monospace, monospace; letter-spacing: 0.02em; }

/* persona quadrant */
.pq { position: relative; aspect-ratio: 16/8.6; border: 1px solid var(--d-line); border-radius: 14px; background:
  linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) 50% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) 0 50%/100% 1px no-repeat,
  radial-gradient(60% 80% at 50% 50%, rgba(10,132,255,0.05), transparent 70%); }
.pq-ax { position: absolute; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--d-faint); }
.pq-ax.top { top: 8px; left: 50%; transform: translateX(-50%); }
.pq-ax.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.pq-ax.left { left: 10px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.pq-ax.right { right: 10px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.pq-p { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); text-align: center; max-width: 190px; transition: transform .35s var(--spring); }
.pq-p b { display: block; color: #fff; font-size: 13.5px; letter-spacing: -0.01em; }
.pq-p span { display: block; color: var(--d-faint); font-size: 10.5px; line-height: 1.35; margin-top: 3px; }
.pq-p:hover { transform: translate(-50%,-50%) scale(1.05); }
.pq-marker { position: absolute; width: 16px; height: 16px; animation: pqDrift 8s ease-in-out infinite alternate; }
.pq-marker i { position: absolute; inset: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.16), 0 0 20px rgba(255,255,255,0.4); }
.pq-marker::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.4); animation: ring 2.6s var(--ease-out) infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
@keyframes pqDrift { 0% { left: 33%; top: 32%; } 50% { left: 42%; top: 42%; } 100% { left: 30%; top: 28%; } }

/* zopa whiteboard */
.wb-title { font-size: clamp(20px,2.1vw,26px); color: #fff; letter-spacing: -0.01em; margin-bottom: 22px; }
.wb { display: flex; flex-direction: column; gap: 16px; }
.wb-row { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 12px; }
.wb-row.shift { padding-left: 16%; }
.wb-cap { font-family: ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--d-faint); text-transform: uppercase; line-height: 1.35; }
.wb-cap.r { text-align: right; }
.wb-bar { position: relative; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transform-origin: left; }
.armed .wb-bar { transform: scaleX(0); }
.armed.in .wb-bar { animation: wbDraw .9s var(--ease-out) forwards; }
.armed.in .wb-row.shift .wb-bar { animation-delay: .22s; }
@keyframes wbDraw { to { transform: scaleX(1); } }
.wb-bar.teal { background: rgba(46,200,200,0.18); border: 1px solid #2ec8c8; border-left-width: 4px; }
.wb-bar.red { background: rgba(240,85,77,0.16); border: 1px solid #f0554d; border-right-width: 4px; }
.wb-chip { font-family: ui-monospace, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 6px; border: 1px solid currentColor; }
.wb-bar.teal .wb-chip { color: #7fe3e3; }
.wb-bar.red .wb-chip { color: #ff9d97; }
.wb-zone { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 16% 0 25%; color: #7ede9b; }
.armed .wb-zone { opacity: 0; }
.armed.in .wb-zone { animation: fadeUp .6s var(--ease-out) .85s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wb-zone i { font-style: normal; opacity: 0.7; }
.wb-zone span { font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; border: 1px solid #34c759; border-radius: 7px; padding: 6px 13px; background: rgba(52,199,89,0.12); }

/* team dashboard */
.td-stats { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.td-stats span { display: flex; align-items: baseline; gap: 8px; background: var(--d-card-2); border: 1px solid var(--d-line); border-radius: 12px; padding: 10px 15px; color: var(--d-mut); font-size: 12px; }
.td-stats b { color: #fff; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.td-stats .hi b { color: #6db6ff; }
.td-rows, .td-weak { display: flex; flex-direction: column; gap: 10px; }
.td-weak { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--d-line); }
.td-row, .td-wk { display: grid; grid-template-columns: 108px 66px 1fr 32px; align-items: center; gap: 12px; }
.td-wk { grid-template-columns: 150px 1fr 32px; }
.td-row > span, .td-wk > span { color: #fff; font-size: 13px; font-weight: 500; }
.td-row em { font-style: normal; color: var(--d-faint); font-size: 11px; font-family: ui-monospace, monospace; }
.td-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; }
.td-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--c, var(--blue)); transition: width 1s var(--ease-out) .2s; }
.in .td-bar i { width: var(--w); }
.td-row b, .td-wk b { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: #6db6ff; }
.td-row b.up::after { content: " ↑"; color: #7ede9b; font-size: 10px; }
.td-row b.dn { color: #ffd66b; } .td-row b.dn::after { content: " ↓"; font-size: 10px; }
.td-heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 16px; }
.td-heat-k { display: flex; justify-content: space-between; margin-top: 9px; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--d-faint); }
.td-heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,0.07); }
.td-heat i.h1 { background: rgba(255,122,60,0.4); } .td-heat i.h2 { background: rgba(255,122,60,0.75); }
.armed .td-heat i { opacity: 0; }
.armed.in .td-heat i { animation: fadeUp .4s var(--ease-out) forwards; animation-delay: calc(var(--d) * 12ms); }

/* carousel controls */
.c-ctrl { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.c-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--d-frame); border: 1px solid var(--d-line); color: #fff; cursor: pointer; transition: all .3s; }
.c-arrow svg { width: 20px; height: 20px; }
.c-arrow:hover { background: rgba(255,255,255,0.10); border-color: var(--d-line-2); transform: scale(1.06); }
.c-arrow:active { transform: scale(0.95); }
.c-dots { display: flex; gap: 9px; }
.c-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.22); cursor: pointer; transition: all .3s; padding: 0; }
.c-dot:hover { background: rgba(255,255,255,0.4); }
.c-dot.on { background: var(--blue); width: 26px; box-shadow: 0 0 12px rgba(10,132,255,0.7); }

/* ═══ back to LIGHT — use cases ═══ */
.sec-head.light { margin: 0 auto; text-align: center; max-width: 720px; }
.sec-t { font-size: clamp(32px, 4vw, 52px); font-weight: 400; letter-spacing: -0.005em; line-height: 1.04; }
.sec-t .gray { color: var(--muted); }

.cases { padding: clamp(80px,9vw,120px) 0 clamp(64px,7vw,96px); }
.uc-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.uc-card { background: #fff; border: var(--border-card); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 1px 2px rgba(16,16,16,0.05), 0 24px 48px -22px rgba(16,16,16,0.12); transition: transform .4s var(--ease-out), box-shadow .35s; }
.uc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.uc-media { aspect-ratio: 16/10.5; overflow: hidden; background: var(--d-bg); position: relative; padding: 18px;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 26px 26px; }
.ucm-lesson { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.ul-video { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/3.6; }
.ul-video img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ul-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--green); animation: pip 2s ease-in-out infinite; }
.ul-slide { border-radius: 12px; border: 1px solid rgba(182,99,224,0.5); background: rgba(182,99,224,0.10); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 0 30px -8px rgba(182,99,224,0.4); }
.ul-slide p { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ul-slide em { font-style: italic; color: #d9a8f0; }
.ul-author { display: block; color: rgba(255,255,255,0.45); font-size: 10px; margin-top: 6px; }
.ul-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,0.55); font-size: 10.5px; margin-top: 10px; }
.ul-beats { display: flex; gap: 4px; }
.ul-beats i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); }
.ul-beats i.on { background: #b663e0; }
.ucm-ask { margin-top: 12px; color: rgba(255,255,255,0.85); font-size: 12.5px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 9px 14px; }
.ucm-ask em { font-style: normal; color: rgba(255,255,255,0.5); }
.ucm-chat { display: flex; flex-direction: column; gap: 10px; justify-content: center; height: 100%; }
.uc-bub { max-width: 88%; border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.4; color: #fff; }
.uc-bub b { display: block; font-size: 9.5px; letter-spacing: 0.13em; margin-bottom: 3px; opacity: 0.75; }
.uc-bub.them { align-self: flex-start; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); border-bottom-left-radius: 4px; }
.uc-bub.you { align-self: flex-end; background: rgba(10,132,255,0.2); border: 1px solid rgba(10,132,255,0.45); border-bottom-right-radius: 4px; }
.uc-sil { align-self: center; color: #7ede9b; font-size: 11px; letter-spacing: 0.08em; }
.ucm-paste { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: center; }
.up-box { border: 1px dashed rgba(255,255,255,0.28); border-radius: 12px; padding: 12px 14px; min-height: 58px; color: rgba(255,255,255,0.8); font-size: 12.5px; line-height: 1.5; }
.up-caret { display: inline-block; width: 1.5px; height: 14px; background: #fff; margin-left: 2px; vertical-align: text-bottom; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.up-cta { align-self: flex-start; background: #8b5cf6; color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(139,92,246,0.7); }
.up-cta em { font-style: normal; opacity: 0.75; font-weight: 500; }
.up-out { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.65); font-size: 11.5px; }
.up-out i { width: 7px; height: 7px; border-radius: 999px; background: var(--green); }
.uc-body { padding: 22px 24px 26px; position: relative; }
.uc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--blue-soft, rgba(10,132,255,.08)); border: 1px solid rgba(10,132,255,.18); color: var(--blue); margin-bottom: 12px; }
.uc-ico svg { width: 24px; height: 24px; }
.uc-body h3 { margin-top: 20px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.uc-body p { margin-top: 8px; font-size: 14.5px; color: var(--muted-2); line-height: 1.55; }

/* characters */
.people { padding: clamp(70px,8vw,100px) 0 clamp(64px,7vw,88px); }
.people .sec-head { margin-bottom: 36px; }
.pstrip { display: flex; gap: 18px; padding: 6px clamp(22px,4vw,48px) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pstrip::-webkit-scrollbar { display: none; }
.pcard { position: relative; margin: 0; flex: 0 0 clamp(238px,24vw,320px); aspect-ratio: 3/3.7; border-radius: 22px; overflow: hidden; background: #111; border: var(--border-card); box-shadow: 0 1px 2px rgba(16,16,16,0.05), 0 24px 48px -22px rgba(16,16,16,0.14); scroll-snap-align: center; transition: transform .35s var(--ease-out), box-shadow .35s; }
.pcard video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 15px; background: linear-gradient(to top, rgba(10,10,12,0.78), rgba(10,10,12,0) 92%); color: #fff; display: flex; flex-direction: column; gap: 3px; }
.pcard strong { font-size: 15.5px; }
.pcard figcaption span { font-size: 12px; opacity: 0.82; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }

/* faq */
.faq { padding: clamp(70px,8vw,100px) 0; background: var(--bg-2); border-top: 1px solid var(--hairline); }
.faq-wrap { max-width: 800px; }
.faq .sec-head { margin-bottom: 40px; }
.faq-list { display: flex; flex-direction: column; background: #fff; border: var(--border-card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { background: var(--bg-soft); }
.faq-list summary i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--bg-soft); position: relative; transition: transform .4s var(--spring), background .3s; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--muted-2); border-radius: 2px; }
.faq-list summary i::before { width: 10px; height: 2px; }
.faq-list summary i::after { width: 2px; height: 10px; transition: transform .3s; }
.faq-list details[open] summary i { transform: rotate(180deg); background: var(--blue-soft); }
.faq-list details[open] summary i::after { transform: scaleY(0); }
.faq-list details p { padding: 0 24px 22px; font-size: 14.5px; color: var(--muted-2); max-width: 64ch; line-height: 1.6; }

/* ═══ KEPT verbatim from v1: book / cta / footer ═══ */
.book { padding: 100px 0 110px; background: var(--bg-2); border-top: 1px solid var(--hairline); }
.book-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.book-head p { margin-top: 16px; color: var(--muted-2); }
.book-form { max-width: 680px; margin: 0 auto; background: #fff; border: var(--border-card); border-radius: var(--r-card); padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); }
.book-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.book-form .opt { font-weight: 400; color: var(--muted-2); }
.book-form select { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--hairline-2); border-radius: 12px; padding: 12px 14px; outline: none; appearance: auto; }
.book-form select:focus { border-color: var(--blue); }
.book-form label b { color: var(--coral-text); font-weight: 600; }
.book-form input, .book-form textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--hairline-2); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .25s, box-shadow .25s; resize: vertical; }
.book-form input::placeholder, .book-form textarea::placeholder { color: #6e6e73; }
.book-form input:focus, .book-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,0.14); }
.book-form .is-missing { border-color: var(--coral); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.req-btn { margin-top: 8px; width: 100%; border-radius: 999px; background: var(--ink); color: #fff; padding: 16px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .45s var(--spring), box-shadow .3s; box-shadow: 0 24px 48px -16px rgba(16,16,16,0.25); }
.req-btn:hover { transform: scale(1.02); }
.req-btn:active { transform: scale(0.98); }
.priv-note { font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 2px; }
.form-note { font-size: 13.5px; min-height: 1.2em; color: var(--muted-2); text-align: center; }
.form-note.ok { color: var(--green-text); font-weight: 600; }
.form-note.err { color: var(--coral-text); font-weight: 600; }

.cta-dark { background: var(--d-bg); color: #fff; padding: 130px 0; position: relative; overflow: hidden; text-align: center; }
.cta-dark::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(38% 44% at 55% 45%, rgba(10,132,255,0.2), transparent 65%); }
.cta-in { position: relative; }
.cta-dark h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.cta-dark .dim { color: rgba(255,255,255,0.5); }
.cta-dark p { margin: 22px auto 0; max-width: 560px; font-size: 16.5px; color: rgba(255,255,255,0.72); line-height: 1.55; }
.cta-btns { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }

.foot { background: var(--d-bg); color: rgba(255,255,255,0.75); padding: 56px 0 30px; border-top: 1px solid rgba(255,255,255,0.09); }
.foot-in { display: flex; flex-direction: column; gap: 40px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.foot-cols h4 { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.58); margin-bottom: 12px; }
.foot-cols a { display: block; text-decoration: none; font-size: 14px; padding: 4px 0; color: rgba(255,255,255,0.75); transition: color .2s; }
.foot-cols a:hover { color: #fff; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; }
.foot-fine { font-size: 12.5px; color: rgba(255,255,255,0.58); }

/* entry reveal for light sections — gated behind .js-anim so content is
   ALWAYS visible without JS; a fallback timer also force-reveals. */
.js-anim .reveal { opacity: 0; transform: translateY(24px); }
.js-anim .reveal.in { animation: rise .8s var(--ease-out) forwards; }

/* ═══ hero background (elegant, animated) ═══ */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-in { position: relative; z-index: 2; }
.hero-aurora { position: absolute; inset: -25%; opacity: 0.8; filter: blur(46px);
  background:
    radial-gradient(28% 40% at 24% 30%, rgba(10,132,255,0.16), transparent 60%),
    radial-gradient(26% 38% at 78% 26%, rgba(182,99,224,0.12), transparent 62%),
    radial-gradient(30% 42% at 60% 78%, rgba(10,132,255,0.08), transparent 60%);
  animation: aurora 22s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(-2%,-1%,0) scale(1); } 100% { transform: translate3d(3%,2%,0) scale(1.08); } }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; }
.hf-n { fill: rgba(16,16,16,0.22); animation: nodepulse 4s ease-in-out infinite; }
.hf-n:nth-child(2){animation-delay:.6s}.hf-n:nth-child(3){animation-delay:1.2s}.hf-n:nth-child(4){animation-delay:1.8s}
.hf-you { fill: #0a84ff; filter: drop-shadow(0 0 8px rgba(10,132,255,0.8)); animation: youfloat 7s ease-in-out infinite alternate; }
.hf-link { animation: linkpulse 5s ease-in-out infinite; }
@keyframes nodepulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes linkpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes youfloat { 0% { transform: translate(0,0); } 100% { transform: translate(14px,-10px); } }
.hero-spot { position: absolute; width: 640px; height: 640px; left: var(--mx, 68%); top: var(--my, 12%); transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(10,132,255,0.10), transparent 70%); opacity: 0; transition: opacity .5s; }
.hero:hover .hero-spot { opacity: 1; }
.hero-rehearse { display: inline-flex; align-items: center; gap: 9px; margin-top: 46px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--hairline-2); backdrop-filter: blur(6px);
  font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--muted-2);
  }
.hr-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 10px rgba(52,199,89,0.8); }
.hr-word { color: var(--ink); font-weight: 600; transition: opacity .3s; }
.hr-word.swap { opacity: 0; }

/* ═══ try it: practice / learn toggle ═══ */
.try { margin-top: clamp(30px,4vw,44px); }
.try-tabs.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 5px; margin: 0 0 16px; background: var(--d-frame); border: 1px solid var(--d-line); border-radius: 999px; width: min(340px, 100%); }
.seg-thumb { position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: calc(100% - 10px); border-radius: 999px; background: rgba(10,132,255,0.16); border: 1px solid rgba(10,132,255,0.5); box-shadow: 0 0 0 3px rgba(10,132,255,0.10); transition: transform .4s var(--spring); }
.try-tabs.seg.learn .seg-thumb { transform: translateX(100%); }
.try-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border: 0; background: none; border-radius: 999px; color: var(--d-mut); font-size: 14px; font-weight: 600; cursor: pointer; transition: color .3s; }
.try-tab svg { width: 16px; height: 16px; }
.tt-txt { display: flex; flex-direction: column; }
.tt-txt b { font-size: 15.5px; color: var(--d-mut); font-weight: 600; }
.tt-txt em { font-style: normal; font-size: 12.5px; color: var(--d-faint); }
.try-tab:hover { color: #fff; }
.try-tab.on { color: #fff; }
.try-panel[hidden] { display: none; }
.try-upload { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px 20px; border-radius: 16px; background: var(--d-frame); border: 1px dashed var(--d-line-2); }
.tu-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.05); color: var(--d-mut); flex: 0 0 auto; }
.tu-ic svg { width: 20px; height: 20px; }
.try-upload p { font-size: 14px; color: var(--d-mut); line-height: 1.5; }
.try-upload b { color: #fff; font-weight: 600; }
/* learn panel */
.lesson { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 16px; }
@media (max-width: 720px) { .lesson { grid-template-columns: 1fr; } }
.lesson-video { position: relative; border-radius: 18px; overflow: hidden; min-height: 0; background: #0d0f13; border: 1px solid var(--d-line); }
.lv-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.lv-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,0.85), transparent 46%); }
.lv-badge { position: absolute; left: 13px; top: 13px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(10,11,14,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); font-family: ui-monospace, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }
.lv-badge i { width: 6px; height: 6px; border-radius: 999px; background: #b663e0; box-shadow: 0 0 8px #b663e0; animation: pip 2s ease-in-out infinite; }
.lv-say { position: absolute; left: 15px; right: 15px; bottom: 13px; color: #fff; font-size: 13.5px; font-weight: 500; font-style: italic; line-height: 1.4; }
.learn-filters { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.learn-filters::-webkit-scrollbar { display: none; }
.lf { padding: 6px 12px; border-radius: 999px; background: rgba(10,11,14,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .3s; white-space: nowrap; }
.lf:hover { color: #fff; }
.lf.on { color: #fff; border-color: rgba(10,132,255,0.6); background: rgba(10,132,255,0.22); }
.lesson-video .lv-badge { top: auto; bottom: 44px; }
.lesson-board { position: relative; border-radius: 18px; background: var(--d-card); border: 1px solid var(--d-line); padding: 22px 24px; box-shadow: var(--d-lift); display: flex; flex-direction: column; }
.lb-k { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--d-faint); }
.lb-k i { width: 6px; height: 6px; border-radius: 999px; background: #b663e0; }
.lb-slides { position: relative; margin: 16px 0; min-height: 132px; }
.lb-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; }
.lb-slide.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.lb-slide h4 { font-size: clamp(18px,2vw,22px); font-weight: 600; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
.lb-slide p { margin-top: 10px; font-size: 14.5px; color: var(--d-mut); line-height: 1.55; }
.lb-beats { display: flex; gap: 5px; margin-top: auto; }
.lb-beats i { width: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background .3s; }
.lb-beats i.on { background: #b663e0; }
.lb-ask { margin-top: 16px; font-size: 12.5px; color: var(--d-mut); background: rgba(255,255,255,0.05); border: 1px solid var(--d-line); border-radius: 999px; padding: 9px 14px; }
.lb-ask em { font-style: normal; color: var(--d-faint); }

/* ═══ carousel: arrows between the step tabs ═══ */
@media (min-width: 721px) {
  .c-tabs { position: relative; }
  .c-tab:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -9px; width: 8px; height: 8px; border-top: 2px solid var(--d-line-2); border-right: 2px solid var(--d-line-2); transform: translateY(-50%) rotate(45deg); z-index: 3; }
  .c-tab:nth-child(2)::after { animation-delay: .3s; }
}
@keyframes arrowNudge { 0%,100% { transform: translateY(-50%) rotate(45deg) translate(0,0); opacity: .5; } 50% { transform: translateY(-50%) rotate(45deg) translate(2px,-2px); opacity: 1; } }

/* ═══ scenario picker (how-it-works step 1) ═══ */
.viz.picker { display: flex; flex-direction: column; }
.pick-mode { position: relative; display: inline-flex; align-self: flex-start; background: var(--d-card-2); border: 1px solid var(--d-line); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.pm { position: relative; z-index: 1; padding: 8px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--d-mut); cursor: pointer; transition: color .3s; }
.pm.on { color: #fff; }
.pm-thumb { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: calc(50% - 4px); background: var(--blue); border-radius: 999px; box-shadow: 0 4px 14px -4px rgba(10,132,255,0.6); transition: transform .35s var(--spring); }
.pick-mode.learn .pm-thumb { transform: translateX(100%); }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--d-card-2); border: 1px solid var(--d-line); cursor: pointer; text-align: left; transition: all .25s var(--ease-out); }
.pk-av { width: 34px; height: 34px; border-radius: 10px; background-size: cover; background-position: top center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.pick[data-thumb="chris"] .pk-av { background-image: url("../../assets/chris_poster.jpg"); }
.pick[data-thumb="gabriel"] .pk-av { background-image: url("../../assets/gabriel_poster.jpg"); }
.pick[data-thumb="mia"] .pk-av { background-image: url("../../assets/mia_poster.jpg"); }
.pick[data-thumb="finn"] .pk-av { background-image: url("../../assets/finn_poster.jpg"); }
.pk-tx { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pk-tx b { font-size: 14px; color: #fff; font-weight: 600; }
.pk-tx em { font-style: normal; font-size: 11.5px; color: var(--d-faint); }
.pk-check { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--d-line-2); flex: 0 0 auto; position: relative; transition: all .25s; }
.pick:hover { background: rgba(255,255,255,0.06); }
.pick.on { border-color: rgba(10,132,255,0.6); background: rgba(10,132,255,0.10); box-shadow: 0 0 0 2px rgba(10,132,255,0.14); }
.pick.on .pk-check { background: var(--blue); border-color: var(--blue); }
.pick.on .pk-check::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
.pick-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 16px; padding: 11px 20px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px -8px rgba(10,132,255,0.55); transition: transform .3s var(--spring); }
.pick-go:hover { transform: scale(1.03); }
.pick-go svg { width: 16px; height: 16px; }

/* ═══ read yourself: radar report ═══ */
.viz.report { }
.rp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.rp-badge { position: relative; width: 48px; height: 48px; flex: 0 0 auto; }
.rp-badge svg { width: 48px; height: 48px; }
.rp-badge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #fff; }
.viz.report.in .rp-ring { animation: ringdraw 1s var(--ease-out) both; }
@keyframes ringdraw { from { stroke-dashoffset: 132; } to { stroke-dashoffset: 40; } }
.rp-lv strong { display: block; font-size: 16px; color: #fff; font-weight: 600; letter-spacing: -0.01em; }
.rp-lv span { font-size: 12.5px; color: var(--d-faint); }
.radar-wrap { display: flex; justify-content: center; margin: 2px 0 6px; }
.radar { width: 100%; max-width: 330px; height: auto; overflow: visible; }
.radar-poly { transform-origin: 160px 140px; }
.viz.report.in .radar-poly { animation: radarIn .85s var(--ease-out) both; }
@keyframes radarIn { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
.radar-dots circle { opacity: 0; }
.viz.report.in .radar-dots circle { animation: dotpop .4s var(--ease-out) forwards .55s; }
@keyframes dotpop { from { opacity: 0; } to { opacity: 1; } }
.rp-dims { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--d-line); }
.rp-dim { display: grid; grid-template-columns: 1fr auto auto 32px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--d-line); }
.rp-n { font-size: 13px; color: #fff; font-weight: 500; }
.rp-seg { display: flex; gap: 3px; }
.rp-seg i { width: 15px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.rp-seg[data-fill="1"] i:nth-child(1), .rp-seg[data-fill="2"] i:nth-child(-n+2), .rp-seg[data-fill="3"] i { background: #30D158; }
.rp-st { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-align: right; }
.rp-st.solid { color: #30D158; }
.rp-st.grow { color: #e8b64a; }
.rp-dim b { font-size: 13px; font-weight: 700; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.rp-team { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; font-size: 12px; color: var(--d-mut); }
.rp-team b { color: #fff; font-variant-numeric: tabular-nums; }
.rp-team .hi b { color: #6db6ff; }

/* ═══ use-case media: learning slide + practice mini-stage ═══ */
.trn { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: center; }
.trn-slide { border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); padding: 14px 16px; }
.trn-k { display: inline-flex; align-items: center; gap: 7px; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); }
.trn-k i { width: 6px; height: 6px; border-radius: 999px; background: #b663e0; }
.trn-slide h5 { margin-top: 8px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.trn-diagram { margin-top: 13px; }
.trn-anchor { font-family: ui-monospace, monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: #c9b4f2; }
.trn-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); margin-top: 5px; }
.trn-fill { position: absolute; left: 0; top: 0; height: 100%; width: 64%; border-radius: 4px; background: linear-gradient(90deg, #8b5cf6, rgba(139,92,246,0.35)); }
.trn-pin { position: absolute; left: 64%; top: 50%; width: 11px; height: 11px; border-radius: 999px; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 0 3px rgba(139,92,246,0.45); }
.trn-scale { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9px; color: rgba(255,255,255,0.45); }
.trn-beats { display: flex; align-items: center; gap: 4px; margin-top: 13px; }
.trn-beats i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); }
.trn-beats i.on { background: #b663e0; }
.trn-beats em { font-style: normal; margin-left: auto; font-size: 10px; color: rgba(255,255,255,0.5); font-family: ui-monospace, monospace; }
.trn-coach { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 6px 14px 6px 6px; }
.trn-coach img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; object-position: top center; }
.trn-coach span { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.trn-coach b { color: #fff; font-weight: 600; }

.uc-media > .pcp { position: absolute; inset: 0; border-radius: 0; overflow: hidden; background: #0d0f13; }
.pcp-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pcp-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,0.9), transparent 55%); }
.pcp-tag { position: absolute; left: 13px; top: 13px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(10,11,14,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }
.pcp-tag i { width: 6px; height: 6px; border-radius: 999px; background: #f0554d; box-shadow: 0 0 8px #f0554d; animation: pip 1.8s ease-in-out infinite; }
.pcp-wave { position: absolute; right: 14px; top: 15px; display: flex; gap: 3px; align-items: flex-end; height: 15px; }
.pcp-wave i { width: 3px; border-radius: 2px; background: #f0554d; animation: wave 1s ease-in-out infinite; }
.pcp-wave i:nth-child(1){height:40%}.pcp-wave i:nth-child(2){height:85%;animation-delay:.1s}.pcp-wave i:nth-child(3){height:60%;animation-delay:.2s}.pcp-wave i:nth-child(4){height:100%;animation-delay:.3s}.pcp-wave i:nth-child(5){height:50%;animation-delay:.4s}
.pcp-cap { position: absolute; left: 15px; right: 15px; bottom: 13px; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.pcp-cap em { display: block; font-style: normal; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: 0.13em; color: rgba(255,255,255,0.6); margin-bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
  h1, .sub, .hero-ctas, .hero-scroll, .hero-rehearse { animation: none !important; opacity: 1 !important; transform: none !important; }
  h1 em::after { animation: none; transform: scaleX(1); }
  .c-track { transition: none; }
  .hero-aurora, .hf-you, .hf-n, .hf-link, .c-tab::after, .pcp-wave i { animation: none !important; }
  .radar-poly, .radar-dots circle, .rp-ring { animation: none !important; opacity: 1 !important; transform: none !important; }
  .rp-ring { stroke-dashoffset: 40 !important; }
}

.faq-list details[open] p { animation: rise .35s var(--ease-out); }
/* Learn panel compatto come lo stage */
.stage-sec .lesson { height: 100%; }

/* ══ v3 — card Learning rifatta: la lezione dal vivo in miniatura ══ */
.lrn { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 10px; }
.lrn-top { flex: 1; display: grid; grid-template-columns: 86px 1fr; gap: 10px; min-height: 0; }
.lrn-vidbox { position: relative; border-radius: 12px; overflow: hidden; background: #16161a; }
.lrn-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lrn-live { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--green, #34c759); animation: pip 2s ease-in-out infinite; }
.lrn-slide { border-radius: 12px; border: 1px solid rgba(182, 99, 224, .5); background: rgba(182, 99, 224, .08); box-shadow: 0 0 24px -8px rgba(182, 99, 224, .4); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.lrn-slide p { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.42; }
.lrn-slide em { font-style: italic; color: #d9a8f0; }
.lrn-beats { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.lrn-beats i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.lrn-beats i.on { background: #b663e0; }
.lrn-beats em { margin-left: auto; font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .55); font-family: var(--mono, ui-monospace); letter-spacing: .08em; }
.lrn-ask { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .88); font-size: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 8px 13px; }
.lrn-ask b { color: #fff; }
.lrn-ask em { font-style: normal; color: rgba(255, 255, 255, .5); margin-left: auto; }

/* ══ v3 — motion (GSAP misura, non spettacolo) ══ */
.magnetic { will-change: transform; }
.theatre-room, .cta-dark { will-change: transform; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ══ 3 · How it works in CHIARO (le card prodotto restano scure: contrasto) ══ */
.how.light { background: var(--bg); padding: 110px 0; }
.how.light .sec-head, .how.light .sec-t { color: var(--ink); }
.how.light .sec-head .kick { color: var(--blue-text, #0064d2); }
.how.light .c-tab { background: #fff; border: 1px solid rgba(16,16,16,.12); color: var(--muted-2); }
.how.light .c-tab.on { color: var(--ink); border-color: rgba(16,16,16,.35); background: #fff; }
.how.light .c-tab:not(:last-child)::after { border-color: rgba(16,16,16,.25); }
.how.light .c-arrow { border: 1px solid rgba(16,16,16,.15); color: var(--ink-2); background: #fff; }
.how.light .c-arrow:hover { border-color: rgba(16,16,16,.4); }
.how.light .c-dots i { background: rgba(16,16,16,.15); }
.how.light .c-dots i.on { background: var(--blue); }
.how.light .c-slide h3, .how.light .c-slide .s-title { color: var(--ink); }
.how.light .c-slide p, .how.light .s-sub { color: var(--muted-2); }
.how.light .viz, .how.light .pick-card { border-radius: 22px; box-shadow: var(--shadow-card, 0 1px 2px rgba(16,16,16,.05), 0 40px 80px -30px rgba(16,16,16,.2)); }

/* ══ 5a · Use cases più curate ══ */
.uc-grid { gap: 24px; }
.uc-card { transition: transform .45s var(--ease-out), box-shadow .45s; }
.uc-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(16,16,16,.05), 0 48px 90px -34px rgba(16,16,16,.28); }
.uc-body h3 { font-size: 21px; }
.uc-body p { font-size: 14.5px; line-height: 1.55; }

/* ══ 5b · Characters più importanti ══ */
.people-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.people-arrows { display: flex; gap: 8px; }
.people-arrows button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(16,16,16,.15); background: #fff; color: var(--ink-2); font-size: 18px; cursor: pointer; transition: all .25s; }
.people-arrows button:hover { border-color: rgba(16,16,16,.4); color: var(--ink); }
.pcard { flex: 0 0 clamp(280px, 27vw, 380px); }
.pstrip { mask-image: linear-gradient(to right, #000 94%, transparent); -webkit-mask-image: linear-gradient(to right, #000 94%, transparent); }

/* how.light — i testi del vocabolario dark tornano inchiostro */
.how.light .d-title { color: var(--ink); }
.how.light .d-title .dim { color: var(--muted); }
.how.light .d-sub, .how.light .d-copy, .how.light .d-li, .how.light p { color: var(--muted-2); }
.how.light .c-tab-l { color: var(--ink); }
.how.light .c-tab .c-tab-n { color: var(--blue-text, #0064d2); }
.how.light .c-tab { border: 1px solid rgba(16,16,16,.12); background: #fff; }
.how.light h3, .how.light h4, .how.light .d-h { color: var(--ink); }
.how.light li { color: var(--ink-2, #3a3a3e); }

/* slide 2: la conversazione vera */
.cvz { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 12px; align-items: stretch; }
@media (max-width: 760px) { .cvz { grid-template-columns: 1fr; } }
.cvz-vid { position: relative; border-radius: 14px; overflow: hidden; background: #16161a; min-height: 240px; }
.cvz-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cvz-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono, ui-monospace); font-size: 9px; font-weight: 700; letter-spacing: .13em; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); border-radius: 999px; padding: 5px 10px; }
.cvz-tag i { width: 6px; height: 6px; border-radius: 999px; background: var(--coral, #f0554d); animation: pip 1.8s ease-in-out infinite; }
.cvz-wave { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.cvz-wave i { width: 3px; border-radius: 2px; background: var(--coral, #f0554d); animation: wave 1s ease-in-out infinite; }
.cvz-wave i:nth-child(2) { animation-delay: .12s; } .cvz-wave i:nth-child(3) { animation-delay: .24s; }
.cvz-wave i:nth-child(4) { animation-delay: .36s; } .cvz-wave i:nth-child(5) { animation-delay: .48s; }
.cvz-chat { display: flex; flex-direction: column; gap: 10px; justify-content: center; }

/* slide 1: riga caso custom */
.pick-custom { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 11px 14px; border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; color: rgba(255,255,255,.75); font-size: 12.5px; }
.pick-custom i { font-style: normal; }
.pick-custom b { color: #fff; }

/* FAQ a due colonne come la landing originale */
.faq-grid2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .faq-grid2 { grid-template-columns: 1fr; } }
.faq-grid2 .faq-t { margin-bottom: 0; position: sticky; top: 110px; }

/* ══════ WAYS — dark showcase full-width, grande e interattivo ══════ */
.ways { padding: 24px 0; }
.ways-room { margin: 0 16px; background: var(--night, #0b0b0d); border-radius: 28px; padding: clamp(48px,6vw,84px) 0; position: relative; overflow: clip; }
.ways-room::before { content: ""; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
  background: radial-gradient(52% 40% at 82% 8%, rgba(10,132,255,0.14), transparent 62%); }
.ways-grid { position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px,5vw,72px); align-items: center; }
@media (max-width: 900px) { .ways-grid { grid-template-columns: 1fr; } }
.ways-left .kick { color: #7dbcff; }
.ways-left .kick i { background: var(--blue); }
.ways-left .d-title { color: #fff; margin-top: 14px; }
.ways-left .d-title .dim { color: rgba(255,255,255,0.42); }
.ways-list { margin-top: 34px; display: flex; flex-direction: column; }
.way { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; text-align: left; padding: 22px 4px; border: 0; border-top: 1px solid var(--d-line); background: none; cursor: pointer; opacity: .5; transition: opacity .4s var(--ease-out); }
.way:last-child { border-bottom: 1px solid var(--d-line); }
.way.on { opacity: 1; }
.way-n { font-family: var(--mono, ui-monospace); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,0.4); padding-top: 3px; transition: color .3s; }
.way.on .way-n { color: var(--blue); }
.way-tx b { display: block; color: #fff; font-size: clamp(18px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
.way-tx em { display: block; margin-top: 5px; font-style: normal; color: var(--d-mut); font-size: 14px; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .4s, margin-top .4s; }
.way.on .way-tx em { max-height: 60px; opacity: 1; }
.way-bar { grid-column: 1 / -1; height: 2px; margin-top: 16px; background: var(--d-line); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.way.on .way-bar { opacity: 1; }
.way-bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.way.on .way-bar i { animation: wayFill 6s linear forwards; }
@keyframes wayFill { to { width: 100%; } }

.ways-stage { position: relative; min-height: clamp(340px, 46vh, 480px); }
.way-media { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(14px) scale(.99); pointer-events: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.way-media.on { opacity: 1; transform: none; pointer-events: auto; }
.wm-k { display: flex; align-items: center; gap: 8px; font-family: var(--mono, ui-monospace); font-size: 10px; font-weight: 700; letter-spacing: .15em; color: rgba(255,255,255,0.5); }
.wm-k i { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); }

/* — Learn media — */
.wm-lesson { flex: 1; display: grid; grid-template-columns: 150px 1fr; gap: 14px; min-height: 0; }
.wm-vid { position: relative; border-radius: 16px; overflow: hidden; background: #16161a; }
.wm-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wm-live { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 999px; background: var(--green,#34c759); animation: pip 2s ease-in-out infinite; }
.wm-name { position: absolute; left: 10px; bottom: 10px; font-family: var(--mono,ui-monospace); font-size: 8.5px; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border-radius: 6px; padding: 4px 8px; }
.wm-slide { border-radius: 16px; border: 1px solid rgba(182,99,224,.5); background: rgba(182,99,224,.08); box-shadow: 0 0 30px -10px rgba(182,99,224,.5); padding: clamp(18px,2.4vw,30px); display: flex; flex-direction: column; justify-content: center; }
.wm-slide h4 { color: #fff; font-size: clamp(19px,2.2vw,27px); font-weight: 600; letter-spacing: -0.015em; }
.wm-slide p { margin-top: 12px; color: rgba(255,255,255,0.72); font-size: clamp(14px,1.4vw,16px); line-height: 1.55; }
.wm-slide em { font-style: italic; color: #d9a8f0; }
.wm-beats { display: flex; align-items: center; gap: 5px; margin-top: 18px; }
.wm-beats i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); }
.wm-beats i.on { background: #b663e0; }
.wm-beats em { margin-left: auto; font-style: normal; font-family: var(--mono,ui-monospace); font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.wm-ask { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); font-size: 13px; background: rgba(255,255,255,.06); border: 1px solid var(--d-line); border-radius: 999px; padding: 11px 16px; }
.wm-ask b { color: #fff; } .wm-ask em { margin-left: auto; font-style: normal; color: rgba(255,255,255,.5); }

/* — Practice media — */
.wm-live-grid { flex: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 14px; min-height: 0; }
.wm-vid.tall { border-radius: 16px; }
.wm-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono,ui-monospace); font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); border-radius: 999px; padding: 5px 11px; }
.wm-tag i { width: 6px; height: 6px; border-radius: 999px; background: var(--coral,#f0554d); animation: pip 1.8s ease-in-out infinite; }
.wm-wave { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.wm-wave i { width: 3px; border-radius: 2px; background: var(--coral,#f0554d); animation: wave 1s ease-in-out infinite; }
.wm-wave i:nth-child(2){animation-delay:.12s}.wm-wave i:nth-child(3){animation-delay:.24s}.wm-wave i:nth-child(4){animation-delay:.36s}.wm-wave i:nth-child(5){animation-delay:.48s}
.wm-chat { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.wm-note { align-self: flex-start; margin-top: 4px; font-size: 12.5px; color: #7ede9b; font-family: var(--mono,ui-monospace); letter-spacing: .04em; }

/* — Your material media — */
.wm-paste { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; border-radius: 16px; border: 1px solid var(--d-line); background: rgba(255,255,255,0.02); padding: clamp(24px,3vw,40px); }
.wm-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border: 1px dashed var(--d-line-2); border-radius: 14px; color: rgba(255,255,255,.85); font-size: 15px; }
.wm-file { font-weight: 600; }
.wm-or { color: rgba(255,255,255,.4); }
.wm-ask2 { color: rgba(255,255,255,.7); }
.wm-caret { display: inline-block; width: 2px; height: 15px; background: #fff; vertical-align: middle; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.wm-build { align-self: flex-start; background: #8b5cf6; color: #fff; border-radius: 999px; padding: 12px 22px; font-size: 15px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(139,92,246,.7); }
.wm-build em { font-style: normal; opacity: .75; margin-left: 4px; }
.wm-out { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wm-out span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 13px; }
.wm-out i { width: 6px; height: 6px; border-radius: 999px; background: var(--green,#34c759); }
.wm-yours { color: #fff !important; font-weight: 600; }

@media (max-width: 760px) {
  .wm-lesson, .wm-live-grid { grid-template-columns: 1fr; }
  .wm-vid { min-height: 150px; }
}

/* ══ toggle lingua ══ */
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(16,16,16,0.05); border: 1px solid var(--hairline-2, rgba(16,16,16,0.1)); }
.nav.on-dark .lang { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.lang-btn { padding: 5px 11px; border: 0; background: none; border-radius: 999px; font-family: var(--mono, ui-monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted-2, #6e6e73); cursor: pointer; transition: all .25s; }
.nav.on-dark .lang-btn { color: rgba(255,255,255,0.6); }
.lang-btn.on { background: #fff; color: var(--ink, #1a1a1a); box-shadow: 0 1px 3px rgba(16,16,16,0.12); }
.nav.on-dark .lang-btn.on { background: rgba(255,255,255,0.92); color: var(--ink, #1a1a1a); }
@media (max-width: 520px) { .lang { display: none; } }

/* ══ demo LIVE (Anam) dentro la card ══ */
.ds-stage.is-live .ds-play, .ds-stage.is-live .ds-cap, .ds-stage.is-live .ds-live-dot, .ds-stage.is-live .ds-wave { display: none; }
.live { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out); }
.live.show { opacity: 1; pointer-events: auto; }
.live-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: #0d0f13; }
.live-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,0.6), transparent 40%); pointer-events: none; }
.live-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono, ui-monospace); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #fff; background: rgba(240,85,77,0.9); border-radius: 999px; padding: 6px 12px; }
.live-badge i { width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: pip 1.4s ease-in-out infinite; }
.live-timer { font-family: var(--mono, ui-monospace); font-size: 13px; font-weight: 700; color: #fff; background: rgba(10,11,14,0.55); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 13px; }
.live-status { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; color: #fff; }
.live-spin { width: 34px; height: 34px; border-radius: 999px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-msg { font-size: 16px; font-weight: 500; max-width: 22em; line-height: 1.4; }
.live-book { display: inline-flex; align-items: center; border-radius: 999px; background: var(--blue, #0a84ff); color: #fff; padding: 11px 22px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.live-stop { position: absolute; bottom: 14px; right: 16px; border-radius: 999px; background: rgba(240,85,77,0.92); color: #fff; border: 0; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ds-stage:not(.is-live) .live-stop { display: none; }
.live-close { margin-top: 4px; background: none; border: 0; color: rgba(255,255,255,0.6); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.live-close:hover { color: #fff; }