/* ============================================================
   INFOGRAPHYA · AI BUILDER · 2026
   Spotify-Wrapped Narrative — snap scroll, one card per screen
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --purple:       oklch(68% .28 280);
  --purple-light: oklch(80% .22 280);
  --cyan:         oklch(78% .17 210);
  --green:        oklch(72% .20 145);
  --red:          oklch(62% .22  25);
  --gold:         oklch(72% .16  85);
  --t:            #fff;
  --t2:           rgba(255,255,255,.70);
  --t3:           rgba(255,255,255,.38);
  --brd:          rgba(255,255,255,.08);
  --fd:           'Syne',  sans-serif;
  --ft:           'Inter', sans-serif;
  --ease:         cubic-bezier(.16,1,.3,1);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family: var(--ft);
  color: var(--t);
  background: #07070f;
  overflow: hidden;
  height: 100vh;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}
h1,h2,h3,p,li,span,div {
  hyphens: none;
  -webkit-hyphens: none;
}
ul,ol { list-style:none; }
em    { font-style:normal; }
button { cursor:pointer; border:none; background:none; font-family:var(--ft); color:inherit; }

/* ── SCROLL ROOT ────────────────────────────────────────── */
#root {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#root::-webkit-scrollbar { display:none; }

/* ── PROGRESS BAR ───────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 300;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
#pb-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transition: width .12s linear;
}

/* ── SIDE NAV ───────────────────────────────────────────── */
.side-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .3s, transform .3s var(--ease);
  position: relative;
}
.dot.active {
  background: #fff;
  transform: scale(1.5);
}
.dot::after {
  content: attr(title);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  font-size: .62rem; font-family: var(--ft); font-weight: 500;
  color: var(--t2); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.dot:hover::after { opacity: 1; }

/* ── PANEL BASE ─────────────────────────────────────────── */
.panel {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-panel glow overlay — fades in when panel becomes active */
.panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(
    ellipse 130% 90% at var(--gx,50%) var(--gy,-5%),
    var(--gc,transparent) 0%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.panel.is-active::before {
  opacity: 1;
}

/* ── PANEL THEMES ───────────────────────────────────────── */
.panel--void    { background:#07070f; --gc:oklch(42% .20 270/.28); }
.panel--violet  { background:#0c0019; --gc:oklch(45% .28 280/.52); }
.panel--teal    { background:#001019; --gc:oklch(62% .17 210/.40); --gx:75%; }
.panel--crimson { background:#160009; --gc:oklch(48% .22  25/.52); --gx:75%; }
.panel--sage    { background:#001508; --gc:oklch(60% .20 145/.42); --gx:30%; }
.panel--amber   { background:#120e00; --gc:oklch(68% .16  85/.42); --gx:70%; }
.panel--slate   { background:#080814; --gc:oklch(40% .12 260/.32); --gx:50%; --gy:50%; }

/* ── ANIMATION SYSTEM ───────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  .65s var(--ease),
    transform .65s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.panel.is-active .anim {
  opacity: 1;
  transform: none;
}

/* ── WORD SPREAD (21st.dev CharacterV1 style) ───────────── */
/*   JS splits big headings into .w-anim spans, each gets   */
/*   --dist = (wordIndex - center) and --d = stagger delay  */
.w-anim {
  display: inline-block;
  opacity: 0;
  transform:
    perspective(700px)
    translateX(calc(var(--dist, 0) * 5.5vw))
    rotateX(calc(var(--dist, 0) * 42deg));
  transition:
    opacity   .72s var(--ease),
    transform .80s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.panel.is-active .w-anim {
  opacity: 1;
  transform: perspective(700px) translateX(0) rotateX(0deg);
}

/* ── CARD ARC-IN (JS sets --dy per card via arc from center) */
.c-anim {
  opacity: 0;
  transform: translateY(var(--dy, 32px)) scale(0.93);
  transition:
    opacity   .6s var(--ease),
    transform .65s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.panel.is-active .c-anim {
  opacity: 1;
  transform: none;
}

/* ── DIRECTIONAL ENTRIES (McLaren-style scene composition) ── */
/*   Elements enter from specific corners / edges.            */
/*   Set --d inline for stagger timing.                       */
.anim-l, .anim-r,
.anim-tl, .anim-tr,
.anim-bl, .anim-br,
.anim-up, .anim-zoom {
  opacity: 0;
  transition:
    opacity   .65s var(--ease),
    transform .72s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.anim-l    { transform: translateX(-60px) scale(.96); }
.anim-r    { transform: translateX( 60px) scale(.96); }
.anim-tl   { transform: translate(-50px, -50px) scale(.93); }
.anim-tr   { transform: translate( 50px, -50px) scale(.93); }
.anim-bl   { transform: translate(-50px,  50px) scale(.93); }
.anim-br   { transform: translate( 50px,  50px) scale(.93); }
.anim-up   { transform: translateY(-35px); }
.anim-zoom { transform: scale(.82); }

.panel.is-active .anim-l,
.panel.is-active .anim-r,
.panel.is-active .anim-tl,
.panel.is-active .anim-tr,
.panel.is-active .anim-bl,
.panel.is-active .anim-br,
.panel.is-active .anim-up,
.panel.is-active .anim-zoom {
  opacity: 1;
  transform: none;
}

/* ── FLOATING COMPOSITION CARDS ─────────────────────────── */
/*   Absolute-positioned "scene props" inside panels.        */
/*   Position set inline; direction set via .anim-* class.  */
.fc-abs {
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  padding: 13px 17px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
  min-width: 155px;
  max-width: 210px;
  pointer-events: none;
  user-select: none;
}
.fca-label {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 7px;
}
.fca-items {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .7rem; color: var(--t2);
}
.fca-items span { display: flex; align-items: center; gap: 5px; }
.fca-tag  { font-size: .72rem; color: var(--t2); }
.fca-live { font-size: .78rem; font-weight: 700; font-family: var(--fd); }
.fca-big  { font-size: 1.55rem; font-weight: 800; font-family: var(--fd); line-height: 1; }
.fca-sub  { font-size: .62rem; color: var(--t3); margin-top: 4px; }
.fca-cross {
  font-size: .95rem; font-weight: 700; font-family: var(--fd);
  color: var(--red);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
@keyframes fc-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.fca-dot { font-size: .55rem; animation: fc-pulse 2s ease-in-out infinite; }

/* ── LEFT-EDGE NARRATIVE THREAD ─────────────────────────── */
/*   Fixed 2px bar that shifts color between panels,        */
/*   creating visual continuity across the snap cuts.       */
#nav-thread {
  position: fixed;
  left: 0; top: 0;
  width: 2px; height: 100vh;
  z-index: 250;
  pointer-events: none;
  opacity: .55;
  transition: background 1s var(--ease);
}

/* ── MOBILE: hide floating cards ────────────────────────── */
@media (max-width: 767px) {
  .fc-abs { display: none; }
}

/* ── PANEL INNER ────────────────────────────────────────── */
.panel-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1020px;
  padding: 64px 52px;
  display: flex; flex-direction: column; gap: 22px;
  /* no height — panel's align-items:center vertically centers this block */
}
.panel-inner.center {
  align-items: center;
  text-align: center;
}
.panel-inner.split {
  flex-direction: row;
  align-items: center;
  gap: 52px;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.kicker {
  display: block;
  font-family: var(--ft); font-size: .62rem; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--t3);
}
.hed {
  font-family: var(--fd); font-weight: 800;
  line-height: 1.0; letter-spacing: -2px;
  color: var(--t);
}
.hed.hero-hed { font-size: clamp(4rem,  11vw, 9rem); }
.hed.xlarge   { font-size: clamp(3.2rem, 9vw, 7rem); }
.hed.large    { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.hed.med      { font-size: clamp(1.9rem,4.5vw, 3.6rem); }

.sub {
  font-size: clamp(.9rem, 1.8vw, 1.15rem);
  color: var(--t2); line-height: 1.65;
  max-width: 480px;
}
.sub.muted { color: var(--t3); }

/* Accent text colors */
.tc-purple { color: var(--purple); }
.tc-cyan   { color: var(--cyan);   }
.tc-green  { color: var(--green);  }
.tc-red    { color: var(--red);    }
.tc-gold   { color: var(--gold);   }

.sec-head { display:flex; flex-direction:column; gap:8px; }

/* ── SCROLL HINT ────────────────────────────────────────── */
.scroll-hint {
  margin-top: 32px;
  font-size: 1.4rem; color: var(--t3);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ── PARTICLES ──────────────────────────────────────────── */
#particles-canvas {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
#sc-hero .panel-inner { pointer-events: auto; }

/* ── CHIPS ──────────────────────────────────────────────── */
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 8px;
}
.chip {
  padding: 6px 14px; border-radius: 100px;
  font-size: .7rem; font-weight: 600;
  background: oklch(45% .28 280 / .12);
  border: 1px solid oklch(45% .28 280 / .28);
  color: var(--purple-light);
}

/* ── WORLDS ─────────────────────────────────────────────── */
.worlds-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.world-card {
  padding: 28px 32px; border-radius: 20px;
  border: 1px solid var(--brd);
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(8px);
}
.world-old { background:oklch(48% .20 25  /.07); border-color:oklch(48% .20 25  /.22); }
.world-new { background:oklch(45% .25 280 /.07); border-color:oklch(45% .25 280 /.22); }
.world-era { font-size:.6rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.era-red    { color:var(--red); }
.era-purple { color:var(--purple); }
.world-title { font-family:var(--fd); font-size:1.25rem; font-weight:800; }
.world-list { display:flex; flex-direction:column; gap:8px; }
.world-list li { display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--t2); line-height:1.45; }
.wd-x  { color:var(--red);    flex-shrink:0; font-weight:700; }
.wd-ok { color:var(--purple); flex-shrink:0; font-weight:700; }
.world-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:100px;
  font-size:.68rem; font-weight:600;
  background:oklch(45% .25 280/.15); border:1px solid oklch(45% .25 280/.3);
  color:var(--purple-light); margin-top:auto;
}
.pulse-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--purple);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── CARDS GRID ─────────────────────────────────────────── */
.cards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* ── DIAG CARDS ─────────────────────────────────────────── */
.diag-card {
  padding: 22px 26px; border-radius: 16px;
  background: oklch(48% .20 25 / .10);
  border: 1px solid oklch(48% .20 25 / .22);
  position: relative; overflow: hidden;
}
.diag-num {
  font-family:var(--fd); font-size:3.2rem; font-weight:800;
  color: oklch(48% .20 25 / .12);
  position:absolute; top:8px; right:14px; line-height:1;
}
.diag-title { font-family:var(--fd); font-size:.95rem; font-weight:700; margin-bottom:6px; }
.diag-text  { font-size:.78rem; color:var(--t2); line-height:1.6; }

/* ── MOD CARDS ──────────────────────────────────────────── */
.mod-card {
  padding: 22px 26px; border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--brd);
  transition: background .3s, border-color .3s;
}
.mod-card:hover {
  background: oklch(45% .25 280 / .06);
  border-color: oklch(45% .25 280 / .2);
}
.mod-label { font-size:.58rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--purple); display:block; margin-bottom:4px; }
.mod-title { font-family:var(--fd); font-size:1.05rem; font-weight:800; margin-bottom:10px; }
.mod-list  { display:flex; flex-direction:column; gap:5px; }
.mod-list li { font-size:.75rem; color:var(--t2); }

/* ── COST ───────────────────────────────────────────────── */
.cost-wrap {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: center;
}
.cost-col-label {
  font-size:.58rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--t3); margin-bottom:10px;
}
.cost-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--brd);
  font-size:.8rem; gap:12px;
}
.cv { font-weight:600; white-space:nowrap; }
.cv.bad { color:var(--red); }
.cost-note-bad { font-size:.72rem; color:var(--t3); margin-top:6px; }
.cost-vs { font-size:1.6rem; color:var(--t3); text-align:center; }
.cost-after-card {
  padding: 20px; border-radius: 14px;
  background: oklch(62% .17 210 / .10);
  border: 1px solid oklch(62% .17 210 / .25);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.cost-after-icon  { font-size:2rem; }
.cost-after-title { font-family:var(--fd); font-size:1rem; font-weight:800; color:var(--cyan); }
.cost-after-sub   { font-size:.73rem; color:var(--t2); }
.cost-result { font-size:.85rem; color:var(--t2); }

/* ── SPLIT LAYOUT ───────────────────────────────────────── */
.split-left  { flex:1; display:flex; flex-direction:column; gap:16px; }
.split-right { flex:1; display:flex; align-items:center; justify-content:center; }

/* ── LIGHIA PHONE ───────────────────────────────────────── */
.phone {
  width: 236px;
  background: #111; border-radius: 28px;
  border: 1.5px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,.5), 0 0 40px oklch(62% .17 210 / .12);
}
.phone-bar { display:flex; justify-content:center; padding:10px; background:rgba(255,255,255,.04); }
.phone-pill { width:60px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); }
.phone-msgs { padding:12px; display:flex; flex-direction:column; gap:8px; min-height:220px; }
.msg {
  padding:8px 12px; border-radius:12px;
  font-size:.7rem; line-height:1.5;
  opacity:0; transition:opacity .5s ease;
}
.msg.bot { background:rgba(255,255,255,.08); border-radius:4px 12px 12px 12px; }
.msg.usr { background:var(--cyan); color:#000; align-self:flex-end; border-radius:12px 4px 12px 12px; }
.msg.typing { background:rgba(255,255,255,.06); border-radius:4px 12px 12px 12px; }
.typing-dots { display:flex; gap:4px; padding:2px; }
.typing-dots span {
  width:5px; height:5px; border-radius:50%; background:var(--t3);
  animation:typedot 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes typedot { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

.schips { display:flex; flex-wrap:wrap; gap:6px; }
.schip { padding:4px 10px; border-radius:100px; font-size:.62rem; font-weight:600; }
.schip.live { background:oklch(60% .20 145 / .15); border:1px solid oklch(60% .20 145 / .3); color:var(--green); }
.schip.saas { background:oklch(60% .17 210 / .15); border:1px solid oklch(60% .17 210 / .3); color:var(--cyan); }
.schip.mkt  { background:oklch(45% .25 280 / .15); border:1px solid oklch(45% .25 280 / .3); color:var(--purple); }

.feat-list { display:flex; flex-direction:column; gap:8px; }
.feat-list li {
  font-size:.82rem; color:var(--t2);
  padding-left:16px; position:relative;
}
.feat-list li::before { content:'→'; position:absolute; left:0; color:var(--cyan); font-size:.7rem; top:.1em; }

/* ── DEMO BOX ───────────────────────────────────────────── */
.demo-box {
  width:100%; max-width:380px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--brd);
  overflow:hidden;
}
.demo-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 16px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--brd);
  font-size:.68rem;
}
.demo-live   { color:var(--cyan); font-weight:600; }
.demo-status { color:var(--t3); }
.demo-body   { padding:16px; display:flex; flex-direction:column; gap:10px; }
.dlabel { font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t3); }
.demo-opts { display:flex; gap:6px; flex-wrap:wrap; }
.d-opt {
  padding:5px 12px; border-radius:100px;
  font-size:.7rem; font-weight:600;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  color:var(--t2); transition:all .2s;
}
.d-opt.active { background:var(--cyan); border-color:var(--cyan); color:#000; }
.demo-input {
  width:100%; padding:8px 12px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  color:var(--t); font-size:.78rem; font-family:var(--ft);
  transition:border-color .2s;
}
.demo-input:focus { outline:none; border-color:var(--cyan); }
.demo-run {
  padding:10px 16px; border-radius:8px;
  background:var(--cyan); color:#000;
  font-size:.8rem; font-weight:700;
  transition:opacity .2s;
}
.demo-run:hover   { opacity:.85; }
.demo-run:disabled { opacity:.4; cursor:not-allowed; }
.demo-out {
  height:108px; overflow-y:auto;
  border-radius:8px; background:rgba(0,0,0,.3);
  padding:10px; font-size:.72rem; line-height:1.6;
  color:var(--t2); white-space:pre-wrap;
}
.demo-ph { color:var(--t3); }

/* ── CLOSE SECTION ──────────────────────────────────────── */
.crossed-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.crossed-val {
  font-family: var(--fd); font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800; color: var(--red);
  position: relative; display: inline-block;
  transition: color .6s var(--ease) .2s, opacity .6s var(--ease) .2s;
}
.crossed-val::after {
  content: '';
  position: absolute; left: -4%; top: 52%;
  height: 6px; width: 0%;
  background: var(--red); border-radius: 3px;
  transform: translateY(-50%);
  transition: width .9s var(--ease) .35s;
}
.crossed-val.cross { color: oklch(50% .22 25 / .35); }
.crossed-val.cross::after { width: 108%; }

.crossed-label {
  font-size: .6rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--red); opacity: 0;
  transition: opacity .5s ease 1s;
}
.panel.is-active .crossed-label { opacity: 1; }

.close-reason {
  max-width: 540px; text-align: center;
  font-size: .88rem; color: var(--t2); line-height: 1.75;
}

/* ── CONTRACT ───────────────────────────────────────────── */
.val-transition { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.val-old { font-family:var(--fd); font-size:1.2rem; font-weight:800; color:var(--t3); text-decoration:line-through; }
.val-arr { font-size:1.4rem; color:var(--t3); }
.val-new { font-family:var(--fd); font-size:2.4rem; font-weight:800; color:var(--purple); }
.val-period { font-size:.82rem; color:var(--t3); font-family:var(--ft); font-weight:400; vertical-align:middle; }

.inc-list { display:flex; flex-direction:column; gap:8px; }
.inc-list li { font-size:.82rem; color:var(--t2); padding-left:16px; position:relative; }
.inc-list li::before { content:'→'; position:absolute; left:0; color:var(--purple); font-size:.7rem; top:.1em; }

/* ── TERMINAL ───────────────────────────────────────────── */
.terminal {
  width:100%; max-width:360px;
  border-radius:14px; background:#0a0a10;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  font-family:'Courier New',monospace; font-size:.72rem;
}
.term-bar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tdot { width:10px; height:10px; border-radius:50%; }
.tdot.r { background:#ff5f57; } .tdot.y { background:#ffbd2e; } .tdot.g { background:#28ca41; }
.term-title { font-size:.62rem; color:var(--t3); margin-left:4px; font-family:var(--ft); }
.term-body {
  padding:14px;
  min-height:160px; max-height:200px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:4px; line-height:1.65;
}
.tl  { display:block; }
.tp  { color:var(--cyan); }
.tc  { color:var(--t2); }
.to.red   { color:var(--red);   }
.to.green { color:var(--green); }
.to.cyan  { color:var(--cyan);  }
.to.gold  { color:var(--gold);  }
.tcursor {
  display:inline-block; width:7px; height:13px;
  background:var(--cyan);
  animation:blink 1s step-end infinite;
  vertical-align:bottom;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── ROI ────────────────────────────────────────────────── */
.roi-months {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin:8px 0;
}
.roi-m {
  width:58px; height:58px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  display:flex; align-items:center; justify-content:center;
  font-size:.64rem; font-weight:600; text-align:center; color:var(--t3);
  transition:all .4s var(--ease);
}
.roi-m.done    { background:oklch(60% .20 145 / .15); border-color:oklch(60% .20 145 / .3); color:var(--green); }
.roi-m.payback { background:var(--green); border-color:var(--green); color:#000; font-weight:800; }

.roi-stats { display:flex; gap:28px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.roi-stat  { text-align:center; }
.roi-val   { font-family:var(--fd); font-size:2rem; font-weight:800; }
.roi-lbl   { font-size:.68rem; color:var(--t3); margin-top:2px; }

/* ── SERVICES ───────────────────────────────────────────── */
.svc-list { display:flex; flex-direction:column; gap:8px; }
.svc-list li { font-size:.82rem; color:var(--t2); padding-left:16px; position:relative; }
.svc-list li::before { content:'→'; position:absolute; left:0; color:var(--t3); font-size:.7rem; top:.1em; }

.price-big    { font-family:var(--fd); font-size:clamp(2.6rem,6vw,4.5rem); font-weight:800; line-height:1; }
.price-detail { font-size:.85rem; color:var(--t3); margin-top:4px; }
.price-note   { font-family:var(--fd); font-size:1.15rem; font-weight:800; color:var(--t2); margin-top:12px; }

/* ── COMPARE ────────────────────────────────────────────── */
.compare-wrap {
  display:grid; grid-template-columns:1fr 1px 1fr;
  gap:24px; align-items:start;
}
.cmp-divider { background:var(--brd); align-self:stretch; }
.cmp-head { font-size:.58rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
.cmp-head-after  { color:var(--purple); }
.cmp-head-before { color:var(--red); }
.cmp-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--brd);
  font-size:.82rem; gap:12px;
}
.cmp-row.main  { font-weight:600; }
.cmp-row.total { font-weight:700; border-bottom:none; padding-top:12px; }
.cmp-row.hl-row { background:oklch(45% .25 280 / .06); border-radius:6px; padding:8px; border-bottom:none; }
.cv { font-weight:700; white-space:nowrap; }
.cv.red    { color:var(--red); }
.cv.purple { color:var(--purple); }
.cv.gold   { color:var(--gold); }
.cv.cyan   { color:var(--cyan); }
.cv.muted  { color:var(--t3); }
.cmp-note {
  font-size:.82rem; color:var(--t2);
  background:rgba(255,255,255,.03); padding:14px;
  border-radius:10px; border:1px solid var(--brd);
}

/* ── RISKS ──────────────────────────────────────────────── */
.risks-list { display:flex; flex-direction:column; gap:10px; }
.risk-item {
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 20px; border-radius:12px;
  background:oklch(48% .20 25 / .07);
  border:1px solid oklch(48% .20 25 / .18);
  transition: background .3s;
}
.risk-item:hover { background:oklch(48% .20 25 / .12); }
.risk-n { font-family:var(--fd); font-size:1.5rem; font-weight:800; color:oklch(48% .20 25 / .28); line-height:1; flex-shrink:0; min-width:36px; }
.risk-title { font-family:var(--fd); font-size:.93rem; font-weight:700; margin-bottom:3px; }
.risk-text  { font-size:.78rem; color:var(--t2); line-height:1.55; }

/* ── PROPOSAL TABLE ─────────────────────────────────────── */
.proposal-table { display:flex; flex-direction:column; }
.proposal-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--brd);
  font-size:.82rem; gap:12px;
}
.proposal-row.total { font-weight:700; border-bottom:none; padding-top:12px; }
.pval { font-weight:700; white-space:nowrap; }
.proposal-note { font-size:.78rem; color:var(--t2); margin-top:8px; }

/* ── SCHEDULE FORM ──────────────────────────────────────── */
#form-wrap { display:flex; flex-direction:column; gap:14px; width:100%; }
.form-title    { font-family:var(--fd); font-size:1.4rem; font-weight:800; }
.form-subtitle { font-size:.82rem; color:var(--t2); }
.form-field    { display:flex; flex-direction:column; gap:5px; }
.form-field label { font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t3); }
.form-field input,
.form-field textarea {
  padding:9px 13px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  color:var(--t); font-size:.85rem; font-family:var(--ft);
  transition:border-color .2s;
}
.form-field input:focus,
.form-field textarea:focus { outline:none; border-color:var(--purple); }
.form-field textarea { resize:none; height:68px; }
.time-opts { display:flex; gap:8px; }
.time-opt {
  padding:7px 14px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  color:var(--t2); font-size:.78rem;
  transition:all .2s;
}
.time-opt.active { background:var(--purple); border-color:var(--purple); color:#fff; font-weight:600; }
.btn-submit {
  padding:13px 20px; border-radius:10px;
  background:linear-gradient(135deg, var(--purple), oklch(55% .28 300));
  color:#fff; font-size:.88rem; font-weight:700;
  transition:opacity .2s; width:100%; margin-top:4px;
}
.btn-submit:hover { opacity:.85; }
.form-success { display:none; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px; }
.form-success.visible { display:flex; }
.success-icon { font-size:2.5rem; }
.form-success h3 { font-family:var(--fd); font-size:1.3rem; font-weight:800; }
.form-success p  { font-size:.85rem; color:var(--t2); }

/* ══════════════════════════════════════════════════════════
   3D APP MOCKUP — base + InfoTools + LighIA
   ══════════════════════════════════════════════════════════ */

/* ── 3D wrapper & screen ─────────────────────────────────── */
.app-3d-wrap {
  width: 100%;
  max-width: 460px;
  flex-shrink: 0;
}
.app-screen {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    24px 24px 60px rgba(0,0,0,.75),
    -4px -4px 24px rgba(255,255,255,.025),
    0 0 50px oklch(45% .28 280 / .10);
  transform: perspective(1000px) rotateY(-14deg) rotateX(4deg) rotateZ(0.5deg);
  transform-origin: center center;
  transition: transform .55s var(--ease);
  will-change: transform;
  height: 300px;
  background: #0c0c14;
  font-size: .58rem;
  line-height: 1.4;
  color: rgba(255,255,255,.72);
}
.app-screen:hover {
  transform: perspective(1000px) rotateY(-6deg) rotateX(1.5deg) rotateZ(0deg);
}

/* ── InfoTools sidebar ───────────────────────────────────── */
.it-app-sb {
  width: 60px;
  flex-shrink: 0;
  background: #09090f;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 0;
}
.it-app-logo {
  width: 30px; height: 30px;
  background: oklch(62% .17 210 / .18);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: .85rem; font-weight: 800;
  color: var(--cyan);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.it-app-nav { width: 100%; padding: 0 5px; display: flex; flex-direction: column; gap: 1px; }
.it-app-nav-item {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 5px 3px;
  border-radius: 7px;
  color: rgba(255,255,255,.30);
  cursor: default;
}
.it-app-nav-item.on {
  background: oklch(62% .17 210 / .12);
  color: var(--cyan);
}
.it-app-nav-ico { font-size: .72rem; line-height: 1; }
.it-app-nav-lbl { font-size: .40rem; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }

/* ── InfoTools main area ─────────────────────────────────── */
.it-app-main {
  flex: 1; display: flex; flex-direction: column;
  padding: 14px 16px 12px; overflow: hidden;
}
.it-app-section-lbl {
  font-size: .52rem; font-weight: 700; color: var(--cyan);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.it-app-greeting {
  font-family: var(--fd); font-size: 1.08rem;
  font-weight: 800; color: #fff;
  margin-bottom: 10px; line-height: 1.1;
}
.it-app-input-row {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  margin-bottom: 12px;
}
.it-app-ph { flex: 1; font-size: .50rem; color: rgba(255,255,255,.25); white-space: nowrap; overflow: hidden; }
.it-app-model {
  display: flex; align-items: center; gap: 3px;
  font-size: .46rem; color: rgba(255,255,255,.40);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 100px; padding: 2px 6px;
  white-space: nowrap;
}
.it-app-send {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 800; flex-shrink: 0;
}
.it-app-ass-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.it-app-ass-title {
  font-family: var(--fd); font-size: .65rem; font-weight: 800; color: #fff;
}
.it-app-ass-tabs { display: flex; gap: 3px; }
.it-app-ass-tabs span {
  font-size: .42rem; padding: 2px 6px; border-radius: 100px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.40);
}
.it-app-ass-tabs span.on { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.15); }
.it-app-ass-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: 7px 9px; max-width: 130px;
}
.it-app-ass-card-name { font-size: .52rem; font-weight: 700; color: var(--cyan); margin-bottom: 3px; }
.it-app-ass-card-desc { font-size: .44rem; color: rgba(255,255,255,.40); line-height: 1.45; }

/* ── LighIA sidebar ──────────────────────────────────────── */
.lighia-app-sb {
  width: 130px; flex-shrink: 0;
  background: #09090f;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  padding: 12px 0 8px;
  overflow: hidden;
}
.lighia-app-logo {
  display: flex; align-items: center; gap: 5px;
  padding: 0 11px; margin-bottom: 13px;
  font-family: var(--fd); font-size: .68rem; font-weight: 800; color: var(--cyan);
}
.lighia-nav-label {
  font-size: .38rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.20);
  padding: 0 11px; margin-bottom: 5px;
}
.lighia-nav-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: .50rem; color: rgba(255,255,255,.42);
  border-right: 2px solid transparent;
  white-space: nowrap;
}
.lighia-nav-item.on {
  background: oklch(62% .17 210 / .09);
  color: var(--cyan);
  border-right-color: var(--cyan);
}
.lighia-nav-sair {
  margin-top: auto; padding: 7px 11px;
  font-size: .48rem; color: rgba(255,255,255,.25);
  display: flex; align-items: center; gap: 5px;
}

/* ── LighIA main dashboard ───────────────────────────────── */
.lighia-app-main {
  flex: 1; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.lighia-dash-top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.lighia-dash-greeting {
  font-family: var(--fd); font-size: .70rem;
  font-weight: 800; color: #fff; line-height: 1.2;
}
.lighia-dash-sub { font-size: .42rem; color: rgba(255,255,255,.35); margin-top: 2px; }
.lighia-update-btn {
  font-size: .44rem; padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.45);
  white-space: nowrap; flex-shrink: 0;
}
.lighia-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 4px;
}
.lighia-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px; padding: 5px 6px;
}
.lighia-stat-lbl { font-size: .40rem; color: rgba(255,255,255,.38); margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.lighia-stat-val { font-family: var(--fd); font-size: .80rem; font-weight: 800; color: #fff; line-height: 1; }
.lighia-stat-sub { font-size: .36rem; color: rgba(255,255,255,.28); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.lighia-charts-row {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 5px; flex: 1; min-height: 0;
}
.lighia-chart-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px; padding: 7px 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lighia-chart-lbl { font-size: .42rem; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.lighia-bars {
  display: flex; align-items: flex-end; gap: 3px;
  flex: 1; min-height: 0;
}
.lighia-bar-item {
  flex: 1; border-radius: 2px 2px 0 0;
  background: rgba(255,255,255,.07);
}
.lighia-bar-item.active { background: oklch(62% .17 210 / .65); }
.lighia-donut-area {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  flex: 1; justify-content: center;
}
.lighia-donut {
  width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(var(--cyan) 360deg, rgba(255,255,255,.07) 0deg);
  mask: radial-gradient(farthest-side, transparent 60%, black 61%);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%);
  flex-shrink: 0;
}
.lighia-donut-kpis { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.lighia-donut-kpi { display: flex; align-items: baseline; gap: 3px; }
.lighia-donut-kpi-val { font-family: var(--fd); font-size: .58rem; font-weight: 800; color: #fff; }
.lighia-donut-kpi-lbl { font-size: .40rem; color: rgba(255,255,255,.38); line-height: 1.3; }

/* ══════════════════════════════════════════════════════════
   INFOTOOLS DASHBOARD MOCKUP (old simple version — keep for fallback)
   ══════════════════════════════════════════════════════════ */

.it-mockup {
  width: 100%; max-width: 390px;
  border-radius: 16px;
  background: #08080f;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow:
    0 28px 60px rgba(0,0,0,.60),
    0 0 50px oklch(45% .28 280 / .18);
}
.it-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.it-url {
  font-size: .6rem; font-family: var(--ft); color: var(--t3);
  margin-left: 8px; flex: 1;
}
.it-live {
  font-size: .58rem; font-weight: 700; color: var(--green);
  animation: fc-pulse 2s ease-in-out infinite;
}
.it-body {
  display: flex; height: 210px;
}
.it-sidebar {
  width: 112px; flex-shrink: 0;
  background: rgba(0,0,0,.30);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.it-mod {
  padding: 7px 10px; border-radius: 8px;
  font-size: .62rem; color: var(--t3);
  transition: background .2s, color .2s;
}
.it-mod--on {
  background: oklch(45% .28 280 / .18);
  border: 1px solid oklch(45% .28 280 / .28);
  color: var(--purple-light);
  font-weight: 600;
}
.it-main {
  flex: 1; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
  overflow: hidden;
}
.it-ctx {
  font-size: .52rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--cyan); opacity: .8;
}
.it-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 10px 12px;
  flex: 1; overflow: hidden;
}
.it-card-lbl {
  font-size: .56rem; color: var(--green); font-weight: 700;
  margin-bottom: 6px;
}
.it-card-body {
  font-size: .68rem; color: var(--t2); line-height: 1.55;
}
.it-apis {
  display: flex; gap: 5px;
}
.it-apis span {
  font-size: .54rem; padding: 3px 8px; border-radius: 100px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--t3);
}
.it-footer {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.it-stat {
  flex: 1; text-align: center;
  padding: 8px 4px;
  font-size: .58rem; font-weight: 700;
  color: var(--t3);
  border-right: 1px solid rgba(255,255,255,.06);
}
.it-stat:last-child { border-right: none; }

/* ══════════════════════════════════════════════════════════
   CALENDAR PANEL
   ══════════════════════════════════════════════════════════ */

.cal-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ── Calendar box ── */
.cal-box {
  flex: 0 1 360px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 16px;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-month-lbl {
  font-family: var(--fd);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--t);
}
.cal-nav-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--t2);
  font-size: 1rem;
  line-height: 1;
  transition: background .2s, color .2s;
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover { background: rgba(255,255,255,.14); color: var(--t); }

.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cal-dow-row span {
  text-align: center;
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  padding: 2px 0;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 500;
  transition: background .18s, color .18s, transform .15s;
  cursor: default;
}
.cal-day.available {
  color: var(--t2);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  border: 1px solid transparent;
}
.cal-day.available:hover {
  background: rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.4);
  color: var(--t);
  transform: scale(1.06);
}
.cal-day.today {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}
.cal-day.selected {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
  font-weight: 700;
  transform: scale(1.08);
}
.cal-day.disabled {
  color: rgba(255,255,255,.12);
  cursor: default;
}
.cal-day.empty { background: transparent; border: none; }

/* ── Right panel: time + confirm ── */
.cal-side {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-side-date {
  font-family: var(--fd);
  font-size: .8rem;
  font-weight: 700;
  color: var(--t2);
  min-height: 18px;
  transition: color .3s;
}
.cal-side-date.has-date { color: var(--t); }

.cal-slots-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-height: 0;
}
.cal-slot {
  padding: 7px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--t2);
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--ft);
  text-align: center;
  transition: all .18s;
  cursor: pointer;
}
.cal-slot:hover {
  background: rgba(124,58,237,.25);
  border-color: var(--purple);
  color: var(--t);
}
.cal-slot.selected {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.cal-confirm-btn {
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), oklch(55% .28 300));
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--ft);
  width: 100%;
  transition: opacity .2s, transform .15s;
}
.cal-confirm-btn:not(:disabled):hover {
  opacity: .88;
  transform: scale(1.02);
}
.cal-confirm-btn:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.cal-note {
  font-size: .58rem;
  color: var(--t3);
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
}

