:root {
            --ink: #0f1f17;
            --moss: #1f4030;
            --moss-2: #2c5944;
            --paper: #f5f8f6;
            --paper-2: #eaf0ec;
            --sand: #dfe9e3;
            --bone: #c8d8cf;
            --clay: #a64722;
            --clay-soft: #e07d4f;
            /* Brand mint, sampled from the logo mark (#46d2a9).
               Contrast on paper is 1.78:1 — it is a fill and a dark-background
               accent, never body text on light. Use --mint-deep for that. */
            --mint: #46d2a9;
            --mint-deep: #1d7d61;
            --gold: #c89a4a;
            --rule: rgba(15, 31, 23, 0.12);
            --rule-strong: rgba(15, 31, 23, 0.55);
            --display: 'Literata', 'Times New Roman', Georgia, serif;
            --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
            --maxw: 1280px;
            --gutter: clamp(20px, 4vw, 56px);
        }

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

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

        body {
            margin: 0;
            font-family: var(--sans);
            color: var(--ink);
            background: var(--paper);
            line-height: 1.55;
            font-feature-settings: "ss01", "cv11";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::selection {
            background: var(--clay);
            color: var(--paper);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img, svg {
            display: block;
            max-width: 100%;
        }

        button {
            font: inherit;
            cursor: pointer;
            border: 0;
            background: transparent;
            color: inherit;
        }

        /* Layout primitives */
        .container {
            width: 100%;
            max-width: var(--maxw);
            margin: 0 auto;
            padding-left: var(--gutter);
            padding-right: var(--gutter);
        }

        .eyebrow {
            font-family: var(--sans);
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 600;
            /* --mint-deep, not --mint: the brand mint is 1.78:1 on paper. */
            color: var(--mint-deep);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 1px;
            background: currentColor;
            display: inline-block;
        }

        h1, h2, h3, h4 {
            font-family: var(--display);
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.05;
            margin: 0;
        }

        h1 {
            font-size: clamp(30px, 4.6vw, 66px);
            font-variation-settings: "opsz" 72;
            font-weight: 500;
        }

        h2 {
            font-size: clamp(24px, 3.4vw, 44px);
            font-variation-settings: "opsz" 51;
        }

        h3 {
            font-size: clamp(18px, 1.8vw, 24px);
            font-variation-settings: "opsz" 20;
            line-height: 1.15;
        }

        p {
            margin: 0;
        }

        em.italic {
            font-style: italic;
            font-variation-settings: "opsz" 72;
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 22px;
            font-family: var(--sans);
            font-weight: 600;
            font-size: 14.5px;
            letter-spacing: 0.01em;
            border-radius: 999px;
            transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
            white-space: nowrap;
        }

        .btn-primary {
            background: var(--ink);
            color: var(--paper);
            box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 24px -10px rgba(15, 31, 23, .55);
        }

        .btn-primary:hover {
            background: var(--moss);
            transform: translateY(-1px);
        }

        .btn-ghost {
            background: transparent;
            color: var(--ink);
            border: 1px solid var(--rule-strong);
        }

        .btn-ghost:hover {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
        }

        .btn-clay {
            background: var(--clay);
            color: var(--paper);
        }

        .btn-clay:hover {
            background: #a64722;
        }

        .btn .arrow {
            transition: transform .25s ease;
        }

        .btn:hover .arrow {
            transform: translateX(4px);
        }

        /* Header */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(245, 248, 246, 0.78);
            backdrop-filter: saturate(140%) blur(12px);
            -webkit-backdrop-filter: saturate(140%) blur(12px);
            border-bottom: 1px solid var(--rule);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: var(--display);
            font-weight: 500;
            font-size: 22px;
            letter-spacing: -0.02em;
            font-variation-settings: "opsz" 20;
        }

        .brand .mark {
            width: 30px;
            height: 30px;
        }

        /* Mobile-first: below 920px .nav-links is an off-canvas drawer that
           slides in from the right, toggled by .nav-toggle via JS (class
           "open" on this element).

           It is absolute against the header rather than fixed to the
           viewport, and that is not a compromise: .site-header carries a
           backdrop-filter, which makes it the containing block for fixed
           descendants, so position:fixed would resolve against the header
           regardless. Anchoring under the header also keeps the logo and
           the toggle — which is the drawer's close button, animated to an
           X — visible while the drawer is open.

           It is never display:none: visibility carries the hidden state, so
           the JS only ever flips one class and a link inside the closed
           drawer stays out of the tab order (visibility:hidden removes a
           subtree from focus order; display:none would too, but couldn't
           animate). */
        .nav-links {
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            z-index: 2;
            width: min(86vw, 360px);
            /* dvh tracks the collapsing mobile URL bar; the vh line is the
               fallback for browsers without it and must stay first. */
            height: calc(100vh - 100%);
            height: calc(100dvh - 100%);
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 14px var(--gutter) 32px;
            background: var(--paper);
            border-left: 1px solid var(--rule);
            box-shadow: -28px 0 56px -32px rgba(15, 31, 23, .45);
            font-size: 16px;
            color: var(--ink);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            visibility: hidden;
            transform: translateX(100%);
            transition: transform .3s cubic-bezier(.2, .8, .3, 1), visibility .3s;
            pointer-events: none;
        }

        .nav-links.open {
            visibility: visible;
            transform: translateX(0);
            pointer-events: auto;
        }

        /* Dims the page behind the drawer and gives a tap-anywhere-to-close
           target, which is the gesture an off-canvas menu is expected to
           answer to. */
        .nav-backdrop {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1;
            height: calc(100vh - 100%);
            height: calc(100dvh - 100%);
            background: rgba(15, 31, 23, .42);
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease, visibility .3s;
            pointer-events: none;
        }

        .nav-backdrop.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Locks the page behind the open drawer so a scroll gesture that
           starts on the backdrop doesn't move the content underneath. */
        html.nav-open,
        html.nav-open body {
            overflow: hidden;
        }

        .nav-links a {
            position: relative;
            padding: 12px 0;
            opacity: .8;
            transition: opacity .2s;
        }

        .nav-links a:hover,
        .nav-links a:focus-visible {
            opacity: 1;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            inset: auto 0 4px 0;
            height: 1px;
            background: var(--ink);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
        }

        .nav-links a:hover::after {
            transform: scaleX(1);
        }

        /* Dropdown groups (Δυνατότητες / Λύσεις ανά κλάδο). Mobile: an inline
           accordion that pushes the links below it down — a height
           collapse, not opacity, or it would leave a blank gap while
           closed. Desktop overrides this to a floating flyout below. */
        .nav-item {
            display: flex;
            flex-direction: column;
        }

        .nav-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            padding: 10px 0;
            background: none;
            border: 0;
            font: inherit;
            font-size: 15px;
            color: var(--ink);
            opacity: .8;
            cursor: pointer;
            text-align: left;
        }

        .nav-trigger:hover,
        .nav-trigger:focus-visible {
            opacity: 1;
        }

        .nav-caret {
            flex-shrink: 0;
            transition: transform .2s ease;
        }

        .nav-item.open .nav-caret {
            transform: rotate(180deg);
        }

        .nav-dropdown {
            list-style: none;
            margin: 0;
            padding: 0 0 0 16px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s ease;
        }

        .nav-item.open .nav-dropdown {
            max-height: 320px;
        }

        .nav-dropdown a {
            display: block;
            padding: 8px 0;
            font-size: 14px;
            opacity: .75;
        }

        /* The slide-underline effect reads oddly inside a boxed menu item;
           a background highlight (below) replaces it there. */
        .nav-dropdown a::after {
            display: none;
        }

        .nav-dropdown a:hover,
        .nav-dropdown a:focus-visible {
            opacity: 1;
        }

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

        /* Hamburger toggle. Visible only below 920px — above that the full
           nav is always on-screen and there is nothing to expand. */
        .nav-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            background: none;
            border: 1px solid var(--rule-strong);
            border-radius: 10px;
            color: var(--ink);
            cursor: pointer;
        }

        .nav-toggle:hover {
            background: var(--paper-2);
        }

        .nav-toggle-bar-top,
        .nav-toggle-bar-bottom {
            transition: transform .2s ease, opacity .2s ease;
            transform-origin: center;
        }

        /* Hamburger -> X, driven by the JS-set aria-expanded rather than a
           second class, so the icon can never drift out of sync with the
           state a screen reader announces. */
        .nav-toggle[aria-expanded="true"] .nav-toggle-bar-top {
            transform: translateY(6px) rotate(45deg);
        }

        .nav-toggle[aria-expanded="true"] .nav-toggle-bar-mid {
            opacity: 0;
        }

        .nav-toggle[aria-expanded="true"] .nav-toggle-bar-bottom {
            transform: translateY(-6px) rotate(-45deg);
        }

        @media (min-width: 920px) {
            .nav-toggle {
                display: none;
            }

            /* Undoes every drawer property. margin-left:auto pushes the links
               flush right now that the header has no CTA button to sit
               against — without it .nav's space-between would strand them
               mid-header beside the zero-width toggle wrapper. */
            .nav-links {
                position: static;
                z-index: auto;
                width: auto;
                height: auto;
                margin-left: auto;
                flex-direction: row;
                align-items: center;
                gap: 28px;
                padding: 0;
                /* The drawer bumps this to 16px for thumb-sized targets; the
                   header bar has always been 15px and stays there. */
                font-size: 15px;
                background: transparent;
                border-left: 0;
                box-shadow: none;
                overflow: visible;
                visibility: visible;
                transform: none;
                pointer-events: auto;
            }

            .nav-backdrop {
                display: none;
            }

            .nav-item {
                position: relative;
                flex-direction: row;
            }

            .nav-trigger {
                width: auto;
                padding: 4px 0;
            }

            /* Flyout, not accordion: shown via opacity/visibility (not the
               mobile max-height collapse, which is irrelevant once the menu
               is taken out of flow) so it fades instead of resizing. */
            .nav-dropdown {
                position: absolute;
                top: calc(100% + 14px);
                left: 50%;
                min-width: 230px;
                padding: 8px;
                margin: 0;
                background: var(--paper);
                border: 1px solid var(--rule);
                border-radius: 14px;
                box-shadow: 0 24px 48px -24px rgba(15, 31, 23, .35);
                max-height: none;
                overflow: visible;
                opacity: 0;
                visibility: hidden;
                transform: translateX(-50%) translateY(4px);
                transition: opacity .18s ease, transform .18s ease, visibility .18s;
                pointer-events: none;
            }

            .nav-item.open .nav-dropdown {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(0);
                pointer-events: auto;
            }

            .nav-dropdown a {
                padding: 10px 12px;
                border-radius: 8px;
                opacity: 1;
                color: var(--ink);
            }

            .nav-dropdown a:hover,
            .nav-dropdown a:focus-visible {
                background: var(--paper-2);
            }
        }

        /* Hero */
        .hero {
            position: relative;
            padding: clamp(56px, 4vw, 140px) 0 clamp(60px, 8vw, 120px);
            overflow: hidden;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(36px, 5vw, 72px);
            align-items: end;
        }

        @media (min-width: 980px) {
            .hero-grid {
                grid-template-columns: 1.15fr 0.85fr;
                gap: 64px;
            }
        }

        .hero h1 {
            color: var(--ink);
            margin-top: 28px;
        }

        .hero h1 .accent {
            color: var(--moss);
            font-style: italic;
            font-variation-settings: "opsz" 72;
            font-weight: 600;
            display: inline-block;
        }

        .hero h1 .clay {
            color: var(--clay);
        }

        .hero-lede {
            margin-top: 28px;
            font-size: clamp(17px, 1.4vw, 20px);
            color: rgba(15, 31, 23, .78);
            max-width: 56ch;
        }

        .hero-ctas {
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-meta {
            margin-top: 36px;
            display: flex;
            flex-wrap: wrap;
            gap: 28px 40px;
            font-size: 13.5px;
            color: rgba(15, 31, 23, .65);
        }

        .hero-meta strong {
            color: var(--ink);
            font-weight: 600;
        }

        /* Hero illustration column */
        .hero-art {
            position: relative;
            aspect-ratio: 4/5;
            border-radius: 22px;
            background: linear-gradient(165deg, var(--moss) 0%, var(--ink) 100%);
            color: var(--paper);
            padding: clamp(22px, 3vw, 36px);
            overflow: hidden;
            box-shadow: 0 50px 80px -50px rgba(15, 31, 23, .45);
        }

        .hero-art-noise {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(240, 246, 243, .06) 1px, transparent 1px);
            background-size: 3px 3px;
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .hero-art-spine {
            position: absolute;
            right: -40px;
            bottom: -40px;
            width: 70%;
            opacity: .85;
        }

        .hero-art-tag {
            font-family: var(--sans);
            font-size: 11px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            opacity: .7;
        }

        .hero-art-quote {
            margin-top: auto;
            font-family: var(--display);
            font-size: clamp(20px, 2vw, 28px);
            line-height: 1.25;
            font-variation-settings: "opsz" 51;
            font-weight: 500;
            position: relative;
            z-index: 2;
        }

        .hero-art-inner {
            display: flex;
            flex-direction: column;
            height: 100%;
            gap: 24px;
            position: relative;
            z-index: 2;
        }

        .hero-art-meta {
            font-size: 12px;
            opacity: .65;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* Marquee trust strip */
        .trust {
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            background: var(--paper-2);
            padding: 22px 0;
        }

        .trust-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 18px 32px;
            font-size: 13px;
            color: rgba(15, 31, 23, .7);
        }

        .trust-row .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border: 1px solid var(--rule-strong);
            border-radius: 999px;
            font-weight: 500;
            color: var(--ink);
        }

        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--clay);
            display: inline-block;
        }

        /* Section primitives */
        section {
            padding: clamp(72px, 10vw, 140px) 0;
            position: relative;
        }

        .section-head {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            margin-bottom: clamp(40px, 6vw, 80px);
            max-width: 980px;
        }

        @media (min-width: 880px) {
            .section-head.split {
                grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
                align-items: end;
                gap: 64px;
                max-width: none;
            }
        }

        .section-head p.lede {
            font-size: clamp(16px, 1.2vw, 19px);
            color: rgba(15, 31, 23, .72);
            max-width: 56ch;
        }

        /* Manifesto / lifecycle band */
        .lifecycle {
            background: var(--sand);
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            padding: clamp(96px, 12vw, 168px) 0 clamp(88px, 10vw, 132px);
        }

        .lifecycle-flow {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background: var(--rule);
            border: 1px solid var(--rule);
            border-radius: 14px;
            overflow: hidden;
        }

        @media (min-width: 760px) {
            .lifecycle-flow {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .lifecycle-step {
            background: var(--paper);
            padding: 28px 22px 26px;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .lifecycle-step:hover {
            background: var(--paper-2);
        }

        .lifecycle-step .num {
            font-family: var(--display);
            font-size: 14px;
            letter-spacing: 0.18em;
            color: var(--clay);
            font-variation-settings: "opsz" 14;
        }

        .lifecycle-step h3 {
            font-size: 22px;
            font-variation-settings: "opsz" 20;
            font-weight: 500;
            line-height: 1.15;
            margin-top: 18px;
        }

        .lifecycle-step p {
            font-size: 13.5px;
            color: rgba(15, 31, 23, .7);
            margin-top: 8px;
        }

        /* Capabilities */
        .caps-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
        }

        @media (min-width: 720px) {
            .caps-grid {
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: minmax(220px, auto);
            }

            .cap {
                grid-column: span 3;
            }

            .cap.wide {
                grid-column: span 4;
            }

            .cap.narrow {
                grid-column: span 2;
            }

            .cap.tall {
                grid-row: span 2;
            }
        }

        .cap {
            background: var(--paper-2);
            border: 1px solid var(--rule);
            border-radius: 18px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
            overflow: hidden;
            transition: transform .35s ease, background .35s ease, border-color .35s ease;
        }

        .cap:hover {
            transform: translateY(-3px);
            background: var(--paper);
            border-color: var(--rule-strong);
        }

        .cap .icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--ink);
            color: var(--paper);
            display: grid;
            place-items: center;
        }

        .cap.featured {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
        }

        .cap.featured .icon {
            background: var(--clay);
        }

        .cap.featured h3 {
            color: var(--paper);
        }

        .cap.featured p {
            color: rgba(240, 246, 243, .7);
        }

        .cap h3 {
            font-size: 22px;
        }

        .cap p {
            font-size: 14px;
            color: rgba(15, 31, 23, .72);
        }

        .cap .tag {
            position: absolute;
            top: 18px;
            right: 18px;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            background: var(--paper);
            border: 1px solid var(--rule);
            padding: 4px 9px;
            border-radius: 999px;
            color: var(--moss);
        }

        .cap.featured .tag {
            background: rgba(240, 246, 243, .12);
            border-color: rgba(240, 246, 243, .25);
            color: var(--paper);
        }

        /* AI section */
        .ai {
            background: var(--ink);
            color: var(--paper);
            position: relative;
            overflow: hidden;
            padding: clamp(64px, 8vw, 108px) 0;
        }

        .ai::before {
            content: "";
            position: absolute;
            inset: -10% -10% auto auto;
            width: 60%;
            height: 60%;
            background: radial-gradient(circle at 60% 40%, rgba(196, 90, 45, .35), transparent 60%);
            filter: blur(40px);
            pointer-events: none;
        }

        .ai .container {
            position: relative;
            z-index: 1;
        }

        .ai h2 {
            color: var(--paper);
        }

        .ai .eyebrow {
            color: var(--clay-soft);
        }

        .ai-grid {
            margin-top: 60px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
        }

        @media (min-width: 880px) {
            .ai-grid {
                grid-template-columns: 1.1fr 0.9fr;
                gap: 56px;
                align-items: start;
            }
        }

        .ai-list {
            display: grid;
            gap: 8px;
        }

        .ai-item {
            border-top: 1px solid rgba(240, 246, 243, .18);
            padding: 22px 0;
            display: grid;
            grid-template-columns: 60px 1fr;
            gap: 18px;
            align-items: start;
        }

        .ai-item:last-child {
            border-bottom: 1px solid rgba(240, 246, 243, .18);
        }

        .ai-item .num {
            font-family: var(--display);
            font-size: 24px;
            color: var(--clay-soft);
            font-variation-settings: "opsz" 20;
        }

        .ai-item h3 {
            font-size: 22px;
            color: var(--paper);
        }

        .ai-item p {
            font-size: 14px;
            color: rgba(240, 246, 243, .72);
            margin-top: 6px;
            max-width: 52ch;
        }

        .ai-card {
            background: var(--moss);
            border: 1px solid rgba(240, 246, 243, .15);
            border-radius: 18px;
            padding: 28px;
            font-family: var(--sans);
            font-size: 13.5px;
            line-height: 1.6;
        }

        .ai-card .label {
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(240, 246, 243, .55);
            margin-bottom: 16px;
        }

        .ai-card .row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px dashed rgba(240, 246, 243, .18);
        }

        .ai-card .row:last-child {
            border-bottom: 0;
        }

        .ai-card .score {
            font-family: var(--display);
            font-size: 16px;
        }

        .ai-card .pos {
            color: #9ed4a6;
        }

        .ai-card .neg {
            color: var(--clay-soft);
        }

        /* Customization */
        .custom {
            background: var(--paper);
        }

        .custom-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 56px;
            align-items: center;
        }

        @media (min-width: 880px) {
            .custom-grid {
                grid-template-columns: 1fr 1fr;
                gap: 80px;
            }
        }

        .custom h2 .strike {
            text-decoration: line-through;
            text-decoration-thickness: 2px;
            text-decoration-color: var(--clay);
            opacity: .55;
        }

        .custom-points {
            margin-top: 28px;
            display: grid;
            gap: 14px;
        }

        .custom-point {
            display: grid;
            grid-template-columns: 28px 1fr;
            gap: 14px;
            align-items: start;
            font-size: 15px;
            color: rgba(15, 31, 23, .85);
        }

        .custom-point svg {
            margin-top: 4px;
            color: var(--clay);
        }

        .custom-visual {
            background: var(--paper-2);
            border: 1px solid var(--rule);
            border-radius: 18px;
            padding: 32px;
            position: relative;
            overflow: hidden;
        }

        .blueprint {
            display: grid;
            gap: 14px;
            font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 12.5px;
            color: var(--ink);
        }

        .blueprint .field {
            display: grid;
            grid-template-columns: 1fr auto;
            border-bottom: 1px dashed var(--rule);
            padding: 10px 0;
        }

        .blueprint .field strong {
            color: var(--moss);
            font-weight: 600;
        }

        .blueprint .field .v {
            color: rgba(15, 31, 23, .6);
        }

        .blueprint .meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--moss);
            margin-bottom: 10px;
            font-family: var(--sans);
        }

        /* Integrations */
        .integrations {
            background: var(--paper-2);
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            position: relative;
            overflow: hidden;
        }

        .integrations::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(900px 360px at 100% 0%, rgba(166, 71, 34, .06), transparent 60%),
            radial-gradient(700px 320px at 0% 100%, rgba(31, 64, 48, .07), transparent 60%);
            pointer-events: none;
        }

        .integrations .container {
            position: relative;
        }

        .integ-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1px;
            background: var(--rule);
            border: 1px solid var(--rule);
            border-radius: 16px;
            overflow: hidden;
            margin-top: clamp(24px, 4vw, 48px);
        }

        @media (min-width: 720px) {
            .integ-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1080px) {
            .integ-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .integ-card {
            background: var(--paper);
            padding: clamp(24px, 2.4vw, 34px);
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: background .35s ease, transform .35s ease;
            min-height: 220px;
            position: relative;
        }

        .integ-card:hover {
            background: #fffaf0;
        }

        .integ-card .glyph {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--paper-2);
            border: 1px solid var(--rule);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--moss);
            flex-shrink: 0;
            transition: background .35s ease, border-color .35s ease, color .35s ease;
        }

        .integ-card:hover .glyph {
            background: var(--ink);
            border-color: var(--ink);
            color: var(--clay-soft);
        }

        .integ-card h3 {
            font-family: var(--display);
            font-size: clamp(20px, 1.6vw, 24px);
            line-height: 1.15;
            font-variation-settings: "opsz" 20;
        }

        .integ-card .integ-meta {
            font-family: var(--sans);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--moss);
            font-weight: 600;
            margin-bottom: 4px;
        }

        .integ-card ul.integ-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 14px;
            font-size: 14px;
            color: rgba(15, 31, 23, .82);
        }

        .integ-card ul.integ-list li {
            position: relative;
            padding-right: 14px;
            line-height: 1.5;
        }

        .integ-card ul.integ-list li:not(:last-child)::after {
            content: "·";
            position: absolute;
            right: 0;
            color: rgba(15, 31, 23, .35);
        }

        .integ-foot {
            margin-top: clamp(28px, 3vw, 40px);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px 24px;
            padding-top: 22px;
            border-top: 1px dashed var(--rule);
            font-size: 14px;
            color: rgba(15, 31, 23, .72);
        }

        .integ-foot .integ-foot-link {
            font-weight: 600;
            color: var(--ink);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--ink);
            padding-bottom: 2px;
            transition: color .25s ease, border-color .25s ease;
        }

        .integ-foot .integ-foot-link:hover {
            color: var(--clay);
            border-color: var(--clay);
        }

        .integ-foot .integ-foot-link svg {
            transition: transform .25s ease;
        }

        .integ-foot .integ-foot-link:hover svg {
            transform: translateX(3px);
        }

        /* FAQ */
        .faq-list {
            display: grid;
            gap: 4px;
            max-width: 920px;
        }

        details.faq {
            border-top: 1px solid var(--rule);
            padding: 24px 0;
        }

        details.faq:last-of-type {
            border-bottom: 1px solid var(--rule);
        }

        details.faq summary {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--display);
            font-size: clamp(20px, 2vw, 28px);
            font-variation-settings: "opsz" 20;
            font-weight: 500;
            line-height: 1.25;
            cursor: pointer;
        }

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

        details.faq summary .plus {
            width: 28px;
            height: 28px;
            border: 1px solid var(--rule-strong);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 18px;
            line-height: 1;
            transition: transform .3s ease, background .3s ease, color .3s ease;
            flex: 0 0 auto;
            margin-left: 24px;
        }

        details.faq[open] summary .plus {
            transform: rotate(45deg);
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
        }

        details.faq .answer {
            margin-top: 14px;
            font-size: 15.5px;
            color: rgba(15, 31, 23, .78);
            max-width: 70ch;
        }

        /* Final CTA */
        .cta-final {
            background: var(--ink);
            color: var(--paper);
            border-radius: 28px;
            padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px);
            position: relative;
            overflow: hidden;
            margin: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
        }

        .cta-final::after {
            content: "";
            position: absolute;
            inset: auto -10% -50% auto;
            width: 70%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(196, 90, 45, .35), transparent 60%);
            pointer-events: none;
            filter: blur(20px);
        }

        .cta-final h2 {
            font-size: clamp(36px, 5.5vw, 80px);
            color: var(--paper);
            position: relative;
            z-index: 1;
            max-width: 16ch;
        }

        .cta-final p {
            color: rgba(240, 246, 243, .75);
            margin-top: 20px;
            max-width: 56ch;
            position: relative;
            z-index: 1;
            font-size: 16px;
        }

        .cta-final .ctas {
            margin-top: 36px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            position: relative;
            z-index: 1;
        }

        .cta-final .btn-primary {
            background: var(--clay);
            color: var(--paper);
        }

        .cta-final .btn-primary:hover {
            background: var(--clay-soft);
        }

        .cta-final .btn-ghost {
            color: var(--paper);
            border-color: rgba(240, 246, 243, .4);
        }

        .cta-final .btn-ghost:hover {
            background: var(--paper);
            color: var(--ink);
            border-color: var(--paper);
        }

        /* The pitch and the form sit side by side once there is room. Stacked in
           a 1168px section, a left-aligned headline above a centred 560px form
           produced three different widths and a band of dead space either side. */
        .cta-final-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(32px, 4vw, 56px);
            align-items: start;
        }

        @media (min-width: 980px) {
            .cta-final-grid {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
                gap: clamp(48px, 5vw, 88px);
                align-items: center;
            }

            /* The headline was sized and capped for the full section width. In
               half of it, 5.5vw and a 16ch measure broke "Ας σχεδιάσουμε το
               δικό σας CRM." across four ragged lines. */
            .cta-final-grid .cta-final-pitch h2 {
                font-size: clamp(28px, 2.6vw, 42px);
                max-width: 22ch;
            }
        }

        .lead-form {
            margin: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            text-align: left;
        }

        /* Below the breakpoint the form is the whole column, so it needs the
           readable cap the two-column layout gets from its track. */
        @media (max-width: 979px) {
            .lead-form { max-width: 560px; margin-top: 8px; }
        }

        .lead-form .full {
            grid-column: 1 / -1;
        }

        /* Labels sit on the dark CTA background, so they must be light. */
        .lead-form label {
            display: block;
            font-size: 13px;
            margin-bottom: 6px;
            color: rgba(240, 246, 243, .85);
        }

        .lead-form input,
        .lead-form select,
        .lead-form textarea {
            width: 100%;
            padding: 12px 14px;
            font-size: 16px; /* prevents iOS zoom on focus */
            border: 1px solid rgba(15, 31, 23, .18);
            border-radius: 10px;
            background: #fff;
            color: var(--ink); /* override the CTA's light text color so input text is dark */
            font-family: inherit;
        }

        /* Placeholders were invisible: inputs inherited the CTA's light text color. */
        .lead-form input::placeholder,
        .lead-form textarea::placeholder {
            color: rgba(15, 31, 23, .45);
            opacity: 1;
        }

        .lead-form select:invalid {
            color: rgba(15, 31, 23, .45);
        }

        /* greyed "- Επιλέξτε -" */
        .lead-form textarea {
            min-height: 96px;
            resize: vertical;
        }

        .lead-form .hp {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .lead-form .form-msg {
            grid-column: 1 / -1;
            font-size: 14px;
            margin: 4px 0 0;
        }

        .lead-form .form-msg.ok {
            color: #7fe0a8;
        }

        .lead-form .form-msg.err {
            color: #ff9b8a;
        }

        /* Success state: the fields are hidden and this panel takes the whole
           grid row. .form-msg already supplies grid-column: 1 / -1. */
        .lead-form .form-success {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 22px;
            border: 1px solid rgba(127, 224, 168, .35);
            border-radius: 12px;
            background: rgba(127, 224, 168, .08);
            line-height: 1.5;
        }

        .lead-form .form-success-title {
            font-size: 17px;
            color: #7fe0a8;
        }

        .lead-form .field-error {
            color: #ff9b8a;
            font-size: 12px;
            margin-top: 4px;
        }

        @media (max-width: 560px) {
            .lead-form {
                grid-template-columns: 1fr;
            }
        }

        /* Footer */
        footer.site-footer {
            background: var(--paper-2);
            border-top: 1px solid var(--rule);
            padding: 48px 0 36px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 36px;
        }

        @media (min-width: 760px) {
            .footer-grid {
                grid-template-columns: 2fr 1fr 1fr 1fr;
                gap: 48px;
            }
        }

        .footer-grid h4 {
            font-family: var(--sans);
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--moss);
            margin-bottom: 14px;
        }

        .footer-grid ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px;
            font-size: 14px;
            color: rgba(15, 31, 23, .75);
        }

        .footer-grid ul a:hover {
            color: var(--clay);
        }

        .footer-bottom {
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid var(--rule);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 12.5px;
            color: rgba(15, 31, 23, .6);
        }

        /* Reveal animation - content visible by default; animation plays when .in is added */
        @keyframes revealUp {
            from {
                opacity: 0;
                transform: translateY(18px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .reveal.in {
            animation: revealUp .95s cubic-bezier(.22, .61, .36, 1) both;
        }

        .reveal.in.delay-1 {
            animation-delay: .08s;
        }

        .reveal.in.delay-2 {
            animation-delay: .16s;
        }

        .reveal.in.delay-3 {
            animation-delay: .24s;
        }

        .reveal.in.delay-4 {
            animation-delay: .32s;
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal.in {
                animation: none !important;
            }

            html {
                scroll-behavior: auto;
            }
        }

        /* SVG decorative spine. width/height pin the exact box the inline
           <svg> used to resolve to (no intrinsic size + 1:1 viewBox ratio +
           the global "img, svg { max-width:100% }" rule below landed on
           100% of the containing block, auto height) — now that it's an
           <img> with width/height attributes for CLS, that pin has to be
           explicit or the browser's replaced-element sizing algorithm can
           resolve differently once an intrinsic size is present. */
        .spine {
            position: absolute;
            pointer-events: none;
            opacity: .12;
            width: 100%;
            height: auto;
        }

        .spine.left {
            left: -1000px;
            top: 80px;
        }

        .spine.right {
            right: -40px;
            bottom: -60px;
            width: 320px;
        }

        /* Clients / Logo carousel */
        .clients {
            padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 86px);
            background: var(--paper);
            position: relative;
            overflow: hidden;
        }

        .clients .section-head {
            margin-bottom: clamp(28px, 4vw, 52px);
        }

        .logo-marquee {
            position: relative;
            display: grid;
            gap: clamp(10px, 1.4vw, 18px);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }

        .logo-marquee-row {
            overflow: hidden;
        }

        .logo-track {
            display: flex;
            align-items: center;
            gap: clamp(18px, 2.6vw, 36px);
            list-style: none;
            margin: 0;
            padding: 0;
            width: max-content;
            animation: clients-scroll 55s linear infinite;
            will-change: transform;
        }

        .logo-track.reverse {
            animation-name: clients-scroll-rev;
            animation-duration: 65s;
        }

        .logo-marquee:hover .logo-track,
        .logo-marquee:focus-within .logo-track {
            animation-play-state: paused;
        }

        .logo-card {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 86px;
            min-width: 210px;
            padding: 0 28px;
            background: var(--paper-2);
            border: 1px solid var(--rule);
            border-radius: 14px;
            color: rgba(15, 31, 23, 0.55);
            transition: color .35s ease, transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
        }

        .logo-card:hover {
            color: var(--ink);
            background: var(--paper);
            border-color: var(--rule-strong);
            transform: translateY(-2px);
            box-shadow: 0 10px 28px -18px rgba(15, 31, 23, .45);
        }

        .logo-card .wordmark {
            font-family: var(--display);
            font-size: 22px;
            font-weight: 500;
            letter-spacing: -0.02em;
            white-space: nowrap;
            line-height: 1;
            font-variation-settings: "opsz" 20;
        }

        .logo-card .wordmark.sans {
            font-family: var(--sans);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-size: 14.5px;
        }

        .logo-card .wordmark.italic {
            font-style: italic;
            font-variation-settings: "opsz" 72;
        }

        .logo-card .wordmark .dot {
            margin: 0 3px 4px 0;
            vertical-align: middle;
        }

        .logo-card .wordmark .accent {
            color: var(--clay);
        }

        .logo-card .wordmark .thin {
            font-weight: 300;
            letter-spacing: 0.04em;
        }

        .logo-card .glyph-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            margin-right: 10px;
            border: 1.5px solid currentColor;
            border-radius: 50%;
            font-family: var(--display);
            font-style: italic;
            font-size: 15px;
            line-height: 1;
        }

        .logo-card .glyph-mark.square {
            border-radius: 4px;
        }

        .logo-card img {
            max-height: 40px;
            max-width: 150px;
            width: auto;
            opacity: .78;
            filter: grayscale(100%);
            transition: opacity .35s ease, filter .35s ease;
        }

        .logo-card:hover img {
            opacity: 1;
            filter: grayscale(0);
        }

        .clients-foot {
            margin-top: clamp(28px, 4vw, 44px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 13.5px;
            color: rgba(15, 31, 23, .6);
            text-align: center;
        }

        .clients-foot .rule {
            flex: 0 0 36px;
            height: 1px;
            background: var(--rule-strong);
        }

        .clients-partners {
            margin-top: 12px;
            text-align: center;
            font-size: 12.5px;
            letter-spacing: 0.01em;
            color: rgba(15, 31, 23, .48);
        }

        @keyframes clients-scroll {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }

        @keyframes clients-scroll-rev {
            from {
                transform: translateX(-50%);
            }
            to {
                transform: translateX(0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .logo-track {
                animation: none;
            }

            .logo-marquee-row {
                overflow-x: auto;
            }
        }

        /* Accessibility */
        :focus-visible {
            outline: 2px solid var(--clay);
            outline-offset: 3px;
            border-radius: 4px;
        }

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

/* Consent banner --------------------------------------------------------- */
/* Structural/positioning rules (.consent-banner, .consent-inner,
   .consent-actions, .consent-options, .link-button, the responsive @media
   block) live in resources/views/partials/consent-banner-styles.blade.php
   and are inlined via a <style> tag in layouts/public.blade.php's <head> —
   this file is a plain static asset and cannot @include a Blade partial.
   resources/views/legal/layout.blade.php includes the same partial. Keep
   this file and that partial in step if the banner's geometry changes. */

.consent-title { font-size: 16px; margin: 0 0 6px; }
.consent-text { font-size: 14px; margin: 0; max-width: 62ch; line-height: 1.5; }
.consent-text a { color: var(--clay-soft); }

/* .btn-ghost is dark-on-dark by default (color: var(--ink) against this
   banner's var(--ink) background) — scope it back to light text/border here,
   same pattern as .cta-final .btn-ghost above. */
.consent-banner .btn-ghost {
    color: var(--paper);
    border-color: rgba(245, 248, 246, .4);
}

.consent-banner .btn-ghost:hover {
    background: rgba(245, 248, 246, .12);
    color: var(--paper);
}

/* Video -------------------------------------------------------------------
   The video is presented as a plate tipped into a printed page, not as an
   embedded player: a poster mounted on paper stock inside a hairline rule,
   with a caption underneath. That keeps the section speaking the same visual
   language as the rest of the site instead of importing YouTube's chrome. */

.video-section { padding: 76px 0 92px; text-align: center; }

.video-title {
    margin: 0 0 40px;
    font-size: clamp(26px, 3.2vw, 40px);
}

/* The mount. Padding is deliberately asymmetric — heavier at the foot, the way
   a mat is cut so the caption has room to breathe. */
.video-plate {
    max-width: 940px;
    margin: 0 auto;
    padding: 14px 14px 0;
    background: var(--paper-2);
    border: 1px solid var(--bone);
    border-radius: 4px;
    box-shadow: 0 24px 60px -32px rgba(15, 31, 23, .45);
}

.video-plate--vertical { max-width: 420px; }

.video-facade {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    cursor: pointer;
}

/* The poster files are pre-cropped on disk, not masked here: YouTube burns the
   video's own subtitles into its thumbnails, and a CSS scrim only dims them —
   they stay legible and read as a mistake. Doing it in the file means no
   transform trickery here and no chance of the crop drifting when the layout
   changes.

   Each crop is the tallest subtitle-free window of the correct aspect ratio,
   taken at the source's native resolution — never downscaled, because these
   posters are already the softest thing on the page and every pixel thrown
   away shows:

     horizontal  maxresdefault.jpg  1280x720   band at rows 538-600  -> 954x537
     vertical    oardefault.jpg     1080x1920  band at rows 1472-1566 -> 827x1470

   oardefault is the Short's own full-height frame; hqdefault/maxresdefault for
   a Short return a 1280x720 pillarboxed version whose real content column is
   only ~405px wide, which is where the earlier blurry vertical poster came
   from. 1280x720 is YouTube's ceiling for the horizontal thumbnail, so 954 is
   as wide as that one can get without the subtitle band — a frame exported
   from the source video would beat it. */
.video-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}

.video-plate:hover .video-facade img { transform: scale(1.03); }

.video-facade--horizontal { aspect-ratio: 16 / 9; }
.video-facade--vertical { aspect-ratio: 9 / 16; max-height: 72vh; }

.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The crop above removes the subtitle; this only needs to seat the duration
   badge legibly against whatever happens to be in frame. */
.video-scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 26%;
    background: linear-gradient(to top, rgba(15, 31, 23, .55), rgba(15, 31, 23, 0));
    pointer-events: none;
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 0;
    background: var(--paper);
    color: var(--clay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;               /* optical centring of the triangle */
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}

/* An offset ring rather than a drop shadow — it echoes the hairline rules used
   throughout the page instead of introducing a soft UI glow. */
.video-play::after {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(245, 248, 246, .55);
    border-radius: 50%;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .35s ease;
}

.video-plate:hover .video-play { transform: translate(-50%, -50%) scale(1.05); }
.video-plate:hover .video-play::after { transform: scale(1.18); opacity: .35; }

.video-duration {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}

/* Reads as a photo credit, not as UI. */
.video-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 4px 16px;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(15, 31, 23, .62);
}

.video-caption .rule {
    display: block;
    width: 34px;
    height: 1px;
    background: var(--bone);
}

/* Viewport swap: exactly one plate is ever displayed, so the hidden facade is
   never clicked and never injects an iframe. */
.video-plate--vertical { display: none; }

@media (max-width: 767px) {
    .video-section { padding: 56px 0 68px; }
    .video-plate--horizontal { display: none; }
    .video-plate--vertical { display: block; }
    .video-play { width: 58px; height: 58px; }
    .video-caption { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .video-facade img,
    .video-play,
    .video-play::after { transition: none; }

    .video-plate:hover .video-facade img { transform: none; }
}

/* Proof numbers ------------------------------------------------------------
   Deliberately a definition list, not a card grid: the qualifier under each
   number is the point, and cards push it into fine print. */

.proof { padding: 84px 0; border-top: 1px solid var(--rule); }

.proof-title { max-width: 20ch; margin: 0 0 44px; }

/* Assumes exactly four proof points. auto-fit orphaned the last item in a
   mid-viewport band (~760-1010px) when it resolved to 3 columns for 4
   items, so the column counts below are hardcoded to divisors of 4 (1, 2,
   4) instead. If a fifth point is ever added, revisit these breakpoints. */
.proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 32px;
    margin: 0;
}

@media (min-width: 700px) {
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1120px) {
    .proof-grid { grid-template-columns: repeat(4, 1fr); }
}

.proof-item { border-top: 1px solid var(--bone); padding-top: 18px; }

.proof-value {
    font-family: var(--display);
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mint-deep);
}

.proof-label {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
    max-width: 26ch;
}

.proof-meta {
    margin: 10px 0 0;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--rule-strong);
    max-width: 30ch;
}

