/* ==========================================================
   Creative Idea V2 - design layer
   Loaded after main.css. Re-points the old tokens to the V2
   palette (so inner pages follow), restyles header/footer and
   holds the new home page.

   Direction: "drafted, then built". The site is about seeing a
   real design before you pay, so the visual language is the
   drafting table: deep logo-blue ink, cool paper, fine sky-blue
   lines, one pencil-yellow mark for the moment of drawing.
   ========================================================== */

:root {
    /* V2 palette (derived from the logo: #086AA1 / #74C5EB) */
    --ink: #071c2b;
    --ink-2: #0c2a3f;
    --ink-line: rgba(116, 197, 235, 0.18);
    --paper: #eaf1f5;
    --paper-2: #dfe9ef;
    --paper-line: rgba(7, 28, 43, 0.14);
    --brand: #086aa1;
    --sky: #74c5eb;
    --pencil: #f5c542;
    --on-ink: #f2f7fa;
    --on-ink-2: rgba(242, 247, 250, 0.74);
    --on-paper: #071c2b;
    --on-paper-2: #3d5566;

    /* Type */
    --font-display: 'Unbounded', 'Jost', sans-serif;
    --font-body: 'Commissioner', system-ui, sans-serif;

    /* Motion */
    --ease-draft: cubic-bezier(0.65, 0, 0.35, 1);   /* pen strokes */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* reveals */
    --t-ui: 220ms;
    --t-reveal: 700ms;

    /* Old tokens re-pointed so every inner page picks up V2 */
    --primary-dark: var(--ink-2);
    --primary-darker: var(--ink);
    --accent-blue: var(--sky);
    --accent-green: #9fd9f2;
    --accent-teal: var(--sky);
    --card-bg: rgba(12, 42, 63, 0.72);
    --card-bg-hover: rgba(16, 52, 77, 0.9);
    --text-primary: var(--on-ink);
    --text-secondary: var(--on-ink-2);
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 14px;
    --glow-blue: none;
    --glow-green: none;
}

/* ── Base ─────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background-color: var(--ink);
    color: var(--on-ink-2);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--on-ink);
}
h1 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    background: none;
    -webkit-text-fill-color: currentColor;
}
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }

a { color: var(--sky); }

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

/* Buttons: flat, confident, no glow */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--border-radius-md);
    padding: 14px 26px;
    transition: background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--sky);
    color: var(--ink);
    box-shadow: none;
}
.btn-primary:hover { background: #a3d9f2; color: var(--ink); transform: none; box-shadow: none; }
.btn-outline {
    background: transparent;
    color: var(--on-ink);
    border: 1px solid rgba(242, 247, 250, 0.4);
}
.btn-outline:hover { background: rgba(242, 247, 250, 0.08); border-color: var(--on-ink); color: var(--on-ink); }

/* ── Header ───────────────────────────────────────── */
header {
    background: rgba(7, 28, 43, 0.72);
    border-bottom: 1px solid transparent;
    padding: 16px 0;
}
header.scrolled {
    background: rgba(7, 28, 43, 0.94);
    border-bottom-color: var(--ink-line);
    box-shadow: none;
    padding: 12px 0;
}
.main-nav li a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
}
.main-nav li a:after { background: var(--sky); height: 1px; }
.lang-switch {
    border: 1px solid var(--ink-line) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.main-nav .dropdown {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    box-shadow: 0 18px 40px rgba(3, 12, 19, 0.45);
}

/* ── Footer ───────────────────────────────────────── */
footer {
    background: var(--ink-2);
    border-top: 1px solid var(--ink-line);
}
footer h3 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-ink);
}
footer h3::after { display: none; }

/* ── Floating widgets (styles are inline in the body, so selectors go one level deeper) ── */
.floating-widgets .fw-toggle {
    background: var(--sky);
    color: var(--ink);
    box-shadow: 0 10px 28px -8px rgba(3, 12, 19, 0.6);
}
.floating-widgets .fw-chat .fw-icon,
.floating-widgets .fw-email .fw-icon,
body .chatbot-avatar { background: var(--brand); }
.floating-widgets .fw-label small { color: var(--sky); }
body .chatbot-header { background: var(--ink-2); border-bottom-color: var(--ink-line); }

/* ==========================================================
   HOME (V2)
   ========================================================== */

.v2-section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.v2-paper {
    background: var(--paper);
    color: var(--on-paper-2);
}
.v2-paper h2, .v2-paper h3 { color: var(--on-paper); }
/* main.css colours every <p> with the on-dark token; paper sections need their own */
.v2-paper p, .v2-paper li, .v2-pkg-col.is-popular p, .v2-pkg-col.is-popular li { color: var(--on-paper-2); }
.v2-mockup p, .v2-packages p { color: var(--on-ink-2); }
.v2-paper a:not(.btn) { color: var(--brand); }
.v2-lead { font-size: 1.125rem; max-width: 56ch; margin: 0; }
.v2-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 720px; }
.v2-head h2 { margin-bottom: 14px; }

/* ── Hero ─────────────────────────────────────────── */
.v2-hero {
    position: relative;
    padding: clamp(120px, 14vw, 168px) 0 clamp(64px, 8vw, 104px);
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--ink);
    overflow: hidden;
}
/* fade the drafting grid out towards the edges so it reads as paper, not pattern */
.v2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 70% 40%, transparent 30%, var(--ink) 78%);
    pointer-events: none;
}
.v2-hero .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    max-width: 1200px; /* same edge as the header and every section */
}
.v2-hero h1 { margin: 0 0 22px; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.1; }
.v2-hero-sub { font-size: 1.15rem; max-width: 46ch; margin: 0 0 32px; color: var(--on-ink-2); }
.v2-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-facts {
    list-style: none;
    margin: 40px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ink-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    max-width: 520px;
}
.v2-facts li { font-size: 0.95rem; color: var(--on-ink); padding-left: 18px; position: relative; }
.v2-facts li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.6em;
    width: 8px; height: 1px;
    background: var(--sky);
}

/* The stage: a browser frame where the sketch becomes the real site */
.v2-stage { margin: 0; }
.v2-frame {
    position: relative;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(116, 197, 235, 0.25);
    overflow: hidden;
    transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
    transform-origin: 30% 50%;
    transition: transform 900ms var(--ease-out);
}
.v2-stage:hover .v2-frame { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.v2-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: #e4ecf1;
    border-bottom: 1px solid #d3dee5;
}
.v2-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c3d1da; font-style: normal; }
.v2-frame-bar span {
    margin-left: 10px;
    font-size: 0.75rem;
    color: #5a7282;
    background: #fff;
    border-radius: 4px;
    padding: 2px 10px;
}
.v2-canvas { position: relative; aspect-ratio: 1350 / 1012; background: #f6f9fb; }
.v2-shot {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: top;
    clip-path: inset(0 0 0 0);
}
.v2-sketch {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    fill: none;
    stroke: var(--brand);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}
.v2-sketch .fill { fill: rgba(8, 106, 161, 0.06); }
.v2-pen {
    position: absolute;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pencil);
    box-shadow: 0 0 0 6px rgba(245, 197, 66, 0.25);
    opacity: 0;
    pointer-events: none;
}
.v2-stage-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--on-ink-2);
}
.v2-stage-caption .cap { position: relative; display: grid; }
.v2-stage-caption .cap > span { grid-area: 1 / 1; transition: opacity 400ms ease; }
.v2-stage-caption .cap-sketch { opacity: 0; color: var(--pencil); }
.v2-replay {
    font: inherit;
    font-size: 0.85rem;
    color: var(--sky);
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(116, 197, 235, 0.4);
}
.v2-replay:hover { text-decoration-color: var(--sky); }
.v2-replay[hidden] { display: none; }

/* Sketch state. html.js-motion is set inline before the hero renders;
   without JS (or with reduced motion) the finished site simply shows. */
