/* ==========================================================================
   BeeOrder website styles
   Plain CSS (no build step). Values come from the Figma file
   "BeeOrder — Main Website Redesign".

   Direction note: the site works in Arabic (rtl) and English (ltr).
   We use "logical" properties (margin-inline-start, inset-inline-end,
   text-align: start ...) so the same CSS flips automatically.
   Physical properties (left/right) are only used where the design must
   stay the same in both languages, and they are commented.

   Contents
   1.  Design tokens
   2.  Base
   3.  Layout helpers
   4.  Buttons & badges
   5.  Section heading
   6.  Marquee
   7.  Navbar
   8.  Hero
   9.  Categories
   10. Ticker
   11. Cities
   12. Partners
   13. BeePRO banner
   14. Join us
   15. Footer
   16. Inner pages (terms, privacy, vulnerability, contact)
   17. Responsive (tablet & mobile)
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */

:root {
    /* Brand */
    --color-primary: #ff7a32;
    --color-primary-soft: #ffd6bf;
    --color-accent: #0e9da5;
    --color-accent-700: #0a6f75;

    /* Text */
    --color-ink: #263640;
    --color-ink-deep: #1b262d;
    --color-text-muted: #5d636b;
    --color-text-subtle: #78808a;
    --color-text-on-dark: #bcc1c4;
    --color-white: #ffffff;

    /* Surfaces & borders */
    --color-surface: #f6f8f9;
    --color-border: #e4e8ec;
    --color-border-strong: #d7dde3;
    --color-card-border: #eaedf0;

    /* Typography */
    --font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    /* Section backgrounds always span the full screen width.
       Content keeps the design's 48px side spacing and stops growing at 1440px on very large screens. */
    --container-width: 1440px;
    --container-gutter: 48px;

    /* Rounded corners where a white section meets an orange band */
    --band-radius: 48px;
    --band-cap-shadow: 0 -20px 26px -6px rgba(38, 54, 64, 0.5);

    /* Effects */
    --shadow-navbar: 0 8px 28px -4px rgba(38, 54, 64, 0.08);
    --shadow-hover: 0 16px 32px -12px rgba(38, 54, 64, 0.18);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* 2. Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px; /* keeps section titles visible below the fixed navbar */
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-ink);
    background: var(--color-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.skip-link {
    position: absolute;
    inset-inline-start: 16px;
    top: -100px;
    z-index: 100;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-ink);
    color: var(--color-white);
}

.skip-link:focus {
    top: 16px;
}


/* 3. Layout helpers
   ========================================================================== */

.page {
    overflow: hidden; /* hides the edges of the tilted ticker and the scrolling strips */
}

.container {
    width: min(100% - var(--container-gutter) * 2, var(--container-width));
    margin-inline: auto;
}


/* 4. Buttons & badges
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s, color 0.25s;
}

.button:hover {
    translate: 0 -2px;
}

.button--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.button--primary:hover {
    box-shadow: 0 12px 24px -10px rgba(255, 122, 50, 0.7);
}

.button--large {
    padding: 16px 32px;
    border-radius: 20px;
    font-size: 18px;
}

.button--outline {
    padding: 10px 20px;
    border-color: var(--color-ink);
    border-radius: 16px;
    background: var(--color-white);
    color: var(--color-ink);
}

.button--outline:hover {
    background: var(--color-ink);
    color: var(--color-white);
}

/* Square outlined icon button: store badges and social links */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 52px;
    height: 52px;
    border: 1px solid var(--color-ink);
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 14px;
    font-weight: 400;
    transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s, color 0.25s;
}

.icon-badge img {
    transition: filter 0.25s;
}

/* Outlined badges fill on hover: dark fill with a white icon */
.icon-badge:hover {
    translate: 0 -3px;
    box-shadow: var(--shadow-hover);
    background: var(--color-ink);
    color: var(--color-white);
}

.icon-badge:hover img {
    filter: brightness(0) invert(1); /* turns the dark icon white */
}

.icon-badge--small {
    width: 40px;
    height: 40px;
}

