/* =========================
   HS TECHNOLOGIES — Styles
   ========================= */
:root{
  --blue-900:#0a3a85;
  --blue-700:#0f55c0;
  --blue-100:#eaf3ff;
  --accent:#ffd84d;
  --text:#1c1e21;
  --muted:#5b6470;
  --border:#e6e8ee;
  --white:#fff;

  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow:0 10px 30px rgba(9,30,66,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:#fff; line-height:1.6;
}

.container{ width:min(1140px,92vw); margin-inline:auto; }

/* Buttons & Links */
a{ color:var(--blue-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:var(--radius-md);
  background:var(--accent); color:#1a1a1a; font-weight:700; border:2px solid transparent;
  transition:.2s ease; box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn--outline{ background:transparent; border-color:#fff; color:#fff; box-shadow:none; }
.btn--small{ padding:.6rem 1rem; font-weight:600; }

/* Topbar */
.topbar{ background:var(--blue-900); color:#fff; font-size:.9rem; }
.topbar__wrap{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; }
.topbar__link{ color:#fff; margin-right:1.1rem; opacity:.95; }
.topbar__link i{ margin-right:.4rem; }
.topbar__phone{ color:#fff; font-weight:600; }

/* Header / Nav */
.header{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--border); }
.header__wrap{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo{ font-weight:800; font-size:1.25rem; letter-spacing:.5px; color:var(--blue-900); }
.logo span{ background:var(--accent); color:#1a1a1a; border-radius:10px; padding:.15rem .45rem; margin-left:.4rem; }

.nav-toggle{
  display:none; position:relative; width:36px; height:28px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span{ position:absolute; left:0; right:0; height:3px; background:#1f2a44; border-radius:3px; transition:.25s; }
.nav-toggle span:nth-child(1){ top:4px; }
.nav-toggle span:nth-child(2){ top:12px; }
.nav-toggle span:nth-child(3){ top:20px; }

.nav{ display:flex; align-items:center; }
.menu{ display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0; }
.menu__link{ background:none; border:0; font:inherit; color:#1f2937; font-weight:600; cursor:pointer; padding:.6rem .4rem; border-radius:8px; }
.menu__link:hover{ background:#f5f7fb; }
.menu__cta{ margin-left:.5rem; }

/* Dropdowns */
.menu__item--has-children{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:.5rem; display:none;
}
.dropdown__link{ display:block; padding:.6rem .7rem; color:#1f2937; border-radius:8px; }
.dropdown__link:hover{ background:#f5f7fb; text-decoration:none; }

.menu__item--has-children:focus-within .dropdown,
.menu__item--has-children:hover .dropdown{ display:block; }

/* Mobile Nav */
@media (max-width: 980px){
  .nav-toggle{ display:block; }
  .nav{ position:absolute; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--border); transform:translateY(-120%); opacity:0; pointer-events:none; transition:.25s; }
  .menu{ flex-direction:column; align-items:flex-start; padding:1rem; }
  .menu__item--has-children .dropdown{ position:static; display:none; width:100%; margin:.25rem 0 0; }
  .menu__item--has-children.open .dropdown{ display:block; }
  .menu__cta{ width:100%; }
  .btn--small{ width:max-content; }

  .nav.open{ transform:translateY(0%); opacity:1; pointer-events:auto; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* Sections */
.section{ padding: clamp(2.5rem, 4vw, 4rem) 0; }

/* Hero */
.hero{ background:linear-gradient(180deg,var(--blue-100),#fff); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .9fr; gap:2rem; align-items:center; }
.hero__text h1{ font-size: clamp(2rem, 3.2vw, 3rem); line-height:1.15; color:var(--blue-900); margin:.2rem 0 .7rem; }
.hero__text p{ color:var(--muted); margin:0 0 1rem; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.hero__highlights{ list-style:none; display:flex; gap:1rem; flex-wrap:wrap; font-weight:600; color:#2b3340; margin:0; padding:0; }
.hero__highlights i{ color:var(--blue-700); margin-right:.45rem; }
.hero__image{ background:#fff; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); }
.hero__image img{ width:100%; height:100%; display:block; object-fit:cover; }

/* Feature Cards */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; }
.feature-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem; box-shadow:var(--shadow); transition:.2s ease; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(9,30,66,.12); }
.feature-card i{ font-size:1.6rem; color:var(--blue-700); }
.feature-card h3{ margin:.6rem 0 .2rem; color:#1f2a44; }
.feature-card p{ color:var(--muted); margin:0 0 .6rem; }
.link{ font-weight:700; }

/* Partners */
.partners{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.4rem; }
.pill{ display:inline-flex; align-items:center; padding:.5rem .75rem; border-radius:999px; border:1px dashed var(--border); background:#fff; color:#2b3340; font-weight:700; }

/* About */
.about__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:start; }
.about h2{ color:var(--blue-900); font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin:0 0 .4rem; }
.about p{ color:var(--muted); }
.about__list{ list-style:none; margin:1rem 0; padding:0; color:#2b3340; font-weight:600; }
.about__list li{ margin:.45rem 0; }
.about__list i{ color:var(--blue-700); margin-right:.5rem; }
.about__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

.about__card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; background:#fff; box-shadow:var(--shadow); }
.about__card h3{ margin:.2rem 0 .3rem; color:#1f2a44; }
.about__card p{ color:var(--muted); margin:.2rem 0 .8rem; }
.checklist{ list-style:none; margin:0 0 1rem; padding:0; color:#2b3340; }
.checklist li{ padding:.35rem 0; }
.checklist li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--blue-700); margin-right:.5rem; }

/* Services */
.services{ background:#f7f9fe; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 1.4rem; }
.section-head h2{ color:var(--blue-900); font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin:0 0 .3rem; }
.section-head p{ color:var(--muted); margin:0; }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem; }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; box-shadow:var(--shadow); transition:.2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(9,30,66,.12); }
.card i{ font-size:1.6rem; color:var(--blue-700); }
.card h3{ margin:.6rem 0 .2rem; color:#1f2a44; }
.card p{ color:var(--muted); margin:0 0 .6rem; }

/* Contact */
.contact__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:2rem; align-items:start; }
.contact h2{ color:var(--blue-900); font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin:.2rem 0 .4rem; }
.contact p{ color:var(--muted); }
.contact__info{ margin:1rem 0 .6rem; display:grid; gap:.35rem; color:#2b3340; font-weight:600; }
.contact__info i{ color:var(--blue-700); margin-right:.5rem; }
.contact__badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.contact__badges span{ border:1px solid var(--border); border-radius:999px; padding:.4rem .6rem; background:#fff; font-weight:700; color:#2b3340; }

.form{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; box-shadow:var(--shadow); }
.form__row{ display:grid; gap:.75rem; grid-template-columns:1fr 1fr; }
.form input,.form select,.form textarea{
  width:100%; padding:.85rem .9rem; border-radius:12px; border:1px solid #dfe3eb; outline:none; font:inherit; color:#1f2937; background:#fff;
}
.form textarea{ resize:vertical; }
.form button{ margin-top:.6rem; }
.form__note{ font-size:.85rem; color:#6b7280; margin:.6rem 0 0; }

/* Footer */
.footer{ background:var(--blue-900); color:#e7ecf8; padding:1rem 0; }
.footer__wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.footer__links a{ color:#e7ecf8; font-weight:600; margin-left:1rem; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width: 1140px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 980px){
  .hero__grid,.about__grid,.contact__grid{ grid-template-columns:1fr; }
  .features{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .form__row{ grid-template-columns:1fr; }
  .footer__wrap{ flex-direction:column; text-align:center; }
}