/* ============================================================
   HonorPro · Trading Platforms — homepage section
   HonorPro Trader in the spotlight, MetaTrader 5 and 4 beneath.
   Prefix tp-. Every rule targets a class; no element resets (a
   `.tp p{margin:0}` is (0,1,1) and outranks every class margin).
   The container is NAMED and every query names it.
   Brand: honorpro.com navy, orange pill, cyan sub-label, green ticks,
   Instrument Sans + Bai Jamjuree. H-Trader brief: glass surfaces,
   no gradient text, no grid / blob backgrounds, subtle glints only.
   ============================================================ */
.tp{
  --tp-navy:#0B1020;--tp-line:#232C48;--tp-line-soft:rgba(255,255,255,.08);
  --tp-text-2:#AEB4C2;--tp-text-3:#8F8C9D;--tp-cyan:#20F0FF;--tp-orange:#FF4D00;--tp-orange-2:#FF6A2B;--tp-up:#0BE36C;
  --tp-f-ui:"Instrument Sans",system-ui,sans-serif;--tp-f-d:"Bai Jamjuree",system-ui,sans-serif;--tp-ease:cubic-bezier(.22,1,.36,1);
  display:block;width:100%;box-sizing:border-box;margin:0;padding:96px 0;background:var(--tp-navy);color:#fff;
  font:400 16px/1.5 var(--tp-f-ui);-webkit-font-smoothing:antialiased;container:tp / inline-size}
.tp *,.tp *::before,.tp *::after{box-sizing:border-box}
.tp-i{display:inline-block;width:18px;height:18px;flex:none}
.tp-wrap{max-width:1320px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.tp-label{margin:0;padding:0 0 18px;border-bottom:1px solid var(--tp-line-soft);font:600 20px/30px var(--tp-f-d);color:var(--tp-text-3)}
.tp-head{margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:20px 64px;align-items:end}
.tp-sub{margin:0;font:600 20px/1.3 var(--tp-f-d);color:var(--tp-cyan)}
.tp-h2{margin:14px 0 0;font:600 44px/1.18 var(--tp-f-ui);letter-spacing:-.02em;color:#fff;max-width:min(100%,24ch)}
.tp-lead{margin:0;padding:0 0 6px;font:400 18px/1.55 var(--tp-f-ui);color:var(--tp-text-2);max-width:min(100%,40ch)}

/* ---------- shared: glass card, chip, CTA, store pills ---------- */
.tp-glass{position:relative;border:1px solid var(--tp-line);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%),#0D1327;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .35s}
.tp-glass::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:1px;pointer-events:none;opacity:.75;
  background:linear-gradient(90deg,transparent 0%,transparent 35%,rgba(32,240,255,.85) 50%,transparent 65%,transparent 100%);background-size:250% 100%;animation:tp-glint 7s linear infinite}
@keyframes tp-glint{from{background-position:125% 0}to{background-position:-125% 0}}
.tp-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:30px;border:1px solid rgba(32,240,255,.45);color:var(--tp-cyan);font:600 11px/1 var(--tp-f-d);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.tp-chip:hover{color:#fff;border-color:rgba(32,240,255,.75)}
.tp-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--tp-cyan);animation:tp-pulse 2.2s ease-out infinite}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 rgba(32,240,255,.6)}100%{box-shadow:0 0 0 10px rgba(32,240,255,0)}}
.tp-desc{margin:14px 0 0;font:400 15px/1.5 var(--tp-f-ui);color:var(--tp-text-2)}

.tp-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:30px;border:1px solid var(--tp-orange);
  background:var(--tp-orange);color:#fff;font:600 16px/1 var(--tp-f-d);text-decoration:none;white-space:nowrap;box-shadow:0 10px 26px -14px rgba(255,77,0,.9);
  transition:transform .25s var(--tp-ease),background-color .25s,box-shadow .25s}
