/* =========================================================
   Noventra — shared building blocks for light pages.
   Use with <body class="… theme-light"> (nav + footer colours live in style.css)
   and wrap the content in <main class="light-main">.
   ========================================================= */

.light-main{--gutter:clamp(1.2rem,5vw,2.6rem); --max:1180px}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.light-main a{color:var(--red)}

.eyebrow{display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem;
         font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red)}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red)}

/* ---- hero ---- */
.page-hero{padding:calc(var(--nav-h) + clamp(2.6rem,7vw,5.2rem)) 0 clamp(2rem,4vw,3rem)}
.page-hero .breadcrumb{margin:0 0 clamp(1.6rem,3vw,2.4rem); font-size:.78rem; color:var(--muted)}
.page-hero .breadcrumb a{color:var(--muted); text-decoration:none}
.page-hero .breadcrumb a:hover{color:var(--ink)}
.page-hero-grid{display:grid; gap:1.4rem 4rem; align-items:end}
.page-hero h1{margin:0; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.035em;
              font-weight:800; color:var(--ink)}
.page-hero h1 em{font-style:normal; color:var(--red)}
.page-lead{margin:0; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.7; color:var(--text)}
@media(min-width:960px){ .page-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }

/* ---- sections ---- */
.page-section{padding:clamp(4rem,9vw,7rem) 0 0}
.section-head{display:grid; gap:.4rem 4rem; margin-bottom:clamp(2rem,4vw,3rem); align-items:end}
.section-head h2{margin:0; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.08;
                 letter-spacing:-.03em; font-weight:800; color:var(--ink); max-width:20ch}
.section-head p{margin:0; color:var(--text); line-height:1.7; max-width:46ch}
@media(min-width:960px){ .section-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }

/* ---- closing call to action: light card, the contact person beside it ---- */
.cta-card{margin:clamp(4rem,9vw,7rem) 0 clamp(4rem,8vw,6rem); padding:clamp(2rem,5vw,3.6rem);
          border-radius:clamp(18px,2vw,28px); position:relative; overflow:hidden;
          display:grid; gap:2rem 3rem; align-items:center;
          background:
            radial-gradient(ellipse 60% 90% at 100% 0%, rgba(243,56,1,.12), transparent 70%),
            radial-gradient(ellipse 40% 70% at 0% 100%, rgba(255,146,87,.10), transparent 70%),
            var(--surface);
          border:1px solid var(--line); box-shadow:0 40px 80px -56px rgba(13,14,17,.45)}
.cta-card-text, .person-card{position:relative; z-index:1}
.cta-card .eyebrow{margin-bottom:.8rem}
.cta-card h2{margin:0 0 .6rem; font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.03em; line-height:1.08; color:var(--ink)}
.cta-card-text > p:last-child{margin:0; color:var(--text); line-height:1.65; max-width:46ch}
@media(min-width:960px){ .cta-card{grid-template-columns:minmax(0,1fr) minmax(320px,380px)} }

/* business card of the contact person: photo, role, direct lines and the button */
.person-card{width:100%; max-width:380px; padding:1.4rem; border-radius:20px; background:var(--paper);
             border:1px solid var(--line)}
.person-card-head{display:flex; align-items:center; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line)}
.person-card-head img{width:68px; height:68px; border-radius:50%; object-fit:cover; flex:none;
                      border:3px solid #fff; box-shadow:0 0 0 1px var(--line), 0 10px 22px -12px rgba(13,14,17,.55)}
.person-card-head p{margin:0; font-size:.88rem; line-height:1.4; color:var(--muted)}
.person-card-head strong{display:block; margin-bottom:.1rem; font-size:1.08rem; letter-spacing:-.01em; color:var(--ink)}
.person-card-lines{list-style:none; margin:1rem 0 1.2rem; padding:0; display:grid; gap:.55rem}
.person-card-lines li{display:flex; align-items:center; gap:.7rem; font-size:.93rem}
.person-card-lines svg{width:30px; height:30px; padding:7px; flex:none; border-radius:50%; background:rgba(243,56,1,.1);
                       fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.light-main .person-card-lines a{color:var(--ink); text-decoration:none; font-weight:600}
.light-main .person-card-lines a:hover{color:var(--red)}
.person-card .btn-large{display:flex; justify-content:center; width:100%; margin-top:0; color:#fff}

/* ---- gentle entrance ---- */
.js [data-reveal]{opacity:0; transform:translateY(24px)}
.js [data-reveal].visible{opacity:1; transform:none;
   transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){ .js [data-reveal]{opacity:1; transform:none} }

/* ---- full-width bands: alternate backgrounds give long pages rhythm ---- */
.band{padding:clamp(4.5rem,10vw,8rem) 0}
.band-white{background:var(--surface); border-block:1px solid var(--line)}
.band-warm{background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(243,56,1,.10), transparent 70%),
    linear-gradient(180deg, #f8ede4, #f4e5da)}
/* the one block that may shout: brand orange, white type */
.band-accent{position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(ellipse 55% 80% at 100% 0%, rgba(255,170,120,.45), transparent 65%),
      linear-gradient(135deg, #ff5a1f 0%, #e63500 55%, #c92c00 100%)}
.band-accent::before{content:""; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.2px); background-size:22px 22px;
    -webkit-mask-image:linear-gradient(180deg, #000, transparent 80%); mask-image:linear-gradient(180deg, #000, transparent 80%)}
.band-accent .container{position:relative}
.band-accent .eyebrow{color:#fff}
.band-accent .eyebrow::before{background:#fff}
.band-accent .section-head h2{color:#fff}
.band-accent .section-head p{color:rgba(255,255,255,.85)}
/* the CTA card closes the page in its own band */
.band .cta-card{margin:0}

/* numbered eyebrow: <p class="eyebrow"><b>01</b> De norm</p> */
.eyebrow b{font-weight:800; color:var(--ink)}
.band-accent .eyebrow b{color:#fff}

/* ---- links to single FAQ questions (contact, AI) ---- */
.faq-links{list-style:none; margin:0; padding:0; display:grid; gap:.8rem}
@media(min-width:760px){ .faq-links{grid-template-columns:1fr 1fr} }
.light-main .faq-links a{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:100%;
                         padding:1.2rem 1.4rem; border-radius:18px; background:var(--surface); border:1px solid var(--line);
                         color:var(--ink); font-weight:600; text-decoration:none;
                         transition:border-color .2s, transform .2s, box-shadow .2s}
.light-main .faq-links a::after{content:"→"; flex:none; display:grid; place-items:center; width:32px; height:32px;
                                border-radius:50%; background:rgba(243,56,1,.1); color:var(--red); transition:transform .2s}
.light-main .faq-links a:hover{border-color:rgba(243,56,1,.35); transform:translateY(-2px); box-shadow:0 20px 40px -30px rgba(13,14,17,.5)}
.light-main .faq-links a:hover::after{transform:translateX(3px)}
.faq-all{margin:1.6rem 0 0; font-weight:600}
@media(prefers-reduced-motion:reduce){
  .light-main .faq-links a, .light-main .faq-links a:hover{transition:none; transform:none}
}