@media (max-width: 640px) {
    .proof { padding: 60px 0; }
    .proof-grid { gap: 32px; }
}

/* Product screens ---------------------------------------------------------
   Asymmetric on purpose: a 2x2 grid of equal tiles is the single most
   recognisable generated-layout shape on the web. */

.screens { padding: 88px 0; background: var(--paper-2); }

.screens-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 44px;
}

.screen { margin: 0; }

.screen--wide { grid-column: span 2; }

.screen img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bone);
    border-radius: 6px;
    box-shadow: 0 18px 44px -28px rgba(15, 31, 23, .5);
}

.screen figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(15, 31, 23, .66);
    max-width: 46ch;
}

.screens-note {
    margin-top: 36px;
    font-size: 12px;
    letter-spacing: .03em;
    color: rgba(15, 31, 23, .5);
}

@media (max-width: 767px) {
    .screens { padding: 60px 0; }
    .screens-grid { grid-template-columns: 1fr; gap: 32px; }
    .screen--wide { grid-column: auto; }
}

/* Origin story ------------------------------------------------------------
   Narrow measure, larger type, no eyebrow and no grid. It should look like a
   letter dropped into the middle of a brochure, because that is what it is. */

/* Origin story ------------------------------------------------------------
   Centred, not left-stuck: a 720px block pinned to the left edge of a 1280px
   container reads as a layout accident rather than a choice. And the heading
   runs at the page's h2 scale — the most personal section on the page should
   not be its most timidly set. */

