/* ============================================================
   TOP WHEELS — Homepage Components (cluster, conversation,
   explorer, tracker, testimonials). Shared by index.html and
   Method.html. Tokens mirror the site; :root below only adds
   the few tokens the site doesn't already define.
   ============================================================ */

:root {
  --cyan-deep: #0284C7;
  --violet-deep: #7C3AED;
  --amber-light: #FBBF24;
  --dark-deepest: #040810;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container-max: 1200px;
}

.tw-section { position: relative; }

/* section label + display heading helpers used by the lifted component markup */
.mlabel {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 12px;
}
.mlabel.center { justify-content: center; }
.mlabel::before { content: ''; width: 30px; height: 1px; background: var(--cyan); }
.mlabel.center::after { content: ''; width: 30px; height: 1px; background: var(--cyan); }
h3.disp { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; color: var(--white); }

/* =====================================================================
   ELEMENT 1 — UNWINDING DEVICE CLUSTER
   ===================================================================== */
.unwind-scroll { position: relative; height: 280vh; }
.unwind-pin {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 1fr; align-content: center;
  overflow: hidden;
}
.unwind-pin .ambient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(14,165,233,0.12), transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(139,92,246,0.08), transparent 55%);
}
.unwind-copy {
  position: relative; z-index: 3; text-align: center;
  max-width: 640px; margin: 0 auto 4px; padding: 0 24px;
}
.unwind-copy h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; margin: 14px 0 0; }
.unwind-copy .sub {
  color: var(--text-dim); font-size: 1.02rem; margin: 14px auto 0; max-width: 460px;
  opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.unwind-copy.revealed .sub { opacity: 1; transform: translateY(0); }

.unwind-stage {
  position: relative; z-index: 2;
  height: 560px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
}
.panel {
  position: absolute;
  will-change: transform;
  backface-visibility: hidden;
}

/* phone frame — modern iPhone */
.device-phone {
  position: relative;
  width: 270px; height: 548px; border-radius: 52px;
  padding: 10px;
  background: linear-gradient(145deg, #4A5468 0%, #232C40 22%, #0E1422 54%, #2A3346 82%, #444D62 100%);
  box-shadow: 0 42px 84px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.18), inset 0 -1px 1px rgba(0,0,0,0.4);
}
.device-phone::before { /* inner black rim between frame and screen */
  content: ''; position: absolute; inset: 5px; border-radius: 49px; background: #05070D; z-index: 0;
}
.device-phone .screen {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border-radius: 45px; overflow: hidden;
  background: var(--dark-deepest);
}
/* side buttons */
.phone-btn { position: absolute; z-index: 0; background: linear-gradient(180deg, #424B5E, #20283A); }
.phone-btn.action { left: -2.5px; top: 96px; width: 3px; height: 28px; border-radius: 3px 0 0 3px; }
.phone-btn.vol-up { left: -2.5px; top: 142px; width: 3px; height: 50px; border-radius: 3px 0 0 3px; }
.phone-btn.vol-dn { left: -2.5px; top: 202px; width: 3px; height: 50px; border-radius: 3px 0 0 3px; }
.phone-btn.power  { right: -2.5px; top: 168px; width: 3px; height: 70px; border-radius: 0 3px 3px 0; }
/* Dynamic Island */
.dyn-island {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 98px; height: 28px; background: #000; border-radius: 16px; z-index: 6;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 9px;
}
.dyn-island .cam {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #29547F 0%, #0A1626 55%, #05080F 100%);
  box-shadow: inset 0 0 2px rgba(90,150,210,0.7);
}
/* home indicator */
.home-bar {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 5px; border-radius: 3px; background: rgba(248,250,252,0.85); z-index: 6;
}

/* dashboard panel card */
.device-card {
  width: 388px; min-height: 500px; border-radius: 16px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(rgba(10,16,32,0.97), rgba(10,16,32,0.97)) padding-box,
    linear-gradient(135deg, #0EA5E9 0%, #06B6D4 55%, #14B8A6 100%) border-box;
  border: 1.5px solid transparent;
  overflow: hidden;
  box-shadow: 0 36px 70px rgba(0,0,0,0.55);
}
.device-card.violet {
  background:
    linear-gradient(rgba(10,16,32,0.96), rgba(10,16,32,0.96)) padding-box,
    linear-gradient(135deg, #8B5CF6 0%, #0EA5E9 100%) border-box;
}

/* generic screen ui inside devices */
.scr-bar { display: flex; align-items: center; gap: 10px; padding: 17px 18px; border-bottom: 1px solid var(--dark-border); }
.scr-bar .glyph { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.3); color: var(--cyan); flex: 0 0 auto; }
.scr-bar .glyph.green { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.35); color: var(--green); }
.scr-bar .glyph.violet { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.35); color: var(--violet); }
.scr-bar .glyph.amber { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: var(--amber); }
.scr-bar .ttl { font-size: 0.92rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.scr-bar .ttl span { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 500; text-transform: uppercase; margin-top: 3px; }
.scr-bar .live {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 6px;
}
.scr-bar .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.scr-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: space-between; }
.scr-row { display: flex; align-items: center; gap: 11px; font-size: 0.92rem; }
.scr-row .ck { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.35); display: grid; place-items: center; color: var(--cyan); }
.scr-row .ck.done { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.35); color: var(--green); }
.scr-row .ck svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.scr-row .nm { color: var(--text); }
.scr-row .st { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.scr-divider { height: 1px; background: var(--dark-border); margin: 3px 0; }

/* phone payment ui */
.pay-screen { padding: 52px 20px 30px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.pay-hero { text-align: center; }
.pay-hero .lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.pay-hero .amt { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 600; color: var(--white); line-height: 1; margin-top: 8px; }
.pay-hero .amt span { font-size: 1rem; color: var(--text-dim); }
.pay-hero .next { font-size: 0.72rem; color: var(--text-dim); margin-top: 8px; }
.pay-chip {
  align-self: center; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
}
.pay-chip svg { width: 11px; height: 11px; stroke: var(--green); stroke-width: 2.5; fill: none; }
.pay-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: auto; padding: 0 4px; }
.pay-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--cyan-light), var(--cyan-deep)); }
.pay-bars i.future { background: var(--dark-subtle); }
.pay-foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }

