:root{--tn-cyan:#35dbe8;--tn-cyan-soft:#7debf2;--tn-border:color-mix(in srgb,var(--cyan,#35dbe8) 23%,transparent)}
.tn-home{background:var(--bg);color:var(--text);min-height:100vh}
.tn-home .wrap{width:min(94vw,1480px);max-width:1480px;margin-inline:auto}
.tn-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--tn-border);background:color-mix(in srgb,var(--bg) 91%,transparent);backdrop-filter:blur(18px)}
.tn-nav-wrap{height:72px;display:flex;align-items:center;gap:20px}.tn-brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;min-width:max-content}.tn-brand img{width:30px;height:30px;object-fit:contain}.tn-brand b{display:block;letter-spacing:.23em;font-size:.89rem}.tn-brand em,.tn-brand-footer em{font-style:normal;color:var(--tn-cyan)}.tn-brand small{display:block;margin-top:3px;font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tn-main-nav{margin-left:auto;display:flex;align-items:center;gap:25px}.tn-main-nav a{position:relative;color:var(--muted);text-decoration:none;font-size:.77rem;white-space:nowrap;padding:25px 0 22px}.tn-main-nav a:hover,.tn-main-nav a.active{color:var(--text)}.tn-main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--tn-cyan)}.tn-nav-actions{display:flex;align-items:center;gap:9px}.tn-nav-actions .theme-toggle{padding:8px 11px}.tn-join{white-space:nowrap}.tn-menu-toggle{display:none;background:none;border:0;padding:9px}.tn-menu-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px}

/* HERO — intentionally compact so the system architecture remains visible above the fold. */
.tn-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--tn-border);min-height:338px;background:#020b14;color:#f6fbff}
.tn-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020b14 0%,#020b14 34%,rgba(2,11,20,.93) 47%,rgba(2,11,20,.32) 70%,rgba(2,11,20,.7) 100%);z-index:1}
.tn-hero-visual{position:absolute;inset:0 8% 0 47%;background-image:url('/static/assets/transference-nexus-human-earth.jpg');background-position:center left;background-size:cover;filter:saturate(1.04) contrast(1.06);opacity:1}
.tn-hero-grid{position:relative;z-index:2;min-height:338px;display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:30px}
.tn-hero-copy{max-width:710px;padding:31px 0 22px}.tn-hero .eyebrow{letter-spacing:.22em;color:var(--tn-cyan-soft);font-size:.66rem}.tn-hero h1{font-size:clamp(2.25rem,3.35vw,3.55rem);line-height:1.01;letter-spacing:-.035em;margin:10px 0 12px;color:#fff}.tn-hero h1 span{color:var(--tn-cyan)}.tn-hero .lead{max-width:590px;font-size:.97rem;line-height:1.43;color:#c4d0db}.tn-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.tn-hero .btn{min-height:40px;padding:10px 27px}.tn-proof-row{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:16px;color:#bccbd6;font-size:.68rem}.tn-hero-note{text-transform:uppercase;letter-spacing:.34em;font-size:.64rem;line-height:1.75;color:#c9d6df;justify-self:end}.tn-hero-note span{display:block}.tn-hero-note i{display:block;width:27px;height:2px;background:var(--tn-cyan);margin-top:11px}
html[data-theme="light"] .tn-hero{background:#eaf6f9}.tn-home[data-theme="light"] .tn-hero{background:#eaf6f9}html[data-theme="light"] .tn-hero:before{background:linear-gradient(90deg,#edf8fa 0%,#edf8fa 31%,rgba(237,248,250,.94) 44%,rgba(237,248,250,.2) 68%,rgba(237,248,250,.44) 100%)}html[data-theme="light"] .tn-hero h1{color:#09283a}html[data-theme="light"] .tn-hero .lead{color:#48677b}html[data-theme="light"] .tn-hero .eyebrow{color:#047c84}html[data-theme="light"] .tn-proof-row{color:#365b70}html[data-theme="light"] .tn-hero-note{color:#315369}

/* SYSTEM ARCHITECTURE — two real columns, no absolute-positioned text. */
.tn-system-section{padding:15px 0 14px;background:color-mix(in srgb,var(--bg) 97%,var(--card))}.tn-system-shell{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px;border:1px solid var(--tn-border);border-radius:17px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,transparent),color-mix(in srgb,var(--bg) 96%,transparent));padding:18px 20px 17px;box-shadow:0 16px 48px rgba(0,0,0,.12)}
.tn-system-intro{position:static;width:auto;min-width:0;padding:7px 5px 4px}.tn-system-intro .eyebrow{font-size:.69rem;letter-spacing:.22em}.tn-system-intro h2{font-size:1.02rem;line-height:1.18;margin:9px 0}.tn-system-intro p{font-size:.73rem;color:var(--muted);line-height:1.48;margin:0 0 11px}.tn-inline-link{color:var(--tn-cyan);text-decoration:none;font-size:.72rem;font-weight:700}.tn-system-core{min-width:0}.tn-authority-row{height:52px;display:grid;grid-template-columns:1fr 210px 1fr;gap:13px;align-items:center;margin-bottom:9px}.tn-authority-copy{font-size:.59rem;line-height:1.3;color:var(--muted);text-align:center}.tn-principal{width:auto;margin:0;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--tn-cyan);border-radius:9px;padding:7px 12px;background:color-mix(in srgb,var(--tn-cyan) 7%,var(--card));box-shadow:0 0 24px color-mix(in srgb,var(--tn-cyan) 8%,transparent)}.tn-principal-icon{font-size:1.35rem;color:var(--tn-cyan)}.tn-principal b,.tn-principal small{display:block}.tn-principal b{font-size:.78rem}.tn-principal small{color:var(--muted);font-size:.59rem;margin-top:1px}
.tn-system-flow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.tn-system-flow article{min-width:0;border:1px solid var(--tn-border);border-radius:8px;padding:11px 10px 10px;background:color-mix(in srgb,var(--card) 88%,transparent);min-height:105px}.tn-system-flow article>span{font-size:1.08rem;color:var(--tn-cyan)}.tn-system-flow h3{font-size:.68rem;line-height:1.18;margin:7px 0 5px}.tn-system-flow p{font-size:.59rem;line-height:1.38;color:var(--muted);margin:0}.tn-loop{display:flex;align-items:center;gap:12px;text-align:center;margin-top:9px;color:var(--muted);font-size:.56rem;letter-spacing:.11em;white-space:nowrap}.tn-loop span{height:1px;background:var(--tn-border);flex:1}

.tn-discovery{padding:14px 0 12px}.tn-section-grid{display:grid;grid-template-columns:255px 1fr;gap:24px;align-items:stretch}.tn-section-copy{padding:7px 4px}.tn-section-copy h2{font-size:1.65rem;line-height:1.02;margin:0 0 9px}.tn-section-copy p{color:var(--muted);font-size:.72rem;line-height:1.5}.tn-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tn-feature-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;border:1px solid var(--tn-border);border-radius:9px;padding:13px;text-decoration:none;color:var(--text);background:color-mix(in srgb,var(--card) 90%,transparent);min-height:112px;transition:.18s ease}.tn-feature-card:hover{border-color:var(--tn-cyan);transform:translateY(-2px)}.tn-feature-card>span{font-size:1.25rem;color:var(--tn-cyan)}.tn-feature-card h3{font-size:.76rem;margin:0 0 5px;line-height:1.18}.tn-feature-card p{font-size:.62rem;line-height:1.4;color:var(--muted);margin:0}.tn-feature-card>b{color:var(--tn-cyan);font-size:.75rem}

.tn-pulse{padding:11px 0 12px;border-top:1px solid color-mix(in srgb,var(--tn-border) 75%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tn-border) 75%,transparent)}.tn-pulse-layout{display:grid;grid-template-columns:255px 1fr;gap:24px;align-items:stretch}.tn-pulse-label{display:flex;align-items:center;gap:13px;padding:3px 4px}.tn-pulse-mark{font-size:2rem;color:var(--tn-cyan);line-height:1}.tn-pulse-label .eyebrow{font-size:.68rem}.tn-pulse-label p{margin:3px 0 0;color:var(--muted);font-size:.61rem}.tn-pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tn-pulse-grid a{position:relative;display:block;border:1px solid var(--tn-border);border-radius:7px;padding:10px 12px;text-decoration:none;color:var(--text);min-height:72px;background:color-mix(in srgb,var(--card) 88%,transparent)}.tn-pulse-grid a:hover{border-color:var(--tn-cyan)}.tn-pulse-grid small{font-size:.55rem;color:var(--muted)}.tn-pulse-grid h3{font-size:.67rem;margin:3px 0 10px}.tn-pulse-grid p{font-size:.56rem;color:var(--muted);margin:0}.status{position:absolute;top:9px;right:10px;font-size:.54rem}.status.active,.status.validation{color:#75e888}.status.progress{color:#6db6ff}.status.research{color:#ffd35d}

.tn-cta{padding:11px 0 13px}.tn-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.tn-cta h2{font-size:1.55rem;margin:0 0 2px}.tn-cta p{color:var(--muted);font-size:.74rem;margin:0}.tn-cta .ctas{display:flex;gap:10px;margin:0}.tn-cta .btn{min-height:38px;padding:9px 22px}
.tn-footer{border-top:1px solid var(--tn-border);padding:24px 0 32px;background:color-mix(in srgb,var(--bg) 95%,#000)}.tn-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px}.tn-footer a{display:block;color:var(--muted);text-decoration:none;font-size:.7rem;margin:6px 0}.tn-footer a:hover{color:var(--tn-cyan)}.tn-brand-footer b{letter-spacing:.16em}.tn-brand-footer p{color:var(--muted);font-size:.66rem;max-width:300px}

/* Existing secondary pages continue using this stylesheet. */
.tn-inner-main{padding:58px 0 70px}.tn-inner-hero{padding:52px 0 38px;border-bottom:1px solid var(--tn-border);background:radial-gradient(circle at 75% 25%,color-mix(in srgb,var(--tn-cyan) 10%,transparent),transparent 32%)}.tn-inner-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);margin:12px 0 16px;letter-spacing:-.04em}.tn-inner-hero p{max-width:760px;font-size:1.02rem;line-height:1.6;color:var(--muted)}.tn-content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.tn-content-card{border:1px solid var(--tn-border);border-radius:14px;padding:23px;background:color-mix(in srgb,var(--card) 90%,transparent)}.tn-content-card h2,.tn-content-card h3{margin-top:0}.tn-content-card p,.tn-content-card li{color:var(--muted);font-size:.86rem;line-height:1.6}.tn-content-card ul{padding-left:18px}.tn-wide{grid-column:span 2}.tn-inner-cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1240px){.tn-main-nav{gap:15px}.tn-main-nav a{font-size:.7rem}.tn-join{display:none}.tn-home .wrap{width:min(95vw,1180px)}.tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:220px minmax(0,1fr)}.tn-system-flow{grid-template-columns:repeat(4,1fr)}.tn-system-flow article{min-height:100px}.tn-system-flow article:nth-child(n+5){min-height:92px}.tn-loop{white-space:normal}.tn-card-grid{grid-template-columns:repeat(2,1fr)}.tn-pulse-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.tn-nav-wrap{height:66px}.tn-menu-toggle{display:block;margin-left:auto}.tn-main-nav{display:none;position:absolute;left:18px;right:18px;top:63px;flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid var(--tn-border);border-radius:12px;background:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.25)}.tn-main-nav.open{display:flex}.tn-main-nav a{padding:11px}.tn-main-nav a.active:after{display:none}.tn-brand small{display:none}.tn-hero{min-height:385px}.tn-hero-grid{min-height:385px;grid-template-columns:1fr}.tn-hero-note{display:none}.tn-hero-visual{inset:0 0 0 30%;opacity:.62}.tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:1fr}.tn-authority-row{grid-template-columns:1fr 210px 1fr}.tn-system-intro{max-width:620px}.tn-pulse-label{padding-bottom:4px}.tn-content-grid{grid-template-columns:1fr 1fr}.tn-wide{grid-column:auto}}
@media(max-width:640px){.tn-home .wrap{width:calc(100% - 28px)}.tn-brand b{font-size:.73rem}.tn-nav-actions .theme-label{display:none}.tn-nav-actions .theme-toggle{padding:8px}.tn-hero{min-height:430px}.tn-hero-grid{min-height:430px}.tn-hero-copy{padding:36px 0 26px}.tn-hero h1{font-size:2.45rem}.tn-hero-visual{inset:0;opacity:.34}.tn-hero:before{background:linear-gradient(90deg,#020b14 0%,rgba(2,11,20,.9) 62%,rgba(2,11,20,.55) 100%)}html[data-theme="light"] .tn-hero:before{background:linear-gradient(90deg,#edf8fa 0%,rgba(237,248,250,.92) 65%,rgba(237,248,250,.6) 100%)}.tn-proof-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.tn-system-shell{padding:15px 13px}.tn-authority-row{grid-template-columns:1fr}.tn-authority-copy{display:none}.tn-system-flow,.tn-card-grid,.tn-pulse-grid,.tn-content-grid{grid-template-columns:1fr}.tn-system-flow article{min-height:auto}.tn-loop{font-size:.5rem}.tn-cta-inner{align-items:flex-start;flex-direction:column}.tn-cta .ctas{flex-wrap:wrap}.tn-footer-grid{grid-template-columns:1fr 1fr}.tn-footer-grid>div:first-child{grid-column:1/-1}}


/* ============================================================
   v2.6.0-r2 — PREMIUM VISUAL FIDELITY PASS
   Concept-aligned depth, connector logic, iconography and motion.
   ============================================================ */
:root{
  --tn-cyan:#43e5ef;
  --tn-cyan-deep:#10b9c9;
  --tn-blue:#4a9cff;
  --tn-glow:color-mix(in srgb,var(--tn-cyan) 20%,transparent);
  --tn-border-strong:color-mix(in srgb,var(--tn-cyan) 38%,transparent);
  --tn-shadow:0 22px 70px rgba(0,0,0,.22);
}
.tn-home main{position:relative;isolation:isolate}
.tn-home main:before{content:"";position:fixed;inset:72px 0 0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--tn-cyan) 6%,transparent),transparent 24%),linear-gradient(color-mix(in srgb,var(--tn-cyan) 2.4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tn-cyan) 2.4%,transparent) 1px,transparent 1px);background-size:auto,54px 54px,54px 54px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 55%,transparent 100%)}
.tn-header{box-shadow:0 10px 32px rgba(0,0,0,.12)}
.tn-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 5%,var(--tn-cyan) 38%,var(--tn-blue) 58%,transparent 95%);opacity:.28}
.tn-brand img{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tn-cyan) 28%,transparent))}
.tn-main-nav a{transition:color .18s ease,transform .18s ease}.tn-main-nav a:hover{transform:translateY(-1px)}
.tn-main-nav a.active:after{box-shadow:0 0 14px var(--tn-glow)}

