*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg:       #0b0b0b;
            --bg2:      #111111;
            --bg3:      #161616;
            --gold:     #f5c542;
            --gold2:    #e0a800;
            --gold-dim: rgba(245,197,66,0.15);
            --white:    #f0ece4;
            --muted:    #888;
            --border:   rgba(245,197,66,0.25);
        }

        html { scroll-behavior: smooth; }

        body {
            background: var(--bg);
            color: var(--white);
            font-family: 'Poppins', sans-serif;
            font-weight: 300;
            line-height: 1.75;
            overflow-x: hidden;
        }

        /* ── SCROLLBAR ── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--gold2); border-radius: 4px; }

        /* ── TYPOGRAPHY ── */
        h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 700; }
        .gold { color: var(--gold); }
        .muted { color: var(--muted); }
        .italic { font-style: italic; }
        .text-white { color: var(--white); }
        .text-gold { color: var(--gold); }
        .icon-spaced { margin-right: 0.5rem; }
        .tiny-icon { font-size: 0.4rem; }

        /* ── SECTION WRAPPER ── */
        .section { padding: 100px 6vw; position: relative; }
        .section-inner { max-width: 1100px; margin: 0 auto; }

        .section-label {
            font-family: 'Poppins', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1rem;
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .section-divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), transparent);
            margin-bottom: 2.5rem;
        }

        /* ── NAVIGATION ── */
        #navbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 1.2rem 6vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(180deg, rgba(11,11,11,0.98) 0%, rgba(11,11,11,0) 100%);
            backdrop-filter: blur(4px);
            border-bottom: 1px solid rgba(245,197,66,0.1);
            transition: background 0.4s;
        }

        #navbar.scrolled {
            background: rgba(11,11,11,0.97);
            border-bottom-color: rgba(245,197,66,0.2);
        }

        .nav-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--gold);
            letter-spacing: 2px;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(240,236,228,0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover { color: var(--gold); }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .nav-hamburger span {
            width: 24px; height: 2px;
            background: var(--gold);
            border-radius: 2px;
            transition: 0.3s;
        }

        @media (max-width: 768px) {
            .nav-hamburger { display: flex; }
            .nav-links {
                display: none;
                position: absolute;
                top: 64px; left: 0; right: 0;
                flex-direction: column;
                gap: 0;
                background: rgba(11,11,11,0.98);
                border-top: 1px solid var(--border);
                padding: 0.5rem 0;
            }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 0.9rem 6vw; &:hover { background: var(--gold-dim); } }
        }

        /* ── HERO ── */
        #hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            padding: 0 6vw;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background:
                url('images/bg.jpg') center/cover no-repeat,
                radial-gradient(ellipse at 50% 0%, #1a1200 0%, #0b0b0b 70%);
            z-index: 0;
        }

        .hero-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                rgba(11,11,11,0.55) 0%,
                rgba(11,11,11,0.35) 40%,
                rgba(11,11,11,0.85) 80%,
                rgba(11,11,11,1) 100%);
        }

        /* animated stars */
        .hero-stars {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 1;
        }

        .star {
            position: absolute;
            width: 2px; height: 2px;
            background: var(--gold);
            border-radius: 50%;
            opacity: 0;
            animation: twinkle var(--dur, 4s) infinite var(--delay, 0s);
        }

        @keyframes twinkle {
            0%,100% { opacity: 0; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.5); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            animation: fadeUp 1.2s ease-out both;
        }

        .hero-series-tag {
            display: inline-block;
            border: 1px solid var(--gold);
            color: var(--gold);
            font-size: 0.72rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            padding: 0.4rem 1.2rem;
            border-radius: 2px;
            margin-bottom: 2rem;
        }

        .hero-title {
            font-size: clamp(3.5rem, 9vw, 7rem);
            font-weight: 900;
            letter-spacing: -1px;
            line-height: 1;
            color: var(--white);
            text-shadow: 0 4px 40px rgba(245,197,66,0.2);
            margin-bottom: 1.2rem;
        }

        .hero-title span { color: var(--gold); }

        .hero-tagline {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.1rem, 2.5vw, 1.5rem);
            font-style: italic;
            color: rgba(245,197,66,0.85);
            margin-bottom: 1rem;
        }

        .hero-sub {
            font-size: 0.95rem;
            color: var(--muted);
            letter-spacing: 1px;
            margin-bottom: 2.5rem;
        }

        .hero-cta {
            display: inline-block;
            padding: 0.85rem 2.5rem;
            background: linear-gradient(135deg, var(--gold), var(--gold2));
            color: #0b0b0b;
            font-family: 'Poppins', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 2px;
            transition: opacity 0.3s, transform 0.3s;
        }

        .hero-cta:hover { opacity: 0.85; transform: translateY(-2px); }

        .hero-scroll-hint {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            color: var(--muted);
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            animation: bounce 2s infinite;
        }

        .hero-scroll-hint i { color: var(--gold); }

        @keyframes bounce {
            0%,100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(8px); }
        }

        /* ── LOGO / ABOUT SECTION ── */
        #about {
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
            padding: 100px 6vw;
        }

        .about-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .about-logo-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

        .about-logo-frame {
            position: relative;
            display: inline-block;
        }

        .about-logo-frame::before {
            content: '';
            position: absolute;
            inset: -12px;
            border: 1px solid var(--border);
            border-radius: 4px;
        }

        .about-logo-frame::after {
            content: '';
            position: absolute;
            inset: -20px;
            border: 1px solid rgba(245,197,66,0.1);
            border-radius: 6px;
        }

        .about-logo-img {
            width: 100%;
            max-width: 360px;
            height: auto;
            display: block;
            border-radius: 4px;
            filter: drop-shadow(0 20px 60px rgba(245,197,66,0.25));
        }

        .about-logo-caption {
            font-size: 0.72rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            text-align: center;
        }

        .about-text .section-label { margin-top: 0; }

        .about-text p {
            color: rgba(240,236,228,0.75);
            margin-bottom: 1.2rem;
            font-size: 1rem;
        }

        .about-meta {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .about-meta-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .about-meta-item span:first-child {
            font-size: 0.68rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
        }

        .about-meta-item span:last-child {
            font-size: 0.95rem;
            color: var(--white);
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .about-inner { grid-template-columns: 1fr; gap: 3rem; }
            .about-logo-img { max-width: 260px; }
        }

        /* ── LOGLINE ── */
        #logline {
            background: var(--bg2);
            text-align: center;
        }

        .logline-quote {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.15rem, 2.5vw, 1.6rem);
            font-style: italic;
            line-height: 1.8;
            color: rgba(240,236,228,0.9);
            max-width: 780px;
            margin: 0 auto;
            padding: 0 1rem;
            position: relative;
        }

        .logline-quote::before,
        .logline-quote::after {
            font-family: 'Playfair Display', serif;
            font-size: 5rem;
            line-height: 0;
            color: var(--gold);
            opacity: 0.3;
            position: absolute;
        }

        .logline-quote::before { content: '\201C'; top: 0.5rem; left: -1.5rem; }
        .logline-quote::after  { content: '\201D'; bottom: -1rem; right: -1.5rem; }

        /* ── CORE THEME ── */
        #theme { background: var(--bg); }

        .theme-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .theme-card {
            background: linear-gradient(135deg, rgba(245,197,66,0.08) 0%, rgba(245,197,66,0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 2rem 1.5rem;
            text-align: center;
            transition: border-color 0.3s, transform 0.3s, background 0.3s;
            position: relative;
            overflow: hidden;
        }

        .theme-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 3px; height: 100%;
            background: var(--gold);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .theme-card:hover {
            transform: translateY(-6px);
            border-color: rgba(245,197,66,0.6);
            background: linear-gradient(135deg, rgba(245,197,66,0.14) 0%, rgba(245,197,66,0.05) 100%);
        }

        .theme-card:hover::before { opacity: 1; }

        .theme-icon {
            font-size: 2rem;
            color: var(--gold);
            margin-bottom: 1rem;
        }

        .theme-card h4 {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
        }

        /* ── CHARACTERS ── */
        #characters { background: var(--bg2); }

        .characters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 2rem;
            margin-top: 2.5rem;
        }

        .char-card {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(245,197,66,0.15);
            transition: transform 0.4s, border-color 0.4s;
            cursor: default;
            aspect-ratio: 3/4;
        }

        .char-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(245,197,66,0.55);
        }

        .char-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
            transition: transform 0.5s;
            filter: grayscale(25%);
        }

        .char-card:hover .char-img {
            transform: scale(1.06);
            filter: grayscale(0%);
        }

        .char-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                rgba(11,11,11,0) 30%,
                rgba(11,11,11,0.5) 55%,
                rgba(11,11,11,0.95) 100%);
            transition: background 0.4s;
        }

        .char-card:hover .char-overlay {
            background: linear-gradient(180deg,
                rgba(11,11,11,0.1) 0%,
                rgba(11,11,11,0.6) 45%,
                rgba(11,11,11,0.97) 100%);
        }

        .char-info {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: 1.5rem 1.2rem;
        }

        .char-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 0.25rem;
        }

        .char-role {
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 0.4rem;
        }

        .char-desc {
            font-size: 0.82rem;
            color: rgba(240,236,228,0.7);
            line-height: 1.5;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.4s, max-height 0.4s;
        }

        .char-card:hover .char-desc {
            opacity: 1;
            max-height: 80px;
        }

        /* ── UNIQUE ELEMENTS ── */
        #unique { background: var(--bg); }

        .unique-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .unique-card {
            background: var(--bg2);
            border: 1px solid rgba(245,197,66,0.15);
            border-radius: 4px;
            padding: 2rem;
            display: flex;
            gap: 1.2rem;
            align-items: flex-start;
            transition: border-color 0.3s, transform 0.3s;
        }

        .unique-card:hover {
            border-color: rgba(245,197,66,0.45);
            transform: translateX(4px);
        }

        .unique-num {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: rgba(245,197,66,0.18);
            line-height: 1;
            flex-shrink: 0;
            min-width: 2.5rem;
        }

        .unique-text h4 {
            font-size: 1rem;
            color: var(--gold);
            font-weight: 600;
            margin-bottom: 0.4rem;
        }

        .unique-text p {
            font-size: 0.88rem;
            color: rgba(240,236,228,0.65);
        }

        /* ── EPISODE GUIDE ── */
        #episodes { background: var(--bg2); }

        .episodes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .ep-card {
            background: var(--bg3);
            border: 1px solid rgba(245,197,66,0.12);
            border-radius: 4px;
            padding: 1.8rem 1.5rem;
            position: relative;
            transition: border-color 0.3s, transform 0.3s;
            overflow: hidden;
        }

        .ep-card-link {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        .ep-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 0; height: 2px;
            background: linear-gradient(90deg, var(--gold), transparent);
            transition: width 0.4s ease;
        }

        .ep-card:hover {
            border-color: rgba(245,197,66,0.4);
            transform: translateY(-5px);
        }

        .ep-card:hover::after { width: 100%; }

        .ep-number {
            font-size: 0.68rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 0.5rem;
        }

        .ep-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            color: var(--white);
            margin-bottom: 0.75rem;
        }

        .ep-desc {
            font-size: 0.88rem;
            color: rgba(240,236,228,0.6);
            line-height: 1.6;
        }

        /* arc color chips */
        .ep-arc {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            border-radius: 2px;
            font-size: 0.65rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .arc-spark   { background: rgba(100,220,150,0.15); color: #64dc96; }
        .arc-romance { background: rgba(245,197,66,0.15);  color: var(--gold); }
        .arc-tension { background: rgba(255,120,80,0.15);  color: #ff7850; }
        .arc-break   { background: rgba(180,80,255,0.15);  color: #c070ff; }
        .arc-growth  { background: rgba(80,180,255,0.15);  color: #50b4ff; }

        /* ── EMOTIONAL HIGHLIGHTS ── */
        #emotions { background: var(--bg); text-align: center; }

        .emotions-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            margin-top: 2.5rem;
        }

        .emotion-chip {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1.5rem;
            border: 1px solid var(--border);
            border-radius: 50px;
            font-size: 0.88rem;
            color: var(--white);
            background: var(--bg2);
            transition: border-color 0.3s, background 0.3s, transform 0.3s;
        }

        .emotion-chip:hover {
            border-color: var(--gold);
            background: var(--gold-dim);
            transform: translateY(-3px);
        }

        .emotion-chip i { color: var(--gold); font-size: 1rem; }

        /* ── AUDIENCE + FORMAT ── */
        #audience { background: var(--bg2); }

        .audience-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 2.5rem;
        }

        @media (max-width: 640px) {
            .audience-grid { grid-template-columns: 1fr; }
        }

        .audience-block {
            background: var(--bg3);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 2rem;
        }

        .audience-block h4 {
            font-size: 1rem;
            color: var(--gold);
            margin-bottom: 1rem;
            letter-spacing: 1px;
        }

        .audience-block ul {
            list-style: none;
        }

        .audience-block ul li {
            font-size: 0.9rem;
            color: rgba(240,236,228,0.75);
            padding: 0.4rem 0;
            border-bottom: 1px solid rgba(245,197,66,0.08);
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .audience-block ul li::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--gold);
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* ── CLOSING ── */
        #closing {
            background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
            text-align: center;
            padding: 120px 6vw;
        }

        .closing-inner { max-width: 680px; margin: 0 auto; }

        .closing-moon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            display: block;
        }

        .closing-title {
            font-size: clamp(1.5rem, 3.5vw, 2.5rem);
            font-style: italic;
            color: var(--white);
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }

        .closing-body {
            font-size: 1rem;
            color: rgba(240,236,228,0.65);
            margin-bottom: 1rem;
            font-style: italic;
        }

        .closing-sign {
            margin-top: 2.5rem;
            font-size: 0.72rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--gold);
        }

        /* ── FOOTER ── */
        footer {
            background: #080808;
            border-top: 1px solid rgba(245,197,66,0.1);
            padding: 2.5rem 6vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        footer p {
            font-size: 0.8rem;
            color: var(--muted);
        }

        footer span { color: var(--gold); }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* stagger children */
        .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; }
        .stagger.visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
        .stagger.visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
        .stagger.visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 0.19s; }
        .stagger.visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
        .stagger.visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 0.33s; }
        .stagger.visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
        .stagger.visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 0.47s; }
        .stagger.visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }
        .stagger.visible > *:nth-child(9)  { opacity: 1; transform: translateY(0); transition-delay: 0.61s; }
        .stagger.visible > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 0.68s; }

        /* Gold line decoration */
        .gold-line {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2.5rem;
        }

        .gold-line::before, .gold-line::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        .gold-line i { color: var(--gold); font-size: 0.8rem; }
        .gold-line-bottom { margin-top: 2.5rem; margin-bottom: 0; }
        .gold-line-closing { max-width: 300px; margin: 2rem auto; }