/* ==========================================================================
   Wise Bed Manager — site stylesheet
   Single stylesheet for the whole marketing site.
   Sections:  1 tokens · 2 reset · 3 layout · 4 header · 5 hero · 6 blocks
              7 gallery + lightbox · 8 forms · 9 footer · 10 responsive
   ========================================================================== */

/* -- 1. design tokens ------------------------------------------------------ */
:root
{
    /* brand — derived from the wbm logo: blue #5178ae, green #76af4e        */
    --brand-950: #0b1f33;
    --brand-900: #12304f;
    --brand-800: #17406b;
    --brand-700: #1d5288;
    --brand-600: #2a6aad;
    --brand-500: #5178ae;
    --brand-200: #b9cde6;
    --brand-100: #dce7f4;
    --brand-050: #eef4fb;

    --accent-700: #4d8235;
    --accent-600: #5d9440;
    --accent-500: #76af4e;
    --accent-100: #e4f0d9;

    --ink-900: #0f172a;
    --ink-800: #1e293b;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;
    --ink-050: #f8fafc;
    --white: #ffffff;

    --warn-bg: #fef6e7;
    --warn-bd: #f2d9a8;

    /* type */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-head: var(--font-sans);

    /* spacing / shape */
    --wrap: 1180px;
    --wrap-narrow: 800px;
    --gap: 24px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
    --shadow-xl: 0 30px 70px rgba(15, 23, 42, .16);

    --header-h: 68px;
}

/* -- 2. reset -------------------------------------------------------------- */
*, *::before, *::after
{
    box-sizing: border-box;
}

