/* ===================== RESET ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif; 
}

body {
  background-color: #0C0B06;
  color: white;
  overflow-x: hidden;
}


/* ===================== GOLD BACKGROUND ===================== */
.gold-background {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: url("./images/image82.png") no-repeat center top / 100% auto;
  background-position: top center;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 380px;
}
.gold-background::before,
.gold-background::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
  z-index: 1;
}
.gold-background::before {
  top: 0;
  background: linear-gradient(to bottom, #0C0B06 0%, rgba(12,11,6,0) 100%);
}
.gold-background::after {
  bottom: 0;
  background: linear-gradient(to top, #0C0B06 0%, rgba(12,11,6,0) 100%);
}

/* ===================== WHO WE ARE ===================== */
.about {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;                /* stay side-by-side always */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  gap: clamp(10px, 3vw, 60px);
  padding: clamp(40px, 5vw, 100px);
  overflow: visible;                /* never clip the images */
  box-sizing: border-box;
}

/* LEFT SIDE */
.about-left {
  flex: 1 1 50%;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 300px;
  overflow: visible;
}

.about-left img {
  width: 100%;
  max-width: clamp(250px, 40vw, 900px);
  height: auto;
  display: block;
  transform: translateX(clamp(-20px, -4vw, -60px));
  transition: transform 1.2s ease-in-out;
  will-change: transform;
}

/* RIGHT SIDE */
.about-right {
  flex: 1 1 50%;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 260px;
}

.about-right img,
.about-right .text-box {
  width: 100%;
  max-width: clamp(250px, 35vw, 600px);
  height: auto;
  display: block;
  transform: translateX(clamp(20px, 4vw, 60px));
  transition: transform 1.2s ease-in-out;
  will-change: transform;
}

/* SCROLL-IN STATE */
.about-left.show img {
  transform: translateX(clamp(-10px, -2vw, -30px));
}
.about-right.show img,
.about-right.show .text-box {
  transform: translateX(clamp(-20px, -3vw, -40px));
}

/* ✅ RESPONSIVE SCALING — keep side-by-side */
@media (max-width: 1024px) {
  .about {
    gap: clamp(5px, 2vw, 20px);
    padding: clamp(20px, 4vw, 60px);
  }
  .about-left img {
    max-width: clamp(200px, 40vw, 600px);
    transform: translateX(clamp(-10px, -2vw, -30px));
  }
  .about-right img,
  .about-right .text-box {
    max-width: clamp(180px, 35vw, 480px);
    transform: translateX(clamp(10px, 2vw, 30px));
  }
}

/* ✅ TINY SCREEN SAFEGUARD */
@media (max-width: 600px) {
  .about {
    overflow-x: auto; /* allow gentle horizontal scroll if needed */
  }
  .about-left img,
  .about-right img,
  .about-right .text-box {
    max-width: 80vw;
    transform: translateX(0);
  }
  .about::-webkit-scrollbar { display: none; }
}

/* ===================== WHY US ===================== */
.whyus {
  position: relative;
  text-align: center;
  padding: 120px 0 1px;
  background: transparent;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 3;
}

.section-title {
  color: #FFD586;
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 60px;
  letter-spacing: 1px;
}

/* Layout container */
.whyus-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* Row layout */
.whyus-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* ✅ Make top 2 images wider */
.whyus-row.top img {
  width: 520px; /* Wider to span the same total width as bottom 3 */
  height: auto;
}

/* ✅ Bottom 3 images standard width */
.whyus-row.bottom img {
  width: 340px;
  height: auto;
}

/* Hover glow */
.whyus-row img {
  border-radius: 16px;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 0 25px rgba(255, 215, 130, 0.25));
}

.whyus-row img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 45px rgba(255, 215, 130, 0.7));
}

/* Responsive */
@media (max-width: 1280px) {
  .whyus-row.top img { width: 440px; }
  .whyus-row.bottom img { width: 300px; }
}

/* phones & tablets: keep 2-up grid */
@media (max-width: 1024px){
  .whyus-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* make each img a flex item that fills half the row */
  .whyus-row img{
    flex: 1 1 calc(50% - 16px);
    max-width: none;         /* don't clamp to 280px */
    height: auto;
  }
}

