﻿/*
Theme Name: RENAUVEAU
Theme URI: https://renauveau.com
Author: RENAUVEAU Team
Description: RENAUVEAU — Giving Water a Second Life. Compact modular wastewater treatment systems with graphene filtration.
Version: 1.0.0
License: All Rights Reserved
Text Domain: renauveau
Tags: one-page, custom-colors, custom-menu, full-width-template
*/
:root{
  --cream:#F2F7FB; --cream-2:#E7F0F8; --paper:#FFFFFF;
  --ink:#0E2034; --ink-soft:#43586E; --ink-faint:#7B8EA3;
  --pine:#1670C2; --pine-dk:#0F5699; --leaf:#2F9E5B; --leaf-lt:#69C589;
  --navy:#0B2540; --navy-2:#123257; --ice:#DCEAF7;
  --aqua:#15A8C2; --aqua-dk:#0E7E94; --aqua-lt:#5FCBDD;
  --line:rgba(14,32,52,.12); --line-2:rgba(14,32,52,.07);
  --shadow:0 24px 60px -28px rgba(11,37,64,.30);
  --shadow-sm:0 12px 30px -18px rgba(11,37,64,.26);
  --r:18px; --r-lg:26px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pine);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--aqua); display:inline-block}
.eyebrow.on-dark{color:var(--aqua-lt)} .eyebrow.on-dark::before{background:var(--aqua-lt)}
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none;
  font-family:"Inter"; font-size:15px; font-weight:600; padding:14px 26px;
  border-radius:100px; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn span{position:relative; z-index:2}
.btn svg{position:relative; z-index:2; transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--pine); color:#fff}
.btn-primary::after{content:""; position:absolute; inset:0; background:var(--aqua); transform:translateY(101%); transition:transform .45s var(--ease); z-index:1}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-primary:hover::after{transform:translateY(0)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{border-color:var(--pine); color:var(--pine); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light::after{content:""; position:absolute; inset:0; background:var(--ice); transform:translateY(101%); transition:transform .45s var(--ease); z-index:1}
.btn-light:hover::after{transform:translateY(0)} .btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}

/* ---------- HEADER ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:60; transition:all .4s var(--ease)}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:18px 28px;
  transition:padding .4s var(--ease);
}
header.scrolled{background:rgba(251,247,239,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2)}
header.scrolled .nav{padding:12px 28px}
.brand{display:flex; align-items:center; gap:11px; font-family:"Fraunces"; font-size:23px; font-weight:600; letter-spacing:.02em}
.brand .drop{width:30px; height:34px; flex:0 0 30px}
.brand small{font-family:"JetBrains Mono"; font-size:9.5px; letter-spacing:.18em; color:var(--ink-faint); display:block; margin-top:2px; text-transform:uppercase}
.brand-txt{line-height:1}
.menu{display:flex; align-items:center; gap:30px}
.menu a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0}
.menu a::after{content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--pine); transition:width .35s var(--ease)}
.menu a:hover, .menu a.active{color:var(--ink)} .menu a:hover::after, .menu a.active::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px}
.burger span{width:24px; height:2px; background:var(--ink); transition:.3s var(--ease)}

/* ---------- HERO ---------- */
.hero{padding:150px 0 70px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.hero h1{font-size:clamp(42px,6vw,76px); font-weight:500}
.hero h1 em{font-style:italic; color:var(--pine); position:relative}
.hero .lede{font-size:19px; color:var(--ink-soft); max-width:480px; margin:24px 0 14px}
.hero .sub{font-family:"JetBrains Mono"; font-size:12.5px; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:30px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px}
.hero-tags{display:flex; gap:10px; flex-wrap:wrap}
.tag{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--ice); color:var(--navy); padding:7px 13px; border-radius:100px; font-weight:500}
.tag.green{background:rgba(47,158,91,.15); color:var(--leaf)}

.hero-visual{position:relative}
.hero-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--shadow);
}
.hero-frame img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:slowzoom 18s ease-in-out infinite alternate}
@keyframes slowzoom{to{transform:scale(1.16)}}
.hero-frame .grad{position:absolute; inset:0; background:linear-gradient(160deg,rgba(19,36,63,.05) 30%,rgba(16,58,39,.5) 100%)}
.flow-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:.9}
.chip{
  position:absolute; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-radius:14px; padding:13px 16px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:11px;
}
.chip .k{font-family:"Fraunces"; font-size:24px; font-weight:600; color:var(--pine); line-height:1}
.chip .l{font-size:11.5px; color:var(--ink-soft); line-height:1.25; max-width:96px}
.chip.c1{top:24px; left:-26px} .chip.c2{bottom:30px; right:-24px}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(63,154,92,.2)}

