* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     }

     :root {
         --primary: #000000;
         --secondary: #ffffff;
         --accent: #3a86ff;
         --gray-light: #f5f5f5;
         --gray: #6b7280;
         --gray-dark: #7c828d;
     }

     body {
         background: linear-gradient(-235deg, #07222e65, #110800, black, rgba(43, 21, 1, 0.977)), black;
         color: var(--secondary);
         line-height: 1.6;
         overflow-x: hidden;
     }

     .announcement-bar {
         background-color: var(--primary);
         color: var(--secondary);
         text-align: center;
         padding: 12px 12px;
         font-size: 14px;
         font-weight: 500;
     }

     .announcement-bar h6 {
         font-size: inherit;
     }

     .announcement-bar span {
         color: rgb(238, 139, 8);
     }

     .announcement-bar a {
         color: #3a86ff;
         text-decoration: none;
         margin-left: 5px;
     }

     .announcement-bar a:hover {
         text-decoration: underline;
     }

     .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }

     /* Header */
     header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px 0;
     }

     .logo {
         font-size: 24px;
         font-weight: 700;
     }

     .nav-buttons {
         display: flex;
         gap: 15px;
     }

     .btn {
         padding: 10px 20px;
         border-radius: 8px;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .btn-outline {
         border: 1px solid #e5e7eb;
         background: transparent;
     }

     .btn-primary {
         background: #000;
         color: white;
         border: none;
     }

     .btn-outline:hover {
         background: #f9fafb;
     }

     .btn-primary:hover {
         background: #333;
     }

     /* Hero Section */
     .hero {
         padding: 50px 0 0 0;
         text-align: center;
     }

     .hero h1 {
         font-size: 56px;
         font-weight: 700;
         line-height: 1.1;
         margin-bottom: 10px;
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
     }

     .hero p {
         font-size: 20px;
         color: var(--gray-dark);
         margin-bottom: 10px;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
     }

     .hero-buttons {
         display: flex;
         gap: 15px;
         justify-content: center;
         margin: 20px;
         border-radius: 50px;

     }

     /* Animated Button - FIXED BORDER ONLY */
     .animated-btn {
         position: relative;
         padding: 16px 32px;
         font-size: 16px;
         font-weight: 600;
         border-radius: 50px;
         cursor: pointer;
         background: #000;
         color: rgb(238, 139, 8);
         border: none;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .animated-btn::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border-radius: 50px;
         background: linear-gradient(45deg, #ff6b35, #fffd6c);
         background-size: 400% 400%;
         z-index: -1;
         animation: rotate-border 3s linear infinite;
     }

     .animated-btn::after {
         content: '';
         position: absolute;
         top: 2px;
         left: 2px;
         right: 2px;
         bottom: 2px;
         border-radius: 48px;
         background: #000;
         z-index: -1;
     }

     @keyframes rotate-border {
         0% {
             background-position: 0% 50%;
         }

         50% {
             background-position: 100% 50%;
         }

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

     .animated-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }

     .logos {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 40px;
         margin-top: 40px;
     }

     .logos img {
         height: 30px;
         opacity: 0.7;
         filter: grayscale(100%);
     }

     .as-seen-on {
         text-align: center;
         color: var(--gray);
         font-size: 14px;
         margin-top: 20px;
     }

     /* Phones Section - MODIFIED FOR HORIZONTAL LAYOUT ON MOBILE */
     .phones-section {
         padding: 100px 0;
         position: relative;
         overflow-x: auto;
         overflow-y: hidden;
     }

     .phones-container {
         display: flex;
         gap: 20px;
         position: relative;
         width: max-content;
         margin: 0 auto;
         padding: 0 20px;
     }

     .phone {
         width: 280px;
         min-width: 280px;
         border-radius: 40px;
         overflow: hidden;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         transition: transform 0.5s ease-out;
         position: relative;
     }

     .phone img {
         width: 100%;
         height: auto;
         display: block;
     }

     /* How It Works */
     .how-it-works {
         padding: 100px 0;
         background-color: transparent;
     }

     .section-title {
         text-align: center;
         font-size: 40px;
         font-weight: 700;
         margin-bottom: 60px;
     }

     .steps {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 40px;
     }

     .step {
         text-align: center;
     }

     .step-icon {
         width: 80px;
         height: 80px;
         background: #000;
         color: white;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 24px;
         font-size: 32px;
     }

     .step h3 {
         font-size: 24px;
         margin-bottom: 16px;
     }

     .step p {
         /* color: var(--gray-dark); */
         color: gray;
         font-size: 16px;
     }

     /* Community */
     .community {
         padding: 100px 0;
     }

     .creators {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 30px;
         margin-top: 60px;
     }

     .creator-card {
         border: 1px solid #e5e7eb;
         border-radius: 12px;
         overflow: hidden;
     }

     .creator-header {
         padding: 20px;
         border-bottom: 1px solid #e5e7eb;
     }

     .creator-info {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .creator-avatar {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: #e5e7eb;
     }

     .creator-details h4 {
         font-size: 16px;
         margin-bottom: 4px;
     }

     .creator-details p {
         font-size: 14px;
         color: var(--gray);
     }

     .creator-bio {
         padding: 20px;
         font-size: 14px;
         color: var(--gray-dark);
         border-bottom: 1px solid #e5e7eb;
     }

     .creator-stats {
         padding: 20px;
         display: flex;
         justify-content: space-between;
     }

     .stat {
         text-align: center;
     }

     .stat-value {
         font-size: 18px;
         font-weight: 700;
         margin-bottom: 4px;
     }

     .stat-label {
         font-size: 12px;
         color: var(--gray);
     }

     /* Regulated Services */
     .regulated-services {
         padding: 80px 0;
         background-color: transparent;

     }

     .services-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         text-align: center;
         /* background-color: rgba(41, 41, 41, 0.256); */
         padding: 20px;
         border-left: #000 solid 2px;
     }

     .services-grid img {
         width: 60px;
         height: 60px;
     }

     .service-icon {
         width: 60px;
         height: 60px;
         background: #000;
         color: white;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 20px;
         font-size: 24px;
     }

     .service h3 {
         font-size: 20px;
         margin-bottom: 12px;
     }

     .service p {
         color: var(--gray-dark);
         font-size: 16px;
     }

     /* Leadership */
     .leadership {
         padding: 100px 0;
     }

     .team-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 30px;
         margin-top: 60px;
     }

     .team-member {
         text-align: center;
     }

     .member-avatar {
         width: 120px;
         height: 120px;
         background: #e5e7eb;
         margin: 0 auto 16px;
         overflow: hidden;
     }

     .member-avatar img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .member-name {
         font-size: 18px;
         font-weight: 600;
         margin-bottom: 8px;
     }

     .member-role {
         font-size: 14px;
         color: var(--gray);
         margin-bottom: 12px;
     }

     .member-company {
         font-size: 12px;
         color: var(--gray);
     }

     /* FAQ */
     .faq {
         padding: 80px 0;
         background-color: transparent;
     }

     .faq-title {
         text-align: center;
         font-size: 32px;
         margin-bottom: 40px;
     }

     .faq-grid {
         max-width: 800px;
         margin: 0 auto;
     }

     .faq-item {
         border-bottom: 1px solid #d1d5db;
         padding: 20px 0;
     }

     .faq-question {
         font-size: 18px;
         font-weight: 600;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
     }

     .faq-answer {
         padding-top: 16px;
         color: var(--gray-dark);
         display: none;
     }

     .faq-item.active .faq-answer {
         display: block;
     }

     .view-faq {
         text-align: center;
         margin-top: 40px;
     }

     .view-faq a {
         color: #3a86ff;
         text-decoration: none;
         font-weight: 600;
     }

     /* Footer */
     footer {
         background: #000;
         color: white;
         padding: 60px 0 30px;
     }

     .footer-content {
         display: grid;
         grid-template-columns: 2fr 1fr 1fr 1fr;
         gap: 40px;
         margin-bottom: 40px;
     }

     .footer-logo {
         font-size: 24px;
         font-weight: 700;
         margin-bottom: 16px;
     }

     .footer-links h4 {
         font-size: 16px;
         margin-bottom: 16px;
     }

     .footer-links ul {
         list-style: none;
     }

     .footer-links li {
         margin-bottom: 10px;
     }

     .footer-links a {
         color: #9ca3af;
         text-decoration: none;
         font-size: 14px;
     }

     .footer-links a:hover {
         color: white;
     }

     .footer-bottom {
         border-top: 1px solid #374151;
         padding-top: 30px;
         text-align: center;
         color: #9ca3af;
         font-size: 14px;
     }

     /* Scroll Animation Classes */
     .animate-on-scroll {
         opacity: 0;
         transform: translateY(30px);
         transition: opacity 0.6s ease, transform 0.6s ease;
     }

     .animate-on-scroll.animated {
         opacity: 1;
         transform: translateY(0);
     }

     .animate-fade-left {
         opacity: 0;
         transform: translateX(-30px);
         transition: opacity 0.6s ease, transform 0.6s ease;
     }

     .animate-fade-left.animated {
         opacity: 1;
         transform: translateX(0);
     }

     .animate-fade-right {
         opacity: 0;
         transform: translateX(30px);
         transition: opacity 0.6s ease, transform 0.6s ease;
     }

     .animate-fade-right.animated {
         opacity: 1;
         transform: translateX(0);
     }

     .animate-scale {
         opacity: 0;
         transform: scale(0.9);
         transition: opacity 0.6s ease, transform 0.6s ease;
     }

     .animate-scale.animated {
         opacity: 1;
         transform: scale(1);
     }

     /* Responsive */
     @media (max-width: 1024px) {

         .steps,
         .creators,
         .services-grid,
         .team-grid {
             grid-template-columns: repeat(2, 1fr);
         }

         .footer-content {
             grid-template-columns: 1fr 1fr;
         }
     }

     @media (max-width: 768px) {

         .secondimagediv {
             flex-direction: column;
             align-items: center;
         }

         .hero h1 {
             font-size: 40px;
         }

         .steps,
         .creators,
         .services-grid,
         .team-grid {
             grid-template-columns: 1fr;
         }

         .footer-content {
             grid-template-columns: 1fr;
         }

         /* Mobile phones layout - horizontal scroll with partial visibility */
         .phones-section {
             padding: 60px 0;
         }

         .phones-container {
             justify-content: flex-start;
             padding: 0 10px;
         }

         .phone {
             width: 240px;
             min-width: 240px;
         }
     }

     @media (max-width: 480px) {
         .phone {
             width: 200px;
             min-width: 200px;
         }
     }

     @media (min-width: 900px) {
         .video-section {
             display: none;
         }
     }

     .video-section {
         align-self: center;
         justify-self: center;
         position: relative;
         width: 100%;
         max-width: 700px;
         height: 200px;
         /* border: 10px solid green; */
         overflow: hidden;
     }

     .video-container {
         position: absolute;
         overflow: hidden;
         display: flex;
         width: 100%;
         height: 100%;
         border: 2px solid rgb(70, 68, 68);
         border-radius: 10px;
         border: none;
     }

     .video-container video {
         width: 100%;
         height: 100%;
         object-fit: fill;
     }

     @media (min-width: 868px) {}

     .hero-content {
         /* background-color: green; */
         max-width: 800px;
         justify-self: center;

     }

     .hero-content {
         padding: 15px;
     }