/* Sofia Sans (SIL Open Font License, see ../fonts/OFL.txt). Its Cyrillic has the Bulgarian
   letterforms by default, so Bulgarian text needs no font-feature-settings. */
@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url("../fonts/sofia-sans-cyrillic-KAc2e-f.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Sofia Sans';
    font-style: normal;
    font-weight: 1 1000;
    font-display: swap;
    src: url("../fonts/sofia-sans-latin-C0WSf2L.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy: #0a0f2e;
    --ink: #131a3a;
    --ink-soft: #4c5375;
    --paper: #fff;
    --mist: #f4f5fc;
    --rule: rgb(19 26 58 / 10%);
    --blue: #2b3fe6;
    --violet: #7c3aed;
    --cyan: #22c8f5;
    --pale: #dfe3ff;
    --gradient: linear-gradient(120deg, var(--blue) 10%, var(--violet) 90%);
    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --section: clamp(3.5rem, 8vw, 6.5rem);
    --wide: 72rem;
    --header: 3.5rem;
    /* How far the example site hangs out of the dark top into the next section. */
    --overlap: clamp(4rem, 9vw, 7rem);
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Sofia Sans', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

h1,
h2 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.05;
    text-align: center;
}

p {
    text-wrap: pretty;
}

[id] {
    scroll-margin-top: calc(var(--header) + 2rem);
}

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

/* —— Header: a pill that stays at the top of the screen —— */

.masthead {
    position: sticky;
    top: 0.75rem;
    z-index: 10;
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    align-items: center;
    width: min(100% - 1.5rem, var(--wide));
    height: var(--header);
    margin: 0.75rem auto 0;
    padding: 0 0.5rem 0 1rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 99rem;
    background: rgb(10 15 46 / 72%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    backdrop-filter: blur(14px) saturate(160%);
}

.masthead a {
    text-decoration: none;
}

.brand {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    margin-right: auto;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand img {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
}

.sections {
    display: none;
    gap: 1.75rem;
}

.sections a,
.language {
    color: var(--pale);
}

.sections a:hover,
.language:hover {
    color: #fff;
}

@media (min-width: 56rem) {
    .sections {
        display: flex;
    }
}

/* —— Buttons —— */

.write,
.ghost {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 99rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    transition: translate 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.write {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 10px 30px -8px rgb(124 58 237 / 70%);
}

.write:hover {
    translate: 0 -2px;
    box-shadow: 0 16px 36px -8px rgb(124 58 237 / 85%);
}

.write-small {
    display: none;
    padding: 0.5rem 1.1rem;
    font-size: 1rem;
    box-shadow: none;
}

@media (min-width: 30rem) {
    .write-small {
        display: inline-block;
    }
}

.ghost {
    border: 1px solid rgb(255 255 255 / 30%);
}

.ghost:hover {
    background: rgb(255 255 255 / 10%);
}

/* —— The dark top: pitch and the example site —— */

.top {
    position: relative;
    margin-top: calc(-1 * (var(--header) + 0.75rem));
    padding-top: calc(var(--header) + 0.75rem);
    background: var(--navy);
    color: #fff;
}

/* Two blurred lights and a grid of dots. They sit in their own box so that the example
   site can hang out of ".top" without being cut off. */
.glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-image: radial-gradient(rgb(255 255 255 / 14%) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(#000, transparent 75%);
    pointer-events: none;
}

.glow::before,
.glow::after {
    position: absolute;
    width: min(48rem, 110vw);
    aspect-ratio: 1;
    border-radius: 50%;
    content: '';
    animation: drift 16s ease-in-out infinite alternate;
}

.glow::before {
    top: -22rem;
    right: -12rem;
    background: radial-gradient(circle, rgb(124 58 237 / 60%), transparent 65%);
}

.glow::after {
    top: 4rem;
    left: -22rem;
    background: radial-gradient(circle, rgb(34 200 245 / 30%), rgb(43 63 230 / 35%) 40%, transparent 68%);
    animation-delay: -8s;
}

@keyframes drift {
    to {
        translate: 4rem 3rem;
        scale: 1.15;
    }
}

.pitch,
.makeover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--gutter);
    text-align: center;
}

.pitch {
    padding-top: clamp(3.5rem, 9vw, 7rem);
}

.pitch > * {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pitch > :nth-child(2) {
    animation-delay: 0.08s;
}

.pitch > :nth-child(3) {
    animation-delay: 0.16s;
}

.pitch > :nth-child(4) {
    animation-delay: 0.24s;
}

@keyframes rise {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }
}

.pitch h1 {
    max-width: 18ch;
    background: linear-gradient(180deg, #fff 35%, #b4c0ff);
    background-clip: text;
    color: transparent;
    font-size: clamp(2.4rem, 5.4vw, 4.25rem);
    line-height: 1.04;
    /* Room for the descenders, which "background-clip: text" would cut. */
    padding-bottom: 0.08em;
}

.lead {
    max-width: 36rem;
    margin: 1.5rem 0 0;
    color: var(--pale);
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
}

.lead-soft {
    margin-top: 0.5rem;
    color: rgb(223 227 255 / 70%);
    font-size: 1.0625rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 2.25rem 0 0;
}

.makeover {
    padding-top: clamp(4rem, 9vw, 7rem);
}

.makeover-lead {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: var(--pale);
}

/* Two radio buttons under one sliding white thumb. */
.switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    min-width: 15rem;
    margin: 1.75rem 0 0;
    padding: 0.25rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 99rem;
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(8px);
}

.switch::before {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.25rem);
    border-radius: 99rem;
    background: #fff;
    content: '';
    transition: translate 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.switch:has(input[value='after']:checked)::before {
    translate: 100% 0;
}

.switch label {
    position: relative;
    cursor: pointer;
}

.switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.switch span {
    display: block;
    padding: 0.55rem 1.5rem;
    border-radius: 99rem;
    font-weight: 700;
    transition: color 0.25s;
}

.switch input:checked + span {
    color: var(--navy);
}

.switch input:focus-visible + span {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

.browser {
    position: relative;
    z-index: 1;
    width: min(100%, 58rem);
    margin: 2.25rem 0 calc(-1 * var(--overlap));
}

.browser figcaption {
    margin-top: 0.9rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

/* Both screens share one grid cell, so the frame keeps the height of the taller one. */
.browser-frame {
    display: grid;
    grid-template-rows: auto minmax(clamp(20rem, 36vw, 25rem), auto);
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 16%),
        0 50px 100px -30px rgb(43 63 230 / 70%),
        0 30px 60px -30px rgb(0 0 0 / 60%);
    text-align: left;
}

.browser-bar {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: #e9ebf3;
    font-size: 0.875rem;
    line-height: 1.3;
}

/* The three window buttons. */
.browser-bar::before {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 2rem;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 1rem 0 #febc2e, 2rem 0 #28c840;
    content: '';
}

.address-field {
    display: grid;
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 99rem;
    background: #fff;
}

.address {
    display: flex;
    grid-area: 1 / 1;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.address svg {
    flex: none;
}

.address-old {
    color: #b3261e;
}

.address-new {
    color: #17663a;
}

.screen {
    grid-area: 2 / 1;
    min-width: 0;
    transition: opacity 0.35s;
}

.screen p {
    margin: 0;
}

.address-new,
.screen-new {
    visibility: hidden;
    opacity: 0;
}

.makeover:has(input[value='after']:checked) :is(.address-new, .screen-new) {
    visibility: visible;
    opacity: 1;
}

.makeover:has(input[value='after']:checked) :is(.address-old, .screen-old) {
    visibility: hidden;
    opacity: 0;
}

/* The old site: system serif, table-era colours, everything centred. */
.screen-old {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: center;
    padding: 1rem;
    background: #bfe3e6;
    color: #00007a;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: center;
}

.old-welcome {
    color: #d40000;
    font-size: 1.125rem;
    font-weight: 700;
}

.old-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.old-nav span {
    padding: 0.15rem 0.6rem;
    border: 2px outset #f2f2f2;
    background: #d4d0c8;
    color: #0000ee;
    text-decoration: underline;
}

.old-building {
    padding: 0.2rem 0.6rem;
    border: 1px dashed #000;
    background: #ffeb3b;
    color: #000;
    font-weight: 700;
}

.old-small {
    font-size: 0.75rem;
}

.old-counter {
    padding: 0 0.3rem;
    background: #000;
    color: #39ff14;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.15em;
}

/* The new site: a look of its own, so it reads as the client's site and not as ours. */
.screen-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem);
    background: radial-gradient(circle at 85% 10%, #1c6a50, transparent 55%), #0f3a2e;
    color: #fff;
}

.new-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    align-items: baseline;
    font-size: 0.9375rem;
}

.new-nav strong {
    margin-right: auto;
    font-size: 1.125rem;
    font-weight: 800;
}

.new-heading {
    max-width: 15ch;
    margin-top: auto !important;
    font-size: clamp(1.6rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.new-text {
    max-width: 26rem;
    color: #cfe3da;
}

.new-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-weight: 700;
}

.new-actions span {
    padding: 0.55rem 1.25rem;
    border: 2px solid #ffd23f;
    border-radius: 99rem;
}

.new-actions span:first-child {
    background: #ffd23f;
    color: #0f3a2e;
}

/* —— What you get: cards, the first and the last one wider —— */

.offer {
    padding: calc(var(--section) + var(--overlap)) var(--gutter) var(--section);
    background: var(--mist);
}

.offer dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    max-width: var(--wide);
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

.offer dl > div {
    padding: 1.75rem;
    border: 1px solid var(--rule);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(19 26 58 / 4%), 0 14px 32px -18px rgb(19 26 58 / 22%);
    transition: translate 0.25s, box-shadow 0.25s;
}

.offer dl > div:hover {
    translate: 0 -4px;
    box-shadow: 0 1px 2px rgb(19 26 58 / 4%), 0 24px 40px -18px rgb(43 63 230 / 35%);
}

@media (min-width: 62rem) {
    .offer dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .offer dl > div:first-child,
    .offer dl > div:last-child {
        grid-column: span 2;
    }
}

.icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgb(43 63 230 / 12%), rgb(124 58 237 / 16%));
    color: var(--blue);
}

.offer dt {
    font-size: 1.3125rem;
    font-weight: 750;
    line-height: 1.25;
}

.offer dd {
    max-width: 34rem;
    margin: 0.4rem 0 0;
    color: var(--ink-soft);
}

.offer dl > div:first-child {
    border-color: transparent;
    background: radial-gradient(circle at 100% 0, rgb(124 58 237 / 75%), transparent 60%), var(--navy);
    color: #fff;
}

.offer dl > div:first-child dd {
    color: var(--pale);
}

.offer dl > div:first-child .icon {
    background: rgb(255 255 255 / 14%);
    color: #fff;
}

.offer dl > div:last-child {
    background: linear-gradient(135deg, #eaedff, #f3e8ff);
}

.offer dl > div:last-child .icon {
    background: #fff;
}

/* —— How it goes: the numbers are the order the steps happen in —— */

.steps {
    padding: var(--section) var(--gutter);
}

.steps ol {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: var(--wide);
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1.25rem;
    counter-increment: step;
}

.steps li::before {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--gradient);
    box-shadow: 0 0 0 6px rgb(43 63 230 / 10%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    content: counter(step);
}

/* The dashed line from one number to the next: down on a phone, across on wide screens. */
.steps li:not(:last-child)::after {
    position: absolute;
    top: 3.75rem;
    bottom: -1.25rem;
    left: calc(1.5rem - 1px);
    border-left: 2px dashed rgb(43 63 230 / 30%);
    content: '';
}

.steps h3 {
    grid-column: 2;
    margin: 0.5rem 0 0.25rem;
    font-size: 1.3125rem;
    font-weight: 750;
    line-height: 1.25;
}

.steps p {
    grid-column: 2;
    margin: 0;
    color: var(--ink-soft);
}

@media (min-width: 62rem) {
    .steps ol {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .steps li {
        display: block;
    }

    .steps li::before {
        margin-bottom: 1.25rem;
    }

    .steps li:not(:last-child)::after {
        top: calc(1.5rem - 1px);
        right: -1.25rem;
        bottom: auto;
        left: 3.75rem;
        border-top: 2px dashed rgb(43 63 230 / 30%);
        border-left: 0;
    }

    .steps h3 {
        margin-top: 0;
    }
}

/* —— Contact —— */

.contact {
    padding: 0 var(--gutter) var(--section);
}

.contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(2.75rem, 7vw, 5rem) 1.5rem;
    overflow: hidden;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 12% 0, rgb(34 200 245 / 55%), transparent 45%),
        radial-gradient(circle at 100% 100%, rgb(193 61 240 / 60%), transparent 50%),
        var(--gradient);
    color: #fff;
    box-shadow: 0 40px 80px -40px rgb(43 63 230 / 80%);
}

.contact-email {
    max-width: 100%;
    padding: 0.85rem 1.75rem;
    border-radius: 99rem;
    background: #fff;
    color: var(--blue);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 750;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: 0 12px 30px -10px rgb(10 15 46 / 60%);
    transition: translate 0.2s;
}

.contact-email:hover {
    translate: 0 -2px;
}

.imprint {
    display: flex;
    justify-content: space-between;
    max-width: calc(var(--wide) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter) 2rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.imprint p {
    margin: 0;
}

/* —— Motion —— */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* Cards, steps and the contact card come up as they scroll into view. Browsers without
       scroll-driven animations show them in place. "transform" here, "translate" for the
       hover above: an animation would otherwise hold the hover back. */
    @supports (animation-timeline: view()) {
        .offer dl > div,
        .steps li,
        .contact-card {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(2rem) scale(0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glow::before,
    .glow::after,
    .pitch > * {
        animation: none;
    }

    .screen,
    .switch::before,
    .switch span,
    .write,
    .ghost,
    .contact-email,
    .offer dl > div {
        transition: none;
    }
}