/* Hero: image becomes part of the atmosphere rather than a rectangular panel. */
.tn-hero{min-height:352px;box-shadow:inset 0 -45px 90px rgba(0,0,0,.09)}
.tn-hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 73% 54%,color-mix(in srgb,var(--tn-cyan) 13%,transparent),transparent 18%),linear-gradient(180deg,transparent 62%,rgba(2,11,20,.4) 100%)}
.tn-hero-visual{inset:-3% 4% -4% 40%;background-position:48% center;background-size:cover;filter:saturate(1.16) contrast(1.08) brightness(.94);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 10%,#000 27%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 10%,#000 27%,#000 92%,transparent 100%);transform:scale(1.01);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tn-home.tn-pointer .tn-hero-visual{transform:scale(1.025) translate3d(var(--tn-parallax-x,0),var(--tn-parallax-y,0),0)}
.tn-hero-copy{position:relative}.tn-hero-copy:before{content:"";position:absolute;left:-28px;top:22px;bottom:20px;width:1px;background:linear-gradient(transparent,var(--tn-cyan),transparent);opacity:.22}
.tn-hero h1{text-shadow:0 12px 35px rgba(0,0,0,.22)}
.tn-hero h1 span{text-shadow:0 0 28px color-mix(in srgb,var(--tn-cyan) 14%,transparent)}
.tn-hero .btn.primary{box-shadow:0 10px 30px color-mix(in srgb,var(--tn-cyan) 16%,transparent),inset 0 1px rgba(255,255,255,.24)}
.tn-hero .btn.ghost{background:rgba(2,11,20,.2);backdrop-filter:blur(8px)}
.tn-proof-row span{display:inline-flex;align-items:center;gap:7px}.tn-proof-icon{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border:1px solid color-mix(in srgb,var(--tn-cyan) 34%,transparent);border-radius:6px;color:var(--tn-cyan);background:color-mix(in srgb,var(--tn-cyan) 6%,transparent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--tn-cyan) 6%,transparent)}
.tn-hero-note{padding:12px 0;position:relative}.tn-hero-note:before{content:"";position:absolute;left:-25px;top:5px;bottom:5px;width:1px;background:linear-gradient(transparent,var(--tn-border-strong),transparent)}
html[data-theme="light"] .tn-hero:after{background:radial-gradient(circle at 73% 54%,rgba(33,213,225,.14),transparent 20%),linear-gradient(180deg,transparent 72%,rgba(225,241,245,.36) 100%)}
html[data-theme="light"] .tn-hero-visual{filter:saturate(.9) contrast(.98) brightness(1.03);opacity:.9}
html[data-theme="light"] .tn-hero .btn.ghost{background:rgba(255,255,255,.34)}

/* System map: visible authority rails and directional flow. */
.tn-system-section{position:relative;padding:18px 0 16px}.tn-system-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 61% 25%,color-mix(in srgb,var(--tn-cyan) 5%,transparent),transparent 27%)}
.tn-system-shell{position:relative;overflow:hidden;border-color:var(--tn-border-strong);box-shadow:var(--tn-shadow),inset 0 1px color-mix(in srgb,#fff 6%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--bg) 92%,transparent))}
.tn-system-shell:before,.tn-system-shell:after{content:"";position:absolute;width:130px;height:130px;border:1px solid color-mix(in srgb,var(--tn-cyan) 13%,transparent);border-radius:50%;pointer-events:none}.tn-system-shell:before{right:-83px;top:-87px}.tn-system-shell:after{left:-90px;bottom:-97px}
.tn-system-intro{position:relative;z-index:2}.tn-system-intro:after{content:"";position:absolute;right:-12px;top:6px;bottom:6px;width:1px;background:linear-gradient(transparent,var(--tn-border-strong),transparent);opacity:.6}
.tn-system-intro h2{font-size:1.07rem}.tn-system-intro p{font-size:.745rem}
.tn-system-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.tn-system-tags span{font-size:.49rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border:1px solid var(--tn-border);border-radius:999px;color:var(--muted);background:color-mix(in srgb,var(--tn-cyan) 3%,transparent)}
.tn-authority-row{position:relative;margin-bottom:12px}.tn-authority-row:before{content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--tn-cyan) 15%,var(--tn-cyan) 85%,transparent);opacity:.55;box-shadow:0 0 12px var(--tn-glow)}
.tn-authority-copy{position:relative;z-index:2;background:color-mix(in srgb,var(--bg) 82%,transparent);padding:2px 7px;border-radius:5px}
.tn-principal{position:relative;z-index:3;border-color:var(--tn-cyan);background:linear-gradient(180deg,color-mix(in srgb,var(--tn-cyan) 10%,var(--card)),color-mix(in srgb,var(--card) 96%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--tn-cyan) 8%,transparent),0 0 34px color-mix(in srgb,var(--tn-cyan) 14%,transparent)}
.tn-principal:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:20px;background:linear-gradient(var(--tn-cyan),transparent);opacity:.75}
.tn-principal-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:color-mix(in srgb,var(--tn-cyan) 9%,transparent);border:1px solid color-mix(in srgb,var(--tn-cyan) 28%,transparent)}
.tn-system-flow{gap:10px;position:relative}.tn-system-flow:before{content:"";position:absolute;left:1.5%;right:1.5%;top:-7px;height:1px;background:linear-gradient(90deg,transparent,var(--tn-border-strong),transparent);opacity:.5}
.tn-flow-card{position:relative;overflow:visible!important;border-color:color-mix(in srgb,var(--tn-cyan) 26%,transparent)!important;background:linear-gradient(155deg,color-mix(in srgb,var(--card) 97%,transparent),color-mix(in srgb,var(--tn-cyan) 3%,var(--bg)))!important;box-shadow:inset 0 1px color-mix(in srgb,#fff 4%,transparent),0 10px 28px rgba(0,0,0,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.tn-flow-card:hover{transform:translateY(-3px);border-color:var(--tn-cyan)!important;box-shadow:0 14px 32px rgba(0,0,0,.14),0 0 20px color-mix(in srgb,var(--tn-cyan) 7%,transparent)}
.tn-flow-card:before{content:attr(data-step);position:absolute;right:8px;top:7px;font-size:.46rem;letter-spacing:.08em;color:color-mix(in srgb,var(--muted) 50%,transparent)}
.tn-flow-card:not(:last-child):after{content:"→";position:absolute;z-index:5;right:-12px;top:47%;transform:translateY(-50%);color:var(--tn-cyan);font-size:.8rem;text-shadow:0 0 10px var(--tn-glow)}
.tn-flow-icon{display:grid!important;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid color-mix(in srgb,var(--tn-cyan) 30%,transparent);background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--tn-cyan) 17%,transparent),transparent 70%);box-shadow:inset 0 0 15px color-mix(in srgb,var(--tn-cyan) 7%,transparent);font-size:.92rem!important}
.tn-system-flow h3{font-size:.69rem}.tn-system-flow p{font-size:.59rem}.tn-loop{color:color-mix(in srgb,var(--muted) 90%,transparent)}.tn-loop span{background:linear-gradient(90deg,transparent,var(--tn-cyan),transparent);opacity:.42}

/* Discovery cards: larger visual anchor + edge glow. */
.tn-discovery{position:relative;padding:17px 0 14px}.tn-discovery:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--tn-cyan) 2.4%,transparent) 50%,transparent 100%)}
.tn-section-copy{position:relative}.tn-section-copy:before{content:"";position:absolute;left:-18px;top:2px;width:3px;height:44px;border-radius:8px;background:linear-gradient(var(--tn-cyan),transparent);box-shadow:0 0 18px var(--tn-glow)}
.tn-feature-card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--tn-cyan) 25%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--tn-cyan) 3.5%,var(--bg)));box-shadow:inset 0 1px color-mix(in srgb,#fff 4%,transparent),0 10px 30px rgba(0,0,0,.05)}
.tn-feature-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 16%,color-mix(in srgb,var(--tn-cyan) 8%,transparent),transparent 28%);opacity:.7;pointer-events:none}.tn-feature-card>*{position:relative;z-index:1}
.tn-feature-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.13),0 0 24px color-mix(in srgb,var(--tn-cyan) 6%,transparent)}
.tn-feature-icon{display:grid!important;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid color-mix(in srgb,var(--tn-cyan) 34%,transparent);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tn-cyan) 20%,transparent),transparent 72%);font-size:1.2rem!important;box-shadow:0 0 20px color-mix(in srgb,var(--tn-cyan) 7%,transparent)}
.tn-feature-card>b{align-self:end;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tn-cyan) 24%,transparent);transition:.2s}.tn-feature-card:hover>b{transform:translateX(3px);border-color:var(--tn-cyan)}

