@import url("../components/synergy-node-identities.css?v=20260923-1");
:root{--how-navy:#081d30;--how-ink:#101b35;--how-soft:#eef5f7;--how-lime:#ccff66;--how-cyan:#35d8ff;--how-violet:#8f72ff}
.how-page{background:#f8fbfc;color:var(--how-ink)}
.how-hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,132px) 0 84px;background:radial-gradient(circle at 78% 28%,rgba(53,216,255,.18),transparent 31%),radial-gradient(circle at 18% 82%,rgba(143,114,255,.18),transparent 28%),linear-gradient(145deg,#07182a,#102746 70%,#143b58);color:#fff}
.how-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent)}
.how-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(36px,6vw,84px);align-items:center}
.how-hero h1{max-width:15ch;margin:.45rem 0 1.2rem;font-size:var(--sy-hero-title-size);line-height:var(--sy-hero-title-line);letter-spacing:var(--sy-hero-title-letter)}
.how-hero h1 span{color:var(--how-lime)}
.how-lede{max-width:760px;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.65;color:#cfe1ec}
.how-proof{margin:28px 0 0;color:#b8d2df;font-size:.93rem;letter-spacing:.02em}
.how-value-card{display:grid;gap:16px}
.how-value-card article{padding:28px;border:1px solid rgba(255,255,255,.15);border-radius:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.18)}
.how-value-card article:first-child{border-top:4px solid var(--how-cyan)}
.how-value-card article:last-child{border-top:4px solid var(--how-lime)}
.how-value-card span{font-size:.72rem;font-weight:900;letter-spacing:.17em;color:var(--how-cyan)}
.how-value-card article:last-child span{color:var(--how-lime)}
.how-value-card h2{margin:.4rem 0;font-size:1.55rem}
.how-value-card p{margin:.3rem 0 1rem;color:#d5e4ec;line-height:1.55}
.how-value-card strong{color:#fff}
.how-section{padding:clamp(72px,9vw,118px) 0}
.how-section--soft{background:var(--how-soft)}
.how-section--navy{background:linear-gradient(140deg,#0a2138,#112e4c);color:#fff}
.how-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:48px;align-items:end;margin-bottom:44px}
.how-section h2,.how-cta h2{margin:.35rem 0;font-size:clamp(2.35rem,4.8vw,4.8rem);line-height:.98;letter-spacing:-.045em}
.how-section-head>p{margin:0;color:#526477;line-height:1.68}
.how-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-three article,.how-capacity-grid article{position:relative;overflow:hidden;padding:28px;border:1px solid #dce7eb;border-radius:22px;background:#fff;box-shadow:0 16px 48px rgba(27,52,75,.08)}
.how-three b{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:15px;background:#e7f9ff;color:#126c8a;font-size:.75rem}
.how-three h3,.how-capacity-grid h3,.how-ladder h3{margin:1rem 0 .55rem;font-size:1.25rem}
.how-three p,.how-capacity-grid p,.how-ladder p{color:#596b7b;line-height:1.6}
.how-definition{display:grid;grid-template-columns:220px 1fr;gap:30px;margin-top:28px;padding:28px 30px;border-radius:20px;background:var(--how-ink);color:#dceaf0}
.how-definition strong{color:var(--how-lime)}
.how-capacity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-capacity-grid article:before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--accent)}
.how-capacity-grid article:last-child{grid-column:2}
.how-capacity-grid p{margin:.4rem 0}
.how-capacity-grid strong{color:#182a43}
.how-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:72px;align-items:center}
.how-stack{display:grid;gap:12px;padding:0;list-style:none}
.how-stack li{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:23px 26px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.how-stack b{color:var(--how-lime);letter-spacing:.12em}
.how-stack span{color:#d2e2e9;line-height:1.5}
.trident-panel{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center;padding:clamp(34px,5vw,64px);border-radius:34px;background:linear-gradient(135deg,#f1f7ff,#f5f1ff);box-shadow:0 24px 80px rgba(53,72,108,.12)}
.trident-symbol{display:grid;width:124px;height:124px;place-items:center;justify-self:center;padding:25px;border:1px solid rgba(255,255,255,.7);border-radius:38px;background:radial-gradient(circle at 35% 28%,#caff62,#79dbe6 44%,#4b72dc 100%);box-shadow:0 18px 45px rgba(44,91,190,.22)}
.trident-symbol img{display:block;width:100%;height:100%;object-fit:contain}
.trident-panel p{max-width:900px;line-height:1.7;color:#4f6073}
.trident-panel strong{color:#172746}
.how-boundary{padding:18px 20px;border-left:4px solid var(--how-lime);background:rgba(255,255,255,.7);border-radius:0 14px 14px 0}
.trident-reference{margin-top:16px}.trident-reference a{color:#285fc5;font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px}
.how-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0;list-style:none}
.how-ladder li{padding:22px;border-radius:18px;background:#fff;border:1px solid #dce7eb}
.how-ladder b{color:#5570dc;font-size:.78rem;letter-spacing:.12em}
.how-ladder h3{font-size:1.05rem}
.how-ladder p{font-size:.94rem}
.how-cta{padding:90px 0;background:linear-gradient(120deg,#143550,#0b2136);color:#fff;text-align:center}
.how-cta p{max-width:760px;margin:1rem auto 1.6rem;color:#cfe0e8;font-size:1.1rem;line-height:1.65}
.how-cta .sy-actions{justify-content:center}
@media(max-width:980px){.how-hero-grid,.how-section-head,.how-split{grid-template-columns:1fr}.how-three,.how-capacity-grid{grid-template-columns:repeat(2,1fr)}.how-capacity-grid article:last-child{grid-column:auto}.how-ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.how-hero h1{font-size:clamp(2.65rem,7vw,4.5rem);max-width:17ch}}
@media(max-width:640px){.how-hero{padding-top:60px}.how-three,.how-capacity-grid,.how-ladder{grid-template-columns:1fr}.how-definition,.trident-panel,.how-stack li{grid-template-columns:1fr}.trident-symbol{width:92px;height:92px;padding:18px;border-radius:28px}.how-section{padding:68px 0}.how-value-card article{padding:23px}.how-paradigm-diagram{grid-template-columns:1fr}.how-paradigm-shift{transform:rotate(90deg)}.how-loop-line{gap:7px}.how-loop-line span{font-size:.72rem;padding:10px 11px}}

@media(max-width:620px){.how-hero h1{font-size:clamp(2.55rem,10.2vw,3.8rem)}}

.how-paradigm-table-wrap{overflow-x:auto;margin:30px 0 26px;border:1px solid #dce7eb;border-radius:22px;background:#fff;box-shadow:0 16px 48px rgba(27,52,75,.07)}
.how-paradigm-table{width:100%;min-width:720px;border-collapse:collapse}
.how-paradigm-table th{padding:20px 24px;background:#102746;color:#fff;text-align:left;font-size:1rem}
.how-paradigm-table th:last-child{background:#1d5074;color:var(--how-lime)}
.how-paradigm-table td{width:50%;padding:17px 24px;border-top:1px solid #e4edf1;vertical-align:top;line-height:1.52;color:#4f6073}
.how-paradigm-table tr:nth-child(even) td{background:#f8fbfc}
.how-paradigm-diagram{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:center;margin:34px 0}
.how-paradigm-lane{display:grid;justify-items:center;gap:8px;padding:28px;border-radius:24px;border:1px solid #dce7eb;background:#fff;box-shadow:0 16px 44px rgba(27,52,75,.08);text-align:center}
.how-paradigm-lane strong{display:block;width:100%;padding:12px 15px;border-radius:13px;background:#eef5f7;color:#22374f;font-size:.83rem;letter-spacing:.055em}
.how-paradigm-lane i{font-style:normal;color:#6f8497;font-weight:900}
.how-paradigm-lane--new{border-color:#b7d9e6;background:linear-gradient(180deg,#f8fdff,#f4fbf2)}
.how-paradigm-lane--new strong{background:#e4f6fb;color:#163c57}
.how-paradigm-lane--new strong:nth-of-type(4){background:#e8f8c8;color:#284818}
.how-paradigm-label{font-size:.76rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#607589}
.how-paradigm-lane--new .how-paradigm-label{color:#216c87}
.how-paradigm-shift{font-size:2rem;font-weight:900;color:#2e7796}
.how-loop-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:34px 0 20px}
.how-loop-line span{padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;font-weight:900;letter-spacing:.08em;font-size:.82rem}
.how-loop-line b{color:var(--how-lime)}
.how-loop-note{max-width:900px;margin:0 auto;color:#cfe0e8;line-height:1.7;text-align:center}