:root{
  --accent:#0ea5b7;
  --accent-dark:#0a6e7d;
  --accent-deep:#083f47;
  --ink:#12262b;
  --ink-soft:#5b7278;
  --bg:#ffffff;
  --bg-tint:#f4fbfb;
  --border:#e4eef0;
  --radius:18px;
  --shadow:0 20px 45px -20px rgba(10,60,70,0.25);
  --shadow-sm:0 8px 20px -10px rgba(10,60,70,0.18);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--ink);line-height:1.2;font-weight:700;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea{font-family:inherit;font-size:0.95rem;}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:100px;font-weight:600;font-size:0.95rem;
  transition:all .25s ease;white-space:nowrap;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 12px 24px -8px rgba(14,165,183,0.55);}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-dark);}
.btn--light{background:#fff;color:var(--accent-dark);}
.btn--light:hover{transform:translateY(-2px);}
.btn--wide{width:100%;}

.eyebrow{
  display:inline-block;font-size:0.8rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:14px;
}
.eyebrow--center{display:block;text-align:center;}
.text-accent{color:var(--accent);}

/* Topbar */
.topbar{background:var(--accent-deep);color:#dff4f6;font-size:0.82rem;}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;flex-wrap:wrap;gap:6px;}
.topbar__contact{display:flex;gap:22px;flex-wrap:wrap;}
.topbar__contact a{display:inline-flex;align-items:center;gap:6px;opacity:0.9;}
.topbar__contact a:hover{opacity:1;}
.topbar__contact svg{width:14px;height:14px;fill:currentColor;}
.topbar__note{opacity:0.85;}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.4rem;}
.logo__mark{width:34px;height:34px;display:flex;}
.logo__mark svg{width:100%;height:100%;fill:var(--accent);}
.logo__text em{font-style:normal;color:var(--accent);}
.nav{display:flex;gap:34px;}
.nav a{font-weight:500;font-size:0.95rem;color:var(--ink);position:relative;padding:4px 0;}
.nav a:hover{color:var(--accent-dark);}
.nav a.is-current{color:var(--accent-dark);}
.header__actions{display:flex;align-items:center;gap:18px;}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;}
.nav-toggle span{height:2px;background:var(--ink);border-radius:2px;}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);overflow:hidden;padding:70px 0 40px;}
.hero__slides{position:relative;min-height:520px;}
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;}
.hero__slide.is-active{opacity:1;visibility:visible;position:relative;}
.hero__grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;min-height:480px;}
.hero__content h1{font-size:2.9rem;margin-bottom:18px;letter-spacing:-0.5px;}
.hero__content p{color:var(--ink-soft);font-size:1.05rem;max-width:480px;margin-bottom:30px;}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;}
.hero__media{position:relative;display:flex;justify-content:center;align-items:center;}
.hero__art{width:90%;max-width:420px;filter:drop-shadow(0 25px 40px rgba(10,60,70,0.25));}
.floating-card{
  position:absolute;background:#fff;border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);
  max-width:230px;animation:float 5s ease-in-out infinite;
}
.floating-card--top{top:6%;left:0;}
.floating-card--bottom{bottom:8%;right:0;animation-delay:1.5s;}
.floating-card__icon{width:38px;height:38px;border-radius:10px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.floating-card__icon svg{width:20px;height:20px;fill:none;stroke:var(--accent-dark);stroke-width:2;}
.floating-card strong{display:block;font-size:0.85rem;font-family:'Poppins',sans-serif;}
.floating-card span{font-size:0.78rem;color:var(--ink-soft);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.hero__controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px;}
.hero__arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s;}
.hero__arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.hero__dots{display:flex;gap:9px;}
.hero__dots span{width:9px;height:9px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .2s;}
.hero__dots span.is-active{background:var(--accent);width:24px;border-radius:6px;}

/* Trust strip */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;}
.strip__inner{display:flex;align-items:center;gap:30px;padding:22px 24px;flex-wrap:wrap;}
.strip__label{font-weight:600;color:var(--ink-soft);font-size:0.85rem;flex-shrink:0;}
.strip__items{display:flex;gap:30px;flex-wrap:wrap;}
.strip__items span{font-weight:600;color:var(--ink);opacity:0.55;font-size:0.95rem;}

/* Sections */
.section{padding:90px 0;}
.section--tint{background:var(--bg-tint);}
.section__head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section__head h2{font-size:2.1rem;margin-bottom:14px;}
.section__sub{color:var(--ink-soft);}