@media (max-width: 768px){
  .whyus-row{
    gap: clamp(10px, 2vw, 18px);     /* smaller gap */
    justify-content: center;         /* keep group centered */
  }
  .whyus-row img{
    width: clamp(200px, 42vw, 260px); /* shrink with viewport */
  }
  .section-title{
    font-size: 36px;
    margin-bottom: 28px;
  }
}


/* ultra-small devices: allow horizontal pan instead of stacking */
@media (max-width: 360px){
  .whyus-row{
    flex-wrap: wrap;
    overflow-x: auto;
    gap: 12px;
  }
  .whyus-row img{
    flex: 0 0 80vw;          /* wide cards but still side-by-side via scroll */
  }
  .whyus-row::-webkit-scrollbar{ display:none; }
}

/* ===================== WHAT WE OFFER ===================== */
.offer {
  position: relative;
  text-align: left;
  padding: 160px 160px;
  background: transparent;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 3;
}

.offer .section-title {
  text-align: left;
  margin-bottom: 20px;
  transform: translate(-80px, 245px); /* 👈 moved 80px left, 245px down */
}

.offer .section-subtitle {
  font-size: 32px;
  color: #fff;
  margin-bottom: 60px;
  opacity: 0.85;
  transform: translate(-80px, 245px); /* 👈 moved 80px left, 245px down */
}

.offer-container {
  display: flex;
  justify-content: flex-start; /* 👈 align items toward the left */
  align-items: center;
  
}

/* LEFT SIDE (phone + coins image) */
.offer-left img {
  width: 580px;
  height: auto;
  transform: translate(-165px, 200px); /* 👈 left 60px, down 200px */
}

/* RIGHT SIDE (2x2 grid of flippable cards) */
.offer-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 60px;
    transform: translateX(-120px); /* 👈 shift the cards 100px left */

}

/* FLIP CARD CONTAINER */ 
.flip-card {
  width: 360px;
  height: 260px;
  perspective: 1000px;
  position: relative;
}

/* FLIP INNER WRAPPER */
.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* HOVER EFFECT */
.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* FRONT & BACK FACES */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255, 215, 130, 0.25);
  transition: transform 0.3s ease;
}

.flip-front img,
.flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BACK FACE */
.flip-back {
  transform: rotateY(180deg);
}

/* Hover Glow */
.flip-card:hover .flip-front,
.flip-card:hover .flip-back {
  box-shadow: 0 0 50px rgba(255, 215, 130, 0.7);
}

/* FLOAT ANIMATION */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1280px) {
  .offer { padding: 100px 80px; }
  .offer-left img { width: 480px; }
  .flip-card { width: 220px; height: 220px; }
}

