/* xbridgeintel.com — ExchangeBridge Intelligence
   Palette follows the APPLICATION (deep navy, gold), not xbridgecap.com: the
   site sells the platform, so it should look like the platform. It also reads as
   a separate company, which it now is. */
:root{
  --navy:#0A0E16; --raise:#141A26; --raise2:#1B2334;
  --line:#242D3F; --line2:#33405A;
  --gold:#C9A227; --gold-l:#E0BF5B; --gold-d:#8A6D1E;
  --text:#E8EAF0; --mut:#95A0B4; --dim:#6B7688;
  --green:#1A7F4B; --amber:#B07A12; --red:#9B2A2A;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--text);
  font:16px/1.65 var(--serif);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:var(--gold-l)}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:rgba(10,14,22,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;height:66px}
.brand{font:800 17px/1 var(--sans);letter-spacing:.4px;color:var(--text);
  text-decoration:none;white-space:nowrap}
.brand span{color:var(--gold)}
.brand small{display:block;font:400 9px/1.4 var(--sans);letter-spacing:2.4px;
  color:var(--gold-d);text-transform:uppercase;margin-top:3px}
nav{margin-left:auto;display:flex;align-items:center;gap:26px}
nav a{font:600 13.5px var(--sans);color:var(--mut);text-decoration:none}
nav a:hover{color:var(--text)}
.btn{display:inline-block;font:700 14px var(--sans);text-decoration:none;
  padding:11px 20px;border-radius:8px;border:1px solid transparent;white-space:nowrap}
.btn-gold{background:var(--gold);color:#0A0E16}
.btn-gold:hover{background:var(--gold-l)}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold-d)}

/* ---- hero ---- */
.hero{padding:88px 0 72px;border-bottom:1px solid var(--line)}
.eyebrow{font:700 11px var(--sans);letter-spacing:3px;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 20px}
h1{font:400 clamp(34px,5.2vw,54px)/1.14 var(--serif);margin:0 0 22px;
  text-wrap:balance;max-width:19ch}
h1 em{font-style:normal;color:var(--gold-l)}
.lede{font-size:19px;line-height:1.66;color:var(--mut);max-width:60ch;margin:0 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta small{color:var(--dim);font:400 13px var(--sans)}

/* ---- sections ---- */
section{padding:74px 0;border-bottom:1px solid var(--line)}
h2{font:400 clamp(26px,3.4vw,36px)/1.22 var(--serif);margin:0 0 14px;text-wrap:balance}
.sub{color:var(--mut);max-width:62ch;margin:0 0 40px;font-size:17px}
h3{font:700 15px var(--sans);margin:0 0 8px;letter-spacing:.2px}

/* ---- the discipline: four statements ---- */
/* Both .rules blocks hold exactly FOUR items. auto-fit gave three across and one
   alone in a dead row; two columns fills every cell at any width. */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:660px){.rules{grid-template-columns:1fr}}
.rule{background:var(--navy);padding:26px 24px}
.rule .n{font:700 11px var(--sans);letter-spacing:2px;color:var(--gold-d);margin-bottom:12px}
.rule p{margin:0;color:var(--mut);font-size:15px;line-height:1.62}
.rule b{color:var(--text);font-weight:400}

/* ---- products ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:660px){.grid{grid-template-columns:1fr}}
.card{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:24px}
.card .ic{font-size:20px;margin-bottom:12px;display:block}
.card p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.62}
.card .tag{display:inline-block;margin-top:14px;font:700 10px var(--sans);
  letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-d);
  border:1px solid var(--line2);border-radius:20px;padding:4px 10px}

/* ---- pricing ---- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.price{background:var(--raise);border:1px solid var(--line);border-radius:12px;
  padding:28px 26px;display:flex;flex-direction:column}
.price.lead{border-color:var(--gold-d);background:var(--raise2)}
.price .name{font:700 13px var(--sans);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:14px}
.price .amt{font:400 40px/1 var(--serif);margin-bottom:4px}
.price .amt small{font-size:15px;color:var(--mut)}
.price .note{color:var(--dim);font-size:13.5px;margin:0 0 18px}
.price ul{list-style:none;margin:0 0 22px;padding:0;color:var(--mut);font-size:14.5px}
.price li{padding:7px 0;border-bottom:1px solid var(--line)}
.price li:last-child{border:0}
.price .btn{margin-top:auto;text-align:center}

/* ---- who ---- */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.who div p{color:var(--mut);font-size:14.5px;margin:0}

/* ---- closing ---- */
.close{text-align:center;padding:84px 0}
.close h2{max-width:22ch;margin:0 auto 16px}
.close .sub{margin:0 auto 30px}

/* ---- footer ---- */
footer{padding:44px 0 56px;color:var(--dim);font:400 13.5px/1.7 var(--sans)}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--mut);text-decoration:none}
footer a:hover{color:var(--text)}
.legal{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  max-width:74ch;color:var(--dim);font-size:12.5px;line-height:1.7}

@media (max-width:760px){
  nav a:not(.btn){display:none}
  .hero{padding:58px 0 48px}
  section{padding:54px 0}
}