/* ============================================================
   HimaPower – Main Stylesheet
   style.css
   ============================================================ */

:root {
  --blue:#1A8CC4;
  --blue-dark:#1260A0;
  --blue-deep:#0D4F85;
  --blue-light:#E8F4FB;
  --blue-pale:#F0F8FD;
  --green:#5CB82E;
  --green-dark:#3E8A1A;
  --green-light:#EBF7E1;
  --dark:#0F1F2E;
  --charcoal:#1E3045;
  --mid:#4A6070;
  --light:#F4F8FB;
  --border:#D6E8F4;
  --white:#FFFFFF;
  --wa:#25D366;
  --radius:14px;
  --shadow-sm:0 2px 10px rgba(26,140,196,0.08);
  --shadow-md:0 8px 32px rgba(26,140,196,0.14);
  --shadow-lg:0 24px 64px rgba(13,79,133,0.16);
  --tr:0.3s cubic-bezier(0.4,0,0.2,1);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:'Inter',sans-serif;
  color:var(--dark);
  background:var(--white);
  overflow-x:hidden;
}

.topbar {
  background:var(--blue-dark);
  color:#c8e6f5;
  font-size:12.5px;
  padding:8px 0;
}

.topbar-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

.topbar a {
  color:#c8e6f5;
  text-decoration:none;
  transition:color var(--tr);
}

.topbar a:hover {
  color:#fff;
}

.topbar-left {
  display:flex;
  gap:24px;
  align-items:center;
}

.topbar-right {
  display:flex;
  gap:10px;
  align-items:center;
}

.tsoc {
  display:inline-flex;
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:50%;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:all var(--tr);
}

.tsoc:hover {
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.navbar {
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--tr);
}

.navbar.scrolled {
  box-shadow:var(--shadow-md);
}

.navbar-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

.logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
}

.logo img {
  height:44px;
  width:auto;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
}

.nav-links>li {
  position:relative;
}

.nav-links>li>a {
  display:block;
  padding:8px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--charcoal);
  text-decoration:none;
  border-radius:8px;
  transition:all var(--tr);
  cursor:pointer;
}

.nav-links>li>a:hover,.nav-links>li>a.active {
  color:var(--blue);
  background:var(--blue-pale);
}

.dropdown {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  min-width:230px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all var(--tr);
  z-index:100;
}

.nav-links>li:hover .dropdown {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown a {
  display:block;
  padding:10px 14px;
  font-size:13.5px;
  color:var(--charcoal);
  text-decoration:none;
  border-radius:8px;
  transition:all var(--tr);
  cursor:pointer;
}

.dropdown a:hover {
  background:var(--blue-light);
  color:var(--blue-dark);
}

.page {
  display:none;
}

.page.active {
  display:block;
}

.hero {
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#071828 0%,#0D3554 45%,#0A4A78 100%);
}

.hero-circle {
  position:absolute;
  border-radius:50%;
  background:rgba(26,140,196,0.07);
}

.hero-inner {
  max-width:1280px;
  margin:0 auto;
  padding:80px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(92,184,46,0.15);
  border:1px solid rgba(92,184,46,0.35);
  color:#7FD450;
  font-size:12px;
  font-weight:700;
  padding:7px 16px;
  border-radius:100px;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:22px;
  animation:fadeUp .6s ease both;
}

.hero-title {
  font-family:'Poppins',sans-serif;
  font-size:clamp(36px,4.5vw,56px);
  font-weight:800;
  line-height:1.1;
  color:#fff;
  margin-bottom:18px;
  animation:fadeUp .7s ease .1s both;
}

.hero-title .hl {
  color:#5CB82E;
}

.hero-title .hl2 {
  color:#4EC8F4;
}

.hero-desc {
  font-size:16px;
  line-height:1.8;
  color:#9EC5DC;
  margin-bottom:36px;
  max-width:500px;
  animation:fadeUp .7s ease .2s both;
}

.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation:fadeUp .7s ease .3s both;
}

.hero-illustration {
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeLeft .9s ease .2s both;
}

.hero-illustration svg {
  width:100%;
  max-width:520px;
  height:auto;
  filter:drop-shadow(0 24px 48px rgba(26,140,196,0.25));
}

.fcard {
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}