@media (max-width: 1024px) {
  .offer-container {
    flex-direction: column;
    text-align: center;
    gap: 80px;
  }
  .offer-left img { width: 400px; margin: 0 auto; }
  .offer-right {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
}

@media (max-width: 768px) {
  .offer { padding: 80px 30px; }
  .offer-right { grid-template-columns: 1fr; gap: 30px; }
  .flip-card { width: 220px; height: 220px; margin: 0 auto; }
  .section-title { text-align: center; }
  .section-subtitle { text-align: center; margin-left: 0; }
}


/* ===================== PROVIDERS ===================== */
.providers {
  padding:140px 100px;
  text-align:center;
  background:radial-gradient(ellipse at top,rgba(255,208,112,.03)0%,transparent 80%);
}
.section-subtext {
  color:#ddd;
  font-size:18px;
  max-width:850px;
  margin:0 auto 60px;
  line-height:1.6;
  text-align:center;
}
.providers-banner {
  display:flex;
  justify-content:center;
}
.providers-banner img {
  width:100%;
  max-width:1100px;
  opacity:.9;
  transition:.3s ease;
}
.providers-banner img:hover {
  opacity:1;
  transform:scale(1.01);
}

/* ===================== ACHIEVEMENT ===================== */
.achievement {
  padding:140px 100px;
  text-align:center;
  background:radial-gradient(ellipse at center,rgba(255,215,130,.04)0%,transparent 80%);
}
.achievement-banner {
  display:flex;
  justify-content:center;
}
.achievement-banner img {
  width:100%;
  max-width:1100px;
  opacity:.9;
  transition:.3s ease;
}
.achievement-banner img:hover {
  opacity:1;
  transform:scale(1.01);
}

/* ===================== LICENSED ===================== */
.licensed {
  padding:140px 100px;
  text-align:center;
  background:radial-gradient(ellipse at bottom,rgba(255,208,112,.03)0%,transparent 90%);
}
.licensed-banner {
  display:flex;
  justify-content:center;
}
.licensed-banner img {
  width:100%;
  max-width:1000px;
  opacity:.9;
  transition:.3s ease;
}
.licensed-banner img:hover {
  opacity:1;
  transform:scale(1.01);
}

/* ===================== CRYPTO PREMIER ===================== */
.crypto-premier {
  background:#0C0B06;
  color:white;
  text-align:center;
  padding:160px 100px;
  border-top:1px solid rgba(255,215,130,.2);
}
.crypto-container {
  max-width:1100px;
  margin:0 auto;
  padding:80px 60px;
  border:1px solid rgba(255,215,130,.2);
  border-radius:10px;
  background:rgba(20,18,14,.9);
  box-shadow:0 0 40px rgba(255,200,100,.1);
}
.crypto-title {
  font-size:44px;
  font-weight:900;
  color:#FFD586;
  text-transform:uppercase;
  line-height:1.3;
  margin-bottom:20px;
}
.crypto-subtext {
  font-size:18px;
  color:#ddd;
  margin-bottom:40px;
}
.gold-btn {
  background:linear-gradient(90deg,#FFD890 3%,#BE8A4E 52%,#FAD9AF 69%,#C29E71 85%);
  border:none;
  border-radius:30px;
  padding:15px 50px;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
  color:#0C0B06;
  cursor:pointer;
  margin-bottom:60px;
  transition:.3s ease;
}
.gold-btn:hover {
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(255,215,130,.6);
}
.crypto-content {
  text-align:left;
  color:#e8e8e8;
  font-size:16px;
  line-height:1.8;
}
.crypto-content h3 {
  color:#FFD586;
  font-size:20px;
  margin:40px 0 10px;
}
.crypto-content ul {
  margin-left:20px;
  list-style:disc;
}
.crypto-content ul li { margin-bottom:8px; }

/* ===================== SIGNUP + FOOTER ===================== */
.signup-section {
  text-align:center;
  background:#0C0B06;
  padding:120px 0 80px;
}
.signup-btn {
  background:linear-gradient(90deg,#FFD890 3%,#BE8A4E 52%,#FAD9AF 69%,#C29E71 85%);
  border:none;
  border-radius:20px;
  padding:18px 80px;
  font-size:22px;
  font-weight:900;
  text-transform:uppercase;
  color:#0C0B06;
  cursor:pointer;
  transition:.3s ease;
}
.signup-btn:hover {
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(255,215,130,.6);
}
footer {
  background:#0B0A07;
  border-top:2px solid #C29E71;
  padding:30px 100px;
  display:flex;
  justify-content:center;
}
.footer-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:1100px;
}
.copyright { color:#ddd; font-size:16px; }
.socials {
  display:flex;
  align-items:center;
  gap:12px;
}
.socials-img {
  width:190px;
  opacity:.9;
  transition:.3s ease;
}
.socials-img:hover {
  opacity:1;
  transform:scale(1.03);
}

/* ===================== WRAPPER / GLOBAL ===================== */
.page-wrapper {
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background-color:#0C0B06;
  position:relative;
  overflow-x:hidden;
}
.page-wrapper::before {
  content:"";
  position:absolute;
  inset:0;
  background:url("./images/image82.png") center top / cover no-repeat;
  opacity:.12;
  z-index:0;
  pointer-events:none;
}
.page-wrapper section {
  position:relative;
  z-index:2;
}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */
@media (max-width:1280px){
  .about, .whyus, .offer { padding: 100px 80px; }
}
@media (max-width:1024px){
  .gold-background { height:auto; background-size:cover; }
  .whyus, .offer { padding:80px 40px; text-align:center; }
  .offer-container { flex-direction:column; gap:60px; }
  .offer-left img { width:400px; }
  .flip-card { width:220px; height:220px; }
  .providers, .achievement, .licensed, .crypto-premier {
    padding:100px 40px;
  }
}
@media (max-width:768px){
  .section-title { font-size:36px; }
  .whyus, .offer { padding:60px 30px; }
  .offer-right { grid-template-columns:1fr; gap:30px; }
  footer { flex-direction:column; text-align:center; padding:40px 20px; }
  .footer-container { flex-direction:column; gap:20px; }
  .socials { flex-direction:column; }
  .socials-img { width:150px; }
}
/* ===================== SCROLL-IN ANIMATIONS ===================== */

/* Initial hidden state */
.hidden-left,
.hidden-right {
  opacity: 0;
  transition: all 1.5s ease-out;
}

/* Hidden start positions */
.hidden-left {
  transform: translateX(-400px);
}

.hidden-right {
  transform: translateX(200px);
}

/* When visible on scroll */
.hidden-left.show {
  opacity: 1;
  transform: translateX(-40px); /* 👈 move slightly inward */
}

.hidden-right.show {
  opacity: 1;
  transform: translateX(-180px); /* 👈 overlap into left image */
}

img {
  background: transparent;
}



/* ========= GLOBAL: let replaced elements actually shrink ========= */
img { max-width: 100%; height: auto; display: block; }
.about > *, .offer-container > *, .whyus-row > * { min-width: 0; }

/* ========= HERO tiny tweaks ========= */
.logo { width: clamp(160px, 20vw, 300px); }

/* ========= WHY US – two big (top) + three small (bottom) ========= */
/* Remove old width:520px / 340px rules and use flexible basis instead */
.whyus-row { display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(12px,2vw,28px); }
.whyus-row img { border-radius:16px; max-width:100%; min-width:0; }

.whyus-row.top img    { flex: 0 1 clamp(420px, 42vw, 560px); }   /* big cards */
.whyus-row.bottom img { flex: 0 1 clamp(220px, 26vw, 360px); }   /* small cards */

@media (max-width: 1024px) {
  .whyus-row.top img    { flex: 1 1 calc(50% - 16px); max-width: calc(50% - 16px); }
  .whyus-row.bottom img { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
}
@media (max-width: 768px) {
  .whyus-row.top img,
  .whyus-row.bottom img { flex: 1 1 calc(50% - 14px); max-width: calc(50% - 14px); }
}
@media (max-width: 600px) {
  .whyus-row.top img,
  .whyus-row.bottom img { flex: 1 1 100%; max-width: 100%; }
}

/* ========= ABOUT (you were already responsive; keep the behavior) ========= */
/* No change needed here; your clamp() transforms/widths are good. */

/* ========= WHAT WE OFFER ========= */
/* Left big illustration */
.offer-left img {
  width: clamp(260px, 36vw, 580px);
  height: auto;
  transform: translate(-8vw, clamp(40px, 12vw, 200px));
}

/* Right grid: make flip-card size responsive; keep 2x2 on desktop */
.offer-right { 
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 60px);
  transform: translateX(clamp(-60px, -8vw, -120px));
}

/* keep a ~16:11 ratio; scale with viewport */
.flip-card {
  width: clamp(200px, 28vw, 360px);
  height: calc(clamp(200px, 28vw, 360px) * 0.72);
}
@media (max-width: 1024px) {
  .offer-container { flex-direction: column; gap: clamp(30px, 6vw, 80px); text-align: center; }
  .offer-right { transform: none; }
}
@media (max-width: 768px) {
  .offer-right { grid-template-columns: 1fr; }
}

/* ========= BANNERS (providers / achievement / licensed) ========= */
.providers-banner img,
.achievement-banner img,
.licensed-banner img {
  width: min(90vw, 1100px);
  max-width: 100%;
}

/* ========= FOOTER socials image ========= */
.socials-img { width: clamp(120px, 18vw, 190px); }



/* === WHY US — compact grid that never stacks === */
:root{
  --why-gap: clamp(8px, 1.6vw, 22px);   /* tighter gap */
  --why-max: 1100px;                    /* max width of the gallery */
}

.whyus{
  text-align:center;
  padding: clamp(40px, 7vw, 120px) 0 0;
}

/* 6-column grid: big = span 3, small = span 2 */
.whyus-gallery{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: var(--why-gap);
  width: min(96vw, var(--why-max));
  margin-inline:auto;
  justify-items:center;
  align-items:center;
}

.whyus-gallery img{
  width: 100%;
  height: auto;              /* images shrink with columns */
  border-radius: 16px;
  filter: drop-shadow(0 0 25px rgba(255,215,130,.25));
  transition: transform .35s ease, filter .35s ease;
}
.whyus-gallery img:hover{
  transform: scale(1.04);
  filter: drop-shadow(0 0 45px rgba(255,215,130,.7));
}

/* Spans control the layout; no media queries needed */
.whyus-gallery .big   { grid-column: span 3; }
.whyus-gallery .small { grid-column: span 2; }

/* Optional: if the cards get too tall on tiny screens, reduce vertical gap a bit more */
@media (max-width: 420px){
  .whyus-gallery{ gap: 6px; }
}











/* === WHAT WE OFFER — 2 columns always, aligned, responsive === */
:root{
  --offer-max: 1200px;               /* whole block max width */
  --offer-pad-y: clamp(40px, 8vw, 160px);
  --offer-gutter-x: clamp(12px, 5vw, 160px);

  --offer-col-gap: clamp(12px, 4vw, 48px);    /* space between left & right columns */
  --offer-card-gap: clamp(8px, 2.4vw, 20px);  /* space between the 4 cards */

  --offer-card-ratio: 16/12;          /* card aspect ratio */
  --offer-title-fs: clamp(20px, 3.4vw, 36px);
  --offer-sub-fs:   clamp(16px, 2.6vw, 28px);
}

/* container padding and width */
.offer{
  padding: var(--offer-pad-y) var(--offer-gutter-x);
}
.offer-container{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;  /* left | right */
  align-items: start;
  column-gap: var(--offer-col-gap);
  max-width: var(--offer-max);
  margin: 0 auto;
}
.offer-container > *{ min-width: 0; } /* prevent overflow from grid items */

/* align the headings to the same left edge as the grid */
.offer .section-title,
.offer .section-subtitle{
  transform: none !important;   /* kill old offsets */
  margin-left: 0 !important;
  left: auto !important; top: auto !important;
  text-align: left;
}
.offer .section-title{
  font-size: var(--offer-title-fs);
  margin: 0 0 clamp(6px, 1.6vw, 12px);
}
.offer .section-subtitle{
  font-size: var(--offer-sub-fs);
  margin: 0 0 clamp(18px, 3.5vw, 28px);
  color: #fff;
  opacity: .9;
}

/* LEFT column (phone + coins image) */
.offer-left{ align-self: start; }
.offer-left img{
  width: 100%;
  max-width: clamp(180px, 34vw, 560px);
  height: auto;
  display: block;
  transform: none !important;    /* kill legacy shift */
  margin: 0;
}

/* RIGHT column (2×2 flip cards) — never stacks */
.offer-right{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: var(--offer-card-gap) !important;
  align-content: start;
  transform: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Flip card sizing & animation */
.flip-card{
  position: relative;
  width: 100% !important;
  aspect-ratio: var(--offer-card-ratio);   /* responsive height */
  height: auto;
  perspective: 1000px;
  border-radius: 18px;
}
.flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4,.2,.2,1);
}
.flip-card:hover .flip-inner{ transform: rotateY(180deg); }

.flip-front, .flip-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(255,215,130,.25);
}
.flip-back{ transform: rotateY(180deg); }

.flip-front img,
.flip-back img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tighten gaps on very small screens but keep 2 columns */
@media (max-width: 480px){
  :root{
    --offer-col-gap: 10px;
    --offer-card-gap: 6px;
  }
  .offer .section-title{ font-size: clamp(18px, 5.6vw, 28px); }
  .offer .section-subtitle{ font-size: clamp(14px, 4.8vw, 20px); }
}










/* === WHO WE ARE — exact alignment + scalable === */
:root{
  --about-max: 1260px;                  /* container max width */
  --about-gap: clamp(20px, 5vw, 80px);  /* column gap */
}

/* 2-column grid, larger left side */
.about{
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: center;
  gap: var(--about-gap);
  width: min(96vw, var(--about-max));
  margin: 0 auto;
  padding: clamp(10px, 4vw, 40px) 0;
  overflow: visible;
}
.about > *{ min-width: 0; }

/* LEFT image – big */
.about-left{ justify-self: start; }
.about-left img{
  width: clamp(420px, 52vw, 820px);
  height: auto;
  transform: none !important;          /* kill old shifts */
}

/* RIGHT card – a bit smaller */
.about-right{ justify-self: end; }
.about-right img{
  width: clamp(420px, 40vw, 640px);
  height: auto;
  transform: none !important;
  filter: drop-shadow(0 0 24px rgba(255,215,130,.25));
}

/* Tablet shrink, keep side-by-side */
@media (max-width: 1024px){
  .about{ grid-template-columns: 1.1fr 0.9fr !important; }
  .about-left img{ width: clamp(320px, 48vw, 600px); }
  .about-right img{ width: clamp(300px, 44vw, 520px); }
}

/* Phone: still two columns, just smaller */
@media (max-width: 600px){
  .about{ grid-template-columns: 1fr 1fr !important; gap: clamp(12px, 2.5vw, 20px); }
  .about-left img, .about-right img{ width: clamp(220px, 46vw, 380px); }
}

/* Ultra-small safety: allow gentle pan if needed instead of stacking */
@media (max-width: 360px){
  .about{ overflow-x: auto; padding-bottom: 4px; }
  .about::-webkit-scrollbar{ display: none; }
}

/* ===== Animation safe-gate: visible by default; animate only when JS adds .js ===== */
.hidden-left, .hidden-right{ opacity: 1; transform: none; transition: transform 1s ease, opacity 1s ease; }
.js .hidden-left, .js .hidden-right{ opacity: 0; }
.js .hidden-left{ transform: translateX(-4vw); }
.js .hidden-right{ transform: translateX(4vw); }
.js .hidden-left.show, .js .hidden-right.show{ opacity: 1; transform: none; }
/* Fade only the overlapped strip on the RIGHT side of the left art */
:root{
  /* where the solid part ends before the fade starts */
  --about-fade-solid: 70%;   /* tweak 60–75% to taste */
}

/* ensure positioning context (no layout change) */
.about-left{ position: relative; }

.about-left img{
  /* mask = visible (black) → transparent on the right */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--about-fade-solid),
    rgba(0,0,0,.6) calc(var(--about-fade-solid) + 8%),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--about-fade-solid),
    rgba(0,0,0,.6) calc(var(--about-fade-solid) + 8%),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Nudge the fade a bit earlier on smaller screens (since things are tighter) */
