/* =========================================================
   AiGo — simple homepage
   =========================================================

   The homepage is a service picker: a hero, the four services as
   cards, and enough of "how it works" to get someone to the app.
   Every service's detail lives on its own page, so nothing here
   needs to explain Ride Share or the school run in full.

   Loaded AFTER css/style.css, which still owns the header, the
   footer, the chat widget and every other page on the site. Only
   the homepage's own <main> is styled here.

   Every class is prefixed `sh-` (simple home). style.css already
   defines .container, .btn, .eyebrow, .vehicle-card and .nav, and
   an unprefixed name here would quietly inherit or override them.
   .container and .nav are the two deliberate reuses — the layout
   wrapper and the header — so they keep their existing names.

   Colours are the site's, not the mock-up's: amber #f5a623 and ink
   #152235, so the new hero sits under the existing header without
   looking like a different website.
   ========================================================= */

.simple-home {
    --sh-amber: #f5a623;
    --sh-amber-soft: #fff1d8;
    --sh-amber-deep: #b9791a;
    --sh-ink: #152235;
    --sh-ink-soft: #1f3046;
    --sh-muted: #667085;
    --sh-line: #e3e8ef;
    --sh-light: #f7f9fc;
    --sh-radius: 24px;
    --sh-shadow: 0 18px 50px rgba(21, 34, 53, 0.10);
}

/* =========================
   HERO
========================= */

.sh-hero {
    background:
        radial-gradient(1100px 460px at 82% 8%, #fff5e0 0%, rgba(255, 245, 224, 0) 62%),
        linear-gradient(135deg, #fffaf0 0%, #ffffff 46%, #fff3d9 100%);
    padding: 74px 0 62px;
    overflow: hidden;
}

.sh-hero-grid {
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: center;
    gap: 48px;
}

.sh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    border: 1px solid #f0dfb4;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--sh-ink);
    text-transform: uppercase;
}

.sh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sh-amber);
    flex: none;
}

.sh-hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -2px;
    margin: 20px 0 18px;
    color: var(--sh-ink);
    font-weight: 800;
}

.sh-hero h1 .sh-hl {
    color: var(--sh-amber-deep);
}

.sh-lede {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sh-muted);
    max-width: 34rem;
    margin: 0 0 28px;
}

.sh-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sh-btn {
    padding: 15px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

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

.sh-btn-primary {
    background: var(--sh-ink);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(21, 34, 53, 0.22);
}

.sh-btn-secondary {
    background: #ffffff;
    color: var(--sh-ink);
    border-color: var(--sh-line);
}

.sh-hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.sh-hero-stats div {
    font-size: 0.78rem;
    color: var(--sh-muted);
    font-weight: 600;
}

.sh-hero-stats strong {
    display: block;
    color: var(--sh-ink);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 2px;
}

/* Hero visual — a stack of service chips over an amber blob. Pure
   CSS on purpose: the homepage should not wait on a hero image. */

.sh-visual {
    position: relative;
    min-height: 400px;
}

.sh-orb {
    position: absolute;
    inset: 14px 10px 10px 16px;
    background: linear-gradient(140deg, var(--sh-amber) 0%, #ffc45e 100%);
    border-radius: 42% 58% 54% 46% / 44% 43% 57% 56%;
    transform: rotate(-3deg);
    opacity: 0.95;
}

.sh-stack {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 46px;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: var(--sh-shadow);
    padding: 20px;
    transform: rotate(1.5deg);
}

.sh-stack-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.sh-stack-head strong {
    font-size: 1.02rem;
    color: var(--sh-ink);
    font-weight: 800;
}

.sh-tag {
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--sh-amber-soft);
    color: var(--sh-amber-deep);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.sh-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: var(--sh-light);
    margin-bottom: 9px;
}

.sh-mini:last-child {
    margin-bottom: 0;
}

.sh-mini-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ffffff;
    object-fit: contain;
    padding: 4px;
    flex: none;
}