/* Research pulse: ECG motif, accent rails and explicit forward motion. */
.tn-pulse{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--tn-cyan) 2%,transparent),transparent 24%,transparent 76%,color-mix(in srgb,var(--tn-cyan) 2%,transparent));padding:13px 0 14px}.tn-pulse:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--tn-cyan),transparent);opacity:.22}
.tn-pulse-mark{width:35px;height:30px;display:flex;align-items:center;color:var(--tn-cyan)}.tn-pulse-mark span{display:block;width:9px;height:1px;background:currentColor}.tn-pulse-mark i{display:block;width:15px;height:15px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(125deg) skew(-16deg);margin:0 -2px;filter:drop-shadow(0 0 5px var(--tn-glow))}
.tn-pulse-grid a{overflow:hidden;border-color:color-mix(in srgb,var(--tn-cyan) 22%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--card) 97%,transparent),color-mix(in srgb,var(--tn-cyan) 2%,var(--bg)));transition:.18s ease;padding-right:28px}.tn-pulse-grid a:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--tn-cyan),transparent);opacity:.32}.tn-pulse-grid a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.1)}.tn-pulse-arrow{position:absolute;right:10px;bottom:9px;font-size:.7rem;color:var(--tn-cyan);font-weight:400}.tn-pulse-grid a:hover .tn-pulse-arrow{transform:translateX(2px)}
.status{padding:2px 5px;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent)}

/* CTA: concept-like horizontal finale with a subtle energy field. */
.tn-cta{position:relative;overflow:hidden;padding:14px 0 16px}.tn-cta:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 62% 50%,color-mix(in srgb,var(--tn-cyan) 5%,transparent),transparent 28%)}.tn-cta-inner{position:relative}.tn-cta-eyebrow{font-size:.51rem;letter-spacing:.16em;color:var(--tn-cyan);font-weight:700;margin-bottom:4px}.tn-cta .btn.primary{box-shadow:0 10px 28px color-mix(in srgb,var(--tn-cyan) 15%,transparent)}

