/* roulang page: index */
:root {
            --berry-950: #24132d;
            --berry-900: #32183d;
            --berry-800: #482052;
            --berry-700: #622668;
            --berry-100: #f1e7f3;
            --orange: #f4774d;
            --orange-dark: #d95a35;
            --mint: #4db6a3;
            --cream: #fcfaf7;
            --mist: #f4f0f3;
            --ink: #2e2531;
            --muted: #756b77;
            --line: #e6dfe7;
            --white: #ffffff;
            --shadow-sm: 0 8px 24px rgba(48, 27, 56, .07);
            --shadow-lg: 0 22px 55px rgba(48, 27, 56, .16);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --ease: all .25s ease;
        }

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

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            background: var(--cream);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--ease);
        }

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

        button,
        input { font: inherit; }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(244, 119, 77, .35);
            outline-offset: 3px;
        }

        .container {
            width: min(1200px, calc(100% - 40px));
            margin: 0 auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(252, 250, 247, .96);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 5px 20px rgba(50, 24, 61, .05);
            backdrop-filter: blur(14px);
        }

        .topbar {
            min-height: 72px;
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
            color: var(--berry-900);
            font-weight: 800;
            letter-spacing: -.04em;
            font-size: 20px;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: var(--orange);
            border-radius: 12px 12px 12px 4px;
            font-size: 17px;
            box-shadow: 5px 5px 0 var(--berry-900);
        }

        .brand small {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            line-height: 1.2;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
        }

        .main-nav a {
            padding: 8px 13px;
            border-radius: 8px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--berry-900);
            background: var(--berry-100);
        }

        .nav-tools {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .trend-link {
            color: var(--orange-dark);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .search-trigger,
        .menu-trigger {
            border: 0;
            cursor: pointer;
            background: transparent;
            color: var(--berry-900);
        }

        .search-trigger {
            width: 38px;
            height: 38px;
            border: 1px solid var(--line);
            border-radius: 50%;
        }

        .menu-trigger { display: none; font-size: 24px; }

        .search-panel {
            display: none;
            padding: 0 0 18px;
        }

        .search-panel.open { display: block; }

        .search-form {
            display: flex;
            gap: 10px;
            max-width: 620px;
            margin-left: auto;
        }

        .search-form input {
            height: 46px;
            margin: 0;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--white);
            box-shadow: none;
        }

        .search-form input:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(244, 119, 77, .13);
        }

        .button {
            border-radius: 10px;
            padding: 12px 20px;
            font-weight: 800;
            transition: var(--ease);
        }

        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 9px 20px rgba(50, 24, 61, .14);
        }

        .button.primary {
            background: var(--orange);
            color: var(--white);
        }

        .button.primary:hover { background: var(--orange-dark); }

        .button.berry {
            background: var(--berry-900);
            color: var(--white);
        }

        .button.ghost {
            color: var(--berry-900);
            border: 1px solid rgba(72, 32, 82, .25);
            background: transparent;
        }

        .button.ghost:hover { background: var(--berry-100); }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 72px 0 60px;
            background:
                radial-gradient(circle at 85% 12%, rgba(244, 119, 77, .22), transparent 28%),
                linear-gradient(135deg, var(--berry-950), var(--berry-800));
            color: var(--white);
        }

        .hero::after {
            content: "";
            position: absolute;
            right: -80px;
            bottom: -120px;
            width: 380px;
            height: 260px;
            border: 1px solid rgba(255,255,255,.14);
            transform: rotate(-12deg);
            border-radius: 50%;
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.35fr .65fr;
            gap: 28px;
            align-items: stretch;
        }

        .hero-copy {
            padding: 24px 0 18px;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--orange);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            content: "";
            width: 22px;
            height: 3px;
            background: currentColor;
            border-radius: 3px;
        }

        .hero h1 {
            max-width: 720px;
            margin: 18px 0 20px;
            color: var(--white);
            font-size: clamp(40px, 6vw, 76px);
            line-height: 1.08;
            letter-spacing: -.07em;
            font-weight: 900;
        }

        .hero h1 em {
            color: var(--orange);
            font-style: normal;
        }

        .hero-intro {
            max-width: 650px;
            margin-bottom: 28px;
            color: rgba(255,255,255,.76);
            font-size: 17px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-actions .button.ghost {
            color: var(--white);
            border-color: rgba(255,255,255,.35);
        }

        .hero-actions .button.ghost:hover { background: rgba(255,255,255,.1); }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            margin-top: 34px;
        }

        .hero-stat {
            padding-left: 15px;
            border-left: 2px solid var(--orange);
        }

        .hero-stat strong {
            display: block;
            font-size: 23px;
            line-height: 1.2;
        }

        .hero-stat span {
            color: rgba(255,255,255,.58);
            font-size: 12px;
        }

        .coupon-wall {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            align-content: center;
        }

        .coupon {
            position: relative;
            min-height: 142px;
            padding: 20px;
            overflow: hidden;
            color: var(--berry-950);
            background: #ffe6d8;
            border-radius: var(--radius-md);
        }

        .coupon::after {
            content: "";
            position: absolute;
            right: -18px;
            bottom: -24px;
            width: 90px;
            height: 90px;
            border: 14px solid rgba(255,255,255,.35);
            border-radius: 50%;
        }

        .coupon.large {
            grid-column: span 2;
            min-height: 190px;
            background: var(--orange);
            color: var(--white);
        }

        .coupon.mint { background: #ccebe4; }
        .coupon.dark { background: #6d3977; color: var(--white); }

        .coupon small {
            display: block;
            margin-bottom: 8px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
        }

        .coupon strong {
            display: block;
            max-width: 200px;
            font-size: 24px;
            line-height: 1.25;
            letter-spacing: -.04em;
        }

        .coupon.large strong { font-size: 32px; }

        .coupon-link {
            position: absolute;
            left: 20px;
            bottom: 17px;
            color: inherit;
            font-size: 13px;
            font-weight: 900;
        }

        .section {
            padding: 92px 0;
        }

        .section.mist { background: var(--mist); }

        .section-heading {
            max-width: 680px;
            margin-bottom: 38px;
        }

        .section-heading h2 {
            margin: 10px 0 10px;
            color: var(--berry-950);
            font-size: clamp(29px, 4vw, 46px);
            line-height: 1.18;
            letter-spacing: -.055em;
            font-weight: 900;
        }

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

        .pain-layout {
            display: grid;
            grid-template-columns: .78fr 1.22fr;
            gap: 46px;
            align-items: center;
        }

        .signal-list {
            display: grid;
            gap: 12px;
        }

        .signal-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 17px 18px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--white);
            transition: var(--ease);
        }

        .signal-item:hover {
            transform: translateX(5px);
            border-color: rgba(244,119,77,.45);
            box-shadow: var(--shadow-sm);
        }

        .signal-number {
            color: var(--orange);
            font-size: 13px;
            font-weight: 900;
        }

        .signal-item strong {
            display: block;
            color: var(--berry-900);
            font-size: 16px;
        }

        .signal-item span {
            display: block;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .portal-preview {
            padding: 26px;
            background: var(--berry-950);
            border-radius: var(--radius-lg);
            color: var(--white);
            box-shadow: var(--shadow-lg);
        }

        .preview-top {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,.13);
        }

        .preview-top strong { font-size: 18px; }
        .status { color: #94e1d3; font-size: 12px; font-weight: 800; }

        .preview-row {
            display: grid;
            grid-template-columns: 78px 1fr auto;
            gap: 15px;
            align-items: center;
            padding: 17px 0;
            border-bottom: 1px solid rgba(255,255,255,.1);
        }

        .preview-thumb,
        .video-thumb {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #8a4d8e, #ef785a);
            border-radius: 9px;
        }

        .preview-thumb { height: 52px; }

        .preview-thumb::before,
        .video-thumb::before {
            content: "▶";
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: rgba(255,255,255,.9);
            font-size: 15px;
        }

        .preview-title {
            font-size: 14px;
            font-weight: 800;
        }

        .preview-meta {
            color: rgba(255,255,255,.55);
            font-size: 11px;
        }

        .preview-time {
            color: var(--orange);
            font-size: 12px;
            font-weight: 800;
        }

        .solution-layout {
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 30px;
        }

        .channel-index {
            position: sticky;
            top: 100px;
            align-self: start;
            padding: 20px;
            border-left: 3px solid var(--orange);
            background: var(--berry-100);
            border-radius: 0 14px 14px 0;
        }

        .channel-index span {
            display: block;
            margin-bottom: 14px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
        }

        .channel-index a {
            display: block;
            padding: 8px 0;
            color: var(--berry-900);
            font-size: 14px;
            font-weight: 800;
        }

        .channel-index a:hover { color: var(--orange-dark); }

        .content-stage {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 18px;
        }

        .feature-video {
            position: relative;
            min-height: 350px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(0deg, rgba(36,19,45,.95), rgba(36,19,45,.08)),
                linear-gradient(135deg, #ef785a 5%, #6c3278 55%, #2c1b47);
            border-radius: var(--radius-lg);
        }

        .feature-video::before {
            content: "精选专题";
            position: absolute;
            top: 22px;
            left: 22px;
            padding: 5px 10px;
            color: var(--white);
            background: var(--orange);
            border-radius: 5px;
            font-size: 11px;
            font-weight: 900;
        }

        .feature-video h3 {
            max-width: 420px;
            margin: 0 0 8px;
            font-size: 29px;
            line-height: 1.25;
        }

        .feature-video p {
            max-width: 430px;
            margin: 0 0 18px;
            color: rgba(255,255,255,.7);
            font-size: 13px;
        }

        .video-info {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 15px;
            color: rgba(255,255,255,.62);
            font-size: 12px;
        }

        .update-list {
            padding: 22px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }

        .update-list h3 {
            margin: 0 0 16px;
            color: var(--berry-900);
            font-size: 19px;
        }

        .update-item {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 12px;
            padding: 14px 0;
            border-top: 1px solid var(--line);
        }

        .update-item:first-of-type { border-top: 0; }

        .update-item b {
            color: var(--orange);
            font-size: 20px;
            line-height: 1.4;
        }

        .update-item a {
            display: block;
            color: var(--berry-900);
            font-size: 14px;
            font-weight: 800;
            line-height: 1.5;
        }

        .update-item small {
            color: var(--muted);
            font-size: 11px;
        }

        .result-panel {
            padding: 40px;
            overflow: hidden;
            color: var(--white);
            background: var(--berry-900);
            border-radius: var(--radius-lg);
        }

        .result-panel .section-kicker { color: #ffae8e; }

        .result-panel h2 {
            max-width: 650px;
            margin: 12px 0 28px;
            color: var(--white);
            font-size: clamp(27px, 4vw, 42px);
            line-height: 1.2;
            letter-spacing: -.05em;
        }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .result-card {
            padding: 22px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 13px;
        }

        .result-card strong {
            display: block;
            margin-bottom: 5px;
            color: var(--orange);
            font-size: 27px;
        }

        .result-card span {
            display: block;
            color: rgba(255,255,255,.68);
            font-size: 13px;
        }

        .progress-line {
            height: 6px;
            margin-top: 18px;
            overflow: hidden;
            background: rgba(255,255,255,.12);
            border-radius: 10px;
        }

        .progress-line i {
            display: block;
            width: 78%;
            height: 100%;
            background: var(--orange);
            border-radius: inherit;
        }

        .calendar-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 32px;
            align-items: start;
        }

        .calendar-note {
            padding: 28px;
            color: var(--white);
            background: linear-gradient(145deg, var(--berry-800), var(--berry-950));
            border-radius: var(--radius-lg);
        }

        .calendar-note h3 {
            margin: 0 0 12px;
            font-size: 25px;
            line-height: 1.3;
        }

        .calendar-note p {
            margin: 0;
            color: rgba(255,255,255,.68);
            font-size: 14px;
        }

        .date-strip {
            display: flex;
            gap: 8px;
            margin-top: 28px;
        }

        .date {
            min-width: 64px;
            padding: 10px 8px;
            text-align: center;
            color: rgba(255,255,255,.62);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 9px;
            font-size: 12px;
        }

        .date.active {
            color: var(--berry-950);
            background: var(--orange);
            border-color: var(--orange);
        }

        .date strong { display: block; font-size: 19px; }

        .calendar-list {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }

        .calendar-entry {
            display: grid;
            grid-template-columns: 76px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--line);
        }

        .calendar-entry:last-child { border-bottom: 0; }

        .calendar-entry time {
            color: var(--orange-dark);
            font-size: 12px;
            font-weight: 900;
        }

        .calendar-entry strong {
            display: block;
            color: var(--berry-900);
            font-size: 15px;
        }

        .calendar-entry span {
            color: var(--muted);
            font-size: 12px;
        }

        .calendar-entry a {
            color: var(--berry-900);
            font-size: 20px;
        }

        .quotes {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap: 16px;
        }

        .quote-card {
            padding: 28px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
        }

        .quote-card.primary {
            color: var(--white);
            background: var(--berry-800);
            border-color: var(--berry-800);
        }

        .quote-mark {
            color: var(--orange);
            font-size: 40px;
            font-weight: 900;
            line-height: 1;
        }

        .quote-card blockquote {
            margin: 10px 0 22px;
            font-size: 17px;
            line-height: 1.65;
            font-weight: 700;
        }

        .quote-card small {
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
        }

        .quote-card.primary small { color: rgba(255,255,255,.62); }

        .faq-layout {
            display: grid;
            grid-template-columns: .7fr 1.3fr;
            gap: 50px;
            align-items: start;
        }

        .faq-layout .section-heading { margin-bottom: 0; }

        .accordion {
            margin: 0;
            background: transparent;
        }

        .accordion-item {
            margin-bottom: 10px;
            border: 1px solid var(--line);
            border-radius: 11px;
            overflow: hidden;
            background: var(--white);
        }

        .accordion-title {
            padding: 17px 20px;
            color: var(--berry-900);
            border: 0;
            font-size: 15px;
            font-weight: 800;
        }

        .accordion-title::before { color: var(--orange); }

        .accordion-content {
            border: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
        }

        .brand-band {
            padding: 38px 42px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            align-items: center;
            background: #f1e5ed;
            border-radius: var(--radius-lg);
        }

        .brand-band h2 {
            margin: 0;
            color: var(--berry-950);
            font-size: 31px;
            line-height: 1.25;
            letter-spacing: -.05em;
        }

        .brand-band p {
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .cta {
            padding: 72px 0;
            color: var(--white);
            background: var(--orange);
        }

        .cta-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 28px;
        }

        .cta h2 {
            margin: 0 0 8px;
            color: var(--white);
            font-size: clamp(28px, 4vw, 44px);
            line-height: 1.2;
            letter-spacing: -.06em;
        }

        .cta p {
            max-width: 620px;
            margin: 0;
            color: rgba(255,255,255,.82);
        }

        .cta .button {
            flex-shrink: 0;
            color: var(--berry-950);
            background: var(--white);
        }

        .site-footer {
            padding: 52px 0 25px;
            color: rgba(255,255,255,.66);
            background: var(--berry-950);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 30px;
            padding-bottom: 38px;
        }

        .site-footer .brand { color: var(--white); }
        .footer-intro { max-width: 300px; margin: 18px 0 0; font-size: 13px; }

        .footer-col h3 {
            margin: 0 0 14px;
            color: var(--white);
            font-size: 14px;
        }

        .footer-col a {
            display: block;
            margin: 7px 0;
            color: rgba(255,255,255,.62);
            font-size: 13px;
        }

        .footer-col a:hover { color: var(--orange); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.13);
            font-size: 12px;
        }

        @media (max-width: 1024px) {
            .main-nav a { padding: 8px 8px; font-size: 13px; }
            .trend-link { display: none; }
            .hero-grid { grid-template-columns: 1fr; }
            .coupon-wall { max-width: 620px; }
            .pain-layout,
            .calendar-layout { grid-template-columns: 1fr; }
            .channel-index { position: static; }
            .quotes { grid-template-columns: 1fr 1fr; }
            .quote-card.primary { grid-column: span 2; }
        }

        @media (max-width: 768px) {
            .container { width: min(100% - 32px, 620px); }
            .topbar { min-height: 64px; gap: 12px; }
            .brand { font-size: 16px; }
            .brand small { display: none; }
            .main-nav {
                display: none;
                position: absolute;
                left: 16px;
                right: 16px;
                top: 70px;
                padding: 10px;
                flex-direction: column;
                align-items: stretch;
                background: var(--white);
                border: 1px solid var(--line);
                border-radius: 12px;
                box-shadow: var(--shadow-lg);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 11px 13px; }
            .menu-trigger { display: block; }
            .hero { padding: 48px 0 44px; }
            .hero-copy { padding-top: 0; }
            .hero h1 { font-size: clamp(38px, 12vw, 58px); }
            .hero-intro { font-size: 15px; }
            .section { padding: 64px 0; }
            .solution-layout,
            .content-stage,
            .faq-layout,
            .brand-band { grid-template-columns: 1fr; }
            .content-stage { gap: 14px; }
            .result-panel { padding: 28px 22px; }
            .result-grid { grid-template-columns: 1fr; }
            .quotes { grid-template-columns: 1fr; }
            .quote-card.primary { grid-column: auto; }
            .brand-band { padding: 28px 24px; }
            .cta-inner { display: block; }
            .cta .button { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > :first-child { grid-column: span 2; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 8px; }
        }

        @media (max-width: 520px) {
            .coupon-wall { grid-template-columns: 1fr; }
            .coupon.large { grid-column: auto; }
            .coupon { min-height: 125px; }
            .hero-stats { gap: 15px; }
            .preview-row { grid-template-columns: 62px 1fr; }
            .preview-time { display: none; }
            .calendar-entry { grid-template-columns: 58px 1fr auto; padding: 16px; gap: 10px; }
            .date-strip { overflow-x: auto; padding-bottom: 5px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > :first-child { grid-column: auto; }
            .search-form { display: grid; grid-template-columns: 1fr auto; }
        }

/* roulang page: category2 */
:root{
 --berry-950:#24132d;--berry-900:#32183d;--berry-800:#482052;--berry-700:#622668;
 --berry-100:#f1e7f3;--orange:#f4774d;--orange-dark:#d95a35;--mint:#4db6a3;
 --cream:#fcfaf7;--mist:#f4f0f3;--ink:#2e2531;--muted:#756b77;--line:#e6dfe7;
 --white:#fff;--shadow-sm:0 8px 24px rgba(48,27,56,.07);--shadow-lg:0 22px 55px rgba(48,27,56,.16);
 --radius-sm:10px;--radius-md:16px;--radius-lg:24px;--ease:all .25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none;transition:var(--ease)}
img{display:block;max-width:100%}
button,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(244,119,77,.35);outline-offset:3px}
.container{width:min(1200px,calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,250,247,.97);border-bottom:1px solid var(--line);box-shadow:0 5px 20px rgba(50,24,61,.05);backdrop-filter:blur(14px)}
.topbar{min-height:72px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:var(--berry-900);font-weight:800;letter-spacing:-.04em;font-size:20px}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:var(--white);background:var(--orange);border-radius:12px 12px 12px 4px;font-size:17px;box-shadow:5px 5px 0 var(--berry-900)}
.brand small{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.main-nav{display:flex;align-items:center;gap:5px;flex:1}
.main-nav a{padding:8px 13px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:700;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--berry-900);background:var(--berry-100)}
.nav-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.trend-link{font-size:13px;font-weight:800;color:var(--orange-dark)}
.search-trigger,.menu-trigger{border:0;cursor:pointer;background:transparent;color:var(--berry-900)}
.search-trigger{width:38px;height:38px;border:1px solid var(--line);border-radius:50%}
.menu-trigger{display:none;font-size:24px}
.search-panel{display:none;padding:0 0 18px}
.search-panel.open{display:block}
.search-form{display:flex;gap:10px;max-width:620px;margin-left:auto}
.search-form input{height:46px;margin:0;border:1px solid var(--line);border-radius:10px;background:var(--white);box-shadow:none}
.search-form input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,119,77,.13)}
.button{display:inline-block;border-radius:10px;padding:12px 20px;font-weight:800;transition:var(--ease);border:0}
.button:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(50,24,61,.14)}
.button.primary{background:var(--orange);color:var(--white)}
.button.primary:hover{background:var(--orange-dark)}
.button.berry{background:var(--berry-900);color:var(--white)}
.button.ghost{color:var(--berry-900);border:1px solid rgba(72,32,82,.25);background:transparent}
.button.ghost:hover{background:var(--berry-100)}
.page-hero{position:relative;overflow:hidden;padding:76px 0 64px;background:var(--berry-950);color:var(--white)}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(98,38,104,.8),transparent 55%),radial-gradient(circle at 88% 25%,rgba(244,119,77,.32),transparent 24%)}
.page-hero:after{content:"专题 / 02";position:absolute;right:7%;bottom:24px;color:rgba(255,255,255,.12);font-size:76px;font-weight:900;letter-spacing:-.08em}
.hero-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:40px}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.1em}
.eyebrow:before,.kicker:before{content:"";width:24px;height:2px;background:var(--orange)}
.page-hero h1{max-width:720px;margin:16px 0 12px;font-size:clamp(36px,5vw,68px);line-height:1.12;letter-spacing:-.06em}
.page-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.72);font-size:17px}
.hero-note{min-width:220px;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);background:rgba(255,255,255,.06)}
.hero-note strong{display:block;font-size:29px;color:var(--orange)}
.hero-note span{font-size:13px;color:rgba(255,255,255,.64)}
.section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-head h2{margin:7px 0 0;font-size:clamp(26px,3.2vw,42px);line-height:1.2;letter-spacing:-.05em}
.section-head p{max-width:510px;margin:0;color:var(--muted)}
.topic-bar{display:flex;gap:10px;overflow:auto;padding-bottom:7px;margin-bottom:34px;scrollbar-width:thin}
.topic-bar a{flex:0 0 auto;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--muted);font-size:13px;font-weight:800}
.topic-bar a:hover,.topic-bar a.active{background:var(--orange);border-color:var(--orange);color:var(--white)}
.feature-wall{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
.poster{position:relative;min-height:310px;overflow:hidden;border-radius:var(--radius-lg);color:var(--white);background:linear-gradient(145deg,#6f2d6b,#24132d 72%);box-shadow:var(--shadow-sm)}
.poster:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,10,25,.88),transparent 62%),linear-gradient(125deg,transparent 45%,rgba(244,119,77,.25) 46%,transparent 47%)}
.poster.large{min-height:440px;background:linear-gradient(145deg,#d85b42 0%,#6a286b 42%,#26142f 85%)}
.poster.alt{background:linear-gradient(145deg,#4db6a3,#32183d 68%)}
.poster.gold{background:linear-gradient(145deg,#f3a45e,#622668 58%,#24132d)}
.poster-content{position:absolute;z-index:1;left:26px;right:26px;bottom:24px}
.poster-content h3{max-width:510px;margin:10px 0 7px;font-size:clamp(23px,3vw,38px);line-height:1.2;letter-spacing:-.04em}
.poster-content p{margin:0;color:rgba(255,255,255,.72);font-size:14px}
.poster-meta{display:flex;gap:8px;flex-wrap:wrap;color:rgba(255,255,255,.7);font-size:12px}
.badge{display:inline-flex;padding:4px 9px;border-radius:6px;background:var(--orange);color:#fff;font-size:11px;font-weight:900}
.badge.mint{background:var(--mint)}
.side-posters{display:grid;gap:18px}
.side-posters .poster{min-height:211px}
.wall-index{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.index-item{padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white)}
.index-item b{display:block;color:var(--orange-dark);font-size:12px}
.index-item strong{display:block;margin-top:5px;font-size:15px}
.index-item span{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.dark-section{background:var(--berry-900);color:var(--white)}
.dark-section .section-head p{color:rgba(255,255,255,.64)}
.content-index{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px}
.filter-panel{padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);background:rgba(255,255,255,.06)}
.filter-panel h3{margin:0 0 16px;font-size:20px}
.filter-panel a{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.72);font-weight:700}
.filter-panel a:hover{color:var(--orange)}
.filter-panel a span{color:var(--orange);font-size:12px}
.index-list{display:grid;gap:12px}
.index-row{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:16px;padding:15px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.row-thumb{height:52px;border-radius:8px;background:linear-gradient(135deg,#f4774d,#622668);position:relative}
.row-thumb:after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px}
.index-row h3{margin:0;font-size:16px}
.index-row p{margin:3px 0 0;color:rgba(255,255,255,.55);font-size:12px}
.row-time{color:var(--orange);font-size:12px;font-weight:800;white-space:nowrap}
.quote-strip{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:16px}
.quote{padding:27px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-sm)}
.quote.primary{background:var(--berry-100);border-color:#dfcde2}
.quote-mark{color:var(--orange);font-size:35px;line-height:1}
.quote p{margin:10px 0 20px;font-size:17px;font-weight:700;line-height:1.6}
.quote small{color:var(--muted);font-weight:700}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;align-items:start}
.faq-grid h2{margin:8px 0 14px;font-size:34px;line-height:1.2}
.faq-grid .intro{color:var(--muted)}
.accordion{margin:0;background:transparent}
.accordion-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;background:var(--white)}
.accordion-title{padding:16px 20px;color:var(--berry-900);font-weight:800;font-size:15px;border:0}
.accordion-title:hover{background:var(--berry-100)}
.accordion-content{border-top:2px solid var(--orange);color:var(--muted);font-size:14px;line-height:1.8}
.cta{padding:58px 0;background:linear-gradient(110deg,var(--orange),#df6545);color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{margin:0 0 8px;font-size:clamp(28px,4vw,45px);letter-spacing:-.05em;line-height:1.2}
.cta p{margin:0;color:rgba(255,255,255,.8)}
.cta .button{background:var(--berry-950);color:#fff}
.site-footer{padding:52px 0 22px;background:var(--mist);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}
.footer-intro{max-width:280px;color:var(--muted);font-size:14px}
.footer-col h3{margin:0 0 12px;color:var(--berry-900);font-size:14px}
.footer-col a{display:block;margin:7px 0;color:var(--muted);font-size:13px}
.footer-col a:hover{color:var(--orange-dark);transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:900px){
 .topbar{gap:14px}.main-nav{gap:0}.main-nav a{padding:8px 8px;font-size:13px}
 .hero-inner,.cta-inner{align-items:flex-start;flex-direction:column}.hero-note{min-width:0;width:100%}
 .feature-wall,.content-index,.faq-grid{grid-template-columns:1fr}.wall-index{grid-template-columns:repeat(2,1fr)}
 .quote-strip{grid-template-columns:1fr 1fr}.quote.primary{grid-column:span 2}
}
@media(max-width:640px){
 .container{width:min(100% - 32px,1200px)}.topbar{min-height:64px}
 .brand{font-size:16px}.brand-mark{width:34px;height:34px}.brand small{font-size:9px}
 .main-nav{display:none;position:absolute;left:16px;right:16px;top:70px;padding:10px;flex-direction:column;align-items:stretch;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg)}
 .main-nav.open{display:flex}.main-nav a{padding:12px}.trend-link{display:none}.menu-trigger{display:block}
 .search-form{max-width:none}.page-hero{padding:56px 0 52px}.page-hero h1{font-size:39px}.page-hero p{font-size:15px}
 .section{padding:54px 0}.section-head{display:block}.section-head p{margin-top:12px}
 .feature-wall{gap:12px}.poster.large{min-height:350px}.side-posters{grid-template-columns:1fr 1fr;gap:12px}.side-posters .poster{min-height:180px}
 .poster-content{left:18px;right:18px;bottom:17px}.poster-content h3{font-size:21px}.poster-content p{font-size:12px}
 .wall-index{gap:8px}.index-item{padding:12px}.index-item strong{font-size:13px}
 .index-row{grid-template-columns:58px 1fr;gap:11px}.row-time{grid-column:2}.row-thumb{height:44px}
 .quote-strip{grid-template-columns:1fr}.quote.primary{grid-column:auto}.quote{padding:21px}
 .faq-grid h2{font-size:29px}.cta{padding:45px 0}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:span 2}
 .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
}

/* roulang page: category1 */
:root {
  --berry-950: #24132d;
  --berry-900: #32183d;
  --berry-800: #482052;
  --berry-700: #622668;
  --berry-100: #f1e7f3;
  --orange: #f4774d;
  --orange-dark: #d95a35;
  --mint: #4db6a3;
  --cream: #fcfaf7;
  --mist: #f4f0f3;
  --ink: #2e2531;
  --muted: #756b77;
  --line: #e6dfe7;
  --white: #ffffff;
  --shadow-sm: 0 8px 24px rgba(48, 27, 56, .07);
  --shadow-lg: 0 22px 55px rgba(48, 27, 56, .16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: all .25s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--ease);
}

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

button,
input,
select {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(244, 119, 77, .35);
  outline-offset: 3px;
}

::selection {
  color: var(--white);
  background: var(--berry-700);
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 86px 0;
}

.section-soft {
  background: var(--mist);
}

.section-dark {
  color: var(--white);
  background:
    radial-gradient(circle at 86% 20%, rgba(244, 119, 77, .22), transparent 25%),
    linear-gradient(135deg, var(--berry-950), var(--berry-800));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 250, 247, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 20px rgba(50, 24, 61, .05);
  backdrop-filter: blur(14px);
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  color: var(--berry-900);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--orange);
  border-radius: 12px 12px 12px 4px;
  box-shadow: 5px 5px 0 var(--berry-900);
  font-size: 17px;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.main-nav a {
  position: relative;
  padding: 8px 13px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--berry-900);
  background: var(--berry-100);
}

.main-nav a.active::after {
  position: absolute;
  right: 13px;
  bottom: 3px;
  left: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  content: "";
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trend-link {
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 800;
}

.trend-link:hover {
  color: var(--berry-900);
}

.search-trigger,
.menu-trigger {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--berry-900);
}

.search-trigger {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 20px;
}

.search-trigger:hover {
  color: var(--white);
  border-color: var(--berry-900);
  background: var(--berry-900);
}

.menu-trigger {
  display: none;
  font-size: 24px;
}

.search-panel {
  display: none;
  padding: 0 0 18px;
}

.search-panel.open {
  display: block;
  animation: panelDown .22s ease;
}

.search-form {
  display: flex;
  gap: 10px;
  max-width: 620px;
  margin-left: auto;
}

.search-form input {
  height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: none;
}

.search-form input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 119, 77, .13);
}

.button {
  min-height: 46px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.35;
  transition: var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(50, 24, 61, .14);
}

.button.primary {
  color: var(--white);
  background: var(--orange);
}

.button.primary:hover,
.button.primary:focus {
  color: var(--white);
  background: var(--orange-dark);
}

.button.berry {
  color: var(--white);
  background: var(--berry-900);
}

.button.berry:hover,
.button.berry:focus {
  color: var(--white);
  background: var(--berry-700);
}

.button.ghost {
  color: var(--berry-900);
  border: 1px solid rgba(72, 32, 82, .25);
  background: transparent;
}

.button.ghost:hover {
  color: var(--berry-900);
  background: var(--berry-100);
}

.button.light {
  color: var(--berry-900);
  background: var(--white);
}

.button.light:hover {
  color: var(--berry-900);
  background: var(--berry-100);
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.eyebrow::before,
.section-kicker::before {
  width: 24px;
  height: 3px;
  border-radius: 4px;
  background: currentColor;
  content: "";
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 56px;
  background:
    linear-gradient(90deg, rgba(36, 19, 45, .98), rgba(72, 32, 82, .94)),
    var(--berry-950);
  color: var(--white);
}

.page-hero::before {
  position: absolute;
  top: -130px;
  right: -60px;
  width: 420px;
  height: 420px;
  border: 58px solid rgba(244, 119, 77, .11);
  border-radius: 50%;
  content: "";
}

.page-hero::after {
  position: absolute;
  right: 8%;
  bottom: -65px;
  width: 380px;
  height: 130px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  transform: rotate(-8deg);
  content: "";
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
  gap: 58px;
  align-items: center;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  list-style: none;
}

.breadcrumbs li {
  color: inherit;
  text-transform: none;
}

.breadcrumbs li:not(:last-child)::after {
  margin-left: 8px;
  color: rgba(255, 255, 255, .35);
  content: "/";
}

.breadcrumbs a {
  color: rgba(255, 255, 255, .75);
}

.breadcrumbs a:hover {
  color: var(--orange);
}

.page-hero .eyebrow {
  color: #ff9d7d;
}

.page-hero h1 {
  max-width: 760px;
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.12;
}

.page-hero h1 em {
  color: #ff9d7d;
  font-style: normal;
}

.hero-summary {
  max-width: 720px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, .76);
  font-size: 18px;
  line-height: 1.9;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-tag {
  padding: 7px 11px;
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 12px;
  font-weight: 800;
}

.hero-search-card {
  position: relative;
  padding: 30px;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.hero-search-card::before {
  position: absolute;
  top: 0;
  left: 28px;
  width: 86px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--orange);
  content: "";
}

.card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 900;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(77, 182, 163, .12);
}

.hero-search-card h2 {
  margin: 0 0 10px;
  color: var(--berry-900);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.hero-search-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
}

.hero-query {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-bottom: 18px;
}

.hero-query input {
  height: 50px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.hero-query input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(244, 119, 77, .12);
}

.quick-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-words a {
  padding: 6px 10px;
  color: var(--berry-800);
  border-radius: 7px;
  background: var(--berry-100);
  font-size: 12px;
  font-weight: 800;
}

.quick-words a:hover {
  color: var(--white);
  background: var(--berry-800);
}

.channel-strip {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.channel-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.channel-scroll::-webkit-scrollbar {
  display: none;
}

.channel-item {
  position: relative;
  min-width: 150px;
  padding: 20px 25px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.channel-item:first-child {
  border-left: 1px solid var(--line);
}

.channel-item strong {
  display: block;
  color: var(--berry-900);
  font-size: 14px;
}

.channel-item span {
  color: var(--muted);
  font-size: 11px;
}

.channel-item.active::after {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--orange);
  content: "";
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 38px;
}

.section-heading h2 {
  max-width: 680px;
  margin: 0;
  color: var(--berry-900);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.22;
}

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

.problem-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
}

.problem-lead {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 38px;
  border-radius: var(--radius-lg);
  background: var(--berry-900);
  color: var(--white);
}

.problem-lead::after {
  position: absolute;
  right: -58px;
  bottom: -68px;
  width: 230px;
  height: 230px;
  border: 40px solid rgba(244, 119, 77, .18);
  border-radius: 50%;
  content: "";
}

.problem-index {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ff9d7d;
  font-size: 12px;
  font-weight: 900;
}

.problem-lead h3 {
  position: relative;
  z-index: 2;
  max-width: 430px;
  margin: 80px 0 18px;
  color: var(--white);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
}

.problem-lead p {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, .7);
}

.problem-stack {
  display: grid;
  gap: 14px;
}

.problem-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 116px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}

.problem-row:hover {
  border-color: rgba(98, 38, 104, .25);
  transform: translateX(4px);
  box-shadow: 0 14px 34px rgba(48, 27, 56, .11);
}

.problem-number {
  color: var(--orange);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.problem-row h3 {
  margin: 0 0 4px;
  color: var(--berry-900);
  font-size: 18px;
  font-weight: 900;
}

.problem-row p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.row-label {
  padding: 5px 9px;
  color: var(--berry-800);
  border-radius: 999px;
  background: var(--berry-100);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.solution-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.step-index {
  position: sticky;
  top: 106px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.step-index h3 {
  margin: 0 0 18px;
  color: var(--berry-900);
  font-size: 18px;
  font-weight: 900;
}

.step-link {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 8px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 800;
}

.step-link:last-child {
  border-bottom: 0;
}

.step-link span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--berry-800);
  border-radius: 9px;
  background: var(--berry-100);
  font-size: 12px;
}

.step-link:hover,
.step-link.active {
  color: var(--orange-dark);
}

.step-link:hover span,
.step-link.active span {
  color: var(--white);
  background: var(--orange);
}

.solution-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  background: #fffdfb;
}

.board-head strong {
  color: var(--berry-900);
  font-size: 17px;
}

.board-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 900;
}

.filter-bar {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex: 0 0 auto;
  padding: 8px 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--ease);
}

