/* =========================

   THEME TOKENS

   ========================= */

:root{

  --max: 1120px;

  --pad: 20px;



  --bg: #F8FAFC;

  --text: #111827;

  --muted: #475569;



  --border: #E2E8F0;

  --card-bg: #FFFFFF;

  --card-border: #E2E8F0;



  --nav-bg: #0F766E;

  --nav-text: #FFFFFF;

  --nav-text-soft: rgba(255,255,255,0.82);

  --nav-border-strong: rgba(255,255,255,0.18);

  --mobile-nav-bg: #0B5F59;



  --input-bg: #FFFFFF;

  --input-border: #CBD5E1;



  --accent: #0F766E;

  --accent-strong: #0B5F59;

  --accent-contrast: #FFFFFF;



  --section-alt: #F1F5F9;



  --focus: rgba(15,118,110,0.18);



  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);

  --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10);

  --radius-sm: 12px;

  --radius-md: 18px;

  --radius-lg: 24px;



  --nav-h: 76px;

}



html[data-theme="dark"]{

  --bg: #0F172A;

  --text: #E5E7EB;

  --muted: #94A3B8;



  --border: #1E293B;

  --card-bg: #111827;

  --card-border: #1F2937;



  --nav-bg: #0F766E;

  --nav-text: #FFFFFF;

  --nav-text-soft: rgba(255,255,255,0.78);

  --nav-border-strong: rgba(255,255,255,0.12);

  --mobile-nav-bg: #111827;



  --input-bg: #0F172A;

  --input-border: #334155;



  --accent: #0F766E;

  --accent-strong: #0F766E;

  --accent-contrast: #FFFFFF;



  --section-alt: #111827;



  --focus: rgba(20,184,166,0.20);



  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);

  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);

}



/* =========================

   RESET

   ========================= */

*,

*::before,

*::after{

  box-sizing: border-box;

}



html{

  scroll-behavior: smooth;

}



body{

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  line-height: 1.65;

  text-rendering: optimizeLegibility;

}



img{

  max-width: 100%;

  display: block;

}