.js-motion .v2-stage:not(.is-live) .v2-shot { clip-path: inset(0 0 100% 0); }
.js-motion .v2-stage.is-ready:not(.is-live) .v2-sketch { opacity: 1; }
.js-motion .v2-stage .v2-sketch path,
.js-motion .v2-stage .v2-sketch rect,
.js-motion .v2-stage .v2-sketch line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js-motion .v2-stage:not(.is-live) .cap-sketch { opacity: 1; }
.js-motion .v2-stage:not(.is-live) .cap-live { opacity: 0; }

.v2-stage.is-drawing .v2-sketch path,
.v2-stage.is-drawing .v2-sketch rect,
.v2-stage.is-drawing .v2-sketch line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-draft);
    transition-delay: calc(var(--i) * 110ms);
}
.v2-stage.is-drawing .v2-pen { opacity: 1; transition: opacity 200ms ease; }

.v2-stage.is-live .v2-shot { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-out); }
.v2-stage.is-live .v2-sketch { opacity: 0; transition: opacity 600ms ease 500ms; }
.v2-stage.is-live .v2-sketch path,
.v2-stage.is-live .v2-sketch rect,
.v2-stage.is-live .v2-sketch line { stroke-dashoffset: 0; }
.v2-stage.is-live .cap-sketch { opacity: 0; }
.v2-stage.is-live .cap-live { opacity: 1; }

/* Hero copy arrives with the drawing: one sequence, not many */
.js-motion .v2-hero-copy > * { opacity: 0; transform: translateY(14px); }
.js-motion .v2-hero.is-in .v2-hero-copy > * {
    opacity: 1; transform: none;
    transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.js-motion .v2-hero.is-in .v2-hero-copy > :nth-child(2) { transition-delay: 90ms; }
.js-motion .v2-hero.is-in .v2-hero-copy > :nth-child(3) { transition-delay: 180ms; }
.js-motion .v2-hero.is-in .v2-hero-copy > :nth-child(4) { transition-delay: 270ms; }

/* ── Why ──────────────────────────────────────────── */
.v2-why .container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.v2-why-head { position: sticky; top: 120px; }
.v2-why-head h2 { margin-bottom: 18px; }
.v2-why-list { list-style: none; margin: 0; padding: 0; }
.v2-why-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 28px 0;
    border-top: 1px solid var(--paper-line);
}
.v2-why-list li:last-child { border-bottom: 1px solid var(--paper-line); }
.v2-why-list i { grid-row: span 2; color: var(--brand); font-size: 1.25rem; padding-top: 4px; }
.v2-why-list h3 { margin: 0; }
.v2-why-list p { margin: 0; }
.v2-migrate {
    margin: 28px 0 0;
    padding: 18px 20px;
    border-radius: var(--border-radius-md);
    background: var(--paper-2);
    color: var(--on-paper);
}

/* ── Work ─────────────────────────────────────────── */
.v2-work { background: var(--ink); }
.v2-work-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    flex-wrap: wrap;
}
.v2-work-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}
.v2-work-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--ink-2);
    color: var(--on-ink);
    text-decoration: none;
}
.v2-work-item:first-child { grid-row: span 2; }
.v2-work-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top;
    transition: transform 1200ms var(--ease-out);
}
.v2-work-item:first-child img { aspect-ratio: auto; min-height: 100%; }
.v2-work-item:hover img { transform: scale(1.03); }
.v2-work-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 96px 24px 20px;
    background: linear-gradient(rgba(7, 28, 43, 0), rgba(7, 28, 43, 0.88) 55%, var(--ink));
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}
.v2-work-meta strong { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; display: block; }
.v2-work-meta span { font-size: 0.9rem; color: var(--on-ink-2); }
.v2-work-meta em { font-style: normal; font-size: 0.9rem; color: var(--sky); white-space: nowrap; }

/* Single scroll moment for the work: images unmask from the bottom edge */
.js-motion .v2-work-item { clip-path: inset(18% 0 0 0 round 14px); opacity: 0.001; }
.js-motion .v2-work-item.is-in {
    clip-path: inset(0 0 0 0 round 14px);
    opacity: 1;
    transition: clip-path 1000ms var(--ease-out), opacity 500ms ease;
}
.js-motion .v2-work-item.is-in:nth-child(2) { transition-delay: 120ms; }
.js-motion .v2-work-item.is-in:nth-child(3) { transition-delay: 240ms; }

/* ── Process (a real sequence, so it is numbered) ─── */
.v2-steps {
    --p: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    position: relative;
}
.v2-steps::before,
.v2-steps::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 19px;
    height: 2px;
    background: var(--paper-line);
}
.v2-steps::after {
    background: var(--brand);
    transform-origin: left;
    transform: scaleX(var(--p));
}
.v2-steps li { position: relative; padding-top: 0; }
.v2-step-n {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--paper-line);
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--on-paper);
    margin-bottom: 22px;
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.v2-steps li.is-on .v2-step-n { background: var(--brand); border-color: var(--brand); color: #fff; }
.v2-steps h3 { margin: 0 0 8px; }
.v2-steps p { margin: 0; font-size: 1rem; }

/* ── Packages ─────────────────────────────────────── */
.v2-packages { background: var(--ink); }
.v2-pkg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--ink-line);
    border-radius: var(--border-radius-lg);
}
.v2-pkg-col {
    display: flex;
    flex-direction: column;
    padding: 32px 26px 28px;
    border-left: 1px solid var(--ink-line);
}
.v2-pkg-col:first-child { border-left: 0; }
.v2-pkg-col.is-popular {
    background: var(--paper);
    color: var(--on-paper-2);
    border-radius: var(--border-radius-lg);
    margin: -10px 0;
    padding-top: 42px;
    padding-bottom: 38px;
    border-left: 0;
    position: relative;
    z-index: 1;
}
.v2-pkg-col.is-popular + .v2-pkg-col { border-left: 0; }
.v2-pkg-col.is-popular h3, .v2-pkg-col.is-popular .v2-pkg-price { color: var(--on-paper); }
.v2-pkg-tag {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--on-paper);
    background: var(--pencil);
    border-radius: 999px;
    padding: 3px 10px;
    margin: -22px 0 12px;
}
.v2-pkg-col h3 { margin: 0 0 6px; }
.v2-pkg-for { font-size: 0.95rem; margin: 0 0 22px; min-height: 3em; }
.v2-pkg-price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--on-ink);
    margin: 0 0 6px;
}
.v2-pkg-price small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; margin-right: 6px; opacity: 0.75; }
.v2-pkg-days { font-size: 0.9rem; margin: 0 0 22px; }
.v2-pkg-col ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.v2-pkg-col li { padding: 7px 0; font-size: 0.97rem; border-top: 1px solid var(--ink-line); }
.v2-pkg-col.is-popular li { border-top-color: var(--paper-line); }
.v2-pkg-col .btn { width: 100%; }
.v2-pkg-col.is-popular .btn-primary { background: var(--ink); color: var(--on-ink); }
.v2-pkg-col.is-popular .btn-primary:hover { background: var(--brand); }
.v2-pkg-note { margin: 28px 0 0; font-size: 0.95rem; max-width: 70ch; }

/* ── Services ─────────────────────────────────────── */
.v2-services-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-line); }
.v2-services-list a {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
    gap: 12px 40px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--paper-line);
    color: var(--on-paper-2) !important;
    text-decoration: none;
    transition: padding var(--t-ui) var(--ease-out), background-color var(--t-ui) ease;
}
.v2-services-list h3 { margin: 0; transition: color var(--t-ui) ease; }
.v2-services-list p { margin: 0; font-size: 1rem; }
.v2-services-list i { color: var(--brand); transition: transform var(--t-ui) var(--ease-out); }
.v2-services-list a:hover h3 { color: var(--brand); }
.v2-services-list a:hover i { transform: translateX(4px); }
.v2-services-extra { margin: 28px 0 0; }