.origin {
    padding: clamp(72px, 9vw, 116px) 0;
    background: var(--ink);
    color: var(--paper);
}

.origin-inner {
    max-width: 680px;
    margin: 0 auto;
}

.origin-title {
    font-size: clamp(24px, 3vw, 38px);
    margin: 0 0 32px;
    color: var(--paper);
}

.origin-body p {
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.62;
    margin: 0 0 22px;
    color: rgba(245, 248, 246, .88);
}

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

/* Reads as a sign-off, which is what turns the section from a content block
   into something a person wrote. */
.origin-sign {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 36px 0 0;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 248, 246, .55);
}

.origin-sign .rule {
    display: block;
    width: 34px;
    height: 1px;
    background: var(--mint);
    flex: none;
    opacity: .8;
}

@media (max-width: 640px) {
    .origin-sign { font-size: 12px; letter-spacing: .1em; }
}

/* Keyword pages (A3) -------------------------------------------------------
   A single-column hero + content block, reused across every registry-driven
   /features/* page. Deliberately plainer than the home hero: these pages are
   entered mid-scroll from search, not from the top of a narrative. */

.page-hero {
    padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
}

.page-hero h1 {
    /* Deliberately its own scale, not an inherited hero clamp(34px, 6.2vw, 89px):
       these pages are entered mid-scroll from search, and a three-line h1 eating
       the whole first viewport reads as empty rather than confident. */
    font-size: clamp(27px, 3.4vw, 46px);
    color: var(--ink);
    margin-top: 20px;
    max-width: 22ch;
}

