/*
Theme Name: Valvon
Theme URI: https://valvon.com
Author: Valvon
Author URI: https://valvon.com
Description: Valvon — the Developer OS. A modern, fast, block-based theme for property and infrastructure developers. Clean limestone + graphite palette with a blueprint-cobalt accent, Plus Jakarta Sans / PT Serif / Space Mono type, and five ready-to-edit pages (Home, About, Services, Platform, Contact).
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valvon
Tags: business, portfolio, blog, full-site-editing, block-patterns, custom-colors, custom-menu, featured-images, threaded-comments
*/
/* ====== VALVON THEME STYLES ====== */
/* ============ TOKENS ============ */
:root{
--bg:#ffffff;
--paper:#efece6; /* limestone */
--paper-2:#e9e6de;
--ink:#1D1D1D; /* heading ink */
--text:#444444; /* body copy */
--ink-soft:#444444;
--muted:#6c7074;
--line:#e3e0d8;
--line-strong:#d2cec4;
--accent:#2438ff; /* blueprint cobalt */
--accent-ink:#1a29c9;
--accent-tint:#e9ebff;
--dark:#0f1214; /* OS sections */
--dark-2:#171b1e;
--on-dark:#f3f2ee;
--on-dark-muted:#9aa0a5;
--on-dark-line:#2a2f33;
--font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
--font-body:'PT Serif',Georgia,'Times New Roman',serif;
--font-mono:'Space Mono','IBM Plex Mono',ui-monospace,monospace;
--maxw:1200px;
--gutter:clamp(20px,5vw,64px);
--radius:14px;
--radius-sm:9px;
--section-y:clamp(64px,9vw,128px);
--shadow:0 1px 2px rgba(18,21,23,.04),0 12px 32px rgba(18,21,23,.06);
--shadow-lg:0 2px 4px rgba(18,21,23,.05),0 30px 70px rgba(18,21,23,.12);
--ease:cubic-bezier(.2,.7,.2,1);
}
/* ============ RESET ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--font-body);
color:var(--text);
background:var(--bg);
line-height:1.6;
font-size:17px;
font-weight:400;
-webkit-font-smoothing:antialiased;
letter-spacing:0;
overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-0.025em;color:var(--ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.eyebrow{
font-family:var(--font-mono);font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"§";opacity:.6;font-weight:400}
.eyebrow.on-dark{color:#8da0ff}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch;line-height:1.55}
h2.title{font-size:clamp(30px,4.4vw,52px);max-width:18ch}
h3{font-size:clamp(20px,2.4vw,25px);letter-spacing:-0.02em}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:-0.01em;
padding:13px 22px;border-radius:9px;transition:.25s var(--ease);
white-space:nowrap;
}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn-on-dark-ghost{border:1px solid var(--on-dark-line);color:var(--on-dark)}
.btn-on-dark-ghost:hover{border-color:var(--on-dark);background:rgba(255,255,255,.06)}
/* ============ HEADER ============ */
.header{
position:sticky;top:0;z-index:100;
background:rgba(255,255,255,.82);
backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color .3s,box-shadow .3s,background .3s;
}
.header.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(18,21,23,.04)}
.nav{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-0.04em}
.brand .mark{
width:30px;height:30px;border-radius:8px;background:var(--ink);position:relative;flex:0 0 auto;
display:grid;place-items:center;
}
.brand .mark::before{content:"";width:13px;height:13px;border:2.5px solid #fff;border-right-color:var(--accent);border-bottom-color:var(--accent);transform:rotate(45deg);border-radius:2px}
.nav-links{display:flex;gap:4px;margin-left:14px}
.nav-links a{
font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--ink-soft);
padding:8px 13px;border-radius:7px;transition:.18s;position:relative;
}
.nav-links a:hover{color:var(--ink);background:rgba(18,21,23,.04)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta{display:inline-flex}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:9px;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:.25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}
/* mobile menu */
.mobile-menu{
position:fixed;inset:70px 0 0 0;z-index:99;background:var(--bg);
transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);
padding:18px var(--gutter);display:flex;flex-direction:column;gap:6px;
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-display);font-weight:500;font-size:22px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu .btn{margin-top:18px;justify-content:center}
/* ============ PAGES ============ */
.page{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ============ HERO ============ */
.hero{position:relative;background:var(--paper);overflow:hidden;padding:clamp(56px,8vw,104px) 0 0}
.blueprint{
position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(var(--line-strong) 1px,transparent 1px),linear-gradient(90deg,var(--line-strong) 1px,transparent 1px);
background-size:48px 48px;
-webkit-mask-image:radial-gradient(120% 80% at 70% 0%,#000 30%,transparent 75%);
mask-image:radial-gradient(120% 80% at 70% 0%,#000 30%,transparent 75%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:-0.04em;line-height:.98;margin:22px 0 0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-top:24px;font-size:clamp(17px,1.7vw,21px)}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-foot{margin-top:42px;padding-top:26px;border-top:1px solid var(--line-strong);display:flex;gap:30px;flex-wrap:wrap}
.hero-foot .mono{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.hero-foot b{font-family:var(--font-display);font-size:23px;color:var(--ink);display:block;letter-spacing:-0.03em}
/* product mock (the OS) */
.os-card{
background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
overflow:hidden;transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);transition:.5s var(--ease);
}
.os-card:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.os-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--paper)}
.os-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.os-bar .tab{margin-left:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.os-body{padding:18px}
.os-row{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid var(--line);border-radius:10px;margin-bottom:9px;font-size:13.5px}
.os-row .name{font-weight:500}
.os-row .meta{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.pill{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.04em}
.pill.go{background:#e6f6ec;color:#137a3e}
.pill.warn{background:#fdf0d8;color:#9a6700}
.pill.run{background:var(--accent-tint);color:var(--accent-ink)}
.os-ai{margin-top:6px;background:var(--ink);color:var(--on-dark);border-radius:11px;padding:13px 14px;display:flex;gap:11px;align-items:flex-start}
.os-ai .av{width:26px;height:26px;border-radius:7px;background:var(--accent);flex:0 0 auto;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:#fff}
.os-ai p{font-size:13px;line-height:1.45;color:var(--on-dark)}
.os-ai .cur{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* ============ TRUST STRIP ============ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust .wrap{display:flex;align-items:center;gap:clamp(20px,4vw,56px);padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.trust .label{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.logos{display:flex;align-items:center;gap:clamp(20px,3.5vw,46px);flex-wrap:wrap;flex:1}
.logos span{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);opacity:.5;letter-spacing:-0.02em;transition:.2s}
.logos span:hover{opacity:1}
/* ============ STAT STRIP ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:#fff;padding:30px 26px}
.stat b{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);letter-spacing:-0.04em;display:block;line-height:1}
.stat span{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:10px;display:block}
/* ============ SECTION HEAD ============ */
.shead{max-width:760px;margin-bottom:clamp(34px,5vw,58px)}
.shead .title{margin-top:16px}
.shead .lead{margin-top:18px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead.center .eyebrow{justify-content:center}
/* ============ BENEFITS ============ */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 32px;
transition:.3s var(--ease);position:relative;overflow:hidden;
}
.bcard:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard .num{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.1em}
.bcard .ic{width:48px;height:48px;border-radius:11px;background:var(--paper);display:grid;place-items:center;margin:18px 0 20px;border:1px solid var(--line)}
.bcard h3{margin-bottom:12px}
.bcard p{color:var(--ink-soft);font-size:15.5px}
/* ============ SERVICES PREVIEW / GRID ============ */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.scard{
border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;
display:flex;flex-direction:column;gap:14px;transition:.3s var(--ease);
}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.scard .tag{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.scard h3{font-size:21px}
.scard p{color:var(--ink-soft);font-size:15px;flex:1}
.scard .link{font-family:var(--font-display);font-weight:500;font-size:14.5px;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.scard .ic{width:44px;height:44px;border-radius:10px;background:var(--accent-tint);display:grid;place-items:center}
/* ============ SPLIT (image + text) ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.rev .media{order:2}
.media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:4/3;background:var(--paper)}
.media img{width:100%;height:100%;object-fit:cover}
.media .cap{position:absolute;left:14px;bottom:14px;background:rgba(15,18,20,.82);color:#fff;font-family:var(--font-mono);font-size:11px;padding:6px 11px;border-radius:7px;letter-spacing:.03em}
.checklist{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft)}
.checklist li::before{content:"";width:21px;height:21px;flex:0 0 auto;border-radius:6px;background:var(--accent-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232438ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;margin-top:1px}
/* ============ TESTIMONIALS ============ */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.tcard .quote{font-family:var(--font-display);font-size:21px;line-height:1.4;letter-spacing:-0.02em;color:var(--ink)}
.tcard .by{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.tcard .ava{width:44px;height:44px;border-radius:10px;background:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;color:var(--ink);border:1px solid var(--line)}
.tcard .by b{display:block;font-family:var(--font-display);font-weight:600;font-size:15px}
.tcard .by span{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
/* ============ NEWS CAROUSEL ============ */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px}
.news-nav{display:flex;gap:10px;flex:0 0 auto}
.cbtn{width:48px;height:48px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center;transition:.2s var(--ease)}
.cbtn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.cbtn:disabled{opacity:.32;cursor:default}
.cbtn:disabled:hover{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.news-track{list-style:none;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;margin:0}
.news-track::-webkit-scrollbar{display:none}
.acard{flex:0 0 clamp(280px,30vw,360px);scroll-snap-align:start}
.acard-link{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s var(--ease)}
.acard-link:hover{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-4px)}
.acard-media{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.acard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.acard-link:hover .acard-media img{transform:scale(1.04)}
.acard-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.acard-tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.acard-title{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.28;letter-spacing:-0.02em;color:var(--ink);margin:11px 0 16px}
.acard-date{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:auto}
@media(max-width:640px){.acard{flex-basis:78vw}.news-nav{display:none}}
/* ============ DARK CTA ============ */
.darkblock{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.darkblock .blueprint{opacity:.16;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);-webkit-mask-image:radial-gradient(100% 100% at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(100% 100% at 50% 0%,#000,transparent 70%)}
.darkblock .wrap{position:relative}
.darkblock h2{color:#fff}
.cta-final{text-align:center;padding:clamp(64px,9vw,118px) 0}
.cta-final h2{font-size:clamp(32px,5vw,60px);max-width:18ch;margin:18px auto 0}
.cta-final .lead{color:var(--on-dark-muted);margin:20px auto 0;text-align:center}
.cta-final .row{display:flex;gap:13px;justify-content:center;margin-top:34px;flex-wrap:wrap}
/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{background:#fff;padding:30px 26px 34px}
.step .n{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.step h3{font-size:19px;margin:18px 0 10px}
.step p{font-size:14.5px;color:var(--ink-soft)}
/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--font-display);font-weight:500;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:24px;height:24px;flex:0 0 auto;position:relative;transition:.25s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);transition:.25s}
.faq summary .pm::before{left:0;top:11px;width:24px;height:2px}
.faq summary .pm::after{left:11px;top:0;width:2px;height:24px}
.faq details[open] summary .pm::after{transform:rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--accent)}
.faq p{padding:0 0 24px;color:var(--ink-soft);max-width:68ch}
/* ============ MODULES (platform) ============ */
.modgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.module{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff;display:flex;gap:20px;transition:.3s}
.module:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.module .ic{width:50px;height:50px;flex:0 0 auto;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.module h3{font-size:20px;margin-bottom:9px}
.module p{color:var(--ink-soft);font-size:15px}
.module .mono{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.06em;margin-bottom:8px;display:block}
/* tabbed showcase */
.showcase{background:var(--dark);border-radius:18px;overflow:hidden;border:1px solid var(--on-dark-line)}
.tabs{display:flex;gap:4px;padding:14px;border-bottom:1px solid var(--on-dark-line);overflow-x:auto}
.tab-btn{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--on-dark-muted);padding:9px 15px;border-radius:8px;white-space:nowrap;transition:.2s}
.tab-btn.active{background:rgba(255,255,255,.08);color:#fff}
.tab-panel{display:none;padding:clamp(24px,4vw,48px);align-items:center;gap:40px}
.tab-panel.active{display:grid;grid-template-columns:1fr 1fr;animation:fade .4s var(--ease)}
.tab-panel h3{color:#fff;font-size:26px;margin-bottom:14px}
.tab-panel p{color:var(--on-dark-muted);font-size:15.5px;margin-bottom:18px}
.tab-panel .feat{list-style:none;display:flex;flex-direction:column;gap:11px}
.tab-panel .feat li{color:var(--on-dark);font-size:14.5px;display:flex;gap:10px;font-family:var(--font-mono)}
.tab-panel .feat li::before{content:"›";color:var(--accent);font-weight:700}
.tab-visual{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--on-dark-line)}
.tab-visual img{width:100%;height:100%;object-fit:cover}
/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.field input,.field textarea{
font-family:var(--font-body);font-size:16px;color:var(--ink);
background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:14px 15px;transition:.2s;width:100%;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field textarea{resize:vertical;min-height:130px}
.form .btn{margin-top:6px;justify-content:center}
.form-note{font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.form-success{background:var(--accent-tint);border:1px solid var(--accent);color:var(--accent-ink);padding:16px;border-radius:10px;font-size:15px;display:none}
.form-success.show{display:block}
.contact-info{display:flex;flex-direction:column;gap:2px}
.cinfo-item{padding:20px 0;border-bottom:1px solid var(--line)}
.cinfo-item:first-child{padding-top:0}
.cinfo-item .k{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.cinfo-item .v{font-family:var(--font-display);font-weight:500;font-size:18px;margin-top:6px}
.cinfo-item a.v{color:var(--ink)}
.cinfo-item a.v:hover{color:var(--accent)}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:10px;display:grid;place-items:center;transition:.2s}
.socials a:hover{background:var(--ink);border-color:var(--ink)}
.socials a:hover svg{stroke:#fff}
.socials svg{stroke:var(--ink);transition:.2s}
.map{margin-top:clamp(40px,6vw,72px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:380px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
/* ============ FOOTER ============ */
.footer{background:var(--dark);color:var(--on-dark);padding:clamp(56px,7vw,84px) 0 34px}
.footer .brand{color:#fff;margin-bottom:16px}
.footer .brand .mark{background:#fff}
.footer .brand .mark::before{border-color:var(--ink);border-right-color:var(--accent);border-bottom-color:var(--accent)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--on-dark-line)}
.fcol h4{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--on-dark-muted);font-weight:700;margin-bottom:18px}
.fcol a,.fcol p{display:block;color:var(--on-dark-muted);font-size:14.5px;padding:5px 0;transition:.2s}
.fcol a:hover{color:#fff}
.fabout{color:var(--on-dark-muted);font-size:14.5px;max-width:34ch;line-height:1.6}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:26px;flex-wrap:wrap}
.fbottom p,.fbottom a{font-family:var(--font-mono);font-size:12px;color:var(--on-dark-muted)}
.fbottom .fsoc{display:flex;gap:16px}
.fbottom a:hover{color:#fff}
/* ============ REVEAL ============ */
.valvon-anim .reveal{opacity:0;transform:translateY(20px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ============ RESPONSIVE ============ */
@media(max-width:960px){
.nav-links,.nav-cta{display:none}
.burger{display:flex}
.hero-grid{grid-template-columns:1fr;gap:36px}
.os-card{transform:none}
.os-card:hover{transform:none}
.benefits,.sgrid{grid-template-columns:1fr 1fr}
.stats{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr}
.split,.contact-grid,.tab-panel.active,.modgrid{grid-template-columns:1fr}
.split.rev .media{order:0}
.tgrid{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:600px){
body{font-size:16px}
.benefits,.sgrid,.stats,.steps{grid-template-columns:1fr}
.field.row2{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr}
.hero-foot{gap:22px}
.trust .wrap{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* WordPress integration */
.wp-site-blocks{overflow-x:hidden}
.valvon-content > *{max-width:none}
.entry-content,.wp-block-post-content{margin:0}
body{margin:0}
/* ============================================================
CORE-BLOCK BRIDGES
The page content is built from native core blocks (group,
heading, paragraph, list, image, buttons). These rules map
core block markup onto the Valvon design so output is
identical to the hand-built version.
============================================================ */
/* Group/columns used as layout shells must not inject their own
spacing — the existing .wrap/.split/.benefits/etc. classes own layout. */
.wp-block-group{margin:0}
.valvon-content > .wp-block-group{margin:0}
/* Headings & paragraphs already carry their Valvon classes
(.title/.lead/.eyebrow); the core wrapper class is styleless. */
.wp-block-heading{margin:0}
/* Lists → .checklist look */
.wp-block-list{margin:0;padding:0}
.checklist.wp-block-list{margin-top:22px}
/* Images: core wraps ![]()
in .
Inside a .media frame the figure must fill the frame. */
.wp-block-image{margin:0}
.media .wp-block-image,.media figure{margin:0;height:100%;width:100%}
.media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
/* Buttons: core renders