.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(164deg, #00010A 0%, #04020F 100%);
    overflow: hidden;
    z-index: 1;
}

.hero__noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.hero__scribble {
    position: absolute;
    top: clamp(3rem, 8vh, 6rem);
    right: clamp(1rem, 5vw, 5rem);
    width: clamp(90px, 12vw, 190px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}
.hero__scribble svg { width: 100%; height: auto; }

.hero__tagline {
    position: absolute;
    top: clamp(150px, 20vh, 220px);
    left: clamp(2rem, 7vw, 7rem);
    font-family: 'Atma', cursive;
    font-weight: 500;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    color: var(--color-text);
    transform: rotate(-30deg);
    transform-origin: top left;
    line-height: 1.5;
    z-index: 2;
    letter-spacing: 0.03em;
    max-width: 180px;
}
.hero__tagline-accent { color: #EFD020; }

.hero__center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4.5vh, 3.5rem);
    text-align: center;
    width: 100%;
}

.hero__logo {
    max-width: clamp(280px, 40vw, 500px);
    height: auto;
    filter: drop-shadow(0 0 50px rgba(0,212,255,0.22)) drop-shadow(0 0 20px rgba(0,212,255,0.12));
}

.hero__logo-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--color-cyan);
    border-radius: 14px;
    padding: clamp(1.5rem,3vh,2.5rem) clamp(2.5rem,5vw,4rem);
    box-shadow: 0 0 60px rgba(0,212,255,0.18), inset 0 0 50px rgba(0,212,255,0.04);
    max-width: clamp(280px,40vw,500px);
    gap: 0.2rem;
}
.hero__logo-voices {
    font-family: var(--font-display);
    font-size: clamp(2.8rem,6.5vw,5.5rem);
    letter-spacing: 0.2em;
    color: var(--color-cyan);
    text-shadow: 0 0 25px var(--color-cyan), 0 0 50px rgba(0,212,255,0.4);
    line-height: 1;
}
.hero__logo-inmy {
    font-family: var(--font-display);
    font-size: clamp(1.5rem,3.5vw,3rem);
    letter-spacing: 0.12em;
    color: var(--color-text);
    line-height: 1;
}
.hero__logo-head {
    font-family: var(--font-display);
    font-size: clamp(2.5rem,6vw,5rem);
    letter-spacing: 0.15em;
    color: var(--color-yellow);
    text-shadow: 0 0 20px rgba(245,230,66,0.5);
    line-height: 1;
}
.hero__logo-name {
    font-size: clamp(0.85rem,1.5vw,1.2rem);
    color: var(--color-cyan);
    font-style: italic;
    margin-top: 0.4rem;
}

.hero__quote-wrap {
    position: relative;
    max-width: clamp(500px, 65vw, 900px);
    background: none;
    border: none;
    border-radius: 14px;
    padding: 1.6rem 2.2rem;
}

.hero__quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 36px;
    color: rgba(255,255,255,0.6);
    line-height: 1.75;
    font-style: italic;
}

/* second half of the quote in bold, same colour as the rest (one colour in the design) */
.hero__quote strong {
    font-weight: 700;
    color: inherit;
}

