:root { color-scheme: light; --ink:#171407; --muted:#6f6a5e; --paper:#fffaf0; --panel:#ffffff; --navy:#171407; --blue:#1d4ed8; --mint:#16a085; --amber:#ffbf16; --gold:#ffd84d; --line:rgba(23,20,7,.14); --soft:#fff3c7; --shadow:0 22px 58px rgba(62,45,8,.16); }
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; font-family:Inter, Arial, Helvetica, sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:12px clamp(16px,4vw,58px); background:rgba(251,250,246,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:900; font-size:20px; }
.brand-logo { width:38px; height:38px; border-radius:7px; object-fit:cover; }
nav { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; color:var(--muted); font-weight:800; }
.header-cta,.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 18px; border-radius:7px; background:var(--navy); color:#fff; font-weight:900; box-shadow:0 10px 24px rgba(31,54,85,.2); transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.header-cta:hover,.button:hover { transform:translateY(-2px); background:#080704; box-shadow:0 16px 34px rgba(255,191,22,.25); }
.button.light { background:#fff; color:var(--navy); border:1px solid var(--line); box-shadow:none; }
.hero { min-height:calc(100vh - 69px); display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.85fr); gap:clamp(26px,5vw,78px); align-items:center; padding:clamp(38px,6vw,82px) clamp(16px,5vw,78px); background:linear-gradient(135deg,#f9f4e8 0%,#eef6f8 55%,#f8fbf4 100%); }
.hero-copy,.hero-insights,.control-deck,.route-board,.job-card { min-width:0; max-width:100%; }
.hero-copy { max-width:680px; }
.eyebrow { margin:0 0 12px; color:var(--blue); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hero h1,.page h1,.article-page h1 { margin:0; line-height:1.04; letter-spacing:0; overflow-wrap:break-word; font-size:clamp(36px,5.2vw,64px); }
.hero p,.section-lead { color:var(--muted); font-size:clamp(17px,2vw,21px); max-width:760px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.control-deck { position:relative; width:100%; max-width:560px; padding:18px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:8px; }
.deck-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.status-pill { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; background:#e9f8f4; color:#087765; font-weight:900; }
.route-board { margin-top:16px; padding:18px; border-radius:8px; background:#172033; color:#fff; }
.route-map { position:relative; height:230px; border-radius:7px; overflow:hidden; background:linear-gradient(135deg,#203653,#2f80ed); }
.route-map::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 34px); }
.route-line { position:absolute; left:34px; right:28px; top:112px; height:7px; border-radius:999px; background:linear-gradient(90deg,var(--amber),var(--mint)); transform:rotate(-16deg); }
.dot { position:absolute; width:18px; height:18px; border:4px solid #fff; border-radius:50%; background:var(--amber); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.dot.a { left:48px; top:134px; }
.dot.b { right:48px; top:76px; background:var(--mint); }
.job-card { display:grid; gap:12px; margin-top:14px; padding:16px; border-radius:7px; background:#fff; color:var(--ink); }
.job-card strong { font-size:20px; }
.mini-grid,.trust-row,.feature-grid,.plan-grid,.article-grid { display:grid; gap:18px; }
.mini-grid { grid-template-columns:repeat(3,1fr); }
.mini-grid div,.trust-row div,.feature,.plan,.article-card,.legal-card { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 22px rgba(31,54,85,.06); }
.mini-grid div { padding:13px; }
.mini-grid b,.trust-row strong { display:block; color:var(--navy); font-size:22px; line-height:1.15; }
.mini-grid small,.trust-row span { color:var(--muted); }
.trust-row { grid-template-columns:repeat(4,1fr); padding:24px clamp(16px,5vw,78px); background:#fff; border-block:1px solid var(--line); }
.section { padding:clamp(46px,7vw,90px) clamp(16px,5vw,78px); }
.section h2 { margin:0 0 12px; font-size:clamp(28px,4vw,48px); line-height:1.08; }
.feature-grid,.plan-grid,.article-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:26px; }
.feature,.plan,.legal-card { padding:22px; }
.feature h3,.plan h3,.article-card h2,.legal-card h2 { margin:0 0 8px; line-height:1.2; }
.split-band { display:grid; grid-template-columns:minmax(0,.8fr) minmax(340px,1fr); gap:28px; align-items:center; background:#e9eff5; }
.split-band img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.app-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.app-chip { display:inline-flex; min-height:38px; align-items:center; padding:0 14px; border-radius:7px; background:#fff; border:1px solid var(--line); color:var(--navy); font-weight:900; }
.note { color:var(--muted); font-size:14px; max-width:920px; }
.article-card { overflow:hidden; }
.article-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-card div { padding:18px; }
.article-card span { color:var(--blue); font-size:12px; font-weight:900; text-transform:uppercase; }
.cta-band { background:var(--navy); color:#fff; text-align:center; }
.cta-band .section-lead { color:#dce7f4; margin-inline:auto; }
.site-footer { display:flex; justify-content:space-between; gap:24px; padding:34px clamp(16px,5vw,78px); background:#131b29; color:#fff; }
.site-footer p { color:#c8d2df; max-width:560px; }
.site-footer nav { justify-content:flex-end; }
.whatsapp-float { position:fixed; right:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px); z-index:30; display:inline-flex; align-items:center; gap:10px; min-height:58px; padding:8px 16px 8px 8px; border-radius:999px; color:#fff; background:#1d9f72; box-shadow:0 18px 38px rgba(29,159,114,.28); }
.wa-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.18); font-weight:900; }
.whatsapp-float strong,.whatsapp-float small { display:block; line-height:1.15; }
.whatsapp-float small { opacity:.88; }
.page,.article-page { max-width:1000px; margin:0 auto; padding:clamp(38px,7vw,86px) 16px; }
.article-hero { margin:28px 0; }
.article-hero img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
.article-body { padding:clamp(22px,4vw,44px); background:#fff; border:1px solid var(--line); border-radius:8px; }
.article-body h2 { margin-top:28px; }
.legal-card { margin-top:18px; border-left:5px solid var(--blue); }
.legal-card a { color:var(--blue); font-weight:900; text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 880px) {
  .site-header { grid-template-columns:1fr; }
  nav { justify-content:flex-start; }
  .hero,.split-band { grid-template-columns:minmax(0,1fr); min-height:auto; width:100%; overflow:hidden; }
  .hero-copy,.hero-insights,.control-deck { width:100%; max-width:min(100%, 342px); }
  .hero p,.section-lead { max-width:342px; }
  .hero h1,.page h1,.article-page h1 { max-width:100%; font-size:32px; line-height:1.16; }
  .control-deck { padding:16px; }
  .whatsapp-float { padding-right:8px; }
  .whatsapp-float span:last-child { display:none; }
  .trust-row,.feature-grid,.plan-grid,.article-grid,.mini-grid { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; }
  .site-footer nav { justify-content:flex-start; }
}

@supports (animation-timeline: view()) {
  .feature,.plan,.article-card,.legal-card,.split-band img { animation: revealUp both; animation-timeline: view(); animation-range: entry 12% cover 32%; }
}
@keyframes revealUp { from { opacity:0; transform:translateY(26px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes heroZoom { from { transform:scale(1.08); } to { transform:scale(1); } }
@keyframes glassFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes shine { 0% { transform:translateX(-120%); } 55%,100% { transform:translateX(120%); } }
.site-header { background:rgba(255,255,255,.72); box-shadow:0 18px 45px rgba(12,24,38,.08); }
.header-cta,.button { position:relative; overflow:hidden; background:linear-gradient(135deg,#11100a,#3b2d08 48%,#ffbf16); color:#fff; }
.header-cta::after,.button::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent); animation:shine 4.8s ease-in-out infinite; }
.hero { position:relative; min-height:calc(100vh - 69px); color:#fff; isolation:isolate; background:#111827; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 76% 20%,rgba(255,216,77,.42),transparent 28%),linear-gradient(90deg,rgba(10,9,5,.94) 0%,rgba(29,23,8,.76) 44%,rgba(29,23,8,.18) 78%),url('/assets/rideracceptor/premium-hero-driver-phone.png') center/cover no-repeat; animation:heroZoom 1.4s ease-out both; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:34%; z-index:-1; background:linear-gradient(0deg,rgba(251,250,246,1),rgba(251,250,246,0)); }
.hero-copy { padding:clamp(20px,3vw,30px); border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(12,24,38,.36); box-shadow:0 28px 90px rgba(0,0,0,.28); backdrop-filter:blur(18px); }
.hero h1 { text-shadow:0 10px 40px rgba(0,0,0,.28); }
.hero p { color:#dce7f3; }
.hero .eyebrow { color:#ffd84d; }
.button.light { background:rgba(255,255,255,.94); }
.hero-insights { align-self:end; display:grid; gap:14px; margin-bottom:clamp(0px,6vh,56px); }
.hero-insights div { position:relative; overflow:hidden; padding:18px 20px; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(255,255,255,.14); color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.22); backdrop-filter:blur(18px); animation:glassFloat 5.8s ease-in-out infinite; }
.hero-insights div:nth-child(2) { animation-delay:.35s; }
.hero-insights div:nth-child(3) { animation-delay:.7s; }
.hero-insights div::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); transform:translateX(-120%); animation:shine 6s ease-in-out infinite; }
.hero-insights span { display:block; color:#ffd84d; font-weight:900; font-size:12px; letter-spacing:.12em; }
.hero-insights strong { display:block; margin-top:5px; font-size:22px; line-height:1.1; }
.hero-insights small { display:block; margin-top:6px; color:#dce7f3; line-height:1.4; }
.route-map { background:url('/assets/rideracceptor/night-shift-safety.png') center/cover no-repeat; }
.route-map::before { background:linear-gradient(135deg,rgba(23,32,51,.78),rgba(47,128,237,.3)); }
.trust-row { margin-top:-28px; position:relative; z-index:2; width:min(1180px,calc(100% - 32px)); margin-inline:auto; border:1px solid rgba(255,191,22,.42); border-radius:8px; box-shadow:0 24px 60px rgba(62,45,8,.18); }
.feature,.plan,.article-card,.legal-card { transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.feature:hover,.plan:hover,.article-card:hover { transform:translateY(-6px); border-color:rgba(47,128,237,.32); box-shadow:0 24px 55px rgba(31,54,85,.14); }
.feature h3::before,.plan h3::before { content:""; display:block; width:34px; height:4px; margin-bottom:12px; border-radius:999px; background:linear-gradient(90deg,#171407,var(--amber)); }
.split-band { position:relative; overflow:hidden; background:linear-gradient(135deg,#eef5ff,#fff8e8); }
.split-band img { box-shadow:0 30px 80px rgba(31,54,85,.18); }
.app-chip { box-shadow:0 8px 22px rgba(31,54,85,.07); transition:transform .18s ease, background .18s ease; }
.app-chip:hover { transform:translateY(-3px); background:#eef7ff; }
.article-card img { transition:transform .45s ease, filter .45s ease; }
.article-card:hover img { transform:scale(1.05); filter:saturate(1.08) contrast(1.04); }
.cta-band { background:linear-gradient(135deg,#11100a,#302407 58%,#d99a00); }
.hero-device { position:relative; align-self:center; width:min(100%,430px); justify-self:center; perspective:1200px; }
.phone-shell { position:relative; padding:18px; border:1px solid rgba(255,216,77,.36); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06)); box-shadow:0 34px 100px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(18px); transform:rotateY(-8deg) rotateX(4deg); animation:phoneFloat 6s ease-in-out infinite; }
.phone-shell::before { content:""; position:absolute; inset:9px; border-radius:22px; background:linear-gradient(180deg,#111827,#151207); z-index:-1; }
.phone-bar { display:flex; align-items:center; gap:10px; color:#fff; padding:10px 10px 18px; }
.phone-bar span { width:42px; height:5px; border-radius:999px; background:rgba(255,255,255,.32); }
.phone-bar b { flex:1; }
.phone-bar em { font-style:normal; font-size:11px; color:#171407; background:var(--gold); padding:4px 8px; border-radius:999px; font-weight:900; }
.accept-panel { position:relative; overflow:hidden; margin:4px 0 14px; padding:20px; min-height:158px; border-radius:18px; background:linear-gradient(135deg,#ffd84d,#ffb000 45%,#1d1710); color:#151207; }
.accept-panel small,.accept-panel strong { display:block; position:relative; z-index:1; }
.accept-panel small { font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.accept-panel strong { margin-top:10px; font-size:34px; line-height:1; }
.pulse-line { position:absolute; left:22px; right:22px; bottom:28px; height:7px; border-radius:999px; background:#151207; box-shadow:0 0 0 0 rgba(21,18,7,.35); animation:pulseGlow 1.8s ease-in-out infinite; }
.ride-stack { display:grid; gap:10px; }
.ride-stack div { display:flex; justify-content:space-between; gap:14px; padding:13px 14px; border-radius:14px; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); }
.ride-stack b { color:#ffd84d; }
.ride-stack span { color:#d8d3c7; font-size:13px; text-align:right; }
.phone-cta { margin-top:14px; min-height:48px; display:grid; place-items:center; border-radius:16px; color:#171407; background:#ffd84d; font-weight:1000; box-shadow:0 14px 34px rgba(255,191,22,.32); }
.orbit-card { position:absolute; display:grid; place-items:center; min-height:46px; padding:0 14px; border-radius:999px; background:#fff; color:#171407; font-weight:1000; box-shadow:0 18px 45px rgba(0,0,0,.2); animation:orbitFloat 5s ease-in-out infinite; }
.orbit-card.one { left:-22px; top:26%; }
.orbit-card.two { right:-18px; bottom:18%; animation-delay:.7s; }
.plan { position:relative; overflow:hidden; }
.plan::after { content:""; position:absolute; right:-32px; top:-32px; width:92px; height:92px; border-radius:50%; background:rgba(255,191,22,.18); }
@keyframes phoneFloat { 0%,100% { transform:rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform:rotateY(-3deg) rotateX(2deg) translateY(-12px); } }
@keyframes orbitFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(21,18,7,.35); } 50% { box-shadow:0 0 0 12px rgba(21,18,7,0); } }
.whatsapp-float { animation:glassFloat 4.8s ease-in-out infinite; }
body { background:#08090d; color:#f8f5ea; }
.site-header { background:rgba(8,9,13,.84); border-bottom:1px solid rgba(255,216,77,.2); box-shadow:0 18px 45px rgba(0,0,0,.22); }
.brand { color:#fff; }
nav { color:#c9c1ae; }
.hero::after { background:linear-gradient(0deg,rgba(8,9,13,1),rgba(8,9,13,0)); }
.button.light { color:#151207; border-color:rgba(255,216,77,.3); }
.trust-row { background:linear-gradient(180deg,#111217,#0a0b10); box-shadow:0 24px 70px rgba(0,0,0,.32); }
.trust-row strong { color:#ffd84d; }
.trust-row span { color:#c9c1ae; }
.section { background:#08090d; }
.section:nth-of-type(even) { background:#101116; }
.section h2,.page h1,.article-page h1 { color:#fff; }
.section p,.section-lead,.note { color:#c9c1ae; }
.feature,.plan,.article-card,.legal-card,.article-body { color:#f8f5ea; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border-color:rgba(255,216,77,.18); box-shadow:0 22px 70px rgba(0,0,0,.28); }
.feature p,.plan p,.article-card p,.legal-card p,.article-body p,.article-body li { color:#c9c1ae; }
.feature:hover,.plan:hover,.article-card:hover { border-color:rgba(255,216,77,.42); box-shadow:0 28px 76px rgba(0,0,0,.36); }
.split-band { background:linear-gradient(135deg,#090a0f,#16120a 56%,#241900); }
.app-chip { background:#15161d; border-color:rgba(255,216,77,.22); color:#f8f5ea; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.app-chip:hover { background:#201b10; }
.site-footer { background:#07080b; border-top:1px solid rgba(255,216,77,.16); }
.legal-card { border-left-color:#ffd84d; }
.legal-card a,.article-card span { color:#ffd84d; }
@media (max-width: 880px) {
  .hero { padding-top:34px; }
  .hero::before { background:linear-gradient(180deg,rgba(10,9,5,.9),rgba(29,23,8,.58) 56%,rgba(29,23,8,.24)),url('/assets/rideracceptor/premium-hero-driver-phone.png') center/cover no-repeat; }
  .hero-copy { padding:20px; background:rgba(12,24,38,.48); }
  .hero-insights { margin-bottom:0; }
  .hero-insights div { padding:15px 16px; }
  .trust-row { margin-top:0; width:100%; border-radius:0; }
  .hero-device { width:100%; max-width:342px; }
  .phone-shell { transform:none; border-radius:20px; animation:glassFloat 5s ease-in-out infinite; }
  .orbit-card { position:static; margin-top:10px; display:inline-grid; margin-right:8px; }
}