:root{--sea:#0A2E5A;--sand:#E8D5C4;--emerald:#2E8B57;--ink:#1F2A44;--bg1:#ffffff;--bg2:#f3eadf;--muted:#3D4B66;--muted2:#5A6B88;--radius:16px;--shadow:0 18px 45px rgba(10,46,90,.18);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2))}
a{color:inherit;text-decoration:none;outline-offset:3px}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(46,139,87,.45);outline-offset:3px}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-bottom:1px solid rgba(10,46,90,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.logo-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--sea),#123b82);box-shadow:0 10px 25px rgba(10,46,90,.25)}
nav{display:flex;gap:18px;align-items:center}
nav a{font-weight:600;color:#28415f;font-size:14px}
.cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;font-weight:700;border:1px solid rgba(10,46,90,.12);background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(10,46,90,.12)}
.btn-primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--sea),var(--emerald))}
.hero{padding-top:86px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;padding:34px 0}

/* микро-анимации без layout shift */
[data-animate="in"]{opacity:0;transform:translateY(14px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.animate-in{animation:fadeUp .65s var(--ease) both}

.card,.btn,.project,.hero-media,.form-wrap{will-change:transform,box-shadow}

.hero-title{font-size:48px;line-height:1.05;margin:0}
.hero-sub{margin:16px 0 0;color:var(--muted);font-size:16px;max-width:560px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge{padding:8px 10px;border-radius:999px;background:#fff;border:1px solid rgba(10,46,90,.12);font-weight:800;font-size:12px;color:#24405c}
.hero-ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero-media{border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:radial-gradient(900px 420px at 40% 20%, rgba(46,139,87,.35), transparent 60%),radial-gradient(700px 380px at 70% 20%, rgba(10,46,90,.45), transparent 55%),linear-gradient(135deg, rgba(10,46,90,.9), rgba(46,139,87,.75));position:relative;min-height:320px}
.hero-media:before{content:"";position:absolute;inset:-40px;background:linear-gradient(120deg, rgba(255,255,255,.25), transparent 55%);transform:translateX(-30%);animation:shimmer 2.6s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%,100%{opacity:.45;transform:translateX(-25%)}50%{opacity:.75;transform:translateX(15%)}}
.hero-media-inner{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.metric{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px;color:#fff}
.metric b{display:block;font-size:22px}
.metric span{font-weight:700;opacity:.9;font-size:12px}
section{padding:42px 0}
.section-title{font-size:26px;margin:0 0 12px}
.lead{color:var(--muted);max-width:720px;margin:0 0 18px;line-height:1.6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:rgba(255,255,255,.7);border:1px solid rgba(10,46,90,.10);border-radius:var(--radius);padding:18px;box-shadow:0 16px 40px rgba(10,46,90,.07);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(10,46,90,.12)}
.card h3{margin:10px 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.project{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;background:rgba(255,255,255,.75);border:1px solid rgba(10,46,90,.10);border-radius:20px;padding:22px;box-shadow:0 20px 55px rgba(10,46,90,.08)}
.project h2{margin:0 0 10px}
.project p{margin:0 0 18px;color:var(--muted);line-height:1.7}
.form-wrap{background:rgba(255,255,255,.82);border:1px solid rgba(10,46,90,.10);border-radius:20px;padding:18px}
form{display:grid;gap:12px;max-width:520px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(10,46,90,.18);background:#fff;font-weight:650;color:#152033;outline:none}
input::placeholder{color:rgba(21,32,51,.7)}
.note{color:var(--muted);font-size:13px;line-height:1.5}
.submit{background:linear-gradient(135deg,var(--sea),var(--emerald));color:#fff;border:0;cursor:pointer;padding:12px 14px;border-radius:12px;font-weight:900;transition:transform .15s ease, box-shadow .15s ease}
.submit:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(10,46,90,.18)}
.toast{display:none;padding:12px 14px;border-radius:12px;font-weight:900;border:1px solid rgba(10,46,90,.14)}
.toast.ok{background:rgba(46,139,87,.12)}
.toast.err{background:rgba(200,40,40,.12)}
footer{padding:30px 0 50px;color:#41536e}
.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-title{font-size:40px}.cards{grid-template-columns:1fr}nav{display:none}.project{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

@media (max-width:768px){
  .hero-title{font-size:34px}
  section{padding:34px 0}
  header{background:rgba(255,255,255,.84)}
}

@media (max-width:320px){
  .btn{padding:9px 12px}
  .container{padding:0 14px}
  .hero-title{font-size:30px}
}

@media (min-width:1440px){
  .container{max-width:1240px}
  .hero-title{font-size:56px}
}

*{max-width:100%}
body{overflow-x:hidden}