:root{
  --bg:#ffffff;
  --text:#0a2f33;  --bg-alt:#f3f8f9;
  --muted:#4b6166;
  --primary:#13bfb2;
  --primary-2:#5adad2;
  --border:rgba(10,47,51,.12);
  --shadow-sm:0 8px 20px rgba(10,47,51,.08);
  --shadow-md:0 14px 34px rgba(10,47,51,.12);
  --shadow-lg:0 22px 60px rgba(10,47,51,.16);
  --radius:10px;
  --radius-sm:8px;
  --ring:0 0 0 3px rgba(19,191,178,.22);
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1rem;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0.75rem;
  padding:.65rem 1rem;
  background:var(--text);
  color:var(--bg);
  border-radius:var(--radius-sm);
  z-index:2000;
  text-decoration:none;
  font-weight:800;
}
.skip-link:focus{left:1rem; outline:none; box-shadow:var(--ring)}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px rgba(10,47,51,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.85rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--text);
  min-width:max-content;
}

.logo{
  height:44px;
  width:auto;
  display:block;
}

.brand-name{
  font-weight:920;
  letter-spacing:.15px;
  font-size:1.02rem;
  line-height:1.1;
  position:relative;
  padding-left:.65rem;
}

.brand-name::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:1.35rem;
  border-radius:999px;
  background:linear-gradient(180deg, var(--primary), rgba(19,191,178,.35));
}

.brand:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--radius-sm);
}

.nav{margin-left:auto; position:relative}

.nav-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:0;
  margin:0;
}

.nav-menu a{
  text-decoration:none;
  color:var(--text);
  font-weight:650;
  letter-spacing:.2px;
  padding:.45rem .55rem;
  border-radius:8px;
  transition:background .2s ease, transform .2s ease;
}

.nav-menu a:hover{background:rgba(19,191,178,.12)}
.nav-menu a:focus-visible{outline:none; box-shadow:var(--ring); background:rgba(19,191,178,.12)}

.nav-cta{
  background:rgba(19,191,178,.12);
  border:1px solid rgba(19,191,178,.24);
}
.nav-cta:hover{background:rgba(19,191,178,.18)}

.lang-switch{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.lang-switch button{
  appearance:none;
  border:1px solid rgba(19,191,178,.35);
  background:transparent;
  color:var(--text);
  padding:.4rem .55rem;
  font-weight:800;
  border-radius:8px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.lang-switch button:hover{transform:translateY(-1px)}
.lang-switch button:focus-visible{outline:none; box-shadow:var(--ring)}
.lang-switch button[aria-pressed="true"]{
  background:var(--primary);
  border-color:var(--primary);
  color:#ffffff;
  box-shadow:0 10px 24px rgba(19,191,178,.22);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.6rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  border-radius:10px;
  padding:.55rem .7rem;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(10,47,51,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-toggle:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.nav-toggle:focus-visible{outline:none; box-shadow:var(--ring)}
.nav-toggle-icon{
  width:18px; height:12px; position:relative; display:inline-block;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background:var(--text);
}
.nav-toggle-icon::before{top:0}
.nav-toggle-icon::after{bottom:0}

.hero{
  padding:4.2rem 0 3.4rem;
  background:
    radial-gradient(1100px 420px at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(900px 500px at 85% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#ffffff;
}

.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:stretch;
  gap:2rem;
}

.eyebrow{
  margin:0 0 .6rem 0;
  font-weight:800;
  letter-spacing:.35px;
  opacity:.95;
}

.hero h1{
  margin:.1rem 0 .9rem 0;
  font-size:clamp(2rem, 3vw, 3rem);
  line-height:1.12;
  letter-spacing:-.3px;
}

.lead{
  margin:0;
  font-size:1.06rem;
  max-width:58ch;
  opacity:.96;
}

.hero-actions{
  margin-top:1.55rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.75rem;
  margin-top:1.9rem;
}

.metric{
  padding:.9rem .95rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(10,47,51,.14);
}

.metric-value{
  display:block;
  font-weight:900;
  letter-spacing:.2px;
}

.metric-label{
  display:block;
  margin-top:.25rem;
  font-size:.92rem;
  opacity:.92;
}

.hero-panel{display:flex}

.panel-card{
  width:100%;
  border-radius:var(--radius);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 22px 60px rgba(10,47,51,.22);
  padding:1.25rem 1.2rem;
}

.panel-badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(10,47,51,.22);
  border:1px solid rgba(255,255,255,.22);
  font-weight:800;
  font-size:.9rem;
}

.panel-line{
  height:1px;
  margin:1.05rem 0 1rem;
  background:linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,0));
}

.panel-row{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  padding:.55rem .2rem;
}

.panel-dot{
  width:10px; height:10px;
  border-radius:999px;
  margin-top:.35rem;
  background:#ffffff;
  opacity:.92;
}

.panel-text{opacity:.96}

.section{padding:3.2rem 0}
.section.alt{background:var(--bg-alt)}

.section-head{margin-bottom:1.35rem}
.section-head h2{
  margin:0 0 .45rem 0;
  font-size:clamp(1.55rem, 2.2vw, 2rem);
  letter-spacing:-.2px;
}
.section-sub{
  margin:0;
  color:var(--muted);
  max-width:75ch;
}

.split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1.2rem;
  align-items:start;
}

.stack{display:grid; gap:1.2rem}

.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg);
}

.surface{box-shadow:var(--shadow-sm)}
.about-card{padding:1.25rem 1.15rem}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}

