/* ====== Reset & Base ====== */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 html,
 body {
     height: 100%
 }

 body {
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
     line-height: 1.45;
     background: #0b0b0b;
     color: #eeeeee;
 }

 /* ====== Theme variables ====== */
 :root {
     --bg: #0b0b0b;
     --fg: #eeeeee;
     --muted: #999999;
     --card: #1a1a1a;
     --glass: rgba(255, 255, 255, 0.04);
     --accent: var(--fg);
     --radius: 14px;
     --section-pad: 6rem;
 }

 /* ====== Layout ====== */
 .wrap {
     max-width: 1200px;
     margin: 0 auto;
     padding: 4rem 1.25rem
 }

 header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 1rem 0
 }

 .brand {
     display: flex;
     align-items: center;
     gap: .8rem
 }

 .lnh-logo {
     height: 60px;
     max-width: 100%;
     transition: transform 0.3s ease;
     cursor: pointer;
 }

 .lnh-logo:hover {
     transform: scale(1.1);
 }

 nav a {
     margin-left: 1rem;
     text-decoration: none;
     color: var(--muted);
     font-weight: 600
 }

 nav a.active {
     color: var(--fg)
 }

 /* ====== Hero ====== */
 .hero {
     display: grid;
     grid-template-columns: 1fr 380px;
     gap: 2rem;
     align-items: center;
     padding: 4rem 0
 }

 .hero .eyebrow {
     font-weight: 700;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: .8rem;
     margin-bottom: .5rem
 }

 .hero h1 {
     font-family: 'Fredoka';
     font-size: 3rem;
     line-height: 1;
     margin-bottom: 1rem
 }

 .hero p {
     color: var(--muted);
     max-width: 62ch
 }

 .sectors-list {
     background: var(--card);
     border-radius: 12px;
     padding: 1rem;
     box-shadow: 0 6px 20px var(--glass);
 }

 /* Sectors list buttons */
 .sectors-list button {
     display: block;
     width: 100%;
     text-align: left;
     padding: .8rem;
     border-radius: 10px;
     border: 0;
     background: transparent;
     cursor: pointer;
     font-weight: 700;
     margin-bottom: .45rem;
     color: var(--fg);
     /* text white in dark mode */
     transition: all 0.3s ease;
 }

 /* Hover effect with glow */
 .sectors-list button:hover {
     transform: translateY(-4px);
     box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(255, 255, 255, 0.2);
     color: var(--accent);
 }

 /* ====== Common section style ====== */
 section {
     padding: var(--section-pad) 0;
     border-top: 1px solid rgba(255, 255, 255, 0.04);
 }

 .section-head {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 1rem;
     margin-bottom: 2rem
 }

 .section-head h2 {
     font-family: 'Fredoka';
     font-size: 1.6rem
 }

 .section-head p {
     color: var(--muted);
     font-size: .95rem
 }

 /* ====== Grid cards ====== */
 .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem
 }

 .card {
     background: linear-gradient(180deg, #1f1f1f, #111111);
     padding: 1.25rem;
     border-radius: 12px;
     box-shadow: 0 6px 18px rgba(255, 255, 255, 0.04);
     transition: transform .28s ease, box-shadow .28s ease;
     overflow: hidden;
     border: 1px solid #222;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .card:hover {
     transform: translateY(-10px);
     box-shadow: 0 18px 40px rgba(255, 255, 255, 0.08)
 }

 .card h3 {
     font-family: 'Fredoka';
     margin-bottom: .5rem
 }

 .card p {
     color: var(--muted);
     font-size: .95rem;
     text-align: justify;
 }

 /* ====== CTA ====== */
 .cta {
     display: inline-block;
     padding: .9rem 1.2rem;
     border-radius: 12px;
     background: transparent;
     border: 2px solid var(--fg);
     font-family: 'Fredoka';
     cursor: pointer;
     text-decoration: none;
     color: var(--fg);
 }

 .cta:hover {
     transform: translateY(-6px)
 }

 /* Buttons container */
 .card-btns {
     display: flex;
     gap: 10px;
     margin-top: 1rem;
 }

 .card-contact-btn {
     background: #25D366;
     color: white;
     font-weight: 600;
     border: none;
     padding: 10px 20px;
     border-radius: 50px;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 .card-contact-btn:hover {
     transform: scale(1.05);
 }

 .card-contact-btn:active {
     transform: scale(0.95);
 }

 .card-whatsapp-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 24px;
     background-color: #25D366;
     color: white;
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     font-size: 16px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card-whatsapp-btn i {
     margin-right: 8px;
     font-size: 18px;
     transition: transform 0.3s ease;
 }

 .card-whatsapp-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .card-whatsapp-btn:hover i {
     transform: rotate(-20deg) scale(1.2);
 }

 /* ====== Responsive ====== */
 @media (max-width:980px) {
     .hero {
         grid-template-columns: 1fr;
     }

     .grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .wrap {
         padding: 3rem .9rem
     }
 }

 @media (max-width:640px) {
     .grid {
         grid-template-columns: 1fr
     }

     nav {
         display: none
     }

     header {
         gap: .5rem
     }

     .hero h1 {
         font-size: 2rem
     }

     .logo {
         font-size: 1.05rem
     }

     :root {
         --section-pad: 3.5rem
     }
 }

 /* ====== Small helpers ====== */
 .muted-note {
     color: var(--muted);
     font-size: .9rem
 }

 .center {
     text-align: center
 }

 /* ====== scroll reveal classes ====== */
 .reveal {
     opacity: 0;
     transform: translateY(10px);
     transition: opacity .7s ease, transform .7s ease
 }

 .reveal.visible {
     opacity: 1;
     transform: none
 }

 footer {
     padding: 2rem 0;
     color: var(--muted);
     font-size: .9rem;
     text-align: center
 }

 .whatsapp-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #25D366;
     color: white;
     font-size: 16px;
     font-weight: bold;
     padding: 12px 22px;
     border-radius: 50px;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .whatsapp-btn i {
     margin-right: 10px;
     font-size: 20px;
     transition: transform 0.3s ease;
 }

 .whatsapp-btn:hover {
     background-color: #20b758;
     transform: scale(1.05);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .whatsapp-btn:hover i {
     transform: rotate(-20deg) scale(1.2);
 }

 .whatsapp-btn::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: -100%;
     background: rgba(255, 255, 255, 0.2);
     transition: all 0.5s ease;
 }

 .whatsapp-btn:hover::after {
     left: 0;
 }

 .quick-contact-form {
     background: #1a1a1a;
     padding: 1.5rem;
     border-radius: 12px;
     max-width: 400px;
     margin: 20px auto;
     display: flex;
     flex-direction: column;
     gap: 0.7rem;
     box-shadow: 0 6px 18px rgba(255, 255, 255, 0.05);
     position: relative;
 }

 .quick-contact-form input,
 .quick-contact-form select,
 .quick-contact-form textarea {
     padding: 0.8rem;
     border-radius: 8px;
     border: 1px solid #333;
     background: #111;
     color: #eee;
     font-size: 0.95rem;
 }

 .quick-contact-form textarea {
     resize: none;
 }

 .quick-contact-form button[type="submit"] {
     background: #25D366;
     color: white;
     font-weight: 600;
     border: none;
     border-radius: 8px;
     padding: 0.7rem;
     cursor: pointer;
     transition: 0.3s;
 }

 .quick-contact-form button[type="submit"]:hover {
     background: #20b758;
     transform: scale(1.02);
 }

 .quick-contact-form button.close-btn {
     background: none;
     border: none;
     color: var(--fg);
     font-size: 1.5rem;
     cursor: pointer;
     position: absolute;
     top: 1rem;
     right: 1rem;
     transition: color 0.3s ease;
 }

 .quick-contact-form button.close-btn:hover {
     color: #ff5555;
 }

 /* --- Footer --- */
 footer {
     background-color: black;
     color: white;
     padding: 50px 0;
     text-align: center;
 }

 footer .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1.25rem;
 }

 .footer-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #333;
     padding-bottom: 30px;
     margin-bottom: 20px;
     text-decoration: none;
 }

 .footer-logo {
     font-size: 24px;
     font-weight: 700;
     text-decoration: none;
 }

 .footer-links a {
     color: white;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-links a:hover {
     color: #0ff;
     text-decoration: none;
 }

 .footer-links {
     list-style: none;
     display: flex;
     gap: 25px;
     text-decoration: none;
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-decoration: none;
 }

 .social-icons {
     display: flex;
     gap: 20px;
 }

 .social-icons a {
     transition: transform 0.3s ease, color 0.3s ease;
     font-size: 25px;
     display: inline-block;
     text-decoration: none;
     color: white;
 }

 .social-icons a:hover {
     transform: translateY(-6px) scale(1.1);
     color: #00eaff;
 }

 /* --- Mobile Responsiveness for Footer --- */
 @media (max-width: 768px) {

     .footer-top,
     .footer-bottom {
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }
 }