/* ==========================================================================
   Shikhonova CareerHub Academy — Global Stylesheet
   Approach: Mobile-first
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens (CSS Variables)
   ========================================================================== */

:root {
    /* Colors */
    --sca-color-navy: #032b62;
    --sca-color-teal: #006b78;
    --sca-color-cyan: #04cfc6;
    --sca-color-white: #ffffff;
    --sca-color-ink: #0b1f3a;
    --sca-color-muted: #52627a;
    --sca-color-surface-soft: #eef4f9;

    /* Typography */
    --sca-font-bn: "Noto Sans Bengali", "Inter", system-ui, sans-serif;
    --sca-font-en: "Inter", "Noto Sans Bengali", system-ui, sans-serif;

    /* Spacing */
    --sca-gutter: 1rem;

    /* Layout */
    --sca-container-max: 82rem;
    --sca-touch-target: 2.625rem;

    /* Borders & Radius */
    --sca-radius-sm: 0.625rem;
    --sca-radius-md: 0.875rem;
    --sca-radius-pill: 999px;

    /* Shadows */
    --sca-shadow-popover: 0 18px 40px rgba(3, 43, 98, 0.22), 0 2px 8px rgba(3, 43, 98, 0.12);
    --sca-shadow-raised: inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(1, 20, 50, 0.22), 0 4px 10px rgba(1, 20, 50, 0.28);

    /* Transitions */
    --sca-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sca-duration: 220ms;

    /* Layering */
    --sca-z-topbar: 100;
    --sca-z-header: 90;
    --sca-z-nav-backdrop: 80;
    --sca-z-modal: 1000;

    /* Main navigation */
    --sca-color-navy-deep: #021d44;
    --sca-color-teal-ink: #00535d;
    --sca-shadow-dropdown: 0 22px 48px rgba(3, 43, 98, 0.16), 0 4px 12px rgba(3, 43, 98, 0.08);
}


/* ==========================================================================
   2. Reset
   ========================================================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

a {
    color: inherit;
}


/* ==========================================================================
   3. Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.sca-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   4. Base Styles (Mobile — default)
   ========================================================================== */

/* Reader-selected font size (set by the Top Utility Bar) */
html[data-sca-font-size="small"] {
    font-size: 90%;
}

html[data-sca-font-size="large"] {
    font-size: 110%;
}

body {
    font-family: var(--sca-font-bn);
    color: var(--sca-color-ink);
    background-color: var(--sca-color-white);
}

html[lang="en"] body {
    font-family: var(--sca-font-en);
}

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


/* ==========================================================================
   5. Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Top Utility Bar
   -------------------------------------------------------------------------- */

.sca-topbar {
    --sca-topbar-control: var(--sca-touch-target);
    --sca-topbar-line: rgba(255, 255, 255, 0.3);
    --sca-topbar-glass: rgba(3, 43, 98, 0.35);

    position: relative;
    z-index: var(--sca-z-topbar);
    background: linear-gradient(110deg, var(--sca-color-navy) 0%, var(--sca-color-teal) 52%, var(--sca-color-cyan) 100%);
    color: var(--sca-color-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(3, 43, 98, 0.28);
}

/* Subtle top highlight */
.sca-topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.sca-topbar__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-block: 0.625rem;
}

.sca-topbar :focus-visible {
    outline: 3px solid var(--sca-color-white);
    outline-offset: 3px;
}

.sca-topbar__divider {
    flex-shrink: 0;
    width: 1px;
    height: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--sca-topbar-line), rgba(255, 255, 255, 0));
}

/* Contact ---------------------------------------------------------------- */

.sca-topbar__contact {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    font-family: var(--sca-font-en);
    font-style: normal;
}

.sca-topbar__contact-item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.sca-topbar__contact-item--email {
    flex-shrink: 1;
}

.sca-topbar__contact-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sca-topbar__contact-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #6fe6ff 0%, #12a9de 45%, #0669a6 100%);
    box-shadow: var(--sca-shadow-raised), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sca-topbar__contact-icon svg {
    width: 50%;
    height: 50%;
}

/* Tools ------------------------------------------------------------------ */

.sca-topbar__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sca-topbar__divider--tools {
    display: none;
}

.sca-topbar__btn {
    display: grid;
    place-items: center;
    width: var(--sca-topbar-control);
    height: var(--sca-topbar-control);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: var(--sca-color-white);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-topbar__btn svg {
    width: 45%;
    height: 45%;
}

.sca-topbar__btn[aria-expanded="true"] {
    box-shadow: var(--sca-shadow-raised), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* Font size -------------------------------------------------------------- */

.sca-font-size {
    position: relative;
}

.sca-font-size__toggle {
    background: radial-gradient(circle at 32% 26%, #5fe3ff 0%, #0b93c4 48%, #05608f 100%);
    box-shadow: var(--sca-shadow-raised), 0 0 0 3px rgba(4, 207, 198, 0.2);
    font-family: var(--sca-font-en);
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sca-font-size__panel {
    left: 0;
    width: 13.5rem;
    padding: 0.375rem;
    transform-origin: top left;
}

.sca-font-size__title {
    padding: 0.5rem 0.625rem 0.375rem;
    color: var(--sca-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.sca-font-size__menu {
    display: grid;
    gap: 0.125rem;
}

.sca-font-size__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--sca-touch-target);
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--sca-radius-sm);
    background-color: transparent;
    font-size: 0.9375rem;
    text-align: left;
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-font-size__option:hover,
.sca-font-size__option:focus-visible {
    background-color: var(--sca-color-surface-soft);
}

.sca-font-size__option[aria-checked="true"] {
    background-color: rgba(4, 207, 198, 0.14);
    box-shadow: inset 0 0 0 1px rgba(4, 207, 198, 0.6);
    color: #00535d;
    font-weight: 600;
}

.sca-font-size__glyph {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--sca-color-surface-soft);
    color: var(--sca-color-navy);
    font-family: var(--sca-font-en);
    font-size: 0.8125rem;
    font-weight: 700;
}

.sca-font-size__option[aria-checked="true"] .sca-font-size__glyph {
    background: radial-gradient(circle at 32% 26%, #5fe3ff 0%, #0b93c4 48%, #05608f 100%);
    color: var(--sca-color-white);
}

.sca-font-size__value {
    margin-left: auto;
    color: var(--sca-color-muted);
    font-family: var(--sca-font-en);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Language --------------------------------------------------------------- */

.sca-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: var(--sca-topbar-control);
    height: var(--sca-topbar-control);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-topbar-glass);
    color: var(--sca-color-white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-lang:hover {
    background-color: rgba(3, 43, 98, 0.5);
}

.sca-lang__globe,
.sca-lang__sep,
.sca-lang__chevron {
    display: none;
    flex-shrink: 0;
}

.sca-lang__globe {
    width: 1.125rem;
    height: 1.125rem;
}

.sca-lang__sep {
    width: 1px;
    height: 1.25rem;
    background-color: rgba(255, 255, 255, 0.35);
}

.sca-lang__chevron {
    width: 0.875rem;
    height: 0.875rem;
}

.sca-lang__flag {
    flex-shrink: 0;
    width: 1.375rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.sca-lang__flag--bd,
html[lang="en"] .sca-lang__flag--uk {
    display: none;
}

html[lang="en"] .sca-lang__flag--bd {
    display: block;
}

/* Smallest screens: flag only, label kept for screen readers */
.sca-lang__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    font-family: var(--sca-font-en);
}

/* Social ----------------------------------------------------------------- */

.sca-social {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sca-social__link {
    --sca-social-bg: #1877f2;
    --sca-social-glow: rgba(24, 119, 242, 0.55);

    display: grid;
    place-items: center;
    width: var(--sca-topbar-control);
    height: var(--sca-topbar-control);
    border-radius: 50%;
    background: var(--sca-social-bg);
    color: var(--sca-color-white);
    box-shadow: var(--sca-shadow-raised);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-social__link svg {
    width: 50%;
    height: 50%;
}

.sca-social__link:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sca-shadow-raised), 0 8px 18px var(--sca-social-glow);
}

@media (hover: hover) {
    .sca-social__link:hover {
        transform: translateY(-3px);
        box-shadow: var(--sca-shadow-raised), 0 8px 18px var(--sca-social-glow), 0 0 0 3px rgba(255, 255, 255, 0.18);
    }

    .sca-topbar__btn:hover {
        transform: translateY(-2px);
    }
}

.sca-social__link--facebook {
    --sca-social-bg: linear-gradient(145deg, #3a95ff 0%, #1466e0 55%, #0a4fb8 100%);
    --sca-social-glow: rgba(24, 119, 242, 0.6);
}

.sca-social__link--youtube {
    --sca-social-bg: linear-gradient(145deg, #ff4b4b 0%, #e3121f 55%, #b5000c 100%);
    --sca-social-glow: rgba(227, 18, 31, 0.55);
}

.sca-social__link--linkedin {
    --sca-social-bg: linear-gradient(145deg, #2a9df0 0%, #0a74c4 55%, #075a9c 100%);
    --sca-social-glow: rgba(10, 116, 196, 0.6);
}

.sca-social__link--instagram {
    --sca-social-bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    --sca-social-glow: rgba(214, 36, 159, 0.55);
}

/* Search ----------------------------------------------------------------- */

.sca-search__toggle {
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%), var(--sca-topbar-glass);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(1, 20, 50, 0.2);
}

/* Anchored to .sca-topbar__inner so it always stays inside the container */
.sca-search__panel {
    right: 0;
    width: min(100%, 24rem);
    padding: 0.5rem;
    transform-origin: top right;
}

.sca-search__form {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sca-search__input {
    flex: 1;
    min-width: 0;
    height: var(--sca-touch-target);
    padding-inline: 1rem;
    border: 1px solid #cfdbe8;
    border-radius: var(--sca-radius-pill);
    background-color: #f6f9fc;
    color: var(--sca-color-ink);
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

.sca-search__input::placeholder {
    color: var(--sca-color-muted);
    opacity: 1;
}

.sca-search__input:focus {
    border-color: var(--sca-color-teal);
    background-color: var(--sca-color-white);
}

.sca-search__submit,
.sca-search__close {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--sca-touch-target);
    height: var(--sca-touch-target);
    border: 0;
    border-radius: 50%;
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-search__submit svg,
.sca-search__close svg {
    width: 45%;
    height: 45%;
}

.sca-search__submit {
    background: linear-gradient(145deg, #0b93c4 0%, var(--sca-color-teal) 100%);
    color: var(--sca-color-white);
}

.sca-search__close {
    background-color: transparent;
    color: var(--sca-color-muted);
}

.sca-search__close:hover {
    background-color: var(--sca-color-surface-soft);
}

/* --------------------------------------------------------------------------
   5.2 Popover (shared by font-size menu and search panel)
   -------------------------------------------------------------------------- */

.sca-popover {
    position: absolute;
    top: calc(100% + 0.625rem);
    z-index: 10;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: var(--sca-radius-md);
    background-color: var(--sca-color-white);
    color: var(--sca-color-ink);
    box-shadow: var(--sca-shadow-popover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.375rem) scale(0.98);
    transition:
        opacity var(--sca-duration) var(--sca-ease),
        transform var(--sca-duration) var(--sca-ease),
        visibility 0s linear var(--sca-duration);
}

.sca-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.sca-topbar .sca-popover :focus-visible {
    outline-color: var(--sca-color-teal);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5.3 Main Navigation / Header
   Shared styles only. Drawer (< 1200px) and desktop (>= 1200px) layouts
   live in section 7 so neither layout leaks into the other.
   -------------------------------------------------------------------------- */

/* Scroll lock (set by the mobile menu and modals) */
html.sca-scroll-locked,
html.sca-scroll-locked body {
    overflow: hidden;
}

html.sca-scroll-locked body {
    padding-right: var(--sca-scrollbar-width, 0);
}

.sca-main-header {
    --sca-header-height: 4rem;

    position: relative;
    z-index: var(--sca-z-header);
    border-bottom: 1px solid rgba(3, 43, 98, 0.08);
    background-color: var(--sca-color-white);
    box-shadow: 0 10px 28px rgba(3, 43, 98, 0.07);
}

.sca-main-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--sca-header-height);
}

.sca-main-header :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

/* Logo ------------------------------------------------------------------- */

.sca-main-nav__logo {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: var(--sca-radius-sm);
}

.sca-main-nav__logo img {
    width: auto;
    max-width: none;
    height: 2.125rem;
}

/* Menu toggle (hamburger) ------------------------------------------------ */

.sca-mobile-menu-toggle {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(3, 43, 98, 0.12);
    border-radius: var(--sca-radius-sm);
    background-color: var(--sca-color-surface-soft);
    color: var(--sca-color-navy);
    transition: background-color var(--sca-duration) var(--sca-ease), border-color var(--sca-duration) var(--sca-ease);
}

.sca-mobile-menu-toggle:hover,
.sca-mobile-menu-toggle[aria-expanded="true"] {
    border-color: rgba(0, 107, 120, 0.35);
    background-color: rgba(4, 207, 198, 0.12);
}

.sca-mobile-menu-toggle__bars,
.sca-mobile-menu-toggle__bars::before,
.sca-mobile-menu-toggle__bars::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease);
}

.sca-mobile-menu-toggle__bars {
    position: relative;
}

.sca-mobile-menu-toggle__bars::before,
.sca-mobile-menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.sca-mobile-menu-toggle__bars::before {
    transform: translateY(-6px);
}

.sca-mobile-menu-toggle__bars::after {
    transform: translateY(6px);
}

.sca-mobile-menu-toggle[aria-expanded="true"] .sca-mobile-menu-toggle__bars {
    background-color: transparent;
}

.sca-mobile-menu-toggle[aria-expanded="true"] .sca-mobile-menu-toggle__bars::before {
    transform: rotate(45deg);
}

.sca-mobile-menu-toggle[aria-expanded="true"] .sca-mobile-menu-toggle__bars::after {
    transform: rotate(-45deg);
}

/* Links ------------------------------------------------------------------ */

.sca-nav-list {
    list-style: none;
}

.sca-nav-item {
    position: relative;
}

.sca-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background-color: transparent;
    color: var(--sca-color-ink);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease), transform var(--sca-duration) var(--sca-ease);
}

.sca-nav-link:hover,
.sca-nav-trigger[aria-expanded="true"] {
    color: var(--sca-color-teal);
}

.sca-nav-link.is-active {
    color: var(--sca-color-teal);
    font-weight: 600;
}

.sca-nav-chevron {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--sca-duration) var(--sca-ease);
}

.sca-nav-trigger[aria-expanded="true"] .sca-nav-chevron {
    transform: rotate(180deg);
}

/* Free Seminar: bolder on hover without changing its width */
.sca-nav-link__bold-safe {
    display: inline-grid;
}

.sca-nav-link__bold-safe::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    font-weight: 700;
    visibility: hidden;
}

.sca-nav-link--seminar:hover,
.sca-nav-link--seminar:focus-visible {
    color: var(--sca-color-teal);
    font-weight: 700;
}

.sca-nav-link__dot {
    flex-shrink: 0;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: var(--sca-color-cyan);
    box-shadow: 0 0 0 3px rgba(4, 207, 198, 0.2);
}

/* Dropdown content ------------------------------------------------------- */

.sca-nav-dropdown__title {
    padding: 0.375rem 0.75rem 0.5rem;
    color: var(--sca-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sca-nav-dropdown__list {
    display: grid;
    gap: 0.125rem;
    list-style: none;
}

.sca-nav-dropdown__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sca-radius-sm);
    color: var(--sca-color-ink);
    font-size: 0.9375rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color var(--sca-duration) var(--sca-ease), color var(--sca-duration) var(--sca-ease);
}

.sca-nav-dropdown__link:hover,
.sca-nav-dropdown__link:focus-visible {
    background-color: var(--sca-color-surface-soft);
    color: var(--sca-color-teal-ink);
}

.sca-nav-dropdown__bullet {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--sca-color-cyan), var(--sca-color-teal));
    transform: rotate(45deg);
    transition: transform var(--sca-duration) var(--sca-ease);
}

.sca-nav-dropdown__link:hover .sca-nav-dropdown__bullet {
    transform: rotate(45deg) scale(1.25);
}

/* Special Offer ---------------------------------------------------------- */

/* Outer wrapper floats; the inner button scales — transforms never conflict */
.sca-special-offer {
    display: inline-flex;
}

.sca-special-offer__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem 0 0.375rem;
    border: 1px solid rgba(4, 207, 198, 0.5);
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, rgba(4, 207, 198, 0.16) 0%, rgba(11, 147, 196, 0.1) 100%), var(--sca-color-white);
    color: var(--sca-color-teal-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0, 107, 120, 0.14);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-special-offer__btn:hover,
.sca-special-offer__btn:focus-visible {
    transform: scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(4, 207, 198, 0.16), 0 8px 22px rgba(4, 207, 198, 0.36);
}

.sca-special-offer__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #5fe3ff 0%, #0b93c4 48%, #05608f 100%);
    color: var(--sca-color-white);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 2px 6px rgba(1, 20, 50, 0.25);
}

.sca-special-offer__icon svg {
    width: 60%;
    height: 60%;
}

@keyframes sca-offer-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Login ------------------------------------------------------------------ */

.sca-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.875rem 0 1rem;
    border: 0;
    border-radius: var(--sca-radius-sm);
    background: linear-gradient(145deg, #0a3d7f 0%, var(--sca-color-navy) 55%, var(--sca-color-navy-deep) 100%);
    color: var(--sca-color-white);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(3, 43, 98, 0.28);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-login-btn:hover,
.sca-login-btn[aria-expanded="true"] {
    color: var(--sca-color-white);
    transform: scale(1.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 4px rgba(4, 207, 198, 0.2), 0 10px 22px rgba(3, 43, 98, 0.32);
}

.sca-login-btn__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.sca-login-guide {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    padding: 0.375rem 0.625rem 0.625rem;
    border-bottom: 1px solid rgba(3, 43, 98, 0.08);
}

.sca-login-guide__figure {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    overflow: visible;
}

.sca-login-guide__arm {
    transform: rotate(105deg);
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.sca-login-guide__text {
    color: var(--sca-color-navy);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Plays once, the first time the Login menu opens */
.sca-nav-item.is-greeting .sca-login-guide__figure {
    animation: sca-guide-pop 450ms var(--sca-ease) both;
}

.sca-nav-item.is-greeting .sca-login-guide__arm {
    animation: sca-guide-wave 1.3s ease-in-out 350ms both;
}

@keyframes sca-guide-pop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.85);
    }
}

@keyframes sca-guide-wave {
    0% {
        transform: rotate(-10deg);
    }

    20% {
        transform: rotate(16deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(16deg);
    }

    100% {
        transform: rotate(105deg);
    }
}

.sca-portal-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--sca-radius-sm);
    color: var(--sca-color-ink);
    text-decoration: none;
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-portal-link:hover,
.sca-portal-link:focus-visible {
    background-color: var(--sca-color-surface-soft);
}

.sca-portal-link__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sca-radius-sm);
    background: linear-gradient(145deg, rgba(4, 207, 198, 0.18), rgba(11, 147, 196, 0.14));
    color: var(--sca-color-teal);
    transition: background var(--sca-duration) var(--sca-ease), color var(--sca-duration) var(--sca-ease);
}

