/* ═══════════════════════════════════════════════════
   ZEPHOR — SERVICES HUB CSS
   #110101 bg · #f15a24 accent · Playfair + Manrope
═══════════════════════════════════════════════════ */

/* ── Hero ── */
.services-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 8% 80px;
  overflow: hidden;
}
.services-hero::before {
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(241,90,36,.13) 0%, transparent 70%),
    radial-gradient(ellipse 35% 35% at 80% 75%, rgba(241,90,36,.06) 0%, transparent 60%);
  pointer-events:none;
}
.services-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,#f15a24,transparent);
}
.services-hero-inner { position:relative; z-index:1; max-width:820px; }
.services-eyebrow {
  font-size:.78rem; letter-spacing:6px; text-transform:uppercase; color:#f15a24; margin-bottom:20px;
  animation: fadeup .8s ease both;
}
.services-hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,7vw,6rem); font-weight:900; line-height:1.08; color:#fff; margin-bottom:24px;
  animation:fadeup .8s .15s ease both;
}
.services-hero-sub {
  font-size:clamp(.95rem,1.8vw,1.3rem); color:#bbb; line-height:1.8; max-width:600px; margin:0 auto;
  animation:fadeup .8s .3s ease both;
}
@keyframes fadeup { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── RVM Intro ── */
.rvm-intro { background:#fff; color:#111; padding:100px 8%; }
.rvm-intro-inner { max-width:1200px; margin:0 auto; }

.rvm-badge {
  display:inline-block; background:#f15a24; color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:4px; text-transform:uppercase;
  padding:6px 18px; border-radius:2px; margin-bottom:22px;
}
.rvm-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,5vw,4.5rem); font-weight:900; line-height:1.1; color:#110101; margin-bottom:20px;
}
.rvm-desc {
  font-size:clamp(.95rem,1.4vw,1.2rem); line-height:1.95; color:#444; max-width:720px; margin-bottom:56px;
}