.grid{display:grid;gap:28px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

/* Cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 28px;transition:all .25s ease;}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px);border-color:transparent;}
.card__icon{width:52px;height:52px;border-radius:14px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.card__icon svg{width:26px;height:26px;fill:var(--accent-dark);}
.card h3{font-size:1.15rem;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:0.95rem;}
.card__link{display:inline-block;margin-top:14px;font-weight:600;font-size:0.9rem;color:var(--accent-dark);}
.card__link:hover{color:var(--accent);}

/* Inner page header */
.page-header{background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);padding:64px 0 50px;text-align:center;}
.page-header .eyebrow{display:block;}
.page-header h1{font-size:2.4rem;margin-bottom:12px;}
.page-header p{color:var(--ink-soft);max-width:560px;margin:0 auto;}
.breadcrumb{display:flex;justify-content:center;gap:8px;font-size:0.85rem;color:var(--ink-soft);margin-top:14px;}
.breadcrumb a{color:var(--accent-dark);font-weight:600;}

.page-header--photo{
  position:relative;background-size:cover;background-position:center;padding:110px 0;isolation:isolate;
}
.page-header--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,63,71,0.82),rgba(8,63,71,0.75));
}
.page-header--photo .eyebrow{color:#8fe0e6;}
.page-header--photo h1{color:#fff;}
.page-header--photo p{color:#d6ecee;}
.page-header--photo .breadcrumb{color:#bcdfe2;}
.page-header--photo .breadcrumb a{color:#fff;}

/* Catalog (services page) */
.catalog-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:56px;}
.catalog-filter button{
  padding:10px 20px;border-radius:100px;border:1.5px solid var(--border);font-weight:600;font-size:0.88rem;color:var(--ink-soft);
  transition:all .2s;
}
.catalog-filter button:hover{border-color:var(--accent);color:var(--accent-dark);}
.catalog-filter button.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}

.catalog-group{margin-bottom:70px;scroll-margin-top:110px;}
.catalog-group__head{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
.catalog-group__icon{width:50px;height:50px;border-radius:14px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.catalog-group__icon svg{width:24px;height:24px;fill:var(--accent-dark);}
.catalog-group__head h2{font-size:1.5rem;margin-bottom:4px;}
.catalog-group__head p{color:var(--ink-soft);font-size:0.92rem;}

.catalog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.catalog-list li{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  font-size:0.9rem;font-weight:500;display:flex;align-items:center;gap:10px;
}
.catalog-list li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;
}

.systems-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.systems-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;}
.systems-card h3{font-size:1.2rem;margin-bottom:10px;}
.systems-card p{color:var(--ink-soft);font-size:0.95rem;}

@media (max-width:980px){
  .catalog-list{grid-template-columns:repeat(2,1fr);}
  .systems-grid{grid-template-columns:1fr;}
  .process__track{display:none;}
  .process{padding:0;}
  .process__sticky{position:static;}
}
@media (max-width:600px){
  .catalog-list{grid-template-columns:1fr;}
}

/* About */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about__photo{width:100%;height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);}
.about__content p{color:var(--ink-soft);margin:16px 0 22px;}
.about__content h2{font-size:2rem;}
.checklist{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;}
.checklist li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:0.95rem;}
.checklist svg{width:20px;height:20px;flex-shrink:0;stroke:var(--accent);fill:none;stroke-width:2.5;background:var(--bg-tint);border-radius:50%;padding:3px;}

/* Flow diagram */
.flow-diagram-wrap{overflow-x:auto;padding-bottom:8px;}
.flow-diagram{width:100%;min-width:760px;height:auto;color:var(--accent-dark);}
.flow-pipe{stroke:#dbeef0;stroke-width:10;stroke-linecap:round;}
.station-bg{fill:#fff;stroke:var(--border);stroke-width:1.5;}
.station-pulse{animation:stationPulse 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.station-icon{stroke:var(--accent-dark);stroke-width:2;fill:none;}
.station-check{stroke:var(--accent);stroke-width:2.4;}
.station-label{text-anchor:middle;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;fill:var(--ink);}
.station-sub{text-anchor:middle;font-size:11px;fill:var(--ink-soft);}
.station--output .station-bg{stroke:var(--accent);}
@keyframes stationPulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.03);}
}
.particle{filter:drop-shadow(0 2px 4px rgba(10,60,70,0.25));}

/* Process (scroll-linked) */
.process{position:relative;padding:100px 0 220px;}
.process__sticky{position:sticky;top:140px;}
.process__track{position:relative;margin:0 12.5% 46px;height:3px;background:var(--border);border-radius:3px;z-index:0;}
.process__fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent);border-radius:3px;}
.process__marker{
  position:absolute;top:50%;left:0%;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 3px rgba(14,165,183,0.25);
  transform:translate(-50%,-50%);transition:left .05s linear;
}
.process__step{text-align:center;padding:10px;position:relative;z-index:1;transition:opacity .3s ease;}
.process__num{display:inline-block;font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:800;color:var(--accent);opacity:0.3;margin-bottom:6px;transition:opacity .3s ease,color .3s ease;}
.process__step h3{font-size:1.1rem;margin-bottom:10px;transition:color .3s ease;}
.process__step p{color:var(--ink-soft);font-size:0.92rem;}
.process__step.is-active .process__num{opacity:1;}
.process__step.is-active h3{color:var(--accent-dark);}

