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

:root{
  --brand-green:#35BB93;
  --brand-green-light:#59c7b4;
  --brand-green-dark:#279c79;
  --brand-green-hover:#47b3a1;
  --text-dark:#111827;
  --text-default:#1f2937;
  --text-body:#4b5563;
  --text-muted:#6b7280;
  --text-inverse:#ffffff;
  --border-color:#e5e7eb;
  --page-background:#f8fafc;
  --surface:#ffffff;
  --surface-muted:#f3f5f7;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:28px;
  --transition-fast:0.2s ease;
  --transition-default:0.25s ease;
  --container-nav:1280px;
  --container-content:1000px;
  --z-dropdown:1000;
  --z-header:1100;
}

html{
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.5;
  background:var(--surface);
  color:var(--text-default);
}

a{
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

a,
button,
input,
select,
textarea{
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{
  outline:3px solid rgba(53,187,147,0.45);
  outline-offset:3px;
}

ul{
  list-style:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================================
   HEADER
========================================= */

header{
  width:100%;
  background:var(--surface);
  border-bottom:1px solid var(--border-color);
  position:sticky;
  top:0;
  z-index:var(--z-header);
  flex-shrink:0;
}

.nav-container{
  width:100%;
  max-width:var(--container-nav);
  margin:0 auto;
  padding:18px 28px;
  display:flex;
  align-items:center;
  gap:24px;
}

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

/* =========================================
   DESKTOP MENU
========================================= */

nav{
  margin-left:auto;
  min-width:0;
}

.menu{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2vw, 28px);
}

.menu > li{
  position:relative;
}

.menu > li > a{
  color:#2c2c2c;
  font-size:clamp(14px, 1.25vw, 16px);
  font-weight:600;
  padding:12px 0;
  display:block;
  transition:color var(--transition-default);
  white-space:nowrap;
}

.menu > li > a:hover{
  color:var(--brand-green-light);
}

/* =========================================
   DROPDOWN
========================================= */

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  max-width:min(320px, calc(100vw - 32px));
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
  overflow:hidden;
  display:none;
  z-index:var(--z-dropdown);
}

.dropdown-menu li a{
  display:block;
  padding:14px 18px;
  color:#374151;
  font-size:14px;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.dropdown-menu li a:hover{
  background:#f3f5f7;
  color:var(--brand-green-light);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}

/* =========================================
   MOBILE MENU
========================================= */

.menu-toggle{
  display:none;
}

.hamburger{
  display:none;
  margin-left:auto;
  font-size:30px;
  cursor:pointer;
  user-select:none;
  color:var(--text-default);
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
}

.submenu-toggle{
  display:none;
}

/* =========================================
   MAIN
========================================= */

main{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* =========================================
   HERO
========================================= */

.hero{
  width:100%;
  flex:1;
  min-height:560px;
  min-height:clamp(500px, calc(100svh - 89px), 760px);
  position:relative;
  overflow:hidden;
  background:#374151;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(60px, 8vw, 90px) 20px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,0.28);
  pointer-events:none;
}

.hero-background{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(100%, 1100px);
  color:var(--text-inverse);
  background:rgba(0,0,0,0.22);
  padding:clamp(36px, 5vw, 55px) clamp(24px, 6vw, 65px);
  border-radius:28px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 60px rgba(0,0,0,0.18);
}

.hero-content h1{
  font-size:clamp(42px, 6vw, 72px);
  margin-bottom:28px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:clamp(-2px, -0.15vw, -1px);
  text-shadow:0 4px 18px rgba(0,0,0,0.18);
  overflow-wrap:anywhere;
}

.hero-content p{
  font-size:clamp(18px, 2.1vw, 26px);
  line-height:1.75;
  font-weight:400;
  max-width:950px;
  margin:0 auto;
  color:rgba(255,255,255,0.96);
  text-shadow:0 2px 12px rgba(0,0,0,0.25);
}

.hero-buttons{
  margin-top:40px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:17px 38px;
  background:var(--brand-green-light);
  color:var(--text-inverse);
  font-size:17px;
  font-weight:700;
  border-radius:var(--radius-md);
  transition:
    background-color var(--transition-default),
    transform var(--transition-default),
    box-shadow var(--transition-default);
  box-shadow:0 12px 30px rgba(0,0,0,0.20);
  min-height:48px;
  text-align:center;
  line-height:1.3;
}

.contact-btn:hover{
  background:var(--brand-green-hover);
  transform:translateY(-3px);
  box-shadow:0 16px 35px rgba(0,0,0,0.25);
}

.call-btn{
  background:var(--text-dark);
}

.call-btn:hover{
  background:#000000;
}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(40px, 7vw, 80px) 20px;
  background:var(--page-background);
}

.contact-wrapper{
  width:100%;
  max-width:760px;
  min-width:0;
}

.contact-card{
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:clamp(30px, 6vw, 60px);
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  border:1px solid var(--border-color);
}

.contact-card h1{
  font-size:clamp(32px, 5vw, 48px);
  margin-bottom:18px;
  color:var(--brand-green);
  text-align:center;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.contact-card > p{
  text-align:center;
  font-size:18px;
  line-height:1.7;
  color:var(--text-muted);
  margin-bottom:45px;
}

.alert{
  padding:18px 20px;
  border-radius:14px;
  margin-bottom:30px;
  font-size:15px;
  font-weight:600;
}

.alert-success{
  background:#dcfce7;
  color:#166534;
  border:1px solid #86efac;
}

.alert-error{
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fca5a5;
}

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

.form-group label{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:600;
  color:#374151;
}

.form-control{
  width:100%;
  padding:16px 18px;
  border:1px solid #d1d5db;
  border-radius:var(--radius-md);
  font-size:16px;
  background:var(--surface);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  min-height:52px;
}

.form-control:focus{
  outline:none;
  border-color:var(--brand-green-light);
  box-shadow:0 0 0 4px rgba(89,199,180,0.15);
}

textarea.form-control{
  resize:vertical;
  min-height:140px;
}

.submit-btn{
  width:100%;
  border:none;
  background:var(--brand-green-light);
  color:var(--text-inverse);
  padding:18px 24px;
  border-radius:var(--radius-md);
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  transition:
    background-color var(--transition-default),
    transform var(--transition-default);
  margin-top:10px;
}

.submit-btn:hover{
  background:var(--brand-green-hover);
  transform:translateY(-2px);
}

/* =========================================
   PRODUCT CONTENT PAGE
========================================= */

.product-wrapper{
  max-width:1000px;
}

.product-card{
  text-align:left;
  min-width:0;
}

.product-card > h1{
  text-align:center;
}

.product-card > p{
  text-align:center;
}

.product-section{
  padding:clamp(38px, 6vw, 55px) 0;
  border-top:1px solid var(--border-color);
  min-width:0;
}

.product-section:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.product-section:last-child{
  padding-bottom:0;
}

.product-section h2{
  font-size:clamp(25px, 4vw, 34px);
  line-height:1.25;
  margin-bottom:22px;
  color:var(--text-dark);
  overflow-wrap:anywhere;
}

.product-section h2:not(:first-child){
  margin-top:32px;
}

.product-section p{
  text-align:left;
  font-size:clamp(16px, 1.6vw, 17px);
  line-height:1.85;
  color:var(--text-body);
  margin-bottom:20px;
  overflow-wrap:anywhere;
}

.product-section img{
  margin:30px auto 0;
  border-radius:var(--radius-lg);
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

.product-section ul,
.product-section ol{
  margin:0 0 22px;
  padding-left:1.4rem;
  color:var(--text-body);
  font-size:clamp(16px, 1.6vw, 17px);
  line-height:1.75;
}

.product-section ul{
  list-style:disc;
}

.product-section ol{
  list-style:decimal;
}

.product-section li + li{
  margin-top:8px;
}

.product-section blockquote{
  margin:0 0 28px;
  padding:18px 22px;
  border-left:4px solid var(--brand-green);
  background:#f3faf8;
  border-radius:0 12px 12px 0;
}

.product-section blockquote p:last-child{
  margin-bottom:0;
}

.product-section a:not(.contact-btn){
  color:var(--brand-green-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.product-section a:not(.contact-btn):hover{
  color:var(--brand-green);
}

.product-card > hr,
.product-card > br{
  display:none;
}

/* =========================================
   FOOTER
========================================= */

footer{
  background:var(--surface-muted);
  color:var(--text-default);
  padding:55px 20px;
  text-align:center;
  border-top:1px solid #dfe5ea;
  flex-shrink:0;
}

.footer-content{
  width:100%;
  max-width:var(--container-content);
  margin:0 auto;
}

.footer-content p{
  font-size:16px;
  line-height:1.8;
  margin-bottom:20px;
}

.footer-content .disclaimer{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:0;
}

/* =========================================
   COMPACT DESKTOP / SMALL LAPTOP
========================================= */

@media (min-width:851px) and (max-width:1100px){

  .nav-container{
    padding:16px 20px;
    gap:18px;
  }

  .logo img{
    height:46px;
  }

  .menu{
    gap:16px;
  }

  .menu > li > a{
    font-size:14px;
  }

}

/* =========================================
   TABLET & MOBILE
========================================= */

@media (max-width: 850px){

  .nav-container{
    flex-wrap:wrap;
    padding:16px 20px;
    gap:0;
  }

  .logo img{
    height:44px;
  }

  .hamburger{
    display:flex;
  }

  nav{
    width:100%;
    margin-left:0;
    display:none;
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    background:var(--surface);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:8px;
  }

  .menu-toggle:checked ~ nav{
    display:block;
  }

  .menu{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding-top:15px;
  }

  .menu li{
    width:100%;
  }

  .menu li a{
    width:100%;
    display:block;
    padding:15px 4px;
    border-bottom:1px solid var(--border-color);
    white-space:normal;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    display:none;
  }

  .submenu-toggle{
    width:100%;
    display:block;
    background:none;
    border:none;
    border-bottom:1px solid var(--border-color);
    padding:15px 4px;
    text-align:left;
    font-size:15px;
    font-weight:600;
    color:#2c2c2c;
    cursor:pointer;
  }

  .dropdown-menu{
    position:static;
    display:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:var(--page-background);
    min-width:100%;
  }

  .dropdown.open .dropdown-menu{
    display:block;
  }

  .dropdown-menu li a{
    padding:14px 20px;
    border-bottom:none;
    color:var(--text-body);
  }

  .desktop-link{
    display:none !important;
  }

  .hero{
    min-height:auto;
    padding:clamp(50px, 10vw, 70px) 20px;
    background-position:center;
  }

  .hero-content{
    padding:40px 28px;
    border-radius:22px;
  }

  .hero-content h1{
    font-size:clamp(36px, 8vw, 46px);
    margin-bottom:22px;
  }

  .hero-content p{
    font-size:clamp(17px, 3.8vw, 19px);
    line-height:1.75;
  }

  .contact-btn{
    width:100%;
    max-width:320px;
  }

  .contact-main{
    padding:50px 18px;
  }

  .contact-card{
    padding:36px 24px;
    border-radius:22px;
  }

  .contact-card h1{
    font-size:clamp(31px, 7vw, 36px);
  }

  .contact-card > p{
    font-size:16px;
  }

  .product-section{
    padding:40px 0;
  }

  .product-section h2{
    font-size:clamp(24px, 5.5vw, 28px);
  }

  .product-section p{
    font-size:16px;
  }

  .product-section img{
    margin-top:24px;
    border-radius:14px;
  }

  footer{
    padding:40px 20px;
  }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px){

  .logo img{
    height:38px;
  }

  .hero{
    padding:44px 14px;
  }

  .hero-content{
    padding:30px 18px;
    border-radius:18px;
  }

  .hero-content h1{
    font-size:clamp(30px, 9vw, 34px);
    letter-spacing:-1px;
  }

  .hero-content p{
    font-size:16px;
  }

  .contact-main{
    padding:28px 12px;
  }

  .contact-card{
    padding:26px 18px;
    border-radius:18px;
  }

  .contact-card h1{
    font-size:clamp(29px, 9vw, 32px);
  }

  .product-section h2{
    font-size:clamp(23px, 7vw, 26px);
  }

  .product-section p{
    font-size:15.5px;
  }

  .footer-content p{
    font-size:14px;
  }

}

/* =========================================
   ACCESSIBILITY / REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }

}