.filter-chip:hover,
.filter-chip.active {
  color: var(--white);
  border-color: var(--berry-800);
  background: var(--berry-800);
}

.content-preview {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 0;
}

.preview-cover {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(36, 19, 45, .18), rgba(36, 19, 45, .84)),
    radial-gradient(circle at 70% 25%, #f89472, transparent 24%),
    linear-gradient(145deg, #86598a, #32183d);
}

.preview-cover::before,
.preview-cover::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  content: "";
}

.preview-cover::before {
  width: 290px;
  height: 160px;
  right: -35px;
  top: 35px;
  transform: rotate(-18deg);
}

.preview-cover::after {
  width: 430px;
  height: 130px;
  right: -90px;
  bottom: -45px;
  transform: rotate(8deg);
}

.cover-info {
  position: absolute;
  right: 28px;
  bottom: 27px;
  left: 28px;
  z-index: 2;
  color: var(--white);
}

.cover-info h3 {
  max-width: 440px;
  margin: 13px 0 7px;
  color: var(--white);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.35;
}

.cover-info p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
}

.play-button {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  color: var(--white);
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 12px 28px rgba(244, 119, 77, .35);
  cursor: pointer;
  transition: var(--ease);
}

.play-button:hover {
  background: var(--orange-dark);
  transform: scale(1.06);
}