.page-lede {
    margin-top: 24px;
    font-size: clamp(17px, 1.4vw, 20px);
    color: rgba(15, 31, 23, .78);
    max-width: 56ch;
}

.page-block {
    padding: clamp(48px, 7vw, 88px) 0;
    border-top: 1px solid var(--rule);
}

.page-block h2 {
    max-width: 20ch;
}

.chip-list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-list li {
    padding: 9px 18px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--moss);
    background: var(--paper-2);
}

.page-note {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(15, 31, 23, .72);
    max-width: 62ch;
}

@media (max-width: 640px) {
    .page-hero { padding: 48px 0 32px; }
    .page-block { padding: 40px 0; }
}

/* Keyword pages (A3), round 2 ----------------------------------------------
   features/ticketing (above) is a single hero + chip-list block. The three
   pages below reuse .page-hero/.page-lede/.page-block/.page-note but each
   needs its own body shape per page — a standalone wide screenshot feeding a
   numbered flow, and a text/visual split feeding a closing note — so the four
   feature pages don't all read as the same template with different words. */

/* A screenshot section with no top rule and no card chrome around it, sitting
   directly under the hero — reuses the existing .screen figure/img/figcaption
   rules (see "Product screens" above) so the plate styling stays identical to
   the one on the home page. */
