/* Final Tracerr landing page, based on proposal 02. */
:root { --site-navy:#101c29; --site-lime:#d8f56a; --site-teal:#8ec8bd; --site-paper:#f7f6f0; }
.live-site { background:var(--site-navy); }
.live-site .concept { --gutter:clamp(22px,5vw,78px); padding-inline:var(--gutter); }
.live-site .concept-top { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,3vw,48px); border-color:#526a72; }
.live-site .concept-top .links { display:flex; justify-content:flex-end; gap:clamp(18px,2.5vw,38px); }
.live-site .concept-top .links a { position:relative; display:inline-flex; align-items:center; min-height:88px; color:#dce7e3; font-size:.82rem; white-space:nowrap; }
.live-site .concept-top .links a:hover,.live-site .concept-top .links a[aria-current="page"] { color:var(--site-lime); text-decoration:none; }
.live-site .concept-top .links a[aria-current="page"]::after { content:""; position:absolute; inset:auto 0 -1px; height:2px; background:var(--site-lime); }
.live-site .concept-top .contact { padding:10px 16px; border:1px solid #f5f5ed; font-size:.78rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.live-site .concept-top :is(.links a,.contact):focus-visible { outline:2px solid var(--site-lime); outline-offset:5px; }
.live-site .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(45px,5vw,90px); min-height:660px; padding-block:60px; }
.live-site .hero-copy h1 { font-size:clamp(3.2rem,5.25vw,5.7rem); }
.live-site .lead { opacity:1; color:#d6e5e1; }
.platform-visual { min-width:0; background:#1a3440; border:1px solid #607983; box-shadow:18px 28px 60px #05131c55; }
.platform-visual-head { display:flex; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #59727b; }
.platform-visual-head strong { font-size:.92rem; }
.platform-visual-head span { color:#c4dcd7; font:500 .73rem "DM Mono",monospace; }
.platform-visual-body { padding:19px 30px 15px; }
.platform-step { display:grid; grid-template-columns:24px 1fr; gap:18px; position:relative; }
.platform-step:not(:last-child)::before { content:""; position:absolute; top:18px; bottom:-7px; left:7px; width:1px; background:#8ebbb1; }
.step-dot { position:relative; z-index:1; width:15px; height:15px; margin-top:6px; border:3px solid var(--site-lime); background:#1a3440; border-radius:50%; }
.platform-step > div { padding-bottom:14px; }
.platform-step:last-child > div { padding-bottom:5px; }
.platform-step small { display:block; margin-bottom:4px; color:#b9d2cc; font:500 .72rem "DM Mono",monospace; }
.platform-step strong { display:block; font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.15; letter-spacing:-.025em; }
.platform-step p { max-width:340px; margin:5px 0 0; color:#d5e2dd; font-size:.85rem; line-height:1.4; }
.platform-visual-foot { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:19px 24px; background:var(--site-lime); color:var(--site-navy); font-size:.9rem; font-weight:700; }
.platform-visual-foot span:last-child { font-size:1.45rem; line-height:1; }
.live-site .feature-line { border-color:#607983; }
.live-site .feature-line span+span { border-color:#607983; }
.live-site .deep-dive { margin-inline:calc(-1 * var(--gutter)); padding:110px var(--gutter); border-top:0; background:#dce9d9; color:#112b32; }
.live-site .deep-dive p { color:#355751; }
.live-site .deep-dive .shot { height:460px; }
.stakeholder-scene { position:relative; min-width:0; padding:54px 34px; }
.stakeholder-scene .shot { position:relative; z-index:1; display:flex; flex-direction:column; }
.stakeholder-scene .shot img { flex:1; min-height:0; }
.stakeholder { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 7px; border:1px solid #9cb7ae; border-radius:100px; background:#f8fbf3; box-shadow:0 8px 24px #143a2b1f; color:#16333a; font-size:.78rem; font-weight:700; white-space:nowrap; }
.stakeholder-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#15343a; color:#d8f56a; font:600 .72rem "DM Mono",monospace; }
.stakeholder-trading { top:4px; left:0; }
.stakeholder-finance { top:4px; right:0; }
.stakeholder-settlement { bottom:4px; left:0; }
.stakeholder-third { bottom:4px; right:0; }
.verticals { margin-inline:calc(-1 * var(--gutter)); padding:95px var(--gutter) 105px; background:#f7f6f0; color:#112b32; }
.verticals-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:50px; margin-bottom:60px; }
.verticals-intro h2 { max-width:700px; margin:0; font-size:clamp(2.8rem,4.7vw,5.2rem); line-height:1.06; letter-spacing:-.035em; }
.verticals-intro p { max-width:470px; margin:0; color:#3b5d57; font-size:1.08rem; line-height:1.6; }
.verticals-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,55px); }
.verticals-grid article { padding-top:23px; border-top:1px solid #526f68; }
.verticals-grid article > span { color:#41635b; font:600 .73rem "DM Mono",monospace; letter-spacing:.04em; }
.verticals-grid h3 { max-width:300px; margin:24px 0 16px; font-size:clamp(1.55rem,2.3vw,2.25rem); line-height:1.12; letter-spacing:-.025em; }
.verticals-grid p { max-width:370px; margin:0; color:#355751; font-size:.98rem; line-height:1.62; }
.live-site .page-close { border-color:#607983; }
.live-site .page-footer { border-color:#607983; }
::selection { background:var(--site-lime); color:var(--site-navy); }
@media (max-width:1100px) {
  .live-site .deep-dive { grid-template-columns:1fr; }
  .stakeholder-scene { width:min(100%,760px); margin-inline:auto; }
}
@media (max-width:950px) {
  .live-site .hero-grid { grid-template-columns:1fr; }
  .live-site .hero-grid { min-height:0; }
  .platform-visual { max-width:650px; }
  .verticals-intro { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:700px) {
  .live-site .concept-top { grid-template-columns:1fr auto; gap:0 20px; }
  .live-site .concept-top .links { grid-column:1 / -1; grid-row:2; justify-content:space-between; gap:12px; border-top:1px solid #526a72; }
  .live-site .concept-top .links a { flex:1; min-height:50px; font-size:.72rem; line-height:1.25; white-space:normal; }
  .live-site .concept-top .contact { grid-column:2; grid-row:1; }
  .verticals-grid { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:520px) {
  .live-site .hero-grid { padding-block:48px 55px; gap:45px; }
  .live-site .hero-copy h1 { font-size:clamp(2.75rem,11vw,4rem); }
  .live-site .lead { font-size:1rem; }
  .platform-visual-head { display:block; }
  .platform-visual-head span { display:block; margin-top:6px; }
  .platform-visual-body { padding:20px 18px; }
  .platform-step { gap:12px; }
  .platform-step strong { font-size:1.3rem; }
  .platform-visual-foot { padding-inline:18px; }
  .live-site .deep-dive { padding-block:70px; }
  .live-site .deep-dive .shot { height:320px; }
  .stakeholder-scene { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0; }
  .stakeholder-scene .shot { grid-column:1 / -1; grid-row:2; }
  .stakeholder { position:static; justify-content:flex-start; min-width:0; padding:6px 9px 6px 6px; font-size:.7rem; }
  .stakeholder-icon { width:24px; height:24px; flex:none; }
  .stakeholder-trading,.stakeholder-finance { grid-row:1; }
  .stakeholder-settlement,.stakeholder-third { grid-row:3; }
  .verticals { padding-block:70px 75px; }
  .verticals-intro { margin-bottom:42px; }
}
@media (min-width:951px) {
  .live-site .hero-grid { min-height:610px; padding-block:34px 45px; }
  .live-site .hero-copy h1 { font-size:clamp(3.1rem,4.55vw,5.1rem); }
}