.sh-mini b {
    display: block;
    font-size: 0.88rem;
    color: var(--sh-ink);
}

.sh-mini small {
    display: block;
    font-size: 0.74rem;
    color: var(--sh-muted);
}

/* =========================
   SECTION FURNITURE
========================= */

.sh-section {
    padding: 76px 0;
}

.sh-section-tight {
    padding-top: 0;
}

.sh-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 34px;
}

.sh-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 800;
    color: var(--sh-amber-deep);
    margin-bottom: 8px;
}

.sh-head h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.7rem);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 0;
    color: var(--sh-ink);
    font-weight: 800;
}

.sh-head > p {
    max-width: 27rem;
    color: var(--sh-muted);
    line-height: 1.65;
    margin: 0;
    font-size: 0.95rem;
}

/* =========================
   SERVICE CARDS
========================= */

.sh-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.sh-service {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    padding: 28px 28px 76px;
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}

a.sh-service:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-shadow);
}

.sh-service-ride {
    background: linear-gradient(150deg, var(--sh-ink) 0%, var(--sh-ink-soft) 100%);
    border-color: var(--sh-ink);
    color: #ffffff;
}

.sh-service-school {
    background: linear-gradient(150deg, #fff6dd 0%, #ffffff 62%);
    border-color: #f0dfb4;
}

.sh-service-office {
    background: linear-gradient(150deg, #eef2f7 0%, #ffffff 62%);
}

.sh-service-soon {
    background: var(--sh-light);
    border-style: dashed;
}

/* The card's illustration — the same four service tiles the app shows in
   its startup picker, so the site and the app introduce the services with
   one set of pictures. 3:2, cropped, and the artwork's own yellow ground
   supplies the colour the emoji square used to. */
.sh-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 20px;
    background: var(--sh-amber-soft);
}

.sh-service h3 {
    font-size: 1.4rem;
    letter-spacing: -0.6px;
    margin: 0 0 9px;
    font-weight: 800;
}

.sh-service > p {
    color: var(--sh-muted);
    line-height: 1.62;
    font-size: 0.92rem;
    margin: 0 0 18px;
}

.sh-service-ride > p {
    color: #c3ccd8;
}

.sh-service ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
}

.sh-service li::before {
    content: "✓";
    color: var(--sh-amber);
    margin-right: 9px;
    font-weight: 800;
}

.sh-service-ride li {
    color: #e6ebf1;
}

.sh-go {
    position: absolute;
    left: 28px;
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--sh-amber-deep);
}

.sh-service-ride .sh-go {
    color: var(--sh-amber);
}

.sh-soon-tag {
    /* The card is a flex column, so an inline-block would still stretch to
       the full width — align-self is what keeps the pill pill-sized. */
    display: inline-block;
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: #ffffff;
    border: 1px solid var(--sh-line);
    color: var(--sh-muted);
    padding: 5px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.sh-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.sh-chip {
    background: #ffffff;
    border: 1px solid var(--sh-line);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sh-ink);
}

/* =========================
   SMART BAND
========================= */

.sh-band {
    background: var(--sh-ink);
    color: #ffffff;
    border-radius: 30px;
    padding: 44px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 42px;
    align-items: center;
}

.sh-band .sh-eyebrow {
    color: var(--sh-amber);
}

.sh-band h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -1px;
    line-height: 1.12;
    margin: 0;
    font-weight: 800;
}

.sh-band h2 span {
    color: var(--sh-amber);
}

.sh-band > div > p {
    color: #b6c0cc;
    line-height: 1.68;
    margin: 16px 0 0;
    font-size: 0.95rem;
}

.sh-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sh-flow-item {
    background: #1e2f45;
    border: 1px solid #2b3d54;
    border-radius: 18px;
    padding: 20px;
}

.sh-flow-item b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--sh-amber);
    color: var(--sh-ink);
    font-size: 0.74rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.sh-flow-item strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
}

