/* ===================================
   RESET & BASE STYLES
   =================================== */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Arial, sans-serif;
     background: #000;
 }

/* ===================================
   LAYOUT & NAVIGATION
   =================================== */
.hero-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
 }

 .navbar-custom {
     padding: 20px 0;
 }

 .logo img {
     height: 55px;
     object-fit: contain;
 }

/* ===================================
   MODAL STYLES
   =================================== */
.modal {
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     animation: liquidIn 0.4s ease;
 }

 .modal-content {
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
         inset 1px 1px 0 rgba(255, 255, 255, 0.1);
 }

 .modal-header {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: 12px 12px 15px 12px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: 20px 20px 0 0;
 }

 .modal-title {
     font-weight: 700;
     color: #ffffff;
 }

 @keyframes liquidIn {
     0% {
         opacity: 0;
         backdrop-filter: blur(0px);
     }
     100% {
         opacity: 1;
         backdrop-filter: blur(5px);
     }
 }

/* ===================================
   FORM STYLES
   =================================== */
.form-control,
 .form-select {
     height: 50px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     color: #ffffff;
     transition: all 0.3s ease;
 }

 .form-control::placeholder {
     color: rgba(255, 255, 255, 0.7);
 }

 .form-select {
     color-scheme: dark;
     appearance: none;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 12px center;
     background-size: 20px;
     padding-right: 40px;
 }

 .form-control:focus,
 .form-select:focus {
     background: rgba(255, 255, 255, 0.12);
     border-color: rgba(255, 43, 43, 0.4);
     box-shadow: 0 0 20px rgba(255, 43, 43, 0.2),
         inset 0 1px 2px rgba(255, 255, 255, 0.1);
     color: #ffffff;
 }

 option {
     background: #1a1a1a;
     color: #ffffff;
     padding: 8px 12px;
 }

 option:hover {
     background: #ff2b2b;
     color: #ffffff;
 }

 option:checked {
     background: linear-gradient(#ff2b2b, #ff2b2b);
     color: #ffffff;
 }

/* ===================================
   BUTTON STYLES
   =================================== */
.hk-btn {
     position: relative;
     overflow: hidden;
     background: #ff2b2b;
     border: 2px solid #000;
     outline: 2px solid #ff2b2b !important;
     border-radius: 8px;
     color: #fff;
     font-size: 18px;
     padding: 12px 22px;
     cursor: pointer;
     transition: 0.35s ease;
     z-index: 1;
     letter-spacing: 1px;
     animation: pulseGlow 2s infinite;
 }

 .hk-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -120%;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, 0.35),
             transparent);
     transition: 0.6s;
     z-index: -1;
 }

 .hk-btn:hover::before {
     left: 120%;
 }

 .hk-btn:focus,
 .hk-btn:hover {
     transform: translateY(-4px);
     box-shadow:
         0 0 12px rgba(255, 43, 43, 0.6),
         0 0 24px rgba(255, 123, 0, 0.4);
     background: #ff1a1a;
 }

 .hk-btn:active {
     transform: scale(0.96);
 }

 @keyframes pulseGlow {
     0% {
         box-shadow: 0 0 0 rgba(255, 43, 43, 0.0);
     }
     50% {
         box-shadow: 0 0 18px rgba(255, 43, 43, 0.55);
     }
     100% {
         box-shadow: 0 0 0 rgba(255, 43, 43, 0.0);
     }
 }

/* ===================================
   HERO SECTION
   =================================== */
.hero-section {
     min-height: 100dvh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px 20px;
     position: relative;
     overflow: hidden;
 }

 .hero-content {
     margin: auto;
 }

 .hero-logo {
     max-width: 650px;
     width: 100%;
     object-fit: contain;
 }

/* ===================================
   HERO TEXT CONTENT
   =================================== */
.top-title {
     color: #ffffff;
     font-size: 22px;
     font-weight: 700;
     letter-spacing: 4px;
     margin-bottom: 100px;
     text-transform: uppercase;
 }

 .logo-area {
     margin: 0 auto 60px auto;
     text-align: center;
     width: 650px;
 }

 .from-text {
     color: #ffffff;
     font-size: 24px;
     letter-spacing: 3px;
     margin-bottom: 0px;
     font-weight: 700;
     text-align: left;
     margin-left: 35px;
     line-height: 1;
 }

 .from-text span {
     color: #ff2b2b;
     font-weight: 700;
     font-size: 30px;
 }

 .hero-description {
     color: #ffffff;
     font-size: 22px;
     line-height: 2;
     letter-spacing: 2px;
     max-width: 1200px;
     margin: auto;
     font-weight: 700;
     text-transform: uppercase;
 }

 .production-text {
     display: grid;
     align-items: center;
     justify-content: center;
     grid-template-columns: 1fr auto 1fr;
     margin-inline: 23px;
     width: 100%;
 }

 .production-text span {
     color: #ffffff;
     font-size: 24px;
     font-weight: 700;
     letter-spacing: 14px;
     text-transform: uppercase;
 }

 .production-text .divider {
     width: 2px;
     height: 28px;
     background: #ff1e1e;
     margin: 0 10px;
 }

/* ===================================
   MEDIA QUERIES
   =================================== */

 @media(max-width:991px) {
     .top-title {
         font-size: 18px;
         line-height: 1.8;
         margin-bottom: 50px;
     }

     .from-text {
         font-size: 20px;
     }

     .hero-description {
         font-size: 18px;
         line-height: 1.8;
     }
 }

 @media(max-width:767px) {
     .logo-area {
         width: 100%;
     }

     .top-title {
         font-size: 14px;
         letter-spacing: 2px;
     }

     .from-text {
         font-size: 16px;
         margin-left: 22px;
     }

     .from-text span {
         font-size: 24px;
     }

     .hero-description {
         font-size: 14px;
         letter-spacing: 1px;
         line-height: 1.8;
     }

     .production-text {
         margin-inline: 2px;
     }

     .production-text span {
         font-size: 18px;
         letter-spacing: 10px;
     }

     .production-text .divider {
         height: 20px;
     }
 }

 @media(max-width:480px) {
     .production-text span {
         font-size: 13px;
         letter-spacing: 6px;
     }
 }