:root {
    --bg: #08111d;
    --bg-soft: #0d1826;
    --panel: #111d2d;
    --panel-soft: #152235;
    --border: rgba(255, 255, 255, 0.08);
    --text: #f3f6fb;
    --muted: #9eacbc;
    --orange: #ff6d00;
    --blue: #5b7c99;
    --success: #72d6a0;
    --max-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top right, rgba(91, 124, 153, 0.14), transparent 32%),
        linear-gradient(180deg, #08111d 0%, #0a1420 100%);
    color: var(--text);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 17, 29, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.nav-wrap {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 0 auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-text strong {
    font-size: 18px;
    letter-spacing: 0.04em;
}

.brand-text span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
}

.main-nav > a:not(.login-button) {
    color: #cbd4df;
}

.main-nav > a:not(.login-button):hover {
    color: #ffffff;
}

.login-button {
    border: 1px solid rgba(255, 109, 0, 0.7);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    transition: 0.2s ease;
}

.login-button:hover {
    background: var(--orange);
    border-color: var(--orange);
}

main {
    overflow: hidden;
}

.hero {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 0 auto;
    min-height: 680px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 70px;
    padding: 90px 0 80px;
}

.hero-content {
    max-width: 650px;
}

.hero-badge {
    display: inline-block;
    padding: 8px 13px;
    border: 1px solid rgba(255, 109, 0, 0.35);
    background: rgba(255, 109, 0, 0.08);
    color: #ff9f55;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.hero h1 span {
    color: var(--orange);
}

.hero-lead {
    margin: 26px 0 0;
    max-width: 610px;
    font-size: 19px;
    line-height: 1.7;
    color: #b7c2cf;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.primary-button,
.secondary-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.2s ease;
}

.primary-button {
    background: var(--orange);
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(255, 109, 0, 0.18);
}

.primary-button:hover {
    transform: translateY(-1px);
    background: #ff7d1c;
}

.secondary-button {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.025);
    color: #d8e0e9;
}

.secondary-button:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.hero-points {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #9cabbc;
    font-size: 13px;
}

.hero-points span {
    position: relative;
    padding-left: 15px;
}

.hero-points span::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--orange);
}

.hero-preview {
    position: relative;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
        var(--panel);
    border-radius: 18px;
    padding: 24px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(91, 124, 153, 0.05);
}

.hero-preview::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 109, 0, 0.08);
    filter: blur(70px);
    right: -70px;
    top: -70px;
    pointer-events: none;
}

.preview-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #cbd5df;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.preview-live {
    color: var(--orange);
}

.preview-title {
    margin-top: 20px;
    font-size: 25px;
    font-weight: 700;
    max-width: 420px;
    line-height: 1.25;
}

.preview-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.preview-card {
    min-height: 145px;
    background: #0d1724;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.preview-card small {
    color: #8293a6;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.preview-card strong {
    display: block;
    margin-top: 12px;
    font-size: 24px;
    color: #ffffff;
}

.preview-card span {
    display: block;
    color: #8293a6;
    font-size: 12px;
    margin-top: auto;
}