.preview-list {
  padding: 12px 24px;
}

.preview-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.preview-item:last-child {
  border-bottom: 0;
}

.preview-item span {
  color: var(--orange);
  font-size: 18px;
  font-weight: 900;
}

.preview-item h4 {
  margin: 0 0 5px;
  color: var(--berry-900);
  font-size: 15px;
  font-weight: 900;
}

.preview-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.result-panel {
  position: relative;
  overflow: hidden;
  padding: 50px;
  border-radius: var(--radius-lg);
  background: var(--berry-900);
}

.result-panel::before {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 300px;
  height: 300px;
  border: 45px solid rgba(244, 119, 77, .14);
  border-radius: 50%;
  content: "";
}

.result-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  margin-bottom: 42px;
}

.result-top h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.result-top p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
}

.path-board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .055);
}

.path-step {
  position: relative;
  min-height: 150px;
  padding: 26px 22px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.path-step:last-child {
  border-right: 0;
}

.path-step:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 2;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--berry-900);
  border-radius: 50%;
  background: var(--orange);
  content: "›";
  font-size: 17px;
  font-weight: 900;
  transform: translateY(-50%);
}

.path-step small {
  display: block;
  margin-bottom: 20px;
  color: #ff9d7d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.path-step strong {
  display: block;
  margin-bottom: 5px;
  color: var(--white);
  font-size: 17px;
}