.fcard-icon {
  width:38px;
  height:38px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.fcard-text strong {
  display:block;
  font-size:16px;
  font-weight:700;
  color:#fff;
}

.fcard-text span {
  font-size:11px;
  color:#9EC5DC;
}

.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:all var(--tr);
}

.btn-primary {
  background:var(--green);
  color:#fff;
}

.btn-primary:hover {
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(92,184,46,0.4);
}

.btn-outline-w {
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.35);
}

.btn-outline-w:hover {
  border-color:#fff;
  background:rgba(255,255,255,0.1);
}

.btn-blue {
  background:var(--blue);
  color:#fff;
}

.btn-blue:hover {
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(26,140,196,0.4);
}

.btn-outline {
  background:transparent;
  color:var(--dark);
  border:1.5px solid var(--border);
}

.btn-outline:hover {
  border-color:var(--blue);
  color:var(--blue);
}

.btn-wa {
  background:var(--wa);
  color:#fff;
}

.btn-wa:hover {
  background:#1fa855;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,211,102,0.4);
}

.btn-full {
  width:100%;
  justify-content:center;
}

.btn-sm {
  flex:1;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  border:none;
  transition:all var(--tr);
}

.btn-sm-primary {
  background:var(--blue);
  color:#fff;
}

.btn-sm-primary:hover {
  background:var(--blue-dark);
}

.btn-sm-outline {
  background:transparent;
  color:var(--dark);
  border:1.5px solid var(--border);
}

.btn-sm-outline:hover {
  border-color:var(--blue);
  color:var(--blue);
}

.stats-bar {
  background:var(--blue-dark);
  padding:52px 0;
}

.stats-bar-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.stat-item {
  padding:28px 24px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.1);
}

.stat-item:last-child {
  border-right:none;
}

.stat-num {
  font-family:'Poppins',sans-serif;
  font-size:46px;
  font-weight:800;
  color:#5CB82E;
  line-height:1;
  margin-bottom:6px;
}

.stat-label {
  font-size:13px;
  color:#8BBDD4;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.section {
  padding:96px 0;
}

.section-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

.section-eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:10px;
}

.section-title {
  font-family:'Poppins',sans-serif;
  font-size:clamp(26px,3.5vw,40px);
  font-weight:700;
  color:var(--dark);
  line-height:1.2;
  margin-bottom:14px;
}

.section-desc {
  font-size:15.5px;
  color:var(--mid);
  line-height:1.8;
  max-width:580px;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.about-img-wrap {
  position:relative;
}

.about-badge {
  position:absolute;
  bottom:-24px;
  right:-24px;
  background:var(--blue);
  color:#fff;
  border-radius:16px;
  padding:18px 22px;
  text-align:center;
  box-shadow:var(--shadow-md);
}

.about-badge strong {
  display:block;
  font-size:34px;
  font-weight:800;
  line-height:1;
}

.about-badge span {
  font-size:11px;
  opacity:.9;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.about-features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px;
}

.about-feat {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--border);
  transition:all var(--tr);
}

.about-feat:hover {
  border-color:var(--blue);
  transform:translateY(-2px);
}

.af-icon {
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--blue-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}

.af-text h4 {
  font-size:13px;
  font-weight:600;
  color:var(--dark);
  margin-bottom:2px;
}

.af-text p {
  font-size:12px;
  color:var(--mid);
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:48px;
}

.service-card {
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  padding:30px 26px;
  transition:all var(--tr);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.service-card::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transform:scaleX(0);
  transition:transform var(--tr);
}

.service-card:hover::after {
  transform:scaleX(1);
}

.service-card:hover {
  border-color:var(--blue);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.svc-icon {
  width:58px;
  height:58px;
  border-radius:14px;
  background:var(--blue-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
  transition:all var(--tr);
}

.service-card:hover .svc-icon {
  background:var(--blue);
}

.service-card h3 {
  font-size:17px;
  font-weight:700;
  color:var(--dark);
  margin-bottom:8px;
}

.service-card p {
  font-size:13.5px;
  color:var(--mid);
  line-height:1.7;
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:22px;
  margin-top:48px;
}

.product-card {
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  overflow:hidden;
  transition:all var(--tr);
  cursor:pointer;
}

.product-card:hover {
  border-color:var(--blue);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.product-img {
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-light));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:60px;
  position:relative;
  overflow:hidden;
}

.product-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--tr);
}

