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

 html,
 body {
     height: 100%;
     overflow-x: hidden;
     font-family: 'Inter', sans-serif;
     background: #050507;
     /* darker luxury */
     color: #e8e3d8;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* GRID BACKGROUND */
 body::before {
     content: "";
     position: fixed;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
     background-size: 50px 50px;
     z-index: 0;
 }

 /* RADIAL SPOTLIGHT */
 .spotlight {
     position: fixed;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
     pointer-events: none;
     z-index: 1;
     transform: translate(-50%, -50%);
 }

 /* MAIN LAYOUT */
 .container {
     position: relative;
     z-index: 2;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding: 120px 60px 60px 60px;
     gap: 20px;
     align-items: center;
 }


 /* LEFT SIDE */

 .left h1 {
     font-size: 52px;
     font-weight: 600;

     background: linear-gradient(90deg, #e8e3d8, #d4af37, #e8e3d8);
     background-size: 200% auto;

     background-clip: text;
     -webkit-background-clip: text;

     color: transparent;

     animation: gradientMove 6s linear infinite;
 }

 @keyframes gradientMove {
     to {
         background-position: 200% center;
     }
 }

 .left h2 {
     font-size: 16px;
     color: #bfb8aa;
     margin: 10px 0 30px;
 }

 .terminal {
     font-family: monospace;
     color: #d4af37;
     margin-bottom: 30px;
 }

 .cursor {
     display: inline-block;
     width: 8px;
     background: #d4af37;
     animation: blink 1s infinite;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 .bio {
     max-width: 500px;
     color: #a8a39a;
     line-height: 1.6;
     margin-bottom: 40px;
 }

 /* BUTTONS */

 .buttons {
     display: flex;
     gap: 20px;
 }

 .btn {
     padding: 12px 28px;
     border-radius: 40px;
     text-decoration: none;
     font-size: 13px;
     letter-spacing: 1px;
     transition: 0.3s;
 }

 .btn-primary {
     background: #d4af37;
     color: #050507;
     font-weight: 600;
 }

 .btn-outline {
     border: 1px solid rgba(212, 175, 55, 0.4);
     color: #e8e3d8;
 }

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

 /* RIGHT SIDE GLASS */

 .right {
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(212, 175, 55, 0.2);
     border-radius: 20px;
     padding: 40px;
 }

 .right h3 {
     margin-bottom: 25px;
     font-size: 18px;
 }

 .case {
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .case-title {
     font-size: 14px;
     color: #d4af37;
     margin-bottom: 5px;
 }

 .case-desc {
     font-size: 13px;
     color: #bfb8aa;
 }

 /* Fade in */
 .container {
     animation: fadeIn 1.2s ease forwards;
     opacity: 0;
 }

 @keyframes fadeIn {
     to {
         opacity: 1;
     }
 }

 /* CLIENT ACCESS */

 .client-access {
     margin-top: 30px;
     display: flex;
     gap: 10px;
 }

 .client-access input {
     padding: 12px 16px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(212, 175, 55, 0.3);
     border-radius: 30px;
     color: #e8e3d8;
     font-size: 13px;
     outline: none;
     width: 220px;
     transition: 0.3s;
 }

 .client-access input:focus {
     border-color: #d4af37;
 }

 .client-access button {
     padding: 12px 20px;
     border-radius: 30px;
     border: none;
     background: #d4af37;
     color: #050507;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s;
 }

 .client-access button:hover {
     transform: translateY(-2px);
 }

 /* LOADING OVERLAY */

 .loading-overlay {
     position: fixed;
     inset: 0;
     background: rgba(5, 5, 7, 0.95);
     backdrop-filter: blur(15px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 999;
     opacity: 0;
     pointer-events: none;
     transition: 0.4s ease;
 }

 .loading-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 /* GOLD SPINNER */

 .loader {
     width: 50px;
     height: 50px;
     border: 2px solid rgba(212, 175, 55, 0.2);
     border-top: 2px solid #d4af37;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 20px;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .loading-text {
     font-size: 13px;
     letter-spacing: 1px;
     color: #bfb8aa;
 }

 @keyframes shake {
     0% {
         transform: translateX(0);
     }

     25% {
         transform: translateX(-4px);
     }

     50% {
         transform: translateX(4px);
     }

     75% {
         transform: translateX(-4px);
     }

     100% {
         transform: translateX(0);
     }
 }

 .shake {
     animation: shake 0.4s ease;
 }

 /* TOP CENTER NAME */
 /* ===== Luxury Brand Title ===== */

 /* ===== Refined Brand Title ===== */

 .site-title {
     position: fixed;
     top: 30px;
     left: 50%;
     transform: translate(-50%, 20px);
     font-size: 64px;
     /* Larger */
     font-weight: 400;
     z-index: 3;

     opacity: 0;
     letter-spacing: -1px;

     /* Gradient */
     background: linear-gradient(90deg,
             #e8e3d8 0%,
             #d4af37 50%,
             #e8e3d8 100%);
     background-size: 200% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;

     animation: titleReveal 1.4s ease forwards;
     transition: text-shadow 0.4s ease;
 }

 /* Typography mix */
 .site-title .playfair {
     font-family: 'Playfair Display', serif;
     font-weight: 500;
 }

 .site-title .inter {
     font-family: 'Inter', sans-serif;
     font-weight: 300;
 }

 /* Smooth entrance */
 @keyframes titleReveal {
     to {
         opacity: 1;
         transform: translate(-50%, 0px);
     }
 }

 .site-title::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg,
             transparent 0%,
             rgba(212, 175, 55, 0.3) 50%,
             transparent 100%);
     background-size: 200% 100%;
     animation: shimmer 6s ease-in-out infinite;
     mix-blend-mode: overlay;
     pointer-events: none;
 }

 @keyframes shimmer {
     0% {
         background-position: -100% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 /* Typography mix */
 .site-title .playfair {
     font-family: 'Playfair Display', serif;
     font-weight: 500;
 }

 .site-title .inter {
     font-family: 'Inter', sans-serif;
     font-weight: 300;
 }

 /* Fade in */
 @keyframes titleFade {
     to {
         opacity: 1;
     }
 }

 /* Subtle floating (preserve centering) */
 @keyframes floatTitle {

     0%,
     100% {
         transform: translate(-50%, 0px);
     }

     50% {
         transform: translate(-50%, -4px);
     }
 }

 /* Tiny breathing letter spacing */
 @keyframes letterSpacingAnim {

     0%,
     100% {
         letter-spacing: 0px;
     }

     50% {
         letter-spacing: 1px;
     }
 }

 @media (max-width: 900px) {
     .container {
         grid-template-columns: 1fr;
         padding: 100px 20px 40px 20px;
     }

     .site-title {
         font-size: 40px;
     }

     .left h1 {
         font-size: 36px;
     }
 }