.pill{
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(19,191,178,.32);
  background:rgba(19,191,178,.10);
  font-weight:800;
  color:var(--text);
  font-size:.92rem;
}

.values{
  list-style:none;
  padding:0;
  margin:.25rem 0 0 0;
  display:grid;
  gap:.8rem;
}

.values li{display:grid; gap:.15rem}
.value-title{font-weight:900}
.value-desc{color:var(--muted)}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}

.service{padding:1.25rem 1.15rem}

.service-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.service h3{
  margin:.1rem 0 .65rem;
  font-size:1.06rem;
  letter-spacing:-.1px;
}

.service p{margin:0 0 .9rem; color:var(--muted)}

.tag{
  padding:.25rem .5rem;
  border-radius:999px;
  border:1px solid rgba(10,47,51,.14);
  background:rgba(10,47,51,.04);
  color:var(--text);
  font-weight:850;
  font-size:.82rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
  font-weight:900;
  border-radius:10px;
  border:1px solid transparent;
  padding:.78rem 1.05rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  cursor:pointer;
  letter-spacing:.2px;
}

.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px)}

.btn.primary{
  background:rgba(10,47,51,.92);
  color:#ffffff;
  box-shadow:0 16px 32px rgba(10,47,51,.20);
}
.btn.primary:hover{box-shadow:0 20px 40px rgba(10,47,51,.24)}

.btn.ghost{
  background:rgba(255,255,255,.14);
  color:#ffffff;
  border-color:rgba(255,255,255,.32);
  box-shadow:0 16px 34px rgba(10,47,51,.18);
}
.btn.ghost:hover{background:rgba(255,255,255,.18)}

.btn.subtle{
  background:rgba(10,47,51,.04);
  border-color:rgba(10,47,51,.12);
  color:var(--text);
  box-shadow:0 14px 26px rgba(10,47,51,.10);
}

.btn.text{
  padding:0;
  border:none;
  background:transparent;
  color:var(--primary);
  font-weight:900;
}
.btn.text:hover{transform:none; text-decoration:underline}

.faq{
  padding:.3rem;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,191,178,.06), rgba(255,255,255,0));
}

.faq-item{
  border-radius:var(--radius);
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.faq-item + .faq-item{margin-top:.75rem}
.faq-title{margin:0}

.faq-trigger{
  width:100%;
  text-align:left;
  padding:1rem 1rem;
  border:none;
  background:transparent;
  color:var(--text);
  font-weight:900;
  letter-spacing:.1px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
  transition:background .2s ease;
}

.faq-trigger:hover{background:rgba(19,191,178,.08)}
.faq-trigger:focus-visible{outline:none; box-shadow:var(--ring)}

.chev{
  width:10px; height:10px;
  border-right:2px solid var(--text);
  border-bottom:2px solid var(--text);
  transform:rotate(45deg);
  transition:transform .2s ease;
  opacity:.9;
}
.faq-trigger[aria-expanded="true"] .chev{transform:rotate(-135deg)}

.faq-panel{
  padding:0 1rem 1rem;
  color:var(--muted);
}
.faq-panel p{margin:.1rem 0 0}

.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:start;
}

.form{padding:1.25rem 1.15rem}

.field{display:grid; gap:.35rem; margin-bottom:.95rem}
label{font-weight:900}

input, textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  background:#ffffff;
  padding:.72rem .8rem;
  font:inherit;
  color:var(--text);
  transition:box-shadow .2s ease, border-color .2s ease;
}

textarea{resize:vertical; min-height:130px}

input:focus, textarea:focus{
  outline:none;
  border-color:rgba(19,191,178,.7);
  box-shadow:var(--ring);
}

.field-error{
  margin:0;
  min-height:1.05rem;
  color:#8a1f2d;
  font-weight:750;
  font-size:.92rem;
}

.form-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.25rem;
}

.form-status{
  margin:.95rem 0 0 0;
  color:var(--muted);
  font-weight:800;
}

.contact-aside{padding:1.25rem 1.15rem}
.contact-aside h3{margin:.1rem 0 .4rem}
.muted{color:var(--muted); margin:.2rem 0 1rem}
.aside-block{margin-top:1.05rem}
.aside-title{margin:0 0 .4rem; font-weight:900}
.aside-list{margin:.2rem 0 0 1.1rem; color:var(--muted)}
.disclaimer{margin:.2rem 0 0; color:var(--muted); font-size:.95rem}

.site-footer{
  background:rgba(10,47,51,.96);
  color:#ffffff;
  padding:1.6rem 0;
}

.footer-inner{
  display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.footer-brand{margin:0; font-weight:950; letter-spacing:.2px}
.footer-meta{margin:.25rem 0 0; opacity:.85}
.footer-right p{margin:0; opacity:.92}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s ease, transform .65s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .reveal, .nav-menu a, .lang-switch button{transition:none}
  .reveal{opacity:1; transform:none}
}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-panel{display:none}
  .hero-metrics{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 820px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute;
    right:0;
    top:calc(100% + .65rem);
    width:min(340px, calc(100vw - 2rem));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:.55rem;
    background:rgba(255,255,255,.98);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
  }
  .nav-menu.is-open{display:flex}
  .nav-menu a{padding:.7rem .75rem}
  .brand-name{font-size:1rem}
}

@media (max-width: 520px){
  .services-grid{grid-template-columns:1fr}
  .brand-name{
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

