/* ==========================================================================
   Asaqefah Gateway — landing page
   --------------------------------------------------------------------------
   Self-contained: every rule is scoped under .lp so nothing here can leak into
   the dashboard or auth pages, and nothing in main.css can reach in.

   Two principles this file is built on:
   1. THEME BY TOKEN. Colours are CSS custom properties redefined once under
      [data-theme="dark"]. No !important, no matching on inline style strings.
   2. DIRECTION BY LOGICAL PROPERTY. padding-inline / margin-inline-start /
      inset-inline / border-start-* mirror themselves automatically, so RTL and
      LTR both come from this one source with no `direction` hardcoded anywhere.
   ========================================================================== */

.lp {
    /* brand */
    --lp-green-900: #071410;
    --lp-green-800: #0B1A14;
    --lp-green-700: #10241C;
    --lp-green-600: #1B4332;
    --lp-gold: #C9A227;
    --lp-gold-deep: #8A6D14;

    /* light theme (default) */
    --lp-bg: #FFFFFF;
    --lp-bg-alt: #F7F6F2;
    --lp-surface: #FFFFFF;
    --lp-surface-2: #FBFAF7;
    --lp-text: #0F221A;
    --lp-text-soft: #46564E;
    --lp-text-muted: #7A8781;
    --lp-border: #E7E4DB;
    --lp-border-strong: #D5D0C2;
    --lp-accent: #8A6D14;          /* gold darkened for AA text contrast on white */
    --lp-accent-bright: #B8912A;
    --lp-accent-soft: rgba(138, 109, 20, 0.08);
    --lp-on-accent: #FFFFFF;
    --lp-mark: #1B4332;            /* brand mark: deep green on light */
    --lp-shadow-sm: 0 1px 2px rgba(15, 34, 26, 0.04), 0 2px 8px rgba(15, 34, 26, 0.04);
    --lp-shadow: 0 4px 12px rgba(15, 34, 26, 0.06), 0 12px 32px rgba(15, 34, 26, 0.06);
    --lp-shadow-lg: 0 12px 24px rgba(15, 34, 26, 0.08), 0 32px 64px rgba(15, 34, 26, 0.10);
    --lp-header-bg: rgba(255, 255, 255, 0.82);
    --lp-hero-glow: rgba(138, 109, 20, 0.07);
    --lp-mesh-1: rgba(27, 67, 50, 0.05);
    --lp-mesh-2: rgba(201, 162, 39, 0.07);

    /* type scale — fluid, so nothing needs a media query to stay readable */
    --lp-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --lp-step-0:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
    --lp-step-1:  clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
    --lp-step-2:  clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
    --lp-step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.375rem);
    --lp-step-4:  clamp(2rem, 1.6rem + 2vw, 3.25rem);

    --lp-radius-sm: 10px;
    --lp-radius: 16px;
    --lp-radius-lg: 24px;
    --lp-maxw: 1180px;
    --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);

    background: var(--lp-bg);
    color: var(--lp-text);
    font-size: var(--lp-step-0);
    line-height: 1.65;
    /* Deliberately NOT set here:
       -webkit-font-smoothing: antialiased  — thins strokes, and small Arabic
         harakat (ُ ّ) are the first thing to disappear when strokes thin.
       text-rendering: optimizeLegibility   — no benefit for this page, and it
         changes shaping/kerning behaviour for complex scripts between engines. */
    overflow-x: clip;
}

html[data-theme="dark"] .lp {
    --lp-bg: #0B1A14;
    --lp-bg-alt: #08130F;
    --lp-surface: #0E211A;
    --lp-surface-2: #12281F;
    --lp-text: #F4F2EA;
    --lp-text-soft: rgba(244, 242, 234, 0.72);
    --lp-text-muted: rgba(244, 242, 234, 0.48);
    --lp-border: rgba(201, 162, 39, 0.14);
    --lp-border-strong: rgba(201, 162, 39, 0.28);
    --lp-accent: #C9A227;
    --lp-accent-bright: #E0B93C;
    --lp-accent-soft: rgba(201, 162, 39, 0.10);
    --lp-on-accent: #0B1A14;
    --lp-mark: #C9A227;            /* brand mark: gold on dark */
    --lp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --lp-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --lp-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
    --lp-header-bg: rgba(11, 26, 20, 0.78);
    --lp-hero-glow: rgba(201, 162, 39, 0.10);
    --lp-mesh-1: rgba(201, 162, 39, 0.06);
    --lp-mesh-2: rgba(27, 67, 50, 0.35);
}

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