.sh-flow-item span {
    display: block;
    color: #9dabbb;
    font-size: 0.8rem;
    line-height: 1.55;
}

/* =========================
   STEPS
========================= */

.sh-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.sh-step {
    padding: 26px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--sh-line);
}

.sh-num {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--sh-amber-soft);
    color: var(--sh-amber-deep);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 18px;
}

.sh-step h3 {
    margin: 0 0 7px;
    font-size: 1.08rem;
    color: var(--sh-ink);
    font-weight: 800;
}

.sh-step p {
    margin: 0;
    color: var(--sh-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================
   CLOSING CTA
========================= */

.sh-cta {
    background: linear-gradient(135deg, var(--sh-amber) 0%, #ffc45e 100%);
    border-radius: 30px;
    padding: 50px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: hidden;
}

.sh-cta h2 {
    max-width: 34rem;
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--sh-ink);
    font-weight: 800;
}

.sh-cta p {
    color: #6b4d12;
    margin: 12px 0 0;
    line-height: 1.6;
    max-width: 34rem;
    font-size: 0.95rem;
}

.sh-cta-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.sh-cta .sh-btn-primary {
    white-space: nowrap;
}

/* =========================
   NARROW-SCREEN SAFETY
=========================

   Grid and flex children default to min-width:auto, which is the width of
   their longest unbreakable word. Sinhala and especially Tamil produce
   single words far longer than English ones — "நிர்வகியுங்கள்" in a
   half-width tile on a 375px phone pushed the whole band 55px past the
   viewport — so every tile is told it may shrink, and long words are
   allowed to break rather than force the page wide. */

.sh-service,
.sh-step,
.sh-flow-item,
.sh-mini,
.sh-hero-stats div {
    min-width: 0;
    overflow-wrap: break-word;
}

.sh-hero h1,
.sh-head h2,
.sh-band h2,
.sh-cta h2,
.sh-lede,
.sh-service h3,
.sh-step h3 {
    overflow-wrap: break-word;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
    .sh-hero {
        padding: 52px 0 46px;
    }

    .sh-hero-grid,
    .sh-services,
    .sh-band,
    .sh-flow,
    .sh-steps {
        grid-template-columns: 1fr;
    }

    .sh-band {
        padding: 32px 26px;
    }

    .sh-head {
        display: block;
    }

    .sh-head > p {
        margin-top: 14px;
        max-width: none;
    }

    .sh-cta {
        display: block;
        padding: 38px 28px;
    }

    .sh-cta-buttons {
        margin-top: 24px;
    }

    .sh-section {
        padding: 56px 0;
    }

    .sh-section-tight {
        padding-top: 0;
    }

    /* The hero card is absolutely positioned so it can sit over the blob on
       a wide screen. Stacked on a phone there is nothing to sit over, and
       keeping it out of flow let it grow past .sh-visual's fixed height and
       disappear under the next section. Put it back in the flow and let the
       visual size to it; the blob stays absolute, behind. */
    .sh-visual {
        min-height: 0;
        padding: 16px 0 4px;
    }

    /* relative, not static: back in the flow so the visual sizes to it, but
       still painted above the absolutely-positioned blob behind it.
       The offsets must be cleared with it — left/top still shift a relative
       box, and the inherited left:8% pushed the card past the right edge. */
    .sh-stack {
        position: relative;
        inset: auto;
        z-index: 1;
        transform: none;
    }
}

@media (max-width: 560px) {
    /* No .sh-visual min-height here: below 900px the card is in normal flow
       and the visual sizes to it, so a floor would only add dead space. */

    .sh-hero h1 {
        letter-spacing: -1.2px;
    }

    .sh-hero-stats {
        gap: 18px;
    }

    .sh-flow {
        grid-template-columns: 1fr 1fr;
    }

    .sh-flow-item {
        padding: 16px;
    }

    .sh-service {
        padding: 24px 22px 72px;
    }

    .sh-go {
        left: 22px;
    }
}