/* RVM card */
.rvm-card {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  background:#110101; border-radius:20px; padding:56px; margin-bottom:56px; position:relative; overflow:hidden;
}
.rvm-card::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:280px; height:280px;
  background:radial-gradient(circle,rgba(241,90,36,.14) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
}
.rvm-card-visual { display:flex; justify-content:center; align-items:center; }
.rvm-machine-art  { position:relative; width:200px; height:360px; }
.rvm-machine-body {
  width:180px; height:340px;
  background:linear-gradient(180deg,#1e0505,#2a0808);
  border:2px solid #f15a24; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly;
  padding:20px 15px; position:relative;
  box-shadow:0 0 40px rgba(241,90,36,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.rvm-screen {
  width:100%; height:80px; background:#0a0000;
  border:1.5px solid rgba(241,90,36,.4); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.rvm-screen-inner { display:flex; flex-direction:column; align-items:center; gap:4px; }
.rvm-screen-icon { font-size:1.6rem; color:#f15a24; animation:glowpulse 2.5s ease-in-out infinite; }
.rvm-screen-text  { font-size:.48rem; letter-spacing:3px; color:#f15a24; opacity:.8; }
@keyframes glowpulse {
  0%,100%{text-shadow:0 0 6px rgba(241,90,36,.6)}
  50%    {text-shadow:0 0 22px rgba(241,90,36,1),0 0 42px rgba(241,90,36,.4)}
}
.rvm-slot-area,.rvm-dispenser { width:100%; display:flex; flex-direction:column; align-items:center; gap:5px; }
.rvm-slot-label,.rvm-dispenser-label { font-size:.4rem; letter-spacing:2px; color:#666; text-transform:uppercase; }
.rvm-slot         { width:70%; height:14px; background:#0a0000; border:1.5px solid rgba(241,90,36,.35); border-radius:4px; }
.rvm-dispenser-slot{ width:50%; height:8px; background:#0a0000; border:1.5px solid rgba(241,90,36,.2); border-radius:3px; }
.rvm-branding     { font-family:'Playfair Display',serif; font-size:.85rem; letter-spacing:6px; color:#f15a24; font-weight:700; }

.particle { position:absolute; width:8px; height:8px; border-radius:50%; background:#f15a24; opacity:0; animation:floatparticle 4s ease-in-out infinite; }
.p1{top:20%;left:-20px;animation-delay:0s}
.p2{top:50%;right:-20px;animation-delay:1s;width:5px;height:5px}
.p3{bottom:25%;left:-15px;animation-delay:2s;width:6px;height:6px}
.p4{top:35%;right:-10px;animation-delay:3s;width:4px;height:4px}
@keyframes floatparticle {
  0%{transform:translateY(0) scale(1);opacity:0}
  30%{opacity:.8}
  100%{transform:translateY(-60px) scale(.4);opacity:0}
}

.rvm-card-steps { color:#fff; }
.rvm-card-steps h3 { font-family:'Playfair Display',serif; font-size:1.8rem; color:#f15a24; margin-bottom:28px; }
.rvm-steps { list-style:none; display:flex; flex-direction:column; gap:22px; }
.rvm-steps li { display:flex; gap:18px; align-items:flex-start; }
.step-num { font-family:'Playfair Display',serif; font-size:2rem; font-weight:900; color:rgba(241,90,36,.35); line-height:1; flex-shrink:0; width:40px; }
.rvm-steps li strong { font-size:.95rem; font-weight:700; color:#fff; display:block; margin-bottom:3px; }
.rvm-steps li p      { font-size:.87rem; color:#aaa; line-height:1.6; }

.rvm-features { display:flex; flex-wrap:wrap; gap:12px; }
.rvm-feature {
  display:flex; align-items:center; gap:8px;
  background:rgba(241,90,36,.08); border:1px solid rgba(241,90,36,.25);
  color:#f15a24; font-size:.83rem; font-weight:600; padding:10px 18px; border-radius:50px;
  transition:background .2s, transform .2s;
}
.rvm-feature:hover { background:rgba(241,90,36,.18); transform:translateY(-2px); }
.rvm-feature-icon { font-size:.95rem; }

/* ── CSR Band ── */
.csr-band { background:#f15a24; padding:70px 8%; position:relative; overflow:hidden; }
.csr-band::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,.04) 40px,rgba(255,255,255,.04) 41px);
}
.csr-band-inner {
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:60px 1fr auto;
  gap:32px; align-items:center; position:relative; z-index:1;
}
.csr-icon { font-size:3rem; }
.csr-text .csr-label { font-size:.72rem; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.7); display:block; margin-bottom:8px; }
.csr-text h3 { font-family:'Playfair Display',serif; font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; color:#fff; margin-bottom:10px; }
.csr-text p  { font-size:clamp(.88rem,1.2vw,1rem); color:rgba(255,255,255,.88); line-height:1.8; }
.csr-btn {
  display:inline-block; background:#fff; color:#f15a24; font-size:.85rem; font-weight:800;
  letter-spacing:1px; padding:14px 28px; border-radius:8px; text-decoration:none; white-space:nowrap;
  transition:transform .2s, box-shadow .2s;
}
.csr-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15); }

/* ── Divider ── */
.section-divider {
  display:flex; align-items:center; gap:20px; padding:60px 8%; background:#110101;
}
.section-divider::before,.section-divider::after { content:''; flex:1; height:1px; }
.section-divider::before { background:linear-gradient(90deg,transparent,rgba(241,90,36,.35)); }
.section-divider::after  { background:linear-gradient(90deg,rgba(241,90,36,.35),transparent); }
.section-divider span { font-size:.75rem; letter-spacing:5px; text-transform:uppercase; color:#f15a24; white-space:nowrap; }

/* ── Portals Grid ── */
.portals-section { background:#110101; padding:0 8% 100px; }
.portals-inner { max-width:1200px; margin:0 auto; }
.portals-intro { font-size:clamp(.9rem,1.4vw,1.1rem); color:#777; line-height:1.85; max-width:680px; margin-bottom:56px; }
.portals-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; justify-items:stretch; }
.portal-card--centered { grid-column: 1 / -1; max-width: 600px; justify-self: center; width: 100%; }

.portal-card {
  background:#1a0303; border:1px solid #2a0808; border-radius:16px; padding:38px 32px;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .3s, transform .3s, box-shadow .3s; position:relative; overflow:hidden;
}
.portal-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,#f15a24,transparent); opacity:0; transition:opacity .3s;
}
.portal-card:hover { border-color:rgba(241,90,36,.55); transform:translateY(-6px); box-shadow:0 20px 60px rgba(241,90,36,.11); }
.portal-card:hover::before { opacity:1; }

.portal-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.portal-icon-wrap {
  width:52px; height:52px; background:rgba(241,90,36,.12); border:1px solid rgba(241,90,36,.25);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
}
.portal-icon    { width:28px; height:28px; color:#f15a24; }
.portal-num     { font-family:'Playfair Display',serif; font-size:3rem; font-weight:900; color:rgba(241,90,36,.18); line-height:1; }
.portal-featured-badge {
  display:inline-block; background:rgba(241,90,36,.15); border:1px solid rgba(241,90,36,.35);
  color:#f15a24; font-size:.65rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  padding:4px 12px; border-radius:2px; margin-bottom:10px; align-self:flex-start;
}
.portal-title { font-family:'Playfair Display',serif; font-size:1.45rem; font-weight:700; color:#fff; margin-bottom:12px; }
.portal-desc  { font-size:.88rem; color:#888; line-height:1.75; margin-bottom:22px; }
.portal-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:28px; flex:1; }
.portal-features li { font-size:.83rem; color:#bbb; padding-left:18px; position:relative; }
.portal-features li::before { content:'→'; position:absolute; left:0; color:#f15a24; font-size:.72rem; }
.portal-cta {
  color:#f15a24; font-size:.83rem; font-weight:700; letter-spacing:1px;
  border-bottom:1px solid rgba(241,90,36,.35); padding-bottom:2px; align-self:flex-start;
  transition:letter-spacing .2s, border-color .2s;
}
.portal-card:hover .portal-cta { letter-spacing:2px; border-color:#f15a24; }

/* ── Machine Contact ── */
.machine-contact { background:#fff; color:#110101; padding:100px 8%; }
.machine-contact-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.mc-eyebrow { font-size:.75rem; letter-spacing:5px; text-transform:uppercase; color:#f15a24; margin-bottom:14px; }
.mc-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; line-height:1.1; color:#110101; margin-bottom:18px; }
.mc-desc  { font-size:clamp(.88rem,1.2vw,1rem); color:#555; line-height:1.9; margin-bottom:28px; }
.mc-bullets { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.mc-bullet  { font-size:.88rem; color:#333; font-weight:600; }
.mc-link-btn {
  display:inline-block; background:#f15a24; color:#fff; font-size:.9rem; font-weight:700;
  padding:14px 32px; border-radius:8px; text-decoration:none; transition:background .2s, transform .15s;
}
.mc-link-btn:hover { background:#d44d1d; transform:translateY(-2px); }

.mc-visual-card {
  background:#110101; border-radius:16px; padding:40px 36px;
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid rgba(241,90,36,.15);
}
.mc-stat { display:flex; flex-direction:column; align-items:center; padding:28px 0; text-align:center; }
.mc-stat-n { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:900; color:#f15a24; }
.mc-stat-l { font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:#666; margin-top:6px; }
.mc-stat-divider { height:1px; background:rgba(241,90,36,.12); }

.white-section { background:#fff; width:100%; height:80px; }

/* ── Responsive ── */
@media(max-width:900px) {
  .portals-grid { grid-template-columns:1fr; max-width:520px; }
  .rvm-card { grid-template-columns:1fr; gap:36px; }
  .csr-band-inner { grid-template-columns:1fr; text-align:center; }
  .machine-contact-inner { grid-template-columns:1fr; gap:48px; }
}
@media(max-width:768px) {
  .services-hero { min-height:70vh; padding:90px 6% 60px; }
  .rvm-intro { padding:60px 6%; }
  .rvm-card  { padding:32px 22px; }
  .portals-section { padding:0 6% 60px; }
  .machine-contact { padding:60px 6%; }
  .section-divider { padding:40px 6%; }
}