:root{
      --g1: #3b4ec7;
      --g2: #0fd6ff;
      --accent: #26f0ff;
      --text: rgba(255,255,255,0.95);
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:'Poppins',system-ui,Arial,Helvetica,sans-serif;background:#fff;color:var(--text);}

    /* ===== HERO ===== */
    .hero {
      position:relative;
      min-height:560px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:80px 20px 120px;
      overflow:hidden;
      background: linear-gradient(135deg, var(--g1) 0%, #2e63e0 30%, #10b0ea 60%, var(--g2) 100%);
      isolation:isolate;
    }

    /* overlay shape mềm (blob) */
    .hero .shape {
      position:absolute;
      pointer-events:none;
      filter:blur(64px) saturate(120%);
      opacity:0.18;
      transform:translateZ(0);
      mix-blend-mode:screen;
    }
    .hero .shape.s1{ width:720px; height:520px; left:-180px; top:-120px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 50%); border-radius:48% 52% 40% 60% / 50% 45% 55% 50%;}
    .hero .shape.s2{ width:640px; height:520px; right:-140px; top:-140px; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.20), rgba(255,255,255,0.02) 48%); border-radius:48% 52% 60% 40% / 45% 50% 40% 55%;}
    .hero .shape.s3{ width:420px; height:260px; left:calc(50% - 210px); bottom:120px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 60%); border-radius:40% 60% 50% 50% / 50% 40% 60% 50%;}

    /* optional SVG decor */
    .hero svg.decor {
      position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0.06;
      transform-origin:center;
    }

    .hero .wrap .show,.hero p.lead .show,  .hero .cta .show
    {
      opacity:1;
      transform: scale(1);
    }

    /* nội dung */
    .hero .wrap {
      position:relative;
      z-index:5;
      max-width:1100px;
      width:100%;
      padding:0 24px;
      text-align:center;
      opacity: 0;
      transform: scale(0.90);
      transition: opacity 2s ease, transform 2s ease;
    }

    .hero h1{
      font-size:56px;
      line-height:1.02;
      margin:0 auto 18px;
      max-width:980px;
      font-weight:700;
      letter-spacing:0.6px;
      text-shadow: 0 10px 30px rgba(10,25,60,0.15);
      color:var(--text);
    }

    .hero p.lead{
      margin:0 auto;
      max-width:700px;
      font-size:18px;
      opacity:0.95;
      font-weight:400;
      opacity: 0;
      transform: scale(0.90);
      transition: opacity 2s ease, transform 2s ease;
    }

    .hero .cta{
      margin-top:34px;
      display:inline-block;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
      color:#065d6e;
      padding:12px 28px;
      border-radius:10px;
      text-decoration:none;
      font-weight:600;
      box-shadow: 0 8px 30px rgba(5,80,110,0.14);
      opacity: 0;
      transform: scale(0.90);
      transition: opacity 2s ease, transform 2s ease, box-shadow .18s ease; /* ✅ Gộp chung */
    }
    .hero .cta:hover{ 
      transform: translateY(-3px) scale(1.05); /* ✅ Thêm scale(1) để giữ tỷ lệ */
      box-shadow:0 18px 40px rgba(5,80,110,0.18); 
    }

    /* wave đáy */
    .hero .wave-wrap {
      position:absolute;
      left:0;
      right:0;
      bottom:-2px;
      z-index:4;
      line-height:0;
      transform:translateZ(0);
    }
    .hero .wrap.show,
    .hero p.lead.show,  
    .hero .cta.show {
      opacity:1;
      transform: scale(1);
    }