:root{
--bg: oklch(97% 0.006 90);
--surface: oklch(92% 0.01 80);
--surface2: oklch(87% 0.018 70);
--line: oklch(83% 0.01 75);
--text: oklch(22% 0.015 55);
--muted: oklch(47% 0.015 55);
--accent: oklch(40% 0.05 55);
--accent-ink: oklch(98% 0.008 85);
--accent2: oklch(35% 0.02 145);
} .vk-ettevote{
--surface2: oklch(87% 0.018 80);
--accent: oklch(35% 0.02 145);
--accent2: oklch(40% 0.05 55);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Figtree',system-ui,sans-serif;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent2);}
h1,h2,h3{font-family:'Lora',Georgia,serif;font-weight:500;margin:0;}
p{font-family:'Figtree',system-ui,sans-serif;}
img{max-width:100%;display:block;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:2px;font-family:'Figtree',system-ui,sans-serif;font-weight:500;font-size:15px;letter-spacing:.01em;border:0;cursor:pointer;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent2);color:var(--accent-ink);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-small{padding:9px 16px;font-size:13px;}
.eyebrow{font-family:'Figtree',system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);}
.photo{position:relative;background:linear-gradient(135deg, var(--surface), var(--line));border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;border-radius:2px;}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-cap{font-family:'Figtree',system-ui,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 20px;}
.section{padding:64px;}
.badge{font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--surface2);color:var(--text);padding:4px 10px;border-radius:20px;} .vk-header{display:flex;align-items:center;justify-content:space-between;padding:22px 64px;border-bottom:1px solid var(--line);}
.vk-header--home{padding:26px 64px;}
.vk-header-logo{font-family:'Lora',Georgia,serif;font-size:22px;letter-spacing:.02em;color:var(--text);}
.vk-header-back{display:flex;align-items:center;gap:18px;}
.vk-header-back a{font-size:13px;color:var(--muted);}
.vk-header-title{font-family:'Lora',Georgia,serif;font-size:20px;color:var(--text);}
.vk-nav{display:flex;gap:36px;font-size:14px;color:var(--muted);list-style:none;margin:0;padding:0;}
.vk-nav a{color:var(--muted);}
.vk-nav a:hover,.vk-nav .current-menu-item a{color:var(--text);}
.vk-footer{padding:24px 64px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);} .vk-inquiry-card{flex:1 1 0;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:32px;max-width:420px;}
.vk-inquiry-card .wpcf7-form-control-wrap{display:block;}
.vk-inquiry-card input:not([type=submit]),
.vk-inquiry-card textarea{
width:100%;background:var(--bg);border:1px solid var(--line);border-radius:2px;
padding:11px 12px;font-size:13px;font-family:'Figtree',system-ui,sans-serif;color:var(--text);margin-bottom:12px;
}
.vk-inquiry-card .wpcf7-form p{margin:0;}
.vk-inquiry-card input[type=submit]{
width:100%;background:var(--accent);color:var(--accent-ink);border:0;border-radius:2px;
padding:14px 24px;font-weight:500;font-size:15px;cursor:pointer;
}
.vk-inquiry-card input[type=submit]:hover{background:var(--accent2);}
.vk-inquiry-card .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.wpcf7-not-valid-tip{font-size:12px;color:#a63244;margin-top:-8px;margin-bottom:10px;}
.wpcf7-response-output{border-radius:2px;font-size:13px;margin-top:14px;} @media (max-width: 900px){
.section{padding:40px 24px;}
.vk-header,.vk-header--home{padding:18px 24px;}
.vk-nav{display:none;}
.vk-hero,.vk-two-col,.vk-row{flex-direction:column !important;}
.vk-hero > *,.vk-two-col > *{max-width:100% !important;}
.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.grid-span-2{grid-column:span 1 !important;}
.vk-footer{padding:20px 24px;}
}
@media (max-width: 560px){
.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr !important;}
}