/* Echo: a signal becomes a network. */
:root{--bg:#f3f7fc;--bg2:#e8effa;--card:#fff;--ink:#101e35;--ink2:#40516d;--mute:#63748f;--line:#ced9e9;--line2:#e2eaf5;--inv:#f3f7fc;--accent:#245df5;--aqua:#55ccdf;--display:'Manrope',sans-serif;--sans:'DM Sans',sans-serif}
:root[data-theme=dark]{--bg:#09111f;--bg2:#101e32;--card:#0e192a;--ink:#eff5ff;--ink2:#c3d1e9;--mute:#91a4c2;--line:#253851;--line2:#192b43;--inv:#09111f;--accent:#8aabff;--aqua:#67ddeb}
body::before{display:none}body{background:radial-gradient(ellipse at 75% 18%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 38%),var(--bg)}
.top{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);border-color:var(--line2)}
.brand{font-family:var(--display);font-size:26px!important;letter-spacing:.16em;font-weight:800;gap:12px}.brand-mark{color:var(--accent);width:39px;height:39px}.brand span{font-style:normal}
.nav a{letter-spacing:0;text-transform:none;font-size:13px;font-weight:500}.nav a.on{color:var(--accent)}.chain-notice{font-size:10px;letter-spacing:.16em;color:var(--mute);background:var(--bg2);padding:9px var(--gut)}
.btn{border-radius:10px;letter-spacing:.015em;text-transform:none;font-weight:600;border-width:1px;font-size:14px}.btn-ink{background:var(--accent);border-color:var(--accent);color:var(--bg)}:root:not([data-theme=dark]) .btn-ink{color:#fff}.btn-ink:hover{background:var(--ink);border-color:var(--ink);color:var(--inv)}.btn-line{border-color:var(--line);background:color-mix(in srgb,var(--card) 45%,transparent)}.top .btn-sm{font-size:12px;padding:10px 18px}.btn-lg{height:54px;padding:0 26px}.btn-paper{background:#fff;color:#153163;border-color:#fff}
.hero{min-height:650px;padding-top:72px;padding-bottom:66px;gap:10px}.hero-copy{z-index:2}.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--accent);display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}
.hero h1{font-family:var(--display);font-size:clamp(90px,11vw,164px);font-weight:800;letter-spacing:-.075em;line-height:1;margin:22px 0 16px;font-stretch:normal}.tagline{font-family:var(--display);font-size:clamp(22px,2.5vw,34px);font-weight:500;letter-spacing:-.045em;margin-bottom:20px}.lead{font-size:16px;line-height:1.85;max-width:370px;color:var(--mute)}.hero-btns{gap:12px;margin-top:30px}.mini-lab{font-size:9px;letter-spacing:.12em}.ca-line{font-size:10px;max-width:400px}.ca-line .lab{color:var(--accent)}
.hero-viz{position:relative;overflow:visible}.hero-viz .viz{min-height:450px}.viz-cap{font-family:var(--display);text-transform:none;letter-spacing:-.02em;font-size:16px;line-height:1.3;color:var(--mute);font-weight:500;right:2%;bottom:0}.viz svg{width:100%;height:100%;overflow:visible}