.lp h1, .lp h2, .lp h3, .lp h4 {
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    margin: 0;
}
.lp p { margin: 0; }
.lp img { max-width: 100%; display: block; }

/* The accent word inside translated headings. Translations ship
   <span class="gold">…</span>, so this one rule themes every language. */
.lp .gold { color: var(--lp-accent); }

.lp-shell { max-width: var(--lp-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* ==========================================================================
   Header
   ========================================================================== */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--lp-header-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--lp-ease), box-shadow 0.3s var(--lp-ease);
}
.lp-header.is-stuck {
    border-bottom-color: var(--lp-border);
    box-shadow: var(--lp-shadow-sm);
}
.lp-header-inner {
    max-width: var(--lp-maxw);
    margin-inline: auto;
    padding: 14px clamp(20px, 5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lp-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* Inline SVG, so it takes its colour from `color` and can never be clipped or
   blurry the way the 1.9 MB raster did. aspect-ratio keeps the box exact. */
.lp-brand-mark {
    block-size: 30px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    flex: none;
    color: var(--lp-mark);
    overflow: visible;
    transition: transform 0.3s var(--lp-ease), color 0.3s var(--lp-ease);
}
.lp-brand:hover .lp-brand-mark { transform: translateY(-2px); }
.lp-footer .lp-brand-mark { block-size: 26px; }
.lp-brand-text {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* line-height 1 collapses the inherited 1.65 leading, which was padding the
       text box unevenly and leaving the wordmark sitting off-centre next to the
       mark. Flex centres boxes, not glyphs — so the box has to hug the glyphs. */
    line-height: 1;
    display: block;
}

.lp-nav { display: flex; align-items: center; gap: 10px; }

/* Language switcher.
   Every button is the SAME fixed size regardless of its glyph (AR/EN/中), and
   the bar itself has a fixed width, so switching language cannot reflow the
   header. The active pill is a transform-animated backdrop, not a layout box. */
.lp-langbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-border);
    flex: none;
}
.lp-lang {
    inline-size: 34px;
    block-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--lp-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s var(--lp-ease), background-color 0.2s var(--lp-ease);
}
.lp-lang:hover { color: var(--lp-text); background: var(--lp-accent-soft); }
.lp-lang.is-active {
    color: var(--lp-on-accent);
    background: var(--lp-accent);
}
.lp-lang:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

.lp-icon-btn {
    inline-size: 38px;
    block-size: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface-2);
    color: var(--lp-text-soft);
    cursor: pointer;
    transition: color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease), transform 0.2s var(--lp-ease);
}
.lp-icon-btn:hover { color: var(--lp-accent); border-color: var(--lp-border-strong); transform: translateY(-1px); }
.lp-icon-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* Buttons ------------------------------------------------------------------ */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--lp-step--1);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease),
                background-color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease);
}
/* min-inline-size holds the width steady across languages: "تسجيل الدخول",
   "Sign in" and "Iniciar sesión" all occupy the same box, so nothing beside
   the button shifts when the language changes. */
.lp-btn-login { min-inline-size: 148px; }

.lp-btn-primary {
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--lp-accent) 60%, transparent);
}
/* main.css has a global `a:hover { color: var(--accent) }` at specificity
   (0,1,1), which beat .lp-btn-primary (0,1,0) and turned the label gold on a
   gold background — invisible. Pin the colour on hover/focus explicitly. */
