/* ===== CSS VARIABLES ===== */
:root {
  --bg: #F0F4F8;
  --bg2: #FFFFFF;
  --bg3: #E5ECF4;
  --primary: #2563EB;
  --primary-glow: rgba(37,99,235,0.12);
  --gold: #D97706;
  --gold-glow: rgba(217,119,6,0.15);
  --purple: #4F46E5;
  --purple-glow: rgba(79,70,229,0.1);
  --green: #16A34A;
  --text: #0F172A;
  --muted: #475569;
  --border: #E2E8F0;
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(226,232,240,0.8);
  --radius: 16px;
  --radius-lg: 24px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%}
button{cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.2;font-weight:800}
.gradient-text{
  background:linear-gradient(135deg,var(--primary),var(--purple),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== LAYOUT ===== */
.container{max-width:1280px;margin:0 auto;padding:0 2rem}
section{padding:7rem 0;position:relative}

/* ===== SECTION HEADERS ===== */
.section-tag{
  display:inline-block;
  background:linear-gradient(135deg,rgba(14,165,233,0.15),rgba(139,92,246,0.15));
  border:1px solid rgba(14,165,233,0.3);
  color:var(--primary);
  padding:0.4rem 1.2rem;
  border-radius:50px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.section-title{font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}
.section-sub{color:var(--muted);font-size:1.1rem;max-width:600px;margin:0 auto 4rem;text-align:center}
.about .section-tag,.about .section-title,.features .section-tag,.features .section-title,
.pricing .section-tag,.pricing .section-title,.partners .section-tag,.partners .section-title,
.ecosystem .section-tag,.ecosystem .section-title,.contact .section-tag,.contact .section-title{
  text-align:center;display:block
}

/* ===== BUTTONS ===== */
.btn-primary{
  display:inline-block;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;
  padding:0.85rem 2rem;
  border-radius:50px;
  font-weight:700;
  font-family:'Outfit',sans-serif;
  font-size:1rem;
  transition:var(--transition);
  box-shadow:0 0 30px var(--primary-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px var(--primary-glow),0 10px 20px rgba(15, 23, 42, 0.15)}
.btn-ghost{
  display:inline-block;
  border:1px solid var(--glass-border);
  color:var(--text);
  padding:0.85rem 2rem;
  border-radius:50px;
  font-weight:600;
  font-family:'Outfit',sans-serif;
  transition:var(--transition);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.full-width{width:100%;text-align:center}

/* ===== REVEAL ANIMATION ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.2rem 0;
  transition:var(--transition);
}
.navbar.scrolled{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0.8rem 0;
}
.nav-container{
  max-width:1280px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;gap:2rem;
}
.nav-logo{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.logo-icon{font-size:1.8rem;filter:drop-shadow(0 0 8px rgba(37,99,235,0.25))}
.logo-text{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-0.02em}
.logo-accent{color:var(--primary)}
.logo-img{height:36px;width:auto;display:block;transition:var(--transition)}
.logo-img:hover{transform:scale(1.02)}
.nav-links{display:flex;gap:2rem;margin-left:auto}
.nav-links a{font-family:'Outfit',sans-serif;font-weight:600;font-size:0.95rem;color:var(--muted);transition:var(--transition);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary);transition:var(--transition)}
.nav-links a:hover{color:var(--primary)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;padding:0.6rem 1.5rem;border-radius:50px;
  font-weight:700;font-family:'Outfit',sans-serif;font-size:0.9rem;
  transition:var(--transition);white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 20px var(--primary-glow)}
.nav-toggle{
  display:none;font-size:1.6rem;color:var(--text);
  padding:0.4rem 0.5rem;margin-left:auto;
  border:1px solid var(--glass-border);border-radius:8px;
  background:var(--glass);backdrop-filter:blur(10px);
  line-height:1;
}

.hero{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:0;
  background:#ffffff !important;
}
#globeCanvas{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:44%;height:90%;
  z-index:1;pointer-events:auto;cursor:grab;
}
#globeCanvas:active{cursor:grabbing}
.particles-bg{position:absolute;inset:0;z-index:0}
.hero-content{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;padding:8rem 2rem 4rem;
  width:100%;
}
.hero-badge{
  display:inline-block;
  background:rgba(245,158,11,0.1);
  border:1px solid rgba(245,158,11,0.3);
  color:var(--gold);
  padding:0.4rem 1.2rem;border-radius:50px;
  font-size:0.85rem;font-weight:600;
  margin-bottom:1.5rem;
  animation:fadeSlideDown 0.8s ease both;
}
.hero-title{
  font-size:clamp(2.8rem,5.5vw,4.5rem);
  max-width:700px;
  line-height:1.1;
  margin-bottom:0.8rem;
  animation:fadeSlideUp 0.8s 0.2s ease both;
}
.hero-subtitle{
  font-size:1.2rem;
  color:var(--gold);
  font-family:'Outfit',sans-serif;
  font-weight:500;
  margin-bottom:1rem;
  animation:fadeSlideUp 0.8s 0.3s ease both;
}
.hero-desc{
  color:var(--muted);
  font-size:1.1rem;
  max-width:540px;
  margin-bottom:2rem;
  animation:fadeSlideUp 0.8s 0.4s ease both;
}
.hero-btns{
  display:flex;gap:1rem;flex-wrap:wrap;
  margin-bottom:3rem;
  animation:fadeSlideUp 0.8s 0.5s ease both;
}
.hero-stats{
  display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;
  animation:fadeSlideUp 0.8s 0.6s ease both;
  width:100%;max-width:540px;
}
.stat{
  flex:1;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0.5rem 0;
}
.stat-num{
  font-family:'Outfit',sans-serif;font-weight:800;
  font-size:2rem;color:var(--primary);
  line-height:1.2;white-space:nowrap;
}
.stat-label{font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:0.15rem}
.stat-divider{width:1px;align-self:stretch;background:var(--border);flex-shrink:0}
.hero-globe-label{position:absolute;inset:0;z-index:3;pointer-events:none}
.globe-tag{
  position:absolute;
  background:rgba(14,165,233,0.15);
  backdrop-filter:blur(8px);
  border:1px solid rgba(14,165,233,0.3);
  color:var(--primary);
  padding:0.3rem 0.8rem;border-radius:50px;
  font-size:0.75rem;font-weight:700;
  animation:float 3s ease-in-out infinite;
}
.globe-tag:nth-child(2){animation-delay:0.5s}
.globe-tag:nth-child(3){animation-delay:1s}
.globe-tag:nth-child(4){animation-delay:1.5s}
.scroll-indicator{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  color:var(--muted);font-size:0.75rem;z-index:5;
  animation:bounce 2s ease-in-out infinite;
}
.scroll-dot{width:6px;height:6px;background:var(--primary);border-radius:50%}

/* ===== ABOUT ===== */
.about{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.about-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;margin-top:3rem;
}
.about-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.04);
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.about-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--purple));
  opacity:0;transition:var(--transition);
}
.about-card:hover{transform:translateY(-6px);border-color:rgba(37,99,235,0.3);box-shadow:0 20px 40px rgba(15, 23, 42, 0.08),0 0 30px var(--primary-glow)}
.about-card:hover::before{opacity:1}
.about-icon{font-size:2.5rem;margin-bottom:1rem}
.about-card h3{font-size:1.2rem;margin-bottom:0.7rem;font-family:'Outfit',sans-serif;font-weight:700}
.about-card p{color:var(--muted);font-size:0.92rem;line-height:1.6}

/* ===== FEATURES ===== */
.features{background:var(--bg3)}
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.5rem;
}
.feature-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.8rem;
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.04);
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.feature-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at top left,var(--primary-glow),transparent 60%);
  opacity:0;transition:var(--transition);
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(37,99,235,0.25);box-shadow:0 15px 30px rgba(15, 23, 42, 0.06)}
.feature-card:hover::after{opacity:1}
.feature-icon{font-size:2rem;margin-bottom:1rem;display:block}
.feature-card h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:0.5rem;position:relative;z-index:1}
.feature-card p{color:var(--muted);font-size:0.88rem;line-height:1.6;position:relative;z-index:1}