.page-shot {
    padding: clamp(24px, 4vw, 48px) 0 0;
}

/* Vertical numbered flow — a lighter-weight sibling of .lifecycle-step
   (rule-separated rows instead of a boxed grid), for a page whose steps run
   in a strict sequence rather than sitting side by side as equal cards. */
.step-list {
    margin: 28px 0 0;
    display: grid;
    gap: 0;
}

.step-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid var(--rule);
}

.step-item:last-child {
    border-bottom: 1px solid var(--rule);
}

.step-item .num {
    font-family: var(--display);
    font-size: 20px;
    color: var(--clay);
    font-variation-settings: "opsz" 14;
}

.step-item h3 {
    font-size: 18px;
}

.step-item p {
    font-size: 14px;
    color: rgba(15, 31, 23, .7);
    margin-top: 6px;
    max-width: 52ch;
}

/* Text-and-visual split: prose on one side, a real screenshot or the
   .custom-visual/.blueprint config mock on the other (both already styled
   above; this only supplies the two-column track). */
.page-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

@media (min-width: 880px) {
    .page-split {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
}

.page-split .screen {
    margin: 0;
}

/* A closing note after a split reads as an afterthought without a little
   more air above it than .page-note's default. */
.page-split + .page-note {
    margin-top: 40px;
}

@media (max-width: 640px) {
    .step-item { grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; }
}

/* Industry pages (A3, Task 3) -----------------------------------------------
   Three pages sharing the /features/* .page-hero shell for the hero only.
   Below the hero each gets its own shape, different from the four feature
   pages (chip-list, shot+step-list, split, split+prose) and from each other:
   a dark proof block + horizontal chain for agencies, a three-card grid for
   technical companies, a label/value fact sheet for B2B. None of the three
   carries a screenshot — the header logo already satisfies "every page has
   an image", and these pages have real data to state, not a UI to show. */

/* industries/agencies — dark ground, echoing .origin/.cta-final: the claim
   here ("we run it on ourselves") is the same kind of claim as the origin
   story, so it reads better signed than boxed. */
.industry-proof {
    background: var(--ink);
    padding: clamp(56px, 8vw, 96px) 0;
}

.industry-proof .eyebrow {
    color: var(--mint);
}

.industry-proof h2 {
    color: var(--paper);
    max-width: 24ch;
    margin-top: 16px;
}

.industry-intro {
    margin-top: 20px;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.6;
    max-width: 62ch;
    color: rgba(245, 248, 246, .82);
}

.industry-intro a {
    color: var(--mint);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stat-row {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 700px) {
    .stat-row { grid-template-columns: repeat(3, 1fr); }
}

.stat-item {
    border-top: 1px solid rgba(245, 248, 246, .22);
    padding-top: 18px;
}

.stat-value {
    font-family: var(--display);
    font-size: clamp(34px, 4.4vw, 50px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mint);
}

.stat-label {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.45;
    max-width: 26ch;
    color: rgba(245, 248, 246, .88);
}

.stat-meta {
    margin: 8px 0 0;
    font-size: 12px;
    letter-spacing: .04em;
    color: rgba(245, 248, 246, .5);
    max-width: 30ch;
}

/* A horizontal chain rather than the vertical .step-list on /features/projects:
   these four areas sit side by side because they are simultaneous parts of
   one system, not a sequence with a start and an end the way the six real
   project phases are. */
.flow-chain {
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 900px) {
    .flow-chain { grid-template-columns: repeat(4, 1fr); }
}

.chain-step {
    padding: 20px 0;
    border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
    .chain-step { border-top: 0; border-left: 1px solid var(--rule); padding: 2px 24px; }
    .chain-step:first-child { border-left: 0; padding-left: 0; }
}

.chain-step h3 {
    font-size: 16px;
    margin: 0 0 6px;
}

.chain-step p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(15, 31, 23, .7);
    margin: 0;
    max-width: 40ch;
}

/* industries/technical — three even cards. Unlike .caps-grid on the home
   page these are not a features catalogue with a featured/wide hierarchy;
   they are the same three system areas (requests, projects, invoicing) a
   technical company's work already touches, so three equal cards is the
   honest shape rather than a ranked one. */
.trio-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 760px) {
    .trio-grid { grid-template-columns: repeat(3, 1fr); }
}