/* ── Calendar success state ─────────────────────────────── */
.cal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  width: 100%;
  padding: 40px 20px;
}
.cal-success.visible { display: flex; }

.cal-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: oklch(60% .20 145 / .15);
  border: 2px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--green);
  font-weight: 800;
}
.cal-success-title {
  font-family: var(--fd); font-size: 1.1rem; font-weight: 800;
  color: var(--t);
}
.cal-success-info {
  font-family: var(--fd); font-size: .88rem; font-weight: 700;
  color: var(--purple-light);
  line-height: 1.5;
}
.cal-success-note {
  font-size: .72rem; color: var(--t3); line-height: 1.6;
}
.cal-success-note strong { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO REVISADO — 2026
   Breakpoints:
     ≥1280   desktop full (snap-mandatory, intacto)
     1024-1279  desktop pequeno
      768-1023  tablet
      481- 767  mobile grande
      ≤480      mobile pequeno
   ═══════════════════════════════════════════════════════════ */

/* ── DESKTOP PEQUENO (1024–1279) ───────────────────────── */
@media (max-width: 1279px) {
  .panel-inner          { padding: 56px 44px; max-width: 960px; }
  .panel-inner.split    { gap: 40px; }
  .side-nav             { right: 16px; gap: 10px; }
}

/* ── TABLET + MOBILE: relaxa snap e altura fixa ────────── */
@media (max-width: 1023px) {
  html, body { overflow: auto; height: auto; }
  body { overflow-x: hidden; }
  #root {
    height: auto;
    overflow-y: visible;
    scroll-snap-type: y proximity;
  }
  .panel {
    min-height: 100vh;
    height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
  .panel-inner { max-height: none; }
  /* esconde decoração que depende de full-viewport scroll */
  #nav-thread { opacity: .4; }
}

/* ── TABLET (768–1023) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .panel-inner          { padding: 48px 36px; max-width: 720px; gap: 18px; }
  .panel-inner.split    { gap: 32px; }
  .side-nav             { right: 14px; gap: 8px; }
  .dot                  { width: 7px; height: 7px; }

  /* mockups menores */
  .it-mockup, .app-3d-wrap { max-width: 90%; margin: 0 auto; }
  .app-screen             { transform: perspective(1100px) rotateY(-7deg) rotateX(2deg); }
  .phone                  { width: 240px; }

  /* grids respiram */
  .worlds-grid, .cards-grid, .compare-wrap { gap: 20px; }
  .cost-wrap              { gap: 24px; }
}

