/* LocoLink V5 (2026-09-27) — one app for every device.
   Builds on styles.css tokens (--bg-*, --text-*, --accent, --radius*). */

:root {
    --v5-max: 1240px;
    --v5-gap: clamp(20px, 4vw, 48px);
    --v5-section: clamp(88px, 12vw, 160px);
    --v5-amber: #f59e0b;
    --v5-amber-2: #fbbf24;
    --v5-glass: rgba(255, 255, 255, 0.04);
    --v5-glass-border: rgba(255, 255, 255, 0.08);
    --v5-frame: #0b0b12;
    --v5-frame-edge: #2a2a36;
}
[data-theme="light"] {
    --v5-glass: rgba(255, 255, 255, 0.7);
    --v5-glass-border: rgba(0, 0, 0, 0.07);
    --v5-frame: #16161f;
    --v5-frame-edge: #3a3a48;
}

.v5 { overflow-x: clip; }
.v5 section { position: relative; }
.v5-wrap { max-width: var(--v5-max); margin: 0 auto; padding: 0 var(--v5-gap); }
.v5-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--v5-amber);
}
.v5-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.v5-h2 {
    font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.035em;
    font-weight: 900; margin: 14px 0 18px; color: var(--text-primary);
}
.v5-h2 em { font-style: normal; background: linear-gradient(92deg, var(--v5-amber), var(--v5-amber-2) 60%, #fde68a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* Room for descenders (g, j, p, y) and the last letter's overhang: the
       gradient only paints inside the box. */
    padding: 0 .06em .14em .02em; margin: 0 -.06em -.14em -.02em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v5-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--text-secondary); max-width: 34em; }

/* ---------- Buttons ---------- */
.v5-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px;
    border-radius: 999px; font-weight: 800; font-size: 16px; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.v5-btn svg { width: 18px; height: 18px; }
