*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:#f5f8fa;color:#102a43;line-height:1.6}
header{background:#071c2c;padding:20px 7%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.logo{color:#fff;font-size:25px;font-weight:700;letter-spacing:1px}.logo span{color:#40c4d9}
nav{display:flex;gap:26px;align-items:center}
nav a{color:#c7dbe4;text-decoration:none;font-size:14px}
nav a:hover{color:#fff}
.verify-nav{border:1px solid #40c4d9;border-radius:8px;padding:9px 15px;color:#fff!important}
main{width:100%;overflow:hidden}
.hero{background:linear-gradient(135deg,#071c2c,#0b3d52);color:#fff;text-align:center;padding:clamp(75px,10vw,125px) 20px 95px}
.eyebrow{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:#61d1e0;font-weight:700;margin-bottom:18px}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.08;margin-bottom:20px}
.hero p{max-width:760px;margin:auto;color:#c7dbe4;font-size:clamp(17px,2.4vw,20px)}
.section{max-width:1100px;margin:auto;padding:80px 20px}
.section-head{text-align:center;max-width:760px;margin:0 auto 50px}
.section-head h2{font-size:clamp(30px,4vw,42px);color:#082337;margin-bottom:13px}
.section-head p{color:#687f8b;font-size:17px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}
.node{background:#fff;border:1px solid #dfebef;border-radius:15px;padding:25px 16px;text-align:center;box-shadow:0 10px 30px rgba(7,28,44,.06);position:relative}
.node:not(:last-child):after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font-size:22px;color:#7fa5b2;z-index:2}
.node-num{font-size:11px;letter-spacing:1.5px;color:#7a929d;margin-bottom:9px}
.node h3{font-size:20px;color:#0b6e8e;margin-bottom:6px}.node p{font-size:13px;color:#718692}
.architecture{background:#fff}
.diagram{background:#f8fbfc;border:1px solid #dcebef;border-radius:20px;padding:clamp(22px,5vw,45px);max-width:950px;margin:auto}
.layer{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:15px;align-items:center;margin:14px 0}
.box{background:#fff;border:1px solid #cfe1e7;border-radius:12px;padding:20px;text-align:center;box-shadow:0 7px 20px rgba(7,28,44,.04)}
.box strong{display:block;color:#0b6e8e;font-size:17px}.box small{display:block;color:#728893;margin-top:5px}
.core{background:#082337;color:#fff;border-color:#082337}.core strong{color:#61d1e0}.core small{color:#bfd4dc}
.arrow{text-align:center;color:#7395a1;font-size:22px;margin:3px 0}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}
.panel{background:#fff;border:1px solid #dfebef;border-radius:16px;padding:28px}
.panel h3{font-size:21px;margin-bottom:18px;color:#082337}
.panel ul{list-style:none}.panel li{padding:9px 0;border-bottom:1px solid #edf2f4;font-size:14px;color:#506a77}
.panel li:last-child{border-bottom:0}.panel li:before{content:"✓";color:#0b8a68;font-weight:bold;margin-right:9px}
.how{background:#eef6f8}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.step{background:#fff;border-radius:15px;padding:25px;border:1px solid #dcebef}
.step span{font-size:12px;color:#0b6e8e;font-weight:700;letter-spacing:1px}
.step h3{margin:9px 0;color:#082337;font-size:18px}.step p{font-size:14px;color:#657d88}
.avalanche{background:#071c2c;color:#fff;text-align:center}
.avalanche h2{font-size:clamp(30px,4vw,42px);margin-bottom:15px}
.avalanche p{max-width:720px;margin:0 auto 28px;color:#bfd4dc;font-size:17px}
.badge{display:inline-block;border:1px solid #4aaec0;border-radius:30px;padding:12px 22px;color:#fff;font-weight:700}
.cta{text-align:center;padding:80px 20px}.cta h2{font-size:clamp(28px,4vw,40px);color:#082337;margin-bottom:12px}
.cta p{color:#6a818c;margin-bottom:25px}.cta a{display:inline-block;background:#0b6e8e;color:#fff;text-decoration:none;border-radius:9px;padding:14px 24px;font-weight:700}
footer{text-align:center;background:#061722;color:#8da6b1;padding:28px 20px;font-size:13px}

@media(max-width:850px){
 nav{gap:12px}nav a:not(.verify-nav){display:none}
 .flow{grid-template-columns:1fr;gap:14px}
 .node:not(:last-child):after{content:"↓";right:auto;top:auto;bottom:-20px;left:50%;transform:translateX(-50%)}
 .steps{grid-template-columns:1fr 1fr}
 .trust{grid-template-columns:1fr}
 .layer{grid-template-columns:1fr}
 .layer>div:empty{display:none}
}
@media(max-width:520px){
 header{padding:17px 20px}.logo{font-size:22px}
 .section{padding:60px 15px}.steps{grid-template-columns:1fr}
 .diagram{padding:18px}.hero{padding-top:65px}
}