.sca-portal-link:hover .sca-portal-link__icon,
.sca-portal-link:focus-visible .sca-portal-link__icon {
    background: linear-gradient(145deg, #0b93c4, var(--sca-color-teal));
    color: var(--sca-color-white);
}

.sca-portal-link__icon svg {
    width: 55%;
    height: 55%;
}

.sca-portal-link__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.sca-portal-link__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.sca-portal-link__desc {
    color: var(--sca-color-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Backdrop behind the open tablet/mobile menu */
.sca-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--sca-z-nav-backdrop);
    background-color: rgba(3, 43, 98, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sca-duration) var(--sca-ease), visibility 0s linear var(--sca-duration);
}

.sca-main-header.is-menu-open + .sca-nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   5.4 Modal (shared by Special Offer and Free Seminar)
   -------------------------------------------------------------------------- */

.sca-modal {
    --sca-modal-duration: 280ms;

    position: fixed;
    inset: 0;
    z-index: var(--sca-z-modal);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.sca-modal[hidden] {
    display: none;
}

.sca-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(2, 22, 52, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--sca-modal-duration) var(--sca-ease);
}

.sca-modal__dialog {
    position: relative;
    width: min(100%, 30rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 1.25rem;
    background-color: var(--sca-color-white);
    color: var(--sca-color-ink);
    box-shadow: 0 30px 70px rgba(2, 22, 52, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
    transition: opacity var(--sca-modal-duration) var(--sca-ease), transform var(--sca-modal-duration) var(--sca-ease);
}

.sca-modal__dialog:focus {
    outline: none;
}

.sca-modal.is-visible .sca-modal__backdrop {
    opacity: 1;
}

.sca-modal.is-visible .sca-modal__dialog {
    opacity: 1;
    transform: none;
}

.sca-modal :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

/* The dialog itself only receives programmatic focus on open */
.sca-modal .sca-modal__dialog:focus-visible {
    outline: none;
}

.sca-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(3, 43, 98, 0.1);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--sca-color-navy);
    box-shadow: 0 4px 12px rgba(3, 43, 98, 0.12);
    transition: background-color var(--sca-duration) var(--sca-ease), transform var(--sca-duration) var(--sca-ease);
}

.sca-modal__close:hover {
    background-color: var(--sca-color-surface-soft);
    transform: rotate(90deg);
}

.sca-modal__close svg {
    width: 45%;
    height: 45%;
}

.sca-modal__stage {
    aspect-ratio: 360 / 220;
    overflow: hidden;
    border-bottom: 1px solid rgba(3, 43, 98, 0.06);
    background:
        radial-gradient(circle at 75% 70%, rgba(4, 207, 198, 0.14), rgba(4, 207, 198, 0) 55%),
        linear-gradient(180deg, #e8f7fb 0%, #f7fbfe 100%);
}

.sca-modal__stage svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sca-modal__content {
    --sca-reveal-start: 0s;

    display: grid;
    justify-items: center;
    gap: 0.625rem;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
}

.sca-modal__eyebrow {
    padding: 0.25rem 0.75rem;
    border-radius: var(--sca-radius-pill);
    background-color: rgba(4, 207, 198, 0.12);
    color: var(--sca-color-teal-ink);
    font-family: var(--sca-font-en);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sca-modal__title {
    color: var(--sca-color-navy);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.sca-modal__text {
    max-width: 24rem;
    color: var(--sca-color-muted);
    font-size: 0.9375rem;
}

.sca-modal__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    margin-top: 0.375rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, #0b93c4 0%, var(--sca-color-teal) 100%);
    color: var(--sca-color-white);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 107, 120, 0.3);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-modal__cta:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 26px rgba(0, 107, 120, 0.38);
}

.sca-modal__cta svg {
    width: 1.125rem;
    height: 1.125rem;
}

.sca-modal__status {
    padding: 0.375rem 0.875rem;
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-surface-soft);
    color: var(--sca-color-muted);
    font-size: 0.8125rem;
}

.sca-modal__status.is-announced {
    animation: sca-status-pulse 900ms var(--sca-ease);
}

@keyframes sca-status-pulse {
    30% {
        background-color: rgba(4, 207, 198, 0.2);
        color: var(--sca-color-teal-ink);
        transform: scale(1.04);
    }
}

/* Content reveals after each scene finishes */
.sca-modal.is-playing .sca-modal__content > * {
    animation: sca-modal-reveal 500ms var(--sca-ease) both;
    animation-delay: calc(var(--sca-reveal-start) + var(--sca-reveal-step, 0) * 90ms);
}

.sca-modal__content > :nth-child(2) { --sca-reveal-step: 1; }
.sca-modal__content > :nth-child(3) { --sca-reveal-step: 2; }
.sca-modal__content > :nth-child(4) { --sca-reveal-step: 3; }
.sca-modal__content > :nth-child(5) { --sca-reveal-step: 4; }

.sca-modal--offer .sca-modal__content {
    --sca-reveal-start: 3.4s;
}

.sca-modal--seminar .sca-modal__content {
    --sca-reveal-start: 2.2s;
}

@keyframes sca-modal-reveal {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
}

/* Scene animations: SVG parts transform around their own boxes */
.sca-scene [class] {
    transform-box: fill-box;
}

/* --------------------------------------------------------------------------
   5.5 Special Offer Scene
   Timeline (s): gift .25 · walk .45–2.05 · reach 2.1 · lid 2.45 ·
   glow/confetti 2.55 · celebrate 2.9 · gesture 3.4 · content 3.4
   -------------------------------------------------------------------------- */

.sca-offer-scene__glow,
.sca-offer-char__laugh {
    opacity: 0;
}

.sca-offer-scene__glow {
    transform-origin: center;
}

.sca-offer-scene__lid {
    transform-origin: 100% 100%;
}

.sca-offer-scene__gift {
    transform-origin: 50% 100%;
}

.sca-offer-char__leg {
    transform-origin: 50% 0;
}

.sca-offer-char__arm,
.sca-offer-char__swing {
    transform-origin: 50% 5%;
}

.sca-confetti {
    opacity: 0;
    transform-origin: center;
}

.sca-modal.is-playing .sca-offer-scene__gift {
    animation: sca-offer-gift-in 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms both;
}

.sca-modal.is-playing .sca-offer-char {
    animation: sca-offer-walk 1.6s cubic-bezier(0.3, 0.2, 0.4, 1) 450ms both;
}

.sca-modal.is-playing .sca-offer-char__bob {
    animation: sca-offer-bob 200ms ease-in-out 450ms 8 alternate both;
}

.sca-modal.is-playing .sca-offer-char__leg--front,
.sca-modal.is-playing .sca-offer-char__swing--back {
    animation: sca-offer-swing 400ms linear 450ms 4 both;
}

.sca-modal.is-playing .sca-offer-char__leg--back,
.sca-modal.is-playing .sca-offer-char__swing--front {
    animation: sca-offer-swing 400ms linear 450ms 4 reverse both;
}

.sca-modal.is-playing .sca-offer-char__arm--front {
    animation: sca-offer-arm-front 4.4s ease-in-out both;
}

.sca-modal.is-playing .sca-offer-char__arm--back {
    animation: sca-offer-arm-back 4.4s ease-in-out both;
}

.sca-modal.is-playing .sca-offer-char__jump {
    animation: sca-offer-jump 4.4s ease-out both;
}

.sca-modal.is-playing .sca-offer-char__smile {
    animation: sca-fade-out 200ms ease 2.75s both;
}

.sca-modal.is-playing .sca-offer-char__laugh {
    animation: sca-fade-in 200ms ease 2.75s both;
}

.sca-modal.is-playing .sca-offer-scene__lid {
    animation: sca-offer-lid 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 2.45s both;
}

.sca-modal.is-playing .sca-offer-scene__glow {
    animation: sca-offer-glow 800ms var(--sca-ease) 2.55s both;
}

.sca-modal.is-playing .sca-confetti {
    animation: sca-confetti-fall 1.7s cubic-bezier(0.25, 0.6, 0.5, 1) both;
    animation-delay: calc(2.6s + var(--sca-i, 0) * 50ms);
}

@keyframes sca-offer-gift-in {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@keyframes sca-offer-walk {
    from {
        transform: translateX(-170px);
    }
}

@keyframes sca-offer-bob {
    to {
        transform: translateY(-1.5px);
    }
}

@keyframes sca-offer-swing {
    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(18deg);
    }

    75% {
        transform: rotate(-18deg);
    }
}

@keyframes sca-offer-arm-front {
    0%,
    47% {
        transform: rotate(0deg);
    }

    53%,
    60% {
        transform: rotate(-72deg);
    }

    66%,
    76% {
        transform: rotate(-160deg);
    }

    86%,
    100% {
        transform: rotate(-108deg);
    }
}

@keyframes sca-offer-arm-back {
    0%,
    60% {
        transform: rotate(0deg);
    }

    66%,
    76% {
        transform: rotate(-150deg);
    }

    86%,
    100% {
        transform: rotate(8deg);
    }
}

@keyframes sca-offer-jump {
    0%,
    62%,
    72%,
    80%,
    100% {
        transform: translateY(0);
    }

    67% {
        transform: translateY(-12px);
    }

    76% {
        transform: translateY(-5px);
    }
}

@keyframes sca-offer-lid {
    to {
        transform: translate(8px, -24px) rotate(20deg);
    }
}

@keyframes sca-offer-glow {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sca-confetti-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--sca-drift, 0), 215px) rotate(var(--sca-spin, 180deg));
    }
}

@keyframes sca-fade-in {
    to {
        opacity: 1;
    }
}

@keyframes sca-fade-out {
    to {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   5.6 Free Seminar Scene
   Timeline (s): screen .25 · content .8 · ticket 1.25 · badge 1.75 ·
   particles 1.95 · content 2.2
   -------------------------------------------------------------------------- */

.sca-seminar-scene__board {
    transform-origin: 50% 0;
}

.sca-seminar-scene__bar {
    transform-origin: 50% 100%;
}

.sca-seminar-scene__lines rect {
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.sca-seminar-scene__badge {
    transform-origin: center;
}

.sca-seminar-scene__badge-text {
    fill: var(--sca-color-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sca-particle {
    opacity: 0;
}

.sca-seminar-scene__stand,
.sca-seminar-scene__trend {
    opacity: 0;
}

.sca-modal.is-playing .sca-seminar-scene__stand {
    animation: sca-fade-in 400ms ease 200ms both;
}

.sca-modal.is-playing .sca-seminar-scene__board {
    animation: sca-seminar-unfold 550ms var(--sca-ease) 250ms both;
}

.sca-modal.is-playing .sca-seminar-scene__lines rect {
    animation: sca-seminar-line 500ms var(--sca-ease) 800ms both;
}

.sca-modal.is-playing .sca-seminar-scene__bar {
    animation: sca-seminar-bar 500ms var(--sca-ease) both;
    animation-delay: calc(850ms + var(--sca-i, 0) * 90ms);
}

.sca-modal.is-playing .sca-seminar-scene__trend {
    animation: sca-fade-in 400ms ease 1.2s both;
}

.sca-modal.is-playing .sca-seminar-scene__ticket {
    animation: sca-seminar-ticket 600ms var(--sca-ease) 1.25s both;
}

.sca-modal.is-playing .sca-seminar-scene__badge {
    animation: sca-seminar-badge 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.75s both;
}

.sca-modal.is-playing .sca-particle {
    animation: sca-seminar-particle 900ms var(--sca-ease) both;
    animation-delay: calc(1.95s + var(--sca-i, 0) * 60ms);
}

@keyframes sca-seminar-unfold {
    from {
        opacity: 0;
        transform: scaleY(0.05);
    }
}

@keyframes sca-seminar-line {
    from {
        transform: scaleX(0);
    }
}

@keyframes sca-seminar-bar {
    from {
        transform: scaleY(0);
    }
}

@keyframes sca-seminar-ticket {
    from {
        opacity: 0;
        transform: translate(40px, 40px) rotate(14deg);
    }
}

@keyframes sca-seminar-badge {
    from {
        opacity: 0;
        transform: scale(0) rotate(-40deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(-8deg);
    }
}

@keyframes sca-seminar-particle {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--sca-tx, 0), var(--sca-ty, 0)) scale(1);
    }
}

/* Reduced motion: show each scene's final frame immediately */
@media (prefers-reduced-motion: reduce) {
    .sca-modal *,
    .sca-nav-item.is-greeting * {
        animation-delay: 0s !important;
    }

    .sca-special-offer {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   5.7 AI Journey Section
   Layout per breakpoint lives in section 8.
   -------------------------------------------------------------------------- */

.sca-ai-journey {
    padding-block: 0.875rem 0.75rem;
    border-bottom: 1px solid rgba(3, 43, 98, 0.06);
    background: linear-gradient(180deg, #e8f7fb 0%, #f5fbfd 100%);
}

.sca-ai-journey :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

/* Strip ------------------------------------------------------------------ */

.sca-ai-strip {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "robot"
        "headline"
        "cta";
    justify-items: center;
    align-items: center;
    gap: 0.625rem;
    overflow: hidden;
    padding: 1rem 1rem 1.25rem;
    border: 1px solid rgba(95, 243, 255, 0.35);
    border-radius: 1.25rem;
    background: linear-gradient(100deg, var(--sca-color-navy) 0%, #0a3f80 48%, #05577a 100%);
    box-shadow: 0 0 0 3px rgba(4, 207, 198, 0.12), 0 12px 28px rgba(3, 43, 98, 0.25);
    text-align: center;
}

/* Circuit-dot texture, fading out toward the centre */
.sca-ai-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(95, 243, 255, 0.4) 1px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 40%, transparent 75%, rgba(0, 0, 0, 0.6) 100%);
    mask-image: linear-gradient(100deg, #000 0%, transparent 40%, transparent 75%, rgba(0, 0, 0, 0.6) 100%);
}

/* Fine cyan highlight along the top edge */
.sca-ai-strip::after {
    content: "";
    position: absolute;
    inset: 0 8% auto;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(95, 243, 255, 0.8), transparent);
}

/* Robot ------------------------------------------------------------------ */

.sca-ai-robot {
    grid-area: robot;
    width: 4.5rem;
    height: 4.5rem;
}

.sca-ai-robot__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sca-ai-robot [class] {
    transform-box: fill-box;
}

.sca-ai-robot__glow {
    transform-origin: center;
    animation: sca-ai-robot-glow 4s ease-in-out infinite alternate;
}

.sca-ai-robot__head {
    transform-origin: 50% 100%;
    animation: sca-ai-robot-head 7s ease-in-out infinite;
}

.sca-ai-robot__face {
    animation: sca-ai-robot-face 7s ease-in-out infinite;
}

.sca-ai-robot__eye {
    transform-origin: center;
    animation: sca-ai-robot-blink 9s ease-in-out infinite;
}

.sca-ai-robot__antenna,
.sca-ai-robot__core {
    animation: sca-ai-robot-light 2.2s ease-in-out infinite alternate;
}

@keyframes sca-ai-robot-glow {
    from {
        opacity: 0.65;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* Look left → centre → right → centre */
@keyframes sca-ai-robot-head {
    0%,
    10%,
    38%,
    52%,
    80%,
    100% {
        transform: rotate(0deg);
    }

    18%,
    30% {
        transform: rotate(-5deg);
    }

    60%,
    72% {
        transform: rotate(5deg);
    }
}

@keyframes sca-ai-robot-face {
    0%,
    10%,
    38%,
    52%,
    80%,
    100% {
        transform: translateX(0);
    }

    18%,
    30% {
        transform: translateX(-2.5px);
    }

    60%,
    72% {
        transform: translateX(2.5px);
    }
}

/* Blinks at uneven intervals (single, then a double blink) */
@keyframes sca-ai-robot-blink {
    0%,
    33%,
    37%,
    78%,
    82%,
    84%,
    88%,
    100% {
        transform: scaleY(1);
    }

    35%,
    80%,
    86% {
        transform: scaleY(0.1);
    }
}

@keyframes sca-ai-robot-light {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

/* Headline --------------------------------------------------------------- */

.sca-ai-headline {
    grid-area: headline;
    max-width: 40rem;
    color: var(--sca-color-white);
    font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.375rem);
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    text-wrap: balance;
}

/* CTA -------------------------------------------------------------------- */

.sca-ai-cta-wrap {
    grid-area: cta;
}

/* Outer wrapper floats; the inner button scales — transforms never conflict */
.sca-ai-cta-float {
    display: inline-flex;
    animation: sca-ai-float 4s ease-in-out infinite;
}

.sca-ai-cta-float:hover,
.sca-ai-cta-float:focus-within {
    animation-play-state: paused;
}

.sca-ai-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: max(3rem, 44px);
    overflow: hidden;
    padding: 0.375rem 0.5rem 0.375rem 1.375rem;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, #e2fcff 0%, #9cecf5 55%, #62d6e8 100%);
    color: var(--sca-color-navy);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 3px rgba(95, 243, 255, 0.25), 0 8px 20px rgba(0, 20, 60, 0.35);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

/* Light sweep */
.sca-ai-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sca-ai-sweep 5s ease-in-out 1.5s infinite;
    pointer-events: none;
}

.sca-ai-cta:hover,
.sca-ai-cta:focus-visible {
    font-weight: 700;
    transform: scale(1.05);
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 4px rgba(95, 243, 255, 0.4), 0 0 26px rgba(95, 243, 255, 0.55), 0 12px 26px rgba(0, 20, 60, 0.4);
}

/* Bolder on hover without changing width */
.sca-ai-cta__label {
    position: relative;
    display: inline-grid;
}

.sca-ai-cta__label::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    font-weight: 700;
    visibility: hidden;
}

.sca-ai-cta__arrow {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sca-color-navy);
    color: var(--sca-color-white);
    transition: transform var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease);
}

.sca-ai-cta__arrow svg {
    width: 55%;
    height: 55%;
}

.sca-ai-cta:hover .sca-ai-cta__arrow,
.sca-ai-cta:focus-visible .sca-ai-cta__arrow {
    background-color: var(--sca-color-teal);
    transform: translateX(3px);
}

@keyframes sca-ai-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes sca-ai-sweep {
    0% {
        transform: translateX(-120%);
    }

    35%,
    100% {
        transform: translateX(120%);
    }
}

/* Rotating information line ---------------------------------------------- */

.sca-ai-info {
    display: flex;
    justify-content: center;
    margin-top: 0.625rem;
}

.sca-ai-info-slider {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 100%;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(4, 207, 198, 0.35);
    border-radius: 1rem;
    background-color: rgba(4, 207, 198, 0.1);
    box-shadow: 0 0 0 3px rgba(4, 207, 198, 0.05), 0 4px 14px rgba(0, 107, 120, 0.08);
    color: var(--sca-color-navy);
}

.sca-ai-info-slider__tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, #0b93c4, var(--sca-color-teal));
    color: var(--sca-color-white);
    font-family: var(--sca-font-en);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sca-ai-info-slider__tag svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* All messages share one grid cell: height = tallest message, so the line
   never jumps; horizontal overflow is clipped for the slide only. */
.sca-ai-info-slider__track {
    display: grid;
    min-width: 0;
    overflow-x: clip;
}

.sca-ai-info-slider__message {
    grid-area: 1 / 1;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px);
    transition:
        opacity 600ms var(--sca-ease),
        transform 600ms var(--sca-ease),
        visibility 0s linear 600ms;
}

.sca-ai-info-slider__message.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.sca-ai-info-slider__message.is-leaving {
    visibility: visible;
    transform: translateX(-14px);
    transition-delay: 0s;
}

.sca-ai-info-slider__dots {
    display: none;
    flex-shrink: 0;
    gap: 0.25rem;
}

.sca-ai-info-slider__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--sca-radius-pill);
    background-color: rgba(0, 107, 120, 0.25);
    transition: width var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease);
}

.sca-ai-info-slider__dot.is-active {
    width: 1rem;
    background-color: var(--sca-color-teal);
}

/* --------------------------------------------------------------------------
   5.8 AI Experience Modal
   Builds on the shared modal (5.4). Scenes play only while .is-active.
   -------------------------------------------------------------------------- */

.sca-modal--ai .sca-modal__dialog {
    display: grid;
    gap: 0.875rem;
    width: min(100%, 52rem);
    padding: 1rem 1rem 0;
}

.sca-ai-dialog__header {
    display: grid;
    justify-items: start;
    gap: 0.375rem;
    padding-right: 3.5rem;
}

