/* =========================================================
   Noventra — ISO 27001 page (iso-27001.html).
   Shared light-page blocks are in light.css.
   ========================================================= */

/* ---- hero: 'informatiebeveiliging' is one long word, so the heading is a bit smaller here ---- */
.page-hero h1{font-size:clamp(2.1rem,4.5vw,3.7rem); hyphens:auto; -webkit-hyphens:auto; text-wrap:balance}
@media(min-width:960px){ .page-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} }

/* ---- status pill in the hero ---- */
.status-pill{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem; padding:.5rem .95rem .5rem .75rem;
             border-radius:999px; background:var(--surface); border:1px solid var(--line);
             font-size:.84rem; font-weight:600; color:var(--ink); box-shadow:0 10px 24px -18px rgba(13,14,17,.5)}
.status-pill i{width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(243,56,1,.5);
               animation:statusPulse 2.2s ease-out infinite}
.status-pill span{color:var(--muted); font-weight:500}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(243,56,1,.45)} 70%,100%{box-shadow:0 0 0 9px rgba(243,56,1,0)}}

/* ---- hero visual: the shield guarding the data, with the measures beside it ---- */
.iso-visual{display:grid; gap:clamp(1rem,2vw,1.6rem); padding:clamp(1rem,2vw,1.6rem);
            border-radius:clamp(18px,2vw,28px); background:var(--surface); border:1px solid var(--line);
            box-shadow:0 40px 80px -56px rgba(13,14,17,.45)}
@media(min-width:960px){ .iso-visual{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} }

.iso-stage{position:relative; min-height:clamp(320px,38vw,440px); border-radius:clamp(14px,1.6vw,20px); overflow:hidden;
           background:
             radial-gradient(circle at 50% 50%, rgba(243,56,1,.10), transparent 42%),
             linear-gradient(160deg, #fbf8f4, #f4eee7)}
/* concentric rings around the shield */
.iso-stage::before, .iso-stage::after{content:""; position:absolute; left:50%; top:50%; border-radius:50%;
                                      transform:translate(-50%,-50%); pointer-events:none}
.iso-stage::before{width:min(64%,380px); aspect-ratio:1; border:1px dashed rgba(243,56,1,.28)}
.iso-stage::after{width:min(40%,240px); aspect-ratio:1; border:1px solid rgba(243,56,1,.18);
                  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%)}
.iso-shield{position:absolute; left:50%; top:50%; width:clamp(118px,13vw,160px); height:auto; z-index:1;
            transform:translate(-50%,-52%); filter:drop-shadow(0 22px 30px rgba(243,56,1,.35))}

.iso-chip{position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
          border-radius:999px; background:var(--surface); border:1px solid var(--line);
          font-size:.8rem; font-weight:700; color:var(--ink); white-space:nowrap;
          box-shadow:0 12px 26px -16px rgba(13,14,17,.45)}
.iso-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--red)}
.iso-chip:nth-of-type(1){left:14%; top:18%}
.iso-chip:nth-of-type(2){right:14%; top:18%}
.iso-chip:nth-of-type(3){left:6%;  top:47%}
.iso-chip:nth-of-type(4){right:6%; top:47%}
.iso-chip:nth-of-type(5){left:14%; bottom:16%}
.iso-chip:nth-of-type(6){right:12%; bottom:16%}

.iso-measures{display:flex; flex-direction:column; padding:clamp(1.3rem,2.4vw,2rem); border-radius:clamp(14px,1.6vw,20px); background:var(--paper);
              border:1px solid var(--line)}
.iso-measures h2{margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line);
                 font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red)}
.iso-measures ul{flex:1; list-style:none; margin:0; padding:0; display:grid; gap:.95rem; align-content:space-evenly}
.iso-measures li{display:flex; align-items:center; gap:.75rem; font-weight:700; color:var(--ink)}

/* round orange check, used in several lists */
.check{width:24px; height:24px; flex:none; border-radius:50%; background:var(--red);
       box-shadow:0 6px 14px -6px rgba(243,56,1,.8)}
