/* =========================================================================
   OMEI landing page
   -------------------------------------------------------------------------
   Loaded after main.css, so it only adds the sections that tell the OMEI
   story (fare bidding, zero commission, ride types, savings). The stock
   DriveMond styles still drive the header, footer and the CMS sections.

   Everything is scoped under .omei- prefixes so nothing here can leak into
   the admin panel or the other landing pages.
   ========================================================================= */

:root {
    --omei-green: #00BF64;
    --omei-green-dark: #048A4A;
    --omei-ink: #0E1512;
    --omei-ink-soft: #18211D;
    --omei-cream: #F5F7F3;
    --omei-amber: #FFB020;
    --omei-line: rgba(255, 255, 255, .12);
    /* text that sits on top of the accent colour */
    --omei-on-accent: #04251A;
    --omei-radius: 20px;
}

.omei-section {
    padding: 72px 0;
}

.omei-section--dark {
    background: var(--omei-ink);
    color: #fff;
}

.omei-section--cream {
    background: var(--omei-cream);
}

.omei-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 191, 100, .12);
    color: var(--omei-green);
    margin-bottom: 18px;
}

.omei-section--dark .omei-eyebrow {
    background: rgba(0, 191, 100, .18);
}

.omei-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
}

.omei-title em {
    font-style: normal;
    color: var(--omei-green);
}

.omei-lead {
    font-size: 17px;
    line-height: 1.65;
    opacity: .78;
    max-width: 620px;
}

/* ---- hero --------------------------------------------------------------- */

.omei-hero {
    background: radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--omei-green) 22%, var(--omei-ink)) 0%, transparent 60%), var(--omei-ink);
    color: #fff;
    padding: 84px 0 96px;
    overflow: hidden;
}

.omei-hero__title {
    font-size: clamp(34px, 5.2vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 20px;
}

.omei-hero__title em {
    font-style: normal;
    color: var(--omei-green);
}

.omei-hero__lead {
    font-size: 18px;
    line-height: 1.6;
    opacity: .8;
    max-width: 520px;
    margin-bottom: 30px;
}

.omei-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.omei-btn:hover {
    transform: translateY(-2px);
}

.omei-btn--primary {
    background: var(--omei-green);
    color: var(--omei-on-accent);
    box-shadow: 0 10px 30px rgba(0, 191, 100, .28);
}

.omei-btn--primary:hover {
    color: var(--omei-on-accent);
}

.omei-btn--ghost {
    border: 1px solid var(--omei-line);
    color: #fff;
}

.omei-btn--ghost:hover {
    color: #fff;
    border-color: var(--omei-green);
}

.omei-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--omei-line);
}

.omei-hero__stat b {
    display: block;
    font-size: 26px;
    font-weight: 700;
}

.omei-hero__stat span {
    font-size: 13px;
    opacity: .6;
}

/* the fare-offer card stack that shows bidding at a glance */
.omei-bid {
    background: var(--omei-ink-soft);
    border: 1px solid var(--omei-line);
    border-radius: 26px;
    padding: 22px;
    max-width: 380px;
    margin-left: auto;
}

.omei-bid__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    opacity: .6;
    margin-bottom: 14px;
}

.omei-bid__fare {
    background: rgba(0, 191, 100, .1);
    border: 1px dashed rgba(0, 191, 100, .45);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.omei-bid__fare small {
    display: block;
    font-size: 12px;
    opacity: .65;
    margin-bottom: 4px;
}

.omei-bid__fare b {
    font-size: 30px;
    font-weight: 700;
    color: var(--omei-green);
}

.omei-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--omei-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    animation: omei-rise .5s ease both;
}

.omei-offer:nth-child(2) { animation-delay: .15s; }
.omei-offer:nth-child(3) { animation-delay: .3s; }

@keyframes omei-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.omei-offer__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--omei-green), color-mix(in srgb, var(--omei-green) 55%, #000));
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--omei-on-accent);
    flex: none;
}

.omei-offer__name {
    font-size: 14px;
    font-weight: 600;
}

.omei-offer__meta {
    font-size: 12px;
    opacity: .6;
}

.omei-offer__price {
    margin-left: auto;
    font-weight: 700;
    font-size: 16px;
}

.omei-offer--accepted {
    border-color: var(--omei-green);
    background: rgba(0, 191, 100, .1);
}

/* ---- steps -------------------------------------------------------------- */

.omei-step {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(14, 21, 18, .08);
    border-radius: var(--omei-radius);
    padding: 28px 24px;
}

.omei-step__num {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--omei-ink);
    color: var(--omei-green);
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-bottom: 18px;
}

.omei-step h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

.omei-step p {
    font-size: 15px;
    line-height: 1.6;
    opacity: .72;
    margin: 0;
}

/* ---- zero commission ---------------------------------------------------- */

.omei-zero {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}

.omei-zero b {
    font-size: clamp(64px, 11vw, 120px);
    font-weight: 800;
    line-height: .9;
    color: var(--omei-green);
    letter-spacing: -.04em;
}

.omei-zero span {
    font-size: 18px;
    font-weight: 600;
    opacity: .8;
}