.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  transition: opacity 0.4s ease;
}
.scroll-hint .mouse {
  width: 22px; height: 34px; border: 1.5px solid var(--text-muted); border-radius: 12px; position: relative;
}
.scroll-hint .mouse::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px; border-radius: 2px; background: var(--cyan);
  animation: wheel 1.6s var(--ease) infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } }

/* =====================================================================
   ELEMENT 2 — LIVING CONVERSATION
   ===================================================================== */
.convo-wrap { padding: 72px 0 88px; }
.convo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  max-width: var(--container-max); margin: 0 auto; padding: 0 24px;
}
.convo-copy h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; margin: 16px 0 18px; }
.convo-copy p { color: var(--text-dim); font-size: 1.02rem; max-width: 440px; }
.convo-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.convo-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: var(--text); }
.convo-points .ck {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.35);
  display: grid; place-items: center; color: var(--cyan);
}
.convo-points .ck svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }

.convo-phone {
  width: 100%; max-width: 380px; margin: 0 auto; height: 600px;
  border-radius: 38px; padding: 12px;
  background: linear-gradient(160deg, #1A2236, #0A0F1C);
  border: 1px solid #243150;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.convo-screen {
  width: 100%; height: 100%; border-radius: 28px; overflow: hidden;
  background: var(--dark-deepest); position: relative; display: flex; flex-direction: column;
  border: 1px solid #1A2440;
}
.convo-titlebar {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--dark-border); background: rgba(10,16,32,0.6);
}
.convo-stack { display: flex; }
.convo-stack .av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--dark-deepest); margin-left: -8px; background-size: cover; background-position: center; }
.convo-stack .av:first-child { margin-left: 0; }
.convo-titlebar .meta .nm { font-size: 0.78rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.convo-titlebar .meta .sub { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.convo-titlebar .live { margin-left: auto; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.convo-titlebar .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulseGreen 1.8s var(--ease) infinite; }
@keyframes pulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.45);} 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0);} }

