:root {
    --bg: #FAFBFC;
    --surface: #F2F4F7;
    --surface-2: #E9ECF2;
    --text: #0B1220;
    --text-muted: #5A6478;
    --accent: #2F8BFF;
    --accent-hover: #1E78EE;
    --accent-dim: #BFDBFE;
    --border: #E5E9F0;

    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

    --gutter: clamp(24px, 4vw, 72px);
    --frame-gutter: clamp(20px, 4vw, 56px);
    --content-inset: clamp(24px, 2.4vw, 40px);
    --nav-height: 76px;
}

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

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* ---------- PAGE FRAME — left & right vertical edge lines, fixed full-height ---------- */
body::before,
body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
    z-index: 5;
}
body::before { left: var(--frame-gutter); }
body::after  { right: var(--frame-gutter); }

main {
    min-height: 100vh;
    display: grid;
    grid-template-rows: var(--nav-height) 1fr auto;
}

/* ---------- NAV ---------- */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--frame-gutter) + var(--content-inset));
    border-bottom: 1px solid var(--border);
}

.logo {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.cta-secondary {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: 2px;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.cta-secondary:hover {
    border-color: var(--text);
}

/* ---------- HERO ---------- */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.05fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: stretch;
    padding: clamp(24px, 4vh, 56px) calc(var(--frame-gutter) + var(--content-inset));
    border-bottom: 1px solid var(--border);
}

/* Vertical divider sits in the middle column, full hero height */
.hero::before {
    content: '';
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    background: var(--border);
    /* Extend to top/bottom of hero, past the padding, to meet the horizontal frame lines */
    margin-block: calc(clamp(24px, 4vh, 56px) * -1);
}

.hero-text {
    grid-column: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    max-width: 760px;
}

h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(38px, 3.8vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--text);
    margin-bottom: 18px;
}

/* Lock H1 to one line only on viewports wide enough to fit it. Below that
   the headline wraps naturally so it never overflows the column. */
@media (min-width: 1180px) {
    h1 { white-space: nowrap; }
}

.lede {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(19px, 1.55vw, 21px);
    line-height: 1.4;
    color: var(--text);
    margin-bottom: 30px;
}

.explainer {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 44ch;
    margin-bottom: 36px;
}

.cta-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cta-primary {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 2px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(11, 18, 32, 0.04);
}

.cta-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 14px rgba(47, 139, 255, 0.25);
}

.cta-arrow {
    transition: transform 0.18s ease;
    display: inline-block;
}

.cta-primary:hover .cta-arrow {
    transform: translateX(3px);
}

