@font-face { font-family: 'Borna'; src: url('../fonts/Borna-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('../fonts/Borna-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('../fonts/Borna-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Borna'; src: url('../fonts/Borna-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --blue: #13428f;
    --blue-dark: #0b2f6b;
    --orange: #ff915c;
    --orange-soft: #ffdece;
    --ink: #17335f;
    --text: #465b7b;
    --line: #dce5f1;
    --off: #f7f9fc;
    --free: #00d200;
    --reserved: #ff915c;
    --occupied: #ff4949;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: 'Borna', 'Avenir Next', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: #fff;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
    border-radius: 12px;
}

.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
}

.eyebrow--dark { color: #a03d12; }

h1 em { font-style: normal; color: var(--orange); }

/* ------------------------------------------------------------------ HERO */

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 560px at 80% 38%, rgba(63, 104, 217, .55), rgba(63, 104, 217, 0) 70%),
        linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 75%);
}

.hero::before {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    right: -220px;
    bottom: -280px;
    pointer-events: none;
}

/* The logo file has built-in side margins; the negative margin aligns the mark with the text. */
.brand { display: inline-block; margin-left: -22px; padding-top: 14px; }

/* Top bar: the logo, and the language switcher (the same dropdown as the user guide's). */
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top .brand { padding-top: 14px; }
.langs { position: relative; padding-top: 14px; }
.langs summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.dl-icon { width: 18px; height: 18px; flex: none; }
.langs ul {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 190px;
    margin: 0;
    padding: 8px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(5, 25, 65, .3);
    list-style: none;
}
.langs a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.langs a:hover, .langs a:focus-visible { background: var(--off); }
.langs a[aria-current="page"] { background: var(--orange-soft); color: var(--blue-dark); font-weight: 700; }
.brand img { width: 132px; height: auto; }

.hero-grid { position: relative; display: grid; align-items: center; gap: 8px; }