/* ===== PRICING ===== */
.pricing{background:linear-gradient(180deg,var(--bg3) 0%,var(--bg) 100%)}
.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;align-items:start;
}
.pricing-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:0 15px 35px rgba(15, 23, 42, 0.05);
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.pricing-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15, 23, 42, 0.1)}
.pricing-card.popular{
  border-color:var(--gold);
  box-shadow:0 15px 35px rgba(15, 23, 42, 0.06),0 0 0 1px var(--gold);
  background:linear-gradient(135deg,rgba(217,119,6,0.02),rgba(37,99,235,0.02));
}
.pricing-card.popular:hover{box-shadow:0 30px 60px rgba(15, 23, 42, 0.12),0 0 40px var(--gold-glow)}
.pricing-card.custom{border-color:rgba(79,70,229,0.3);box-shadow:0 15px 35px rgba(79,70,229,0.04)}
.popular-badge{
  position:absolute;top:1rem;right:1rem;
  background:linear-gradient(135deg,var(--gold),#B45309);
  color:#fff;padding:0.25rem 0.8rem;border-radius:50px;
  font-size:0.75rem;font-weight:700;
}
.plan-header{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.plan-badge{font-size:2rem;margin-bottom:0.5rem}
.plan-name{font-size:1.4rem;font-family:'Outfit',sans-serif;font-weight:800;margin-bottom:0.4rem}
.plan-desc-label{font-size:0.88rem;color:var(--muted);line-height:1.4;margin-bottom:0.5rem}
.plan-price{display:flex;align-items:baseline;gap:0.2rem;margin-bottom:0.3rem}
.currency{font-size:1.2rem;font-family:'Outfit',sans-serif;font-weight:700;color:var(--primary);margin-top:0.3rem}
.amount{font-size:2.5rem;font-family:'Outfit',sans-serif;font-weight:800;color:var(--primary)}
.custom-price{font-size:1.8rem;font-family:'Outfit',sans-serif;font-weight:800;color:var(--purple);margin-bottom:0.3rem}
.plan-period{color:var(--muted);font-size:0.85rem}
.plan-ids{
  margin-top:0.5rem;font-size:0.8rem;
  background:rgba(14,165,233,0.1);
  border:1px solid rgba(14,165,233,0.2);
  color:var(--primary);
  display:inline-block;padding:0.2rem 0.7rem;border-radius:50px;
}
.plan-features{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:0.55rem}
.plan-features li{font-size:0.92rem;color:var(--muted);display:flex;align-items:flex-start;gap:0.4rem;line-height:1.5;font-weight:500}
.plan-total{
  text-align:center;font-weight:700;font-family:'Outfit',sans-serif;
  font-size:0.9rem;color:var(--green);
  margin-bottom:1.2rem;
  background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.2);
  padding:0.4rem;border-radius:8px;
}
.plan-btn{
  display:block;text-align:center;
  border:1px solid var(--glass-border);
  color:var(--text);padding:0.75rem;
  border-radius:50px;font-weight:700;
  font-family:'Outfit',sans-serif;
  transition:var(--transition);
}
.plan-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.popular-btn{
  background:linear-gradient(135deg,var(--gold),#B45309);
  border-color:transparent;color:#fff;
}
.popular-btn:hover{box-shadow:0 0 30px var(--gold-glow);color:#fff;border-color:transparent}
.custom-btn{border-color:rgba(79,70,229,0.3);color:var(--purple)}
.custom-btn:hover{border-color:var(--purple);box-shadow:0 0 20px var(--purple-glow)}

/* ===== PARTNERS ===== */
.partners{background:var(--bg)}
.partners-row{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:center;margin-top:3rem;
}
.partner-badge{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem 2.5rem;
  box-shadow:0 10px 30px rgba(15, 23, 42, 0.04);
  transition:var(--transition);
  min-width:140px;
}
.partner-badge:hover{border-color:rgba(37,99,235,0.3);transform:translateY(-4px);box-shadow:0 15px 30px rgba(15, 23, 42, 0.06),0 0 20px var(--primary-glow)}
.p-icon{font-size:2rem}
.p-name{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.1rem}
.p-sub{font-size:0.78rem;color:var(--muted)}

/* ===== ECOSYSTEM — Hub Layout ===== */
.ecosystem{background:var(--bg2);overflow:hidden}

.eco-hub{
  display:grid;
  grid-template-columns:1fr 160px 1fr;
  gap:0;
  align-items:center;
  max-width:900px;
  margin:3rem auto 0;
}

/* Left & Right node columns */
.eco-col{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.eco-col:first-child{ align-items:flex-end; }
.eco-col:last-child { align-items:flex-start; }

/* Individual node cards */
.eco-hub .eco-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem 1.4rem;
  display:flex;
  align-items:center;
  gap:0.8rem;
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.04);
  transition:var(--transition);
  width:200px;
  cursor:default;
}
.eco-hub .eco-card:hover{
  border-color:rgba(37,99,235,0.4);
  box-shadow:0 10px 25px rgba(15, 23, 42, 0.06),0 0 20px var(--primary-glow);
  transform:scale(1.03);
}
.eco-hub .eco-icon{ font-size:1.6rem; flex-shrink:0; }
.eco-label{
  font-size:0.82rem;
  font-weight:600;
  line-height:1.4;
  color:var(--text);
}

/* Center column */
.eco-core-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  justify-content:center;
  position:relative;
}
.eco-line-v{
  width:2px;
  flex:1;
  background:linear-gradient(to bottom,transparent,rgba(14,165,233,0.4),transparent);
  min-height:40px;
}

/* Glowing core orb */
.eco-core{
  position:relative;
  width:110px;height:110px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  border-radius:50%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;
  font-size:0.95rem;text-align:center;
  box-shadow:0 0 50px var(--primary-glow),0 0 100px rgba(14,165,233,0.08);
  animation:pulse-glow 2.5s ease-in-out infinite;
  flex-shrink:0;
  z-index:2;
}
.eco-core small{ font-size:0.65rem;opacity:0.75;font-weight:400;margin-top:2px; }
.eco-core-ring{
  position:absolute;inset:-8px;
  border-radius:50%;
  border:1px solid rgba(14,165,233,0.3);
  animation:ripple 2.5s ease-out infinite;
}

/* Horizontal connector lines between cards and core */
.eco-hub .eco-col:first-child .eco-card{ position:relative; }
.eco-hub .eco-col:first-child .eco-card::after{
  content:'';
  position:absolute;right:-1.4rem;top:50%;
  width:1.4rem;height:1px;
  background:linear-gradient(to right,rgba(14,165,233,0.5),transparent);
  transform:translateY(-50%);
}
.eco-hub .eco-col:last-child .eco-card{ position:relative; }
.eco-hub .eco-col:last-child .eco-card::before{
  content:'';
  position:absolute;left:-1.4rem;top:50%;
  width:1.4rem;height:1px;
  background:linear-gradient(to left,rgba(14,165,233,0.5),transparent);
  transform:translateY(-50%);
}

/* Mobile — stack vertically */
@media(max-width:750px){
  .eco-hub{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .eco-core-col{ flex-direction:row; height:auto; padding:0.5rem 0; }
  .eco-line-v{ width:30px;height:2px;min-height:unset;
    background:linear-gradient(to right,transparent,rgba(14,165,233,0.4),transparent);
  }
  .eco-col:first-child,.eco-col:last-child{ align-items:center; }
  .eco-hub .eco-card{ width:100%;max-width:280px; }
  .eco-hub .eco-col:first-child .eco-card::after,
  .eco-hub .eco-col:last-child .eco-card::before{ display:none; }
}


/* ===== CONTACT ===== */
.contact{background:var(--bg)}
.contact-wrapper{
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:3rem;margin-top:3rem;
}
.contact-info{display:flex;flex-direction:column;gap:1rem}
.info-card{
  display:flex;align-items:center;gap:1rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.03);
  transition:var(--transition);
}
.info-card:hover{border-color:rgba(37,99,235,0.3);transform:translateX(4px)}
.info-icon{font-size:1.5rem;flex-shrink:0}
.info-card strong{display:block;font-family:'Outfit',sans-serif;font-size:0.85rem;margin-bottom:0.2rem}
.info-card div{font-size:0.9rem;color:var(--muted)}
.contact-form{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  box-shadow:0 15px 40px rgba(15, 23, 42, 0.05);
}
.form-group{margin-bottom:1rem}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0.85rem 1rem;
  color:var(--text);
  font-size:0.95rem;
  transition:var(--transition);
  outline:none;
}
.form-group select option{background:var(--bg2);color:var(--text)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--primary);
  background:var(--bg2);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--muted)}
