/* Track record wall, engagement loop and Good questions. Manrope headings, DM Sans text. */
.tr,.loop,.gq{--h:Manrope,'DM Sans',system-ui,sans-serif;--b:'DM Sans',Inter,system-ui,sans-serif;font-family:var(--b)}
.tr-label{font:600 12px var(--b);letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
.tr h2,.loop h2,.gq h2{font-family:var(--h);font-weight:700;letter-spacing:-.05em;line-height:1.02;margin:0}

/* ---------- Track record (draggable tilted cards) ---------- */
.tr{background:#141414;color:#f4f1ea;padding:clamp(90px,12vh,140px) 0 clamp(80px,10vh,120px);overflow:hidden}
.tr-head{width:min(1320px,calc(100% - 12vw));margin:0 auto 54px}
.tr-head .tr-label{color:#9fb7c9}
.tr h2{font-size:clamp(40px,4.8vw,78px);max-width:16ch;color:#fff}
.tr h2 span{color:#8fd3ec}
.tr-sub{margin:20px 0 0;color:#a9a9a2;font-size:17px;max-width:520px}
.tr-track{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.tr-track::-webkit-scrollbar{display:none}
.tr-track.is-drag{cursor:grabbing}
.tr-rail{display:flex;gap:26px;padding:30px 6vw 50px;width:max-content;align-items:center}
.trc{flex:none;width:clamp(260px,24vw,340px);min-height:330px;padding:28px 26px 26px;border-radius:26px;display:flex;flex-direction:column;transform:rotate(var(--r,0deg)) translateY(var(--y,0px));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);user-select:none}
.trc:nth-child(4n+1){--r:-3deg;--y:10px}.trc:nth-child(4n+2){--r:2.5deg;--y:-14px}.trc:nth-child(4n+3){--r:-1.5deg;--y:18px}.trc:nth-child(4n){--r:3deg;--y:-6px}
.trc:hover{transform:rotate(0) translateY(-10px) scale(1.02);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.trc-org{font:600 11px var(--b);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.trc b{display:block;font:700 clamp(46px,4.4vw,64px)/1 var(--h);letter-spacing:-.05em;margin:auto 0 14px;padding-top:34px}
.trc p{margin:0;font-size:15.5px;line-height:1.55;opacity:.92}
.trc a{margin-top:18px;font-weight:600;font-size:14px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px}
.c-ice{background:#d6e9f6;color:#0b2033}.c-navy{background:#0f2a45;color:#eaf4fb}.c-mint{background:#bfe8d3;color:#0d2a1e}
.c-cream{background:#f3ecdc;color:#2a2416}.c-coral{background:#f2a98e;color:#2b120a}.c-lilac{background:#d9cff5;color:#1e1638}

/* ---------- Engagement loop (Corexi-style) ---------- */
.loop{background:radial-gradient(70% 70% at 50% 45%,#13305a 0%,#0a1630 55%,#060c1c 100%);color:#e8eef9;padding:clamp(90px,12vh,140px) 0 clamp(80px,10vh,120px)}
.loop-head{width:min(1320px,calc(100% - 12vw));margin:0 auto 40px;text-align:center}
.loop-head .tr-label{color:#8fb0ff}
.loop h2{font-size:clamp(38px,4.4vw,70px);color:#fff}
.loop h2 span{color:#9fbaff}
.loop-stage{position:relative;width:min(1180px,calc(100% - 8vw));height:620px;margin:0 auto}
.loop-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-svg .trk{fill:none;stroke:rgba(150,180,255,.22);stroke-width:1.5}
.loop-svg .chev{fill:none;stroke:rgba(170,195,255,.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lc{position:absolute;width:300px;padding:20px 20px 18px;border-radius:18px;background:rgba(14,26,52,.82);border:1px solid rgba(140,170,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .5s,box-shadow .5s,transform .5s;z-index:2}
.lc[data-step="0"]{left:0;top:0}.lc[data-step="1"]{right:0;top:0}.lc[data-step="2"]{right:0;bottom:0}.lc[data-step="3"]{left:0;bottom:0}
.lc.is-on{border-color:rgba(160,185,255,.75);box-shadow:0 0 0 1px rgba(160,185,255,.35),0 20px 60px -10px rgba(90,120,255,.45);transform:translateY(-4px)}
.lc-n{font:600 11px var(--b);letter-spacing:.16em;text-transform:uppercase;color:#8fb0ff}
.lc h3{font:700 22px/1.15 var(--h);letter-spacing:-.03em;color:#fff;margin:8px 0 12px}
.lc p{margin:12px 0 0;font-size:14px;line-height:1.5;color:#aebcd6}
.lc-tags{display:flex;flex-wrap:wrap;gap:6px}
.lc-tags i{font-style:normal;font-size:12px;padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#dfe7f6}
.lc-bars{display:grid;gap:7px}
.lc-bars span{position:relative;font-size:12px;color:#dfe7f6;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.lc-bars span:before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,rgba(110,140,255,.35),rgba(110,220,200,.3));z-index:-1}
.lc-bars span{isolation:isolate}
.loop-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;text-align:center;z-index:1}
.core-ring{width:150px;height:150px;transform:rotate(-90deg);filter:drop-shadow(0 0 24px rgba(120,150,255,.45))}
.cr-bg{fill:rgba(10,20,45,.6);stroke:rgba(150,180,255,.18);stroke-width:5}
.cr-fg{fill:none;stroke:#8fa8ff;stroke-width:5;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .3s linear}
.core-txt{position:absolute;left:0;right:0;top:44px}
.core-txt small{display:block;font:600 10px var(--b);letter-spacing:.2em;text-transform:uppercase;color:#8fb0ff}
.core-txt b{font:700 44px/1.1 var(--h);letter-spacing:-.04em;color:#fff}
.core-cap{margin:16px auto 0;max-width:260px;font-size:15px;line-height:1.45;color:#c7d3ea;min-height:44px}
.loop-cta{text-align:center;margin-top:40px}
@media(max-width:900px){
  .loop-stage{height:auto;display:grid;gap:16px}
  .loop-svg{display:none}
  .lc{position:relative;inset:auto!important;width:auto}
  .loop-core{position:relative;left:auto;top:auto;transform:none;width:auto;order:-1;margin-bottom:10px}
}

/* ---------- Good questions (Wispr-style) ---------- */
.gq{background:#f4f1e8;color:#1b2420;padding:clamp(90px,12vh,140px) 6vw}
body.dark .gq{background:#0e1512;color:#e8efe9}
.gq h2{text-align:center;font-size:clamp(44px,5vw,80px);margin-bottom:46px;color:inherit}
.gq h2 span{color:#2f6f57}
body.dark .gq h2 span{color:#7fd6ae}
.gq-box{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;border-radius:28px;background:#dedccf;padding:12px;gap:12px}
body.dark .gq-box{background:#1b2420}
.gq-list{background:#0f4a37;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:6px}
.gq-list button{text-align:left;background:none;border:0;border-radius:12px;padding:14px 16px;color:#d8efe4;font:500 15.5px/1.4 var(--b);cursor:pointer;transition:background .25s}
.gq-list button:hover{background:rgba(255,255,255,.06)}
.gq-list button[aria-selected=true]{background:rgba(255,255,255,.12);color:#fff}
.gq-list button:focus-visible{outline:2px solid #bfeedd;outline-offset:2px}
.gq-answer{padding:26px 26px 24px;border-radius:20px;background:#ecebe2}
body.dark .gq-answer{background:#232d28}
.gq-q{margin:0 0 16px;font-size:13px;color:#5b6660}
body.dark .gq-q{color:#9fb0a7}
.gq-a{background:#fff;border-radius:16px;padding:20px 22px;font-size:16px;line-height:1.65;color:#1b2420;box-shadow:0 10px 30px -18px rgba(0,0,0,.3)}
body.dark .gq-a{background:#101814;color:#e8efe9}
.gq-a p{margin:0 0 12px}.gq-a p:last-child{margin:0}
.gq-a a{color:#0f4a37;font-weight:600}
body.dark .gq-a a{color:#7fd6ae}
@media(max-width:820px){.gq-box{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.trc{transition:none}}
.gq-list button{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;transform:none!important;color:#d8efe4!important;font:500 15.5px/1.4 'DM Sans',Inter,system-ui,sans-serif!important;padding:14px 16px!important;border-radius:12px!important;width:100%}
.gq-list button[aria-selected=true]{background:rgba(255,255,255,.13)!important;color:#fff!important}
.gq-list button:hover{background:rgba(255,255,255,.07)!important}
.core-txt{top:50px;z-index:2}.core-txt small{letter-spacing:.14em}