/* Marquez Holdings & Ventures — site styles
   Self-contained, no external fonts or frameworks: the page must render the
   same on a phone in a tunnel as it does on a desk. */

:root{
  --bg:#080b11; --bg-2:#0a0e14; --surface:#0e1620; --surface-2:#111c28;
  --line:#1c2836; --line-2:#26384b;
  --ink:#e6ecf5; --ink-2:#a8b6c9; --ink-3:#6e7f96;
  --gold:#d4af37; --gold-2:#e8c65a; --accent:#5b8cff;
  --radius:14px; --radius-lg:20px;
  --maxw:1120px;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 600px at 12% -8%, rgba(212,175,55,.075), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(91,140,255,.06), transparent 62%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.narrow{max-width:820px}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(8,11,17,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:baseline; gap:12px}
.mark{
  font-size:1.06rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:400; white-space:nowrap;
}
.brand small{
  color:var(--ink-3); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}
nav.top{display:flex; gap:32px}
nav.top a{
  color:var(--ink-2); font-size:.83rem; letter-spacing:.11em; text-transform:uppercase;
  padding:6px 0; border-bottom:1px solid transparent; transition:color .18s,border-color .18s;
}
nav.top a:hover{color:var(--gold); border-bottom-color:var(--gold)}

/* ---------- hero ---------- */
.hero{padding:104px 0 76px}
.eyebrow{
  color:var(--gold); font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  display:block; margin-bottom:22px;
}
.hero h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,5.1vw,3.5rem);
  line-height:1.14; letter-spacing:-.015em; color:#fff; max-width:19ch;
}
.hero p.lede{
  margin-top:26px; font-size:1.09rem; color:var(--ink-2); max-width:62ch;
}
.rule{height:1px; background:linear-gradient(90deg,var(--gold),transparent 72%); margin:44px 0 0; max-width:420px}

/* ---------- section furniture ---------- */
section{padding:76px 0}
.sec-head{margin-bottom:44px}
.sec-head h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3.3vw,2.15rem);
  color:#fff; letter-spacing:-.01em;
}
.sec-head p{margin-top:14px; color:var(--ink-2); max-width:64ch}
.sec-head .eyebrow{margin-bottom:14px}

/* ---------- venture cards ---------- */
.ventures{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:26px}
.venture{
  background:linear-gradient(168deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 32px 30px; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.venture:hover{border-color:var(--line-2); transform:translateY(-2px)}
.vtop{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px}
.glyph{
  width:46px; height:46px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-family:var(--serif); font-size:1.32rem;
  border:1px solid var(--line-2); background:#0b131d;
}
.glyph.gold{color:var(--gold); border-color:rgba(212,175,55,.34)}
.glyph.blue{color:var(--accent); border-color:rgba(91,140,255,.32)}
.pill{
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line-2); border-radius:100px; padding:4px 12px;
  white-space:nowrap;
}
.venture h3{font-size:1.34rem; font-weight:600; color:#fff; letter-spacing:-.01em}
.venture .kind{color:var(--ink-3); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-top:6px}
.venture p.desc{color:var(--ink-2); margin-top:18px; font-size:.95rem}
.feats{list-style:none; margin:22px 0 0; display:flex; flex-direction:column; gap:11px}
.feats li{position:relative; padding-left:20px; color:var(--ink-2); font-size:.9rem}
.feats li::before{
  content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--gold); opacity:.8;
}
.actions{margin-top:auto; padding-top:28px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:11px 22px; border-radius:9px; font-size:.86rem;
  letter-spacing:.05em; border:1px solid transparent; transition:background .18s,border-color .18s,color .18s;
  white-space:nowrap;
}
.btn.primary{background:var(--gold); color:#12161d; font-weight:600}
.btn.primary:hover{background:var(--gold-2)}
.btn.ghost{border-color:var(--line-2); color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- principles ---------- */
.principles{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px}
.principle{border-top:1px solid var(--line); padding-top:24px}
.principle h4{color:#fff; font-size:1rem; font-weight:600; margin-bottom:10px}
.principle p{color:var(--ink-2); font-size:.92rem}
.principle .num{color:var(--gold); font-size:.72rem; letter-spacing:.24em; display:block; margin-bottom:14px}

/* ---------- product page ---------- */
.phero{padding:82px 0 56px; border-bottom:1px solid var(--line)}
.crumb{color:var(--ink-3); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:26px}
.crumb a:hover{color:var(--gold)}
.phero h1{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.6vw,3rem); color:#fff; letter-spacing:-.015em}
.phero .sub{margin-top:16px; color:var(--gold); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase}
.phero p.lede{margin-top:24px; color:var(--ink-2); font-size:1.06rem; max-width:66ch}
.capabilities{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:26px; margin-top:8px}
.cap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px}
.cap h4{color:#fff; font-size:1rem; margin-bottom:10px; font-weight:600}
.cap p{color:var(--ink-2); font-size:.92rem}
.note{
  background:linear-gradient(170deg,#101a26,#0c141d); border:1px solid var(--line);
  border-left:2px solid var(--gold); border-radius:var(--radius); padding:28px 30px; margin-top:44px;
}
.note h4{color:#fff; font-size:1rem; margin-bottom:12px}
.note p{color:var(--ink-2); font-size:.94rem}
.note p + p{margin-top:12px}
.disclaimer{margin-top:38px; color:var(--ink-3); font-size:.84rem; border-top:1px solid var(--line); padding-top:22px}
.cta{
  margin-top:46px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
dl.specs{margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px}
dl.specs div{border-top:1px solid var(--line); padding-top:16px}
dl.specs dt{color:var(--ink-3); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase}
dl.specs dd{color:var(--ink); margin-top:8px; font-size:.95rem}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); padding:52px 0 60px; margin-top:30px}
.fgrid{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:flex-start}
footer.site .mark{font-size:.95rem}
footer.site p{color:var(--ink-3); font-size:.86rem; margin-top:12px; max-width:46ch}
.flinks{display:flex; flex-direction:column; gap:10px}
.flinks a{color:var(--ink-2); font-size:.87rem}
.flinks a:hover{color:var(--gold)}
.fbottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-3); font-size:.78rem}

/* ---------- comparison table ---------- */
.table-wrap{overflow-x:auto; margin-top:38px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table.cmp{width:100%; border-collapse:collapse; font-size:.87rem; min-width:660px}
table.cmp th,table.cmp td{padding:14px 17px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{color:var(--gold); font-weight:600; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; background:#0b131d}
table.cmp tbody th{color:var(--ink-3); font-weight:400; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap}
table.cmp tbody td{color:var(--ink-2)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody tr:hover td{color:var(--ink)}

@media (max-width:720px){
  nav.top{gap:20px}
  .brand small{display:none}
  .hero{padding:70px 0 52px}
  .venture{padding:28px 24px 26px}
  section{padding:56px 0}
  table.cmp{min-width:560px}
}