.tn-footer{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 96%,#000),color-mix(in srgb,var(--bg) 91%,#000))}.tn-footer:before{content:"";position:absolute;left:7%;right:7%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--tn-cyan),transparent);opacity:.24}

/* Light mode gets depth rather than flat white panels. */
html[data-theme="light"] .tn-system-shell,html[data-theme="light"] .tn-feature-card,html[data-theme="light"] .tn-pulse-grid a{box-shadow:0 12px 30px rgba(33,73,93,.07),inset 0 1px rgba(255,255,255,.9)}
html[data-theme="light"] .tn-authority-copy{background:rgba(239,249,251,.86)}
html[data-theme="light"] .tn-flow-card{box-shadow:0 10px 24px rgba(33,73,93,.055),inset 0 1px #fff}
html[data-theme="light"] .tn-hero-copy:before{background:linear-gradient(transparent,#10aeba,transparent)}

/* Progressive reveal, disabled for reduced-motion users. */
.tn-visual-reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}.tn-visual-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tn-visual-reveal{opacity:1!important;transform:none!important;transition:none!important}.tn-home.tn-pointer .tn-hero-visual{transform:none!important}.tn-flow-card,.tn-feature-card,.tn-pulse-grid a{transition:none!important}}

@media(max-width:1240px){.tn-flow-card:not(:last-child):after{display:none}.tn-system-intro:after{display:none}}
@media(max-width:900px){.tn-hero-visual{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)}.tn-system-tags{margin-bottom:2px}.tn-flow-card:before{font-size:.45rem}}
@media(max-width:640px){.tn-home main:before{display:none}.tn-hero-copy:before,.tn-section-copy:before{display:none}.tn-hero-visual{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.2),#000 42%);mask-image:linear-gradient(90deg,rgba(0,0,0,.2),#000 42%)}.tn-proof-icon{width:18px;height:18px}.tn-system-tags{gap:4px}.tn-system-tags span{font-size:.45rem}.tn-feature-icon{width:34px;height:34px}}

/* ================================================================
   TRANSFERENCE PUBLIC v2.6.0-r3 — INTERFACE DEPTH / HIGH-FIDELITY PASS
   ================================================================ */
:root{
  --tn-cyan:#2ed9e6;
  --tn-cyan-hi:#73f2f7;
  --tn-deep:#020a13;
  --tn-deep-2:#041421;
  --tn-grid:color-mix(in srgb,var(--tn-cyan) 6%,transparent);
}

/* Visual continuity: the hero remains cinematic in both modes. */
html[data-theme="light"] .tn-hero{background:var(--tn-deep);color:#f6fbff}
html[data-theme="light"] .tn-hero:before{background:linear-gradient(90deg,#020b14 0%,#020b14 31%,rgba(2,11,20,.96) 43%,rgba(2,11,20,.22) 68%,rgba(2,11,20,.72) 100%)}
html[data-theme="light"] .tn-hero h1{color:#fff}
html[data-theme="light"] .tn-hero .lead{color:#c7d4de}
html[data-theme="light"] .tn-hero .eyebrow{color:var(--tn-cyan-hi)}
html[data-theme="light"] .tn-proof-row{color:#c1d0da}
html[data-theme="light"] .tn-hero-note{color:#c9d6df}
html[data-theme="light"] .tn-hero .btn.ghost{background:rgba(2,11,20,.3);color:#f3fbff;border-color:rgba(56,220,232,.45)}
html[data-theme="light"] .tn-hero-visual{filter:saturate(1.12) contrast(1.08) brightness(.93);opacity:1}
html[data-theme="light"] .tn-hero:after{background:radial-gradient(circle at 73% 54%,rgba(33,213,225,.14),transparent 20%),linear-gradient(180deg,transparent 68%,rgba(2,11,20,.44) 100%)}

/* Hero composition: stronger editorial grid + richer edge treatment. */
.tn-hero{min-height:370px}
.tn-hero-grid{min-height:370px}
.tn-hero-copy{max-width:730px;padding:38px 0 30px}
.tn-hero h1{font-size:clamp(2.45rem,3.55vw,3.85rem);line-height:.985;max-width:760px}
.tn-hero .lead{max-width:620px;font-size:1rem}
.tn-hero:after{background:radial-gradient(circle at 73% 52%,color-mix(in srgb,var(--tn-cyan) 16%,transparent),transparent 17%),linear-gradient(180deg,transparent 61%,rgba(2,11,20,.5) 100%)}
.tn-hero-visual{inset:-5% 2% -6% 38%;background-position:50% 51%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 8%,#000 26%,#000 91%,rgba(0,0,0,.62) 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 8%,#000 26%,#000 91%,rgba(0,0,0,.62) 96%,transparent 100%)}
.tn-hero-copy:after{content:"";position:absolute;left:-28px;top:74px;width:7px;height:7px;border:1px solid var(--tn-cyan);transform:rotate(45deg);box-shadow:0 0 14px var(--tn-glow)}
.tn-hero-note{background:linear-gradient(90deg,transparent,rgba(2,11,20,.28));padding:13px 13px 13px 24px;border-radius:10px}

/* SVG icon language replaces the mixed Unicode glyph set. */
.tn-proof-icon svg,.tn-flow-icon svg,.tn-feature-icon svg,.tn-principal-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tn-proof-icon{padding:3px}
.tn-flow-icon,.tn-feature-icon,.tn-principal-icon{color:var(--tn-cyan)}

/* Technical grid is visible, but subordinate to content. */
.tn-system-section,.tn-discovery,.tn-pulse,.tn-cta{background-image:linear-gradient(var(--tn-grid) 1px,transparent 1px),linear-gradient(90deg,var(--tn-grid) 1px,transparent 1px);background-size:42px 42px;background-position:center top}
.tn-system-section{padding:22px 0 18px}
.tn-system-shell{grid-template-columns:270px minmax(0,1fr);gap:25px;padding:21px 23px 19px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 97%,transparent),color-mix(in srgb,var(--bg) 91%,transparent));box-shadow:0 24px 65px rgba(0,0,0,.14),inset 0 1px color-mix(in srgb,#fff 7%,transparent)}
.tn-system-intro{padding-right:12px}
.tn-system-intro .eyebrow{font-size:.7rem}
.tn-system-intro h2{font-size:1.12rem;line-height:1.16;margin:10px 0}
.tn-system-intro p{font-size:.755rem;line-height:1.52}
.tn-system-intro:after{right:-13px;opacity:.85}
.tn-system-tags span{background:color-mix(in srgb,var(--tn-cyan) 5%,transparent);border-color:color-mix(in srgb,var(--tn-cyan) 29%,transparent)}

.tn-authority-row{height:57px;margin-bottom:12px}
.tn-authority-row:before{left:2%;right:2%;opacity:.74}
.tn-authority-row:after{content:"";position:absolute;left:50%;top:49%;width:8px;height:8px;border:1px solid var(--tn-cyan);background:var(--bg);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 13px var(--tn-glow)}
.tn-authority-copy{font-size:.58rem;letter-spacing:.025em}
.tn-principal{min-height:47px;border-radius:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tn-cyan) 12%,transparent),0 0 38px color-mix(in srgb,var(--tn-cyan) 18%,transparent)}
.tn-principal-icon{width:29px;height:29px;padding:5px}
.tn-principal b{font-size:.8rem}

.tn-system-flow{gap:11px}
.tn-flow-card{min-height:116px!important;border-radius:10px!important;padding:12px 11px 11px!important}
.tn-flow-card:before{font-size:.48rem;top:8px}
.tn-flow-card:after{font-size:.88rem!important;right:-13px!important}
.tn-flow-card:hover{transform:translateY(-4px) scale(1.008)}
.tn-flow-icon{width:30px;height:30px;padding:6px;border-radius:9px}
.tn-system-flow h3{font-size:.705rem;line-height:1.17;margin-top:8px}
.tn-system-flow p{font-size:.6rem;line-height:1.4}
.tn-loop{margin-top:10px;font-size:.57rem}

/* Occupies the former dead space in the architecture panel with useful state. */
.tn-system-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--tn-border) 72%,transparent)}
.tn-system-metrics div{position:relative;min-width:0;padding:7px 9px 7px 15px;border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--tn-cyan) 4%,transparent),transparent);border:1px solid color-mix(in srgb,var(--tn-cyan) 11%,transparent)}
.tn-system-metrics i{position:absolute;left:7px;top:10px;width:4px;height:4px;border-radius:50%;background:#66ecb0;box-shadow:0 0 8px #66ecb0}
.tn-system-metrics span,.tn-system-metrics b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-system-metrics span{font-size:.46rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tn-system-metrics b{font-size:.56rem;margin-top:2px;font-weight:650;color:var(--text)}

/* Capability cards get stronger hierarchy and small data-interface details. */
.tn-discovery{padding:21px 0 18px}
.tn-section-grid{grid-template-columns:270px 1fr;gap:25px}
.tn-section-copy{padding:10px 7px}
.tn-section-copy h2{font-size:1.78rem}
.tn-section-copy p{font-size:.75rem;max-width:240px}
.tn-card-grid{gap:12px}
.tn-feature-card{min-height:128px;border-radius:11px;padding:14px 14px 13px;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:11px}
.tn-feature-card>b{position:absolute;right:12px;bottom:12px}
.tn-feature-card:after{content:"";position:absolute;left:52px;right:42px;bottom:17px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--tn-cyan) 30%,transparent),transparent 70%)}
.tn-card-kicker{display:block;margin-bottom:4px;font-size:.45rem;letter-spacing:.12em;color:var(--tn-cyan);font-weight:700}
.tn-feature-card h3{font-size:.79rem;margin-bottom:6px}
.tn-feature-card p{font-size:.625rem;max-width:92%}
.tn-feature-icon{width:40px;height:40px;padding:8px;border-radius:11px}

/* Pulse becomes an instrument panel rather than four plain boxes. */
.tn-pulse{padding:15px 0 16px;background-color:color-mix(in srgb,var(--bg) 98%,var(--card))}
.tn-pulse-layout{grid-template-columns:270px 1fr;gap:25px}
.tn-pulse-label{padding:5px 7px}
.tn-pulse-label .eyebrow{font-size:.7rem}
.tn-pulse-grid{gap:10px}
.tn-pulse-grid a{min-height:82px;border-radius:9px;padding:11px 13px 10px 14px}
.tn-pulse-grid a:after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tn-cyan) 0 26%,color-mix(in srgb,var(--tn-cyan) 10%,transparent) 26% 100%);opacity:.42}
.tn-pulse-grid a:nth-child(2):after{background:linear-gradient(90deg,#6db6ff 0 46%,color-mix(in srgb,#6db6ff 10%,transparent) 46% 100%)}
.tn-pulse-grid a:nth-child(3):after{background:linear-gradient(90deg,#ffd35d 0 34%,color-mix(in srgb,#ffd35d 10%,transparent) 34% 100%)}
.tn-pulse-grid a:nth-child(4):after{background:linear-gradient(90deg,#75e888 0 62%,color-mix(in srgb,#75e888 10%,transparent) 62% 100%)}
.tn-pulse-grid h3{font-size:.69rem;margin-top:4px}
.tn-pulse-grid p{font-size:.57rem;padding-right:8px}
.tn-pulse-arrow{bottom:16px}

/* CTA has a stronger finish while remaining compact. */
.tn-cta{padding:17px 0 18px;background-color:color-mix(in srgb,var(--bg) 97%,var(--card))}
.tn-cta:after{content:"";position:absolute;left:50%;bottom:0;width:min(900px,80vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--tn-cyan),transparent);opacity:.38}
.tn-cta-inner{min-height:67px}
.tn-cta-eyebrow{display:flex;align-items:center;gap:8px;font-size:.52rem}
.tn-cta-eyebrow span{display:block;width:26px;height:1px;background:var(--tn-cyan);box-shadow:0 0 8px var(--tn-glow)}
.tn-cta h2{font-size:1.67rem}
.tn-cta .btn{border-radius:999px}

.tn-footer{padding-top:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 96%,#000),color-mix(in srgb,var(--bg) 89%,#000))}
.tn-footer-grid{position:relative}
.tn-footer-grid:before{content:"NEXUS / PUBLIC RESEARCH INTERFACE";position:absolute;right:0;bottom:-21px;font-size:.43rem;letter-spacing:.18em;color:color-mix(in srgb,var(--muted) 56%,transparent)}

/* Light mode: higher contrast surfaces; cinematic hero remains dark by design. */
html[data-theme="light"] .tn-system-section,html[data-theme="light"] .tn-discovery,html[data-theme="light"] .tn-pulse,html[data-theme="light"] .tn-cta{--tn-grid:rgba(9,128,139,.035)}
html[data-theme="light"] .tn-system-shell{background:linear-gradient(135deg,#fbfeff,#edf8fa);border-color:rgba(21,182,195,.32);box-shadow:0 20px 60px rgba(31,78,96,.10),inset 0 1px #fff}
html[data-theme="light"] .tn-flow-card{background:linear-gradient(150deg,#fff,#eff9fb)!important;border-color:rgba(34,184,196,.29)!important;box-shadow:0 10px 26px rgba(33,73,93,.075),inset 0 1px #fff}
html[data-theme="light"] .tn-feature-card,html[data-theme="light"] .tn-pulse-grid a{background:linear-gradient(145deg,#fff,#f0f9fb);border-color:rgba(34,184,196,.27);box-shadow:0 11px 28px rgba(33,73,93,.065),inset 0 1px #fff}
html[data-theme="light"] .tn-system-metrics div{background:linear-gradient(90deg,rgba(38,204,216,.075),rgba(255,255,255,.28));border-color:rgba(38,170,183,.18)}
html[data-theme="light"] .tn-authority-copy{background:rgba(245,252,253,.92)}

@media(max-width:1240px){
  .tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:225px minmax(0,1fr)}
  .tn-system-metrics{grid-template-columns:repeat(2,1fr)}
  .tn-flow-card{min-height:108px!important}
}
@media(max-width:900px){
  .tn-hero{min-height:400px}.tn-hero-grid{min-height:400px}
  .tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:1fr}
  .tn-system-metrics{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .tn-hero{min-height:445px}.tn-hero-grid{min-height:445px}.tn-hero h1{font-size:2.5rem}
  .tn-system-metrics{grid-template-columns:repeat(2,1fr)}
  .tn-feature-card{min-height:118px}
  .tn-footer-grid:before{display:none}
}
.tn-flow-card.tn-current-step{border-color:color-mix(in srgb,var(--tn-cyan) 65%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--tn-cyan) 8%,transparent),0 0 26px color-mix(in srgb,var(--tn-cyan) 8%,transparent),inset 0 1px color-mix(in srgb,#fff 5%,transparent)}
.tn-flow-card.tn-current-step .tn-flow-icon{box-shadow:0 0 18px color-mix(in srgb,var(--tn-cyan) 14%,transparent),inset 0 0 15px color-mix(in srgb,var(--tn-cyan) 8%,transparent)}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r4 — PRODUCTION POLISH / CONCEPT FIDELITY
   Final structural proportions, stronger hierarchy, cleaner rails,
   richer but restrained depth, and concept-like first-screen density.
   ================================================================= */

/* Header refinement: slightly more compact and more deliberate. */
.tn-nav-wrap{height:66px}
.tn-brand img{width:28px;height:28px}
.tn-brand b{font-size:.86rem}
.tn-main-nav a{padding:22px 0 20px}
.tn-main-nav a.active:after{bottom:11px}
.tn-header{box-shadow:0 8px 26px rgba(0,0,0,.025);transition:box-shadow .25s ease,background .25s ease}
.tn-header.tn-scrolled{box-shadow:0 12px 34px rgba(0,0,0,.14);background:color-mix(in srgb,var(--bg) 95%,transparent)}

/* Hero: closer to the approved concept's compact first-screen composition. */
.tn-hero,.tn-hero-grid{min-height:315px}
.tn-hero-copy{padding:25px 0 20px;max-width:720px}
.tn-hero h1{font-size:clamp(2.28rem,3.22vw,3.48rem);line-height:.99;margin:9px 0 11px;max-width:715px}
.tn-hero .lead{font-size:.92rem;line-height:1.42;max-width:575px}
.tn-hero .ctas{margin-top:15px;gap:11px}
.tn-hero .btn{min-height:38px;padding:9px 24px}
.tn-proof-row{margin-top:13px;gap:8px 17px;font-size:.64rem}
.tn-proof-icon{width:19px;height:19px;border-radius:5px}
.tn-hero-visual{inset:-9% 1% -9% 40%;background-position:48% 52%;filter:saturate(1.12) contrast(1.09) brightness(.91)}
.tn-hero:before{background:linear-gradient(90deg,#020b14 0%,#020b14 33%,rgba(2,11,20,.96) 43%,rgba(2,11,20,.18) 67%,rgba(2,11,20,.68) 100%)}
.tn-hero:after{background:
  radial-gradient(circle at 68% 53%,color-mix(in srgb,var(--tn-cyan) 13%,transparent),transparent 16%),
  linear-gradient(180deg,transparent 68%,rgba(2,11,20,.58) 100%)}
.tn-hero-note{font-size:.59rem;letter-spacing:.33em;padding:11px 11px 11px 22px}
.tn-hero-copy:after{top:57px}

/* System panel: less dashboard-boxy, more like a connected research instrument. */
.tn-system-section{padding:16px 0 15px}
.tn-system-shell{grid-template-columns:250px minmax(0,1fr);gap:24px;padding:18px 22px 16px;border-radius:17px;overflow:hidden}
.tn-system-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 61% 21%,color-mix(in srgb,var(--tn-cyan) 6%,transparent),transparent 20%),
  linear-gradient(90deg,transparent 0 19%,color-mix(in srgb,var(--tn-cyan) 2%,transparent) 19% 19.1%,transparent 19.1% 100%);opacity:.95}
.tn-system-intro{position:relative;z-index:2;padding:5px 8px 2px 2px}
.tn-system-intro h2{font-size:1.08rem}
.tn-system-intro p{font-size:.72rem}
.tn-system-core{position:relative;z-index:2}
.tn-authority-row{height:50px;margin-bottom:9px}
.tn-principal{min-height:44px;max-width:225px;margin-inline:auto}
.tn-principal:after{content:"";position:absolute;left:50%;top:100%;height:15px;width:1px;background:linear-gradient(var(--tn-cyan),transparent);opacity:.8}
.tn-authority-copy{font-size:.54rem}
.tn-flow-card{min-height:108px!important;padding:10px 10px 9px!important}
.tn-flow-icon{width:29px;height:29px}
.tn-system-flow h3{font-size:.69rem}
.tn-system-flow p{font-size:.58rem;line-height:1.37}
.tn-flow-card:after{right:-14px!important;color:var(--tn-cyan);text-shadow:0 0 10px var(--tn-glow)}
.tn-loop{position:relative;margin-top:10px;font-size:.54rem;letter-spacing:.105em}
.tn-loop b{font-weight:700;color:color-mix(in srgb,var(--text) 88%,var(--tn-cyan))}
.tn-loop:before,.tn-loop:after{content:"";position:absolute;bottom:6px;width:1px;height:12px;background:color-mix(in srgb,var(--tn-cyan) 42%,transparent)}
.tn-loop:before{left:0}.tn-loop:after{right:0}

/* Convert r3 metric boxes into one integrated evidence/authority rail. */
.tn-system-metrics{gap:0;margin-top:9px;padding-top:0;border:1px solid color-mix(in srgb,var(--tn-cyan) 18%,transparent);border-radius:7px;overflow:hidden;background:color-mix(in srgb,var(--card) 36%,transparent)}
.tn-system-metrics div{padding:7px 12px 7px 18px;border:0!important;border-radius:0!important;background:transparent!important}
.tn-system-metrics div+div{border-left:1px solid color-mix(in srgb,var(--tn-cyan) 15%,transparent)!important}
.tn-system-metrics i{left:9px;top:11px;width:4px;height:4px}
.tn-system-metrics span{font-size:.43rem}
.tn-system-metrics b{font-size:.55rem}

/* Discovery: restore the larger visual anchors seen in the concept. */
.tn-discovery{padding:17px 0 16px}
.tn-section-grid{grid-template-columns:250px 1fr;gap:24px}
.tn-section-copy{padding:10px 5px 7px}
.tn-section-copy h2{font-size:1.72rem}
.tn-section-copy p{font-size:.73rem;max-width:235px}
.tn-card-grid{gap:11px}
.tn-feature-card{min-height:126px;padding:14px 14px 13px;box-shadow:inset 0 1px color-mix(in srgb,#fff 5%,transparent)}
.tn-feature-card:before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;background:linear-gradient(transparent,var(--tn-cyan),transparent);opacity:.28}
.tn-feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.13),inset 0 1px color-mix(in srgb,#fff 6%,transparent)}
.tn-feature-icon{width:43px;height:43px;padding:9px}
.tn-card-kicker{font-size:.47rem}
.tn-feature-card h3{font-size:.8rem}
.tn-feature-card p{font-size:.63rem;line-height:1.43}
.tn-feature-card>b{width:25px;height:25px}

/* Research Pulse: stronger single-line instrument treatment. */
.tn-pulse{padding:13px 0 14px}
.tn-pulse-layout{grid-template-columns:250px 1fr;gap:24px}
.tn-pulse-label{padding-left:5px}
.tn-pulse-mark{width:34px}
.tn-pulse-grid{gap:9px}
.tn-pulse-grid a{min-height:79px;padding:11px 30px 12px 13px}
.tn-pulse-grid h3{font-size:.69rem}
.tn-pulse-grid p{font-size:.57rem}
.tn-pulse-grid a:after{height:1px;bottom:8px;opacity:.7}
.status{font-size:.5rem;font-weight:650}

/* CTA: icon-led, premium and visually consistent with the concept. */
.tn-cta{padding:14px 0 17px}
.tn-cta-inner{min-height:62px}
.tn-cta h2{font-size:1.58rem}
.tn-cta p{font-size:.7rem}
.tn-cta .ctas{gap:9px}
.tn-cta-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.tn-btn-icon{width:19px;height:19px;display:grid;place-items:center;flex:0 0 auto}
.tn-btn-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.tn-cta .btn.primary .tn-btn-icon{color:#03151c}
.tn-cta .btn.ghost .tn-btn-icon{color:var(--tn-cyan)}
.tn-cta .btn{min-height:39px;padding:9px 18px}

/* Footer becomes a quieter terminal edge, rather than another content section. */
.tn-footer{padding:22px 0 29px}
.tn-footer-grid{gap:34px}
.tn-footer a{font-size:.67rem}
.tn-brand-footer p{font-size:.63rem}
.tn-footer-grid:after{content:"PUBLIC / HUMAN-SOVEREIGN RESEARCH SYSTEM";position:absolute;right:0;top:0;font-size:.4rem;letter-spacing:.18em;color:color-mix(in srgb,var(--muted) 38%,transparent)}

/* Dark mode receives richer near-black tonal separation without visual noise. */
html[data-theme="dark"] .tn-system-shell{background:linear-gradient(145deg,rgba(4,20,33,.96),rgba(2,12,21,.94))}
html[data-theme="dark"] .tn-flow-card{background:linear-gradient(150deg,rgba(5,24,38,.94),rgba(2,15,25,.93))!important}
html[data-theme="dark"] .tn-feature-card,html[data-theme="dark"] .tn-pulse-grid a{background:linear-gradient(145deg,rgba(4,22,35,.94),rgba(2,14,24,.96))}
html[data-theme="dark"] .tn-system-metrics{background:rgba(3,18,29,.72)}
html[data-theme="dark"] .tn-system-section,html[data-theme="dark"] .tn-discovery,html[data-theme="dark"] .tn-pulse,html[data-theme="dark"] .tn-cta{--tn-grid:rgba(46,217,230,.035)}

/* Light mode keeps the grid subtle and boosts type contrast. */
html[data-theme="light"] .tn-system-section,html[data-theme="light"] .tn-discovery,html[data-theme="light"] .tn-pulse,html[data-theme="light"] .tn-cta{--tn-grid:rgba(9,128,139,.022)}
html[data-theme="light"] .tn-system-shell{box-shadow:0 18px 48px rgba(33,73,93,.085),inset 0 1px #fff}
html[data-theme="light"] .tn-system-metrics{background:rgba(240,250,252,.82)}
html[data-theme="light"] .tn-system-metrics div+div{border-left-color:rgba(32,166,178,.14)!important}
html[data-theme="light"] .tn-feature-card,html[data-theme="light"] .tn-pulse-grid a{box-shadow:0 9px 25px rgba(33,73,93,.055),inset 0 1px #fff}

/* Ambient flow: current card and connector read as one continuous trace. */
.tn-flow-card.tn-current-step{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tn-cyan) 72%,transparent)!important}
.tn-flow-card.tn-current-step:after{color:var(--tn-cyan-hi);filter:drop-shadow(0 0 5px var(--tn-cyan))}
.tn-principal.tn-cycle-pulse{box-shadow:0 0 0 1px color-mix(in srgb,var(--tn-cyan) 18%,transparent),0 0 42px color-mix(in srgb,var(--tn-cyan) 24%,transparent)}

/* More useful first screen at common laptop/desktop scaling. */
@media(min-width:901px) and (max-height:760px){
  .tn-hero,.tn-hero-grid{min-height:285px}
  .tn-hero-copy{padding:20px 0 16px}
  .tn-hero h1{font-size:clamp(2.15rem,3vw,3.15rem)}
  .tn-proof-row{margin-top:10px}
}
@media(max-width:1240px){
  .tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:220px minmax(0,1fr)}
}
@media(max-width:900px){
  .tn-nav-wrap{height:64px}
  .tn-hero,.tn-hero-grid{min-height:390px}
  .tn-hero-copy{padding:30px 0 24px}
  .tn-system-shell,.tn-section-grid,.tn-pulse-layout{grid-template-columns:1fr}
  .tn-system-metrics{grid-template-columns:repeat(2,1fr)}
  .tn-system-metrics div:nth-child(3){border-left:0!important;border-top:1px solid color-mix(in srgb,var(--tn-cyan) 15%,transparent)!important}
  .tn-system-metrics div:nth-child(4){border-top:1px solid color-mix(in srgb,var(--tn-cyan) 15%,transparent)!important}
}
@media(max-width:640px){
  .tn-hero,.tn-hero-grid{min-height:430px}
  .tn-hero h1{font-size:2.35rem}
  .tn-cta .ctas{width:100%;display:grid;grid-template-columns:1fr}
  .tn-cta-btn{width:100%}
  .tn-system-metrics{grid-template-columns:1fr}
  .tn-system-metrics div+div{border-left:0!important;border-top:1px solid color-mix(in srgb,var(--tn-cyan) 15%,transparent)!important}
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r5 — HERO RESTORATION + MODERN SURFACE
   Restores the woman/Earth projection as the hero focal image and
   removes the orthogonal background grid in favour of softer depth.
   ================================================================= */

/* HERO RESTORATION
   The full human/Earth asset was already present; earlier crop/cover
   rules were hiding the face. Use height-driven sizing so the woman
   projects distinctly out of the illuminated Earth, as in the concept.
*/
.tn-hero-visual{
  inset:-4% 1% -4% 46%;
  background-size:auto 118%;
  background-position:left center;
  background-repeat:no-repeat;
  filter:saturate(1.14) contrast(1.10) brightness(.94);
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.7) 4%,
    #000 12%,
    #000 95%,
    rgba(0,0,0,.72) 98%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.7) 4%,
    #000 12%,
    #000 95%,
    rgba(0,0,0,.72) 98%,
    transparent 100%
  );
}

/* Preserve a clean cinematic split: copy on the left, human/Earth on
   the right, without smothering the face in the dark overlay. */
.tn-hero:before{
  background:
    linear-gradient(
      90deg,
      #020b14 0%,
      #020b14 34%,
      rgba(2,11,20,.97) 41%,
      rgba(2,11,20,.55) 49%,
      rgba(2,11,20,.08) 61%,
      rgba(2,11,20,.12) 82%,
      rgba(2,11,20,.68) 100%
    );
}
.tn-hero:after{
  background:
    radial-gradient(circle at 61% 55%,color-mix(in srgb,var(--tn-cyan) 12%,transparent),transparent 12%),
    radial-gradient(circle at 77% 26%,rgba(78,162,255,.075),transparent 26%),
    linear-gradient(180deg,transparent 72%,rgba(2,11,20,.48) 100%);
}
.tn-hero-note{
  right:clamp(28px,5vw,86px);
  background:linear-gradient(90deg,transparent,rgba(2,11,20,.24));
  border-left:1px solid color-mix(in srgb,var(--tn-cyan) 30%,transparent);
}

/* MODERN SURFACE LANGUAGE
   Remove the orthogonal graph-paper treatment. The new background uses
   low-frequency atmospheric light fields and very restrained separators.
*/
.tn-system-section,
.tn-discovery,
.tn-pulse,
.tn-cta{
  background-image:
    radial-gradient(circle at 13% 18%,color-mix(in srgb,var(--tn-cyan) 3.8%,transparent),transparent 23%),
    radial-gradient(circle at 86% 72%,rgba(70,142,202,.025),transparent 27%)!important;
  background-size:auto!important;
  background-position:center!important;
}

/* Remove the impression of intersecting ruled lines around the system.
   Keep only lines that communicate actual architecture/flow. */
.tn-system-shell:before{
  background:
    radial-gradient(circle at 61% 20%,color-mix(in srgb,var(--tn-cyan) 6%,transparent),transparent 22%),
    linear-gradient(90deg,transparent 0 19%,color-mix(in srgb,var(--tn-cyan) 1.7%,transparent) 19% 19.08%,transparent 19.08% 100%);
}
.tn-system-shell{
  box-shadow:
    0 20px 58px rgba(0,0,0,.13),
    inset 0 1px color-mix(in srgb,#fff 4%,transparent);
}

/* Section boundaries become gradient traces rather than full ruled lines. */
.tn-discovery,
.tn-pulse,
.tn-cta{
  border-top:0!important;
  position:relative;
}
.tn-discovery:before,
.tn-pulse:before,
.tn-cta:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1120px,76vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--tn-cyan) 18%,transparent) 18%,
    color-mix(in srgb,var(--tn-cyan) 26%,transparent) 50%,
    color-mix(in srgb,var(--tn-cyan) 18%,transparent) 82%,
    transparent
  );
  pointer-events:none;
}

/* Cards retain structural definition, but the outer field is calmer. */
.tn-feature-card,
.tn-pulse-grid a{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
html[data-theme="dark"] .tn-feature-card,
html[data-theme="dark"] .tn-pulse-grid a{
  background:
    radial-gradient(circle at 12% 15%,rgba(45,219,232,.035),transparent 35%),
    linear-gradient(145deg,rgba(4,22,35,.92),rgba(2,14,24,.95));
}

/* A very subtle modern optical halo around the Human Principal replaces
   unnecessary crossing background lines. */
.tn-principal{
  isolation:isolate;
}
.tn-principal:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-14px -34px;
  border-radius:999px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--tn-cyan) 11%,transparent),transparent 67%);
  opacity:.75;
  pointer-events:none;
}

/* Light mode keeps the hero deliberately cinematic, while the rest of
   the page remains light and highly legible. */
html[data-theme="light"] .tn-hero{
  color:#f3fbff;
  background:#020b14;
}
html[data-theme="light"] .tn-hero h1{color:#f7fbfd}
html[data-theme="light"] .tn-hero .lead,
html[data-theme="light"] .tn-proof-row{color:#c5d6df}
html[data-theme="light"] .tn-hero .btn.ghost{
  color:#f2fbff;
  border-color:rgba(48,220,233,.58);
  background:rgba(2,13,22,.2);
}
html[data-theme="light"] .tn-hero-visual{
  filter:saturate(1.14) contrast(1.10) brightness(.94);
  opacity:1;
}
html[data-theme="light"] .tn-hero:before{
  background:
    linear-gradient(
      90deg,
      #020b14 0%,
      #020b14 34%,
      rgba(2,11,20,.97) 41%,
      rgba(2,11,20,.55) 49%,
      rgba(2,11,20,.08) 61%,
      rgba(2,11,20,.12) 82%,
      rgba(2,11,20,.68) 100%
    );
}

/* Desktop/laptop: keep the entire profile visible rather than allowing
   background-cover to crop the forehead, nose or chin. */
@media(min-width:901px){
  .tn-hero-visual{
    background-size:auto 116%;
    background-position:left center;
  }
}

/* Tablet/mobile: use a softer full-width projection behind the copy. */
@media(max-width:900px){
  .tn-hero-visual{
    inset:0 -12% 0 27%;
    background-size:auto 104%;
    background-position:left center;
    opacity:.64;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 8%,#000 25%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 8%,#000 25%,#000 100%);
  }
}
@media(max-width:640px){
  .tn-hero-visual{
    inset:0 -45% 0 10%;
    background-size:auto 100%;
    opacity:.38;
  }
  .tn-hero:before{
    background:linear-gradient(90deg,#020b14 0%,rgba(2,11,20,.96) 56%,rgba(2,11,20,.62) 100%);
  }
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r6 — LIVING ICONOGRAPHY
   Subtle motion language for the existing SVG icon system.
   Motion is restrained, contextual, viewport-aware and fully disabled
   for prefers-reduced-motion users.
   ================================================================= */

.tn-proof-icon,
.tn-flow-icon,
.tn-feature-icon,
.tn-principal-icon,
.tn-btn-icon{
  position:relative;
  overflow:visible;
  transform-origin:50% 50%;
  will-change:transform,filter,box-shadow;
}

.tn-proof-icon svg,
.tn-flow-icon svg,
.tn-feature-icon svg,
.tn-principal-icon svg,
.tn-btn-icon svg{
  transform-origin:50% 50%;
  overflow:visible;
}

/* A restrained luminous ring gives icons a sense of contained energy. */
.tn-flow-icon:after,
.tn-feature-icon:after,
.tn-principal-icon:after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid color-mix(in srgb,var(--tn-cyan) 22%,transparent);
  border-radius:inherit;
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
}

/* HERO PROOF ICONS
   Only a slow, staggered "wake" — enough to feel alive without making
   the hero resemble an animated dashboard. */
.tn-icons-live .tn-proof-row .tn-proof-icon{
  animation:tn-proof-breathe 7.2s ease-in-out infinite;
}
.tn-icons-live .tn-proof-row span:nth-child(2) .tn-proof-icon{animation-delay:-1.8s}
.tn-icons-live .tn-proof-row span:nth-child(3) .tn-proof-icon{animation-delay:-3.6s}
.tn-icons-live .tn-proof-row span:nth-child(4) .tn-proof-icon{animation-delay:-5.4s}

@keyframes tn-proof-breathe{
  0%,72%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 transparent)}
  78%{transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--tn-cyan) 38%,transparent))}
  86%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 1px color-mix(in srgb,var(--tn-cyan) 18%,transparent))}
}

/* PRINCIPAL
   A quiet authority heartbeat. r4 already pulses the principal when
   the flow cycle returns to step one; this adds icon-specific life. */
.tn-icons-live .tn-principal-icon svg{
  animation:tn-principal-breathe 4.8s ease-in-out infinite;
}
.tn-principal.tn-cycle-pulse .tn-principal-icon:after{
  animation:tn-icon-ring .95s cubic-bezier(.2,.75,.25,1);
}
.tn-principal.tn-cycle-pulse .tn-principal-icon svg{
  animation:tn-principal-wake .9s cubic-bezier(.18,.78,.25,1);
}

@keyframes tn-principal-breathe{
  0%,100%{transform:translateY(0);opacity:.9}
  50%{transform:translateY(-.7px);opacity:1}
}
@keyframes tn-principal-wake{
  0%{transform:scale(.92);filter:drop-shadow(0 0 0 transparent)}
  45%{transform:scale(1.09);filter:drop-shadow(0 0 6px var(--tn-cyan))}
  100%{transform:scale(1);filter:drop-shadow(0 0 1px color-mix(in srgb,var(--tn-cyan) 25%,transparent))}
}

/* FLOW ICONS
   The active research-system stage gets an SVG trace/draw effect.
   The card sequence already cycles; r6 makes the icon itself participate. */
.tn-flow-icon svg *{
  stroke-dasharray:92;
  stroke-dashoffset:0;
}
.tn-flow-card.tn-current-step .tn-flow-icon{
  animation:tn-flow-icon-lift 1.05s cubic-bezier(.2,.75,.25,1);
}
.tn-flow-card.tn-current-step .tn-flow-icon:after{
  animation:tn-icon-ring 1.05s cubic-bezier(.2,.75,.25,1);
}
.tn-flow-card.tn-current-step .tn-flow-icon svg *{
  animation:tn-stroke-trace 1.15s cubic-bezier(.3,.7,.25,1);
}

@keyframes tn-flow-icon-lift{
  0%{transform:translateY(0) scale(.96)}
  45%{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tn-cyan) 58%,transparent))}
  100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--tn-cyan) 22%,transparent))}
}
@keyframes tn-stroke-trace{
  0%{stroke-dashoffset:92;opacity:.45}
  45%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes tn-icon-ring{
  0%{opacity:0;transform:scale(.82)}
  35%{opacity:.72}
  100%{opacity:0;transform:scale(1.32)}
}

/* CAPABILITY ICONS
   Each card has a very slow, out-of-phase micro-float. Hover/focus
   gives a clearer response and the line art traces once. */
.tn-icons-live .tn-feature-card .tn-feature-icon{
  animation:tn-feature-drift 6.8s ease-in-out infinite;
}
.tn-icons-live .tn-feature-card:nth-child(2) .tn-feature-icon{animation-delay:-1.7s}
.tn-icons-live .tn-feature-card:nth-child(3) .tn-feature-icon{animation-delay:-3.4s}
.tn-icons-live .tn-feature-card:nth-child(4) .tn-feature-icon{animation-delay:-5.1s}

.tn-feature-card:hover .tn-feature-icon,
.tn-feature-card:focus-visible .tn-feature-icon{
  animation:tn-feature-hover .72s cubic-bezier(.2,.75,.25,1);
}
.tn-feature-card:hover .tn-feature-icon:after,
.tn-feature-card:focus-visible .tn-feature-icon:after{
  animation:tn-icon-ring .85s cubic-bezier(.2,.75,.25,1);
}
.tn-feature-card:hover .tn-feature-icon svg *,
.tn-feature-card:focus-visible .tn-feature-icon svg *{
  stroke-dasharray:92;
  animation:tn-stroke-trace .85s cubic-bezier(.3,.7,.25,1);
}

@keyframes tn-feature-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-1.5px,0)}
}
@keyframes tn-feature-hover{
  0%{transform:translateY(0) scale(1)}
  48%{transform:translateY(-2px) scale(1.075);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tn-cyan) 48%,transparent))}
  100%{transform:translateY(-1px) scale(1.025)}
}