.sca-ai-dialog__title {
    color: var(--sca-color-navy);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.sca-ai-story,
.sca-ai-paths {
    display: grid;
    gap: 0.75rem;
}

.sca-ai-story[hidden],
.sca-ai-paths[hidden],
.sca-ai-controls [hidden] {
    display: none;
}

/* Stage ------------------------------------------------------------------ */

.sca-ai-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: var(--sca-radius-md);
    background:
        radial-gradient(circle at 50% 45%, rgba(95, 243, 255, 0.16), rgba(95, 243, 255, 0) 60%),
        radial-gradient(circle, rgba(3, 43, 98, 0.06) 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(180deg, #eef9fc 0%, #f8fcfe 100%);
}

.sca-ai-stage__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sca-ai-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms var(--sca-ease), visibility 0s linear 600ms;
}

.sca-ai-scene.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.sca-ai-scene svg {
    width: 100%;
    height: 100%;
}

/* Pause freezes every scene animation in place */
.sca-ai-experience-modal.is-story-paused .sca-ai-scene * {
    animation-play-state: paused !important;
}

/* Reusable scene motions */
.sca-ai-pop,
.sca-ai-twinkle path,
.sca-ai-pulse,
.sca-ai-spark,
.sca-ai-s1__ring,
.sca-ai-s5__burst {
    transform-origin: center;
}

.sca-ai-draw {
    stroke-dasharray: 1;
}

.sca-ai-type {
    transform-origin: 0 50%;
}

.sca-ai-grow {
    transform-origin: 50% 100%;
}

.sca-ai-scene.is-active .sca-ai-pop {
    animation: sca-ai-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(200ms + var(--sca-i, 0) * 180ms);
}

.sca-ai-scene.is-active .sca-ai-draw {
    animation: sca-ai-draw 700ms var(--sca-ease) both;
    animation-delay: calc(400ms + var(--sca-i, 0) * 180ms);
}

.sca-ai-scene.is-active .sca-ai-type {
    animation: sca-ai-type 450ms var(--sca-ease) both;
    animation-delay: calc(600ms + var(--sca-i, 0) * 220ms);
}

.sca-ai-scene.is-active .sca-ai-grow {
    animation: sca-ai-grow 600ms var(--sca-ease) both;
    animation-delay: calc(600ms + var(--sca-i, 0) * 120ms);
}

.sca-ai-scene.is-active .sca-ai-enter-left {
    animation: sca-ai-enter-left 700ms var(--sca-ease) both;
    animation-delay: var(--sca-delay, 100ms);
}

.sca-ai-scene.is-active .sca-ai-enter-right {
    animation: sca-ai-enter-right 700ms var(--sca-ease) both;
    animation-delay: var(--sca-delay, 100ms);
}

.sca-ai-scene.is-active .sca-ai-twinkle path {
    animation: sca-ai-twinkle 1.8s ease-in-out infinite;
    animation-delay: calc(var(--sca-i, 0) * 500ms);
}

.sca-ai-scene.is-active .sca-ai-pulse {
    animation: sca-ai-pulse 2.4s ease-in-out infinite alternate;
}

.sca-ai-scene.is-active .sca-ai-spark {
    animation: sca-ai-twinkle 1.6s ease-in-out infinite;
}

@keyframes sca-ai-pop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@keyframes sca-ai-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sca-ai-type {
    from {
        transform: scaleX(0);
    }
}

@keyframes sca-ai-grow {
    from {
        transform: scaleY(0);
    }
}

@keyframes sca-ai-enter-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes sca-ai-enter-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes sca-ai-twinkle {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.75);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes sca-ai-pulse {
    from {
        opacity: 0.6;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Scene-specific motion */
.sca-ai-scene.is-active .sca-ai-s1__ring {
    animation: sca-ai-spin 30s linear infinite;
}

.sca-ai-scene.is-active .sca-ai-s1__land {
    animation: sca-ai-land 9s linear infinite;
}

.sca-ai-s2__check {
    opacity: 0;
    transform-origin: center;
}

.sca-ai-scene.is-active .sca-ai-s2__bug {
    animation: sca-fade-out 300ms ease 3s both;
}

.sca-ai-scene.is-active .sca-ai-s2__check {
    animation: sca-ai-check 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s both;
}

.sca-ai-scene.is-active .sca-ai-heart {
    transform-origin: center;
    animation: sca-ai-pulse 900ms ease-in-out 1.2s 4 alternate;
}

.sca-ai-scene.is-active .sca-ai-s4__ball {
    animation: sca-ai-bounce 800ms cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

.sca-ai-scene.is-active .sca-ai-s4__playhead {
    animation: sca-ai-playhead 3.4s linear 800ms both;
}

.sca-ai-s5__track {
    transform-origin: 0 50%;
}

.sca-ai-scene.is-active .sca-ai-s5__track {
    animation: sca-ai-type 2.2s var(--sca-ease) 500ms both;
}

.sca-ai-s5__brand-text {
    fill: var(--sca-color-navy);
    font-family: var(--sca-font-en);
    font-size: 24px;
    font-weight: 700;
}

.sca-ai-s5__label {
    fill: var(--sca-color-navy);
    font-size: 15px;
    font-weight: 600;
}

.sca-ai-scene.is-active .sca-ai-s5__brand {
    animation: sca-ai-brand 700ms var(--sca-ease) 3s both;
}

.sca-ai-scene.is-active .sca-ai-s5__burst {
    animation: sca-ai-burst 1.4s var(--sca-ease) 2.9s both;
}

.sca-ai-scene.is-active .sca-ai-s5__bot {
    animation:
        sca-ai-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both,
        sca-ai-hover 2.4s ease-in-out 900ms infinite alternate;
}

@keyframes sca-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sca-ai-land {
    to {
        transform: translateX(-160px);
    }
}

@keyframes sca-ai-check {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sca-ai-bounce {
    to {
        transform: translateY(34px);
    }
}

@keyframes sca-ai-playhead {
    to {
        transform: translateX(470px);
    }
}

@keyframes sca-ai-brand {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes sca-ai-burst {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes sca-ai-hover {
    to {
        transform: translateY(-5px);
    }
}

/* Caption & progress ----------------------------------------------------- */

.sca-ai-caption {
    display: grid;
    gap: 0.25rem;
    text-align: center;
}

.sca-ai-caption__scene {
    color: var(--sca-color-teal);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sca-ai-caption__text {
    min-height: 3em;
    color: var(--sca-color-navy);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.sca-ai-caption__text.is-changing {
    animation: sca-modal-reveal 500ms var(--sca-ease) both;
}

.sca-ai-progress {
    position: relative;
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--sca-radius-pill);
    background-color: #e3eef5;
}

.sca-ai-progress__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sca-color-cyan), #0b93c4);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.sca-ai-progress__ticks {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.sca-ai-progress__ticks span {
    border-right: 2px solid var(--sca-color-white);
}

/* Learning paths --------------------------------------------------------- */

.sca-ai-paths:not([hidden]) {
    animation: sca-modal-reveal 600ms var(--sca-ease) both;
}

.sca-ai-paths__title {
    color: var(--sca-color-navy);
    font-size: 1.25rem;
    font-weight: 700;
}

.sca-ai-paths__title:focus {
    outline: none;
}

.sca-ai-paths__intro {
    color: var(--sca-color-muted);
    font-size: 0.9375rem;
}

.sca-ai-paths__list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
}

.sca-ai-paths__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(4, 207, 198, 0.3);
    border-radius: var(--sca-radius-md);
    background: linear-gradient(135deg, rgba(4, 207, 198, 0.08), rgba(11, 147, 196, 0.04));
    color: var(--sca-color-ink);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease), transform var(--sca-duration) var(--sca-ease);
}

.sca-ai-paths__link:hover,
.sca-ai-paths__link:focus-visible {
    border-color: var(--sca-color-cyan);
    box-shadow: 0 8px 20px rgba(0, 107, 120, 0.14);
    transform: translateY(-2px);
}

.sca-ai-paths__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sca-radius-sm);
    background: linear-gradient(145deg, #0b93c4, var(--sca-color-teal));
    color: var(--sca-color-white);
}

.sca-ai-paths__icon svg {
    width: 55%;
    height: 55%;
}

.sca-ai-paths__name {
    min-width: 0;
}

.sca-ai-paths__soon {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-surface-soft);
    color: var(--sca-color-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.sca-ai-paths:not([hidden]) .sca-ai-paths__list > li {
    animation: sca-modal-reveal 500ms var(--sca-ease) both;
}

.sca-ai-paths__list > li:nth-child(2) { animation-delay: 80ms; }
.sca-ai-paths__list > li:nth-child(3) { animation-delay: 160ms; }
.sca-ai-paths__list > li:nth-child(4) { animation-delay: 240ms; }
.sca-ai-paths__list > li:nth-child(5) { animation-delay: 320ms; }

/* Controls (stay visible while the dialog scrolls) ---------------------- */

.sca-ai-controls {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-inline: -1rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(3, 43, 98, 0.06);
    background-color: var(--sca-color-white);
}

.sca-ai-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 1px solid rgba(3, 43, 98, 0.15);
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-white);
    color: var(--sca-color-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-ai-control:hover {
    background-color: var(--sca-color-surface-soft);
}

.sca-ai-control--primary {
    border-color: transparent;
    background: linear-gradient(135deg, #0b93c4 0%, var(--sca-color-teal) 100%);
    color: var(--sca-color-white);
    box-shadow: 0 6px 16px rgba(0, 107, 120, 0.25);
}

.sca-ai-control--primary:hover {
    background: linear-gradient(135deg, #0b93c4 0%, var(--sca-color-teal) 100%);
    box-shadow: 0 8px 22px rgba(0, 107, 120, 0.35);
}

.sca-ai-control__icon {
    display: block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.sca-ai-control__when-paused,
.sca-ai-experience-modal.is-story-paused .sca-ai-control__when-playing {
    display: none;
}

.sca-ai-experience-modal.is-story-paused span.sca-ai-control__when-paused {
    display: inline;
}

.sca-ai-experience-modal.is-story-paused svg.sca-ai-control__when-paused {
    display: block;
}

/* Reduced motion: no looping robot/CTA motion, simple scene changes */
@media (prefers-reduced-motion: reduce) {
    .sca-ai-robot *,
    .sca-ai-cta-float,
    .sca-ai-cta::before {
        animation: none !important;
    }

    .sca-ai-info-slider__message {
        transform: none !important;
    }
}

/* ========================================
   HERO SECTION — PHASE 4
   ======================================== */

/* --------------------------------------------------------------------------
   5.9 Hero — carousel, slides, copy, team, technology scene, benefits
   Layout per breakpoint lives in section 9.
   -------------------------------------------------------------------------- */

.sca-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding-bottom: 1.25rem;
    background-color: #f4f9fd;
}

.sca-hero :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

/* Carousel --------------------------------------------------------------- */

.sca-hero-slider {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.sca-hero-slider:focus-visible {
    outline-offset: -4px;
}

/* Both slides share one grid cell, so switching never changes the height */
.sca-hero-slide {
    position: relative;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition:
        opacity 800ms var(--sca-ease),
        transform 800ms var(--sca-ease),
        visibility 0s linear 800ms;
}

.sca-hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.sca-hero-slide.is-leaving {
    visibility: visible;
    transform: translateX(-24px);
    transition-delay: 0s;
}

/* Hidden slide: freeze its looping artwork */
.sca-hero-slide:not(.is-active) * {
    animation-play-state: paused !important;
}

/* Background layer ------------------------------------------------------- */

.sca-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(105deg, #ffffff 0%, #f3f9fd 42%, #e2f2fb 100%);
}

/* Soft window mullions of a bright office */
.sca-hero-bg__panes {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 84px, rgba(255, 255, 255, 0.7) 84px 88px),
        linear-gradient(180deg, rgba(214, 236, 248, 0.7), rgba(255, 255, 255, 0.2));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
}

/* Architectural blue/cyan curve */
.sca-hero-bg__arch {
    position: absolute;
    top: -16rem;
    right: -16rem;
    width: 44rem;
    height: 44rem;
    border: 3.25rem solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(transparent, transparent) padding-box,
        conic-gradient(from 200deg, #0b5fa8, #04cfc6, #b9f1f8, #0b93c4, #0b5fa8) border-box;
    box-shadow: inset 0 0 0 1.25rem rgba(255, 255, 255, 0.85), 0 20px 60px rgba(4, 207, 198, 0.18);
    opacity: 0.85;
}

.sca-hero-bg__glow {
    position: absolute;
    left: -10rem;
    bottom: -12rem;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 243, 255, 0.22), rgba(95, 243, 255, 0));
}

.sca-hero-bg--two .sca-hero-bg__arch {
    top: -20rem;
    right: -12rem;
    opacity: 0.7;
}

.sca-hero-bg--two .sca-hero-bg__glow {
    left: auto;
    right: 10%;
    bottom: -14rem;
}

/* Slide 1 right side (behind the team). Three CSS layers, all behind the
   photo: a continuous light-cyan → teal → deep-blue field with faint dots and
   light lines; smooth concentric rings (no solid centre); and a soft halo that
   separates the group from the field. */
.sca-hero-bg--one .sca-hero-bg__panes {
    width: 64%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px) 0 0 / 18px 18px,
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 120px, rgba(255, 255, 255, 0.12) 120px 122px),
        linear-gradient(112deg, rgba(221, 251, 255, 0) 0%, #ddfbff 26%, #8eecf5 44%, #21d4e8 60%, #0aa9b8 74%, #087ea4 88%, #073b70 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.sca-hero-bg--one .sca-hero-bg__arch {
    top: -14rem;
    right: -16rem;
    width: 48rem;
    height: 48rem;
    border: 0;
    background: radial-gradient(circle closest-side,
        transparent 0 70%,
        rgba(255, 255, 255, 0.5) 70.6% 72.4%,
        transparent 73% 80%,
        rgba(221, 251, 255, 0.45) 80.6% 84.6%,
        transparent 85.2% 92%,
        rgba(255, 255, 255, 0.28) 92.6% 93.6%,
        transparent 94.2%);
    box-shadow: none;
    opacity: 1;
}

.sca-hero-bg--one .sca-hero-bg__glow {
    top: 8%;
    right: 4%;
    bottom: auto;
    left: auto;
    width: 46%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 45%, rgba(221, 251, 255, 0.9) 0%, rgba(142, 236, 245, 0.45) 40%, rgba(33, 212, 232, 0) 72%);
}

/* Slide layout ----------------------------------------------------------- */

.sca-hero-slide__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.75rem 0.5rem;
}

/* Copy ------------------------------------------------------------------- */

.sca-hero-copy {
    container-type: inline-size;
    display: grid;
    align-content: center;
    gap: 0.75rem;
}

.sca-hero-eyebrow,
.sca-hero-brandline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1d3557;
    font-family: var(--sca-font-en);
}

.sca-hero-eyebrow {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.28em;
}

.sca-hero-brandline {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sca-hero-eyebrow::after,
.sca-hero-brandline::after {
    content: "";
    flex: 0 0 3rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(3, 43, 98, 0.35), rgba(3, 43, 98, 0));
}

.sca-hero-brandline + .sca-hero-eyebrow {
    margin-top: -0.375rem;
}

.sca-hero-brandline + .sca-hero-eyebrow::after {
    display: none;
}

.sca-hero-title {
    position: relative;
    isolation: isolate;
    color: var(--sca-color-navy);
    font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.28;
}

/* Size from the copy column, not the viewport: the longest line
   (≈12em) always fits, so each headline keeps its three lines */
@supports (font-size: 1cqi) {
    .sca-hero-title {
        font-size: clamp(1.625rem, calc(7.4cqi + 0.3rem), 3.25rem);
    }
}

.sca-hero-title__line--teal {
    color: #0a7f99;
}

/* Golden brush accent (decorative, behind the text) */
.sca-hero-title__line--accent {
    position: relative;
    display: inline-block;
}

.sca-hero-title__line--accent::after {
    content: "";
    position: absolute;
    left: -0.15em;
    right: 12%;
    bottom: -0.08em;
    z-index: -1;
    height: 0.3em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C70 7 162 3 296 6c-58 5-146 9-230 14-30 2-52 2-62-4z' fill='%23f5b82e'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    opacity: 0.85;
}

.sca-hero-text {
    max-width: 34rem;
    color: #334a66;
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
    line-height: 1.7;
}

/* Team photo + founder label --------------------------------------------- */

.sca-hero-team {
    position: relative;
    align-self: end;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

/* Exact transparent PNG, shown as-is (no filters, blend modes or opacity) */
.sca-hero-team__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    image-rendering: auto;
    opacity: 1;
    -webkit-user-drag: none;
}

/* Identity label, anchored to the photo: centred on the area between
   Bashit Afsan's folded arms (≈39% across, ≈76% down the image), below
   every face. `translate` centres it; the float uses `transform`. */
.sca-hero-founder {
    position: absolute;
    left: 39%;
    top: 76%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem;
    border: 1px solid rgba(95, 243, 255, 0.8);
    border-radius: 0.875rem;
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    translate: -50% -50%;
    box-shadow: 0 10px 24px rgba(3, 43, 98, 0.18), 0 0 0 3px rgba(95, 243, 255, 0.16), 0 0 16px rgba(95, 243, 255, 0.35);
    animation: sca-hero-founder-float 4.2s ease-in-out infinite alternate;
}

.sca-hero-founder:hover {
    animation-play-state: paused;
    box-shadow: 0 12px 28px rgba(3, 43, 98, 0.22), 0 0 0 4px rgba(95, 243, 255, 0.3), 0 0 24px rgba(95, 243, 255, 0.5);
}

.sca-hero-founder__avatar {
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
}

.sca-hero-founder__avatar svg {
    width: 100%;
    height: 100%;
}