.path-step span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
}

.rhythm-bars {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.rhythm-row {
  display: grid;
  grid-template-columns: 105px 1fr 80px;
  gap: 15px;
  align-items: center;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 800;
}

.rhythm-line {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.rhythm-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), #ffad8f);
}

.rhythm-row:nth-child(2) .rhythm-line i {
  width: 72%;
}

.rhythm-row:nth-child(3) .rhythm-line i {
  width: 55%;
}

.rhythm-row:first-child .rhythm-line i {
  width: 88%;
}

.voice-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}

.voice-main {
  position: relative;
  min-height: 340px;
  padding: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.quote-mark {
  position: absolute;
  top: 5px;
  right: 30px;
  color: var(--berry-100);
  font-family: Georgia, serif;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
}

.voice-main blockquote {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 55px 0 36px;
  padding: 0;
  color: var(--berry-900);
  border: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.65;
}

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

.user-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  border-radius: 14px;
  background: var(--orange);
  font-weight: 900;
}

.voice-user strong {
  display: block;
  color: var(--berry-900);
  font-size: 14px;
}

.voice-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.voice-side {
  display: grid;
  gap: 20px;
}

.voice-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--mist);
}

.voice-card:hover {
  border-color: rgba(98, 38, 104, .22);
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.voice-card p {
  margin: 0 0 20px;
  color: var(--ink);
  font-weight: 700;
}

.voice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: var(--muted);
  font-size: 12px;
}

