*{box-sizing:border-box}html{scroll-behavior:smooth}
:root{--navy:#002040;--cyan:#00BFFF;--off:#F7FAFC;--coral:#FF6B6B}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0b1220;background:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef1f6;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}
.logo{height:28px}
.nav a{margin:0 10px;color:#0b1220;text-decoration:none;font-weight:600}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--cyan);color:#001220}
.btn-outline{border:2px solid var(--navy);color:var(--navy)}
.btn-ghost{background:transparent;border:1px solid #cfd8e3;color:#0b1220}
.menu-btn{display:none;background:none;border:none;font-size:22px}
.hero{background:linear-gradient(180deg,#f6fbff,transparent);padding:64px 0}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px;color:var(--navy)}
.accent{color:var(--cyan)}
.hero p{font-size:18px;color:#1c2742}
.cta-row{display:flex;gap:12px;margin:18px 0 10px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{background:#e7f7ff;color:#083a59;padding:6px 10px;border-radius:999px;font-size:12px}
.mockup img{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.section{padding:64px 0}
.section.alt{background:#fbfdff}
.section h2{font-size:28px;color:var(--navy);margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,0.04)}
.card h3{margin:0 0 8px;color:#0b1220}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.tick{line-height:1.8;margin:0;padding-left:18px}
.flow ol{margin:8px 0 0 18px;line-height:1.8}
.pricing{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
.price-card{background:#061a2e;color:#eaf6ff;border-radius:16px;padding:24px;border:1px solid #0f2e52}
.price{font-size:40px;margin:6px 0 10px}
.price span{font-size:14px;color:#a6c8e6}
.price-card .note{font-size:12px;color:#a6c8e6}
.faq details{background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:14px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700;color:#0b1220}
.form{display:grid;gap:10px}
.form label{display:grid;gap:6px;font-weight:600;color:#0b1220}
.form input,.form select{padding:12px;border:1px solid #cfd8e3;border-radius:10px}
.contact-card{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:20px}
.footer{background:#061a2e;color:#caddf2;padding:24px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer a{color:#b6d8ff;text-decoration:none;margin-left:12px}
/* mobile */
@media (max-width:900px){
  .grid,.grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .menu-btn{display:block}
  body.open .nav nav{display:block;position:absolute;top:64px;right:0;background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:10px;margin:10px}
  body.open .nav nav a{display:block;padding:8px 12px}
}
@media (max-width:560px){ .cards{grid-template-columns:1fr} .hero h1{font-size:34px} }
/* --- MatesInvest homepage refinements --- */

body {
  background: #f5f7fb;
}

.hero {
  padding: 3.5rem 0 2.5rem;
  background: radial-gradient(circle at top left, #e2ebff 0, #f5f7fb 55%);
}

.hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  color: #64748b;
  margin: 0 0 0.75rem 0;
}

.hero h1 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.hero-lead {
  margin-top: 0.2rem;
  margin-bottom: 1.1rem;
  color: #475569;
}

.badges .badge {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 999px;
  padding-inline: 0.75rem;
}

/* Make content cards feel consistent with hero */
.section .card,
.section .price-card,
.section .contact-card {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Slightly softer alt sections */
.section.alt {
  background: #edf2ff;
}
.hero-center {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* === Morning brief: dark-card styles (paste at end of styles.css) === */

/* Top meta (As of / source) */
.brief-top-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:rgba(255,255,255,0.55); /* muted light on dark */
  font-size:0.9rem;
}

/* Percent badges */
.brief-badge {
  display:inline-block;
  padding:4px 8px;
  border-radius:8px;
  font-weight:700;
  font-size:0.9rem;
}

.brief-badge.up {
  background:#052e1f;   /* very dark green background */
  color:#6ee7b7;        /* green text */
  border:1px solid rgba(110,231,183,0.14);
}

.brief-badge.down {
  background:#2a0b0b;   /* very dark red */
  color:#ffb4b4;        /* soft red text */
  border:1px solid rgba(255,180,180,0.06);
}

.brief-badge.neutral {
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.75);
}

.brief-badge.no-data {
  background:transparent;
  color:rgba(255,255,255,0.6);
  font-weight:600;
  border-radius:6px;
  padding:3px 6px;
  opacity:0.95;
}

/* Horizontal-friendly grid: encourage multiple columns on desktop */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 8px;
  align-items: start;
}

/* Card styling tuned for dark theme (clear border + soft shadow + hover lift) */
.card-metal {
  padding: 0.9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,24,40,0.84), rgba(12,14,26,0.78));
  border: 1px solid rgba(255,255,255,0.04); /* subtle light border on dark bg */
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    0 12px 30px rgba(2,6,23,0.45), /* main drop */
    0 1px 0 rgba(255,255,255,0.02) inset; /* tiny inset highlight */
  min-height: 84px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Little hover lift for desktop */
.card-metal:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 44px rgba(2,6,23,0.55),
    0 2px 0 rgba(255,255,255,0.03) inset;
}

/* Head / price area inside card; align items center for neat horizontal layout */
.metal-head {
  display:flex;
  justify-content:space-between;
  align-items:center; /* center vertically */
  gap:8px;
}

/* Left column: name */
.metal-name {
  font-size:0.92rem;
  color:rgba(255,255,255,0.85); /* lighter heading */
}

/* Main price */
.metal-price {
  font-weight:800;
  font-size:1.05rem;
  color:#ffffff; /* main price white */
  margin-top:6px;
}

/* Secondary text (units, USD) */
.metal-sub {
  font-size:0.85rem;
  color:rgba(255,255,255,0.55); /* muted */
}

/* USD secondary text styling */
.metal-sub.usd { color:rgba(255,255,255,0.46); font-weight:600; }

/* Optional compact narrative (kept small) */
.metal-note { color:rgba(255,255,255,0.6); font-size:0.92rem; }

/* Responsive behaviour:
   - Very wide screens: grid uses the min width so multiple cards in a row
   - Medium screens: two columns for a horizontal feel
   - Small screens: single column and hide USD
*/
@media (max-width: 1100px) and (min-width: 800px) {
  .brief-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 799px) {
  .brief-grid { grid-template-columns: 1fr; }
  .metal-sub.usd { display: none; } /* keep mobile tidy */
}
/* Overlay */
.mi-ins-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55); /* slate-ish overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Modal */
.mi-ins-modal {
  background: #0b1020;
  color: #f9fafb;
  border-radius: 18px;
  max-width: 700px;
  width: 100%;
  padding: 20px 22px 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.25);
  position: relative;
}

/* Close button */
.mi-ins-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
}
.mi-ins-close:hover {
  color: #e5e7eb;
}

/* Header */
.mi-ins-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.mi-ins-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.mi-ins-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #9ca3af;
}

/* Price block */
.mi-ins-price-block {
  text-align: right;
}

.mi-ins-price {
  font-size: 20px;
  font-weight: 600;
}

.mi-ins-change {
  font-size: 13px;
  margin-top: 2px;
}

.mi-ins-change.up {
  color: #4ade80; /* green-ish */
}

.mi-ins-change.down {
  color: #f97373; /* red-ish */
}

.mi-ins-date {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
}

/* Tags */
.mi-ins-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.mi-ins-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.85);
  color: #e5e7eb;
  border: 1px solid rgba(55, 65, 81, 0.9);
}

/* Sections */
.mi-ins-section {
  margin-bottom: 14px;
}

.mi-ins-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #d1d5db;
}

/* Stats grid */
.mi-ins-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.mi-ins-stat-item {
  font-size: 12px;
}

.mi-ins-stat-label {
  color: #9ca3af;
  display: block;
  margin-bottom: 2px;
}

.mi-ins-stat-value {
  font-weight: 500;
}

/* History placeholder */
.mi-ins-history-summary {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.mi-ins-history-placeholder {
  font-size: 11px;
  color: #6b7280;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(75, 85, 99, 0.8);
}

/* Mobile */
@media (max-width: 640px) {
  .mi-ins-modal {
    margin: 10px;
    padding: 16px 14px 18px;
  }

  .mi-ins-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mi-ins-price-block {
    text-align: left;
  }

  .mi-ins-stats-grid {
    grid-template-columns: 1fr;
  }
}