.trio-card {
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 28px 24px;
    background: var(--paper-2);
}

.trio-card h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.trio-card p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(15, 31, 23, .72);
    margin: 0;
}

/* industries/b2b — a label/value spec sheet: rows, not cards, because this
   page states fixed parts of one machine (channels, stages, proposals,
   KPIs), not interchangeable features. */
.fact-list {
    margin: 36px 0 0;
    display: grid;
    gap: 0;
}

.fact-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 22px 0;
    border-top: 1px solid var(--rule);
}

.fact-row:last-child {
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 720px) {
    .fact-row {
        grid-template-columns: 220px 1fr;
        gap: 24px;
        align-items: baseline;
    }
}

.fact-row dt {
    font-family: var(--display);
    font-size: 17px;
    color: var(--moss);
}

.fact-row dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(15, 31, 23, .78);
    max-width: 58ch;
}

@media (max-width: 640px) {
    .industry-proof { padding: 48px 0; }
    .trio-grid { gap: 18px; }
}

/* Task 4 (A3) — internal linking between the seven keyword pages and the
   home page. This block sits on all seven differently-shaped pages plus the
   home page, so it is deliberately quiet: a small caps label and a row of
   wrapped pill links, reusing the .chip-list pill shape rather than a new
   card/grid treatment — it must read as navigation, not as an eighth
   feature section that makes every page look alike again. */