.lp-btn-primary:hover,
.lp-btn-primary:focus,
.lp-btn-primary:active {
    background: var(--lp-accent-bright);
    color: var(--lp-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--lp-accent) 65%, transparent);
}
.lp-btn-ghost {
    background: transparent;
    color: var(--lp-text-soft);
    border-color: var(--lp-border-strong);
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus { color: var(--lp-text); border-color: var(--lp-accent); transform: translateY(-2px); }
.lp-cta .lp-btn-primary:hover { color: var(--lp-green-800); }
.lp-footer-col a:hover, .lp-brand:hover .lp-brand-text { color: var(--lp-accent); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp-btn-lg { padding: 15px 34px; font-size: var(--lp-step-0); }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.lp-section { padding-block: clamp(64px, 9vw, 116px); position: relative; }
.lp-section-alt { background: var(--lp-bg-alt); }

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 100px;
    border: 1px solid var(--lp-border);
    background: var(--lp-accent-soft);
    color: var(--lp-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.lp-eyebrow::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: lp-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

.lp-section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-block-end: clamp(40px, 5vw, 64px); }
.lp-section-head .lp-eyebrow { margin-block-end: 20px; }
.lp-section-head h2 { font-size: var(--lp-step-3); margin-block-end: 14px; }
.lp-section-head p { font-size: var(--lp-step-0); color: var(--lp-text-muted); }

/* ==========================================================================
   Hero
   ========================================================================== */

.lp-hero { position: relative; padding-block: clamp(48px, 7vw, 88px) clamp(56px, 7vw, 96px); overflow: clip; }
.lp-hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 78% 18%, var(--lp-mesh-2) 0%, transparent 60%),
        radial-gradient(46% 46% at 8% 72%, var(--lp-mesh-1) 0%, transparent 62%);
}
.lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}

.lp-hero h1 {
    font-size: var(--lp-step-4);
    line-height: 1.22;
    margin-block: 20px 18px;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Arabic sets harakat above the letters — the damma on نُ and the shadda on كّ
   sit well above the cap height. At Latin leading they overflow the line box,
   collide with the element above and read as missing. Arabic needs more
   leading and no negative tracking, so give it its own metrics. */
html[lang="ar"] .lp h1,
html[lang="ar"] .lp h2,
html[lang="ar"] .lp h3,
html[lang="ar"] .lp .lp-stat-val {
    /* Almarai for Arabic display type — its harakat are set much heavier than
       Tajawal's, which is what makes نُمكّن read correctly at heading sizes.
       Body copy stays Tajawal (inherited from body). */
    font-family: 'Almarai', 'Tajawal', 'Segoe UI', sans-serif;
    letter-spacing: 0;
}
html[lang="ar"] .lp-hero h1 { font-weight: 800; }
html[lang="ar"] .lp-hero h1 {
    line-height: 1.45;
    margin-block-start: 26px;
    font-size: clamp(2.15rem, 1.7rem + 2.2vw, 3.5rem);
}
html[lang="ar"] .lp-section-head h2 { line-height: 1.42; }
html[lang="ar"] .lp-cta h2 { line-height: 1.42; }
.lp-hero-lede {
    font-size: var(--lp-step-1);
    color: var(--lp-text-soft);
    max-width: 46ch;
    margin-block-end: 30px;
}
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Media panel: the accent frame is drawn with logical insets so it flips to
   the correct corners in LTR without a second rule. */
.lp-hero-media { position: relative; }
.lp-hero-media img {
    inline-size: 100%;
    block-size: clamp(320px, 42vw, 470px);
    object-fit: cover;
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-lg);
}
.lp-hero-media::before,
.lp-hero-media::after {
    content: "";
    position: absolute;
    inline-size: 64px;
    block-size: 64px;
    border: 2px solid var(--lp-accent);
    opacity: 0.55;
}
.lp-hero-media::before {
    inset-block-start: -10px;
    inset-inline-end: -10px;
    border-block-end: 0;
    border-inline-start: 0;
    border-start-end-radius: var(--lp-radius);
}
.lp-hero-media::after {
    inset-block-end: -10px;
    inset-inline-start: -10px;
    border-block-start: 0;
    border-inline-end: 0;
    border-end-start-radius: var(--lp-radius);
}

/* ==========================================================================
   Stats — a standalone band under the hero, not part of the headline block
   ========================================================================== */

