/* ============================================================ WATER REGIME — Water Treatment Technologies Premium design system • motion • responsive Brand green #00A950 ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ---------- Design tokens ---------- */ :root{ /* brand */ --green: #00a950; --green-600: #009646; --green-700: #007a3a; --green-800: #0a5c30; --green-soft: #e7f7ee; --green-glow: rgba(0,169,80,.30); --aqua: #14c2c9; --aqua-soft: #e4faf9; /* deep / dark surfaces */ --ink: #06231a; /* headings on light */ --deep: #041c22; /* dark section base */ --deep-2: #062a2b; /* dark section gradient */ --night: #03151a; /* footer */ /* neutrals */ --paper: #ffffff; --mist: #f3f8f4; --mist-2: #eef5f0; --muted: #5a6b62; --muted-2: #85958c; --line: #e3ece6; --line-dark: rgba(255,255,255,.12); /* type */ --f-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* metrics */ --container: 1240px; --radius: 18px; --radius-lg: 28px; --radius-sm: 12px; --shadow-sm: 0 4px 18px rgba(6,35,26,.06); --shadow: 0 18px 50px -12px rgba(6,35,26,.16); --shadow-lg: 0 40px 90px -30px rgba(6,35,26,.35); --shadow-green: 0 20px 45px -14px var(--green-glow); --ease: cubic-bezier(.22,1,.36,1); --ease-2: cubic-bezier(.65,.05,.36,1); --nav-h: 84px; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{ font-family:var(--f-body); color:var(--ink); background:var(--paper); line-height:1.65; font-size:16.5px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* clip (not hidden) prevents horizontal overflow WITHOUT making the scroll container — keeps window.scrollY / scroll events working for the header state, progress bar, counters, parallax and reveals. */ overflow-x:clip; } html{overflow-x:clip} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} ul{list-style:none} ::selection{background:var(--green);color:#fff} /* ---------- Custom scrollbar ---------- */ ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:var(--mist)} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--green),var(--green-700));border-radius:20px;border:2px solid var(--mist)} /* scroll progress bar */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200; background:linear-gradient(90deg,var(--aqua),var(--green));box-shadow:0 0 12px var(--green-glow)} /* ---------- Typography ---------- */ h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:700;line-height:1.1;color:var(--ink);letter-spacing:-.02em} h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:800;letter-spacing:-.035em} h2{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.03em} h3{font-size:clamp(1.35rem,2.4vw,1.9rem)} h4{font-size:1.18rem} p{color:var(--muted)} .lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:#42544b;line-height:1.7} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} .section{position:relative;padding:clamp(72px,10vw,130px) 0} .section--tight{padding:clamp(56px,7vw,90px) 0} .section--dark{background: radial-gradient(1200px 600px at 80% -10%, rgba(0,169,80,.18), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(20,194,201,.14), transparent 55%), linear-gradient(160deg,var(--deep),var(--deep-2)); color:#dfeee7} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff} .section--dark p{color:#a9c4b8} .section--mist{background:var(--mist)} .grid{display:grid;gap:clamp(20px,2.4vw,32px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} /* ---------- Section heading kit ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display); font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--green-700);padding:8px 15px;border-radius:100px; background:var(--green-soft);border:1px solid rgba(0,169,80,.18);margin-bottom:22px} .section--dark .eyebrow{color:#7ff0b4;background:rgba(0,169,80,.14);border-color:rgba(0,169,80,.3)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-glow)} .head{max-width:760px} .head--center{margin-inline:auto;text-align:center} .head p{margin-top:18px;font-size:1.08rem} /* ---------- Buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;gap:11px; font-family:var(--f-display);font-weight:600;font-size:.98rem; padding:15px 28px;border-radius:100px;cursor:pointer;overflow:hidden; transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,color .3s; white-space:nowrap;will-change:transform} .btn svg{width:18px;height:18px;transition:transform .4s var(--ease)} .btn--primary{background:var(--green);color:#fff;box-shadow:var(--shadow-green)} .btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--green-600),var(--aqua)); opacity:0;transition:opacity .45s var(--ease);z-index:-1} .btn--primary:hover{transform:translateY(-3px);box-shadow:0 26px 55px -15px var(--green-glow)} .btn--primary:hover::after{opacity:1} .btn--primary:hover svg{transform:translateX(4px)} .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);} .btn--ghost:hover{border-color:var(--green);color:var(--green-700);transform:translateY(-3px)} .section--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)} .section--dark .btn--ghost:hover{border-color:var(--green);color:#9ff5c0} .btn--white{background:#fff;color:var(--ink)} .btn--white:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .btn--lg{padding:18px 34px;font-size:1.05rem} .btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center} /* text link with animated arrow */ .tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display); font-weight:600;color:var(--green-700);font-size:.96rem} .tlink svg{width:17px;height:17px;transition:transform .4s var(--ease)} .tlink:hover svg{transform:translateX(5px)} .section--dark .tlink{color:#7ff0b4} /* ============================================================ CUSTOM CURSOR ============================================================ */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none; z-index:2000;transform:translate(-50%,-50%);mix-blend-mode:normal} .cursor-dot{width:7px;height:7px;background:var(--green);transition:opacity .3s,transform .2s} .cursor-ring{width:40px;height:40px;border:1.6px solid rgba(0,169,80,.55); transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s,opacity .3s} .cursor-ring.is-hover{width:64px;height:64px;background:rgba(0,169,80,.10);border-color:transparent} .cursor-ring.is-down{width:30px;height:30px} body.hide-native, body.hide-native *{cursor:none !important} @media (hover:none),(max-width:900px){.cursor-dot,.cursor-ring{display:none!important}} /* ============================================================ PRELOADER ============================================================ */ .loader{position:fixed;inset:0;z-index:3000;display:grid;place-items:center; background:linear-gradient(160deg,var(--deep),var(--night));transition:opacity .7s var(--ease),visibility .7s} .loader.done{opacity:0;visibility:hidden} .loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px} .loader__drop{position:relative;width:96px;height:120px} .loader__drop svg{width:100%;height:100%;overflow:visible} .loader__mark{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3} .loader__fill{fill:var(--green)} .loader__wave{fill:var(--green)} .loader__pct{font-family:var(--f-display);font-weight:700;color:#fff;font-size:1.1rem;letter-spacing:.06em} .loader__word{font-family:var(--f-display);letter-spacing:.42em;text-transform:uppercase; font-size:.72rem;color:#7ff0b4;font-weight:600;padding-left:.42em} .loader__bar{width:170px;height:3px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden} .loader__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--aqua),var(--green));border-radius:5px} /* ============================================================ HEADER / NAV ============================================================ */ .header{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h); display:flex;align-items:center;transition:height .4s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s} .header.scrolled{height:70px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 1px 0 var(--line),0 12px 40px -24px rgba(6,35,26,.3)} .header__bar{display:flex;align-items:center;justify-content:space-between;width:100%; max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} .brand{display:flex;align-items:center;gap:12px;z-index:2} .brand img{height:44px;width:auto;transition:height .4s var(--ease)} .header.scrolled .brand img{height:38px} /* logo swap: white on transparent hero, colored when scrolled */ .brand .logo-dark{display:none} .header.scrolled .brand .logo-light{display:none} .header.scrolled .brand .logo-dark{display:block} .header.force-light .brand .logo-dark{display:none} .header.force-light .brand .logo-light{display:block} .nav{display:flex;align-items:center;gap:4px} .nav__link{position:relative;font-family:var(--f-display);font-weight:500;font-size:.95rem; padding:10px 15px;color:#fff;border-radius:10px;transition:color .3s;display:inline-flex;align-items:center;gap:6px} .header.scrolled .nav__link{color:var(--ink)} .nav__link::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px; background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);border-radius:2px} .nav__link:hover::after,.nav__link.active::after{transform:scaleX(1)} .nav__link:hover,.nav__link.active{color:var(--green)} .header.scrolled .nav__link:hover{color:var(--green-700)} .nav__link .chev{width:12px;height:12px;transition:transform .3s} /* dropdown */ .has-drop{position:relative} .drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px); min-width:264px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px; box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:all .35s var(--ease);z-index:20} .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .has-drop:hover .chev{transform:rotate(180deg)} .drop a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:12px;transition:background .25s,transform .25s} .drop a:hover{background:var(--mist)} .drop a:hover .drop__i{background:var(--green);color:#fff} .drop__i{flex:none;width:36px;height:36px;border-radius:10px;background:var(--green-soft);color:var(--green-700); display:grid;place-items:center;transition:all .3s} .drop__i svg{width:18px;height:18px} .drop b{font-family:var(--f-display);font-size:.92rem;font-weight:600;color:var(--ink);display:block;line-height:1.3} .drop span{font-size:.8rem;color:var(--muted);line-height:1.4} .header__cta{display:flex;align-items:center;gap:14px} .header .btn{padding:12px 22px;font-size:.9rem} /* tighten nav for more items */ .nav__link{padding:10px 12px;font-size:.92rem} /* MEGA MENU */ .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px); width:min(760px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px; box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:all .35s var(--ease);z-index:20; display:grid;grid-template-columns:repeat(3,1fr);gap:4px 20px} .has-drop:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega__col h6{font-family:var(--f-display);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--green-700);margin:4px 10px 8px;font-weight:700;display:flex;align-items:center;gap:7px} .mega__col h6 svg{width:14px;height:14px} .mega a{display:block;padding:8px 10px;border-radius:9px;font-size:.9rem;color:var(--ink);font-weight:500;transition:all .25s;position:relative} .mega a:hover{background:var(--mist);color:var(--green-700);padding-left:15px} .mega__foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:10px;padding-top:12px; display:flex;justify-content:space-between;align-items:center;gap:16px} .mega__foot span{font-size:.82rem;color:var(--muted)} /* mobile drawer group */ .m-group{margin-top:6px} .m-group summary{list-style:none;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:1.25rem; color:#fff;padding:14px 0;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center} .m-group summary::-webkit-details-marker{display:none} .m-group summary::after{content:"+";color:var(--green);font-size:1.5rem;transition:transform .3s} .m-group[open] summary::after{content:"–"} .m-group .m-sub{font-size:.98rem} /* sub-page section-nav (in-page anchor chips) */ .subnav{position:sticky;top:70px;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} .subnav__in{display:flex;gap:6px;overflow-x:auto;padding:12px 0;max-width:var(--container);margin-inline:auto; padding-inline:clamp(20px,5vw,40px);scrollbar-width:none} .subnav__in::-webkit-scrollbar{display:none} .subnav a{white-space:nowrap;font-family:var(--f-display);font-size:.86rem;font-weight:500;color:var(--muted); padding:8px 15px;border-radius:100px;transition:all .3s} .subnav a:hover{background:var(--mist);color:var(--green-700)} /* spec / applications list */ .speclist{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden} .speclist div{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;font-size:.94rem} .speclist div:nth-child(odd){background:var(--mist)} .speclist b{font-family:var(--f-display);color:var(--ink);font-weight:600} .speclist span{color:var(--muted);text-align:right} /* burger */ .burger{display:none;width:46px;height:46px;border-radius:12px;flex-direction:column;gap:5px; align-items:center;justify-content:center;z-index:2;background:rgba(255,255,255,.14);backdrop-filter:blur(8px)} .header.scrolled .burger{background:var(--mist)} .burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:all .35s var(--ease)} .header.scrolled .burger span{background:var(--ink)} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:999;pointer-events:none} .drawer__scrim{position:absolute;inset:0;background:rgba(4,20,26,.5);opacity:0;transition:opacity .4s;backdrop-filter:blur(3px)} .drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(88vw,400px); background:linear-gradient(165deg,var(--deep),var(--night));padding:100px 30px 40px; transform:translateX(100%);transition:transform .5s var(--ease);overflow-y:auto;box-shadow:var(--shadow-lg)} .drawer.open{pointer-events:auto} .drawer.open .drawer__scrim{opacity:1} .drawer.open .drawer__panel{transform:translateX(0)} .drawer a.m-link{display:block;font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:#fff; padding:15px 0;border-bottom:1px solid var(--line-dark);transition:color .3s,padding .3s} .drawer a.m-link:hover{color:var(--green);padding-left:8px} .drawer .m-sub{font-size:.95rem;font-weight:500;color:#9ff5c0;padding:9px 0 9px 16px;border:none} .drawer__foot{margin-top:30px} .drawer__foot .btn{width:100%;justify-content:center} .m-contact{margin-top:26px;color:#a9c4b8;font-size:.92rem;line-height:1.9} .m-contact a{color:#fff} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff} .hero__bg{position:absolute;inset:-8% 0 0 0;z-index:-3;will-change:transform} .hero__bg img{width:100%;height:112%;object-fit:cover} .hero__overlay{position:absolute;inset:0;z-index:-2; background: linear-gradient(90deg, rgba(4,20,26,.92) 0%, rgba(4,20,26,.66) 42%, rgba(4,20,26,.18) 100%), linear-gradient(0deg, rgba(3,21,26,.85), transparent 45%)} .hero__grain{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);background-size:4px 4px} .hero__content{max-width:760px;padding-block:120px} .hero .eyebrow{color:#7ff0b4;background:rgba(0,169,80,.16);border-color:rgba(0,169,80,.35);backdrop-filter:blur(6px)} .hero h1{color:#fff;margin-bottom:24px} .hero h1 .grad{background:linear-gradient(100deg,#3ff09a,var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent} .hero__sub{font-size:clamp(1.05rem,1.7vw,1.32rem);color:#cfe6db;max-width:600px;margin-bottom:38px} .hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:54px} .hero__stats{display:flex;gap:clamp(24px,4vw,54px);flex-wrap:wrap} .hero__stat b{font-family:var(--f-display);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;color:#fff;display:block;line-height:1} .hero__stat span{font-size:.86rem;color:#9fc0b2;letter-spacing:.02em} .hero__stat i{color:var(--green);font-style:normal} .hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:9px;color:#bcd6cb;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase} .hero__mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative} .hero__mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;background:var(--green); border-radius:3px;transform:translateX(-50%);animation:wheel 1.6s var(--ease) infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}} /* floating glass card in hero */ .hero__card{position:absolute;right:5%;bottom:16%;z-index:2;width:280px;padding:22px;border-radius:20px; background:rgba(255,255,255,.10);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow-lg)} .hero__card .hc-row{display:flex;align-items:center;gap:13px;margin-bottom:14px} .hero__card .hc-ic{width:42px;height:42px;border-radius:12px;background:var(--green);display:grid;place-items:center;flex:none} .hero__card .hc-ic svg{width:22px;height:22px;color:#fff} .hero__card b{font-family:var(--f-display);color:#fff;font-size:.98rem;display:block} .hero__card span{font-size:.8rem;color:#bcd6cb} .hero__card p{color:#cfe6db;font-size:.86rem;line-height:1.55} @media (max-width:1100px){.hero__card{display:none}} /* floating decorative blobs */ .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1;pointer-events:none} /* ============================================================ MARQUEE (client / partner strip) ============================================================ */ .marquee{overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee__track{display:flex;gap:60px;width:max-content;animation:scrollx 38s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track img{height:40px;width:auto;opacity:.55;filter:grayscale(1);transition:all .4s;flex:none} .marquee__track img:hover{opacity:1;filter:grayscale(0);transform:scale(1.08)} @keyframes scrollx{to{transform:translateX(-50%)}} .strip-label{text-align:center;font-family:var(--f-display);font-weight:600;letter-spacing:.16em; text-transform:uppercase;font-size:.76rem;color:var(--muted);margin-bottom:6px} /* ============================================================ REVEAL ANIMATIONS ============================================================ */ [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:transform,opacity} [data-reveal="left"]{transform:translateX(-46px)} [data-reveal="right"]{transform:translateX(46px)} [data-reveal="scale"]{transform:scale(.9)} [data-reveal].in{opacity:1;transform:none} [data-delay="1"]{transition-delay:.09s} [data-delay="2"]{transition-delay:.18s} [data-delay="3"]{transition-delay:.27s} [data-delay="4"]{transition-delay:.36s} [data-delay="5"]{transition-delay:.45s} [data-delay="6"]{transition-delay:.54s} /* word-by-word hero reveal */ .reveal-line{display:block;overflow:hidden} .reveal-line span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)} .hero.loaded .reveal-line span{transform:none} .hero .reveal-line:nth-child(2) span{transition-delay:.12s} .hero .reveal-line:nth-child(3) span{transition-delay:.24s} /* ============================================================ CARDS — solutions ============================================================ */ .card-tilt{transform-style:preserve-3d;transition:transform .4s var(--ease)} .sol-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:32px 30px 30px;overflow:hidden;transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s;height:100%} .sol-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,var(--green),var(--aqua));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s} .sol-card:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent} .sol-card:hover::before{opacity:1} .sol-card__glow{position:absolute;top:-40%;right:-30%;width:220px;height:220px;border-radius:50%; background:radial-gradient(var(--green-glow),transparent 70%);opacity:0;transition:opacity .5s} .sol-card:hover .sol-card__glow{opacity:1} .sol-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px; background:linear-gradient(140deg,var(--green-soft),#fff);border:1px solid var(--line); color:var(--green-700);transition:all .5s var(--ease)} .sol-ic svg{width:28px;height:28px} .sol-card:hover .sol-ic{background:linear-gradient(140deg,var(--green),var(--green-700));color:#fff;transform:rotate(-6deg) scale(1.06)} .sol-card h3{font-size:1.25rem;margin-bottom:10px;transition:color .3s} .sol-card p{font-size:.95rem;margin-bottom:18px} .sol-card .tlink{opacity:.9} .sol-card__num{position:absolute;top:26px;right:28px;font-family:var(--f-display);font-weight:800; font-size:2.6rem;color:var(--mist-2);z-index:0;transition:color .4s} .sol-card:hover .sol-card__num{color:var(--green-soft)} /* dark variant */ .section--dark .sol-card{background:rgba(255,255,255,.035);border-color:var(--line-dark)} .section--dark .sol-card h3{color:#fff} .section--dark .sol-card p{color:#a9c4b8} .section--dark .sol-ic{background:rgba(0,169,80,.12);border-color:rgba(0,169,80,.25);color:#7ff0b4} .section--dark .sol-card__num{color:rgba(255,255,255,.05)} /* ============================================================ FEATURE / WHY cards ============================================================ */ .feat{display:flex;gap:18px;padding:8px 4px} .feat__ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--green-soft);color:var(--green-700); display:grid;place-items:center;transition:all .4s} .feat__ic svg{width:25px;height:25px} .feat:hover .feat__ic{background:var(--green);color:#fff;transform:translateY(-4px)} .feat h4{font-size:1.12rem;margin-bottom:6px} .feat p{font-size:.93rem} /* ============================================================ STATS band ============================================================ */ .stat{position:relative;text-align:center;padding:20px 10px} .stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1; background:linear-gradient(120deg,var(--green),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent;display:block} .stat span{display:block;margin-top:10px;color:var(--muted);font-size:.95rem;font-weight:500} .section--dark .stat span{color:#a9c4b8} .stat+.stat::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--line)} .section--dark .stat+.stat::before{background:var(--line-dark)} /* ============================================================ PRODUCTS ============================================================ */ .prod{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; transition:transform .55s var(--ease),box-shadow .55s var(--ease);height:100%;display:flex;flex-direction:column} .prod:hover{transform:translateY(-8px);box-shadow:var(--shadow)} .prod__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,var(--mist),#fff)} .prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .prod:hover .prod__img img{transform:scale(1.08)} .prod__tag{position:absolute;top:14px;left:14px;font-family:var(--f-display);font-size:.72rem;font-weight:600; letter-spacing:.04em;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.9); backdrop-filter:blur(6px);color:var(--green-700);border:1px solid var(--line)} .prod__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .prod__body h3{font-size:1.16rem;margin-bottom:8px} .prod__body p{font-size:.9rem;margin-bottom:16px;flex:1} .prod__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line)} .prod__spec{font-size:.82rem;color:var(--muted);font-weight:500} .prod__arrow{width:38px;height:38px;border-radius:50%;background:var(--mist);display:grid;place-items:center; color:var(--green-700);transition:all .4s var(--ease)} .prod:hover .prod__arrow{background:var(--green);color:#fff;transform:rotate(-45deg)} .prod__arrow svg{width:17px;height:17px} /* ============================================================ PROCESS steps ============================================================ */ .process{position:relative} .process__line{position:absolute;left:0;right:0;top:44px;height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)} .step{position:relative;text-align:center;padding:0 14px} .step__num{width:88px;height:88px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center; font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:#fff;position:relative;z-index:1; background:linear-gradient(150deg,var(--green),var(--green-700));box-shadow:var(--shadow-green); transition:transform .5s var(--ease)} .step__num::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed var(--green);opacity:.4; animation:spin 14s linear infinite} .step:hover .step__num{transform:translateY(-6px) scale(1.05)} @keyframes spin{to{transform:rotate(360deg)}} .step h4{font-size:1.15rem;margin-bottom:8px} .step p{font-size:.92rem} /* ============================================================ SPLIT / feature media ============================================================ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} .split--rev .split__media{order:2} .split__media{position:relative} .media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)} .media-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;transition:transform 1.2s var(--ease)} .media-frame:hover img{transform:scale(1.05)} .media-badge{position:absolute;z-index:3;background:#fff;border-radius:18px;padding:18px 22px;box-shadow:var(--shadow); display:flex;align-items:center;gap:14px} .media-badge b{font-family:var(--f-display);font-size:1.7rem;font-weight:800;color:var(--green-700);line-height:1} .media-badge span{font-size:.82rem;color:var(--muted);line-height:1.3;font-weight:500} .media-badge--br{right:-18px;bottom:-18px} .media-badge--tl{left:-18px;top:30px} .checks{margin:26px 0 32px;display:grid;gap:14px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:#3f544a} .checks .ck{flex:none;width:26px;height:26px;border-radius:8px;background:var(--green-soft);color:var(--green-700); display:grid;place-items:center;margin-top:1px} .checks .ck svg{width:15px;height:15px} .section--dark .checks li{color:#c8ddd3} /* decorative dotted pattern */ .dots{position:absolute;width:150px;height:150px;background-image:radial-gradient(var(--green) 1.6px,transparent 1.6px); background-size:16px 16px;opacity:.18;z-index:-1} /* ============================================================ PROJECTS / cards with image ============================================================ */ .pcard{position:relative;border-radius:var(--radius);overflow:hidden;min-height:380px;display:flex; align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:transform .55s var(--ease),box-shadow .55s} .pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)} .pcard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(3,21,26,.92),rgba(3,21,26,.25) 55%,transparent)} .pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)} .pcard:hover img{transform:scale(1.08)} .pcard__in{padding:30px} .pcard__cat{font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:#7ff0b4;margin-bottom:10px;display:inline-block} .pcard h3{color:#fff;font-size:1.3rem;line-height:1.25;margin-bottom:10px} .pcard p{color:#c8ddd3;font-size:.9rem} .pcard .tlink{margin-top:16px;color:#fff} /* ============================================================ CEO / quote ============================================================ */ .quote{position:relative;padding:clamp(36px,5vw,60px);border-radius:var(--radius-lg); background:linear-gradient(150deg,#fff,var(--mist));border:1px solid var(--line);overflow:hidden} .quote__mark{position:absolute;top:-10px;left:30px;font-family:var(--f-display);font-size:12rem;line-height:1; color:var(--green-soft);z-index:0;font-weight:800} .quote__text{position:relative;font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,2.3vw,1.8rem); line-height:1.45;color:var(--ink);letter-spacing:-.01em} .quote__by{display:flex;align-items:center;gap:16px;margin-top:30px;position:relative} .quote__by img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-sm)} .quote__by b{font-family:var(--f-display);display:block;color:var(--ink)} .quote__by span{font-size:.9rem;color:var(--muted)} /* ============================================================ OFFICES / presence ============================================================ */ .office{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px; transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;height:100%} .office:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--green)} .office__flag{width:52px;height:52px;border-radius:14px;background:var(--green-soft);color:var(--green-700); display:grid;place-items:center;margin-bottom:20px;font-size:1.5rem;transition:all .4s} .office:hover .office__flag{background:var(--green);color:#fff} .office h4{font-size:1.2rem;margin-bottom:4px} .office__city{font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--green-700);margin-bottom:16px;display:block} .office__row{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:#42544b;margin-bottom:12px} .office__row svg{flex:none;width:18px;height:18px;color:var(--green);margin-top:3px} .section--dark .office{background:rgba(255,255,255,.035);border-color:var(--line-dark)} .section--dark .office h4{color:#fff} .section--dark .office__row{color:#c8ddd3} /* ============================================================ CTA band ============================================================ */ .cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg); background:radial-gradient(900px 500px at 15% 20%, rgba(0,169,80,.35), transparent 60%), linear-gradient(150deg,var(--deep),var(--night)); padding:clamp(46px,6vw,80px);color:#fff;text-align:center} .cta-band h2{color:#fff;max-width:720px;margin:0 auto 18px} .cta-band p{color:#bcd6cb;max-width:560px;margin:0 auto 32px;font-size:1.1rem} .cta-band .btn-row{justify-content:center} .cta-wave{position:absolute;inset:auto 0 0 0;height:120px;opacity:.25;z-index:0} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--night);color:#a9c4b8;padding-top:clamp(56px,7vw,84px);position:relative;overflow:hidden} .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:52px;border-bottom:1px solid var(--line-dark)} .footer__brand img{height:46px;margin-bottom:20px} .footer__brand p{font-size:.95rem;line-height:1.7;max-width:320px;margin-bottom:22px} .footer__soc{display:flex;gap:11px} .footer__soc a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center; transition:all .4s var(--ease);color:#cfe6db} .footer__soc a:hover{background:var(--green);color:#fff;transform:translateY(-4px)} .footer__soc svg{width:19px;height:19px} .footer h5{color:#fff;font-family:var(--f-display);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px} .footer__links li{margin-bottom:11px} .footer__links a{font-size:.94rem;transition:color .3s,padding .3s;display:inline-block} .footer__links a:hover{color:var(--green);padding-left:5px} .footer__contact li{display:flex;gap:11px;font-size:.93rem;margin-bottom:14px;line-height:1.5} .footer__contact svg{flex:none;width:18px;height:18px;color:var(--green);margin-top:2px} .footer__news{display:flex;gap:8px;margin-top:14px} .footer__news input{flex:1;padding:12px 16px;border-radius:100px;background:rgba(255,255,255,.06); border:1px solid var(--line-dark);color:#fff;font-size:.9rem;outline:none;transition:border .3s} .footer__news input:focus{border-color:var(--green)} .footer__news button{width:46px;height:46px;flex:none;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;transition:all .4s} .footer__news button:hover{transform:scale(1.08) rotate(-8deg)} .footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:26px 0;font-size:.85rem;color:#7c968b} .footer__bottom a:hover{color:var(--green)} .footer__badges{display:flex;gap:10px;align-items:center} .footer__badges span{font-size:.74rem;padding:5px 12px;border:1px solid var(--line-dark);border-radius:100px} /* ============================================================ PAGE HERO (subpages) ============================================================ */ .page-hero{position:relative;padding:calc(var(--nav-h) + 70px) 0 80px;color:#fff;overflow:hidden;text-align:center} .page-hero__bg{position:absolute;inset:0;z-index:-2} .page-hero__bg img{width:100%;height:100%;object-fit:cover} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(4,20,26,.86),rgba(4,20,26,.72)), radial-gradient(700px 340px at 50% 0%, rgba(0,169,80,.35),transparent 60%)} .page-hero h1{color:#fff;margin-bottom:16px} .page-hero p{color:#cfe6db;max-width:620px;margin:0 auto;font-size:1.12rem} .crumb{display:inline-flex;gap:9px;align-items:center;font-size:.86rem;color:#9fc0b2;margin-bottom:22px; background:rgba(255,255,255,.08);padding:8px 18px;border-radius:100px;backdrop-filter:blur(6px)} .crumb a:hover{color:#fff} .crumb .sep{opacity:.5} .crumb .cur{color:#7ff0b4} /* ============================================================ FORMS ============================================================ */ .form{display:grid;gap:18px} .field{position:relative} .field label{display:block;font-family:var(--f-display);font-size:.84rem;font-weight:600;margin-bottom:8px;color:var(--ink)} .field input,.field textarea,.field select{width:100%;padding:15px 18px;border-radius:14px;border:1.5px solid var(--line); background:#fff;font-size:.98rem;outline:none;transition:border .3s,box-shadow .3s;font-family:var(--f-body)} .field textarea{min-height:140px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--green-glow)} .form .btn{justify-content:center} .form-note{font-size:.82rem;color:var(--muted)} .form-ok{display:none;align-items:center;gap:12px;padding:15px 18px;border-radius:14px;background:var(--green-soft); color:var(--green-800);font-weight:600;font-size:.95rem;font-family:var(--f-display)} .form-ok.show{display:flex} .form-ok svg{width:22px;height:22px;color:var(--green)} /* contact info card */ .info-card{background:linear-gradient(160deg,var(--deep),var(--night));color:#fff;border-radius:var(--radius-lg); padding:clamp(30px,4vw,44px);height:100%} .info-card h3{color:#fff;margin-bottom:8px} .info-card>p{color:#a9c4b8;margin-bottom:28px} .info-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line-dark)} .info-row:last-child{border:none} .info-row__ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(0,169,80,.16);color:#7ff0b4;display:grid;place-items:center} .info-row__ic svg{width:21px;height:21px} .info-row b{color:#fff;font-family:var(--f-display);font-size:.95rem;display:block;margin-bottom:3px} .info-row span,.info-row a{color:#a9c4b8;font-size:.92rem;line-height:1.5} .info-row a:hover{color:#7ff0b4} /* ============================================================ MAP / LOCATIONS BAND ============================================================ */ .mapband{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:460px; background:radial-gradient(700px 400px at 30% 30%, rgba(0,169,80,.20), transparent 60%), linear-gradient(150deg,var(--deep),var(--night));display:flex;align-items:flex-end; padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)} .mapband__grid{position:absolute;inset:0;opacity:.55;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 55% 40%,#000,transparent 78%);mask-image:radial-gradient(circle at 55% 40%,#000,transparent 78%)} .mapband__route{position:absolute;inset:0;pointer-events:none} .mapband__route path{fill:none;stroke:rgba(0,169,80,.45);stroke-width:2;stroke-dasharray:6 8} .mp{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2} .mp__dot{width:16px;height:16px;border-radius:50%;background:var(--green);position:relative;box-shadow:0 0 0 4px rgba(0,169,80,.25)} .mp__dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green);animation:ping 2.4s var(--ease) infinite} .mp__lbl{font-family:var(--f-display);font-size:.74rem;font-weight:600;color:#dfeee7;background:rgba(4,20,26,.7); padding:4px 10px;border-radius:100px;border:1px solid var(--line-dark);white-space:nowrap;backdrop-filter:blur(4px)} @keyframes ping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(2.4);opacity:0}} .mapband__panel{position:relative;z-index:3;background:rgba(4,20,26,.55);backdrop-filter:blur(12px); border:1px solid var(--line-dark);border-radius:20px;padding:28px;max-width:400px} .mapband__panel h3{color:#fff;margin-bottom:8px} .mapband__panel p{color:#a9c4b8;font-size:.94rem;margin-bottom:18px} .mapband__panel .btn{width:100%;justify-content:center} @media (max-width:560px){.mp__lbl{display:none}} /* ============================================================ TIMELINE (about / history) ============================================================ */ .timeline{position:relative;max-width:820px;margin:0 auto;padding-left:0} .timeline::before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px; background:linear-gradient(var(--green),var(--aqua),transparent)} .tl-item{position:relative;width:50%;padding:16px 44px;margin-bottom:8px} .tl-item:nth-child(odd){left:0;text-align:right} .tl-item:nth-child(even){left:50%} .tl-item::after{content:"";position:absolute;top:24px;width:16px;height:16px;border-radius:50%; background:var(--green);border:3px solid #fff;box-shadow:0 0 0 4px var(--green-glow)} .tl-item:nth-child(odd)::after{right:-8px} .tl-item:nth-child(even)::after{left:-8px} .tl-year{font-family:var(--f-display);font-weight:800;color:var(--green-700);font-size:1.4rem} .tl-item h4{margin:4px 0 6px} .tl-item p{font-size:.93rem} @media (max-width:720px){ .timeline::before{left:7px} .tl-item{width:100%;left:0!important;text-align:left!important;padding:16px 0 16px 36px} .tl-item::after{left:0!important;right:auto!important} } /* values grid */ .value{padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line); transition:all .5s var(--ease);height:100%} .value:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--green)} .value__n{font-family:var(--f-display);font-weight:800;font-size:1rem;color:var(--green);letter-spacing:.1em} .value h4{margin:14px 0 8px;font-size:1.2rem} .value p{font-size:.93rem} /* accordion (solutions detail / faq) */ .acc{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;background:#fff;transition:box-shadow .4s,border-color .4s} .acc.open{box-shadow:var(--shadow-sm);border-color:var(--green)} .acc__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;cursor:pointer} .acc__head h4{font-size:1.08rem} .acc__ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--green-soft);color:var(--green-700); display:grid;place-items:center;transition:all .4s var(--ease)} .acc.open .acc__ic{background:var(--green);color:#fff;transform:rotate(135deg)} .acc__ic svg{width:18px;height:18px} .acc__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .acc__body p{padding:0 24px 24px;font-size:.96rem} /* gallery masonry */ .gallery{columns:3;column-gap:18px} .gallery img{width:100%;border-radius:16px;margin-bottom:18px;transition:transform .6s var(--ease),filter .6s;cursor:pointer} .gallery img:hover{transform:scale(1.03);filter:brightness(1.08)} @media (max-width:900px){.gallery{columns:2}} @media (max-width:560px){.gallery{columns:1}} /* pill row */ .pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;background:#fff; border:1px solid var(--line);font-size:.88rem;font-weight:500;color:#42544b;transition:all .4s} .pill:hover{border-color:var(--green);color:var(--green-700);transform:translateY(-3px)} .pill svg{width:15px;height:15px;color:var(--green)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .footer__top{grid-template-columns:1fr 1fr;gap:36px} .g-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:960px){ .nav,.header__cta .btn{display:none} .burger{display:flex} .split{grid-template-columns:1fr;gap:40px} .split--rev .split__media{order:0} .process__line{display:none} .g-3{grid-template-columns:repeat(2,1fr)} .hero__content{padding-block:120px 90px} } @media (max-width:680px){ body{font-size:16px} .g-2,.g-3,.g-4{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr} .stat+.stat::before{display:none} .hero__stats{gap:26px} .media-badge--tl{display:none} .btn{width:100%;justify-content:center} .hero__cta .btn{width:auto} .hero__cta{flex-direction:column;align-items:stretch} .cta-band .btn{width:auto} } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} [data-reveal]{opacity:1!important;transform:none!important} .reveal-line span{transform:none!important} } /* utility */ .mt-0{margin-top:0}.center{text-align:center} .max-560{max-width:560px}.max-640{max-width:640px}.mx-auto{margin-inline:auto} .hide{display:none}