@font-face { font-family: 'Rowdies'; font-weight: 400; src: url('../fonts/Rowdies-Regular.ttf'); }
@font-face { font-family: 'Teko'; font-weight: 300; src: url('../fonts/Teko-Light.ttf'); }
@font-face { font-family: 'Teko'; font-weight: 400; src: url('../fonts/Teko-Regular.ttf'); }
@font-face { font-family: 'Teko'; font-weight: 500; src: url('../fonts/Teko-Medium.ttf'); }
@font-face { font-family: 'Teko'; font-weight: 600; src: url('../fonts/Teko-SemiBold.ttf'); }
@font-face { font-family: 'Teko'; font-weight: 700; src: url('../fonts/Teko-Bold.ttf'); }

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --primary-clr:#1E90FF;
  --secondary-clr:#2b3241;
  --green-clr:#D8EE34;
  --linear-bg:linear-gradient(270deg,#00fff0 0%,#1E90FF 100%);
  --card-bg:#292929;
  --orange-clr:#1E90FF;
}

body{ font-family:'Teko',sans-serif; background:#141414; color:#fff; }
html{ scroll-padding-top:94px; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#ccc; }
::-webkit-scrollbar-thumb{ background:var(--primary-clr); }
::-webkit-scrollbar-thumb:hover{ background:#ccc; }

h1,h2,h3,h4,h5,h6,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }

/* Párrafos: heredan color, sin Capitalize */
p{
  font-size:20px;
  font-weight:500;
  color:inherit;
  text-transform:none;
}

a,.nav-link{ text-decoration:none; transition:.2s linear; }
button:focus:not(:focus-visible){ box-shadow:none; }

.primary-btn{
  position:relative;
  font-size:26px;
  line-height:normal;
  padding:8px 40px;
  border:1px solid transparent;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  background-color:var(--orange-clr);
  border-radius:10px;
}
.primary-btn:hover{ background:transparent; color:var(--orange-clr); border-color:var(--orange-clr); }

.inner-gap{ padding:100px 0; }
.title-group{ margin-bottom:64px; text-align:center; }
.section-title{
  font-size:48px; line-height:1; font-weight:700; color:var(--orange-clr);
  text-transform:capitalize; margin-bottom:28px; display:block;
}
.sub-title{ font-size:64px; line-height:1.4; font-weight:700; color:#fff; text-transform:uppercase; margin-bottom:28px; }
.text-orange{ color:var(--orange-clr); }

/* Header */
header{
  background:#1F2029; position:sticky; top:0; z-index:999;
  box-shadow:0 4px 10px -2px rgba(0,0,0,.1); padding-block:15px;
}
.navbar-brand img{ max-width:220px; }
.navbar-collapse{ flex-grow:0; }
.navbar{ padding-block:0; }
.navbar-nav .nav-link{
  font-size:1.5rem; line-height:2rem; letter-spacing:1.3px; font-weight:400;
  padding:16px 20px; color:#fff; text-transform:uppercase;
}
.navbar-expand-lg .navbar-nav .nav-link{ padding:16px 20px; }
.nav-link:focus,.nav-link:hover,.nav-link.active{ color:var(--orange-clr); }

a.dropdown-item{
  font-size:18px; line-height:1.7; font-weight:700; padding:10px; color:#14F195; text-transform:uppercase;
}

.toggle-menu-icon{ width:24px; height:20px; display:inline-block; position:relative; transition:.5s ease-in-out; cursor:pointer; }
.toggle-menu-icon span{
  display:block; position:absolute; height:3px; width:100%; border-radius:9px; left:0; transition:.25s ease-in-out; background:#fff;
}
.toggle-menu-icon span:nth-child(1){ top:2px; }
.toggle-menu-icon span:nth-child(2),.toggle-menu-icon span:nth-child(3){ top:10px; }
.toggle-menu-icon span:nth-child(4){ top:18px; }
.toggle-menu-icon.open span:nth-child(1){ top:11px; width:0%; left:50%; }
.toggle-menu-icon.open span:nth-child(2){ transform:rotate(45deg); }
.toggle-menu-icon.open span:nth-child(3){ transform:rotate(-45deg); }
.toggle-menu-icon.open span:nth-child(4){ top:11px; width:0%; left:50%; }

/* Banner */
.banner{
  background-image:url('../../assets/images/banner-bg.png');
  background-size:cover; padding-block:4rem;
}
.banner-left{ height:100%; padding-right:45px; position:relative; }
.banner-content{ height:100%; display:flex; justify-content:center; flex-direction:column; }
.banner-content h2{ font-size:50px; font-weight:500; color:var(--orange-clr); margin-bottom:12px; }
.banner-content h1{ font-size:96px; line-height:1; text-transform:uppercase; font-weight:700; color:#fff; margin-bottom:12px; }
.banner-content h1 .small{ font-size:75px; display:inline-block; }
.banner-content h1 .orange{ color:var(--orange-clr); }
.banner-content p{ font-size:30px; color:#fff; }

.banner-right{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; }
.banner-right-img{ position:relative; width:92%; margin-left:auto; }
.banner-right-img::before{
  content:''; position:absolute; border:1px solid #fff; height:100%; width:100%; left:-20px; top:20px;
  border-top-left-radius:60px; border-top-right-radius:60px;
}
.banner-right-img img{ border-top-left-radius:60px; border-top-right-radius:60px; position:relative; }

/* Founder / cards */
.founder-card{
  background-color:#292929; padding:40px 30px; border-radius:20px; transition:.2s linear; height:100%;
}
.founder-card:hover{ transform:translateY(-5px); }
.founder-card h3{ font-size:50px; font-weight:700; line-height:40px; margin-bottom:20px; color:var(--orange-clr); }
.founder-card p{ font-size:30px; font-weight:400; line-height:1.2; color:#fff; }
.founder-right{ text-align:right; }
.founder-right img{ max-height:558px; }

/* Counter (no usado aquí, se conserva por compatibilidad) */
.counter{ background-image:url('../../assets/images/founder-bg.png'); background-size:cover; }
.counter-card{
  height:250px; width:250px; margin:0 auto; text-align:center; border-radius:50%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:#292929; transition:.2s linear;
}
.counter-card:hover{ transform:translateY(-5px); }
.counter-card h3{ font-size:64px; font-weight:700; color:var(--orange-clr); text-transform:capitalize; }
.counter-card p{ font-size:30px; font-weight:600; color:#fff; text-transform:capitalize; }

/* About (How to Buy) */
.about-content p{
  font-size:30px; font-weight:300; line-height:1.3; color:#fff; letter-spacing:.9px; margin-bottom:65px;
}
.about-card{
  padding:40px 24px; border-radius:20px; background:var(--card-bg);
  box-shadow:0px 4px 18px 0px rgba(0,0,0,.04); height:100%; text-align:center; transition:.2s linear;
}
.about-card:hover{ transform:translateY(-5px); }
.about-card-img{ width:80px; height:80px; margin-inline:auto; position:relative; }
.about-card-img::before{ content:''; position:absolute; height:56px; width:56px; left:-8px; bottom:-8px; background:var(--orange-clr); filter:blur(26.5px); }
.about-card a{ display:block; color:var(--orange-clr); margin-block:20px 10px; font-size:30px; font-weight:500; }
.about-card p{ font-size:21px; font-weight:400; color:rgba(255,255,255,.6); }

/* Ecosystem background */
.tokenomics{
  background-image:url('../../assets/images/tokenomics-bg.png');
  background-position:center; background-repeat:no-repeat; background-size:cover;
}

.tokenomics-content h2 .large{ font-size:80px; line-height:1; }
.tokenomics-content p{ font-size:24px; font-weight:400; color:rgba(255,255,255,.6); margin-bottom:60px; }

.title-group p{ font-size:30px; color:rgba(255,255,255,.6); font-weight:300; letter-spacing:.9px; }

/* Roadmap */
.roadmap-wrapper{ position:relative; }
.roadmap-wrapper::before{
  content:''; position:absolute; margin-left:auto; margin-right:auto; left:0; right:0; width:8px; height:100%;
  background:#fff; opacity:.6; z-index:-1;
}
.roadmap-step{ position:relative; padding-block:55px; align-items:baseline; }
.roadmap-step::before{
  content:''; position:absolute; margin-left:auto; margin-right:auto; left:0; right:0; width:24px; height:24px;
  border:4px solid var(--orange-clr); border-radius:50%; background:#fff; z-index:-1;
}
.roadmap-step-first::before{ top:0; }
.roadmap-step-last::before{ bottom:0; }

.roadmap-card{ border-radius:30px; background:#292929; padding-block:40px; position:relative; }
.roadmap-card::before{
  content:''; position:absolute; right:100%; top:30px; height:30px; width:30px; background:var(--orange-clr);
  clip-path:polygon(0 50%, 100% 100%, 100% 0);
}
.roadmap-step-second .roadmap-card::before{ right:auto; left:100%; transform:rotateY(180deg); }
.roadmap-step-second::before{ display:none; }
.roadmap-step-second .phase-title{ text-align:left; }

.roadmap-card ul{ list-style:disc; padding-left:40px; }
.roadmap-card ul li{
  font-size:30px; line-height:normal; font-weight:300; color:rgba(255,255,255,.6); letter-spacing:1.2px;
}
.phase-title{ font-size:60px; color:#fff; font-weight:600; text-align:right; }

/* Footer */
.footer-title{ font-size:60px; color:#fff; font-weight:700; text-transform:uppercase; }
.footer-title span{ color:var(--orange-clr); }
.footer-top{ background:#292929; padding-block:100px 60px; text-align:center; }
.footer-link a{ font-size:30px; font-weight:700; color:#fff; text-transform:uppercase; }
.footer-bottom p{ padding-block:8px; text-align:center; color:#fff; }

/* Sidebar redes */
.social-sidebar{
  position:fixed; top:50%; right:0; transform:translateY(-50%);
  background-color:#fff; padding:10px; box-shadow:0 0 10px rgba(0,0,0,.1);
  display:flex; flex-direction:column; gap:10px; z-index:1000;
}
.social-sidebar a img{ width:40px; height:auto; }
.partner-logo{ max-width:100%; height:200px; display:block; margin:auto; }

#tokenomics.tokenomics{ position:relative; }
#tokenomics.tokenomics::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,20,.80), rgba(10,12,20,.92));
  pointer-events:none; z-index:0;
}
#tokenomics .container{ position:relative; z-index:1; }

#tokenomics .feature-card{
  background:rgba(8,12,21,.94);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:18px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
#tokenomics .feature-card:hover{
  transform:translateY(-3px);
  border-color:rgba(120,170,255,.45);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
#tokenomics .feature-img{
  background:#0c1222; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; overflow:hidden;
}
#tokenomics .feature-card h3{
  color:#fff; font-weight:800; letter-spacing:.2px; margin-bottom:.4rem;
}
#tokenomics .feature-card p{
  color:#EAF0FF !important;
  text-transform:none !important;
  font-weight:400; font-size:1.05rem; line-height:1.6; letter-spacing:.1px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  margin-bottom:.4rem; max-width:48ch;
}
#tokenomics .feature-meta .badge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#d7e3ff;
}
#tokenomics .feature-meta a.text-orange{ display:none !important; }

#tokenomics .title-group p{ color:rgba(255,255,255,.85); }

@media (min-width:1650px){
  .container{ max-width:1464px; }
  .inner-gap{ padding:150px 0; }
  .roadmap-card ul li{ font-size:40px; letter-spacing:1.2px; }
}
@media (max-width:1400px){
  .inner-gap{ padding:80px 0; }
  .section-title{ font-size:30px; margin-bottom:20px; }
  .sub-title{ font-size:54px; }
  .navbar-expand-lg .navbar-nav .nav-link{ padding:12px; }
  .banner-content h1 .small{ font-size:60px; }
  .banner-content h2{ font-size:40px; }
  .banner-content p{ font-size:24px; }
  .banner-content h1{ font-size:75px; margin-bottom:4px; }
  .founder-card h3{ font-size:40px; margin-bottom:10px; }
  .founder-card p{ font-size:26px; }
  .counter-card h3{ font-size:54px; }
  .about-content p{ font-size:24px; margin-bottom:30px; }
  .about-card a{ font-size:26px; }
  .about-card p{ font-size:18px; }
  .tokenomics-content h2 .large{ font-size:70px; }
  .tokenomics-content img{ height:240px; }
}
@media (max-width:1199px){
  .inner-gap{ padding:70px 0; }
  .primary-btn{ font-size:20px; padding:10px 30px; border-radius:6px; }
  .section-title{ font-size:26px; margin-bottom:12px; }
  .sub-title{ font-size:38px; margin-bottom:18px; }
  .navbar-brand img{ max-width:180px; }
  .navbar-expand-lg .navbar-nav .nav-link{ font-size:20px; }
  .banner-content h1, .banner-content h1 span.small{ font-size:54px; }
  .banner-content p{ font-size:20px; }
  .founder-right img{ max-height:408px; }
  .counter-card h3{ font-size:44px; }
  .counter-card{ height:220px; width:220px; }
  .tokenomics-content h2 .large{ font-size:57px; }
  .roadmap-card ul li{ font-size:25px; }
  .phase-title{ font-size:40px; }
  .footer-title{ font-size:50px; }
  .footer-top{ padding-block:60px 40px; }
  .footer-link a{ font-size:22px; }
}
@media (max-width:991px){
  .primary-btn{ font-size:16px; padding:10px 24px; }
  .sub-title{ font-size:36px; }
  .title-group p{ font-size:24px; letter-spacing:.2px; }
  .section-title{ font-size:24px; }
  #navbar-right .navbar-nav .nav-link{ padding:12px 20px; }
  .navbar-nav{ padding:10px; }
  .dropdown-menu{ padding:.5rem 15px; background-color:transparent; border:0; }
  a.dropdown-item{ font-weight:500; color:#fff; }
  .navbar-collapse{ position:absolute; top:100%; left:0; background:#1F2029; width:100%; }
  .navbar-brand img{ max-width:180px; }
  .banner-right-img{ width:72%; margin-inline:auto; }
  .counter .revolution-card h3{ font-size:50px; }
  .roadmap-wrapper::before{ margin:0; left:44px; }
  .phase-img-wrapper{ order:0; }
  .phase-title-wrapper{ order:1; }
  .phase-list{ order:2; }
  .roadmap-step-first::before{ top:-5px; left:47px; margin:0; }
  .roadmap-step-last::before{ bottom:-5px; left:47px; margin:0; }
  .roadmap-step-second .roadmap-card::before{ right:100%; left:auto; transform:rotateY(0); }
  .phase-title{ font-size:2.25rem; line-height:2.5rem; text-align:start; }

  .founder-card p{
    display:block;
    overflow:visible;
    white-space:normal;
    -webkit-line-clamp:unset;
    -webkit-box-orient:unset;
    overflow-wrap:anywhere;
  }

  .founder-right{ text-align:center; }
  .about-right{ text-align:center; }
  .revolution-img{ height:400px; }
  .tokenomics-img{ text-align:center; }
  .tokenomics-img img{ width:80%; }
  .roadmap-step{ padding-block:25px; }
  .social-media img{ height:60px; }
  .about-card-img::before{ height:36px; width:36px; filter:blur(13.5px); }
  .about-card-img{ width:70px; height:70px; }
  .about-card-img img{ height:60px; }
}
@media (max-width:767px){
  .inner-gap{ padding:50px 0; }
  .title-group{ margin-bottom:14px; }
  p{ font-size:18px; }
  .banner{ padding-block:44px; }
  .banner-right-img img{ border-top-left-radius:30px; border-top-right-radius:30px; }
  .banner-right-img::before{ left:-10px; top:10px; border-top-left-radius:30px; border-top-right-radius:30px; }
  .revolution-img{ height:300px; object-fit:contain; }
  .revolution-card{ padding:25px; }
  .revolution-card h3{ font-size:22px; }
  .banner-left{ padding-right:0; }
  .about-wrapper{ margin-bottom:50px; }
  .about .service-card, .service-card{ padding:20px; }
  .phase-number{ padding-inline:35px 20px; }
  .phase-number span{ font-size:30px; }
  .social-media a img{ height:60px; }
  .roadmap-wrapper::before{ left:30px; }
  .roadmap-step-first::before{ left:33px; }
  .roadmap-step-last::before{ left:33px; }
  .phase-title{ font-size:26px; }
  .roadmap-card{ border-radius:16px; padding-block:30px; }
  .roadmap-card ul{ padding-inline:30px 10px; }
  .roadmap-card ul li{ font-size:20px; letter-spacing:.2px; }
  .about-content{ text-align:center; }
  .tokenomics-content{ text-align:center; }
  .footer-title{ font-size:40px; }
  .footer-link a{ font-size:20px; }
}
@media (max-width:576px){
  p{ font-size:16px; }
  .primary-btn{ font-size:15px; padding:8px 16px; }
  .sub-title{ font-size:32px; text-align:center; }
  .section-title{ font-size:20px; text-align:center; }
  .navbar-brand img{ max-width:120px; }
  .banner-content h2{ font-size:26px; }
  .banner-right-img{ width:85%; }
  .banner-right{ gap:30px; }
  .banner-content h1, .banner-content h1 span.small{ font-size:44px; }
  .tokenomics-content p{ font-size:18px; margin-bottom:30px; text-align:center; }
  .founder-card h3{ font-size:25px; margin-bottom:0; }
  .founder-card{ padding:20px; border-radius:10px; }
  .founder-card p{ font-size:18px; }
  .founder-right img{ max-height:298px; }
  .counter-card{ height:200px; width:200px; }
  .about-card{ padding:25px 20px; border-radius:10px; }
  .tokenomics-content h2 .large{ font-size:40px; }
  .tokenomics-img img{ width:100%; }
  .tokenomics-content img{ height:180px; }
  .about-card-img{ width:50px; height:50px; }
  .about-card-img img{ height:50px; }
  .revolution-img{ max-width:300px; width:100%; }
  .title-group p{ font-size:18px; letter-spacing:0; }
  .revolution, .counter{ padding-block:40px; }
  .revolution-card{ padding:25px; }
  .revolution-card h3{ font-size:22px; }
  .roadmap-img{ width:30px; }
  .counter .revolution-card h3{ font-size:40px; }
  .counter .revolution-card p{ font-size:20px; }
  .about{ padding-block:40px; }
  .about-wrapper{ margin-bottom:30px; }
  .service-card{ flex-direction:column; }
  .tokenomics{ padding-block:40px; }
  .roadmap{ padding-block:40px; }
  .phase-number{ padding-inline:0; padding-block:80px 0; clip-path:polygon(51% 65%, 100% 50%, 100% 77%, 52% 100%, 0 81%, 0 51%); margin-bottom:10px; }
  .footer-top{ padding-block:40px 20px; }
  .footer-link .nav-link{ font-size:16px; padding-inline:6px; }
  .social-media a img{ height:40px; }
  .roadmap-wrapper::before{ left:12px; width:4px; }
  .roadmap-step{ padding-block:30px; }
  .phase-title{ font-size:16px; }
  .roadmap-card::before{ top:34px; height:20px; width:20px; }
  .roadmap-step-first::before{ left:17px; width:18px; height:18px; }
  .roadmap-step-last::before{ left:17px; width:18px; height:18px; }
  .footer-title{ font-size:30px; }
  .about-content{ text-align:center; }
}

#tokenomics .feature-card{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:20px;
}
#tokenomics .feature-img{
  flex:0 0 40%;
  max-width:320px;
  aspect-ratio:16/10;           
  border-radius:12px;
  overflow:hidden;
  background:#0c1222;
  border:1px solid rgba(255,255,255,.18);
}
#tokenomics .feature-img img{
  width:100%;
  height:100%;
  object-fit:cover;              
  display:block;
}

@media (max-width: 991px){
  #tokenomics .feature-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  #tokenomics .feature-img{
    flex:unset;
    max-width:100%;
    width:100%;
    aspect-ratio:auto;          
    margin-bottom:15px;
  }
  #tokenomics .feature-img img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important; 
  }
}