/* ==========================================================================
   Home page sections. The banner sections (hero, eco, why, join) keep the
   exact composition of their artwork, so on desktop their text is placed in
   percentages / vw and scales with the image. Below the breakpoints they
   switch to a stacked layout.
   ========================================================================== */

h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.01em}
.kicker{font-weight:600;text-transform:uppercase;color:var(--orange)}

/* ---------- Hero (artwork 1774 x 795) ---------- */
.hero{position:relative;overflow:hidden;background:#07090b;aspect-ratio:1774/795}
.hero .bg{background-image:url(../images/hero.jpg)}
.hero-content{position:absolute;left:7.44%;top:8.6%;width:56%;z-index:2}
.hero .eyebrow{font-size:max(12px,1.07vw);font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6vw}
.hero h1{font-size:4.65vw;line-height:1.08;margin-bottom:1.2vw;white-space:nowrap}
.hero .lead{font-size:max(15px,1.47vw);font-weight:600;line-height:1.35;margin-bottom:1.1vw}
.hero .sub{font-size:max(14px,1.3vw);color:#cfd3d8;line-height:1.45;margin-bottom:1.7vw}
.hero .btn{box-shadow:0 0 34px rgba(255,159,10,.35)}

.stats{position:absolute;left:7.44%;right:7.44%;top:80.8%;height:16.5%;z-index:3;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:linear-gradient(180deg,rgba(38,34,30,.72),rgba(16,15,14,.82));border:1px solid rgba(255,255,255,.1);border-radius:.8vw;box-shadow:0 20px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stat{display:flex;align-items:center;gap:2.8vw;padding-left:3.7vw;height:100%}
.stat + .stat{border-left:1px solid rgba(255,255,255,.14);padding-left:6.3vw;height:62%}
.stat-icon{width:4.85vw;height:4.85vw;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1b1d20,#07080a);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 0 rgba(255,159,10,.35);animation:ring 3.2s ease-out infinite}
.stat + .stat .stat-icon{animation-delay:1.6s}
.stat-icon svg{width:52%;height:52%}
.stat h3{font-size:2.55vw;color:var(--orange);line-height:1.1;font-variant-numeric:tabular-nums}
.stat p{font-size:1.28vw;font-weight:500}
@keyframes ring{0%{box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 0 rgba(255,159,10,.4)}70%,100%{box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 14px rgba(255,159,10,0)}}

/* ---------- Services ---------- */
.services{position:relative;overflow:hidden;padding:clamp(64px,5.5vw,96px) 0;background:radial-gradient(120% 90% at 50% 0%,#12151a 0%,#0a0c0f 55%,#07080a 100%)}
.services .wrap{position:relative;z-index:2}
.gs1{left:-70px;top:-60px;width:70px;height:130%;transform:rotate(-14deg);transform-origin:top left;background:linear-gradient(180deg,rgba(255,150,0,.95),rgba(255,120,0,.55) 45%,rgba(255,140,0,.9) 75%,rgba(255,150,0,0))}
.gs2{left:-20px;top:-40px;width:14px;height:125%;transform:rotate(-14deg);transform-origin:top left;background:linear-gradient(180deg,rgba(255,170,40,0),rgba(255,170,40,.75) 30%,rgba(255,170,40,.2) 70%,rgba(255,170,40,0))}
.gs3{left:-30px;bottom:-80px;width:90px;height:55%;transform:rotate(-26deg);transform-origin:bottom left;background:linear-gradient(0deg,rgba(255,150,0,.95),rgba(255,130,0,.4) 70%,rgba(255,130,0,0))}
.gs4{right:-60px;bottom:-60px;width:60px;height:75%;transform:rotate(24deg);transform-origin:bottom right;background:linear-gradient(0deg,rgba(255,150,0,0),rgba(255,145,0,.95) 30%,rgba(255,130,0,.5) 80%,rgba(255,130,0,0))}

.section-head{display:grid;grid-template-columns:auto 1px minmax(0,1fr);gap:clamp(24px,3.4vw,60px);align-items:center;margin-bottom:clamp(32px,3vw,48px)}
.section-head .kicker{font-size:clamp(14px,1.2vw,21px);letter-spacing:.04em;margin-bottom:6px}
.section-head h2{font-size:clamp(34px,3.55vw,64px);line-height:1.1}
.section-head .divider{width:1px;height:90px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.3),transparent)}
.js .section-head .divider{transform:scaleY(0);transition:transform 1.2s var(--ease) .3s}
.js .section-head .divider.in{transform:none}
.section-head p{font-size:clamp(15px,1.2vw,21px);color:var(--soft);line-height:1.6;max-width:560px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.3vw,24px)}
.card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,2.5vw,44px);align-items:start;padding:clamp(24px,1.8vw,32px) clamp(22px,2vw,36px);border-radius:18px;background:linear-gradient(160deg,rgba(24,26,30,.82),rgba(12,13,15,.86));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.js .card.in{transition:opacity .9s var(--ease),transform .7s var(--ease),border-color .35s,box-shadow .35s;transition-delay:var(--d,0s)}
.card::before{content:"";position:absolute;width:60%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,0,.28),rgba(255,140,0,0));pointer-events:none;transition:opacity .4s,transform .6s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,159,10,.12),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.card.glow-bl::before{left:-22%;bottom:-38%}
.card.glow-br::before{right:-22%;bottom:-38%}
.card.glow-tl::before{left:-28%;top:10%;opacity:.45}
.card.glow-tr::before{right:-28%;top:10%;opacity:.45}
.card:hover{border-color:rgba(255,159,10,.45);transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 54px rgba(0,0,0,.5),0 0 0 1px rgba(255,159,10,.15)}
.card:hover::before{opacity:1;transform:scale(1.15)}
.card:hover::after{opacity:1}
.card-icon{position:relative;width:clamp(72px,6vw,106px);height:clamp(72px,6vw,106px);border-radius:50%;border:2.5px solid var(--orange);display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#16181b,#07080a 75%);box-shadow:0 0 22px rgba(255,150,0,.35),inset 0 0 14px rgba(255,150,0,.12);transition:transform .5s var(--ease),box-shadow .4s}
.card:hover .card-icon{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 36px rgba(255,150,0,.55),inset 0 0 18px rgba(255,150,0,.2)}
.card-icon svg{width:54%;height:54%}
.card-body{position:relative;padding-top:clamp(4px,.7vw,12px)}
.card h3{font-size:clamp(21px,1.7vw,30px);color:var(--orange);line-height:1.2;margin-bottom:clamp(10px,.9vw,16px)}
.card p{font-size:clamp(15px,1.1vw,19px);color:var(--soft);line-height:1.6}
.card p b{color:#fff;font-weight:700}
.arrow{position:relative;align-self:center;width:clamp(46px,3.7vw,66px);height:clamp(46px,3.7vw,66px);border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center;color:var(--orange);background:rgba(0,0,0,.25);transition:background .3s,color .3s,transform .4s var(--ease)}
.card:hover .arrow{background:var(--orange);color:#111;transform:translateX(4px)}
.arrow svg{width:42%;height:42%}

/* ---------- Ajax Eco System (artwork 1774 x 478) ---------- */
.eco{position:relative;overflow:hidden;background:#0a0806;aspect-ratio:1774/478}
.eco .bg{background-image:url(../images/ajax-eco-banner.jpg)}
.eco-content{position:absolute;left:7.44%;top:50%;transform:translateY(-50%);width:38%;z-index:2}
.eco .kicker{text-transform:none;font-size:max(14px,1.13vw);font-weight:500;margin-bottom:.4vw}
.eco h2{font-size:3.6vw;line-height:1.12;margin-bottom:1.2vw}
.eco p{font-size:max(14px,1.18vw);color:var(--muted);line-height:1.65;margin-bottom:1.8vw}
.eco p b{color:#fff;font-weight:700}

/* ---------- Why choose us (artwork 2000 x 667) ---------- */
.why{position:relative;overflow:hidden;background:#070707;aspect-ratio:2000/667;border-top:1px solid rgba(255,255,255,.06)}
.why .bg{background-image:url(../images/why-choose-us.jpg)}
.why-content{position:absolute;left:63.2%;top:52%;transform:translateY(-50%);z-index:2}
.why h2{font-size:3.2vw;line-height:1.15;margin-bottom:1.1vw;white-space:nowrap}
.checks{list-style:none;margin:0 0 .8vw 1.4vw}
.checks li{display:flex;align-items:center;gap:1.4vw;font-size:max(14px,1.33vw);font-weight:400;height:2.35vw}
.checks svg{width:1.85vw;height:1.85vw;min-width:22px;min-height:22px;color:var(--orange);flex-shrink:0}
.why .btn{margin-left:1.4vw;font-size:max(15px,1.3vw);padding:.95vw 2.3vw;gap:1.6vw}
.why .btn svg{width:max(16px,1.6vw);height:max(16px,1.6vw)}
.eco-mobile-img,.why-mobile-img,.join-mobile-img{display:none}

/* ---------- Join millions (artwork 2000 x 677) ---------- */
.join{position:relative;overflow:hidden;background:#0b0d0f;aspect-ratio:2000/677}
.join .bg{background-image:url(../images/join-banner.jpg)}
.join-content{position:absolute;left:7.44%;top:50%;transform:translateY(-50%);z-index:2}
.join h2{font-size:3.65vw;line-height:1.14;margin-bottom:1.5vw;white-space:nowrap;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.join p{font-size:max(14px,1.5vw);line-height:1.45;color:#e6e8ea;margin-bottom:1.9vw;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.join .btn{box-shadow:0 0 34px rgba(255,159,10,.3)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .section-head{grid-template-columns:1fr;gap:16px}
  .section-head .divider{display:none}
  .grid{grid-template-columns:1fr}

  .eco,.why{aspect-ratio:auto}
  .eco .bg,.why .bg{display:none}
  .eco-mobile-img,.why-mobile-img{display:block;width:100%;height:auto;object-fit:cover}
  .eco-mobile-img{aspect-ratio:1030/478;object-position:right center}
  .why-mobile-img{aspect-ratio:1240/667;object-position:left center}
  .eco-content,.why-content{position:static;transform:none;width:auto;max-width:680px;padding:48px var(--gutter) 56px}
  .eco .kicker{font-size:16px;margin-bottom:8px}
  .eco h2{font-size:44px;margin-bottom:16px}
  .eco p{font-size:17px;margin-bottom:26px}
  .why h2{font-size:40px;white-space:normal;margin-bottom:22px}
  .checks{margin:0 0 28px}
  .checks li{font-size:18px;gap:16px;margin-bottom:12px;height:auto}
  .checks svg{width:26px;height:26px}
  .why .btn{margin-left:0;font-size:16px;padding:15px 30px;gap:18px}
  .why .btn svg{width:18px;height:18px}
}
@media (max-width:900px){
  .hero{aspect-ratio:auto;padding:56px 0 36px}
  .hero .bg{background-size:auto 100%;background-position:60% center}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,9,11,.9) 0%,rgba(7,9,11,.82) 55%,rgba(7,9,11,.45) 100%)}
  .hero-content,.stats{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto}
  .hero-content{padding:0 var(--gutter) 40px}
  .hero br{display:none}
  .hero .eyebrow{font-size:12px;margin-bottom:12px}
  .hero h1{font-size:44px;white-space:normal;margin-bottom:18px}
  .hero .lead{font-size:17px;margin-bottom:12px}
  .hero .sub{font-size:15px;margin-bottom:26px}
  .stats{margin:0 var(--gutter);grid-template-columns:1fr;border-radius:12px;padding:6px 0}
  .stat,.stat + .stat{height:auto;padding:18px 22px;gap:18px;border-left:0}
  .stat + .stat{border-top:1px solid rgba(255,255,255,.12)}
  .stat-icon{width:56px;height:56px}
  .stat h3{font-size:30px}
  .stat p{font-size:15px}

  .join{aspect-ratio:auto}
  .join .bg{display:none}
  .join-mobile-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:68% center}
  .join-content{position:static;transform:none;padding:48px var(--gutter) 56px}
  .join br{display:none}
  .join h2{font-size:36px;white-space:normal;margin-bottom:16px}
  .join p{font-size:16px;margin-bottom:26px}
}
@media (max-width:560px){
  .hero h1{font-size:34px}
  .section-head h2,.eco h2,.why h2,.join h2{font-size:30px}
  .card{grid-template-columns:auto 1fr;gap:16px 18px;padding:22px 18px}
  .card-icon{width:60px;height:60px}
  .card-body{padding-top:0}
  .arrow{grid-column:2;justify-self:start;width:44px;height:44px}
  .gs1{left:-95px;opacity:.5}
  .gs2{opacity:.3}
}