.omei-check {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.omei-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    opacity: .85;
}

.omei-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--omei-green);
    box-shadow: inset 0 0 0 3px var(--omei-ink);
}

/* ---- ride types --------------------------------------------------------- */

.omei-ride {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(14, 21, 18, .08);
    border-radius: var(--omei-radius);
    padding: 26px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.omei-ride:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(14, 21, 18, .1);
}

.omei-ride__art {
    border-radius: 14px;
    background: var(--omei-cream);
    padding: 18px;
    margin-bottom: 20px;
}

.omei-ride__art svg {
    width: 100%;
    height: auto;
    display: block;
}

.omei-ride h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.omei-ride p {
    font-size: 15px;
    line-height: 1.6;
    opacity: .72;
    margin: 0 0 14px;
}

.omei-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 191, 100, .12);
    color: #07734A;
}

/* ---- calculator --------------------------------------------------------- */

.omei-calc {
    background: var(--omei-ink-soft);
    border: 1px solid var(--omei-line);
    border-radius: 26px;
    padding: 30px;
}

.omei-calc label {
    display: block;
    font-size: 13px;
    opacity: .65;
    margin-bottom: 8px;
}

.omei-calc input[type="range"] {
    width: 100%;
    accent-color: var(--omei-green);
    margin-bottom: 22px;
}

.omei-calc__value {
    font-weight: 700;
    color: var(--omei-green);
}

.omei-calc__result {
    background: rgba(0, 191, 100, .1);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    margin-top: 6px;
}

.omei-calc__result small {
    display: block;
    font-size: 13px;
    opacity: .7;
    margin-bottom: 6px;
}

.omei-calc__result b {
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 800;
    color: var(--omei-green);
}

/* ---- safety ------------------------------------------------------------- */

.omei-safety {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 26px;
}

.omei-safety__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(0, 191, 100, .12);
    color: var(--omei-green);
    display: grid;
    place-items: center;
    flex: none;
}

.omei-safety h5 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.omei-safety p {
    font-size: 15px;
    line-height: 1.6;
    opacity: .72;
    margin: 0;
}

/* ---- download ----------------------------------------------------------- */

.omei-download {
    background: linear-gradient(120deg, var(--omei-green) 0%, color-mix(in srgb, var(--omei-green) 80%, #000) 100%);
    border-radius: 28px;
    padding: 46px;
    color: var(--omei-on-accent);
}

.omei-download h3 {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    margin-bottom: 12px;
}

.omei-download p {
    font-size: 16px;
    opacity: .82;
    margin-bottom: 26px;
    max-width: 520px;
}

.omei-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--omei-ink);
    color: #fff;
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    margin: 0 10px 10px 0;
}

.omei-store:hover {
    color: #fff;
    opacity: .9;
}

.omei-store small {
    display: block;
    font-size: 11px;
    opacity: .7;
    font-weight: 400;
}

@media (max-width: 767px) {
    .omei-section { padding: 52px 0; }
    .omei-hero { padding: 58px 0 66px; }
    .omei-bid { margin: 32px auto 0; }
    .omei-download { padding: 30px 22px; }
}

/* main.css colours headings for light backgrounds; inside our dark sections
   they must follow the section, not the global rule. */
.omei-hero,
.omei-hero h1, .omei-hero h2, .omei-hero h3, .omei-hero h4, .omei-hero p, .omei-hero span,
.omei-section--dark,
.omei-section--dark h1, .omei-section--dark h2, .omei-section--dark h3,
.omei-section--dark h4, .omei-section--dark h5, .omei-section--dark p,
.omei-section--dark li, .omei-section--dark label, .omei-calc h4 {
    color: #fff;
}

.omei-hero__title em, .omei-title em, .omei-zero b,
.omei-calc__value, .omei-calc__result b, .omei-eyebrow {
    color: var(--omei-green);
}

.omei-download h3, .omei-download p, .omei-download {
    color: var(--omei-on-accent);
}

/* ---- hero bullet points ------------------------------------------------- */

.omei-hero__points {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.omei-hero__points li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    opacity: .72;
}

.omei-hero__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--omei-green);
}

/* ---- headline band ------------------------------------------------------ */

.omei-band {
    background: var(--omei-green);
    color: var(--omei-on-accent);
    padding: 16px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 42px;
    font-weight: 800;
    font-size: clamp(15px, 2.1vw, 22px);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---- earnings comparison ------------------------------------------------ */

.omei-calc__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
}

.omei-compare {
    border-top: 1px solid var(--omei-line);
    padding-top: 16px;
    margin-top: 6px;
}

.omei-compare__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    font-size: 15px;
}

.omei-compare__row span {
    opacity: .72;
}

.omei-compare__row b {
    font-weight: 700;
    white-space: nowrap;
}

.omei-compare__row--bad b {
    color: #FF6B6B;
}

/* ---- statistics --------------------------------------------------------- */

.omei-stat b {
    display: block;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--omei-green);
    line-height: 1.1;
}

.omei-stat span {
    font-size: 15px;
    opacity: .7;
}