:root{
  --bg:#0B0B0F;--fg:#EAEAF2;--muted:#B8B8C9;
  --yellow:#F6C453;--stroke:#1E2130;--glass:rgba(255,255,255,.06);
  --radius:16px;--shadow:0 12px 42px rgba(0,0,0,.45)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}

.header{position:sticky;top:0;z-index:10;background:linear-gradient(to bottom, rgba(11,11,15,.9), rgba(11,11,15,.1));backdrop-filter:blur(6px)}
.header .row{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;letter-spacing:.2px}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:999px;border:1px solid transparent}
.nav a:hover{border-color:var(--stroke);background:var(--glass)}

.hero{position:relative;min-height:92vh;display:flex;align-items:center}
/* IMPORTANT: path is relative to this CSS file at /assets/style.css */
.hero::before{content:'';position:absolute;inset:0;background:url('images/hero.jpg') center/cover no-repeat;filter:contrast(1.05) saturate(1.05)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 20%, rgba(0,0,0,.2), transparent), linear-gradient(180deg, rgba(11,11,15,.55) 0%, rgba(11,11,15,.8) 70%)}
.hero .content{position:relative;z-index:1}
.h1{font-size:clamp(38px,7vw,72px);line-height:1.02;margin:0 0 12px;font-weight:900}
.sub{color:var(--muted);font-size:clamp(14px,2.5vw,18px);margin:0 0 22px}
.badge{padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;background:var(--glass);color:var(--muted);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);background:var(--glass)}