.features-section {
    padding: 105px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.section-heading {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
    text-align: center;
}

.section-heading > span,
.pricing-label,
.mcvr-section > div > span {
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mcvr-section p + p {
    margin-top: 14px;
}

.section-heading h2 {
    margin: 10px 0 14px;
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -0.035em;
}

.pricing-copy p.device-note {
    margin-top: 18px;
}

.section-heading p {
    margin: 0 auto;
    color: var(--muted);
    font-size: 17px;
    max-width: 650px;
}

.feature-grid {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.feature-card {
    position: relative;
    min-height: 260px;
    padding: 28px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 109, 0, 0.28);
}

.feature-number {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 109, 0, 0.09);
    color: var(--orange);
    font-size: 12px;
    font-weight: 700;
}

.feature-card h3 {
    margin: 24px 0 10px;
    font-size: 20px;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.pricing-section {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 0 auto;
    padding: 110px 0;
}

.pricing-card {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 70px;
    align-items: center;
    padding: 56px;
    background:
        linear-gradient(135deg, rgba(91, 124, 153, 0.08), transparent 60%),
        var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.pricing-copy h2 {
    margin: 12px 0 16px;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.pricing-copy h2 span {
    color: var(--orange);
}

.pricing-copy p {
    color: var(--muted);
    margin: 0;
    font-size: 16px;
}

.price-box {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0c1622;
    border-radius: 15px;
    text-align: center;
}

.price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
}

.currency {
    font-size: 25px;
    margin-right: 4px;
    margin-bottom: 7px;
    color: #dce4ec;
}

.price strong {
    font-size: 62px;
    letter-spacing: -0.05em;
}

.period {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 8px 7px;
}

.price-box > p {
    margin: 10px 0 24px;
    color: var(--muted);
    font-size: 13px;
}

.price-button {
    width: 100%;
}

.yearly-price {
    margin-top: 40px;
}

.price-box small {
    display: block;
    color: #75879a;
    margin-top: 14px;
}

.mcvr-section {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 100px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 30px;
    align-items: center;
}

.mcvr-section img {
    width: 250px;
}

.mcvr-section h2 {
    margin: 6px 0 8px;
    font-size: 30px;
}

.mcvr-section p {
    margin: 0;
    color: var(--muted);
    max-width: 630px;
}

.mcvr-section a {
    display: inline-block;
    margin-top: 14px;
    color: #dce7f1;
    border-bottom: 1px solid rgba(255, 109, 0, 0.6);
}

.site-footer {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 0 auto;
    min-height: 90px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #75879a;
    font-size: 12px;
}

.site-footer > div {
    display: flex;
    flex-direction: column;
}

.site-footer strong {
    color: #cbd5df;
}

.site-footer p {
    margin: 0;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-top: 65px;
    }

    .hero-content {
        max-width: 760px;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing-card {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 650px) {
    .nav-wrap {
        min-height: 68px;
    }

    .brand-text span {
        display: none;
    }

    .main-nav {
        gap: 12px;
    }

    .main-nav > a:not(.login-button) {
        display: none;
    }

    .login-button {
        padding: 9px 15px;
    }

    .hero {
        width: min(100% - 28px, var(--max-width));
        padding: 55px 0 70px;
    }

    .hero h1 {
        font-size: 49px;
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .hero-points {
        flex-direction: column;
        gap: 7px;
    }

    .hero-preview {
        padding: 18px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .features-section {
        padding: 75px 0;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        width: min(100% - 28px, var(--max-width));
    }

    .pricing-section {
        width: min(100% - 28px, var(--max-width));
        padding: 75px 0;
    }

    .pricing-card {
        padding: 30px 22px;
    }

    .price strong {
        font-size: 52px;
    }

    .mcvr-section {
        width: min(100% - 28px, 900px);
        grid-template-columns: 1fr;
        padding-bottom: 75px;
    }

    .mcvr-section img {
        width: 80px;
    }

    .site-footer {
        width: min(100% - 28px, var(--max-width));
        padding: 24px 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

/* =========================================
   AMBIENT HERO BREATHING EFFECT
   ========================================= */

.hero {
    position: relative;
    isolation: isolate;
}

.hero-content,
.hero-preview {
    position: relative;
    z-index: 2;
}


/* Soft orange / blue atmospheric glow */

.hero::before {
    content: "";
    position: absolute;

    width: 850px;
    height: 850px;

    right: -250px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 109, 0, 0.38) 0%,
            rgba(91, 124, 153, 0.22) 35%,
            rgba(8, 17, 29, 0) 70%
        );

    filter: blur(35px);

    opacity: 0.45;
    pointer-events: none;
    z-index: 0;

    animation:
        mcvrAmbientBreath
        8s
        ease-in-out
        infinite;
}

/* Slow atmospheric inhale / exhale */

@keyframes mcvrAmbientBreath {

    0%,
    100% {
        transform: scale(0.82);
        opacity: 0.30;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.80;
    }

}

/* Extremely subtle logo movement */

@keyframes mcvrLogoBreath {

    0%,
    100% {
        transform: scale(0.97);
        opacity: 0.012;
    }

    50% {
        transform: scale(1.035);
        opacity: 0.035;
    }

}


/* Tiny pulse around the planner preview */

.hero-preview {
    animation:
        mcvrPreviewBreath
        16s
        ease-in-out
        infinite;
}


@keyframes mcvrPreviewBreath {

    0%,
    100% {
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(91, 124, 153, 0.05);
    }

    50% {
        box-shadow:
            0 32px 90px rgba(0, 0, 0, 0.34),
            0 0 32px rgba(255, 109, 0, 0.055),
            0 0 0 1px rgba(91, 124, 153, 0.09);
    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .hero::before,
    .hero::after,
    .hero-preview {
        animation: none;
    }

}
/* =========================================
   SCROLL REVEAL
   ========================================= */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(42px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Slight stagger for feature cards */

.feature-card.reveal-on-scroll:nth-child(1) {
    transition-delay: 0.05s;
}

.feature-card.reveal-on-scroll:nth-child(2) {
    transition-delay: 0.10s;
}

.feature-card.reveal-on-scroll:nth-child(3) {
    transition-delay: 0.15s;
}

.feature-card.reveal-on-scroll:nth-child(4) {
    transition-delay: 0.20s;
}

.feature-card.reveal-on-scroll:nth-child(5) {
    transition-delay: 0.25s;
}

.feature-card.reveal-on-scroll:nth-child(6) {
    transition-delay: 0.30s;
}


@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================
   CONNECTED PROJECT PREVIEW
   ========================================= */
.orange-text { color: var(--orange); }
.connected-section {
    padding: 105px 0 115px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(8,17,29,.2));
}
.connection-map {
    width: min(var(--max-width), calc(100% - 40px));
    margin: 55px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.entry-card {
    width: min(390px, 100%);
    padding: 24px;
    background: var(--panel);
    border: 1px solid rgba(255,109,0,.45);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 32px rgba(255,109,0,.06);
}
.entry-label,.group-label { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.entry-card > strong { display:block; font-size:22px; margin:8px 0 16px; }
.entry-line { display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.entry-line b { color:var(--text); }
.entry-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.entry-tags span { padding:5px 8px; border:1px solid var(--border); border-radius:6px; color:#aebaca; font-size:11px; }
.entry-button { margin-top:18px; padding:10px; text-align:center; background:var(--orange); border-radius:7px; font-size:13px; font-weight:700; }
.flow-stem { width:1px; height:52px; background:linear-gradient(var(--orange), rgba(255,109,0,.2)); }
.connection-groups { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }
.connection-groups::before { content:""; position:absolute; height:1px; left:16.66%; right:16.66%; top:-1px; background:linear-gradient(90deg, rgba(255,109,0,.15), var(--orange), rgba(255,109,0,.15)); }
.connection-group { position:relative; padding:27px; background:var(--panel); border:1px solid var(--border); border-radius:14px; }
.connection-group::before { content:""; position:absolute; width:1px; height:20px; background:var(--orange); top:-20px; left:50%; }
.connection-group h3 { margin:8px 0 20px; font-size:19px; }
.connection-item { padding:12px 0; border-top:1px solid var(--border); font-weight:700; font-size:14px; }
.connection-item small { display:block; margin-top:3px; color:var(--muted); font-weight:400; font-size:11px; }

/* Preview the data-flow animation */
.entry-card { animation: entryPulse 7.5s ease-in-out infinite; }
.connection-group { opacity:.58; }
.group-operations { animation: groupFlow 7.5s ease-in-out infinite .8s; }
.group-finances { animation: groupFlow 7.5s ease-in-out infinite 2.2s; }
.group-project { animation: groupFlow 7.5s ease-in-out infinite 3.6s; }
@keyframes entryPulse { 0%,100%{box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 10px rgba(255,109,0,.03)} 8%,22%{box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 36px rgba(255,109,0,.16)} }
@keyframes groupFlow { 0%,12%,100%{opacity:.58; transform:translateY(0); border-color:var(--border)} 18%,48%{opacity:1; transform:translateY(-3px); border-color:rgba(255,109,0,.42)} 58%{opacity:.58; transform:translateY(0); border-color:var(--border)} }
@media (prefers-reduced-motion: reduce) { .entry-card,.connection-group { animation:none; opacity:1; } }
@media (max-width:900px) { .connection-groups { grid-template-columns:1fr; gap:30px; } .connection-groups::before { display:none; } .connection-group::before { left:50%; } }


/* =========================================
   PRODUCT SHOWCASE
   ========================================= */

.showcase-section {
    position: relative;
    padding: 115px 0 135px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 109, 0, 0.055),
            transparent 42%
        );
}


/* Subtle architectural atmosphere */

.showcase-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(91, 124, 153, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(91, 124, 153, 0.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%
        );

    pointer-events: none;
    z-index: 0;
}


/* Main flow */

.showcase-flow {
    position: relative;

    width: min(1380px, calc(100% - 50px));
    margin: 80px auto 0;

    display: flex;
    flex-direction: column;
    gap: 130px;
}


/* Subtle vertical project line */

.showcase-flow::before {
    content: "";

    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 109, 0, 0.35) 12%,
            rgba(91, 124, 153, 0.25) 50%,
            rgba(255, 109, 0, 0.35) 88%,
            transparent
        );

    pointer-events: none;
}


/* Individual showcase row */

.showcase-item {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);

    gap: 55px;
    align-items: center;
}


/* Alternating rows */

.showcase-add-item,
.showcase-overview {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
}


/* Copy */

.showcase-copy {
    position: relative;
    z-index: 3;
}

.showcase-number {
    display: block;

    color: rgba(255, 109, 0, 0.18);

    font-size: 72px;
    font-weight: 700;
    line-height: 0.9;

    letter-spacing: -0.06em;

    margin-bottom: 10px;
}

.showcase-label {
    display: block;

    color: var(--orange);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.15em;
}

.showcase-copy h3 {
    margin: 10px 0 12px;

    color: var(--text);

    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.showcase-copy p {
    margin: 0;

    max-width: 360px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.75;
}


/* Real application screenshot */

.showcase-screen {
    position: relative;

    padding: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.38),
        0 0 50px rgba(255, 109, 0, 0.035);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


/* Browser-style top edge */

.showcase-screen::before {
    content: "•••";

    position: absolute;

    top: -27px;
    left: 14px;

    color: #536273;

    font-size: 18px;
    letter-spacing: 4px;
}


/* Screenshot */

.showcase-screen img {
    width: 100%;
    height: auto;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    background: #08111d;
}


/* Slight cinematic positioning */

.showcase-welcome .showcase-screen,
.showcase-quotes .showcase-screen {
    transform: perspective(1600px) rotateY(-2deg);
}

.showcase-add-item .showcase-screen,
.showcase-overview .showcase-screen {
    transform: perspective(1600px) rotateY(2deg);
}


/* Hover */

.showcase-screen:hover {
    transform:
        perspective(1600px)
        rotateY(0deg)
        translateY(-5px);

    border-color: rgba(255, 109, 0, 0.32);

    box-shadow:
        0 42px 95px rgba(0, 0, 0, 0.42),
        0 0 55px rgba(255, 109, 0, 0.08);
}


/* Orange project markers */

.showcase-item::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 0 6px rgba(255, 109, 0, 0.08),
        0 0 24px rgba(255, 109, 0, 0.35);
}


/* =========================================
   SHOWCASE RESPONSIVE
   ========================================= */

@media (max-width: 1050px) {

    .showcase-flow {
        width: min(100% - 40px, 900px);
        gap: 90px;
    }

    .showcase-flow::before,
    .showcase-item::before {
        display: none;
    }

    .showcase-item,
    .showcase-add-item,
    .showcase-overview {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .showcase-add-item .showcase-screen,
    .showcase-overview .showcase-screen {
        order: 2;
    }

    .showcase-add-item .showcase-copy,
    .showcase-overview .showcase-copy {
        order: 1;
    }

    .showcase-copy {
        max-width: 620px;
    }

    .showcase-copy p {
        max-width: 560px;
    }

    .showcase-screen,
    .showcase-welcome .showcase-screen,
    .showcase-quotes .showcase-screen,
    .showcase-add-item .showcase-screen,
    .showcase-overview .showcase-screen {
        transform: none;
    }

}


@media (max-width: 650px) {

    .showcase-section {
        padding: 80px 0 90px;
    }

    .showcase-flow {
        width: min(100% - 28px, 900px);
        margin-top: 60px;
        gap: 75px;
    }

    .showcase-number {
        font-size: 55px;
    }

    .showcase-copy h3 {
        font-size: 27px;
    }

    .showcase-screen {
        padding: 5px;
        border-radius: 11px;
    }

    .showcase-screen img {
        border-radius: 7px;
    }

}
/* Add Item is a taller screenshot, so keep it more compact */
.showcase-add-item .showcase-screen {
    width: 72%;
    justify-self: center;
}

/* =========================================
   PROJECT JOURNEY — FULL CIRCLE TEST
   ========================================= */

.journey-section {
    position: relative;
    padding: 120px 0 150px;
    overflow: hidden;

    border-top: 1px solid var(--border);

    background:
        radial-gradient(
            ellipse at center,
            rgba(91, 124, 153, 0.08),
            transparent 58%
        );
}

.journey-wrap {
    position: relative;

    width: min(1380px, calc(100% - 50px));
    min-height: 920px;

    margin: 90px auto 0;
}


/* Large elliptical project path */

/* Large elliptical project path */

.journey-path {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 10%;
    bottom: 10%;

    border: 1px solid rgba(91, 124, 153, 0.22);
    border-radius: 50%;

    box-shadow:
        inset 0 0 70px rgba(91, 124, 153, 0.025),
        0 0 50px rgba(255, 109, 0, 0.025);
}

.journey-path::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: inherit;

    border-top: 2px solid rgba(255, 109, 0, 0.65);
    border-right: 2px solid rgba(255, 109, 0, 0.18);
    border-bottom: 2px solid rgba(91, 124, 153, 0.32);
    border-left: 2px solid rgba(91, 124, 153, 0.14);
}


/* Centre */

.journey-centre {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 230px;
    height: 230px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(255, 109, 0, 0.28);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 109, 0, 0.09),
            rgba(13, 24, 38, 0.96) 68%
        );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.38),
        0 0 55px rgba(255, 109, 0, 0.06);

    z-index: 3;
}

.journey-centre span {
    color: var(--orange);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.16em;
}

.journey-centre strong {
    margin-top: 10px;

    font-size: 20px;
    line-height: 1.25;

    letter-spacing: 0.03em;
}

.journey-centre small {
    margin-top: 11px;

    color: var(--muted);
    font-size: 11px;
}


/* Four stages */

.journey-stage {
    position: absolute;
    z-index: 4;

    width: 42%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;

    align-items: center;
    gap: 24px;
}

.journey-welcome {
    left: 0;
    top: 0;
}

.journey-add {
    right: 0;
    top: 0;

    grid-template-columns: 180px minmax(0, 0.72fr);
}

.journey-quotes {
    left: 0;
    bottom: 0;
}

.journey-overview {
    right: 0;
    bottom: 0;

    grid-template-columns: 180px minmax(0, 1fr);
}


/* Screenshot */

.journey-screen {
    position: relative;

    padding: 6px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(255, 109, 0, 0.035);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.journey-screen img {
    width: 100%;
    height: auto;

    border-radius: 8px;
}

.journey-stage:hover .journey-screen {
    transform: translateY(-4px);
    border-color: rgba(255, 109, 0, 0.35);
}


/* Stage text */

.journey-copy {
    min-width: 0;
}

.journey-number {
    display: block;

    color: rgba(255, 109, 0, 0.22);

    font-size: 45px;
    font-weight: 700;
    line-height: 0.9;
}

.journey-label {
    display: block;

    margin-top: 7px;

    color: var(--orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.journey-copy h3 {
    margin: 7px 0 8px;

    font-size: 20px;
    line-height: 1.15;
}

.journey-copy p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.55;
}


/* Slight depth */




/* =========================================
   JOURNEY RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {

    .journey-wrap {
        width: min(900px, calc(100% - 40px));
        min-height: 0;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 55px 30px;
    }

    .journey-path,
    .journey-centre {
        display: none;
    }

    .journey-stage,
    .journey-welcome,
    .journey-add,
    .journey-quotes,
    .journey-overview {
        position: relative;
        inset: auto;

        width: auto;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }

    .journey-stage .journey-copy {
        order: 1;
    }

    .journey-stage .journey-screen {
        order: 2;
        transform: none;
    }
}


@media (max-width: 650px) {

    .journey-section {
        padding: 80px 0 90px;
    }

    .journey-wrap {
        width: min(100% - 28px, 600px);

        margin-top: 60px;

        grid-template-columns: 1fr;
        gap: 70px;
    }

    .journey-number {
        font-size: 52px;
    }

    .journey-copy h3 {
        font-size: 25px;
    }

    .journey-copy p {
        font-size: 14px;
    }
}


/* =========================================
   PROJECT JOURNEY — 3D DEPTH PASS
   ========================================= */


/* Give the whole journey a perspective space */

.journey-wrap {
    perspective: 1500px;
    perspective-origin: 50% 48%;
}


/* Turn the oval into a subtle raised project track */

.journey-path {
    transform:
        perspective(1200px)
        rotateX(4deg);

    border: 2px solid rgba(91, 124, 153, 0.22);

    box-shadow:
        inset 0 3px 10px rgba(255, 255, 255, 0.025),
        inset 0 -8px 18px rgba(0, 0, 0, 0.28),
        0 10px 25px rgba(0, 0, 0, 0.22),
        0 0 35px rgba(255, 109, 0, 0.025);
}


/* Slight second edge gives the track thickness */

.journey-path::after {
    content: "";

    position: absolute;
    inset: 8px;

    border-radius: inherit;

    border: 1px solid rgba(255, 255, 255, 0.035);

    box-shadow:
        inset 0 0 22px rgba(91, 124, 153, 0.04);

    pointer-events: none;
}


/* Screens now feel like panels sitting above the track */

.journey-screen {
    transform-style: preserve-3d;

    box-shadow:
        0 12px 0 rgba(5, 11, 18, 0.55),
        0 28px 55px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(91, 124, 153, 0.055);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* Individual perspective angles */

.journey-welcome .journey-screen {
    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateX(2deg)
        translateZ(20px);
}

.journey-add .journey-screen {
    transform:
        perspective(1000px)
        rotateY(7deg)
        rotateX(2deg)
        translateZ(20px);
}

.journey-quotes .journey-screen {
    transform:
        perspective(1000px)
        rotateY(-7deg)
        rotateX(-2deg)
        translateZ(20px);
}

.journey-overview .journey-screen {
    transform:
        perspective(1000px)
        rotateY(7deg)
        rotateX(-2deg)
        translateZ(20px);
}

/* Bring a screenshot gently toward the visitor */

.journey-stage:hover .journey-screen {
    transform:
        perspective(1200px)
        rotateX(0deg)
        rotateY(0deg)
        translateY(-7px)
        translateZ(18px);

    border-color: rgba(255, 109, 0, 0.38);

    box-shadow:
        0 14px 0 rgba(5, 11, 18, 0.48),
        0 38px 70px rgba(0, 0, 0, 0.48),
        0 0 38px rgba(255, 109, 0, 0.08);
}


/* Give the centre hub a little physical depth */

.journey-centre {
    transform:
        translate(-50%, -50%)
        translateZ(24px);

    box-shadow:
        inset 0 2px 8px rgba(255, 255, 255, 0.025),
        inset 0 -12px 25px rgba(0, 0, 0, 0.25),
        0 14px 0 rgba(5, 11, 18, 0.35),
        0 35px 75px rgba(0, 0, 0, 0.42),
        0 0 45px rgba(255, 109, 0, 0.07);
}


/* Don't force desktop 3D onto smaller layouts */

@media (max-width: 1000px) {

    .journey-wrap {
        perspective: none;
    }

    .journey-path {
        transform: none;
    }

    .journey-stage .journey-screen,
    .journey-stage:hover .journey-screen {
        transform: none;
    }
}

/* =========================================
   JOURNEY — PROJECT NOTES
   ========================================= */

.journey-note {
    position: absolute;
    z-index: 8;

    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;

    color: rgba(170, 196, 218, 0.82);

    letter-spacing: 0.01em;

    pointer-events: none;
}

.journey-note-welcome {
    left: 18px;
    bottom: -42px;

    transform: rotate(-4deg);
}


/* Larger handwritten project note */

.journey-sketch-note {
    position: absolute;
    z-index: 5;

    font-family: "Segoe Print", "Bradley Hand", cursive;

    color: rgba(170, 196, 218, 0.72);

    pointer-events: none;
}

.journey-sketch-note strong {
    display: block;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.journey-sketch-note span {
    display: block;

    margin-top: 9px;

    font-size: 11px;
    font-weight: 500;

    color: rgba(170, 196, 218, 0.46);
}

.journey-sketch-left {
    left: 7%;
    top: 39%;

    transform: rotate(-5deg);
}

.journey-note-add {
    right: 16px;
    bottom: -52px;

    max-width: 250px;
    text-align: right;

    transform: rotate(3deg);
}

.journey-note-quotes {
    left: 18px;
    top: -48px;

    transform: rotate(-3deg);
}

.journey-note-overview {
    right: 18px;
    top: -48px;

    max-width: 280px;
    text-align: right;

    transform: rotate(3deg);
}

/* =========================================
   JOURNEY — IMAGE LIGHTBOX
   ========================================= */

.journey-expand-image {
    cursor: zoom-in;
}

.journey-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;

    background: rgba(3, 8, 14, 0.92);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.journey-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.journey-lightbox.is-open img {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.journey-lightbox img {
    display: block;

    max-width: min(1400px, 92vw);
    max-height: 88vh;

    width: auto;
    height: auto;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.65),
        0 0 45px rgba(91, 124, 153, 0.08);

     transform: scale(0.90) translateY(18px);

	transition:
    	transform 1.2s ease,
    	opacity 0.9s ease;

	opacity: 0;

}

.journey-lightbox-close {
    position: absolute;
    top: 24px;
    right: 30px;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;

    background: rgba(8, 17, 29, 0.82);
    color: #ffffff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.journey-lightbox-close:hover {
    border-color: rgba(255, 109, 0, 0.55);
    color: var(--orange);
}

@media (max-width: 650px) {
    .journey-lightbox {
        padding: 20px;
    }

    .journey-lightbox img {
        max-width: 96vw;
        max-height: 84vh;
    }
}


/* =========================================
   FEATURE STORY — HIDE VISUAL NUMBERS
   ========================================= */

.feature-number {
    display: none;
}

/* =========================================
   FEATURE STORY — SCENE 01
   ========================================= */

.build-scene {
    position: relative;
    height: 82px;
    margin-bottom: 18px;
}

/* Empty site */

.build-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;

    height: 1px;

    background: rgba(170, 196, 218, 0.22);
}

/* Materials waiting on site */

.build-materials {
    position: absolute;
    left: 18px;
    bottom: 9px;

    width: 46px;
    height: 24px;
}

.build-materials span {
    position: absolute;

    width: 28px;
    height: 6px;

    border: 1px solid rgba(170, 196, 218, 0.48);
    border-radius: 1px;
}

.build-materials span:nth-child(1) {
    left: 0;
    bottom: 0;
}

.build-materials span:nth-child(2) {
    left: 8px;
    bottom: 7px;
}

.build-materials span:nth-child(3) {
    left: 3px;
    bottom: 14px;
}

/* Worker */

.build-worker {
    position: absolute;
    right: 74px;
    bottom: 10px;

    width: 30px;
    height: 55px;
}

.worker-head {
    position: absolute;
    left: 10px;
    top: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: rgba(170, 196, 218, 0.72);
}

.worker-body {
    position: absolute;
    left: 12px;
    top: 12px;

    width: 7px;
    height: 23px;

    border-radius: 4px;

    background: rgba(170, 196, 218, 0.72);

    transform: rotate(-7deg);
}

.worker-arm {
    position: absolute;
    left: 16px;
    top: 18px;

    width: 22px;
    height: 4px;

    border-radius: 4px;

    background: rgba(170, 196, 218, 0.68);

    transform: rotate(18deg);
    transform-origin: left center;
}

.worker-leg {
    position: absolute;
    top: 33px;

    width: 5px;
    height: 22px;

    border-radius: 4px;

    background: rgba(170, 196, 218, 0.68);

    transform-origin: top center;
}

.worker-leg-left {
    left: 12px;
    transform: rotate(10deg);
}

.worker-leg-right {
    left: 17px;
    transform: rotate(-11deg);
}

/* Wheelbarrow */

.build-wheelbarrow {
    position: absolute;
    right: 18px;
    bottom: 10px;

    width: 58px;
    height: 35px;
}

.wheelbarrow-tray {
    position: absolute;
    left: 6px;
    top: 5px;

    width: 35px;
    height: 15px;

    border: 1px solid rgba(255, 109, 0, 0.65);
    border-top: 0;

    transform: skewX(-12deg);
}

.wheelbarrow-handle {
    position: absolute;
    left: -10px;
    top: 7px;

    width: 22px;
    height: 2px;

    background: rgba(170, 196, 218, 0.62);

    transform: rotate(8deg);
}

.wheelbarrow-wheel {
    position: absolute;
    left: 30px;
    bottom: 0;

    width: 11px;
    height: 11px;

    border: 2px solid rgba(170, 196, 218, 0.65);
    border-radius: 50%;
}

/* =========================================
   FEATURE STORY — SCENE 01 ARRIVAL
   ========================================= */

/* Worker and wheelbarrow arrive together */

.build-scene-01 .build-worker,
.build-scene-01 .build-wheelbarrow {
    animation: scene01Arrival 8s ease-in-out infinite;
}

/* Tiny wheel rotation while moving */

.build-scene-01 .wheelbarrow-wheel {
    animation: scene01Wheel 8s ease-in-out infinite;
}

@keyframes scene01Arrival {

    0% {
        transform: translateX(-130px);
        opacity: 0;
    }

    8% {
        transform: translateX(-110px);
        opacity: 1;
    }

    70% {
        transform: translateX(45px);
        opacity: 1;
    }

    88% {
        transform: translateX(45px);
        opacity: 1;
    }

    100% {
        transform: translateX(45px);
        opacity: 0;
    }
}

@keyframes scene01Wheel {

    0%,
    10% {
        transform: rotate(0deg);
    }

    55% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .build-scene-01 .build-worker,
    .build-scene-01 .build-wheelbarrow,
    .build-scene-01 .wheelbarrow-wheel {
        animation: none;
    }
}

/* =========================================
   FEATURE STORY — SCENE 02
   ========================================= */

/* Foundation / first footprint */

.build-foundation {
    position: absolute;
    left: 50%;
    bottom: 9px;

    width: 92px;
    height: 27px;

    transform: translateX(-50%);
}

.build-foundation span {
    position: absolute;
    height: 1px;

    background: rgba(255, 109, 0, 0.62);
}

.foundation-left {
    left: 4px;
    bottom: 2px;

    width: 72px;

    transform: rotate(-12deg);
    transform-origin: left center;
}

.foundation-back {
    left: 18px;
    bottom: 18px;

    width: 68px;

    transform: rotate(0deg);
    transform-origin: left center;
}

.foundation-right {
    left: 75px;
    bottom: 2px;

    width: 24px;

    transform: rotate(-43deg);
    transform-origin: left center;
}

.build-foundation::after {
    content: "";

    position: absolute;
    left: 18px;
    bottom: 18px;

    width: 20px;
    height: 1px;

    background: rgba(255, 109, 0, 0.62);

    transform: rotate(42deg);
    transform-origin: left center;
}

/* Worker checking plans */

.build-plans-worker {
    position: absolute;
    left: 18px;
    bottom: 10px;

    width: 52px;
    height: 58px;
}

.plans-head {
    position: absolute;
    left: 8px;
    top: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;
    background: rgba(170, 196, 218, 0.72);
}

.plans-body {
    position: absolute;
    left: 10px;
    top: 12px;

    width: 7px;
    height: 25px;

    border-radius: 4px;
    background: rgba(170, 196, 218, 0.72);
}

.plans-arm {
    position: absolute;
    left: 14px;
    top: 19px;

    width: 24px;
    height: 4px;

    border-radius: 4px;
    background: rgba(170, 196, 218, 0.66);

    transform: rotate(10deg);
    transform-origin: left center;
}

.plans-sheet {
    position: absolute;
    left: 29px;
    top: 13px;

    width: 22px;
    height: 17px;

    border: 1px solid rgba(170, 196, 218, 0.58);

    transform: rotate(8deg);
}

.plans-leg {
    position: absolute;
    top: 35px;

    width: 5px;
    height: 22px;

    border-radius: 4px;
    background: rgba(170, 196, 218, 0.68);

    transform-origin: top center;
}

.plans-leg-left {
    left: 10px;
    transform: rotate(7deg);
}

.plans-leg-right {
    left: 15px;
    transform: rotate(-8deg);
}


/* Worker setting out the site */

.build-site-worker {
    position: absolute;
    right: 18px;
    bottom: 10px;

    width: 34px;
    height: 56px;
}

.site-head {
    position: absolute;
    left: 10px;
    top: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;
    background: rgba(170, 196, 218, 0.72);
}

.site-body {
    position: absolute;
    left: 12px;
    top: 12px;

    width: 7px;
    height: 23px;

    border-radius: 4px;
    background: rgba(170, 196, 218, 0.72);

    transform: rotate(5deg);
}

.site-arm {
    position: absolute;
    left: 12px;
    top: 20px;

    width: 24px;
    height: 4px;

    border-radius: 4px;
    background: rgba(255, 109, 0, 0.62);

    transform: rotate(30deg);
    transform-origin: left center;
}

.site-leg {
    position: absolute;
    top: 34px;

    width: 5px;
    height: 21px;

    border-radius: 4px;
    background: rgba(170, 196, 218, 0.68);

    transform-origin: top center;
}

.site-leg-left {
    left: 12px;
    transform: rotate(9deg);
}

.site-leg-right {
    left: 17px;
    transform: rotate(-10deg);
}

/* =========================================
   FEATURE STORY — SCENE 02 ANIMATION
   ========================================= */

/* Plans gently tilt as they're checked */

.build-scene-02 .plans-sheet {
    animation: scene02Plans 8s ease-in-out infinite;
}

/* Setting-out worker makes a small measuring movement */

.build-scene-02 .site-arm {
    animation: scene02Arm 8s ease-in-out infinite;
    transform-origin: left center;
}

/* Foundation draws itself onto the site */

.build-scene-02 .build-foundation span {
    transform-origin: left center;
    animation: scene02Foundation 8s ease-in-out infinite;
}

.build-scene-02 .foundation-left {
    animation-delay: 0.6s;
}

.build-scene-02 .foundation-back {
    animation-delay: 1.0s;
}

.build-scene-02 .foundation-right {
    animation-delay: 1.4s;
}


@keyframes scene02Plans {

    0%,
    15% {
        transform: rotate(8deg);
    }

    35% {
        transform: rotate(2deg);
    }

    55%,
    100% {
        transform: rotate(8deg);
    }
}


@keyframes scene02Arm {

    0%,
    25% {
        transform: rotate(30deg);
    }

    45% {
        transform: rotate(18deg);
    }

    65%,
    100% {
        transform: rotate(30deg);
    }
}


@keyframes scene02Foundation {

    0%,
    20% {
        opacity: 0;
        scale: 0 1;
    }

    55%,
    90% {
        opacity: 1;
        scale: 1 1;
    }

    100% {
        opacity: 0;
        scale: 1 1;
    }
}


@media (prefers-reduced-motion: reduce) {

    .build-scene-02 .plans-sheet,
    .build-scene-02 .site-arm,
    .build-scene-02 .build-foundation span {
        animation: none;
    }
}

/* =========================================
   FEATURE STORY — SCENE 01 WALKING
   ========================================= */

.build-scene-01 .worker-leg-left {
    animation: scene01LegLeft 8s ease-in-out infinite;
}

.build-scene-01 .worker-leg-right {
    animation: scene01LegRight 8s ease-in-out infinite;
}

@keyframes scene01LegLeft {

    0%, 8% {
        transform: rotate(-12deg);
    }

    16% {
        transform: rotate(12deg);
    }

    24% {
        transform: rotate(-12deg);
    }

    32% {
        transform: rotate(12deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    48% {
        transform: rotate(12deg);
    }

    55%, 100% {
        transform: rotate(7deg);
    }
}

@keyframes scene01LegRight {

    0%, 8% {
        transform: rotate(12deg);
    }

    16% {
        transform: rotate(-12deg);
    }

    24% {
        transform: rotate(12deg);
    }

    32% {
        transform: rotate(-12deg);
    }

    40% {
        transform: rotate(12deg);
    }

    48% {
        transform: rotate(-12deg);
    }

    55%, 100% {
        transform: rotate(-8deg);
    }
}

/* =========================================
   FEATURE STORY — SCENE 02 BLOCKS
   ========================================= */

.build-wall-start {
    position: absolute;
    left: 50%;
    bottom: 9px;

    width: 82px;
    height: 30px;

    transform: translateX(-50%);
}

.build-block {
    position: absolute;

    width: 25px;
    height: 8px;

    border: 1px solid rgba(170, 196, 218, 0.55);
    border-radius: 1px;

    background: rgba(91, 124, 153, 0.08);
}

/* Bottom course */

.block-01 {
    left: 0;
    bottom: 0;
}

.block-02 {
    left: 27px;
    bottom: 0;
}

.block-03 {
    left: 54px;
    bottom: 0;
}

/* Second course */

.block-04 {
    left: 13px;
    bottom: 10px;
}

.block-05 {
    left: 40px;
    bottom: 10px;

    border-color: rgba(255, 109, 0, 0.65);
}

/* =========================================
   FEATURE STORY — SCENE 02 BLOCK BUILD
   ========================================= */

.build-scene-02 .block-01 {
    animation: scene02Block01 8s ease-in-out infinite;
}

.build-scene-02 .block-02 {
    animation: scene02Block02 8s ease-in-out infinite;
}

.build-scene-02 .block-03 {
    animation: scene02Block03 8s ease-in-out infinite;
}

.build-scene-02 .block-04 {
    animation: scene02Block04 8s ease-in-out infinite;
}

.build-scene-02 .block-05 {
    animation: scene02Block05 8s ease-in-out infinite;
}


@keyframes scene02Block01 {
    0%, 12% { opacity: 0; transform: translateY(-5px); }
    22%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes scene02Block02 {
    0%, 22% { opacity: 0; transform: translateY(-5px); }
    32%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes scene02Block03 {
    0%, 32% { opacity: 0; transform: translateY(-5px); }
    42%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes scene02Block04 {
    0%, 42% { opacity: 0; transform: translateY(-5px); }
    52%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes scene02Block05 {
    0%, 52% { opacity: 0; transform: translateY(-5px); }
    62%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

/* =========================================
   FEATURE STORY — SCENE 03
   ========================================= */

/* Existing wall / build progress */

.quote-wall {
    position: absolute;
    left: 18px;
    bottom: 9px;
    width: 70px;
    height: 34px;
}

.quote-wall span {
    position: absolute;
    width: 25px;
    height: 8px;
    border: 1px solid rgba(170, 196, 218, 0.55);
    border-radius: 1px;
}

.quote-wall span:nth-child(1) {
    left: 0;
    bottom: 0;
}

.quote-wall span:nth-child(2) {
    left: 27px;
    bottom: 0;
}

.quote-wall span:nth-child(3) {
    left: 13px;
    bottom: 10px;
}

.quote-wall span:nth-child(4) {
    left: 40px;
    bottom: 10px;
}


/* Worker checking quote */

.quote-worker {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 48px;
    height: 55px;
    transform: translateX(-50%);
}

.quote-sheet {
    position: absolute;
    left: 27px;
    top: 14px;
    width: 18px;
    height: 22px;
    border: 1px solid rgba(255, 109, 0, 0.7);
    border-radius: 1px;
}


/* Materials awaiting approval */

.quote-materials {
    position: absolute;
    right: 18px;
    bottom: 9px;
    width: 45px;
    height: 25px;
}

.quote-materials span {
    position: absolute;
    width: 27px;
    height: 6px;
    border: 1px solid rgba(170, 196, 218, 0.48);
}

.quote-materials span:nth-child(1) {
    bottom: 0;
    left: 0;
}

.quote-materials span:nth-child(2) {
    bottom: 7px;
    left: 8px;
}

.quote-materials span:nth-child(3) {
    bottom: 14px;
    left: 3px;
}

/* =========================================
   FEATURE STORY — SCENE 03 ANIMATION
   ========================================= */

.build-scene-03 .quote-sheet {
    animation: scene03Quote 8s ease-in-out infinite;
}

.build-scene-03 .quote-materials span {
    opacity: 0;
    animation: scene03Material 8s ease-in-out infinite;
}

.build-scene-03 .quote-materials span:nth-child(1) {
    animation-delay: 0.4s;
}

.build-scene-03 .quote-materials span:nth-child(2) {
    animation-delay: 0.8s;
}

.build-scene-03 .quote-materials span:nth-child(3) {
    animation-delay: 1.2s;
}

@keyframes scene03Quote {
    0%, 12% {
        transform: rotate(8deg);
    }

    32% {
        transform: rotate(-4deg);
    }

    50%, 90% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(8deg);
    }
}

@keyframes scene03Material {
    0%, 30% {
        opacity: 0;
        transform: translateY(-5px);
    }

    48%, 92% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .build-scene-03 .quote-sheet,
    .build-scene-03 .quote-materials span {
        animation: none;
        opacity: 1;
    }
}

/* =========================================
   FEATURE STORY — SCENE 04
   ========================================= */

.finance-house {
    position: absolute;
    left: 28px;
    bottom: 9px;
    width: 115px;
    height: 65px;
}

.finance-house-wall {
    position: absolute;
    left: 14px;
    bottom: 0;
    width: 82px;
    height: 39px;

    border: 1px solid rgba(170, 196, 218, 0.55);
}

.finance-roof-left,
.finance-roof-right {
    position: absolute;
    top: 12px;
    width: 52px;
    height: 1px;

    background: rgba(170, 196, 218, 0.65);
}

.finance-roof-left {
    left: 10px;
    transform: rotate(-25deg);
}

.finance-roof-right {
    left: 53px;
    transform: rotate(25deg);
}

.finance-door {
    position: absolute;
    left: 52px;
    bottom: 0;
    width: 17px;
    height: 27px;

    border: 1px solid rgba(255, 109, 0, 0.65);
    border-bottom: 0;
}

.finance-window {
    position: absolute;
    left: 24px;
    bottom: 17px;
    width: 16px;
    height: 13px;

    border: 1px solid rgba(170, 196, 218, 0.5);
}


/* Worker checking finances */

.finance-worker {
    position: absolute;
    right: 24px;
    bottom: 10px;
    width: 48px;
    height: 55px;
}

.finance-sheet {
    position: absolute;
    left: 27px;
    top: 14px;
    width: 19px;
    height: 23px;

    border: 1px solid rgba(255, 109, 0, 0.7);
    border-radius: 1px;
}

/* Face Scene 04 worker toward the house */

.finance-worker {
    transform: scaleX(-1);
}

/* =========================================
   FEATURE STORY — SCENE 04 FINANCES
   ========================================= */

/* Financial sheet is dealt with */

.build-scene-04 .finance-sheet {
    animation: scene04Sheet 8s ease-in-out infinite;
}

/* The finance becomes part of the build */

.build-scene-04 .finance-door {
    animation: scene04Door 8s ease-in-out infinite;
}


@keyframes scene04Sheet {

    0%,
    20% {
        opacity: 1;
        transform: scale(1);
    }

    42% {
        opacity: 1;
        transform: scale(1.05);
    }

    58%,
    100% {
        opacity: 0;
        transform: scale(0.7);
    }
}


@keyframes scene04Door {

    0%,
    48% {
        opacity: 0;
        transform: scale(0.7);
    }

    65% {
        opacity: 1;
        transform: scale(1.05);
    }

    75%,
    92% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}


@media (prefers-reduced-motion: reduce) {

    .build-scene-04 .finance-sheet {
        animation: none;
        opacity: 0;
    }

    .build-scene-04 .finance-door {
        animation: none;
        opacity: 1;
    }
}

/* =========================================
   FEATURE STORY — SCENE 05
   ========================================= */

/* House */

.snag-house {
    position: absolute;
    left: 18px;
    bottom: 9px;
    width: 105px;
    height: 65px;
}

.snag-house-wall {
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 76px;
    height: 39px;
    border: 1px solid rgba(170, 196, 218, 0.55);
}

.snag-roof-left,
.snag-roof-right {
    position: absolute;
    top: 12px;
    width: 48px;
    height: 1px;
    background: rgba(170, 196, 218, 0.65);
}

.snag-roof-left {
    left: 8px;
    transform: rotate(-25deg);
}

.snag-roof-right {
    left: 49px;
    transform: rotate(25deg);
}

.snag-door {
    position: absolute;
    left: 48px;
    bottom: 0;
    width: 16px;
    height: 27px;
    border: 1px solid rgba(170, 196, 218, 0.55);
    border-bottom: 0;
}

/* Deliberately crooked snag */

.snag-window {
    position: absolute;
    left: 20px;
    bottom: 17px;
    width: 17px;
    height: 14px;
    border: 1px solid rgba(255, 109, 0, 0.75);
    transform: rotate(-16deg);
}


/* Supplier van */

.supplier-van {
    position: absolute;
    right: 16px;
    bottom: 10px;
    width: 92px;
    height: 43px;
}

.van-body {
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 58px;
    height: 30px;
    border: 1px solid rgba(170, 196, 218, 0.58);
    border-radius: 3px 2px 2px 3px;
}

.van-cab {
    position: absolute;
    right: 0;
    bottom: 7px;
    width: 34px;
    height: 25px;
    border: 1px solid rgba(170, 196, 218, 0.58);
    border-radius: 2px 7px 2px 2px;
}

.van-window {
    position: absolute;
    right: 7px;
    bottom: 20px;
    width: 18px;
    height: 9px;
    border: 1px solid rgba(255, 109, 0, 0.65);
    transform: skewX(12deg);
}

.van-wheel {
    position: absolute;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(170, 196, 218, 0.65);
    border-radius: 50%;
}

.van-wheel-left {
    left: 14px;
}

.van-wheel-right {
    right: 12px;
}

.supplier-van {
    transform: scaleX(-1);
}

/* =========================================
   FEATURE STORY — SCENE 05 ANIMATION
   ========================================= */

/* Supplier arrives */

.build-scene-05 .supplier-van {
    animation: scene05Van 8s ease-in-out infinite;
}

/* Snag gets corrected */

.build-scene-05 .snag-window {
    animation: scene05WindowFix 8s ease-in-out infinite;
}


@keyframes scene05Van {

    0% {
        transform: scaleX(-1) translateX(-90px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55%,
    90% {
        transform: scaleX(-1) translateX(0);
        opacity: 1;
    }

    100% {
        transform: scaleX(-1) translateX(0);
        opacity: 0;
    }
}


@keyframes scene05WindowFix {

    0%,
    58% {
        transform: rotate(-16deg);
        border-color: rgba(255, 109, 0, 0.75);
    }

    75%,
    92% {
        transform: rotate(0deg);
        border-color: rgba(170, 196, 218, 0.55);
    }

    100% {
        transform: rotate(-16deg);
        border-color: rgba(255, 109, 0, 0.75);
    }
}


@media (prefers-reduced-motion: reduce) {

    .build-scene-05 .supplier-van {
        animation: none;
        transform: scaleX(-1);
        opacity: 1;
    }

    .build-scene-05 .snag-window {
        animation: none;
        transform: rotate(0deg);
        border-color: rgba(170, 196, 218, 0.55);
    }
}

/* =========================================
   FEATURE STORY — SCENE 06
   ========================================= */

/* Finished house */

.final-house {
    position: absolute;
    left: 18px;
    bottom: 9px;
    width: 125px;
    height: 68px;
}

.final-house-wall {
    position: absolute;
    left: 14px;
    bottom: 0;
    width: 92px;
    height: 42px;
    border: 1px solid rgba(170, 196, 218, 0.62);
}

.final-roof-left,
.final-roof-right {
    position: absolute;
    top: 12px;
    width: 57px;
    height: 1px;
    background: rgba(170, 196, 218, 0.72);
}

.final-roof-left {
    left: 10px;
    transform: rotate(-25deg);
}

.final-roof-right {
    left: 59px;
    transform: rotate(25deg);
}

.final-door {
    position: absolute;
    left: 51px;
    bottom: 0;
    width: 18px;
    height: 29px;
    border: 1px solid rgba(170, 196, 218, 0.58);
    border-bottom: 0;
}

.final-window {
    position: absolute;
    bottom: 20px;
    width: 17px;
    height: 14px;
    border: 1px solid rgba(170, 196, 218, 0.55);
}

.final-window-left {
    left: 24px;
}

.final-window-right {
    left: 79px;
}


/* Final worker */

.final-worker {
    position: absolute;
    right: 22px;
    bottom: 10px;
    width: 54px;
    height: 56px;
}


/* Mini MCVRD-PL screen */

.planner-tablet {
    position: absolute;
    left: 27px;
    top: 12px;
    width: 25px;
    height: 31px;

    border: 1px solid rgba(170, 196, 218, 0.7);
    border-radius: 2px;

    background: rgba(8, 18, 31, 0.9);

    transform: rotate(5deg);
}

.planner-top {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 4px;
    height: 2px;

    background: rgba(170, 196, 218, 0.55);
}

.planner-line {
    position: absolute;
    left: 4px;
    height: 1px;

    background: rgba(170, 196, 218, 0.45);
}

.planner-line-01 {
    top: 11px;
    width: 15px;
}

.planner-line-02 {
    top: 16px;
    width: 11px;
}

.planner-accent {
    position: absolute;
    left: 4px;
    bottom: 5px;
    width: 16px;
    height: 3px;

    border-radius: 2px;

    background: rgba(255, 109, 0, 0.78);
}

.final-worker {
    transform: scaleX(-1);
}

/* =========================================
   FEATURE STORY — SCENE 06 FINALE
   ========================================= */

/* Worker presents the finished project */

.build-scene-06 .planner-tablet {
    animation: scene06Planner 8s ease-in-out infinite;
}

/* Orange planner accent softly activates */



@keyframes scene06Planner {

    0%,
    20% {
        transform: rotate(5deg) translateY(2px);
    }

    45% {
        transform: rotate(-3deg) translateY(-3px);
    }

    70%,
    92% {
        transform: rotate(0deg) translateY(-3px);
    }

    100% {
        transform: rotate(5deg) translateY(2px);
    }
}


@keyframes scene06Accent {

    0%,
    35% {
        opacity: 0.35;
    }

    60%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 0.35;
    }

   transform: none;
}


@media (prefers-reduced-motion: reduce) {

    .build-scene-06 .planner-tablet,
    .build-scene-06 .planner-accent {
        animation: none;
    }
}

/* =========================================
   FEATURE STORY — FINAL MESSAGE
   ========================================= */

.final-thanks {
    position: absolute;
    left: 128px;
    top: 4px;

    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: 13px;
    font-style: italic;
    white-space: nowrap;

    color: rgba(170, 196, 218, 0.78);

    transform: rotate(-3deg);

    opacity: 0;
}

.final-thanks span {
    color: rgba(255, 109, 0, 0.9);
}

/* =========================================
   FEATURE STORY — SCENE 06 WALK HOME
   ========================================= */

.build-scene-06 .final-worker {
    transform-origin: center bottom;
    animation: scene06WalkHome 8s ease-in-out infinite;
}

.build-scene-06 .final-worker .worker-leg-left {
    animation: scene06LegLeft 8s ease-in-out infinite;
}

.build-scene-06 .final-worker .worker-leg-right {
    animation: scene06LegRight 8s ease-in-out infinite;
}

.build-scene-06 .final-thanks {
    animation: scene06Thanks 8s ease-in-out infinite;
}


/* Walk toward the house and into the door */

@keyframes scene06WalkHome {

    0%,
    18% {
        transform: translateX(0) scaleX(-1) scaleY(1);
        opacity: 1;
    }

    68% {
        transform: translateX(-145px) scaleX(-0.74) scaleY(0.74);
        opacity: 1;
    }

    76%,
    100% {
        transform: translateX(-155px) scaleX(-0.70) scaleY(0.70);
        opacity: 0;
    }
}


/* Walking legs */

@keyframes scene06LegLeft {

    0%,
    18% {
        transform: rotate(7deg);
    }

    28% {
        transform: rotate(-12deg);
    }

    38% {
        transform: rotate(12deg);
    }

    48% {
        transform: rotate(-12deg);
    }

    58% {
        transform: rotate(12deg);
    }

    68%,
    100% {
        transform: rotate(7deg);
    }
}

@keyframes scene06LegRight {

    0%,
    18% {
        transform: rotate(-8deg);
    }

    28% {
        transform: rotate(12deg);
    }

    38% {
        transform: rotate(-12deg);
    }

    48% {
        transform: rotate(12deg);
    }

    58% {
        transform: rotate(-12deg);
    }

    68%,
    100% {
        transform: rotate(-8deg);
    }
}


/* Handwritten finale */

@keyframes scene06Thanks {

    0%,
    72% {
        opacity: 0;
        transform: rotate(-3deg) translateY(4px);
    }

    82%,
    94% {
        opacity: 1;
        transform: rotate(-3deg) translateY(0);
    }

    100% {
        opacity: 0;
        transform: rotate(-3deg) translateY(0);
    }
}

/* =========================================
   JOURNEY — MOBILE HANDWRITING
   ========================================= */

@media (max-width: 650px) {

    /* Keep notes attached neatly to each screenshot */

    .journey-note {
        font-size: 12px;
        line-height: 1.3;
    }

    .journey-note-welcome,
    .journey-note-add,
    .journey-note-quotes,
    .journey-note-overview {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: -30px;

        max-width: none;

        text-align: center;

        transform: rotate(-2deg);
    }

    /* Large free-floating desktop scribble becomes
       a neat mobile note between stages */

    .journey-sketch-note {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;

        margin: -20px 0 -15px;

        text-align: center;

        transform: rotate(-2deg);
    }

    .journey-sketch-note strong {
        font-size: 14px;
        line-height: 1.3;
    }

    .journey-sketch-note span {
        margin-top: 5px;
        font-size: 9px;
    }
}

/* =========================================
   TUTORIALS
   ========================================= */

.tutorials-section {
    position: relative;
    padding: 120px 0 135px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(255, 109, 0, 0.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 55%,
            rgba(91, 124, 153, 0.07),
            transparent 38%
        );
}

.tutorials-heading {
    position: relative;
    z-index: 2;
}

.tutorials-wrap {
    position: relative;
    width: min(1280px, calc(100% - 50px));
    margin: 70px auto 0;

    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
    gap: 70px;
    align-items: center;
}


/* =========================================
   TUTORIAL CARD DECK
   ========================================= */

.tutorial-deck {
    position: relative;
    height: 610px;
    perspective: 1300px;
}

.tutorial-card {
    position: absolute;
    left: 0;

    width: 92%;
    height: 78px;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 22px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;

    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0)
        ),
        #101c2b;

    color: var(--text);
    text-align: left;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22);

    cursor: pointer;

    transform-origin: left center;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        opacity 0.35s ease;
}

.tutorial-card span {
    flex: 0 0 36px;

    color: rgba(255, 109, 0, 0.52);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.tutorial-card strong {
    min-width: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;

    color: #dce5ee;
}

.tutorial-card:hover {
    border-color: rgba(255, 109, 0, 0.34);

    transform:
        translateX(9px)
        perspective(900px)
        rotateY(-2deg);
}


/* Stack the twelve cards */

.tutorial-card:nth-child(1)  { top: 0; }
.tutorial-card:nth-child(2)  { top: 47px; }
.tutorial-card:nth-child(3)  { top: 94px; }
.tutorial-card:nth-child(4)  { top: 141px; }
.tutorial-card:nth-child(5)  { top: 188px; }
.tutorial-card:nth-child(6)  { top: 235px; }
.tutorial-card:nth-child(7)  { top: 282px; }
.tutorial-card:nth-child(8)  { top: 329px; }
.tutorial-card:nth-child(9)  { top: 376px; }
.tutorial-card:nth-child(10) { top: 423px; }
.tutorial-card:nth-child(11) { top: 470px; }
.tutorial-card:nth-child(12) { top: 517px; }


/* Later cards sit above earlier cards */

.tutorial-card:nth-child(1)  { z-index: 1; }
.tutorial-card:nth-child(2)  { z-index: 2; }
.tutorial-card:nth-child(3)  { z-index: 3; }
.tutorial-card:nth-child(4)  { z-index: 4; }
.tutorial-card:nth-child(5)  { z-index: 5; }
.tutorial-card:nth-child(6)  { z-index: 6; }
.tutorial-card:nth-child(7)  { z-index: 7; }
.tutorial-card:nth-child(8)  { z-index: 8; }
.tutorial-card:nth-child(9)  { z-index: 9; }
.tutorial-card:nth-child(10) { z-index: 10; }
.tutorial-card:nth-child(11) { z-index: 11; }
.tutorial-card:nth-child(12) { z-index: 12; }


/* Selected tutorial */

.tutorial-card.is-active {
    z-index: 30;

    width: 100%;

    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.015)
        ),
        var(--orange);

    border-color: rgba(255, 160, 85, 0.85);

    transform:
        translateX(24px)
        perspective(900px)
        rotateY(-3deg)
        translateZ(18px);

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.38),
        0 0 32px rgba(255, 109, 0, 0.13);
}

/* Give the selected tutorial room in the deck */

.tutorial-card.is-active ~ .tutorial-card {
    transform: translateY(32px);
}

.tutorial-card.is-active span,
.tutorial-card.is-active strong {
    color: #ffffff;
}


/* =========================================
   ACTIVE TUTORIAL VIEWER
   ========================================= */

.tutorial-viewer {
    position: relative;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(91, 124, 153, 0.075),
            transparent 45%
        ),
        var(--panel);

    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.34),
        0 0 45px rgba(255, 109, 0, 0.035);
}

.tutorial-viewer-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 52px;
    margin-bottom: 22px;
}

.tutorial-viewer-heading > span {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255, 109, 0, 0.10);
    border: 1px solid rgba(255, 109, 0, 0.22);

    color: var(--orange);

    font-size: 12px;
    font-weight: 700;
}

.tutorial-viewer-heading h3 {
    margin: 0;

    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}


/* Video area */

.tutorial-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: #07101b;

    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.tutorial-video iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    display: none;
}

.tutorial-video-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 109, 0, 0.07),
            transparent 42%
        );
}

