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

 body {
   font-family: 'Inter', sans-serif;
   background-color: #ffffff;
   color: #1e293b;
   line-height: 1.5;
   scroll-behavior: smooth;
 }

 .container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 32px;
 }


 .navbar {
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(8px);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05);
   padding: 16px 0;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .logo {
   font-size: 28px;
   font-weight: 800;
   letter-spacing: -0.5px;
   background: linear-gradient(135deg, #1E3C72, #2A5298);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .logo span {
   background: linear-gradient(135deg, #f97316, #f43f5e);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .nav-links {
   display: flex;
   gap: 32px;
   align-items: center;
   flex-wrap: wrap;
 }

 .nav-links a {
   text-decoration: none;
   font-weight: 500;
   color: #1e293b;
   transition: 0.2s;
 }

 .nav-links a:hover {
   color: #f97316;
 }

 .btn-demo {
   background: #f97316;
   color: white !important;
   padding: 8px 20px;
   border-radius: 40px;
   font-weight: 600;
   box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
 }

 .btn-demo:hover {
   background: #ea580c;
   transform: translateY(-2px);
 }


 .hero {
   padding: 70px 0 40px;
   background: linear-gradient(145deg, #fef9f0 0%, #ffffff 100%);
 }

 .hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: center;
 }

 .hero-badge {
  margin-left: -170px;
   display: inline-block;
   background: #fff1e6;
   padding: 6px 16px;
   border-radius: 100px;
   font-size: 0.85rem;
   font-weight: 600;
   color: #f97316;
   margin-bottom: 24px;
 }

 .hero-left h1 {
   font-size: 3.2rem;
   font-weight: 800;
   line-height: 1.2;
   margin-bottom: 20px;
   letter-spacing: -1px;
 }

 .hero-left h1 span {
   background: linear-gradient(120deg, #f97316, #facc15);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero-left p {
  text-align: left;
    margin-left: -23px;
   font-size: 1.1rem;
   color: #cecece;
   margin-bottom: 32px;
 }
span.hero-badge {
    margin-bottom: -12px;
    margin-left: -1px;
}
 .btn-group {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: #f97316;
   color: white;
   padding: 12px 28px;
   border-radius: 40px;
   font-weight: 600;
   text-decoration: none;
   transition: 0.2s;
   box-shadow: 0 8px 16px rgba(249, 115, 22, 0.2);
 }

 .btn-primary:hover {
   background: #ea580c;
   transform: translateY(-3px);
 }

 .btn-outline {
   background: transparent;
   border: 1.5px solid #cbd5e1;
   padding: 12px 28px;
   border-radius: 40px;
   font-weight: 600;
   text-decoration: none;
   color: #ffffff;
 }

 .btn-outline:hover {
   border-color: #f97316;
   background: #fff7ed;
 }

 .hero-right img {
   width: 100%;
   border-radius: 32px;
   box-shadow: 0 25px 40px -20px rgba(0, 0, 0, 0.2);
   transition: 0.4s;
 }

 .hero-right img:hover {
   transform: scale(1.02);
 }


 .stats {
   padding: 40px 0;
   background: white;
   border-bottom: 1px solid #f1f5f9;
 }

 .stats-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 20px;
   text-align: center;
 }

 .stat-card h3 {
   font-size: 2rem;
   font-weight: 800;
   background: linear-gradient(135deg, #1E3C72, #2A5298);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .stat-card p {
   color: #64748b;
   font-weight: 500;
 }


 .products {
   padding: 80px 0;
   background: #f8fafc;
 }

 .section-header {
   text-align: center;
   margin-bottom: 56px;
 }

 .section-header h2 {
   font-size: 2.4rem;
   font-weight: 800;
   margin-bottom: 12px;
 }

 .products-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   gap: 32px;
 }

 .product-card {
   background: white;
   border-radius: 28px;
   padding: 28px 24px;
   transition: 0.25s ease;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
   border: 1px solid #eef2ff;
 }

 .product-card:hover {
   transform: translateY(-8px);
   border-color: #fed7aa;
   box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
 }

 .product-icon {
   font-size: 2.8rem;
   margin-bottom: 20px;
 }

 .product-card h3 {
   font-size: 1.4rem;
   margin-bottom: 12px;
   font-weight: 700;
 }

 .product-card p {
   color: #475569;
   margin-bottom: 20px;
 }

 .read-more {
   text-decoration: none;
   font-weight: 600;
   color: #f97316;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 .benefits {
   padding: 80px 0;
   background: white;
 }

 .benefits-flex {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }

 .benefits-left h2 {
   font-size: 2.2rem;
   font-weight: 800;
   margin-bottom: 20px;
 }

 .benefit-list {
   list-style: none;
   margin-top: 32px;
 }

 .benefit-list li {
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
 }

 .check {
   background: #fef3c7;
   color: #f97316;
   width: 26px;
   height: 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 30px;
   font-weight: bold;
 }

 .benefits-right img {
   width: 100%;
   border-radius: 28px;
   box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
 }


 .testimonials {
   background: linear-gradient(105deg, #1E2A47 0%, #0f172a 100%);
   color: white;
   padding: 80px 0;
 }

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

 .testimonial-card {
   background: rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(4px);
   padding: 28px;
   border-radius: 28px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .testimonial-card i {
   font-size: 2rem;
   color: #facc15;
   margin-bottom: 16px;
 }

 .testimonial-card p {
   font-style: italic;
   margin-bottom: 20px;
   font-size: 0.95rem;
   line-height: 1.5;
 }

 .testimonial-author {
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .testimonial-author img {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   object-fit: cover;
 }

 .cta {
   padding: 70px 0;
   background: linear-gradient(120deg, #fff7ed, #ffe4e2);
   text-align: center;
 }

 .cta h2 {
   font-size: 2.2rem;
   margin-bottom: 16px;
 }

 .btn-cta {
   display: inline-block;
   background: #f97316;
   color: white;
   padding: 14px 40px;
   border-radius: 60px;
   font-weight: 700;
   text-decoration: none;
   margin-top: 24px;
   transition: 0.2s;
   box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
 }


 footer {
   background: #0f172a;
   color: #cbd5e1;
   padding: 48px 0 24px;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 48px;
   margin-bottom: 48px;
 }

 .footer-col h4 {
   color: white;
   margin-bottom: 20px;
   font-size: 1.2rem;
 }

 .footer-col a {
   display: block;
   text-decoration: none;
   color: #cbd5e1;
   margin-bottom: 12px;
   transition: 0.2s;
 }

 .footer-col a:hover {
   color: #f97316;
 }

 .footer-bottom {
   text-align: center;
   padding-top: 24px;
   border-top: 1px solid #1e293b;
 }

 @media (max-width: 900px) {

   .hero-grid,
   .benefits-flex,
   .testimonial-grid {
     grid-template-columns: 1fr;
   }

   .hero-left h1 {
     font-size: 2.5rem;
   }

   .nav-flex {
     flex-direction: column;
     gap: 15px;
   }

   .stats-grid {
     justify-content: center;
   }

   .container {
     padding: 0 24px;
   }
 }

 .content-btn {
   padding: 10px -20px;

   color: rgb(0, 0, 0);
   width: 70px;
   text-align: center;
   border-radius: 3px;
   cursor: pointer;
   transition: 0.3s;
 }

 .content-btn:hover {
   color: #ea580c;
   transform: scale(1.05);
 }

 .content-btnn {

   margin-left: -2px;
   margin-top: 8px;
   color: #cbd5e1;

   text-align: start;
   border-radius: 3px;
   cursor: pointer;
   transition: 0.3s;
 }

 .content-btnn:hover {
   color: #ea580c;
   transform: scale(1.05);
 }

 .content-btnnn {

   margin-left: -2px;
   margin-top: -3px;
   color: #cbd5e1;

   text-align: start;
   border-radius: 3px;
   cursor: pointer;
   transition: 0.3s;
 }

 .content-btnnn:hover {
   color: #ea580c;
   transform: scale(1.05);
 }

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

 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
   color: #1a1a2e;
 }

 /* Main Container */
 .main-container {
   max-width: 1300px;
   margin: 0 auto;
   background: white;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
 }

 /* Hero Section - SchoolERP Style */
 .hero {
   background: linear-gradient(135deg, #0f3460 0%, #ffffff 100%);
   color: white;
   padding: 60px 80px;
   text-align: center;
 }

 .hero h1 {
      margin-left: -25px;
    text-align: left;
   font-size: 3rem;
   margin-bottom: 15px;
   letter-spacing: -1px;
 }

 .hero .tagline {
   font-size: 1.2rem;
   opacity: 0.9;
   margin-bottom: 10px;
 }

 .hero .subtitle {
   font-size: 0.95rem;
   opacity: 0.7;
   margin-bottom: 25px;
 }

 .hero .badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.15);
   padding: 8px 20px;
   border-radius: 30px;
   font-size: 0.85rem;
   margin-top: 10px;
 }

 /* Social Icons */
 .social-icons {
   margin-top: 25px;
 }

 .social-icons a {
   display: inline-block;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.2);
   color: white;
   text-align: center;
   line-height: 40px;
   border-radius: 50%;
   margin: 0 5px;
   text-decoration: none;
   font-weight: bold;
   transition: all 0.3s;
 }

 .social-icons a:hover {
   background: #ff6b6b;
   transform: translateY(-3px);
 }

 /* Terms & Conditions Section */
 .terms-section {
   padding: 60px 80px;
   background: white;
 }

 .terms-header {
   text-align: center;
   margin-bottom: 50px;
 }

 .terms-header h2 {
   font-size: 2.2rem;
   color: #0f3460;
   margin-bottom: 10px;
   position: relative;
   display: inline-block;
 }

 .terms-header h2:after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: #ff6b6b;
 }

 .terms-header p {
   color: #666;
   margin-top: 20px;
 }

 /* Terms Grid */
 .terms-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
 }

 .term-card {
   background: #f8f9fc;
   border-radius: 12px;
   padding: 25px;
   transition: all 0.3s ease;
   border: 1px solid #eef2f7;
 }

 .term-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   border-color: #0f3460;
 }

 .term-card h3 {
   color: #0f3460;
   font-size: 1.2rem;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .term-card p {
   color: #555;
   line-height: 1.6;
   font-size: 0.95rem;
 }

 .term-card ul {
   margin-left: 20px;
   margin-top: 10px;
 }

 .term-card ul li {
   color: #555;
   line-height: 1.6;
   font-size: 0.95rem;
   margin-bottom: 5px;
 }

 /* Full Width Card */
 .full-width {
   grid-column: span 2;
 }

 /* Footer - Exactly as per your image */
 .footer {
   background: #0f3460;
   color: white;
   padding: 50px 80px 30px;
 }

 .footer-content {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
   margin-bottom: 40px;
 }

 .footer-section h4 {
   font-size: 1.1rem;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 10px;
 }

 .footer-section h4:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 35px;
   height: 2px;
   background: #ff6b6b;
 }

 .footer-section p,
 .footer-section a {
   color: #cbd5e1;
   text-decoration: none;
   line-height: 2;
   font-size: 0.9rem;
   display: block;
   transition: color 0.3s;
 }

 .footer-section a:hover {
   color: #ff6b6b;
 }

 .footer-bottom {
   text-align: center;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   color: #cbd5e1;
   font-size: 0.85rem;
 }

 .navbar {
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(8px);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05);
   padding: 16px 0;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .nav-links {
   display: flex;
   gap: 32px;
   align-items: center;
   flex-wrap: wrap;
 }

 .nav-links a {
   text-decoration: none;
   font-weight: 500;
   color: #1e293b;
   transition: 0.2s;
 }

 .nav-links a:hover {
   color: #f97316;
 }

 .btn-demo {
   background: #f97316;
   color: white !important;
   padding: 8px 20px;
   border-radius: 40px;
   font-weight: 600;
   box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
 }

 a.btn-demo {
   margin-right: 42px;
 }

 .btn-demo:hover {
   background: #ea580c;
   transform: translateY(-2px);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .hero {
     padding: 40px 30px;
   }

   .hero h1 {
     font-size: 2.2rem;
   }

   .terms-section {
     padding: 40px 30px;
   }

   .footer {
     padding: 40px 30px;
   }

   .footer-content {
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
   }
 }

 @media (max-width: 768px) {
   .terms-grid {
     grid-template-columns: 1fr;
   }

   .full-width {
     grid-column: span 1;
   }

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

   .footer-section h4:after {
     left: 50%;
     transform: translateX(-50%);
   }

   .hero h1 {
     font-size: 1.8rem;
   }
 }

 @media (max-width: 480px) {
   .terms-section {
     padding: 30px 20px;
   }

   .hero {
     padding: 30px 20px;
   }
 }

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

 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
   color: #1a1a2e;
 }

 /* Main Container */
 .main-container {
   max-width: 1300px;
   margin: 0 auto;
   background: white;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
 }

 /* Hero Section - SchoolERP Style */
 .hero {
   background: linear-gradient(135deg, #0f3460 0%, #ffffff 100%);
   color: white;
   padding: 60px 80px;
   text-align: center;
 }

 .hero h1 {
   font-size: 3rem;
   margin-bottom: 15px;
   letter-spacing: -1px;
 }

 .hero .tagline {
   font-size: 1.2rem;
   opacity: 0.9;
   margin-bottom: 10px;
 }

 .hero .subtitle {
   font-size: 0.95rem;
   opacity: 0.7;
   margin-bottom: 25px;
 }

 .hero .badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.15);
   padding: 8px 20px;
   border-radius: 30px;
   font-size: 0.85rem;
   margin-top: 10px;
 }

 /* Social Icons */
 .social-icons {
   margin-top: 25px;
 }

 .social-icons a {
   display: inline-block;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.2);
   color: white;
   text-align: center;
   line-height: 40px;
   border-radius: 50%;
   margin: 0 5px;
   text-decoration: none;
   font-weight: bold;
   transition: all 0.3s;
 }

 .social-icons a:hover {
   background: #ff6b6b;
   transform: translateY(-3px);
 }

 /* Privacy Policy Section */
 .privacy-section {
   padding: 60px 80px;
   background: white;
 }

 .privacy-header {
   text-align: center;
   margin-bottom: 50px;
 }

 .privacy-header h2 {
   font-size: 2.2rem;
   color: #0f3460;
   margin-bottom: 10px;
   position: relative;
   display: inline-block;
 }

 .privacy-header h2:after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: #ff6b6b;
 }

 .privacy-header p {
   color: #666;
   margin-top: 20px;
 }

 /* Privacy Grid */
 .privacy-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
 }

 .privacy-card {
   background: #f8f9fc;
   border-radius: 12px;
   padding: 25px;
   transition: all 0.3s ease;
   border: 1px solid #eef2f7;
 }

 .privacy-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   border-color: #0f3460;
 }

 .privacy-card h3 {
   color: #0f3460;
   font-size: 1.2rem;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .privacy-card p {
   color: #555;
   line-height: 1.6;
   font-size: 0.95rem;
   margin-bottom: 8px;
 }

 .privacy-card ul {
   margin-left: 20px;
   margin-top: 10px;
 }

 .privacy-card ul li {
   color: #555;
   line-height: 1.6;
   font-size: 0.95rem;
   margin-bottom: 8px;
 }

 /* Highlight Box */
 .highlight-box {
   background: linear-gradient(135deg, #0f346010, #ff6b6b10);
   border-left: 4px solid #ff6b6b;
   padding: 20px;
   border-radius: 8px;
   margin-top: 15px;
 }

 /* Cookie Table */
 .cookie-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 15px;
 }

 .cookie-table th,
 .cookie-table td {
   border: 1px solid #e0e4e8;
   padding: 10px;
   text-align: left;
   font-size: 0.9rem;
 }

 .cookie-table th {
   background: #0f3460;
   color: white;
 }

 .cookie-table td {
   color: #555;
 }

 /* Full Width */
 .full-width {
   grid-column: span 2;
 }

 /* Footer */
 .footer {
   background: #0f3460;
   color: white;
   padding: 50px 80px 30px;
 }

 .footer-content {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
   margin-bottom: 40px;
 }

 .footer-section h4 {
   font-size: 1.1rem;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 10px;
 }

 .footer-section h4:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 35px;
   height: 2px;
   background: #ff6b6b;
 }

 .footer-section p,
 .footer-section a {
   color: #cbd5e1;
   text-decoration: none;
   line-height: 2;
   font-size: 0.9rem;
   display: block;
   transition: color 0.3s;
 }

 .footer-section a:hover {
   color: #ff6b6b;
 }

 .footer-bottom {
   text-align: center;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   color: #cbd5e1;
   font-size: 0.85rem;
 }

 .navbar {
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(8px);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05);
   padding: 16px 0;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .nav-links {
   display: flex;
   gap: 32px;
   align-items: center;
   flex-wrap: wrap;
 }

 .nav-links a {
   text-decoration: none;
   font-weight: 500;
   color: #1e293b;
   transition: 0.2s;
 }

 .nav-links a:hover {
   color: #f97316;
 }

 .btn-demo {
   background: #f97316;
   color: white !important;
   padding: 8px 20px;
   border-radius: 40px;
   font-weight: 600;
   box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
 }

 a.btn-demo {
   margin-right: 42px;
 }

 .btn-demo:hover {
   background: #ea580c;
   transform: translateY(-2px);
 }

 /* Responsive */
 @media (max-width: 992px) {
   .hero {
     padding: 40px 30px;
   }

   .hero h1 {
     font-size: 2.2rem;
   }

   .privacy-section {
     padding: 40px 30px;
   }

   .footer {
     padding: 40px 30px;
   }

   .footer-content {
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
   }
 }

 @media (max-width: 768px) {
   .privacy-grid {
     grid-template-columns: 1fr;
   }

   .full-width {
     grid-column: span 1;
   }

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

   .footer-section h4:after {
     left: 50%;
     transform: translateX(-50%);
   }

   .hero h1 {
     font-size: 1.8rem;
   }

   .cookie-table {
     font-size: 0.8rem;
   }
 }

 @media (max-width: 480px) {
   .privacy-section {
     padding: 30px 20px;
   }

   .hero {
     padding: 30px 20px;
   }
 }


 body {
   font-family: 'Inter', sans-serif;
   background-color: #f8fafc;
   color: #1e293b;
   line-height: 1.5;
 }

 .container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 24px;
 }

 section.hero {
   background: #0f172a;
 }

 /* navbar - consistent with main site */
 .navbar {
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(8px);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05);
   padding: 16px 0;
 }

 .nav-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .logo-text {
   font-size: 28px;
   font-weight: 800;
   letter-spacing: -0.5px;
   background: linear-gradient(135deg, #1E3C72, #2A5298);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-decoration: none;
 }

 .logo-text span {
   background: linear-gradient(135deg, #f97316, #f43f5e);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .nav-links {
   display: flex;
   gap: 32px;
   align-items: center;
   flex-wrap: wrap;
 }

 .nav-links a {
   text-decoration: none;
   font-weight: 500;
   color: #1e293b;
   transition: 0.2s;
 }

 .nav-links a:hover {
   color: #f97316;
 }

 .btn-outline-nav {
   border: 1.5px solid #f97316;
   padding: 8px 20px;
   border-radius: 40px;
   color: #f97316 !important;
   font-weight: 600;
 }

 .btn-outline-nav:hover {
   background: #fff7ed;
 }

 /* demo hero section */
 .demo-hero {
   padding: 60px 0 40px;
   background: linear-gradient(145deg, #fef9f0 0%, #ffffff 100%);
 }

 .demo-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }

 .demo-badge {
   display: inline-block;
   background: #fff1e6;
   padding: 6px 16px;
   border-radius: 100px;
   font-size: 0.85rem;
   font-weight: 600;
   color: #f97316;
   margin-bottom: 24px;
 }

 .demo-left h1 {
   font-size: 3rem;
   font-weight: 800;
   line-height: 1.2;
   margin-bottom: 20px;
   letter-spacing: -1px;
 }

 .demo-left h1 span {
   background: linear-gradient(120deg, #f97316, #facc15);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .demo-left p {
   font-size: 1.1rem;
   color: #475569;
   margin-bottom: 32px;
 }

 .help-list {
   list-style: none;
   margin-top: 24px;
 }

 .help-list li {
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
 }

 .help-list li i {
   color: #f97316;
   font-size: 1.3rem;
   width: 28px;
 }

 .demo-right {
   background: white;
   border-radius: 32px;
   padding: 36px 32px;
   box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.15);
   border: 1px solid #f1f5f9;
 }

 .form-group {
   margin-bottom: 20px;
 }

 .form-group label {
   display: block;
   font-weight: 600;
   margin-bottom: 8px;
   font-size: 0.9rem;
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
   width: 100%;
   padding: 12px 16px;
   border-radius: 16px;
   border: 1px solid #e2e8f0;
   font-family: 'Inter', sans-serif;
   transition: 0.2s;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
   outline: none;
   border-color: #f97316;
   box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
 }

 .btn-submit {
   background: #f97316;
   color: white;
   width: 100%;
   padding: 14px;
   border: none;
   border-radius: 40px;
   font-weight: 700;
   font-size: 1rem;
   cursor: pointer;
   transition: 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }

 .btn-submit:hover {
   background: #ea580c;
   transform: translateY(-2px);
 }

 .form-note {
   font-size: 0.75rem;
   text-align: center;
   margin-top: 16px;
   color: #64748b;
 }

 /* features section */
 .features-section {
   padding: 60px 0;
   background: white;
   text-align: center;
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   margin-top: 48px;
 }

 .feature-card {
   padding: 24px;
   border-radius: 24px;
   background: #f8fafc;
   transition: 0.2s;
 }

 .feature-card i {
   font-size: 2.5rem;
   color: #f97316;
   margin-bottom: 16px;
 }

 .feature-card h3 {
   font-size: 1.3rem;
   margin-bottom: 12px;
 }

 /* cta bottom */
 .bottom-cta {
   background: #0f172a;
   color: white;
   text-align: center;
   padding: 50px 0;
 }

 .bottom-cta h3 {
   font-size: 1.8rem;
   margin-bottom: 16px;
 }

 .btn-phone {
   background: #f97316;
   display: inline-block;
   padding: 12px 32px;
   border-radius: 40px;
   color: white;
   text-decoration: none;
   font-weight: 700;
   margin-top: 16px;
 }

 footer {
   background: #0f172a;
   color: #cbd5e1;
   padding: 40px 0 24px;
   border-top: 1px solid #1e293b;
 }

 .footer-bottom {
   text-align: center;
   padding-top: 24px;
 }

 @media (max-width: 900px) {

   .demo-grid,
   .features-grid {
     grid-template-columns: 1fr;
   }

   .demo-left h1 {
     font-size: 2.2rem;
   }

   .nav-flex {
     flex-direction: column;
     gap: 12px;
   }
 }