.lp-statsband { padding-block: 0 clamp(56px, 8vw, 92px); }
.lp-statspanel {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: clamp(22px, 3vw, 30px);
    box-shadow: var(--lp-shadow);
}
.lp-stats-title {
    font-size: var(--lp-step--1);
    font-weight: 600;
    /* Full-strength text, not muted: it is the panel's heading, and at 48%
       opacity it was barely legible on the dark background. */
    color: var(--lp-text);
    letter-spacing: 0.02em;
    margin-block-end: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-stats-title::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: linear-gradient(to left, transparent, var(--lp-border));
}
html[dir="ltr"] .lp-stats-title::after { background: linear-gradient(to right, transparent, var(--lp-border)); }

.lp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--lp-border);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
}
.lp-stat {
    background: var(--lp-surface-2);
    padding: 18px 12px;
    text-align: center;
    transition: background-color 0.3s var(--lp-ease);
}
.lp-stat:hover { background: var(--lp-accent-soft); }

/* Each figure rises in turn once the panel scrolls into view. Driven purely by
   the parent's .is-visible + each item's own --lp-delay, so no extra JS. */
@keyframes lp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.lp-statspanel.is-visible .lp-stat {
    animation: lp-rise 0.6s var(--lp-ease) backwards;
    animation-delay: var(--lp-delay, 0ms);
}
.lp-stat-val {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lp-text);
    letter-spacing: -0.02em;
    display: block;
    margin-block-end: 6px;
    font-variant-numeric: tabular-nums;
}
/* The unit ("مليون", "billion SAR") ships inside the translated string. */
.lp-stat-val .stat-unit {
    display: block;
    font-size: var(--lp-step--1);
    font-weight: 600;
    color: var(--lp-accent);
    letter-spacing: 0;
    margin-block-start: 4px;
}
.lp-stat-lbl { font-size: var(--lp-step--1); color: var(--lp-text-muted); }

/* ==========================================================================
   Steps
   ========================================================================== */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    position: relative;
}
/* Connector sits behind the markers; inset-inline keeps it inside the first
   and last marker in both directions. */
.lp-steps::before {
    content: "";
    position: absolute;
    inset-block-start: 27px;
    inset-inline: 10%;
    block-size: 2px;
    background: linear-gradient(to right, transparent, var(--lp-border-strong) 12%, var(--lp-border-strong) 88%, transparent);
    z-index: 0;
}
.lp-step { position: relative; z-index: 1; display: flex; flex-direction: column; }
.lp-step-marker {
    inline-size: 54px;
    block-size: 54px;
    margin-inline: auto;
    margin-block-end: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lp-bg);
    border: 2px solid var(--lp-border-strong);
    color: var(--lp-accent);
    box-shadow: 0 0 0 7px var(--lp-bg);
    transition: border-color 0.35s var(--lp-ease), transform 0.35s var(--lp-ease), background-color 0.35s var(--lp-ease);
}
.lp-section-alt .lp-step-marker { background: var(--lp-bg-alt); box-shadow: 0 0 0 7px var(--lp-bg-alt); }
.lp-step:hover .lp-step-marker {
    border-color: var(--lp-accent);
    transform: translateY(-3px) scale(1.06);
}
.lp-step-marker svg { inline-size: 22px; block-size: 22px; }

/* flex:1 + stretch makes every card the same height whatever the copy length,
   so the five bodies line up across all five languages. */
.lp-step-card {
    flex: 1;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 22px 18px;
    text-align: center;
    transition: border-color 0.35s var(--lp-ease), transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease);
}
.lp-step:hover .lp-step-card {
    border-color: var(--lp-border-strong);
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow);
}
.lp-step-num {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--lp-accent);
    letter-spacing: 0.14em;
    display: block;
    margin-block-end: 10px;
    font-variant-numeric: tabular-nums;
}
/* One size for every step title and one for every body — the old page mixed
   sizes between cards, which is what made the row look uneven. */
.lp-step-card h3 { font-size: var(--lp-step-0); margin-block-end: 8px; }
.lp-step-card p { font-size: var(--lp-step--1); color: var(--lp-text-muted); line-height: 1.6; }