/* ── Blog ─────────────────────────────────────────── */
.v2-blog { padding-top: 0; }
.v2-blog-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.v2-post { display: block; text-decoration: none; color: var(--on-paper-2) !important; }
.v2-post img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    margin-bottom: 16px;
    background: var(--paper-2);
}
.v2-post time { font-size: 0.85rem; }
.v2-post h3 { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.35; }
.v2-post:hover h3 { color: var(--brand); }

/* ── Mockup form (the conversion) ─────────────────── */
.v2-mockup {
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--ink);
}
.v2-mockup::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 80% at 75% 50%, transparent 20%, var(--ink) 70%);
    pointer-events: none;
}
.v2-mockup .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}
.v2-mockup h2 { margin-bottom: 18px; }
.v2-mockup-points { list-style: none; margin: 28px 0 0; padding: 0; }
.v2-mockup-points li { padding: 10px 0; border-top: 1px solid var(--ink-line); color: var(--on-ink); }
.v2-form {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--border-radius-lg);
    padding: clamp(22px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.v2-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--on-ink-2); }
.v2-form input[type=text], .v2-form input[type=email], .v2-form input[type=tel], .v2-form select, .v2-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(116, 197, 235, 0.28);
    background: var(--ink);
    color: var(--on-ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.v2-form input:focus, .v2-form select:focus, .v2-form textarea:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(116, 197, 235, 0.2);
}
.v2-form select option { background: var(--ink); }
.v2-form .mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-form .mk-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.v2-form .mk-check input { margin-top: 4px; accent-color: var(--sky); }
.v2-form .mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v2-form .btn { align-self: flex-start; }
.v2-form .mk-msg { margin: 0; min-height: 1.4em; font-size: 0.95rem; }
.v2-form .mk-msg.is-ok { color: #8fe0b8; }
.v2-form .mk-msg.is-err { color: #ff9b8f; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    .v2-pkg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-pkg-col:nth-child(3) { border-left: 0; }
    .v2-pkg-col:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
    .v2-pkg-col.is-popular { margin: 0; }
}
@media (max-width: 900px) {
    .v2-hero .container,
    .v2-why .container,
    .v2-mockup .container { grid-template-columns: minmax(0, 1fr); }
    .v2-frame, .v2-stage:hover .v2-frame { transform: none; }
    .v2-why-head { position: static; }
    .v2-work-grid { grid-template-columns: 1fr; }
    .v2-work-item:first-child { grid-row: auto; }
    .v2-work-item:first-child img { aspect-ratio: 16 / 11; min-height: 0; }
    .v2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .v2-steps::before, .v2-steps::after { display: none; }
    .v2-services-list a { grid-template-columns: minmax(0, 1fr) auto; }
    .v2-services-list p { grid-column: 1; }
    .v2-services-list i { grid-row: 1; grid-column: 2; }
    .v2-blog-row { grid-template-columns: minmax(0, 1fr); }
    .v2-post { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
    .v2-post img { margin: 0; }
}
@media (max-width: 600px) {
    .v2-hero { padding-top: 104px; }
    .v2-facts { grid-template-columns: minmax(0, 1fr); }
    .v2-hero-ctas .btn { flex: 1 1 100%; }
    .v2-pkg { grid-template-columns: minmax(0, 1fr); }
    .v2-pkg-col { border-left: 0 !important; border-top: 1px solid var(--ink-line); }
    .v2-pkg-col:first-child { border-top: 0; }
    .v2-pkg-for { min-height: 0; }
    .v2-steps { grid-template-columns: minmax(0, 1fr); }
    .v2-form .mk-row { grid-template-columns: minmax(0, 1fr); }
    .v2-form .btn { align-self: stretch; }
    .v2-work-meta em { display: none; }
}

/* ── Reduced motion: final states, no travel ──────── */
@media (prefers-reduced-motion: reduce) {
    .v2-frame, .v2-stage:hover .v2-frame { transform: none; transition: none; }
    .v2-work-item img, .v2-work-item:hover img { transition: none; transform: none; }
    .v2-steps::after { transition: none; }
}

/* ==========================================================
   V2 SKIN - inner pages
   Restyles the shared legacy components so every page speaks
   the same language as the home page. Scoped under body.v2-skin
   so it wins over the per-page inline <style> blocks.
   ========================================================== */

/* ── Page-to-page transition (cross-document View Transitions) ── */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 240ms ease both v2-vt-out; }
::view-transition-new(root) { animation: 520ms var(--ease-out) both v2-vt-in; }
@keyframes v2-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes v2-vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Scroll pen ───────────────────────────────────── */
.v2-scrollpen {
    --p: 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1002;
    pointer-events: none;
    background: var(--sky);
    transform-origin: left;
    transform: scaleX(var(--p));
}

/* ── Typography clean-up: no gradient text anywhere ── */
.v2-skin :is(h1, h2, h3, h4, .hero-title, .stat-number, .gradient-text, h1 span, h2 span) {
    background: none;
    -webkit-text-fill-color: currentColor;
}
.v2-skin h4 { font-family: var(--font-body); font-weight: 600; }
.v2-skin .lead { font-size: 1.15rem; color: var(--on-ink-2); }

/* ── Inner hero ───────────────────────────────────── */
.v2-skin .hero:not(.v2-hero),
.v2-skin .katalog-hero,
.v2-skin .katalog-cat-hero,
.v2-skin .qrg-hero,
.v2-skin .city-hero {
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--ink);
    position: relative;
}
.v2-skin .hero:not(.v2-hero) {
    min-height: 0;
    padding: clamp(128px, 14vw, 172px) 0 clamp(72px, 8vw, 112px);
}
.v2-skin .hero:not(.v2-hero)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 70% 40%, transparent 30%, var(--ink) 80%);
    pointer-events: none;
    z-index: 0;
}
.v2-skin .hero .circle,
.v2-skin .hero .hero-bg-image,
.v2-skin .hero .hero-overlay,
.v2-skin .hero .hero-bg-elements { display: none; }
.v2-skin .hero:not(.v2-hero) .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    max-width: 1200px;
}
.v2-skin .hero:not(.v2-hero) .hero-content { max-width: none; margin: 0; min-width: 0; text-align: left; opacity: 1; transform: none; }
.v2-skin .hero:not(.v2-hero) .hero-content:only-child { grid-column: 1 / -1; max-width: 860px; }
.v2-skin .hero:not(.v2-hero) h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.8rem);
    line-height: 1.08;
    margin: 0 0 22px;
    animation: none;
    color: var(--on-ink);
}
.v2-skin .hero:not(.v2-hero) .hero-content > p,
.v2-skin .hero:not(.v2-hero) .hero-subtitle { font-size: 1.15rem; max-width: 52ch; animation: none; opacity: 1; color: var(--on-ink-2); }
/* the wrapper only: the <img> carries .hero-image too */
.v2-skin .hero div.hero-image { max-width: none; min-width: 0; margin: 0; animation: none; filter: none; }
.v2-skin .hero .hero-image img { animation: none; }
.v2-skin .hero .hero-buttons { animation: none; opacity: 1; }

/* Breadcrumb + project facts */
.v2-skin .breadcrumb { font-size: 0.88rem; color: var(--on-ink-2); display: flex; gap: 8px; flex-wrap: wrap; background: none; padding: 0; }
.v2-skin .breadcrumb a { color: var(--sky); }
.v2-skin .breadcrumb .separator { opacity: 0.5; }
.v2-skin .project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-line);
}
.v2-skin .project-meta .meta-item { background: none; border: 0; padding: 0; font-size: 0.95rem; }
.v2-skin .project-meta strong { display: block; font-weight: 500; font-size: 0.8rem; color: var(--on-ink-2); }
.v2-skin .project-meta span { color: var(--on-ink); }

