/* The home hero keeps its own layout, independent of the shared page sections. */
.home-hero {
    --hero-ink: #171917;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px max(32px, calc((100vw - 1380px) / 2)) 0;
    background: #29233f;
    color: #fffdf5;
    border-bottom: 2px solid var(--hero-ink);
}

/* Comic panels and printed halftone dots use the site's existing accent colors. */
.hero-background-shapes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-background-shapes::before { content: ''; position: absolute; inset: 0; background-color: #4ecdc4; background-image: radial-gradient(#17191755 1.5px, transparent 1.5px); background-size: 13px 13px; clip-path: polygon(88% 0, 100% 0, 100% 100%, 52% 100%); }
.hero-background-shapes::after { content: ''; position: absolute; width: 190px; height: 170px; left: -95px; top: 31%; background-image: radial-gradient(#b28bea 2px, transparent 2px); background-size: 15px 15px; transform: rotate(-12deg); opacity: .45; }
.hero-corner-ring { position: absolute; width: 250px; height: 250px; top: -185px; left: 39%; border: 28px solid #ffe66d; border-radius: 50%; transform: rotate(-15deg); }
.hero-edge-block { position: absolute; left: -42px; bottom: -52px; width: 130px; height: 95px; background: #4ecdc4; border: 3px solid #111; transform: rotate(-18deg); }

.home-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 42px;
    max-width: 1380px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.home-hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.6; }
.hero-rank { position: relative; display: grid; place-items: center; flex: 0 0 48px; height: 48px; background: #b28bea; color: var(--hero-ink); border: 1.5px solid var(--hero-ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--hero-ink); font-size: 22px; letter-spacing: -.05em; transform: rotate(-8deg); }
.hero-rank::after { content: '✦'; position: absolute; top: -9px; right: -10px; color: #ffe66d; font-size: 21px; line-height: 1; text-shadow: -1px -1px 0 var(--hero-ink), 1px -1px 0 var(--hero-ink), -1px 1px 0 var(--hero-ink), 1px 1px 0 var(--hero-ink); transform: rotate(12deg); }
.hero-eyebrow-location { display: block; color: #a7c4bd; font-size: 10px; letter-spacing: .15em; }

.home-hero h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(68px, 7.25vw, 108px);
    font-weight: 800;
    line-height: .99;
    letter-spacing: -.065em;
    word-spacing: .07em;
    text-shadow: 4px 4px 0 #111;
    margin: 30px 0 32px;
}

.hero-headline-bright { color: #4ecdc4; -webkit-text-stroke: 1px #111; text-shadow: 4px 4px 0 #111, 7px 7px 0 #ff777c; }

.hero-headline-highlight {
    display: inline-block;
    position: relative;
    text-shadow: none;
    padding: 0 14px 8px 6px;
    margin: 10px 0 0 -6px;
    background: #ffe66d;
    color: var(--hero-ink);
    border: 2px solid var(--hero-ink);
    box-shadow: 6px 6px 0 var(--hero-ink);
    transform: rotate(-2deg);
}

.hero-headline-period { color: #e75346; }
.home-hero-lead { max-width: 460px; font-size: 17px; line-height: 1.7; color: #bdccc6; }
.home-hero-lead strong { color: #fffdf5; font-weight: 700; }
.home-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 560px; margin-top: 28px; }
.hero-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 17px 22px; border: 2px solid transparent; border-radius: 9px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.hero-cta > span:last-child { font-size: 25px; line-height: 1; }
.hero-cta:hover { transform: translateY(-3px); }
.hero-cta-primary { grid-column: 1 / -1; background: #ffe66d; color: var(--hero-ink); border-color: #111; box-shadow: 4px 4px 0 #4ecdc4; font-size: 18px; }
.hero-cta-primary:hover { background: #ffed95; box-shadow: 5px 7px 0 #4ecdc4; }
.hero-cta-secondary { border-color: #111; color: #111; background: #4ecdc4; box-shadow: 4px 4px 0 #111; }
.hero-cta-secondary:hover { background: #7be2da; }
.hero-cta-instagram { background: #f497ad; color: var(--hero-ink); border-color: #111; box-shadow: 4px 4px 0 #111; }
.hero-cta-instagram:hover { background: #ffb6c7; }
.hero-instagram-label { display: flex; align-items: center; gap: 10px; }
.hero-instagram-label i { font-size: 22px; }
.hero-gallery { color: #171917; isolation: isolate; min-width: 0; width: 100%; max-width: 560px; justify-self: end; position: relative; padding-top: 8px; }
.hero-gallery-stage { position: relative; height: 525px; }
.hero-gallery-paper { position: absolute; inset: -38px -36px -24px -30px; z-index: -1; pointer-events: none; }
.hero-paper-arch { position: absolute; inset: 0 0 0 0; background-color: #b28bea; background-image: radial-gradient(#17191726 1.3px, transparent 1.3px); background-size: 10px 10px; border: 4px solid #111; border-radius: 18px; box-shadow: 10px 12px 0 #111; transform: rotate(5deg); }
.hero-paper-block { position: absolute; right: -100px; bottom: 75px; width: 80%; height: 57%; border: 3px solid #111; border-radius: 25px; background: #ffe66d; box-shadow: 9px 10px 0 #111; transform: rotate(-16deg); }
.hero-paper-dots { position: absolute; top: 14px; left: 40px; width: 12px; height: 12px; border-radius: 50%; background: #ffe66d; box-shadow: 24px 0 #ffe66d, 48px 0 #ffe66d, 0 24px #ffe66d, 24px 24px #ffe66d, 48px 24px #ffe66d; transform: rotate(-8deg); }
.hero-photo-stack { position: absolute; inset: 0; perspective: 1200px; }
.hero-shot {
    position: absolute;
    top: 75px;
    left: 2%;
    width: 89%;
    margin: 0;
    border: 2px solid var(--hero-ink);
    border-radius: 10px;
    background: #fffdf5;
    color: var(--hero-ink);
    overflow: hidden;
    box-shadow: 8px 10px 0 #171917, 0 0 0 transparent;
    transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .35s;
    transform-origin: 50% 65%;
}

.hero-shot[data-position="active"] { z-index: 3; transform: rotate(-5deg); }
.hero-shot[data-position="previous"] { z-index: 1; transform: translate(16%, -25%) rotate(9deg) scale(.85); }
.hero-shot[data-position="next"] { z-index: 2; transform: translate(9%, 18%) rotate(8deg) scale(.9); }
.hero-shot[data-position="hidden"] { visibility: hidden; opacity: 0; transform: translateY(30px) scale(.75); pointer-events: none; }
.hero-shot-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--hero-ink); color: #fffdf5; font-family: monospace; font-size: 8px; letter-spacing: .12em; }
.hero-window-dots { display: flex; gap: 4px; }
.hero-window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; }
.hero-window-dots i:nth-child(2) { background: #ffe66d; }
.hero-window-dots i:nth-child(3) { background: #4ecdc4; }
.hero-shot img { display: block; width: 100%; aspect-ratio: 1.65; object-fit: contain; background: #101110; }
.hero-shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; font-family: monospace; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.hero-code-sticker { position: absolute; z-index: 4; top: 20px; left: 2%; display: grid; place-items: center; width: 66px; height: 60px; background: #4ecdc4; color: var(--hero-ink); border: 2px solid var(--hero-ink); box-shadow: 4px 4px 0 var(--hero-ink); border-radius: 12px; transform: rotate(-12deg); font: 700 27px monospace; }
.hero-spark { position: absolute; z-index: 4; bottom: 10px; left: 2%; font-size: 88px; line-height: 1; color: #f26756; transform: rotate(10deg); }
.hero-free-sticker { color: var(--hero-ink); position: absolute; z-index: 5; top: 53px; right: -10px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 142px; height: 142px; border: 2px solid var(--hero-ink); outline: 1px dashed #17191780; outline-offset: -9px; border-radius: 50%; background: #ffe66d; box-shadow: 4px 5px 0 var(--hero-ink); transform: rotate(11deg); }
.hero-free-sticker strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -.055em; line-height: .9; text-align: center; }
.hero-maker-sticker { color: var(--hero-ink); position: absolute; z-index: 5; right: 0; bottom: 12px; border: 2px solid var(--hero-ink); background: #4ecdc4; box-shadow: 4px 4px 0 var(--hero-ink); padding: 10px 15px; transform: rotate(-5deg); font-size: 12px; font-weight: 700; }
.home-hero a:focus-visible, .home-hero button:focus-visible { outline: 3px solid #4ecdc4; outline-offset: 5px; }
@media (min-width: 1600px) {
    .home-hero { padding-top: 145px; }
    .home-hero-layout { padding-bottom: 100px; }
    .hero-gallery-stage { height: 525px; }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .home-page > nav { gap: 18px; }
    .home-page > nav > a { flex-shrink: 0; }
    .home-page > nav > a > span { font-size: 20px; white-space: nowrap; }
    .home-page > nav > div:not(#mobile-menu) { gap: 10px; font-size: 11px; letter-spacing: .06em; }
    .home-page > nav > div:not(#mobile-menu) > a { padding: 12px 18px; white-space: nowrap; }
    .home-page > nav > div:not(#mobile-menu) > div > button { padding: 8px 12px; white-space: nowrap; }
}

@media (max-width: 1199px) and (min-width: 901px) {
    .home-hero { padding-inline: 28px; }
    .home-hero-layout { gap: 30px; }
    .home-hero h1 { font-size: 7.3vw; }
    .hero-gallery-stage { height: clamp(405px, calc(34vw + 100px), 505px); }
    .hero-shot { top: 60px; }
    .hero-free-sticker { width: 112px; height: 112px; top: 50px; right: -5px; }
    .hero-free-sticker strong { font-size: 32px; }
    .hero-maker-sticker { font-size: 10px; }
    .hero-shot-bar { font-size: 6px; }
    .hero-shot figcaption { font-size: 7px; }
    .home-hero-actions { gap: 14px; }
    .hero-cta { font-size: 14px; padding: 16px; }
    .hero-cta-primary { font-size: 17px; }
    .hero-cta-secondary { gap: 7px; }
}

@media (max-width: 900px) {
    .home-hero { padding: 110px 32px 0; }
    .home-hero-layout { grid-template-columns: 1fr; gap: 50px; max-width: 620px; }
    .home-hero h1 { font-size: clamp(74px, 12vw, 108px); }
    .home-hero-lead { max-width: 490px; }
    .hero-background-shapes::before { top: 65%; clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%); }
    .hero-background-shapes::after { top: 290px; left: auto; right: -140px; }
    .hero-corner-ring { left: auto; right: -120px; top: 160px; width: 200px; height: 200px; border-width: 22px; }
    .hero-gallery-paper { inset: -28px -22px -28px; }
    .hero-gallery { width: 100%; justify-self: center; }
    .hero-gallery-stage { height: 510px; }
    .hero-shot { width: 85%; left: 4%; }
    .hero-free-sticker { right: 6px; }
    .hero-code-sticker { left: 4%; }
    .hero-spark { left: 4%; }
}

@media (max-width: 540px) {
    .home-hero { padding: 95px 22px 0; }
    .home-hero-layout { gap: 60px; padding-bottom: 70px; }
    .hero-gallery-paper { inset: -22px -9px -23px; }
    .hero-paper-arch { border-radius: 14px; box-shadow: 6px 7px 0 #111; transform: rotate(3deg); }
    .hero-paper-block { right: -55px; bottom: 55px; border-radius: 18px; }
    .hero-paper-dots { left: 28px; top: 3px; width: 8px; height: 8px; box-shadow: 17px 0 #ffe66d, 34px 0 #ffe66d, 0 17px #ffe66d, 17px 17px #ffe66d, 34px 17px #ffe66d; }
    .hero-corner-ring { width: 140px; height: 140px; right: -106px; top: 180px; border-width: 18px; }
    .hero-edge-block { width: 100px; height: 75px; bottom: -48px; }
    .hero-eyebrow { font-size: 10px; gap: 11px; letter-spacing: .06em; }
    .hero-rank { flex-basis: 42px; height: 42px; font-size: 20px; }
    .hero-eyebrow-location { font-size: 9px; }
    .home-hero h1 { font-size: clamp(55px, 14.6vw, 79px); margin-top: 24px; margin-bottom: 28px; }
    .hero-headline-highlight { padding-right: 10px; box-shadow: 4px 4px 0 var(--hero-ink); }
    .home-hero-lead { font-size: 15px; line-height: 1.65; max-width: 350px; }
    .home-hero-actions { grid-template-columns: 1fr; gap: 12px; margin-top: 23px; }
    .hero-cta { font-size: 14px; padding: 16px; }
    .hero-cta-primary { font-size: 17px; }
    .hero-gallery-stage { height: clamp(310px, 90vw, 465px); }
    .hero-shot { top: 64px; left: 1%; width: 91%; border-radius: 7px; box-shadow: 5px 7px 0 var(--hero-ink), 0 15px 20px #172b2420; }
    .hero-shot-bar { padding: 7px 9px; font-size: 6px; letter-spacing: .08em; }
    .hero-window-dots { gap: 3px; }
    .hero-window-dots i { width: 4px; height: 4px; }
    .hero-shot figcaption { padding: 9px; font-size: 6px; }
    .hero-free-sticker { top: 28px; right: -5px; width: 104px; height: 104px; outline-offset: -7px; }
    .hero-free-sticker strong { font-size: 28px; }
    .hero-code-sticker { width: 48px; height: 43px; top: 23px; left: 5%; font-size: 22px; border-radius: 9px; }
    .hero-spark { font-size: 62px; left: 0; bottom: 0; }
    .hero-maker-sticker { right: 0; bottom: 6px; padding: 8px 10px; font-size: 9px; }
    /* Let the existing shared navigation fit the smallest home-page screens. */
    .home-page > nav { padding-inline: 16px; }
    .home-page > nav > a { padding-right: 14px; gap: 8px; }
    .home-page > nav > a > span { font-size: 16px; }
    .home-page > nav > a > img { height: 38px; }
    .home-page #mobile-menu-btn { width: 44px; height: 44px; flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero *, .home-hero *::before, .home-hero *::after { animation: none !important; transition: none !important; }
    .home-page #loader { display: none; }
}