* { box-sizing: border-box; }
    :root {
      --black: #151515;
      --black-2: #080b12;
      --red: #e73034;
      --red-deep: #b70e16;
      --blue: #13233a;
      --gold: #f0c15a;
      --text: #182132;
      --muted: #687386;
      --line: #e8edf4;
      --shell: min(1160px, calc(100vw - 48px));
    }
    html,
    body { overflow-x: hidden; }
    body {
      margin: 0;
      color: var(--text);
      background: #f5f7fb;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      line-height: 1.65;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    .shell { width: var(--shell); margin: 0 auto; }

    .topbar {
      color: #fff;
      background: var(--black);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .topbar-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .brand-mark {
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      border: 2px solid rgba(255,255,255,.75);
      border-radius: 14px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(255,255,255,.12), transparent),
        linear-gradient(180deg, #263543 0%, #070a0f 100%);
      box-shadow: 0 10px 22px rgba(0,0,0,.34);
      font-size: 15px;
      font-weight: 1000;
    }
    .brand-mark span { color: #ff4146; }
    .brand-copy strong {
      display: block;
      color: #fff;
      font-size: 30px;
      font-weight: 1000;
      line-height: 1;
    }
    .brand-copy small {
      display: block;
      margin-top: 5px;
      color: #b8c1d0;
      font-size: 13px;
    }
    .account {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .pill,
    .hero-btn,
    .read-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .pill {
      min-width: 118px;
      padding: 0 22px;
      color: #fff;
      background: #4d6f9d;
    }
    .pill.red {
      background: linear-gradient(180deg, #ff585d, #d71920);
      box-shadow: 0 10px 22px rgba(231,48,52,.24);
    }
    .nav-wrap {
      background: var(--red);
      color: #212121;
      box-shadow: 0 4px 0 rgba(0,0,0,.08);
    }
    .nav {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      font-size: 15px;
      font-weight: 1000;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .nav a {
      position: relative;
      height: 68px;
      display: inline-flex;
      align-items: center;
      color: #262626;
    }
    .nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 17px;
      height: 3px;
      background: #151515;
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 450px;
      overflow: hidden;
      background: #07101c;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url("hello88-hero.jpg") center / cover no-repeat;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(5,9,16,.98) 0%, rgba(7,13,24,.78) 36%, rgba(7,13,24,.22) 72%),
        linear-gradient(180deg, rgba(5,9,16,.05), rgba(5,9,16,.55));
    }
    .hero-inner {
      min-height: 450px;
      display: flex;
      align-items: center;
    }
    .hero-copy {
      width: min(610px, 100%);
      padding: 54px 0 60px;
      color: #fff;
    }
    .hero-copy h1 {
      margin: 0;
      color: #fff4d6;
      font-size: clamp(42px, 5.2vw, 72px);
      line-height: .98;
      font-weight: 1000;
      text-transform: uppercase;
      text-shadow: 0 6px 0 rgba(122,12,18,.6), 0 0 28px rgba(255,67,72,.28);
    }
    .hero-copy h1 span {
      display: block;
      color: #ff5a61;
    }
    .hero-copy p {
      max-width: 520px;
      margin: 24px 0 0;
      color: #e9eef8;
      font-size: 17px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }
    .hero-btn {
      min-width: 176px;
      min-height: 50px;
      padding: 0 24px;
      border-radius: 7px;
      color: #fff;
      background: linear-gradient(180deg, #ff565e, #d71920);
      box-shadow: 0 16px 36px rgba(231,48,52,.3);
    }
    .hero-btn.dark {
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(7,10,16,.68);
      box-shadow: none;
    }

    .intro {
      padding: 42px 0 26px;
      background: #fff;
    }
    .copy {
      max-width: 980px;
      margin: 0 auto;
    }
    .copy h2 {
      margin: 0 0 14px;
      color: #4b5565;
      text-align: center;
      font-size: 30px;
      line-height: 1.25;
    }
    .copy p {
      margin: 0 0 17px;
      color: #667386;
      font-size: 16px;
    }
    .copy b { color: #161d2a; }
    .copy h3 {
      margin: 28px 0 12px;
      color: #434d5e;
      font-size: 25px;
      line-height: 1.25;
    }

    .stats-strip {
      padding: 18px 0;
      color: #fff;
      background: linear-gradient(180deg, #121821, #0b0f16);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .stat-card {
      padding: 18px 20px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 10px;
      background: rgba(255,255,255,.04);
    }
    .stat-card strong {
      display: block;
      color: #ffd877;
      font-size: 26px;
      line-height: 1;
    }
    .stat-card span {
      display: block;
      margin-top: 8px;
      color: #cfd8e7;
      font-size: 13px;
    }

    .promo-panel {
      padding: 58px 0;
      color: #fff;
      background:
        radial-gradient(circle at 80% 20%, rgba(231,48,52,.3), transparent 24rem),
        linear-gradient(135deg, #111722 0%, #080b10 58%, #2b0c12 100%);
    }
    .promo-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
      align-items: center;
      gap: 32px;
    }
    .promo-copy h2 {
      margin: 0;
      color: #fff4d6;
      font-size: 38px;
      line-height: 1.14;
    }
    .promo-copy p {
      margin: 16px 0 0;
      color: #dbe4f2;
    }
    .promo-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }
    .promo-list span {
      display: block;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      background: rgba(255,255,255,.05);
      color: #f8fbff;
      font-weight: 800;
    }
    .promo-image {
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 12px;
      box-shadow: 0 24px 54px rgba(0,0,0,.34);
    }
    .promo-image img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      object-position: 68% 50%;
    }

    .steps {
      padding: 54px 0;
      background: #fff;
    }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .step-card {
      min-height: 188px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 14px 32px rgba(16,24,40,.07);
    }
    .step-no {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      color: #fff;
      background: var(--red);
      font-weight: 1000;
    }
    .step-card h3 {
      margin: 18px 0 8px;
      color: #202a3a;
      font-size: 19px;
      line-height: 1.25;
    }
    .step-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .news {
      padding: 54px 0 72px;
      background: #f5f7fb;
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 24px;
    }
    .section-head h2 {
      margin: 0;
      color: #1d2635;
      font-size: 33px;
      line-height: 1.15;
    }
    .section-head p {
      max-width: 500px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }
    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .news-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 16px 40px rgba(16,24,40,.08);
    }
    .news-card img {
      width: 100%;
      height: 174px;
      object-fit: cover;
    }
    .news-card:nth-child(1) img { object-position: 76% 50%; }
    .news-card:nth-child(2) img { object-position: 45% 60%; }
    .news-card:nth-child(3) img { object-position: 92% 48%; }
    .news-card:nth-child(4) img { object-position: 50% 54%; }
    .news-card:nth-child(5) img { object-position: 82% 48%; }
    .news-card:nth-child(6) img { object-position: 45% 50%; }
    .news-body { padding: 18px 20px 20px; }
    .tag {
      display: inline-flex;
      padding: 4px 9px;
      border-radius: 4px;
      color: #fff;
      background: var(--red);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }
    .news-card h3 {
      margin: 12px 0 9px;
      color: #202a3a;
      font-size: 20px;
      line-height: 1.32;
    }
    .news-card p {
      margin: 0 0 14px;
      color: #667386;
      font-size: 14px;
    }
    .meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid #eef2f7;
      color: #7d8794;
      font-size: 12px;
    }

    .faq {
      padding: 56px 0 68px;
      background: #fff;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .faq-item {
      padding: 22px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--red);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(16,24,40,.06);
    }
    .faq-item h3 {
      margin: 0 0 8px;
      color: #1d2635;
      font-size: 18px;
      line-height: 1.3;
    }
    .faq-item p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .footer {
      color: #cfd6e4;
      background: #151515;
      border-top: 5px solid var(--red);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr repeat(3, 1fr);
      gap: 34px;
      padding: 34px 0;
    }
    .footer h3 {
      margin: 0 0 12px;
      color: #fff;
      font-size: 15px;
      text-transform: uppercase;
    }
    .footer p,
    .footer a,
    .footer li {
      color: #cfd6e4;
      font-size: 14px;
    }
    .footer ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .copyright {
      padding: 14px 0;
      color: #9099a8;
      background: #090909;
      font-size: 13px;
    }

    @media (max-width: 860px) {
      :root { --shell: min(640px, calc(100vw - 28px)); }
      .shell {
        width: min(362px, calc(100vw - 28px));
        margin-left: 14px;
        margin-right: auto;
      }
      .topbar-inner { align-items: flex-start; flex-direction: column; padding: 14px 0; }
      .account { gap: 10px; }
      .nav { justify-content: flex-start; gap: 22px; overflow-x: auto; scrollbar-width: none; }
      .nav::-webkit-scrollbar { display: none; }
      .hero,
      .hero-inner { min-height: 610px; }
      .hero::after {
        background: linear-gradient(180deg, rgba(5,9,16,.54), rgba(5,9,16,.96) 62%);
      }
      .hero-inner { align-items: end; }
      .hero-copy { width: min(100%, 360px); padding: 280px 0 38px; }
      .hero-copy h1 { font-size: 38px; overflow-wrap: anywhere; }
      .hero-copy p { font-size: 15px; overflow-wrap: anywhere; }
      .hero-btn { width: 100%; }
      .copy h2 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        font-size: 24px;
        overflow-wrap: anywhere;
      }
      .copy p,
      .copy h3 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-wrap: anywhere;
      }
      .stats-grid,
      .visual-grid,
      .promo-inner,
      .steps-grid,
      .news-grid,
      .faq-grid,
      .footer-grid { grid-template-columns: 1fr; }
      .band-head,
      .section-head { align-items: flex-start; flex-direction: column; }
      .promo-list { grid-template-columns: 1fr; }
      .promo-image img { height: 220px; }
    }
  

    .article-hero {
      padding: 62px 0 52px;
      color: #fff;
      background:
        radial-gradient(circle at 78% 24%, rgba(255, 216, 119, .18), transparent 30%),
        linear-gradient(135deg, #070b12 0%, #121927 48%, #350812 100%);
      border-bottom: 1px solid rgba(239,68,68,.28);
    }
    .breadcrumb-line {
      margin-bottom: 18px;
      color: rgba(255,255,255,.72);
      font-size: 13px;
    }
    .article-hero h1 {
      max-width: 860px;
      margin: 0;
      font-size: 46px;
      line-height: 1.08;
      letter-spacing: 0;
    }
    .article-hero p {
      max-width: 760px;
      margin: 18px 0 0;
      color: rgba(255,255,255,.78);
      font-size: 17px;
      line-height: 1.75;
    }
    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 28px;
      padding: 54px 0 62px;
    }
    .article-card,
    .side-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    }
    .article-card { padding: 34px; }
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin-bottom: 20px;
      color: #64748b;
      font-size: 13px;
    }
    .article-main-image {
      margin: 0 0 28px;
      overflow: hidden;
      border-radius: 10px;
      background: #0f172a;
    }
    .article-main-image img {
      width: 100%;
      aspect-ratio: 16 / 7;
      object-fit: cover;
    }
    .article-body {
      color: #243041;
      font-size: 17px;
      line-height: 1.86;
    }
    .article-body h2,
    .article-body h3 {
      margin: 30px 0 12px;
      color: #0f1b2d;
      line-height: 1.22;
    }
    .article-body p { margin: 0 0 18px; }
    .article-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }
    .article-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: 32px 0 10px;
      padding: 22px;
      border-radius: 10px;
      background: linear-gradient(135deg, #101827, #2b0710);
      color: #fff;
    }
    .article-cta strong { display: block; margin-bottom: 4px; color: #ffd877; }
    .article-cta span { color: rgba(255,255,255,.75); }
    .article-actions {
      margin-top: 26px;
      padding-top: 22px;
      border-top: 1px solid #e2e8f0;
      color: #475569;
      font-size: 14px;
    }
    .article-actions ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .article-actions a { color: #b91c1c; font-weight: 800; }
    .side-stack { display: grid; gap: 18px; align-content: start; }
    .side-card { overflow: hidden; padding: 22px; }
    .side-card img {
      width: calc(100% + 44px);
      max-width: none;
      height: 178px;
      margin: -22px -22px 18px;
      object-fit: cover;
    }
    .side-card h2,
    .side-card h3 {
      margin: 0 0 10px;
      color: #111827;
      line-height: 1.2;
    }
    .side-card p,
    .side-card li {
      color: #5b6678;
      line-height: 1.7;
      font-size: 14px;
    }
    .side-card ul { margin: 0; padding-left: 18px; }
    .news-card a { color: inherit; text-decoration: none; }

    @media (max-width: 860px) {
      .article-hero { padding: 42px 0 36px; }
      .article-hero h1 { font-size: 31px; }
      .article-layout { grid-template-columns: 1fr; padding: 34px 0 46px; }
      .article-card { padding: 20px; }
      .article-main-image img { aspect-ratio: 16 / 10; }
      .article-cta { align-items: flex-start; flex-direction: column; }
      .side-card img { height: 166px; }
    }