.store-badges {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Official App Store / Google Play badges.
   The artwork itself is never altered (both stores require that); only the link
   around it moves and lifts on hover. */
.store-badge {
    display: inline-flex;
    border-radius: 10px;
    transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.store-badge__art {
    display: block;
    height: var(--store-badge-height, 52px);
    width: auto;
}

.store-badge:hover {
    translate: 0 -3px;
    box-shadow: 0 14px 26px -14px rgba(38, 54, 64, 0.65);
}

.store-badge:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Footer variant: white outline on the dark background */
.store-badges--footer {
    gap: 12px;
}

.store-badges--footer .icon-badge,
.footer .icon-badge {
    width: 48px;
    height: 48px;
    border-color: var(--color-white);
    background: transparent;
}

.footer .icon-badge--small {
    width: 40px;
    height: 40px;
}

/* On the dark footer the fill is white with a dark icon */
.footer .icon-badge:hover {
    background: var(--color-white);
}

.footer .icon-badge:hover img {
    filter: brightness(0); /* turns the white icon dark */
}


/* 5. Section heading
   ========================================================================== */

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-heading--center {
    align-items: center;
    text-align: center;
}

.section-heading--start {
    align-items: flex-start;
    text-align: start;
}

.section-heading__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--color-ink);
}

.section-heading__decoration {
    display: inline-block;
    rotate: -4deg;
}

.section-heading__subtitle {
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.section-heading--light .section-heading__title,
.section-heading--light .section-heading__subtitle {
    color: var(--color-white);
}


/* 6. Marquee (endless scrolling strip — animation lives in animations.css)
   ========================================================================== */

.marquee {
    overflow: hidden;
}

.marquee__track {
    display: flex;
    width: max-content;
}

.marquee__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}


/* 6b. Doodle band (orange strip with the food pattern + white rounded caps)
   --------------------------------------------------------------------------
   The doodles are an SVG used as a CSS mask, so their color comes from
   --doodle-color and can be changed anywhere the band is used.
   ========================================================================== */

.band {
    --band-color: var(--color-primary);
    --doodle-image: url('../images/patterns/doodles.svg');
    --doodle-size: 310px;
    --doodle-opacity: 0.2;

    position: relative;
    isolation: isolate; /* keeps the pattern behind this band only */
    overflow: hidden; /* keeps the caps' shadows inside the band, off the white sections */
    background: var(--band-color);
}

/* The doodle drawing, used as-is from the SVG file */
.band__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--doodle-image) center / auto var(--doodle-size) repeat;
    opacity: var(--doodle-opacity);
}

/* Dark band: #263640 background with the #1B262D version of the pattern */
.band--dark {
    --band-color: var(--color-ink);
    --doodle-image: url('../images/patterns/doodles-dark.svg');
    --doodle-opacity: 1;
}

/* White rounded edges of the sections above and below, drawn over the band */
.band__cap {
    position: absolute;
    inset-inline: 0;
    height: var(--band-radius);
    background: var(--color-white);
}

.band__cap--top {
    top: 0;
    border-bottom-left-radius: var(--band-radius);
    border-bottom-right-radius: var(--band-radius);
    box-shadow: 0 18px 24px -8px rgba(38, 54, 64, 0.45);
}

.band__cap--bottom {
    bottom: 0;
    border-top-left-radius: var(--band-radius);
    border-top-right-radius: var(--band-radius);
    box-shadow: var(--band-cap-shadow);
}


/* 7. Navbar
   ========================================================================== */

.navbar {
    position: fixed;
    top: 24px;
    inset-inline: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 88px, var(--container-width) + 8px);
    margin-inline: auto;
    padding-block: 14px;
    /*
       The language button on the end is shorter than the download button
       beside it, so being centred already leaves it further from the top and
       bottom edges than from the side. Its half of the padding is given that
       difference back, which sets it exactly as far from the edge it hugs as
       it is from the two above and below it.
    */
    padding-inline: 28px 17.5px;
    border: 1px solid rgba(228, 232, 236, 0.7);
    border-radius: 24px;
    /* Glass effect: mostly see-through white + strong blur of what is behind */
    background: rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-navbar);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Inner pages: the navbar sits on a coloured band, so it needs a solid background */