.product-card:hover .product-img img {
  transform:scale(1.04);
}

.product-img .img-placeholder {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-light));
  font-size:52px;
}

.product-img .img-placeholder span {
  font-size:11px;
  font-weight:600;
  color:var(--blue-dark);
  opacity:0.6;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Loading skeleton */
.product-img.loading {
  background:linear-gradient(90deg,var(--blue-pale) 25%,var(--blue-light) 50%,var(--blue-pale) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}

/* Enhanced service cards */
.service-card {
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  padding:30px 26px;
  transition:all var(--tr);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.service-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(26,140,196,0.03),rgba(92,184,46,0.03));
  opacity:0;
  transition:opacity var(--tr);
}

.service-card::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(0.22,1,0.36,1);
}

.service-card:hover::after {
  transform:scaleX(1);
}

.service-card:hover::before {
  opacity:1;
}

.service-card:hover {
  border-color:var(--blue);
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

/* Testimonial card enhancements */
.tcard {
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  padding:26px;
  transition:all .4s cubic-bezier(0.22,1,0.36,1);
  position:relative;
  overflow:hidden;
}

.tcard::before {
  content:'"';
  position:absolute;
  top:-10px;
  right:20px;
  font-size:120px;
  font-family:'Poppins',sans-serif;
  font-weight:800;
  color:var(--blue-light);
  line-height:1;
  z-index:0;
  pointer-events:none;
}

.tcard:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

.tcard-text {
  position:relative;
  z-index:1;
}

/* Stats counter style */
.stat-num {
  font-family:'Poppins',sans-serif;
  font-size:46px;
  font-weight:800;
  color:#5CB82E;
  line-height:1;
  margin-bottom:6px;
  display:inline-block;
}

.stat-item {
  padding:28px 24px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
}

.stat-item::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.03);
  transform:translateY(100%);
  transition:transform .4s ease;
}

.stat-item:hover::after {
  transform:translateY(0);
}

/* Process step enhancements */
.process-step {
  text-align:center;
  padding:32px 20px;
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  position:relative;
  z-index:1;
  transition:all .4s cubic-bezier(0.22,1,0.36,1);
}

.process-step:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-6px);
}

.process-num {
  width:58px;
  height:58px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:800;
  margin:0 auto 20px;
  font-family:'Poppins',sans-serif;
  box-shadow:0 6px 18px rgba(26,140,196,0.35);
  transition:all .3s ease;
}

.process-step:hover .process-num {
  transform:scale(1.1) rotate(-5deg);
  box-shadow:0 8px 24px rgba(26,140,196,0.5);
}

/* Brand chip improvements */
.brand-chip {
  padding:10px 20px;
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  color:var(--mid);
  transition:all .3s ease;
  cursor:default;
  background:var(--white);
}

.brand-chip:hover {
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-pale);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(26,140,196,0.15);
}

/* Scroll to top button */
.scroll-top {
  position:fixed;
  bottom:90px;
  right:24px;
  width:44px;
  height:44px;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:var(--shadow-md);
  opacity:0;
  transform:translateY(20px);
  transition:all .3s ease;
  z-index:500;
}

.scroll-top.visible {
  opacity:1;
  transform:translateY(0);
}

.scroll-top:hover {
  background:var(--blue-dark);
  transform:translateY(-2px);
}

/* WhatsApp float button */
.wa-float {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999;
  width:56px;
  height:56px;
  background:var(--wa);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(37,211,102,0.5);
  animation:pulseGreen 2.5s ease-in-out infinite;
  transition:transform .2s ease;
}

.wa-float:hover {
  transform:scale(1.1);
}

/* Image carousel for hero */
.hero-slide-badge {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  padding:8px 14px;
  font-size:12px;
  color:rgba(255,255,255,0.9);
  display:inline-block;
  margin-top:12px;
  backdrop-filter:blur(8px);
}

/* Page transition */
.page {
  display:none;
  animation:none;
}

.page.active {
  display:block;
  animation:pageFadeIn .4s ease;
}

@keyframes pageFadeIn {
  from {
  opacity:0;
  transform:translateY(8px)}

to {
  opacity:1;
  transform:translateY(0)}

}

.product-cat {
  position:absolute;
  top:10px;
  left:10px;
  background:var(--blue);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:4px 10px;
  border-radius:100px;
  text-transform:uppercase;
}