.form-group textarea{resize:vertical;min-height:80px}

/* ===== FOOTER ===== */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:4rem 0 2rem}
.footer-top{
  display:grid;grid-template-columns:1.5fr 2fr;
  gap:4rem;margin-bottom:3rem;
}
.footer-brand p{color:var(--muted);font-size:0.9rem;max-width:320px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-col h4{
  font-family:'Outfit',sans-serif;font-weight:700;
  margin-bottom:1rem;font-size:0.95rem;
}
.footer-col a{
  display:block;color:var(--muted);font-size:0.88rem;
  margin-bottom:0.6rem;transition:var(--transition);
}
.footer-col a:hover{color:var(--primary);transform:translateX(3px)}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:1.5rem;text-align:center;
  color:var(--muted);font-size:0.85rem;
}

/* ===== WHATSAPP FAB ===== */
.whatsapp-fab{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:var(--transition);
  animation:float 3s ease-in-out infinite;
}
.whatsapp-fab:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,0.6)}

/* ===== TRAACS-STYLE ALTERNATING DARK SECTIONS ===== */
.section-dark {
  background: #003E6B !important;
  color: #FFFFFF !important;
}
.section-dark .section-title {
  color: #FFFFFF !important;
}
.section-dark .section-sub {
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}
.section-dark .section-tag {
  background: rgba(255, 183, 0, 0.12) !important;
  border: 1px solid rgba(255, 183, 0, 0.4) !important;
  color: #FFC000 !important;
}
.section-dark .feature-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
.section-dark .feature-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFC000 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 183, 0, 0.2) !important;
}
.section-dark .feature-card h3 {
  color: #FFFFFF !important;
}
.section-dark .feature-card p {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* Ecosystem dark section overrides */
.section-dark .eco-hub .eco-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.section-dark .eco-hub .eco-card:hover {
  background: #FFFFFF !important;
  border-color: #FFC000 !important;
  box-shadow: 0 10px 25px rgba(0, 62, 107, 0.25), 0 0 20px rgba(255, 183, 0, 0.15) !important;
}
.section-dark .eco-label {
  color: #0F172A !important;
}
.section-dark .eco-core {
  background: linear-gradient(135deg, #0284c7, var(--primary)) !important;
  box-shadow: 0 0 40px rgba(37,99,235,0.4), 0 0 80px rgba(37,99,235,0.15) !important;
  color: #FFFFFF !important;
}
.section-dark .eco-core-ring {
  border-color: rgba(255, 183, 0, 0.4) !important;
}
.section-dark .eco-hub .eco-col:first-child .eco-card::after,
.section-dark .eco-hub .eco-col:last-child .eco-card::before {
  background: linear-gradient(to right, rgba(255, 183, 0, 0.4), transparent) !important;
}
.section-dark .eco-line-v {
  background: linear-gradient(to bottom, transparent, rgba(255, 183, 0, 0.4), transparent) !important;
}

/* Footer dark overrides */
.footer.section-dark {
  background: #003E6B !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.footer.section-dark .footer-brand p,
.footer.section-dark .footer-col a {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}
.footer.section-dark .footer-col a:hover {
  color: #FFC000 !important;
  opacity: 1 !important;
}
.footer.section-dark .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  opacity: 0.7 !important;
}

/* ===== CORPORATE IMAGE SHOWCASE (ABOUT SECTION) ===== */
.about-showcase {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 5rem;
}
.about-showcase-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
}
.about-showcase-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition);
}
.about-showcase-img:hover img {
  transform: scale(1.02);
}
.about-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 62, 107, 0.08), transparent);
  pointer-events: none;
}
.about-showcase-content h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--text);
  margin-bottom: 1.2rem;
  line-height: 1.2;
}
.about-showcase-content p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.about-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-showcase-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}
.about-showcase-list li span {
  color: var(--primary);
  font-size: 1.2rem;
  line-height: 1;
}