@media (max-width: 1024px){
  .about-left img{ --about-fade-solid: 64%; }
}
@media (max-width: 600px){
  .about-left img{ --about-fade-solid: 58%; }
}


/* Fade the RIGHT side of the left image in WHAT WE OFFER */
:root{
  /* where solid art ends and the fade begins */
  --offer-fade-solid: 60%;   /* push lower = fade earlier */
  --offer-fade-soft: 80%;    /* how long the fade runs */
}

.offer-left { position: relative; }

.offer-left img{
  /* visible (black) → transparent on the right */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--offer-fade-solid),
    rgba(0,0,0,.65) var(--offer-fade-soft),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--offer-fade-solid),
    rgba(0,0,0,.65) var(--offer-fade-soft),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* slightly stronger fade on big desktops */
@media (min-width: 1280px){
  .offer-left img{
    --offer-fade-solid: 52%;
    --offer-fade-soft: 72%;
  }
}

/* a bit gentler on tablets/phones (still 2 cols if you kept that) */
@media (max-width: 1024px){
  .offer-left img{
    --offer-fade-solid: 64%;
    --offer-fade-soft: 86%;
  }
}















/* ============== HERO (clean, final) ============== */
/* tiny resets so the hero background and content share the same top edge */
html, body { margin: 0; }
h1, h2     { margin: 0; }

