:root {
     --brand: #8f001a;
     --brand-dark: #6c0015;
     --text: #2d2d2c;
     --text-muted: #80746c;
     --accent-blue: #636d77;
     --accent-green: #4e7358;
     --bg: #fdfdfd;
     --surface: #ffffff;
     --radius: 12px;
 }

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

 body {
     font-family: 'Satoshi', sans-serif;
     line-height: 1.6;
     color: var(--text);
     background-color: var(--bg);
     min-height: 100vh;
 }

 .hero {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     align-items: start;
    padding: 1rem 1.5rem; }
 

 .badge-container {
     display: flex;
     gap: .5rem;
     flex-wrap: wrap;
     margin-bottom: 1.5rem;
 }

 .badge {
     display: inline-block;
     padding: .5rem .9rem;
     background: var(--surface);
     border-radius: 100px;
     font-size: .85rem;
     font-weight: 600;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
     border: 1px solid rgba(0, 0, 0, .06);
 }

 .badge.secondary {
     background: var(--brand);
     color: white;
     border: none;
 }

 .hero__content h1 {
     margin: 0 0 1rem;
     font-size: clamp(2.2rem, 4vw, 3.5rem);
     line-height: 1.15;
     font-weight: 700;
     color: var(--text);
 }
.hero__content {
    margin-top: 30%;
}
 .highlight {
     color: var(--brand);
 }

 .subtitle {
     margin: 0 0 2rem;
     font-size: 1.1rem;
     line-height: 1.65;
     color: var(--text-muted);
     max-width: 50ch;
 }

 .cta {
     display: flex;
     gap: .85rem;
     flex-wrap: wrap;
     margin: 0 0 1.5rem;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .85rem 1.5rem;
     border-radius: var(--radius);
     text-decoration: none;
     font-weight: 600;
     font-size: .95rem;
     border: 2px solid transparent;
     transition: all .2s ease;
     cursor: pointer;
     font-family: 'Satoshi', sans-serif;
 }

 .btn-primary {
     background: var(--brand);
     color: white;
     box-shadow: 0 4px 15px rgba(143, 0, 26, .25);
 }

 .btn-primary:hover {
     background: var(--brand-dark);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(143, 0, 26, .35);
 }

 .btn-outline {
     background: var(--surface);
     color: var(--brand);
     border-color: var(--brand);
 }

 .btn-outline:hover {
     background: var(--brand);
     color: white;
     transform: translateY(-2px);
 }

 .btn-ghost {
     background: transparent;
     color: var(--text-muted);
     border: none;
     text-decoration: underline;
     text-underline-offset: 4px;
 }

 .btn-ghost:hover {
     color: var(--brand);
 }

 .helper {
     margin: 0;
     font-size: .9rem;
     color: var(--text-muted);
     font-family: 'General Sans', sans-serif;
 }

 .link {
     color: var(--brand);
     text-decoration: none;
     font-weight: 600;
 }

 .link:hover {
     text-decoration: underline;
 }

 .hero__visual {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 /* Illustration */
 .illustration {
     position: relative;
 }

 .search-scene {
     position: relative;
     width: 100%;
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Logo in the center */
 .logo-wrapper {
     position: relative;
     z-index: 2;
     animation: float 3s ease-in-out infinite;
     
 }

 .brand-logo {
     width: 500px;
     height: 600px;
     object-fit: contain;
     filter: drop-shadow(0 8px 24px rgba(143, 0, 26, 0.2));
     margin-bottom: 20%;
 }

 /* Floating item cards */
 .floating-items {
     position: absolute;
     inset: 0;
 }
.fa-person-walking-luggage, .fa-laptop-mobile, .fa-books{
    color: var(--brand);
}
 .item-card {
     position: absolute;
     background: var(--surface);
     padding: 1rem;
     border-radius: var(--radius);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, .06);
 }

 .item-icon {
     font-size: 2rem;
     padding: 15px 20px 10px 15px;
 }

 .item-1 {
     top: 10%;
     left: 5%;
     animation: float-delayed 3s ease-in-out infinite;
 }

 .item-2 {
     top: 50%;
     right: 10%;
     animation: float-delayed-2 3s ease-in-out infinite;
 }

 .item-3 {
     bottom: 15%;
     left: 15%;
     animation: float 3s ease-in-out infinite;
 }

 /* Sparkles */
 .sparkle {
     position: absolute;
     font-size: 1.5rem;
     animation: twinkle 2s ease-in-out infinite;
 }
 .fa-star{
    color: var(--brand);
 }

 .sparkle-1 {
     top: 20%;
     right: 20%;
     animation-delay: 0s;
 }

 .sparkle-2 {
     top: 60%;
     left: 10%;
     animation-delay: 0.7s;
 }

 .sparkle-3 {
     bottom: 25%;
     right: 15%;
     animation-delay: 1.4s;
 }

 /* Animations */
 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes float-delayed {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes float-delayed-2 {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes twinkle {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(0.8);
     }

     50% {
         opacity: 1;
         transform: scale(1.2);
     }
 }

 .quick-stats {
     display: flex;
     gap: 1rem;
     margin-top: 1rem;
 }

 .quick-stats>div {
     flex: 1;
     padding: 1rem;
     background: var(--surface);
     border-radius: var(--radius);
     text-align: center;
     font-size: .9rem;
     font-weight: 600;
     color: var(--brand);
     box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
     border: 1px solid rgba(0, 0, 0, .05);
 }

 @media (max-width: 900px) {
   
     .hero {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .hero__content h1 {
         font-size: 2rem;
     }

     .illustration {
         padding: 1rem;
     }

     .brand-logo {
         width: 150px;
         height: 150px;
     }

     .item-icon {
         font-size: 1.5rem;
     }
 }

 @media (max-width: 768px) {
     .hero__visual {
         display: none;
     }
         .hero__content {
             margin-top: 10%;
         }
                 .hero {
                     min-height: 80vh;
                     display: flex;
                     align-items: center;
                 }
                 .btn-ghost{
                    margin-left: -15px;
                 }
                 
 }