:root {
      --main-gradient: linear-gradient(135deg, #4F46E5, #06B6D4);
      --second-gradient: linear-gradient(135deg, #06B6D4, #a78bfa);
      --accent-color: #4F46E5; /* indigo-600 */
      --accent-2: #06B6D4;     /* cyan-500 */
      --text-dark: #0F172A;    /* slate-900 */
      --bg-soft: #F8FAFC;      /* slate-50 */
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Open Sans', sans-serif;
      color: var(--text-dark);
      margin: 0;
      padding: 0;
      background: var(--bg-soft);
    }
    h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; margin: 0; }
    h1 { font-size: 2.7rem; line-height: 1.15; margin-bottom: 0.5em; }
    h2 { font-size: 2rem;   margin-bottom: 0.5em; }
    h3 { font-size: 1.5rem; margin-bottom: 0.5em; }
    p  { font-size: 1rem;   line-height: 1.7; margin: 0.5em 0; color:#334155; }
    .container { width: 92%; max-width: 1200px; margin: 0 auto; }
    .grad{ background: var(--main-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .grad2{ background: var(--second-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    /* Header */
    .header { background: #fff; padding: 0.6rem 0; border-bottom: 1px solid #e5e7eb; position: sticky; top:0; z-index:50; }
    .header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .logo img { width: 130px; height: auto; object-fit: contain; }
    .header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; }
    .header nav ul li a { text-decoration: none; color: #0f172a; font-weight: 600; }
    .header nav ul li a:hover { color:#4338CA; }
.hamburger{
  position: relative;
  width:42px;height:42px;border:0;border-radius:10px;
  background:#0F172A;color:#fff;display:none;place-items:center;
  box-shadow:0 8px 24px rgba(2,6,23,.15);cursor:pointer;z-index:60;font-size:1.2rem;
}
.hamburger i{line-height:1;}
    /* Hero */
    .hero { color: #fff; text-align: center; min-height: 72vh; display: flex; align-items: center; position: relative; overflow: hidden; }
    .hero::before { content:""; position:absolute; inset:0; background: var(--main-gradient); }
    .hero::after { content:""; position:absolute; inset:0; opacity: .18; mix-blend: overlay; }
    .hero-pattern{ background-image: url('/assets/img/death-star.svg'); background-repeat: repeat; position: absolute; width: 140%; height: 140%; top: -20%; left:-20%; opacity: 0.07; pointer-events: none; z-index: 1; }
    .hero-content { position: relative; z-index: 2; }
    .hero .container { max-width: 780px; }
    .hero h1 span { display:block; }
    .subheadline { font-size: 1.15rem; max-width: 760px; margin: 0.75em auto; color: #e5e7eb; }
    .hero-badges { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem }
    .badge { background: rgba(255,255,255,.12); backdrop-filter: blur(6px); padding:.4rem .7rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:.85rem }

    /* Buttons */
    .btn { display:inline-block; padding:.8rem 1.5rem; font-size:1rem; border:none; border-radius:10px; text-decoration:none; cursor:pointer; font-weight:700; transition: transform .08s ease, box-shadow .2s ease; }
    .btn:active { transform: translateY(1px); }
    .header #nav-menu .primary-btn, .hero .hero-buttons .primary-btn { background: #1E293B; color:#fff; box-shadow: 0 8px 24px rgba(2,6,23,.25); }
    .header #nav-menu .primary-btn:hover, .hero .hero-buttons .primary-btn:hover { background:#0F172A; }
    .header #nav-menu .secondary-btn { border:2px solid #ffffff; color:#fff; }
    #get-started .primary-btn { background: #1E293B; color:#fff; box-shadow: 0 8px 24px rgba(2,6,23,.25); }
    #get-started .primary-btn:hover { background:#0F172A;box-shadow: 0 8px 24px rgb(44 77 221 / 53%); }
    /* About */
    .about { background: #fff; padding: 64px 0; text-align:center; }
    .about p { max-width: 880px; margin: 0 auto; }

    /* Benefits */
    .benefits { background: var(--bg-soft); padding: 64px 0; }
    .benefits h2 { text-align:center; margin-bottom: 2rem; }
    .benefits-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.25rem; }
    .benefit-item { background:#fff; padding: 1.5rem; border-radius: 14px; text-align:left; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 30px rgba(2, 6, 23, 0.05); border:1px solid #e5e7eb; }
    .benefit-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background: var(--second-gradient); color:#0b1020; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); margin-bottom:.75rem }
    .benefit-item h3 { font-size:1.1rem; margin-bottom:.35rem; }
    .benefit-item p { font-size:.98rem; color:#475569; }

    /* Features (alt) */
    .features-alt { background: #111827; color:#fff; padding: 80px 0; }
    .feature-row { display:flex; flex-wrap:wrap; align-items:center; margin-bottom:60px; gap:2rem; }
    .feature-text { flex:1; min-width: 280px; }
    .feature-text h3 { font-size: 1.8rem; margin-bottom: 1rem; }
    .feature-text p { font-size: 1rem; color: #d1d5db; }
    .feature-image { flex:1; text-align:center; }
    .feature-image img { max-width:100%; border-radius:16px; box-shadow: 0 4px 24px rgba(0,0,0,.35); }

    /* How it works — simple */
    .how-it-works { background:#fff; padding:64px 0; }
    .how-it-works h2 { text-align:center; margin-bottom: 2rem; }
    .steps { list-style: none; padding:0; margin:0 auto; max-width:680px; counter-reset: step; }
    .steps li { position:relative; padding:.5rem 0 .5rem 3rem; margin-bottom:1.25rem; }
    .steps li::before { content: counter(step); counter-increment: step; position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:50%; background: var(--accent-2); color:#0b1020; font-weight:700; text-align:center; line-height:2rem; }

    /* Detailed How It Works */
    .how-it-works-detailed { background:#fff; padding:64px 0; }
    .how-it-works-detailed .section-title { text-align:center; font-size:2rem; font-weight:700; margin-bottom:.5rem; }
    .how-it-works-detailed .section-subtitle { text-align:center; max-width:760px; margin:0 auto 2rem; font-size:1.05rem; color:#475569; }
    .how-it-works-detailed .detailed-steps { max-width: 940px; margin:0 auto 3rem; }
    .how-it-works-detailed .step { margin-bottom: 2rem; background:#F9FAFB; border:1px solid #e5e7eb; border-radius:14px; padding:1.25rem 1.25rem 1rem; }
    .how-it-works-detailed .step h3 { font-size:1.25rem; margin-bottom:.5rem; color:#111827; }
    .how-it-works-detailed .step ul { list-style: disc; padding-left:1.25rem; color:#4b5563; margin-bottom:.75rem }
    .how-it-works-detailed .what-you-get { background: linear-gradient(180deg, #ffffff, #f6f9ff); padding: 30px; border-radius: 16px; box-shadow: 0 20px 60px rgba(17, 24, 39, 0.08); max-width: 940px; margin:0 auto; border:1px solid #e5e7eb; }
    .how-it-works-detailed .what-you-get h3 { text-align:center; margin-bottom:1rem; font-size:1.35rem; color:#0f172a; }
    .how-it-works-detailed .included-table { width:100%; border-collapse: collapse; font-size:1rem; }
    .how-it-works-detailed .included-table th, .how-it-works-detailed .included-table td { padding:12px 10px; border-bottom:1px solid #e5e7eb; text-align:left; color:#475569; }
    .how-it-works-detailed .included-table th { background:#eef2ff; color:#1e293b; font-weight:700; }

    /* Reviews */
    .reviews { background:#fff; padding:64px 0; text-align:center; }
    .reviews-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.25rem; }
    .review { background:#F9FAFB; padding:1.25rem; border-radius:14px; border:1px solid #e5e7eb; text-align:left; }
    .review p { color:#111827; font-weight:600; }
    .review small { display:block; margin-top:.5rem; color:#6b7280; }
    /* Get started */
    #get-started .container p{color: #dee1e5;}
    /* FAQ */
    .faq { background:#f3f4f6; padding:64px 0; }
    .faq h2 { text-align:center; margin-bottom: 2rem; }
    .faq-item { max-width:880px; margin:0 auto 1rem; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem 1.25rem; }
    .faq-item h3 { font-size:1.05rem; }

    /* CTA */
    .cta { background:#0F172A; color:#fff; padding: 64px 0; text-align:center; }
    .cta .btn { margin-top:.5rem }

    /* Trust */
    .trust { background: var(--main-gradient); color:#fff; padding: 40px 0; }
    .trust-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; text-align:center; }
    .trust-list li { display:flex; align-items:center; font-weight:700; }
    .trust-list i { font-size:1.2rem; margin-right:.5rem; color:#fff; }

    /* Footer */
    .footer { background:#0b1020; color:#cbd5e1; text-align:center; padding: 28px 0; }
    .footer a { color:#E5E7EB; }
    .footer-nav a { margin:0 .25rem }
    .footer p{color: #dee1e5;}
    /* Contact page */
    .contact-us .primary-btn { background: #1E293B; color:#fff; box-shadow: 0 8px 24px rgba(2,6,23,.25); }
    .contact-us .primary-btn:hover { background:#0F172A; }
    /* Responsive */
    @media (max-width: 840px) {
      .hero h1 { font-size: 2.2rem; }
      .header{ position: sticky; top:0; z-index:50; }

  .hamburger{display:grid;}
  .header nav ul{display:none;}
  #nav-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 12px 32px rgba(2,6,23,.12);padding:12px 16px;}
  #nav-menu.open{display:flex;flex-direction:column;gap:10px;}
  .features-alt .container .feature-row{    display: flex;flex-direction: column; }
  .features-alt .container .feature-text {
    order: 1;                    
  }
  .features-alt .container .feature-image {
    order: 2;     
    margin-top: 1rem; 
  }
}