/* ===== HIGH-CONTRAST GRADIENT TEXT OVERRIDES (DARK BLUE BG) ===== */
.section-dark .gradient-text {
  background: linear-gradient(135deg, #FFFFFF, #B9E2FC) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #FFFFFF !important;
}

/* ===== PREMIUM REDESIGN PASS ===== */
:root {
  --bg: #f6f8fb;
  --bg2: #ffffff;
  --bg3: #edf3f8;
  --primary: #075985;
  --primary-glow: rgba(7, 89, 133, 0.16);
  --purple: #3157d5;
  --purple-glow: rgba(49, 87, 213, 0.14);
  --gold: #c47a12;
  --gold-glow: rgba(196, 122, 18, 0.18);
  --green: #0f8a5f;
  --text: #101828;
  --muted: #526070;
  --border: #d8e1ea;
  --glass: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(255, 255, 255, 0.7);
  --radius: 8px;
  --radius-lg: 10px;
}

body {
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef4f8 42%, #f8fafc 100%);
}

section {
  padding: 6.5rem 0;
}

.container,
.nav-container,
.hero-content {
  max-width: 1180px;
}

.navbar {
  padding: 1rem 0;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

.nav-container {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(216, 225, 234, 0.72);
  border-radius: 8px;
  padding: 0.7rem 0.9rem 0.7rem 1rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.06);
}

.nav-links {
  gap: 1.35rem;
}

.nav-links a {
  color: #344054;
}

.logo-text {
  letter-spacing: 0;
}

.nav-cta,
.btn-primary,
.plan-btn,
.btn-ghost {
  border-radius: 8px;
}

.btn-primary,
.nav-cta {
  background: linear-gradient(135deg, #075985 0%, #2563eb 54%, #c47a12 140%);
  box-shadow: 0 16px 32px rgba(7, 89, 133, 0.18);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.74);
  color: var(--primary);
  border-color: rgba(7, 89, 133, 0.18);
}

.hero {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(248, 251, 255, 0.98) 0%, rgba(235, 243, 249, 0.92) 52%, rgba(255, 248, 235, 0.7) 100%) !important;
}