.page--solid-navbar .navbar,
.page--solid-navbar .navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
}

/* Added by app.js once the visitor scrolls down */
.navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.6); /* still glassy, a bit more readable over busy sections */
    box-shadow: 0 12px 32px -8px rgba(38, 54, 64, 0.16);
}

/* أيقونة التطبيق: مربّعة، لذلك العرض والارتفاع متساويان */
.navbar__logo img {
    width: 40px;
    height: 40px;
}

.navbar__links {
    display: flex;
    gap: 34px;
}

.navbar__link {
    position: relative;
    padding-block: 12px 10px;
    font-weight: 400;
    color: var(--color-ink);
    transition: color 0.2s;
}

/* Orange underline, grows in for the active link */
.navbar__link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    scale: 0 1;
    transition: scale 0.3s var(--ease-out);
}

.navbar__link:hover,
.navbar__link.is-active {
    color: var(--color-primary);
}

.navbar__link.is-active {
    font-weight: 500;
}

.navbar__link.is-active::after {
    scale: 1 1;
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar__language {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--color-ink);
    border-radius: 12px;
    background: transparent; /* زجاج الناف بار يظهر من خلفه */
    font-weight: 400;
    transition: border-color 0.2s, color 0.2s;
}

.navbar__language:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* 8. Hero
   ========================================================================== */

.hero {
    position: relative;
    margin-top: 24px;
    /* Design proportion (1200 × 750). It stops growing once the stage below reaches its 1440px width. */
    height: min(62.5vw, 900px);
}

/*
 * The design artboard, centred on screen. The phone, the scribble and the text are
 * placed in % of this box, so they keep the same positions and sizes on every screen.
 */
.hero__stage {
    position: absolute;
    inset: 0;
    width: min(100%, var(--container-width));
    margin-inline: auto;
}

/* Orange strip across the lower part of the hero */
.hero__band {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 36.2%;
}

/* Yellow scribble behind the phone (physical left: same place in both languages) */
/* Sized to the box it fills in the design (slightly taller than the drawing's own shape) */
.hero__scribble {
    position: absolute;
    top: 6.6%;
    left: 4.2%;
    width: 40%;
    height: 78%;
}

/*
 * The phone reaches down into the white edge below, so it looks like it comes
 * out of it. Its own proportions come from the image file (aspect-ratio),
 * so a higher-resolution version can replace it without touching the CSS.
 */
.hero__phone {
    position: absolute;
    top: 14.2%;
    left: 10.4%;
    width: 30.6%;
    height: auto;
    aspect-ratio: 1060 / 1818;
}

/* White rounded edge of the next section, drawn over the phone */
.hero__cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--band-radius);
    border-top-left-radius: var(--band-radius);
    border-top-right-radius: var(--band-radius);
    background: var(--color-white);
    box-shadow: var(--band-cap-shadow);
}

/*
 * The phone sits on the LEFT of the stage, so the text always stays on the
 * RIGHT (physical "right") in both languages.
 */
/*
   The text column, centred in the white space beside the phone.

   The phone ends at 41% of the stage; the column is given what is left of it,
   keeping a small clear strip beside the phone and at the outer edge. It takes
   only the width it actually needs and lets its two automatic margins share
   out the rest, so it stays in the middle of the white area in either
   language, however long the words turn out to be.
*/
.hero__content {
    position: absolute;
    top: 16.8%;
    left: 42.5%;
    right: 1.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: fit-content;
    max-width: 56%;
    margin-inline: auto;
}

/*
   Arabic: the two lines share one grid, so "من" and "لـــ" sit in a column of
   their own and what follows them starts at the same place on both lines.
   The lines themselves have no box of their own (display: contents), which is
   what lets their words become cells of this grid.
*/
.hero__title {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 0.4em;
    font-size: clamp(34px, 4.6vw, 62px);
    font-weight: 700;
    line-height: 1.2;
}

.hero__title-line {
    display: contents;
}

/*
   English: "From" and "To" are of very different lengths, so a shared column
   would leave a hole after "To". Each line is simply read across instead, with
   an ordinary word space. The words are longer, so the type is a little smaller.
*/
[lang='en'] .hero__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: clamp(30px, 3.5vw, 48px);
}

