
/* Triumph Vending — Light Theme */

:root{
  /* Core palette */
  --bg:#ffffff;          /* page background */
  --text:#0b0b0b;        /* primary text (near-black for readability) */
  --muted:#5b5b5b;       /* secondary text */
  --gold:#c8a24a;        /* brand gold */
  --gold-dark:#a8862e;   /* hover/pressed gold */
  --card:#f8f8f8;        /* light card background */
  --border:#e5e5e5;      /* light borders */
  --shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block;border-radius:12px}
.container{width:min(1100px,92vw);margin-inline:auto}
h1,h2,h3,h4{font-family:Merriweather,Georgia,serif;color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.9}

/* Header (light, floating) */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;object-fit:contain}
.brand-name{font-weight:700;letter-spacing:.3px}
.brand-tag{display:block;font-size:.8rem;color:var(--muted);margin-top:-2px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{padding:8px 10px;border-radius:8px}
.nav a:hover{background:var(--card)}

/* Buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;
  font-weight:700;border:1px solid var(--border);color:var(--text);
  transition:.2s transform, .2s background, .2s border-color;
  box-shadow:none;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#000;border-color:transparent}
.btn-gold:hover{background:var(--gold-dark)}
.btn-outline{background:#fff}
.btn-outline:hover{background:#f4f4f4}

/* Hero */
.hero{
  padding:48px 0 12px;border-bottom:1px solid var(--border);
  background:linear-gradient(0deg,#ffffff 0%, #fafafa 100%);
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-copy h1{font-size:clamp(1.8rem,3.3vw,3rem);margin:.2em 0}
.cta-group{display:flex;gap:12px;margin:14px 0 10px}
.trust-badges{
  display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:10px 0 0;list-style:none
}
.trust-badges li{
  background:#fff;border:1px solid var(--border);
  padding:8px 12px;border-radius:999px;font-size:.9rem;
  box-shadow: var(--shadow);
}

/* Sections */
.highlights{padding:38px 0}
.grid-3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--border);padding:18px;border-radius:16px;
  box-shadow: var(--shadow);
}
.split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;padding:28px 0
}
.tables{display:grid;gap:16px;margin:8px 0 18px}
.table{
  width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;box-shadow: var(--shadow);
}
.table caption{
  padding:10px;font-weight:700;text-align:left;background:#f7f7f7;border-bottom:1px solid var(--border)
}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border)}
.table thead th{background:#f7f7f7}
.process{padding:10px 0 38px}
.step{
  background:#fff;border:1px solid var(--border);padding:18px;border-radius:16px;position:relative;
  box-shadow: var(--shadow);
}
.step-num{
  position:absolute;top:-12px;left:-12px;background:var(--gold);color:#000;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;font-weight:800;border:1px solid #00000012
}

/* CTA */
.cta{padding:30px 0 60px}
.cta-box{
  background:linear-gradient(135deg,#ffffff 0%, #f7f7f7 100%);
  border:1px solid var(--border);padding:28px;border-radius:18px;text-align:center;
  box-shadow: var(--shadow);
}

/* Page hero */
.page-hero{
  padding:30px 0;border-bottom:1px solid var(--border);
  background:linear-gradient(0deg,#ffffff 0%, #fafafa 100%);
}
.page-hero h1{margin:0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;padding:26px 0 40px}
.contact-card,.form-card{
  background:#fff;border:1px solid var(--border);padding:18px;border-radius:16px;
  box-shadow: var(--shadow);
}
.contact-list{list-style:none;padding:0;margin:0 0 10px}
.map-embed iframe{
  width:100%;height:260px;border:0;border-radius:12px;box-shadow: var(--shadow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--text)}
.form-grid input,.form-grid select,.form-grid textarea{
  background:#fff;border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:10px;font:inherit;box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.form-grid select[multiple]{height:90px}
.full{grid-column:1/-1}
.consent{font-weight:400}
.actions{display:flex;align-items:center;gap:16px;margin-top:8px}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);padding:26px 0 10px;margin-top:30px;background:#fff
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .6fr;gap:18px}
.list-plain{list-style:none;padding:0;margin:0}
.copyright{text-align:center;padding-top:10px;color:var(--muted);}

/* Responsive */
@media (max-width: 900px){
  .hero-inner,.split,.contact-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav{gap:10px}
}