.hero h1 {
    font-size: clamp(2.5rem, 10.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 400;
}

.lead {
    margin-top: 20px;
    max-width: 33rem;
    font-size: clamp(1.05rem, 4.2vw, 1.22rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.stores { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }

.store { position: relative; display: block; transition: transform .18s ease; }
.store:hover { transform: translateY(-3px); }
.store img { height: 62px; width: auto; }

.store-tag {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    white-space: nowrap;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--blue-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

[data-platform="ios"] #store-ios .store-tag,
[data-platform="android"] #store-android .store-tag { display: inline-block; }

/* On a phone the visitor's own store goes first, and the other one stays available. */
[data-platform="ios"] #store-ios,
[data-platform="android"] #store-android { order: -1; }
[data-platform] #hero-stores { margin-top: 44px; }

.free { margin-top: 18px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .72); }

/* Stage: 3D phone, with a CSS phone underneath as the first paint and the no-WebGL fallback. */
.hero-stage { position: relative; height: 470px; margin-top: 4px; }

.disc {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(82%, 420px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ffb391, var(--orange) 55%, #f2803f);
    box-shadow: 0 0 0 26px rgba(255, 255, 255, .04), 0 0 0 60px rgba(255, 255, 255, .03);
}

.phone-css {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(170px, 52%, 270px);
    aspect-ratio: 1 / 2.2;
    transform: translate(-50%, -50%);
    padding: 3.7%;
    border-radius: 20% / 9.1%;
    background: linear-gradient(145deg, #2b3446, #0a0e17);
    box-shadow: inset 0 0 0 2px #6b7890, 0 30px 50px rgba(5, 25, 65, .45);
    transition: opacity .5s ease;
}

.phone-css--float { animation: float 6s ease-in-out infinite; }

@keyframes float {
    50% { transform: translate(-50%, calc(-50% - 9px)); }
}

.phone-css__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 17% / 7.8%;
    overflow: hidden;
    background: #0b1020;
}

.phone-css__screen::after {
    content: "";
    position: absolute;
    top: 1.9%;
    left: 50%;
    width: 5.4%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    transform: translateX(-50%);
}

.phone-css__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-3d] canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    touch-action: pan-y;
    transition: opacity .6s ease;
}

[data-3d].is-3d canvas { opacity: 1; pointer-events: auto; cursor: grab; }
[data-3d].is-3d canvas:active { cursor: grabbing; }
.hero-stage.is-3d .phone-css { opacity: 0; animation: none; }

/* ----------------------------------------------------------------- STORY */

.story { padding: 88px 0 56px; background: #fff; }

.section-head { max-width: 44rem; }

.section-head h2,
.smart h2,
.cta h2 {
    font-size: clamp(1.95rem, 6.6vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    font-weight: 400;
}

.section-head p:not(.eyebrow) { margin-top: 16px; font-size: 1.1rem; line-height: 1.55; color: var(--text); }

.story-grid { display: grid; margin-top: 28px; }

/* The phone stays pinned while the steps scroll past it: above the text on phones, beside it on desktop. */
.story-stage {
    position: sticky;
    top: 0;
    z-index: 5;
    height: clamp(320px, 50vh, 440px);
    margin-inline: -20px;
    border-radius: 0 0 36px 36px;
    overflow: hidden;
    background: linear-gradient(160deg, #fff6f1, var(--orange-soft));
    box-shadow: 0 14px 34px rgba(11, 47, 107, .14);
}

.story-stage .phone-css { width: auto; height: 84%; }
.story-stage.is-3d .phone-css { opacity: 0; }
.story-stage .phone-css__screen img { opacity: 0; transition: opacity .5s ease; }
.story-stage .phone-css__screen img.is-active { opacity: 1; }

.story-disc {
    position: absolute;
    left: 50%;
    top: 52%;
    height: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ffc4a6, var(--orange) 70%);
    opacity: .9;
}

.story-steps { list-style: none; padding: 0; }

.step-num {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: #9a3d0c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.step {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 0;
    opacity: .68;
    transition: opacity .45s ease;
}

.step.is-active { opacity: 1; }
.step.is-active .step-num { background: var(--orange); color: var(--blue-dark); }

.step h3 { margin-top: 14px; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
.step p { margin-top: 12px; font-size: 1.08rem; line-height: 1.55; color: var(--text); }

/* Short landscape phones: keep room for the text under the pinned phone. */
@media (max-width: 899px) and (max-height: 520px) {
    .story-stage { height: 58vh; }
    .step { min-height: 72vh; }
}

@media (min-width: 900px) {
    .story-grid { grid-template-columns: minmax(420px, 1.1fr) 1fr; gap: 56px; align-items: start; margin-top: 36px; }

    .story-stage {
        top: max(24px, calc(50vh - 320px));
        z-index: auto;
        height: min(640px, 88vh);
        margin-inline: 0;
        border-radius: 40px;
        box-shadow: none;
    }

    .story-stage .phone-css { width: clamp(190px, 46%, 270px); height: auto; }
    .story-disc { width: 74%; height: auto; }

    .step { min-height: 78vh; padding: 0; }
    .step h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
    .step p { max-width: 28rem; font-size: 1.15rem; }
}

/* ----------------------------------------------------------------- SMART */

.smart {
    position: relative;
    padding: 88px 0;
    color: #fff;
    background: linear-gradient(170deg, var(--blue-dark), #0f3a82 60%, var(--blue));
}

.smart-grid { display: grid; gap: 34px; align-items: center; }

.smart-lead { margin-top: 18px; max-width: 34rem; font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }

.states { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.state {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 600 1rem 'Borna', 'Avenir Next', 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.state i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot, var(--free)); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.state[data-state="lliure"] { --dot: var(--free); }
.state[data-state="reservada"] { --dot: var(--reserved); }
.state[data-state="ocupada"] { --dot: var(--occupied); }
.state:hover { border-color: #fff; }
.state[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--blue-dark); }

.state-desc { min-height: 3.3em; margin-top: 20px; max-width: 32rem; font-size: 1.08rem; line-height: 1.55; color: #fff; }
.smart-note { margin-top: 10px; font-size: .88rem; color: rgba(255, 255, 255, .65); }

.smart-stage {
    position: relative;
    height: 340px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .17), rgba(255, 255, 255, .03) 62%);
}

/* Status badge: big and centred without WebGL, a small label over the scene with it. */
.chip {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 10px 12px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #fff;
    color: var(--blue-dark);
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 14px 34px rgba(5, 25, 65, .3);
    transition: left .4s ease, top .4s ease, transform .4s ease, font-size .4s ease;
}

.chip .coin { width: 52px; height: 52px; transition: width .4s ease, height .4s ease; }
.chip .coin-ring { fill: var(--coin-ring, #006700); }
.chip .coin-disc { fill: var(--coin-disc, #00d200); }
.smart-stage[data-state="lliure"] { --coin-ring: #006700; --coin-disc: #00d200; }
.smart-stage[data-state="reservada"] { --coin-ring: #9a3d0c; --coin-disc: #ff915c; }
.smart-stage[data-state="ocupada"] { --coin-ring: #8d0000; --coin-disc: #ff4949; }

.smart-stage.is-3d .chip { left: 18px; top: 18px; transform: none; font-size: 1rem; padding: 6px 16px 6px 8px; gap: 8px; }
.smart-stage.is-3d .chip .coin { width: 32px; height: 32px; }

.drag-hint { display: none; position: absolute; right: 16px; bottom: 12px; font-size: .78rem; color: rgba(255, 255, 255, .6); pointer-events: none; }
.smart-stage.is-3d .drag-hint { display: block; }

@media (min-width: 900px) {
    .smart { padding: 112px 0; }
    .smart-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; }
    .smart-stage { height: 540px; }
}

/* --------------------------------------------------------------- NUMBERS */

.numbers { padding: 88px 0; background: var(--orange-soft); }

.num-grid { display: grid; gap: 16px; margin-top: 34px; }

.num-card { padding: 28px; border-radius: 28px; background: #fff; }

.num-card b {
    display: block;
    font-size: clamp(2.8rem, 12vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 400;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

.num-card span { display: block; margin-top: 12px; font-size: 1.05rem; line-height: 1.45; color: var(--text); }

.backed { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 34px; }
.backed img { height: 56px; width: auto; padding: 10px 18px; border-radius: 14px; background: #fff; }
.backed p { max-width: 38rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }

@media (min-width: 760px) {
    .num-grid { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------- CTA */

.cta {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    color: #fff;
    background: linear-gradient(160deg, var(--blue-dark), var(--blue));
}

.cta::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -180px;
    top: -240px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffb391, var(--orange));
    opacity: .9;
    pointer-events: none;
}

.cta-grid { position: relative; display: grid; gap: 32px; align-items: center; }
.cta-copy p:not(.eyebrow) { margin-top: 16px; max-width: 34rem; font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }

.qr { display: none; width: 220px; padding: 16px; border-radius: 28px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 24px 50px rgba(5, 25, 65, .35); }
.qr img { width: 100%; height: auto; }
.qr figcaption { margin-top: 8px; font-size: .95rem; font-weight: 600; }

@media (min-width: 900px) {
    .cta { padding: 112px 0; }
    .cta-grid { grid-template-columns: 1fr auto; gap: 64px; }
}

@media (min-width: 900px) and (hover: hover) {
    .qr { display: block; }
}

/* ---------------------------------------------------------------- FOOTER */

footer { background: var(--blue-dark); color: #fff; padding: 22px 0; font-size: 14px; }
footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer a { color: #fff; text-underline-offset: 3px; }
footer span { color: rgba(255, 255, 255, .75); }

@media (max-width: 899px) {
    footer { padding-bottom: 92px; }
}

/* ------------------------------------------------------------------ DOCK */

.dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11, 47, 107, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform .3s ease;
}

.dock.is-visible { transform: none; }

.dock a {
    flex: 1;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--orange);
    color: var(--blue-dark);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.dock .dock-both { display: flex; }
[data-platform] .dock .dock-both { display: none; }
[data-platform="ios"] .dock .dock-ios,
[data-platform="android"] .dock .dock-android { display: flex; }

@media (max-width: 899px) {
    .dock { display: flex; }
}

/* ---------------------------------------------------------------- REVEAL */

/* If the script never runs, the safety animation reveals everything after 3 seconds. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; animation: reveal-safety .01s 3s forwards; }
.js .reveal.is-in { opacity: 1; transform: none; animation: none; }

@keyframes reveal-safety { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- DESKTOP */

@media (min-width: 900px) {
    .brand img { width: 150px; }
    .brand { margin-left: -25px; }
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 12px; }
    .hero-copy { padding-bottom: 56px; }
    .hero-stage { height: 660px; margin-top: 0; }
    .phone-css { width: clamp(190px, 50%, 290px); }
    .store img { height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .phone-css--float { animation: none; }
    .store, .chip, .dock, .step, .story-stage .phone-css__screen img { transition: none; }
    .store:hover { transform: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
}