/* Reset & base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Heebo', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #021c46;
    background: #021e46;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

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

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

ul {
    list-style: none;
}

/* -----------------------------------------------------------
   Stage — Figma canvas 770x1376. Width scales proportionally
   with viewport, height fills the viewport so no empty area
   is visible below the design.

   Top section (eyebrow, hero, badge, features, mission) is
   anchored to the top; footer (CTA, phone/whatsapp, trust,
   wave) is anchored to the bottom. Any surplus vertical space
   sits between the mission block and the CTA and is filled
   naturally by the background photo (object-fit: cover).
   ----------------------------------------------------------- */
.stage {
    --design-w: 770;
    --design-h: 1376;

    --w: min(100vw, 500px);
    --u: calc(var(--w) / var(--design-w));
    --natural-h: calc(var(--design-h) * var(--u));

    position: relative;
    width: var(--w);
    min-height: var(--natural-h);
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    direction: ltr;
    background: #ffffff;
}

/* Background photo fills the stage regardless of aspect ratio. */
.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    pointer-events: none;
}

/* Dark blue bottom wave, anchored to the stage bottom. */
.wave {
    position: absolute;
    left: 50%;
    bottom: calc(-89 * var(--u));
    transform: translateX(-50%);
    width: calc(1012 * var(--u));
    height: calc(227 * var(--u));
    background: #021e46;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   TOP SECTION — anchored to the top of the stage.
   ============================================================ */

/* Golden eyebrow — aligned to the hero first line */
.eyebrow {
    position: absolute;
    top: calc(17 * var(--u));
    left: calc(5 * var(--u));
    width: calc(671 * var(--u));
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(48 * var(--u));
    line-height: 1.4;
    letter-spacing: -0.06em;
    color: #ae8533;
    text-align: center;
    direction: rtl;
    z-index: 2;
    text-shadow:
        0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(255, 255, 255, 0.65);
}

/* Main hero heading. First (short) line naturally centers,
   second (long) line spans the width. */
.hero {
    position: absolute;
    top: calc(84 * var(--u));
    left: calc(5 * var(--u));
    width: calc(671 * var(--u));
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: calc(62 * var(--u));
    line-height: 1.05;
    color: #021c46;
    direction: rtl;
    text-align: center;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    text-shadow:
        0 0 calc(4 * var(--u)) rgba(255, 255, 255, 1),
        0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.95),
        0 0 calc(28 * var(--u)) rgba(255, 255, 255, 0.85),
        0 0 calc(48 * var(--u)) rgba(255, 255, 255, 0.55);
}

.hero span { display: block; }

/* Age badge */
.age-badge {
    position: absolute;
    top: calc(272 * var(--u));
    left: calc(30 * var(--u));
    width: calc(435 * var(--u));
    height: calc(89 * var(--u));
    background: #021e46;
    border-radius: calc(20 * var(--u));
    color: #ffffff;
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 600;
    font-size: calc(50 * var(--u));
    line-height: 1;
    letter-spacing: -0.06em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    padding: 0 calc(20 * var(--u));
    direction: rtl;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.25);
}

.age-badge strong {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: calc(58 * var(--u));
    color: #b98d3e;
    letter-spacing: -0.05em;
}

/* Credit-card subtitle */
.cc-sub {
    position: absolute;
    top: calc(365 * var(--u));
    left: calc(63 * var(--u));
    width: calc(369 * var(--u));
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(34 * var(--u));
    color: #132d52;
    letter-spacing: -0.05em;
    text-align: center;
    direction: rtl;
    z-index: 3;
    text-shadow:
        0 0 calc(6 * var(--u)) rgba(255, 255, 255, 1),
        0 0 calc(16 * var(--u)) rgba(255, 255, 255, 0.85);
}

/* Feature list (4 rows).
   Stretches between its natural top and just above the mission
   block so extra vertical space on tall viewports gets absorbed
   as gaps between rows instead of a big dead zone below the list. */
.features {
    position: absolute;
    top: calc(427 * var(--u));
    bottom: calc(462 * var(--u));
    left: calc(30 * var(--u));
    width: calc(378 * var(--u));
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature {
    position: relative;
    width: 100%;
    height: calc(108 * var(--u));
    direction: ltr;
}

.feature__circle {
    position: absolute;
    left: 0;
    top: calc(19 * var(--u));
    width: calc(89 * var(--u));
    height: calc(89 * var(--u));
    border: calc(2 * var(--u)) solid #052148;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.15);
}

.feature__circle img {
    width: calc(52 * var(--u));
    height: auto;
    filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.2));
}

.feature:nth-child(3) .feature__circle img { width: calc(50 * var(--u)); }
.feature:nth-child(4) .feature__circle img { width: calc(56 * var(--u)); }