.section{padding-top:60px;padding-bottom:60px}.step{padding-right:22px}.step h3{font-family:var(--display);font-size:17px;letter-spacing:-.03em}.step p{font-size:13px;color:var(--mute);max-width:240px}.step-top em{color:var(--accent);font-size:11px}.step-ico{color:var(--accent);width:50px;height:50px}.step-line{border-color:var(--line)}.seq-num{font-size:14px!important;letter-spacing:0!important}.how-viz{margin-top:68px;border-radius:20px;background:var(--card);border:1px solid var(--line2);padding:44px;overflow:hidden}.how-side h2{font-size:clamp(27px,3.3vw,48px);letter-spacing:-.055em;line-height:1.14}.kicker{font-size:10px;letter-spacing:.2em;color:var(--accent)}.how-net .viz{height:380px}.how-cap{font-size:10px;letter-spacing:.03em}.how-cap .dot{background:var(--accent)}.seq-orig,.seq-item{font-size:11px;letter-spacing:.05em}.seq-item i{color:var(--accent)}.facts p{font-size:13px;line-height:1.8}.sec-head h2{font-size:36px;letter-spacing:-.05em}.stat b{font-weight:500;letter-spacing:-.05em;font-size:40px;color:var(--accent)}.stat span{font-size:10px;letter-spacing:.08em}
.ncard,.panel{border-radius:16px;background:var(--card);border-color:var(--line2);box-shadow:0 5px 22px #0b274503}.ncard:hover{border-color:var(--accent);transform:translateY(-3px)}.ncard h3,.nd-head h1{letter-spacing:-.04em}.ncard img,.nd-head>img{border-radius:50%;border:1px solid var(--line)}.dots i{background:transparent;border:1px solid var(--accent);border-radius:50%}.dots i.root{background:var(--accent)}.bar{background:var(--bg2)}.bar b{background:var(--accent)}.tabs{border-color:var(--line);border-radius:10px}.tabs button{letter-spacing:0;font-size:12px;text-transform:none}.tabs button.on{background:var(--ink);color:var(--inv)}.chip{border-radius:8px;letter-spacing:0;font-size:11px}.badge{background:var(--bg2);color:var(--accent)}.trade-form{border-color:var(--line2);background:var(--bg);border-radius:12px}.trade-form h3{font-size:23px;letter-spacing:-.04em;margin-top:10px}.trade-form p{font-size:14px;line-height:1.8}.trade-form small{display:block;margin-top:12px;font-size:11px;color:var(--mute)}.next-box .btn{margin-right:8px;margin-bottom:8px}.nd-stats span{font-size:11px}
.cta{background:#163769;color:#fff;border-radius:24px;margin:30px var(--gut);overflow:hidden}.cta h2{font-size:clamp(34px,5vw,65px);letter-spacing:-.065em}.cta .kicker{color:#a4c6ff}.cta-bg{color:#94beff;opacity:.22;width:640px;height:640px;right:-100px;top:-200px}.foot{border-color:var(--line2);font-size:10px}.foot-l>span:first-child{font-family:var(--display);letter-spacing:.2em;font-weight:800}.foot p{color:var(--mute)}.empty svg{color:var(--accent)}
.modal{backdrop-filter:blur(7px);background:#07183285}.modal-card{border-radius:22px;background:var(--card);border:1px solid var(--line2);box-shadow:0 35px 100px #00133335}.modal-card h2{letter-spacing:-.05em}.modal-card .kicker{color:var(--accent)}.img-drop{border-radius:14px;border-color:var(--line);background:var(--bg)}.img-drop svg{color:var(--accent)}input,textarea{border-radius:9px!important;background:var(--bg)!important;border-color:var(--line)!important}.cost{background:var(--bg);border-color:var(--line2);border-radius:12px}.cost p{font-size:11px;color:var(--mute)}.cost .total b{color:var(--accent)}.notice{font-size:12px;line-height:1.7}.toast{background:var(--ink);color:var(--inv);border-radius:10px}.status-error{color:#b52b40}
@media(max-width:1000px){.hero{min-height:590px}.hero-viz .viz{min-height:360px}.hero h1{font-size:100px}.hero-btns{flex-wrap:wrap}.top .nav{gap:10px}.nav a{font-size:11px}.how-viz{padding:28px}.how-net .viz{height:320px}}
@media(max-width:800px){.hero{padding-top:40px;gap:5px;display:flex;flex-direction:column;align-items:stretch}.hero-copy{width:100%;text-align:left}.hero h1{font-size:110px}.hero-viz{width:100%;max-width:520px;align-self:center;margin-top:8px}.hero-viz .viz{height:370px;min-height:0}.viz-cap{bottom:14px;font-size:13px}.lead{max-width:430px}.hero-btns{justify-content:flex-start}.hero .mini-lab{margin-bottom:0}.steps{gap:30px}.step{padding:0}.step p{max-width:none}.how-viz{display:flex;flex-direction:column;gap:0;padding:26px}.how-side,.how-net{width:100%}.how-side h2{font-size:36px}.how-net .viz{height:340px}.how-cap{font-size:9px}.cta{margin:20px 16px;border-radius:16px}.cta-bg{width:500px;height:500px}.top .nav{background:var(--card)}.top .nav a{font-size:16px}.chain-notice{font-size:8px;letter-spacing:.07em}.foot{gap:20px}.stat b{font-size:32px}}
@media(max-width:440px){.hero h1{font-size:96px}.hero-viz .viz{height:320px}.hero-btns .btn{padding:0 17px;font-size:12px}.tagline{font-size:24px}.section{padding-top:38px;padding-bottom:38px}.how-net .viz{height:290px}.steps{grid-template-columns:1fr 1fr}.step h3{font-size:15px}.step p{font-size:12px}.facts{gap:24px}.stats{gap:28px 10px}.sec-head h2{font-size:30px}.modal-card{padding:24px 18px}.ca-line{font-size:9px}.top .brand{font-size:23px!important}.brand-mark{width:30px;height:30px}.top .btn-sm{padding:8px 10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.btn,.ncard{transition:none}}

.tagline,.step h3,.sec-head h2,.how-side h2,.cta h2,.nd-head h1{text-transform:none}.tagline{letter-spacing:-.04em}.nd-main .panel>.viz{height:380px}

.modal-card h2,.trade-form h3,.panel h3,.ncard h3{text-transform:none}.hero-viz{margin-right:0}.empty strong,.empty p{text-transform:none;letter-spacing:0}

/* Soft rings fade outward and repeat at progressively smaller sizes. */
.viz .echo-ripple-scene{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.hero-viz .viz{display:flex;align-items:center;min-height:430px}
.echo-connection{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:.5 7;stroke-linecap:round;opacity:.22}
.echo-copy{color:var(--ink)}
.echo-art-label,.echo-art-note{font-family:var(--sans);font-size:10px;letter-spacing:2px;fill:var(--mute)}
.echo-art-caption{font-family:var(--display);font-size:16px;letter-spacing:-.3px;fill:var(--ink2)}
.echo-index{font-family:var(--sans);font-size:10px;letter-spacing:1px;fill:var(--mute)}
.echo-hero-scene .echo-copy{animation:echo-ink 6.5s ease-in-out var(--echo-delay) infinite}
.echo-new{animation:echo-appear .65s ease-out both}
.echo-offscreen *{animation-play-state:paused!important}
.how-net .viz,.nd-main .panel>.viz{display:flex;align-items:center}
@keyframes echo-ink{0%,48%,100%{color:var(--ink);opacity:.78}20%{color:var(--accent);opacity:1}}
@keyframes echo-appear{from{opacity:0}to{opacity:1}}
@media(max-width:800px){.hero-viz{max-width:650px;margin-top:32px}.hero-viz .viz{height:auto;min-height:0;aspect-ratio:760/500}.how-net .viz{height:auto;min-height:250px}.echo-art-caption{font-size:19px}.echo-art-label,.echo-art-note{font-size:12px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.echo-hero-scene .echo-copy,.echo-new{animation:none}}


/* Pointer, touch and keyboard interaction stays within the illustration. */
.echo-ripple-scene{cursor:crosshair;touch-action:pan-y}
.echo-interactive{cursor:pointer;outline:none}
.echo-ripple{transition:color .2s ease,filter .2s ease}
.echo-interactive.is-hovered,.echo-interactive:focus-visible,.echo-interactive.is-selected{color:var(--accent)!important;animation:none!important;opacity:1!important}
.echo-interactive.is-hovered .echo-ripple,.echo-interactive:focus-visible .echo-ripple,.echo-interactive.is-selected .echo-ripple{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 35%,transparent))}
.echo-interactive:is(.is-hovered,.is-selected,:focus-visible) .echo-ripple circle[stroke-opacity]{stroke-opacity:.65}
.echo-interactive:focus-visible .echo-ripple>circle:first-child{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 5}
.echo-interactive.is-connected{color:var(--accent);animation:none;opacity:1}
.echo-connection{transition:stroke .2s ease,opacity .2s ease}
.echo-connection.is-connected{stroke:var(--accent);opacity:.6}
.echo-effects{pointer-events:none}
.echo-signal{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.echo-interaction-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.echo-ripple,.echo-connection{transition:none}}

/* Launch form: shared baselines, field sizes and a padded cost summary. */
#launchModal .modal-card{width:min(640px,100%);padding:32px;scrollbar-gutter:stable}
#launchModal .notice{margin:12px 0;line-height:1.6}
#launchModal .modal-card>.muted{line-height:1.65;margin:0 0 24px}
#launchForm{display:grid;gap:20px}
#launchForm label{min-width:0;margin:0;gap:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;line-height:20px}
#launchForm .field-heading{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:20px}
#launchForm .field-heading small{font-size:11px;font-weight:400;letter-spacing:0;line-height:20px;color:var(--mute)}
#launchForm .field-help{font-size:12px;font-weight:400;letter-spacing:0;line-height:18px;color:var(--mute)}
#launchForm input:not([type=file]),#launchForm textarea{min-width:0;padding:12px 14px;font-family:var(--sans);font-size:14px;font-weight:400;line-height:22px;border-width:1px}
#launchForm input:not([type=file]){height:48px}
#launchForm textarea{min-height:98px}
#launchForm input:focus-visible,#launchForm textarea:focus-visible{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);outline:none}
#launchForm .form-grid{grid-template-columns:146px minmax(0,1fr);gap:20px;align-items:stretch}
#launchForm .fields{display:grid;gap:16px;min-width:0}
#launchForm .img-drop{height:100%;min-height:0;padding:16px 10px;border-width:1px;align-self:stretch;justify-content:center}
#launchForm .img-drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
#imgHint{gap:12px;font-size:13px;font-weight:600;letter-spacing:0;line-height:20px}
#imgHint svg{width:40px;height:40px;flex-shrink:0}
#imgHint .upload-copy{display:flex;flex-direction:column;gap:5px}
#imgHint small{font-size:10px;font-weight:400;letter-spacing:0;line-height:16px}
#launchForm .two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#launchForm .cost{margin:0;padding:18px 20px;border:1px solid var(--line2);border-radius:12px}
#launchForm .cost>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:16px;align-items:baseline;padding:5px 0;font-size:13px;line-height:20px}
#launchForm .cost>div b{text-align:right;font-size:inherit;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#launchForm .cost .total{padding-top:14px;margin-top:10px;font-size:15px;border-top:1px solid var(--line)}
#launchForm .cost p{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:12px;line-height:1.65}
#launchForm .modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#launchForm .modal-actions .btn{height:46px;margin:0;justify-content:center}
#launchForm .progress-steps{margin-top:0}
@media(max-width:520px){
  #launchModal{padding:12px}
  #launchModal .modal-card{padding:24px 20px;max-height:calc(100dvh - 24px);border-radius:18px}
  #launchForm{gap:18px}
  #launchForm .form-grid{grid-template-columns:1fr;gap:18px}
  #launchForm .img-drop{height:96px;padding:16px}
  #imgHint{flex-direction:row;gap:16px;text-align:left}
  #launchForm .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #launchForm .two{grid-template-columns:1fr;gap:18px}
  #launchForm .cost{padding:14px}
  #launchForm .cost>div{column-gap:12px;font-size:12px}
  #launchForm .cost .total{font-size:14px}
  #launchForm .modal-actions .btn{font-size:12px;padding:0 12px}
}
#launchModal .modal-card{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#launchModal .modal-card::-webkit-scrollbar{width:6px}
#launchModal .modal-card::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
#launchModal .modal-card::-webkit-scrollbar-track{background:transparent}

/* Echo's symbol and name share one aligned header link. */
.top .brand{gap:10px;min-width:48px;min-height:48px;justify-content:center}
.top .brand-mark{width:48px;height:48px;margin:0}
@media(max-width:440px){.top .brand{min-width:40px;min-height:40px}.top .brand-mark{width:40px;height:40px}}