.cta-note {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cta-note span {
    display: block;
}

/* ---------- HERO INSTRUMENT ---------- */
.hero-instrument {
    grid-column: 3;
    align-self: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 640px;
    justify-self: stretch;
    background: var(--bg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.instrument-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- UNIFIED ANIMATION: signal → message → lead+check → calendar (15s loop) ---------- */
.signal-active { opacity: 0; }
.signal-pulse  { opacity: 0; transform-box: fill-box; transform-origin: center; }
.signal-tag    { opacity: 0; }
.msg           { opacity: 0; }
.msg-send      { opacity: 0; transform-box: fill-box; transform-origin: center; }
.lead          { opacity: 0; }
.lead-check    { opacity: 0; transform-box: fill-box; transform-origin: center; }
.arrow         { opacity: 0; }
.meeting       { opacity: 0; }
.scanner       { opacity: 0; transform: translate(180px, 0); }
.label-dot     { transform-box: fill-box; transform-origin: center; }

/* All animations run on the same 21s clock — slower so each step settles before the next */
.hero-instrument.is-visible .scanner    { animation: scanner-sweep 21s ease-in-out infinite; }
.hero-instrument.is-visible .label-dot  { animation: label-pulse 2.4s ease-in-out infinite; }

/* Signal A — cycle 0.5s → 7.0s (pulse → settle → message → send → lead+check → arrow → card) */
.hero-instrument.is-visible .signal-a .signal-active { animation: signal-flash 21s linear infinite; animation-delay: 0.5s; }
.hero-instrument.is-visible .signal-a .signal-pulse  { animation: signal-pulse 21s linear infinite; animation-delay: 0.5s; }
.hero-instrument.is-visible .signal-a .signal-tag    { animation: signal-tag 21s linear infinite;   animation-delay: 0.7s; }
.hero-instrument.is-visible .msg-a                   { animation: msg-show 21s ease-out infinite;   animation-delay: 2.7s; }
.hero-instrument.is-visible .msg-a .msg-send         { animation: send-pulse 21s ease-out infinite; animation-delay: 4.6s; }
.hero-instrument.is-visible .lead-a                  { animation: lead-show 21s ease-out infinite;  animation-delay: 5.0s; }
.hero-instrument.is-visible .lead-a .lead-check      { animation: check-stamp 21s ease-out infinite; animation-delay: 5.5s; }
.hero-instrument.is-visible .arrow-a                 { animation: arrow-draw 21s ease-in-out infinite; animation-delay: 6.1s; }
.hero-instrument.is-visible .m-a                     { animation: meeting-land 21s ease-out infinite; animation-delay: 6.6s; }

/* Signal B — cycle 7.5s → 14.0s */
.hero-instrument.is-visible .signal-b .signal-active { animation: signal-flash 21s linear infinite; animation-delay: 7.5s; }
.hero-instrument.is-visible .signal-b .signal-pulse  { animation: signal-pulse 21s linear infinite; animation-delay: 7.5s; }
.hero-instrument.is-visible .signal-b .signal-tag    { animation: signal-tag 21s linear infinite;   animation-delay: 7.7s; }
.hero-instrument.is-visible .msg-b                   { animation: msg-show 21s ease-out infinite;   animation-delay: 9.7s; }
.hero-instrument.is-visible .msg-b .msg-send         { animation: send-pulse 21s ease-out infinite; animation-delay: 11.6s; }
.hero-instrument.is-visible .lead-b                  { animation: lead-show 21s ease-out infinite;  animation-delay: 12.0s; }
.hero-instrument.is-visible .lead-b .lead-check      { animation: check-stamp 21s ease-out infinite; animation-delay: 12.5s; }
.hero-instrument.is-visible .arrow-b                 { animation: arrow-draw 21s ease-in-out infinite; animation-delay: 13.1s; }
.hero-instrument.is-visible .m-b                     { animation: meeting-land 21s ease-out infinite; animation-delay: 13.6s; }

/* Signal C — cycle 14.5s → 21.0s */
.hero-instrument.is-visible .signal-c .signal-active { animation: signal-flash 21s linear infinite; animation-delay: 14.5s; }
.hero-instrument.is-visible .signal-c .signal-pulse  { animation: signal-pulse 21s linear infinite; animation-delay: 14.5s; }
.hero-instrument.is-visible .signal-c .signal-tag    { animation: signal-tag 21s linear infinite;   animation-delay: 14.7s; }
.hero-instrument.is-visible .msg-c                   { animation: msg-show 21s ease-out infinite;   animation-delay: 16.7s; }
.hero-instrument.is-visible .msg-c .msg-send         { animation: send-pulse 21s ease-out infinite; animation-delay: 18.6s; }
.hero-instrument.is-visible .lead-c                  { animation: lead-show 21s ease-out infinite;  animation-delay: 19.0s; }
.hero-instrument.is-visible .lead-c .lead-check      { animation: check-stamp 21s ease-out infinite; animation-delay: 19.5s; }
.hero-instrument.is-visible .arrow-c                 { animation: arrow-draw 21s ease-in-out infinite; animation-delay: 20.1s; }
.hero-instrument.is-visible .m-c                     { animation: meeting-land 21s ease-out infinite; animation-delay: 20.6s; }

/* Scanner: slow sweep across the globe x-range over the 21s loop */
@keyframes scanner-sweep {
    0%   { transform: translate(180px, 0); opacity: 0; }
    3%   { opacity: 0.95; }
    97%  { transform: translate(420px, 0); opacity: 0.95; }
    100% { transform: translate(420px, 0); opacity: 0; }
}

/* Signal active dot — bright for ~2s window */
@keyframes signal-flash {
    0%, 100% { opacity: 0; }
    0.5%     { opacity: 1; }
    9.5%     { opacity: 1; }
    11%      { opacity: 0; }
}

/* Signal pulse — two slow ripples */
@keyframes signal-pulse {
    0%       { opacity: 0; transform: scale(0.4); }
    0.5%     { opacity: 0.85; transform: scale(0.6); }
    5%       { opacity: 0; transform: scale(3.2); }
    5.5%     { opacity: 0.65; transform: scale(0.6); }
    10%      { opacity: 0; transform: scale(3.2); }
    100%     { opacity: 0; transform: scale(0.4); }
}

@keyframes signal-tag {
    0%, 100% { opacity: 0; }
    1%       { opacity: 1; }
    9%       { opacity: 1; }
    11%      { opacity: 0; }
}

/* Personalized message — fades in slow, holds ~2.3s for read time, fades out */
@keyframes msg-show {
    0%       { opacity: 0; transform: translateY(10px); }
    1.5%     { opacity: 1; transform: translateY(0); }
    9.5%     { opacity: 1; transform: translateY(0); }
    11%      { opacity: 0; transform: translateY(-12px); }
    100%     { opacity: 0; transform: translateY(10px); }
}

/* Send button pulse — bright pop suggesting "sent" */
@keyframes send-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    0.5%     { opacity: 1; transform: scale(1.22); }
    1.5%     { opacity: 1; transform: scale(1); }
    2.5%     { opacity: 0; transform: scale(1); }
}

/* Lead pill — appears smoothly, holds ~1.6s */
@keyframes lead-show {
    0%       { opacity: 0; transform: translateY(10px); }
    1.5%     { opacity: 1; transform: translateY(0); }
    7%       { opacity: 1; transform: translateY(0); }
    8.5%     { opacity: 0; transform: translateY(-10px); }
    100%     { opacity: 0; transform: translateY(10px); }
}

/* Check stamp — bouncy pop in, holds */
@keyframes check-stamp {
    0%       { opacity: 0; transform: scale(0.2); }
    1%       { opacity: 0; transform: scale(0.2); }
    2.5%     { opacity: 1; transform: scale(1.45); }
    4%       { opacity: 1; transform: scale(1); }
    7%       { opacity: 1; transform: scale(1); }
    8.5%     { opacity: 0; transform: scale(1); }
    100%     { opacity: 0; transform: scale(0.2); }
}

/* Arrow draw — bigger reveal, ~1.2s */
@keyframes arrow-draw {
    0%, 100% { opacity: 0; stroke-dashoffset: 0; }
    1%       { opacity: 0.95; stroke-dashoffset: -36; }
    5%       { opacity: 0.95; stroke-dashoffset: -100; }
    6.5%     { opacity: 0; }
}

/* Meeting card lands and persists until just before loop reset */
@keyframes meeting-land {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.92); }
    1.5% { opacity: 1; transform: translateY(0) scale(1); }
    96%  { opacity: 1; transform: translateY(0) scale(1); }
    99%  { opacity: 0; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-12px) scale(0.92); }
}