.tutorial-video-placeholder > span {
    color: rgba(255, 109, 0, 0.28);

    font-size: 58px;
    font-weight: 700;
    line-height: 1;
}

.tutorial-video-placeholder strong {
    margin-top: 14px;

    font-size: 19px;
    color: #e4eaf0;
}

.tutorial-video-placeholder small {
    margin-top: 8px;

    color: var(--muted);
    font-size: 12px;
}


/* What you'll see */

.tutorial-learn {
    margin-top: 25px;
    padding-top: 22px;

    border-top: 1px solid var(--border);
}

.tutorial-learn > span {
    color: var(--orange);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tutorial-learn ul {
    margin: 15px 0 0;
    padding: 0;

    list-style: none;

    display: grid;
    gap: 9px;
}

.tutorial-learn li {
    position: relative;

    padding-left: 24px;

    color: #aebaca;

    font-size: 13px;
    line-height: 1.55;
}

.tutorial-learn li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--orange);
    font-weight: 700;
}


/* =========================================
   TUTORIALS RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {

    .tutorials-wrap {
        width: min(900px, calc(100% - 40px));
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .tutorial-deck {
        height: auto;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        perspective: none;
    }

    .tutorial-card,
    .tutorial-card:nth-child(n) {
        position: relative;
        top: auto;

        width: 100%;
        height: 68px;

        transform: none;
    }

    .tutorial-card:hover {
        transform: translateY(-2px);
    }

    .tutorial-card.is-active {
        width: 100%;
        transform: none;
    }
}


@media (max-width: 650px) {

    .tutorials-section {
        padding: 80px 0 90px;
    }

    .tutorials-wrap {
        width: min(100% - 28px, 600px);
        margin-top: 55px;
        gap: 40px;
    }

    .tutorial-deck {
        grid-template-columns: 1fr;
    }

    .tutorial-card {
        height: 62px;
        padding: 0 16px;
    }

    .tutorial-card strong {
        font-size: 13px;
    }

    .tutorial-viewer {
        padding: 18px;
        border-radius: 14px;
    }

    .tutorial-viewer-heading {
        align-items: flex-start;
    }

    .tutorial-video-placeholder > span {
        font-size: 42px;
    }

    .tutorial-video-placeholder strong {
        font-size: 15px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .tutorial-card {
        transition: none;
    }
}