.check path{fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

@media(max-width:700px){
  /* phones: the chips wrap under the shield instead of orbiting it */
  .iso-stage{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-end; gap:.45rem;
             min-height:0; padding:210px 1rem 1.2rem}
  .iso-stage::before{top:105px; width:230px}
  .iso-stage::after{top:105px; width:150px}
  .iso-shield{top:105px; width:112px}
  .iso-chip{position:static; font-size:.74rem; padding:.42rem .7rem}
}

/* ---- big intro statement, centred as a resting point after the hero ---- */
.statement-band{padding-bottom:clamp(3.5rem,8vw,6rem)}
.statement-wrap{display:grid; justify-items:center; gap:1.6rem; text-align:center}
.statement-wrap::before{content:""; width:46px; height:3px; border-radius:3px; background:var(--red)}
.statement{margin:0; max-width:30ch; font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.3; letter-spacing:-.025em;
           font-weight:700; color:var(--ink); text-wrap:balance}
.statement-wrap p:not(.statement){margin:0; color:var(--text); line-height:1.78; max-width:60ch;
                                  font-size:clamp(1rem,1.4vw,1.1rem)}

/* ---- what is ISO 27001: text beside three key facts ---- */
.split{display:grid; gap:2rem 4rem; align-items:start}
.split-text p{margin:0 0 1.1rem; line-height:1.78; color:var(--text)}
.split-text p:last-child{margin-bottom:0}
@media(min-width:960px){ .split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.facts{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.facts li{display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; align-items:center;
          padding:1.1rem 1.3rem; border-radius:18px; background:var(--surface); border:1px solid var(--line)}
.facts .num{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
            background:rgba(243,56,1,.1); color:var(--red); font-weight:800; font-size:.95rem}
.facts strong{color:var(--ink); font-size:1.02rem}
.facts span:last-child{color:var(--text); font-size:.9rem; line-height:1.5}

/* ---- timeline: where we stand ---- */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative; counter-reset:step}
.timeline li{position:relative; padding:0 0 1.8rem 3.2rem}
.timeline li::before{content:""; position:absolute; left:15px; top:30px; bottom:-2px; width:2px; background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--red)}
.timeline .dot{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
               display:grid; place-items:center; background:var(--surface); border:2px solid rgba(13,14,17,.16)}
.timeline .done .dot{background:var(--red); border-color:var(--red)}
.timeline .done .dot svg{width:15px; height:15px}
.timeline .done .dot path{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.timeline .next .dot{border-color:var(--red); box-shadow:0 0 0 6px rgba(243,56,1,.12)}
.timeline .next .dot::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--red)}
.timeline .when{display:block; margin:.3rem 0 .35rem; font-size:.72rem; font-weight:700; letter-spacing:.16em;
                text-transform:uppercase; color:var(--muted)}
.timeline .done .when, .timeline .next .when{color:var(--red)}
.timeline h3{margin:0 0 .4rem; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink)}
.timeline p{margin:0; font-size:.93rem; line-height:1.65; color:var(--text); max-width:42ch}
.timeline .badge{display:inline-block; margin-left:.5rem; padding:.2rem .55rem; border-radius:999px; vertical-align:middle;
                 font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
                 color:var(--red); background:rgba(243,56,1,.1)}
@media(min-width:960px){
  /* desktop: horizontal, the line runs through the dots */
  .timeline{grid-template-columns:repeat(5, minmax(0,1fr)); gap:1.6rem}
  .timeline li{padding:3.4rem 0 0}
  .timeline li::before{left:32px; right:-1.6rem; top:15px; bottom:auto; width:auto; height:2px}
  .timeline .badge{display:table; margin:.5rem 0 0}
}