/* RESEARCH PULSE
   The ECG mark should actually pulse. It pauses between beats so the
   movement is read as a signal, not decoration. */
.tn-icons-live .tn-pulse-mark{
  animation:tn-pulse-mark-live 3.4s ease-in-out infinite;
}
.tn-icons-live .tn-pulse-mark i{
  animation:tn-ecg-spike 3.4s cubic-bezier(.2,.75,.25,1) infinite;
}
.tn-icons-live .tn-pulse-mark span{
  animation:tn-ecg-line 3.4s ease-in-out infinite;
}

@keyframes tn-pulse-mark-live{
  0%,18%,100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}
  6%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tn-cyan) 62%,transparent));transform:scale(1.045)}
  11%{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--tn-cyan) 28%,transparent));transform:scale(1)}
}
@keyframes tn-ecg-spike{
  0%,18%,100%{transform:rotate(125deg) skew(-16deg) scaleY(1)}
  6%{transform:rotate(125deg) skew(-16deg) scaleY(1.18)}
  11%{transform:rotate(125deg) skew(-16deg) scaleY(.96)}
}
@keyframes tn-ecg-line{
  0%,18%,100%{opacity:.62}
  6%{opacity:1}
  11%{opacity:.72}
}

/* CTA ICONS
   Mostly interaction-led: a tiny lift/trace on hover or keyboard focus. */
