/* ===== BASIC RESET ===== */
* { box-sizing: border-box; }

:root{
  --page-max: 1100px;

  /* Ecosystem sidebar (desktop) */
  --eco-width: 340px;
  --eco-gutter: 12px;
  --eco-reserve: calc(var(--eco-width) + var(--eco-gutter));
}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#e6e8ef;
  background:#0b0f19 url('../img/bg.jpg') no-repeat center top fixed;
  background-size:cover;
}

/* ===== LINKS ===== */
a{ color:inherit; text-decoration:none; }

/* ===== CONTAINER ===== */
.container{ max-width:var(--page-max); margin:0 auto; padding:16px; }
.page-max{ max-width:var(--page-max) !important; }

/* ===== TOPBAR (bulls banner) ===== */
.topbar{
  position:sticky; top:0; z-index:1000;
  border-bottom:1px solid #1c243b;

  /* Darker and NO zoom/crop: image takes 100% height and repeats horizontally */
  min-height:200px;
  background: url("../img/topbar-bg.jpg") top center / auto 100% repeat-x;
  background-color:#0b0f19;
  width:100%;
}
.topbar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,12,22,.75), rgba(8,12,22,.35));
  pointer-events:none;
}
.topbar .container{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; min-height:200px;
}
/* Logo */
.brand .logo img{ height:80px; width:auto; display:block; }
/* Menu */
.nav{ display:flex; gap:22px; align-items:center; flex-wrap:nowrap; }