.voice-meta span:last-child {
  padding: 4px 8px;
  color: var(--orange-dark);
  border-radius: 999px;
  background: #fff0eb;
  font-weight: 900;
}

.faq-wrap {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 56px;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 108px;
}

.faq-intro h2 {
  margin: 0 0 18px;
  color: var(--berry-900);
  font-size: clamp(32px, 4vw, 45px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.faq-intro p {
  margin: 0 0 24px;
  color: var(--muted);
}

.accordion {
  margin: 0;
  background: transparent;
}

.accordion-item {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: var(--ease);
}

.accordion-item.is-active {
  border-color: rgba(244, 119, 77, .48);
  box-shadow: var(--shadow-sm);
}

.accordion-title {
  padding: 22px 58px 22px 24px;
  color: var(--berry-900);
  border: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.55;
}

.accordion-title:hover,
.accordion-title:focus {
  color: var(--orange-dark);
  background: #fffaf7;
}

.accordion-title::before {
  right: 24px;
  margin-top: -11px;
  color: var(--orange);
  font-size: 22px;
}

.accordion-content {
  padding: 0 24px 23px;
  color: var(--muted);
  border: 0;
  background: var(--white);
  font-size: 14px;
}

.accordion-content p {
  margin: 0;
}

.final-cta {
  padding: 78px 0;
}

.cta-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 45px;
  align-items: center;
  padding: 52px 56px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 10%, rgba(244, 119, 77, .32), transparent 26%),
    linear-gradient(135deg, var(--berry-950), var(--berry-800));
  box-shadow: var(--shadow-lg);
}