[lang='en'] .hero__title-line {
    display: flex;
    gap: 0.26em;
}


.hero__title-highlight {
    position: relative;
    z-index: 0;
}

/* Hand-drawn orange underline below "وصل الطلب!" */
.hero__title-highlight::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline: -2%;
    bottom: -0.32em;
    height: 0.42em;
    background: url('../images/home/hero-underline.svg') center / 100% 100% no-repeat;
}

.hero__subtitle {
    /* Capped, so the paragraph is never what decides how wide the column is */
    max-width: 34em;
    font-size: 18px;
    line-height: 1.75;
    text-wrap: pretty; /* avoids leaving one word alone on the last line */
}

/* Direct download button + the two store badges, on one line */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}


/* 9. Categories
   ========================================================================== */

.categories {
    padding-bottom: 40px;
}

.categories .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.categories__cards {
    display: flex;
    align-items: center;
}

.category-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px;
    border: 2px solid var(--color-card-border);
    border-radius: 32px;
    background: var(--color-white);
    transition: translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.category-card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-hover);
}

.category-card__icon {
    width: 80px;
    height: 80px;
    margin-bottom: 6px;
    object-fit: contain;
}

.category-card__icon--small {
    width: 72px;
    height: 72px;
    margin: 4px 4px 10px;
}

/*
    Icon + big number on one line.
    "gap" is the space between them - change that one value to move them
    apart or closer, in Arabic and English at the same time.
    The numbers themselves are in config/beeorder.php.
*/
.category-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

/* The icon's own margins would be added to the gap, so they are cleared here */
.category-card__head .category-card__icon {
    margin: 0;
}

.category-card__count {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #d5dae0;
}

.category-card__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
}

.category-card__description {
    font-size: 16px;
    line-height: 1.5;
}

