:root{
    --violet:#6C5CE7;
    --violet-dark:#5A46E0;
    --ink:#14142B;
    --gray:#6B7280;
    --bg:#F7F7FB;
    --card:#FFFFFF;
    --green:#22C55E;
    --amber:#F59E0B;
    --blue:#3B82F6;
    --pink:#A855F7;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .container{max-width:1200px; margin:0 auto; padding:0 24px;}

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 40px;
    background:#fff;
  }
  .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink);}
  .logo-mark{
    width:34px; height:34px; border-radius:10px;
    background:linear-gradient(135deg,#8B7CF6,var(--violet-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:900; font-size:18px;
  }
  nav ul{list-style:none; display:flex; gap:32px; align-items:center;}
  nav a{font-size:14.5px; font-weight:500; color:#2b2b40;}
  nav a.active{color:var(--violet-dark); font-weight:700; border-bottom:2px solid var(--violet-dark); padding-bottom:4px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:10px; font-weight:700; font-size:14px;
    cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--violet); color:#fff; box-shadow:0 8px 20px rgba(108,92,231,.35);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-outline{background:#fff; color:var(--ink); border:1.5px solid #E5E5EF;}
  .btn-outline:hover{background:#F3F2FC;}
  .btn-white{background:#fff; color:var(--violet-dark);}

  .hero{
    display:grid; grid-template-columns:1fr 1.05fr; gap:40px;
    align-items:center; padding:50px 40px 60px;
    max-width:1200px; margin:0 auto;
  }
  .eyebrow-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:#EDEBFC; color:var(--violet-dark); font-weight:700; font-size:12.5px;
    padding:7px 14px; border-radius:20px; margin-bottom:20px;
  }
  .hero h1{ font-size:48px; line-height:1.12; font-weight:800; color:var(--ink); }
  .hero h1 span{color:var(--violet);}
  .hero p{ margin-top:18px; color:var(--gray); font-size:16px; line-height:1.65; max-width:460px; }
  .hero-cta{display:flex; gap:14px; margin-top:28px;}
  .trusted{margin-top:34px;}
  .trusted-text{font-size:13px; color:var(--gray);}

  .hero-visual{position:relative; border-radius:24px; overflow:hidden; background:linear-gradient(135deg,#EDEBFC,#F3F2FC); min-height:420px; display:flex; align-items:center; justify-content:center;}
  .hero-illustration{width:100%; max-width:420px;}
  .float-card{
    position:absolute; background:#fff; border-radius:14px; padding:10px 16px;
    display:flex; align-items:center; gap:10px; box-shadow:0 10px 30px rgba(20,20,43,.12);
    font-size:13px;
  }
  .float-card .ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }
  .float-card b{display:block; font-size:13px;}
  .float-card small{color:var(--gray); font-size:11.5px;}
  .fc-1{top:24px; left:24px;}
  .fc-1 .ico{background:#EDEBFC; color:var(--violet-dark);}
  .fc-2{bottom:24px; left:24px;}
  .fc-2 .ico{background:#E8F8EE; color:var(--green);}
  .fc-3{top:24px; right:24px;}
  .fc-3 .ico{background:#EAF2FF; color:var(--blue);}

  .stats-wrap{max-width:1200px; margin:10px auto 60px; padding:0 40px;}
  .stats{
    background:#fff; border-radius:20px; padding:34px 20px;
    display:grid; grid-template-columns:repeat(4,1fr);
    box-shadow:0 4px 24px rgba(20,20,43,.05);
  }
  .stat{display:flex; align-items:center; gap:14px; justify-content:center;}
  .stat-ico{
    width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:20px; flex-shrink:0;
  }
  .stat h3{font-size:24px; font-weight:800;}
  .stat p{font-size:13px; color:var(--gray); margin-top:2px;}

  .why{max-width:900px; margin:0 auto; text-align:center; padding:20px 24px 10px;}
  .section-badge{
    display:inline-block; background:#EDEBFC; color:var(--violet-dark); font-weight:700; font-size:12px;
    padding:6px 14px; border-radius:20px; letter-spacing:.5px;
  }
  .why h2{font-size:34px; font-weight:800; margin-top:16px;}
  .why p{color:var(--gray); margin-top:12px; font-size:15.5px; line-height:1.6;}

  .features{
    max-width:1200px; margin:44px auto 70px; padding:0 40px;
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  }
  .feature-card{
    background:#fff; border-radius:16px; padding:26px 20px; box-shadow:0 4px 20px rgba(20,20,43,.05);
    transition:transform .2s ease;
  }
  .feature-card:hover{transform:translateY(-4px);}
  .feature-ico{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff; margin-bottom:16px;
  }
  .feature-card h3{font-size:16px; font-weight:700; margin-bottom:8px;}
  .feature-card p{font-size:13.5px; color:var(--gray); line-height:1.55; margin-bottom:14px;}
  .feature-link{font-size:13px; font-weight:700;}

  /* ===== NEW: CATEGORIES SECTION ===== */
  .categories{
    max-width:1200px; margin:20px auto 70px; padding:0 40px;
  }
  .cat-grid{
    display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:36px;
  }
  .cat-card{
    background:#fff; border-radius:18px; padding:22px 16px; text-align:center;
    box-shadow:0 4px 20px rgba(20,20,43,.05); transition:transform .2s ease;
  }
  .cat-card:hover{transform:translateY(-4px);}
  .cat-ico-wrap{
    width:56px; height:56px; border-radius:16px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
  }
  .cat-ico-wrap svg{ width:28px; height:28px; }
  .cat-card h4{font-size:13.5px; font-weight:700; line-height:1.3;}
  .cat-card span{font-size:11.5px; color:var(--gray); display:block; margin-top:4px;}

  .cta-banner{
    background:linear-gradient(120deg,#5A46E0,#7C6AF0);
    margin:0; padding:70px 24px; text-align:center; position:relative; overflow:hidden;
  }
  .cta-banner h2{color:#fff; font-size:32px; font-weight:800;}
  .cta-banner p{color:#E4E1FB; margin-top:14px; font-size:15px;}
  .cta-banner .btn-white{margin-top:26px; padding:13px 26px;}
  .coin{ position:absolute; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #cfc4ff, #8f7ff0 60%, #6c5ce7); opacity:.5; }
  .coin1{top:20px; right:12%;} .coin2{bottom:20px; right:5%; width:50px; height:50px;}
  .coin3{bottom:30px; left:8%; width:56px; height:56px;} .coin4{top:60px; left:4%; width:40px; height:40px;}

  footer{background:#0F0F23; color:#C7C6DA; padding:60px 40px 30px;}
  .footer-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:20px; }
  .footer-grid h4{color:#fff; font-size:14px; margin-bottom:16px;}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:10px; font-size:13.5px;}
  .footer-grid li a{color:#C7C6DA; font-size:13.5px;}
  .footer-logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; margin-bottom:12px;}
  .footer-desc{font-size:13.5px; color:#8f8ea8;}
  .socials{display:flex; gap:10px; margin-top:6px;}
  .socials a{ width:32px; height:32px; border-radius:50%; background:#1E1E3A; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
  .footer-bottom{ max-width:1200px; margin:30px auto 0; padding-top:20px; border-top:1px solid #23233F; font-size:12.5px; color:#7d7c96; }

  .hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
  .hamburger span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; }
  .mobile-launch{display:none;}

  @media(max-width:980px){
    header{padding:16px 20px;}
    .hero{grid-template-columns:1fr; padding:34px 20px 40px;}
    .hero h1{font-size:36px;}
    .features{grid-template-columns:repeat(2,1fr); padding:0 20px;}
    .cat-grid{grid-template-columns:repeat(3,1fr); padding:0 20px;}
    .categories{padding:0 20px;}
    .stats{grid-template-columns:repeat(2,1fr); gap:24px;}
    .stats-wrap{padding:0 20px;}
    nav{ position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:#fff; transform:translateX(100%); transition:transform .3s ease; z-index:200; padding:90px 30px 30px; }
    nav.open{transform:translateX(0);}
    nav ul{display:flex; flex-direction:column; gap:22px; align-items:flex-start;}
    .hamburger{display:flex;}
    header .btn-primary{display:none;}
    .mobile-launch{display:inline-flex; margin-top:30px; width:100%; justify-content:center;}
    .nav-overlay{ display:none; position:fixed; inset:0; background:rgba(15,15,35,.4); z-index:150; }
    .nav-overlay.open{display:block;}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:520px){
    .features{grid-template-columns:1fr;}
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .stats{grid-template-columns:1fr;}
    .hero h1{font-size:30px;}
  }