.v5-btn-primary { background: linear-gradient(135deg, var(--v5-amber), #f97316); color: #1a1204;
    box-shadow: 0 10px 30px rgba(245, 158, 11, .32); }
.v5-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 158, 11, .42); }
.v5-btn-ghost { background: var(--v5-glass); color: var(--text-primary); border: 1px solid var(--v5-glass-border);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.v5-btn-ghost:hover { transform: translateY(-2px); background: var(--bg-card-hover); }

/* ---------- Hero ---------- */
.v5-hero { padding: calc(var(--v5-section) * .62) 0 40px; text-align: center; isolation: isolate; }
.v5-hero::before {
    content: ""; position: absolute; inset: -20% -10% auto; height: 900px; z-index: -1;
    background:
        radial-gradient(40% 40% at 50% 20%, rgba(245, 158, 11, .20), transparent 70%),
        radial-gradient(30% 35% at 18% 40%, rgba(59, 130, 246, .14), transparent 70%),
        radial-gradient(30% 35% at 82% 40%, rgba(139, 92, 246, .14), transparent 70%);
    filter: blur(10px);
}
.v5-pill {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px;
    background: var(--v5-glass); border: 1px solid var(--v5-glass-border); font-size: 14px; font-weight: 600;
    color: var(--text-secondary); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.v5-pill b { background: linear-gradient(135deg, var(--v5-amber), #f97316); color: #1a1204; border-radius: 999px;
    padding: 3px 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.v5-hero h1 {
    font-size: clamp(46px, 8.6vw, 112px); line-height: .96; letter-spacing: -0.045em; font-weight: 900;
    margin: 26px auto 22px; max-width: 12em; color: var(--text-primary);
}
.v5-hero h1 span { display: block; background: linear-gradient(95deg, var(--v5-amber) 10%, var(--v5-amber-2) 55%, #fde68a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
.v5-hero .v5-lead { margin: 0 auto 34px; text-align: center; max-width: 40em; }
.v5-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.v5-platforms { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 30px auto 0; }
.v5-platforms span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
    background: var(--v5-glass); border: 1px solid var(--v5-glass-border); font-size: 14px; font-weight: 700;
    color: var(--text-primary);
}
.v5-platforms svg { width: 16px; height: 16px; opacity: .9; }

/* ---------- Device frames ---------- */
.dev { position: relative; }
.dev img, .dev video { display: block; width: 100%; height: auto; }
/* Phones: the frame is drawn around the screenshot in container units, so it
   keeps its proportions at every size (hero, feature and gallery). */
.dev-phone { container-type: inline-size; isolation: isolate; }
.dev-phone img, .dev-phone video { position: relative; z-index: 1; border-radius: 13.6cqw; box-shadow: 0 0 0 1.05cqw #050507; background: #050507; }
.dev-phone::before { /* titanium band */
    content: ""; position: absolute; inset: -3.1cqw; z-index: 0; border-radius: 17cqw;
    background:
        linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 7%, rgba(255,255,255,0) 93%, rgba(255,255,255,.22)),
        linear-gradient(160deg, #a7a39c 0%, #57565c 14%, #2a2a31 42%, #1d1d23 64%, #4a4950 86%, #b2aea6 100%);
    box-shadow:
        inset 0 0 0 .45cqw rgba(255,255,255,.18),
        inset 0 0 0 1.9cqw #0c0c10,
        0 6cqw 14cqw rgba(0,0,0,.42), 0 2cqw 5cqw rgba(0,0,0,.28);
}
.dev-phone::after { /* Dynamic Island */
    content: ""; position: absolute; z-index: 2; top: 2.9cqw; left: 50%; transform: translateX(-50%);
    width: 29.5cqw; height: 8.6cqw; border-radius: 99px;
    background: radial-gradient(circle at 78% 50%, #1b2233 0 1.3cqw, #000 1.5cqw);
}
.dev-phone.android img, .dev-phone.android video { border-radius: 9.5cqw; box-shadow: 0 0 0 1.4cqw #060608; }
.dev-phone.android::before {
    inset: -2.4cqw; border-radius: 12cqw;
    background: linear-gradient(160deg, #6b6d74 0%, #2c2d33 16%, #17181c 50%, #2e2f35 84%, #767880 100%);
}
.dev-phone.android::after { width: 4.2cqw; height: 4.2cqw; top: 3.4cqw; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #253049 0 .9cqw, #000 1.2cqw); }
/* Tablets (2026-09-29): an 11-inch iPad Pro drawn around the screenshot in
   container units, like the phones. The screenshot box is the display; the
   black glass bezel (3.4cqw) and the thin aluminium edge sit outside it, with
   concentric corners, the landscape front camera and a soft glass reflection. */
.dev-tablet { container-type: inline-size; isolation: isolate; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dev-tablet img, .dev-tablet video {
    position: relative; z-index: 1; border-radius: 3.9cqw; background: #050507;
    box-shadow: 0 0 0 3.4cqw #060608; /* black glass bezel */
}
.dev-tablet::before { /* aluminium body: bright chamfer, darker flat edge */
    content: ""; position: absolute; inset: -4cqw; z-index: 0; border-radius: 7.9cqw;
    background:
        linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,0) 3.5%, rgba(255,255,255,0) 96.5%, rgba(255,255,255,.28)),
        linear-gradient(162deg, #e4e2dd 0%, #9d9b97 16%, #56565b 42%, #414146 60%, #85837f 84%, #dcd9d3 100%);
    box-shadow:
        inset 0 0 0 .12cqw rgba(255,255,255,.4),
        0 3.4cqw 7.5cqw rgba(0,0,0,.38), 0 1.1cqw 2.6cqw rgba(0,0,0,.24);
}
.dev-tablet::after { /* front camera in the bezel + glass reflection over bezel and screen */
    content: ""; position: absolute; inset: -3.4cqw; z-index: 2; border-radius: 7.3cqw; pointer-events: none;
    background:
        radial-gradient(circle at 50% 1.7cqw, #34405e 0 .22cqw, #10131b .3cqw .6cqw, rgba(0,0,0,0) .64cqw),
        linear-gradient(116deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 24%, rgba(255,255,255,0) 38%);
}
/* Portrait: the same device turned, so the bezel scales with the short side. */
.dev-tablet.portrait img, .dev-tablet.portrait video { border-radius: 5.6cqw; box-shadow: 0 0 0 4.9cqw #060608; }
.dev-tablet.portrait::before { inset: -5.75cqw; border-radius: 11.35cqw; }
.dev-tablet.portrait::after {
    inset: -4.9cqw; border-radius: 10.5cqw;
    background:
        radial-gradient(circle at 50% 2.45cqw, #34405e 0 .32cqw, #10131b .43cqw .86cqw, rgba(0,0,0,0) .92cqw),
        linear-gradient(116deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 24%, rgba(255,255,255,0) 38%);
}
.dev-window {
    border-radius: 16px; overflow: hidden; background: var(--v5-frame);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px rgba(0,0,0,.45), 0 16px 32px rgba(0,0,0,.25);
}
.dev-window .bar {
    height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
    background: linear-gradient(#20202b, #191922); border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 12px; color: #9a9aac; font-weight: 600;
}
.dev-window .bar i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dev-window .bar i:nth-child(1) { background: #ff5f57; }
.dev-window .bar i:nth-child(2) { background: #febc2e; }
.dev-window .bar i:nth-child(3) { background: #28c840; }
.dev-window .bar .t { margin-left: 10px; }
.dev-window.win .bar { justify-content: space-between; }
.dev-window.win .bar .ctl { display: flex; gap: 18px; color: #c9c9d6; font-size: 13px; letter-spacing: .1em; }

/* Hero stage: desktop + tablet + phones */
.v5-stage { position: relative; max-width: 1180px; margin: 64px auto 0; padding: 0 var(--v5-gap); aspect-ratio: 16 / 9.4; }
.v5-stage .dev-window { position: absolute; left: 8%; right: 8%; top: 0; }
.v5-stage .dev-tablet { position: absolute; width: 36%; left: -1%; bottom: -2%; transform: rotate(-3deg); }
.v5-stage .dev-phone.a { position: absolute; width: 17%; right: 1%; bottom: -6%; transform: rotate(4deg); }
.v5-stage .dev-phone.b { position: absolute; width: 15%; right: 17%; bottom: -10%; transform: rotate(-2deg); }
@media (max-width: 760px) {
    .v5-stage { aspect-ratio: 4 / 4.6; margin-top: 44px; }
    .v5-stage .dev-window { left: 0; right: 0; }
    .v5-stage .dev-tablet { width: 58%; left: -4%; bottom: 4%; }
    .v5-stage .dev-phone.a { width: 32%; right: -2%; bottom: 0; }
    .v5-stage .dev-phone.b { display: none; }
}

/* ---------- One app strip ---------- */
.v5-one { padding: calc(var(--v5-section) * .7) 0 20px; }
.v5-one-card {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
    padding: clamp(28px, 5vw, 56px); border-radius: 32px;
    background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(139,92,246,.06) 60%, rgba(59,130,246,.07));
    border: 1px solid var(--v5-glass-border);
}
.v5-one-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.v5-one-grid div {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; border-radius: 18px;
    background: var(--v5-glass); border: 1px solid var(--v5-glass-border); font-weight: 800; font-size: 14px;
    color: var(--text-primary); text-align: center;
}
.v5-one-grid svg { width: 26px; height: 26px; }
.v5-one-grid small { font-weight: 600; color: var(--text-muted); font-size: 12px; }
@media (max-width: 900px) { .v5-one-card { grid-template-columns: 1fr; } }

/* ---------- Feature rows ---------- */
.v5-feature { padding: calc(var(--v5-section) * .8) 0; }
.v5-feature .v5-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.v5-feature.flip .v5-wrap { grid-template-columns: 1.25fr 1fr; }
.v5-feature.flip .v5-copy { order: 2; }
.v5-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.v5-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--text-primary); }
.v5-points li::before {
    content: ""; flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 7px;
    background: rgba(245,158,11,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.v5-visual { position: relative; }
.v5-visual .glow { position: absolute; inset: 10% 5%; z-index: -1; filter: blur(60px); opacity: .55;
    background: radial-gradient(closest-side, var(--glow, rgba(245,158,11,.5)), transparent); }
.v5-duo { display: flex; justify-content: center; gap: 4%; align-items: flex-end; }
.v5-duo .dev-phone { width: 44%; }
.v5-duo .dev-phone:nth-child(2) { transform: translateY(8%); }
.v5-combo { position: relative; padding-bottom: 12%; }
.v5-combo .dev-phone { position: absolute; width: 28%; right: -3%; bottom: 0; }
@media (max-width: 900px) {
    .v5-feature .v5-wrap, .v5-feature.flip .v5-wrap { grid-template-columns: 1fr; }
    .v5-feature.flip .v5-copy { order: 0; }
}

/* ---------- Mini cards (safety / club / upgrade) ---------- */
.v5-cards { padding: calc(var(--v5-section) * .6) 0; }
.v5-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.v5-card {
    padding: 28px; border-radius: 24px; background: var(--bg-card); border: 1px solid var(--border);
    transition: transform .2s ease, border-color .2s ease;
}
.v5-card:hover { transform: translateY(-4px); border-color: rgba(245,158,11,.35); }
.v5-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
    background: var(--c, rgba(245,158,11,.14)); color: var(--ci, #f59e0b); }
.v5-card .ic svg { width: 24px; height: 24px; }
.v5-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--text-primary); }
.v5-card p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
@media (max-width: 900px) { .v5-cards-grid { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.v5-gallery { padding: calc(var(--v5-section) * .8) 0; text-align: center; }
.v5-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; margin: 28px auto 0;
    background: var(--v5-glass); border: 1px solid var(--v5-glass-border); flex-wrap: wrap; justify-content: center; }
.v5-tabs button {
    border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 14px;
    background: transparent; color: var(--text-secondary);
}
.v5-tabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--v5-amber), #f97316); color: #1a1204; }
.v5-reel {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 44px var(--v5-gap) 30px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.v5-reel::-webkit-scrollbar { display: none; }
.v5-reel[hidden] { display: none; }
.v5-reel figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.v5-reel .dev-phone { width: 250px; }
.v5-reel .dev-tablet, .v5-reel .dev-window { width: min(760px, 82vw); }
.v5-reel figcaption { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }

/* ---------- Stations ---------- */
.v5-stations { padding: calc(var(--v5-section) * .6) 0; text-align: center; }
.v5-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px auto 0; max-width: 900px; }
.v5-chips a, .v5-chips span {
    padding: 12px 18px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border);
    font-weight: 800; font-size: 15px; color: var(--text-primary); text-decoration: none;
}
.v5-chips a:hover { border-color: rgba(245,158,11,.45); }
.v5-note { margin-top: 20px; font-size: 14px; color: var(--text-muted); }

/* ---------- Downloads ---------- */
.v5-download { padding: calc(var(--v5-section) * .8) 0; }
.v5-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 40px; }
.v5-dl {
    display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px;
    background: var(--bg-card); border: 1px solid var(--border); text-align: left;
}
.v5-dl .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg-elevated);
    border: 1px solid var(--border); color: var(--text-primary); }
.v5-dl .ic svg { width: 22px; height: 22px; }
.v5-dl h3 { margin: 6px 0 0; font-size: 20px; font-weight: 900; color: var(--text-primary); }
.v5-dl p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); flex: 1; }
.v5-dl .meta { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.v5-dl .v5-btn { min-height: 46px; padding: 0 18px; font-size: 15px; justify-content: center; }
.v5-dl .soon { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 999px;
    border: 1px dashed var(--border-light); color: var(--text-muted); font-weight: 800; font-size: 14px; }
.v5-dl.featured { border-color: rgba(245,158,11,.45); box-shadow: 0 20px 60px rgba(245,158,11,.10); }

/* ---------- Final CTA ---------- */
.v5-final { padding: calc(var(--v5-section) * .7) 0 calc(var(--v5-section) * .9); text-align: center; }
.v5-final-card { padding: clamp(36px, 6vw, 72px) var(--v5-gap); border-radius: 36px;
    background: radial-gradient(60% 90% at 50% 0%, rgba(245,158,11,.22), transparent 70%), var(--bg-card);
    border: 1px solid rgba(245,158,11,.25); }
.v5-final .v5-lead { margin: 0 auto 30px; text-align: center; }
.v5-prices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 30px; }
.v5-prices span { padding: 10px 16px; border-radius: 12px; background: var(--v5-glass); border: 1px solid var(--v5-glass-border);
    font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.v5-prices strong { color: var(--text-primary); }

/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion: no-preference) {
    .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
    .rv.in { opacity: 1; transform: none; }
    .rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
}

/* ---------- Final CTA stats ---------- */
.v5-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 auto 32px; max-width: 820px; }
.v5-stats div { padding: 18px 12px; border-radius: 18px; background: var(--v5-glass); border: 1px solid var(--v5-glass-border); }
.v5-stats b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; color: var(--text-primary); }
.v5-stats span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 700px) { .v5-stats { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1100px) { .v5-dl-grid { grid-template-columns: repeat(5, 1fr); } .v5-dl { padding: 24px 20px; } }
@media (max-width: 480px) {
    .v5-pill { font-size: 12px; padding: 6px 12px 6px 6px; gap: 8px; }
    .v5-pill b { font-size: 10px; padding: 3px 8px; }
    .v5-hero .v5-cta-row .v5-btn { min-height: 48px; }
}

/* ---------- Review ---------- */
.v5-review { padding: calc(var(--v5-section) * .5) 0 calc(var(--v5-section) * .2); text-align: center; }
.v5-stars { font-size: 26px; letter-spacing: 6px; color: var(--v5-amber); }
.v5-review blockquote { margin: 18px auto 14px; max-width: 30em; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4;
    font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.v5-review-src { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }

/* ---------- Shops ---------- */
.v5-shops { padding: calc(var(--v5-section) * .5) 0; }
.v5-shops-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; padding: clamp(28px, 5vw, 56px);
    border-radius: 32px; background: var(--bg-card); border: 1px solid var(--border); }
@media (max-width: 900px) { .v5-shops-card { grid-template-columns: 1fr; } }

/* ---------- Guides ---------- */
.v5-guides { padding: calc(var(--v5-section) * .6) 0; }
.v5-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.v5-guide-grid a { padding: 16px 18px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); font-weight: 700; font-size: 15px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.v5-guide-grid a:hover { border-color: rgba(245,158,11,.45); transform: translateY(-2px); }
.v5-guide-lang { margin-top: 18px; font-size: 14px; color: var(--text-muted); }
.v5-guide-lang a { color: var(--text-secondary); }
@media (max-width: 900px) { .v5-guide-grid { grid-template-columns: 1fr; } }

/* ---------- Switch in minutes (import) ---------- */
.v5-switch { padding: calc(var(--v5-section) * .45) 0 calc(var(--v5-section) * .35); }
.v5-switch-card {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center;
    padding: clamp(28px, 5vw, 60px); border-radius: 32px; position: relative; overflow: hidden;
    background: radial-gradient(120% 90% at 100% 0%, rgba(59,130,246,.16), transparent 55%),
                radial-gradient(90% 80% at 0% 100%, rgba(245,158,11,.14), transparent 60%), var(--v5-glass);
    border: 1px solid var(--v5-glass-border);
}
.v5-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.v5-sources span {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px;
    background: rgba(255,255,255,.04); border: 1px solid var(--v5-glass-border); font-size: 13px; color: var(--text-secondary);
}
.v5-sources b { font-size: 15px; color: var(--text-primary); }
.v5-switch-visual { position: relative; padding: 0 6% 8% 0; }
.v5-switch-visual .dev-phone { position: absolute; width: 30%; right: 0; bottom: 0; }
@media (max-width: 900px) { .v5-switch-card { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .v5-sources { grid-template-columns: 1fr; } }

/* ---------- In motion (videos) ---------- */
.v5-motion { padding: calc(var(--v5-section) * .45) 0 calc(var(--v5-section) * .55); text-align: center; }
.v5-motion .v5-lead { margin: 14px auto 0; max-width: 640px; }
.v5-motion-stage {
    position: relative; max-width: 1180px; margin: 48px auto 0; padding: 0 var(--v5-gap) 6%;
}
.v5-motion-stage .dev-window { width: 86%; }
.v5-motion-stage .dev-phone { position: absolute; width: 21%; right: var(--v5-gap); bottom: 0; }
.v5-motion-stage .dev-phone.b { right: calc(var(--v5-gap) + 23%); width: 18%; bottom: -3%; }
@media (max-width: 760px) {
    .v5-motion-stage .dev-window { width: 100%; }
    .v5-motion-stage .dev-phone { width: 36%; right: -2%; bottom: -10%; }
    .v5-motion-stage .dev-phone.b { display: none; }
    .v5-motion-stage { padding-bottom: 20%; }
}

/* ---------- Features page (V5 top) ---------- */
.v5-ftop .v5-fhero { padding-bottom: calc(var(--v5-section) * .3); }
.v5-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.v5-jump a {
    padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--text-primary); background: var(--v5-glass); border: 1px solid var(--v5-glass-border);
    transition: border-color .2s, transform .2s;
}
.v5-jump a:hover { border-color: rgba(245,158,11,.6); transform: translateY(-1px); }
.v5-ftop .v5-feature { scroll-margin-top: 90px; }
.v5-ftop + .page-header { padding-top: calc(var(--v5-section) * .6); }

/* Portrait iPad (real iPadOS screens and the iPad video) */
.v5-visual .dev-tablet.portrait { width: min(62%, 420px); margin: 0 auto; }
.v5-reel .dev-tablet.portrait { width: min(340px, 72vw); }
@media (max-width: 900px) { .v5-visual .dev-tablet.portrait { width: min(78%, 420px); } }