/* ---- why from the start: usual route vs. security by design ---- */
.compare{display:grid; gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(2rem,4vw,2.8rem)}
@media(min-width:760px){ .compare{grid-template-columns:1fr 1fr} }
.compare > div{padding:clamp(1.4rem,2.6vw,2.2rem); border-radius:22px; border:1px solid var(--line)}
.compare .usual{background:transparent; border-style:dashed}
.compare .ours{background:linear-gradient(150deg, #fff, #fff4ee); border-color:rgba(243,56,1,.25);
               box-shadow:0 30px 60px -44px rgba(243,56,1,.6)}
.compare .tag{display:inline-block; margin-bottom:1rem; padding:.3rem .7rem; border-radius:999px;
              font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.compare .usual .tag{color:var(--muted); background:rgba(13,14,17,.06)}
.compare .ours .tag{color:#fff; background:var(--red)}
.compare h3{margin:0 0 .9rem; font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.02em; color:var(--ink)}
.compare .usual h3{color:var(--muted)}
.compare ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.compare li{display:flex; gap:.7rem; line-height:1.55; color:var(--text); font-size:.95rem}
.compare .usual li::before{content:"–"; color:var(--muted); font-weight:700}
.compare .ours li .check{width:20px; height:20px; margin-top:.1rem}

/* ---- platform features ---- */
.features{display:grid; gap:clamp(1rem,2vw,1.6rem); grid-template-columns:repeat(2, minmax(0,1fr))}
@media(max-width:760px){ .features{grid-template-columns:1fr} }
.feature{padding:clamp(1.4rem,2.6vw,2.1rem); border-radius:22px; background:var(--surface); border:1px solid var(--line);
         transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.feature:hover{transform:translateY(-3px); box-shadow:0 30px 60px -40px rgba(13,14,17,.45)}
.feature .icon{display:grid; place-items:center; width:48px; height:48px; margin-bottom:1.3rem; border-radius:15px;
               background:rgba(243,56,1,.1)}
.feature .icon svg{width:23px; height:23px; fill:none; stroke:var(--red); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin:0 0 .5rem; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink)}
.feature p{margin:0; font-size:.95rem; line-height:1.68; color:var(--text)}

/* ---- our model: text beside the services it strengthens ---- */
.model{display:grid; gap:2rem 4rem; align-items:start}
@media(min-width:960px){ .model{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }
.model-text p{margin:0 0 1.1rem; line-height:1.78; color:var(--text)}
.model-text p:first-child{font-size:clamp(1.1rem,1.7vw,1.28rem); line-height:1.6; color:var(--ink); font-weight:600}
.model-text p:last-child{margin-bottom:0}
.links{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
.links li{display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem; padding:1.2rem 1.3rem; border-radius:18px;
          background:var(--surface); border:1px solid var(--line)}
.links .icon{grid-row:span 2; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(243,56,1,.1)}
.links .icon svg{width:20px; height:20px; fill:none; stroke:var(--red); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.links strong{color:var(--ink)}
.links span:last-child{color:var(--text); font-size:.93rem; line-height:1.6}

/* cards on a white band get the paper tone, so they still stand out */
.band-white .facts li, .band-white .compare .ours{background:var(--paper)}
.band-white .compare .ours{background:linear-gradient(150deg, var(--paper), #fdeee5)}

/* ---- benefits checklist (on the orange band) ---- */
.benefits{list-style:none; margin:0; padding:0; display:grid; gap:clamp(.8rem,1.6vw,1.2rem)}
@media(min-width:760px){ .benefits{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .benefits{grid-template-columns:repeat(3, 1fr)} }
.benefits li{display:flex; align-items:flex-start; gap:.9rem; padding:1.3rem 1.4rem; border-radius:18px;
             background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
             backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
             font-weight:600; font-size:1.02rem; line-height:1.5; color:#fff}
/* the heading is the first cell, so five benefits fill a 3 x 2 grid */
.benefits li.benefits-intro{display:block; align-self:center; padding:0 1rem 0 0; background:none; border:0;
                            backdrop-filter:none; -webkit-backdrop-filter:none}
.benefits-intro h2{margin:0; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.03em; color:#fff}
@media(min-width:760px) and (max-width:1099px){ .benefits li.benefits-intro{grid-column:1/-1; padding-bottom:.6rem} }
.band-accent .check{background:#fff; box-shadow:0 6px 14px -6px rgba(80,20,0,.5)}
.band-accent .check path{stroke:var(--red)}

@media(prefers-reduced-motion:reduce){
  .status-pill i{animation:none}
  .feature, .feature:hover{transition:none; transform:none}
}