.cta-card::after {
  position: absolute;
  right: 23%;
  bottom: -76px;
  width: 330px;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "";
  transform: rotate(-8deg);
}

.cta-copy,
.cta-actions {
  position: relative;
  z-index: 2;
}

.cta-copy small {
  display: block;
  margin-bottom: 10px;
  color: #ff9d7d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.cta-copy h2 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.cta-copy p {
  max-width: 690px;
  margin: 0;
  color: rgba(255, 255, 255, .68);
}

.cta-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.site-footer {
  padding: 68px 0 24px;
  color: rgba(255, 255, 255, .68);
  background: var(--berry-950);
}

.site-footer .brand {
  color: var(--white);
}

.site-footer .brand small {
  color: rgba(255, 255, 255, .47);
}

.site-footer .brand-mark {
  box-shadow: 5px 5px 0 rgba(255, 255, 255, .14);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 55px;
}

.footer-intro {
  max-width: 330px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
}

.footer-col h3 {
  margin: 0 0 17px;
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
}

.footer-col a {
  display: block;
  width: fit-content;
  margin: 10px 0;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
}

.footer-col a:hover {
  color: var(--orange);
  transform: translateX(3px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
}

@keyframes panelDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1024px) {
  .topbar {
    gap: 18px;
  }

  .brand {
    font-size: 18px;
  }

  .main-nav a {
    padding: 8px 9px;
    font-size: 13px;
  }

  .trend-link {
    display: none;
  }

  .hero-layout {
    grid-template-columns: 1fr .8fr;
    gap: 34px;
  }

  .page-hero h1 {
    font-size: 48px;
  }

  .problem-layout,
  .solution-layout,
  .faq-wrap {
    grid-template-columns: 1fr;
  }

  .step-index,
  .faq-intro {
    position: static;
  }

  .step-index {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
  }

  .step-index h3 {
    display: none;
  }

  .step-link {
    flex: 0 0 auto;
    border: 0;
  }

  .result-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 30px;
  }
}