.tp-cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--tp-ease)}
.tp-cta:hover{background:var(--tp-orange-2);border-color:var(--tp-orange-2);color:#fff;transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(255,77,0,1)}
.tp-cta:hover::after{transform:translateX(120%)}
.tp-cta .tp-i{width:16px;height:16px;transition:transform .25s var(--tp-ease)}
.tp-cta:hover .tp-i{transform:translateX(3px)}
.tp-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--tp-cyan);font:600 15px/1 var(--tp-f-d);text-decoration:none;white-space:nowrap}
.tp-more:hover{color:#fff}
.tp-more .tp-i{width:15px;height:15px;transition:transform .25s var(--tp-ease)}
.tp-more:hover .tp-i{transform:translateX(3px)}
.tp-actions{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}

.tp-pill{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 16px;border:1px solid var(--tp-line);border-radius:14px;
  background:rgba(255,255,255,.02);color:#fff;text-decoration:none;transition:border-color .25s,background-color .25s,transform .3s var(--tp-ease)}
.tp-pill:hover,.tp-pill:focus-visible{border-color:rgba(32,240,255,.55);background:rgba(32,240,255,.06);color:#fff;transform:translateY(-1px)}
.tp-pill--soon{opacity:.42;filter:grayscale(1);cursor:default;pointer-events:none}
.tp-pill--soon .tp-pill-b{color:rgba(255,255,255,.62)}
.tp-pill:focus-visible,.tp-cta:focus-visible,.tp-more:focus-visible,.tp-chip:focus-visible{outline:2px solid var(--tp-cyan);outline-offset:3px}
.tp-pill-ic{display:grid;place-items:center;width:22px;height:22px;flex:none}
.tp-pill-ic svg{display:block;width:22px;height:22px}
.tp-pill-t{display:flex;flex-direction:column;min-width:0}
.tp-pill-s{font:400 11px/1.1 var(--tp-f-ui);color:var(--tp-text-3);white-space:nowrap}
.tp-pill-b{margin:3px 0 0;font:600 16px/1.1 var(--tp-f-ui);color:#fff;white-space:nowrap}
.tp-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* ====================== HonorPro Trader: the spotlight ====================== */
.tp-hero{margin:40px 0 0;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:36px;align-items:center;padding:40px 40px 40px 44px}
.tp-hero:hover{border-color:rgba(255,255,255,.14)}
.tp-brand{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.tp-logo{display:block;height:30px;width:auto;flex:none}
.tp-title{margin:20px 0 0;font:600 30px/1.2 var(--tp-f-ui);letter-spacing:-.01em;color:#fff;max-width:min(100%,21ch)}

/* the four features double as the screen selector: the active one is lit and its line fills while the screen shows */
.tp-feats{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.tp-feat{position:relative;margin:0 -14px;padding:10px 14px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  border:1px solid transparent;border-radius:14px;transition:background-color .35s,border-color .35s}
.tp-feat .tp-i{margin-top:2px;color:var(--tp-up)}
.tp-feat-t{display:block;font:600 16px/1.35 var(--tp-f-ui);color:#fff}
.tp-feat-d{display:block;margin:2px 0 0;font:400 15px/1.45 var(--tp-f-ui);color:var(--tp-text-2)}
.tp-feat.tp-on{background:rgba(255,255,255,.035);border-color:var(--tp-line)}
.tp-feat-bar{position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.tp-feat-bar>i{display:block;width:0;height:100%;border-radius:inherit;background:var(--tp-cyan)}
.tp-auto .tp-feat.tp-on .tp-feat-bar{opacity:1}
.tp-auto .tp-feat.tp-on .tp-feat-bar>i{animation:tp-prog 5.5s linear forwards;animation-play-state:paused}
.tp-auto.tp-play .tp-feat.tp-on .tp-feat-bar>i{animation-play-state:running}
@keyframes tp-prog{from{width:0}to{width:100%}}
.tp-js .tp-feat{cursor:pointer}
.tp-js .tp-feat:not(.tp-on):hover{background:rgba(255,255,255,.02)}

.tp-stores{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--tp-line-soft)}
.tp-stores-l{margin:0 0 12px;font:600 11px/1 var(--tp-f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-text-3)}

/* the visual: the real desktop + mobile screens in code-built frames, the brand's 3D mark beside them */
.tp-vis{--px:0;--py:0}
.tp-dev{position:relative;width:100%;aspect-ratio:963/573}
.tp-plinth{position:absolute;left:3%;right:0;bottom:0;height:22%;border-radius:18px 18px 10px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 100%),#141A30;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.9)}
.tp-laptop{position:absolute;left:21%;top:3%;width:73%;translate:calc(var(--px) * -6px) calc(var(--py) * -4px);transition:translate .7s var(--tp-ease)}
.tp-scr{position:relative;border-radius:14px;padding:1.2%;background:#05070D;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 60px -30px rgba(0,0,0,.9);overflow:hidden}
.tp-scr-stack{display:grid;border-radius:8px;overflow:hidden}
.tp-scr-img{grid-area:1 / 1;display:block;width:100%;height:auto;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 1.6s var(--tp-ease)}
.tp-scr-img.tp-on{opacity:1;transform:none}
.tp-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);background-size:300% 100%;background-position:120% 0;animation:tp-glare 9s ease-in-out infinite 1.5s}
@keyframes tp-glare{0%{background-position:120% 0}30%,100%{background-position:-20% 0}}
.tp-base{height:0;margin:0 -4%;border-top:9px solid #1B2033;border-left:14px solid transparent;border-right:14px solid transparent;border-radius:0 0 12px 12px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.tp-phone{position:absolute;left:4%;bottom:7%;width:18%;border-radius:18px;padding:1.1%;background:#05070D;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 50px -20px rgba(0,0,0,.9);
  translate:calc(var(--px) * 12px) calc(var(--py) * 8px);transition:translate .7s var(--tp-ease);animation:tp-float 7s ease-in-out infinite}
.tp-phone-img{display:block;width:100%;height:auto;border-radius:13px}
.tp-inf{position:absolute;right:1%;bottom:13%;width:19%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));
  translate:calc(var(--px) * 18px) calc(var(--py) * 12px);transition:translate .7s var(--tp-ease);animation:tp-float 8s ease-in-out infinite .8s}
@keyframes tp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tp-tag{position:absolute;left:27%;bottom:5%;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:30px;
  border:1px solid rgba(255,255,255,.14);background:rgba(11,16,32,.8);color:#fff;font:600 12px/1 var(--tp-f-d);letter-spacing:.04em;white-space:nowrap}
.tp-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--tp-up);box-shadow:0 0 0 3px rgba(11,227,108,.18)}
.tp-tag.tp-swap{animation:tp-swap .5s var(--tp-ease)}
@keyframes tp-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ====================== MetaTrader 5 and 4 ====================== */
.tp-mt-row{margin:20px 0 0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:stretch}
.tp-mt-img{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:30px 28px 0;overflow:hidden}
.tp-mt-img:hover,.tp-mt:hover{border-color:rgba(255,255,255,.2)}
.tp-mt-cap{display:flex;flex-direction:column;gap:8px}
.tp-mt-cap-k{font:600 11px/1 var(--tp-f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-text-3)}
.tp-mt-cap-t{font:600 22px/1.25 var(--tp-f-ui);color:#fff;max-width:min(100%,26ch)}
.tp-shot{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transition:transform .8s var(--tp-ease)}
.tp-mt-img:hover .tp-shot{transform:translateY(-6px) scale(1.012)}
.tp-mts{display:grid;gap:20px}
.tp-mt{padding:24px 26px 26px}
.tp-mt-h{display:flex;align-items:center;gap:16px}
.tp-emb{display:block;width:46px;height:46px;flex:none;transition:transform .5s var(--tp-ease)}
.tp-mt:hover .tp-emb{transform:rotate(-10deg) scale(1.05)}
.tp-mt-t{flex:1 1 auto;min-width:0}
.tp-mt-n{margin:0;font:600 22px/1.15 var(--tp-f-ui);color:#fff;white-space:nowrap}
.tp-mt-s{margin:4px 0 0;font:400 13px/1.3 var(--tp-f-ui);color:var(--tp-text-3)}
.tp-badge{flex:none;align-self:flex-start;height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:30px;border:1px solid var(--tp-line);
  color:var(--tp-text-2);font:600 10px/1 var(--tp-f-d);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tp-mini{margin:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tp-mini .tp-pill{min-height:44px;padding:6px 10px;gap:8px;justify-content:center}
.tp-mini .tp-pill-ic,.tp-mini .tp-pill-ic svg{width:18px;height:18px}
.tp-mini .tp-pill-b{margin:0;font-size:14px;font-weight:500}

/* entrance: the final state is the default; the from-state exists only under .tp-js (set by the script) */
.tp-rvl{transition:opacity .8s ease,transform .8s var(--tp-ease),border-color .35s}
.tp-js .tp-rvl:not(.tp-in){opacity:0;transform:translateY(18px)}

/* ---------- responsive: the section's own named container ---------- */
@container tp (max-width: 1200px){
  .tp-h2{font-size:40px}
  .tp-hero{padding:32px;gap:28px}
}
/* the Trader card stacks, visual first, before the visual gets too small to read; the features go 2 × 2 */
@container tp (max-width: 1100px){
  .tp-hero{grid-template-columns:minmax(0,1fr)}
  .tp-vis{order:-1;width:100%;max-width:720px;margin:0 auto}
  .tp-title{max-width:none}
  .tp-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tp-feat{margin:0;border-color:var(--tp-line-soft)}
  .tp-stores .tp-dl{max-width:480px}
}
@container tp (max-width: 1000px){
  .tp-head{grid-template-columns:minmax(0,1fr)}
  .tp-lead{padding:0}
  .tp-mt-row{grid-template-columns:minmax(0,1fr)}
}
@container tp (max-width: 640px){
  .tp{padding:64px 0}
  .tp-label{font-size:16px;line-height:24px;padding-bottom:14px}
  .tp-head{margin-top:20px;gap:14px}
  .tp-sub{font-size:16px}
  .tp-h2{margin-top:10px;font-size:28px;line-height:1.2}
  .tp-lead{font-size:16px}
  .tp-hero{margin-top:32px;padding:22px 20px 24px;gap:22px;border-radius:20px}
  .tp-logo{height:26px}
  .tp-title{margin-top:16px;font-size:24px}
  .tp-feats{grid-template-columns:minmax(0,1fr);gap:4px}
  .tp-feat{margin:0 -14px;border-color:transparent}
  .tp-feat-d{font-size:14px}
  .tp-actions .tp-cta{flex:1 1 100%}
  .tp-actions .tp-more{margin:0 auto}
  .tp-tag{height:24px;padding:0 10px;font-size:11px}
  .tp-mt-img{padding:22px 20px 0;border-radius:20px}
  .tp-mt-cap-t{font-size:19px}
  .tp-mt{padding:22px 20px;border-radius:20px}
  .tp-mt-n{font-size:20px}
  .tp-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container tp (max-width: 440px){
  .tp-dl{grid-template-columns:minmax(0,1fr)}   /* two store pills side by side clip "Google Play" at phone widths */
}
@container tp (max-width: 360px){
  .tp-badge{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tp *,.tp *::before,.tp *::after{animation:none!important;transition:none!important}
}