/* Middle "offers" card: orange, wider and taller */
.category-card--featured {
    flex: 0 0 538px;
    align-self: stretch;
    border: 0;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Decorative % signs, placed on the end side of the card */
.category-card__percents .percent {
    position: absolute;
}

.percent--large {
    bottom: 38px;
    inset-inline-end: 43px;
    --rotation: 8deg;
}

.percent--medium {
    bottom: 143px;
    inset-inline-end: 79px;
    --rotation: -22deg;
}

.percent--small {
    bottom: 189px;
    inset-inline-end: 26px;
    --rotation: 23deg;
}

.percent {
    rotate: var(--rotation);
}

.categories__ampersand {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-inline: -8px;
}

.categories__ampersand img {
    rotate: 8deg;
}


/* 10. Ticker
   ========================================================================== */

.ticker {
    margin-block: 40px 16px;
    padding-block: 24px;
    background: var(--color-primary);
    width: 104%;
    margin-inline: -2%;
    rotate: -2deg;
}

.ticker .marquee__group {
    gap: 40px;
    padding-inline-end: 40px;
}

.ticker__word {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
}


/* 11. Cities
   ========================================================================== */

.cities {
    padding-block: 40px 72px;
}

/*
    The landmarks stand side by side on one dashed line - a skyline with the
    delivery route running through it.

    --skyline-height is the height of every landmark box. All of them get the
    same height and keep their own width, which is what makes the row read as
    a skyline. Change that one value to make the landmarks bigger or smaller.
*/
.skyline {
    --skyline-height: 230px;
    --skyline-gap: 16px; /* space between the landmark and the dashed line */

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    margin-top: 48px;
    list-style: none;
}

.skyline__city {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*
    The columns touch each other (no gap), so the bottom borders join up into
    one continuous line under the whole row. The breathing space between the
    landmarks comes from the padding instead.
*/
.skyline__art {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: var(--skyline-height);
    padding-inline: 10px;
    padding-bottom: var(--skyline-gap);
    border-bottom: 2px dashed var(--color-border-strong);
}

/*
    Only the picture moves on hover. The box, its dashed border and the dot stay
    where they are, so the route keeps running straight through the whole row.
*/
.skyline__landmark {
    position: relative;
    z-index: 1; /* in front of the bee */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: translate 0.35s var(--ease-out);
}

/*
    The bee waits hidden behind the landmark and flies out to one side.

    The four values below are the ones to play with:
      --bee-distance  how far out she flies      (bigger = further from the landmark)
      --bee-lift      how high she ends up       (negative = up, positive = down)
      --bee-angle     how much she is tilted     (negative = nose up)
      --bee-size      how big she is
      --bee-side      which way she goes: 1 = right, -1 = left (set per city below)
*/
.skyline__bee {
    --bee-distance: 74px;
    --bee-lift: -14px;
    --bee-angle: -8deg;
    --bee-size: 64px;
    --bee-side: 1;

    position: absolute;
    bottom: 16%;
    left: 50%;
    z-index: 0;
    width: var(--bee-size);
    height: auto;
    opacity: 0;
    translate: -50% 0;
    rotate: var(--bee-angle);
    scale: calc(var(--bee-side) * -1) 1;
    transition: translate 0.5s var(--ease-out), opacity 0.3s var(--ease-out);
    pointer-events: none;
}

.skyline__city--damascus .skyline__bee {
    --bee-distance: -40px;
    --bee-angle: -12deg;
    --bee-lift: -88px;

}

.skyline__city--aleppo .skyline__bee {
    --bee-distance: -20px;
    --bee-angle: 0 deg;
    --bee-lift: -180px;

}

.skyline__city--homs .skyline__bee {
    --bee-distance: -20px;
    --bee-angle: 4 deg;
    --bee-lift: -80px;

}

.skyline__city--latakia .skyline__bee {
    --bee-distance: -80px;
    --bee-angle: 4 deg;
    --bee-lift: -20px;

}

.skyline__city--tartous .skyline__bee {
    --bee-distance: -80px;
    --bee-angle: 4 deg;
    --bee-lift: -20px;

}

/* Every second city sends the bee out the other way */
.skyline__city:nth-child(even) .skyline__bee {
    --bee-side: -1;
}

/*
    One city can have its own bee. Every city carries a class with its name
    (skyline__city--damascus, --aleppo, --homs, --latakia, --tartous), so a
    single city is changed without touching the other four:

        .skyline__city--homs .skyline__bee {
            --bee-distance: 50px;
            --bee-angle: -18deg;
        }

    Anything not written there keeps the value from the block above.
*/

/* Touch screens have no hover, so the bee can never come out: leave it out completely */
@media (hover: none) {
    .skyline__bee {
        display: none;
    }
}

/* The orange stop on the route, one per city */
.skyline__art::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    translate: -50% 0;
    border: 3px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    transition: scale 0.35s var(--ease-out);
}

.skyline__name {
    margin-top: 26px;
    font-size: 32px;
    font-weight: 700;
    transition: color 0.35s var(--ease-out);
}

/* Arabic letters look smaller at the same size, so they get their own step up */
[lang='ar'] .skyline__name {
    font-size: 36px;
}

.skyline__name-alt {
    font-size: 18px;
    color: var(--color-text-subtle);
}

/*
    Hover only on devices with a real pointer. A phone or tablet would keep the
    effect stuck on the last thing the visitor touched, so it is switched off there.
*/
@media (hover: hover) and (pointer: fine) {
    .skyline__city:hover .skyline__landmark {
        translate: 0 -12px;
    }

    .skyline__city:hover .skyline__art::after {
        scale: 1.25;
    }

    .skyline__city:hover .skyline__name {
        color: var(--color-primary);
    }

    /* The bee slides out from behind the landmark and stays still */
    .skyline__city:hover .skyline__bee {
        opacity: 1;
        translate: calc(-50% + (var(--bee-side) * var(--bee-distance))) var(--bee-lift);
    }
}


/* 12. Partners
   ========================================================================== */

.partners {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding-block: 104px 88px;
}

.partners__rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.partners .marquee__group {
    gap: 16px;
    padding-inline-end: 16px;
}

.partner-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 120px;
    height: 120px;
    border: 1px solid var(--color-border);
    border-radius: 32px;
    background: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-subtle);
}