/* ==========================================================================
   About
   ========================================================================== */

/* Statement panel: a real bordered surface with an accent rule down the
   leading edge (logical, so it sits on the right in RTL and the left in LTR),
   a watermark glyph, and a sweep that reacts to hover. */
.lp-about-panel {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    margin-block-end: clamp(32px, 4vw, 48px);
    padding: clamp(28px, 4vw, 44px) clamp(26px, 4vw, 52px);
    background: linear-gradient(135deg, var(--lp-surface), var(--lp-surface-2));
    border: 1px solid var(--lp-border);
    border-start-start-radius: var(--lp-radius-lg);
    border-end-end-radius: var(--lp-radius-lg);
    border-start-end-radius: 6px;
    border-end-start-radius: 6px;
    border-inline-start: 3px solid var(--lp-accent);
    box-shadow: var(--lp-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.4s var(--lp-ease), transform 0.4s var(--lp-ease);
}
.lp-about-panel:hover { box-shadow: var(--lp-shadow); transform: translateY(-3px); }
.lp-about-panel::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 240px;
    block-size: 240px;
    background: radial-gradient(circle at 100% 0, var(--lp-accent-soft), transparent 70%);
    pointer-events: none;
}
.lp-about-glyph {
    display: block;
    inline-size: 34px;
    block-size: 34px;
    color: var(--lp-accent);
    opacity: 0.45;
    margin-block-end: 16px;
}
.lp-about-glyph svg { inline-size: 100%; block-size: 100%; }
.lp-about-panel p {
    position: relative;
    font-size: var(--lp-step-1);
    color: var(--lp-text-soft);
    line-height: 1.95;
}
.lp-about-panel p + p {
    margin-block-start: 18px;
    padding-block-start: 18px;
    border-block-start: 1px dashed var(--lp-border);
}

.lp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-pillar {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: transform 0.35s var(--lp-ease), border-color 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease);
}
.lp-pillar:hover { transform: translateY(-4px); border-color: var(--lp-border-strong); box-shadow: var(--lp-shadow); }
.lp-pillar-icon {
    inline-size: 50px;
    block-size: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--lp-accent-soft);
    border: 1px solid var(--lp-border);
    color: var(--lp-accent);
}
.lp-pillar-icon svg { inline-size: 22px; block-size: 22px; }
.lp-pillar p { font-size: var(--lp-step-0); font-weight: 600; color: var(--lp-text); line-height: 1.55; }

/* ==========================================================================
   Sectors
   ========================================================================== */

.lp-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-sector {
    position: relative;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: 34px 28px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s var(--lp-ease), box-shadow 0.4s var(--lp-ease), border-color 0.4s var(--lp-ease);
}
/* Sheen that sweeps once on hover — the visual "modern" cue, done with a
   single transform so it stays on the compositor. */
.lp-sector::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(140deg, var(--lp-accent-soft), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s var(--lp-ease);
}
.lp-sector::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 22%;
    block-size: 2px;
    background: linear-gradient(to right, transparent, var(--lp-accent), transparent);
    transform: scaleX(0);
    transition: transform 0.45s var(--lp-ease);
}
.lp-sector:hover {
    transform: translateY(-6px);
    border-color: var(--lp-border-strong);
    box-shadow: var(--lp-shadow);
}
.lp-sector:hover::before { opacity: 1; }
.lp-sector:hover::after { transform: scaleX(1); }

