/* ====================================================================
   Rodeo Graphics — front-page.css
   Homepage-only sections. Nav, proof-bar, page-hero, final-cta and
   footer live in base.css and are shared with every other template.
   ==================================================================== */

/* ─── HERO ─── */
.hero {
  background: var(--white);
  padding: 5.5rem 5% 5rem;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--gray-100);
}
.hero::before {
  content: '';
  position: absolute; top: -120px; right: -80px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(210,30,63,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -80px; left: -60px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red-pale); color: var(--red);
  border: 1px solid var(--red-pale2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: var(--r-pill);
  margin-bottom: 1.25rem;
}
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--gray-900); margin-bottom: 1.25rem;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero-sub {
  font-size: 1.1rem; color: var(--gray-600); line-height: 1.78;
  margin-bottom: 2rem; max-width: 500px;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-social-proof { display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--gray-400); }
.hero-avatars { display: flex; }
.hero-avatar {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  background: var(--red-pale); color: var(--red);
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-left: -8px;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-proof-text { color: var(--gray-600); }
.hero-proof-text strong { color: var(--gray-900); }

.hero-panel { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-xl); padding: 1.75rem; position: relative; overflow: hidden; }
.hero-panel-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.hcard { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.hcard-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 0.25rem; }
.hcard-val { font-size: 1.6rem; font-weight: 900; color: var(--gray-900); line-height: 1; margin-bottom: 0.2rem; }
.hcard-sub { font-size: 0.72rem; font-weight: 600; }
.green-up { color: #16a34a; }
.red-accent { color: var(--red); }
.hcard-wide { background: var(--red); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.hcard-wide-left h4 { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
.hcard-wide-left p { font-size: 0.75rem; color: rgba(255,255,255,0.75); }
.hcard-wide-badge { background: rgba(255,255,255,0.2); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); white-space: nowrap; }
.hcard-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.htag { font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.65rem; border-radius: var(--r-pill); border: 1px solid var(--gray-200); color: var(--gray-600); background: var(--white); }
.htag-red { border-color: var(--red-pale2); color: var(--red); background: var(--red-pale); }

/* ─── TAILORED ─── */
.tailored-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.tc { border-radius: var(--r-xl); padding: 2.5rem; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.tc-1 { background: var(--gray-900); }
.tc-2 { background: var(--red); }
.tc-3 { background: var(--red-pale); border: 1px solid var(--red-pale2); }
.tc-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: var(--r-pill); margin-bottom: 0.8rem; }
.chip-on-dark { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
.chip-on-red  { background: rgba(255,255,255,0.2); color: #fff; }
.chip-on-pale { background: var(--red-pale2); color: var(--red); }
.tc h3 { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; }
.tc p  { font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.1rem; }
.tc-light h3, .tc-light p { color: #fff; }
.tc-light p { opacity: 0.82; }
.tc-link-w { font-size: 0.85rem; font-weight: 700; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.tc-link-w::after { content: '→'; transition: transform 0.15s; }
.tc-link-w:hover::after { transform: translateX(3px); }
.tailored-wide { margin-top: 1.25rem; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-xl); padding: 2rem 2.5rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.tailored-wide-text { flex: 1; min-width: 260px; }
.tailored-wide-text h3 { font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 900; margin-bottom: 0.4rem; color: var(--gray-900); }
.tailored-wide-text p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; }

/* ─── SERVICES (3x3 grid, dark) ─── */
.services-section { background: var(--gray-900); padding: 5rem 5%; }
.services-eyebrow { color: var(--red) !important; }
.services-title { color: #fff !important; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); overflow: hidden; margin-top: 2.5rem; }
.svc { background: var(--gray-900); padding: 2rem; border-right: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); transition: background 0.2s; }
.svc:hover { background: #1f2937; }
.svc:nth-child(3n) { border-right: none; }
.svc:nth-child(n+7) { border-bottom: none; }
.svc-icon { width: 44px; height: 44px; background: rgba(210,30,63,0.15); border: 1px solid rgba(210,30,63,0.3); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; }
.svc h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.45rem; }
.svc p  { font-size: 0.85rem; color: var(--gray-400); line-height: 1.65; margin-bottom: 0.9rem; }
.svc-link { font-size: 0.8rem; font-weight: 700; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.svc-link::after { content: '→'; transition: transform 0.15s; }
.svc-link:hover::after { transform: translateX(3px); }

/* ─── MANAGED ─── */
.managed-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.managed-feature { background: var(--red); border-radius: var(--r-xl); padding: 3rem; position: relative; overflow: hidden; }
.managed-feature::before { content:''; position:absolute; top:-50px; right:-50px; width:220px; height:220px; border-radius:50%; background: rgba(255,255,255,0.1); }
.managed-feature::after { content:''; position:absolute; bottom:-60px; right:30px; width:150px; height:150px; border-radius:50%; background: rgba(255,255,255,0.06); }
.managed-feature-inner { position:relative; z-index:1; }
.managed-feature h2 { font-family: 'Sora', sans-serif; font-size: 1.85rem; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 0.75rem; }
.managed-feature p { color: rgba(255,255,255,0.85); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1.5rem; }
.managed-small-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.mscard { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-xl); padding: 1.6rem 2rem; flex: 1; transition: border-color 0.15s; }
.mscard:hover { border-color: var(--red); }
.mscard-price { font-size: 1.1rem; font-weight: 900; color: var(--red); margin-bottom: 0.2rem; }
.mscard h3 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.4rem; }
.mscard p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 0.75rem; }
.mscard-link { font-size: 0.82rem; font-weight: 700; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.mscard-link::after { content: '→'; transition: transform 0.15s; }
.mscard-link:hover::after { transform: translateX(3px); }

/* ─── STATS ─── */
.stats-section { background: var(--red-pale); padding: 4.5rem 5%; border-top: 1px solid var(--red-pale2); border-bottom: 1px solid var(--red-pale2); }
.stats-inner { max-width: 1200px; margin: 0 auto; }
.stats-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 0.5rem; text-align: center; }
.stats-title { font-family: 'Sora', sans-serif; font-size: 2rem; font-weight: 900; color: var(--gray-900); text-align: center; margin-bottom: 3rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stat-item { text-align: center; }
.stat-num { font-size: 2.75rem; font-weight: 900; color: var(--red); line-height: 1; margin-bottom: 0.35rem; font-family: 'Sora', sans-serif; }
.stat-label { font-size: 0.875rem; color: var(--gray-600); font-weight: 500; }

/* ─── PORTFOLIO PREVIEW ─── */
.portfolio-section { background: var(--white); padding: 5rem 5%; }
.pf-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pf-card { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--gray-100); position: relative; display: block; }
.pf-card img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.35s; }
.pf-card:hover img { transform: scale(1.05); }
.pf-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(17,24,39,0.88) 0%, transparent 55%); opacity:0; transition: opacity 0.22s; display:flex; align-items:flex-end; padding:1.1rem; }
.pf-card:hover .pf-overlay { opacity:1; }
.pf-title { color:#fff; font-size:0.875rem; font-weight:600; }

/* ─── TESTIMONIALS ─── */
.t-section { background: var(--gray-50); padding: 5rem 5%; border-top: 1px solid var(--gray-100); }
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.tcard { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-xl); padding: 2rem; transition: box-shadow 0.2s, border-color 0.2s; }
.tcard:hover { border-color: var(--red-pale2); box-shadow: 0 4px 24px rgba(210,30,63,0.08); }
.t-stars { color: var(--yellow); font-size: 0.875rem; letter-spacing: 2px; margin-bottom: 0.75rem; }
.t-text { font-size: 0.9rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 1.25rem; font-style: italic; }
.t-author { display:flex; align-items:center; gap:10px; }
.t-av { width:40px; height:40px; border-radius:50%; background: var(--red-pale); color: var(--red); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; flex-shrink:0; border: 2px solid var(--red-pale2); }
.t-name { font-weight:700; color: var(--gray-900); font-size:0.9rem; }
.t-role { font-size:0.75rem; color: var(--gray-400); }

