/* =========================================================
   TraX — "Your Business. One Smart Platform."
   ========================================================= */
.trax{
  --tx-gold:#e4a917;
  --tx-gold-2:#f4c445;
  --tx-gold-deep:#c68a06;
  --tx-ink:#0b0b09;
  --tx-card:rgba(28,25,20,.72);
  --tx-line:rgba(228,169,23,.26);
  --tx-body:#c9c1b2;
  --tx-serif:"Playfair Display",Georgia,serif;
  --tx-script:"Allura","Dancing Script",cursive;
  --tx-sans:"Poppins","Segoe UI",system-ui,sans-serif;

  position:relative; isolation:isolate; overflow:hidden;
  background-color:#0b0b09;
  background-image:url("../images/trax-bg.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:scroll;
  padding:74px 0 80px;
  font-family:var(--tx-sans);
}

.trax__inner{
  position:relative; z-index:2;
  width:100%; max-width:1440px; margin:0 auto;
  padding:0 clamp(20px,3.4vw,52px);
}

/* ---------- header ---------- */
.trax__head{ text-align:center; margin-bottom:44px; }
.trax__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 14px; color:var(--tx-gold);
  font-weight:600; font-size:clamp(15px,1.2vw,19px); letter-spacing:.02em;
}
.trax__mark{ width:19px; height:19px; }
.trax__plane{ width:20px; height:20px; }
.trax__eyebrow-line{ width:34px; height:1.5px; background:var(--tx-gold); border-radius:2px; }

.trax__title{
  margin:0;
  font-family:var(--tx-serif); font-weight:500;
  font-size:clamp(30px,3.9vw,58px); line-height:1.12; letter-spacing:-.4px;
  color:#fff;
}
.trax__title span{ color:var(--tx-gold-2); font-weight:600; }
.trax__title-rule{ display:block; width:min(300px,26%); height:auto; margin:8px auto 20px; }

.trax__lead{
  margin:0; color:#ded7c9;
  font-weight:300; font-size:clamp(15px,1.35vw,20px); line-height:1.5;
}
.trax__script{
  margin:2px 0 0;
  font-family:var(--tx-script); font-weight:400;
  font-size:clamp(24px,2.15vw,33px); line-height:1.1; color:var(--tx-gold-2);
}

/* ---------- four pillar cards ---------- */
.trax-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.5vw,22px);
  margin-bottom:clamp(38px,4vw,58px);
}
.trax-card{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(22px,2vw,30px) clamp(16px,1.5vw,26px) clamp(24px,2.2vw,32px);
  border:1px solid var(--tx-line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(38,33,25,.78) 0%, rgba(22,20,16,.72) 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  transition:border-color .22s ease, transform .22s ease;
}
.trax-card:hover{ border-color:rgba(228,169,23,.5); transform:translateY(-3px); }
.trax-card__icon{
  display:grid; place-items:center; flex:none;
  width:clamp(62px,5vw,76px); height:clamp(62px,5vw,76px);
  margin-bottom:16px; border-radius:50%;
  border:1.6px solid rgba(228,169,23,.72);
  color:var(--tx-gold);
  background:radial-gradient(circle at 50% 42%, rgba(228,169,23,.14), transparent 72%);
}
.trax-card__icon svg{ width:56%; height:56%; }
.trax-card h3{
  margin:0; text-align:center;
  font-family:var(--tx-sans); font-weight:600;
  font-size:clamp(15px,1.28vw,20px); line-height:1.28; color:#fff;
}
.trax-card__rule{
  display:block; width:52px; height:2px; margin:12px 0 16px;
  border-radius:2px; background:var(--tx-gold);
}
.trax-list{ list-style:none; margin:0; padding:0; width:100%; display:grid; gap:11px; }
.trax-list li{
  display:flex; align-items:center; gap:10px;
  font-weight:300; font-size:clamp(12.5px,1.02vw,15.5px); line-height:1.35;
  color:var(--tx-body);
}
.trax-list svg{ width:17px; height:17px; flex:none; color:var(--tx-gold); }

/* ---------- everything you sell ---------- */
.trax-sell{ text-align:center; margin-bottom:clamp(20px,2.2vw,30px); }
.trax-sell__label{
  display:flex; align-items:center; gap:22px;
  margin:0 0 8px;
  font-weight:600; font-size:clamp(15px,1.32vw,21px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--tx-gold-2);
}
.trax-sell__label::before,
.trax-sell__label::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(228,169,23,.55));
}
.trax-sell__label::after{ background:linear-gradient(90deg, rgba(228,169,23,.55), transparent); }
.trax-sell__label span{ flex:none; }
.trax-sell__sub{
  margin:0 0 clamp(18px,1.9vw,26px);
  font-weight:300; font-size:clamp(14px,1.22vw,18px); color:#ded7c9;
}

