:root{
  --dark:#07111f;
  --blue:#135dcd;
  --blue2:#1d81d3;
  --text:#e7f0ff;
  --muted:rgba(231,240,255,0.75);
  --lightText:#021c31;
  --lightMuted:#4a5b73;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,Helvetica,sans-serif;background:var(--dark);color:var(--text)}
img{max-width:100%;display:block}

.header{position:fixed;top:0;left:0;right:0;z-index:1000}
.header-tip{background:#021c31;color:rgba(255,255,255,.7);text-align:center;font-size:12px;padding:6px 12px}
.header-tip .url{color:#fff;font-weight:600;margin-left:6px}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(7,17,31,0.55);backdrop-filter:blur(14px);transition:.3s}
.header.scrolled .header-bar{background:rgba(7,17,31,0.9);box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.header.white .header-bar{background:#fff;color:#021c31;box-shadow:0 6px 20px rgba(0,70,179,.12)}
.brand img{height:34px}
.nav{display:flex;gap:28px;font-size:14px}
.nav a{color:rgba(255,255,255,.7);text-decoration:none;position:relative}
.header.white .nav a{color:#021c31}
.nav a:hover{color:#fff}
.header.white .nav a:hover{color:var(--blue)}
.nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,#3c7cf3,#135dcd);transition:.3s}
.nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:16px}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#cfe3ff;padding:8px 12px;border-radius:6px}
.header.white .ghost{border-color:#cfd3d6;color:#021c31}
.socials{display:flex;align-items:center;gap:12px}
.socials .icon{width:18px;height:18px;display:inline-block;background-size:100% 100%;opacity:.8}
.socials .twitter{background-image:url(../img/tronlink/Twitter.svg)}
.socials .telegram{background-image:url(../img/tronlink/telegram.svg)}
.header.white .socials .twitter{background-image:url(../img/tronlink/black-Twitter.svg)}
.header.white .socials .telegram{background-image:url(../img/tronlink/black-telegram.svg)}
.socials .icon:hover{opacity:1}
.lang{border:1px solid rgba(255,255,255,.6);border-radius:4px;min-width:90px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);gap:6px;font-size:12px}
.lang .arrow{width:8px;height:6px;background:url(../img/tronlink/arrow-bottom.png) no-repeat;background-size:cover;display:inline-block}
.header.white .lang{border-color:#cfd3d6;color:#021c31}
.header.white .lang .arrow{background-image:url(../img/tronlink/arrow-bottom-black.png)}

.btn{background:linear-gradient(90deg,#3b8dff 0%,#6c63ff 60%,#7dd3fc 100%);color:#fff;border:none;padding:12px 24px;border-radius:10px;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 12px 26px rgba(78,161,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);transition:.25s;letter-spacing:.5px;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-120%);transition:.6s}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 36px rgba(78,161,255,0.45)}
.btn-light{background:#fff;color:#021c31;box-shadow:0 10px 24px rgba(0,70,179,0.15)}
.btn-light img{filter:invert(20%)}
.btn-light:hover{background:#f1f5ff}

.burger{display:none;flex-direction:column;gap:4px;background:transparent;border:none}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px}
.drawer{display:none;flex-direction:column;gap:12px;padding:16px 24px;background:rgba(7,17,31,0.95)}
.drawer a{color:#cfe3ff;text-decoration:none}

.fp-nav{position:fixed;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:900}
.fp-nav .dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.2;position:relative}
.fp-nav .dot.active{opacity:1}
.fp-nav .dot::after{content:'';position:absolute;width:4px;height:4px;background:#fff;left:3px;bottom:-10px;border-radius:50%}
.fp-nav .dot::before{content:'';position:absolute;width:4px;height:4px;background:#fff;left:3px;bottom:-20px;border-radius:50%}
.fp-nav .dot:last-child::after,.fp-nav .dot:last-child::before{display:none}
.fp-nav.light .dot,.fp-nav.light .dot::after,.fp-nav.light .dot::before{background:#135dcd}

.fullpage{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory}
.screen{height:100vh;scroll-snap-align:start;position:relative;display:flex;align-items:center}
.container{width:min(1200px,90%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px}
.split{gap:70px}
.section-dots{position:absolute;left:120px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.section-dots span{width:8px;height:8px;border-radius:50%;background:#d9e3f2;opacity:.6}
.section-dots span.active{background:#135dcd;opacity:1;box-shadow:0 0 0 6px rgba(19,93,205,.1)}

/* SCREEN 1 */
.s1{background:linear-gradient(-159deg,#1d81d3,#0838c7)}
.s1-bg{position:absolute;inset:0;overflow:hidden;opacity:.35}
.s1-bg img{width:100%;height:100%;object-fit:cover}
.s1::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:radial-gradient(circle at 70% 35%, rgba(255,255,255,.25), transparent 45%),radial-gradient(circle at 20% 70%, rgba(255,255,255,.15), transparent 45%);pointer-events:none}
.s1::after{content:'';position:absolute;left:0;right:0;bottom:0;height:180px;background:url(../img/tronlink/page0-line.png) no-repeat;background-size:100% 100%}
.s1-decor span{position:absolute;display:block;background-size:100% 100%;background-repeat:no-repeat}
.s1-decor .b1{width:120px;height:160px;background-image:url(../img/tronlink/page0-ball1.svg);top:110px;left:90px;opacity:.9}
.s1-decor .b2{width:140px;height:140px;background-image:url(../img/tronlink/page0-ball2.png);top:210px;right:40px}
.s1-decor .b3{width:70px;height:70px;background-image:url(../img/tronlink/page0-ball3.svg);bottom:120px;right:220px}
.s1-decor .b4{width:260px;height:260px;background-image:url(../img/tronlink/page0-ball4.png);left:-50px;bottom:-40px;opacity:.9}
.s1-decor .b5{width:220px;height:220px;background-image:url(../img/tronlink/page0-ball5.svg);right:-60px;bottom:-40px;opacity:.8}

.s1-left{max-width:540px;position:relative;z-index:2}
.s1-title{font-size:58px;font-weight:900;margin-bottom:8px}
.s1-sub{font-size:20px;color:#eaf3ff;margin-bottom:18px}
.s1-features{list-style:none;display:grid;gap:12px;margin-bottom:22px;color:#fff;font-size:15px}
.s1-features li{display:flex;align-items:flex-start;gap:10px}
.s1-features li::before{content:'';width:18px;height:18px;background:url(../img/tronlink/right.png) no-repeat;background-size:cover;margin-top:2px}
.s1-download{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.s1-download .btn img{width:18px;height:18px}
.qr{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.8)}
.qr img{width:80px;height:80px;border-radius:8px;object-fit:cover}
.s1-platform{display:flex;flex-direction:row;gap:14px;align-items:center;margin-top:14px}
.s1-platform img{width:30px;height:30px}

.s1-right{position:relative;width:600px;height:470px;z-index:2;margin-bottom:40px}
.s1-right::before{content:"";position:absolute;right:30px;top:40px;width:180px;height:180px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.s1-right::after{content:"";position:absolute;right:90px;top:120px;width:160px;height:160px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.phone{position:absolute;width:230px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5));animation:float 7s ease-in-out infinite}
.phone.right{width:320px;top:10px;right:-10px}
.phone.left{width:220px;top:120px;left:10px;animation-delay:0.6s}
.phone.center{width:230px;top:170px;left:45%;transform:translateX(-50%)}
.ball{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(78,161,255,0.4),transparent 70%);filter:blur(4px);animation:float 10s ease-in-out infinite}
.ball.min{width:120px;height:120px;right:90px;bottom:20px}
.ball.max{width:200px;height:200px;left:0;bottom:0;opacity:0.4}

.s1-data{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:80px;font-size:14px;color:rgba(255,255,255,.9);height:120px;align-items:center;background:rgba(2,28,49,.55);backdrop-filter:blur(20px);z-index:5}
.s1-data span{display:block;font-size:28px;color:#fff;font-weight:800}

/* LIGHT SCREENS */
.light{background:#fff url(../img/tronlink/page-bg.png) no-repeat;background-size:120% auto;background-position:right center;color:#021c31}
.s2.light{background-position:85% 50%}
.s3.light{background-position:72% 52%}
.s4.light{background-position:82% 55%}
.light .headline{color:#021c31}
.light .headline + .headline{color:#135dcd}
.light .text ul{color:#4a5b73}

.text .headline{font-size:40px;font-weight:700;letter-spacing:1px}
.text .headline + .headline{font-size:44px}
.text ul{list-style:none;margin-top:24px;display:grid;gap:18px;color:#4a5b73}
.text ul img{width:28px;height:28px;margin-right:10px}
.text ul li{display:flex;align-items:flex-start;gap:12px}
.text{max-width:520px}

/* Shield */
.shield-wrap{position:relative;width:420px;height:420px;display:grid;place-items:center}
.shield-main{width:280px;height:auto;filter:drop-shadow(0 20px 40px rgba(0,70,179,0.2))}
.shield-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(19,93,205,0.25);animation:spin 12s linear infinite}
.shield-ring.inner{inset:32px;border:2px dashed rgba(19,93,205,0.25);animation:spin 8s linear infinite reverse}
.shield-scan{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg, rgba(19,93,205,0.35), rgba(255,255,255,0));mask:radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 65%);animation:spin 5s linear infinite}
.shield-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,#ffb347,#ff6a00);left:10%;bottom:18%;box-shadow:0 0 20px rgba(255,150,80,0.8)}
.s2::before{content:'';position:absolute;left:-60px;top:38%;width:160px;height:160px;background:url(../img/tronlink/page1-ball1.png) no-repeat;background-size:contain;opacity:.95}
.s2::after{content:'';position:absolute;right:60px;bottom:80px;width:110px;height:110px;background:url(../img/tronlink/page1-ball2.svg) no-repeat;background-size:contain;opacity:.75}

/* Planet */
.network-wrap{position:relative;width:520px;height:420px}
.planet-wrap{position:absolute;right:40px;top:10px;width:360px;height:360px;display:grid;place-items:center}
.planet-wrap::before{content:"";position:absolute;inset:0;background:url(../img/tronlink/orbital.png) no-repeat;background-size:contain;opacity:.35}
.planet{width:170px;height:170px;border-radius:50%;background:url(../img/tronlink/ball.png) no-repeat center/cover;box-shadow:0 24px 46px rgba(14,89,200,0.35);animation:spinSlow 22s linear infinite}
.planet-ring{position:absolute;width:300px;height:300px;border-radius:50%;border:3px solid rgba(14,120,220,0.25);transform:rotate(-20deg);animation:spin 16s linear infinite}
.planet-ring.thin{width:340px;height:340px;border:2px solid rgba(14,120,220,0.18);animation:spin 22s linear infinite reverse}
.planet-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;top:40px;right:150px;box-shadow:0 0 12px rgba(14,120,220,0.5)}
.s3::before{content:'';position:absolute;left:-40px;top:42%;width:130px;height:130px;background:url(../img/tronlink/page2-ball1.png) no-repeat;background-size:contain;opacity:.95}
.s3::after{content:'';position:absolute;right:80px;bottom:70px;width:110px;height:110px;background:url(../img/tronlink/page2-ball2.svg) no-repeat;background-size:contain;opacity:.7}

/* Experience */
.experience-wrap{position:relative;width:560px;height:380px}
.experience-wrap::before{content:"";position:absolute;left:20px;top:10px;width:180px;height:180px;background:url(../img/tronlink/line-1.png) no-repeat;background-size:contain;opacity:.6}
.experience-wrap::after{content:"";position:absolute;right:10px;bottom:0;width:180px;height:180px;background:url(../img/tronlink/line-2.png) no-repeat;background-size:contain;opacity:.6}
.experience-wrap .beam{position:absolute;width:280px;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(255,196,124,0),rgba(255,196,124,.9),rgba(255,196,124,0));transform:rotate(-25deg);animation:beamMove 8s linear infinite;opacity:.9}
.experience-wrap .beam.b1{right:40px;top:40px;animation-delay:0s}
.experience-wrap .beam.b2{right:10px;top:140px;transform:rotate(-35deg);animation-delay:2s}
.experience-wrap .beam.b3{right:120px;top:220px;transform:rotate(-20deg);animation-delay:4s}
.bolt{position:absolute;width:150px;right:60px;top:20px;opacity:.85}
.shooting{position:absolute;width:160px;opacity:.8}
.shooting.st1{left:40px;bottom:40px}
.shooting.st2{right:10px;top:10px}
.ui-deck{position:absolute;right:-10px;top:10px;width:420px;height:320px}
.ui-float{position:absolute;width:190px;border-radius:22px;box-shadow:0 18px 46px rgba(0,0,0,0.45);object-fit:cover;animation:float 7s ease-in-out infinite}
.ui-float.u1{right:0;top:0}
.ui-float.u2{right:120px;top:50px;animation-delay:1s;opacity:.95}
.ui-float.u3{right:50px;top:120px;animation-delay:1.6s;opacity:.9}
.s4::before{content:'';position:absolute;left:-30px;top:46%;width:130px;height:130px;background:url(../img/tronlink/page3-ball1.png) no-repeat;background-size:contain;opacity:.9}
.s4::after{content:'';position:absolute;right:90px;bottom:90px;width:100px;height:100px;background:url(../img/tronlink/page3-ball2.svg) no-repeat;background-size:contain;opacity:.7}

.s5{background:#0f4fbf url(../img/tronlink/page5-bg.png) no-repeat center/cover}
.s5::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.08), transparent 45%),radial-gradient(circle at 70% 60%, rgba(255,255,255,.06), transparent 50%),radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px);background-size:auto,auto,64px 64px;opacity:.7;pointer-events:none}
.s5::after{content:"";position:absolute;left:0;right:0;bottom:0;height:92px;background:linear-gradient(90deg,#0c2f86,#0a2673);opacity:.98}
.s5 .center{width:100%;text-align:center;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-bottom:140px}
.s5 h2{font-size:32px;margin-bottom:10px}
.s5 p{color:var(--muted);margin-bottom:18px}
.platforms{display:flex;justify-content:center;gap:18px;margin-top:12px;color:var(--muted)}
.footer-bar{position:absolute;left:0;right:0;bottom:16px;z-index:6}
.footer{font-size:12px;color:#ffffff;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1200px,90%);margin:0 auto;border-top:1px solid rgba(255,255,255,.35);padding-top:16px}
.footer-right,.footer-links,.footer-icons{color:#ffffff}
.footer-left{display:flex;align-items:center;gap:18px}
.footer-icons{display:flex;gap:14px}
.footer-links{display:flex;gap:16px}
.footer-right{color:var(--muted)}
.ficon{width:20px;height:20px;display:inline-block;background-size:100% 100%;opacity:.85}
.ficon.twitter{background-image:url(../img/tronlink/page5-twitter.png)}
.ficon.telegram{background-image:url(../img/tronlink/page5-telegram.png)}
.ficon.email{background-image:url(../img/tronlink/page5-email.png)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes beamMove{0%{opacity:.2;filter:blur(0px);transform:translateX(0) rotate(-25deg)}50%{opacity:1;filter:blur(.6px);transform:translateX(-30px) rotate(-25deg)}100%{opacity:.2;filter:blur(0px);transform:translateX(0) rotate(-25deg)}}

@media (max-width: 960px){
  .fullpage{height:auto;overflow:visible;scroll-snap-type:none}
  .screen{height:auto;padding:120px 0}
  .container{flex-direction:column;text-align:center}
  .s1-right{width:100%;height:360px}
  .s1-data{position:static;margin-top:20px;flex-wrap:wrap;gap:20px}
  .nav{display:none}
  .burger{display:flex}
  .drawer{display:none}
  .drawer.open{display:flex}
  .fp-nav{display:none}
  .section-dots{display:none}
  .network-wrap,.experience-wrap{width:100%;height:360px}
  .planet-wrap{right:50%;transform:translateX(50%)}
  .ui-deck{right:50%;transform:translateX(20%);top:10px}
  .footer-bar{position:static;margin-top:20px}
}

@media (max-width: 600px){
  .s1-title{font-size:34px}
  .text .headline{font-size:28px}
  .header-bar{padding:12px 16px}
  .phone.center{display:none}
}

.s5-decor span{position:absolute;display:block;background-size:contain;background-repeat:no-repeat;opacity:.9}
.s5-decor .p1{width:90px;height:90px;background-image:url(../img/tronlink/page5-ball1.svg);left:60px;top:40%}
.s5-decor .p2{width:120px;height:120px;background-image:url(../img/tronlink/page5-ball2.png);right:80px;top:30%}
.s5-decor .p3{width:160px;height:160px;background-image:url(../img/tronlink/page5-ball3.png);right:-20px;bottom:0}