/* =========================================
       RESET
    ========================================= */

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

    html{
      scroll-behavior:smooth;
    }

    body{

      font-family:
        Inter,
        system-ui,
        Arial,
        sans-serif;

      background:
        radial-gradient(
          circle at top left,
          rgba(49,46,129,.65) 0%,
          transparent 35%
        ),

        radial-gradient(
          circle at bottom right,
          rgba(14,116,144,.32) 0%,
          transparent 35%
        ),

        #020617;

      color:white;

      min-height:100vh;

      overflow-x:hidden;

    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      display:block;
      max-width:100%;
    }

    /* =========================================
       NAVBAR
    ========================================= */

    .navbar{

      position:sticky;

      top:0;

      z-index:1000;

      display:flex;

      align-items:center;

      justify-content:space-between;

      padding:18px 40px;

      background:
        rgba(2,6,23,.72);

      backdrop-filter:blur(18px);

      border-bottom:
        1px solid rgba(255,255,255,.06);

    }

    .nav-left{

      display:flex;

      align-items:center;

      gap:26px;

    }

    .logo{

      width:42px;
      height:42px;

      object-fit:contain;

    }

    .nav-links{

      display:flex;

      align-items:center;

      gap:22px;

    }

    .nav-links a{

      color:#cbd5e1;

      font-weight:600;

      transition:.25s ease;

    }

    .nav-links a:hover{

      color:white;

    }

    .login-btn{

      display:inline-flex;

      align-items:center;

      justify-content:center;

      padding:13px 24px;

      border-radius:16px;

      font-weight:800;

      background:
        linear-gradient(
          135deg,
          #7c3aed,
          #4f46e5
        );

      box-shadow:
        0 0 30px rgba(124,58,237,.25);

      transition:.25s ease;

    }

    .login-btn:hover{

      transform:translateY(-2px);

      filter:brightness(1.06);

    }

    /* =========================================
       HERO
    ========================================= */

    .heropac{

      width:min(1100px,92%);

      margin:auto;

      padding:
        90px 20px 30px;

      text-align:center;

    }

    .heropac-badge{

      display:inline-flex;

      align-items:center;

      justify-content:center;

      padding:12px 22px;

      border-radius:999px;

      background:
        rgba(59,130,246,.10);

      border:
        1px solid rgba(96,165,250,.25);

      color:#93c5fd;

      font-weight:700;

      margin-bottom:28px;

    }

    .hero h1{

      font-size:
        clamp(54px,7vw,92px);

      line-height:.96;

      font-weight:900;

      letter-spacing:-3px;

      margin-bottom:28px;

    }

    .hero p{

      width:min(760px,100%);

      margin:auto;

      color:#94a3b8;

      font-size:20px;

      line-height:1.8;

    }

    /* =========================================
       GRID
    ========================================= */

    .conditions{

      width:min(1300px,92%);

      margin:60px auto 20px;

      display:grid;

      grid-template-columns:
        repeat(
          auto-fit,
          minmax(280px,1fr)
        );

      gap:28px;

    }

    .condition-card{

      position:relative;

      overflow:hidden;

      min-height:320px;

      border-radius:30px;

      background:#0f172a;

      border:
        1px solid rgba(255,255,255,.08);

      transition:.35s ease;

      box-shadow:
        0 14px 45px rgba(0,0,0,.45);

    }

    .condition-card:hover{

      transform:translateY(-8px);

      border-color:
        rgba(99,102,241,.45);

      box-shadow:
        0 24px 70px rgba(0,0,0,.58),
        0 0 40px rgba(99,102,241,.18);

    }

    .condition-card img{

      position:absolute;

      inset:0;

      width:100%;
      height:100%;

      object-fit:cover;

      transition:transform .55s ease;

    }

    .condition-card:hover img{

      transform:scale(1.08);

    }

    .overlay{

      position:absolute;

      inset:0;

      background:
        linear-gradient(
          to top,
          rgba(2,6,23,.97) 10%,
          rgba(2,6,23,.58) 45%,
          rgba(2,6,23,.10) 100%
        );

    }

    .card-content{

      position:absolute;

      left:0;
      bottom:0;

      width:100%;

      padding:28px;

      z-index:2;

    }

    .card-content h2{

      font-size:34px;

      line-height:1.06;

      font-weight:850;

      letter-spacing:-1px;

      margin-bottom:14px;

    }

    .card-content p{

      color:#cbd5e1;

      line-height:1.7;

      margin-bottom:22px;

    }

    .card-btn{

      display:inline-flex;

      align-items:center;

      gap:10px;

      padding:13px 22px;

      border-radius:16px;

      font-weight:800;

      background:
        rgba(255,255,255,.08);

      border:
        1px solid rgba(255,255,255,.12);

      backdrop-filter:blur(12px);

      transition:.25s ease;

    }

    .card-btn:hover{

      background:
        linear-gradient(
          135deg,
          #7c3aed,
          #4f46e5
        );

      transform:translateY(-1px);

    }

    /* =========================================
       SEO CONTENT
    ========================================= */

    .seo-content{

      width:min(760px,90%);

      margin:90px auto 20px;

      text-align:center;

    }

    .seo-content h2{

      font-size:
        clamp(34px,4vw,52px);

      line-height:1.08;

      font-weight:900;

      letter-spacing:-2px;

      margin-bottom:22px;

    }

    .seo-content p{

      color:#94a3b8;

      font-size:18px;

      line-height:1.9;

      max-width:680px;

      margin:auto;

    }

    /* =========================================
       CTA
    ========================================= */

    .cta{

      width:min(1100px,92%);

      margin:90px auto 70px;

      padding:60px;

      border-radius:38px;

      background:
        linear-gradient(
          135deg,
          rgba(124,58,237,.24),
          rgba(59,130,246,.12)
        );

      border:
        1px solid rgba(255,255,255,.08);

      backdrop-filter:blur(20px);

      text-align:center;

    }

    .cta h2{

      font-size:
        clamp(38px,5vw,60px);

      line-height:1.05;

      margin-bottom:22px;

      letter-spacing:-2px;

    }

    .cta p{

      width:min(760px,100%);

      margin:auto auto 34px;

      color:#cbd5e1;

      line-height:1.8;

      font-size:18px;

    }

    .cta-btn{

      display:inline-flex;

      align-items:center;

      justify-content:center;

      padding:17px 34px;

      border-radius:18px;

      font-weight:900;

      font-size:18px;

      background:
        linear-gradient(
          135deg,
          #7c3aed,
          #4f46e5
        );

      box-shadow:
        0 0 35px rgba(99,102,241,.30);

      transition:.3s ease;

    }

    .cta-btn:hover{

      transform:translateY(-3px);

      filter:brightness(1.06);

    }

    /* =========================================
       FOOTER
    ========================================= */

    footer{

      text-align:center;

      padding:30px 20px 60px;

      color:#64748b;

      font-size:14px;

    }

    /* =========================================
       MOBILE
    ========================================= */

    @media(max-width:768px){

      .navbar{

        padding:18px 20px;

      }

      .nav-links{

        display:none;

      }

      .hero{

        padding:
          55px 18px 10px;

      }

      .hero-badge{

        font-size:14px;

        padding:10px 16px;

        margin-bottom:22px;

      }

      .hero h1{

        font-size:58px;

        line-height:.95;

        margin-bottom:22px;

      }

      .hero p{

        font-size:17px;

        line-height:1.75;

      }

      .conditions{

        margin-top:40px;

        gap:22px;

      }

      .condition-card{

        min-height:285px;

      }

      .card-content{

        padding:22px;

      }

      .card-content h2{

        font-size:28px;

      }

      .card-content p{

        font-size:15px;

        line-height:1.65;

      }

      .seo-content{

        width:88%;

        margin:65px auto 10px;

      }

      .seo-content h2{

        font-size:32px;

        line-height:1.12;

        margin-bottom:18px;

        letter-spacing:-1px;

      }

      .seo-content p{

        font-size:16px;

        line-height:1.75;

      }

      .cta{

        padding:42px 22px;

        margin:70px auto 60px;

      }

      .cta h2{

        font-size:38px;

        margin-bottom:18px;

      }

      .cta p{

        font-size:16px;

        line-height:1.75;

      }

      .cta-btn{

        width:100%;

      }

    }