/* Headline words rise from a mask (set up by v2-motion.js) */
.v2-split .v2-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.v2-split .v2-w > span { display: inline-block; }
.js-motion .v2-hero-enter .v2-split .v2-w > span { transform: translateY(105%); }
.js-motion .v2-hero-enter.is-in .v2-split .v2-w > span {
    transform: none;
    transition: transform 900ms var(--ease-out);
    transition-delay: calc(var(--i) * 45ms + 80ms);
}
.js-motion .v2-hero-enter .hero-content > :not(h1) { opacity: 0; transform: translateY(12px); }
.js-motion .v2-hero-enter.is-in .hero-content > :not(h1) {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease-out) 450ms, transform 700ms var(--ease-out) 450ms;
}

/* Hero picture: drafting plate (photos) */
.v2-plate { position: relative; padding: 22px; will-change: transform; }
.v2-plate .v2-plate-media { position: relative; overflow: hidden; border-radius: 10px; }
.v2-skin .v2-plate .v2-plate-media img {
    display: block;
    width: 100%;
    max-width: none;
    border-radius: 0;
    /* one-colour treatment so every stock photo reads as part of the same drawing set */
    filter: grayscale(1) sepia(0.35) hue-rotate(165deg) saturate(1.7) brightness(0.98) contrast(1.06);
}
.v2-mark {
    position: absolute;
    width: 22px; height: 22px;
    border-color: var(--sky);
    border-style: solid;
    border-width: 0;
    opacity: 0.8;
}
.v2-mark-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.v2-mark-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.v2-mark-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.v2-mark-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Hero picture: client site in a browser frame */
.v2-site-frame { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.v2-site:hover .v2-site-frame { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.v2-viewport { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.v2-viewport img { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; will-change: transform; }

/* The pen sweep that drafts the picture in */
.v2-sweep {
    position: absolute;
    left: -2%; right: -2%;
    top: 0;
    height: 2px;
    background: var(--pencil);
    box-shadow: 0 0 0 4px rgba(245, 197, 66, 0.18), 0 0 24px rgba(245, 197, 66, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.js-motion :is(.v2-plate, .v2-site):not(.is-drawn) :is(.v2-plate-media, .v2-viewport) > img { clip-path: inset(0 0 100% 0); }
.js-motion :is(.v2-plate, .v2-site).is-drawn :is(.v2-plate-media, .v2-viewport) > img { clip-path: inset(0 0 0 0); transition: clip-path 1300ms var(--ease-draft); }
.js-motion :is(.v2-plate, .v2-site).is-drawn .v2-sweep { animation: v2-sweep 1300ms var(--ease-draft) forwards; }
@keyframes v2-sweep {
    0% { top: 0; opacity: 1; }
    92% { top: 100%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.js-motion .v2-plate:not(.is-drawn) .v2-mark { opacity: 0; transform: scale(1.6); }
.js-motion .v2-plate.is-drawn .v2-mark { transition: opacity 500ms ease, transform 700ms var(--ease-out); }

/* ── Section headings: left-aligned with a pen stroke ── */
.v2-skin .section-header { text-align: left; max-width: 780px; margin: 0 0 clamp(36px, 5vw, 56px); }
.v2-skin .section-header h2 { display: block; margin-bottom: 0; }
.v2-skin .section-header :is(h2, p, span, .section-subtitle) { text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .section-header h2:after {
    left: 0;
    bottom: -14px;
    width: 56px;
    height: 2px;
    border-radius: 0;
    background: var(--sky);
    transform: none;
    transform-origin: left;
}
.v2-skin .section-header p { margin: 30px 0 0; font-size: 1.1rem; max-width: 60ch; color: var(--on-ink-2); }
.js-motion .section-header[data-reveal]:not(.is-in) h2:after { transform: scaleX(0); }
.js-motion .section-header[data-reveal].is-in h2:after { transition: transform 900ms var(--ease-draft) 250ms; }

/* Generic reveal */
.js-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }
.js-motion [data-reveal].is-in { transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }

/* Card grids rise as one group */
.js-motion [data-reveal-group]:not(.is-in) > * { opacity: 0; transform: translateY(28px); }
.js-motion [data-reveal-group].is-in > * {
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), border-color var(--t-ui) ease;
    transition-delay: calc(var(--d, 0) * 70ms);
}

/* Large images unmask upwards */
.js-motion img.v2-unmask:not(.is-in) { clip-path: inset(14% 0 0 0); opacity: 0.001; }
.js-motion img.v2-unmask.is-in { transition: clip-path 1100ms var(--ease-out), opacity 500ms ease; }

/* ── Cards: one family ────────────────────────────── */
.v2-skin :is(.feature-item, .step-card, .industry-card, .service-card, .benefit-item, .stat-box, .tech-item,
    .portfolio-card, .hover-card, .pricing-card-enhanced, .detail-item, .trust-item, .tech-category-card,
    .stat-item, .custom-accordion-item, .process-step, .value-card, .contact-card, .info-card, .blog-card,
    .pricing-card, .package-card, .why-card) {
    background-color: var(--card-bg);
    background-image: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(116, 197, 235, 0.09), transparent 60%);
    border: 1px solid var(--ink-line);
    border-radius: var(--border-radius-lg);
    box-shadow: none;
    backdrop-filter: none;
}
.v2-skin :is(.feature-item, .step-card, .industry-card, .service-card, .benefit-item, .tech-item, .portfolio-card,
    .hover-card, .pricing-card-enhanced, .tech-category-card, .process-step, .value-card, .blog-card, .pricing-card,
    .package-card, .why-card):hover {
    border-color: rgba(116, 197, 235, 0.42);
    box-shadow: none;
    transform: translateY(-2px);
}
.v2-skin :is(.industry-card-header, .pricing-card-header) { background: transparent; border-bottom: 1px solid var(--ink-line); }
.v2-skin :is(.service-card, .industry-card, .feature-item)::before { display: none; }

/* Icons: outlined, not gradient tiles */
.v2-skin :is(.feature-icon, .benefit-icon, .industry-icon-wrapper, .service-icon, .step-icon, .stat-icon, .package-icon,
    .icon-box, .why-icon, .contact-icon, .tech-icon) {
    background: rgba(116, 197, 235, 0.07);
    border: 1px solid var(--ink-line);
    color: var(--sky);
    box-shadow: none;
}
.v2-skin :is(.feature-icon, .benefit-icon, .industry-icon, .service-icon, .step-icon, .stat-icon, .package-icon, .icon-box, .why-icon) i {
    color: var(--sky);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.v2-skin .industry-icon { background: none; box-shadow: none; }
.v2-skin :is(.stat-number, .stat-value) { color: var(--on-ink); font-family: var(--font-display); font-weight: 500; }
.v2-skin .step-number { background: var(--brand); color: #fff; box-shadow: none; }
.v2-skin .step-progress { display: none; }

/* Pills, tags, legacy buttons */
.v2-skin :is(.feature-pill, .feature-tag, .tag, .badge) {
    background: transparent;
    border: 1px solid var(--ink-line);
    color: var(--on-ink-2);
    box-shadow: none;
}
.v2-skin :is(.btn-outline-primary, .filter-button, .cta-btn-secondary) {
    background: transparent;
    border: 1px solid rgba(242, 247, 250, 0.3);
    color: var(--on-ink);
    border-radius: 999px;
    box-shadow: none;
}
.v2-skin :is(.btn-outline-primary, .filter-button):hover { border-color: var(--sky); color: var(--on-ink); background: rgba(116, 197, 235, 0.08); }
.v2-skin :is(.btn-outline-primary, .filter-button).active { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.v2-skin .cta-btn-primary { background: var(--sky); color: var(--ink); box-shadow: none; border-radius: var(--border-radius-md); }

/* Accordions */
.v2-skin .custom-accordion-header { background: transparent; }
.v2-skin .accordion-icon { color: var(--sky); background: none; }

/* ── Closing CTA (includes/cta.php) ───────────────── */
.v2-skin .cta.v2-cta {
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--ink);
    border: 0;
    border-top: 1px solid var(--ink-line);
    padding: clamp(80px, 11vw, 140px) 0;
    text-align: left;
}
.v2-skin .cta.v2-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 90% at 20% 50%, transparent 15%, var(--ink) 75%);
    animation: none;
    opacity: 1;
}
.v2-cta .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: end;
}
.v2-cta h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 0 0 18px; max-width: 18ch; }
.v2-cta p { margin: 0; font-size: 1.1rem; max-width: 52ch; color: var(--on-ink-2); }
.v2-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v2-cta-phone { flex-basis: 100%; margin-top: 8px; color: var(--on-ink-2) !important; font-size: 0.95rem; }
.v2-cta-phone:hover { color: var(--sky) !important; }

/* Calculator total while it rolls */
.v2-ticking { color: var(--pencil) !important; transition: color 200ms ease; }

/* ── Inner pages: responsive ──────────────────────── */
@media (max-width: 900px) {
    .v2-skin .hero:not(.v2-hero) .container { grid-template-columns: minmax(0, 1fr); }
    .v2-skin .hero:not(.v2-hero) div.hero-image { max-width: 460px; width: 100%; }
    .v2-site-frame, .v2-site:hover .v2-site-frame { transform: none; }
    .v2-plate { transform: none !important; }
    .v2-cta .container { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 600px) {
    .v2-skin .hero:not(.v2-hero) { padding-top: 108px; }
    .v2-cta-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-site-frame, .v2-site:hover .v2-site-frame { transform: none; }
}

/* ══ V2 SKIN - pass 2: portfolio, forms, content images ══ */

/* Hero stats: one ruled row instead of floating tiles */
.v2-skin .hero .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid var(--ink-line);
}
.v2-skin .hero .hero-stats .stat-item {
    flex: 1 1 0;
    min-width: 120px;
    background: none;
    border: 0;
    border-left: 1px solid var(--ink-line);
    border-radius: 0;
    padding: 16px 20px 4px;
    text-align: left;
    transform: none;
}
.v2-skin .hero .hero-stats .stat-item:first-child { border-left: 0; padding-left: 0; }
.v2-skin .hero .hero-stats .stat-number { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.v2-skin .hero .hero-stats .stat-label { color: var(--on-ink-2); font-size: 0.9rem; margin-top: 4px; }

/* ── Portfolio grid: every project is a browser window ── */
.v2-pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.4vw, 32px);
}
.v2-pf[hidden] { display: none; }
.v2-pf-link { display: block; color: inherit; text-decoration: none; }
.v2-pf-link:hover, .v2-pf-link:focus-visible { color: inherit; }
.v2-pf-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 6px; border-radius: 14px; }
.v2-skin .v2-pf-frame {
    transform: none;
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(116, 197, 235, 0.22);
    transition: box-shadow 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.v2-pf-frame .v2-frame-bar { height: 28px; }
.v2-pf-frame .v2-frame-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 70%; }
.v2-pf-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f6f9fb; }
.v2-pf-view img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    /* hover scrolls down through the client's page */
    transition: object-position 2600ms var(--ease-draft);
}
.v2-pf-link:hover .v2-pf-view img, .v2-pf-link:focus-visible .v2-pf-view img { object-position: 50% 100%; }
.v2-pf-link:hover .v2-pf-frame {
    transform: translateY(-4px);
    box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(116, 197, 235, 0.55);
}
.v2-pf-meta { position: relative; padding: 18px 2px 0; }
.v2-pf-meta h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; margin: 0 0 6px; color: var(--on-ink); }
.v2-pf-meta p { margin: 0; color: var(--on-ink-2); font-size: 0.95rem; }
.v2-pf-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--sky);
    background: linear-gradient(var(--pencil), var(--pencil)) 0 100% / 0 1px no-repeat;
    padding-bottom: 2px;
    transition: background-size 500ms var(--ease-draft);
}
.v2-pf-link:hover .v2-pf-more { background-size: 100% 1px; }
.v2-pf-empty { margin: 40px 0 0; color: var(--on-ink-2); }
.v2-skin .portfolio-filters { text-align: left !important; margin-left: -8px; }

