*{box-sizing:border-box}
:root{
  --gold:#f5bd28;
  --gold2:#fff0a2;
  --bg:#02050b;
  --text:#fff;
  --muted:#d9d9e2;
}
html{scroll-behavior:smooth}
body{margin:0;background:#01040a;color:#fff;font-family:Inter,Arial,sans-serif}
.kx-roadmap{
  position:relative;isolation:isolate;overflow:hidden;min-height:100vh;
  padding:36px 20px 28px;
  background:
    radial-gradient(circle at 50% 50%,rgba(20,43,78,.38),transparent 32%),
    radial-gradient(circle at 90% 20%,rgba(0,102,190,.12),transparent 30%),
    linear-gradient(180deg,#02050b 0%,#010712 52%,#02060d 100%);
}
.kx-container{position:relative;z-index:2;max-width:1450px;margin:auto}
.kx-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.kx-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.glow-one{width:450px;height:450px;left:35%;top:28%;background:rgba(0,111,255,.09)}
.glow-two{width:400px;height:400px;right:-100px;bottom:-80px;background:rgba(255,174,0,.08)}
.kx-gold-curve{position:absolute;width:900px;height:260px;border:2px solid rgba(241,173,24,.32);border-left:0;border-bottom:0;border-radius:0 100% 0 0;transform:rotate(-18deg);filter:drop-shadow(0 0 8px rgba(255,190,40,.25));pointer-events:none}
.curve-left{left:-500px;top:110px}.curve-right{right:-540px;bottom:30px;transform:rotate(162deg)}

.kx-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.kx-brand{display:flex;align-items:center;gap:14px;margin-top:2px}
.brand-mark{width:72px;height:72px;border:2px solid #e8ad20;border-radius:50%;display:grid;place-items:center;font:800 26px Georgia,serif;color:#f7c542;text-shadow:0 0 12px #ffb000;box-shadow:0 0 20px rgba(255,186,25,.25),inset 0 0 15px rgba(255,186,25,.14)}
.brand-mark span{font-size:20px}.brand-name{font:800 31px Georgia,serif;letter-spacing:1px;color:#f0c04a}.brand-tagline{font-size:11px;letter-spacing:1.7px;margin-top:3px;color:#f0f0f4}
.title-wrap{text-align:center;flex:1;margin-top:-8px;margin-right:130px}
.title-wrap h2{margin:0;font:800 clamp(52px,6vw,88px)/1 Georgia,serif;letter-spacing:3px;text-shadow:0 0 18px rgba(255,191,44,.28)}
.title-wrap h2 span{color:#f7bd2e}.title-wrap h2 b{color:#eee;font-weight:800}
.title-wrap p{margin:10px 0 0;color:#f7c72d;letter-spacing:6px;font-size:15px;font-weight:600}

.roadmap-stage{position:relative;height:650px;max-width:1300px;margin:10px auto 0}
.orbit{position:absolute;border:3px solid transparent;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.orbit-a{width:540px;height:540px;background:linear-gradient(#02050b,#02050b) padding-box,linear-gradient(135deg,#f3b51e,#62b9ff,#ff247b,#f3b51e) border-box;opacity:.9}
.orbit-b{width:570px;height:570px;border-width:1px;border-color:rgba(255,255,255,.12);box-shadow:0 0 60px rgba(40,115,255,.08) inset}

.kx-coin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;height:280px;border-radius:50%;padding:13px;background:linear-gradient(145deg,#fff0a4,#d68a05 28%,#ffcf48 52%,#8c5200 78%,#ffd75c);box-shadow:0 0 40px rgba(255,180,25,.34),0 0 100px rgba(255,166,0,.11)}
.coin-inner{height:100%;width:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 30%,#4a3a1e,#17130d 52%,#06080c 80%);border:3px solid #d49413;box-shadow:inset 0 0 30px #000,0 0 10px rgba(255,216,105,.5)}
.coin-symbol{font:800 92px/1 Georgia,serif;color:#f6bd38;text-shadow:2px 4px 0 #6e3c00,0 0 16px rgba(255,191,42,.5);letter-spacing:-10px}
.coin-symbol span{font-size:54px;vertical-align:top;margin-left:2px}
.coin-bars{display:flex;gap:7px;align-items:end;margin-top:7px}.coin-bars i{display:block;width:17px;background:#eab038;box-shadow:0 0 8px rgba(255,191,42,.35)}.coin-bars i:nth-child(1){height:17px}.coin-bars i:nth-child(2){height:28px}.coin-bars i:nth-child(3){height:40px}.coin-bars i:nth-child(4){height:53px}

.road-card{position:absolute;width:410px;min-height:132px;border-radius:20px;padding:21px 55px 18px 62px;border:1px solid var(--accent);background:linear-gradient(135deg,rgba(17,18,23,.97),rgba(7,8,13,.92));box-shadow:0 12px 30px rgba(0,0,0,.38),inset 0 0 24px rgba(255,255,255,.025);transition:transform .35s ease,box-shadow .35s ease}
.road-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 28px color-mix(in srgb,var(--accent) 25%,transparent)}
.card-content h3{margin:0 0 8px;font-size:20px;line-height:1.05;font-weight:800;letter-spacing:.2px}.card-content p{margin:0;color:#f0f0f4;font-size:14px;line-height:1.42}
.step{position:absolute;left:-31px;top:27px;width:62px;height:62px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#777);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);font-size:27px;font-weight:800;color:#fff;text-shadow:0 2px 3px #000;filter:drop-shadow(0 0 8px var(--accent))}
.card-icon{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:34px;color:var(--accent);font-weight:500;opacity:.95}
.card-1{--accent:#eeb313;left:3%;top:72%;border-color:#c98e08;background:linear-gradient(135deg,rgba(50,38,8,.94),rgba(12,12,10,.94))}
.card-2{--accent:#ff1977;left:0;top:45%;border-color:#ff1977;background:linear-gradient(135deg,rgba(67,5,36,.9),rgba(17,8,18,.95))}
.card-3{--accent:#b8b8b8;left:4%;top:19%;border-color:#555;background:linear-gradient(135deg,rgba(42,42,42,.94),rgba(12,12,14,.96))}
.card-4{--accent:#168cf5;width:400px;left:50%;top:0;transform:translateX(-50%);border-color:#168cf5;background:linear-gradient(135deg,rgba(4,42,79,.95),rgba(7,15,27,.96))}
.card-4:hover{transform:translateX(-50%) translateY(-5px) scale(1.015)}
.card-5{--accent:#9d39ff;right:1%;top:18%;border-color:#8f2bd6;background:linear-gradient(135deg,rgba(38,11,72,.92),rgba(14,8,26,.96))}
.card-6{--accent:#1a9dff;right:0;top:45%;border-color:#168de3;background:linear-gradient(135deg,rgba(4,44,78,.92),rgba(7,13,24,.96))}
.card-7{--accent:#ff1b72;right:3%;top:72%;border-color:#ef155e;background:linear-gradient(135deg,rgba(68,5,36,.92),rgba(17,7,18,.96))}

.roadmap-line{position:absolute;height:2px;transform-origin:left center;z-index:1;background:var(--line);box-shadow:0 0 8px var(--line)}
.line-1{--line:#eeb313;width:145px;left:22%;top:76%;transform:rotate(0deg)}
.line-2{--line:#ff1977;width:135px;left:21%;top:49%;transform:rotate(0deg)}
.line-3{--line:#aaa;width:160px;left:24%;top:25%;transform:rotate(0deg)}
.line-4{--line:#168cf5;width:2px;height:65px;left:50%;top:18%;transform:rotate(0deg)}
.line-5{--line:#9d39ff;width:135px;left:58%;top:25%;transform:rotate(0deg)}
.line-6{--line:#1a9dff;width:135px;left:68%;top:49%;transform:rotate(0deg)}
.line-7{--line:#ff1b72;width:145px;left:67%;top:76%;transform:rotate(0deg)}

.kx-features{border-top:1px solid rgba(240,181,36,.65);display:grid;grid-template-columns:repeat(4,1fr);max-width:1160px;margin:0 auto;padding:22px 20px 0}
.feature{display:flex;align-items:center;justify-content:center;gap:15px;min-height:60px;border-right:1px solid rgba(230,181,53,.55)}.feature:last-child{border:0}
.feature-icon{font-size:39px;color:#eeb82c;text-shadow:0 0 10px rgba(255,190,35,.25)}.feature strong{display:block;color:#f4c232;font-size:16px;margin-bottom:5px}.feature small{display:block;color:#f0f0f4;font-size:12px;line-height:1.25}

@media(max-width:1100px){
  .title-wrap{margin-right:0}.roadmap-stage{height:710px}
  .road-card{width:340px}.card-1{left:0}.card-3{left:0}.card-5{right:0}.card-7{right:0}
  .orbit-a{width:500px;height:500px}.orbit-b{width:530px;height:530px}.kx-coin{width:245px;height:245px}
}
@media(max-width:820px){
  .kx-roadmap{padding:25px 14px}
  .kx-heading{display:block}.kx-brand{justify-content:center}.title-wrap{margin-top:22px}.title-wrap h2{font-size:55px}.title-wrap p{font-size:9px;letter-spacing:3px}
  .roadmap-stage{height:auto;margin-top:35px;padding:0 8px}
  .orbit,.roadmap-line,.kx-coin{display:none}
  .road-card,.card-4,.card-4:hover{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;margin:0 0 18px;min-height:118px}
  .road-card:hover{transform:translateY(-3px)}
  .card-content h3{font-size:18px}.card-content p{font-size:13px}
  .kx-features{grid-template-columns:repeat(2,1fr);gap:0;padding:15px 0 0}.feature{padding:14px 8px}.feature:nth-child(2){border-right:0}.feature:nth-child(-n+2){border-bottom:1px solid rgba(230,181,53,.35)}
}
@media(max-width:480px){
  .brand-mark{width:58px;height:58px;font-size:21px}.brand-name{font-size:24px}.brand-tagline{font-size:8px}
  .title-wrap h2{font-size:46px}.title-wrap p{font-size:8px}
  .road-card{padding-left:55px;padding-right:48px}.step{width:54px;height:54px;left:-25px;top:29px;font-size:23px}.card-icon{right:12px;font-size:26px}
  .kx-features{grid-template-columns:1fr}.feature,.feature:nth-child(2){border-right:0;border-bottom:1px solid rgba(230,181,53,.3)!important;justify-content:flex-start;padding-left:28px}
}