/* === MENU BUTTONS: keep size, change font weight + luminous blue background === */
.nav a{
  color:#ffffff;
  font-weight:600;
  padding:8px 12px;
  border-radius:10px;
  white-space:nowrap;
  background: linear-gradient(135deg, #0b66ff, #11b6ff);
  border:1px solid rgba(17,182,255,.35);
  box-shadow: 0 4px 10px rgba(17,182,255,.35);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav a.active,
.nav a:hover{
  background: linear-gradient(135deg, #074ccc, #0aa2ef);
  border-color: rgba(17,182,255,.55);
  box-shadow: 0 6px 16px rgba(17,182,255,.55), 0 0 6px rgba(17,182,255,.45) inset;
  transform: translateY(-1px);
}

/* ===== DESKTOP ADJUSTMENTS =====
   1) Reserve space for the ecosystem panel
   2) Stretch only the BANNER to cover that reserve
   (header remains centered – topbar padding is compensated within the header) */
@media (min-width:981px){
  /* Default content: prevents fixed panel from overlapping text */
  main.container.page-max,
  .footer .container{
    padding-right: var(--eco-reserve);
    box-sizing: border-box;
  }

  /* Banner also covers reserved area (no gap on the right) */
  .topbar{
    margin-right: calc(-1 * var(--eco-reserve));
    padding-right: var(--eco-reserve);
  }
}

/* ===== HERO ===== */
.hero{ padding:80px 20px; text-align:center; max-width:900px; margin:0 auto; }
.hero h1{ font-size:2.2rem; margin-bottom:12px; }
.hero p{ font-size:1.1rem; line-height:1.6; margin:0 auto 20px; max-width:700px; color:#d1d5db; }

/* Buttons */
.cta-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn{
  padding:10px 20px; border-radius:6px; font-size:1rem; cursor:pointer;
  background:#2563eb; color:#fff; transition:background .2s ease-in-out;
}
.btn:hover{ background:#1e40af; }
.btn.outline{ background:transparent; border:1px solid #2563eb; color:#2563eb; }
.btn.outline:hover{ background:#2563eb; color:#fff; }

/* ===== SECTIONS ===== */
.section{ margin:60px auto; text-align:center; max-width:800px; padding:0 20px; }
.section h2{ font-size:1.6rem; margin-bottom:12px; }
.section p{ font-size:1.05rem; line-height:1.6; max-width:700px; margin:0 auto; color:#e5e7eb; }

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid #1c243b;
  margin-top:40px; padding:20px 0;
  text-align:center; font-size:.9rem; color:#b8bfd4;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
  .home-steps{ grid-template-columns:1fr !important; }
  .footer-grid{ grid-template-columns:1fr !important; }
}

@media (max-width:980px){
  /* Keep full image on mobile */
  .topbar{
    min-height:140px;
    background: url("../img/topbar-bg.jpg") top center / auto 100% repeat-x;
    background-color:#0b0f19;
  }
  .topbar .container{ min-height:140px; padding:8px 10px; }
  .brand .logo img{ height:60px; }
  .nav{ flex-wrap:wrap; gap:8px 12px; justify-content:center; }
  .nav a{ padding:6px 10px; font-size:.92rem; }

  .hero{ padding:56px 14px; }
  .hero h1{ font-size:1.8rem; line-height:1.25; }
  .hero p{ font-size:1rem; }

  .section h2{ font-size:1.35rem; }
  .btn{ font-size:.95rem; padding:8px 16px; }
}

/* ================= TEAM PAGE ================= */
.page-team .container{ max-width:var(--page-max); }

/* Title */
.team-header{ text-align:center; margin-bottom:24px; }
.team-header h1{ font-size:2rem; margin:0 0 8px; }
.team-header p{ margin:0; color:#d1d5db; }

/* Fixed grid 2x2 */
.team-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(320px,1fr));
  gap:24px;
  justify-items:center;
  align-items:start;
}
@media (max-width:640px){ .team-grid{ grid-template-columns:1fr; } }

/* Card */
.member-card{
  width:100%; max-width:340px;
  background:rgba(12,16,28,.55);
  border:1px solid #1c243b; border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

/* Photo */
.member-photo{ width:100%; }
.member-photo img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:14px;
  border:1px solid #273352;
  background:#0c1324;
  image-rendering:auto;
}

/* Description */
.member-desc{
  width:100%;
  background:rgba(23,31,55,.65);
  border:1px solid #2a3a63;
  border-radius:10px;
  padding:10px 12px;
  font-size:.72rem;  line-height:1.28;
  color:#e6e8ef; text-align:left;

  min-height:80px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.member-desc strong{
  display:block;
  font-size:.84rem;
  font-weight:700;
  margin-bottom:2px;
}

/* Name */
.member-name{
  width:100%;
  background:rgba(28,39,70,.85);
  border:1px solid #3a4f86;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  font-size:.88rem;
  color:#f5f7ff;
  min-height:44px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Final note */
.page-note{
  margin-top:48px;
  background:#0e1526;
  border:1px solid #1e2a47;
  padding:14px 18px;
  border-radius:10px;
  color:#cbd5e1;
  font-size:.82rem;
  opacity:.9;
  max-width:900px;
  margin-left:auto; margin-right:auto;
}
.page-note--tiny{ font-size:.70rem; line-height:1.5; }
.page-note--wide{
  max-width:none;
  width:calc(100% + 40%);
  margin-left:-20%;
  margin-right:-20%;
}
@media (max-width:900px){
  .page-note--wide{ width:100%; margin-left:0; margin-right:0; }
}

/* ===== FOOTER PRO ===== */
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:22px; align-items:start; }
.footer-col{ text-align:left; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.footer-logo{ height:40px; width:auto; display:block; }
.footer-title{ font-size:1rem; font-weight:700; }
.footer-sub{ font-size:.9rem; color:#b8bfd4; }
.footer-section-title{ font-size:.95rem; font-weight:700; margin-bottom:8px; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:6px 0; }
.footer-links a{ color:#e6e8ef; text-decoration:none; border-bottom:1px dashed transparent; }
.footer-links a:hover{ border-bottom-color:#e6e8ef; }
.footer-disclaimer{ font-size:.9rem; color:#b8bfd4; line-height:1.45; }

/* ===== OLD TOKEN BANNER ===== */
.side-token{ display:none; }

/* ===== CONTACT PAGE ===== */
.page-contact .contact-card{
  background:rgba(12,16,28,.55);
  border:1px solid #1c243b;
  border-radius:14px;
  padding:20px;
  margin:20px auto;
  max-width:600px;
  text-align:left;
}
.page-contact .contact-form{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.page-contact .contact-form label{ font-size:1rem; font-weight:500; color:#d1d5db; }
.page-contact .contact-form input,
.page-contact .contact-form textarea,
.page-contact form input,
.page-contact form textarea{
  width:100%; border:1px solid #2a3a63; border-radius:8px;
  padding:10px; background:#0c1324; color:#e6e8ef; resize:vertical;
}
.page-contact .contact-form input:focus,
.page-contact .contact-form textarea:focus,
.page-contact form input:focus,
.page-contact form textarea:focus{ outline:none; border-color:#2563eb; }
.page-contact .contact-form button{ width:fit-content; align-self:flex-start; }
.page-contact h2{ margin-bottom:12px; font-size:1.3rem; color:#e6e8ef; }
.page-contact .btn{ padding:8px 16px; background:#2563eb; color:#fff; border:none; border-radius:8px; cursor:pointer; }
.page-contact .btn:hover{ background:#1e40af; }

/* ===== ABOUT – small disclaimer ===== */
.legal-disclaimer{
  max-width: 900px;
  margin: 28px auto 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #9aa3bd;
  text-align: left;
}

/* ==== HOME – “How it works” ==== */
.home-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:18px;
  margin-top:16px;
}
.home-steps .step{
  background: rgba(12,16,28,.55);
  border:1px solid #1c243b;
  border-radius:14px;
  padding:16px;
  text-align:center;
  box-shadow: 0 6px 14px rgba(0,0,0,.25) inset, 0 2px 10px rgba(0,0,0,.15);
}
.step-ico{ font-size:1.6rem; line-height:1; }
.step-title{ font-weight:700; margin-top:6px; }
.step-text{ color:#d1d5db; font-size:.95rem; }

/* ===== WHERE TO BUY (new page) ===== */
.buy-token-box{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  background: rgba(12,16,28,.55);
  border:1px solid #1c243b; border-radius:12px;
  padding:14px 16px; margin:18px auto; max-width:900px;
}
.buy-token-box .token-label{ display:block; font-size:.85rem; color:#b8bfd4; margin-bottom:4px; }
.buy-token-box code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9rem;
}
.token-actions{ display:flex; gap:8px; margin-top:8px; }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(28,39,70,.85); border:1px solid #2a3a63; font-size:.8rem;
}

.buy-grid{
  display:grid; grid-template-columns:repeat(2, minmax(240px,1fr));
  gap:18px; margin:18px auto; max-width:900px;
}
@media (max-width:700px){ .buy-grid{ grid-template-columns:1fr; } }

.buy-card{
  background: rgba(12,16,28,.55);
  border:1px solid #1c243b; border-radius:14px;
  padding:16px;
  text-align:left;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) inset, 0 2px 10px rgba(0,0,0,.12);
}
.buy-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.logo-circle{
  height:40px; width:40px; display:grid; place-items:center;
  border-radius:999px; background:linear-gradient(135deg,#0b66ff,#11b6ff);
  color:#fff; box-shadow:0 4px 10px rgba(17,182,255,.35);
}
.buy-card h3{ margin:0; font-size:1.05rem; }
.buy-card p{ margin:8px 0 12px; color:#d1d5db; }
.card-meta .meta{ font-size:.82rem; color:#9aa3bd; }

.btn.wide{ width:100%; text-align:center; }
.btn.small{ padding:6px 10px; font-size:.9rem; }

/* Converter */
.converter{
  margin:28px auto 0; max-width:900px; text-align:left;
  background: rgba(12,16,28,.55);
  border:1px solid #1c243b; border-radius:14px; padding:16px;
}
.converter h2{ margin:0 0 8px; font-size:1.2rem; }
.converter .muted{ color:#9aa3bd; }
.converter .tiny{ font-size:.78rem; }

.price-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; margin:12px 0; }
.price-item label{ display:block; font-weight:600; margin-bottom:6px; }
.price-item input{
  width:100%; border:1px solid #2a3a63; border-radius:10px;
  padding:10px; background:#0c1324; color:#e6e8ef; font-size:1rem;
}
.swap-eq{ font-weight:800; font-size:1.2rem; text-align:center; padding-bottom:8px; }

.price-info{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
.price-info #priceLabel{ font-weight:600; }
.manual-price{ display:flex; align-items:center; gap:6px; }
#manualPrice{
  width:220px; border:1px solid #2a3a63; border-radius:8px;
  padding:8px; background:#0c1324; color:#e6e8ef;
}

/* Harmonize new buttons with existing theme */
.buy-card .btn,
.buy-token-box .btn{
  background: linear-gradient(135deg, #0b66ff, #11b6ff);
  color:#fff; border:none; border-radius:10px;
  box-shadow: 0 4px 10px rgba(17, 182, 255, 0.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.buy-card .btn:hover,
.buy-token-box .btn:hover{
  background: linear-gradient(135deg, #074ccc, #0aa2ef);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17,182,255,.55), 0 0 6px rgba(17,182,255,.45) inset;
}
.buy-token-box .btn.outline{
  background:transparent; border:1px solid #11b6ff; color:#11b6ff;
}
.buy-token-box .btn.outline:hover{
  background:linear-gradient(135deg, rgba(11,102,255,.08), rgba(17,182,255,.12));
}

/* ====== DESBLOQUEAR LARGURA NA PÁGINA WHERE-TO-BUY (DESKTOP) ====== */
/* 1) Libertar o container-pai (.container.page-max e .page-max) APENAS nesta página */
@media (min-width: 1200px){
  body.page-where-to-buy main.container.page-max,
  body.page-where-to-buy .container.page-max,
  body.page-where-to-buy .page-max{
    max-width: none !important;
    width: 100% !important;
    padding-left: 16px;
    padding-right: 0 !important; /* remove eco-reserve */
  }

  /* 2) Remover o aperto do eco-reserve só aqui */
  body.page-where-to-buy main.container.page-max{ padding-right: 0 !important; }

  /* 3) A própria .section deixa de limitar */
  .page-where-to-buy .section{ max-width: none !important; }

  /* 4) Alargar e centrar os 3 blocos finais */
  .page-where-to-buy .converter,
  .page-where-to-buy .scs-chart,
  .page-where-to-buy .howto-title,
  .page-where-to-buy .howto,
  .page-where-to-buy .trade-notice{
    width: min(95vw, 1600px) !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 5) Mais altura para o gráfico em desktop */
  .page-where-to-buy .chart-frame iframe{ height: 880px !important; }
}

/* Intermédio (portáteis grandes) */
@media (min-width: 1000px) and (max-width: 1199px){
  body.page-where-to-buy main.container.page-max,
  body.page-where-to-buy .container.page-max,
  body.page-where-to-buy .page-max{
    max-width: none !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
  .page-where-to-buy .converter,
  .page-where-to-buy .scs-chart,
  .page-where-to-buy .howto-title,
  .page-where-to-buy .howto,
  .page-where-to-buy .trade-notice{
    width: min(94vw, 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}