/* -- design tokens just for the hero -- */
:root{
  --hero-pad: clamp(16px, 6vw, 80px);

  /* type scales */
  --hero-logo: clamp(140px, 18vw, 300px);
  --hero-h2:   clamp(10px, 1.9vw, 28px);
  --hero-h1:   clamp(24px, 7.2vw, 64px);          /* slightly smaller baseline */
  --hero-cta-w: clamp(150px, 40vw, 260px);
  --hero-cta-fs: clamp(13px, 2vw, 20px);
  --hero-sub:  clamp(8px, 1.8vw, 20px);

  /* vertical alignment of the left stack (logo/tagline/headline/cta/subtext) */
  --hero-content-offset: clamp(0px, 8vh, 140px);  /* push down on large screens */
}

/* width-driven height so the image doesn’t over-crop on phones */
.hero{
  /* largest of: a 420px floor OR (the smaller of 86vh and a 16:9 box from width) */
  min-height: max(420px, min(86vh, calc(100vw * 9 / 16)));

  /* top pad respects notches; sides keep the normal pad */
  padding: max(var(--hero-pad), env(safe-area-inset-top))
           var(--hero-pad)
           var(--hero-pad);

  margin: 0 auto;
  max-width: 1440px;                 /* remove if you want true full-bleed */
  position: relative;
  overflow: hidden;
  background: #0C0B06;
  isolation: isolate;                /* keep overlay under content */
}