.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--stroke);background:var(--glass);backdrop-filter:blur(6px);transition:transform .12s ease, background .2s}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(135deg,#FFD76A,#F6C453);color:#17130B;border-color:#CDA645;font-weight:800}

.icon{width:18px;height:18px;display:inline-block;vertical-align:middle}



#copyBtn{color:#FFFFFF}


/* --- Lighten hero overlay and move content lower --- */
.hero::after{
  background: radial-gradient(60% 60% at 30% 20%, rgba(0,0,0,.15), transparent),
              linear-gradient(180deg, rgba(11,11,15,.35) 0%, rgba(11,11,15,.60) 70%);
}
@media (min-width: 900px){
  .hero{ align-items: flex-end; min-height: 100vh; }
  .hero .content{ margin-bottom: clamp(10vh, 14vh, 18vh); }
}
@media (max-width: 720px){
  .hero{ align-items: center; }
  .hero .content{ margin-bottom: 0; }
}


/* About headings yellow as requested */
#about h2, #about h3, #about h4{ color: var(--yellow); }

/* CTA grid: left | center | right */
.cta{ display:grid; gap:12px; align-items:center; justify-content:center }
@media (min-width: 900px){
  .cta{ grid-template-columns: 1fr auto 1fr; }
  .cta-left, .cta-center, .cta-right{ display:flex; gap:12px; align-items:center; }
  .cta-left{ justify-content:flex-end }
  .cta-center{ justify-content:center }
  .cta-right{ justify-content:flex-start }
}
@media (max-width: 899px){
  .cta{ grid-template-columns: 1fr; }
  .cta-left, .cta-center, .cta-right{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
}

/* Keep Copy CA text white */
#copyBtn{ color:#FFFFFF }


/* Revert CTA to simple row */
.cta{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; align-items:center !important; justify-content:flex-start !important; }
.cta-left, .cta-center, .cta-right{ display:none !important; }
#copyBtn{ color:#FFFFFF; }


/* --- Mobile optimization pack (v11) --- */
.hero::before{ background-position:center center; background-size:cover; }
@media (max-width: 560px){
  .hero{ min-height: 92vh; }
  .hero::before{ background-image: url('images/hero-mobile.jpg') !important; background-position:center top; }
  .h1{ font-size: clamp(34px, 9vw, 44px); }
  .sub{ font-size: clamp(14px, 3.6vw, 16px); }
  .container{ padding: 16px; }
  .pill{ width: 100%; justify-content: space-between; }
  .cta{ display: flex; flex-wrap: wrap; gap: 10px; }
  .cta .btn{ flex: 1 1 100%; justify-content: center; padding: 14px 16px; }
  .header .row{ gap: 8px; }
  .nav{ gap: 10px; }
}
@media (min-width: 561px) and (max-width: 900px){
  .cta{ display: flex; flex-wrap: wrap; gap: 12px; }
  .cta .btn{ flex: 1 1 calc(50% - 12px); justify-content: center; }
}
#copyBtn{ color:#FFFFFF; }


/* --- Mobile header + badge fixes (v12) --- */
@media (max-width: 560px){
  .header{ padding: 8px 0; }
  .header .row{ align-items:center; justify-content:space-between; }
  .brand{ font-size: 16px; line-height:1; max-width: 46vw; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav{ display:flex; flex-wrap: nowrap !important; gap: 12px; font-size: 14px;
        overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ padding:6px 10px; display:inline-block; border-radius:999px; }
  /* Hide the small badge under the title on phones to avoid covering the face */
  .badge{ display:none !important; }
}


/* --- Mobile header title + CTA layout tweaks (v13) --- */
@media (max-width: 560px){
  /* Brand follows the same visual rhythm as nav items (no ellipsis) */
  .brand{
    font-size:14px; font-weight:800;
    max-width:none; overflow:visible; text-overflow:initial; white-space:nowrap;
  }
  .header .row{
    justify-content:flex-start; gap:14px;
    overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  }

  /* Compact CTA: Join (full width), then 2x2 grid for the rest */
  .cta{ display:grid !important; grid-template-columns: 1fr 1fr; gap:10px; }
  .cta .btn{ flex:unset !important; justify-content:center; }
  .cta .btn:nth-child(1){ grid-column: 1 / -1; } /* Join Community spans both columns */
}


/* --- Mobile hero push-down (v14) --- */
@media (max-width: 560px){
  .hero{ min-height: 100vh; }
  .hero .content{ margin-top: clamp(14vh, 18vh, 24vh); margin-bottom: 2vh; }
}


/* --- v15: Lock horizontal scroll + hero stability --- */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
*{ box-sizing:border-box; }
.wrapper, .header, .hero, .container, .section, .footer, .cta{
  max-width:100%;
  overflow-x: clip;
}
img, svg, video{ max-width:100%; height:auto; }
.hero{ position:relative; overflow:hidden; }
.hero::before{
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center top !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}


/* --- v16: Mobile hardening (CTAs + CA + no horizontal scroll) --- */

/* Never allow horizontal scroll */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Respect iOS safe areas (notches) */
@supports (padding: max(0px)) {
  .container { 
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Elastic CTA grid that adapts to ANY phone width */
:root { --cta-min: 160px; --tap: 54px; }          /* base values */
@media (max-width: 900px) {
  .cta {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--cta-min), 1fr));
    gap: 12px;
  }
  .cta .btn {
    width: 100%;
    min-height: var(--tap);
    justify-content: center;
  }
  /* Keep "Join Community" full width */
  .cta .btn.primary { grid-column: 1 / -1; }
}
/* Very narrow phones */
@media (max-width: 360px) {
  :root { --cta-min: 140px; }
}

/* CA pill: single line, no overflow */
.pill {
  max-width: 100%;
  display: flex; align-items: center; gap: .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(12px, 3.6vw, 14px);
}
.pill * { flex: 0 0 auto; }
.pill code, .pill .addr, .pill span { white-space: nowrap; }

/* Subtle right fade for very long addresses in iOS/WebKit */
@supports (-webkit-mask-image: linear-gradient(#000,#000)) {
  .pill {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
}

/* Hero background stability */
.hero { position: relative; overflow: hidden; }
.hero::before {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  transform: translateZ(0); -webkit-transform: translateZ(0);
  will-change: transform;
}


/* --- v17: iPhone 13 header + CA pill conditional fade --- */
@media (max-width: 420px){
  .header{ padding: 8px 0; }
  .brand{ font-size: 14px; font-weight: 800; }
  .header .row{ display:flex; align-items:center; gap:12px; }
  .nav{
    display:flex; gap:12px;
    overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    font-size:14px;
    padding-right: max(12px, env(safe-area-inset-right));
    scroll-snap-type: x proximity;
  }
  .nav a{ scroll-snap-align:start; }
}

/* CA pill: default without mask; only fade when .pill--fade is present */
.pill{ -webkit-mask-image:none !important; mask-image:none !important; }
.pill--fade{
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent) !important;
          mask-image: linear-gradient(90deg, #000 85%, transparent) !important;
}


/* --- v18: Scrollable CA pill with edge hints and touch override --- */
.pill{
  max-width:100%;
  display:flex; align-items:center; gap:.6rem;
  white-space:nowrap;
  overflow-x:auto; overflow-y:hidden;
  text-overflow:clip;                /* we scroll instead of ellipsis */
  -webkit-overflow-scrolling:touch;
  touch-action:auto;                 /* allow horizontal pan inside pill */
  overscroll-behavior-x:contain;     /* avoid bouncing the page */
  scrollbar-width:none;              /* Firefox */
}
.pill::-webkit-scrollbar{ display:none; } /* WebKit/iOS */

/* Edge fade hints only when not at the ends */
.pill{ position:relative; }
.pill::after, .pill::before{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
}
.pill::after{ right:0; background:linear-gradient(90deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }
.pill::before{ left:0; background:linear-gradient(270deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }
.pill.is-start::before{ opacity:0; }
.pill.is-end::after{ opacity:0; }

/* Ensure the address text uses consistent metrics */
.pill code, .pill .addr{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em; font-variant-ligatures:none; font-feature-settings:"liga" 0;
}


/* --- v19: CA box horizontal scroll across devices --- */
.pill, .ca, .ca-box, #ca, #ca-box {
  max-width: 100%;
  display: flex; align-items: center; gap: .6rem;
  white-space: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;                /* allow horizontal pan inside */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  position: relative;
}
.pill::-webkit-scrollbar, .ca::-webkit-scrollbar, .ca-box::-webkit-scrollbar, #ca::-webkit-scrollbar, #ca-box::-webkit-scrollbar { display: none; }

/* Edge fades as hints */
.pill::after, .pill::before,
.ca::after, .ca::before,
.ca-box::after, .ca-box::before,
#ca::after, #ca::before,
#ca-box::after, #ca-box::before {
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
}
.pill::after, .ca::after, .ca-box::after, #ca::after, #ca-box::after { right:0; background:linear-gradient(90deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }
.pill::before, .ca::before, .ca-box::before, #ca::before, #ca-box::before { left:0; background:linear-gradient(270deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }

/* Hide fades when at the edges */
.pill.is-start::before, .ca.is-start::before, .ca-box.is-start::before, #ca.is-start::before, #ca-box.is-start::before { opacity:0; }
.pill.is-end::after,   .ca.is-end::after,   .ca-box.is-end::after,   #ca.is-end::after,   #ca-box.is-end::after { opacity:0; }

/* Inner address text: keep mono & unbreakable */
.pill code, .pill .addr, 
.ca code, .ca .addr,
.ca-box code, .ca-box .addr,
#ca code, #ca .addr,
#ca-box code, #ca-box .addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .02em;
  font-variant-ligatures: none; font-feature-settings: "liga" 0;
  white-space: nowrap;
}


/* --- v20: CA font-size scaling for phones smaller than Pro Max (<=428px) --- */
@media (max-width: 428px){
  /* slightly smaller CTAs when needed */
  :root{ --cta-min: 150px; }
  /* CA line: shrink type, keep mono, avoid fade overlays on small screens */
  .pill, .ca, .ca-box, #ca, #ca-box{
    font-size: clamp(11px, 3.2vw, 13px);
  }
  .pill::before, .pill::after,
  .ca::before, .ca::after,
  .ca-box::before, .ca-box::after,
  #ca::before, #ca::after,
  #ca-box::before, #ca-box::after{
    display: none !important; /* remove dark fades that can hide the tail */
  }
}
@media (max-width: 390px){
  :root{ --cta-min: 140px; }
  .pill, .ca, .ca-box, #ca, #ca-box{
    font-size: clamp(10px, 3.4vw, 12px);
    letter-spacing: .01em;
  }
}

