/* ==========================================================================
   SecurityPilot — site stylesheet
   Cockpit palette: earth at night. Deep plum canvas, phosphor-sage accent,
   warm bone text. Shared by every page under securitypilot.nl.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------------
     Licht — de standaard. Warm papier, plum inkt, salie als accent.
     Donker staat hieronder en wordt alleen gezet als de bezoeker erom vraagt.
     De tokennamen komen uit het oorspronkelijke nachtpalet; ze benoemen een
     rol, geen kleur. --night is altijd het canvas, --plum altijd het kaartvlak.
     --------------------------------------------------------------------- */
  color-scheme:light;
  /* Canvas & vlakken */
  --night:#f2eee5; --night-100:#e7e1d4;
  --plum:#fdfcf9; --plum-200:#eee9dc; --plum-300:#f7f3ea;
  /* Neutralen */
  --slate:#8d8a86; --moss:#6d7a6f;
  /* Accent */
  --sage:#3f6b4a; --signal:#35603f;
  /* Tekst */
  --bone:#2b1a2d; --fg2:#574a58; --fg3:#6b5f6c;
  /* Semantisch */
  --amber:#835e1e; --rust:#8c4529; --rose:#9d5050; --sky:#4a687f;
  /* Merkteken — het goud uit het logo, iets dieper zodat het op papier leest */
  --mark:#a87d33;
  /* Lijnen */
  --line:rgba(43,26,45,.18); --line-2:rgba(43,26,45,.10); --line-strong:rgba(63,107,74,.45);
  /* Vlakgebonden details */
  --nav-bg:rgba(242,238,229,.88);
  --selection:rgba(63,107,74,.22);
  --hero-glow-a:rgba(63,107,74,.10); --hero-glow-b:rgba(63,107,74,.05);
  --rust-line:rgba(140,69,41,.5); --amber-line:rgba(131,94,30,.5);
  --select-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233f6b4a' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
  --glow-sage:0 0 0 1px rgba(63,107,74,.42),0 6px 18px -8px rgba(63,107,74,.5);

  /* Type */
  --f-display:'Chakra Petch','Bahnschrift',sans-serif;
  --f-body:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  /* Beweging */
  --ease:cubic-bezier(.16,1,.3,1);
  /* Ritme */
  --gutter:24px; --max:1120px; --section:104px;
}

:root[data-theme="dark"]{
  /* Donker — earth at night, het oorspronkelijke cockpitpalet. */
  color-scheme:dark;
  --night:#28112b; --night-100:#1c0a1f;
  --plum:#453643; --plum-200:#382a37; --plum-300:#4f3d4d;
  --slate:#5e5d5c; --moss:#788475;
  --sage:#8daa91; --signal:#b5d4a4;
  --bone:#d8d2c4; --fg2:#b0ab9c; --fg3:#a5a4a1;
  --amber:#c89d5a; --rust:#a85c3f; --rose:#c97a7a; --sky:#7a93a8;
  --mark:#c89d5a;
  --line:rgba(141,170,145,.20); --line-2:rgba(141,170,145,.10); --line-strong:rgba(141,170,145,.42);
  --nav-bg:rgba(28,10,31,.88);
  --selection:rgba(141,170,145,.30);
  --hero-glow-a:rgba(141,170,145,.09); --hero-glow-b:rgba(141,170,145,.04);
  --rust-line:rgba(168,92,63,.5); --amber-line:rgba(200,157,90,.5);
  --select-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238daa91' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
  --glow-sage:0 0 0 1px rgba(141,170,145,.4),0 0 24px -6px rgba(141,170,145,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

body{
  font-family:var(--f-body);
  color:var(--bone);
  background:var(--night);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
::selection{background:var(--selection);color:var(--bone)}

/* --- Layout primitives ---------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px;margin-inline:auto}
section{padding:var(--section) 0}
@media(max-width:720px){:root{--section:72px}}

.rule{border:0;border-top:1px solid var(--line-2)}

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;letter-spacing:.005em;color:var(--bone);font-weight:700}
h1{font-size:clamp(32px,5.2vw,52px)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:20px}

.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* Bracketed tag — the brand's signature copy device */
.tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.tag::before{content:'[ ';opacity:.5}
.tag::after{content:' ]';opacity:.5}

.eyebrow{display:inline-block;margin-bottom:14px}
.lead{font-size:clamp(16px,2vw,19px);color:var(--fg2);max-width:60ch}
.sub{color:var(--fg2);max-width:62ch;font-size:16px;margin-top:14px}
.section-head{margin-bottom:48px}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:6px;
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.03em;
  padding:13px 26px;text-decoration:none;
  transition:box-shadow .12s var(--ease),background .12s var(--ease),border-color .12s var(--ease);
}
.btn-sage{background:var(--sage);color:var(--night)}
.btn-sage:hover{box-shadow:var(--glow-sage)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--sage);background:var(--plum-200)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.arrow-link{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;white-space:nowrap;
}
.arrow-link:hover{text-decoration:underline}

/* --- Nav ------------------------------------------------------------------ */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{
  font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.05em;
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;color:var(--bone);flex:none;
}
.logo em{color:var(--sage);font-style:normal}
.logo .mark{width:27px;height:27px;flex:none;color:var(--mark)}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--fg2);transition:color .12s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--sage)}
.nav-cta{
  background:var(--sage);color:var(--night);font-weight:600;flex:none;
  padding:8px 15px;border-radius:6px;font-size:14px;text-decoration:none;
  transition:box-shadow .12s var(--ease);
}
.nav-cta:hover{box-shadow:var(--glow-sage)}