html
{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body
{
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a
{
    color: var(--brand-600);
    text-decoration: none;
}

a:hover
{
    color: var(--brand-800);
    text-decoration: underline;
}

h1, h2, h3, h4
{
    font-family: var(--font-head);
    color: var(--ink-900);
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: -.015em;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

hr
{
    border: 0;
    border-top: 1px solid var(--ink-200);
    margin: 48px 0;
}

:focus-visible
{
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.visually-hidden
{
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link
{
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    background: var(--brand-800);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transition: top .15s ease;
}

.skip-link:focus
{
    top: 0;
    color: #fff;
}

/* -- 3. layout ------------------------------------------------------------- */
.wrap
{
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.wrap-narrow
{
    max-width: var(--wrap-narrow);
}

.section
{
    padding: 72px 0;
}

.section--tight { padding: 48px 0; }

.section--alt
{
    background: var(--ink-050);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
}

.section--brand
{
    background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
    color: var(--brand-100);
}

.section--brand h2, .section--brand h3 { color: #fff; }

.section-head
{
    max-width: 760px;
    margin-bottom: 40px;
}

.section-head p
{
    font-size: 1.08rem;
    color: var(--ink-600);
    margin-bottom: 0;
}

.eyebrow
{
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: 12px;
}

.lead
{
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ink-600);
    max-width: 780px;
}

/* buttons */
.btn
{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary
{
    background: var(--brand-700);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn--primary:hover { background: var(--brand-800); color: #fff; }

.btn--accent
{
    background: var(--accent-600);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn--accent:hover { background: var(--accent-700); color: #fff; }

.btn--ghost
{
    background: transparent;
    border-color: var(--ink-300);
    color: var(--ink-800);
}

.btn--ghost:hover
{
    border-color: var(--brand-500);
    color: var(--brand-800);
    background: var(--brand-050);
}

.btn--on-dark
{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.btn--on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn--sm { padding: 9px 18px; font-size: .9rem; }

.arrow-link
{
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.arrow-link::after
{
    content: "\2192";
    transition: transform .15s ease;
}

.arrow-link:hover::after { transform: translateX(3px); }

/* -- 4. header ------------------------------------------------------------- */
.site-header
{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ink-200);
}

.site-header__inner
{
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-h);
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.brand
{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand img { height: 34px; width: auto; }

.brand:hover { text-decoration: none; }

.nav
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav a, .nav .nav__toggle
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink-700);
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.nav a:hover, .nav .nav__toggle:hover
{
    background: var(--ink-100);
    color: var(--brand-800);
    text-decoration: none;
}

.nav a[aria-current="page"]
{
    color: var(--brand-800);
    font-weight: 600;
    background: var(--brand-050);
}

/* dropdown */
.dropdown { position: relative; }

.dropdown__caret
{
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.dropdown[data-open="true"] .dropdown__caret
{
    transform: rotate(-135deg) translate(-2px, -2px);
}

.dropdown__menu
{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
}

.dropdown[data-open="true"] .dropdown__menu { display: block; }

.dropdown__menu a
{
    display: block;
    padding: 9px 12px;
    width: 100%;
    font-size: .93rem;
}

.dropdown__menu a small
{
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: var(--ink-500);
}

/* language switcher */
.langswitch { position: relative; margin-left: 4px; }

.langswitch__btn
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    text-transform: uppercase;
}

.langswitch__btn:hover { border-color: var(--brand-500); color: var(--brand-800); }

.langswitch__menu
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}

.langswitch[data-open="true"] .langswitch__menu { display: block; }

.langswitch__menu a
{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    color: var(--ink-700);
}

.langswitch__menu a:hover { background: var(--ink-100); text-decoration: none; }

.langswitch__menu a[aria-current="true"]
{
    background: var(--brand-050);
    color: var(--brand-800);
    font-weight: 600;
}

.langswitch__code
{
    font-size: .76rem;
    text-transform: uppercase;
    color: var(--ink-400);
    letter-spacing: .05em;
}

/* mobile burger */
.burger
{
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.burger span
{
    position: absolute;
    left: 11px;
    width: 18px; height: 2px;
    background: var(--ink-800);
    transition: transform .2s ease, opacity .2s ease;
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }

body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 5. hero --------------------------------------------------------------- */
.hero
{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 460px at 12% -10%, rgba(118, 175, 78, .16), transparent 60%),
        radial-gradient(900px 520px at 88% 0%, rgba(81, 120, 174, .22), transparent 62%),
        linear-gradient(180deg, var(--brand-050), #fff 78%);
    border-bottom: 1px solid var(--ink-200);
    padding: 68px 0 118px;   /* room for the stat card to overlap the edge */
}

.hero__grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.hero h1
{
    margin-bottom: .35em;
}

.hero__text
{
    font-size: 1.16rem;
    color: var(--ink-600);
    max-width: 33em;
}

.hero__actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero__note
{
    margin-top: 16px;
    font-size: .9rem;
    color: var(--ink-500);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__note::before
{
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-500);
    flex: 0 0 auto;
}

.hero__shot
{
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--ink-200);
    background: #fff;
    transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
}

.hero__shot img { width: 100%; }

/* page hero (inner pages) */
.pagehead
{
    background:
        radial-gradient(800px 320px at 85% -30%, rgba(81, 120, 174, .16), transparent 60%),
        linear-gradient(180deg, var(--brand-050), #fff);
    border-bottom: 1px solid var(--ink-200);
    padding: 56px 0 44px;
}

.breadcrumb
{
    font-size: .85rem;
    color: var(--ink-500);
    margin-bottom: 12px;
}

.breadcrumb a { color: var(--ink-500); }
.breadcrumb span { margin: 0 7px; color: var(--ink-300); }

/* -- 6. content blocks ----------------------------------------------------- */

/* stat strip
   When it follows the hero it is lifted so the card straddles the boundary
   between the hero gradient and the white page. Floating it in the white gap
   underneath made it read as an orphan. */
.stats-band
{
    padding: 0;
}

.stats-band--overlap
{
    position: relative;
    z-index: 5;
    margin-top: -66px;
}

.stats
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.stats__item
{
    position: relative;
    padding: 30px 26px 32px;
    text-align: center;
}

/* hairline between cells, inset top and bottom so it reads as a divider
   rather than as a table gridline */
.stats__item + .stats__item::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: var(--ink-200);
}

.stats__value
{
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--brand-800);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

/* short accent rule under each figure, in the logo green */
.stats__value::after
{
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--accent-500);
}

.stats__label
{
    margin-top: 12px;
    font-size: .87rem;
    color: var(--ink-500);
    line-height: 1.45;
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
}

/* card grid */
.grid
{
    display: grid;
    gap: var(--gap);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card:hover
{
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
    transform: translateY(-2px);
}

.card h3 { margin-bottom: .4em; }

.card p:last-child { margin-bottom: 0; }

/* icon system
   One shape, four containers. Every icon is decorative — the heading beside
   it already carries the meaning — so none of them is announced. */
.icon
{
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 13px;
    background: var(--brand-050);
    color: var(--brand-700);
    margin-bottom: 18px;
}

.card:hover .card__icon
{
    background: var(--brand-100);
}

.numlist__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 11px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

.steps__icon
{
    position: absolute;
    right: 24px;
    top: 22px;
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 12px;
    background: var(--ink-050);
    color: var(--brand-500);
}

.rolecard__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    flex: 0 0 auto;
}

.usecase__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--accent-100);
    color: var(--accent-700);
    flex: 0 0 auto;
}

.usecase__head
{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.usecase__head h3 { margin: 0; }

.card__num
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand-050);
    color: var(--brand-700);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 14px;
}

/* numbered list (benefits) */
.numlist
{
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: num;
    display: grid;
    gap: 2px;
    background: var(--ink-200);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.numlist li
{
    background: #fff;
    display: grid;
    grid-template-columns: 46px 40px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 24px 26px;
    margin: 0;
    counter-increment: num;
}

.numlist li::before
{
    content: counter(num, decimal-leading-zero);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-200);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.numlist h3 { margin-bottom: .25em; font-size: 1.08rem; }
.numlist p { margin: 0; color: var(--ink-600); }

/* split image + text */
.split
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
}

.split--reverse .split__media { order: 2; }

.split__media img
{
    border-radius: var(--r-md);
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-lg);
    width: 100%;
}

/* a drawn illustration is not a screenshot: no frame, no drop shadow */
.split__media--illus img
{
    border: 0;
    box-shadow: none;
    background: none;
}

.split__body p:last-of-type { margin-bottom: 0; }

/* steps */
.steps
{
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 20px;
}

.steps li
{
    counter-increment: step;
    position: relative;
    padding: 24px 84px 24px 84px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin: 0;
}

.steps li::before
{
    content: counter(step);
    position: absolute;
    left: 26px; top: 24px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.steps h3 { margin-bottom: .3em; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--ink-600); }

/* checklist */
.checklist
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.checklist li
{
    position: relative;
    padding-left: 34px;
    margin: 0;
}

.checklist li::before
{
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%234d8235' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

/* role cards */
.rolecard
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.rolecard__head
{
    background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
    color: #fff;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rolecard__head h3 { color: #fff; margin: 0; }

.rolecard__head p
{
    margin: 4px 0 0;
    font-size: .88rem;
    color: var(--brand-100);
}

.rolecard ul
{
    list-style: none;
    padding: 22px 26px;
    margin: 0;
    display: grid;
    gap: 11px;
}

.rolecard li
{
    position: relative;
    padding-left: 26px;
    margin: 0;
    font-size: .96rem;
    color: var(--ink-600);
}

.rolecard li::before
{
    content: "";
    position: absolute;
    left: 4px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-500);
}

/* use cases */
.usecase
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-left: 4px solid var(--brand-600);
    border-radius: var(--r-md);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
}

.usecase ul
{
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 9px;
}

.usecase li
{
    position: relative;
    padding-left: 26px;
    margin: 0;
    font-size: .94rem;
    color: var(--ink-600);
}

.usecase li::before
{
    content: "";
    position: absolute;
    left: 2px; top: .55em;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--accent-500);
}

/* courses */
.course
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.course__meta
{
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 12px;
}

.course ul { padding-left: 1.2em; margin: 14px 0 0; }
.course li { font-size: .94rem; color: var(--ink-600); }

/* prose sections */
.prose h3 { margin-top: 1.8em; }
.prose h3:first-child { margin-top: 0; }
.prose > p { max-width: 74ch; }

.prose-block + .prose-block { margin-top: 40px; }

/* specs table */
.specs
{
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.specs__title
{
    background: var(--ink-050);
    padding: 14px 22px;
    font-weight: 700;
    color: var(--ink-900);
    border-bottom: 1px solid var(--ink-200);
}

.specs dl
{
    margin: 0;
    display: grid;
    grid-template-columns: minmax(160px, 34%) minmax(0, 1fr);
}

.specs dt, .specs dd
{
    margin: 0;
    padding: 13px 22px;
    border-bottom: 1px solid var(--ink-100);
    font-size: .96rem;
}

.specs dt { font-weight: 600; color: var(--ink-800); }
.specs dd { color: var(--ink-600); }

.specs dl > :nth-last-child(1),
.specs dl > :nth-last-child(2) { border-bottom: 0; }

/* architecture diagram
   Built from HTML boxes rather than one SVG so it reflows on a phone and the
   labels stay readable at any width — and so translations just flow. */
.arch
{
    max-width: 900px;
    margin: 0 auto;
}

.arch__tier
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 32px 28px;
    text-align: center;
}

.arch__tier--server
{
    border-color: var(--brand-200);
    background: linear-gradient(180deg, var(--brand-050), #fff 60%);
}

.arch__tier-label
{
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-700);
    background: var(--brand-050);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 22px;
}

.arch__tier--server .arch__tier-label { background: #fff; }

.arch__devices
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.arch__device
{
    flex: 1 1 130px;
    max-width: 170px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 18px 12px 14px;
    background: var(--ink-050);
}

.arch__device svg
{
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    display: block;
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arch__device span
{
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-700);
}

.arch__chips
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.arch__chip
{
    border: 1px solid var(--brand-200);
    background: #fff;
    color: var(--brand-800);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: .92rem;
    font-weight: 600;
}

.arch__note
{
    margin: 20px auto 0;
    max-width: 60ch;
    font-size: .93rem;
    color: var(--ink-600);
}

/* the connector between the two tiers: one vertical line running from the
   client box down into the server box, with the network label sitting on it */
.arch__link
{
    position: relative;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch__link::before
{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ink-300);
    transform: translateX(-50%);
}

/* arrowhead, pointing into the server */
.arch__link::after
{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: translate(-50%, 0) rotate(45deg);
}

.arch__link-label
{
    position: relative;
    z-index: 1;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-500);
    background: var(--ink-050);
    padding: 4px 16px;
    text-align: center;
}

.arch__options
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.arch__option
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 22px 24px;
}

.arch__option--primary
{
    border-color: var(--accent-500);
    border-width: 2px;
    padding: 21px 23px;
}

.arch__option h4
{
    font-size: 1rem;
    margin-bottom: .4em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.arch__option--primary h4::before
{
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%234d8235' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100%;
}

.arch__option p
{
    margin: 0;
    font-size: .92rem;
    color: var(--ink-600);
}

@media (max-width: 680px)
{
    .arch__tier { padding: 24px 18px; }
    .arch__link { height: 66px; }
    .arch__link-label { font-size: .78rem; padding: 4px 10px; }
    .arch__options { grid-template-columns: 1fr; }
    .arch__device { flex: 1 1 45%; }
}

/* callout */
.callout
{
    background: var(--warn-bg);
    border: 1px solid var(--warn-bd);
    border-radius: var(--r-md);
    padding: 26px 30px;
}

.callout h3 { margin-bottom: .6em; }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li { color: var(--ink-700); }

.note
{
    font-size: .92rem;
    color: var(--ink-500);
    background: var(--ink-050);
    border: 1px dashed var(--ink-300);
    border-radius: var(--r-sm);
    padding: 14px 18px;
}

/* quote */
.quote
{
    border-left: 4px solid var(--accent-500);
    padding: 6px 0 6px 28px;
    margin: 0;
    max-width: 800px;
}

.quote p
{
    font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
    line-height: 1.4;
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .5em;
}

.quote cite
{
    font-style: normal;
    font-size: .88rem;
    color: var(--ink-500);
}

/* FAQ */
.faq
{
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.faq details
{
    border-bottom: 1px solid var(--ink-200);
}

.faq details:last-child { border-bottom: 0; }

.faq summary
{
    cursor: pointer;
    list-style: none;
    padding: 20px 56px 20px 24px;
    font-weight: 600;
    color: var(--ink-900);
    position: relative;
    transition: background .15s ease;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { background: var(--ink-050); }

.faq summary::after
{
    content: "";
    position: absolute;
    right: 24px; top: 27px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }

.faq__answer
{
    padding: 0 24px 22px;
    color: var(--ink-600);
}

.faq__answer p:last-child { margin-bottom: 0; }

/* CTA band */
.cta
{
    background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
    color: var(--brand-100);
    border-radius: var(--r-xl);
    padding: 52px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 36px;
    align-items: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.cta::after
{
    content: "";
    position: absolute;
    right: -80px; top: -120px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(118, 175, 78, .18);
    pointer-events: none;
}

.cta h2 { color: #fff; margin-bottom: .4em; }
.cta p { margin: 0; max-width: 52ch; }

.cta__actions
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.cta__actions .btn { justify-content: center; }

/* contact block */
.contactcard
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 28px 30px;
    box-shadow: var(--shadow-sm);
}

.contactcard dl { margin: 0; display: grid; gap: 16px; }
.contactcard dt
{
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-400);
    font-weight: 700;
}
.contactcard dd { margin: 4px 0 0; white-space: pre-line; color: var(--ink-800); }

/* -- 7. gallery + lightbox ------------------------------------------------- */
.gallery
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.shot
{
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
    padding: 0;
    cursor: zoom-in;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.shot:hover
{
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--brand-200);
}

.shot__img
{
    position: relative;
    background: var(--ink-100);
    border-bottom: 1px solid var(--ink-200);
}

.shot__img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.shot__zoom
{
    position: absolute;
    right: 12px; bottom: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .62);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
}

.shot:hover .shot__zoom { opacity: 1; }

.shot__zoom svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; }

.shot__body { padding: 18px 20px 22px; }
.shot__body h3 { font-size: 1.02rem; margin-bottom: .35em; }
.shot__body p { margin: 0; font-size: .9rem; color: var(--ink-600); }

.gallery-hint
{
    font-size: .88rem;
    color: var(--ink-500);
    margin-bottom: 22px;
}

/* lightbox */
.lightbox
{
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 15, 28, .93);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lightbox[data-open="true"] { display: flex; }

.lightbox__figure
{
    margin: 0;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.lightbox__figure img
{
    max-height: 74vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xl);
    background: #fff;
}

.lightbox__caption
{
    color: #e2e8f0;
    margin-top: 18px;
    font-size: .95rem;
}

.lightbox__caption strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }

.lightbox__count
{
    display: block;
    margin-top: 10px;
    font-size: .8rem;
    color: #94a3b8;
    letter-spacing: .05em;
}

.lightbox__btn
{
    position: absolute;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }

.lightbox__close { top: 20px; right: 20px; font-size: 1.4rem; line-height: 1; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox__btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* -- 8. forms -------------------------------------------------------------- */
.form
{
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.form__grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field label
{
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-800);
}

.field .req { color: #c2410c; }

.field input, .field select, .field textarea
{
    font-family: inherit;
    font-size: .98rem;
    color: var(--ink-900);
    padding: 11px 14px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-sm);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.field input:focus, .field select:focus, .field textarea:focus
{
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(81, 120, 174, .18);
}

.field textarea { min-height: 130px; resize: vertical; }

.field .error
{
    font-size: .82rem;
    color: #b91c1c;
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]
{
    border-color: #dc2626;
}

.field--check
{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.field--check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.field--check label { font-weight: 400; font-size: .9rem; color: var(--ink-600); }

/* honeypot — hidden from humans, visible to naive bots */
.hp
{
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form__actions
{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.form__privacy
{
    font-size: .84rem;
    color: var(--ink-500);
    max-width: 44ch;
    margin: 0;
}

.alert
{
    border-radius: var(--r-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: .95rem;
}

.alert--ok { background: var(--accent-100); border: 1px solid #b7d79b; color: #2f5c1d; }
.alert--err { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* -- 9. footer ------------------------------------------------------------- */
.site-footer
{
    background: var(--brand-950);
    color: #94a3b8;
    padding: 56px 0 28px;
    font-size: .92rem;
}

.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }

.footer__grid
{
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.footer__brand img
{
    height: 32px;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.footer__brand p { max-width: 34ch; color: #94a3b8; }

.site-footer h4
{
    color: #fff;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 14px;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }

.footer__bottom
{
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: #64748b;
}

/* -- 10. responsive -------------------------------------------------------- */
@media (max-width: 1024px)
{
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .hero__grid { gap: 36px; }
}

@media (max-width: 900px)
{
    .burger { display: block; }

    .nav
    {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 20px 24px 40px;
        overflow-y: auto;
        display: none;
        border-top: 1px solid var(--ink-200);
    }

    body.nav-open { overflow: hidden; }
    body.nav-open .nav { display: flex; }

    .nav > a, .nav .nav__toggle
    {
        padding: 14px 12px;
        font-size: 1.02rem;
        border-bottom: 1px solid var(--ink-100);
        border-radius: 0;
        justify-content: space-between;
    }

    .dropdown { position: static; }

    .dropdown__menu
    {
        position: static;
        box-shadow: none;
        border: 0;
        border-bottom: 1px solid var(--ink-100);
        border-radius: 0;
        padding: 4px 0 12px 12px;
        min-width: 0;
    }

    .langswitch { margin: 18px 0 0; }
    .langswitch__btn { width: 100%; justify-content: space-between; }
    .langswitch__menu { position: static; box-shadow: none; margin-top: 8px; }

    .nav .btn { margin-top: 16px; justify-content: center; }

    .hero { padding: 44px 0 92px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__shot { transform: none; }

    .stats-band--overlap { margin-top: -52px; }
    .stats__item { padding: 24px 18px 26px; }
    .stats__value { font-size: 2.1rem; }

    /* on two columns the divider has to run horizontally as well */
    .stats__item:nth-child(3)::after,
    .stats__item:nth-child(4)::after
    {
        content: "";
        position: absolute;
        left: 26px;
        right: 26px;
        top: 0;
        height: 1px;
        background: var(--ink-200);
    }

    .stats__item:nth-child(3)::before { display: none; }

    .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
    .split--reverse .split__media { order: 0; }

    .stats { grid-template-columns: repeat(2, 1fr); }

    .cta { grid-template-columns: 1fr; padding: 40px 32px; }
}

@media (max-width: 680px)
{
    body { font-size: 16px; }
    .section { padding: 52px 0; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .stats-band--overlap { margin-top: -40px; }
    .hero { padding: 36px 0 76px; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .form { padding: 24px 20px; }
    .form__grid { grid-template-columns: 1fr; }
    .specs dl { grid-template-columns: 1fr; }
    .specs dt { padding-bottom: 0; border-bottom: 0; }
    .numlist li { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; }
    .numlist li::before { font-size: 1.15rem; grid-column: 1; }
    .numlist__icon { display: none; }
    .numlist li > div { grid-column: 2; }
    .steps li { padding: 22px 20px 22px 20px; }
    .steps li::before { position: static; margin-bottom: 12px; }
    .steps__icon { top: 18px; right: 18px; width: 36px; height: 36px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .cta { padding: 32px 22px; }
}

@media (prefers-reduced-motion: reduce)
{
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print
{
    .site-header, .site-footer, .cta, .lightbox, .btn { display: none !important; }
    body { font-size: 12pt; color: #000; }
}

/* ==========================================================================
   11. icons in running text
   Small drawn marks placed beside headings, list rows and prose blocks, so a
   long page of specification is broken up by something other than paragraphs.
   All of them are decorative and hidden from assistive technology.
   ========================================================================== */

.head__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--brand-050);
    color: var(--brand-600);
}

.prose__icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    margin-right: 11px;
    vertical-align: -9px;
    border-radius: 9px;
    background: var(--ink-100);
    color: var(--brand-600);
}

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

.specs__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 9px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

.callout__icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 6px;
    margin-right: 10px;
    vertical-align: -8px;
    border-radius: 8px;
    background: #fdefd5;
    color: #a86a1c;
}

/* checklist rows swap the generic tick for a subject-specific mark */
.checklist__item--icon
{
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.checklist__item--icon::before { display: none; }

.checklist__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: var(--accent-100);
    color: var(--accent-700);
    flex: 0 0 auto;
    margin-top: -3px;
}

.contactcard dt
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact__icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px;
    background: var(--brand-050);
    color: var(--brand-600);
    flex: 0 0 auto;
}

/* the quotation mark on the pull quote */
.quote { position: relative; }

.quote__mark
{
    width: 40px;
    height: 30px;
    fill: var(--accent-100);
    stroke: none;
    margin-bottom: 10px;
}

@media (max-width: 680px)
{
    .head__icon { width: 38px; height: 38px; padding: 9px; margin-bottom: 12px; }
    .prose__icon { width: 28px; height: 28px; padding: 6px; vertical-align: -7px; }
}