.tn-cta-btn .tn-btn-icon{
  transition:transform .32s cubic-bezier(.2,.75,.25,1),filter .32s ease;
}
.tn-cta-btn:hover .tn-btn-icon,
.tn-cta-btn:focus-visible .tn-btn-icon{
  transform:translateY(-1px) scale(1.09);
  filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 38%,transparent));
}
.tn-cta-btn:hover .tn-btn-icon svg *,
.tn-cta-btn:focus-visible .tn-btn-icon svg *{
  stroke-dasharray:92;
  animation:tn-stroke-trace .82s cubic-bezier(.3,.7,.25,1);
}

/* Status dots in Research Pulse breathe at very low amplitude. */
.tn-icons-live .status{
  animation:tn-status-breathe 4.6s ease-in-out infinite;
}
.tn-icons-live .tn-pulse-grid a:nth-child(2) .status{animation-delay:-1.15s}
.tn-icons-live .tn-pulse-grid a:nth-child(3) .status{animation-delay:-2.3s}
.tn-icons-live .tn-pulse-grid a:nth-child(4) .status{animation-delay:-3.45s}
@keyframes tn-status-breathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22) drop-shadow(0 0 4px currentColor)}
}

/* Hard stop for users who prefer reduced motion. */
@media(prefers-reduced-motion:reduce){
  .tn-proof-icon,
  .tn-proof-icon svg,
  .tn-flow-icon,
  .tn-flow-icon svg *,
  .tn-feature-icon,
  .tn-feature-icon svg *,
  .tn-principal-icon,
  .tn-principal-icon svg,
  .tn-pulse-mark,
  .tn-pulse-mark i,
  .tn-pulse-mark span,
  .tn-btn-icon,
  .tn-btn-icon svg *,
  .status{
    animation:none!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .tn-flow-icon:after,
  .tn-feature-icon:after,
  .tn-principal-icon:after{
    display:none!important;
  }
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r7 — INTERACTION + RESPONSIVE FIDELITY
   Preserves the r6 visual design while improving touch, keyboard,
   mobile/tablet layout, flow choreography and interaction clarity.
   ================================================================= */

/* ACCESSIBLE INTERACTION STATES */
.tn-home a:focus-visible,
.tn-home button:focus-visible{
  outline:2px solid var(--tn-cyan);
  outline-offset:3px;
}
.tn-main-nav a,
.tn-feature-card,
.tn-pulse-grid a,
.tn-cta-btn,
.theme-toggle,
.tn-menu-toggle{
  -webkit-tap-highlight-color:transparent;
}
.tn-feature-card,
.tn-pulse-grid a,
.tn-cta-btn{
  touch-action:manipulation;
}

/* FLOW SIGNAL
   One small luminous signal travels through the actual system flow.
   It reinforces architecture rather than adding decorative ruled lines. */
.tn-system-flow{
  position:relative;
}
.tn-system-flow:after{
  content:"";
  position:absolute;
  top:-9px;
  left:2%;
  width:52px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--tn-cyan),transparent);
  box-shadow:0 0 13px color-mix(in srgb,var(--tn-cyan) 72%,transparent);
  opacity:0;
  pointer-events:none;
}
.tn-icons-live .tn-system-flow:after{
  opacity:.72;
  animation:tn-flow-signal 16.8s linear infinite;
}
@keyframes tn-flow-signal{
  0%{left:2%;opacity:0}
  3%{opacity:.72}
  92%{opacity:.72}
  100%{left:94%;opacity:0}
}