.hero::before,
.hero::after {
  display: none;
}

.hero::marker {
  content: "";
}

.hero-content {
  padding-top: 9rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(7, 89, 133, 0.18);
  color: #075985;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
  letter-spacing: 0.04em;
}

.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

.hero-title {
  max-width: 650px;
  letter-spacing: 0;
}

.hero-subtitle {
  color: #9a5d0b;
  font-weight: 700;
}

.hero-desc {
  color: #344054;
  max-width: 610px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: -1.4rem 0 2rem;
  animation: fadeSlideUp 0.8s 0.56s ease both;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(7, 89, 133, 0.12);
  background: rgba(255, 255, 255, 0.66);
  color: #344054;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
}

.hero-stats {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(216, 225, 234, 0.86);
  border-radius: 8px;
  padding: 0.95rem 1rem;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.09);
  backdrop-filter: blur(18px);
}

.stat-num {
  color: #075985;
}

#globeCanvas {
  right: 1.5%;
  width: 43%;
  height: 78%;
  filter: drop-shadow(0 30px 60px rgba(7, 89, 133, 0.16));
}

.hero-command-center {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 11%;
  width: 270px;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 252, 0.72));
  box-shadow: 0 28px 70px rgba(16, 24, 40, 0.16);
  backdrop-filter: blur(18px);
}

