/* css/landing_polish.css
   Landing page polish: compact header, scroll progress, side dot navigation, hero depth (slow zoom, staggered
   entrance, scroll cue), heading accents, parallax glows, richer card hover. Loaded AFTER landing_page.css;
   js/landing_polish.js drives the scroll-linked parts. Everything here is switched off for people who ask
   their device for reduced motion. */

/* ---------- header: slightly more compact once you leave the hero (no background) ---------- */
.sas-landing-page header { transition: padding 0.4s var(--ease-out-expo); }
.sas-landing-page header.is-scrolled { padding-block: 10px; }
.sas-landing-page header .header-left img { transition: width 0.4s var(--ease-out-expo); }
.sas-landing-page header.is-scrolled .header-left img { width: 52px !important; }

/* nav: an underline that grows from the centre instead of a hard text-decoration */
.sas-landing-page header nav ul li a { position: relative; padding-block: 4px; }
.sas-landing-page header nav ul li a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
    background: var(--primary-orange); transform: scaleX(0); transform-origin: center;
    transition: transform 0.35s var(--ease-out-expo);
}
.sas-landing-page header nav ul li a.active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .sas-landing-page header nav ul li a:hover::after { transform: scaleX(1); } }
.sas-landing-page header nav ul li a.active,
.sas-landing-page header.header-white nav ul li a.active { text-decoration: none; }

/* ---------- side dots ---------- */
.landing-dots {
    position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 9990;
    display: flex; flex-direction: column; gap: 14px;
}
.landing-dots button {
    position: relative; width: 12px; height: 12px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--primary-orange); background: rgba(255, 255, 255, 0.55);
    transition: transform 0.3s var(--ease-out-expo), background 0.3s;
}
@media (hover: hover) and (pointer: fine) { .landing-dots button:hover { transform: scale(1.25); } }
.landing-dots button.on { background: var(--primary-orange); transform: scale(1.25); }
.landing-dots button span {
    position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap;
    background: rgba(20, 30, 24, 0.88); color: #fff; font: 600 11px 'Montserrat', sans-serif;
    padding: 4px 10px; border-radius: 12px; opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s var(--ease-out-expo);
}
.landing-dots button:hover span, .landing-dots button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1100px) { .landing-dots { display: none; } }

/* ---------- hero: slow zoom, staggered entrance, scroll cue ---------- */
.sas-landing-page .hero { background: none; }
.sas-landing-page .hero .hero-bg {
    position: absolute; inset: 0; z-index: 0; background: url('../img/bg.jpg') center/cover no-repeat;
    animation: heroZoom 26s ease-in-out infinite alternate; will-change: transform;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09) translate(-1%, -1%); } }

.sas-landing-page .hero .hero-buttons { animation: fadeUp 0.9s var(--ease-out-expo) 1.1s both; }
.sas-landing-page .hero .hero-subtitle { animation: fadeUp 0.9s var(--ease-out-expo) 0.5s both; }

.sas-landing-page .btn-hero-primary, .sas-landing-page .btn-transparent-outline, .sas-landing-page .btn-hero-link {
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background 0.3s, color 0.3s, border-color 0.3s;
}
.sas-landing-page .btn-hero-primary { position: relative; overflow: hidden; }
.sas-landing-page .btn-hero-primary::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg); transition: left 0.7s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-hero-primary:hover::after { left: 130%; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-hero-primary:hover, .sas-landing-page .btn-transparent-outline:hover, .sas-landing-page .btn-hero-link:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);   /* the buttons stay where they are; only colour and shadow change */
} }

.scroll-cue {
    position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); width: 26px; height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 16px; cursor: pointer; background: none;
    opacity: 0; animation: cueIn 0.9s var(--ease-out-expo) 2.2s forwards;
}
@keyframes cueIn { from { opacity: 0; } to { opacity: 1; } }
.scroll-cue::before {
    content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
    background: #fff; animation: cueDrop 1.8s var(--ease-in-out) infinite;
}
@keyframes cueDrop { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ---------- headings: an accent bar that draws itself ---------- */
.ai-banner h2::after, .services h2::after, .contacts-header h2::after {
    content: ''; display: block; height: 4px; width: 0; margin-top: 10px; border-radius: 4px;
    background: var(--primary-orange); transition: width 0.9s var(--ease-out-expo) 0.5s;
}
.services h2::after, .ai-banner h2::after { margin-inline: auto; }
.ai-section.in-view .ai-banner h2::after, .services.in-view h2::after, .contacts.in-view .contacts-header h2::after { width: 64px; }
.services h2::after { background: var(--primary-green); }

/* ---------- glows drift with the scroll (js sets --py per slide) ---------- */
.glow-circle { translate: 0 calc(var(--py, 0) * 1px); transition: translate 0.2s linear; }

/* ---------- cards ---------- */
.sas-landing-page .service-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.2), transparent 62%);
    opacity: 0; transition: opacity 0.35s;
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page .service-card:hover::after { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .service-card:hover .service-icon { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)); } }

