/* Layout: technisch dossier — linkerkolom met betoog, rechts een levend eCOC-dossier met statusspoor; daarna een vijfstappen-band en een rustige FAQ. */
:root{
  --paper:#F2F4F3;
  --surface:#FFFFFF;
  --ink:#13232C;
  --muted:#52636C;
  --line:#D5DDDF;
  --petrol:#0F5A66;
  --stamp:#D9821E;
  --stamp-ink:#7A4307;
  --ok:#1F7A4D;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E171C;--surface:#15222A;--ink:#E4ECEE;--muted:#93A6AE;--line:#27363F;
    --petrol:#5FB8C4;--stamp:#E89A3C;--stamp-ink:#F4C27F;--ok:#5CC48D;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E171C;--surface:#15222A;--ink:#E4ECEE;--muted:#93A6AE;--line:#27363F;
  --petrol:#5FB8C4;--stamp:#E89A3C;--stamp-ink:#F4C27F;--ok:#5CC48D;color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;margin:0}
.wrap{max-width:72rem;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--petrol)}
a:focus-visible,button:focus-visible{outline:2px solid var(--stamp);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-stretch:85%;line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:750;letter-spacing:-.01em}
h3{font-size:1.25rem;font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.logo{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:1.45rem;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.logo span{color:var(--stamp)}
nav{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
nav a.lnk{color:var(--muted);text-decoration:none;font-size:.95rem}
nav a.lnk:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:600;font-size:.98rem;padding:.7rem 1.15rem;border-radius:4px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--petrol);border-color:var(--petrol)}
.btn:not(.primary):hover{border-color:var(--petrol);color:var(--petrol)}
@media (max-width:720px){nav a.lnk{display:none}nav{gap:.8rem}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,5rem)}
.hero > *{min-width:0}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);font-weight:800;letter-spacing:-.02em;margin-block:.9rem 1.4rem}
.hero h1 em{font-style:normal;color:var(--petrol)}
.lede{font-size:1.18rem;color:var(--muted);max-width:34rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.trust{margin-top:2.2rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.trust b{color:var(--ink);font-weight:500}
@media (max-width:880px){.hero{grid-template-columns:1fr}}

/* dossier card */
.dossier{background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(10,30,40,.35);overflow:hidden;position:relative}
.dossier .head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px dashed var(--line)}
.dossier .head .eyebrow{font-size:.72rem}
.chip{font-family:var(--mono);font-size:.72rem;padding:.2rem .55rem;border-radius:99px;border:1px solid var(--ok);color:var(--ok);white-space:nowrap}
.fields{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;padding:1.1rem 1.25rem;font-size:.9rem}
.fields dt{color:var(--muted);font-size:.8rem;padding-top:.1rem}
.fields dd{margin:0;font-family:var(--mono);font-size:.86rem;overflow-wrap:anywhere}
.trail{list-style:none;margin:0;padding:1rem 1.25rem 1.3rem;border-top:1px solid var(--line);display:grid;gap:.7rem}
.trail li{display:grid;grid-template-columns:1.1rem 1fr auto;gap:.7rem;align-items:center;font-size:.9rem}
.trail .dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--ok);justify-self:center}
.trail li.now .dot{background:var(--stamp);box-shadow:0 0 0 4px color-mix(in srgb,var(--stamp) 25%,transparent)}
.trail time{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.stamp{position:absolute;right:1rem;top:6.2rem;transform:rotate(-9deg);border:2px solid var(--stamp);color:var(--stamp-ink);font-family:var(--display);font-stretch:75%;font-weight:800;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border-radius:3px;opacity:.9;pointer-events:none}
@media (max-width:460px){.stamp{display:none}}
.example{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:right;padding:.4rem 1.25rem .7rem}

/* sections */
section{padding-block:clamp(3.5rem,7vw,5.5rem);border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem)}
.split > *{min-width:0}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.prose{display:grid;gap:1.1rem;max-width:38rem;color:var(--ink)}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink);font-weight:600}

.steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.steps li{padding:1.3rem 1.2rem 0 0;display:grid;gap:.55rem;align-content:start;position:relative}
.steps li + li{padding-left:1.2rem;border-left:1px solid var(--line)}
.steps .n{font-family:var(--mono);font-size:.78rem;color:var(--stamp-ink)}
.steps p{font-size:.95rem;color:var(--muted)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}.steps li,.steps li + li{padding:1.2rem 0;border-left:0;border-bottom:1px solid var(--line)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.audience{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.4rem}
.audience div{padding:1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;display:grid;gap:.5rem;align-content:start}
.audience p{font-size:.95rem;color:var(--muted)}
.audience .tag{font-family:var(--mono);font-size:.74rem;color:var(--petrol)}
@media (max-width:980px){.audience{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.audience{grid-template-columns:1fr}}

.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.4rem}
.why div{display:grid;gap:.5rem;align-content:start;border-top:2px solid var(--stamp);padding-top:1rem}
.why p{color:var(--muted);font-size:.97rem}
@media (max-width:820px){.why{grid-template-columns:1fr}}

.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding-block:1.1rem}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.7rem;color:var(--muted);max-width:42rem}

.contact{background:var(--ink);color:var(--paper);border-radius:8px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.contact > *{min-width:0}
.contact h2{color:var(--paper)}
.contact p{color:color-mix(in srgb,var(--paper) 75%,transparent);margin-top:1rem;max-width:32rem}
.mailbox{display:grid;gap:.7rem;justify-items:start}
.mail{font-family:var(--mono);font-size:1.15rem;user-select:all;overflow-wrap:anywhere}
.contact .btn{border-color:var(--paper);color:var(--paper)}
.contact .btn:hover{background:var(--paper);color:var(--ink)}
.contact .btn.light{background:var(--paper);color:var(--ink)}
.contact .btn.light:hover{background:var(--stamp);border-color:var(--stamp);color:var(--ink)}
.copied{font-family:var(--mono);font-size:.78rem;color:var(--stamp)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* plussen */
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 2rem;margin-top:2.6rem}
.perks div{display:grid;gap:.45rem;align-content:start}
.perks .fig{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:2rem;color:var(--petrol);line-height:1}
.perks p{font-size:.95rem;color:var(--muted)}
@media (max-width:980px){.perks{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.perks{grid-template-columns:1fr}}

/* vergelijking */
.cmp-scroll{overflow-x:auto;margin-top:2.4rem;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table.cmp{border-collapse:collapse;width:100%;min-width:44rem;font-size:.94rem}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--display);font-stretch:85%;font-size:1.05rem;font-weight:750;border-bottom:2px solid var(--ink)}
.cmp thead th.us{color:var(--petrol)}
.cmp tbody th{font-weight:600;width:24%}
.cmp td{color:var(--muted)}
.cmp td.us{color:var(--ink);background:color-mix(in srgb,var(--petrol) 7%,transparent)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.mk{font-family:var(--mono);font-weight:500;margin-right:.35rem}
.mk.y{color:var(--ok)}.mk.n{color:var(--stamp-ink)}
.note{margin-top:1rem;font-size:.85rem;color:var(--muted);max-width:46rem}

.langs{display:flex;gap:.15rem;font-family:var(--mono);font-size:.8rem}
.langs a{color:var(--muted);text-decoration:none;padding:.3rem .4rem;border-radius:3px}
.langs a[aria-current]{color:var(--ink);background:var(--line)}
.langs a:hover{color:var(--ink)}

/* platform-beelden */
.shot-img{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 22px 50px -30px rgba(10,30,40,.45);background:#fff}
.shot-img img{display:block;width:100%;height:auto}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 2rem;margin-top:2.4rem}
.shot{margin:0;display:grid;gap:1rem;align-content:start;min-width:0}
.shot.wide{grid-column:1/-1}
.shot figcaption{display:grid;gap:.35rem}
.shot figcaption p{color:var(--muted);font-size:.95rem;max-width:40rem}
@media (max-width:860px){.shots{grid-template-columns:1fr}}
.ui-win{--u-bg:#FFFFFF;--u-side:#F4F6F8;--u-line:#E1E6EA;--u-tx:#1B2A33;--u-mu:#66767F;--u-blue:#1D4ED8;
  background:var(--u-bg);color:var(--u-tx);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 22px 50px -30px rgba(10,30,40,.45);font-family:var(--body);font-size:.8rem;line-height:1.4}
.ui-top{display:flex;align-items:center;gap:.35rem;padding:.55rem .8rem;background:#E9EDF0;border-bottom:1px solid var(--u-line)}
.ui-top i{width:.6rem;height:.6rem;border-radius:50%;background:#C5CDD3}
.ui-url{margin-left:.8rem;font-family:var(--mono);font-size:.7rem;color:var(--u-mu);background:#fff;padding:.15rem .6rem;border-radius:4px}
.ui-body{display:flex;min-height:15rem}
.ui-side{width:9.5rem;flex:none;background:var(--u-side);border-right:1px solid var(--u-line);padding:.8rem .6rem;display:grid;gap:.8rem;align-content:start}
.ui-new{background:#0B3B8C;color:#fff;font-weight:600;text-align:center;padding:.4rem;border-radius:4px;font-size:.75rem}
.ui-side ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.ui-side li{padding:.3rem .45rem;border-radius:4px;color:var(--u-mu)}
.ui-side li.on{background:#E3EAF7;color:var(--u-blue);font-weight:600}
.ui-main{flex:1;min-width:0;padding:.9rem 1rem;display:grid;gap:.8rem;align-content:start;overflow-x:auto}
.ui-h{font-family:var(--display);font-stretch:90%;font-weight:700;font-size:1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ui-sum{font-family:var(--body);font-size:.72rem;font-weight:600;color:#B42318;background:#FDECEA;padding:.12rem .5rem;border-radius:99px}
.ui-tbl{border-collapse:collapse;width:100%;min-width:32rem}
.ui-tbl th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--u-mu);font-weight:600;padding:.35rem .5rem;border-bottom:1px solid var(--u-line)}
.ui-tbl td{padding:.45rem .5rem;border-bottom:1px solid var(--u-line);white-space:nowrap}
.ui-tbl td.m{font-family:var(--mono);font-size:.72rem}
.ui-cat{font-family:var(--mono);font-size:.65rem;border:1px solid var(--u-line);padding:.05rem .3rem;border-radius:3px;color:var(--u-mu)}
.ui-st{font-size:.68rem;font-weight:600;padding:.1rem .45rem;border-radius:3px;border:1px solid}
.ui-st.a{color:#1F7A4D;background:#E8F5EE;border-color:#A8D8BD}
.ui-st.d{color:#66767F;background:#F1F3F5;border-color:#D9DEE2}
.ui-st.s{color:#1D4ED8;background:#EAF0FD;border-color:#B8CBF6}
.ui-iss{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ui-iss li{display:grid;gap:.15rem;padding:.55rem .7rem;border:1px solid var(--u-line);border-left:3px solid #D92D20;border-radius:4px}
.ui-iss li.w{border-left-color:#E8A317}
.ui-iss span{color:var(--u-mu)}
.ui-foot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--u-line);padding-top:.7rem}
.ui-foot small{color:var(--u-mu)}
.ui-btn{background:#0B3B8C;color:#fff;font-weight:600;padding:.35rem .8rem;border-radius:4px}
.ui-btn.off{background:#C9D2DA}
.ui-ok{color:#1F7A4D;font-weight:600}
.ui-tl{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ui-tl li{display:grid;grid-template-columns:1rem 1fr auto;gap:.6rem;align-items:center}
.ui-tl .d{width:.6rem;height:.6rem;border-radius:50%;background:#1F7A4D;justify-self:center}
.ui-tl li.now .d{background:var(--stamp);box-shadow:0 0 0 3px color-mix(in srgb,var(--stamp) 25%,transparent)}
.ui-tl time{font-family:var(--mono);font-size:.7rem;color:var(--u-mu)}
@media (max-width:560px){.ui-side{display:none}}

.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.4rem}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.3rem 1.3rem 1.1rem;display:grid;gap:.7rem;align-content:start;min-width:0}
.feat ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.feat li{position:relative;padding-left:1.1rem;font-size:.94rem;color:var(--muted)}
.feat li:before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:1px;background:var(--petrol)}
.feat:last-child{border-color:var(--stamp)}
.feat:last-child li:before{background:var(--stamp)}
.note.erp{color:var(--ink);font-weight:500;font-size:1rem}
@media (max-width:980px){.feats{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.feats{grid-template-columns:1fr}}
.steps.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.steps.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps.steps4{grid-template-columns:1fr}}
footer a{color:var(--petrol)}
footer{padding-block:2.5rem 3rem;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .trail li.now .dot{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--stamp) 0%,transparent)}}
}

/* CHTS-identiteit */
.logo .wm{color:var(--ink)}
.logo .wm span{color:var(--stamp)}
.logo{display:inline-flex;align-items:center;gap:.55rem}
.chts-mark{height:1.5rem;width:auto;border-radius:2px;display:block}
.by{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:.3rem .65rem .3rem .35rem;border-radius:99px;margin-bottom:.9rem}
.by img{height:1.1rem;width:auto;border-radius:2px}
.by:hover{border-color:var(--petrol)}
.about{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about-side{display:grid;gap:1.4rem;position:sticky;top:6rem}
.about-logo{width:100%;max-width:15rem;height:auto;border-radius:4px;box-shadow:0 18px 40px -24px rgba(10,30,40,.45)}
.facts{margin:0;display:grid;gap:.8rem}
.facts div{display:grid;gap:.1rem;border-top:1px solid var(--line);padding-top:.6rem}
.facts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.scope{font-size:.85rem;color:var(--muted)}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.8rem}
.about-cols h3{font-size:1.05rem;margin-bottom:.7rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.3rem;color:var(--muted);font-size:.95rem}
.ticks li:before{content:"✓";position:absolute;left:0;color:var(--petrol);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips span{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:.3rem .75rem;font-size:.88rem}
#chts .why{margin-top:3.5rem}
.foot-brand{display:inline-flex;align-items:center;gap:.6rem}
.foot-brand img{height:1.4rem;width:auto;border-radius:2px}
@media (max-width:820px){.about{grid-template-columns:1fr}.about-side{position:static;grid-template-columns:auto 1fr;align-items:start}.about-logo{max-width:8rem}.scope{grid-column:1/-1}.about-cols{grid-template-columns:1fr}}
@media (max-width:720px){.chts-mark{height:1.25rem}}

/* ---- mobiel ---- */
.logo{white-space:nowrap}
.swipe{display:none}
.feat summary{list-style:none;cursor:default}
.feat summary::-webkit-details-marker{display:none}
@media (max-width:720px){
  header .bar{padding-block:.6rem;gap:.6rem}
  .logo{font-size:1.25rem}
  nav{flex-wrap:nowrap;gap:.5rem}
  nav .btn.primary{padding:.5rem .75rem;font-size:.85rem}
  .langs{font-size:.72rem}
  .langs a{padding:.25rem .3rem}
  section{padding-block:3rem}
  .hero{padding-block:2.2rem 2.6rem;gap:2rem}
  .hero h1{font-size:2.35rem}
  .lede{font-size:1.05rem}
  .cta .btn{flex:1 1 auto;justify-content:center}
  .trust{gap:.4rem 1rem}
  .swipe{display:block;font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-top:1rem}
  .shots{gap:1.8rem;margin-top:1rem}
  .shot-img{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .shot-img img{width:190%;max-width:none}
  .cmp td .mk{display:none}
  .feats{gap:.8rem}
  .feat{padding:1rem 1.1rem}
  .feat summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .feat summary::after{content:"+";font-family:var(--mono);color:var(--muted);font-size:1.1rem}
  .feat[open] summary::after{content:"–"}
  .feat[open] summary{margin-bottom:.4rem}
  .perks{grid-template-columns:1fr 1fr;gap:1.6rem 1.1rem}
  .perks .fig{font-size:1.5rem}
  .perks h3{font-size:1rem}
  .perks p{font-size:.88rem}
  .cmp-scroll{overflow:visible;border:0;background:transparent}
  table.cmp{min-width:0}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-bottom:.8rem;overflow:hidden}
  .cmp tbody th{width:auto;font-family:var(--display);font-stretch:85%;font-size:1.05rem;border-bottom:1px solid var(--line);padding:.8rem 1rem}
  .cmp td{border-bottom:1px solid var(--line);padding:.6rem 1rem;display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem}
  .cmp td:last-child{border-bottom:0}
  .cmp td::before{content:attr(data-label);font-family:var(--mono);font-size:.72rem;color:var(--muted);padding-top:.15rem}
  .cmp td.us::before{color:var(--petrol);font-weight:500}
  .contact{padding:1.6rem}
  .contact .cta .btn{flex:1 1 100%}
  footer{flex-direction:column;gap:.4rem}
}
@media (max-width:380px){.perks{grid-template-columns:1fr}.hero h1{font-size:2.1rem}}