/* Themaschakelaar — licht staat aan, dus tonen we waar je heen kunt */
.theme-toggle{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:6px;
  background:transparent;color:var(--fg2);
  transition:border-color .12s var(--ease),color .12s var(--ease),background .12s var(--ease);
}
.theme-toggle:hover{border-color:var(--line-strong);color:var(--sage);background:var(--plum-200)}
.theme-toggle svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media(max-width:760px){
  .nav-inner{height:auto;flex-wrap:wrap;padding:13px 0;gap:0 10px}
  .theme-toggle{margin-left:auto}
  .nav-links{
    order:3;width:100%;margin:12px 0 0;padding-top:12px;gap:20px;
    border-top:1px solid var(--line-2);overflow-x:auto;
  }
  .nav-links a{font-size:13.5px;white-space:nowrap}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:96px 0 84px;border-bottom:1px solid var(--line)}
.hero.compact{padding:72px 0 56px}
.hero::before{
  content:"";position:absolute;top:-45%;right:-12%;width:680px;height:680px;pointer-events:none;
  background:radial-gradient(circle,var(--hero-glow-a) 0,var(--hero-glow-b) 34%,transparent 62%);
  border-radius:50%;
}
.hero .wrap{position:relative;z-index:1}
.hero h1 em{color:var(--sage);font-style:normal}
.hero .lead{margin-top:22px}

/* Het merkteken als rustig achtergrondmotief, niet als illustratie */
.hero-mark{
  position:absolute;top:50%;right:2%;transform:translateY(-50%);
  width:420px;height:420px;pointer-events:none;color:var(--mark);opacity:.08;
}
:root[data-theme="dark"] .hero-mark{opacity:.13}
@media(max-width:1024px){.hero-mark{width:340px;height:340px;right:-6%}}
@media(max-width:760px){.hero-mark{width:280px;height:280px;right:-16%;opacity:.06}}

/* Readouts strip */
.readouts{display:flex;gap:40px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid var(--line-2)}
.ro{display:flex;flex-direction:column;gap:4px}
.ro .n{
  font-family:var(--f-display);font-weight:700;font-size:24px;color:var(--sage);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1;
}
.ro .l{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}

/* --- Cards ---------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--plum);border:1px solid var(--line);border-radius:10px;padding:26px;
  text-decoration:none;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
a.card:hover,.card:hover{border-color:var(--line-strong);background:var(--plum-300)}
.card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.card .icon{
  width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:9px;
  display:grid;place-items:center;color:var(--sage);background:var(--night-100);
}
.card .icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.card-name .mono{color:var(--sage);font-size:12px;letter-spacing:.14em}
.card-phase{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.card h3{font-family:var(--f-body);font-size:18px;font-weight:600;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--fg2);flex:1}
.card-foot{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
}
.price{font-family:var(--f-mono);font-size:12px;color:var(--signal);letter-spacing:.04em}
.price.muted{color:var(--fg3)}

/* Status flag on a card */
.flag{
  position:absolute;top:22px;right:22px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;
}
.flag.sage{color:var(--night);background:var(--sage);font-weight:600}
.flag.muted{color:var(--fg3);background:var(--night-100);border:1px solid var(--line)}

/* --- Steps ---------------------------------------------------------------- */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--plum);
}
.step{padding:26px 24px;border-bottom:1px solid var(--line)}
@media(min-width:721px){
  .step{border-bottom:none;border-right:1px solid var(--line)}
  .step:last-child{border-right:none}
}
.step:last-child{border-bottom:none}
.step-num{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--sage);
  display:block;margin-bottom:14px;
}
.step h3{font-family:var(--f-body);font-size:16px;font-weight:600;margin-bottom:8px}
.step p{font-size:14px;color:var(--fg2)}

/* --- Split (about) -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:36px}}
.split p{color:var(--fg2);font-size:15.5px;margin-bottom:16px}
.split p strong{color:var(--bone);font-weight:600}

.panel-list{background:var(--plum);border:1px solid var(--line);border-radius:10px;padding:24px}
.panel-list .mono{color:var(--sage);display:block;margin-bottom:16px}

/* Tick list — the house bullet */
.ticks{list-style:none}
.ticks li{
  position:relative;padding-left:22px;
  font-size:14.5px;color:var(--fg2);margin-bottom:11px;
}
.ticks li:last-child{margin-bottom:0}
.ticks li::before{content:'\25b8';position:absolute;left:0;top:0;color:var(--sage)}
.ticks li strong{color:var(--bone);font-weight:600}