@keyframes label-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-instrument .signal-active,
    .hero-instrument .signal-pulse,
    .hero-instrument .signal-tag,
    .hero-instrument .msg,
    .hero-instrument .msg-send,
    .hero-instrument .lead,
    .hero-instrument .lead-check,
    .hero-instrument .arrow,
    .hero-instrument .scanner { opacity: 0 !important; }
    .hero-instrument .meeting { opacity: 1 !important; transform: none !important; }
    .hero-instrument.is-visible .scanner,
    .hero-instrument.is-visible .label-dot,
    .hero-instrument.is-visible .signal-active,
    .hero-instrument.is-visible .signal-pulse,
    .hero-instrument.is-visible .signal-tag,
    .hero-instrument.is-visible .msg,
    .hero-instrument.is-visible .msg-send,
    .hero-instrument.is-visible .lead,
    .hero-instrument.is-visible .lead-check,
    .hero-instrument.is-visible .arrow,
    .hero-instrument.is-visible .meeting {
        animation: none !important;
    }
}

/* ---------- TRUST STRIP ---------- */
.trust {
    padding: 32px calc(var(--frame-gutter) + var(--content-inset)) 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.trust-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.trust-logos {
    display: flex;
    align-items: center;
    gap: clamp(36px, 5.5vw, 72px);
    flex-wrap: wrap;
    justify-content: center;
}

.trust-logo {
    width: auto;
    filter: grayscale(1) brightness(0) opacity(0.45);
    transition: filter 0.2s ease;
    object-fit: contain;
}

.trust-logo:hover {
    filter: grayscale(0) brightness(1) opacity(1);
}

/* Per-logo height tuning to normalize optical weight */
.logo-siemens   { height: 18px; }
.logo-swiss     { height: 22px; }
.logo-accenture { height: 18px; }
.logo-on        { height: 22px; }
.logo-citi      { height: 22px; }

/* ---------- MOBILE (<768px) ---------- */
@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --frame-gutter: 18px;
        --content-inset: 22px;
        --nav-height: 64px;
    }

    main {
        grid-template-rows: var(--nav-height) 1fr auto;
    }

    /* No internal vertical divider on stacked mobile hero */
    .hero::before {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
        column-gap: 0;
        gap: 28px;
        padding: 20px calc(var(--frame-gutter) + var(--content-inset)) 28px;
    }

    .hero-text {
        grid-column: 1;
        max-width: none;
    }

    h1 {
        font-size: clamp(34px, 9vw, 46px);
        margin-bottom: 10px;
    }

    .lede {
        font-size: 19px;
        margin-bottom: 22px;
    }

    .explainer {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .cta-primary {
        padding: 14px 24px;
        font-size: 14px;
    }

    .cta-block {
        gap: 18px;
    }

    .hero-instrument {
        grid-column: 1;
        aspect-ratio: 4 / 3;
        max-width: none;
        justify-self: stretch;
    }

    .trust {
        padding: 22px calc(var(--frame-gutter) + var(--content-inset)) 26px;
    }

    .logo-siemens   { height: 14px; }
    .logo-swiss     { height: 18px; }
    .logo-accenture { height: 14px; }
    .logo-on        { height: 22px; }
    .logo-citi      { height: 18px; }

    .trust-logos {
        gap: 18px 28px;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .qualifier {
        transition: none;
    }
}