/* slanted photo strip */
.trax-strip{
  display:flex; align-items:stretch;
  border:1.5px solid rgba(228,169,23,.6);
  border-radius:14px; overflow:hidden;
  /* The strip's own colour shows through the slanted gaps left between the
     panels (see --seam below) and that is what draws the gold dividers.
     This replaces a filter:drop-shadow() that used to draw them: a filter
     promotes each panel to its own compositing layer, and some GPUs
     rasterise that layer at 1x rather than the screen's real pixel ratio,
     which is what made the photos look soft on certain devices. */
  background:#e0a91f;
}
.trax-panel{
  position:relative; margin:0; flex:1 1 0; min-width:0;
  height:clamp(178px,16.6vw,238px);
  clip-path:polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%);
  margin-left:calc((var(--sk) - var(--seam)) * -1);
  --sk:46px;
  --seam:1.6px;
}
.trax-panel:first-child{ clip-path:polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); margin-left:0; }
.trax-panel:last-child{ clip-path:polygon(var(--sk) 0, 100% 0, 100% 100%, 0 100%); }
.trax-panel img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.trax-panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,6,5,.02) 0%, rgba(6,6,5,.16) 55%, rgba(6,6,5,.62) 100%);
}
.trax-panel figcaption{
  position:absolute; left:0; right:0; bottom:clamp(14px,1.5vw,22px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.trax-panel__icon{
  display:grid; place-items:center;
  width:clamp(44px,3.7vw,56px); height:clamp(44px,3.7vw,56px);
  border-radius:50%; border:1.6px solid rgba(244,196,69,.85);
  color:var(--tx-gold-2);
  background:rgba(10,9,7,.34);
  backdrop-filter:blur(2px);
}
.trax-panel__icon svg{ width:56%; height:56%; }
.trax-panel__label{
  font-weight:500; font-size:clamp(15px,1.45vw,23px); color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* ---------- support bar ---------- */
.trax-support{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,38px);
  padding:clamp(18px,1.8vw,26px) clamp(20px,2.4vw,36px);
  border:1px solid var(--tx-line); border-radius:14px;
  background:linear-gradient(180deg, rgba(34,30,23,.7), rgba(20,18,15,.7));
}
.trax-support__icon{
  display:grid; place-items:center; flex:none;
  width:clamp(56px,4.6vw,72px); height:clamp(56px,4.6vw,72px);
  border-radius:50%; border:1.6px solid rgba(228,169,23,.7);
  color:var(--tx-gold);
  background:radial-gradient(circle at 50% 42%, rgba(228,169,23,.14), transparent 72%);
}
.trax-support__icon svg{ width:56%; height:56%; }
.trax-support__copy{ flex:1 1 auto; min-width:0; }
.trax-support__lead{
  margin:0; font-family:var(--tx-serif); font-weight:500;
  font-size:clamp(18px,1.85vw,29px); line-height:1.16; color:#fff;
}
.trax-support__script{
  margin:2px 0 0; font-family:var(--tx-script); font-weight:400;
  font-size:clamp(18px,1.6vw,25px); line-height:1.1; color:var(--tx-gold-2);
}
.trax-support__list{
  list-style:none; margin:0; padding:0; flex:none;
  display:flex; align-items:center; gap:clamp(16px,2vw,34px);
}
.trax-support__list li{
  display:flex; align-items:center; gap:11px;
  font-weight:400; font-size:clamp(12px,1vw,15px); line-height:1.3; color:#ded7c9;
  padding-left:clamp(16px,2vw,34px); border-left:1px solid rgba(255,255,255,.09);
}
.trax-support__list li:first-child{ padding-left:0; border-left:0; }
.trax-support__list span{ flex:none; color:var(--tx-gold); display:grid; place-items:center; }
.trax-support__list svg{ width:clamp(26px,2.1vw,32px); height:clamp(26px,2.1vw,32px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .trax-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trax-panel{ --sk:30px; }
  .trax-support{ flex-wrap:wrap; }
  .trax-support__list{ width:100%; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); justify-content:space-between; }
}
@media (max-width:760px){
  .trax{ padding:54px 0 60px; background-position:78% top; }
  .trax__globe{ right:-140px; opacity:.5; }
  .trax__palm{ opacity:.55; }
  /* panels stack square here, so there are no slanted gaps to fill -
     go back to a dark base so no gold hairline can peek through */
  .trax-strip{ flex-wrap:wrap; border-radius:12px; background:#000; }
  .trax-panel{ flex:1 1 50%; margin-left:0; clip-path:none !important; height:clamp(150px,34vw,200px); }
  .trax-sell__label{ gap:12px; letter-spacing:.16em; }
}
@media (max-width:560px){
  .trax-grid{ grid-template-columns:minmax(0,1fr); }
  .trax-panel{ flex:1 1 100%; }
  .trax-support__list{ flex-direction:column; align-items:flex-start; gap:14px; }
  .trax-support__list li{ padding-left:0; border-left:0; }
}