.command-top {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.command-top span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c47a12;
}

.command-top span:nth-child(2) {
  background: #0f8a5f;
}

.command-top span:nth-child(3) {
  background: #2563eb;
}

.command-top strong {
  margin-left: auto;
  color: #344054;
  font-size: 0.75rem;
}

.command-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.2rem;
}

.command-metric small,
.command-metric em {
  color: #667085;
  font-style: normal;
  font-size: 0.72rem;
}

.command-metric b {
  grid-column: 1;
  color: #101828;
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.command-metric em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #0f8a5f;
  background: rgba(15, 138, 95, 0.1);
  border-radius: 8px;
  padding: 0.25rem 0.45rem;
  font-weight: 800;
}

.command-bars {
  height: 84px;
  display: flex;
  align-items: end;
  gap: 0.55rem;
  margin: 1rem 0;
  padding: 0.75rem;
  background: rgba(7, 89, 133, 0.06);
  border-radius: 8px;
}

.command-bars i {
  flex: 1;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #2563eb, #075985);
}

.command-list {
  display: grid;
  gap: 0.45rem;
}

.command-list span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #475467;
  font-size: 0.76rem;
}

.command-list b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f8a5f;
}

.globe-tag {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(7, 89, 133, 0.15);
  color: #075985;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.1);
}