/* === v21 MOBILE-ONLY FIXES (não afeta desktop) ========================= */

@media (max-width: 428px){
  html, body { overflow-x: hidden; }
  .header .container { gap: 12px; }
  .nav{
    display: flex; gap: 14px;
    overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-right: max(12px, env(safe-area-inset-right));
    scroll-snap-type: x proximity;
  }
  .nav a{ scroll-snap-align: start; }
  .hero .content{ margin-top: clamp(12vh, 18vh, 22vh); }

  .pill{
    position: relative;
    max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    font-size: clamp(11px, 3.2vw, 13px);
  }
  .pill::-webkit-scrollbar{ display: none; }
  .pill::before, .pill::after{
    content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none;
  }
  .pill::before{ left:0;  background:linear-gradient(270deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }
  .pill::after { right:0; background:linear-gradient( 90deg, rgba(11,11,15,0), rgba(11,11,15,.55)); }
  .pill.is-start::before{ opacity:0; }
  .pill.is-end::after  { opacity:0; }

  .cta{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  .cta .btn{ width:100%; min-height:54px; justify-content:center; }
  .cta .btn.primary{ grid-column: 1 / -1; }
}

@media (max-width: 390px){
  .pill{ font-size: clamp(10px, 3.4vw, 12px); letter-spacing:.01em; }
  .cta{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}


/* === v22 DESKTOP RE-CENTER (does not affect mobile) ===================== */
@media (min-width: 1025px){
  /* Constrain and center the global content width */
  .container, .container-lg, .content, .section .container, .about .container, .header .container {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Header bar: keep items visually centered and evenly spaced */
  .header .container{
    display:flex;
    align-items:center;
    justify-content:center;   /* center the group for a balanced look */
    gap: 32px;
  }
  .brand{ font-weight: 800; }
  .nav{
    display:flex;
    gap: 24px;
    overflow: visible;   /* remove mobile scroll behavior on desktop */
    white-space: normal;
  }

  /* About section text block nicely centered under the main width */
  .about, .about .container, .section.about .container{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === v23: Desktop header from v15 (scoped to desktop only) === */
@media (min-width: 1025px){
.header{position:sticky;top:0;z-index:10;background:linear-gradient(to bottom, rgba(11,11,15,.9), rgba(11,11,15,.1));backdrop-filter:blur(6px)}

.header .row{display:flex;align-items:center;justify-content:space-between}

.brand{font-weight:900;letter-spacing:.2px}

.nav{display:flex;gap:16px;flex-wrap:wrap}

.nav a{padding:8px 12px;border-radius:999px;border:1px solid transparent}

.nav a:hover{border-color:var(--stroke);background:var(--glass)}

  .header .row{ gap: 8px; }

  .nav{ gap: 10px; }



/* --- Mobile header + badge fixes (v12) --- */
@media (max-width: 560px){
  .header{ padding: 8px 0; }

  .header .row{ align-items:center; justify-content:space-between; }

  .brand{ font-size: 16px; line-height:1; max-width: 46vw; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

  .nav{ display:flex; flex-wrap: nowrap !important; gap: 12px; font-size: 14px;
        overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

  .nav::-webkit-scrollbar{ display:none; }

  .nav a{ padding:6px 10px; display:inline-block; border-radius:999px; }



/* --- Mobile header title + CTA layout tweaks (v13) --- */
@media (max-width: 560px){
  /* Brand follows the same visual rhythm as nav items (no ellipsis) */
  .brand{
    font-size:14px; font-weight:800;
    max-width:none; overflow:visible; text-overflow:initial; white-space:nowrap;
  }

  .header .row{
    justify-content:flex-start; gap:14px;
    overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  }

.wrapper, .header, .hero, .container, .section, .footer, .cta{
  max-width:100%;
  overflow-x: clip;
}
}