.convo-thread {
  flex: 1; overflow: hidden; padding: 16px 14px; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 100%);
}
.cmsg { display: flex; gap: 8px; max-width: 86%; opacity: 0; transform: translateY(14px); }
.cmsg.show { animation: msgIn 0.42s var(--ease) forwards; }
@keyframes msgIn { to { opacity: 1; transform: translateY(0); } }
.cmsg.right { align-self: flex-end; flex-direction: row-reverse; }
.cmsg .cav { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; align-self: flex-end; }
.cmsg .cav.ai { background: linear-gradient(135deg, #0EA5E9, #06B6D4); display: grid; place-items: center; }
.cmsg .cav.ai svg { width: 15px; height: 15px; }
.cmsg .ccol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmsg .cname { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 0 4px; }
.cmsg.right .cname { text-align: right; }
.cbubble {
  padding: 9px 13px; border-radius: 15px; font-size: 0.82rem; line-height: 1.4; color: var(--text);
  background: var(--dark-elevated); border: 1px solid var(--dark-border); border-bottom-left-radius: 5px;
}
.cmsg.right .cbubble {
  background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(6,182,212,0.14));
  border-color: rgba(14,165,233,0.32); color: var(--white);
  border-bottom-left-radius: 15px; border-bottom-right-radius: 5px;
}
.cbubble b { color: var(--cyan-light); font-weight: 600; }
.cbubble.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.cbubble.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 0.9s infinite; }
.cbubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.cbubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0);} 30% { opacity: 1; transform: translateY(-3px);} }

/* status receipt card inside thread */
.creceipt {
  margin-top: 2px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--dark-border); background: rgba(6,11,24,0.7); min-width: 200px;
}
.creceipt .rhead { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--dark-border); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.creceipt .rhead .rg { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.creceipt .rbody { display: flex; align-items: center; gap: 10px; padding: 11px; }
.creceipt .ricon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); color: var(--green); }
.creceipt .ricon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.creceipt .rmain .rt { font-size: 0.78rem; font-weight: 600; color: var(--white); }
.creceipt .rmain .rs { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 2px; }

/* =====================================================================
   ELEMENT 3 — T.O.P. METHOD CAPABILITY EXPLORER (rail + detail panel)
   ===================================================================== */
.fan-wrap { padding: 72px 0 96px; text-align: center; }
.fan-head { max-width: 620px; margin: 0 auto; padding: 0 24px; }
.fan-head p { color: var(--text-dim); margin: 14px auto 0; max-width: 480px; }

.explorer {
  display: grid; grid-template-columns: 372px 1fr; gap: 20px;
  max-width: 1040px; margin: 44px auto 0; padding: 0 24px; text-align: left;
  align-items: stretch;
}

/* ---- left rail ---- */
.ex-rail { display: flex; flex-direction: column; gap: 8px; }
.ex-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: var(--dark-card); border: 1px solid var(--dark-border);
  color: var(--text); transition: all 0.28s var(--ease); position: relative; overflow: hidden;
}
.ex-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cyan); transform: scaleY(0); transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.ex-item:hover { border-color: rgba(56,189,248,0.4); background: var(--dark-elevated); }
.ex-item.active { border-color: rgba(56,189,248,0.55); background: var(--dark-elevated); }
.ex-item.active::before { transform: scaleY(1); }