/* Filter: cards glide to their new places */
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .v2-pf-view img { transition: none; }
}

/* ── Forms: drafted fields ────────────────────────── */
.v2-skin :is(.contact-form-wrapper, .form-container, .booking-form, .mockup-form-wrapper) {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--border-radius-lg);
    box-shadow: none;
    backdrop-filter: none;
}
.v2-skin :is(.form-group, .mb-3, .mb-4) > label,
.v2-skin label.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--on-ink-2);
    letter-spacing: 0;
    text-transform: none;
}
.v2-skin :is(.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], select, textarea):not([type="checkbox"]):not([type="radio"]):not(.v2-field) {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    background-color: rgba(7, 28, 43, 0.65);
    border: 1px solid rgba(116, 197, 235, 0.24);
    border-radius: var(--border-radius-md);
    color: var(--on-ink);
    font: 400 1rem/1.4 var(--font-body);
    box-shadow: none;
    transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease, background-color var(--t-ui) ease;
}
.v2-skin textarea.form-control { min-height: 150px; resize: vertical; }
.v2-skin :is(.form-control, .form-select, select, textarea)::placeholder { color: rgba(242, 247, 250, 0.38); }
.v2-skin :is(.form-control, .form-select, input, select, textarea):hover:not(:focus):not([type="checkbox"]):not([type="radio"]) {
    border-color: rgba(116, 197, 235, 0.42);
}
.v2-skin :is(.form-control, .form-select, input, select, textarea):focus {
    outline: none;
    border-color: var(--sky);
    background-color: rgba(7, 28, 43, 0.9);
    box-shadow: 0 0 0 3px rgba(116, 197, 235, 0.18), inset 0 -2px 0 var(--pencil);
    color: var(--on-ink);
}
.v2-skin select.form-control, .v2-skin .form-select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2374c5eb' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.v2-skin select option { background: var(--ink-2); color: var(--on-ink); }
.v2-skin .form-check-input {
    width: 1.15em; height: 1.15em;
    background-color: transparent;
    border: 1px solid rgba(116, 197, 235, 0.5);
    box-shadow: none;
}
.v2-skin .form-check-input:checked { background-color: var(--sky); border-color: var(--sky); }
.v2-skin .form-check-label { color: var(--on-ink-2); }
.v2-skin :is(.contact-form, form) .btn-primary,
.v2-skin :is(.contact-form, form) button[type="submit"]:not(.v2-btn) {
    background: var(--sky);
    border: 0;
    color: var(--ink);
    border-radius: var(--border-radius-md);
    box-shadow: none;
    font-weight: 600;
}
.v2-skin :is(.contact-form, form) button[type="submit"]:hover:not(.v2-btn) { background: #9fd9f2; transform: translateY(-1px); }

/* ── Content photos: same one-colour drawing set as the hero plates ── */
.v2-skin img.v2-tint { filter: grayscale(1) sepia(0.35) hue-rotate(165deg) saturate(1.7) brightness(0.98) contrast(1.06); }
.v2-skin .rounded.shadow, .v2-skin img.shadow { box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.7) !important; }