a{

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea,

select{

  font: inherit;

}



button{

  cursor: pointer;

}



:focus-visible{

  outline: 3px solid var(--focus);

  outline-offset: 2px;

}



/* =========================

   LAYOUT

   ========================= */

.wrap{

  width: min(100% - 2 * var(--pad), var(--max));

  margin: 0 auto;

}



main{

  padding-top: 0;

}



.section{

  padding: 72px 0;

}



.section-alt{

  background: var(--section-alt);

}



.section-cta{

  text-align: center;

}



.content-narrow{

  max-width: 760px;

}



.grid-3{

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px;

}



/* =========================

   TYPOGRAPHY

   ========================= */

h1, h2, h3{

  margin: 0 0 14px;

  line-height: 1.15;

  letter-spacing: -0.02em;

}



h1{

  font-size: clamp(2.4rem, 6vw, 4.2rem);

}



h2{

  font-size: clamp(1.8rem, 4vw, 2.5rem);

  margin-bottom: 26px;

}



h3{

  font-size: 1.15rem;

}



p{

  margin: 0 0 16px;

  color: var(--text);

}



ul{

  margin: 0 0 18px 1.2rem;

  padding: 0;

}



li + li{

  margin-top: 8px;

}



.hero-sub{

  max-width: 760px;

  font-size: clamp(1.05rem, 2vw, 1.25rem);

  color: var(--muted);

}



/* =========================

   NAVIGATION

   ========================= */

.nav{

  position: sticky;

  top: 0;

  z-index: 1000;

  background: var(--nav-bg);

  color: var(--nav-text);

  border-bottom: 1px solid var(--nav-border-strong);

  backdrop-filter: saturate(140%) blur(10px);

}



.nav-inner{

  width: min(100% - 2 * var(--pad), var(--max));

  min-height: var(--nav-h);

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

}



.brand{

  font-weight: 800;

  font-size: 1.05rem;

  letter-spacing: -0.02em;

  color: var(--nav-text);

  white-space: nowrap;

}



.nav-right{

  display: flex;

  align-items: center;

  gap: 14px;

  margin-left: auto;

}



.nav-links{

  display: flex;

  align-items: center;

  gap: 6px;

}



.nav-links > a{

  color: var(--nav-text-soft);

  padding: 10px 14px;

  border-radius: 999px;

  font-weight: 700;

  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;

}



.nav-links > a:hover,

.nav-links > a.is-active{

  color: var(--nav-text);

  background: rgba(255,255,255,0.12);

}



.nav-links > a[aria-current="page"]{

  color: var(--nav-text);

  background: rgba(255,255,255,0.14);

}



.nav-actions{

  display: flex;

  align-items: center;

  gap: 10px;

}



.lang-switch{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 46px;

  height: 42px;

  padding: 0 12px;

  border-radius: 999px;

  color: var(--nav-text);

  background: rgba(255,255,255,0.10);

  font-weight: 800;

  transition: background 0.2s ease;

}



.lang-switch:hover{

  background: rgba(255,255,255,0.16);

}



.theme-toggle{

  width: 42px;

  height: 42px;

  border: 0;

  border-radius: 999px;

  background: rgba(255,255,255,0.10);

  color: var(--nav-text);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s ease;

}



.theme-toggle:hover{

  background: rgba(255,255,255,0.16);

}



.theme-toggle svg{

  width: 19px;

  height: 19px;

}



.theme-icon-dark{

  display: none;

}



html[data-theme="dark"] .theme-icon-light{

  display: none;

}



html[data-theme="dark"] .theme-icon-dark{

  display: inline-flex;

}



.nav-toggle{

  display: none;

  width: 44px;

  height: 44px;

  border: 0;

  border-radius: 12px;

  background: rgba(255,255,255,0.10);

  padding: 10px;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 4px;

}



.nav-toggle span{

  display: block;

  width: 20px;

  height: 2px;

  background: var(--nav-text);

  border-radius: 999px;

  transition: transform 0.2s ease, opacity 0.2s ease;

}



.nav-toggle.is-open span:nth-child(1){

  transform: translateY(6px) rotate(45deg);

}



.nav-toggle.is-open span:nth-child(2){

  opacity: 0;

}



.nav-toggle.is-open span:nth-child(3){

  transform: translateY(-6px) rotate(-45deg);

}



.mobile-only{

  display: none;

}



.desktop-only{

  display: flex;

}



/* =========================

   HERO

   ========================= */

.hero{

  padding: 92px 0 68px;

}



.hero .wrap{

  display: grid;

  gap: 18px;

}



.hero-cta{

  display: flex;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 8px;

}



/* =========================

   CARDS

   ========================= */

.card{

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: var(--radius-md);

  padding: 24px;

  box-shadow: var(--shadow-sm);

}



.card p:last-child{

  margin-bottom: 0;

}



/* =========================

   BUTTONS

   ========================= */

.btn{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 18px;

  border-radius: 14px;

  border: 1px solid transparent;

  font-weight: 800;

  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;

}



.btn:hover{

  transform: translateY(-1px);

}



.btn-primary{

  background: var(--accent);

  color: var(--accent-contrast);

}



.btn-primary:hover{

  background: var(--accent-strong);

}



/* =========================

   CONTACT

   ========================= */

.contact-grid{

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: 28px;

  align-items: start;

}



.contact-form-wrap{

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  border-radius: var(--radius-lg);

  padding: 26px;

  box-shadow: var(--shadow-md);

}



.contact-form{

  display: grid;

  gap: 18px;

}



.form-row{

  display: grid;

  gap: 8px;

}



.form-row label{

  font-weight: 700;

}



.form-row input,

.form-row textarea,

.form-row select{

  width: 100%;

  border: 1px solid var(--input-border);

  border-radius: 14px;

  background: var(--input-bg);

  color: var(--text);

  padding: 13px 14px;

  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.form-row textarea{

  min-height: 160px;

  resize: vertical;

}



.form-row input:focus,

.form-row textarea:focus,

.form-row select:focus{

  border-color: var(--accent);

  box-shadow: 0 0 0 4px var(--focus);

  outline: 0;

}



.form-checkbox .checkbox-label{

  display: grid;

  grid-template-columns: 20px 1fr;

  gap: 12px;

  align-items: start;

  font-weight: 400;

}



.form-checkbox input[type="checkbox"]{

  margin-top: 4px;

}



.form-actions{

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.hp-field{

  position: absolute !important;

  left: -9999px !important;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.error-box{

  margin-bottom: 18px;

  padding: 14px 16px;

  border-radius: 14px;

  border: 1px solid #FCA5A5;

  background: #FEF2F2;

  color: #991B1B;

}



html[data-theme="dark"] .error-box{

  border-color: #7F1D1D;

  background: #2A1215;

  color: #FCA5A5;

}



/* =========================

   FOOTER

   ========================= */

.footer{

  border-top: 1px solid var(--border);

  padding: 34px 0 40px;

}



.footer-inner{

  width: min(100% - 2 * var(--pad), var(--max));

  margin: 0 auto;

  display: grid;

  gap: 18px;

}



.footer-top{

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}



.footer-brand a{

  font-weight: 800;

}



.footer-links{

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}



.footer-links a{

  color: var(--muted);

}



.footer-links a:hover{

  color: var(--text);

}



.footer-bottom p{

  margin: 0;

  color: var(--muted);

  font-size: 0.95rem;

}



/* =========================

   UTILITY

   ========================= */

.section .content-narrow p:last-child,

.section .content-narrow ul:last-child,

.section .content-narrow li:last-child{

  margin-bottom: 0;

}



/* =========================

   RESPONSIVE

   ========================= */

@media (max-width: 960px){

  .grid-3{

    grid-template-columns: 1fr;

  }



  .contact-grid{

    grid-template-columns: 1fr;

  }

}



@media (max-width: 820px){

  .desktop-only{

    display: none;

  }



  .mobile-only{

    display: flex;

    margin-top: 8px;

    padding-top: 10px;

    border-top: 1px solid rgba(255,255,255,0.12);

    gap: 10px;

  }



  .nav-toggle{

    display: inline-flex;

  }



  .nav-inner{

    min-height: 72px;

  }



  .nav-links{

    position: absolute;

    top: calc(100% + 1px);

    left: var(--pad);

    right: var(--pad);

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    padding: 14px;

    border-radius: 20px;

    background: var(--mobile-nav-bg);

    box-shadow: var(--shadow-md);

  }



  .nav-links.is-open{

    display: flex;

  }



  .nav-links > a{

    padding: 12px 14px;

    border-radius: 14px;

  }



  .hero{

    padding: 78px 0 56px;

  }



  .section{

    padding: 60px 0;

  }



  .contact-form-wrap{

    padding: 22px;

  }

}



@media (max-width: 560px){

  :root{

    --pad: 16px;

  }



  h1{

    font-size: clamp(2rem, 9vw, 3rem);

  }



  h2{

    font-size: clamp(1.55rem, 6vw, 2rem);

  }



  .footer-top{

    align-items: flex-start;

    flex-direction: column;

  }



  .footer-links{

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

  }



  .hero-cta,

  .form-actions{

    flex-direction: column;

    align-items: stretch;

  }



  .btn{

    width: 100%;

  }

}