:root{
    --navy: #0B1F3A;
    --navy-soft: #142c4f;
    --blue: #1E5AA8;
    --gold: #d8a434;
    --gold-light: #E4C888;
    --bg: #FFFFFF;
    --bg-light: #F5F7FA;
    --text: #2D3748;
    --radius: 24px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family:'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Playfair Display', serif;
    color: var(--navy);
    line-height: 1.15;
  }
  a{ text-decoration:none; color:inherit; }
  img{ max-width:100%; display:block; }
  .container{ max-width:1240px; margin:0 auto; padding:0 24px; }
  section{ position:relative; }

  /* ---------- utility ---------- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color: var(--gold); font-weight:700; margin-bottom:16px;
  }
  .eyebrow::before{ content:''; width:24px; height:2px; background: var(--gold); display:inline-block; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding: 16px 32px; border-radius: 999px; font-weight:600; font-size:15px;
    cursor:pointer; transition: all .35s cubic-bezier(.2,.8,.2,1); border:1px solid transparent;
    min-height:44px; white-space:nowrap;
  }
  .btn-primary{
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy); box-shadow: 0 10px 30px -10px rgba(200,162,77,.6);
  }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px -10px rgba(200,162,77,.75); }
  .btn-secondary{
    background: rgba(11,31,58,.03); color: var(--navy); border:1px solid rgba(11,31,58,.15);
    backdrop-filter: blur(6px);
  }
  .btn-secondary:hover{ background: var(--navy); color:#fff; border-color: var(--navy); transform: translateY(-3px); }
  .btn-gold-solid{
    background: var(--gold); color: var(--navy); font-weight:700;
    box-shadow: 0 10px 30px -8px rgba(200,162,77,.5);
  }

  .btn-white{
    background: #fff; color: var(--navy); font-weight:700;
    box-shadow: 0 10px 30px -8px rgba(200,162,77,.5);
  }

  .btn-white:hover{ background: #229656; color:#fff; border-color: var(--navy); transform: translateY(-3px); }

  .btn-gold-solid:hover{ background: var(--gold-light); transform: translateY(-3px); }

  .card{
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid rgba(11,31,58,.06);
    box-shadow: 0 2px 8px rgba(11,31,58,.04);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
  }
  .card:hover{
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -20px rgba(11,31,58,.18);
    border-color: rgba(200,162,77,.35);
  }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  .reveal.visible{ opacity:1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    *{ scroll-behavior:auto !important; }
  }


  

  /* ---------- services ---------- */
  #services{ padding: 50px 0; background: var(--bg-light); }
  .section-head{ max-width: 640px; margin: 0 auto 64px; text-align:center; }
  .section-head h2{ font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom:18px; }
  .section-head p{ color:#4A5568; font-size:16px; line-height:1.7; }
  .services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
  .service-card{ padding: 30px 24px; position:relative; overflow:hidden; }
  .service-card .gold-line{ position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin:left; transition: transform .5s ease; }
  .service-card:hover .gold-line{ transform: scaleX(1); }
  .icon-wrap{
    width:60px; height:60px; border-radius:16px; margin-bottom:26px;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    display:flex; align-items:center; justify-content:center;
  }
  .service-card h3{ font-size:22px; margin-bottom:14px; }
  .service-card ul{ list-style:none; margin: 16px 0 0; }
  .service-card ul li{ font-size:14.5px; color:#4A5568; padding-left:20px; position:relative; margin-bottom:9px; }
  .service-card ul li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background: var(--gold); }
  .service-card p{ color:#4A5568; font-size:15px; line-height:1.7; }
  .card-btn{
    display:flex; flex-direction:row; justify-content: center; margin-top: 20px; gap: 20px;

  }
 
  /* ---------- why choose ---------- */
  #why{ padding: 130px 0; }
  .why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:72px; align-items:center; }
  .why-list{ list-style:none; display:flex; flex-direction:column; gap:22px; }
  .why-list li{ display:flex; align-items:flex-start; gap:16px; font-size:16px; color:#2D3748; font-weight:500; }
  .why-list .check{
    flex:none; width:30px; height:30px; border-radius:9px; margin-top:2px;
    background: rgba(200,162,77,.14); display:flex; align-items:center; justify-content:center;
  }
  .why-visual img{ 
     width:400px; height:500px; object-fit:cover; border-radius: var(--radius);
     border: 5px solid #d8a434; box-shadow: 0 20px 40px -10px rgba(11,31,58,.2); 
     
    }
.whatsapp-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
}

.whatsapp-btn:hover{
    background:#1EBE5D;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(37,211,102,.35);
}

.whatsapp-btn i{
    font-size:22px;
}