/*
   The logo fills the whole tile. Partner artwork comes with its own
   background - black, white, yellow - so the thin border is what keeps it
   from running into the orange band behind it.
*/
.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 13. BeePRO banner
   ========================================================================== */

.pro {
    padding-block: 104px 48px;
}

.pro__container {
    position: relative;
}

.pro__band {
    display: flex;
    padding: 48px;
    border-radius: 48px;
    background: var(--color-accent) url('../images/home/pro-pattern.webp') center / cover no-repeat;
    color: var(--color-white);
}

/* Like the hero: the phone sits on the LEFT, so the text stays on the RIGHT in both languages */
.pro__content {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 58%; /* leaves room for the phone on the left */
    margin-left: auto;
}

/* Keep the bee on the far right in English too, away from the phone */
[dir='ltr'] .pro__content {
    flex-direction: row-reverse;
}

.pro__mascot {
    position: relative;
    flex-shrink: 0;
    width: 172px;
    height: 168px;
}

.pro__mascot-bee {
    position: absolute;
    top: 0;
    left: 4px;
    width: 168px;
    height: 168px;
}

.pro__mascot-ripples {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pro__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pro__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.28;
}

.pro__badge {
    width: 82px;
    height: 56px;
    rotate: -4deg;
}

.pro__exclamation {
    display: inline-block;
    rotate: -8deg;
}

.pro__text {
    font-size: 18px;
    line-height: 1.75;
}

.pro__text strong {
    font-weight: 600;
}

.pro__phone {
    position: absolute;
    bottom: 0;
    left: 5.7%; /* physical left: matches the design in both languages */
    width: min(406px, 36.8%);
    height: auto;
}


/* 14. Join us
   ========================================================================== */

.join {
    padding-block: 64px;
    background: var(--color-surface);
}

/* The wide gap is where the drawings behind the cards stand */
.join .container {
    display: flex;
    flex-direction: column;
    gap: 104px;
}

.join__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/*
   One card and the drawing behind it.

   They are kept as two separate boxes on purpose: a child can never be
   painted behind its own parent's background, so the drawing has to be the
   card's neighbour for the card to cover its lower half.
*/
.join-item {
    position: relative;
    display: flex;
}

/*
   Everything about the drawing - its size, how far it stands from the card's
   inner edge and how high it rises - is multiplied by one number, so a smaller
   screen only has to change that number and the whole thing keeps its shape.
*/
.join-item__mark {
    --mark-scale: 1;

    position: absolute;
    inset-inline-start: calc(var(--mark-start) * var(--mark-scale));
    top: calc(var(--mark-rise) * var(--mark-scale) * -1);
    width: calc(var(--mark-w) * var(--mark-scale));
    height: calc(var(--mark-h) * var(--mark-scale));
    rotate: var(--mark-tilt);
    pointer-events: none;
}

.join-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 32px;
    background: var(--color-white);
    transition: translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.join-card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-hover);
}

.join-card__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
}

.join-card__description {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.join-card .button {
    margin-top: auto;
}


/* 15. Footer
   ========================================================================== */

.footer {
    padding-block: 64px 32px;
    background: var(--color-ink);
    color: var(--color-white);
}

.footer .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer__top {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    width: 336px;
}

.footer__brand-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__tagline {
    line-height: 1.7;
    color: var(--color-text-on-dark);
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__heading {
    font-size: 16px;
    font-weight: 600;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color-text-on-dark);
}

.footer__links a {
    transition: color 0.2s;
}

.footer__links a:hover {
    color: var(--color-primary);
}

.footer__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: rgba(110, 120, 127, 0.14);
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 24px;
    background: var(--color-ink-deep);
}

.footer__copyright {
    font-size: 14px;
}

.footer__social {
    display: flex;
    gap: 12px;
}


/* 16. Inner pages (terms, privacy, vulnerability, contact)
   ========================================================================== */

/* Page title inside the coloured band; the extra top space clears the fixed navbar */
.page-header {
    padding-block: 168px 104px;
    text-align: start;
    color: var(--color-white);
}

/* Same width as the text column below, so the title lines up with it */
.page-header .container,
.prose .container {
    max-width: 80ch;
}

