*
{
   box-sizing: border-box;
}

html,
body
{
   margin: 0;
   padding: 0;
   width: 100%;
   min-height: 100%;
}

body
{
   background-color: #000;
   background-image: url(images/dce659269993ee5c55a0543ecd2f159e.gif);
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   font-family: Arial, sans-serif;
   color: #fff;
   overflow-x: hidden;
}

body::before
{
   content: "";
   position: fixed;
   inset: 0;
   background:
      radial-gradient(circle at top, rgba(255, 76, 76, 0.2), transparent 34%),
      linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.88));
   pointer-events: none;
   z-index: -1;
}

.main-wrapper
{
   width: 100%;
   max-width: 1180px;
   margin: 0 auto;
   padding: 28px 18px 80px;
}

.policy-card
{
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 34px;
   background: rgba(6, 9, 20, 0.78);
   border: 1px solid rgba(255,255,255,0.12);
   border-radius: 26px;
   box-shadow: 0 24px 70px rgba(0,0,0,0.55);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.logo-box
{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 24px;
}

.logo-box img
{
   width: 190px;
   max-width: 82%;
   height: auto;
}

.hero-box
{
   text-align: center;
   padding: 34px 24px;
   border-radius: 24px;
   background:
      linear-gradient(135deg, rgba(255,77,77,0.18), rgba(96,165,250,0.12)),
      rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.12);
   margin-bottom: 22px;
}

.badge
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(255,77,77,0.15);
   color: #ff7777;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   margin-bottom: 16px;
   border: 1px solid rgba(255,77,77,0.25);
}

h1
{
   margin: 0 0 18px;
   font-size: 44px;
   line-height: 1.1;
   font-weight: 900;
   letter-spacing: -1px;
   text-shadow: 0 0 20px rgba(255,77,77,0.25);
}

.hero-box p
{
   max-width: 780px;
   margin: 0 auto;
   font-size: 18px;
   line-height: 1.75;
   color: rgba(255,255,255,0.88);
}

.notice-box
{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   margin: 0 0 26px;
   padding: 16px 18px;
   border-radius: 18px;
   background: rgba(0,0,0,0.35);
   border: 1px solid rgba(255,255,255,0.1);
   color: rgba(255,255,255,0.9);
   text-align: center;
}

section
{
   margin-top: 18px;
   padding: 24px;
   border-radius: 20px;
   background: rgba(255,255,255,0.055);
   border: 1px solid rgba(255,255,255,0.09);
}

h2
{
   margin: 0 0 14px;
   font-size: 24px;
   line-height: 1.3;
   color: #ff6b6b;
}

p
{
   margin: 12px 0 0;
   font-size: 17px;
   line-height: 1.78;
   color: rgba(255,255,255,0.88);
}

ul
{
   margin: 14px 0 0;
   padding: 0;
   list-style: none;
}

li
{
   position: relative;
   margin: 10px 0;
   padding-left: 28px;
   font-size: 17px;
   line-height: 1.65;
   color: rgba(255,255,255,0.88);
}

li::before
{
   content: "";
   position: absolute;
   left: 0;
   top: 11px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff4d4d, #60a5fa);
   box-shadow: 0 0 12px rgba(255,77,77,0.6);
}

a
{
   color: #8fc5ff;
   text-decoration: none;
   font-weight: 700;
}

a:hover
{
   color: #ffffff;
   text-shadow: 0 0 12px rgba(96,165,250,0.8);
}

.contact-box
{
   margin-top: 18px;
   padding: 18px;
   border-radius: 18px;
   background: linear-gradient(135deg, rgba(255,77,77,0.18), rgba(96,165,250,0.14));
   border: 1px solid rgba(255,255,255,0.12);
   text-align: center;
}

.contact-box a
{
   font-size: 20px;
}

.footer-note
{
   margin-top: 26px;
   text-align: center;
   color: rgba(255,255,255,0.62);
   font-size: 14px;
}

@media (max-width: 768px)
{
   .main-wrapper
   {
      padding: 20px 12px 55px;
   }

   .policy-card
   {
      padding: 22px;
      border-radius: 22px;
   }

   .logo-box img
   {
      width: 160px;
   }

   .hero-box
   {
      padding: 28px 18px;
   }

   h1
   {
      font-size: 34px;
   }

   .hero-box p
   {
      font-size: 16px;
   }

   section
   {
      padding: 20px;
   }

   h2
   {
      font-size: 21px;
   }

   p,
   li
   {
      font-size: 16px;
   }
}

@media (max-width: 480px)
{
   .main-wrapper
   {
      padding: 14px 8px 40px;
   }

   .policy-card
   {
      padding: 14px;
      border-radius: 18px;
   }

   .logo-box
   {
      margin-bottom: 16px;
   }

   .logo-box img
   {
      width: 135px;
   }

   .hero-box
   {
      padding: 22px 14px;
      border-radius: 18px;
   }

   .badge
   {
      font-size: 11px;
      padding: 7px 12px;
   }

   h1
   {
      font-size: 28px;
      letter-spacing: -0.5px;
   }

   .notice-box
   {
      padding: 14px;
      font-size: 14px;
   }

   section
   {
      margin-top: 14px;
      padding: 16px;
      border-radius: 16px;
   }

   h2
   {
      font-size: 19px;
   }

   p,
   li
   {
      font-size: 15px;
      line-height: 1.7;
   }

   li
   {
      padding-left: 23px;
   }

   .contact-box a
   {
      font-size: 16px;
      word-break: break-word;
   }
}