/* --- Offer blocks (portfolio detail) -------------------------------------- */
.offer{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:22px 56px;
  padding:48px 0;border-top:1px solid var(--line-2);scroll-margin-top:88px;
}
.offer:first-of-type{border-top:none;padding-top:12px}
@media(max-width:860px){.offer{grid-template-columns:1fr;gap:18px;padding:36px 0;scroll-margin-top:128px}}
.offer-id .mono{color:var(--sage);font-size:12px;letter-spacing:.14em;display:block}
.offer-id .card-phase{display:block;margin-top:4px}
.offer-id h3{font-family:var(--f-display);font-size:23px;font-weight:700;margin-top:12px}
.offer-id .price{display:block;margin-top:12px}
.offer-id .btn,.offer-id .arrow-link{margin-top:16px;display:inline-block}
.offer-body>p{color:var(--fg2);font-size:15.5px}
.offer-body>p+p{margin-top:14px}
.offer-body .ticks{margin-top:20px}

/* Credential chips — compact, no card grid */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--fg2);background:var(--night-100);
  border:1px solid var(--line);border-radius:4px;padding:6px 11px;white-space:nowrap;
}
.chip strong{color:var(--bone);font-weight:500}

/* --- CTA band ------------------------------------------------------------- */
.band{background:var(--night-100);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{font-size:clamp(23px,3vw,30px)}
.band p{color:var(--fg2);font-size:15px;margin-top:10px;max-width:52ch}

/* --- Post list (blog index + home teaser) --------------------------------- */
.post-list{border-top:1px solid var(--line-2)}
.post-item{
  display:grid;grid-template-columns:150px 1fr auto;gap:8px 28px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--line-2);
  text-decoration:none;transition:border-color .12s var(--ease);
}
.post-item:hover{border-bottom-color:var(--line-strong)}
.post-item:hover h3{color:var(--sage)}
.post-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.post-item h3{font-family:var(--f-body);font-size:18px;font-weight:600;transition:color .12s var(--ease)}
.post-item p{font-size:14.5px;color:var(--fg2);margin-top:6px;max-width:64ch}
.post-item .arrow-link{align-self:center}
@media(max-width:760px){
  .post-item{grid-template-columns:1fr;gap:6px}
  .post-item .arrow-link{display:none}
}

/* --- Article (blog post) -------------------------------------------------- */
.post-header{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.post-header h1{font-size:clamp(28px,4.4vw,42px);max-width:22ch;margin-top:14px}
.post-header .post-meta{margin-top:20px}

.prose{padding:56px 0 88px;max-width:760px;margin-inline:auto}
.prose>*+*{margin-top:22px}
.prose p,.prose li{font-size:16.5px;color:var(--fg2);line-height:1.72}
.prose .lead{font-size:18.5px;color:var(--bone);max-width:none}
.prose h2{font-size:24px;margin-top:52px}
.prose h3{font-size:18px;font-family:var(--f-body);font-weight:600;margin-top:36px}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-top:10px}
.prose li::marker{color:var(--sage)}
.prose blockquote{
  border-left:2px solid var(--sage);padding:4px 0 4px 20px;
  color:var(--bone);font-size:17px;
}
.prose hr{border:0;border-top:1px solid var(--line-2);margin:44px 0}
.prose code{
  font-family:var(--f-mono);font-size:.88em;color:var(--signal);
  background:var(--night-100);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;
}
.callout{
  background:var(--plum);border:1px solid var(--line);border-left:3px solid var(--sage);
  border-radius:8px;padding:20px 22px;
}
.callout p{font-size:15px}
.callout .mono{color:var(--sage);display:block;margin-bottom:8px}

.post-footer{border-top:1px solid var(--line-2);padding-top:28px;margin-top:52px}
.post-footer p{font-size:14.5px;color:var(--fg3)}

/* --- Footer --------------------------------------------------------------- */
.site-footer{
  background:var(--night-100);color:var(--fg3);
  padding:52px 0;font-size:13.5px;border-top:1px solid var(--line);
}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:720px){.site-footer .wrap{grid-template-columns:1fr;gap:28px}}
.site-footer a{color:var(--fg2);text-decoration:none}
.site-footer a:hover{color:var(--sage)}
.foot-logo{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:700;letter-spacing:.06em;color:var(--bone);font-size:15px;
}
.foot-logo .mark{width:24px;height:24px;flex:none;color:var(--mark)}
.foot-tagline{margin-top:12px;max-width:34ch;color:var(--fg2)}
.foot-logo em{color:var(--sage);font-style:normal}
.site-footer .mono{color:var(--sage);display:block;margin-bottom:12px}
.foot-links{display:flex;flex-direction:column;gap:9px}
.foot-bottom{
  max-width:var(--max);margin:36px auto 0;padding:22px var(--gutter) 0;
  border-top:1px solid var(--line-2);font-size:12.5px;
}

.hidden{display:none!important}