.sca-hero-founder__text {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.sca-hero-founder__name {
    color: var(--sca-color-navy);
    font-family: var(--sca-font-en);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.sca-hero-founder__role {
    color: var(--sca-color-muted);
    font-family: var(--sca-font-en);
    font-size: 0.6875rem;
    font-weight: 500;
}

@keyframes sca-hero-founder-float {
    from {
        transform: translateY(-5px);
        box-shadow: 0 14px 28px rgba(3, 43, 98, 0.16), 0 0 0 3px rgba(95, 243, 255, 0.16), 0 0 16px rgba(95, 243, 255, 0.35);
    }

    to {
        transform: translateY(5px);
        box-shadow: 0 6px 16px rgba(3, 43, 98, 0.22), 0 0 0 3px rgba(95, 243, 255, 0.16), 0 0 16px rgba(95, 243, 255, 0.35);
    }
}

/* Technology scene (slide 2) --------------------------------------------- */

.sca-hero-tech-scene {
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
}

.sca-hero-tech-scene__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sca-hero-svg-label {
    fill: var(--sca-color-navy);
    font-family: var(--sca-font-en);
    font-size: 10.5px;
    font-weight: 700;
}

.sca-hero-svg-label--light {
    fill: var(--sca-color-white);
}

.sca-hero-svg-label--mono {
    fill: var(--sca-color-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
}

.sca-hero-svg-label--ai {
    fill: #5ff3ff;
    font-size: 13px;
}

.sca-hero-svg-label--tiny {
    font-size: 7.5px;
    font-weight: 600;
}

.sca-hero-svg-label--muted {
    fill: #64748b;
}

.sca-hero-svg-label--value {
    font-size: 13px;
    font-weight: 700;
}

.sca-hero-svg-label--live {
    fill: var(--sca-color-white);
    font-size: 8.5px;
    letter-spacing: 0.06em;
}

.sca-hero-svg-label--live-sm {
    font-size: 7px;
}

/* Robot: a 12s presenting cycle.
   Front (0–18%) → turn to screen (18–28%) → present with the right arm
   (28–60%) → arm returns (60–68%) → head returns (68–76%) → blink → front.
   Joints rotate around fixed points in SVG units (view-box), so nested
   parts never drift. */
.sca-scene .sca-hero-robot [class] {
    transform-box: view-box;
}

.sca-hero-robot__body {
    transform-origin: 128px 352px;
    animation: sca-hero-rb-body 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__head {
    transform-origin: 128px 246px;
    animation: sca-hero-rb-head 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__face {
    transform-origin: 128px 209px;
    animation: sca-hero-rb-face 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__eyes {
    animation: sca-hero-rb-eyes 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__lid {
    transform: scaleY(0);
    transform-origin: 0 199px;
    animation: sca-hero-rb-lids 12s ease-in-out infinite;
}

.sca-hero-robot__upper-arm {
    transform-origin: 163px 262px;
    animation: sca-hero-rb-upper 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__forearm {
    transform-origin: 163px 289px;
    animation: sca-hero-rb-forearm 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sca-hero-robot__antenna {
    animation: sca-ai-robot-light 2.2s ease-in-out infinite alternate;
}

/* Snake wave: neighbouring cards are ~0.42 of a cycle apart, so one rises
   while the next lowers and the motion travels across all six (±6 SVG units
   ≈ 12px at desktop size, ≈ 7–8px on phones where the scene is scaled down). */
.sca-hero-card {
    animation: sca-hero-wave 5s ease-in-out infinite;
    animation-delay: calc(var(--sca-wave-i, 0) * -2.1s);
}

.sca-hero-links__base {
    animation: sca-hero-link-pulse 2.5s ease-in-out infinite alternate;
}

.sca-hero-links__flow {
    opacity: 0.85;
    animation: sca-hero-link-flow 1.25s linear infinite;
}

.sca-hero-caret {
    animation: sca-hero-caret 1s steps(1) infinite;
}

.sca-hero-ball {
    transform-origin: center;
    animation: sca-hero-ball 1.2s ease-in-out infinite alternate;
}

@keyframes sca-hero-rb-body {
    0%,
    20%,
    74%,
    100% {
        transform: none;
    }

    30%,
    66% {
        transform: rotate(2.5deg);
    }
}

@keyframes sca-hero-rb-head {
    0%,
    18%,
    76%,
    100% {
        transform: none;
    }

    28%,
    68% {
        transform: translateX(5px) rotate(7deg);
    }
}

@keyframes sca-hero-rb-face {
    0%,
    18%,
    76%,
    100% {
        transform: none;
    }

    28%,
    68% {
        transform: translateX(9px) scaleX(0.86);
    }
}

@keyframes sca-hero-rb-eyes {
    0%,
    18%,
    76%,
    100% {
        transform: none;
    }

    30%,
    66% {
        transform: translateX(3px);
    }
}

@keyframes sca-hero-rb-lids {
    0%,
    8%,
    11%,
    80%,
    83%,
    100% {
        transform: scaleY(0);
    }

    9.5%,
    81.5% {
        transform: scaleY(1);
    }
}

@keyframes sca-hero-rb-upper {
    0%,
    28%,
    68%,
    100% {
        transform: none;
    }

    36%,
    60% {
        transform: rotate(-80deg);
    }
}

@keyframes sca-hero-rb-forearm {
    0%,
    30%,
    68%,
    100% {
        transform: none;
    }

    38% {
        transform: rotate(-40deg);
    }

    44% {
        transform: rotate(-28deg);
    }

    50% {
        transform: rotate(-42deg);
    }

    56% {
        transform: rotate(-30deg);
    }

    60% {
        transform: rotate(-38deg);
    }
}

@keyframes sca-hero-wave {
    0%,
    100% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(6px);
    }
}

@keyframes sca-hero-link-pulse {
    from {
        opacity: 0.35;
    }

    to {
        opacity: 0.85;
    }
}

@keyframes sca-hero-link-flow {
    to {
        stroke-dashoffset: -27;
    }
}

@keyframes sca-hero-caret {
    50% {
        opacity: 0;
    }
}

@keyframes sca-hero-ball {
    from {
        transform: translateY(6px);
    }

    to {
        transform: translateY(-4px);
    }
}

/* Carousel controls ------------------------------------------------------ */

.sca-hero-controls-wrap {
    position: relative;
    z-index: 3;
    grid-row: 2;
    grid-column: 1;
    pointer-events: none;
}

.sca-hero-controls-row {
    display: flex;
    justify-content: center;
    padding-block: 0.75rem 0.25rem;
}

.sca-hero-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.sca-hero-arrow {
    display: grid;
    place-items: center;
    width: max(2.75rem, 44px);
    height: max(2.75rem, 44px);
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--sca-color-navy);
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-hero-arrow:hover {
    background-color: var(--sca-color-surface-soft);
}

.sca-hero-arrow svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* 44px tap area around a small visual dot */
.sca-hero-dot {
    position: relative;
    width: max(2.75rem, 44px);
    height: max(2.75rem, 44px);
    border: 0;
    background-color: transparent;
}

.sca-hero-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--sca-radius-pill);
    background-color: rgba(3, 43, 98, 0.25);
    transform: translate(-50%, -50%);
    transition: width var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease);
}

.sca-hero-dot.is-active::before {
    width: 1.5rem;
    background: linear-gradient(90deg, var(--sca-color-cyan), #0b93c4);
}

/* Shared benefits -------------------------------------------------------- */

.sca-hero-benefits-wrap {
    position: relative;
    z-index: 2;
    grid-row: 3;
    grid-column: 1;
}

.sca-hero-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.25rem;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 #ffffff, 0 18px 40px rgba(3, 43, 98, 0.12);
    list-style: none;
}

.sca-hero-benefits > li {
    display: flex;
    min-width: 0;
}

.sca-hero-benefit {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.375rem;
    border: 0;
    border-radius: 1rem;
    background-color: transparent;
    color: var(--sca-color-navy);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: transform var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-hero-benefit:hover,
.sca-hero-benefit:focus-visible {
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 22px rgba(3, 43, 98, 0.12);
    transform: translateY(-3px);
}

/* Bolder on hover without changing width */
.sca-hero-benefit__label {
    display: inline-grid;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sca-hero-benefit__label::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    font-weight: 700;
    visibility: hidden;
}

.sca-hero-benefit__icon {
    --sca-benefit-glow: rgba(47, 139, 255, 0.45);

    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--sca-color-white);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 8px 18px var(--sca-benefit-glow);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-hero-benefit__icon svg {
    width: 48%;
    height: 48%;
}

.sca-hero-benefit--live .sca-hero-benefit__icon {
    background: radial-gradient(circle at 32% 25%, #7cc0ff 0%, #2f8bff 45%, #0a4fd6 100%);
}

.sca-hero-benefit--project .sca-hero-benefit__icon {
    --sca-benefit-glow: rgba(10, 163, 90, 0.4);

    background: radial-gradient(circle at 32% 25%, #8ff0b8 0%, #22c46e 45%, #0a8a46 100%);
}

.sca-hero-benefit--mentor .sca-hero-benefit__icon {
    --sca-benefit-glow: rgba(139, 92, 246, 0.45);

    background: radial-gradient(circle at 32% 25%, #d2b6ff 0%, #9b6bff 45%, #6a2fd6 100%);
}

.sca-hero-benefit:hover .sca-hero-benefit__icon,
.sca-hero-benefit:focus-visible .sca-hero-benefit__icon {
    transform: scale(1.08);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 10px 26px var(--sca-benefit-glow), 0 0 0 4px rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   5.10 Hero Benefit Modals
   Built on the shared modal (5.4); scenes run while the modal .is-playing.
   -------------------------------------------------------------------------- */

.sca-modal--hero .sca-modal__dialog {
    width: min(100%, 36rem);
    max-height: min(92vh, calc(100dvh - 2rem));
}

.sca-hero-modal__stage {
    aspect-ratio: 480 / 300;
    overflow: hidden;
    border-bottom: 1px solid rgba(3, 43, 98, 0.06);
    background:
        radial-gradient(circle at 60% 40%, rgba(95, 243, 255, 0.16), rgba(95, 243, 255, 0) 60%),
        linear-gradient(180deg, #eef8fc 0%, #f8fcfe 100%);
}

.sca-hero-modal__stage svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sca-modal--hero .sca-modal__content {
    --sca-reveal-start: 0.3s;

    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}

.sca-modal--hero .sca-modal__content > :nth-child(6) {
    --sca-reveal-step: 5;
}

.sca-modal--hero .sca-modal__content > :nth-child(7) {
    --sca-reveal-step: 6;
}

/* Desktop/tablet: illustration beside the text, so everything (scene,
   heading, copy, CTA, replay) is visible together without scrolling */
@media (min-width: 768px) {
    .sca-modal--hero .sca-modal__dialog {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: center;
        width: min(100%, 58rem);
    }

    .sca-hero-modal__stage {
        align-self: stretch;
        display: flex;
        align-items: center;
        aspect-ratio: auto;
        border-right: 1px solid rgba(3, 43, 98, 0.06);
        border-bottom: 0;
    }

    .sca-hero-modal__stage svg {
        height: auto;
        aspect-ratio: 480 / 300;
    }

    .sca-modal--hero .sca-modal__content {
        padding: 3.5rem 1.5rem 1.5rem;
    }
}

.sca-hero-modal__chip {
    padding: 0.25rem 0.875rem;
    border-radius: var(--sca-radius-pill);
    background-color: rgba(4, 207, 198, 0.12);
    color: var(--sca-color-teal-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.sca-hero-modal__replay {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: max(2.75rem, 44px);
    padding: 0 1.125rem;
    border: 1px solid rgba(3, 43, 98, 0.15);
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-white);
    color: var(--sca-color-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color var(--sca-duration) var(--sca-ease);
}

.sca-hero-modal__replay:hover {
    background-color: var(--sca-color-surface-soft);
}

.sca-hero-modal__replay svg {
    width: 1rem;
    height: 1rem;
}

/* Premium floating CTAs ---------------------------------------------------
   Outer span floats; the inner link scales — transforms never conflict. */
.sca-hero-cta-float {
    display: inline-flex;
    max-width: 100%;
    margin-block: 0.375rem;
    animation: sca-hero-cta-float 3.6s ease-in-out infinite alternate;
}

.sca-hero-cta-float--project {
    --sca-cta-float-d: 3.8s;

    animation-duration: 3.8s;
}

.sca-hero-cta-float--mentor {
    --sca-cta-float-d: 4s;

    animation-duration: 4s;
}

.sca-hero-cta-float:hover,
.sca-hero-cta-float:focus-within {
    animation-play-state: paused;
}

/* Inside a playing modal the shared content reveal also targets this span:
   run both — the reveal fades it in, the float then moves it */
.sca-modal.is-playing .sca-modal__content > .sca-hero-cta-float {
    animation:
        sca-modal-reveal 500ms var(--sca-ease) both,
        sca-hero-cta-float var(--sca-cta-float-d, 3.6s) ease-in-out infinite alternate;
    animation-delay: calc(var(--sca-reveal-start) + var(--sca-reveal-step, 0) * 90ms), 0s;
}

.sca-modal.is-playing .sca-modal__content > .sca-hero-cta-float:hover,
.sca-modal.is-playing .sca-modal__content > .sca-hero-cta-float:focus-within {
    animation-play-state: paused;
}

.sca-hero-cta {
    --sca-cta-glow: rgba(11, 147, 196, 0.45);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    max-width: 100%;
    min-height: max(2.875rem, 44px);
    overflow: hidden;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border-radius: var(--sca-radius-pill);
    color: var(--sca-color-white);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px var(--sca-cta-glow), 0 0 0 3px rgba(255, 255, 255, 0.6);
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

/* Soft moving light */
.sca-hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sca-ai-sweep 4.5s ease-in-out 1s infinite;
    pointer-events: none;
}

.sca-hero-cta:hover,
.sca-hero-cta:focus-visible {
    transform: scale(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 30px var(--sca-cta-glow), 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 26px var(--sca-cta-glow);
}

.sca-hero-cta__label {
    position: relative;
    min-width: 0;
}

.sca-hero-cta__arrow {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform var(--sca-duration) var(--sca-ease), background-color var(--sca-duration) var(--sca-ease);
}

.sca-hero-cta__arrow svg {
    width: 55%;
    height: 55%;
}

.sca-hero-cta:hover .sca-hero-cta__arrow,
.sca-hero-cta:focus-visible .sca-hero-cta__arrow {
    background-color: rgba(255, 255, 255, 0.34);
    transform: translateX(4px);
}

.sca-hero-cta--live {
    background: linear-gradient(135deg, #2f8bff 0%, #0b93c4 55%, #04b5c6 100%);
}

.sca-hero-cta--project {
    --sca-cta-glow: rgba(10, 163, 127, 0.45);

    padding-left: 0.625rem;
    background: linear-gradient(135deg, #0f9f6e 0%, #0aa37f 45%, #0b8a99 100%);
}

.sca-hero-cta__code {
    position: relative;
    flex-shrink: 0;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.18);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8125rem;
    text-shadow: none;
}

.sca-hero-cta--project .sca-hero-cta__arrow {
    border-radius: 0.625rem;
}

.sca-hero-cta--mentor {
    --sca-cta-glow: rgba(124, 58, 237, 0.45);

    background: linear-gradient(135deg, #9b6bff 0%, #6d3fe0 50%, #4f46e5 100%);
}

/* Glass highlight */
.sca-hero-cta--mentor::after {
    content: "";
    position: absolute;
    inset: 0 0 50%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
    pointer-events: none;
}

@keyframes sca-hero-cta-float {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
    }
}

/* Character rigs: joints turn around fixed points in SVG units
   (scoped to .sca-scene so this wins over the shared fill-box rule) */
.sca-scene .sca-hl-camera,
.sca-scene .sca-hl-breathe,
.sca-scene .sca-hl-breathe [class],
.sca-scene .sca-hl-cursor,
.sca-scene .sca-hl-ripple,
.sca-scene .sca-hl-bar,
.sca-scene .sca-hl-teacher-mouth,
.sca-scene .sca-hp-body,
.sca-scene .sca-hp-body [class],
.sca-scene .sca-hm-mentor,
.sca-scene .sca-hm-mentor [class] {
    transform-box: view-box;
}

/* Shared breathing (rise/fall + slight chest expansion) */
@keyframes sca-hl-breathe {
    to {
        transform: translateY(-1.4px);
    }
}

@keyframes sca-hl-torso {
    to {
        transform: scaleY(1.018);
    }
}

@keyframes sca-hero-show-mid {
    0%,
    100% {
        opacity: 0;
    }
}

/* Live Classes story (9s)
   A 0–1.2s learner watches the laptop · B 1.2–3s view zooms to the live area
   · C 2.6–4.4s cursor clicks Join, class starts · D 6–9s learner turns to the
   visitor, smiles and waves */
.sca-hl-camera {
    transform-origin: 300px 132px;
}

.sca-hl-breathe {
    animation: sca-hl-breathe 3.2s ease-in-out infinite alternate;
}

.sca-hl-torso {
    transform-origin: 122px 202px;
    animation: sca-hl-torso 3.2s ease-in-out infinite alternate;
}

.sca-hl-head {
    transform-origin: 127px 132px;
}

.sca-hl-face {
    transform-origin: 134px 106px;
}

.sca-hl-lid {
    transform: scaleY(0);
    transform-origin: 0 101.8px;
}

.sca-hl-uarm {
    transform: rotate(-30deg);
    transform-origin: 140px 146px;
}

.sca-hl-farm {
    transform: rotate(-30deg);
    transform-origin: 140px 182px;
}

.sca-hl-smile,
.sca-hl-cursor,
.sca-hl-ripple,
.sca-hl-joined,
.sca-hl-speaking {
    opacity: 0;
}

.sca-hl-cursor,
.sca-hl-ripple {
    transform-origin: 377px 192px;
}

.sca-hl-bar {
    transform: scaleY(0.3);
    transform-origin: 0 198px;
}

.sca-hl-teacher-mouth {
    transform-origin: 292px 131px;
}

.sca-hl-tile {
    transform-origin: center;
}

.sca-modal.is-playing .sca-hl-camera {
    animation: sca-hl-zoom 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-cursor {
    animation: sca-hl-cursor 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-ripple {
    animation: sca-hl-ripple 9s ease-out both;
}

.sca-modal.is-playing .sca-hl-overlay {
    animation: sca-hl-overlay 9s ease both;
}

.sca-modal.is-playing .sca-hl-joined {
    animation: sca-hl-joined 9s ease both;
}

.sca-modal.is-playing .sca-hl-speaking {
    animation: sca-hl-speaking 9s ease both;
}

.sca-modal.is-playing .sca-hl-bar {
    animation: sca-hl-bar 450ms ease-in-out infinite alternate;
    animation-delay: calc(4.3s + var(--sca-i, 0) * 90ms);
}

.sca-modal.is-playing .sca-hl-teacher-mouth {
    animation: sca-hl-talk 300ms ease-in-out 4.4s infinite alternate;
}

.sca-modal.is-playing .sca-hl-tile {
    animation: sca-ai-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(4.2s + var(--sca-i, 0) * 150ms);
}

.sca-modal.is-playing .sca-hl-live-dot {
    animation: sca-hero-caret 1s steps(1) infinite;
}

.sca-modal.is-playing .sca-hl-lid {
    animation: sca-hl-lids 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hl-head {
    animation: sca-hl-head 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-face {
    animation: sca-hl-face 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-eyes {
    animation: sca-hl-eyes 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-mouth {
    animation: sca-hl-mouth 9s ease both;
}

.sca-modal.is-playing .sca-hl-smile {
    animation: sca-hl-smile 9s ease both;
}

.sca-modal.is-playing .sca-hl-uarm {
    animation: sca-hl-uarm 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hl-farm {
    animation: sca-hl-farm 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

@keyframes sca-hl-zoom {
    0%,
    13%,
    74%,
    100% {
        transform: none;
    }

    33%,
    62% {
        transform: scale(1.16);
    }
}

@keyframes sca-hl-cursor {
    0%,
    28% {
        opacity: 0;
        transform: translate(-90px, 70px);
    }

    31% {
        opacity: 1;
        transform: translate(-90px, 70px);
    }

    41% {
        opacity: 1;
        transform: translate(0, 0);
    }

    42.5% {
        transform: translate(0, 0) scale(0.82);
    }

    44%,
    54% {
        opacity: 1;
        transform: translate(0, 0);
    }

    58%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes sca-hl-ripple {
    0%,
    42% {
        opacity: 0;
        transform: none;
    }

    43% {
        opacity: 0.9;
    }

    52%,
    100% {
        opacity: 0;
        transform: scale(4);
    }
}

@keyframes sca-hl-overlay {
    0%,
    43% {
        opacity: 1;
    }

    48%,
    100% {
        opacity: 0;
    }
}

@keyframes sca-hl-joined {
    0%,
    43% {
        opacity: 0;
    }

    46%,
    100% {
        opacity: 1;
    }
}

@keyframes sca-hl-speaking {
    0%,
    47% {
        opacity: 0;
    }

    52%,
    100% {
        opacity: 1;
    }
}

@keyframes sca-hl-bar {
    to {
        transform: scaleY(1);
    }
}

@keyframes sca-hl-talk {
    to {
        transform: scaleY(1.9);
    }
}

@keyframes sca-hl-lids {
    0%,
    16%,
    19%,
    84%,
    87%,
    100% {
        transform: scaleY(0);
    }

    17.5%,
    85.5% {
        transform: scaleY(1);
    }
}

@keyframes sca-hl-head {
    0%,
    70% {
        transform: none;
    }

    80%,
    100% {
        transform: rotate(-3deg);
    }
}

@keyframes sca-hl-face {
    0%,
    70% {
        transform: none;
    }

    80%,
    100% {
        transform: translateX(-6px);
    }
}

@keyframes sca-hl-eyes {
    0%,
    8%,
    70% {
        transform: none;
    }

    12%,
    66% {
        transform: translate(0.8px, -0.6px);
    }

    80%,
    100% {
        transform: translateX(-1px);
    }
}

@keyframes sca-hl-mouth {
    0%,
    77% {
        opacity: 1;
    }

    81%,
    100% {
        opacity: 0;
    }
}

@keyframes sca-hl-smile {
    0%,
    77% {
        opacity: 0;
    }

    81%,
    100% {
        opacity: 1;
    }
}

@keyframes sca-hl-uarm {
    0%,
    80% {
        transform: rotate(-30deg);
    }

    87%,
    100% {
        transform: rotate(-120deg);
    }
}

@keyframes sca-hl-farm {
    0%,
    80% {
        transform: rotate(-30deg);
    }

    87% {
        transform: rotate(-50deg);
    }

    91% {
        transform: rotate(-32deg);
    }

    95% {
        transform: rotate(-52deg);
    }

    100% {
        transform: rotate(-42deg);
    }
}

/* Project-Based Learning story (9s)
   Looks at the dashboard · points at CTR (2.2–4s) then Results (4.5–5.8s)
   while explaining · arm returns · turns to the visitor · blink · smile */
.sca-hp-pop,
.sca-hm-pop,
.sca-hm-bubble {
    transform-origin: center;
}

.sca-hp-grow {
    transform-origin: 50% 100%;
}

.sca-hp-bar {
    transform-origin: 0 50%;
}

.sca-hp-draw,
.sca-hm-draw {
    stroke-dasharray: 1;
}

.sca-hp-focus {
    opacity: 0;
}

.sca-hp-body {
    transform-origin: 68px 290px;
}

.sca-hp-head {
    transform-origin: 68px 158px;
}

.sca-hp-face {
    transform-origin: 72px 138px;
}

.sca-hp-lid {
    transform: scaleY(0);
    transform-origin: 0 133.3px;
}

.sca-hp-uarm {
    transform: rotate(-8deg);
    transform-origin: 88px 172px;
}

.sca-hp-farm {
    transform-origin: 88px 199px;
}

.sca-hp-talk,
.sca-hp-smile {
    opacity: 0;
}

.sca-hp-talk {
    transform-origin: 74px 146.5px;
}

.sca-modal.is-playing .sca-hp-pop {
    animation: sca-ai-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(200ms + var(--sca-i, 0) * 180ms);
}

.sca-modal.is-playing .sca-hp-grow {
    animation: sca-ai-grow 600ms var(--sca-ease) both;
    animation-delay: calc(1.2s + var(--sca-i, 0) * 100ms);
}

.sca-modal.is-playing .sca-hp-draw {
    animation: sca-ai-draw 1s var(--sca-ease) 1.9s both;
}

.sca-modal.is-playing .sca-hp-donut {
    animation: sca-fade-in 600ms ease 1.4s both;
}

.sca-hp-donut {
    opacity: 0;
}

.sca-modal.is-playing .sca-hp-bar {
    animation: sca-ai-type 600ms var(--sca-ease) both;
    animation-delay: calc(2.2s + var(--sca-i, 0) * 150ms);
}

.sca-modal.is-playing .sca-hp-focus {
    animation: sca-hp-ring-one 9s ease both;
}

.sca-modal.is-playing .sca-hp-focus--two {
    animation-name: sca-hp-ring-two;
}

.sca-modal.is-playing .sca-hp-body {
    animation: sca-hp-body 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hp-head {
    animation: sca-hp-head 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hp-face {
    animation: sca-hp-face 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hp-eyes {
    animation: sca-hp-eyes 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hp-brows {
    animation: sca-hp-brows 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hp-lid {
    animation: sca-hp-lids 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hp-mouth {
    animation: sca-hp-mouth 9s ease both;
}

.sca-modal.is-playing .sca-hp-talk {
    animation:
        sca-hp-talk-show 9s ease both,
        sca-hp-talk 260ms ease-in-out infinite alternate;
}

.sca-modal.is-playing .sca-hp-smile {
    animation: sca-hp-smile 9s ease both;
}

.sca-modal.is-playing .sca-hp-uarm {
    animation: sca-hp-uarm 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hp-farm {
    animation: sca-hp-farm 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

@keyframes sca-hp-ring-one {
    0%,
    24%,
    48%,
    100% {
        opacity: 0;
    }

    28%,
    44% {
        opacity: 1;
    }
}

@keyframes sca-hp-ring-two {
    0%,
    48% {
        opacity: 0;
    }

    52%,
    100% {
        opacity: 1;
    }
}

@keyframes sca-hp-body {
    0%,
    18%,
    72%,
    100% {
        transform: none;
    }

    26%,
    64% {
        transform: rotate(1.2deg);
    }
}

@keyframes sca-hp-head {
    0%,
    28%,
    56%,
    68% {
        transform: none;
    }

    32%,
    40%,
    48% {
        transform: rotate(2deg);
    }

    36%,
    44%,
    52% {
        transform: rotate(-1deg);
    }

    78%,
    100% {
        transform: rotate(-3deg);
    }
}

@keyframes sca-hp-face {
    0%,
    70% {
        transform: none;
    }

    78%,
    100% {
        transform: translateX(-5px);
    }
}

@keyframes sca-hp-eyes {
    0%,
    6%,
    70% {
        transform: none;
    }

    12%,
    62% {
        transform: translate(1.5px, -1.5px);
    }

    78%,
    100% {
        transform: translateX(-1px);
    }
}

@keyframes sca-hp-brows {
    0%,
    30%,
    64%,
    100% {
        transform: none;
    }

    34%,
    58% {
        transform: translateY(-1px);
    }
}

@keyframes sca-hp-lids {
    0%,
    20%,
    23%,
    86%,
    89%,
    100% {
        transform: scaleY(0);
    }

    21.5%,
    87.5% {
        transform: scaleY(1);
    }
}

@keyframes sca-hp-mouth {
    0%,
    27%,
    65%,
    89% {
        opacity: 1;
    }

    28%,
    64%,
    91%,
    100% {
        opacity: 0;
    }
}

@keyframes sca-hp-talk-show {
    0%,
    27%,
    65%,
    100% {
        opacity: 0;
    }

    28%,
    64% {
        opacity: 1;
    }
}

@keyframes sca-hp-talk {
    from {
        transform: scaleY(0.45);
    }
}

@keyframes sca-hp-smile {
    0%,
    89% {
        opacity: 0;
    }

    92%,
    100% {
        opacity: 1;
    }
}

@keyframes sca-hp-uarm {
    0%,
    16%,
    72%,
    100% {
        transform: rotate(-8deg);
    }

    24%,
    44% {
        transform: rotate(-80deg);
    }

    50%,
    64% {
        transform: rotate(-78deg);
    }
}

@keyframes sca-hp-farm {
    0%,
    16%,
    72%,
    100% {
        transform: none;
    }

    24%,
    44% {
        transform: rotate(-28deg);
    }

    50%,
    64% {
        transform: rotate(-20deg);
    }
}

/* Mentor Support story (9s)
   Present + blink · listening nods · turns to answer and speaks into the
   headset (mic stays at the mouth) · mentor network activates · looks at the
   visitor · blink · warm smile */
.sca-hm-a,
.sca-hm-together {
    opacity: 0;
}

.sca-hm-together {
    transform-origin: center;
}

.sca-hm-breathe {
    animation: sca-hl-breathe 3.4s ease-in-out infinite alternate;
}

.sca-hm-torso {
    transform-origin: 240px 300px;
    animation: sca-hl-torso 3.4s ease-in-out infinite alternate;
}

.sca-hm-head {
    transform-origin: 240px 246px;
}

.sca-hm-face {
    transform-origin: 240px 222px;
}

.sca-hm-lid {
    transform: scaleY(0);
    transform-origin: 0 218.3px;
}

.sca-hm-talk,
.sca-hm-smile {
    opacity: 0;
}

.sca-hm-talk {
    transform-origin: 240px 231.5px;
}

.sca-hm-mic {
    transform-origin: 233px 242.75px;
}

.sca-modal.is-playing .sca-hm-pop {
    animation: sca-ai-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(200ms + var(--sca-i, 0) * 250ms);
}

.sca-modal.is-playing .sca-hm-draw {
    animation: sca-ai-draw 800ms var(--sca-ease) both;
    animation-delay: calc(1.4s + var(--sca-i, 0) * 200ms);
}

.sca-modal.is-playing .sca-hm-flow {
    animation: sca-hero-link-flow 1.4s linear 2.4s infinite;
}

.sca-hm-flow {
    opacity: 0.8;
}

.sca-modal.is-playing .sca-hm-bubble {
    animation: sca-ai-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(2.6s + var(--sca-i, 0) * 700ms);
}

.sca-modal.is-playing .sca-hm-q {
    animation: sca-fade-out 250ms ease 3.6s both;
}

.sca-modal.is-playing .sca-hm-a {
    animation: sca-fade-in 250ms ease 3.8s both;
}

.sca-modal.is-playing .sca-hm-together {
    animation: sca-ai-burst 1.4s var(--sca-ease) 5.6s both;
}

.sca-modal.is-playing .sca-hm-lid {
    animation: sca-hm-lids 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hm-head {
    animation: sca-hm-head 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hm-face {
    animation: sca-hm-face 9s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.sca-modal.is-playing .sca-hm-mouth {
    animation: sca-hm-mouth 9s ease both;
}

.sca-modal.is-playing .sca-hm-talk {
    animation:
        sca-hm-talk-show 9s ease both,
        sca-hp-talk 260ms ease-in-out infinite alternate;
}

.sca-modal.is-playing .sca-hm-mic {
    animation: sca-hm-mic 9s ease-in-out both;
}

.sca-modal.is-playing .sca-hm-smile {
    animation: sca-hm-smile 9s ease both;
}

@keyframes sca-hm-lids {
    0%,
    12%,
    15%,
    70%,
    73%,
    100% {
        transform: scaleY(0);
    }

    13.5%,
    71.5% {
        transform: scaleY(1);
    }
}

@keyframes sca-hm-head {
    0%,
    18%,
    25%,
    33%,
    64%,
    100% {
        transform: none;
    }

    21%,
    29% {
        transform: translateY(2px) rotate(1.5deg);
    }

    38%,
    56% {
        transform: rotate(-5deg);
    }
}

@keyframes sca-hm-face {
    0%,
    34%,
    64%,
    100% {
        transform: none;
    }

    40%,
    56% {
        transform: translateX(-4px);
    }
}

@keyframes sca-hm-mouth {
    0%,
    35%,
    59%,
    75% {
        opacity: 1;
    }

    36%,
    58%,
    78%,
    100% {
        opacity: 0;
    }
}

@keyframes sca-hm-talk-show {
    0%,
    35%,
    59%,
    100% {
        opacity: 0;
    }

    36%,
    58% {
        opacity: 1;
    }
}

@keyframes sca-hm-mic {
    0%,
    36%,
    44%,
    52%,
    60%,
    100% {
        transform: none;
    }

    40%,
    48%,
    56% {
        transform: scale(1.25);
    }
}

@keyframes sca-hm-smile {
    0%,
    76% {
        opacity: 0;
    }

    80%,
    100% {
        opacity: 1;
    }
}

/* Reduced motion: no automatic or looping Hero motion; stories show their
   final frame (the shared modal rules remove delays) */
@media (prefers-reduced-motion: reduce) {
    .sca-hero-slide,
    .sca-hero-slide.is-leaving {
        transform: none !important;
    }

    .sca-hero-founder,
    .sca-hero-card,
    .sca-hero-robot *,
    .sca-hero-links *,
    .sca-hero-links__base,
    .sca-hero-links__flow,
    .sca-hero-caret,
    .sca-hero-ball,
    .sca-hero-bar,
    .sca-hero-cta-float,
    .sca-hero-cta::before,
    .sca-hl-breathe,
    .sca-hl-torso,
    .sca-hm-breathe,
    .sca-hm-torso {
        animation: none !important;
    }
}


/* ==========================================================================
   6. Responsive Breakpoints (Mobile-first, min-width)
   ========================================================================== */

/* Large phones: 480px and up */
@media (min-width: 480px) {
    .sca-topbar__tools,
    .sca-social {
        gap: 0.375rem;
    }

    .sca-lang {
        padding-inline: 0.75rem;
    }

    .sca-lang__chevron {
        display: block;
    }

    .sca-lang__text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .sca-topbar__inner {
        align-items: center;
        gap: 0.75rem;
        padding-block: 0.75rem;
    }

    .sca-topbar__contact {
        gap: 0.875rem;
    }

    .sca-topbar__contact-item {
        font-size: 0.875rem;
    }

    .sca-topbar__contact-icon {
        width: 2.375rem;
        height: 2.375rem;
    }

    .sca-topbar__tools {
        justify-content: center;
        gap: 0.625rem;
        width: 100%;
    }

    .sca-topbar__divider--tools,
    .sca-lang__globe,
    .sca-lang__sep {
        display: block;
    }

    .sca-social {
        gap: 0.5rem;
    }

    .sca-font-size__panel {
        left: 50%;
        translate: -50% 0;
        transform-origin: top center;
    }
}

/* Laptop: 1024px and up */
@media (min-width: 1024px) {
    .sca-topbar {
        --sca-topbar-control: 2.75rem;
    }

    .sca-topbar__inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem 1.5rem;
        min-height: 4.875rem;
        padding-block: 0.5rem;
    }

    .sca-topbar__contact {
        gap: 1rem;
    }

    .sca-topbar__contact-item {
        gap: 0.625rem;
        font-size: 1rem;
    }

    .sca-topbar__contact-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .sca-topbar__tools {
        gap: 0.75rem;
        width: auto;
        margin-left: auto;
        padding-top: 0;
        border-top: 0;
    }

    .sca-lang {
        gap: 0.5rem;
        padding-inline: 0.875rem;
        font-size: 0.9375rem;
    }
}

/* Desktop: 1280px and up */
@media (min-width: 1280px) {
    .sca-topbar {
        --sca-topbar-control: 2.875rem;
    }

    .sca-topbar__contact {
        gap: 1.25rem;
    }

    .sca-topbar__contact-item {
        font-size: 1.0625rem;
    }

    .sca-topbar__contact-icon {
        width: 2.875rem;
        height: 2.875rem;
    }

    .sca-topbar__divider {
        height: 1.75rem;
    }
}


/* ==========================================================================
   7. Main Navigation / Header — Layouts
   Drawer below 1200px, full horizontal navigation from 1200px.
   (Must match SCA_DESKTOP_NAV_QUERY in js/script.js.)
   ========================================================================== */

/* Tablet / mobile drawer ------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sca-main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: var(--sca-nav-panel-max, calc(100vh - 12rem));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid rgba(3, 43, 98, 0.08);
        background-color: var(--sca-color-white);
        box-shadow: 0 28px 48px rgba(3, 43, 98, 0.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.5rem);
        transition:
            opacity var(--sca-duration) var(--sca-ease),
            transform var(--sca-duration) var(--sca-ease),
            visibility 0s linear var(--sca-duration);
    }

    .sca-main-header.is-menu-open .sca-main-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .sca-nav-list {
        display: grid;
        gap: 0.25rem;
        width: min(100% - 2 * var(--sca-gutter), 40rem);
        margin-inline: auto;
        padding-block: 0.75rem 1.25rem;
    }

    .sca-nav-link {
        width: 100%;
        min-height: 3rem;
        padding: 0.625rem 0.875rem;
        border-radius: var(--sca-radius-sm);
        font-size: 1rem;
        text-align: left;
    }

    .sca-nav-link:hover,
    .sca-nav-trigger[aria-expanded="true"] {
        background-color: var(--sca-color-surface-soft);
    }

    .sca-nav-link.is-active {
        background-color: rgba(4, 207, 198, 0.1);
        box-shadow: inset 3px 0 0 var(--sca-color-cyan);
    }

    .sca-nav-trigger .sca-nav-chevron {
        margin-left: auto;
    }

    /* Accordion submenus */
    .sca-nav-dropdown {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--sca-duration) var(--sca-ease), visibility 0s linear var(--sca-duration);
    }

    .sca-nav-item.is-open > .sca-nav-dropdown {
        grid-template-rows: 1fr;
        visibility: visible;
        transition-delay: 0s;
    }

    .sca-nav-dropdown__panel {
        min-height: 0;
        overflow: hidden;
    }

    .sca-nav-dropdown__panel > :first-child {
        margin-top: 0.25rem;
    }

    .sca-nav-dropdown__list {
        margin-left: 0.875rem;
        padding: 0.25rem 0 0.5rem 0.75rem;
        border-left: 2px solid rgba(4, 207, 198, 0.3);
    }

    .sca-nav-dropdown__title {
        padding-left: 1.75rem;
    }

    .sca-nav-item--offer {
        padding: 0.375rem 0.875rem;
    }

    .sca-nav-item--login {
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(3, 43, 98, 0.08);
    }

    .sca-login-btn {
        width: 100%;
        height: 3rem;
    }

    .sca-login-btn:hover,
    .sca-login-btn[aria-expanded="true"] {
        transform: none;
    }

    .sca-login-btn .sca-nav-chevron {
        margin-left: auto;
    }

    .sca-nav-dropdown--login .sca-nav-dropdown__panel > :first-child {
        margin-top: 0.5rem;
    }

    .sca-login-guide {
        border-bottom: 0;
    }

    .sca-nav-dropdown--login .sca-nav-dropdown__list {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* Two-column course list where the drawer has room */
@media (min-width: 600px) and (max-width: 1199.98px) {
    .sca-nav-dropdown__list--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .sca-main-header {
        --sca-header-height: 4.5rem;
    }

    .sca-main-nav__logo img {
        height: 2.5rem;
    }
}

/* Desktop navigation ----------------------------------------------------- */
@media (min-width: 1200px) {
    .sca-main-header {
        --sca-header-height: 4.875rem;
    }

    .sca-mobile-menu-toggle,
    .sca-nav-backdrop {
        display: none;
    }

    .sca-main-nav__logo img {
        height: 2.375rem;
    }

    .sca-nav-list {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }

    .sca-nav-link {
        height: 2.75rem;
        padding-inline: 0.5rem;
        font-size: 0.9375rem;
    }

    /* Underline indicator — drawn with a transform, so no layout shift */
    .sca-nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.3125rem;
        width: 1.375rem;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--sca-color-cyan), var(--sca-color-teal));
        transform: translateX(-50%) scaleX(0);
        transition: transform var(--sca-duration) var(--sca-ease);
    }

    .sca-nav-link.is-active::after,
    .sca-nav-link:hover::after,
    .sca-nav-link:focus-visible::after,
    .sca-nav-trigger[aria-expanded="true"]::after {
        transform: translateX(-50%) scaleX(1);
    }

    .sca-nav-link--seminar::after {
        box-shadow: 0 0 10px rgba(4, 207, 198, 0.7);
    }

    .sca-nav-link--seminar:hover,
    .sca-nav-link--seminar:focus-visible {
        transform: scale(1.04);
    }

    .sca-nav-item--offer {
        margin-inline: 0.25rem;
    }

    .sca-special-offer {
        animation: sca-offer-float 4.5s ease-in-out infinite;
    }

    .sca-special-offer:hover,
    .sca-special-offer:focus-within {
        animation-play-state: paused;
    }

    .sca-nav-item--login {
        margin-left: 0.5rem;
    }

    /* Dropdown panels. The padding-top is an invisible hover bridge so the
       pointer can travel from the trigger into the panel without a gap. */
    .sca-nav-dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 20;
        width: max-content;
        min-width: 15rem;
        padding-top: calc((var(--sca-header-height) - 2.75rem) / 2 + 0.5rem);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -0.375rem);
        transition:
            opacity var(--sca-duration) var(--sca-ease),
            transform var(--sca-duration) var(--sca-ease),
            visibility 0s linear var(--sca-duration);
    }

    .sca-nav-item.is-open > .sca-nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }

    .sca-nav-dropdown__panel {
        position: relative;
        padding: 0.5rem;
        border: 1px solid rgba(3, 43, 98, 0.08);
        border-radius: var(--sca-radius-md);
        background-color: var(--sca-color-white);
        box-shadow: var(--sca-shadow-dropdown);
    }

    /* Small pointer toward the trigger */
    .sca-nav-dropdown__panel::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 12px;
        height: 12px;
        border-top: 1px solid rgba(3, 43, 98, 0.08);
        border-left: 1px solid rgba(3, 43, 98, 0.08);
        border-radius: 2px 0 0;
        background-color: var(--sca-color-white);
        transform: translateX(-50%) rotate(45deg);
    }

    .sca-nav-dropdown--courses {
        width: 31rem;
    }

    .sca-nav-dropdown__list--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sca-nav-dropdown--login {
        left: auto;
        right: 0;
        width: 21rem;
        transform: translateY(-0.375rem);
    }

    .sca-nav-item.is-open > .sca-nav-dropdown--login {
        transform: none;
    }

    .sca-nav-dropdown--login .sca-nav-dropdown__panel::before {
        left: auto;
        right: 2.5rem;
        transform: rotate(45deg);
    }
}

@media (min-width: 1280px) {
    .sca-main-nav__logo img {
        height: 2.625rem;
    }

    .sca-nav-list {
        gap: 0.25rem;
    }

    .sca-nav-link {
        padding-inline: 0.625rem;
    }
}

@media (min-width: 1440px) {
    .sca-main-nav__logo img {
        height: 2.875rem;
    }

    .sca-nav-list {
        gap: 0.5rem;
    }
}

/* Large reader font: tighter spacing so the row still fits below 1440px */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    html[data-sca-font-size="large"] .sca-main-nav__logo img {
        height: 2.125rem;
    }

    html[data-sca-font-size="large"] .sca-nav-list {
        gap: 0;
    }

    html[data-sca-font-size="large"] .sca-nav-link {
        padding-inline: 0.3125rem;
    }

    html[data-sca-font-size="large"] .sca-nav-item--offer {
        margin-inline: 0.125rem;
    }

    html[data-sca-font-size="large"] .sca-nav-item--login {
        margin-left: 0.25rem;
    }
}


/* ==========================================================================
   8. AI Journey — Layouts
   Mobile: stacked (robot, headline, CTA). Tablet: robot beside headline + CTA.
   Desktop: one row — Robot | Headline | CTA.
   ========================================================================== */

@media (min-width: 640px) {
    .sca-ai-strip {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "robot headline"
            "robot cta";
        justify-items: start;
        gap: 0.5rem 1.25rem;
        padding: 1rem 1.5rem;
        text-align: left;
    }

    .sca-ai-robot {
        width: 5rem;
        height: 5rem;
    }

    .sca-ai-info-slider {
        border-radius: var(--sca-radius-pill);
        padding-inline: 0.5rem 1rem;
    }

    .sca-ai-info-slider__dots {
        display: inline-flex;
    }

    .sca-ai-paths__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sca-modal--ai .sca-modal__dialog {
        gap: 1rem;
        padding: 1.5rem 1.5rem 0;
    }

    .sca-ai-controls {
        margin-inline: -1.5rem;
        padding: 0.875rem 1.5rem 1.25rem;
    }

    .sca-ai-dialog__title {
        font-size: 1.5rem;
    }

    .sca-ai-caption__text {
        min-height: 1.5em;
        font-size: 1.0625rem;
    }
}

@media (min-width: 960px) {
    .sca-ai-strip {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "robot headline cta";
        gap: 1.5rem;
        padding: 0.375rem 0.625rem 0.375rem 1rem;
        border-radius: var(--sca-radius-pill);
    }

    .sca-ai-headline {
        max-width: none;
        font-size: clamp(1.125rem, 0.55rem + 0.95vw, 1.5rem);
    }
}

@media (min-width: 1280px) {
    .sca-ai-strip {
        padding-inline: 1.75rem 0.75rem;
    }

    .sca-ai-robot {
        width: 5.25rem;
        height: 5.25rem;
    }
}


/* ==========================================================================
   9. Hero — Layouts (Phase 4)
   Mobile: one column (copy, artwork, benefits). Tablet: two columns.
   Desktop: copy left, artwork right, benefits overlapping the slide bottom.
   ========================================================================== */

/* Mobile: headline flows naturally (no forced line breaks) */
@media (max-width: 767.98px) {
    .sca-hero-title__line {
        display: inline;
    }

    .sca-hero-title__line--accent {
        display: inline-block;
    }

    /* Artwork sits at the bottom of the (shared-height) slide */
    .sca-hero-slide {
        display: grid;
    }

    .sca-hero-slide__inner {
        grid-template-rows: auto 1fr;
    }

    /* Smaller arch kept behind the artwork, away from the text */
    .sca-hero-bg__arch {
        top: auto;
        right: -9rem;
        bottom: -7rem;
        width: 24rem;
        height: 24rem;
        border-width: 2rem;
        box-shadow: inset 0 0 0 0.75rem rgba(255, 255, 255, 0.85), 0 20px 60px rgba(4, 207, 198, 0.18);
    }

    .sca-hero-bg--two .sca-hero-bg__arch {
        top: auto;
        right: -10rem;
        bottom: -8rem;
    }

    /* Slide 1: simplified field behind the photo only (text stays on light) */
    .sca-hero-bg--one .sca-hero-bg__panes {
        inset: auto 0 0 0;
        width: 100%;
        height: 48%;
        background:
            radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px) 0 0 / 16px 16px,
            linear-gradient(160deg, #ddfbff 0%, #8eecf5 30%, #21d4e8 55%, #0aa9b8 75%, #087ea4 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
    }

    .sca-hero-bg--one .sca-hero-bg__arch {
        top: auto;
        right: -9rem;
        bottom: -10rem;
        width: 26rem;
        height: 26rem;
    }

    .sca-hero-bg--one .sca-hero-bg__glow {
        top: auto;
        right: 5%;
        bottom: 2%;
        width: 90%;
        height: 42%;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .sca-hero-bg--one .sca-hero-bg__arch {
        top: -10rem;
        right: -12rem;
        width: 36rem;
        height: 36rem;
    }

    .sca-hero-bg__arch {
        top: -10rem;
        right: -14rem;
        width: 34rem;
        height: 34rem;
        border-width: 2.5rem;
    }
}

@media (min-width: 480px) {
    .sca-hero-founder {
        gap: 0.625rem;
        padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    }

    .sca-hero-founder__avatar {
        width: 2.25rem;
        height: 2.25rem;
    }

    .sca-hero-founder__name {
        font-size: 0.9375rem;
    }

    .sca-hero-founder__role {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) {
    .sca-hero-title__line {
        display: block;
    }

    .sca-hero-title__line--accent {
        width: fit-content;
    }

    .sca-hero-slide__inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        align-items: start;
        gap: 1.5rem;
        padding-block: 1.5rem 0.75rem;
    }

    .sca-hero-team,
    .sca-hero-tech-scene {
        align-self: start;
    }

    .sca-hero-benefit {
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.75rem;
        font-size: 1rem;
        text-align: left;
    }

    .sca-hero-benefits > li + li {
        position: relative;
    }

    .sca-hero-benefits > li + li::before {
        content: "";
        position: absolute;
        top: 22%;
        bottom: 22%;
        left: -0.1875rem;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(3, 43, 98, 0.15), transparent);
    }

    .sca-hero-benefit__icon {
        width: 3.25rem;
        height: 3.25rem;
    }
}

/* Compact desktop Hero: copy starts top-left, artwork top-right; the bottom
   6.25rem of the slide is reserved for the controls (under the copy) and the
   benefit bar, which overlaps only the photo's lower 2.5rem. Height follows
   the content (no fixed height), so larger text never clips. */
@media (min-width: 1024px) {
    .sca-hero {
        padding-bottom: 0.75rem;
    }

    /* Slides fill the shared height, so the team sits on the benefit area */
    .sca-hero-slide {
        display: grid;
    }

    .sca-hero-slide__inner {
        gap: 2rem;
        padding-block: 1rem 6.25rem;
    }

    .sca-hero-copy {
        gap: 0.75rem;
        padding-top: 0.5rem;
    }

    /* Raised slightly; its lower edge still tucks under the benefit bar */
    .sca-hero-team {
        align-self: end;
        max-width: 40rem;
        margin-bottom: -6.25rem;
        transform: translateY(-20px);
    }

    .sca-hero-tech-scene {
        max-width: 30rem;
    }

    .sca-hero-founder {
        top: 74%;
    }

    /* Controls float above the benefits, under the copy */
    .sca-hero-controls-wrap {
        grid-row: 1;
        grid-column: 1;
        align-self: end;
        margin-bottom: 3.25rem;
    }

    .sca-hero-controls-row {
        justify-content: flex-start;
        padding: 0;
    }

    .sca-hero-benefits-wrap {
        margin-top: -2.5rem;
    }

    .sca-hero-benefits {
        padding: 0.5rem;
        border-radius: 1.5rem;
    }

    .sca-hero-benefit {
        justify-content: center;
        gap: 1rem;
        padding-block: 0.5rem;
        font-size: 1.0625rem;
    }

    .sca-hero-benefit__icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (min-width: 1280px) {
    .sca-hero-founder {
        top: 78%;
    }

    .sca-hero-benefit {
        font-size: 1.125rem;
    }

    .sca-hero-benefit__icon {
        width: 3.75rem;
        height: 3.75rem;
    }
}

/* --------------------------------------------------------------------------
   Phase 4.1 — targeted Hero corrections (team photo, desktop AI scene and
   the Slide 2 background). Scoped to one slide each; copy, controls and
   benefits keep their existing layout.
   -------------------------------------------------------------------------- */

/* Mobile Slide 1: the team runs edge to edge and ends flush with the slide,
   i.e. with the coloured field, right above the controls. The PNG's right
   edge is the young man's arm, so it now meets the screen edge. */
@media (max-width: 767.98px) {
    .sca-hero-slide-one .sca-hero-slide__inner {
        padding-bottom: 0;
    }

    .sca-hero-slide-one .sca-hero-team {
        width: auto;
        max-width: none;
        margin-inline: calc(-1 * var(--sca-gutter));
    }

    /* Field: light behind the copy, a short fade just above the heads, solid
       behind the whole photo (photo height = width / 1.5) */
    .sca-hero-bg--one .sca-hero-bg__panes {
        height: calc(100vw / 1.5 + 3rem);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4.5rem);
        mask-image: linear-gradient(180deg, transparent 0, #000 4.5rem);
    }

    .sca-hero-bg--one .sca-hero-bg__glow {
        bottom: 0;
        height: calc(100vw / 1.5);
    }
}

/* Slide 2 (tablet and up): bright cyan/teal field with soft concentric
   curves and dots behind the AI scene. Replaces the dark conic ring that
   showed as a hole at the top right. Mobile keeps its accepted background. */
@media (min-width: 768px) {
    .sca-hero-bg--two .sca-hero-bg__panes {
        width: 62%;
        background:
            radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1.6px) 0 0 / 20px 20px,
            repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 120px, rgba(255, 255, 255, 0.16) 120px 122px),
            linear-gradient(112deg, rgba(232, 250, 255, 0) 0%, #e8faff 24%, #bff0f8 44%, #7fe0ef 64%, #35c6e0 82%, #0e9fc9 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    }

    .sca-hero-bg--two .sca-hero-bg__arch {
        top: 50%;
        right: -14rem;
        width: 50rem;
        height: 50rem;
        border: 0;
        background: radial-gradient(circle closest-side,
            transparent 0 56%,
            rgba(255, 255, 255, 0.5) 56.6% 58.2%,
            transparent 58.8% 68%,
            rgba(221, 251, 255, 0.42) 68.6% 73.4%,
            transparent 74% 84%,
            rgba(255, 255, 255, 0.3) 84.6% 85.6%,
            transparent 86.2%);
        box-shadow: none;
        opacity: 1;
        translate: 0 -50%;
    }

    .sca-hero-bg--two .sca-hero-bg__glow {
        top: 4%;
        right: 4%;
        bottom: auto;
        left: auto;
        width: 50%;
        height: 92%;
        background: radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.7) 0%, rgba(221, 251, 255, 0.42) 38%, rgba(95, 243, 255, 0) 72%);
    }
}

@media (min-width: 1024px) {
    /* Slide 1: the team stands on the benefit bar (the bar overlaps the
       slide's last 2.5rem; the PNG's cut lower edge tucks 0.5rem under it)
       and rises to 1rem below the slide top (0.93 = share of the PNG below
       the tallest head; its top 7% is transparent). Right-aligned and capped
       so the whole 3:2 box stays 1.5rem clear of the copy's real text end
       (--sca-hero-copy-end, measured by scaInitHeroArtFit; without JS the
       old reserve: headline ≤ 39rem or 54% of the row). Absolutely placed,
       so the shared slide height is unchanged. */
    .sca-hero-slide-one .sca-hero-slide__inner {
        position: relative;
        container-type: inline-size;
    }

    .sca-hero-slide-one .sca-hero-team {
        position: absolute;
        right: 0;
        bottom: 2rem;
        width: auto;
        max-width: none;
        height: min(
            calc((100% - 3rem) / 0.93),
            calc((100cqi - var(--sca-hero-copy-end, min(0.54 * (100cqi - 2rem), 39rem)) - 1.5rem) / 1.5)
        );
        aspect-ratio: 3 / 2;
        margin: 0;
        transform: none;
    }

    .sca-hero-slide-one .sca-hero-team__img {
        height: 100%;
        object-position: center bottom;
    }

    /* Slide 2: the AI scene fills the artwork column (plus the gap, which
       the drawing's empty left margin absorbs) from the slide top to just
       above the benefit bar; the SVG scales as one piece (meet). */
    .sca-hero-slide-two .sca-hero-tech-scene {
        align-self: stretch;
        max-width: none;
    }

    /* Holds the scene's former in-flow size, so the slide height is unchanged */
    .sca-hero-slide-two .sca-hero-tech-scene::before {
        content: "";
        display: block;
        width: min(100%, 30rem);
        aspect-ratio: 580 / 420;
    }

    .sca-hero-slide-two .sca-hero-tech-scene__svg {
        position: absolute;
        top: -1rem;
        left: -2rem;
        width: calc(100% + 2rem);
        max-width: none;
        height: calc(100% + 6.75rem);
    }
}



/* ========================================
   WEB DESIGN & DEVELOPMENT SECTION
   ======================================== */

/* --------------------------------------------------------------------------
   10. Web Design & Development — Phase 5
   Header, four action cards, sales copy + device showcase, process bar.
   All type is rem-based, so the existing A/A/A control scales the section.
   -------------------------------------------------------------------------- */

.sca-web-services {
    --sca-web-teal: #0a7f99;
    --sca-web-blue: #0b6fd6;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2rem, 1.25rem + 2vw, 3rem);
    background: linear-gradient(180deg, #ffffff 0%, #f3f9fd 45%, #e8f4fc 100%);
}

/* Right side: bright glass/office atmosphere with a cyan glow */
.sca-web-services::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 72%;
    background:
        radial-gradient(ellipse 60% 50% at 66% 60%, rgba(95, 243, 255, 0.36), rgba(95, 243, 255, 0) 70%),
        radial-gradient(ellipse 45% 40% at 100% 18%, rgba(47, 139, 255, 0.2), rgba(47, 139, 255, 0) 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 96px, rgba(255, 255, 255, 0.7) 96px 99px),
        linear-gradient(180deg, rgba(200, 230, 248, 0.65), rgba(232, 246, 253, 0.25));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}

/* Soft light streaks and a dotted technology texture (right side only) */
.sca-web-services::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(112deg, transparent 0 64%, rgba(95, 243, 255, 0.4) 64.15% 64.4%, transparent 64.6% 76%, rgba(255, 255, 255, 0.85) 76.15% 76.5%, transparent 76.7% 86%, rgba(95, 243, 255, 0.3) 86.15% 86.35%, transparent 86.5%),
        radial-gradient(circle, rgba(11, 147, 196, 0.2) 1px, transparent 1.6px) 0 0 / 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0 52%, #000 88%);
    mask-image: linear-gradient(90deg, transparent 0 52%, #000 88%);
}

.sca-web-services :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

/* Header ----------------------------------------------------------------- */

.sca-web-services-header {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
}

.sca-web-services-brand {
    display: grid;
    justify-self: stretch;
    gap: 0.375rem;
    color: #1d3557;
    font-family: var(--sca-font-en);
    text-transform: uppercase;
}

.sca-web-services-brand__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.3em;
}

.sca-web-services-brand__name::before,
.sca-web-services-brand__name::after {
    content: "";
    flex: 0 1 4.5rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(3, 43, 98, 0), rgba(3, 43, 98, 0.45));
}

.sca-web-services-brand__name::after {
    background: linear-gradient(90deg, rgba(3, 43, 98, 0.45), rgba(3, 43, 98, 0));
}

.sca-web-services-brand__sub {
    color: #33507a;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.36em;
}

.sca-web-services-title {
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.75rem, 0.95rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.sca-web-services-title__accent {
    color: var(--sca-web-teal);
}

/* English reads "Professional Websites | for Your Business": the teal stays
   on "Professional Websites", as in Bengali */
html[lang="en"] .sca-web-services-title__lead {
    color: var(--sca-web-teal);
}

html[lang="en"] .sca-web-services-title__accent {
    color: var(--sca-color-navy-deep);
}

.sca-web-services-subtitle {
    max-width: 48rem;
    color: #13294b;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    font-weight: 500;
    line-height: 1.55;
}

/* Action cards ----------------------------------------------------------- */

.sca-web-services-actions-nav {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.sca-web-services-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    list-style: none;
}

.sca-web-services-actions > li {
    display: flex;
    min-width: 0;
}

.sca-web-action-card {
    --sca-web-float: -5px;

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 5.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(11, 147, 196, 0.16);
    border-radius: 1.125rem;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(3, 43, 98, 0.08), 0 2px 6px rgba(3, 43, 98, 0.05);
    color: var(--sca-color-navy-deep);
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    animation: sca-web-float 5s ease-in-out infinite alternate;
    transition: scale 260ms var(--sca-ease), box-shadow 260ms var(--sca-ease);
}

/* Staggered start: the four cards move as a gentle wave */
.sca-web-services-actions > li:nth-child(2) .sca-web-action-card {
    animation-delay: 0.4s;
}

.sca-web-services-actions > li:nth-child(3) .sca-web-action-card {
    animation-delay: 0.8s;
}

.sca-web-services-actions > li:nth-child(4) .sca-web-action-card {
    animation-delay: 1.2s;
}

@keyframes sca-web-float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(var(--sca-web-float));
    }
}

.sca-web-action-card--featured {
    border-color: rgba(95, 243, 255, 0.55);
    background: linear-gradient(135deg, #0a3d91 0%, #0b5fc8 48%, #1aa8e6 100%);
    box-shadow: 0 14px 32px rgba(11, 95, 200, 0.35), 0 0 0 3px rgba(95, 243, 255, 0.18), 0 0 26px rgba(26, 168, 230, 0.35);
    color: var(--sca-color-white);
}

.sca-web-action-card__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
}

.sca-web-action-card__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.sca-web-action-card__icon--blue,
.sca-web-action-card__icon--orange {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2f2fb 72%);
    box-shadow: inset 0 0 0 1px rgba(11, 147, 196, 0.12), 0 6px 14px rgba(11, 111, 214, 0.12);
    color: var(--sca-web-blue);
}

.sca-web-action-card__icon--orange {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff0dd 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 31, 0.15), 0 6px 14px rgba(255, 138, 31, 0.16);
    color: #ff8a1f;
}

/* WordPress + Shopify marks side by side */
.sca-web-action-card__icon--brands {
    display: flex;
    gap: 0.125rem;
    width: auto;
    border-radius: 0;
}

.sca-web-action-card__icon--brands svg {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 3px 6px rgba(2, 29, 68, 0.3));
}

.sca-web-logo-wp__w {
    fill: var(--sca-color-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
}

.sca-web-logo-shopify__s {
    fill: var(--sca-color-white);
    font-family: var(--sca-font-en);
    font-size: 19px;
    font-weight: 700;
}

.sca-web-action-card__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.sca-web-action-card__arrow {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: var(--sca-web-blue);
    transition: background-color 260ms var(--sca-ease), box-shadow 260ms var(--sca-ease);
}

.sca-web-action-card--featured .sca-web-action-card__arrow {
    color: var(--sca-color-white);
}

.sca-web-action-card__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: translate 260ms var(--sca-ease);
}

/* Pointer devices: the hovered card pauses, lifts slightly and glows.
   `scale` composes with the floating `transform`, so nothing shifts. */
@media (hover: hover) and (pointer: fine) {
    .sca-web-action-card:hover {
        animation-play-state: paused;
        scale: 1.025;
        box-shadow: 0 18px 36px rgba(3, 43, 98, 0.14), 0 0 0 3px rgba(95, 243, 255, 0.25);
    }

    .sca-web-action-card--featured:hover {
        box-shadow: 0 18px 40px rgba(11, 95, 200, 0.45), 0 0 0 4px rgba(95, 243, 255, 0.3), 0 0 34px rgba(26, 168, 230, 0.5);
    }

    .sca-web-action-card:hover .sca-web-action-card__arrow {
        background-color: rgba(11, 111, 214, 0.1);
        box-shadow: 0 0 0 4px rgba(95, 243, 255, 0.25);
    }

    .sca-web-action-card--featured:hover .sca-web-action-card__arrow {
        background-color: rgba(255, 255, 255, 0.16);
    }

    .sca-web-action-card:hover .sca-web-action-card__arrow svg {
        translate: 2px 0;
    }
}

.sca-web-action-card:focus-visible {
    animation-play-state: paused;
}

/* Sales copy ------------------------------------------------------------- */

.sca-web-services-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    align-items: center;
    margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
}

.sca-web-services-copy {
    container-type: inline-size;
    display: grid;
    justify-items: start;
    gap: 1rem;
}

.sca-web-services-eyebrow {
    max-width: 100%;
    padding: 0.375rem 1rem;
    border: 1px solid rgba(0, 107, 120, 0.45);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(4, 207, 198, 0.08);
    color: var(--sca-color-teal-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.sca-web-services-heading {
    position: relative;
    isolation: isolate;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.3;
}

/* Sized from the copy column so the longest line keeps to one line */
@supports (font-size: 1cqi) {
    .sca-web-services-heading {
        font-size: clamp(1.5rem, calc(8.4cqi + 0.1rem), 3rem);
    }
}

.sca-web-services-heading__line {
    display: block;
}

.sca-web-services-heading__line--teal {
    color: var(--sca-web-teal);
}

/* Golden brush under the start of the last line */
.sca-web-services-heading__line--accent {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.sca-web-services-heading__line--accent::after {
    content: "";
    position: absolute;
    left: -0.1em;
    right: 62%;
    bottom: -0.12em;
    z-index: -1;
    height: 0.22em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C70 7 162 3 296 6c-58 5-146 9-230 14-30 2-52 2-62-4z' fill='%23f5b82e'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.sca-web-services-text {
    max-width: 33rem;
    color: #24364f;
    font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
    line-height: 1.7;
}

.sca-web-services-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.25rem;
    list-style: none;
}

.sca-web-benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem 0.375rem 0.5rem;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: 0.75rem;
    background-color: var(--sca-color-white);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.07);
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.sca-web-benefit__check {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.4375rem;
    background: linear-gradient(135deg, #0aa9b8, #006b78);
    color: var(--sca-color-white);
}

.sca-web-benefit__check svg {
    width: 1rem;
    height: 1rem;
}

.sca-web-services-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.sca-web-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--sca-radius-pill);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: transform 240ms var(--sca-ease), box-shadow 240ms var(--sca-ease);
}

.sca-web-cta svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.sca-web-cta--primary {
    background: linear-gradient(135deg, #0b3e8a 0%, #0a7f99 55%, #0fb5c9 100%);
    box-shadow: 0 10px 24px rgba(10, 127, 153, 0.35), 0 0 0 3px rgba(95, 243, 255, 0.18);
    color: var(--sca-color-white);
}

.sca-web-cta--secondary {
    border: 1.5px solid rgba(11, 111, 214, 0.55);
    background-color: var(--sca-color-white);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.08);
    color: var(--sca-color-navy-deep);
}

@media (hover: hover) and (pointer: fine) {
    .sca-web-cta:hover {
        transform: translateY(-2px);
    }

    .sca-web-cta--primary:hover {
        box-shadow: 0 14px 30px rgba(10, 127, 153, 0.45), 0 0 0 4px rgba(95, 243, 255, 0.28);
    }

    .sca-web-cta--secondary:hover {
        box-shadow: 0 10px 22px rgba(3, 43, 98, 0.14);
    }
}

/* Device showcase -------------------------------------------------------- */

/* One image cropped 1:1 from the design master (its edges carry a soft alpha
   fade, so it blends into the section). Never cropped or stretched; the
   whole group drifts very slightly as one unit. */
.sca-web-services-showcase {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

/* Cyan/blue light behind the image, matching its own backdrop */
.sca-web-services-showcase::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at 52% 52%, rgba(120, 200, 255, 0.55) 0 38%, rgba(95, 243, 255, 0.24) 58%, rgba(95, 243, 255, 0) 74%);
    pointer-events: none;
}

.sca-web-services-device-picture {
    display: block;
    animation: sca-web-drift 7s ease-in-out infinite alternate;
}

.sca-web-services-device-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

@keyframes sca-web-drift {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(var(--sca-web-drift, -2.5px));
    }
}
/* Process bar ------------------------------------------------------------ */

.sca-web-services-process {
    margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
    padding: 1.25rem;
    border: 1px solid rgba(11, 147, 196, 0.14);
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(3, 43, 98, 0.08), 0 2px 6px rgba(3, 43, 98, 0.04);
}

.sca-web-process {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    list-style: none;
}

.sca-web-step {
    --sca-web-step-a: #6fb6ff;
    --sca-web-step-b: #1f5fe0;
    --sca-web-step-glow: rgba(31, 95, 224, 0.35);

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.sca-web-step--green {
    --sca-web-step-a: #5fe3b0;
    --sca-web-step-b: #0a9a6a;
    --sca-web-step-glow: rgba(10, 154, 106, 0.35);
}

.sca-web-step--purple {
    --sca-web-step-a: #bf9cff;
    --sca-web-step-b: #6a3cff;
    --sca-web-step-glow: rgba(106, 60, 255, 0.35);
}

.sca-web-step--orange {
    --sca-web-step-a: #ffc56f;
    --sca-web-step-b: #ff7a1a;
    --sca-web-step-glow: rgba(255, 122, 26, 0.35);
}

.sca-web-step__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, var(--sca-web-step-a) 0%, var(--sca-web-step-b) 72%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 8px 18px var(--sca-web-step-glow);
    color: var(--sca-color-white);
}

.sca-web-step__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.sca-web-step__label {
    min-width: 0;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-web-services-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--sca-color-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.sca-web-services-note::before,
.sca-web-services-note::after {
    content: "";
    flex: 1 1 2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(3, 43, 98, 0), rgba(3, 43, 98, 0.18));
}

.sca-web-services-note::after {
    background: linear-gradient(90deg, rgba(3, 43, 98, 0.18), rgba(3, 43, 98, 0));
}

/* Layouts ---------------------------------------------------------------- */

/* Phones: gentler float and tighter brand lettering */
@media (max-width: 767.98px) {
    .sca-web-action-card {
        --sca-web-float: -2.5px;

        min-height: 4.5rem;
    }

    .sca-web-services-brand__name {
        letter-spacing: 0.2em;
    }

    .sca-web-services-brand__sub {
        letter-spacing: 0.26em;
    }

    .sca-web-services-showcase {
        --sca-web-drift: -1.5px;

        max-width: 40rem;
    }
}

@media (max-width: 479.98px) {
    .sca-web-services-brand__name::before,
    .sca-web-services-brand__name::after,
    .sca-web-services-note::before,
    .sca-web-services-note::after {
        display: none;
    }

    .sca-web-services-ctas,
    .sca-web-cta {
        width: 100%;
    }
}

/* Two action cards per row once labels have room */
@media (min-width: 480px) {
    .sca-web-services-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Process: 2 × 2 (no connecting arrows while wrapped) */
@media (min-width: 600px) {
    .sca-web-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .sca-web-services-process {
        padding: 1.25rem 1.5rem;
    }
}

/* Desktop: copy left, devices right */
@media (min-width: 1024px) {
    .sca-web-services-content {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 2.5rem;
    }

    .sca-web-services-showcase {
        max-width: none;
    }
}

/* Wide screens: the four action cards and the four steps each share a row */
@media (min-width: 1200px) {
    .sca-web-services-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .sca-web-process {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.75rem;
    }

    .sca-web-step {
        justify-content: center;
    }

    /* Arrow between neighbouring steps (single row only) */
    .sca-web-step + .sca-web-step::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -2.1rem;
        width: 1.375rem;
        height: 1.375rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        translate: 0 -50%;
    }

    .sca-web-services-process {
        padding: 1.25rem 2rem 1rem;
        border-radius: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sca-web-action-card,
    .sca-web-services-device-picture {
        animation: none;
    }

    .sca-web-action-card,
    .sca-web-action-card__arrow,
    .sca-web-action-card__arrow svg,
    .sca-web-cta {
        transition: none;
    }
}

/* ========================================
   WEBSITE SHOWCASE PAGE
   ======================================== */

/* --------------------------------------------------------------------------
   11. Website Showcase page (websites.html) — Phase 5.1
   Breadcrumb, header, WordPress / Shopify platform cards with device images
   cropped 1:1 from the page design master, three-step process.
   Type is rem-based, so the existing A/A/A control scales the page.
   -------------------------------------------------------------------------- */

.sca-sites-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(1.25rem, 0.75rem + 1.5vw, 2rem) clamp(2rem, 1.25rem + 2vw, 3rem);
    background: linear-gradient(180deg, #ffffff 0%, #f1f8fd 40%, #e6f3fc 100%);
}

/* Glass/office atmosphere and cyan light on both sides, as in the design */
.sca-sites-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 40% 45% at 100% 30%, rgba(47, 139, 255, 0.22), rgba(47, 139, 255, 0) 70%),
        radial-gradient(ellipse 35% 40% at 0% 60%, rgba(95, 243, 255, 0.22), rgba(95, 243, 255, 0) 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 96px, rgba(255, 255, 255, 0.6) 96px 99px),
        linear-gradient(180deg, rgba(200, 230, 248, 0.5), rgba(232, 246, 253, 0.2));
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.35) 65%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.35) 65%, #000 100%);
}

.sca-sites-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(112deg, transparent 0 70%, rgba(95, 243, 255, 0.35) 70.15% 70.4%, transparent 70.6% 82%, rgba(255, 255, 255, 0.8) 82.15% 82.5%, transparent 82.7%),
        radial-gradient(circle, rgba(11, 147, 196, 0.18) 1px, transparent 1.6px) 0 0 / 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0 60%, #000 92%);
    mask-image: linear-gradient(90deg, transparent 0 60%, #000 92%);
}

.sca-sites-page :focus-visible {
    outline: 3px solid var(--sca-color-teal);
    outline-offset: 3px;
}

.sca-sites-page__inner {
    position: relative;
}

/* Breadcrumb ------------------------------------------------------------- */

.sca-sites-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    color: #33507a;
    font-size: 0.9375rem;
    font-weight: 500;
}

.sca-sites-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sca-sites-breadcrumb li + li::before {
    content: "/";
    color: #8aa0b8;
}

.sca-sites-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    color: inherit;
    text-decoration: none;
}

.sca-sites-breadcrumb a svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--sca-color-navy);
}

.sca-sites-breadcrumb [aria-current="page"] {
    color: var(--sca-color-teal);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .sca-sites-breadcrumb a:hover {
        color: var(--sca-color-teal);
    }
}

/* Header ----------------------------------------------------------------- */

.sca-sites-header {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    text-align: center;
}

.sca-sites-title {
    margin-top: 0.25rem;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.75rem, 0.9rem + 3.2vw, 3.75rem);
    font-weight: 700;
    line-height: 1.22;
    text-wrap: balance;
}

.sca-sites-title__accent {
    color: #0a7f99;
}

.sca-sites-lead {
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.0625rem, 0.92rem + 0.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.45;
}

.sca-sites-sub {
    color: #24364f;
    font-size: clamp(0.9375rem, 0.86rem + 0.45vw, 1.3125rem);
    line-height: 1.55;
}

/* Platform cards --------------------------------------------------------- */

.sca-sites-platforms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.sca-platform-card {
    --sca-platform-ink: #0b2f6b;
    --sca-platform-accent: #1452b8;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(236, 246, 255, 0.78) 100%);
    box-shadow: 0 24px 60px rgba(3, 43, 98, 0.12), 0 2px 8px rgba(3, 43, 98, 0.05), inset 0 1px 0 #ffffff;
    text-align: center;
    scroll-margin-top: 1rem;
}

.sca-platform-card--shopify {
    --sca-platform-ink: #0d3b30;
    --sca-platform-accent: #0a8a5f;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(232, 250, 244, 0.78) 100%);
}

.sca-platform-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    gap: 0.75rem 1rem;
    text-align: left;
}

.sca-platform-card__logo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: clamp(3.5rem, 2.8rem + 2.2vw, 5.25rem);
    aspect-ratio: 1;
}

.sca-platform-card__logo svg {
    width: 100%;
    height: 100%;
}

.sca-platform-card__logo--wordpress {
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #6cc2ff 0%, #1f6fe0 45%, #0b3e9a 100%);
    box-shadow: 0 10px 24px rgba(11, 62, 154, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.75), 0 0 26px rgba(95, 243, 255, 0.4);
}

.sca-platform-card__logo--wordpress svg {
    width: 84%;
    height: 84%;
}

.sca-platform-card__logo--shopify svg {
    filter: drop-shadow(0 8px 12px rgba(46, 125, 50, 0.3));
}

.sca-platform-card__logo-w {
    fill: var(--sca-color-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 33px;
    font-weight: 700;
}

.sca-platform-card__logo-s {
    fill: var(--sca-color-white);
    font-family: var(--sca-font-en);
    font-size: 19px;
    font-weight: 700;
}

.sca-platform-card__heading {
    flex: 1 1 12rem;
    min-width: 0;
}

.sca-platform-card__title {
    color: var(--sca-platform-ink);
    font-family: var(--sca-font-en);
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.sca-platform-card__tagline {
    margin-top: 0.25rem;
    color: var(--sca-platform-ink);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.4;
}

.sca-platform-card--shopify .sca-platform-card__tagline {
    color: #0b6b55;
}

.sca-platform-card__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(11, 147, 196, 0.25);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.08);
    color: var(--sca-platform-accent);
    font-size: 0.9375rem;
    font-weight: 700;
}

.sca-platform-card__badge svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Device image: cropped 1:1 from the design master; never cropped/stretched.
   Both share a 2:1 box (contain), so the two cards stay level. */
.sca-platform-device-visual {
    display: block;
    width: 100%;
    max-width: 46rem;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    object-position: center;
}

/* Takes up any spare height, keeping pills and CTAs aligned across cards */
.sca-platform-card__text {
    flex-grow: 1;
    max-width: 36rem;
    color: #1d2f4a;
    font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
    font-weight: 500;
    line-height: 1.6;
}

.sca-platform-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.625rem;
    list-style: none;
}

.sca-platform-categories li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 1rem;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: 0.875rem;
    background-color: var(--sca-color-white);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.07);
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    font-weight: 600;
}

.sca-platform-categories svg {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--sca-platform-accent);
}

/* Platform CTAs: gentle float (paused on hover), brand gradients */
.sca-platform-cta {
    --sca-platform-float: -5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: min(100%, 30rem);
    min-height: 3.5rem;
    margin-top: 0.25rem;
    padding: 0.8rem 1.75rem;
    border-radius: var(--sca-radius-pill);
    color: var(--sca-color-white);
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    animation: sca-platform-float 5s ease-in-out infinite alternate;
    transition: scale 260ms var(--sca-ease), box-shadow 260ms var(--sca-ease);
}

.sca-platform-cta svg {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
}

.sca-platform-cta--wordpress {
    background: linear-gradient(90deg, #0b3fb8 0%, #1f6fe0 50%, #2f8bff 100%);
    box-shadow: 0 12px 28px rgba(31, 111, 224, 0.4), 0 0 0 3px rgba(95, 200, 255, 0.25), 0 0 26px rgba(47, 139, 255, 0.35);
}

.sca-platform-cta--shopify {
    background: linear-gradient(90deg, #07644e 0%, #0a9a72 50%, #14b8a6 100%);
    box-shadow: 0 12px 28px rgba(10, 154, 114, 0.38), 0 0 0 3px rgba(95, 243, 200, 0.25), 0 0 26px rgba(20, 184, 166, 0.35);
    animation-delay: 0.7s;
}

@keyframes sca-platform-float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(var(--sca-platform-float));
    }
}

@media (hover: hover) and (pointer: fine) {
    .sca-platform-cta:hover {
        animation-play-state: paused;
        scale: 1.02;
    }

    .sca-platform-cta--wordpress:hover {
        box-shadow: 0 16px 34px rgba(31, 111, 224, 0.5), 0 0 0 4px rgba(95, 200, 255, 0.35), 0 0 36px rgba(47, 139, 255, 0.5);
    }

    .sca-platform-cta--shopify:hover {
        box-shadow: 0 16px 34px rgba(10, 154, 114, 0.48), 0 0 0 4px rgba(95, 243, 200, 0.35), 0 0 36px rgba(20, 184, 166, 0.5);
    }
}

.sca-platform-cta:focus-visible {
    animation-play-state: paused;
}

.sca-platform-card__note {
    margin-top: -0.25rem;
    color: var(--sca-color-muted);
    font-size: 0.8125rem;
}

/* Process ---------------------------------------------------------------- */

.sca-sites-process {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    padding: 1.25rem;
    border: 1px solid rgba(11, 147, 196, 0.14);
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(3, 43, 98, 0.08), 0 2px 6px rgba(3, 43, 98, 0.04);
}

.sca-sites-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    list-style: none;
}

.sca-sites-step {
    --sca-sites-step-a: #6fb6ff;
    --sca-sites-step-b: #1f5fe0;
    --sca-sites-step-glow: rgba(31, 95, 224, 0.35);

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.sca-sites-step--indigo {
    --sca-sites-step-a: #7cc0ff;
    --sca-sites-step-b: #1452b8;
    --sca-sites-step-glow: rgba(20, 82, 184, 0.35);
}

.sca-sites-step--teal {
    --sca-sites-step-a: #5fe3c4;
    --sca-sites-step-b: #0a8a74;
    --sca-sites-step-glow: rgba(10, 138, 116, 0.35);
}

.sca-sites-step__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, var(--sca-sites-step-a) 0%, var(--sca-sites-step-b) 72%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 8px 18px var(--sca-sites-step-glow);
    color: var(--sca-color-white);
}

.sca-sites-step__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.sca-sites-step__label {
    min-width: 0;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-sites-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--sca-color-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.sca-sites-note::before,
.sca-sites-note::after {
    content: "";
    flex: 1 1 2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(3, 43, 98, 0), rgba(3, 43, 98, 0.18));
}

.sca-sites-note::after {
    background: linear-gradient(90deg, rgba(3, 43, 98, 0.18), rgba(3, 43, 98, 0));
}

/* Layouts ---------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .sca-platform-cta {
        --sca-platform-float: -2.5px;
    }
}

@media (max-width: 479.98px) {
    .sca-sites-note::before,
    .sca-sites-note::after {
        display: none;
    }
}

/* Three steps in one row with arrows between them */
@media (min-width: 768px) {
    .sca-sites-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.75rem;
    }

    .sca-sites-step {
        justify-content: center;
    }

    .sca-sites-step + .sca-sites-step::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -2.1rem;
        width: 1.375rem;
        height: 1.375rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        translate: 0 -50%;
    }

    .sca-sites-process {
        padding: 1.25rem 2rem 1rem;
    }
}