.ex-ic {
  width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(155deg, rgba(36,49,80,0.96), rgba(11,17,34,0.98));
  border: 1px solid rgba(56,189,248,0.16); color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 12px rgba(0,0,0,0.35);
  position: relative; transition: all 0.28s var(--ease);
}
.ex-ic::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 45%, transparent 62%);
}
.ex-ic svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: currentColor; }
.ex-item:hover .ex-ic { color: var(--cyan-light); }
.ex-item.active .ex-ic {
  color: var(--cyan-light); border-color: var(--cyan);
  background: linear-gradient(155deg, rgba(14,165,233,0.30), rgba(7,42,72,0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 18px rgba(14,165,233,0.35);
}
.ex-text { min-width: 0; flex: 1; }
.ex-name { display: block; font-size: 0.98rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.ex-sub { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.ex-chev { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--text-muted); stroke-width: 2; fill: none; opacity: 0; transform: translateX(-4px); transition: all 0.28s var(--ease); }
.ex-item.active .ex-chev { opacity: 1; transform: translateX(0); stroke: var(--cyan); }

/* ---- right detail panel ---- */
.ex-panel {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 38px 40px; min-height: 420px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    linear-gradient(rgba(10,16,32,0.97), rgba(10,16,32,0.97)) padding-box,
    linear-gradient(135deg, #0EA5E9, #14B8A6) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.ex-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 88% 14%, rgba(14,165,233,0.12), transparent 52%);
}
.ex-watermark {
  position: absolute; top: -28px; right: -24px; z-index: 0;
  color: var(--cyan); opacity: 0.07; pointer-events: none;
}
.ex-watermark svg { width: 240px; height: 240px; fill: currentColor; }

.ex-body { position: relative; z-index: 1; }
.ex-tag {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
}
.ex-tag .num { color: var(--text-muted); }
.ex-tag::before { content: ''; width: 24px; height: 1px; background: var(--cyan); }
.ex-panel h4 { font-family: var(--font-body); font-size: 1.7rem; font-weight: 700; color: var(--white); margin: 16px 0 14px; line-height: 1.12; }
.ex-panel p { font-size: 0.98rem; color: var(--text-dim); line-height: 1.65; margin: 0; max-width: 460px; }
.ex-feat { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.ex-feat li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--text); }
.ex-feat .ck { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.34); display: grid; place-items: center; color: var(--green); }
.ex-feat .ck svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.ex-fade { animation: exFade 0.42s var(--ease); }
@keyframes exFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================================
   ELEMENT 4 — DEAL IN PROGRESS TRACKER
   ===================================================================== */
.tracker-wrap { padding: 72px 0 96px; }
.tracker-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.tracker-copy h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; margin: 16px 0 18px; }
.tracker-copy p { color: var(--text-dim); font-size: 1.02rem; max-width: 440px; }
.tracker-meta { display: flex; gap: 28px; margin-top: 30px; }
.tracker-meta .m .v { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: var(--white); line-height: 1; }
.tracker-meta .m .l { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }

.tracker-card {
  border-radius: var(--radius-lg); padding: 26px; position: relative;
  background:
    linear-gradient(rgba(10,16,32,0.96), rgba(10,16,32,0.96)) padding-box,
    linear-gradient(135deg, #0EA5E9 0%, #06B6D4 55%, #14B8A6 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.tracker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tracker-head .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.tracker-head .pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,158,11,0.45); animation: pulseAmber 1.6s var(--ease) infinite; }
@keyframes pulseAmber { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5);} 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0);} }
.tracker-head .id { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); }