/* background image fills the hero */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                 /* keep the section covered */
  object-position: 62% 50%;          /* coin right, copy left (tweak 58–66%) */
}

/* subtle left overlay for readability (doesn’t dim the coin on the right) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(12,11,6,.85) 0%,
    rgba(12,11,6,.60) 32%,
    rgba(12,11,6,.28) 50%,
    rgba(12,11,6,0)   70%
  );
}

/* content column */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: min(92%, 560px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vw, 22px);

  /* 👇 aligns the left stack vertically with the coin */
  margin-top: var(--hero-content-offset);
}

/* elements */
.logo{ width: var(--hero-logo); height: auto; display: block; }
.tagline{ font-size: var(--hero-h2); letter-spacing: .06em; color:#fff; opacity:.9; }
.headline{
  font-size: var(--hero-h1);
  line-height: .98;
  margin: 0 0 clamp(18px, 4vw, 36px);
  color: #FFD586;
  text-shadow: 0 0 20px rgba(255,215,130,.35);
}
.subtext{ font-size: var(--hero-sub); color:#fff; }
.subtext .highlight{ color:#FFD586; font-weight:700; }

/* CTA styled anchor */
a.cta, a.cta:link, a.cta:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 6.2vw, 56px);
  width: var(--hero-cta-w);
  padding: 0 clamp(20px, 6vw, 40px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,#FFD890 3%,#BE8A4E 52%,#FAD9AF 69%,#C29E71 85%);
  color: #0C0B06;
  font-weight: 900;
  font-size: var(--hero-cta-fs);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255,215,130,.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.cta:hover   { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,215,130,.45); }
a.cta:active  { transform: translateY(0);    box-shadow: 0  4px 12px rgba(255,215,130,.25); }
a.cta:focus-visible{ outline: 2px solid #FAD27A; outline-offset: 2px; }

/* framing tweaks as the viewport narrows */
@media (max-width: 1100px){
  .hero-bg img{ object-position: 60% 50%; }
  :root{ --hero-content-offset: clamp(0px, 6vh, 90px); }   /* a bit less push on tablets */
}
@media (max-width: 800px){
  .hero-bg img{ object-position: 58% 46%; }
  :root{ --hero-content-offset: clamp(0px, 5vh, 64px); }
}
@media (max-width: 520px){
  .hero-bg img{ object-position:58% 50%; }
  .headline{ line-height: .96; }
  .hero-content{ gap: 8px; }
  :root{ --hero-content-offset: clamp(0px, 6vh, 90px); }   /* a bit less push on tablets */
}
/* 420px and below: make the left-side content 6px smaller */
@media (max-width: 420px){
  /* keep whatever you already have here (object-position, offsets, etc.) */
  .hero-bg img{ object-position: 80% 48%; } /* your current setting */

  /* ↓ 6px smaller for each element in the left stack */
  .logo{ width: calc(var(--hero-logo) - 6px); }

  .headline{ font-size: calc(var(--hero-h1) - 6px); }

  a.cta{
    font-size: calc(var(--hero-cta-fs) - 6px);
    /* optional: make the button’s height feel consistent */
    min-height: calc(clamp(44px, 6.2vw, 56px) - 6px);
  }

}












/* ========= Shared tokens for these sections ========= */
:root{
  --sec-pad-y: clamp(48px, 9vw, 140px);
  --sec-pad-x: clamp(16px, 6vw, 80px);

  --title-fs:   clamp(24px, 4.2vw, 48px);
  --subtext-fs: clamp(14px, 1.8vw, 18px);

  --copy-w: 850px;   /* nice read width for paragraphs */
}

/* ===========================================
   Providers / Achievement / Licensed (shared)
   =========================================== */
.providers,
.achievement,
.licensed{
  padding: var(--sec-pad-y) var(--sec-pad-x);
  text-align: center;
  background: radial-gradient(ellipse at center,
             rgba(255,215,130,.04) 0%, transparent 80%);
}

.section-title{
  color:#FFD586;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: var(--title-fs);
  margin: 0 0 clamp(16px, 3vw, 28px);
}

.section-subtext{
  color:#ddd;
  line-height:1.6;
  font-size: var(--subtext-fs);
  max-width: var(--copy-w);
  margin: 0 auto clamp(24px, 4vw, 60px);
}

/* banners scale with viewport but cap at their designed max */
.providers-banner img,
.achievement-banner img,
.licensed-banner img{
  display:block;
  width: min(92vw, 1100px); /* default cap */
  height:auto;
  margin: 0 auto;
  opacity:.95;
  transition: .25s ease;
}
.providers-banner img:hover,
.achievement-banner img:hover,
.licensed-banner img:hover{ opacity:1; transform:scale(1.01); }

/* Licensed banner has a slightly smaller original width */
.licensed-banner img{ width: min(92vw, 1000px); }

/* ===========================================
   Crypto Premier
   =========================================== */
.crypto-premier{
  background:#0C0B06;
  color:white;
  text-align:center;
  padding: var(--sec-pad-y) var(--sec-pad-x);
  border-top:1px solid rgba(255,215,130,.2);
}

.crypto-container{
  max-width: min(1100px, 94vw);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 80px) clamp(16px, 5vw, 60px);
  border:1px solid rgba(255,215,130,.2);
  border-radius:10px;
  background:rgba(20,18,14,.9);
  box-shadow:0 0 40px rgba(255,200,100,.1);
}

.crypto-title{
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight:900;
  color:#FFD586;
  text-transform:uppercase;
  line-height:1.25;
  margin: 0 0 clamp(12px, 2.6vw, 20px);
}

.crypto-subtext{
  font-size: var(--subtext-fs);
  color:#ddd;
  margin: 0 0 clamp(16px, 3vw, 40px);
}

.gold-btn{
  background:linear-gradient(90deg,#FFD890 3%,#BE8A4E 52%,#FAD9AF 69%,#C29E71 85%);
  border:none;
  border-radius:30px;
  padding: clamp(12px, 2.4vw, 15px) clamp(28px, 6vw, 50px);
  font-size: clamp(14px, 1.9vw, 20px);
  font-weight:900;
  text-transform:uppercase;
  color:#0C0B06;
  cursor:pointer;
  margin-bottom: clamp(24px, 6vw, 60px);
  transition:.3s ease;
}
.gold-btn:hover{ transform:scale(1.05); box-shadow:0 0 20px rgba(255,215,130,.6); }

.crypto-content{
  text-align:left;
  color:#e8e8e8;
  font-size: clamp(14px, 1.65vw, 16px);
  line-height:1.8;
  max-width: 900px;
  margin: 0 auto;
}
.crypto-content h3{
  color:#FFD586;
  font-size: clamp(16px, 2.2vw, 20px);
  margin: clamp(18px, 4vw, 40px) 0 clamp(6px, 1.6vw, 10px);
}
.crypto-content ul{ margin-left: 1.1em; }

/* ===========================================
   Final Signup
   =========================================== */
.signup-section{
  text-align:center;
  background:#0C0B06;
  padding: clamp(40px, 10vw, 120px) 0 clamp(32px, 8vw, 80px);
}
.signup-btn{
  background:linear-gradient(90deg,#FFD890 3%,#BE8A4E 52%,#FAD9AF 69%,#C29E71 85%);
  border:none;
  border-radius:20px;
  padding: clamp(12px, 2.6vw, 18px) clamp(40px, 10vw, 80px);
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight:900;
  text-transform:uppercase;
  color:#0C0B06;
  cursor:pointer;
  transition:.3s ease;
}
.signup-btn:hover{ transform:scale(1.05); box-shadow:0 0 25px rgba(255,215,130,.6); }
/* Make the black parts of the banner disappear over the dark page */
.providers-banner img,
.achievement-banner img,
.licensed-banner img{
  display:block;
  width:min(90vw, 1100px);
  height:auto;
  /* Blend: black becomes invisible, lights stay */
  mix-blend-mode: screen;          /* fallback: 'lighten' is okay too */
  opacity: .98;                    /* tiny soften to reduce edges */
}

/* Optional: keep sections tidy */
.providers,
.achievement,
.licensed{
  text-align:center;
}