/* VM Tech website · modern layer (Sept 2026). Loaded after the page's own styles. */
:root{
  --cream:#F6F4F1;--sand:#EEEAE4;--line:#E6E0D8;--line-2:#D7CFC4;
  --ink:#1C1714;--ink-2:#5A524B;--ink-3:#8A8078;
  --surface:#fff;--wine-ink:#3A0C1A;--wine-900:#2A0812;
  --sh-1:0 1px 2px rgba(28,23,20,.05);
  --sh-2:0 1px 2px rgba(28,23,20,.04),0 12px 32px -16px rgba(28,23,20,.2);
  --sh-3:0 24px 60px -24px rgba(42,8,18,.4);
  --wrap:1220px;
}
body{background:var(--cream);color:var(--ink);font-size:18px}
h1,h2,h3{color:var(--wine-ink);letter-spacing:-.02em}
h2{font-weight:900}
.lead{color:var(--ink-2);font-size:19.5px}
.eyebrow{color:var(--wine);font-weight:800;letter-spacing:.16em;font-size:12px}
.eyebrow::before{width:26px;height:3px}

/* buttons */
.btn{border-radius:12px;padding:16px 24px;font-size:17px;border:1px solid transparent;box-shadow:0 1px 2px rgba(42,8,18,.18);transition:transform .15s ease,box-shadow .2s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(42,8,18,.45)}
.btn-wine{background:linear-gradient(180deg,#74193A 0%,#5E1329 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(42,8,18,.3)}
.btn-wine:hover{background:linear-gradient(180deg,#6A1734,#4A0E20)}
.btn-gold{background:linear-gradient(180deg,#F8BC37 0%,#EFA70F 100%);color:var(--wine-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(122,75,0,.3)}
.btn-gold:hover{background:linear-gradient(180deg,#FFC646,#F4AE18)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--wine);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--wine)}
.btn-ghost-light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}

/* header: glass, brand left, menu right */
.top{background:rgba(246,244,241,.78);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid rgba(28,23,20,.06);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.top .wrap{height:76px}
.nav{margin-left:auto;font-size:16px}
.nav a:not(.btn){padding:8px 10px;border-radius:9px;color:var(--ink-2);font-weight:600;transition:color .12s,background .12s}
.nav a:not(.btn):hover{color:var(--wine);background:rgba(101,21,44,.06)}
.nav .btn{padding:12px 18px;font-size:15.5px;border-radius:10px}
.nav .login svg{color:var(--wine)}

/* hero */
.hero{background:radial-gradient(900px 480px at 88% -10%,rgba(244,174,24,.16),transparent 60%),radial-gradient(700px 400px at -10% 110%,rgba(101,21,44,.08),transparent 60%),var(--cream)}
.hero h1{font-size:clamp(40px,5.3vw,72px);line-height:1.02}
.hero h1 em::after{background:linear-gradient(90deg,#F4AE18,#FFCC55);height:.16em;opacity:.9}
.hero .lead{font-size:clamp(17px,1.4vw,20px)}
.hero-img{border-radius:24px;box-shadow:var(--sh-3)}
.session{background:linear-gradient(160deg,#6E1735 0%,#4A0E20 70%,#3A0C1A 100%);border:1px solid rgba(255,255,255,.08);border-radius:22px;box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.08)}
.hero-price a{color:var(--wine)}
.promise{color:var(--ink-2)}

/* stat strip + trusted */
.strip{background:var(--surface);border-block:1px solid var(--line)}
.strip .wrap{padding-block:26px}
.strip div{padding-left:16px;border-left:3px solid var(--gold);border-radius:2px}
.strip b{color:var(--wine-ink);font-size:28px}
.strip span{font-size:15px;color:var(--ink-3)}
.trusted{padding-block:34px 10px}
.trusted p{color:var(--ink-3);font-size:12px;letter-spacing:.16em}

/* sections */
section.block,section.block.contact{padding-block:clamp(44px,5.5vw,72px)}
.head{margin-bottom:32px}

/* cards: care + services */
.care article{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);transition:transform .18s ease,box-shadow .2s ease,border-color .2s}
.care article:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.care .ico{background:linear-gradient(180deg,#FDF0CF,#FBE3A6);border-radius:14px;box-shadow:inset 0 1px 0 #fff}
.care h3{font-size:20px}
.care p{font-size:17px}
.care .family-note{border-radius:18px;box-shadow:var(--sh-3)}
.services{gap:14px;background:transparent;border:0;border-radius:0;overflow:visible}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);padding:22px 22px 20px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.svc > svg{background:linear-gradient(180deg,#FDF0CF,#FBE3A6);border-radius:12px;box-shadow:inset 0 1px 0 #fff;padding:8px;width:44px;height:44px}
.svc h3{font-size:19px}
.svc p{font-size:16.5px}
.sv-more .btn{border-radius:12px}

/* remote: rich wine panel */
.remote{background:radial-gradient(900px 500px at 95% 0%,rgba(244,174,24,.18),transparent 55%),linear-gradient(160deg,#6E1735 0%,#4A0E20 60%,#3A0C1A 100%)}
.remote .remote-img{border-radius:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
.remote-h{font-weight:900}
.checks li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.checks li svg{color:var(--gold)}

/* price strip */
.price-strip{background:var(--surface);border-block:1px solid var(--line)}
.ps-plan{background:var(--cream);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1)}
.ps-best{border:1.5px solid var(--gold);background:linear-gradient(180deg,#FFFBF0,#FFF6DC)}
.ps-plan strong{color:var(--wine-ink)}

/* FAQ */
.faq details{border-radius:14px;box-shadow:var(--sh-1);border:1px solid var(--line);background:var(--surface);transition:box-shadow .2s,border-color .2s}
.faq details[open]{box-shadow:var(--sh-2);border-color:var(--line-2)}
.faq summary{font-size:18.5px;color:var(--wine-ink)}
.faq summary::after{width:26px;height:26px;border-radius:50%;background:var(--gold-soft);color:var(--wine);display:grid;place-items:center;font-size:20px;flex:none}
.faq details p{font-size:17px}
.ask{border-radius:22px;box-shadow:var(--sh-3);background:radial-gradient(circle at 85% 10%,#7A1D38,#65152C 45%,#4A0E20)}
.faq-side img{border-radius:22px;box-shadow:var(--sh-3)}

/* contact */
.contact{background:linear-gradient(180deg,var(--sand),#F3EFE9);border-top:1px solid var(--line)}
.contact-card,.dl-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2)}
.cities span,.city{background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-1)}

/* footer */
footer{background:linear-gradient(180deg,#3A0C1A,#2A0812);border-top:1px solid rgba(255,255,255,.06)}
footer .wrap{padding-block:30px}
footer nav a{color:rgba(255,255,255,.72);padding:6px 2px;transition:color .12s}
footer nav a:hover{color:var(--gold)}

/* prices page */
.plan{border-radius:22px;border:1px solid var(--line);box-shadow:var(--sh-2)}
.plan-best{border:1.5px solid var(--gold);box-shadow:var(--sh-3)}
.plan-badge{border-radius:999px;box-shadow:0 2px 6px rgba(122,75,0,.25)}
.costs{border-radius:18px;box-shadow:var(--sh-2);border:1px solid var(--line)}
.pt-tabs{box-shadow:var(--sh-1)}
.pt-tabs button.on{background:linear-gradient(180deg,#74193A,#5E1329)}
.prices{background:var(--cream)}

/* services page */
.sv-ask{border-radius:22px;box-shadow:var(--sh-3);background:radial-gradient(circle at 85% 10%,#7A1D38,#65152C 45%,#4A0E20)}
.sv-group-h h2{font-weight:900}
.svc-link{color:var(--wine)}

/* never wrap the things that must stay on one line */
.eyebrow,.nav a,.btn,.strip b,.strip span,.hero-price a,.ps-plan b,.pt-tabs button,.sv-group-h h2,.care h3,.svc h3{white-space:nowrap}
@media (max-width:760px){.care h3,.svc h3,.eyebrow{white-space:normal}.hero-copy,.hero .wrap>*{min-width:0;max-width:100%}.cta-row{flex-wrap:wrap}.cta-row .btn{flex:1 1 100%;justify-content:center}.hero-price{white-space:normal}.hero-price span{display:block;margin-top:4px}}
.hero-copy{min-width:0}
@media (max-width:560px){.strip .wrap{grid-template-columns:1fr 1fr;gap:14px}.strip b{font-size:22px}.strip span{font-size:13px;white-space:normal}.strip div{min-width:0}}
@media (prefers-reduced-motion:reduce){.btn,.svc,.care article{transition:none}.btn:hover,.svc:hover,.care article:hover{transform:none}}

/* website menu drawer (tablet + phone), opens from the right */
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1);flex:none}
.menu-btn svg{width:22px;height:22px}
@media (max-width:1240px){.menu-btn{display:inline-flex}}
.menu-scrim{position:fixed;inset:0;background:rgba(28,23,20,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.menu-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:95;background:linear-gradient(180deg,#2A0812,#3F0C1B);color:#fff;padding:72px 22px 24px;display:flex;flex-direction:column;gap:6px;transform:translateX(102%);transition:transform .22s ease;box-shadow:var(--sh-3);overflow-y:auto}
.menu-drawer a{color:rgba(255,255,255,.85);text-decoration:none;font:600 18px/1.2 var(--text);padding:12px 12px;border-radius:10px;white-space:nowrap}
.menu-drawer a:not(.btn):hover{background:rgba(255,255,255,.07);color:#fff}
.menu-drawer .btn{justify-content:center;margin-top:6px}
.menu-drawer .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.menu-close{position:absolute;left:14px;top:16px;width:38px;height:38px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer}
body.menu-open .menu-scrim{opacity:1;pointer-events:auto}
body.menu-open .menu-drawer{transform:none}
body.menu-open{overflow:hidden}