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

  :root {
      --red: #dc2626;
      --red-dark: #991b1b;
      --red-light: #fef2f2;
      --orange: #f97316;
      --text: #111827;
      --text-soft: #6b7280;
      --border: #e5e7eb;
      --white: #ffffff;
      --bg: #f8fafc;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      min-height: 100vh;
      font-family:
          Inter,
          ui-sans-serif,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;

      color: var(--text);
      background:
          radial-gradient(circle at 10% 0%, rgba(220, 38, 38, .10), transparent 30%),
          radial-gradient(circle at 90% 100%, rgba(249, 115, 22, .08), transparent 30%),
          linear-gradient(180deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
  }

  body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .035;
      background-image:
          linear-gradient(#000 1px, transparent 1px),
          linear-gradient(90deg, #000 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: linear-gradient(to bottom, #000, transparent 85%);
  }

  .page {
      min-height: 100vh;
      position: relative;
      z-index: 1;
  }

  /* =========================================
           HEADER
        ========================================== */

  .header {
      width: 100%;
      padding: 20px 24px;
  }

  .header-inner {
      max-width: 1180px;
      margin: auto;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
  }

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

  .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 14px;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #fff;

      background:
          linear-gradient(135deg,
              #ef4444,
              #b91c1c);

      box-shadow:
          0 8px 25px rgba(185, 28, 28, .20);
  }

  .brand-mark svg {
      width: 25px;
      height: 25px;
  }

  .brand-text strong {
      display: block;
      font-size: 16px;
      letter-spacing: -.2px;
  }

  .brand-text span {
      display: block;
      margin-top: 2px;

      color: var(--text-soft);
      font-size: 12px;
  }

  .network-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 8px 12px;

      border: 1px solid #fecaca;
      border-radius: 999px;

      background: rgba(254, 242, 242, .85);

      color: #991b1b;
      font-size: 12px;
      font-weight: 700;
  }

  .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;

      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
  }

  /* =========================================
           MAIN
        ========================================== */

  main {
      padding: 35px 24px 70px;
  }

  .container {
      width: 100%;
      max-width: 1050px;
      margin: auto;
  }

  /* =========================================
           HERO
        ========================================== */

  .hero {
      text-align: center;
      max-width: 850px;
      margin: 10px auto 42px;
  }

  .warning-icon {
      position: relative;

      width: 100px;
      height: 100px;

      margin: 0 auto 28px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 30px;

      background:
          linear-gradient(145deg,
              #ef4444 0%,
              #b91c1c 100%);

      box-shadow:
          0 18px 45px rgba(185, 28, 28, .25),
          inset 0 1px 0 rgba(255, 255, 255, .25);

      transform: rotate(-3deg);
  }

  .warning-icon::before {
      content: "";
      position: absolute;
      inset: -12px;

      border-radius: 38px;
      border: 1px solid rgba(239, 68, 68, .15);
  }

  .warning-icon::after {
      content: "";
      position: absolute;
      inset: -24px;

      border-radius: 44px;
      border: 1px solid rgba(239, 68, 68, .08);
  }

  .warning-icon svg {
      width: 51px;
      height: 51px;
      color: #fff;
      transform: rotate(3deg);
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      margin-bottom: 16px;
      padding: 8px 13px;

      border-radius: 999px;
      border: 1px solid #fecaca;

      background: #fff5f5;
      color: #b91c1c;

      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
  }

  .hero h1 {
      font-size: clamp(38px, 7vw, 70px);
      line-height: .97;
      letter-spacing: -.055em;
      font-weight: 900;

      color: #111827;

      margin-bottom: 22px;
  }

  .hero h1 span {
      color: var(--red);
  }

  .hero .lead {
      max-width: 760px;
      margin: auto;

      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.75;

      color: #4b5563;
  }

  .hero .lead strong {
      color: #991b1b;
  }

  .en-description {
      max-width: 720px;
      margin: 12px auto 0;

      color: #9ca3af;
      font-size: 13px;
      line-height: 1.65;
  }

  /* =========================================
           BLOCKED DOMAIN
        ========================================== */

  .blocked-panel {
      max-width: 800px;
      margin: 0 auto 36px;

      border-radius: 22px;
      overflow: hidden;

      border: 1px solid #fecaca;

      background: rgba(255, 255, 255, .85);

      box-shadow:
          0 20px 45px rgba(15, 23, 42, .06);

      backdrop-filter: blur(15px);
  }

  .blocked-top {
      padding: 14px 18px;

      display: flex;
      align-items: center;
      gap: 8px;

      border-bottom: 1px solid #fee2e2;

      background:
          linear-gradient(90deg,
              #fff1f2,
              #fff);
  }

  .browser-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fecaca;
  }

  .blocked-address {
      margin-left: 9px;
      flex: 1;

      padding: 10px 14px;

      border: 1px solid #fee2e2;
      border-radius: 10px;

      background: #fff;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #64748b;
      font-size: 13px;
      text-align: left;
  }

  .blocked-address svg {
      width: 13px;
      height: 13px;
      vertical-align: -2px;
      margin-right: 6px;
      color: #dc2626;
  }

  .blocked-content {
      padding: 22px;

      display: flex;
      align-items: center;
      gap: 15px;

      text-align: left;
  }

  .blocked-content-icon {
      flex: 0 0 auto;

      width: 45px;
      height: 45px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 13px;

      background: #fee2e2;
      color: #b91c1c;
  }

  .blocked-content-icon svg {
      width: 22px;
      height: 22px;
  }

  .blocked-content strong {
      display: block;
      font-size: 14px;
      margin-bottom: 4px;
  }

  .blocked-content p {
      color: #6b7280;
      font-size: 13px;
      line-height: 1.6;
  }

  /* =========================================
           REGULATION CARDS
        ========================================== */

  .section-label {
      margin-bottom: 17px;
      text-align: center;
  }

  .section-label span {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #94a3b8;
  }

  .regulations {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 17px;
      margin-bottom: 34px;
  }

  .regulation-card {
      position: relative;
      overflow: hidden;

      padding: 25px;

      border-radius: 22px;
      border: 1px solid #e5e7eb;

      background: rgba(255, 255, 255, .92);

      box-shadow:
          0 12px 35px rgba(15, 23, 42, .045);

      transition:
          transform .25s ease,
          border-color .25s ease,
          box-shadow .25s ease;
  }

  .regulation-card:hover {
      transform: translateY(-4px);
      border-color: #fecaca;

      box-shadow:
          0 20px 45px rgba(15, 23, 42, .08);
  }

  .regulation-card::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;

      width: 90px;
      height: 90px;

      background:
          radial-gradient(circle at top right,
              rgba(220, 38, 38, .08),
              transparent 70%);
  }

  .law-number {
      width: 42px;
      height: 42px;

      margin-bottom: 18px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 13px;

      background: #fef2f2;
      color: #b91c1c;

      font-weight: 900;
      font-size: 14px;
  }

  .regulation-card h2 {
      margin-bottom: 10px;

      font-size: 15px;
      line-height: 1.55;
      font-weight: 800;
  }

  .regulation-card .translation {
      color: #9ca3af;
      font-size: 12px;
      line-height: 1.65;
  }

  /* =========================================
           INFO BOX
        ========================================== */

  .information-box {
      padding: 28px;

      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;

      border-radius: 24px;
      border: 1px solid #fde68a;

      background:
          linear-gradient(135deg,
              rgba(255, 251, 235, .95),
              rgba(255, 255, 255, .95));

      margin-bottom: 34px;
  }

  .information-icon {
      width: 48px;
      height: 48px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 15px;

      color: #b45309;
      background: #fef3c7;
  }

  .information-icon svg {
      width: 24px;
      height: 24px;
  }

  .information-box h3 {
      font-size: 15px;
      margin-bottom: 7px;
  }

  .information-box p {
      color: #78716c;
      font-size: 13px;
      line-height: 1.75;
  }

  /* =========================================
           ACTION
        ========================================== */

  .actions {
      text-align: center;
      margin: 5px auto 48px;
  }

  .actions h2 {
      font-size: clamp(24px, 3vw, 33px);
      letter-spacing: -.03em;
      margin-bottom: 10px;
  }

  .actions>p {
      color: #64748b;
      line-height: 1.7;
      margin-bottom: 24px;
      font-size: 14px;
  }

  .buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
  }

  .btn {
      min-height: 48px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;

      padding: 12px 19px;

      border: 0;
      border-radius: 13px;

      text-decoration: none;

      font-size: 13px;
      font-weight: 800;

      transition:
          transform .2s ease,
          box-shadow .2s ease,
          background .2s ease;
  }

  .btn svg {
      width: 17px;
      height: 17px;
  }

  .btn:hover {
      transform: translateY(-2px);
  }

  .btn-primary {
      background:
          linear-gradient(135deg,
              #ef4444,
              #b91c1c);

      color: white;

      box-shadow:
          0 12px 30px rgba(185, 28, 28, .20);
  }

  .btn-primary:hover {
      box-shadow:
          0 17px 35px rgba(185, 28, 28, .28);
  }

  .btn-secondary {
      border: 1px solid #e5e7eb;

      background: white;
      color: #374151;

      box-shadow:
          0 8px 20px rgba(15, 23, 42, .05);
  }

  .btn-secondary:hover {
      background: #f9fafb;
  }

  /* =========================================
           CONTACTS
        ========================================== */

  .contact-wrapper {
      padding-top: 30px;
      border-top: 1px solid #e5e7eb;
  }

  .contact-heading {
      text-align: center;
      margin-bottom: 22px;
  }

  .contact-heading h3 {
      font-size: 17px;
      margin-bottom: 6px;
  }

  .contact-heading p {
      font-size: 13px;
      color: #9ca3af;
  }

  .contacts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
  }

  .contact-card {
      display: flex;
      align-items: center;
      gap: 14px;

      padding: 17px 18px;

      border-radius: 17px;
      border: 1px solid #e5e7eb;

      background: rgba(255, 255, 255, .75);

      transition: .2s ease;
  }

  .contact-card:hover {
      border-color: #fecaca;
      background: white;
  }

  .contact-icon {
      flex: 0 0 auto;

      width: 42px;
      height: 42px;

      border-radius: 12px;

      display: flex;
      align-items: center;
      justify-content: center;

      color: #b91c1c;
      background: #fef2f2;
  }

  .contact-icon svg {
      width: 20px;
      height: 20px;
  }

  .contact-card span {
      display: block;

      margin-bottom: 3px;

      font-size: 11px;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: .05em;

      color: #9ca3af;
  }

  .contact-card a {
      color: #111827;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;

      word-break: break-all;
  }

  .contact-card a:hover {
      color: #dc2626;
  }

  /* =========================================
           FOOTER
        ========================================== */

  footer {
      padding: 30px 24px;

      border-top: 1px solid rgba(229, 231, 235, .75);

      text-align: center;
  }

  footer p {
      color: #9ca3af;
      font-size: 11px;
      line-height: 1.7;
  }

  .footer-flag {
      display: inline-flex;
      width: 20px;
      height: 14px;

      vertical-align: -2px;

      overflow: hidden;
      border-radius: 2px;
      margin-right: 5px;

      flex-direction: column;
  }

  .footer-flag span {
      flex: 1;
  }

  .footer-flag span:first-child {
      background: #ef4444;
  }

  .footer-flag span:last-child {
      background: #fff;
      border: 1px solid #eee;
      border-top: 0;
  }

  /* =========================================
           ANIMATION
        ========================================== */

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(15px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .hero,
  .blocked-panel,
  .regulations,
  .information-box,
  .actions,
  .contact-wrapper {
      animation: fadeUp .6s ease both;
  }

  .blocked-panel {
      animation-delay: .06s;
  }

  .regulations {
      animation-delay: .12s;
  }

  .information-box {
      animation-delay: .18s;
  }

  .actions {
      animation-delay: .24s;
  }

  /* =========================================
           MOBILE
        ========================================== */

  @media (max-width: 768px) {

      .header {
          padding: 16px;
      }

      .brand-text span {
          display: none;
      }

      .network-status {
          font-size: 10px;
          padding: 7px 9px;
      }

      main {
          padding: 25px 16px 55px;
      }

      .hero {
          margin-top: 5px;
          margin-bottom: 32px;
      }

      .warning-icon {
          width: 82px;
          height: 82px;

          border-radius: 25px;

          margin-bottom: 25px;
      }

      .warning-icon svg {
          width: 42px;
          height: 42px;
      }

      .hero h1 {
          font-size: 45px;
      }

      .hero .lead {
          font-size: 15px;
      }

      .regulations,
      .contacts {
          grid-template-columns: 1fr;
      }

      .regulation-card {
          padding: 21px;
      }

      .information-box {
          grid-template-columns: 1fr;
          padding: 21px;
      }

      .buttons {
          flex-direction: column;
      }

      .btn {
          width: 100%;
      }

      .blocked-top {
          padding: 11px;
      }

      .browser-dot {
          width: 8px;
          height: 8px;
      }

      .blocked-address {
          margin-left: 3px;
          font-size: 11px;
          padding: 8px 10px;
      }

      .blocked-content {
          padding: 18px;
      }
  }

  @media (max-width: 430px) {

      .hero h1 {
          font-size: 40px;
      }

      .badge {
          font-size: 10px;
      }

      .blocked-content {
          align-items: flex-start;
      }

      .contact-card {
          align-items: flex-start;
      }
  }

  @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
      }
  }