/* Research Pulse cards now respond in sequence to the ECG rhythm. */
.tn-pulse-grid a{
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    background .24s ease;
}
.tn-pulse-grid a.tn-pulse-active{
  border-color:color-mix(in srgb,var(--tn-cyan) 62%,transparent);
  transform:translateY(-1px);
  box-shadow:
    0 9px 26px rgba(0,0,0,.09),
    0 0 24px color-mix(in srgb,var(--tn-cyan) 9%,transparent),
    inset 0 1px color-mix(in srgb,#fff 6%,transparent);
}
.tn-pulse-grid a.tn-pulse-active:after{
  opacity:1;
  background:linear-gradient(90deg,var(--tn-cyan),transparent 78%);
}

/* Slightly improve content legibility without changing information density. */
.tn-system-intro p,
.tn-section-copy p,
.tn-feature-card p,
.tn-pulse-grid p{
  text-wrap:pretty;
}
.tn-system-flow h3,
.tn-feature-card h3,
.tn-pulse-grid h3{
  text-wrap:balance;
}

/* Tablet: keep the architecture readable rather than compressing 7 nodes
   into an awkward multi-row grid. Horizontal scroll provides a deliberate
   "system rail" with snap points and card peeking. */
@media(max-width:1240px) and (min-width:641px){
  .tn-system-flow{
    display:flex!important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:10px;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--tn-cyan) 32%,transparent) transparent;
    padding:1px 2px 10px;
    margin-right:-4px;
  }
  .tn-system-flow::-webkit-scrollbar{height:5px}
  .tn-system-flow::-webkit-scrollbar-track{background:transparent}
  .tn-system-flow::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--tn-cyan) 28%,transparent);
    border-radius:999px;
  }
  .tn-system-flow article{
    flex:0 0 clamp(150px,21vw,190px);
    scroll-snap-align:start;
  }
  .tn-system-flow article:nth-child(n+5){min-height:108px}
  .tn-system-flow:after{display:none}
}

/* MOBILE NAVIGATION
   Turns the current dropdown into a cleaner full-width panel with a
   backdrop and clearer touch targets. */
@media(max-width:900px){
  .tn-header{position:sticky;top:0}
  .tn-menu-toggle{
    position:relative;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--tn-cyan) 25%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--card) 68%,transparent);
  }
  .tn-menu-toggle span{
    position:absolute;
    width:18px;
    height:1.5px;
    margin:0;
    transition:transform .22s ease,opacity .22s ease,top .22s ease;
  }
  .tn-menu-toggle span:nth-child(1){top:14px}
  .tn-menu-toggle span:nth-child(2){top:20px}
  .tn-menu-toggle span:nth-child(3){top:26px}
  .tn-menu-toggle[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
  .tn-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .tn-menu-toggle[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

  .tn-main-nav{
    left:12px;
    right:12px;
    top:70px;
    padding:9px;
    border-radius:14px;
    background:color-mix(in srgb,var(--bg) 96%,transparent);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.28);
  }
  .tn-main-nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:10px 13px;
    border-radius:9px;
    font-size:.82rem;
  }
  .tn-main-nav a:hover,
  .tn-main-nav a:focus-visible,
  .tn-main-nav a.active{
    background:color-mix(in srgb,var(--tn-cyan) 7%,transparent);
    color:var(--text);
  }
  body.tn-nav-open{overflow:hidden}
  body.tn-nav-open:after{
    content:"";
    position:fixed;
    inset:0;
    z-index:39;
    background:rgba(0,8,14,.36);
    backdrop-filter:blur(2px);
    pointer-events:none;
  }
  .tn-header{z-index:50}

  .tn-hero-copy{
    max-width:620px;
  }
  .tn-authority-row{
    grid-template-columns:1fr 220px 1fr;
  }
  .tn-system-shell{
    padding:16px;
  }
  .tn-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tn-pulse-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Phones: convert the system into a swipeable rail rather than seven
   full-width stacked cards; this keeps the experience recognisably Nexus. */
@media(max-width:640px){
  .tn-nav-wrap{gap:8px}
  .tn-brand{min-width:0;flex:1}
  .tn-brand b{letter-spacing:.15em}
  .tn-nav-actions{gap:6px}
  .tn-nav-actions .theme-toggle{
    min-width:40px;
    min-height:40px;
    border-radius:999px;
  }

  .tn-hero{
    min-height:455px;
  }
  .tn-hero-grid{
    min-height:455px;
  }
  .tn-hero-copy{
    padding:30px 0 24px;
    max-width:100%;
  }
  .tn-hero h1{
    font-size:clamp(2.2rem,11vw,3rem);
    max-width:94%;
  }
  .tn-hero .lead{
    font-size:.86rem;
    max-width:92%;
  }
  .tn-hero .ctas{
    display:grid;
    grid-template-columns:1fr;
    width:min(100%,330px);
  }
  .tn-hero .btn{
    width:100%;
    justify-content:center;
  }
  .tn-proof-row{
    grid-template-columns:1fr;
    max-width:330px;
  }

  .tn-system-shell{
    padding:14px 12px 13px;
    gap:14px;
  }
  .tn-system-intro{
    padding-right:0;
  }
  .tn-authority-row{
    display:grid;
    grid-template-columns:1fr;
    height:auto;
    gap:7px;
    margin-bottom:9px;
  }
  .tn-authority-copy{display:none}
  .tn-principal{
    width:100%;
    max-width:265px;
  }

  .tn-system-flow{
    display:flex!important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:9px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    padding:1px 20% 11px 1px;
    margin-right:-12px;
    scrollbar-width:none;
  }
  .tn-system-flow::-webkit-scrollbar{display:none}
  .tn-system-flow article{
    flex:0 0 78%;
    min-height:132px!important;
    scroll-snap-align:start;
    padding:13px!important;
  }
  .tn-system-flow:before,
  .tn-system-flow:after{
    display:none!important;
  }
  .tn-flow-card:not(:last-child):after{
    display:block!important;
    right:-8px!important;
  }
  .tn-loop{
    font-size:.47rem;
    gap:7px;
    overflow:hidden;
  }
  .tn-system-metrics{
    grid-template-columns:1fr 1fr!important;
  }

  .tn-card-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:10px;
    padding:2px 17% 10px 1px;
    margin-right:-14px;
    scrollbar-width:none;
  }
  .tn-card-grid::-webkit-scrollbar{display:none}
  .tn-feature-card{
    flex:0 0 82%;
    min-height:148px;
    scroll-snap-align:start;
  }

  .tn-pulse-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:8px;
    padding:1px 18% 8px 1px;
    margin-right:-14px;
    scrollbar-width:none;
  }
  .tn-pulse-grid::-webkit-scrollbar{display:none}
  .tn-pulse-grid a{
    flex:0 0 78%;
    min-height:86px;
    scroll-snap-align:start;
  }

  .tn-cta-inner{
    gap:14px;
  }
  .tn-cta .ctas{
    width:100%;
  }
  .tn-cta-btn{
    min-height:44px;
  }
  .tn-footer-grid{
    grid-template-columns:1fr 1fr;
    row-gap:18px;
  }
}

/* Very narrow phones */
@media(max-width:390px){
  .tn-home .wrap{width:calc(100% - 22px)}
  .tn-brand img{width:25px;height:25px}
  .tn-brand b{font-size:.66rem}
  .tn-hero h1{font-size:2.08rem}
  .tn-system-flow article{flex-basis:84%}
  .tn-feature-card{flex-basis:88%}
  .tn-pulse-grid a{flex-basis:84%}
}

/* Short laptop viewport: preserve the high-information-density concept. */
@media(min-width:901px) and (max-height:700px){
  .tn-nav-wrap{height:60px}
  .tn-hero,.tn-hero-grid{min-height:270px}
  .tn-hero h1{font-size:clamp(2.05rem,2.85vw,3rem)}
  .tn-hero .lead{font-size:.86rem}
  .tn-hero .ctas{margin-top:12px}
  .tn-proof-row{margin-top:9px}
  .tn-system-section{padding-top:12px}
}

/* Reduced motion includes the new moving flow signal and pulse sequence. */
@media(prefers-reduced-motion:reduce){
  .tn-system-flow:after,
  .tn-pulse-grid a.tn-pulse-active{
    animation:none!important;
    transform:none!important;
  }
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r8 — MOBILE COMPOSITION + INTERACTION CUES
   Final responsive visual pass. Desktop r7 is intentionally preserved.
   ================================================================= */

/* LIGHT-THEME LEGIBILITY
   Slightly deepen secondary copy without making the light interface heavy. */
html[data-theme="light"] .tn-system-intro p,
html[data-theme="light"] .tn-system-flow p,
html[data-theme="light"] .tn-feature-card p,
html[data-theme="light"] .tn-pulse-grid p,
html[data-theme="light"] .tn-section-copy p,
html[data-theme="light"] .tn-pulse-label p{
  color:#526b78;
}
html[data-theme="light"] .tn-authority-copy,
html[data-theme="light"] .tn-system-metrics span,
html[data-theme="light"] .tn-card-kicker{
  color:#5d7681;
}

/* TABLET / MOBILE RAIL DISCOVERY
   A soft edge fade communicates that the interface continues horizontally.
   JS toggles start/end classes so the fade disappears at the end. */
@media(max-width:900px){
  .tn-system-flow,
  .tn-card-grid,
  .tn-pulse-grid{
    --rail-fade:44px;
    -webkit-mask-image:linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--rail-fade)),
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--rail-fade)),
      transparent 100%
    );
    transition:filter .25s ease;
  }

  .tn-system-flow.tn-rail-end,
  .tn-card-grid.tn-rail-end,
  .tn-pulse-grid.tn-rail-end{
    -webkit-mask-image:none;
    mask-image:none;
  }

  .tn-system-flow.tn-rail-middle,
  .tn-card-grid.tn-rail-middle,
  .tn-pulse-grid.tn-rail-middle{
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0,
      #000 var(--rail-fade),
      #000 calc(100% - var(--rail-fade)),
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0,
      #000 var(--rail-fade),
      #000 calc(100% - var(--rail-fade)),
      transparent 100%
    );
  }

  .tn-system-flow.tn-swipe-ready,
  .tn-card-grid.tn-swipe-ready,
  .tn-pulse-grid.tn-swipe-ready{
    filter:drop-shadow(7px 0 9px color-mix(in srgb,var(--tn-cyan) 11%,transparent));
  }
}

/* PHONE HERO
   The full woman/Earth relationship is preserved by reducing the image scale
   instead of allowing the face to dominate the narrow viewport. */