@media (hover: hover) and (pointer: fine) { .contact-card:hover, .contact-card.settled:hover {
    transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); border-color: var(--primary-orange);
} }
.contact-card .contact-icon { transition: transform 0.4s var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) { .contact-card:hover .contact-icon { transform: scale(1.12) rotate(-6deg); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sas-landing-page .hero .hero-bg, .scroll-cue::before { animation: none; }
    .sas-landing-page .hero .hero-buttons, .sas-landing-page .hero .hero-subtitle { animation: none; }
    .scroll-cue { animation: none; opacity: 1; }
    .glow-circle { translate: none; }
    .ai-banner h2::after, .services h2::after, .contacts-header h2::after { transition: none; width: 64px; }
    .sas-landing-page .btn-hero-primary::after { display: none; }
}

/* =====================================================================
   HERO PHONE MOCKUP (right side of the first page, wide screens only).
   The screen is a scaled copy of the real mobile student dashboard, scrolling slowly like someone browsing.
   Remove this block and the .hero-phone markup in index.php to go back to the centred hero.
   ===================================================================== */
.hero-phone { display: none; }

@media (min-width: 900px) {
    .sas-landing-page .hero { flex-direction: row; align-items: center; gap: 56px; padding: 0 56px; justify-content: center; }
    .sas-landing-page .hero .hero-content { flex: 0 1 700px; max-width: 700px; text-align: left; padding: 0; }
    .sas-landing-page .hero .hero-content h2 { font-size: clamp(64px, 8.2vw, 112px); max-width: none; }
    .sas-landing-page .hero .hero-buttons { justify-content: flex-start; gap: 14px; }
    .sas-landing-page .hero .btn-transparent-outline,
    .sas-landing-page .hero .btn-hero-primary,
    .sas-landing-page .hero .btn-hero-link { width: 200px; padding-inline: 20px; }
}

/* the phone itself (frame, screen, scroll) is shared by every width */
@media all {

    .hero-phone {
        --s: 0.752;
        display: block; position: relative; z-index: 2; flex: 0 0 auto; margin-top: 90px; perspective: 1500px;
        opacity: 0; animation: phoneIn 1.1s var(--ease-out-expo) 0.7s forwards;
    }
    .hero-phone::before {
        content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 55%, transparent 72%);
    }
    @keyframes phoneIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }

    /* front view: a straight phone with a thin black bezel */
    .phone {
        position: relative; width: 300px; height: 612px; padding: 8px; border-radius: 44px;
        background: #0b0d0c;
        box-shadow: 0 0 0 2px #cfd2d1, inset 0 0 0 1.5px rgba(255, 255, 255, 0.2), 0 24px 44px rgba(0, 0, 0, 0.35);
        animation: phoneFloat 7s ease-in-out infinite;
    }
    @keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .phone .slab { display: none; }
    .hero-phone::after {
        content: ''; position: absolute; z-index: -1; left: 50%; bottom: -34px; width: 300px; height: 44px; margin-left: -150px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%); filter: blur(6px);
    }
    .phone-btn { position: absolute; width: 4px; background: linear-gradient(90deg, #2a2e2f, #4a4f50); border-radius: 2px; }
    .pb-1 { left: -4px; top: 104px; height: 26px; } .pb-2 { left: -4px; top: 150px; height: 46px; } .pb-3 { left: -4px; top: 206px; height: 46px; }
    .pb-4 { right: -4px; top: 168px; height: 74px; }
    .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #f4f6f5; box-shadow: none; }
    .phone-island { position: absolute; top: 0; left: 50%; width: 120px; height: 24px; margin-left: -60px; border-radius: 0 0 18px 18px; background: #0b0d0c; z-index: 6; }
    .ph-status { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; height: 46px; font: 700 12px 'Montserrat', sans-serif; color: #111; background: linear-gradient(#f4f6f5 70%, rgba(244, 246, 245, 0)); }
    .ph-icons { display: inline-flex; gap: 5px; font-size: 11px; }

    .ph-viewport { position: absolute; inset: 0 0 56px 0; overflow: hidden; padding-top: 44px; }
    .ph-page { width: 375px; transform: scale(var(--s)); transform-origin: top left; font-family: 'Montserrat', sans-serif; color: #222; }
    .ph-scroll { padding: 12px 20px 40px; animation: pageScroll 18s ease-in-out 2.2s infinite; }
    @keyframes pageScroll {
        0%, 18% { transform: translateY(0); }
        42%, 62% { transform: translateY(-410px); }
        86%, 100% { transform: translateY(0); }
    }

    .pg-top { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
    .pg-menu { width: 24px; display: flex; flex-direction: column; gap: 4px; margin-right: 4px; }
    .pg-menu i { display: block; height: 4px; border-radius: 2px; background: #0a5f25; }
    .pg-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 20px; background: #fff; border: 1px solid #e3e8e5; font-size: 13px; color: #888; }
    .pg-circle { width: 34px; height: 34px; border-radius: 50%; background: #dde7e0; color: #0a5f25; display: flex; align-items: center; justify-content: center; font-size: 13px; }
    .pg-bell { position: relative; font-size: 18px; color: #333; padding: 0 2px; }
    .pg-bell b { position: absolute; right: 0; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: #dc3545; }
    .pg-avatar { width: 44px; height: 44px; border-radius: 50%; background: #cfe5d5; border: 1px solid #b9d8c1; color: #0a5f25; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
    .pg-hello { font-size: 22px; font-weight: 500; color: #444; line-height: 1.25; }
    .pg-hello b { color: #0a5f25; font-weight: 700; }
    .pg-sub { font-size: 13px; color: #666; margin: 4px 0 16px; }
    .pg-btn { display: inline-block; clear: both; padding: 12px 24px; border-radius: 26px; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
    .pg-btn.yellow { background: #ffc107; color: #222; }
    .pg-btn.green { background: #0a5f25; color: #fff; display: table; }
    .pg-btn.yellow { display: table; }
    .pg-stat { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; background: #fff; border-radius: 22px; padding: 14px 16px 12px; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
    .pg-stat .ic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; }
    .pg-stat .i1 { background: #cfe3d6; color: #0a5f25; } .pg-stat .i2 { background: #c9e6ee; color: #1583a0; } .pg-stat .i3 { background: #ddd0f7; color: #6d3fc0; }
    .pg-stat em { text-align: left; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: #222; }
    .pg-stat strong { grid-column: 1 / -1; text-align: center; font-size: 30px; font-weight: 800; color: #111; margin-top: -2px; }
    .pg-h { font-size: 16px; font-weight: 700; color: #0a5f25; margin: 20px 0 10px; }
    .pg-case { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
    .pg-case b { display: block; font-size: 13px; } .pg-case small { font-size: 11px; color: #777; }
    .bd { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
    .bd.review { background: #e3f0ff; color: #1b5aa8; } .bd.done { background: #e3f4e8; color: #1b7a3a; } .bd.wait { background: #fff3d6; color: #8a6200; }
    .pg-note { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #f3d9a4; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
    .pg-note i { color: #f39c12; font-size: 16px; } .pg-note b { display: block; font-size: 12.5px; } .pg-note small { font-size: 11px; color: #777; }

    .ph-urlbar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: rgba(250, 250, 250, 0.96); border-top: 1px solid #e3e3e3; display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; z-index: 5; }
    .ph-url { width: 78%; height: 30px; border-radius: 15px; background: #e9ebea; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 11.5px 'Montserrat', sans-serif; color: #333; }
    .ph-url i { font-size: 9px; color: #666; }
    .ph-home { position: absolute; bottom: 6px; left: 50%; width: 96px; height: 4px; margin-left: -48px; border-radius: 3px; background: #111; z-index: 6; }

}

/* Split-screen / small laptop widths: same layout, smaller phone and type, so the phone is still there */
@media (min-width: 900px) and (max-width: 1179px) {
    .sas-landing-page .hero { gap: 28px; padding: 0 32px; }
    .sas-landing-page .hero .hero-content { flex: 1 1 0; min-width: 0; }
    .sas-landing-page .hero .hero-content h2 { font-size: clamp(54px, 8vw, 84px); letter-spacing: 2px; }
    .sas-landing-page .hero .hero-content p { font-size: 1rem; margin-bottom: 28px; }
    .sas-landing-page .hero .btn-transparent-outline,
    .sas-landing-page .hero .btn-hero-primary,
    .sas-landing-page .hero .btn-hero-link { width: 168px; padding: 11px 12px; font-size: 13px; }
    .hero-phone { zoom: 0.8; }
}

/* Short windows: shrink the phone so it never rides up over the header navigation */
@media (min-width: 900px) and (max-height: 800px) { .hero-phone { zoom: 0.84; } }
@media (min-width: 900px) and (max-height: 700px) { .hero-phone { zoom: 0.7; } }
@media (min-width: 900px) and (max-width: 1179px) and (max-height: 800px) { .hero-phone { zoom: 0.68; } }
@media (min-width: 900px) and (max-width: 1179px) and (max-height: 700px) { .hero-phone { zoom: 0.58; } }

/* =====================================================================
   HERO LAPTOP: a real 3D laptop (lid + keyboard deck), turned and seen from above, with the phone in front of it.
   Wide screens only. Remove this block and the .laptop markup to drop it (the phone then stands alone).
   ===================================================================== */
.hero-phone .laptop { display: none; }
@media (min-width: 1300px) and (min-height: 640px) {
    .hero-phone { margin-left: 0; width: 720px; height: 500px; margin-top: 70px; }
    .hero-phone .phone { position: absolute; right: 0; bottom: 84px; zoom: 0.6; }
    .hero-phone::after { display: none; }
    .fc-a { left: 6px; top: 6px; } .fc-b { right: -34px; top: 40px; } .fc-c { left: 150px; bottom: -6px; }

    .hero-phone .laptop { display: block; position: absolute; z-index: 0; left: 0; top: 40px; width: 640px; height: 440px; }
    .hero-phone .laptop::after { content: ''; position: absolute; left: 20px; bottom: -14px; width: 600px; height: 36px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 70%); filter: blur(8px); z-index: -1; }
    .lp3 { position: absolute; left: 30px; top: 0; width: 580px; height: 440px; }
    .lp-lid { position: absolute; left: 0; top: 0; width: 580px; height: 362px; }
    .lp-front { position: absolute; inset: 0; box-sizing: border-box; padding: 11px 11px 14px; border-radius: 16px 16px 4px 4px; background: #0b0d0c; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2), 0 0 0 2px #c9ccca; }
    .lp-back { display: none; }
    .lp-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: #f4f6f5; }
    .lp-page { width: 1000px; height: 598px; transform: scale(0.5434); transform-origin: top left; display: flex; font-family: 'Montserrat', sans-serif; color: #223; }
    .lp-lid::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -7px; height: 7px; background: linear-gradient(#34383a, #1c1f20); border-radius: 0 0 5px 5px; }
    .lp-deck {
        position: absolute; left: -46px; top: 369px; width: 672px; height: 13px; border-radius: 2px 2px 16px 16px;
        background: linear-gradient(#f6f7f7 0%, #d7dad9 55%, #b4b8b6 100%); box-shadow: 0 14px 22px rgba(0, 0, 0, 0.28);
    }
    .lp-deck::before { content: ''; position: absolute; left: 50%; top: 0; width: 100px; height: 6px; margin-left: -50px; border-radius: 0 0 9px 9px; background: linear-gradient(#a9adab, #d3d6d5); }
    .lp-deck .slab, .lp-keys, .lp-pad { display: none; }

    /* glass sheen across both screens, a camera dot on the laptop, and a staggered entrance */
    .lp-screen::after, .phone-screen::after {
        content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8;
        background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 38%);
    }
    .lp-front::before { content: ''; position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #2c3330; box-shadow: 0 0 0 1px #121615; z-index: 3; }
    .hero-phone .laptop { animation: devIn 1s var(--ease-out-expo) 0.8s both; }
    .hero-phone .phone { animation: devIn 0.9s var(--ease-out-expo) 1.2s both, phoneFloat 7s ease-in-out 2.2s infinite; }
    @keyframes devIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

    /* the dashboard on the laptop screen */
    .lp-side { width: 200px; background: linear-gradient(180deg, #0f6b2b, #0a5f25); color: #fff; padding: 22px 16px; flex: none; }
    .lp-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; margin-bottom: 22px; } .lp-brand img { width: 30px; height: 30px; } .lp-brand b { color: #f39c12; }
    .lp-nav { font-size: 14px; font-weight: 600; padding: 11px 12px; border-radius: 10px; margin-bottom: 4px; color: rgba(255, 255, 255, 0.82); }
    .lp-nav.on { background: rgba(255, 255, 255, 0.18); color: #fff; }
    .lp-main { flex: 1; padding: 22px 26px; min-width: 0; }
    .lp-bar { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; color: #0a5f25; margin-bottom: 18px; } .lp-bar i { width: 34px; height: 34px; border-radius: 50%; background: #cfe5d5; }
    .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
    .lp-stats div, .lp-card { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
    .lp-stats em, .lp-card em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: #777; letter-spacing: 0.3px; }
    .lp-stats strong { font-size: 30px; font-weight: 800; color: #111; }
    .lp-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 16px; }
    .lp-chart { height: 170px; display: flex; flex-direction: column; }
    .lp-bars { flex: 1; display: flex; align-items: flex-end; gap: 14px; padding-top: 10px; }
    .lp-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(#f39c12, #f7b84a); transform-origin: bottom; animation: lpGrow 7s ease-in-out infinite; }
    .lp-bars i:nth-child(even) { background: linear-gradient(#147934, #0a5f25); animation-delay: 0.25s; }
    .lp-bars i:nth-child(3) { animation-delay: 0.5s; } .lp-bars i:nth-child(4) { animation-delay: 0.75s; } .lp-bars i:nth-child(5) { animation-delay: 1s; } .lp-bars i:nth-child(6) { animation-delay: 1.25s; }
    @keyframes lpGrow { 0% { transform: scaleY(0.08); } 14%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0.08); } }
    .lp-donut { display: flex; flex-direction: column; align-items: center; }
    .lp-ring { width: 104px; height: 104px; margin-top: 12px; border-radius: 50%; background: conic-gradient(#0a5f25 0 38%, #f39c12 38% 64%, #1583a0 64% 82%, #6d3fc0 82% 100%); -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%); mask: radial-gradient(circle, transparent 46%, #000 47%); animation: lpSpin 18s linear infinite; }
    @keyframes lpSpin { to { transform: rotate(360deg); } }
    .lp-tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #eef1ef; font-size: 13px; font-weight: 600; } .lp-tr.head { font-size: 11px; color: #999; letter-spacing: 0.4px; text-transform: uppercase; } .lp-tr:last-child { border-bottom: none; }
    .lp-tr .s { justify-self: start; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; } .s.a { background: #e3f0ff; color: #1b5aa8; } .s.b { background: #e3f4e8; color: #1b7a3a; } .s.c { background: #fff3d6; color: #8a6200; }
}
/* Common laptop widths (1300-1639 CSS px, e.g. a 1920px screen at 125% scaling): same group, scaled down */
@media (min-width: 1300px) and (max-width: 1639px) and (min-height: 640px) {
    .hero-phone { zoom: 0.9; }
    .sas-landing-page .hero .hero-content h2 { font-size: clamp(60px, 6.6vw, 90px); }
    .sas-landing-page .hero .hero-content p { font-size: 1rem; }
    .sas-landing-page .hero .btn-transparent-outline,
    .sas-landing-page .hero .btn-hero-primary,
    .sas-landing-page .hero .btn-hero-link { width: 164px; padding-inline: 12px; font-size: 13px; }
}
@media (min-width: 1300px) and (max-width: 1639px) and (min-height: 640px) and (max-height: 800px) { .hero-phone { zoom: 0.86; } }
@media (min-width: 1300px) and (max-width: 1639px) and (min-height: 640px) and (max-height: 690px) { .hero-phone { zoom: 0.72; } }

/* Big screens: a bit larger still */
@media (min-width: 1640px) and (min-height: 801px) { .hero-phone { zoom: 1.15; } }
@media (min-width: 1300px) and (max-width: 1419px) and (min-height: 801px) { .hero-phone { zoom: 0.8; } }
@media (min-width: 1300px) and (max-width: 1419px) and (min-height: 640px) and (max-height: 800px) { .hero-phone { zoom: 0.76; } }

@media (prefers-reduced-motion: reduce) { .lp-bars i, .lp-ring { animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .hero-phone { animation: none; opacity: 1; }
    .phone, .fc, .ph-scroll, .hero-phone .laptop { animation: none !important; opacity: 1; }
}

/* =====================================================================
   MODERN PASS: eyebrow pill, arrow buttons, floating UI cards around the devices.
   ===================================================================== */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 16px 7px 12px; border-radius: 30px;
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
    font: 600 12.5px 'Montserrat', sans-serif; letter-spacing: 0.4px;
    opacity: 0; animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards;
}
.hero-eyebrow .eb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-orange); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); animation: ebPulse 2.4s ease-out infinite; }
@keyframes ebPulse { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } }

.sas-landing-page .btn-hero-primary i { margin-left: 8px; font-size: 12px; transition: transform 0.35s var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-hero-primary:hover i { transform: translateX(5px); } }

.fc { display: none; }
@media (min-width: 900px) {
    .fc {
        position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px;
        background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6); white-space: nowrap;
        font-family: 'Montserrat', sans-serif; animation: fcFloat 6s ease-in-out infinite;
    }
    .fc b { display: block; font-size: 12.5px; color: #1b2a21; line-height: 1.2; }
    .fc small { display: block; font-size: 10.5px; color: #6b7a72; margin-top: 2px; }
    .fc-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex: none; }
    .fc-ic.ok { background: linear-gradient(135deg, #1fa653, #0a5f25); }
    .fc-ic.ai { background: linear-gradient(135deg, #8a63e0, #5d3bb5); }
    .fc-ic.lock { background: linear-gradient(135deg, #f7b84a, #f39c12); }
    .fc-a { left: -40px; top: 110px; animation-delay: 0s; }
    .fc-b { right: -30px; top: 60px; animation-delay: 1.4s; }
    .fc-c { left: 40px; bottom: 30px; animation-delay: 2.6s; }
    @keyframes fcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}
@media (min-width: 1300px) and (min-height: 640px) {
    .fc-a { left: 4px; top: 2px; } .fc-b { right: -28px; top: -22px; } .fc-c { left: 150px; bottom: -8px; }
}
@media (prefers-reduced-motion: reduce) { .hero-eyebrow { animation: none; opacity: 1; } .hero-eyebrow .eb-dot { animation: none; } }

/* =====================================================================
   CONNECTED SECTIONS: soft seams between slides, and a line that links the side dots.
   ===================================================================== */
.sas-landing-page .seam { position: absolute; left: 0; right: 0; z-index: 11; pointer-events: none; }
.sas-landing-page .seam-top { top: 0; height: 100px; }
.sas-landing-page .seam-bottom { bottom: 0; height: 60px; }
.sas-landing-page .ai-section > .seam-top { background: linear-gradient(#0a5f25, rgba(10, 95, 37, 0)); }
.sas-landing-page .ai-section > .seam-bottom { height: 36px; background: linear-gradient(rgba(244, 247, 245, 0), #f4f7f5); }
.sas-landing-page .services > .seam-top { background: linear-gradient(#f4f7f5, rgba(244, 247, 245, 0)); }
.sas-landing-page .services > .seam-bottom { display: none; }
.sas-landing-page .contacts > .seam-top { height: 90px; background: linear-gradient(rgba(10, 95, 37, 0.92), rgba(10, 95, 37, 0)); }

.landing-dots::before {
    content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 2px;
    background: linear-gradient(var(--primary-orange) var(--fill, 0%), rgba(243, 156, 18, 0.28) var(--fill, 0%)); z-index: -1;
}
.landing-dots button.done { background: var(--primary-orange); }
@media (prefers-reduced-motion: reduce) { .sas-landing-page .seam { display: none; } }

/* =====================================================================
   AI ASSISTANT SECTION: green band under the header, then a light page with the text on the left and the chat on the right.
   ===================================================================== */
.sas-landing-page .ai-section { background: linear-gradient(180deg, #f4f8f5, #e4efe7); }
.sas-landing-page .ai-section::before {
    background: linear-gradient(180deg, #0a5f25 0, #0a5f25 70px, rgba(10, 95, 37, 0) 190px);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sas-landing-page .ai-glow-green { opacity: 0.22; }
.sas-landing-page .ai-glow-gold { opacity: 0.2; }

.sas-landing-page .ai-content-wrapper { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px 28px; box-sizing: border-box; }
.sas-landing-page .ai-banner { background: none; color: #1b2a21; text-align: center; padding: 120px 0 8px; overflow: visible; }
.sas-landing-page .ai-banner::before { display: none; }
.ai-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 30px;
    background: rgba(10, 95, 37, 0.1); color: var(--primary-green); font: 700 12px 'Montserrat', sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
}
.ai-eyebrow i { color: var(--primary-orange); }
.sas-landing-page .ai-banner h2 { color: var(--primary-green); font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: 0.5px; }
.sas-landing-page .ai-banner h2::after { margin-inline: 0; }
.sas-landing-page .ai-banner p { color: #4b5a51; font-size: 1.05rem; margin: 12px 0 0; }
.ai-points { list-style: none; margin: 22px 0 0; padding: 0; text-align: left; display: grid; gap: 12px; }
.ai-points li { display: flex; gap: 10px; align-items: flex-start; font: 500 14.5px/1.45 'Montserrat', sans-serif; color: #34443a; }
.ai-points i { color: var(--primary-green); margin-top: 2px; }

/* the chat window */
.sas-landing-page .chat-container {
    width: 100%; max-width: none; margin: 18px 0 0; border-radius: 24px; background: #fff;
    box-shadow: 0 26px 60px rgba(10, 95, 37, 0.16), 0 0 0 1px #dfe9e2;
}
.sas-landing-page .chat-header { justify-content: flex-start; gap: 12px; padding: 14px 18px; }
.ch-ava { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.ch-title b { display: block; font-size: 14.5px; } .ch-title small { display: block; font-size: 11px; font-weight: 500; opacity: 0.85; margin-top: 1px; }
.ch-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.sas-landing-page .chat-body { background: #f6f9f7; padding: 22px; }
.sas-landing-page .chat-bubble { background: #fff; border: none; box-shadow: 0 6px 16px rgba(10, 95, 37, 0.08); border-radius: 18px 18px 18px 6px; color: #2a3a30; }
.sas-landing-page .chat-bubble.user { background: linear-gradient(135deg, var(--secondary-green), var(--primary-green)); border-radius: 18px 18px 6px 18px; box-shadow: 0 6px 16px rgba(10, 95, 37, 0.25); }
.sas-landing-page .suggested-questions { text-align: left; padding-top: 18px; }
.sas-landing-page .suggested-questions p { font: 700 11px 'Montserrat', sans-serif; letter-spacing: 0.7px; text-transform: uppercase; color: #7a8a80; margin-bottom: 8px; }
.sas-landing-page .pill-btn { font-family: 'Montserrat', sans-serif; margin: 4px 6px 4px 0; padding: 9px 16px; font-size: 13px; border: 1px solid #d5e3da; background: #fff; border-radius: 22px; }
.sas-landing-page .chat-input { background: #fff; border-top: 1px solid #e6eee9; padding: 14px 16px; }
.sas-landing-page .chat-input input { background: #f4f8f5; border: 1px solid #dfe9e2; font-size: 15px; }
.sas-landing-page .chat-input button { box-shadow: 0 8px 18px rgba(10, 95, 37, 0.3); }

@media (min-width: 1000px) {
    .sas-landing-page .ai-content-wrapper { flex-direction: row; align-items: center; gap: 56px; padding-top: 96px; }
    .sas-landing-page .ai-banner { flex: 0 0 38%; text-align: left; padding: 0; }
    .sas-landing-page .chat-container { flex: 1; margin: 0; max-height: min(70vh, 640px); min-height: 400px; }
}
@media (max-width: 999px) {
    .ai-points { max-width: 420px; margin-inline: auto; }
    .sas-landing-page .ai-banner h2::after { margin-inline: auto; }
}

/* =====================================================================
   AI SECTION, DESIGN B (active): deep green stage, centred heading, one wide chat.
   Remove class "ai-b" from the #slide2 section in index.php to get design A (light, two columns) back.
   ===================================================================== */
.sas-landing-page .ai-section.ai-b {
    background:
        radial-gradient(800px 520px at 88% 4%, rgba(255, 193, 7, 0.28), transparent 62%),
        radial-gradient(760px 560px at 6% 96%, rgba(120, 220, 150, 0.32), transparent 60%),
        linear-gradient(180deg, #1f9b45 0%, #12782f 55%, #0d6326 100%);
}
.sas-landing-page .ai-section.ai-b::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.2px, transparent 1.4px); background-size: 26px 26px; opacity: 0.7;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.sas-landing-page .ai-section.ai-b .ai-glow-green { opacity: 0.4; }
.sas-landing-page .ai-section.ai-b .ai-glow-gold { opacity: 0.3; }
.sas-landing-page .ai-section.ai-b > .seam-bottom { height: 44px; background: linear-gradient(rgba(13, 99, 38, 0), #f4f7f5); }

.sas-landing-page .ai-b .ai-content-wrapper { flex-direction: column; align-items: center; gap: 0; max-width: 1000px; padding: 0 28px 52px; }
.sas-landing-page .ai-b .ai-banner { flex: none; width: 100%; text-align: center; color: #fff; padding: 104px 0 0; }
.sas-landing-page .ai-b .ai-eyebrow { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.sas-landing-page .ai-b .ai-eyebrow i { color: var(--primary-orange); }
.sas-landing-page .ai-b .ai-banner h2 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); }
.sas-landing-page .ai-b .ai-banner h2::after { margin-inline: auto; }
.sas-landing-page .ai-b .ai-banner p { color: rgba(255, 255, 255, 0.86); margin-top: 10px; }
.sas-landing-page .ai-b .ai-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; }
.sas-landing-page .ai-b .ai-points li { color: rgba(255, 255, 255, 0.9); font-size: 12.5px; }
.sas-landing-page .ai-b .ai-points i { color: var(--primary-orange); }

.sas-landing-page .ai-b .chat-container {
    flex: none; width: 100%; max-width: 920px; margin: 20px auto 0; height: clamp(290px, calc(100vh - 410px), 460px); min-height: 0; max-height: none;
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
@media (min-width: 1000px) {
    .sas-landing-page .ai-b .ai-content-wrapper { flex-direction: column; align-items: center; gap: 0; padding-top: 0; }
    .sas-landing-page .ai-b .ai-banner { flex: none; text-align: center; padding: 104px 0 0; }
    .sas-landing-page .ai-b .chat-container { flex: none; margin: 20px auto 0; max-height: none; min-height: 0; }
}

/* design B on shorter windows: drop the three points so the chat gets room for its suggested questions */
@media (min-width: 1000px) and (max-height: 820px) {
    .sas-landing-page .ai-b .ai-points { display: none; }
    .sas-landing-page .ai-b .ai-banner, .sas-landing-page .ai-b .ai-banner { padding-top: 92px; }
    .sas-landing-page .ai-b .chat-container { height: clamp(300px, calc(100vh - 322px), 480px); }
}

/* floating cards beside the chat (design B), same style as the hero cards */
.fc-ai { display: none; }
@media (min-width: 1280px) {
    .sas-landing-page .ai-b .ai-content-wrapper { position: relative; }
    .fc-ai { display: flex; z-index: 12; }
    .fc-l1 { left: -118px; top: 46%; animation-delay: 0.4s; }
    .fc-r1 { right: -118px; top: 38%; animation-delay: 1.6s; }
    .fc-r2 { right: -90px; top: 62%; animation-delay: 2.8s; }
}
@media (min-width: 1500px) { .fc-l1 { left: -200px; } .fc-r1 { right: -200px; } .fc-r2 { right: -170px; } }

/* =====================================================================
   AI SECTION, DESIGN C (active): a soft sage-to-mint panel with a white frame, an italic serif accent in the heading,
   pill buttons, and the chat as a calm light card. Change "ai-c" to "ai-b" (dark green) or remove it (design A) in index.php.
   ===================================================================== */
.ai-cta { display: none; }
.sas-landing-page .ai-c { background: #e9f0ec; }
.sas-landing-page .ai-c::before {
    background:
        linear-gradient(180deg, #0a5f25 0, #0a5f25 70px, rgba(10, 95, 37, 0) 190px),
        linear-gradient(rgba(246, 249, 247, 0.86), rgba(238, 245, 240, 0.94)),
        url('../img/bg.jpg') center/cover;
}
.sas-landing-page .ai-c .fc-ai { display: none !important; }
.sas-landing-page .ai-c .ai-glow-green { opacity: 0.3; } .sas-landing-page .ai-c .ai-glow-gold { opacity: 0.4; }

.sas-landing-page .ai-c .ai-content-wrapper {
    flex: 1 1 auto; align-self: stretch; width: calc(100% - 44px); max-width: 1340px; margin: 94px auto 26px; padding: 44px 60px; border-radius: 30px; box-sizing: border-box;
    flex-direction: row; align-items: center; gap: 44px; position: relative; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 7px),
        radial-gradient(520px 380px at 96% 100%, rgba(243, 156, 18, 0.38), rgba(243, 156, 18, 0) 70%),
        radial-gradient(600px 420px at 0% 0%, rgba(31, 166, 83, 0.35), rgba(31, 166, 83, 0) 70%),
        linear-gradient(115deg, #0a5f25 0%, #0f7430 45%, #1b9142 100%);
    box-shadow: 0 0 0 9px #fff, 0 34px 70px rgba(10, 95, 37, 0.28);
}
.sas-landing-page .ai-c .ai-banner { flex: 0 0 38%; text-align: left; color: #fff; padding: 0; }
.sas-landing-page .ai-c .ai-eyebrow { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); text-transform: none; letter-spacing: 0.3px; font-size: 12.5px; }
.sas-landing-page .ai-c .ai-eyebrow i { color: var(--primary-orange); }
.sas-landing-page .ai-c .ai-banner h2 {
    color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: none; letter-spacing: -1px; line-height: 1.04;
    font-size: clamp(34px, 4.4vw, 64px);
}
.sas-landing-page .ai-c .ai-banner h2 em { font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.5px; color: var(--primary-orange); }
.sas-landing-page .ai-c .ai-banner h2::after { display: none; }
.sas-landing-page .ai-c .ai-banner p { color: rgba(255, 255, 255, 0.92); font-size: 1rem; line-height: 1.55; margin-top: 14px; }
.sas-landing-page .ai-c .ai-points { margin-top: 18px; gap: 9px; }
.sas-landing-page .ai-c .ai-points li { color: rgba(255, 255, 255, 0.95); font-size: 13.5px; }
.sas-landing-page .ai-c .ai-points i { color: var(--primary-orange); }
.sas-landing-page .ai-c .ai-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.ai-cta button { font: 600 14px 'Montserrat', sans-serif; padding: 12px 26px; border-radius: 30px; cursor: pointer; transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s; }
.ai-cta-main { background: var(--primary-orange); color: #fff; border: none; font-weight: 700; box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4); }
.ai-cta-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); }
@media (hover: hover) and (pointer: fine) { .ai-cta button:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10, 95, 37, 0.25); } }
.ai-cta-ghost i { margin-left: 6px; font-size: 11px; }

/* the chat as a calm light card */
.sas-landing-page .ai-c .chat-container {
    flex: 1; align-self: stretch; margin: auto 0; max-width: none; min-width: 0; height: auto; max-height: 600px; min-height: 340px;
    background: rgba(255, 255, 255, 0.88); border-radius: 22px;
    box-shadow: 0 22px 50px rgba(10, 95, 37, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.sas-landing-page .ai-c .chat-header { background: transparent; color: #1b2a21; border-bottom: 1px solid #e3ede7; }
.sas-landing-page .ai-c .ch-ava { background: linear-gradient(135deg, var(--secondary-green), var(--primary-green)); color: #fff; }
.sas-landing-page .ai-c .ch-status { color: var(--primary-green); }
.sas-landing-page .ai-c .chat-body { background: transparent; }
.sas-landing-page .ai-c .chat-input { background: transparent; border-top: 1px solid #e3ede7; }
@media (max-width: 999px) {
    .sas-landing-page .ai-c .ai-content-wrapper { flex-direction: column; margin-top: 96px; padding: 28px 22px; gap: 24px; }
    .sas-landing-page .ai-c .ai-banner { flex: none; width: 100%; }
    .sas-landing-page .ai-c .chat-container { width: 100%; height: 420px; flex: none; }
}
@media (min-width: 1000px) and (max-height: 820px) {
    .sas-landing-page .ai-c .ai-content-wrapper { padding: 32px 52px; margin-top: 90px; }
    .sas-landing-page .ai-c .ai-points { display: none; }
}

/* designs A and B keep the original all-caps Oswald heading, so the italic serif accent of design C is switched off there */
.sas-landing-page .ai-section:not(.ai-c) .ai-banner h2 em { font-style: normal; font-family: inherit; }

/* =====================================================================
   SERVICES SECTION: left-aligned heading with the serif accent, white cards with a green icon tile, a faint number and
   tag-style lists; a card turns brand green on hover. (Same family as the AI section.)
   ===================================================================== */
.sv-eyebrow { display: none; }
.sas-landing-page .services .services-wrapper {
    display: block; text-align: center;
    max-width: 1340px; margin: 112px auto 0; padding: 0 40px 30px; box-sizing: border-box;
}
.sas-landing-page .services .sv-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 14px; border-radius: 30px;
    background: rgba(10, 95, 37, 0.1); color: var(--primary-green); font: 700 12.5px 'Montserrat', sans-serif; letter-spacing: 0.3px;
}
.sv-eyebrow i { color: var(--primary-orange); }
.sas-landing-page .services h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: none; letter-spacing: -1px; line-height: 1.04;
    color: var(--primary-green); font-size: clamp(34px, 4.4vw, 62px); margin: 0;
}
.sas-landing-page .services h2 em { font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.5px; color: var(--primary-orange); }
.sas-landing-page .services h2::after { display: none; }
.sas-landing-page .services .services-wrapper > p { margin: 12px auto 0; max-width: 760px; color: #2c3b32; font-size: 1.05rem; font-weight: 500; line-height: 1.6; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.sas-landing-page .services .services-grid { margin-top: 28px; max-width: none; gap: 20px; counter-reset: sv; }

.sas-landing-page .services .service-card {
    background: #fff; color: #223; border: 1px solid #e3ece6; border-radius: 26px; padding: 28px 26px 26px; min-height: 330px; margin-top: 0;
    box-shadow: 0 14px 34px rgba(10, 95, 37, 0.1); transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo), background 0.45s, color 0.3s, border-color 0.3s;
}
.sas-landing-page .services .service-card::before {
    counter-increment: sv; content: "0" counter(sv); position: absolute; right: 22px; top: 14px; z-index: 1;
    font: italic 400 44px 'Instrument Serif', 'Times New Roman', serif; color: rgba(10, 95, 37, 0.16); transition: color 0.3s;
}
.sas-landing-page .services .service-icon {
    display: flex; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 16px; align-items: center; justify-content: center; font-size: 22px; color: #fff;
    background: linear-gradient(135deg, #1b9142, #0a5f25); box-shadow: 0 10px 22px rgba(10, 95, 37, 0.3); transition: transform 0.4s var(--ease-out-expo), background 0.3s, box-shadow 0.3s;
}
.sas-landing-page .services .service-card h3 { color: var(--primary-green); font-size: 19px; line-height: 1.25; margin-bottom: 10px; transition: color 0.3s; }
.sas-landing-page .services .service-card p { color: #55645b; font-size: 13.5px; line-height: 1.55; opacity: 1; margin-bottom: 16px; }
.sas-landing-page .services .service-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; opacity: 1; }
.sas-landing-page .services .service-card li { margin: 0; padding: 5px 12px; border-radius: 20px; background: #edf5ef; color: var(--primary-green); font-size: 11.5px; font-weight: 600; transition: background 0.3s, color 0.3s, transform 0.2s; }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover li { transform: none; } }

@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover, .sas-landing-page .services .service-card.settled:hover {
    background: linear-gradient(150deg, #147934, #0a5f25); border-color: transparent; transform: translateY(-8px); box-shadow: 0 26px 50px rgba(10, 95, 37, 0.35);
} }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover h3, .sas-landing-page .services .service-card:hover p { color: #fff; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover::before { color: rgba(255, 255, 255, 0.3); } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover li { background: rgba(255, 255, 255, 0.18); color: #fff; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover .service-icon { background: linear-gradient(135deg, #f7b84a, #f39c12); box-shadow: 0 10px 22px rgba(243, 156, 18, 0.45); transform: scale(1.08) rotate(-6deg); } }

@media (max-width: 899px) {
    .sas-landing-page .services .services-wrapper { padding: 0 20px 30px; }
    .sas-landing-page .services .service-card { min-height: 0; }
}
@media (min-width: 900px) and (max-height: 800px) {
    .sas-landing-page .services .services-wrapper { margin-top: 92px; }
    .sas-landing-page .services .service-card { min-height: 340px; padding: 26px 22px; }
    .sas-landing-page .services .services-grid { margin-top: 22px; }
}

/* Services, toned down: no numbers, calmer hover, plain bullet lists, smaller heading */
.sas-landing-page .services .service-card::before { display: none; }
.sas-landing-page .services h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.5px; }
.sas-landing-page .services .services-wrapper > p { font-size: 0.98rem; }
.sas-landing-page .services .service-card { min-height: 0; border-radius: 20px; padding: 26px 24px; box-shadow: 0 8px 22px rgba(10, 95, 37, 0.08); }
.sas-landing-page .services .service-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; margin-bottom: 16px; box-shadow: none; }
.sas-landing-page .services .service-card ul { display: block; list-style: none; }
.sas-landing-page .services .service-card li { display: block; position: relative; padding: 0 0 0 16px; margin-bottom: 5px; background: none; border-radius: 0; color: #44534a; font-size: 13px; font-weight: 500; }
.sas-landing-page .services .service-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-orange); }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover, .sas-landing-page .services .service-card.settled:hover {
    background: #fff; border-color: #cfe3d5; transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10, 95, 37, 0.14);
} }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover h3 { color: var(--primary-green); } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover p { color: #55645b; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover li { background: none; color: #44534a; } }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .services .service-card:hover .service-icon { background: linear-gradient(135deg, #1b9142, #0a5f25); box-shadow: none; transform: none; } }
.sas-landing-page .services .service-card::after { display: none; }
@media (min-width: 900px) and (max-height: 800px) { .sas-landing-page .services .service-card { min-height: 0; padding: 22px 20px; } }

/* AI section (design C), toned down: flat brand green, thin frame, smaller heading, no texture or extra glows */
.sas-landing-page .ai-c .ai-content-wrapper {
    background: linear-gradient(135deg, #0a5f25 0%, #11792f 100%);
    box-shadow: 0 0 0 4px #fff, 0 18px 40px rgba(10, 95, 37, 0.2);
    padding: 40px 52px; border-radius: 26px;
}
.sas-landing-page .ai-c .ai-banner h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.5px; }
.sas-landing-page .ai-c .ai-banner p { font-size: 0.98rem; }
.sas-landing-page .ai-c .ai-eyebrow { background: transparent; border: none; padding: 0; margin-bottom: 12px; opacity: 0.9; }
.sas-landing-page .ai-c .ai-cta-main { box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .ai-c .ai-cta button:hover { transform: none; box-shadow: none; } }
.sas-landing-page .ai-c .chat-container { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); border-radius: 18px; }
.sas-landing-page .ai-c .ai-glow-green, .sas-landing-page .ai-c .ai-glow-gold { opacity: 0.1; }

/* AI section: only the chat is a panel; the text sits directly on the page */
.sas-landing-page .ai-c .ai-content-wrapper { background: none; box-shadow: none; border-radius: 0; padding: 0 40px; overflow: visible; margin-top: 100px; margin-bottom: 36px; gap: 56px; }
.sas-landing-page .ai-c .ai-banner { color: #1b2a21; }
.sas-landing-page .ai-c .ai-banner h2 { color: var(--primary-green); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.sas-landing-page .ai-c .ai-banner p { color: #2c3b32; font-weight: 500; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.sas-landing-page .ai-c .ai-eyebrow { color: var(--primary-green); opacity: 1; }
.sas-landing-page .ai-c .ai-points li { color: #2c3b32; }
.sas-landing-page .ai-c .ai-points i { color: var(--primary-green); }
.sas-landing-page .ai-c .ai-cta-ghost { color: var(--primary-green); border-color: var(--primary-green); background: transparent; }
.sas-landing-page .ai-c .chat-container { box-shadow: 0 22px 50px rgba(10, 95, 37, 0.22), 0 0 0 1px #d9e8de; }
.sas-landing-page .ai-c .chat-header { background: linear-gradient(135deg, #147934, #0a5f25); color: #fff; border-bottom: none; }
.sas-landing-page .ai-c .ch-ava { background: rgba(255, 255, 255, 0.2); }
.sas-landing-page .ai-c .ch-status { color: #fff; }
.sas-landing-page .ai-c .chat-body { background: #f4f8f5; }
.sas-landing-page .ai-c .chat-input { background: #fff; }
@media (max-width: 999px) { .sas-landing-page .ai-c .ai-content-wrapper { padding: 0 20px; } }

/* A slimmer header */
.sas-landing-page header { padding: 12px 40px; }
.sas-landing-page header .header-left { gap: 12px; }
.sas-landing-page header .header-left img { width: 46px !important; }
.sas-landing-page header .header-text h1 { font-size: 1.3rem; }
.sas-landing-page header .header-text p { font-size: 12px; margin-top: 3px; }
.sas-landing-page header nav ul { gap: 26px; }
.sas-landing-page header nav ul li a { font-size: 0.88rem; }
.sas-landing-page header.is-scrolled { padding-block: 8px; }
.sas-landing-page header.is-scrolled .header-left img { width: 40px !important; }
.sas-landing-page .ai-section::before { background: linear-gradient(180deg, #0a5f25 0, #0a5f25 56px, rgba(10, 95, 37, 0) 160px); }
.sas-landing-page .ai-c::before {
    background:
        linear-gradient(180deg, #0a5f25 0, #0a5f25 56px, rgba(10, 95, 37, 0) 160px),
        linear-gradient(rgba(246, 249, 247, 0.86), rgba(238, 245, 240, 0.94)),
        url('../img/bg.jpg') center/cover;
}
.sas-landing-page .ai-section > .seam-top { height: 80px; }
@media (max-width: 700px) { .sas-landing-page header { padding: 8px 14px; } .sas-landing-page header .header-left img { width: 36px !important; } }

/* More room under the header */
.sas-landing-page .ai-c .ai-content-wrapper { margin-top: 128px; margin-bottom: 30px; }
.sas-landing-page .services .services-wrapper { margin-top: 140px; }
.sas-landing-page .contacts-header { margin-top: 136px; }
@media (min-width: 900px) and (max-height: 800px) {
    .sas-landing-page .ai-c .ai-content-wrapper { margin-top: 112px; margin-bottom: 24px; }
    .sas-landing-page .services .services-wrapper { margin-top: 116px; }
    .sas-landing-page .contacts-header { margin-top: 118px; }
}
@media (max-width: 899px) {
    .sas-landing-page .ai-c .ai-content-wrapper { margin-top: 112px; }
    .sas-landing-page .services .services-wrapper { margin-top: 112px; }
}

/* Header sits lower from the top edge */
.sas-landing-page header { padding: 28px 44px 14px; }
.sas-landing-page header .header-left img { width: 50px !important; }
.sas-landing-page header .header-text h1 { font-size: 1.4rem; }
.sas-landing-page header .header-text p { font-size: 12px; }
.sas-landing-page header nav ul li a { font-size: 0.92rem; }
.sas-landing-page header.is-scrolled { padding: 20px 44px 10px; }
.sas-landing-page header.is-scrolled .header-left img { width: 44px !important; }
.sas-landing-page .ai-section::before { background: linear-gradient(180deg, #0a5f25 0, #0a5f25 84px, rgba(10, 95, 37, 0) 190px); }
.sas-landing-page .ai-c::before {
    background:
        linear-gradient(180deg, #0a5f25 0, #0a5f25 84px, rgba(10, 95, 37, 0) 190px),
        linear-gradient(rgba(246, 249, 247, 0.86), rgba(238, 245, 240, 0.94)),
        url('../img/bg.jpg') center/cover;
}
.sas-landing-page .ai-section > .seam-top { height: 110px; }
@media (max-width: 700px) { .sas-landing-page header { padding: 18px 14px 8px; } .sas-landing-page header .header-left img { width: 38px !important; } }

/* Suggested questions centred in the chat panel */
.sas-landing-page .suggested-questions { text-align: center; }
.sas-landing-page .suggested-questions p { text-align: center; }
.sas-landing-page .pill-btn { margin: 4px 4px; }

/* ===== Mobile fixes ===== */
@media (max-width: 899px) {
    .sas-landing-page .slide { overflow-x: hidden; }
    .sas-landing-page .glow-circle { display: none; }
}
@media (max-width: 700px) {
    .sas-landing-page header { padding: 14px 10px 8px; }
    .sas-landing-page header .header-left { gap: 6px; }
    .sas-landing-page header .header-left img { width: 34px !important; }
    .sas-landing-page header nav ul { gap: 9px; }
    .sas-landing-page header nav ul li a { font-size: 0.7rem; }
    .sas-landing-page header.is-scrolled { padding: 12px 10px 6px; }
    .sas-landing-page header.is-scrolled .header-left img { width: 32px !important; }
}

/* Mobile: a smaller phone under the hero text */
@media (max-width: 899px) {
    .sas-landing-page .hero { flex-direction: column; justify-content: flex-start; padding: 96px 0 56px; }
    .hero-phone { margin: 30px auto 0; zoom: 0.62; animation: phoneInUp 1s var(--ease-out-expo) 0.9s forwards; }
    @keyframes phoneInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
    .sas-landing-page .scroll-cue { display: none; }
}
@media (max-width: 899px) { .hero-eyebrow { display: none; } }

/* =====================================================================
   MOBILE (phones, up to 767px): one clean layout. The page scrolls normally (no nested scrolling, no snapping),
   type is phone-sized, every section has the same side padding. This block comes last on purpose: it overrides the rest.
   ===================================================================== */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
    .sas-landing-page { height: auto; overflow: visible; display: block; }
    .sas-landing-page .slide-container { height: auto; overflow: visible; scroll-snap-type: none; scroll-behavior: auto; }
    .sas-landing-page .slide { height: auto; min-height: 0; flex: none; overflow: hidden; scroll-snap-align: none; display: flex; flex-direction: column; }
    .sas-landing-page .seam, .landing-dots, .sas-landing-page .scroll-cue, .hero-eyebrow, .sas-landing-page .glow-circle { display: none !important; }

    /* header */
    .sas-landing-page header { padding: 10px 12px 8px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
    .sas-landing-page header.header-white { background: rgba(10, 80, 32, 0.95); }
    .sas-landing-page header .header-left img { width: 32px !important; }
    .sas-landing-page header .header-text { display: none; }
    .sas-landing-page header nav ul { gap: 14px; }
    .sas-landing-page header nav ul li a { font-size: 13px; }
    .sas-landing-page header.is-scrolled { padding: 8px 12px 6px; }

    /* hero */
    .sas-landing-page .hero { min-height: 100svh; justify-content: flex-start; align-items: center; padding: 84px 20px 40px; }
    .sas-landing-page .hero .hero-content { padding: 0; max-width: 420px; text-align: center; margin: 0 auto; }
    .sas-landing-page .hero .hero-content h2 { font-size: clamp(34px, 11vw, 46px); letter-spacing: 1px; line-height: 1.05; white-space: nowrap; margin: 0 0 12px; }
    .sas-landing-page .hero .hero-content p { font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
    .sas-landing-page .hero .hero-buttons { flex-direction: column; gap: 10px; }
    .sas-landing-page .hero .btn-hero-primary, .sas-landing-page .hero .btn-transparent-outline, .sas-landing-page .hero .btn-hero-link {
        width: 100%; max-width: 280px; padding: 12px 18px; font-size: 14px;
    }
    .hero-phone { zoom: 0.5; margin: 26px auto 0; }

    /* all other sections: same rhythm */
    .sas-landing-page .ai-section, .sas-landing-page .services, .sas-landing-page .contacts { padding: 0; }
    .sas-landing-page .ai-c .ai-content-wrapper, .sas-landing-page .services .services-wrapper { margin: 72px auto 0; padding: 0 18px 36px; width: 100%; box-sizing: border-box; }

    /* AI */
    .sas-landing-page .ai-c .ai-content-wrapper { flex-direction: column; gap: 22px; }
    .sas-landing-page .ai-c .ai-banner { flex: none; width: 100%; text-align: left; }
    .sas-landing-page .ai-c .ai-eyebrow { font-size: 12px; margin-bottom: 8px; }
    .sas-landing-page .ai-c .ai-banner h2 { font-size: 26px; line-height: 1.12; letter-spacing: -0.3px; }
    .sas-landing-page .ai-c .ai-banner p { font-size: 14px; margin-top: 8px; }
    .sas-landing-page .ai-c .ai-points { margin-top: 12px; gap: 7px; }
    .sas-landing-page .ai-c .ai-points li { font-size: 13px; }
    .sas-landing-page .ai-c .ai-cta { margin-top: 16px; gap: 10px; }
    .ai-cta button { padding: 10px 20px; font-size: 13.5px; }
    .sas-landing-page .ai-c .chat-container { flex: none; width: 100%; height: 460px; min-height: 0; max-height: none; margin: 0; border-radius: 16px; }
    .sas-landing-page .chat-header { padding: 10px 12px; gap: 10px; }
    .ch-ava { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
    .ch-title b { font-size: 13.5px; } .ch-title small { display: none; }
    .sas-landing-page .chat-body { padding: 14px; }
    .sas-landing-page .chat-bubble { padding: 9px 14px; font-size: 14px; max-width: 88%; }
    .sas-landing-page .suggested-questions { padding-top: 12px; }
    .sas-landing-page .pill-btn { padding: 7px 12px; font-size: 12px; margin: 3px; }
    .sas-landing-page .chat-input { padding: 10px; gap: 8px; }
    .sas-landing-page .chat-input input { padding: 10px 14px; font-size: 16px; }

    /* Services */
    .sas-landing-page .services .sv-eyebrow { font-size: 12px; margin-bottom: 8px; }
    .sas-landing-page .services h2 { font-size: 26px; }
    .sas-landing-page .services .services-wrapper > p { font-size: 14px; margin-top: 8px; }
    .sas-landing-page .services .services-grid { margin-top: 20px; gap: 12px; grid-template-columns: 1fr; }
    .sas-landing-page .services .service-card { padding: 18px 16px; border-radius: 16px; }
    .sas-landing-page .services .service-icon { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; margin-bottom: 12px; }
    .sas-landing-page .services .service-card h3 { font-size: 16.5px; margin-bottom: 6px; }
    .sas-landing-page .services .service-card p { font-size: 13px; margin-bottom: 10px; }
    .sas-landing-page .services .service-card li { font-size: 12.5px; margin-bottom: 3px; }

    /* Contacts */
    .sas-landing-page .contacts { padding: 0 18px 24px; }
    .sas-landing-page .contacts-header { margin: 72px 0 18px; }
    .contacts-header h2 { font-size: 28px; } .contacts-header h3 { font-size: 15px; margin-top: 6px; }
    .sas-landing-page .contacts-container { gap: 14px; }
    .sas-landing-page .contacts-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sas-landing-page .contact-card { padding: 12px; border-radius: 12px; }
    .contact-icon { width: 30px; height: 30px; font-size: 13px; margin-bottom: 8px; }
    .sas-landing-page .contact-card h4 { font-size: 13px; margin-bottom: 3px; }
    .sas-landing-page .contact-card p { font-size: 12px; line-height: 1.45; word-break: break-word; }
    .sas-landing-page .assistance-card { padding: 16px; border-radius: 14px; min-width: 0; }
    .assistance-card h3 { font-size: 17px; } .assistance-card > p { font-size: 13px; margin-bottom: 12px; }
    .action-block { padding: 12px; gap: 10px; margin-bottom: 12px; }
    .action-icon { width: 34px; height: 34px; font-size: 14px; }
    .action-content p { font-size: 12.5px; }
    .action-content .btn { padding: 9px 12px; font-size: 13px; }
    .security-note { font-size: 12px; margin-top: 12px; }
    .site-footer { margin-top: 20px; padding-top: 14px; gap: 10px; }
    .footer-tagline { font-size: 14px; } .footer-copyright { font-size: 12px; }
}
@media (max-width: 340px) {
    .sas-landing-page .contacts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .sas-landing-page header nav ul { gap: 10px; }
    .sas-landing-page header nav ul li a { font-size: 12px; }
}

@media (max-width: 767px) {
    /* the hero's white glow at the top made the white heading unreadable; on phones it becomes a green tint */
    .sas-landing-page .hero::before {
        background: linear-gradient(to bottom, rgba(10, 70, 28, 0.62) 0%, rgba(10, 80, 32, 0.38) 40%, rgba(10, 95, 37, 0.7) 85%, rgba(10, 95, 37, 1) 100%);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .sas-landing-page .hero { min-height: 0; padding-bottom: 36px; }
}

@media (max-width: 767px) {
    /* no green band under the header on phones (the header has its own background there) */
    .sas-landing-page .ai-c::before {
        background: linear-gradient(rgba(246, 249, 247, 0.9), rgba(238, 245, 240, 0.95)), url('../img/bg.jpg') center/cover;
    }
    .sas-landing-page .ai-section::before { background: none; }
}

.hdr-login { display: none; }

/* =====================================================================
   MOBILE APP FEEL (phones): slim top bar with a Login button, a bottom tab bar for navigation, a curved edge under the
   hero, and list-style rows for Services and Contacts. Last in the file on purpose.
   ===================================================================== */
@media (max-width: 767px) {
    .sas-landing-page { padding-bottom: 74px; }

    /* top bar: logo, name, Login */
    .sas-landing-page header { animation: none; transform: none; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
    .sas-landing-page header.is-scrolled { padding: 8px 14px; }
    .sas-landing-page header .header-text { display: block; }
    .sas-landing-page header .header-text h1 { font-size: 15px; white-space: nowrap; }
    .sas-landing-page header .header-text p { display: none; }
    .sas-landing-page header .header-left { gap: 8px; }
    .sas-landing-page header .header-left img { width: 34px !important; }
    .hdr-login { display: inline-block; border: none; border-radius: 20px; padding: 8px 18px; background: var(--primary-green); color: #fff; font: 700 13px 'Montserrat', sans-serif; }
    .sas-landing-page header.header-white { background: #0a5f25; }
    .sas-landing-page header.header-white .header-text h1 { color: #fff !important; }
    .sas-landing-page header.header-white .hdr-login { background: var(--primary-orange); }

    /* bottom tab bar */
    .sas-landing-page header nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001; background: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
    .sas-landing-page header nav ul { display: flex; justify-content: space-around; gap: 0; }
    .sas-landing-page header nav ul li { flex: 1; }
    .sas-landing-page header nav ul li a,
    .sas-landing-page header.header-white nav ul li a {
        display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 10.5px; font-weight: 600; color: #7a8a80 !important; text-decoration: none !important;
    }
    .sas-landing-page header nav ul li a::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 17px; }
    .sas-landing-page header nav ul li a::after { display: none; }
    .sas-landing-page header nav ul li a[href="#slide1"]::before { content: "\f015"; }
    .sas-landing-page header nav ul li a[href="#slide2"]::before { content: "\f544"; }
    .sas-landing-page header nav ul li a[href="#slide3"]::before { content: "\f5fd"; }
    .sas-landing-page header nav ul li a[href="#slide4"]::before { content: "\f095"; }
    .sas-landing-page header nav ul li a.active,
    .sas-landing-page header.header-white nav ul li a.active { color: var(--primary-green) !important; }
    .sas-landing-page header nav ul li a.active::before { color: var(--primary-orange); }

    /* hero: splash with a curved edge */
    .sas-landing-page .hero { padding: 76px 22px 70px; }
    .sas-landing-page .hero::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -2px; height: 44px; background: #eef4f0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 3; pointer-events: none; }

    /* Services: list rows */
    .sas-landing-page .services .services-grid { gap: 10px; }
    .sas-landing-page .services .service-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: start; padding: 14px; border-radius: 16px; }
    .sas-landing-page .services .service-icon { grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; }
    .sas-landing-page .services .service-card h3 { grid-column: 2; margin: 0 0 3px; font-size: 15px; }
    .sas-landing-page .services .service-card p { grid-column: 2; margin: 0; font-size: 12.5px; line-height: 1.45; }
    .sas-landing-page .services .service-card ul { display: none; }

    /* Contacts: list rows */
    .sas-landing-page .contacts-grid { grid-template-columns: 1fr; gap: 8px; }
    .sas-landing-page .contact-card { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px; }
    .sas-landing-page .contact-card .contact-icon { grid-row: 1 / span 2; margin: 0; }
    .sas-landing-page .contact-card h4 { margin: 0 0 2px; font-size: 13px; }
}

/* Chat on the landing page: the visitor's own bubble and the suggested-question buttons keep readable colors.
   (".sas-landing-page .chat-bubble" above sets a dark text color and ".sas-landing-page .pill-btn" a white background;
   both have the same specificity as the base rules for .user and :hover and are loaded later, so they were winning:
   dark text on the green bubble, and white text on a white button when hovered.) */
.sas-landing-page .chat-bubble.user { color: #fff; }
.sas-landing-page .chat-bubble.user p, .sas-landing-page .chat-bubble.user li { color: #fff; }
.sas-landing-page .pill-btn:focus-visible { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
@media (hover: hover) and (pointer: fine) { .sas-landing-page .pill-btn:hover { background: var(--primary-green); border-color: var(--primary-green); color: #fff; } }

/* ===== HOW TO USE (role tabs, step tabs and a small picture of the screen; js/landing_howto.js) ===== */
.services.in-view .howto { animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards; }
.sas-landing-page .howto { opacity: 0; margin: 26px auto 0; max-width: 1080px; text-align: left; }
.sas-landing-page .howto button { font-family: 'Montserrat', sans-serif; cursor: pointer; }
.ht-roles { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ht-role {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 30px; border: 1px solid #dbe8df; background: #fff; color: #3d5246;
    font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(10, 95, 37, 0.07); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.ht-role i { color: var(--primary-orange); font-size: 14px; transition: color 0.25s; }
@media (hover: hover) and (pointer: fine) { .ht-role:hover { transform: translateY(-2px); border-color: var(--primary-green); } }
.ht-role.on { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.ht-role.on i { color: #ffd27a; }
.ht-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.ht-step {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid #e3ece6; background: rgba(255, 255, 255, 0.85); color: #55645b;
    text-align: left; font-size: 13px; font-weight: 600; line-height: 1.25; transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ht-step-no {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #edf5ef; color: var(--primary-green);
    font-size: 13px; font-weight: 800; transition: background 0.25s, color 0.25s;
}
.ht-step.done .ht-step-no { background: var(--primary-green); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ht-step:hover { border-color: var(--primary-green); } }
.ht-step.on { background: #fff; color: var(--primary-green); border-color: var(--primary-green); box-shadow: 0 10px 24px rgba(10, 95, 37, 0.14); }
.ht-step.on .ht-step-no { background: var(--primary-orange); color: #fff; }
.ht-role:focus-visible, .ht-step:focus-visible { outline: 3px solid rgba(243, 156, 18, 0.65); outline-offset: 2px; }

.ht-panel { margin-top: 18px; padding: 30px 34px; background: #fff; border: 1px solid #e3ece6; border-radius: 28px; box-shadow: 0 18px 44px rgba(10, 95, 37, 0.12); }
.ht-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; transition: opacity 0.2s ease; }
.ht-inner.ht-out { opacity: 0; transition-duration: 0.15s; }
.ht-step-t { transition: opacity 0.18s ease; }
.ht-steps.ht-fade .ht-step-t { opacity: 0; }
.ht-big { font: italic 400 58px/1 'Instrument Serif', 'Times New Roman', serif; color: rgba(10, 95, 37, 0.2); }
.ht-title { margin: 4px 0 8px; font-size: 24px; line-height: 1.2; color: var(--primary-green); }
.sas-landing-page .services .howto .ht-text { margin: 0 0 16px; color: #55645b; font-size: 14.5px; line-height: 1.6; max-width: none; text-shadow: none; opacity: 1; transform: none; animation: none; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ht-chips li { margin: 0; padding: 5px 12px; border-radius: 20px; background: #edf5ef; color: var(--primary-green); font-size: 11.5px; font-weight: 700; }

.ht-mock { border-radius: 18px; border: 1px solid #e3ece6; background: #f7faf8; overflow: hidden; box-shadow: 0 10px 26px rgba(10, 95, 37, 0.1); }
.ht-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, #147934, #0a5f25); color: #fff; font-size: 12px; font-weight: 700; }
.ht-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.ht-mock-bar span { margin-left: 8px; }
.ht-mock-body { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.ht-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 13px; background: #fff; border: 1px solid #e8f0ea; }
.ht-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-row-l b { color: #233; font-size: 13px; }
.ht-row-l small { color: #5b6a60; font-size: 12px; }
.ht-pill { flex: none; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.ht-pill.ok { background: #e3f4e8; color: #16772f; }
.ht-pill.wait { background: #fff1d6; color: #9a5d00; }

@media (max-height: 780px) and (min-width: 768px) {
    .sas-landing-page .services .services-wrapper { margin-top: 84px; }
    .sas-landing-page .services h2 { font-size: clamp(30px, 3.6vw, 46px); }
    .sas-landing-page .services .services-wrapper > p { margin-top: 8px; font-size: 0.95rem; }
    .sas-landing-page .howto { margin-top: 16px; }
    .ht-panel { padding: 20px 26px; margin-top: 12px; }
    .ht-big { font-size: 44px; }
}
@media (max-width: 767px) {
    .sas-landing-page .howto { margin-top: 20px; }
    .ht-roles { gap: 8px; }
    .ht-role { padding: 8px 14px; font-size: 12.5px; }
    .ht-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ht-step { padding: 9px 10px; font-size: 12px; }
    .ht-step-no { width: 26px; height: 26px; font-size: 12px; }
    .ht-panel { padding: 20px 18px; border-radius: 22px; }
    .ht-inner { grid-template-columns: 1fr; gap: 18px; }
    .ht-title { font-size: 20px; }
    .sas-landing-page .services .howto .ht-text { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .ht-inner, .ht-step-t { transition: none; } }

@media (max-height: 700px) and (min-width: 768px) {
    .sas-landing-page .services .services-wrapper { margin-top: 70px; padding-bottom: 12px; }
    .sas-landing-page .services .services-wrapper > p { display: none; }
    .sas-landing-page .services h2 { font-size: clamp(26px, 3vw, 38px); }
    .sas-landing-page .services .sv-eyebrow { margin-bottom: 6px; padding: 4px 12px; font-size: 11.5px; }
    .sas-landing-page .howto { margin-top: 12px; }
    .ht-role { padding: 7px 16px; font-size: 13px; }
    .ht-steps { margin-top: 10px; gap: 10px; }
    .ht-step { padding: 7px 12px; }
    .ht-step-no { width: 24px; height: 24px; font-size: 12px; }
    .ht-panel { margin-top: 10px; padding: 14px 24px; border-radius: 22px; }
    .ht-inner { gap: 22px; }
    .ht-big { display: none; }
    .ht-title { font-size: 20px; margin-top: 0; }
    .sas-landing-page .services .howto .ht-text { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
    .ht-mock-body { gap: 6px; padding: 10px; }
    .ht-row { padding: 7px 11px; }
}

/* ===== header logo: one size on every section (it used to shrink after the first screen), and bigger than before =====
   Last on purpose: it overrides the earlier header sizes, including the smaller "is-scrolled" ones. */
.sas-landing-page header,
.sas-landing-page header.is-scrolled { padding: 18px 44px 10px; }
.sas-landing-page header .header-left img,
.sas-landing-page header.is-scrolled .header-left img { width: 68px !important; }
@media (max-width: 1023px) {
    .sas-landing-page header,
    .sas-landing-page header.is-scrolled { padding: 14px 24px 8px; }
    .sas-landing-page header .header-left img,
    .sas-landing-page header.is-scrolled .header-left img { width: 58px !important; }
}
@media (max-width: 700px) {
    .sas-landing-page header,
    .sas-landing-page header.is-scrolled { padding: 12px 14px 8px; }
    .sas-landing-page header .header-left img,
    .sas-landing-page header.is-scrolled .header-left img { width: 48px !important; }
}
@media (max-width: 380px) {
    .sas-landing-page header .header-left img,
    .sas-landing-page header.is-scrolled .header-left img { width: 42px !important; }
}

/* ===== Landing chat: answer text with real lists and headings ===== */
.sas-landing-page .chat-bubble { line-height: 1.65; }
.sas-landing-page .chat-bubble p { margin: 0 0 10px; }
.sas-landing-page .chat-bubble .ai-h { font-weight: 700; color: var(--primary-green); margin: 12px 0 6px; }
.sas-landing-page .chat-bubble .ai-h:first-child { margin-top: 0; }
.sas-landing-page .chat-bubble ul, .sas-landing-page .chat-bubble ol { margin: 0 0 10px; padding-left: 24px; }
.sas-landing-page .chat-bubble li { margin-bottom: 6px; padding-left: 4px; }
.sas-landing-page .chat-bubble ol li::marker { color: var(--primary-green); font-weight: 700; }
.sas-landing-page .chat-bubble.user .ai-h, .sas-landing-page .chat-bubble.user li::marker { color: #fff; }
.sas-landing-page .chat-bubble p:last-child, .sas-landing-page .chat-bubble ul:last-child, .sas-landing-page .chat-bubble ol:last-child { margin-bottom: 0; }

/* ===== Landing chat layout: avatar beside the first line, even rhythm, typing dots ===== */
.sas-landing-page .chat-row { align-items: flex-start; gap: 10px; max-width: 92%; margin-bottom: 14px; }
.sas-landing-page .chat-row .ai-avatar { margin-top: 2px; }
.sas-landing-page .chat-body > .chat-bubble { margin-bottom: 14px; }
.sas-landing-page .chat-row .chat-bubble { border-radius: 6px 18px 18px 18px; }
.sas-landing-page .chat-bubble.user { border-radius: 18px 6px 18px 18px; }
.sas-landing-page .typing-dots { display: inline-flex; gap: 4px; padding: 5px 2px; }
.sas-landing-page .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-green); opacity: 0.5; animation: lpTyping 1.2s infinite ease-in-out; }
.sas-landing-page .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.sas-landing-page .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lpTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.sas-landing-page .chat-bubble.loading { opacity: 1; font-style: normal; }

/* the chat limit message offers the two ways forward */
.sas-landing-page .chat-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sas-landing-page .chat-cta button { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; border-radius: 22px; padding: 8px 16px; cursor: pointer; }
.sas-landing-page .chat-cta-main { background: var(--primary-green, #0a5f25); color: #fff; border: 1px solid var(--primary-green, #0a5f25); }
.sas-landing-page .chat-cta-ghost { background: #fff; color: var(--primary-green, #0a5f25); border: 1px solid var(--primary-green, #0a5f25); }

/* ===== Section entrance: fade in and scale up =====
   Each section's main block fades in while growing from 94% to full size, every time the section comes into view (.in-view is
   set by the section observer in js/landing_page.js). Hidden until then only when scripting is on, so nothing stays invisible
   if the script does not run. */
@keyframes lpFadeScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .sas-landing-page .slide:not(.in-view) .ai-content-wrapper,
    .sas-landing-page .slide:not(.in-view) .services-wrapper,
    .sas-landing-page .slide:not(.in-view) .contacts-inner { opacity: 0; }
    .sas-landing-page .slide.in-view .ai-content-wrapper,
    .sas-landing-page .slide.in-view .services-wrapper,
    .sas-landing-page .slide.in-view .contacts-inner { animation: lpFadeScale 0.9s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; }
}

/* Keyboard users: a visible focus ring everywhere on the landing page and in its modals (several inputs removed the default outline). */
.sas-landing-page a:focus-visible, .sas-landing-page button:focus-visible, .sas-landing-page input:focus-visible, .sas-landing-page select:focus-visible, .sas-landing-page textarea:focus-visible, .sas-landing-page [tabindex]:focus-visible,
#authModal :focus-visible, #otpModal :focus-visible, #forgotPasswordModal :focus-visible, #customAlertModal :focus-visible {
    outline: 3px solid rgba(10, 95, 37, 0.55); outline-offset: 2px;
}
.slide-container:focus { outline: none; }

/* Skip link: the first thing a keyboard or screen-reader user reaches. */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100000; background: #0a5f25; color: #fff; padding: 10px 16px; border-radius: 10px; font: 600 14px 'Montserrat', sans-serif; text-decoration: none; transition: top 0.15s ease-out; }
.skip-link:focus { top: 12px; outline: 3px solid #f39c12; outline-offset: 2px; }