/* ─── BLOG PREVIEW ─── */
.blog-section { background: var(--white); padding: 5rem 5%; border-top: 1px solid var(--gray-100); }
.blog-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.bcard { background: var(--white); border:1px solid var(--gray-100); border-radius: var(--r-lg); overflow:hidden; transition: box-shadow 0.2s, border-color 0.2s; }
.bcard:hover { border-color: var(--gray-200); box-shadow: 0 4px 20px rgba(0,0,0,0.07); }
.bcard-img { aspect-ratio:16/9; overflow:hidden; background: var(--gray-100); display:block; }
.bcard-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.35s; }
.bcard:hover .bcard-img img { transform: scale(1.04); }
.bcard-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.bcard-body { padding:1.25rem; }
.btag { display:inline-block; font-size:0.67rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--red); background: var(--red-pale); border-radius: var(--r-pill); padding:0.2rem 0.6rem; margin-bottom:0.6rem; }
.bcard-body h3 { font-size:0.975rem; font-weight:700; margin-bottom:0.45rem; line-height:1.4; color: var(--gray-900); }
.bcard-body p { font-size:0.85rem; color: var(--gray-500); line-height:1.65; margin-bottom:0.75rem; }
.bcard-link { font-size:0.8rem; font-weight:700; color: var(--red); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.bcard-link::after { content:'→'; transition: transform 0.15s; }
.bcard-link:hover::after { transform: translateX(3px); }

/* ─── CLIENTS ─── */
.clients-section { background: var(--gray-900); padding: 3rem 5%; }
.clients-inner { max-width:1200px; margin:0 auto; text-align:center; }
.clients-label { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--gray-400); margin-bottom:1.5rem; }
.clients-row { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; align-items:center; }
.client-chip { font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--gray-400); opacity:0.55; transition:opacity 0.2s; padding: 0.35rem 0.85rem; border: 1px solid #374151; border-radius: var(--r-pill); }
.client-chip:hover { opacity:1; color:#fff; border-color: var(--red); }

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-panel { display:none; }
  .tailored-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .managed-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .pf-grid { grid-template-columns:1fr 1fr; }
  .t-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .services-grid { grid-template-columns:1fr; }
  .pf-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}