/* CSS Document */
    :root{
      /* Bright Teal + Lime */
      --bg: #F7FAFC;
      --panel: #ffffff;
      --stroke: #E2E8F0;

      --text: #0F172A;
      --muted: #64748B;

      --brand: #0EA5E9;   /* teal/sky */
      --brand2:#22C55E;   /* green */
      --lime:  #A3E635;   /* lime */

      --shadow: 0 18px 50px rgba(15,23,42,.08);
      --shadow2: 0 10px 28px rgba(15,23,42,.07);
      --radius: 22px;
    }

    body{
      font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 600px at 10% 5%, rgba(14,165,233,.20), transparent 60%),
        radial-gradient(900px 600px at 90% 10%, rgba(163,230,53,.20), transparent 60%),
        linear-gradient(180deg, #ffffff, #f1f5f9 60%, #ffffff);
      scroll-behavior: smooth;
    }

    /* Navbar */
    .navbar{
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--stroke);
      transition: all .25s ease;
    }
    .navbar.scrolled{
      box-shadow: 0 10px 40px rgba(2,6,23,.10);
      background: rgba(255,255,255,.94);
    }
    .navbar .nav-link{
      color: var(--text);
      font-weight: 700;
      opacity: .85;
    }
    .navbar .nav-link:hover{ opacity: 1; }

    .brand-badge{
      width: 40px; height: 40px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #fff;
      box-shadow: 0 12px 28px rgba(14,165,233,.18);
    }

    /* Buttons */
    .btn-cta{
      background: linear-gradient(135deg, #d9ff7a, #84cc16);
      border: 0;
      color: #0a1a03;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(132,204,22,.30);
    }
    .btn-cta:hover{ transform: translateY(-1px); }
    .btn-ghost{
      background: #fff;
      border: 1px solid #CBD5E1;
      color: var(--text);
      font-weight: 800;
    }
    .btn-ghost:hover{ transform: translateY(-1px); }

    /* Hero */
    #hero{
      padding-top: 7rem;
      padding-bottom: 4rem;
      min-height: 92vh;
      position: relative;
      overflow: hidden;
    }
    /* subtle dot pattern */
    #hero::before{
      content:"";
      position:absolute;
      inset:-80px;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(14,165,233,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, rgba(163,230,53,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 75%, rgba(34,197,94,.14) 0 2px, transparent 3px);
      background-size: 60px 60px;
      opacity: .5;
      transform: rotate(-6deg);
      pointer-events:none;
    }
    .hero-wrap{ position: relative; z-index: 2; }

    .hero-badge{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: .45rem .9rem;
      border-radius: 999px;
      background: rgba(14,165,233,.10);
      border: 1px solid rgba(14,165,233,.18);
      color: #075985;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .78rem;
    }
    .hero-badge i{ color: #65a30d; }

    .hero-title{
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.05;
      font-size: clamp(2.55rem, 4.6vw, 4.1rem);
      margin: .9rem 0 1rem;
    }
    .hero-title .hl{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .hero-lead{
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 52ch;
    }

    .trustbar{
      margin-top: 1.15rem;
      display:flex; flex-wrap:wrap; gap: .7rem;
      color: #334155;
      font-size: .92rem;
    }
    .trust-pill{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: .45rem .75rem;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--stroke);

      box-shadow: 0 10px 24px rgba(2,6,23,.06);
    }
    .trust-pill i{ color: var(--brand2); }

    /* Cards */
    .glass, .service-card, .testimonial, .contact-card{
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .hero-card{ padding: 1.35rem; }

    .hero-card label{ color: var(--muted); font-weight: 700; font-size: .9rem; }
    .form-control, .form-select, textarea{
      border: 1px solid #CBD5E1;
      background: #fff;
    }
    .form-control:focus, .form-select:focus, textarea:focus{
      border-color: rgba(14,165,233,.70);
      box-shadow: 0 0 0 .25rem rgba(14,165,233,.16);
    }

    .stats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .75rem;
      margin-top: 1rem;
    }
    .stat{
      padding: .85rem;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--stroke);
      text-align:center;
      box-shadow: var(--shadow2);
    }
    .stat .n{ font-weight: 900; font-size: 1.25rem; }
    .stat .t{ color: var(--muted); font-size: .85rem; margin:0; }

    /* Sections */
    section{ padding: 5rem 0; }
    .section-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(1.85rem, 2.3vw, 2.5rem);
    }
    .section-sub{
      color: var(--muted);
      max-width: 65ch;
      margin: .75rem auto 0;
    }
    .divider{
      width: 86px; height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      margin: 1.2rem auto 2.5rem;
      opacity: .95;
    }

    /* Photos */
    .photo-card{
      overflow: hidden;
      position: relative;
    }
    .photo-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .photo-overlay{
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(15,23,42,.00) 0%, rgba(15,23,42,.38) 70%, rgba(15,23,42,.55) 100%);
    }
    .photo-caption{
      position:absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      color: #fff;
    }
    .photo-caption .tag{
      display:inline-flex;
      gap:.45rem;
      align-items:center;
      font-weight: 900;
      border-radius: 999px;
      padding: .35rem .6rem;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(6px);
      font-size: .78rem;
    }

    /* Service cards */
    .service-card{
      height: 100%;
      transition: transform .2s ease, box-shadow .2s ease;
      box-shadow: var(--shadow2);
      overflow: hidden;
    }
    .service-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 26px 70px rgba(2,6,23,.12);
    }
    .service-photo{
      height: 160px;
      overflow: hidden;
      border-bottom: 1px solid var(--stroke);
    }
    .service-photo img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }
    .icon-chip{
      width: 48px; height: 48px;
      border-radius: 16px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(135deg, #e0f2fe, #dcfce7);
      border: 1px solid var(--stroke);
      color: #0284c7;
      font-size: 1.35rem;
      margin-bottom: .9rem;
    }
    .service-card p{ color: var(--muted); }
    .service-card ul{ padding-left: 1.1rem; }
    .service-card li{ color: #334155; }

    /* Soft section */
    .soft{
      background: #f1f5f9;
      border-top: 1px solid rgba(15,23,42,.06);
      border-bottom: 1px solid rgba(15,23,42,.06);
    }

    /* Feature list */
    .feature{
      display:flex; gap: 1rem;
      padding: 1rem;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow2);
      margin-bottom: .9rem;
    }
    .feature i{
      width: 44px; height: 44px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 16px;
      background: rgba(14,165,233,0.10);
      border: 1px solid rgba(14,165,233,0.18);
      color: #0284c7;
      font-size: 1.2rem;
      flex: 0 0 auto;
    }
    .feature h6{ margin:0; font-weight: 900; }
    .feature p{ margin:.2rem 0 0; color: var(--muted); font-size: .92rem; }

    /* CTA strip */
    #cta-strip{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.35);
      border-bottom: 1px solid rgba(255,255,255,.35);
    }
    #cta-strip .text-white-75{ opacity: .92; }

    /* Testimonials */
    .testimonial{ height: 100%; box-shadow: var(--shadow2); }
    .stars i{ color: #84cc16; }
    .quote{ color: var(--muted); }

    /* Contact */
    .contact-card{ height: 100%; box-shadow: var(--shadow2); }

    /* Footer */
    footer{
      background: #0F172A;
      color: #94A3B8;
      padding: 2.5rem 0 1.5rem;
    }
    footer a{ color: #e2e8f0; text-decoration: none; }
    footer a:hover{ text-decoration: underline; }

    /* Small devices */
    @media (max-width: 575.98px){
      #hero{ padding-top: 6.4rem; }
      .stats{ grid-template-columns: 1fr; }
      .service-photo{ height: 150px; }
    }

    /* Reveal */
    .reveal{ opacity: 0; transform: translateY(10px); transition: all .6s ease; }
    .reveal.on{ opacity: 1; transform: translateY(0); }

    /* Mobile sticky call bar */
    .mobile-callbar{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      padding: .65rem .85rem;
      background: rgba(255,255,255,.92);
      border-top: 1px solid var(--stroke);
      backdrop-filter: blur(10px);
      z-index: 1050;
      display: none;
    }
    @media (max-width: 767.98px){
      .mobile-callbar{ display: block; }
      body{ padding-bottom: 80px; }
    }
/* CSS Document */