/* =========================================================================
   Trusts Matters — V1.3 visual layer
   Trust Loop · Ecosystem · Day-One Pipeline · Defense Canvas · Comparison ·
   Trust Architecture.  Loaded after styles-v3.css; uses its tokens.
   ========================================================================= */

/* ============ 02 · TRUST LOOP ============ */
.tloop-s{overflow:hidden}
.tloop{position:relative;width:min(560px,88vw);aspect-ratio:1;margin:8px auto 0;--rot:0deg}
.tloop__rot{position:absolute;inset:6%;transform:rotate(var(--rot));will-change:transform}
.tloop__rot::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.14)}
.tloop__rot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -20deg,transparent 0%,rgba(19,164,176,.6) 16%,rgba(95,227,209,.35) 26%,transparent 38%);
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 83%);
          mask:radial-gradient(closest-side,transparent 82%,#000 83%)}
.tnode{position:absolute;transform:translate(-50%,-50%);z-index:2}
.tnode__in{transform:rotate(calc(var(--rot) * -1));display:flex;flex-direction:column;align-items:center;gap:8px;will-change:transform}
.tnode__dot{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--ink);border:1px solid rgba(19,164,176,.55);
  box-shadow:0 0 26px rgba(19,164,176,.22), inset 0 0 18px rgba(19,164,176,.08);
  font-family:var(--font-d);font-weight:600;font-size:.82rem;color:#fff;letter-spacing:.02em}
.tnode--gold .tnode__dot{border-color:rgba(224,190,120,.65);color:var(--gold-bright);
  box-shadow:0 0 30px rgba(199,164,90,.3), inset 0 0 18px rgba(199,164,90,.1)}
.tnode__sub{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.tloop__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:32%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(120% 120% at 30% 20%,#123B5A,var(--navy-deep));
  border:1px solid rgba(19,164,176,.4);box-shadow:0 0 70px rgba(19,164,176,.22)}
.tloop__hub img{height:44px;filter:brightness(0) invert(1);opacity:.95}
.tloop__hub span{font-family:var(--font-d);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mint)}

/* ============ 03 · ECOSYSTEM ============ */
.eco{position:relative;width:min(860px,100%);aspect-ratio:860/520;margin-inline:auto}
.eco__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco__lines path{fill:none;stroke:rgba(19,164,176,.28);stroke-width:1.5;
  stroke-dasharray:5 7;animation:ecoDash 30s linear infinite;transition:stroke .3s}
.eco__lines path.hot{stroke:rgba(95,227,209,.85);filter:drop-shadow(0 0 6px rgba(95,227,209,.5))}
@keyframes ecoDash{to{stroke-dashoffset:-600}}
.eco__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 34px;border-radius:22px;
  background:radial-gradient(140% 140% at 30% 15%,#123B5A,var(--navy-deep));
  border:1px solid rgba(19,164,176,.45);box-shadow:0 0 60px rgba(19,164,176,.25)}
.eco__hub img{height:52px;filter:brightness(0) invert(1)}
.eco__hub span{font-family:var(--font-d);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.eco__node{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer;
  font-family:var(--font-d);font-weight:600;font-size:.92rem;color:var(--text);letter-spacing:.02em;
  padding:13px 24px;border-radius:999px;background:rgba(6,19,32,.82);border:1px solid var(--line);
  transition:transform .25s var(--ease),border-color .25s,color .25s,box-shadow .25s;white-space:nowrap}
.eco__node:hover{transform:translate(-50%,-50%) scale(1.07);border-color:rgba(95,227,209,.6);color:#fff}
.eco__node.active{border-color:var(--mint);color:#fff;
  box-shadow:0 0 26px rgba(95,227,209,.3);background:rgba(14,124,134,.18)}
.eco__panel{max-width:660px;margin:34px auto 0;text-align:center;min-height:120px}
.eco__panel b{font-family:var(--font-d);font-size:1.25rem;color:#fff;letter-spacing:-.01em}
.eco__panel p{margin:8px auto 14px;color:var(--muted);font-size:1rem;max-width:34em;
  transition:opacity .3s}
.eco__panel .chips{justify-content:center}
.eco__panel.swap p,.eco__panel.swap b{opacity:0}

/* ============ 04 · DAY-ONE PIPELINE ============ */
.pipe{position:relative;width:100%;aspect-ratio:1100/250;margin-top:10px}
.pipe svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pipe__path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5}
.pipe__glow{fill:none;stroke:url(#pipeGrad);stroke-width:2;stroke-dasharray:26 14;opacity:0;transition:opacity .8s}
.pipe.flow .pipe__glow{opacity:1;animation:pipeFlow 2.6s linear infinite}
@keyframes pipeFlow{to{stroke-dashoffset:-160}}
.pipe__pkt{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 12px rgba(95,227,209,.8);opacity:0;offset-rotate:0deg;
  offset-path:path("M40,125 C220,35 330,215 550,125 C770,35 880,215 1060,125")}
.pipe.flow .pipe__pkt{animation:pktRun 5.2s linear infinite}
.pipe.flow .pipe__pkt:nth-child(2){animation-delay:1.7s}
.pipe.flow .pipe__pkt:nth-child(3){animation-delay:3.4s}
@keyframes pktRun{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
.pst{position:absolute;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:9px;z-index:2}
.pst__dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);border:1px solid var(--line);color:var(--dim);transition:all .5s var(--ease)}
.pst__dot svg{width:20px;height:20px}
.pst b{font-family:var(--font-d);font-weight:600;font-size:.85rem;color:var(--muted);transition:color .5s}
.pipe.flow .pst .pst__dot{border-color:rgba(19,164,176,.6);color:var(--mint);
  box-shadow:0 0 20px rgba(19,164,176,.25)}
.pipe.flow .pst b{color:#fff}
.pst--sec .pst__dot{border-style:dashed}
.pipe.flow .pst--sec .pst__dot{border-color:var(--gold-bright);color:var(--gold-bright);border-style:solid;
  box-shadow:0 0 24px rgba(199,164,90,.35)}
.pipe.flow .pst{animation:pstIn .7s var(--ease) both}
.pipe.flow .pst:nth-of-type(2){animation-delay:.15s}.pipe.flow .pst:nth-of-type(3){animation-delay:.3s}
.pipe.flow .pst:nth-of-type(4){animation-delay:.45s}.pipe.flow .pst:nth-of-type(5){animation-delay:.6s}
.pipe.flow .pst:nth-of-type(6){animation-delay:.75s}.pipe.flow .pst:nth-of-type(7){animation-delay:.9s}
@keyframes pstIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.pipe__note{text-align:center;color:var(--dim);font-size:.92rem;margin-top:26px}
.pipe__note em{color:var(--gold-bright);font-style:normal}

/* ============ 06 · DEFENSE CANVAS ============ */
.defense{position:relative;overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--ink),#081B2E 50%,var(--ink))}
.defense canvas{position:absolute;inset:0;width:100%;height:100%}
.defense__cap{position:relative;z-index:2;padding:clamp(80px,10vw,130px) 28px;pointer-events:none}
.defense__cap h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:22px;max-width:12em}
.defense__legend{display:flex;gap:26px;margin-top:26px;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.defense__legend span{display:flex;align-items:center;gap:8px}
.defense__legend i{width:9px;height:9px;border-radius:50%;flex:none}
.defense__legend .l-data i{background:var(--mint);box-shadow:0 0 8px rgba(95,227,209,.7)}
.defense__legend .l-threat i{background:#E2574D;box-shadow:0 0 8px rgba(226,87,77,.7)}
.defense__legend .l-layer i{background:transparent;border:1.5px solid rgba(19,164,176,.8);width:11px;height:11px}

/* ============ 07 · COMPARISON ============ */
.cmp{display:grid;gap:22px}
.cmp__row{border:1px solid var(--line);border-radius:18px;padding:26px 28px;background:var(--card)}
.cmp__row--new{border-color:rgba(19,164,176,.4);
  background:linear-gradient(120% 200% at 10% 0%,rgba(14,124,134,.12),var(--card) 55%)}
.cmp__hdr{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.cmp__hdr b{font-family:var(--font-d);font-size:1.02rem;color:#fff;letter-spacing:.01em}
.cmp__hdr span{font-size:.8rem;color:var(--dim)}
.cmp__row--new .cmp__hdr span{color:var(--mint)}
.cmp__track{position:relative;display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;padding:6px 0}
.cmp__track::-webkit-scrollbar{display:none}
.seg{flex:1 0 auto;display:grid;place-items:center;font-family:var(--font-d);font-weight:600;font-size:.88rem;
  color:var(--text);padding:13px 18px;border-radius:12px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);min-width:104px;text-align:center}
.gap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 12px;min-width:86px}
.gap i{font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#E2574D;white-space:nowrap}
.gap b{width:100%;border-top:2px dashed rgba(226,87,77,.5);height:0}
.cmp__row--new .cmp__track{gap:0;border:1px solid rgba(19,164,176,.5);border-radius:14px;
  background:rgba(14,124,134,.08);padding:6px}
.cmp__row--new .seg{background:transparent;border:none;min-width:0;flex:1}
.arrowsep{flex:0 0 auto;color:var(--mint);display:grid;place-items:center;opacity:.8}
.arrowsep svg{width:16px;height:16px}
.cmp__lane{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.06);margin-top:18px;overflow:hidden}
.cmp__lane i{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:5px;border-radius:3px}
.cmp__row--old .cmp__lane i{background:linear-gradient(90deg,transparent,#E2574D)}
.cmp.run .cmp__row--old .cmp__lane i{animation:laneOld 7s linear infinite}
@keyframes laneOld{0%{left:-4%}16%{left:18%}30%{left:18%}46%{left:44%}60%{left:44%}76%{left:70%}88%{left:70%}100%{left:102%}}
.cmp__row--new .cmp__lane i{background:linear-gradient(90deg,transparent,var(--mint))}
.cmp.run .cmp__row--new .cmp__lane i{animation:laneNew 2.8s linear infinite}
@keyframes laneNew{from{left:-4%}to{left:102%}}

/* ============ 09 · TRUST ARCHITECTURE ============ */
.arch{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.alayer{display:flex;align-items:center;gap:18px;padding:17px 26px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);width:100%;
  opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.alayer i{font-style:normal;font-family:var(--font-d);font-size:.72rem;color:var(--gold-bright);letter-spacing:.1em;flex:none}
.alayer b{font-family:var(--font-d);font-weight:600;font-size:1.04rem;color:#fff;flex:none}
.alayer span{margin-left:auto;font-size:.85rem;color:var(--dim);text-align:right}
.alayer:nth-child(1){width:62%}.alayer:nth-child(2){width:70%}.alayer:nth-child(3){width:78%}
.alayer:nth-child(4){width:86%}.alayer:nth-child(5){width:93%}.alayer:nth-child(6){width:100%}
.alayer--gold{border-color:rgba(224,190,120,.55);background:linear-gradient(120% 200% at 15% 0%,rgba(199,164,90,.14),var(--card) 60%);
  box-shadow:0 0 34px rgba(199,164,90,.15)}
.arch.built .alayer{opacity:1;transform:none}
.arch.built .alayer:nth-child(6){transition-delay:0s}
.arch.built .alayer:nth-child(5){transition-delay:.18s}
.arch.built .alayer:nth-child(4){transition-delay:.36s}
.arch.built .alayer:nth-child(3){transition-delay:.54s}
.arch.built .alayer:nth-child(2){transition-delay:.72s}
.arch.built .alayer:nth-child(1){transition-delay:.95s}

/* ============ Responsive ============ */
@media(max-width:860px){
  .eco{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
  .eco__lines{display:none}
  .eco__hub{position:static;transform:none;order:-1;margin-bottom:8px}
  .eco__node{position:static;transform:none}
  .eco__node:hover{transform:scale(1.05)}
  .eco__wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
}
@media(max-width:720px){
  .pipe{aspect-ratio:auto}
  .pipe svg,.pipe__pkt{display:none}
  .pipe{display:flex;flex-direction:column;gap:0;padding-left:6px}
  .pst{position:static;transform:none;flex-direction:row;gap:16px;padding:13px 0 13px 18px;
    border-left:2px solid rgba(19,164,176,.35)}
  .pipe.flow .pst{animation:none;opacity:1}
  .pst__dot{width:40px;height:40px;flex:none}
  .tnode__dot{width:60px;height:60px;font-size:.72rem}
  .tnode__sub{display:none}
  .alayer span{display:none}
  .alayer:nth-child(1){width:76%}.alayer:nth-child(2){width:81%}.alayer:nth-child(3){width:86%}
  .alayer:nth-child(4){width:91%}.alayer:nth-child(5){width:96%}
  .gap{min-width:64px}
  .seg{min-width:88px;font-size:.78rem;padding:11px 12px}
}
/* Comparison stacks vertically on phones (no hidden side scroll) */
@media(max-width:600px){
  .cmp__hdr{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:16px}
  .cmp__track{flex-direction:column;align-items:stretch;overflow:visible;gap:0}
  .seg{min-width:0;width:100%;padding:12px 14px}
  .gap{flex-direction:row;justify-content:center;align-items:center;gap:10px;
    min-width:0;padding:9px 0}
  .gap b{width:0;height:20px;border-top:none;border-left:2px dashed rgba(226,87,77,.5)}
  .arrowsep{padding:5px 0}
  .arrowsep svg{transform:rotate(90deg)}
  .cmp__row--new .cmp__track{padding:8px}
}
@media(prefers-reduced-motion:reduce){
  .tloop__rot,.tnode__in{transform:none!important}
  .pipe__glow,.pipe__pkt,.cmp__lane i{animation:none!important}
  .eco__lines path{animation:none}
  .alayer{opacity:1;transform:none;transition:none}
}