/* Application cards */
.app-card{background:#fff;border-radius:var(--radius);padding:30px 26px;border:1px solid var(--border);}
.app-card__tag{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--accent-dark);background:var(--bg-tint);padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.app-card h3{font-size:1.1rem;margin-bottom:8px;}
.app-card p{color:var(--ink-soft);font-size:0.92rem;}

/* CTA banner */
.cta-banner{
  position:relative;color:#fff;padding:70px 0;isolation:isolate;
  background:linear-gradient(120deg,rgba(10,110,125,0.8),rgba(8,63,71,0.82)),url('../assets/photos/cta-plant.jpg');
  background-size:cover;background-position:center;
}
.cta-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.cta-banner h2{color:#fff;font-size:1.7rem;margin-bottom:8px;}
.cta-banner p{color:#c9eaec;max-width:480px;}

/* Contact */
.contact__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;}
.contact__info h2{font-size:2rem;margin:6px 0 14px;}
.contact__info p{color:var(--ink-soft);margin-bottom:26px;}
.contact__list{display:flex;flex-direction:column;gap:16px;}
.contact__list li{display:flex;align-items:center;gap:14px;font-weight:500;}
.contact__list svg{width:20px;height:20px;fill:var(--accent-dark);flex-shrink:0;}
.contact__form{background:var(--bg-tint);border-radius:var(--radius);padding:36px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.contact__form input,.contact__form textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;background:#fff;
}
.contact__form textarea{margin-bottom:20px;resize:vertical;}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--accent);}
.form__note{margin-top:12px;font-size:0.88rem;color:var(--accent-dark);font-weight:500;min-height:1.2em;}

/* Footer */
.footer{background:var(--accent-deep);color:#cfe9eb;padding:70px 0 0;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.12);}
.logo--footer{color:#fff;margin-bottom:14px;}
.logo--footer .logo__mark svg{fill:#fff;}
.logo--footer .logo__text em{color:#7fe0e6;}
.footer__brand p{font-size:0.9rem;opacity:0.75;max-width:280px;}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:16px;}
.footer__col a{display:block;font-size:0.9rem;opacity:0.8;margin-bottom:10px;}
.footer__col a:hover{opacity:1;}
.footer__newsletter p{font-size:0.88rem;opacity:0.75;margin-bottom:14px;}
.newsletter{display:flex;gap:8px;}
.newsletter input{flex:1;padding:12px 14px;border-radius:10px;border:none;font-size:0.88rem;}
.newsletter button{width:42px;height:42px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.newsletter button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;}
.newsletter__note{font-size:0.8rem;color:#7fe0e6;display:block;margin-top:8px;}
.footer__bottom{display:flex;justify-content:space-between;padding:22px 24px;font-size:0.85rem;opacity:0.7;flex-wrap:wrap;gap:8px;}

/* Responsive */
@media (max-width:980px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  .hero__grid{grid-template-columns:1fr;}
  .hero__content{text-align:center;}
  .hero__content p{margin-left:auto;margin-right:auto;}
  .hero__cta{justify-content:center;}
  .hero__media{margin-top:40px;}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .about__grid{grid-template-columns:1fr;}
  .about__media{order:2;}
  .contact__grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .hero__content h1{font-size:2.1rem;}
  .grid--3,.grid--4{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}
  .cta-banner__inner{flex-direction:column;text-align:center;}
  .floating-card{display:none;}
  .topbar__inner{justify-content:center;text-align:center;}
}