@media(max-width:640px){
  .tn-hero-visual{
    inset:0 -15% 0 -7%;
    background-size:auto 83%;
    background-position:55% center;
    opacity:.56;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.36) 5%,
      #000 21%,
      #000 92%,
      rgba(0,0,0,.7) 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.36) 5%,
      #000 21%,
      #000 92%,
      rgba(0,0,0,.7) 100%
    );
  }

  .tn-hero:before{
    background:linear-gradient(
      90deg,
      #020b14 0%,
      rgba(2,11,20,.97) 38%,
      rgba(2,11,20,.80) 57%,
      rgba(2,11,20,.34) 78%,
      rgba(2,11,20,.54) 100%
    );
  }

  .tn-hero:after{
    background:
      radial-gradient(circle at 74% 54%,color-mix(in srgb,var(--tn-cyan) 13%,transparent),transparent 17%),
      linear-gradient(180deg,transparent 76%,rgba(2,11,20,.45) 100%);
  }

  /* Slightly more breathing room around hero copy while keeping all CTAs above
     the fold on common 360–430 px devices. */
  .tn-hero-copy{padding:28px 0 22px}
  .tn-hero .eyebrow{max-width:94%;line-height:1.55}
  .tn-hero h1{max-width:96%;line-height:1.02}
  .tn-hero .lead{max-width:94%;line-height:1.48}
  .tn-proof-row{gap:8px}

  /* PRINCIPAL → FLOW CONTINUITY
     Bring the first rail closer to the authority node and give card 01 a
     clear receiving trace. */
  .tn-principal{margin-bottom:1px}
  .tn-principal:after{height:19px}
  .tn-system-flow{margin-top:-2px}
  .tn-system-flow article:first-of-type{
    border-color:color-mix(in srgb,var(--tn-cyan) 48%,transparent)!important;
    box-shadow:
      inset 0 1px color-mix(in srgb,#fff 5%,transparent),
      0 0 22px color-mix(in srgb,var(--tn-cyan) 5%,transparent);
  }
  .tn-system-flow article:first-of-type:before{
    opacity:1!important;
    background:linear-gradient(90deg,var(--tn-cyan),transparent 80%)!important;
  }

  /* Larger touch-safe rail cards but with slightly less vertical bulk. */
  .tn-system-flow article{min-height:126px!important}
  .tn-feature-card{min-height:142px}
  .tn-pulse-grid a{min-height:82px}

  /* Mobile section copy is more compact before swipeable content. */
  .tn-section-copy{padding-bottom:2px}
  .tn-section-copy p{max-width:92%}
  .tn-pulse-label{padding-bottom:5px}

  /* The footer's faint system label no longer crosses the brand at phone size. */
  .tn-footer-grid:after{
    display:none;
  }
}

/* Narrow phone composition */
@media(max-width:390px){
  .tn-hero-visual{
    inset:0 -23% 0 -13%;
    background-size:auto 80%;
    background-position:55% center;
  }
  .tn-hero{min-height:445px}
  .tn-hero-grid{min-height:445px}
  .tn-hero h1{font-size:2.02rem}
  .tn-hero .lead{font-size:.83rem}
}

/* Tiny landscape / short-phone viewport: reduce hero height but retain metaphor. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .tn-hero,.tn-hero-grid{min-height:330px}
  .tn-hero-visual{
    inset:-8% 0;
    background-size:auto 108%;
    background-position:61% center;
  }
  .tn-hero-copy{padding:20px 0}
  .tn-hero h1{font-size:2.12rem}
  .tn-proof-row{display:none}
}

/* Reduced motion also suppresses temporary rail cue emphasis. */
@media(prefers-reduced-motion:reduce){
  .tn-system-flow.tn-swipe-ready,
  .tn-card-grid.tn-swipe-ready,
  .tn-pulse-grid.tn-swipe-ready{
    filter:none!important;
  }
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r9 — MOBILE HERO WOMAN PRIORITY
   Targeted correction of the phone hero crop while preserving r8 elsewhere.
   ================================================================= */

@media(max-width:640px){
  /* Re-prioritize the woman profile on phones.
     The Earth remains only as a faint peripheral trace on the right edge. */
  .tn-hero-visual{
    inset:0 -30% 0 -2%;
    background-size:auto 98%;
    background-position:41% center;
    opacity:.52;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.40) 4%,
      #000 16%,
      #000 73%,
      rgba(0,0,0,.54) 88%,
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.40) 4%,
      #000 16%,
      #000 73%,
      rgba(0,0,0,.54) 88%,
      transparent 100%
    );
  }

  /* Slightly stronger right-side veil so the Earth reads as a subtle secondary echo,
     not the dominant mobile subject. */
  .tn-hero:before{
    background:linear-gradient(
      90deg,
      #020b14 0%,
      rgba(2,11,20,.97) 40%,
      rgba(2,11,20,.80) 59%,
      rgba(2,11,20,.58) 78%,
      rgba(2,11,20,.72) 100%
    );
  }

  .tn-hero:after{
    background:
      radial-gradient(circle at 81% 54%,color-mix(in srgb,var(--tn-cyan) 9%,transparent),transparent 16%),
      linear-gradient(180deg,transparent 75%,rgba(2,11,20,.42) 100%);
  }
}

@media(max-width:390px){
  .tn-hero-visual{
    inset:0 -34% 0 -4%;
    background-size:auto 102%;
    background-position:39% center;
    opacity:.50;
  }
}

@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  /* Short landscape phones also keep the woman as the principal image. */
  .tn-hero-visual{
    inset:-8% -18% -2% -4%;
    background-size:auto 104%;
    background-position:46% center;
  }
}



/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r10 — MOBILE MENU + WOMAN-FIRST HERO FIX
   ================================================================= */

/* The menu button now has one click controller only. Keep the open nav
   unequivocally above the page/backdrop on touch browsers. */
@media(max-width:900px){
  .tn-header{z-index:80}
  .tn-main-nav{z-index:82}
  .tn-menu-toggle{z-index:83;cursor:pointer}
  body.tn-nav-open:after{z-index:70}
}

/* MOBILE HERO FINAL COMPOSITION
   Prioritize the woman's face/profile. The Earth survives only as a small,
   fading trace at the extreme right of the phone hero. */
@media(max-width:640px){
  .tn-hero-visual{
    inset:0 -20% 0 10%;
    background-size:auto 100%;
    background-position:left center;
    background-repeat:no-repeat;
    opacity:.50;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.58) 4%,
      #000 12%,
      #000 76%,
      rgba(0,0,0,.58) 88%,
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.58) 4%,
      #000 12%,
      #000 76%,
      rgba(0,0,0,.58) 88%,
      transparent 100%
    );
  }

  .tn-hero:before{
    background:linear-gradient(
      90deg,
      #020b14 0%,
      rgba(2,11,20,.97) 35%,
      rgba(2,11,20,.86) 54%,
      rgba(2,11,20,.52) 76%,
      rgba(2,11,20,.68) 100%
    );
  }

  .tn-hero:after{
    background:
      radial-gradient(circle at 88% 54%,color-mix(in srgb,var(--tn-cyan) 7%,transparent),transparent 13%),
      linear-gradient(180deg,transparent 76%,rgba(2,11,20,.43) 100%);
  }
}

/* Very narrow phones preserve the same woman-first composition instead of
   drifting toward the Earth side of the source image. */
@media(max-width:390px){
  .tn-hero-visual{
    inset:0 -18% 0 8%;
    background-size:auto 100%;
    background-position:left center;
    opacity:.50;
  }
}

/* Short landscape phones: retain the profile and allow only a restrained
   peripheral Earth cue. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .tn-hero-visual{
    inset:-5% -12% -5% 5%;
    background-size:auto 110%;
    background-position:left center;
    opacity:.48;
  }
}


/* =================================================================
   TRANSFERENCE PUBLIC v2.6.0-r11 — THEME + MOBILE MENU CONSISTENCY
   Keeps the accepted woman-first mobile hero unchanged.
   ================================================================= */

/* Smooth only the surfaces that visibly change theme. */
.tn-header,
.tn-main-nav,
.tn-main-nav a,
.tn-menu-toggle,
.theme-toggle,
.tn-system-shell,
.tn-feature-card,
.tn-pulse-grid a,
.tn-footer{
  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

/* MOBILE MENU AS A COMPLETE THEMED SHEET
   Force the entire nav—not only the active item—to live inside one panel. */
@media(max-width:900px){
  .tn-main-nav,
  .tn-main-nav.open{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:calc(76px + env(safe-area-inset-top, 0px))!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 94px - env(safe-area-inset-bottom, 0px))!important;
    margin:0!important;
    padding:11px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
    isolation:isolate;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .tn-main-nav{display:none!important}
  .tn-main-nav.open{display:flex!important}

  .tn-main-nav.open a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:50px!important;
    margin:0!important;
    padding:12px 15px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    box-sizing:border-box!important;
    font-size:.98rem!important;
    line-height:1.25!important;
    white-space:normal!important;
    transform:none!important;
  }

  .tn-main-nav.open a.active:after{display:none!important}

  .tn-menu-toggle,
  .theme-toggle{
    transition:
      color .22s ease,
      background-color .22s ease,
      border-color .22s ease,
      box-shadow .22s ease;
  }

  /* The backdrop receives pointer events so a tap outside the header/menu
     closes the sheet instead of activating blurred page content beneath it. */
  body.tn-nav-open:after{
    pointer-events:auto!important;
    transition:background-color .22s ease,backdrop-filter .22s ease;
  }

  /* Explicit light menu palette; do not rely on partially inherited vars. */
  html[data-theme="light"] .tn-main-nav.open{
    color:#17313e!important;
    background:rgba(246,252,253,.985)!important;
    border:1px solid rgba(24,174,188,.24)!important;
    box-shadow:
      0 24px 70px rgba(31,61,75,.22),
      inset 0 1px rgba(255,255,255,.95)!important;
    backdrop-filter:blur(22px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.04)!important;
  }

  html[data-theme="light"] .tn-main-nav.open a{
    color:#284653!important;
  }

  html[data-theme="light"] .tn-main-nav.open a:hover,
  html[data-theme="light"] .tn-main-nav.open a:focus-visible{
    color:#0d2936!important;
    background:rgba(32,198,211,.075)!important;
    border-color:rgba(32,198,211,.10)!important;
  }

  html[data-theme="light"] .tn-main-nav.open a.active{
    color:#102c38!important;
    background:linear-gradient(90deg,rgba(39,208,221,.105),rgba(39,208,221,.035))!important;
    border-color:rgba(32,198,211,.14)!important;
  }

  html[data-theme="light"] body.tn-nav-open:after{
    background:rgba(31,50,58,.34)!important;
    backdrop-filter:blur(5px) saturate(.88)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.88)!important;
  }

  /* Explicit dark menu palette. */
  html[data-theme="dark"] .tn-main-nav.open{
    color:#eaf7fb!important;
    background:rgba(2,17,28,.975)!important;
    border:1px solid rgba(49,215,228,.23)!important;
    box-shadow:
      0 28px 78px rgba(0,0,0,.55),
      inset 0 1px rgba(111,232,241,.045)!important;
    backdrop-filter:blur(24px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.08)!important;
  }

  html[data-theme="dark"] .tn-main-nav.open a{
    color:#c5d8e1!important;
  }

  html[data-theme="dark"] .tn-main-nav.open a:hover,
  html[data-theme="dark"] .tn-main-nav.open a:focus-visible{
    color:#f5fdff!important;
    background:rgba(54,222,234,.075)!important;
    border-color:rgba(54,222,234,.11)!important;
  }

  html[data-theme="dark"] .tn-main-nav.open a.active{
    color:#f4fdff!important;
    background:linear-gradient(90deg,rgba(42,207,220,.12),rgba(42,207,220,.035))!important;
    border-color:rgba(42,207,220,.15)!important;
  }

  html[data-theme="dark"] body.tn-nav-open:after{
    background:rgba(0,7,13,.66)!important;
    backdrop-filter:blur(5px) saturate(.72)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.72)!important;
  }

  /* Header controls follow the active theme even while the menu is open. */
  html[data-theme="light"] .tn-menu-toggle,
  html[data-theme="light"] .theme-toggle{
    color:#17313e!important;
    background:rgba(248,253,254,.82)!important;
    border-color:rgba(27,157,169,.30)!important;
  }

  html[data-theme="dark"] .tn-menu-toggle,
  html[data-theme="dark"] .theme-toggle{
    color:#eefbff!important;
    background:rgba(3,20,32,.78)!important;
    border-color:rgba(49,215,228,.34)!important;
  }

  html[data-theme="light"] .tn-menu-toggle span{background:#17313e!important}
  html[data-theme="dark"] .tn-menu-toggle span{background:#eefbff!important}
}

/* The accepted r10 woman-first mobile hero is intentionally not overridden. */