.related-pages {
    border-top: 1px solid var(--rule);
    padding: clamp(40px, 6vw, 64px) 0;
}

.related-pages-title {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--moss-2);
    margin: 0 0 18px;
}

.related-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.related-pages-list a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--moss);
    background: var(--paper-2);
    transition: border-color .15s ease, color .15s ease;
}

.related-pages-list a:hover,
.related-pages-list a:focus-visible {
    border-color: var(--moss-2);
    color: var(--moss-2);
}

.related-pages-home {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--moss-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Blog (Task 2) --------------------------------------------------------
   Index: a card grid reusing .page-hero/.page-lede/.page-block from the
   keyword pages above rather than a new hero treatment. Show: the same
   hero shell plus a dedicated .article-body typography scope — the only
   page on the site rendering long-form prose, so it needs real paragraph
   spacing and styled h2/h3/ul/ol/blockquote/a where nothing else does. */

.blog-list {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--paper-2);
    transition: border-color .2s ease, transform .2s ease;
}

.blog-card-link:hover,
.blog-card-link:focus-visible {
    border-color: var(--moss-2);
    transform: translateY(-2px);
}

.blog-card-date {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mint-deep);
}

.blog-card-title {
    margin: 10px 0 0;
    font-size: 19px;
    line-height: 1.3;
    color: var(--ink);
}