.page-header__title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.28;
}

.page-header__intro {
    max-width: 70ch;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

/* Long readable text: the terms, privacy and vulnerability pages */
.prose {
    padding-block: 56px 80px;
}

.prose__section + .prose__section {
    margin-top: 40px;
}

.prose h2 {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.prose p,
.prose li {
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-text-muted);
}

.prose p + p {
    margin-top: 12px;
}

.prose ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 12px;
}

/* Orange dot in front of every list item */
.prose li {
    position: relative;
    padding-inline-start: 22px;
}

.prose li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Email address inside the text: opens the mail app */
.prose__email {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Contact page */
.contact {
    padding-block: 56px 80px;
}

.contact .container {
    max-width: 640px;
}

.contact__card {
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: 32px;
    background: var(--color-white);
    box-shadow: 0 18px 40px -28px rgba(38, 54, 64, 0.35);
    text-align: center;
}

.contact__card-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

.contact__card-description {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* Form with labels that sit on the border (like the reference design) */
.form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    text-align: start;
}

.field {
    position: relative;
}

.field__input {
    width: 100%;
    padding: 18px 16px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 16px;
    background: var(--color-white);
    font-family: inherit;
    font-size: 16px;
    color: var(--color-ink);
    transition: border-color 0.2s;
}

.field__input--message {
    min-height: 150px;
    resize: vertical;
}

.field__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* The label sits inside the field, and moves onto the border when the field is used */
.field__label {
    position: absolute;
    top: 18px;
    inset-inline-start: 12px;
    padding-inline: 6px;
    background: var(--color-white);
    font-size: 16px;
    color: var(--color-text-subtle);
    pointer-events: none;
    transition: top 0.18s var(--ease-out), font-size 0.18s var(--ease-out), color 0.18s;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
    top: -9px;
    font-size: 13px;
}

.field__input:focus + .field__label {
    color: var(--color-primary);
}

/* Message shown after sending, and validation errors under a field */
.alert {
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
}

.alert--success {
    background: #e7f5f6;
    color: var(--color-accent-700);
}

.alert--error {
    background: var(--color-primary-soft);
    color: #a34a18;
}

.field__input--invalid {
    border-color: #d64545;
}

.field__error {
    margin-top: 6px;
    font-size: 13px;
    color: #d64545;
}

/* Full-width button, greyed out until every field is filled */
.button--block {
    width: 100%;
}

.button:disabled {
    background: #eaedf0;
    color: #c4c9cf;
    cursor: not-allowed;
}

.button:disabled:hover {
    translate: none;
    box-shadow: none;
}


/* 17. Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --container-gutter: 32px;
    }

    .navbar__links {
        gap: 20px;
    }

    /* Tablets: the hero is shorter, so the text block is tightened to stay on the white area */
    .hero__content {
        top: 13%;
        gap: 16px;
    }

    .hero__subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero .button--large {
        padding: 13px 24px;
        font-size: 16px;
    }

    .hero__actions {
        gap: 10px;
    }

    .hero .store-badge__art {
        --store-badge-height: 44px;
    }

    .categories__cards {
        flex-direction: column;
        align-items: stretch;
    }

    .category-card--featured {
        flex-basis: auto;
        min-height: 260px;
    }

    .categories__ampersand {
        align-self: center;
        margin-block: -12px;
    }

    /* Still one skyline, just shorter landmarks */
    .skyline {
        --skyline-height: 150px;
        --skyline-gap: 12px;
    }

    .skyline__name {
        margin-top: 20px;
        font-size: 26px;
    }

    [lang='ar'] .skyline__name {
        font-size: 29px;
    }

    .pro {
        padding-top: 48px;
    }

    .pro__phone {
        display: none;
    }

    .pro__content {
        max-width: none;
        margin-inline: auto;
    }

    /*
        Stacked cards: the drawings keep their full size, so each one needs a
        gap of its own to rise into. The tallest of the three - the tilted
        scooter - reaches 114px above its card, which is what sets these.
    */
    .join .container {
        gap: 120px;
    }

    .join__cards {
        grid-template-columns: 1fr;
        gap: 142px;
    }

    .footer__top {
        flex-wrap: wrap;
    }

    .footer__brand {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --container-gutter: 16px;
    }

    /* A phone gets them a little smaller, and the gaps shrink with them */
    .join .container {
        gap: 104px;
    }

    .join__cards {
        gap: 124px;
    }

    .join-item__mark {
        --mark-scale: 0.85;
    }

    .navbar {
        width: calc(100% - 32px);
        top: 12px;
        padding-inline: 16px 11px; /* see the note on the full-size navbar */
        padding-block: 10px;
    }

    /* Links are hidden on small screens for now (a mobile menu can be added later) */
    .navbar__links {
        display: none;
    }

    .navbar__actions .button {
        padding: 10px 16px;
        font-size: 14px;
    }

    .navbar__language {
        width: 42px;
        height: 42px;
    }

    /* Hero: text on top, phone below it over the orange band */
    .hero {
        height: auto;
        margin-top: 0;
        padding-bottom: 520px; /* room for the phone and the band underneath the text */
    }

    .hero__stage,
    .hero__content {
        position: static;
        width: 100%;
        max-width: none;
    }

    /* On phones everything in the hero is centred */
    .hero__content {
        align-items: center;
        padding: 104px 16px 24px;
        text-align: center;
    }

    .hero__title {
        justify-content: center;
        column-gap: 0.35em;
        font-size: clamp(28px, 8vw, 42px);
    }

    [lang='en'] .hero__title {
        align-items: center;
    }

    /*
       A phone is too narrow for "To your home essentials" to stay on one line,
       so the words are left to flow and wrap like ordinary centred text - side
       by side they would leave a hole after the short "To".
    */
    [lang='en'] .hero__title-line {
        display: block;
    }

    .hero__band {
        height: 300px;
    }

    .hero__phone {
        top: auto;
        bottom: 0;
        left: 50%;
        width: min(62%, 280px);
        translate: -50% 0;
    }

    .hero__scribble {
        top: auto;
        bottom: 100px;
        left: 4%;
        width: 92%;
        height: 390px;
    }

    .partners {
        padding-block: 80px 64px;
    }

    /*
        On phones the two badges sit side by side and the download button goes
        above them. A 2-column grid keeps them tied together: the badges size the
        two columns, and the button spans both, so it ends up exactly as wide as
        the badge pair - never wider than the screen.
    */
    .hero__actions {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 12px;
    }

    .hero__actions .button {
        grid-column: 1 / -1;
    }

    .hero .store-badge__art {
        --store-badge-height: 46px;
    }

    .section-heading__title {
        font-size: 30px;
    }

    .section-heading__subtitle {
        font-size: 16px;
    }

    .category-card__count {
        font-size: 36px;
    }

    /*
        Phones: two landmarks per row. The columns still touch, so each row of
        two keeps its own piece of the dashed route under it.
    */
    .skyline {
        --skyline-height: 130px;
        --skyline-gap: 10px;

        grid-template-columns: repeat(2, 1fr);
        row-gap: 34px;
        margin-top: 36px;
    }

    /* Five cities do not divide by two, so the last one is centred on its row */
    .skyline__city:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .skyline__city:last-child:nth-child(odd) .skyline__art {
        width: 50%;
    }

    .skyline__name {
        margin-top: 16px;
        font-size: 23px;
    }

    [lang='ar'] .skyline__name {
        font-size: 26px;
    }

    .skyline__name-alt {
        font-size: 15px;
    }

    .category-card__title {
        font-size: 24px;
    }

    .ticker__word {
        font-size: 18px;
    }

    .partners {
        aspect-ratio: auto;
        min-height: 0;
        padding-top: 64px;
    }

    .pro__band {
        padding: 32px 20px;
        border-radius: 32px;
    }

    .pro__content,
    [dir='ltr'] .pro__content {
        flex-direction: column;
        text-align: center;
    }

    .pro__title {
        justify-content: center;
        font-size: 30px;
    }

    .pro__text {
        font-size: 16px;
    }

    .footer__bottom {
        flex-direction: column-reverse;
    }
}