/* WordPress and Shopify side by side */
@media (min-width: 1024px) {
    .sca-sites-platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Wide screens: breadcrumb beside the centred brand label */
@media (min-width: 1280px) {
    .sca-sites-breadcrumb {
        position: absolute;
        top: 0.5rem;
        left: 0;
        max-width: calc(50% - 15rem);
    }

    .sca-sites-header {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sca-platform-cta {
        animation: none;
        transition: none;
    }
}

/* ========================================
   WEBSITE GALLERIES & 3D STORY MODAL
   ======================================== */

/* --------------------------------------------------------------------------
   12. Website galleries (wordpress-websites.html, shopify-stores.html) and
   the shared story modal. The page shell (background, breadcrumb, brand
   label) reuses the Website Showcase page styles; WordPress = blue,
   Shopify = green/teal.
   -------------------------------------------------------------------------- */

.sca-gallery {
    --sca-gallery-ink: #0b1f4d;
    --sca-gallery-accent: #0b63d6;
    --sca-gallery-accent-2: #2f8bff;
    --sca-gallery-accent-dark: #0a3fa8;
}

.sca-gallery--shopify {
    --sca-gallery-ink: #0d3b30;
    --sca-gallery-accent: #0a8a5f;
    --sca-gallery-accent-2: #14b8a6;
    --sca-gallery-accent-dark: #07644e;
}

.sca-sites-breadcrumb--chevron li + li::before {
    content: "›";
    font-size: 1.125rem;
}

.sca-sites-breadcrumb li > a:not([href^="./index"]) {
    display: inline;
    min-height: 0;
}

.sca-gallery-title {
    margin-top: 0.25rem;
    color: var(--sca-gallery-ink);
    font-size: clamp(1.75rem, 0.9rem + 3.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.sca-gallery-title__brand {
    font-family: var(--sca-font-en);
    letter-spacing: -0.02em;
}

.sca-gallery-title__rest {
    color: var(--sca-gallery-accent);
}

.sca-gallery--wordpress .sca-gallery-title__rest {
    color: #0a7f99;
}

.sca-gallery-sub {
    color: var(--sca-color-navy-deep);
    font-size: clamp(1rem, 0.9rem + 0.55vw, 1.375rem);
    font-weight: 600;
    line-height: 1.5;
}

/* Platform tabs ---------------------------------------------------------- */

.sca-gallery-tabs {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.sca-gallery-tabs ul {
    display: inline-flex;
    gap: 0.375rem;
    padding: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(3, 43, 98, 0.1);
    list-style: none;
}

.sca-gallery-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-width: clamp(8.5rem, 6rem + 6vw, 12rem);
    min-height: max(44px, 3rem);
    padding: 0.5rem 1.25rem;
    border-radius: var(--sca-radius-pill);
    color: var(--sca-color-navy-deep);
    font-family: var(--sca-font-en);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-gallery-tab svg {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
}

.sca-gallery-tab--wordpress svg {
    color: #1d2b4f;
}

/* Small phones (and large text): both tabs stay inside the viewport */
@media (max-width: 419.98px) {
    .sca-gallery-tabs ul {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .sca-gallery-tab {
        min-width: 0;
        gap: 0.375rem;
        padding-inline: 0.75rem;
        font-size: 0.9375rem;
    }

    .sca-gallery-tab svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.sca-gallery-tab__w {
    fill: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 700;
}

.sca-gallery-tab.is-active {
    color: var(--sca-color-white);
}

.sca-gallery-tab--wordpress.is-active {
    background: linear-gradient(135deg, #0a3fa8 0%, #1f6fe0 60%, #2f8bff 100%);
    box-shadow: 0 10px 22px rgba(31, 111, 224, 0.38);
}

.sca-gallery-tab--wordpress.is-active svg {
    color: #ffffff;
}

.sca-gallery-tab--wordpress.is-active .sca-gallery-tab__w {
    fill: #1f6fe0;
}

.sca-gallery-tab--shopify.is-active {
    background: linear-gradient(135deg, #07644e 0%, #0a9a72 60%, #14b8a6 100%);
    box-shadow: 0 10px 22px rgba(10, 154, 114, 0.38);
}

@media (hover: hover) and (pointer: fine) {
    .sca-gallery-tab:not(.is-active):hover {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

/* Glass panel, filters --------------------------------------------------- */

.sca-gallery-panel {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding: clamp(0.875rem, 0.5rem + 1.2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(236, 246, 255, 0.55) 100%);
    box-shadow: 0 24px 60px rgba(3, 43, 98, 0.1), inset 0 1px 0 #ffffff;
}

.sca-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.sca-gallery-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: max(44px, 2.75rem);
    padding: 0.375rem 1.125rem;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-white);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.08);
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color var(--sca-duration) var(--sca-ease), color var(--sca-duration) var(--sca-ease);
}

.sca-gallery-filter svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--sca-gallery-accent);
}

.sca-gallery-filter[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--sca-gallery-accent-dark), var(--sca-gallery-accent) 60%, var(--sca-gallery-accent-2));
    box-shadow: 0 8px 18px rgba(3, 43, 98, 0.2);
    color: var(--sca-color-white);
}

.sca-gallery-filter[aria-pressed="true"] svg {
    color: var(--sca-color-white);
}

@media (hover: hover) and (pointer: fine) {
    .sca-gallery-filter[aria-pressed="false"]:hover {
        background-color: #f1f7fd;
    }
}

/* Cards ------------------------------------------------------------------ */

.sca-gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    list-style: none;
}

.sca-gallery-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 247, 255, 0.86));
    box-shadow: 0 16px 36px rgba(3, 43, 98, 0.1);
    text-align: center;
}