.blog-card-excerpt {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(15, 31, 23, .72);
    flex: 1;
}

.blog-card-more {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--moss);
}

.blog-pagination {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.blog-pagination-status {
    font-size: 13.5px;
    color: rgba(15, 31, 23, .6);
}

@media (max-width: 900px) {
    .blog-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .blog-list { grid-template-columns: 1fr; gap: 18px; }
    .blog-pagination { flex-wrap: wrap; }
}

/* Article show page */
.article-hero { padding-bottom: clamp(24px, 4vw, 40px); }

.article-back {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--moss-2);
}

.article-meta {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(15, 31, 23, .6);
}

.article-meta-sep {
    margin: 0 8px;
}

.article-body-block { padding-top: 0; }

/* Scoped to .article-body so these tag styles cannot leak into the rest of
   the site — nowhere else renders raw article HTML. ~68ch keeps the measure
   readable for long-form Greek prose. */
.article-body {
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
}

.article-body > :first-child {
    margin-top: 0;
}

.article-body p {
    margin: 0 0 22px;
}

.article-body h2 {
    margin: 44px 0 18px;
    font-family: var(--display);
    font-size: 26px;
    line-height: 1.3;
    color: var(--ink);
}

.article-body h3 {
    margin: 36px 0 14px;
    font-family: var(--display);
    font-size: 20px;
    line-height: 1.35;
    color: var(--ink);
}

.article-body ul,
.article-body ol {
    margin: 0 0 22px;
    padding-left: 1.3em;
}

.article-body li {
    margin: 0 0 8px;
}

.article-body li:last-child {
    margin-bottom: 0;
}

.article-body blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--mint-deep);
    color: rgba(15, 31, 23, .78);
    font-style: italic;
}

.article-body a {
    color: var(--moss-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body a:hover,
.article-body a:focus-visible {
    color: var(--ink);
}

.article-body img {
    margin: 28px 0;
    border-radius: 10px;
}

/* Task (A3 depth pass) --------------------------------------------------
   The seven thin pages each get real depth added in their own shape, so the
   handful of new components below are deliberately narrow: a 2-card variant
   of the existing .trio-card chrome (ticketing's direct-vs-quote-first
   compare), a real comparison table (technical — the one page that gets a
   table, so it doesn't become a second copy of a card grid), and a spacer
   for stacking two .chip-list groups under their own sub-heading (projects'
   type/status/priority block). FAQ reuses .faq-list/details.faq as-is. */

.duo-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 620px) {
    .duo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.chip-group {
    margin-top: 28px;
}

.chip-group + .chip-group {
    margin-top: 24px;
}

.chip-group-label {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--moss-2);
    margin: 0 0 10px;
}

.spec-table-wrap {
    margin-top: 32px;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 14px;
}

.spec-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    background: var(--paper-2);
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.5;
}

.spec-table thead th {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 400;
    color: var(--moss);
    border-bottom: 1px solid var(--rule-strong);
}

.spec-table tbody th {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    border-top: 1px solid var(--rule);
}

.spec-table tbody td {
    color: rgba(15, 31, 23, .75);
    border-top: 1px solid var(--rule);
}

/* Bank partner marks ------------------------------------------------------
   Quieter than the client marquee above it: this is a credential, not a
   customer list, and it should read as a footnote to the logos rather than
   competing with them. */
.clients-partners {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.clients-partners-line {
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(15, 31, 23, .6);
}

.clients-partners-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.clients-partners-marks img {
    height: 30px;
    width: auto;          /* the two marks have very different aspect ratios */
    opacity: .85;
    transition: opacity .25s ease;
}

.clients-partners-marks img:hover { opacity: 1; }

@media (max-width: 640px) {
    .clients-partners-marks { gap: 24px; }
    .clients-partners-marks img { height: 26px; }
}

/* Sector capability lists ------------------------------------------------- */
.industry-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    max-width: 62ch;
}

.industry-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(15, 31, 23, .82);
}

.industry-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint-deep);
}

.industry-list strong { color: var(--ink); }

.industry-note {
    margin-top: 26px;
    font-size: 14px;
    color: rgba(15, 31, 23, .62);
    max-width: 54ch;
}