/* ── MOBILE (≤767) ─────────────────────────────────────── */
@media (max-width: 767px) {
  .panel                { overflow-x: hidden; }
  .panel-inner          { padding: 40px 20px; gap: 16px; max-width: 100%; min-width: 0; overflow-x: hidden; }
  .panel-inner.split    { flex-direction: column; gap: 24px; align-items: stretch; }
  .split-left, .split-right { width: 100%; min-width: 0; justify-content: flex-start; }

  /* tipografia compacta — sem quebrar palavras no meio */
  .hed                  { max-width: 100%; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
  .hed.hero-hed         { font-size: clamp(1.8rem, 8vw, 3rem); letter-spacing: -.5px; line-height: 1; }
  .hed.xlarge           { font-size: clamp(1.7rem, 7.5vw, 2.8rem); letter-spacing: -.5px; line-height: 1.05; }
  .hed.large            { font-size: clamp(1.5rem, 6.5vw, 2.4rem); letter-spacing: -.3px; line-height: 1.1; }
  .hed.med              { font-size: clamp(1.2rem, 5vw, 1.8rem); letter-spacing: -.2px; line-height: 1.15; }
  .sub                  { font-size: clamp(.88rem, 3.5vw, 1.05rem); max-width: 100%; }
  .kicker               { font-size: .58rem; letter-spacing: 3px; }

  /* nav lateral */
  .side-nav             { right: 10px; gap: 7px; }
  .dot                  { width: 6px; height: 6px; }
  .dot::after           { display: none; }

  /* progress bar fica fininha */
  .progress-bar         { height: 1.5px; }

  /* esconde ornamentos pesados */
  .fc-abs               { display: none; }
  #nav-thread           { display: none; }

  /* === Seção 05 Worlds === */
  .worlds-grid          { grid-template-columns: 1fr; gap: 16px; }

  /* === Seção 07 Diag (4 problemas) === */
  .cards-grid           { grid-template-columns: 1fr; gap: 14px; }

  /* === Seção 09 InfoTools mockup === */
  .it-mockup            { max-width: 100%; }
  .it-body              { height: auto; min-height: 200px; }
  .it-app-sb            { width: 56px; }
  .it-app-nav-lbl       { display: none; }
  .app-3d-wrap          { max-width: 100%; }
  .app-screen {
    transform: perspective(900px) rotateY(-4deg) rotateX(1deg);
    height: 280px;
    font-size: .55rem;
  }

  /* === Seção 10 Modules === */
  /* já coberto por .cards-grid acima */

  /* === Seção 11 Cost === */
  .cost-wrap            { grid-template-columns: 1fr; gap: 16px; }
  .cost-vs              { display: none; }

  /* === Seção 12 LighIA === */
  .phone                { width: 220px; }
  .lighia-app-sb        { width: 92px; }
  .lighia-nav-item      { font-size: .46rem; padding: 4px 7px; }

  /* === Seção 14 Contract === */
  .val-transition       { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .inc-list             { font-size: .9rem; }

  /* === Seção 18 Compare === */
  .compare-wrap         { grid-template-columns: 1fr; gap: 0; }
  .cmp-divider          { display: none; }

  /* === Seção 19 Risks === */
  .risk-n               { font-size: 1.3rem; min-width: 28px; }

  /* === Seção 21 Calendar — mobile polido === */
  .cal-layout           { flex-direction: column; gap: 18px; max-width: 100%; }
  .cal-side             { flex: unset; width: 100%; gap: 14px; }
  .cal-success          { flex: unset; width: 100%; }
  .cal-box              { flex: unset; width: 100%; padding: 16px 14px; border-radius: 14px; }
  .cal-header           { margin-bottom: 14px; }
  .cal-month-lbl        { font-size: 1rem; }
  .cal-nav-btn          { width: 34px; height: 34px; font-size: 1.15rem; border-radius: 9px; }
  .cal-dow-row          { gap: 3px; margin-bottom: 6px; }
  .cal-dow-row span     { font-size: .58rem; padding: 4px 0; }
  .cal-days-grid        { gap: 3px; }
  .cal-day              { font-size: .82rem; border-radius: 9px; }
  .cal-day.available:hover { transform: none; } /* hover não faz sentido no touch */
  .cal-side-date        { font-size: .9rem; text-align: center; min-height: 22px; }
  .cal-slots-wrap       { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cal-slot             { padding: 12px 4px; font-size: .85rem; border-radius: 9px; }
  .cal-confirm-btn      { padding: 14px 18px; font-size: .92rem; border-radius: 11px; }
  .cal-note             { font-size: .62rem; }
  .cal-success-meet-link,
  .cal-success-gcal-btn { display: block; text-align: center; max-width: 100%; word-break: break-word; }
}

/* ── MOBILE PEQUENO (≤480) ─────────────────────────────── */
@media (max-width: 480px) {
  .panel-inner          { padding: 32px 16px; gap: 14px; }

  .hed.hero-hed         { font-size: clamp(1.6rem, 7.5vw, 2.6rem); letter-spacing: -.3px; }
  .hed.xlarge           { font-size: clamp(1.5rem, 7vw, 2.4rem);   letter-spacing: -.3px; }
  .hed.large            { font-size: clamp(1.35rem, 6vw, 2.1rem);  letter-spacing: -.2px; }
  .hed.med              { font-size: clamp(1.15rem, 4.8vw, 1.7rem); letter-spacing: -.1px; }

  .side-nav             { right: 8px; gap: 6px; }
  .dot                  { width: 5px; height: 5px; }

  /* InfoTools mockup mais raso e sem perspective */
  .app-screen {
    transform: none;
    height: 240px;
    font-size: .5rem;
    border-radius: 14px;
  }
  .it-mockup            { border-radius: 14px; }

  /* LighIA phone ainda menor */
  .phone                { width: 190px; }

  /* Numbers gigantes não estouram */
  .val-new              { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .val-old              { font-size: clamp(1rem, 5vw, 1.3rem); }

  /* Risks mais compactos */
  .risk-n               { font-size: 1.1rem; min-width: 24px; }

  /* Calendar — refinos para tela pequena */
  .cal-box              { padding: 14px 12px; }
  .cal-day              { font-size: .78rem; border-radius: 8px; }
  .cal-month-lbl        { font-size: .95rem; }
  .cal-nav-btn          { width: 32px; height: 32px; }
  .cal-slots-wrap       { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cal-slot             { padding: 11px 2px; font-size: .78rem; }
  .cal-confirm-btn      { padding: 13px 14px; font-size: .88rem; }

  /* CTA seta hero menor */
  .cursor-arrow         { transform: scale(.85); }
}

/* ── MOBILE MUITO PEQUENO (≤360) ───────────────────────── */
@media (max-width: 360px) {
  .panel-inner          { padding: 28px 14px; }
  .side-nav             { display: none; }
  .hed.hero-hed         { font-size: 2.2rem; }
  .hed.xlarge           { font-size: 1.9rem; }
}

/* ── Cal success: link do Meet + botão Google Calendar ── */
.cal-success-meet-link{
  display:inline-block;
  margin:8px 0 18px;
  padding:10px 16px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--t);
  font-family:var(--ft);
  font-size:.95rem;
  font-weight:500;
  text-decoration:none;
  letter-spacing:.01em;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.cal-success-meet-link:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.cal-success-gcal-btn{
  display:inline-block;
  margin-top:6px;
  padding:12px 22px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--purple), var(--cyan));
  color:#0b0b14;
  font-family:var(--ft);
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.01em;
  box-shadow:0 10px 30px -12px color-mix(in oklab, var(--purple) 55%, transparent);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cal-success-gcal-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px -12px color-mix(in oklab, var(--purple) 70%, transparent);
}

/* ── Inputs opcionais no calendário (lead identifica-se) ── */
.cal-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 2px;
}
.cal-input {
  width: 100%;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.cal-input::placeholder { color: rgba(255,255,255,.45); }
.cal-input:focus {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.10);
}
@media (max-width: 480px) {
  .cal-input { font-size: 12px; padding: 7px 10px; }
}