.sca-gallery-card[hidden] {
    display: none;
}

/* Preview: cropped 1:1 from the gallery master; the badge covers the spot
   where the master's own badge was removed from the image */
.sca-gallery-card__preview {
    --sca-badge-w: 39.5%;
    --sca-badge-h: 14.5%;
    --sca-badge-font: 4.3cqi;

    position: relative;
    container-type: inline-size;
    width: 100%;
}

.sca-gallery-card--shopify .sca-gallery-card__preview {
    --sca-badge-w: 22.5%;
    --sca-badge-h: 10.6%;
    --sca-badge-font: 2.3cqi;
}

.sca-gallery-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.sca-gallery-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    min-width: var(--sca-badge-w);
    min-height: var(--sca-badge-h);
    padding: 0.2em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(52, 69, 94, 0.92);
    box-shadow: 0 4px 10px rgba(3, 43, 98, 0.2);
    color: var(--sca-color-white);
    font-size: max(0.625rem, var(--sca-badge-font));
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.sca-gallery-card__category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.875rem;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: var(--sca-radius-pill);
    background-color: var(--sca-color-white);
    box-shadow: 0 4px 12px rgba(3, 43, 98, 0.07);
    color: var(--sca-color-navy-deep);
    font-size: 0.875rem;
    font-weight: 600;
}