/* About: experience badge as a pencil-yellow stamp */
.v2-skin .experience-badge {
    background: var(--pencil);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
    animation: none;
    padding: 18px 22px;
    text-align: left;
    transform: rotate(-3deg);
}
.v2-skin .experience-badge .years { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.v2-skin .experience-badge .text { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }

@media (max-width: 600px) {
    .v2-skin .hero .hero-stats .stat-item { padding: 14px 12px 4px; min-width: 0; }
    .v2-skin .hero .hero-stats .stat-number { font-size: 1.4rem; }
}

/* Case-study stats and hero buttons */
.v2-skin .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v2-skin .stats-grid .stat-box { padding: 20px 22px; }
.v2-skin .stats-grid .stat-number { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; margin-bottom: 6px; }
.v2-skin .stats-grid .stat-label { color: var(--on-ink-2); font-size: 0.9rem; }
.v2-skin .hero-buttons { flex-direction: row; justify-content: flex-start; }
.v2-skin .hero-buttons > .btn { width: auto; flex: 0 0 auto; }
@media (max-width: 600px) { .v2-skin .hero-buttons > .btn { flex: 1 1 100%; } }

/* Legacy .portfolio-card (older case pages' "more projects"): same browser-window card as the portfolio grid */
.v2-skin .portfolio-card {
    height: auto; min-height: 0; aspect-ratio: auto;
    background: none; background-image: none;
    border: 0; border-radius: 0; overflow: visible;
}
.v2-skin .portfolio-card:hover { transform: none; }
.v2-skin .portfolio-card::after { display: none; }
.v2-skin .portfolio-card .pf-image {
    position: relative; inset: auto;
    aspect-ratio: 16 / 10;
    padding-top: 28px;
    border-radius: 12px;
    background:
        radial-gradient(circle, #c3d1da 4.5px, transparent 5px) 14px 9.5px / 15px 9px no-repeat,
        radial-gradient(circle, #c3d1da 4.5px, transparent 5px) 29px 9.5px / 15px 9px no-repeat,
        radial-gradient(circle, #c3d1da 4.5px, transparent 5px) 44px 9.5px / 15px 9px no-repeat,
        linear-gradient(#e4ecf1, #e4ecf1) 0 0 / 100% 28px no-repeat,
        #f6f9fb;
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(116, 197, 235, 0.22);
    transition: box-shadow 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.v2-skin .portfolio-card .pf-image img { object-position: 50% 0; transform: none; transition: object-position 2600ms var(--ease-draft); }
.v2-skin .portfolio-card:hover .pf-image { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(116, 197, 235, 0.55); }
.v2-skin .portfolio-card:hover .pf-image img { transform: none; object-position: 50% 100%; }
.v2-skin .portfolio-card .pf-inner { position: static; display: block; padding: 18px 2px 0; }
.v2-skin .portfolio-card .pf-left,
.v2-skin .portfolio-card:hover .pf-left { background: none; backdrop-filter: none; border: 0; padding: 0; height: auto; transform: none; }
.v2-skin .portfolio-card .pf-right { display: none; }
.v2-skin .portfolio-card .pf-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; margin: 0 0 6px; color: var(--on-ink); }
.v2-skin .portfolio-card .pf-desc { font-size: 0.95rem; color: var(--on-ink-2); }
.v2-skin .portfolio-card .pf-view { font-size: 0.9rem; color: var(--sky); margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .v2-skin .portfolio-card .pf-image img { transition: none; } }

/* Contact: method cards join the card family */
.v2-skin .contact-info-card {
    background-color: var(--card-bg);
    background-image: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(116, 197, 235, 0.09), transparent 60%);
    border: 1px solid var(--ink-line);
    box-shadow: none;
}
.v2-skin .contact-info-card:hover { border-color: rgba(116, 197, 235, 0.42); box-shadow: none; }

/* Blog article: body on the ink panel, readable measure, lists get their markers back */
.v2-skin .article-body { background: var(--ink-2); border: 1px solid var(--ink-line); box-shadow: none; }
.v2-skin :is(.article-text-content, .article-text-section) { max-width: 72ch; margin-inline: auto; }
.v2-skin :is(.article-text-content, .article-text-section) :is(ul, ol):not([class]) { padding-left: 1.4em; margin: 0.6em 0 1.2em; }
.v2-skin :is(.article-text-content, .article-text-section) ul:not([class]) { list-style: none; }
.v2-skin :is(.article-text-content, .article-text-section) ul:not([class]) > li { position: relative; margin: 0.35em 0; }
.v2-skin :is(.article-text-content, .article-text-section) ul:not([class]) > li::before {
    content: ''; position: absolute; left: -1.05em; top: 0.7em;
    width: 0.55em; height: 1px; background: var(--pencil);
}
.v2-skin :is(.article-text-content, .article-text-section) ol:not([class]) { list-style: decimal; }
.v2-skin :is(.article-text-content, .article-text-section) ol:not([class]) > li::marker { color: var(--sky); font-weight: 600; }

/* Privacy / terms: same ink panels as the rest, lists keep their markers */
.v2-skin :is(.privacy-content, .terms-content) { background: var(--ink); }
.v2-skin :is(.privacy-section, .terms-section) { background: var(--ink-2); border: 1px solid var(--ink-line); }
.v2-skin :is(.privacy-section, .terms-section) h2 { color: var(--on-ink); -webkit-text-fill-color: currentColor; background: none; }
.v2-skin :is(.privacy-section, .terms-section) h3 { color: var(--sky); }
.v2-skin :is(.privacy-section, .terms-section) ul { list-style: none; padding-left: 1.4em; }
.v2-skin :is(.privacy-section, .terms-section) ul > li { position: relative; }
.v2-skin :is(.privacy-section, .terms-section) ul > li::before {
    content: ''; position: absolute; left: -1.05em; top: 0.75em;
    width: 0.55em; height: 1px; background: var(--pencil);
}

/* The closed mobile menu sits off-canvas; never let it widen the page */
html, body.v2-skin { overflow-x: clip; }

/* Catalogue on phones: two products per row instead of one long column */
@media (max-width: 600px) {
    .v2-skin .katalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .v2-skin .katalog-card-body { padding: 10px 12px 12px; }
    .v2-skin .katalog-card-body h3 { font-size: 0.88rem; hyphens: auto; overflow-wrap: anywhere; }
    .v2-skin .katalog-card-meta { flex-direction: column; gap: 2px; font-size: 0.78rem; }
}

/* Package feature lists: plain ruled rows, not a stack of mini cards */
.v2-skin .feature-list > .feature-item,
.v2-skin .feature-list > .feature-item:hover {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ink-line);
    border-radius: 0;
    padding: 10px 0;
    margin: 0;
    transform: none;
}
.v2-skin .feature-list > .feature-item:last-child { border-bottom: 0; }

/* Grid gutters: the site's own grid has no Bootstrap g-* utilities, so rows touched */
.v2-skin .row.g-3 { row-gap: 24px; }
.v2-skin .row.g-4 { row-gap: 36px; }
.v2-skin .row.g-5 { row-gap: 48px; }

/* Long note under a section heading (e.g. ad packages): one readable line, a rounded block when it wraps */
.v2-skin .section-header .pricing-badge {
    display: block;
    width: max-content;
    max-width: min(100vw - 40px, 1120px);
    margin-top: 26px;
    text-align: left;
}
.v2-skin .section-header .pricing-badge .badge-text {
    display: inline-block;
    max-width: 100%;
    background: rgba(116, 197, 235, 0.08);
    border: 1px solid var(--ink-line);
    border-radius: 14px;
    color: var(--sky);
    line-height: 1.5;
    padding: 8px 18px;
}

/* Stat strips (services pages): one outer box, open stats inside with breathing room */
.v2-skin .industries-stats { gap: 0; padding: 22px 12px; justify-content: space-around; }
.v2-skin .industries-stats .stat-item {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 6px clamp(14px, 2.4vw, 32px);
    text-align: center;
    transform: none;
}
.v2-skin .industries-stats .stat-icon {
    width: 40px; height: 40px;
    margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.v2-skin .industries-stats .stat-number { display: block; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.v2-skin .industries-stats .stat-label { display: block; margin-top: 6px; color: var(--on-ink-2); font-size: 0.9rem; }
.v2-skin .industries-stats .stat-divider { width: 1px; align-self: stretch; height: auto; background: var(--ink-line); }
@media (max-width: 768px) {
    .v2-skin .industries-stats { padding: 18px; }
    .v2-skin .industries-stats .stat-divider { width: 48px; height: 1px; align-self: center; }
}

/* Accordions (every FAQ, incl. the calculator): one family */
.v2-skin .custom-accordion { border-radius: 0; overflow: visible; box-shadow: none; display: grid; gap: 12px; }
.v2-skin .custom-accordion-item { border: 1px solid var(--ink-line); border-radius: var(--border-radius-lg); overflow: hidden; }
.v2-skin .custom-accordion-item.active { border-color: rgba(116, 197, 235, 0.42); }
.v2-skin .custom-accordion-header { padding: 18px 22px; gap: 16px; }
.v2-skin .custom-accordion-header:hover,
.v2-skin .custom-accordion-item.active .custom-accordion-header { background: rgba(116, 197, 235, 0.05); color: inherit; }
.v2-skin .custom-accordion-header:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.v2-skin .custom-accordion-header h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--on-ink); }
.v2-skin .custom-accordion-content { padding: 0 22px 20px; color: var(--on-ink-2); line-height: 1.7; }
.v2-skin .custom-accordion-body { transition: max-height 500ms var(--ease-out); }
.v2-skin .custom-accordion-item.active .custom-accordion-body { max-height: 900px; }
.v2-skin .calc-faq-list { max-width: 860px; margin: 0; }

/* ── One alignment rule for every page ──────────────
   Section headings, intros and single-column blocks start at the container's left edge.
   Legacy markup centred a lone narrower column (row.justify-content-center > col-lg-8/10)
   or centred the text itself; both are pulled back to the edge here. */
.v2-skin .row.justify-content-center:has(> [class*="col-"]:only-child) { justify-content: flex-start !important; } /* main.css centres with !important */
.v2-skin :is(.katalog-how, .qrg-why, .city-center, .katalog .katalog-hero, .qrg .qrg-hero) { text-align: left; }
.v2-skin :is(.katalog .katalog-hero, .qrg .qrg-hero) :is(h1, p) { margin-left: 0; margin-right: 0; }
.v2-skin .katalog-filters { justify-content: flex-start; }
.v2-skin .city-center .hero-buttons { justify-content: flex-start !important; }
.v2-skin .container.city-narrow { max-width: 1200px; }
.v2-skin .container:is(.city-narrow, .city-center) > * { max-width: 860px; margin-left: 0; margin-right: 0; }

/* Headings outside .section-header get the same pen stroke */
.v2-skin :is(.katalog-how, .qrg-why, .city-section, .katalog-part-head) > h2,
.v2-skin .city-section .container > h2 { position: relative; margin-bottom: 34px; }
.v2-skin :is(.katalog-how, .qrg-why, .katalog-part-head) > h2::after,
.v2-skin .city-section .container > h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 56px;
    height: 2px;
    background: var(--sky);
}

/* In-page call-out boxes (services pages): full container width, copy left, action right */
.v2-skin .text-center:has(> .cta-content.custom-solution-enhanced) { text-align: left; }
.v2-skin .custom-solution-enhanced {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px);
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--ink-2);
    border: 1px solid var(--ink-line);
    backdrop-filter: none;
}
.v2-skin .cta-content.custom-solution-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
}
.v2-skin .cta-content.custom-solution-enhanced > :is(h3, p) { grid-column: 1; text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .cta-content.custom-solution-enhanced > h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.v2-skin .cta-content.custom-solution-enhanced > p { margin: 0; color: var(--on-ink-2); max-width: 60ch; }
.v2-skin .cta-content.custom-solution-enhanced > .cta-buttons { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin: 0; flex-wrap: nowrap; }
.v2-skin .custom-icon { background: rgba(116, 197, 235, 0.07); border: 1px solid var(--ink-line); color: var(--sky); box-shadow: none; width: 64px; height: 64px; font-size: 1.5rem; }
.v2-skin .custom-text h4 { background: none; -webkit-text-fill-color: currentColor; color: var(--on-ink); font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
@media (max-width: 900px) {
    .v2-skin .cta-content.custom-solution-enhanced { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    .v2-skin .cta-content.custom-solution-enhanced > .cta-buttons { grid-column: 1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
    .v2-skin .custom-text { min-width: 0; }
}

/* Remaining legacy wrappers that centred their content: back to the left edge */
.v2-skin :is(.process-intro, .tech-stats) { justify-content: flex-start; }
.v2-skin .approach-header, .v2-skin .approach-header :is(h3, p) { text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .approach-header h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.v2-skin .services-cta, .v2-skin .services-cta :is(h3, h4, p) { text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin section:not(.hero):not(.v2-hero) .text-center:not([class*="card"] *):not(.katalog-hero *) { text-align: left !important; } /* main.css: center !important */
@media (max-width: 768px) {
    .v2-skin :is(.process-intro, .tech-stats) { align-items: flex-start; }
}

/* The web-development "Не виждате вашия бранш?" call-out uses the same box as the others */
.v2-skin .industries-cta .cta-content {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
    text-align: left;
    padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px);
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--border-radius-lg);
}
.v2-skin .industries-cta .cta-content > :is(h3, p) { grid-column: 1; text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .industries-cta .cta-content > h3 { margin: 0 0 8px; }
.v2-skin .industries-cta .cta-content > p { margin: 0; color: var(--on-ink-2); max-width: 60ch; }
.v2-skin .industries-cta .cta-content > .cta-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
.v2-skin .industries-cta { background: none; border: 0; padding: 0; text-align: left; }
@media (max-width: 900px) {
    .v2-skin .industries-cta .cta-content { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    .v2-skin .industries-cta .cta-content > .cta-buttons { grid-column: 1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
}

/* Sub-headings over benefit grids, and the end-of-process call-out */
.v2-skin .benefits-header, .v2-skin .benefits-header :is(h3, p) { text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .benefits-header h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    background: none; -webkit-text-fill-color: currentColor; color: var(--on-ink);
}
.v2-skin .process-cta {
    text-align: left;
    padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px);
    background:
        linear-gradient(var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--ink-line) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--ink-2);
    border: 1px solid var(--ink-line);
}
.v2-skin .process-cta .cta-background { display: none; }
.v2-skin .process-cta .cta-content {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
}
.v2-skin .process-cta .cta-content > :is(h2, h3, p) { grid-column: 1; text-align: left; margin-left: 0; margin-right: 0; }
.v2-skin .process-cta .cta-content > :is(h2, h3) { margin: 0 0 8px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.v2-skin .process-cta .cta-content > p { margin: 0; color: var(--on-ink-2); max-width: 60ch; }
.v2-skin .process-cta .cta-content > .cta-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 900px) {
    .v2-skin .process-cta .cta-content { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    .v2-skin .process-cta .cta-content > .cta-buttons { grid-column: 1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
}

.v2-skin .katalog-how .katalog-cta { justify-content: flex-start; }
.v2-skin section:not(.hero):not(.v2-hero) .text-center:not([class*="card"] *) > :is(p, h3) { margin-left: 0; margin-right: 0; }
.v2-skin .integration-card, .v2-skin .integration-card :is(h3, p) { text-align: left; margin-left: 0; margin-right: 0; }

/* ── Catalogue hero: laser engraver drawing (katalog/_hero-art.php) ── */
.v2-skin .katalog .katalog-hero { padding: 130px 0 50px; }
.katalog-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.katalog-hero-copy { min-width: 0; }
.v2-skin .katalog-hero-copy .katalog-lead { margin-left: 0; }
.katalog-hero-art { margin: 0; }
.katalog-hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2-laser :is(path, rect, line, circle) { vector-effect: non-scaling-stroke; }
.v2-laser-marks path { fill: none; stroke: var(--sky); stroke-width: 1; opacity: 0.8; }
.v2-laser-line, .v2-laser-line :is(path, rect) { fill: none; stroke: rgba(116, 197, 235, 0.55); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.v2-laser-frame rect { fill: var(--ink-2); }
.v2-laser-plate rect { fill: rgba(245, 197, 66, 0.07); stroke: rgba(245, 197, 66, 0.55); stroke-width: 1.25; }
.v2-laser-plate .v2-laser-grain { fill: none; stroke: rgba(245, 197, 66, 0.18); stroke-width: 1; }
.v2-laser-dim path { fill: none; stroke: rgba(116, 197, 235, 0.45); stroke-width: 1; }
.v2-laser-dim text { font: 500 11px var(--font-body); fill: var(--sky); paint-order: stroke; stroke: var(--ink); stroke-width: 6px; }
.v2-laser-print { stroke: rgba(116, 197, 235, 0.35) !important; }
.v2-laser-path {
    fill: none;
    stroke: var(--pencil);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.55));
}
.v2-laser-head { transform: translateX(378px); }
.v2-laser-head rect { fill: var(--ink-2); stroke: var(--sky); stroke-width: 1.25; }
.v2-laser-head .v2-laser-led { fill: var(--pencil); }
.v2-laser-beam { stroke: var(--pencil); stroke-width: 1.5; opacity: 0; filter: drop-shadow(0 0 4px rgba(245, 197, 66, 0.9)); }
.v2-laser-spark { fill: #fff6d6; opacity: 0; filter: drop-shadow(0 0 6px var(--pencil)); }
.v2-laser.is-firing .v2-laser-beam, .v2-laser.is-firing .v2-laser-spark { opacity: 1; }
@media (max-width: 900px) {
    .katalog-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .katalog-hero-art { max-width: 460px; }
    .v2-skin .katalog .katalog-hero { padding: 110px 0 30px; }
}

/* ══ Hero scenes (includes/scenes/*.php) ═════════════
   Each scene is drafted in blue (.d), inked in pencil-yellow by a moving pen (.ink + .s-pen),
   then "comes alive" (.is-live). Without JS / with reduced motion the finished scene is shown. */
.v2-skin .hero div.hero-image.v2-scene-box { opacity: 1; animation: none; transform: none; }
.v2-scene { margin: 0; }
.v2-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2-scene .s-marks { fill: none; stroke: var(--sky); stroke-width: 1; opacity: 0.8; }
.v2-scene .s-ln { fill: none; stroke: rgba(116, 197, 235, 0.6); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v2-scene .s-mute { fill: none; stroke: rgba(116, 197, 235, 0.3); stroke-width: 1.2; stroke-linecap: round; }
.v2-scene .s-pn { fill: var(--ink-2); stroke: rgba(116, 197, 235, 0.6); stroke-width: 1.4; stroke-linejoin: round; }
.v2-scene .s-bar { fill: #e4ecf1; stroke: none; }
.v2-scene .s-dot { fill: #c3d1da; stroke: none; }
.v2-scene .s-blk { fill: rgba(116, 197, 235, 0.16); stroke: rgba(116, 197, 235, 0.5); stroke-width: 1.2; }
.v2-scene .s-paper { fill: #eaf1f5; stroke: rgba(116, 197, 235, 0.6); stroke-width: 1.4; }
.v2-scene .s-paper-ln { fill: none; stroke: rgba(7, 28, 43, 0.22); stroke-width: 1.4; stroke-linecap: round; }
.v2-scene .ink { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(245, 197, 66, 0.5)); }
.v2-scene .ink-fill { fill: var(--pencil); stroke: none; }
.v2-scene .s-txt { font: 600 13px var(--font-body); fill: var(--sky); }
.v2-scene .s-txt-big { font: 600 22px var(--font-display); fill: var(--pencil); }
.v2-scene .s-txt-dark { font: 600 12px var(--font-body); fill: var(--ink); }
.v2-scene .s-pen { opacity: 0; pointer-events: none; }
.v2-scene .s-pen circle { fill: var(--pencil); filter: drop-shadow(0 0 6px var(--pencil)); }
.js-motion .v2-scene.is-inking .s-pen { opacity: 1; transition: opacity 200ms ease; }
.js-motion .v2-scene.is-live .s-pen { opacity: 0; transition: opacity 400ms ease; }
/* elements that only appear once the scene is live */
.js-motion .v2-scene:not(.is-live) .s-late { opacity: 0; }
.js-motion .v2-scene.is-live .s-late { opacity: 1; transition: opacity 600ms ease calc(var(--k, 0) * 120ms); }
/* the live moment: anything with .s-move travels from its --from transform to its drawn place */
.js-motion .v2-scene:not(.is-live) .s-move { transform: var(--from); }
.js-motion .v2-scene.is-live .s-move { transform: none; transition: transform 1100ms var(--ease-out) calc(var(--k, 0) * 110ms); }
.v2-scene .s-move, .v2-scene .s-grow { transform-box: fill-box; }
.v2-scene .s-grow { transform-origin: 50% 100%; }
.js-motion .v2-scene:not(.is-live) .s-grow { transform: scaleY(0.12); }
.js-motion .v2-scene.is-live .s-grow { transform: none; transition: transform 1000ms var(--ease-out) calc(var(--k, 0) * 90ms); }
@media (max-width: 900px) { .v2-scene { max-width: 460px; } }
/* drafting: fills and labels arrive behind the blue line */
.js-motion .v2-scene:not(.is-drafted) .d { fill-opacity: 0; }
.js-motion .v2-scene:not(.is-drafted) text { opacity: 0; }
.js-motion .v2-scene.is-drafted text { opacity: 1; transition: opacity 600ms ease 700ms; }
.js-motion .v2-scene .s-late text { transition: none; }
/* live loops (only with motion allowed) */
@keyframes v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes v2-ripple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes v2-flow { to { stroke-dashoffset: -28; } }
.v2-scene .s-ripple { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.v2-scene .s-flow { stroke-dasharray: 6 8; }
.v2-scene .s-led { fill: var(--sky); }
.v2-scene .s-led.is-y { fill: var(--pencil); }
.js-motion .v2-scene.is-live .s-blink { animation: v2-blink 1.6s ease-in-out infinite calc(var(--k, 0) * -0.37s); }
.js-motion .v2-scene.is-live .s-float { animation: v2-float 3.2s ease-in-out infinite calc(var(--k, 0) * -0.8s); }
.js-motion .v2-scene.is-live .s-ripple { animation: v2-ripple 2.4s var(--ease-out) infinite calc(var(--k, 0) * -0.8s); }
.js-motion .v2-scene.is-live .s-flow { animation: v2-flow 1.2s linear infinite; }
.js-motion .v2-scene.is-live .s-move.s-late { transition: transform 1100ms var(--ease-out) calc(var(--k, 0) * 110ms), opacity 500ms ease calc(var(--k, 0) * 110ms); }
.v2-scene .s-pen[data-stay], .js-motion .v2-scene.is-live .s-pen[data-stay] { opacity: 1; }
.js-motion .v2-scene:not(.is-inking):not(.is-live) .s-pen[data-stay] { opacity: 0; }
/* QR scene: the phone's scan line sweeps the viewfinder */
@keyframes v2-qr-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(82px); } }
.js-motion .v2-scene.is-live .v2-qr-scan { animation: v2-qr-scan 2.6s var(--ease-draft) infinite; }
.v2-qr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .v2-qr-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.v2-skin .qrg .qrg-hero { padding-bottom: clamp(40px, 5vw, 72px); }

/* Footer: free guide link at the right end of the cities row */
.footer-about .footer-guide { display: block; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(245, 197, 66, 0.35); border-left: 3px solid var(--pencil); border-radius: 8px; color: var(--on-ink); text-decoration: none; transition: border-color .2s, background-color .2s; }
.footer-about .footer-guide:hover { background: rgba(245, 197, 66, 0.06); border-color: var(--pencil); }
.footer-guide-kicker { display: block; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pencil); }
.footer-guide-kicker::before { content: '✎ '; }
.footer-guide-title { display: block; margin-top: 4px; font-weight: 600; line-height: 1.35; }