/* ---------- SECTION SHELL ---------- */
section{position:relative}
section[id]{scroll-margin-top:88px}
#top{scroll-margin-top:88px}
.sec{padding:96px 0}
.sec-head{max-width:680px; margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,4.2vw,48px); margin-top:16px}
.sec-head p{color:var(--ink-soft); margin-top:16px; font-size:18px}

/* reveal */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ---------- PROBLEM (dark) ---------- */
.dark{background:var(--navy); color:#EAF0F6}
.dark .sec-head p{color:#A9B7C9}
.problem-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:50px; align-items:stretch}
.stat-cluster{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden}
.stat-cell{background:var(--navy); padding:30px 26px}
.stat-cell:nth-child(odd){background:#123257}
.stat-cell .n{font-family:"Fraunces"; font-size:clamp(40px,5vw,58px); font-weight:600; color:#fff; line-height:1}
.stat-cell .n .u{font-size:.5em; color:var(--aqua-lt)}
.stat-cell .t{font-weight:600; margin-top:8px; font-size:16px}
.stat-cell .d{color:#94A4B8; font-size:13.5px; margin-top:3px}
.problem-aside{border-radius:var(--r); overflow:hidden; position:relative; min-height:340px; display:flex; align-items:flex-end}
.problem-aside img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.problem-aside .ov{position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,18,33,.92),rgba(10,18,33,.15))}
.problem-aside blockquote{position:relative; margin:0; padding:28px; font-family:"Fraunces"; font-style:italic; font-size:20px; color:#fff; border-left:3px solid var(--leaf)}
.problem-aside cite{display:block; font-family:"JetBrains Mono"; font-style:normal; font-size:11px; letter-spacing:.1em; color:var(--leaf-lt); margin-top:12px; text-transform:uppercase}

/* ---------- MARKET ---------- */
.market-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center}
.gauge-wrap{position:relative; display:flex; align-items:center; justify-content:center}
.gauge-center{position:absolute; text-align:center}
.gauge-center .pct{font-family:"Fraunces"; font-size:54px; font-weight:600; color:var(--pine); line-height:1}
.gauge-center .lbl{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; margin-top:6px}
.market-rows{display:flex; flex-direction:column}
.mrow{display:flex; justify-content:space-between; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line)}
.mrow:first-child{border-top:1px solid var(--line)}
.mrow .v{font-family:"Fraunces"; font-size:30px; font-weight:600; color:var(--ink)}
.mrow .lab{color:var(--ink-soft); font-size:15px; max-width:280px}
.mrow .v.accent{color:var(--pine)}
.callout{margin-top:26px; background:var(--cream-2); border-radius:var(--r); padding:22px 24px; font-size:15px; color:var(--ink-soft)}
.callout b{color:var(--ink)}

/* ---------- SOLUTION ---------- */
.sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.adv-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.adv{background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); padding:26px; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.adv:hover{transform:translateY(-6px); box-shadow:var(--shadow-sm)}
.adv .n{font-family:"Fraunces"; font-size:40px; font-weight:600; color:var(--pine)}
.adv .t{font-weight:600; margin:6px 0 4px}
.adv .d{font-size:14px; color:var(--ink-soft)}
.sol-img{border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:flex-end; min-height:100%}
.sol-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sol-img .ov{position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,58,39,.9),rgba(16,58,39,.1) 55%)}
.sol-img .cap{position:relative; padding:30px; color:#fff}
.sol-img .cap h3{font-size:24px; color:#fff} .sol-img .cap p{color:#D6E4DA; font-size:14.5px; margin-top:8px}

/* ---------- TECHNOLOGY (signature, dark) ---------- */
.tech{background:radial-gradient(120% 120% at 80% -10%, #103a63 0%, #0a2238 55%, #06182c 100%); color:#E9F2F1; overflow:hidden; position:relative}
.hexbg{position:absolute; inset:0; opacity:.16; pointer-events:none}
.tech .wrap{position:relative; z-index:2}
.tech-top{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; margin-bottom:64px}
.tech h2{font-size:clamp(30px,4.4vw,50px); color:#fff}
.tech .lede{color:#A7C6C2; font-size:18px; margin-top:18px}
.tech-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.tbadge{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.06em; padding:8px 13px; border:1px solid rgba(255,255,255,.18); border-radius:100px; color:#BFE6E0}
.graphene-card{border-radius:var(--r-lg); overflow:hidden; position:relative; aspect-ratio:1/1; box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.graphene-card img{width:100%; height:100%; object-fit:cover}
.graphene-card .ov{position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,transparent,rgba(8,20,32,.6))}
.graphene-card .tagm{position:absolute; left:20px; bottom:18px; font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.1em; color:#5FCBDD; text-transform:uppercase}

/* flow */
.flow-title{font-family:"JetBrains Mono"; font-size:12px; letter-spacing:.2em; color:var(--aqua-lt); text-transform:uppercase; margin-bottom:24px}
.flow{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.flow-line{position:absolute; top:38px; left:6%; right:6%; height:2px; background:rgba(255,255,255,.14); z-index:1}
.flow-line .pulse{position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px 2px var(--aqua); animation:flowmove 4.5s linear infinite}
@keyframes flowmove{0%{left:0}100%{left:100%}}
.stage{position:relative; z-index:2; cursor:pointer; text-align:center}
.stage .ring{width:76px; height:76px; margin:0 auto; border-radius:50%; background:#0a2238; border:2px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease)}
.stage .ring svg{width:34px; height:34px; stroke:#BFE6E0; transition:stroke .4s}
.stage.active .ring, .stage:hover .ring{border-color:var(--aqua); background:rgba(26,163,155,.16); transform:scale(1.06)}
.stage.active .ring svg, .stage:hover .ring svg{stroke:#fff}
.stage .sn{font-family:"JetBrains Mono"; font-size:11px; color:var(--leaf-lt); margin-top:14px}
.stage .st{font-weight:600; color:#fff; margin-top:4px; font-size:15px}
.stage-detail{margin-top:30px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:24px 26px; min-height:96px; transition:opacity .35s}
.stage-detail h4{color:#fff; font-size:18px} .stage-detail p{color:#A7C6C2; margin-top:6px; font-size:14.5px}
.stage-detail .specs{display:flex; gap:26px; margin-top:14px; flex-wrap:wrap}
.stage-detail .specs span{font-family:"JetBrains Mono"; font-size:12px; color:#BFE6E0}
.stage-detail .specs b{color:#fff}

/* comparison bars */
.cmp{margin-top:64px; display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center}
.cmp h3{color:#fff; font-size:26px}
.cmp p{color:#A7C6C2; margin-top:12px; font-size:15px}
.bars{display:flex; flex-direction:column; gap:22px}
.bargroup .blab{display:flex; justify-content:space-between; font-size:13.5px; color:#cfe0de; margin-bottom:9px}
.bargroup .blab .pf{font-family:"JetBrains Mono"; color:var(--leaf-lt)}
.track{height:12px; border-radius:100px; background:rgba(255,255,255,.09); position:relative; overflow:hidden}
.fill{position:absolute; left:0; top:0; height:100%; border-radius:100px; width:0; transition:width 1.4s var(--ease)}
.fill.trad{background:rgba(255,255,255,.28)}
.fill.gra{background:linear-gradient(90deg,var(--aqua),var(--leaf))}
.bargroup{position:relative}
.bargroup .trackrow{position:relative}
.legend{display:flex; gap:20px; margin-top:8px; font-family:"JetBrains Mono"; font-size:11px; color:#9fb1ae}
.legend i{display:inline-block; width:14px; height:8px; border-radius:3px; margin-right:6px; vertical-align:middle}

/* ---------- PRODUCT ---------- */
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.prod-img{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); position:relative}
.prod-img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.prod-img .badge{position:absolute; top:18px; left:18px; background:rgba(19,36,63,.9); color:#fff; font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.08em; padding:8px 13px; border-radius:100px}
.tabs{display:flex; gap:8px; background:var(--cream-2); padding:6px; border-radius:100px; margin-bottom:24px}
.tab{flex:1; border:none; background:transparent; cursor:pointer; padding:11px; border-radius:100px; font-weight:600; font-size:14px; color:var(--ink-soft); transition:all .35s var(--ease)}
.tab.active{background:var(--pine); color:#fff; box-shadow:var(--shadow-sm)}
.spec{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:28px}
.spec div{background:var(--cream); padding:18px 20px}
.spec .sl{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase}
.spec .sv{font-family:"Fraunces"; font-size:22px; font-weight:600; color:var(--ink); margin-top:4px}

/* calculator */
.calc{background:var(--navy); color:#EAF0F6; border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--shadow)}
.calc h3{color:#fff; font-size:22px}
.calc .sub{color:#9FB2C7; font-size:13.5px; margin-top:6px; margin-bottom:24px}
.calc label{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9FB2C7; display:flex; justify-content:space-between}
.calc label b{color:#fff; font-family:"Inter"; font-size:14px; letter-spacing:0; text-transform:none}
input[type=range]{-webkit-appearance:none; width:100%; height:5px; border-radius:100px; background:rgba(255,255,255,.16); margin:14px 0 22px; outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--leaf); cursor:pointer; box-shadow:0 0 0 5px rgba(63,154,92,.25); transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--leaf);cursor:pointer}
.subsidy{display:flex; gap:8px; margin:10px 0 24px}
.sub-chip{flex:1; text-align:center; padding:10px; border:1px solid rgba(255,255,255,.18); border-radius:12px; cursor:pointer; font-size:13.5px; font-weight:600; color:#cdd9e6; transition:all .3s}
.sub-chip.active{background:var(--pine); border-color:var(--pine); color:#fff}
.calc-out{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.12); border-radius:14px; overflow:hidden}
.calc-out div{background:#123257; padding:18px}
.calc-out .o-l{font-size:11.5px; color:#9FB2C7; font-family:"JetBrains Mono"; letter-spacing:.05em; text-transform:uppercase}
.calc-out .o-v{font-family:"Fraunces"; font-size:28px; font-weight:600; color:#fff; margin-top:5px}
.calc-out .o-v.green{color:var(--leaf-lt)}
.calc-note{font-size:11.5px; color:#7E91A8; margin-top:14px}

/* ---------- MODEL ---------- */
.model-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center}
.chart-card{background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-sm)}
.chart-card .ct{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.chart-card .ch{font-family:"Fraunces"; font-size:22px; font-weight:600; margin:6px 0 18px}
.chart-svg{width:100%; height:auto; display:block; overflow:visible}
.econ{display:flex; flex-direction:column; gap:18px}
.econ .row{display:flex; gap:18px}
.estat{flex:1; background:var(--cream-2); border-radius:var(--r); padding:22px}
.estat .n{font-family:"Fraunces"; font-size:34px; font-weight:600; color:var(--pine); line-height:1}
.estat .l{font-size:13.5px; color:var(--ink-soft); margin-top:6px}
.streams{display:flex; gap:10px; margin-top:4px}
.stream{flex:1; border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.stream .h{font-weight:600; font-size:15px} .stream .s{font-size:13px; color:var(--ink-soft); margin-top:3px}

/* ---------- TEAM ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.founder{background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:32px 28px; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.founder:hover{transform:translateY(-7px); box-shadow:var(--shadow-sm)}
.avatar{width:78px; height:78px; margin-bottom:20px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0}
.founder .role{font-family:"JetBrains Mono"; font-size:11.5px; letter-spacing:.14em; color:var(--pine); text-transform:uppercase}
.founder .fname{font-size:23px; margin-top:8px; font-family:"Fraunces"; font-weight:500}
.founder .fname.slot{color:var(--ink-faint); border-bottom:1.5px dashed var(--line); display:inline-block; padding-bottom:3px}
.founder .ftitle{font-family:"Fraunces"; font-style:italic; font-size:16px; color:var(--ink-soft); margin-top:6px}
.founder .bio{color:var(--ink-soft); font-size:14.5px; margin-top:12px}
.founder ul{list-style:none; padding:0; margin:16px 0 0}
.founder li{font-size:13.5px; color:var(--ink-soft); padding-left:20px; position:relative; margin-bottom:7px}
.founder li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--leaf); transform:rotate(45deg)}
.team-note{margin-top:30px; text-align:center; font-family:"Fraunces"; font-style:italic; font-size:20px; color:var(--ink-soft)}
.team-note b{color:var(--pine); font-style:normal}

/* ---------- ROADMAP ---------- */
.road{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:20px}
.road::before{content:""; position:absolute; top:13px; left:8%; right:8%; height:2px; background:var(--line)}
.rstep{text-align:center; padding:0 14px; position:relative}
.rstep .dot{width:28px; height:28px; border-radius:50%; background:var(--cream); border:2px solid var(--leaf); margin:0 auto 18px; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; transition:all .4s}
.rstep .dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--leaf)}
.rstep:hover .dot{background:var(--pine); border-color:var(--pine); transform:scale(1.12)}
.rstep .yr{font-family:"JetBrains Mono"; font-size:12px; letter-spacing:.1em; color:var(--pine); font-weight:500}
.rstep h4{font-size:17px; margin:6px 0 8px}
.rstep p{font-size:13.5px; color:var(--ink-soft)}

/* ---------- CONTACT ---------- */
.contact{background:linear-gradient(160deg,#0c2c4e,#08203a)}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start}
.contact h2{color:#fff; font-size:clamp(30px,4vw,46px)}
.contact .lede{color:#BFD8C8; font-size:18px; margin-top:18px; max-width:420px}
.contact-info{margin-top:34px; display:flex; flex-direction:column; gap:18px}
.cinfo{display:flex; gap:14px; align-items:center; color:#E4F0E8}
.cinfo .ic{width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center}
.cinfo .ic svg{width:20px; height:20px; stroke:var(--aqua-lt)}
.cinfo .cl{font-family:"JetBrains Mono"; font-size:10.5px; letter-spacing:.1em; color:#8FB39C; text-transform:uppercase}
.cinfo .cv{font-size:15px; font-weight:500}
.cinfo a.cv:hover{color:var(--aqua-lt)}
.form{background:var(--paper); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow)}
.form .fr{margin-bottom:18px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:7px}
.form input, .form select, .form textarea{
  width:100%; border:1.5px solid var(--line); background:var(--cream); border-radius:12px;
  padding:13px 15px; font-family:"Inter"; font-size:15px; color:var(--ink); transition:border-color .3s, box-shadow .3s;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:none; border-color:var(--pine); box-shadow:0 0 0 4px rgba(22,112,194,.15)}
.form textarea{resize:vertical; min-height:96px}
.form .err{display:none; color:#b3261e; font-size:12px; margin-top:5px}
.form .fr.invalid .err{display:block} .form .fr.invalid input, .form .fr.invalid select, .form .fr.invalid textarea{border-color:#d9534f}
.form-success{display:none; text-align:center; padding:30px 10px}
.form-success.show{display:block}
.form-success .ok{width:62px; height:62px; margin:0 auto 16px; border-radius:50%; background:rgba(63,154,92,.14); display:flex; align-items:center; justify-content:center}
.form-success h3{font-size:24px; color:var(--pine)} .form-success p{color:var(--ink-soft); margin-top:8px}

/* ---------- FOOTER ---------- */
footer{background:var(--navy); color:#C7D3E0; padding:64px 0 28px}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand{color:#fff; margin-bottom:14px}
.foot-brand .brand small{color:#7E91A8}
.foot-brand p{font-size:14px; color:#94A4B8; max-width:280px}
.foot-social{display:flex; gap:12px; margin-top:20px}
.foot-social a{width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease)}
.foot-social a svg{width:19px; height:19px; fill:#C7D3E0; transition:fill .35s}
.foot-social a:hover{background:var(--pine); border-color:var(--pine); transform:translateY(-3px)}
.foot-social a:hover svg{fill:#fff}
.fcol h5{font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7E91A8; margin:0 0 16px; font-weight:500}
.fcol a, .fcol span{display:block; font-size:14px; color:#C7D3E0; margin-bottom:11px; transition:color .3s}
.fcol a:hover{color:var(--leaf-lt)}
.foot-news p{font-size:13.5px; color:#94A4B8; margin-bottom:14px}
.news-form{display:flex; gap:8px}
.news-form input{flex:1; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); border-radius:11px; padding:11px 14px; color:#fff; font-size:14px}
.news-form input::placeholder{color:#7E91A8}
.news-form input:focus{outline:none; border-color:var(--leaf)}
.news-btn{border:none; cursor:pointer; background:var(--pine); color:#fff; border-radius:11px; padding:0 16px; display:flex; align-items:center; transition:background .3s}
.news-btn:hover{background:#52A3E2}
.news-ok{font-size:12.5px; color:var(--leaf-lt); margin-top:9px; display:none}
.news-ok.show{display:block}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px}
.foot-bottom p{font-size:12.5px; color:#7E91A8}
.foot-bottom .meta{display:flex; gap:18px; font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.06em; color:#7E91A8}
.totop{position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%; background:var(--pine); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(14px); transition:all .4s var(--ease); z-index:50; box-shadow:var(--shadow-sm); border:none}
.totop.show{opacity:1; transform:none} .totop:hover{background:var(--leaf)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .hero-grid,.problem-grid,.market-grid,.tech-top,.cmp,.prod-grid,.model-grid,.contact-grid{grid-template-columns:1fr; gap:40px}
  .sol-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .road{grid-template-columns:1fr 1fr; gap:30px 14px} .road::before{display:none}
  .menu, .nav-cta .btn{display:none}
  .burger{display:flex}
  .foot-top{grid-template-columns:1fr 1fr; gap:32px}
  .hero{padding:120px 0 50px}
  .chip.c1{left:-8px} .chip.c2{right:-6px}
  .menu.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--cream); padding:10px 28px 22px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm)}
  .menu.open a{padding:13px 0; border-bottom:1px solid var(--line-2); width:100%}
}
@media(max-width:560px){
  body{font-size:16px}
  .stat-cluster{grid-template-columns:1fr}
  .spec,.calc-out,.foot-top{grid-template-columns:1fr}
  .road{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .econ .row{flex-direction:column}
  .wrap{padding:0 20px} .nav{padding:14px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ---------- ACCESSIBILITY: focus-visible ---------- */
:focus-visible{outline:3px solid var(--pine); outline-offset:3px; border-radius:4px}
.btn:focus-visible{outline:3px solid var(--aqua); outline-offset:4px}
a:focus-visible{outline:3px solid var(--pine); outline-offset:2px; border-radius:2px}
.burger:focus-visible{outline:3px solid var(--pine); outline-offset:4px; border-radius:4px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--pine); outline-offset:0}