.sca-gallery-card__category svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--sca-gallery-accent);
}

.sca-gallery--shopify .sca-gallery-card__category svg {
    color: #0d3b30;
}

.sca-gallery-card__info {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.sca-gallery-card__name {
    color: var(--sca-gallery-ink);
    font-family: var(--sca-font-en);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sca-gallery-card__domain {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: max(44px, 2.75rem);
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--sca-gallery-accent);
    font-family: var(--sca-font-en);
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-align: left;
}

.sca-gallery-card__domain svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.sca-gallery-card__cta,
.sca-gallery-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: max(44px, 2.875rem);
    margin-top: auto;
    padding: 0.625rem 1.25rem;
    border: 0;
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, var(--sca-gallery-accent-dark) 0%, var(--sca-gallery-accent) 55%, var(--sca-gallery-accent-2) 100%);
    box-shadow: 0 10px 22px rgba(3, 43, 98, 0.2);
    color: var(--sca-color-white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-gallery-card__cta svg,
.sca-gallery-cta__button svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
    .sca-gallery-card__domain:hover {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .sca-gallery-card__cta:hover,
    .sca-gallery-cta__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(3, 43, 98, 0.28);
    }
}

/* Shopify cards: name + domain beside the CTA */
.sca-gallery-card--shopify {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 1rem 1rem 1.25rem;
}

.sca-gallery-card--shopify .sca-gallery-card__info {
    justify-items: start;
}

.sca-gallery-card--shopify .sca-gallery-card__name {
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.875rem);
}

/* Note + bottom CTA panel ------------------------------------------------ */

.sca-gallery-newtab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
}

.sca-gallery-newtab svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.sca-gallery-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 246, 255, 0.85));
    box-shadow: 0 18px 40px rgba(3, 43, 98, 0.1);
    text-align: center;
}

.sca-gallery-cta__icon {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    color: var(--sca-gallery-accent);
}

.sca-gallery-cta__icon svg {
    width: 100%;
    height: 100%;
}

.sca-gallery-cta__text {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.sca-gallery-cta__title {
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-gallery-cta__text p {
    color: #24364f;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.sca-gallery-cta__button {
    width: auto;
    min-width: 15rem;
    min-height: 3.25rem;
    margin-top: 0;
    font-size: 1.0625rem;
}

/* Bottom CTA with a decorative WhatsApp badge after the arrow: the button
   keeps its destination; the badge only bounces via transform. */
.sca-gallery-cta__button--whatsapp {
    max-width: 100%;
    padding: 0.375rem 0.4375rem 0.375rem 1.5rem;
}

/* Calm float: ~4px up and back over 3.2s; the logo only breathes slightly */
.sca-wa-badge {
    --sca-wa-lift: -4px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.875rem;
    height: 2.875rem;
    margin-left: 0.1875rem; /* + button gap = ~11px after the arrow */
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #4ee683 0%, #25d366 55%, #1da851 100%);
    box-shadow:
        0 6px 14px rgba(7, 70, 40, 0.28),
        0 0 0 4px rgba(37, 211, 102, 0.16),
        0 0 16px rgba(37, 211, 102, 0.38);
    animation: sca-wa-bounce 3.2s ease-in-out infinite;
    will-change: transform;
}

.sca-wa-badge__logo {
    display: grid;
    place-items: center;
    animation: sca-wa-logo 3.2s ease-in-out 0.4s infinite;
    will-change: transform;
}

.sca-gallery-cta__button .sca-wa-badge svg {
    width: 1.6875rem;
    height: 1.6875rem;
    fill: #ffffff;
}

@keyframes sca-wa-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(var(--sca-wa-lift)); }
}