.feature__text {
    position: absolute;
    left: calc(106 * var(--u));
    top: 0;
    width: calc(260 * var(--u));
    height: calc(108 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(34 * var(--u));
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: #132d52;
    direction: rtl;
    text-align: left;
    text-shadow:
        0 0 calc(4 * var(--u)) rgba(255, 255, 255, 1),
        0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.9),
        0 0 calc(24 * var(--u)) rgba(255, 255, 255, 0.55);
}

.feature__underline {
    position: absolute;
    left: calc(89 * var(--u));
    top: calc(105 * var(--u));
    width: calc(289 * var(--u));
    height: calc(3 * var(--u));
    background: #596068;
    opacity: 0.6;
}

/* Mission block. Anchored to the bottom (right above the CTA)
   so it stays glued to the footer regardless of viewport height. */
.mission {
    position: absolute;
    bottom: calc(292 * var(--u));
    left: calc(53 * var(--u));
    width: calc(340 * var(--u));
    z-index: 3;
    direction: rtl;
    text-align: left;
}

.mission__top {
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(40 * var(--u));
    line-height: 1.15;
    color: #b78e36;
    text-align: left;
    padding-left: calc(30 * var(--u));
    text-shadow:
        0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(212, 212, 212, 0.8),
        0 0 calc(10 * var(--u)) rgba(255, 255, 255, 0.7);
}

.mission__main {
    position: relative;
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(64 * var(--u));
    line-height: 1.1;
    color: #000;
    margin-top: calc(4 * var(--u));
    display: inline-block;
    text-shadow:
        0 0 calc(6 * var(--u)) rgba(255, 255, 255, 1),
        0 0 calc(16 * var(--u)) rgba(255, 255, 255, 0.85);
}

.mission__underline {
    position: absolute;
    left: calc(38 * var(--u));
    bottom: calc(-18 * var(--u));
    width: calc(263 * var(--u));
    height: auto;
    pointer-events: none;
}

/* ============================================================
   FOOTER SECTION — anchored to the bottom of the stage.
   ============================================================ */

/* CTA button. Bottom offset = 1376 - 1150 - 126 = 100. */
.cta {
    position: absolute;
    bottom: calc(100 * var(--u));
    left: calc(44 * var(--u));
    width: calc(698 * var(--u));
    height: calc(126 * var(--u));
    background: linear-gradient(180deg, #d1a758 0%, #b88d3e 55%, #a17828 100%);
    border-radius: calc(29 * var(--u));
    box-shadow:
        0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.35),
        inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.35);
    padding: 0;
    direction: ltr;
    z-index: 4;
    color: #132d52;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(calc(-2 * var(--u)));
    box-shadow:
        0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.4),
        inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.45);
}

.cta:active { transform: translateY(0); }

.cta__label {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(19 * var(--u));
    width: calc(311 * var(--u));
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(26 * var(--u));
    line-height: 1.15;
    color: #132d52;
    direction: rtl;
    text-align: left;
    letter-spacing: -0.01em;
}

.cta__phone {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(55 * var(--u));
    width: calc(330 * var(--u));
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: calc(46 * var(--u));
    line-height: 1;
    color: #132d52;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
    white-space: nowrap;
}

.cta__divider {
    position: absolute;
    left: calc(453 * var(--u));
    top: calc(23 * var(--u));
    width: calc(3 * var(--u));
    height: calc(80 * var(--u));
    background: #f5e3c0;
    border-radius: calc(2 * var(--u));
    pointer-events: none;
}

/* Icons inside the CTA button */
.cta__phone-icon {
    position: absolute;
    left: calc(20 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    width: calc(70 * var(--u));
    height: auto;
}

.cta__whatsapp {
    position: absolute;
    right: calc(20 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
}

.cta__whatsapp img {
    width: calc(65 * var(--u));
    height: auto;
}

.cta__whatsapp span {
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(28 * var(--u));
    color: #132d52;
    direction: rtl;
    white-space: nowrap;
}

/* Trust footer. Bottom = 1376 - 1312 - 29 = 35. */
.trust {
    position: absolute;
    bottom: calc(35 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    color: #ffffff;
    font-family: 'Inter', 'Heebo', sans-serif;
    font-weight: 500;
    font-size: calc(24 * var(--u));
    letter-spacing: -0.03em;
    direction: ltr;
    white-space: nowrap;
}

.trust > span:last-child {
    direction: rtl;
    color: #ffffff;
}

.trust__lock {
    display: inline-block;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    flex-shrink: 0;
    filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35));
}

/* -----------------------------------------------------------
   Wider screens — keep the mobile card centered on desktop.
   ----------------------------------------------------------- */
@media (min-width: 501px) {
    body {
        padding: 24px 0;
        background: #021e46;
        align-items: flex-start;
    }
    .stage {
        border-radius: 22px;
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.18),
            0 8px 24px rgba(0, 0, 0, 0.12);
        /* On desktop don't stretch beyond ~1.15x natural so
           the feature rows don't fly too far apart. */
        max-height: calc(var(--natural-h) * 1.15);
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .cta { transition: none; }
    .cta:hover,
    .cta:focus-visible { transform: none; }
}