.product-info {
  padding:18px;
}

.product-info h3 {
  font-size:14.5px;
  font-weight:600;
  color:var(--dark);
  margin-bottom:8px;
  line-height:1.4;
}

.product-price {
  font-size:20px;
  font-weight:700;
  color:var(--blue-dark);
  margin-bottom:14px;
}

.product-actions {
  display:flex;
  gap:8px;
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  position:relative;
}

.process-line {
  position:absolute;
  top:38px;
  left:12.5%;
  right:12.5%;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  opacity:.25;
  z-index:0;
}

.process-step {
  text-align:center;
  padding:30px 18px;
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  position:relative;
  z-index:1;
  transition:all var(--tr);
}

.process-step:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}

.process-num {
  width:54px;
  height:54px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  margin:0 auto 18px;
  font-family:'Poppins',sans-serif;
  box-shadow:0 4px 14px rgba(26,140,196,0.35);
}

.process-step h4 {
  font-size:14.5px;
  font-weight:700;
  color:var(--dark);
  margin-bottom:8px;
}

.process-step p {
  font-size:13px;
  color:var(--mid);
  line-height:1.65;
}

.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:48px;
}

.tcard-stars {
  color:var(--green);
  font-size:15px;
  margin-bottom:12px;
}

.tcard:hover {
  border-color:var(--blue);
  box-shadow:var(--shadow-sm);
}

.tcard-text {
  font-size:14px;
  line-height:1.8;
  color:var(--mid);
  margin-bottom:18px;
  font-style:italic;
}

.tcard-author {
  display:flex;
  align-items:center;
  gap:12px;
}

.t-avatar {
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--blue-light);
  border:2px solid var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--blue);
  font-size:15px;
}

.t-name {
  font-size:14px;
  font-weight:600;
  color:var(--dark);
}

.t-role {
  font-size:12px;
  color:var(--mid);
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:64px;
  align-items:start;
}

.contact-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  background:var(--light);
  border-radius:12px;
  border:1px solid var(--border);
  transition:all var(--tr);
  margin-bottom:16px;
}

.contact-item:hover {
  border-color:var(--blue);
  background:var(--blue-pale);
}

.contact-icon {
  width:42px;
  height:42px;
  background:var(--blue-light);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}

.contact-item h4 {
  font-size:12px;
  font-weight:700;
  color:var(--dark);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.contact-item p {
  font-size:14px;
  color:var(--mid);
  line-height:1.6;
}

.contact-form {
  background:var(--white);
  border-radius:20px;
  border:1px solid var(--border);
  padding:38px;
  box-shadow:var(--shadow-sm);
}

.form-group {
  margin-bottom:18px;
}

.form-group label {
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--dark);
  margin-bottom:7px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.form-group input,.form-group textarea,.form-group select {
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  font-size:14px;
  color:var(--dark);
  background:var(--white);
  font-family:'Inter',sans-serif;
  transition:border-color var(--tr);
  outline:none;
}

.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,140,196,0.1);
}

.form-group textarea {
  resize:vertical;
  min-height:110px;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.product-detail-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:start;
  padding-top:32px;
}

.product-detail-img {
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-light));
  border-radius:20px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--border);
}

.product-detail-img img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:20px;
}

.product-detail-cat {
  display:inline-block;
  background:var(--blue-light);
  color:var(--blue-dark);
  font-size:11px;
  font-weight:700;
  padding:5px 12px;
  border-radius:100px;
  text-transform:uppercase;
  margin-bottom:14px;
}

.product-detail-title {
  font-family:'Poppins',sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--dark);
  line-height:1.25;
  margin-bottom:18px;
}

.product-detail-price {
  font-size:34px;
  font-weight:800;
  color:var(--blue-dark);
  margin-bottom:22px;
}

.product-detail-desc {
  font-size:15px;
  color:var(--mid);
  line-height:1.8;
  margin-bottom:26px;
}

.product-specs h4 {
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--dark);
  margin-bottom:14px;
}

.spec-row {
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}

.spec-row:last-child {
  border-bottom:none;
}

.spec-key {
  color:var(--mid);
}

.spec-val {
  font-weight:600;
  color:var(--dark);
}

.product-detail-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:28px;
}

.breadcrumb {
  background:var(--light);
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.bc-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--mid);
}

.bc-inner a {
  color:var(--mid);
  text-decoration:none;
  cursor:pointer;
}