@keyframes sca-wa-logo {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@media (max-width: 599.98px) {
    .sca-gallery-cta__button--whatsapp {
        min-width: 0;
        padding-left: 1.125rem;
        font-size: 1rem;
    }

    .sca-wa-badge {
        --sca-wa-lift: -3px;
        width: 2.5rem;
        height: 2.5rem;
    }

    .sca-gallery-cta__button .sca-wa-badge svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sca-wa-badge,
    .sca-wa-badge__logo {
        animation: none !important;
        transform: none;
    }
}

/* Layouts ---------------------------------------------------------------- */

@media (min-width: 600px) {
    .sca-gallery-grid--wordpress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .sca-gallery-cta {
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-items: start;
        padding: 1.25rem 1.75rem;
        text-align: left;
    }
}

@media (min-width: 900px) {
    .sca-gallery-grid--shopify {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sca-gallery-card--shopify {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1rem;
    }

    .sca-gallery-card--shopify .sca-gallery-card__preview,
    .sca-gallery-card--shopify .sca-gallery-card__category {
        grid-column: 1 / -1;
    }

    .sca-gallery-card--shopify .sca-gallery-card__info {
        justify-self: start;
    }

    .sca-gallery-card--shopify .sca-gallery-card__cta {
        align-self: center;
        width: auto;
        min-width: 11rem;
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .sca-gallery-grid--wordpress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Story modal ------------------------------------------------------------ */

.sca-story-modal .sca-story-modal__dialog {
    display: grid;
    gap: 0.75rem;
    width: min(100%, 60rem);
    max-height: min(92dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    border: 1px solid rgba(95, 243, 255, 0.45);
    background: linear-gradient(180deg, #ffffff 0%, #f1f7fd 100%);
}

/* Close button stays a 44px target at every text size (story modal only) */
.sca-story-modal .sca-modal__close {
    width: max(44px, 2.75rem);
    height: max(44px, 2.75rem);
}

.sca-story-modal__header {
    display: grid;
    gap: 0.125rem;
    padding-right: 3.5rem;
}

.sca-story-modal__eyebrow {
    color: var(--sca-color-teal);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sca-story-modal__title {
    color: var(--sca-color-navy-deep);
    font-family: var(--sca-font-en);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
}

/* 16:9 stage that can never collapse: full width, minimum height, own
   background. The SVG scales inside it as one piece (meet), never cropped. */
.sca-story-stage {
    position: relative;
    isolation: isolate;
    justify-self: center;
    /* As wide as the dialog allows while header, clock and controls still fit */
    width: min(100%, calc((min(92dvh, 760px) - 11.5rem) * 16 / 9));
    min-height: 280px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 30%, rgba(123, 225, 255, 0.32), transparent 44%),
        linear-gradient(145deg, #f8fdff 0%, #e9f8ff 55%, #dff6f5 100%);
    box-shadow: inset 0 0 0 1px rgba(3, 43, 98, 0.1), 0 10px 26px rgba(3, 43, 98, 0.16);
}

.sca-story-stage svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.sca-story-modal.is-fallback .sca-story-stage,
.sca-story-modal.is-fallback .sca-story-progress {
    display: none;
}

.sca-story-fallback {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 1rem;
    background-color: #fffbeb;
    color: #78350f;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.sca-story-fallback[hidden] {
    display: none;
}

.sca-story-progress {
    height: 0.4375rem;
    overflow: hidden;
    border-radius: var(--sca-radius-pill);
    background-color: #e3eef5;
}

.sca-story-progress__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sca-color-cyan), #0b93c4, #1f6fe0);
    transform: scaleX(0);
    transform-origin: left center;
}

/* The real 7 s completion clock (its animationend reveals the link) */
.sca-story-modal.is-running .sca-story-progress__bar {
    animation: scaStoryClock 7s linear forwards;
}

@keyframes scaStoryClock {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.sca-story-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}

.sca-story-button,
.sca-story-destination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: max(44px, 2.875rem);
    padding: 0.5rem 1.25rem;
    border-radius: var(--sca-radius-pill);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.sca-story-button {
    border: 1px solid rgba(11, 111, 214, 0.35);
    background-color: var(--sca-color-white);
    color: var(--sca-color-navy-deep);
}

.sca-story-button svg,
.sca-story-destination svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.sca-story-button[hidden],
.sca-story-destination[hidden] {
    display: none;
}

.sca-story-icon-play,
.sca-story-button--toggle.is-paused .sca-story-icon-pause {
    display: none;
}

.sca-story-button--toggle.is-paused .sca-story-icon-play {
    display: block;
}

.sca-story-destination {
    border: 0;
    background: linear-gradient(135deg, #0a3fa8 0%, #0b93c4 55%, #04cfc6 100%);
    box-shadow: 0 10px 22px rgba(11, 147, 196, 0.35);
    color: var(--sca-color-white);
    animation: sca-modal-reveal 450ms var(--sca-ease) both;
}

@media (hover: hover) and (pointer: fine) {
    .sca-story-button:hover {
        background-color: #f1f7fd;
    }

    .sca-story-destination:hover {
        box-shadow: 0 14px 28px rgba(11, 147, 196, 0.45);
    }
}

/* Pause freezes scenes, characters, props and the completion clock */
.sca-story-modal.is-paused *,
.sca-story-modal.is-paused *::before,
.sca-story-modal.is-paused *::after {
    animation-play-state: paused !important;
}

/* Story drawing ---------------------------------------------------------- */

.sca-story-svg * {
    transform-box: view-box;
}

.sca-story-svg .sca-st-c {
    transform-box: fill-box;
    transform-origin: center;
}

.sca-st-cam {
    transform-origin: 480px 300px;
}

.sca-st-arm-l {
    transform-origin: -25.5px -118px;
}

.sca-st-arm-r {
    transform-origin: 25.5px -118px;
}

.sca-st-leg-l {
    transform-origin: -8px -68px;
}

.sca-st-leg-r {
    transform-origin: 8px -68px;
}

.sca-st-head {
    transform-origin: 0 -132px;
}

.sca-st-packet {
    offset-rotate: 0deg;
    filter: drop-shadow(0 0 6px #5ff3ff);
}

/* Scenes cross-fade: 0–2 s, 2–5 s, 5–7 s. Scene one is fully visible from
   the first frame of the run; scene three stays after completion. */
.sca-story-scene {
    opacity: 0;
    pointer-events: none;
}

/* Scene one is already showing before the run starts, so the stage is never empty */
.sca-story-scene--one {
    opacity: 1;
}

.sca-story-modal.is-running .sca-story-scene--one {
    animation: scaSceneOne 7s linear forwards;
}

.sca-story-modal.is-running .sca-story-scene--two {
    animation: scaSceneTwo 7s linear forwards;
}

.sca-story-modal.is-running .sca-story-scene--three {
    animation: scaSceneThree 7s linear forwards;
}

@keyframes scaSceneOne {
    0%, 24% { opacity: 1; }
    28.5%, 100% { opacity: 0; }
}

@keyframes scaSceneTwo {
    0%, 26% { opacity: 0; }
    31%, 67% { opacity: 1; }
    71.5%, 100% { opacity: 0; }
}

@keyframes scaSceneThree {
    0%, 69% { opacity: 0; }
    74%, 100% { opacity: 1; }
}

/* Generic motions; values come from custom properties on each element */
@keyframes sca-st-move {
    from { transform: translate(var(--fx, 0px), var(--fy, 0px)); }
    to { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
}

@keyframes sca-st-turn {
    from { transform: rotate(var(--fr, 0deg)); }
    to { transform: rotate(var(--tr, 0deg)); }
}

@keyframes sca-st-swing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(var(--sw, 16deg)); }
    75% { transform: rotate(calc(var(--sw, 16deg) * -1)); }
}

@keyframes sca-st-raise {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(var(--r, 60deg)); }
}

@keyframes sca-st-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--bob, -3px)); }
}

@keyframes sca-st-nod {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

@keyframes sca-st-fade {
    from { opacity: var(--o0, 0); }
    to { opacity: var(--o1, 1); }
}

@keyframes sca-st-pop {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes sca-st-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@keyframes sca-st-scale {
    from { transform: scale(var(--s0, 1)); }
    to { transform: scale(var(--s1, 1.05)); }
}

@keyframes sca-st-dash {
    from { stroke-dashoffset: var(--len, 300); }
    to { stroke-dashoffset: 0; }
}

@keyframes sca-st-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@keyframes sca-st-travel {
    0% { offset-distance: 0%; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* Small screens: stage first, controls full width */
@media (max-width: 599.98px) {
    .sca-story-modal .sca-story-modal__dialog {
        padding: 0.75rem;
    }

    .sca-story-stage {
        min-height: 210px;
    }

    .sca-story-button,
    .sca-story-destination {
        flex: 1 1 auto;
    }
}

/* Reduced motion: no continuous motion; the finished final scene shows at
   once and the clock's animationend reveals the link immediately */
@media (prefers-reduced-motion: reduce) {
    .sca-story-svg *,
    .sca-story-modal .sca-story-progress__bar,
    .sca-story-modal .sca-story-scene--one,
    .sca-story-modal .sca-story-scene--two,
    .sca-story-modal .sca-story-scene--three {
        animation-delay: 0s !important;
    }

    .sca-gallery-card__cta,
    .sca-gallery-cta__button,
    .sca-gallery-tab,
    .sca-gallery-filter {
        transition: none;
    }
}

/* ========================================
   WEB SERVICES & PACKAGE PAGES
   ======================================== */

/* --------------------------------------------------------------------------
   13. Website services flow — Phase 5.3
   web-services.html (overview) → web-packages.html (platform choice) →
   wordpress-packages.html / shopify-packages.html (three tiers each).
   The page shell (background, breadcrumb, platform cards, process bar,
   enquiry CTA) reuses the showcase, homepage and gallery styles; only what
   is new lives here. Type is rem-based, so the A control scales it all.
   -------------------------------------------------------------------------- */

/* Brand lockup: readable words, natural wrapping (no wide tracking) ------ */

.sca-svc-brand {
    display: grid;
    gap: 0.125rem;
    max-width: 100%;
}

.sca-svc-brand__name {
    color: var(--sca-color-navy-deep);
    font-family: var(--sca-font-en);
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.sca-svc-brand__sub {
    color: var(--sca-color-teal);
    font-family: var(--sca-font-en);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Breadcrumb sits in the flow on these pages (never beside the header) */
.sca-svc-page .sca-svc-breadcrumb {
    position: static;
    max-width: none;
}

/* Hero ------------------------------------------------------------------- */

.sca-svc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: center;
    margin-top: 0.75rem;
}

.sca-svc-hero__copy {
    display: grid;
    justify-items: center;
    gap: 0.875rem;
    min-width: 0;
    text-align: center;
}

.sca-svc-title {
    margin-top: 0.25rem;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.75rem, 0.95rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.22;
    text-wrap: balance;
}

.sca-svc-title > span {
    display: block;
}

.sca-svc-title__accent {
    color: #0a7f99;
}

/* Page-level h1 on the package pages */
.sca-svc-title--page {
    font-size: clamp(1.625rem, 0.95rem + 2.6vw, 3rem);
}

.sca-svc-lead {
    max-width: 38rem;
    color: #24364f;
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem);
    line-height: 1.65;
}

.sca-svc-hero__ctas {
    justify-content: center;
}

.sca-svc-hero__visual {
    max-width: 44rem;
}

/* Honest label on concept/demo artwork */
.sca-svc-demo-badge {
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border: 1px solid rgba(11, 147, 196, 0.25);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(3, 43, 98, 0.1);
    color: var(--sca-color-teal-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    translate: -50% 0;
}

.sca-svc-demo-badge svg {
    width: 1rem;
    height: 1rem;
}

.sca-svc-platform-visual {
    position: relative;
    width: 100%;
    max-width: 46rem;
}

.sca-svc-demo-badge--corner {
    left: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    translate: none;
}

/* Section heads ---------------------------------------------------------- */

.sca-svc-section {
    margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
    scroll-margin-top: 1rem;
}

.sca-svc-section__head {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.sca-svc-eyebrow {
    padding: 0.3125rem 1rem;
    border: 1px solid rgba(0, 107, 120, 0.4);
    border-radius: var(--sca-radius-pill);
    background-color: rgba(4, 207, 198, 0.08);
    color: var(--sca-color-teal-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.sca-svc-section__title {
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.sca-svc-section__text {
    color: #24364f;
    font-size: clamp(0.9375rem, 0.88rem + 0.35vw, 1.1875rem);
    line-height: 1.6;
}

/* Six service cards ------------------------------------------------------ */

.sca-svc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.sca-svc-card {
    --sca-svc-a: #6fb6ff;
    --sca-svc-b: #1f5fe0;
    --sca-svc-glow: rgba(31, 95, 224, 0.3);

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.5rem 1rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.375rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.9) 100%);
    box-shadow: 0 16px 36px rgba(3, 43, 98, 0.09), 0 2px 6px rgba(3, 43, 98, 0.04), inset 0 1px 0 #ffffff;
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-svc-card--green {
    --sca-svc-a: #5fe3b0;
    --sca-svc-b: #0a9a6a;
    --sca-svc-glow: rgba(10, 154, 106, 0.3);
}

.sca-svc-card--purple {
    --sca-svc-a: #bf9cff;
    --sca-svc-b: #6a3cff;
    --sca-svc-glow: rgba(106, 60, 255, 0.3);
}

.sca-svc-card--teal {
    --sca-svc-a: #5fe3e0;
    --sca-svc-b: #0a7f99;
    --sca-svc-glow: rgba(10, 127, 153, 0.3);
}

.sca-svc-card--indigo {
    --sca-svc-a: #7cc0ff;
    --sca-svc-b: #1452b8;
    --sca-svc-glow: rgba(20, 82, 184, 0.3);
}

.sca-svc-card--orange {
    --sca-svc-a: #ffc56f;
    --sca-svc-b: #ff7a1a;
    --sca-svc-glow: rgba(255, 122, 26, 0.3);
}

.sca-svc-card__icon {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: radial-gradient(circle at 30% 24%, var(--sca-svc-a) 0%, var(--sca-svc-b) 75%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.16), 0 8px 18px var(--sca-svc-glow);
    color: var(--sca-color-white);
}

.sca-svc-card__icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.sca-svc-card__title {
    align-self: center;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-svc-card__text {
    color: #33475f;
    font-size: 0.9375rem;
    line-height: 1.7;
}

@media (hover: hover) and (pointer: fine) {
    .sca-svc-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 44px rgba(3, 43, 98, 0.13), 0 2px 6px rgba(3, 43, 98, 0.05), inset 0 1px 0 #ffffff;
    }
}

.sca-svc-services-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    text-align: center;
}

.sca-svc-services-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 40rem;
    color: var(--sca-color-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    text-align: left;
}

.sca-svc-services-note svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    color: var(--sca-color-teal);
}

/* Platform selection: floating package buttons --------------------------- */

.sca-svc-platforms {
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.sca-svc-price-hint {
    padding: 0.375rem 1rem;
    border-radius: var(--sca-radius-pill);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(3, 43, 98, 0.08);
    color: var(--sca-platform-accent);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-weight: 700;
    line-height: 1.45;
}

/* The wrapper owns the bob/tilt, so the link's own hover scale and focus
   ring never fight the animation. Padding keeps room for the travel. */
.sca-svc-float {
    --sca-svc-up: -8px;
    --sca-svc-down: 4px;
    --sca-svc-tilt: 1.5deg;

    width: min(100%, 30rem);
    margin-top: 0.25rem;
    padding-block: 0.625rem 0.375rem;
    animation: sca-svc-float 2.2s ease-in-out infinite;
    will-change: transform;
}

/* Phase offset: the two buttons never move in step */
.sca-svc-float--shopify {
    animation-delay: -0.75s;
}

.sca-svc-float .sca-platform-cta {
    width: 100%;
    margin-top: 0;
    animation: none;
}

@keyframes sca-svc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(var(--sca-svc-up)) rotate(calc(var(--sca-svc-tilt) * -1)); }
    50%      { transform: translateY(0) rotate(0deg); }
    75%      { transform: translateY(var(--sca-svc-down)) rotate(var(--sca-svc-tilt)); }
}

/* Arrow chip: its own small nudge and glow; the label stays still */
.sca-svc-package-cta__arrow {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 255, 255, 0.35);
    animation: sca-svc-arrow 1.1s ease-in-out infinite alternate;
}

.sca-svc-package-cta__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
}

@keyframes sca-svc-arrow {
    from { transform: translateX(0); }
    to   { transform: translateX(4px); }
}

/* Hover and keyboard focus freeze the motion for a clear, steady target */
.sca-svc-float:hover,
.sca-svc-float:focus-within,
.sca-svc-float:hover .sca-svc-package-cta__arrow,
.sca-svc-float:focus-within .sca-svc-package-cta__arrow {
    animation-play-state: paused;
}

.sca-svc-package-cta:focus-visible {
    outline-offset: 4px;
}

/* Process title + enquiry ------------------------------------------------ */

.sca-svc-process {
    scroll-margin-top: 1rem;
}

.sca-svc-process-title {
    margin-bottom: 1rem;
    color: var(--sca-color-navy-deep);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: 700;
    text-align: center;
}

.sca-svc-page .sca-gallery-cta {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    scroll-margin-top: 1rem;
}

/* Package pages ---------------------------------------------------------- */

.sca-pkg-intro {
    margin-top: 0.75rem;
}

.sca-pkg-highlight {
    margin-top: 0.25rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 255, 0.92));
    box-shadow: 0 10px 24px rgba(3, 43, 98, 0.1);
    color: var(--sca-gallery-accent);
    font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
    font-weight: 700;
    line-height: 1.5;
}

.sca-pkg-cats {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
    --sca-platform-accent: var(--sca-gallery-accent);
}

.sca-pkg-cats__label {
    color: var(--sca-color-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.sca-pkg-service-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin: 1.25rem auto 0;
    padding: 0.625rem 1rem;
    border-radius: 0.875rem;
    background-color: rgba(10, 138, 95, 0.08);
    color: var(--sca-gallery-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.sca-pkg-service-note svg,
.sca-pkg-panel__title svg {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--sca-gallery-accent);
}

.sca-pkg-tiers {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.sca-pkg-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    list-style: none;
}

.sca-pkg-card {
    display: flex;
    min-width: 0;
}

/* Never a fixed height: features always fit */
.sca-pkg-card__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.75rem 1.25rem 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(240, 248, 255, 0.92) 100%);
    box-shadow: 0 20px 44px rgba(3, 43, 98, 0.11), 0 2px 6px rgba(3, 43, 98, 0.05), inset 0 1px 0 #ffffff;
}

.sca-gallery--shopify .sca-pkg-card__body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(236, 250, 245, 0.92) 100%);
}

/* Accent bar across the top of each card */
.sca-pkg-card__body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.375rem;
    background: linear-gradient(90deg, var(--sca-gallery-accent-dark), var(--sca-gallery-accent), var(--sca-gallery-accent-2));
}

.sca-pkg-card--popular .sca-pkg-card__body {
    border: 2px solid var(--sca-gallery-accent);
    box-shadow: 0 24px 52px rgba(3, 43, 98, 0.16), 0 0 0 4px rgba(47, 139, 255, 0.12), inset 0 1px 0 #ffffff;
}

.sca-gallery--shopify .sca-pkg-card--popular .sca-pkg-card__body {
    box-shadow: 0 24px 52px rgba(3, 43, 98, 0.16), 0 0 0 4px rgba(20, 184, 166, 0.14), inset 0 1px 0 #ffffff;
}

.sca-pkg-card__badge {
    align-self: flex-start;
    margin-bottom: -0.25rem;
    padding: 0.25rem 0.875rem;
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, var(--sca-gallery-accent-dark), var(--sca-gallery-accent-2));
    color: var(--sca-color-white);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
}

.sca-pkg-card__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.sca-pkg-card__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--sca-gallery-accent-dark) 0%, var(--sca-gallery-accent) 55%, var(--sca-gallery-accent-2) 100%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(3, 43, 98, 0.2);
    color: var(--sca-color-white);
}

.sca-pkg-card__icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.sca-pkg-card__heading {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.sca-pkg-card__title {
    color: var(--sca-gallery-ink);
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
}

.sca-pkg-card__audience {
    color: #33475f;
    font-size: 0.875rem;
    line-height: 1.5;
}

.sca-pkg-card__price {
    padding: 0.875rem 1rem;
    border: 1px dashed rgba(11, 99, 214, 0.28);
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.88);
}

.sca-gallery--shopify .sca-pkg-card__price {
    border-color: rgba(10, 138, 95, 0.3);
}

.sca-pkg-card__price-value {
    color: var(--sca-gallery-accent);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
}

.sca-pkg-card__price-note {
    margin-top: 0.125rem;
    color: var(--sca-color-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Key facts as a compact two-column grid */
.sca-pkg-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.sca-pkg-card__fact {
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.75rem;
    background-color: rgba(3, 43, 98, 0.045);
}

.sca-pkg-card__fact dt {
    color: var(--sca-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.sca-pkg-card__fact dd {
    color: var(--sca-gallery-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.sca-pkg-card__inherits {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--sca-gallery-accent);
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--sca-gallery-ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
}

.sca-pkg-card__list-title {
    margin-bottom: -0.5rem;
    color: var(--sca-gallery-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.sca-pkg-card__list-title--muted {
    color: var(--sca-color-muted);
}

.sca-pkg-card__features,
.sca-pkg-card__excludes {
    display: grid;
    gap: 0.5rem;
    list-style: none;
}

.sca-pkg-card__features li,
.sca-pkg-card__excludes li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.sca-pkg-card__excludes li {
    color: #52627a;
}

.sca-pkg-card__features-icon,
.sca-pkg-card__excludes-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.0625rem;
    border-radius: 50%;
    background-color: var(--sca-gallery-accent);
    color: var(--sca-color-white);
}

.sca-pkg-card__excludes-icon {
    background-color: #cbd5e1;
    color: #475569;
}

.sca-pkg-card__features-icon svg,
.sca-pkg-card__excludes-icon svg {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 3;
}

/* Sits at the bottom so CTAs line up across cards */
.sca-pkg-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    margin-top: auto;
    padding: 0.625rem 1.25rem;
    border-radius: var(--sca-radius-pill);
    background: linear-gradient(135deg, var(--sca-gallery-accent-dark) 0%, var(--sca-gallery-accent) 55%, var(--sca-gallery-accent-2) 100%);
    box-shadow: 0 10px 22px rgba(3, 43, 98, 0.2);
    color: var(--sca-color-white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: transform var(--sca-duration) var(--sca-ease), box-shadow var(--sca-duration) var(--sca-ease);
}

.sca-pkg-card__cta > span[aria-hidden] svg {
    width: 1.125rem;
    height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
    .sca-pkg-card__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(3, 43, 98, 0.28);
    }
}

.sca-pkg-noscript {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--sca-color-white);
    text-align: center;
}

/* Supporting panels ------------------------------------------------------ */

.sca-pkg-panel {
    margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    padding: 1.25rem;
    border: 1px solid rgba(11, 147, 196, 0.14);
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(3, 43, 98, 0.08), 0 2px 6px rgba(3, 43, 98, 0.04);
}

.sca-pkg-panel__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--sca-gallery-ink);
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-pkg-panel__note {
    margin-top: 0.875rem;
    color: var(--sca-color-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.sca-pkg-notes {
    display: grid;
    gap: 0.5rem;
    color: #33475f;
    font-size: 0.875rem;
    line-height: 1.65;
}

.sca-pkg-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.25rem;
}

.sca-pkg-checklist,
.sca-pkg-costlist {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    list-style: none;
}

.sca-pkg-checklist li,
.sca-pkg-costlist li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--sca-color-navy-deep);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.sca-pkg-checklist li::before,
.sca-pkg-costlist li::before {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--sca-gallery-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 70%;
}

.sca-pkg-costlist li::before {
    background: #e2e8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") no-repeat center / 62%;
}

/* Additional services table: stays readable, scrolls inside on tiny screens */
.sca-pkg-table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid rgba(3, 43, 98, 0.08);
    border-radius: 1rem;
}

.sca-pkg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.sca-pkg-table th,
.sca-pkg-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.sca-pkg-table thead th {
    background-color: rgba(10, 138, 95, 0.08);
    color: var(--sca-gallery-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

.sca-pkg-table tbody th {
    color: var(--sca-color-navy-deep);
    font-weight: 600;
}

.sca-pkg-table td {
    color: var(--sca-gallery-accent);
    font-weight: 700;
    white-space: nowrap;
}

.sca-pkg-table tbody tr + tr {
    border-top: 1px solid rgba(3, 43, 98, 0.07);
}

/* Scope accordion (native <details>: collapsed by default, keyboard ready) */
.sca-pkg-scope {
    padding: 0;
}

.sca-pkg-scope__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 1rem 1.25rem;
    border-radius: 1.5rem;
    cursor: pointer;
    list-style: none;
}

.sca-pkg-scope__summary::-webkit-details-marker {
    display: none;
}

.sca-pkg-scope__heading {
    display: grid;
    gap: 0.125rem;
}

.sca-pkg-scope__title {
    color: var(--sca-gallery-ink);
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.35;
}

.sca-pkg-scope__hint {
    color: var(--sca-color-muted);
    font-size: 0.8125rem;
}

.sca-pkg-scope[open] .sca-pkg-scope__hint {
    display: none;
}

.sca-pkg-scope__chevron {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--sca-gallery-accent);
    transition: rotate var(--sca-duration) var(--sca-ease);
}

.sca-pkg-scope[open] .sca-pkg-scope__chevron {
    rotate: 180deg;
}

.sca-pkg-scope__list {
    display: grid;
    gap: 0.625rem;
    padding: 0 1.25rem 1.25rem 2.75rem;
    color: #24364f;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.sca-pkg-scope__list li::marker {
    color: var(--sca-gallery-accent);
    font-weight: 700;
}

.sca-pkg-back {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.sca-pkg-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border-radius: var(--sca-radius-pill);
    color: var(--sca-gallery-ink);
    font-weight: 600;
    text-decoration: none;
}

.sca-pkg-back svg {
    width: 1.125rem;
    height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
    .sca-pkg-back a:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--sca-gallery-accent);
    }
}

/* Layouts ---------------------------------------------------------------- */

@media (max-width: 599.98px) {
    .sca-svc-float {
        --sca-svc-up: -5px;
        --sca-svc-down: 3px;
        --sca-svc-tilt: 1deg;
    }

    .sca-svc-card {
        padding: 1rem;
    }

    .sca-svc-hero__ctas,
    .sca-svc-hero__ctas .sca-web-cta {
        width: 100%;
    }

    .sca-pkg-card__body {
        padding-inline: 1rem;
    }
}

@media (min-width: 600px) {
    .sca-svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sca-svc-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: 0.75rem;
        padding: 1.5rem;
    }

    .sca-svc-card__icon {
        grid-row: auto;
    }

    .sca-pkg-panel {
        padding: 1.5rem 1.75rem;
    }

    .sca-pkg-scope {
        padding: 0;
    }

    .sca-pkg-scope__summary {
        padding-inline: 1.75rem;
    }

    .sca-pkg-scope__list {
        padding-inline: 3.25rem 1.75rem;
    }
}

/* Tablet: two package cards per row, the third centred below */
@media (min-width: 720px) {
    .sca-pkg-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sca-pkg-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.625rem);
    }

    .sca-pkg-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sca-svc-hero {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 2.5rem;
        margin-top: 1.5rem;
    }

    .sca-svc-hero__copy {
        justify-items: start;
        text-align: left;
    }

    .sca-svc-hero__ctas {
        justify-content: flex-start;
    }

    .sca-svc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .sca-svc-services-foot {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Desktop: all three tiers side by side */
@media (min-width: 1100px) {
    .sca-pkg-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sca-pkg-card:last-child:nth-child(odd) {
        grid-column: auto;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sca-svc-float,
    .sca-svc-package-cta__arrow {
        animation: none !important;
        transform: none;
    }

    .sca-svc-card,
    .sca-pkg-card__cta,
    .sca-pkg-scope__chevron {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   14. Shared scroll reveal (scaInitReveal in js/script.js)
   Hidden states exist only while html.sca-reveal-on is set by the script;
   they use opacity + `translate`, never `transform` or `transition`, so the
   blocks' own hover transforms and transitions keep working.
   -------------------------------------------------------------------------- */

html.sca-reveal-on [data-sca-reveal="below"],
html.sca-reveal-on [data-sca-reveal="above"] {
    opacity: 0;
}

html.sca-reveal-on [data-sca-reveal="below"] {
    translate: 0 20px;
}

html.sca-reveal-on [data-sca-reveal="above"] {
    translate: 0 -20px;
}

html.sca-reveal-on [data-sca-reveal="in-up"] {
    animation: sca-reveal-up 550ms var(--sca-ease) var(--sca-reveal-delay, 0ms) backwards;
}

html.sca-reveal-on [data-sca-reveal="in-down"] {
    animation: sca-reveal-down 550ms var(--sca-ease) var(--sca-reveal-delay, 0ms) backwards;
}

/* Keyboard focus never lands on something invisible */
html.sca-reveal-on [data-sca-reveal]:focus-within {
    opacity: 1;
    translate: none;
    animation: none;
}

@keyframes sca-reveal-up {
    from { opacity: 0; translate: 0 20px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes sca-reveal-down {
    from { opacity: 0; translate: 0 -20px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.sca-reveal-on [data-sca-reveal] {
        opacity: 1 !important;
        translate: none !important;
        animation: none !important;
    }
}