@media screen and (max-width: 820px) {
  .container {
    width: min(100% - 32px, 1200px);
  }

  .topbar {
    min-height: 66px;
  }

  .brand small {
    display: none;
  }

  .main-nav {
    position: fixed;
    top: 66px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
    display: none;
    align-items: stretch;
    padding: 18px 16px;
    background: rgba(252, 250, 247, .99);
  }

  .main-nav.open {
    display: block;
  }

  .main-nav a {
    display: block;
    margin-bottom: 7px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .main-nav a.active::after {
    top: 13px;
    right: auto;
    bottom: 13px;
    left: 0;
    width: 4px;
    height: auto;
    border-radius: 0 4px 4px 0;
  }

  .nav-tools {
    margin-left: auto;
  }

  .menu-trigger {
    display: block;
  }

  .search-panel {
    padding-bottom: 14px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: 52px 0;
  }

  .page-hero h1 {
    font-size: clamp(38px, 9vw, 54px);
  }

  .hero-search-card {
    max-width: 620px;
  }

  .section {
    padding: 68px 0;
  }

  .section-heading {
    display: block;
  }

  .section-heading p {
    margin-top: 15px;
  }

  .content-preview,
  .voice-layout {
    grid-template-columns: 1fr;
  }

  .path-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .path-step:nth-child(2) {
    border-right: 0;
  }

  .path-step:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .path-step:nth-child(2)::after {
    display: none;
  }

  .result-panel {
    padding: 38px 28px;
  }

  .cta-card {
    grid-template-columns: 1fr;
    padding: 42px 34px;
  }

  .cta-actions {
    white-space: normal;
  }

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

@media screen and (max-width: 560px) {
  body {
    font-size: 15px;
  }

  .container {
    width: calc(100% - 32px);
  }

  .brand {
    max-width: 210px;
    font-size: 16px;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
  }

  .search-trigger {
    width: 36px;
    height: 36px;
  }

  .search-form,
  .hero-query {
    grid-template-columns: 1fr;
    display: grid;
  }

  .search-form .button,
  .hero-query .button {
    width: 100%;
  }

  .page-hero {
    padding: 38px 0 42px;
  }

  .breadcrumbs {
    margin-bottom: 21px;
  }

  .page-hero h1 {
    margin-bottom: 16px;
    font-size: 36px;
  }

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

  .hero-search-card {
    padding: 25px 20px;
  }

  .section {
    padding: 54px 0;
  }

  .section-heading {
    margin-bottom: 28px;
  }

  .section-heading h2,
  .faq-intro h2 {
    font-size: 30px;
  }

  .problem-lead {
    min-height: 330px;
    padding: 28px;
  }

  .problem-lead h3 {
    margin-top: 60px;
    font-size: 27px;
  }

  .problem-row {
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 19px 17px;
  }

  .row-label {
    grid-column: 2;
    width: fit-content;
  }

  .step-index {
    padding: 12px;
  }

  .step-link {
    grid-template-columns: 30px 1fr;
    padding: 8px;
  }

  .step-link span {
    width: 28px;
    height: 28px;
  }

  .board-head,
  .filter-bar {
    padding-right: 18px;
    padding-left: 18px;
  }

  .board-status {
    display: none;
  }

  .preview-cover {
    min-height: 320px;
  }

  .cover-info {
    right: 20px;
    left: 20px;
  }

  .cover-info h3 {
    font-size: 22px;
  }

  .preview-list {
    padding: 8px 18px;
  }

  .result-panel {
    padding: 31px 20px;
  }

  .path-board {
    grid-template-columns: 1fr;
  }

  .path-step,
  .path-step:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .path-step:last-child {
    border-bottom: 0;
  }

  .path-step::after {
    display: none;
  }

  .rhythm-row {
    grid-template-columns: 76px 1fr;
  }

  .rhythm-row > span:last-child {
    display: none;
  }

  .voice-main {
    min-height: auto;
    padding: 30px 24px;
  }

  .voice-main blockquote {
    margin: 35px 0 28px;
    font-size: 20px;
  }

  .voice-card {
    padding: 23px 20px;
  }

  .accordion-title {
    padding: 19px 50px 19px 18px;
    font-size: 15px;
  }

  .accordion-content {
    padding: 0 18px 20px;
  }

  .cta-card {
    padding: 35px 23px;
  }

  .cta-actions {
    display: grid;
    width: 100%;
  }

  .cta-actions .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
}