:root{
  --bg:#ffffff;
  --paper:#eef3f9;
  --ink:#141414;
  --muted:#5d5d5d;
  --line:#d9e2ee;
  --cobalt:#0b5cad;
  --cobalt-dark:#084480;
  --mint:#97c7bc;
  --ok:#14a86a;
  --danger:#d93a4f;
  --radius:22px;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* NAV */
html{scroll-padding-top:96px}
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 32px;max-width:var(--max);margin:0 auto}
.nav{border-top:4px solid #fff}
.links{display:flex;gap:30px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.links a{padding:8px 0;border-bottom:3px solid transparent}
.links a:hover{color:var(--cobalt);border-bottom-color:var(--cobalt)}
.logo{display:block;line-height:0}
.logo img{height:40px;width:auto;display:block}
.actions{display:flex;gap:12px;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:500;font-size:15px;transition:.2s;white-space:nowrap}
.btn-blue{background:var(--cobalt);color:#fff}
.btn-blue:hover{background:var(--cobalt-dark)}
.btn-black{background:var(--ink);color:#fff}
.btn-black:hover{background:#333}
.btn-outline{border:1.5px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--cobalt)}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:680px}
.hero-l{background:var(--cobalt);color:#fff;padding:56px 32px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
h1{font-weight:300;font-size:clamp(44px,5.6vw,84px);line-height:1.05;letter-spacing:-.03em}
.hero-l .more{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:300}
.hero-l .more:hover{gap:18px}
.hero-r{position:relative;background:#0c0d0f;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:32px}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;animation:drift 14s ease-in-out infinite alternate}
.o1{width:420px;height:420px;background:#8a9099;top:-80px;right:-60px}
.o2{width:340px;height:340px;background:#4a4f56;bottom:-90px;left:-40px;animation-delay:-5s;opacity:.45}
.o3{width:260px;height:260px;background:#6c7178;top:40%;left:30%;animation-delay:-9s;opacity:.35}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.15)}}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%)}
.viz{position:relative;width:100%;max-width:520px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px);border-radius:24px;padding:26px;color:#fff;font-size:13.5px}
.viz-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:12px}
.viz-input{background:rgba(0,0,0,.35);border-radius:12px;padding:14px 16px;min-height:50px;word-break:break-all;font-size:14px}
.caret{display:inline-block;width:8px;height:16px;background:#d5d9de;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.viz-steps{list-style:none;margin:18px 0 6px;display:grid;gap:10px}
.viz-steps li{display:flex;gap:10px;align-items:flex-start;opacity:.18;transform:translateX(-6px);transition:.5s}
.viz-steps li.on{opacity:1;transform:none}
.viz-steps li i{font-style:normal;color:#d5d9de;flex:none}
.viz-steps li small{display:block;opacity:.65;font-size:11.5px}
.viz-result{margin-top:16px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.1);color:#e6e9ed;opacity:0;transition:.5s}
.viz-result.on{opacity:1}

/* GENERIC SECTIONS */
section{padding:128px 0}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt);margin-bottom:22px;display:block;font-weight:700}
h2{font-weight:300;font-size:clamp(38px,5vw,72px);line-height:1.05;letter-spacing:-.03em;margin-bottom:24px}
.sec-head{max-width:880px;margin-bottom:72px}
.sec-head p{font-size:21px;color:var(--muted);font-weight:300;max-width:720px}
h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border-radius:var(--radius);padding:32px}
.card p{color:var(--muted);font-size:16px}
.num{display:block;font-size:13px;color:var(--cobalt);letter-spacing:.14em;margin-bottom:18px}
.tint{background:var(--paper)}
.tint .card{background:var(--bg)}

/* COMPARE */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-bottom:72px}
.compare .card small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.addr{word-break:break-all;color:var(--danger);font-size:15px}
.name{word-break:break-all;color:var(--cobalt);font-size:17px;font-weight:500}
.arrow{font-size:30px;color:var(--muted)}

/* TERMINAL */
.term{background:#0c0f1d;color:#d6dcf0;border-radius:var(--radius);padding:28px;font-size:13.5px;line-height:1.95;overflow-x:auto}
.term .c{color:#6e7aa0}.term .k{color:var(--mint)}.term .e{color:#ff7a8a}.term .o{color:#5fe3a1}

/* CHAIN */
.node{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:18px 22px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-size:15px}
.node .nm{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.node b{color:var(--cobalt);font-weight:600}
.node .t{margin-inline-start:auto;font-size:12px;color:var(--muted);flex:none}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.steps .node{align-content:center;font-size:18px;padding:24px 26px;position:relative}
.steps .node .t{font-size:13px}
.steps .n2{margin-inline-start:28px}.steps .n3{margin-inline-start:56px}
.steps .n2::before,.steps .n3::before{content:"";position:absolute;inset-inline-start:36px;top:-22px;width:2px;height:22px;background:var(--line)}
@media(max-width:1000px){.steps{grid-template-columns:1fr}.steps .node{order:-1}.steps .n2{margin-inline-start:12px}.steps .n3{margin-inline-start:24px}}
.lk{width:2px;height:18px;background:var(--line);margin-left:36px}


/* DOMAINS */
.dom{display:flex;flex-direction:column;gap:12px;transition:.25s;background:var(--paper)}
.dom:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,92,173,.16)}
.dom .n{font-size:18px;font-weight:600}
.dom .n span{color:var(--cobalt)}
.dom .ex{margin-top:auto;padding-top:12px;font-size:12px;color:var(--cobalt);word-break:break-all}
.dom.live{background:var(--cobalt);color:#fff;grid-column:span 1}
.dom.live p{color:rgba(255,255,255,.85)}
.dom.live .n span{color:var(--mint)}
.badge{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--cobalt);padding:4px 12px;border-radius:99px;width:max-content;font-weight:600}
.go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:11px 20px;border-radius:999px;background:#fff;color:var(--cobalt);font-weight:600;font-size:14px;width:max-content}
.go:hover{background:var(--mint)}

ul.clean{list-style:none;display:grid;gap:12px;margin-top:20px}
ul.clean li{padding-inline-start:26px;position:relative;color:var(--muted);font-size:17px}
ul.clean li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:9px;height:9px;border-radius:50%;background:var(--cobalt)}
.notice{border-radius:var(--radius);padding:32px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:16px}
.notice b{color:var(--ink);font-weight:600}

.cta-band{background:var(--cobalt);color:#fff;text-align:center}
.cta-band p{font-size:21px;font-weight:300;opacity:.9;max-width:560px;margin:0 auto 38px}
.cta-band h2{max-width:900px;margin-inline:auto}
.cta-band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--cobalt)}
.btn-white:hover{background:var(--mint)}
footer{background:var(--ink);color:#aaa;padding:36px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(20px);transition:.8s}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-r{min-height:520px}
  .g3{grid-template-columns:repeat(2,1fr)}
  .links{gap:20px}
  .compare{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg);text-align:center}
  .g2.stack{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap{padding:0 20px}.nav .bar{padding:0 20px}
  .g3,.g2{grid-template-columns:1fr}
  section{padding:80px 0}
  .actions .btn-blue{display:none}
  .logo img{height:32px}
  .d2{margin-left:12px}.d3{margin-left:24px}
  .node .t{display:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}
  .orb,.caret{animation:none}
}







/* hero derecho: red blockchain decorativa */
.hero-r .orb,.hero-r .dots{display:none}
#net{position:absolute;inset:0}
.blocks{position:absolute;left:0;right:0;bottom:22px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:30px;padding-right:30px;width:max-content;animation:scrollchain 40s linear infinite}
.blk{position:relative;flex:none;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:8px 14px;background:rgba(255,255,255,.06);color:#e6e9ed;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.blk small{display:block;font-size:9px;letter-spacing:.18em;opacity:.55}
.blk::after{content:"";position:absolute;left:100%;top:50%;width:30px;height:1px;background:rgba(255,255,255,.35)}
@keyframes scrollchain{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.track{animation:none}}






/* selector de idioma */
.navr{display:flex;align-items:center;gap:30px}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--cobalt);border-radius:6px;background:#fff;color:var(--cobalt);font:inherit;font-size:15px;cursor:pointer}
.lang-btn:hover{background:var(--paper)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:300px;max-height:420px;overflow-y:auto;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(8,30,70,.18);padding:6px;z-index:70}
.lang-menu[hidden]{display:none}
.lang-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:start;padding:14px 16px;border:2px solid transparent;border-radius:10px;background:none;font:inherit;cursor:pointer;color:var(--ink)}
.lang-item:hover{background:var(--paper)}
.lang-item.sel{background:var(--paper);border-color:var(--cobalt);color:var(--cobalt)}
.lang-item .n1{display:block;font-size:19px;line-height:1.2}
.lang-item .n2{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted);margin-top:2px}
.lang-item .ck{font-size:20px;color:var(--cobalt)}


/* escrituras no latinas: sin espaciado entre letras (rompería las ligaduras) */
html[lang="ar"] *,html[lang="hi"] *,html[lang="bn"] *{letter-spacing:0!important}
html[lang="zh"] .eyebrow,html[lang="zh"] .links{letter-spacing:.08em}
html[lang="ar"] body{font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif}
html[lang="hi"] body{font-family:"Nirmala UI","Noto Sans Devanagari",system-ui,sans-serif}
html[lang="bn"] body{font-family:"Nirmala UI","Noto Sans Bengali",system-ui,sans-serif}
html[lang="zh"] body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif}
html[lang="ar"] .mono,html[lang="hi"] .mono,html[lang="bn"] .mono,html[lang="zh"] .mono{font-family:"JetBrains Mono",ui-monospace,Consolas,"Segoe UI",monospace}
/* nombres, direcciones y terminales siempre de izquierda a derecha */
.term,.viz,.addr,.name,.ex,.nm,.n.mono{direction:ltr;text-align:left}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
html[dir="rtl"] .chev{display:inline-block;transform:scaleX(-1)}


/* palabras del ejemplo: cada una se aísla para que el orden izquierda-derecha no se invierta en árabe */
.w-inst,.w-co{unicode-bidi:isolate}


/* menú hamburguesa (celular y tablet angosta) */
.burger{display:none}
@media(max-width:860px){
  .nav .bar{height:64px;flex-direction:row;align-items:center;padding:0 20px;position:relative}
  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;flex:none}
  .burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .navr{display:none;position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(8,30,70,.14);flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 20px;width:auto;z-index:60}
  .nav.open .navr{display:flex}
  .links{flex-direction:column;gap:0;font-size:13px;letter-spacing:.16em}
  .links a{padding:17px 0;border-bottom:1px solid var(--line)}
  .lang{margin-top:18px}
  .lang-btn{width:100%;justify-content:center}
  .lang-menu{position:static;width:100%;max-height:260px;margin-top:8px;box-shadow:none}
  .logo img{height:34px}
}