/* =========================================================
   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;
  background:#000;
}
.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) * -1);
  --sk:46px;
}
.trax-panel:not(:first-child){
  filter:drop-shadow(-1.6px 0 0 rgba(236,181,44,.75));
}
.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; }
  .trax-strip{ flex-wrap:wrap; border-radius:12px; }
  .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; }
}