.section-tag {
  border-radius: 8px;
  background: rgba(7, 89, 133, 0.08);
  border-color: rgba(7, 89, 133, 0.16);
  letter-spacing: 0.08em;
}

.section-title {
  letter-spacing: 0;
}

.about,
.pricing,
.partners,
.contact {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(239, 244, 248, 0.72));
}

.about-card,
.feature-card,
.pricing-card,
.partner-badge,
.info-card,
.contact-form,
.about-showcase-img {
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.07);
}

.about-card,
.feature-card,
.pricing-card,
.partner-badge,
.info-card,
.contact-form {
  border-color: rgba(216, 225, 234, 0.9);
}

.about-card::before {
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, #075985, #0f8a5f, #c47a12);
}

.about-icon,
.feature-icon,
.p-icon,
.info-icon,
.eco-icon,
.plan-badge {
  filter: saturate(1.1);
}

.feature-card {
  min-height: 210px;
}

.section-dark {
  background:
    linear-gradient(135deg, #082f49 0%, #075985 48%, #0f3b55 100%) !important;
}

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
  pointer-events: none;
}

.section-dark .container {
  position: relative;
  z-index: 1;
}

.section-dark .feature-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.22) !important;
  backdrop-filter: blur(16px);
}

.pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pricing-card.popular {
  transform: translateY(-14px);
  border-color: rgba(196, 122, 18, 0.72);
  box-shadow: 0 28px 70px rgba(196, 122, 18, 0.18);
}

.pricing-card.popular:hover {
  transform: translateY(-20px);
}

.plan-features {
  flex: 1;
}

.plan-btn {
  background: #f8fafc;
}

.popular-btn,
.popular-btn:hover {
  background: linear-gradient(135deg, #c47a12, #2563eb);
}

.partners-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.partner-badge {
  min-width: 0;
  padding: 1.35rem 1rem;
}

.about-showcase {
  gap: 3rem;
  background: #ffffff;
  border: 1px solid rgba(216, 225, 234, 0.9);
  border-radius: 8px;
  padding: 1.1rem;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.08);
}

.about-showcase-content {
  padding-right: 1rem;
}

.contact-wrapper {
  align-items: start;
}

.contact-form {
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.form-group input,
.form-group select,
.form-group textarea {
  border-radius: 8px;
  background: #ffffff;
}