@keyframes ld-cursor-pop {
    0%   { opacity: 0; transform: scale(0); }
    55%  { opacity: 1; transform: scale(1.25); }
    75%  { transform: scale(0.88); }
    90%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes ld-cursor-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

.hero__cursor {
    position: absolute;
    width: 65px;
    height: 70px;
    display: block;
}
.hero__cursor svg { width: 100%; height: 100%; }
.hero__cursor--left  {
    top: -22px;
    left: -40px;
    animation: ld-cursor-pop 1.1s var(--ease-spring) 0.6s both,
               ld-cursor-pulse 2s ease-in-out 2.2s infinite;
}
.hero__cursor--right {
    bottom: -4px;
    right: 13rem;
    transform: rotate(0deg);
    animation: ld-cursor-pop 1.1s var(--ease-spring) 1s both,
               ld-cursor-pulse 2s ease-in-out 2.6s infinite;
}


@media (max-width: 960px) {
    .hero__tagline {
        top: 5rem;
        left: 1.5rem;
        font-size: 0.82rem;
        max-width: 140px;
    }
    .hero__scribble {
        top: 3rem;
        right: 1rem;
        width: 80px;
    }
}

@media (max-width: 640px) {
    .hero__logo { max-width: 260px; }
    .hero__quote-wrap { padding: 1.2rem 1.5rem; }
    .hero__tagline { top: 4.5rem; }
}

@media (min-width: 1441px) {
    /* padding, not margin, so the section background covers the space too.
       The decorations are absolutely positioned, so they need the same offset. */
    .hero { padding-top: 10rem; }
    .hero__logo { max-width: 700px; margin-right: 9rem; }
    .hero__scribble { width: 220px; right: 0rem; top: 22rem; }
    .hero__tagline { left: 12rem; font-size: 34px; max-width: none; top: 32rem; }
    .hero__quote-wrap { max-width: 1400px; }
}

/* --- small desktop: 901px – 1440px only --- */
@media (min-width: 901px) and (max-width: 1440px) {
    .hero { min-height: 82vh; padding-top: 7rem; }
    .hero__scribble { top: calc(clamp(3rem, 8vh, 6rem) + 7rem); }
    .hero__tagline { top: calc(clamp(150px, 20vh, 220px) + 7rem); }
    .hero__logo { max-width: clamp(280px, 34vw, 420px); }
    .hero__tagline { font-size: clamp(15px, 1.46vw, 21px); }
    .hero__quote-wrap { max-width: clamp(560px, 69.5vw, 1000px); padding: 1.2rem 1.8rem; }
    .hero__quote { font-size: 26px; line-height: 1.65; }
    .hero__cursor { width: 52px; height: 56px; }
    .hero__cursor--right { right: -1rem; }
    .hero__scribble { right: 0rem; }
    .hero__center { gap: clamp(1.5rem, 3.5vh, 2.5rem); }
}

/* --- phones --- */
@media (max-width: 600px) {
    .hero { padding-top: 2rem; min-height: 78vh; }
    .hero__logo { max-width: 78vw; }
    .hero__quote-wrap { max-width: 100%; padding: 0 1.25rem; }
    .hero__quote { font-size: clamp(1rem, 4.6vw, 1.35rem); line-height: 1.5; }
    .hero__center { gap: 1.75rem; }
    .hero__tagline { top: 3.5rem; left: 1rem; font-size: 0.72rem; max-width: 110px; }
    .hero__scribble { top: 2.5rem; right: 0.5rem; width: 62px; }
    .hero__cursor { width: 38px; height: 42px; }
}

/* --- phones and small tablets: there is no room for the marks beside the words, so the
   quote opens above its first line and closes under its last one. These are the positions
   the script works out; keeping them in CSS means they are already right on the first
   paint, and they stay right if the script never runs. --- */
@media (max-width: 700px) {
    .hero__quote-wrap {
        --ld-mark-h: 70px;             /* .hero__cursor height at this width */
        padding-top: calc(var(--ld-mark-h) + 8px);
        padding-bottom: calc(var(--ld-mark-h) + 8px);
        padding-inline: 1.25rem;       /* the marks below are set to the same inset */
    }

    .hero__cursor--left {
        top: 4px;
        left: 1.25rem;
        right: auto;
        bottom: auto;
    }

    .hero__cursor--right {
        top: auto;
        bottom: 4px;
        right: 1.25rem;
        left: auto;
    }
}

@media (max-width: 600px) {
    .hero__quote-wrap { --ld-mark-h: 42px; }
}

/* --- phones: the invitation sits above the sign, not across it ---
   Rotated into the top-left corner it landed on the neon artwork, which is drawn over
   it, so the words were half hidden. In the flow above the sign there is room to read. */
@media (max-width: 600px) {
    .hero__tagline {
        position: static;
        max-width: none;
        margin: 0 auto 0.9rem;
        padding-inline: 1.25rem;
        text-align: center;
        transform: rotate(-2deg);
        transform-origin: center;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    /* the line breaks are placed for the rotated corner version */
    .hero__tagline br { display: none; }
}