.bc-inner a:hover {
  color:var(--blue);
}

.bc-inner span {
  color:var(--dark);
  font-weight:500;
}

.page-header {
  background:linear-gradient(135deg,var(--dark) 0%,var(--blue-deep) 100%);
  padding:80px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.page-header::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(92,184,46,0.12) 0%,transparent 70%);
}

.page-header h1 {
  font-family:'Poppins',sans-serif;
  font-size:44px;
  color:#fff;
  margin-bottom:10px;
  position:relative;
}

.page-header p {
  color:#8BBDD4;
  font-size:16px;
  position:relative;
}

.shop-header {
  background:linear-gradient(135deg,var(--dark),var(--blue-deep));
  padding:72px 0;
  text-align:center;
}

.shop-header h1 {
  font-family:'Poppins',sans-serif;
  font-size:44px;
  color:#fff;
  margin-bottom:10px;
}

.shop-header p {
  color:#8BBDD4;
  font-size:16px;
}

.shop-filters {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:36px;
  margin-top:40px;
}

.filter-btn {
  padding:9px 18px;
  border-radius:100px;
  border:1.5px solid var(--border);
  background:var(--white);
  font-size:13px;
  font-weight:500;
  color:var(--mid);
  cursor:pointer;
  transition:all var(--tr);
}

.filter-btn.active {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.filter-btn:hover:not(.active) {
  border-color:var(--blue);
  color:var(--blue);
}

.filter-brand {
  font-size:12px;
  padding:6px 14px;
  border-color:rgba(92,184,46,0.35);
  color:var(--green);
}

.filter-brand:hover:not(.active) {
  border-color:var(--green);
  background:rgba(92,184,46,0.08);
  color:var(--green);
}

.filter-brand.active {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.product-brand {
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(26,60,100,0.88);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:3px 10px;
  border-radius:100px;
  text-transform:uppercase;
  letter-spacing:.06em;
  backdrop-filter:blur(4px);
}

.filter-btn:hover,.filter-btn.active {
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}

.brands-bar {
  padding:40px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.brands-label {
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--mid);
  margin-bottom:22px;
}

.brands-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.brand-chip {
  padding:9px 18px;
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;
  font-weight:600;
  color:var(--mid);
  transition:all var(--tr);
}

.brand-chip:hover {
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-pale);
}

.cta-banner {
  background:linear-gradient(135deg,var(--blue-dark),var(--blue-deep));
  padding:80px 0;
  text-align:center;
}

.cta-banner h2 {
  font-family:'Poppins',sans-serif;
  font-size:36px;
  color:#fff;
  margin-bottom:12px;
}

.cta-banner p {
  color:#9EC5DC;
  font-size:16px;
  margin-bottom:30px;
}

footer {
  background:var(--dark);
  color:#9EC5DC;
  padding:64px 0 0;
}

.footer-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
}

.footer-brand p {
  font-size:14px;
  line-height:1.8;
  color:#6690A8;
  margin-top:14px;
  margin-bottom:22px;
}

.footer-heading {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#5CB82E;
  margin-bottom:18px;
}

.footer-links {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links a {
  font-size:14px;
  color:#6690A8;
  text-decoration:none;
  cursor:pointer;
  transition:color var(--tr);
}

.footer-links a:hover {
  color:#5CB82E;
}

.footer-social {
  display:flex;
  gap:10px;
}

.fsoc {
  width:36px;
  height:36px;
  border:1px solid #2E4A60;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6690A8;
  text-decoration:none;
  font-size:13px;
  transition:all var(--tr);
}

.fsoc:hover {
  border-color:#5CB82E;
  background:#5CB82E;
  color:#fff;
}

.footer-bottom {
  border-top:1px solid #1E3045;
  margin-top:48px;
  padding:20px 24px;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  color:#3D5A6E;
}

.footer-bottom a {
  color:#5CB82E;
  text-decoration:none;
}

.shf {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:48px;
}

.shop-link {
  font-size:14px;
  font-weight:600;
  color:var(--blue);
  cursor:pointer;
}

.shop-link:hover {
  opacity:.75;
}

.hamburger {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:4px;
}

.hamburger span {
  display:block;
  width:24px;
  height:2px;
  background:var(--dark);
  border-radius:2px;
}

.mobile-menu {
  display:none;
  position:fixed;
  inset:0;
  z-index:999;
  background:var(--white);
  padding:80px 24px 24px;
  overflow-y:auto;
}

.mobile-menu.open {
  display:flex;
  flex-direction:column;
  gap:4px;
  animation:fadeUp .3s ease;
}

.mobile-menu a {
  display:block;
  padding:14px 16px;
  font-size:16px;
  font-weight:500;
  color:var(--dark);
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--tr);
}

