@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
   *, *::before, *::after  {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   
}
 :root  {
   --orange: #FF8A00;
   --orange-dark: #E67C00;
   --orange-10: rgba(255,138,0,0.1);
   --orange-20: rgba(255,138,0,0.2);
   --orange-30: rgba(255,138,0,0.3);
   --orange-50: rgba(255,138,0,0.5);
   --black: #000;
   --zinc-950: #09090b;
   --zinc-900: #18181b;
   --white-5: rgba(255,255,255,0.05);
   --white-10: rgba(255,255,255,0.1);
   --white-20: rgba(255,255,255,0.2);
   --gray-300: #d1d5db;
   --gray-400: #9ca3af;
   --gray-500: #6b7280;
   --gray-600: #4b5563;
   --emerald: #10b981;
   --container: 1280px;
   
}
 html  {
   scroll-behavior: smooth;
   
}
 body  {
   font-family: 'Inter', sans-serif;
   background: #000;
   color: #fff;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   
}
 a  {
   text-decoration: none;
   color: inherit;
   
}
 img  {
   max-width: 100%;
   
}
 button  {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit;
   
}
 ul  {
   list-style: none;
   
}
 .container  {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 1rem;
   
}
 @media(min-width:640px) {
   .container  {
   padding: 0 1.5rem;
   
}
 
}
 @media(min-width:1024px) {
   .container  {
   padding: 0 2rem;
   
}
 
}
 .navbar  {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;
   transition: all 0.3s;
   padding: 1.5rem 0;
   
}
 @media(max-width:767px) {
   .navbar  {
   padding: 0.75rem 0;
   
}
 
}
 .navbar.scrolled  {
   background: #000;
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--white-10);
   padding: 1rem 0;
   
}
 .navbar-inner  {
   display: flex;
   align-items: center;
   justify-content: space-between;
   
}
 .navbar-logo { display:flex; align-items:center; height:50px !important; margin:0; padding:0; overflow:hidden; }
 .navbar-logo img { height:100% !important; width:auto !important; display:block; object-fit:contain; }
 
 .navbar-links  {
   display: none;
   align-items: center;
   gap: 2rem;
   
}
 @media(min-width:768px) {
   .navbar-links  {
   display: flex;
   
}
 
}
 .navbar-links a  {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--gray-300);
   transition: color 0.2s;
   
}
 .navbar-links a:hover  {
   color: #fff;
   
}
 .navbar-actions  {
   display: none;
   align-items: center;
   gap: 1rem;
   padding-left: 2rem;
   border-left: 1px solid var(--white-10);
   
}
 @media(min-width:768px) {
   .navbar-actions  {
   display: flex;
   
}
 
}
 .btn-login  {
   padding: 0.625rem 1.25rem;
   border: 2px solid var(--white-20);
   color: #fff;
   font-size: 0.875rem;
   font-weight: 700;
   border-radius: 0.75rem;
   transition: all 0.2s;
   backdrop-filter: blur(8px);
   
}
 .btn-login:hover  {
   background: var(--white-10);
   
}
 .btn-getstarted  {
   padding: 0.625rem 1.25rem;
   background: var(--orange);
   color: #fff;
   font-size: 0.875rem;
   font-weight: 900;
   border-radius: 0.75rem;
   transition: background 0.2s;
   box-shadow: 0 5px 20px rgba(255,138,0,0.2);
   
}
 .btn-getstarted:hover  {
   background: var(--orange-dark);
   
}
 .hamburger  {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 0.5rem;
   
}
 @media(min-width:768px) {
   .hamburger  {
   display: none;
   
}
 
}
 .hamburger span  {
   display: block;
   width: 24px;
   height: 2px;
   background: #fff;
   transition: all 0.3s;
   
}
 .hamburger.open span:nth-child(1)  {
   transform: rotate(45deg) translate(5px,5px);
   
}
 .hamburger.open span:nth-child(2)  {
   opacity: 0;
   
}
 .hamburger.open span:nth-child(3)  {
   transform: rotate(-45deg) translate(5px,-5px);
   
}
 .mobile-menu  {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: rgba(0,0,0,0.95);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--white-10);
   padding: 1rem;
   
}
 .mobile-menu.open  {
   display: block;
   
}
 .mobile-menu a  {
   display: block;
   padding: 0.75rem 0;
   font-size: 1.125rem;
   font-weight: 500;
   color: var(--gray-300);
   
}
 .mobile-menu a:hover  {
   color: #fff;
   
}
 .mobile-menu-actions  {
   padding-top: 1rem;
   border-top: 1px solid var(--white-10);
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-top: 0.5rem;
   
}
 .mobile-menu-actions .btn-login, .mobile-menu-actions .btn-getstarted  {
   display: block;
   text-align: center;
   padding: 0.75rem;
   border-radius: 0.5rem;
   
}
 .hero  {
   position: relative;
   padding: 6rem 0 3rem;
   min-height: 70vh;
   display: flex;
   align-items: center;
   background: #000;
   overflow: hidden;
   
}
 @media(min-width:1024px) {
   .hero  {
   padding: 8rem 0 5rem;
   
}
 
}
 .hero-bg  {
   position: absolute;
   inset: 0;
   z-index: 0;
   opacity: 0.6;
   background-image: url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=2070&auto=format&fit=crop');
   background-size: cover;
   background-position: 60% center;
   background-repeat: no-repeat;
   
}
 .hero-bg::after  {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.7) 100%);
   
}
 .hero::before  {
   content: '';
   position: absolute;
   top: -10%;
   right: -10%;
   width: 50%;
   height: 50%;
   background: radial-gradient(circle, rgba(255,138,0,0.15) 0%, transparent 70%);
   filter: blur(80px);
   z-index: 1;
   pointer-events: none;
   
}
 .hero-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2.5rem;
   align-items: center;
   position: relative;
   z-index: 10;
   text-align: center;
   
}
 @media(min-width:1024px) {
   .hero-grid  {
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   max-width: 1280px;
   margin: 0 auto;
   text-align: left;
   
}
 
}
 .hero-badge  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
   background: var(--orange-10);
   border: 1px solid rgba(255,138,0,0.2);
   margin-bottom: 1.5rem;
   
}
 .hero-badge-dot  {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--orange);
   animation: pulse 2s infinite;
   
}
 .hero-badge span  {
   color: var(--orange);
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
}
 .hero h1  {
   font-size: 3.5rem;
   font-weight: 900;
   line-height: 0.85;
   letter-spacing: -0.05em;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
   
}
 @media(min-width:768px) {
   .hero h1  {
   font-size: 5.5rem;
   
}
 
}
 .hero h1 .accent  {
   color: var(--orange);
   text-shadow: 0 0 30px rgba(255,138,0,0.4);
   
}
 .hero-desc  {
   font-size: 1.25rem;
   color: var(--gray-300);
   margin-bottom: 2.5rem;
   max-width: 42rem;
   line-height: 1.5;
   font-weight: 600;
   opacity: 0.95;
   
}
 @media(max-width:1023px) {
   .hero-desc  {
   margin-left: auto;
   margin-right: auto;
   
}
 
}
 .hero-desc .accent  {
   color: var(--orange);
   font-weight: 800;
   
}
 .hero-cta  {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: center;
   justify-content: center;
   
}
 @media(min-width:1024px) {
   .hero-cta  {
   justify-content: flex-start;
   
}
 
}
 .hero-features-strip  {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 2rem;
   justify-content: center;
   
}
 @media(min-width:1024px) {
   .hero-features-strip  {
   justify-content: flex-start;
   
}
 
}
 .hero-trust-line  {
   margin-top: 1.5rem;
   font-size: 0.75rem;
   color: #6b7280;
   font-weight: 600;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   justify-content: center;
   
}
 @media(min-width:1024px) {
   .hero-trust-line  {
   justify-content: flex-start;
   
}
 
}
 .btn-primary  {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   padding: 1rem 2rem;
   background: var(--orange);
   color: #fff;
   border-radius: 1rem;
   font-weight: 800;
   font-size: 1.125rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   text-decoration: none;
   border: none;
   cursor: pointer;
   white-space: nowrap;
   width: auto;
   
}
 .btn-primary:hover  {
   transform: translateY(-4px);
   
}
 .btn-primary:active  {
   transform: translateY(0) scale(0.98);
   
}
 .btn-secondary  {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   padding: 0.75rem 1.5rem;
   background: rgba(255,255,255,0.05);
   border: 2px solid var(--white-20);
   color: #fff;
   font-weight: 700;
   font-size: 1.125rem;
   border-radius: 0.75rem;
   backdrop-filter: blur(8px);
   transition: all 0.2s;
   width: auto;
   
}
 .btn-secondary:hover  {
   background: rgba(255,255,255,0.1);
   transform: translateY(-3px);
   
}
 .hero-card-wrap  {
   display: flex;
   justify-content: center;
   position: relative;
   margin-top: 1rem;
   
}
 @media(min-width:1024px) {
   .hero-card-wrap  {
   justify-content: flex-end;
   margin-top: 0;
   
}
 
}
 .hero-card  {
   position: relative;
   width: 100%;
   max-width: 320px;
   aspect-ratio: 4/5.2;
   background: rgba(255,255,255,0.1);
   backdrop-filter: blur(20px);
   border-radius: 40px;
   border: 1px solid var(--white-20);
   padding: 1.5rem;
   box-shadow: 0 30px 60px rgba(0,0,0,0.5);
   display: flex;
   flex-direction: column;
   animation: cardFloat 6s ease-in-out infinite;
   transform: rotate(0deg);
   
}
 @keyframes cardFloat  {
   0%,100% {
  transform:translateY(0)
}
 50% {
  transform:translateY(-10px)
}
 
}
 .hero-card-art  {
   border-radius: 24px;
   overflow: hidden;
   margin-bottom: 1.5rem;
   aspect-ratio: 1;
   box-shadow: 0 10px 30px rgba(0,0,0,0.5);
   
}
 .hero-card-art img  {
   width: 100%;
   height: 100%;
   object-fit: cover;
   
}
 .hero-card-info  {
   text-align: center;
   margin-bottom: 1.5rem;
   
}
 .hero-card-info h3  {
   font-size: 1.25rem;
   font-weight: 900;
   margin-bottom: 0.25rem;
   
}
 .hero-card-info p  {
   font-size: 0.875rem;
   color: var(--gray-400);
   font-weight: 700;
   opacity: 0.7;
   
}
 .hero-card-controls  {
   margin-top: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2rem;
   
}
 .ctrl-btn  {
   color: rgba(255,255,255,0.4);
   transition: opacity 0.2s;
   
}
 .ctrl-btn:hover  {
   color: #fff;
   
}
 .play-btn  {
   width: 48px;
   height: 48px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   transition: transform 0.2s;
   
}
 .play-btn:hover  {
   transform: scale(1.1);
   
}
 .float-badge  {
   position: absolute;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(0,0,0,0.4);
   
}
 .float-badge img  {
   object-fit: contain;
   
}
 .fb-spotify  {
   top: -12px;
   right: -12px;
   width: 48px;
   height: 48px;
   border: 4px solid #1A113C;
   z-index: 30;
   
}
 .fb-spotify img  {
   width: 28px;
   height: 28px;
   
}
 .fb-apple  {
   top: 15%;
   left: -32px;
   width: 64px;
   height: 64px;
   border-radius: 20px;
   padding: 12px;
   border: 1px solid rgba(255,255,255,0.4);
   animation: floatA 4s ease-in-out infinite;
   
}
 .fb-amazon  {
   top: 50%;
   left: -24px;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   padding: 8px;
   animation: floatB 5s ease-in-out infinite;
   
}
 .fb-youtube  {
   bottom: 25%;
   right: -32px;
   width: 56px;
   height: 56px;
   border: 4px solid #1A113C;
   padding: 12px;
   animation: floatC 3s ease-in-out infinite;
   
}
 .fb-tiktok  {
   bottom: -16px;
   left: 25%;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   padding: 8px;
   border: 1px solid rgba(255,255,255,0.3);
   animation: floatD 4s ease-in-out infinite 1s;
   
}
 @keyframes floatA  {
   0%,100% {
  transform:translateY(0) rotate(-10deg)
}
 50% {
  transform:translateY(-8px) rotate(-5deg)
}
 
}
 @keyframes floatB  {
   0%,100% {
  transform:translateY(0) scale(1)
}
 50% {
  transform:translateY(8px) scale(1.05)
}
 
}
 @keyframes floatC  {
   0%,100% {
  transform:scale(1) rotate(0deg)
}
 50% {
  transform:scale(1.1) rotate(10deg)
}
 
}
 @keyframes floatD  {
   0%,100% {
  transform:translateY(0) rotate(12deg)
}
 50% {
  transform:translateY(-6px) rotate(18deg)
}
 
}
 .hero-glow  {
   position: absolute;
   inset: 0;
   pointer-events: none;
   filter: blur(100px);
   z-index: -1;
   
}
 .hero-glow div:first-child  {
   position: absolute;
   top: 25%;
   right: -80px;
   width: 320px;
   height: 320px;
   background: rgba(255,138,0,0.2);
   border-radius: 50%;
   animation: pulse 3s infinite;
   
}
 .hero-glow div:last-child  {
   position: absolute;
   bottom: 25%;
   right: 0;
   width: 400px;
   height: 400px;
   background: rgba(255,138,0,0.1);
   border-radius: 50%;
   animation: pulse 3s infinite 0.7s;
   
}
 .trust  {
   padding: 5rem 0;
   background: #000;
   border-top: 1px solid rgba(255,255,255,0.05);
   border-bottom: 1px solid rgba(255,255,255,0.05);
   position: relative;
   overflow: hidden;
   
}
 .stats-grid  {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   margin-bottom: 6rem;
   
}
 @media(min-width:1024px) {
   .stats-grid  {
   grid-template-columns: repeat(4,1fr);
   
}
 
}
 .stat-card  {
   text-align: center;
   padding: 1.5rem;
   border-radius: 1.5rem;
   background: rgba(255,255,255,0.02);
   border: 1px solid rgba(255,255,255,0.05);
   transition: all 0.5s;
   
}
 .stat-card:hover  {
   background: rgba(255,255,255,0.05);
   
}
 .stat-icon  {
   width: 56px;
   height: 56px;
   background: var(--orange-10);
   border-radius: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   transition: transform 0.3s;
   
}
 .stat-card:hover .stat-icon  {
   transform: scale(1.1);
   
}
 .stat-icon svg  {
   color: var(--orange);
   width: 28px;
   height: 28px;
   
}
 .stat-value  {
   font-size: 2.5rem;
   font-weight: 900;
   letter-spacing: -0.05em;
   margin-bottom: 0.5rem;
   
}
 .stat-label  {
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.2em;
   
}
 .marquee-section  {
   position: relative;
   
}
 .marquee-block  {
   position: relative;
   margin-bottom: 4rem;
   
}
 .marquee-fade  {
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000, transparent, #000);
   z-index: 10;
   pointer-events: none;
   
}
 .marquee-label  {
   text-align: center;
   font-size: 0.625rem;
   font-weight: 700;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.4em;
   margin-bottom: 2.5rem;
   opacity: 0.7;
   
}
 .marquee-track  {
   overflow: hidden;
   white-space: nowrap;
   
}
 .marquee-inner  {
   display: inline-flex;
   gap: 4rem;
   align-items: center;
   padding: 1rem 0;
   animation: marquee 30s linear infinite;
   
}
 .marquee-inner.reverse  {
   animation: marquee-reverse 25s linear infinite;
   
}
 .platform-item  {
   flex-shrink: 0;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   padding: 0 2rem;
   transition: transform 0.3s;
   
}
 .platform-item:hover  {
   transform: scale(1.1);
   
}
 .platform-item img  {
   max-width: 96px;
   height: 40px;
   object-fit: contain;
   
}
 .platform-name  {
   font-size: 0.625rem;
   font-weight: 700;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
}
 .platform-item:hover .platform-name  {
   color: var(--orange);
   
}
 @keyframes marquee  {
   0% {
  transform:translateX(0)
}
 100% {
  transform:translateX(-50%)
}
 
}
 @keyframes marquee-reverse  {
   0% {
  transform:translateX(-50%)
}
 100% {
  transform:translateX(0)
}
 
}
 .section  {
   padding: 6rem 0;
   
}
 .section-dark  {
   background: #000;
   
}
 .section-zinc  {
   background: var(--zinc-950);
   
}
 .section-header  {
   text-align: center;
   margin-bottom: 4rem;
   
}
 .section-header h2  {
   font-size: 2rem;
   font-weight: 900;
   margin-bottom: 1rem;
   
}
 @media(min-width:768px) {
   .section-header h2  {
   font-size: 3rem;
   
}
 
}
 .section-header p  {
   color: var(--gray-400);
   max-width: 36rem;
   margin: 0 auto;
   font-size: 1.125rem;
   font-weight: 700;
   
}
 .accent  {
   color: var(--orange);
   
}
 .steps-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
   max-width: 64rem;
   margin: 0 auto;
   
}
 @media(min-width:768px) {
   .steps-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .step-card  {
   background: rgba(255,255,255,0.05);
   border: 1px solid var(--white-10);
   border-radius: 2rem;
   padding: 2rem;
   transition: all 0.3s;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(4px);
   
}
 .step-card:hover  {
   background: rgba(255,255,255,0.1);
   transform: translateY(-8px);
   
}
 .step-icon  {
   width: 80px;
   height: 80px;
   border-radius: 1rem;
   background: var(--orange-10);
   border: 1px solid rgba(255,138,0,0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   transition: background 0.5s;
   
}
 .step-card:hover .step-icon  {
   background: var(--orange);
   
}
 .step-icon svg  {
   width: 40px;
   height: 40px;
   color: var(--orange);
   transition: color 0.5s;
   
}
 .step-card:hover .step-icon svg  {
   color: #fff;
   
}
 .step-num  {
   font-size: 3rem;
   font-weight: 700;
   color: rgba(255,255,255,0.05);
   position: absolute;
   top: 1rem;
   right: 1rem;
   font-variant-numeric: tabular-nums;
   
}
 .step-card h3  {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
   
}
 .step-card p  {
   color: var(--gray-400);
   font-size: 0.875rem;
   line-height: 1.625;
   
}
 .services-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   
}
 @media(min-width:768px) {
   .services-grid  {
   grid-template-columns: repeat(2,1fr);
   
}
 
}
 @media(min-width:1024px) {
   .services-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .service-card  {
   padding: 2.5rem;
   border-radius: 2rem;
   background: rgba(255,255,255,0.03);
   border: 1px solid rgba(255,255,255,0.08);
   transition: all 0.5s;
   display: flex;
   flex-direction: column;
   height: 100%;
   
}
 .service-card:hover  {
   border-color: rgba(255,138,0,0.5);
   background: rgba(255,255,255,0.06);
   
}
 .service-icon  {
   width: 64px;
   height: 64px;
   background: linear-gradient(135deg, var(--orange), #ea580c);
   border-radius: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
   transition: transform 0.3s;
   box-shadow: 0 20px 40px rgba(120,53,15,0.2);
   
}
 .service-card:hover .service-icon  {
   transform: scale(1.1);
   
}
 .service-icon svg  {
   width: 32px;
   height: 32px;
   color: #fff;
   
}
 .service-card h3  {
   font-size: 1.5rem;
   font-weight: 900;
   margin-bottom: 1rem;
   transition: color 0.3s;
   
}
 .service-card:hover h3  {
   color: var(--orange);
   
}
 .service-card p  {
   color: var(--gray-400);
   line-height: 1.625;
   margin-bottom: 2rem;
   flex-grow: 1;
   font-weight: 500;
   
}
 .service-features  {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   
}
 .service-feature  {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.875rem;
   font-weight: 700;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   
}
 .feature-dot  {
   width: 8px;
   height: 8px;
   background: var(--orange);
   border-radius: 50%;
   flex-shrink: 0;
   
}
 .features-layout  {
   display: flex;
   flex-direction: column;
   gap: 5rem;
   align-items: center;
   
}
 @media(min-width:1024px) {
   .features-layout  {
   flex-direction: row;
   
}
 
}
 .features-left  {
   flex: 1;
   
}
 .features-right  {
   flex: 1;
   
}
 .features-left h2  {
   font-size: 2.5rem;
   font-weight: 900;
   line-height: 0.9;
   letter-spacing: -0.05em;
   margin-bottom: 2.5rem;
   
}
 @media(min-width:768px) {
   .features-left h2  {
   font-size: 3.5rem;
   
}
 
}
 .feature-item  {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 2.5rem;
   
}
 .feature-item-icon  {
   margin-top: 4px;
   background: var(--orange-10);
   padding: 0.75rem;
   border-radius: 1rem;
   height: fit-content;
   border: 1px solid rgba(255,138,0,0.2);
   flex-shrink: 0;
   
}
 .feature-item-icon svg  {
   width: 28px;
   height: 28px;
   color: var(--orange);
   
}
 .feature-item h3  {
   font-size: 1.5rem;
   font-weight: 900;
   margin-bottom: 0.5rem;
   
}
 .feature-item p  {
   font-size: 1.125rem;
   color: var(--gray-400);
   font-weight: 500;
   line-height: 1.625;
   
}
 .analytics-card  {
   border-radius: 3rem;
   border: 1px solid var(--white-20);
   background: rgba(255,255,255,0.03);
   backdrop-filter: blur(32px);
   padding: 2.5rem;
   box-shadow: 0 40px 80px rgba(0,0,0,0.5);
   position: relative;
   overflow: hidden;
   
}
 .analytics-card::before  {
   content:'';
   position:absolute;
   top:-40px;
   right:-40px;
   width:160px;
   height:160px;
   background:var(--orange-20);
   border-radius:50%;
   filter:blur(48px);
   animation:pulse 3s infinite;
   
}
 .analytics-card::after  {
   content:'';
   position:absolute;
   bottom:-40px;
   left:-40px;
   width:160px;
   height:160px;
   background:var(--orange-10);
   border-radius:50%;
   filter:blur(48px);
   animation:pulse 3s infinite 1s;
   
}
 .revenue-card  {
   background: rgba(0,0,0,0.6);
   border: 1px solid var(--white-10);
   border-radius: 1.5rem;
   padding: 2rem;
   margin-bottom: 2rem;
   
}
 .revenue-header  {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   
}
 .revenue-label  {
   font-size: 0.875rem;
   font-weight: 700;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
}
 .revenue-badge  {
   font-size: 0.75rem;
   font-weight: 900;
   color: #10b981;
   background: rgba(16,185,129,0.1);
   padding: 0.25rem 0.5rem;
   border-radius: 0.5rem;
   
}
 .revenue-amount  {
   font-size: 2.5rem;
   font-weight: 900;
   letter-spacing: -0.05em;
   
}
 .bar-chart  {
   height: 12rem;
   border-radius: 1.5rem;
   background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent);
   border: 1px solid var(--white-10);
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding: 1.5rem;
   gap: 0.5rem;
   margin-bottom: 1rem;
   
}
 .bar  {
   flex: 1;
   background: rgba(255,138,0,0.4);
   border-radius: 0.5rem 0.5rem 0 0;
   transition: background 0.3s;
   
}
 .bar:hover  {
   background: var(--orange);
   
}
 .store-status  {
   display: flex;
   gap: 1rem;
   
}
 .store-item  {
   flex: 1;
   background: rgba(255,255,255,0.05);
   border: 1px solid var(--white-10);
   border-radius: 1.5rem;
   padding: 1.25rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   transition: background 0.2s;
   
}
 .store-item:hover  {
   background: rgba(255,255,255,0.1);
   
}
 .live-dot  {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #10b981;
   box-shadow: 0 0 10px rgba(16,185,129,0.5);
   animation: pulse 2s infinite;
   flex-shrink: 0;
   
}
 .store-name  {
   font-weight: 900;
   font-size: 1rem;
   
}
 .store-status-text  {
   font-size: 0.75rem;
   font-weight: 700;
   color: #10b981;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
}
 .spotlight-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   
}
 @media(min-width:768px) {
   .spotlight-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .spotlight-card  {
   position: relative;
   aspect-ratio: 4/5;
   border-radius: 2rem;
   overflow: hidden;
   background: #000;
   border: 1px solid var(--white-1);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 20px 40px rgba(0,0,0,0.4);
   
}
 .spotlight-card:hover  {
   transform: translateY(-10px) scale(1.02);
   border-color: rgba(255,138,0,0.5);
   box-shadow: 0 40px 80px rgba(255,138,0,0.15);
   
}
 .spotlight-card img  {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.7;
   transition: all 0.6s ease;
   filter: saturate(1.1);
   
}
 .spotlight-card:hover img  {
   opacity: 0.9;
   transform: scale(1.08);
   filter: saturate(1.5);
   
}
 .spotlight-overlay  {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, transparent 100% );
   padding: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   transition: background 0.4s;
   
}
 .spotlight-card:hover .spotlight-overlay  {
   background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 40%, transparent 100% );
   
}
 .spotlight-streams  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.4rem 1rem;
   border-radius: 9999px;
   background: rgba(255,255,255,0.05);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,0.1);
   margin-bottom: 1rem;
   width: fit-content;
   transition: all 0.3s;
   
}
 .spotlight-card:hover .spotlight-streams  {
   background: rgba(255,138,0,0.15);
   border-color: rgba(255,138,0,0.3);
   
}
 .spotlight-streams-dot  {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--orange);
   box-shadow: 0 0 10px var(--orange);
   
}
 .spotlight-streams span  {
   font-size: 0.7rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: #fff;
   
}
 .spotlight-card h3  {
   font-size: 1.75rem;
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 0.25rem;
   letter-spacing: -0.02em;
   
}
 .spotlight-card p  {
   color: var(--gray-400);
   font-weight: 600;
   font-size: 0.9375rem;
   margin-bottom: 1.5rem;
   
}
 .spotlight-play-wrap  {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   
}
 .spotlight-play  {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 8px 24px rgba(0,0,0,0.3);
   
}
 .spotlight-card:hover .spotlight-play  {
   background: var(--orange);
   transform: scale(1.1) rotate(5deg);
   box-shadow: 0 12px 32px rgba(255,138,0,0.4);
   
}
 .spotlight-play svg  {
   color: #000;
   width: 22px;
   height: 22px;
   transition: all 0.3s;
   
}
 .spotlight-card:hover .spotlight-play svg  {
   color: #fff;
   transform: scale(1.1);
   
}
 .spotlight-badge  {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   padding: 0.5rem 1rem;
   background: rgba(0,0,0,0.5);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 1rem;
   font-size: 0.625rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--orange);
   z-index: 10;
   transition: all 0.3s;
   
}
 .spotlight-card:hover .spotlight-badge  {
   background: var(--orange);
   color: #fff;
   border-color: transparent;
   
}
 .comparison-table-wrap  {
   overflow-x: auto;
   border-radius: 2rem;
   border: 1px solid var(--white-10);
   background: rgba(255,255,255,0.05);
   backdrop-filter: blur(20px);
   
}
 .comparison-table  {
   width: 100%;
   border-collapse: collapse;
   text-align: left;
   
}
 .comparison-table th  {
   padding: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   
}
 .comparison-table th:first-child  {
   font-size: 0.75rem;
   color: var(--gray-400);
   
}
 .comparison-table th.col-ours  {
   font-size: 0.875rem;
   color: var(--orange);
   font-weight: 900;
   background: var(--orange-10);
   text-align: center;
   
}
 .comparison-table th.col-others  {
   font-size: 0.75rem;
   color: var(--gray-500);
   text-align: center;
   
}
 .comparison-table tr  {
   border-bottom: 1px solid rgba(255,255,255,0.05);
   
}
 .comparison-table tr:last-child  {
   border-bottom: none;
   
}
 .comparison-table tr:hover  {
   background: rgba(255,255,255,0.02);
   
}
 .comparison-table td  {
   padding: 1.5rem;
   color: #fff;
   font-weight: 500;
   
}
 .td-ours  {
   background: var(--orange-10);
   text-align: center;
   
}
 .td-others  {
   text-align: center;
   color: var(--gray-500);
   font-weight: 500;
   
}
 .check-badge  {
   display: inline-flex;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--orange);
   align-items: center;
   justify-content: center;
   
}
 .check-badge svg  {
   width: 14px;
   height: 14px;
   color: #fff;
   
}
 .orange-text  {
   color: var(--orange);
   font-weight: 900;
   
}
 .testimonials-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   
}
 @media(min-width:768px) {
   .testimonials-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .testimonial-card  {
   background: rgba(0,0,0,0.4);
   border: 1px solid var(--white-10);
   border-radius: 1rem;
   padding: 2rem;
   transition: background 0.3s;
   position: relative;
   
}
 .testimonial-card:hover  {
   background: rgba(255,255,255,0.05);
   
}
 .testimonial-quote-icon  {
   position: absolute;
   top: 2rem;
   right: 2rem;
   color: rgba(255,255,255,0.05);
   transition: color 0.3s;
   
}
 .testimonial-card:hover .testimonial-quote-icon  {
   color: rgba(255,138,0,0.1);
   
}
 .testimonial-text  {
   color: var(--gray-300);
   line-height: 1.625;
   font-style: italic;
   margin-bottom: 2rem;
   position: relative;
   z-index: 1;
   
}
 .testimonial-author  {
   display: flex;
   align-items: center;
   gap: 1rem;
   
}
 .testimonial-avatar  {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--orange), #ea580c);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 700;
   flex-shrink: 0;
   
}
 .testimonial-name  {
   font-weight: 600;
   
}
 .testimonial-role  {
   color: var(--orange);
   font-size: 0.875rem;
   
}
 .testimonial-stats  {
   margin-top: 1.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid rgba(255,255,255,0.05);
   font-size: 0.875rem;
   color: var(--gray-500);
   font-family: monospace;
   
}
 .pricing-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   max-width: 72rem;
   margin: 0 auto;
   
}
 @media(min-width:768px) {
   .pricing-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .pricing-card  {
   border-radius: 1rem;
   padding: 2rem;
   border: 1px solid var(--white-10);
   background: #000;
   position: relative;
   transition: transform 0.3s;
   
}
 .pricing-card:hover  {
   transform: translateY(-8px);
   
}
 .pricing-card.featured  {
   background: rgba(255,255,255,0.1);
   border-color: var(--orange);
   box-shadow: 0 0 0 2px rgba(255,138,0,0.2);
   
}
 .pricing-badge  {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--orange);
   color: #fff;
   font-size: 0.875rem;
   font-weight: 700;
   padding: 0.25rem 1rem;
   border-radius: 9999px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   white-space: nowrap;
   
}
 .pricing-name  {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   
}
 .pricing-price  {
   display: flex;
   align-items: baseline;
   margin-bottom: 1rem;
   
}
 .pricing-amount  {
   font-size: 2.5rem;
   font-weight: 700;
   
}
 .pricing-period  {
   color: var(--gray-400);
   margin-left: 0.5rem;
   
}
 .pricing-desc  {
   color: var(--gray-400);
   font-size: 0.875rem;
   margin-bottom: 2rem;
   min-height: 2.5rem;
   
}
 .btn-plan  {
   display: block;
   width: 100%;
   padding: 0.75rem 1.5rem;
   border-radius: 0.5rem;
   text-align: center;
   font-weight: 700;
   transition: all 0.2s;
   margin-bottom: 2rem;
   
}
 .btn-plan-featured  {
   background: var(--orange);
   color: #fff;
   
}
 .btn-plan-featured:hover  {
   background: var(--orange-dark);
   
}
 .btn-plan-default  {
   background: #fff;
   color: #000;
   
}
 .btn-plan-default:hover  {
   background: #e5e7eb;
   
}
 .pricing-features  {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   
}
 .pricing-feature  {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   font-size: 0.875rem;
   color: var(--gray-300);
   
}
 .pricing-feature svg  {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   
}
 .blog-header  {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   margin-bottom: 4rem;
   
}
 @media(min-width:768px) {
   .blog-header  {
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   
}
 
}
 .blog-header-left h2  {
   font-size: 2rem;
   font-weight: 900;
   margin-bottom: 1rem;
   
}
 @media(min-width:768px) {
   .blog-header-left h2  {
   font-size: 3rem;
   
}
 
}
 .blog-header-left p  {
   color: var(--gray-400);
   font-size: 1.125rem;
   font-weight: 700;
   
}
 .blog-all-link  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--orange);
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-size: 0.875rem;
   transition: gap 0.2s;
   white-space: nowrap;
   
}
 .blog-all-link:hover  {
   gap: 1rem;
   
}
 .blog-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   
}
 @media(min-width:768px) {
   .blog-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .blog-card  {
   padding: 2rem;
   border-radius: 2rem;
   background: var(--white-5);
   border: 1px solid var(--white-10);
   transition: all 0.3s;
   display: flex;
   flex-direction: column;
   height: 100%;
   
}
 .blog-card:hover  {
   background: rgba(255,138,0,0.05);
   border-color: rgba(255,138,0,0.2);
   
}
 .blog-card-meta  {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.5rem;
   
}
 .blog-category  {
   font-size: 0.625rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--orange);
   background: var(--orange-10);
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
   
}
 .blog-date  {
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--gray-600);
   
}
 .blog-card h3  {
   font-size: 1.25rem;
   font-weight: 900;
   margin-bottom: 1rem;
   line-height: 1.3;
   transition: color 0.2s;
   
}
 .blog-card:hover h3  {
   color: var(--orange);
   
}
 .blog-card p  {
   color: var(--gray-400);
   font-size: 0.875rem;
   line-height: 1.625;
   margin-bottom: 2rem;
   font-weight: 500;
   flex-grow: 1;
   
}
 .blog-read-more  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: #fff;
   font-weight: 700;
   font-size: 0.875rem;
   transition: gap 0.2s;
   margin-top: auto;
   
}
 .blog-read-more:hover  {
   gap: 0.75rem;
   
}
 .blog-read-more svg  {
   color: var(--orange);
   
}
 .faq-list  {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   max-width: 48rem;
   margin: 0 auto;
   
}
 .faq-item  {
   border: 1px solid var(--white-10);
   border-radius: 0.75rem;
   overflow: hidden;
   background: var(--white-5);
   
}
 .faq-question  {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem;
   text-align: left;
   transition: background 0.2s;
   
}
 .faq-question:hover  {
   background: var(--white-5);
   
}
 .faq-question span  {
   font-size: 1.125rem;
   font-weight: 500;
   color: #fff;
   padding-right: 2rem;
   
}
 .faq-icon  {
   flex-shrink: 0;
   transition: transform 0.3s;
   
}
 .faq-icon.open  {
   color: var(--orange);
   
}
 .faq-icon.closed  {
   color: var(--gray-500);
   
}
 .faq-answer  {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
   
}
 .faq-answer.open  {
   max-height: 1000px;
   
}
 .faq-answer-inner  {
   padding: 0 1.5rem 1.5rem;
   color: var(--gray-400);
   line-height: 1.625;
   border-top: 1px solid rgba(255,255,255,0.05);
   padding-top: 1.5rem;
   
}
 .contact-box  {
   background: linear-gradient(135deg, var(--orange-10), transparent);
   border-radius: 1.5rem;
   padding: 2rem;
   border: 1px solid var(--white-10);
   text-align: center;
   
}
 @media(min-width:768px) {
   .contact-box  {
   padding: 4rem;
   
}
 
}
 .contact-box h2  {
   font-size: 2rem;
   font-weight: 900;
   margin-bottom: 1.5rem;
   letter-spacing: -0.05em;
   
}
 @media(min-width:768px) {
   .contact-box h2  {
   font-size: 3rem;
   
}
 
}
 .contact-box p  {
   color: var(--gray-300);
   margin-bottom: 2.5rem;
   max-width: 36rem;
   margin-left: auto;
   margin-right: auto;
   
}
 .contact-cards  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
   margin-bottom: 3rem;
   max-width: 48rem;
   margin-left: auto;
   margin-right: auto;
   
}
 @media(min-width:768px) {
   .contact-cards  {
   grid-template-columns: repeat(2,1fr);
   
}
 
}
 .contact-card  {
   padding: 1.5rem;
   border-radius: 0.75rem;
   background: rgba(0,0,0,0.4);
   border: 1px solid var(--white-10);
   transition: border-color 0.3s;
   text-align: left;
   
}
 .contact-card:hover  {
   border-color: rgba(255,138,0,0.5);
   
}
 .contact-card h3  {
   font-weight: 600;
   margin-bottom: 0.25rem;
   
}
 .contact-card .card-desc  {
   color: var(--gray-400);
   font-size: 0.875rem;
   margin-bottom: 0.75rem;
   
}
 .contact-card .card-info  {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   
}
 .contact-icon-wrap  {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--orange-10);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   
}
 .contact-icon-wrap svg  {
   color: var(--orange);
   width: 20px;
   height: 20px;
   
}
 .contact-info-text p  {
   color: var(--gray-400);
   
}
 .contact-info-text .info-sub  {
   font-size: 0.875rem;
   color: var(--gray-500);
   margin-top: 0.25rem;
   
}
 .contact-email  {
   color: var(--orange);
   font-weight: 500;
   transition: color 0.2s;
   
}
 .contact-email:hover  {
   color: var(--orange-dark);
   
}
 .newsletter-form  {
   max-width: 28rem;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   text-align: left;
   
}
 .newsletter-form input  {
   width: 100%;
   padding: 1rem 1.25rem;
   background: rgba(0,0,0,0.5);
   border: 1px solid var(--white-10);
   border-radius: 0.5rem;
   color: #fff;
   font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
   font-family: inherit;
   
}
 .newsletter-form input::placeholder  {
   color: var(--gray-500);
   
}
 .newsletter-form input:focus  {
   border-color: var(--orange);
   box-shadow: 0 0 0 1px var(--orange);
   
}
 .btn-newsletter  {
   width: 100%;
   padding: 1rem;
   background: #fff;
   color: #000;
   font-weight: 700;
   border-radius: 0.5rem;
   transition: background 0.2s;
   
}
 .btn-newsletter:hover  {
   background: #e5e7eb;
   
}
 .newsletter-note  {
   font-size: 0.75rem;
   color: var(--gray-500);
   text-align: center;
   margin-top: 1rem;
   
}
 footer  {
   background: #000;
   border-top: 1px solid var(--white-10);
   padding: 4rem 0 2rem;
   
}
 .footer-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
   margin-bottom: 3rem;
   
}
 @media(min-width:768px) {
   .footer-grid  {
   grid-template-columns: repeat(2,1fr);
   
}
 
}
 @media(min-width:1024px) {
   .footer-grid  {
   grid-template-columns: repeat(6, 1fr);
   
}
 
}
 .footer-col.brand  {
   grid-column: span 1;
   
}
 @media(min-width:1024px) {
   .footer-col.brand  {
   grid-column: span 2;
   
}
 
}
 .footer-brand-logo  {
   height: 48px;
   width: auto;
   max-width: 200px;
   object-fit: contain;
   object-position: left;
   margin-bottom: 1.5rem;
   
}
 .footer-brand-desc  {
   color: var(--gray-400);
   font-size: 0.875rem;
   line-height: 1.7;
   margin-bottom: 1.5rem;
   max-width: 300px;
   
}
 .footer-socials  {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding-top: 1rem;
   
}
 .footer-social  {
   color: var(--gray-400);
   transition: color 0.2s;
   
}
 .footer-social:hover  {
   color: #fff;
   
}
 .footer-social svg  {
   width: 20px;
   height: 20px;
   
}
 .footer-col h4  {
   color: #fff;
   font-weight: 600;
   margin-bottom: 1.5rem;
   
}
 .footer-links  {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   
}
 .footer-links a  {
   color: var(--gray-400);
   font-size: 0.875rem;
   transition: color 0.2s;
   
}
 .footer-links a:hover  {
   color: var(--orange);
   
}
 .footer-contact  {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   font-size: 0.875rem;
   color: var(--gray-400);
   
}
 .footer-contact-item  {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   
}
 .footer-contact-item svg  {
   color: var(--orange);
   flex-shrink: 0;
   margin-top: 2px;
   width: 16px;
   height: 16px;
   
}
 .footer-contact-item .ci-label  {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--gray-500);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   
}
 .footer-contact-item a  {
   color: var(--gray-400);
   transition: color 0.2s;
   display: inline-block;
   margin-top: 0.25rem;
   
}
 .footer-contact-item a:hover  {
   color: #fff;
   
}
 .footer-bottom  {
   border-top: 1px solid var(--white-10);
   padding-top: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: center;
   
}
 @media(min-width:768px) {
   .footer-bottom  {
   flex-direction: row;
   justify-content: space-between;
   
}
 
}
 .footer-copyright  {
   color: var(--gray-500);
   font-size: 0.875rem;
   font-weight: 700;
   
}
 .footer-legal  {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
   
}
 .footer-legal a  {
   font-size: 0.875rem;
   color: var(--gray-500);
   transition: color 0.2s;
   
}
 .footer-legal a:hover  {
   color: var(--gray-300);
   
}
 .whatsapp-btn  {
   position: fixed;
   bottom: 1.5rem;
   right: 1.5rem;
   z-index: 100;
   width: 56px;
   height: 56px;
   background: #25D366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 20px rgba(37,211,102,0.4);
   transition: transform 0.2s;
   border: 2px solid #fff;
   outline: 2px solid #fff;
   
}
 .whatsapp-btn:hover  {
   transform: scale(1.1);
   
}
 .whatsapp-btn img  {
   width: 32px;
   height: 32px;
   
}
 .cookie-banner  {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 40;
   background: var(--zinc-900);
   border-top: 1px solid var(--white-10);
   padding: 1rem 1.5rem;
   
}
 .cookie-inner  {
   max-width: var(--container);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   
}
 @media(min-width:768px) {
   .cookie-inner  {
   flex-direction: row;
   
}
 
}
 .cookie-text  {
   color: var(--gray-400);
   font-size: 0.875rem;
   
}
 .cookie-text a  {
   color: var(--orange);
   font-weight: 700;
   
}
 .cookie-text a:hover  {
   text-decoration: underline;
   
}
 .cookie-actions  {
   display: flex;
   align-items: center;
   gap: 1rem;
   width: 100%;
   
}
 @media(min-width:768px) {
   .cookie-actions  {
   width: auto;
   
}
 
}
 .btn-cookie-accept  {
   flex: 1;
   padding: 0.5rem 1.5rem;
   background: #fff;
   color: #000;
   font-weight: 600;
   border-radius: 0.5rem;
   transition: background 0.2s;
   
}
 @media(min-width:768px) {
   .btn-cookie-accept  {
   flex: none;
   
}
 
}
 .btn-cookie-accept:hover  {
   background: #e5e7eb;
   
}
 .blog-post  {
   max-width: 800px;
   margin: 0 auto;
   
}
 .blog-post h1  {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 900;
   margin-bottom: 2rem;
   line-height: 1.1;
   letter-spacing: -0.05em;
   margin-top: 1rem;
   
}
 .blog-post-meta  {
   margin-bottom: 3rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
   
}
 .blog-post-category  {
   background: var(--orange-10);
   color: var(--orange);
   padding: 0.5rem 1rem;
   border-radius: 9999px;
   font-weight: 900;
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   
}
 .blog-post-date  {
   color: var(--gray-500);
   font-weight: 700;
   font-size: 0.875rem;
   
}
 .post-content  {
   font-size: 1.125rem;
   line-height: 1.8;
   color: var(--gray-300);
   font-weight: 400;
   
}
 .post-content h2  {
   font-size: 2.25rem;
   font-weight: 900;
   padding-top: 4rem;
   margin-bottom: 1.5rem;
   color: #fff;
   border-bottom: 1px solid var(--white-10);
   padding-bottom: 1rem;
   
}
 .post-content h3  {
   font-size: 1.5rem;
   font-weight: 800;
   margin-top: 2.5rem;
   margin-bottom: 1rem;
   color: var(--orange);
   
}
 .post-content p  {
   margin-bottom: 2rem;
   
}
 .post-content ul, .post-content ol  {
   margin-bottom: 2.5rem;
   padding-left: 1.5rem;
   
}
 .post-content li  {
   margin-bottom: 1rem;
   
}
 .post-content strong  {
   color: #fff;
   font-weight: 800;
   
}
 .post-content blockquote  {
   border-left: 4px solid var(--orange);
   padding: 2rem;
   background: var(--white-5);
   border-radius: 0 1.5rem 1.5rem 0;
   margin: 3rem 0;
   font-style: italic;
   color: #fff;
   font-size: 1.25rem;
   
}
 .post-back  {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   color: var(--gray-400);
   font-weight: 700;
   margin-bottom: 3rem;
   transition: color 0.3s;
   
}
 .post-back:hover  {
   color: var(--orange);
   
}
 .cta-box h2  {
   font-size: 2rem;
   font-weight: 900;
   margin-bottom: 1rem;
   
}
 .cta-box p  {
   font-size: 1.125rem;
   line-height: 1.6;
   
}
 .btn-cookie-close  {
   padding: 0.5rem;
   color: var(--gray-500);
   transition: color 0.2s;
   
}
 .btn-cookie-close:hover  {
   color: #fff;
   
}
 .hidden  {
   display: none !important;
   
}
 @keyframes pulse  {
   0%,100% {
  opacity:1
}
 50% {
  opacity:0.5
}
 
}
 .animate-pulse  {
   animation: pulse 2s infinite;
   
}
 .blog-page-header  {
   padding: 8rem 0 4rem;
   background: linear-gradient(to bottom, rgba(255,138,0,0.05), transparent);
   text-align: center;
   
}
 .blog-page-header h1  {
   font-size: 2.5rem;
   font-weight: 900;
   margin-bottom: 1rem;
   
}
 @media(min-width:768px) {
   .blog-page-header h1  {
   font-size: 4rem;
   
}
 
}
 .blog-page-header p  {
   color: var(--gray-400);
   font-size: 1.125rem;
   max-width: 36rem;
   margin: 0 auto;
   
}
 .blog-filters  {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   justify-content: center;
   margin: 2rem 0 4rem;
   
}
 .filter-btn  {
   padding: 0.5rem 1.25rem;
   border-radius: 9999px;
   font-size: 0.875rem;
   font-weight: 700;
   border: 1px solid var(--white-20);
   color: var(--gray-400);
   transition: all 0.2s;
   background: transparent;
   
}
 .filter-btn:hover, .filter-btn.active  {
   background: var(--orange);
   border-color: var(--orange);
   color: #fff;
   
}
 .blog-page-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   padding-bottom: 6rem;
   
}
 @media(min-width:768px) {
   .blog-page-grid  {
   grid-template-columns: repeat(2,1fr);
   
}
 
}
 @media(min-width:1024px) {
   .blog-page-grid  {
   grid-template-columns: repeat(3,1fr);
   
}
 
}
 .post-header  {
   padding: 8rem 0 4rem;
   background: linear-gradient(to bottom, rgba(255,138,0,0.05), transparent);
   text-align: center;
   
}
 .post-header .post-meta  {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
   
}
 .post-header h1  {
   font-size: 2rem;
   font-weight: 900;
   line-height: 1.2;
   margin-bottom: 1rem;
   
}
 @media(min-width:768px) {
   .post-header h1  {
   font-size: 3.5rem;
   
}
 
}
 .post-header .post-excerpt  {
   color: var(--gray-400);
   font-size: 1.125rem;
   max-width: 48rem;
   margin: 0 auto;
   
}
 .post-content  {
   max-width: 48rem;
   margin: 0 auto;
   padding: 3rem 1rem 6rem;
   
}
 .post-content h3  {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 2rem 0 1rem;
   
}
 .post-content p, .post-content li  {
   color: var(--gray-300);
   line-height: 1.8;
   margin-bottom: 1rem;
   
}
 .post-content ul, .post-content ol  {
   padding-left: 1.5rem;
   margin-bottom: 1rem;
   
}
 .post-content li  {
   list-style: disc;
   
}
 .post-content strong  {
   color: #fff;
   font-weight: 700;
   
}
 .post-back  {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--orange);
   font-weight: 700;
   margin-bottom: 2rem;
   transition: gap 0.2s;
   
}
 .post-back:hover  {
   gap: 0.75rem;
   
}
 .legal-header  {
   padding: 8rem 0 3rem;
   text-align: center;
   
}
 .legal-header h1  {
   font-size: 2.5rem;
   font-weight: 900;
   margin-bottom: 1rem;
   
}
 .legal-header p  {
   color: var(--gray-400);
   margin-bottom: 0;
   
}
 .legal-content  {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem 1rem 6rem;
   
}
 .legal-content h2  {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 2rem 0 1rem;
   
}
 .legal-content p, .legal-content li  {
   color: var(--gray-300);
   line-height: 1.8;
   margin-bottom: 0.75rem;
   font-size: 0.9375rem;
   
}
 .legal-content ul  {
   padding-left: 1.5rem;
   
}
 .legal-content li  {
   list-style: disc;
   
}
 .section-cta  {
   padding: 6rem 0;
   background: #000;
   position: relative;
   
}
 .cta-card  {
   background: rgba(255,138,0,0.03);
   border: 2px solid var(--white-10);
   border-radius: 3rem;
   padding: 4rem 2rem;
   text-align: center;
   position: relative;
   overflow: hidden;
   max-width: 64rem;
   margin: 0 auto;
   box-shadow: 0 20px 40px rgba(0,0,0,0.4);
   
}
 .cta-card::before  {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at top right, rgba(255,138,0,0.05), transparent 60%);
   pointer-events: none;
   
}
 .cta-services-list  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
   max-width: 48rem;
   margin: 3rem auto;
   text-align: left;
   
}
 @media(min-width:768px) {
   .cta-services-list  {
   grid-template-columns: repeat(2, 1fr);
   padding: 0 2rem;
   
}
 
}
 .cta-service-item  {
   display: flex;
   align-items: start;
   gap: 1rem;
   font-size: 1.125rem;
   font-weight: 600;
   color: #fff;
   line-height: 1.4;
   
}
 .cta-service-item span  {
   color: var(--orange);
   flex-shrink: 0;
   
}
 .cta-footer  {
   margin-top: 3rem;
   border-top: 1px solid var(--white-10);
   padding-top: 3rem;
   
}
 .cta-phone  {
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   font-size: 2rem;
   font-weight: 900;
   color: var(--orange);
   margin-top: 1.5rem;
   transition: transform 0.2s;
   text-decoration: none;
   
}
 .cta-phone:hover  {
   transform: scale(1.05);
   
}
 .legal-grid  {
   display: grid;
   grid-template-columns: 1fr;
   gap: 4rem;
   
}
 @media(min-width:1024px) {
   .legal-grid  {
   grid-template-columns: 1fr;
   
}
 
}
 .legal-main  {
   background: var(--white-5);
   border: 1px solid var(--white-10);
   border-radius: 2rem;
   padding: 2rem;
   width: 100%;
   
}
 @media(min-width:768px) {
   .legal-main  {
   padding: 4rem;
   
}
 
}
 .legal-section  {
   margin-bottom: 3rem;
   
}
 .legal-section:last-child  {
   margin-bottom: 0;
   
}
 .legal-section h2  {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 800;
   margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   
}
 .legal-section h2::before  {
   content: '';
   width: 4px;
   height: 24px;
   background: var(--orange);
   border-radius: 2px;
   
}
 
@media(max-width:768px) { .navbar-logo { height:36px !important; } }