.tracker-veh { margin-bottom: 20px; }
.tracker-veh h4 { font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; color: var(--white); margin: 0 0 4px; }
.tracker-veh .loc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-dim); }
.tracker-veh .loc svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* phases (accordion-style, echoing the real tracker) */
.phases { display: flex; flex-direction: column; gap: 8px; }
.phase {
  border: 1px solid var(--dark-border); border-radius: 12px; overflow: hidden;
  background: rgba(6,11,24,0.5);
}
.phase.open { border-color: rgba(14,165,233,0.4); }
.phase-bar {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  user-select: none;
}
.phase.locked { opacity: 0.62; }
.phase-bar .pdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.phase-bar .pdot.done { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.phase-bar .pdot.active { background: var(--amber); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.phase-bar .pdot.pending { background: transparent; border: 1.5px solid var(--text-muted); }
.phase-bar .pnm { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); font-weight: 500; }
.phase-bar .pcount { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-muted); }
.phase-bar .lock { width: 13px; height: 13px; stroke: var(--text-muted); stroke-width: 1.8; fill: none; opacity: 0.7; }
.phase-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.phase.open .phase-body { max-height: 360px; }
.phase-items { list-style: none; margin: 0; padding: 6px 15px 15px 36px; display: flex; flex-direction: column; gap: 12px; }
.phase-items li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.phase-items .marker { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.phase-items .marker.done { background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.35); color: var(--cyan); }
.phase-items .marker.done svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.phase-items .marker.active::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(245,158,11,0.45); animation: pulseAmber 1.6s var(--ease) infinite; }
.phase-items .marker.pending { border: 1.5px solid #2A3656; }
.phase-items .nm { color: var(--text-dim); white-space: nowrap; }
.phase-items li.done .nm { color: var(--cyan); }
.phase-items li.active .nm { color: var(--white); font-weight: 500; }
.phase-items .leader { flex: 1; border-bottom: 1px dotted #1F2C4B; transform: translateY(-2px); min-width: 10px; }
.phase-items .st { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.phase-items li.done .st { color: var(--cyan); }
.phase-items li.active .st { color: var(--amber); }
.phase-items li.pending .st { color: var(--text-muted); }

.tracker-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.tracker-track { flex: 1; height: 6px; background: rgba(6,11,24,0.8); border: 1px solid var(--dark-border); border-radius: var(--radius-pill); overflow: hidden; }
.tracker-fill { height: 100%; width: 62%; background: linear-gradient(90deg, #0EA5E9, #06B6D4 70%, #14B8A6); border-radius: var(--radius-pill); box-shadow: 0 0 12px rgba(14,165,233,0.5); }
.tracker-num { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: var(--white); min-width: 42px; text-align: right; }

/* =====================================================================
   ELEMENT 5 — TESTIMONIALS
   ===================================================================== */
.testi-wrap { padding: 80px 0 96px; text-align: center; }
.testi-head { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.testi-head h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; margin: 14px 0 0; }
.testi-head p { color: var(--text-dim); margin: 14px auto 0; max-width: 460px; }

.testi-stats { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin: 40px auto 12px; }
.testi-stats .s .v { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -0.02em; }
.testi-stats .s .v em { font-style: normal; color: var(--cyan); }
.testi-stats .s .l { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; letter-spacing: 0.02em; }

.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: var(--container-max); margin: 44px auto 0; padding: 0 24px; text-align: left;
}
.testi-card {
  border-radius: var(--radius-lg); padding: 26px; position: relative;
  background: var(--dark-card); border: 1px solid var(--dark-border);
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.testi-card:hover { border-color: rgba(14,165,233,0.35); transform: translateY(-3px); }
.testi-card.featured {
  background:
    linear-gradient(rgba(10,16,32,0.96), rgba(10,16,32,0.96)) padding-box,
    linear-gradient(135deg, #0EA5E9, #14B8A6) border-box;
  border: 1.5px solid transparent;
}
.testi-card .stars { display: flex; gap: 3px; color: var(--amber); }
.testi-card .stars svg { width: 15px; height: 15px; fill: currentColor; }
.testi-quote { font-size: 0.98rem; line-height: 1.6; color: var(--text); flex: 1; }
.testi-quote.placeholder { color: var(--text-muted); font-style: italic; }
.testi-foot { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; border: 1px solid var(--dark-border); }
.testi-avatar.ph { background: linear-gradient(135deg, var(--dark-elevated), var(--dark-subtle)); display: grid; place-items: center; color: var(--text-muted); }
.testi-avatar.ph svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.testi-foot .who .nm { font-size: 0.9rem; font-weight: 600; color: var(--white); }
.testi-foot .who .nm.ph { color: var(--text-muted); }
.testi-foot .who .role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.testi-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 9px; border: 1px dashed var(--dark-subtle); border-radius: var(--radius-pill);
}

.placeholder-note {
  max-width: 640px; margin: 40px auto 0; padding: 16px 20px;
  border: 1px dashed var(--dark-subtle); border-radius: 12px;
  font-size: 0.84rem; color: var(--text-dim); display: flex; align-items: center; gap: 12px; justify-content: center;
}
.placeholder-note svg { width: 16px; height: 16px; stroke: var(--amber); stroke-width: 1.6; fill: none; flex: 0 0 auto; }

/* =====================================================================
   METHOD TEASER (compact clickable T.O.P. row → /method route)
   ===================================================================== */
.method-teaser { padding: 112px 0; }
.method-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 52px;
  max-width: var(--container-max); margin-left: auto; margin-right: auto; padding: 0 24px;
}
.method-tile {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  padding: 28px 14px; border-radius: 14px; text-decoration: none;
  background: var(--dark-card); border: 1px solid var(--dark-border);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.method-tile:hover {
  transform: translateY(-4px); border-color: rgba(56,189,248,0.45); background: var(--dark-elevated);
  box-shadow: 0 16px 40px rgba(14,165,233,0.10);
}
.method-tile .ex-ic { width: 56px; height: 56px; border-radius: 15px; }
.method-tile .ex-ic svg { width: 28px; height: 28px; }
.method-tile:hover .ex-ic {
  color: var(--cyan-light); border-color: var(--cyan);
  background: linear-gradient(155deg, rgba(14,165,233,0.30), rgba(7,42,72,0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 18px rgba(14,165,233,0.35);
}
.method-tile .mt-name { font-size: 0.84rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.method-tile:hover .mt-name { color: var(--white); }
.method-tile .mt-sub { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }

.method-strip {
  display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap;
  max-width: 880px; margin: 56px auto 0; padding: 24px 28px;
  border: 1px solid var(--dark-border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(14,165,233,0.04), transparent);
}
.method-strip .ms-stat { text-align: center; }
.method-strip .ms-stat .v { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--white); line-height: 1; }
.method-strip .ms-stat .v em { font-style: normal; color: var(--cyan); }
.method-strip .ms-stat .l { font-size: 0.74rem; color: var(--text-dim); margin-top: 7px; letter-spacing: 0.02em; }
.method-strip .ms-sep { width: 1px; height: 38px; background: var(--dark-border); }
.method-cta { text-align: center; margin-top: 44px; }
@media (max-width: 760px) { .method-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px) { .method-row { grid-template-columns: repeat(2, 1fr); } .method-strip { gap: 24px; } }

/* =====================================================================
   METHOD PAGE — page header + section scaffolding for Method.html
   ===================================================================== */
.method-hero { padding: 150px 0 72px; text-align: center; position: relative; }
.method-hero .mlabel { margin-bottom: 18px; }
.method-hero h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 0.98; color: var(--white); margin: 0;
}
.method-hero h1 .cy { color: var(--cyan); }
.method-hero p { color: var(--text-dim); font-size: 1.08rem; line-height: 1.65; max-width: 600px; margin: 22px auto 0; }
.method-sec-head { max-width: 680px; margin: 0 auto 4px; padding: 0 24px; text-align: center; }
.method-sec-head h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.04; color: var(--white); margin: 14px 0 0; }
.method-sec-head p { color: var(--text-dim); margin: 14px auto 0; max-width: 520px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .convo-grid, .tracker-grid { grid-template-columns: 1fr; gap: 40px; }
  .explorer { grid-template-columns: 1fr; }
  .ex-panel { min-height: 360px; }
  .testi-grid { grid-template-columns: 1fr; }
  .element-head .note { max-width: none; }
}
@media (max-width: 600px) {
  .lab-nav { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}