:root {
          --ink: #101820;
          --muted: #5f6b7a;
          --paper: #f6f8f7;
          --white: #ffffff;
          --green: #0f766e;
          --green-dark: #0a4f49;
          --gold: #d99a19;
          --red: #c93232;
          --line: #dfe7e3;
          --shadow: 0 18px 45px rgba(16, 24, 32, 0.12);
          --radius: 8px;
          font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
          margin: 0;
          color: var(--ink);
          background: var(--paper);
          line-height: 1.65;
        }
        img { max-width: 100%; display: block; }
        a { color: var(--green); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .skip-link {
          position: absolute;
          left: 1rem;
          top: -4rem;
          background: var(--white);
          color: var(--ink);
          padding: .75rem 1rem;
          z-index: 20;
        }
        .skip-link:focus { top: 1rem; }

        .site-header {
          position: sticky;
          top: 0;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          padding: .9rem clamp(1rem, 4vw, 3rem);
          background: rgba(255,255,255,.94);
          border-bottom: 1px solid var(--line);
          backdrop-filter: blur(14px);
        }
        .brand {
          display: inline-flex;
          align-items: center;
          gap: .7rem;
          color: var(--ink);
          font-weight: 800;
          letter-spacing: 0;
        }
        .brand:hover { text-decoration: none; }
        .brand-mark {
          display: grid;
          place-items: center;
          width: 40px;
          height: 40px;
          color: #fff;
          background: linear-gradient(135deg, var(--green), var(--red));
          border-radius: 8px;
          font-size: .9rem;
          box-shadow: 0 10px 22px rgba(15, 118, 110, .25);
        }
        .site-nav {
          display: flex;
          align-items: center;
          gap: .35rem;
        }
        .site-nav a {
          color: var(--ink);
          padding: .55rem .8rem;
          border-radius: 8px;
          font-weight: 650;
          font-size: .95rem;
        }
        .site-nav a:hover,
        .site-nav a.active {
          background: #eaf4f1;
          color: var(--green-dark);
          text-decoration: none;
        }
        .site-nav a.nav-cta {
          background: var(--gold);
          color: #151007;
          border: 1px solid rgba(21, 16, 7, .08);
        }
        .site-nav a.nav-cta:hover,
        .site-nav a.nav-cta[aria-current="page"] {
          background: #f0b33a;
          color: #151007;
        }
        .nav-toggle {
          display: none;
          width: 44px;
          height: 44px;
          border: 1px solid var(--line);
          background: var(--white);
          border-radius: 8px;
          padding: .7rem;
        }
        .nav-toggle span {
          display: block;
          height: 2px;
          margin: 5px 0;
          background: var(--ink);
        }

        .hero {
          min-height: min(720px, 82vh);
          display: grid;
          align-items: end;
          padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 5vw, 4rem);
          background-image: linear-gradient(90deg, rgba(6, 20, 22, .92), rgba(6, 20, 22, .68) 45%, rgba(6, 20, 22, .22)), url("images/deshclub-wingo-hero.jpg");
          background-size: cover;
          background-position: center;
          color: #fff;
        }
        .hero-content {
          max-width: 760px;
        }
        .eyebrow {
          margin: 0 0 .55rem;
          color: var(--gold);
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0;
          font-size: .78rem;
        }
        h1, h2, h3 {
          line-height: 1.14;
          margin: 0 0 1rem;
          letter-spacing: 0;
        }
        h1 { font-size: clamp(2.4rem, 7vw, 5.8rem); }
        h2 { font-size: clamp(1.65rem, 3vw, 2.6rem); }
        h3 { font-size: 1.2rem; }
        .hero-copy {
          font-size: clamp(1.05rem, 2vw, 1.35rem);
          max-width: 680px;
          color: rgba(255,255,255,.9);
          margin-bottom: 1.5rem;
        }
        .hero-actions,
        .center-action {
          display: flex;
          gap: .85rem;
          flex-wrap: wrap;
          align-items: center;
        }
        .button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 46px;
          padding: .72rem 1rem;
          border-radius: 8px;
          border: 1px solid transparent;
          font-weight: 800;
          text-decoration: none;
        }
        .button:hover { text-decoration: none; }
        .button.primary {
          background: var(--gold);
          color: #151007;
        }
        .button.secondary {
          color: #fff;
          border-color: rgba(255,255,255,.45);
          background: rgba(255,255,255,.12);
        }
        .metrics-band {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--line);
          border-bottom: 1px solid var(--line);
        }
        .metrics-band div {
          background: var(--white);
          padding: 1.4rem clamp(1rem, 3vw, 2rem);
        }
        .metrics-band strong {
          display: block;
          font-size: clamp(1.5rem, 4vw, 2.6rem);
          color: var(--green);
          line-height: 1;
        }
        .metrics-band span { color: var(--muted); font-weight: 700; }

        .cta-band {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 1.5rem;
          align-items: center;
          padding: clamp(2rem, 5vw, 3.2rem) clamp(1rem, 5vw, 4rem);
          background: linear-gradient(135deg, var(--green-dark), #172027 58%, #4a1717);
          color: #fff;
        }
        .cta-band h2 {
          margin-bottom: .45rem;
        }
        .cta-band p:not(.eyebrow) {
          max-width: 760px;
          margin: 0;
          color: rgba(255,255,255,.86);
        }
        .cta-actions {
          display: flex;
          gap: .75rem;
          flex-wrap: wrap;
          justify-content: flex-end;
        }

        .section,
        .blog-tools {
          padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 4rem);
        }
        .section.alt { background: #eef4f1; }
        .section-heading {
          max-width: 780px;
          margin-bottom: 2rem;
        }
        .section-heading p:not(.eyebrow) {
          color: var(--muted);
          font-size: 1.08rem;
        }
        .feature-grid,
        .post-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 1rem;
        }
        .feature-panel,
        .post-card,
        .notice-panel {
          background: var(--white);
          border: 1px solid var(--line);
          border-radius: var(--radius);
          padding: 1.25rem;
          box-shadow: 0 10px 28px rgba(16, 24, 32, .06);
        }
        .feature-panel h2,
        .feature-panel h3,
        .post-card h3 {
          font-size: 1.18rem;
        }
        .feature-panel p,
        .post-card p,
        .notice-panel p {
          color: var(--muted);
        }
        .post-card {
          display: flex;
          flex-direction: column;
          min-height: 260px;
        }
        .post-card h3 a { color: var(--ink); }
        .card-meta {
          margin-top: auto;
          display: flex;
          flex-wrap: wrap;
          gap: .55rem;
          color: var(--muted);
          font-size: .88rem;
          border-top: 1px solid var(--line);
          padding-top: .9rem;
        }

        .page-hero {
          min-height: 420px;
          display: grid;
          align-items: end;
          padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem);
          color: #fff;
          background-image: linear-gradient(90deg, rgba(9, 30, 32, .94), rgba(9, 30, 32, .72)), url("images/deshclub-wingo-hero.jpg");
          background-size: cover;
          background-position: center;
        }
        .page-hero.compact { min-height: 330px; }
        .page-hero div { max-width: 820px; }
        .page-hero p:not(.eyebrow) {
          color: rgba(255,255,255,.9);
          font-size: 1.12rem;
        }
        .two-column {
          display: grid;
          grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
          gap: 2rem;
          align-items: start;
        }
        table {
          width: 100%;
          border-collapse: collapse;
          background: var(--white);
          border-radius: var(--radius);
          overflow: hidden;
          border: 1px solid var(--line);
        }
        th, td {
          text-align: left;
          padding: .9rem;
          border-bottom: 1px solid var(--line);
          vertical-align: top;
        }
        th { background: #eaf4f1; color: var(--green-dark); }
        .check-list li { margin-bottom: .65rem; }

        .blog-tools {
          background: var(--white);
          border-bottom: 1px solid var(--line);
          padding-top: 1.4rem;
          padding-bottom: 1.4rem;
        }
        .blog-tools input {
          width: 100%;
          max-width: 760px;
          min-height: 48px;
          padding: .8rem 1rem;
          border: 1px solid var(--line);
          border-radius: 8px;
          font: inherit;
        }
        .filter-row {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
          margin-top: 1rem;
        }
        .filter-row button {
          border: 1px solid var(--line);
          background: var(--paper);
          color: var(--ink);
          border-radius: 8px;
          padding: .55rem .75rem;
          font-weight: 700;
          cursor: pointer;
        }
        .filter-row button.active {
          background: var(--green);
          color: #fff;
          border-color: var(--green);
        }

        .article-header {
          padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 4rem) 2rem;
          background: #fff;
        }
        .article-header h1 {
          max-width: 980px;
          font-size: clamp(2rem, 5vw, 4rem);
        }
        .article-header > p:not(.eyebrow) {
          max-width: 820px;
          color: var(--muted);
          font-size: 1.17rem;
        }
        .breadcrumbs {
          display: flex;
          gap: .45rem;
          flex-wrap: wrap;
          margin-bottom: 1.2rem;
          color: var(--muted);
          font-size: .95rem;
        }
        .article-meta {
          display: flex;
          flex-wrap: wrap;
          gap: .75rem;
          color: var(--muted);
          font-weight: 700;
          margin-top: 1rem;
        }
        .article-image {
          margin: 0;
          max-height: 480px;
          overflow: hidden;
          background: #0b1f21;
        }
        .article-image img {
          width: 100%;
          min-height: 280px;
          object-fit: cover;
        }
        .article-shell {
          display: grid;
          grid-template-columns: 260px minmax(0, 820px);
          gap: 2.5rem;
          align-items: start;
          padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
        }
        .toc {
          position: sticky;
          top: 86px;
          display: grid;
          gap: .45rem;
          background: #fff;
          border: 1px solid var(--line);
          border-radius: var(--radius);
          padding: 1rem;
        }
        .toc a {
          color: var(--muted);
          font-weight: 700;
        }
        .article-copy {
          background: #fff;
          border: 1px solid var(--line);
          border-radius: var(--radius);
          padding: clamp(1.25rem, 4vw, 2.2rem);
        }
        .article-copy section + section { margin-top: 2.4rem; }
        .article-copy p { color: #293642; }
        .summary-box {
          border-left: 4px solid var(--gold);
          background: #fff8e7;
          padding: 1rem 1rem 1rem 1.2rem;
          border-radius: 0 8px 8px 0;
          margin: 1.5rem 0;
        }
        .article-register-box {
          margin: 1.4rem 0;
          padding: 1.2rem;
          border: 1px solid #b9ded7;
          border-radius: var(--radius);
          background: #edf8f5;
        }
        .article-register-box h3 {
          margin-bottom: .35rem;
        }
        .toc .toc-cta {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 42px;
          margin-top: .65rem;
          padding: .6rem .75rem;
          border-radius: 8px;
          background: var(--gold);
          color: #151007;
          font-weight: 800;
        }
        .toc .toc-cta:hover {
          text-decoration: none;
          background: #f0b33a;
        }
        .faq-block details {
          border: 1px solid var(--line);
          border-radius: var(--radius);
          padding: .9rem 1rem;
          margin-bottom: .8rem;
          background: #fbfcfb;
        }
        .faq-block summary {
          cursor: pointer;
          font-weight: 800;
        }
        .legal-copy {
          max-width: 880px;
        }

        body.play-page {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          background: #050707;
          line-height: 1;
        }
        body.play-page main {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
        }
        .play-frame-page {
          position: fixed;
          inset: 0;
          width: 100vw;
          height: 100vh;
          margin: 0;
          padding: 0;
          background: #050707;
        }
        .play-frame-page iframe {
          display: block;
          width: 100vw;
          height: 100vh;
          border: 0;
          margin: 0;
          padding: 0;
          background: #050707;
        }
        .play-frame-page noscript {
          position: fixed;
          inset: 0;
          display: grid;
          place-items: center;
          padding: 1rem;
          background: #050707;
        }
        .play-frame-page noscript a {
          color: #fff;
          font-weight: 800;
        }

        .site-footer {
          background: #101820;
          color: #dce6e3;
          padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 4rem) 1rem;
        }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(3, 1fr);
          gap: 1.5rem;
        }
        .footer-brand { color: #fff; margin-bottom: 1rem; }
        .site-footer h2 {
          font-size: 1rem;
          color: #fff;
        }
        .site-footer a {
          display: block;
          color: #dce6e3;
          margin: .35rem 0;
        }
        .site-footer p { color: #bdcbc7; }
        .footer-bottom {
          display: flex;
          justify-content: space-between;
          gap: 1rem;
          border-top: 1px solid rgba(255,255,255,.14);
          margin-top: 2rem;
          padding-top: 1rem;
          font-size: .9rem;
        }

        @media (max-width: 1080px) {
          .feature-grid,
          .post-grid,
          .metrics-band {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .article-shell {
            grid-template-columns: 1fr;
          }
          .toc { position: static; }
          .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 760px) {
          .nav-toggle { display: block; }
          .site-nav {
            position: absolute;
            left: 1rem;
            right: 1rem;
            top: 72px;
            display: none;
            flex-direction: column;
            align-items: stretch;
            padding: .75rem;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: var(--shadow);
          }
          .site-nav.open { display: flex; }
          .feature-grid,
          .post-grid,
          .metrics-band,
          .two-column,
          .footer-grid {
            grid-template-columns: 1fr;
          }
          .hero {
            min-height: 620px;
            background-position: 58% center;
          }
          .hero-actions,
          .cta-actions,
          .footer-bottom {
            flex-direction: column;
            align-items: stretch;
          }
          .cta-band {
            grid-template-columns: 1fr;
            flex-direction: column;
            align-items: stretch;
          }
          .button { width: 100%; }
          h1 { font-size: clamp(2.25rem, 14vw, 3.5rem); }
          .article-copy { padding: 1rem; }
        }