.mobile-menu a:hover {
  background:var(--blue-pale);
  color:var(--blue);
}

.mobile-close {
  position:fixed;
  top:20px;
  right:20px;
  font-size:24px;
  cursor:pointer;
  background:none;
  border:none;
  color:var(--dark);
}

@keyframes fadeUp {
  from {
  opacity:0;
  transform:translateY(24px)}

to {
  opacity:1;
  transform:translateY(0)}

}

@keyframes fadeLeft {
  from {
  opacity:0;
  transform:translateX(40px)}

to {
  opacity:1;
  transform:translateX(0)}

}

@keyframes float {
  0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-8px)}

}

@keyframes pulseGreen {
  0%,100% {
  box-shadow:0 0 0 0 rgba(37,211,102,0.5)}

50% {
  box-shadow:0 0 0 12px rgba(37,211,102,0)}

}

@keyframes shimmer {
  0% {
  background-position:-200% center}

100% {
  background-position:200% center}

}

@keyframes countUp {
  from {
  opacity:0;
  transform:translateY(16px)}

to {
  opacity:1;
  transform:translateY(0)}

}

@keyframes spinSun {
  0% {
  transform:rotate(0deg)}

100% {
  transform:rotate(360deg)}

}

@keyframes glowPulse {
  0%,100% {
  filter:drop-shadow(0 0 6px rgba(92,184,46,0.5))}

50% {
  filter:drop-shadow(0 0 18px rgba(92,184,46,0.9))}

}

.aos {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1);
}

.aos.visible {
  opacity:1;
  transform:translateY(0);
}

.aos-left {
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1);
}

.aos-left.visible {
  opacity:1;
  transform:translateX(0);
}

.aos-right {
  opacity:0;
  transform:translateX(40px);
  transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1);
}

.aos-right.visible {
  opacity:1;
  transform:translateX(0);
}

.aos-scale {
  opacity:0;
  transform:scale(0.88);
  transition:opacity .6s cubic-bezier(0.22,1,0.36,1),transform .6s cubic-bezier(0.22,1,0.36,1);
}

.aos-scale.visible {
  opacity:1;
  transform:scale(1);
}

.d1 {
  transition-delay:.12s}

.d2 {
  transition-delay:.24s}

.d3 {
  transition-delay:.36s}

.d4 {
  transition-delay:.48s}

.btn-wa {
  animation:pulseGreen 2.5s ease-in-out infinite;
}

.stat-num {
  transition:all .5s ease;
}

.hero-badge {
  animation:fadeUp .6s ease both;
}

.hero-title {
  animation:fadeUp .7s ease .1s both;
}

.hero-desc {
  animation:fadeUp .7s ease .2s both;
}

.hero-actions {
  animation:fadeUp .7s ease .3s both;
}

.hero-fcards {
  animation:fadeUp .7s ease .45s both;
}

.hero-illustration {
  animation:fadeLeft .9s cubic-bezier(0.22,1,0.36,1) .15s both;
}

.hero-illustration svg {
  animation:float 5s ease-in-out infinite 1.1s;
}

@media(max-width:960px) {
  
  .hero-inner,.about-grid,.contact-grid,.product-detail-grid {
  grid-template-columns:1fr;
  gap:40px;
}

  .hero-actions {
  justify-content:center;
}

.hero-inner {
  text-align:center;
}

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

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

.process-line {
  display:none;
}

  .stats-bar-inner {
  grid-template-columns:repeat(2,1fr);
}

  .footer-inner {
  grid-template-columns:1fr 1fr;
}

  .testimonials-grid {
  grid-template-columns:1fr;
}

  .nav-links {
  display:none;
}

.hamburger {
  display:flex;
}

  .topbar-left {
  display:none;
}

}

@media(max-width:600px) {
  .services-grid,.process-grid,.footer-inner,.about-features,.form-row {
  grid-template-columns:1fr;
}

}