/* Unique landing page for ВІМС */

:root {
  --bg: #f5efe3;
  --text: #231a13;
  --accent: #e36f3d;
  --accent-two: #e8bf57;
  --panel: #fffaf2;
  --muted: color-mix(in srgb, var(--text) 62%, transparent);
  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --font: "Manrope", system-ui, sans-serif;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 28%), radial-gradient(circle at 86% 0, color-mix(in srgb, var(--accent-two) 18%, transparent), transparent 30%), var(--bg); font-family: var(--font); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
.header { position: sticky; top: 16px; z-index: 30; width: min(1180px, calc(100% - 28px)); margin: 16px auto 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--panel) 84%, transparent); backdrop-filter: blur(18px); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: var(--bg); background: linear-gradient(135deg, var(--accent), var(--accent-two)); font-weight: 900; }
.logo b { display: block; max-width: 280px; font-weight: 900; line-height: 1.05; }
.logo small { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.nav { display: flex; justify-content: flex-end; gap: 22px; color: var(--muted); font-weight: 800; }
.nav a:hover { color: var(--accent); }
.language,.menu { min-width: 52px; height: 44px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; font: inherit; font-weight: 900; cursor: pointer; }
.menu { display: none; width: 50px; }
.menu span { display:block; width:18px; height:2px; margin:5px auto; background:var(--text); }
main,footer { width:min(1180px,calc(100% - 28px)); margin:0 auto; }
.hero { min-height:80vh; display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:38px; align-items:center; padding:86px 0 74px; }
.tag { margin:0 0 16px; color:var(--accent); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.15em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:24px; font-size:clamp(3rem,7vw,6.6rem); line-height:.92; letter-spacing:-.08em; }
h2 { margin-bottom:18px; font-size:clamp(2rem,4.2vw,4.2rem); line-height:1; letter-spacing:-.06em; }
h3 { margin-bottom:12px; font-size:1.3rem; line-height:1.15; }
.hero-copy p,.profile p,.areas p,.steps p,.contact p { color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 20px; border-radius:12px; font-weight:900; border:0; cursor:pointer; }
.primary { color:var(--bg); background:linear-gradient(135deg,var(--accent),var(--accent-two)); }
.secondary { color:var(--text); background:transparent; border:1px solid var(--line); }
.hero-card { min-height:335px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transform:rotate(-2deg); }
.hero-card strong { font-size:4rem; line-height:1; color:var(--accent); }
.profile { display:grid; grid-template-columns:1.1fr .9fr; gap:42px; padding:86px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.areas { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:86px 0; }
.areas article { min-height:280px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.areas article:nth-child(2n) { background:color-mix(in srgb,var(--panel) 76%,var(--accent) 24%); }
.areas span { display:inline-flex; margin-bottom:64px; color:var(--accent-two); font-weight:900; }
.process { padding:86px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.steps div { min-height:220px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.steps b { display:block; margin-bottom:50px; color:var(--accent); font-size:1.18rem; }
.contact { display:grid; grid-template-columns:.9fr .85fr 1fr; gap:18px; padding:86px 0; }
address,form { padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); font-style:normal; }
address p { margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
address span { display:block; color:var(--muted); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
input,textarea { width:100%; margin-bottom:14px; padding:14px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:14px; font:inherit; }
form .button { width:100%; }
footer { padding:28px 0 36px; color:var(--muted); border-top:1px solid var(--line); }
@media (max-width:980px) { .header { grid-template-columns:auto auto auto; justify-content:space-between; } .nav { position:absolute; top:72px; left:0; right:0; display:none; flex-direction:column; padding:18px; border:1px solid var(--line); border-radius:22px; background:var(--panel); } .nav.is-open { display:flex; } .menu { display:block; } .hero,.profile,.contact { grid-template-columns:1fr; } .areas,.steps { grid-template-columns:1fr 1fr; } .hero-card { transform:none; } }
@media (max-width:620px) { h1 { font-size:2.8rem; } .hero { min-height:auto; padding-top:58px; } .areas,.steps { grid-template-columns:1fr; } }