:root {
            --sign-blue: #113F8F;
            --sign-blue-deep: #0A2B66;
            --road-yellow: #FFC61E;
            --sign-green: #1E7A46;
            --paper: #F5F7FA;
            --ink: #0E1B33;
            --muted: #5B6B85;
            --white: #FFFFFF;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Saira', system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; }
        img { max-width: 100%; }
        a { color: inherit; }

        .display { font-family: 'Saira Condensed', 'Saira', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }

        /* ---------- nav ---------- */
        .nav { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1rem, 4vw, 3rem); color: var(--white); }
        .nav .brand { font-family: 'Outfit', 'Saira', sans-serif; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; display: inline-flex; align-items: center; line-height: 1; }
        .eu-mark { position: relative; display: inline-block; padding: 0 0.12em; }
        .eu-mark svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.9em; height: 2.9em; z-index: -1; }
        .nav .brand em { color: var(--road-yellow); font-style: normal; }
        .nav .brand .tag { display: block; font-family: 'Saira'; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--road-yellow); margin-top: -2px; }
        .nav-right { display: flex; align-items: center; gap: 1.1rem; font-size: 0.92rem; }
        .nav-right a { color: rgba(255,255,255,0.85); text-decoration: none; }
        .nav-right a:hover, .nav-right a:focus-visible { color: var(--white); }
        .nav-right .lang a.active { color: var(--road-yellow); font-weight: 600; }
        .nav-right .lang a { margin-left: 0.4rem; }

        /* ---------- hero ---------- */
        .hero { position: relative; background: linear-gradient(168deg, var(--sign-blue) 0%, var(--sign-blue-deep) 78%); color: var(--white); padding: clamp(6rem, 14vh, 8.5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vh, 5rem); overflow: hidden; }
        .hero-inner { max-width: 1060px; margin: 0 auto; position: relative; text-align: center; }
        .hero h1 { margin-inline: auto; }
        .hero p.lead { margin-inline: auto; }
        .cta-row, .trust-chips { justify-content: center; }
        .eyebrow { display: inline-block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 6px rgba(10,27,51,0.65), 0 0 2px rgba(10,27,51,0.5); margin-bottom: 1.1rem; }
        .hero h1 { font-size: clamp(3.2rem, 11vw, 7.5rem); max-width: 12ch; }
        .hero p.lead { max-width: 34rem; margin: 1.4rem auto 2rem; font-size: clamp(1.02rem, 2.5vw, 1.2rem); color: var(--white); text-shadow: 0 1px 6px rgba(10,27,51,0.65), 0 0 2px rgba(10,27,51,0.5); }
        .cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
        .btn-primary { display: inline-block; background: var(--road-yellow); color: var(--ink); font-weight: 600; font-size: 1.05rem; padding: 0.9rem 1.9rem; border-radius: 8px; text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
        .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.3); }
        .btn-ghost { display: inline-block; color: var(--white); text-decoration: none; padding: 0.9rem 1.2rem; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 8px; font-size: 0.98rem; transition: border-color 0.15s ease; }
        .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--road-yellow); }

        /* the signature: a European distance sign */
        .distance-sign { margin-top: 2.6rem; display: inline-block; max-width: 92vw; background: var(--sign-blue); border: 3px solid var(--white); border-radius: 14px; padding: 1rem 1.4rem; box-shadow: 0 10px 32px rgba(0,0,0,0.3); }
        .distance-sign .row { display: flex; align-items: baseline; gap: 1rem; font-family: 'Saira Condensed'; font-weight: 700; text-transform: uppercase; }
        .distance-sign .city { font-size: clamp(1.25rem, 3.4vw, 1.9rem); letter-spacing: 0.04em; }
        .distance-sign .arrow { color: var(--road-yellow); font-size: clamp(1.2rem, 3vw, 1.7rem); }
        .distance-sign .km { margin-left: auto; font-size: clamp(1rem, 2.6vw, 1.4rem); color: rgba(255,255,255,0.75); }
        .distance-sign .sub { font-size: 0.8rem; color: rgba(255,255,255,0.65); font-family: 'Saira'; text-transform: none; font-weight: 400; margin-top: 0.2rem; }

        .trust-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
        .chip { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); }
        .chip.yellow { background: var(--road-yellow); color: var(--ink); border-color: var(--road-yellow); }



        /* full-page flag: fixed star layer waving like fabric, visible while scrolling */
        .flag-layer { position: fixed; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
        .flag-layer svg { width: min(100vmin, 940px); height: auto; opacity: 1; animation: sway 8s ease-in-out infinite alternate; }
        .flag-layer .st { animation: flagrip 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
        @keyframes flagrip {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-8px) rotate(2.5deg); }
            75% { transform: translateY(8px) rotate(-2.5deg); }
        }
        @keyframes sway { from { transform: skewY(-1.5deg); } to { transform: skewY(1.5deg); } }

        /* silky sheen: soft light bands and fold shadows drifting over the blue */
        .hero::before, .trust::before {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background:
                linear-gradient(112deg, transparent 34%, rgba(255,255,255,0.2) 38%, transparent 43%),
                linear-gradient(105deg, transparent 58%, rgba(255,255,255,0.13) 61.5%, transparent 66%),
                linear-gradient(118deg, transparent 15%, rgba(255,255,255,0.09) 17.5%, transparent 21%),
                linear-gradient(108deg, transparent 82%, rgba(255,255,255,0.15) 85%, transparent 89%),
                linear-gradient(124deg, transparent 55%, rgba(2,18,55,0.38) 72%, transparent 88%),
                linear-gradient(78deg, transparent 10%, rgba(2,18,55,0.26) 22%, transparent 36%);
        }
        .trust { position: relative; }
        .hero-inner, .inner { position: relative; z-index: 2; }

        .reveal { opacity: 0; transform: translateY(14px); animation: rise 0.7s ease forwards; }
        .reveal.d1 { animation-delay: 0.08s; } .reveal.d2 { animation-delay: 0.18s; }
        .reveal.d3 { animation-delay: 0.3s; } .reveal.d4 { animation-delay: 0.45s; }
        @keyframes rise { to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) {
            .reveal { animation: none; opacity: 1; transform: none; }
            .flag-layer svg, .flag-layer .st { animation: none; }
            html { scroll-behavior: auto; }
        }

        /* ---------- sections ---------- */
        section { padding: clamp(3rem, 8vw, 5.5rem) clamp(1rem, 4vw, 3rem); }
        .inner { max-width: 1060px; margin: 0 auto; }
        h2.display { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 2rem; }

        h2.display + .section-lead { margin: -1.3rem 0 1.9rem; color: var(--muted); max-width: 46rem; }

        /* trades: open ones carry the green edge, the rest are waiting lists */
        .trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
        @media (max-width: 800px) { .trades { grid-template-columns: 1fr; } }
        .trade { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--white); border: 2px solid rgba(17,63,143,0.16); border-left: 8px solid var(--sign-blue); border-radius: 12px; padding: 1.15rem 1.3rem; box-shadow: 0 3px 14px rgba(14,27,51,0.07); }
        .trade.is-open { border-left-color: var(--sign-green); }
        .trade-name { font-family: 'Saira Condensed'; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; }
        .trade-state { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(17,63,143,0.25); color: var(--muted); }
        .trade.is-open .trade-state { background: var(--sign-green); border-color: var(--sign-green); color: var(--white); }

        /* what you get: signage panels */
        /* 4 across so the blue row and the green row each stay whole */
        .panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
        @media (max-width: 1000px) { .panels { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .panels { grid-template-columns: 1fr; } }
        .panel { border-radius: 14px; padding: 1.7rem 1.4rem 1.5rem; color: var(--white); border: 3px solid var(--white); box-shadow: 0 4px 18px rgba(14,27,51,0.14); }
        .panel.blue { background: var(--sign-blue); }
        .panel.green { background: var(--sign-green); }
        .panel .big { font-family: 'Saira Condensed'; font-weight: 900; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; text-transform: uppercase; }
        .panel p { font-size: 1rem; color: rgba(255,255,255,0.87); margin-top: 0.5rem; }

        /* the road: steps along the yellow center line */
        .road-steps { position: relative; margin-left: 0.4rem; }
        .road-steps::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 6px; background: repeating-linear-gradient(to bottom, var(--road-yellow) 0 26px, transparent 26px 52px); border-radius: 3px; }
        .step { position: relative; padding: 0 0 2.1rem 2.2rem; }
        .step:last-child { padding-bottom: 0; }
        .step .no { position: absolute; left: -0.85rem; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ink); color: var(--road-yellow); font-family: 'Saira Condensed'; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; border: 2px solid var(--road-yellow); }
        .step h3 { font-family: 'Saira Condensed'; font-weight: 700; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.03em; }
        .step p { color: var(--muted); font-size: 0.97rem; max-width: 40rem; }

        /* trust band */
        .trust { background: var(--sign-blue-deep); color: var(--white); }
        .trust h2 { font-size: clamp(2.4rem, 7vw, 4rem); color: var(--road-yellow); margin-bottom: 1rem; }
        .trust p.big { font-size: clamp(1.05rem, 2.6vw, 1.25rem); max-width: 42rem; color: rgba(255,255,255,0.9); }
        .trust .facts { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; margin: 2.2rem 0; font-size: 0.95rem; }
        .trust .facts b { display: block; font-family: 'Saira Condensed'; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.04em; color: var(--road-yellow); }
        .btn-wa { display: inline-flex; align-items: center; gap: 0.55rem; background: #25D366; color: #062b16; font-weight: 600; padding: 0.85rem 1.6rem; border-radius: 8px; text-decoration: none; transition: transform 0.15s ease; }
        .btn-wa:hover, .btn-wa:focus-visible { transform: translateY(-2px); }

        /* faq */
        .faq details { border-bottom: 1px solid #DDE4EE; padding: 1rem 0; }
        .faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
        .faq summary::after { content: '+'; font-family: 'Saira Condensed'; font-size: 1.5rem; color: var(--sign-blue); }
        .faq details[open] summary::after { content: '–'; }
        .faq details p { color: var(--muted); margin-top: 0.5rem; max-width: 44rem; }

        /* footer */
        footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 2.2rem clamp(1rem, 4vw, 3rem); font-size: 0.9rem; }
        footer .inner { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; }
        footer a { color: rgba(255,255,255,0.85); }

        /* sticky mobile CTA */
        .sticky-cta { display: none; }
        @media (max-width: 700px) {
            .sticky-cta { display: block; position: fixed; bottom: 0.9rem; left: 0.9rem; right: 0.9rem; z-index: 40; }
            .sticky-cta a { display: block; text-align: center; }
            body { padding-bottom: 4.5rem; }
        }

/* Per-star wave phase (was an inline animation-delay per star; the values
   mirror the old formula round((100 + 72*sin(angle)) * -0.02, 3)). */
.flag-layer .st:nth-of-type(1)  { animation-delay: -2s; }
.flag-layer .st:nth-of-type(2)  { animation-delay: -2.72s; }
.flag-layer .st:nth-of-type(3)  { animation-delay: -3.247s; }
.flag-layer .st:nth-of-type(4)  { animation-delay: -3.44s; }
.flag-layer .st:nth-of-type(5)  { animation-delay: -3.247s; }
.flag-layer .st:nth-of-type(6)  { animation-delay: -2.72s; }
.flag-layer .st:nth-of-type(7)  { animation-delay: -2s; }
.flag-layer .st:nth-of-type(8)  { animation-delay: -1.28s; }
.flag-layer .st:nth-of-type(9)  { animation-delay: -0.753s; }
.flag-layer .st:nth-of-type(10) { animation-delay: -0.56s; }
.flag-layer .st:nth-of-type(11) { animation-delay: -0.753s; }
.flag-layer .st:nth-of-type(12) { animation-delay: -1.28s; }