.lp-sector-icon {
    inline-size: 62px;
    block-size: 62px;
    margin-inline: auto;
    margin-block-end: 20px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--lp-accent-soft);
    border: 1px solid var(--lp-border);
    color: var(--lp-accent);
    transition: transform 0.4s var(--lp-ease), background-color 0.4s var(--lp-ease);
}
.lp-sector-icon svg { inline-size: 26px; block-size: 26px; }
.lp-sector:hover .lp-sector-icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
.lp-sector h3 { font-size: var(--lp-step-1); margin-block-end: 9px; }
.lp-sector p { font-size: var(--lp-step--1); color: var(--lp-text-muted); line-height: 1.65; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.lp-cta {
    position: relative;
    overflow: clip;
    background: linear-gradient(135deg, var(--lp-green-800), var(--lp-green-600));
    color: #F4F2EA;
    border-radius: var(--lp-radius-lg);
    padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
    text-align: center;
}
.lp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 70% at 80% 10%, rgba(201, 162, 39, 0.20), transparent 60%);
    pointer-events: none;
}
.lp-cta > * { position: relative; }
.lp-cta h2 { font-size: var(--lp-step-3); color: #FFFFFF; margin-block-end: 12px; }
.lp-cta p { color: rgba(244, 242, 234, 0.72); font-size: var(--lp-step-1); margin-block-end: 28px; max-width: 52ch; margin-inline: auto; }
.lp-cta .lp-btn-primary { background: var(--lp-gold); color: var(--lp-green-800); }
.lp-cta .lp-btn-primary:hover { background: #E0B93C; }

/* ==========================================================================
   Footer
   ========================================================================== */

.lp-footer {
    background: var(--lp-bg-alt);
    border-top: 1px solid var(--lp-border);
    padding-block: clamp(44px, 6vw, 64px) 26px;
}
.lp-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    padding-block-end: 32px;
    border-block-end: 1px solid var(--lp-border);
}
.lp-footer-brand .lp-brand { margin-block-end: 14px; }
.lp-footer-brand p { font-size: var(--lp-step--1); color: var(--lp-text-muted); max-width: 42ch; line-height: 1.8; }
.lp-footer-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--lp-text-muted);
    margin-block-end: 14px;
}
.lp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-footer-col a {
    font-size: var(--lp-step--1);
    color: var(--lp-text-soft);
    text-decoration: none;
    transition: color 0.2s var(--lp-ease);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.lp-footer-col a::before {
    content: "";
    inline-size: 0;
    block-size: 1px;
    background: var(--lp-accent);
    transition: inline-size 0.25s var(--lp-ease);
}
.lp-footer-col a:hover { color: var(--lp-accent); }
.lp-footer-col a:hover::before { inline-size: 12px; }

.lp-footer-base {
    padding-block-start: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.lp-footer-base p { font-size: var(--lp-step--1); color: var(--lp-text-muted); }
.lp-footer-base .lp-credit { font-size: 0.75rem; color: var(--lp-text-muted); opacity: 0.8; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.lp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease);
    transition-delay: var(--lp-delay, 0ms);
    will-change: opacity, transform;
}
.lp-reveal.is-visible { opacity: 1; transform: none; }

/* No JS? Never leave the page blank — show everything. */
.lp-nojs .lp-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-hero-media img { block-size: clamp(240px, 46vw, 340px); }
    .lp-hero-lede { max-width: none; }
    .lp-steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
    .lp-steps::before { display: none; }
    .lp-sectors { grid-template-columns: repeat(2, 1fr); }
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
    .lp-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .lp-brand-text { display: none; }
    .lp-header-inner { padding-block: 11px; gap: 10px; }
    .lp-btn-login { min-inline-size: 0; padding: 11px 18px; }
    .lp-lang { inline-size: 30px; block-size: 28px; font-size: 0.6875rem; }
    .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    /* Stacked, the centred markers floated between cards and read as
       disconnected. Side by side they scan as a timeline again. */
    .lp-steps { grid-template-columns: 1fr; gap: 10px; }
    .lp-step { flex-direction: row; align-items: stretch; gap: 14px; }
    .lp-step-marker {
        inline-size: 46px;
        block-size: 46px;
        margin: 0;
        flex: none;
        align-self: center;
        box-shadow: none;
    }
    .lp-step-card { text-align: start; padding: 16px 18px; }
    .lp-sectors { grid-template-columns: 1fr; }
    .lp-pillars { grid-template-columns: 1fr; }
    .lp-footer-grid { grid-template-columns: 1fr; }
    .lp-footer-base { justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
    .lp-langbar { padding: 2px; }
    .lp-lang { inline-size: 26px; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .lp-reveal { opacity: 1; transform: none; }
}

.lp-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 8px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    font-weight: 600;
    text-decoration: none;
}
.lp-skip:focus { inset-inline-start: 12px; }