/* Nexora website — aanvullingen op style.css (template v7).
 *
 * - Inter komt van de eigen server in plaats van Google Fonts: sneller (geen
 *   extra verbinding) en geen IP-adressen van bezoekers naar Google.
 * - Stijl voor wat de template niet had: taalknoppen als links, FAQ, tekst,
 *   kerncijfers, afbeelding, formulierstatus, toegankelijkheid.
 */

@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Afbeeldingen dragen width/height (tegen verspringen tijdens het laden, telt
 * mee in Core Web Vitals). Zonder height:auto rekt de hoogte-eigenschap het
 * beeld uit zodra de CSS alleen de breedte zet. */
img[width][height]{height:auto}

/* Toegankelijkheid */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;padding:10px 14px;border-radius:12px;background:var(--blue2);color:#fff;font-weight:700;font-size:14px;transition:top .15s}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid rgba(82,114,255,.55);outline-offset:3px;border-radius:10px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .orbit,.module-pill,.nora-core{animation:none !important}
  .btn:hover,.prompt:hover{transform:none}
}

/* Testomgeving */
.omgeving-balk{position:relative;z-index:101;padding:6px 14px;background:#0B1C33;color:#dbe7ff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* Kop */
.brand-tekst{font-weight:800;letter-spacing:.32em;font-size:18px}
.brand img{height:32px;width:auto}
.lang a{display:inline-block;padding:7px 10px;border-radius:999px;color:#6f7f96;font-size:11px;font-weight:800;line-height:1}
.lang a.active{background:var(--blue2);color:#fff}
.lang a:not(.active):hover{color:var(--blue2)}

/* Hero met één afbeelding */
.hero-beeld{position:relative}
.hero-beeld img{width:100%;height:auto;border-radius:28px}

/* Prijskaarten: knop onderaan */
.price-card{display:flex;flex-direction:column}
.price-card ul{flex:1}
.price-cta{margin-top:22px;align-self:flex-start}

/* Veelgestelde vragen */
.faq{padding:80px 0;border-top:1px solid var(--line)}
.faq-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-kop h2{margin:0 0 14px;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.05em;font-weight:650}
.faq-kop p{margin:0;color:#71839a;font-size:16px;line-height:1.75}
.faq-lijst{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:18px;background:#fff;transition:.18s}
.faq-item[open]{border-color:#d6e3fa;box-shadow:var(--shadow-soft)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blue2);font-weight:800;font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em;color:#17243a}
.faq-antwoord{padding:0 20px 18px;color:#5f7089;font-size:15px;line-height:1.75}
.faq-antwoord p{margin:0 0 10px}

/* Vrije tekst */
.prose-section{padding:64px 0}
.prose{max-width:780px;color:#4b5d76;font-size:17px;line-height:1.8}
.prose h2{margin:0 0 18px;color:var(--ink);font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.045em;font-weight:650}
.prose h3{margin:28px 0 10px;color:var(--ink);font-size:22px;letter-spacing:-.02em}
.prose a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose .blue{color:var(--blue)}

/* Kerncijfers */
.facts{padding:70px 0;border-top:1px solid var(--line)}
.facts-kop{margin:0 0 28px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.045em;font-weight:650}
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0}
.fact{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.fact dt{color:#71829a;font-size:13px;font-weight:700;margin-bottom:10px}
.fact dd{margin:0}
.fact strong{display:block;font-size:40px;letter-spacing:-.05em;font-weight:720;color:var(--ink)}
.fact small{display:block;margin-top:6px;color:#8a99ae;font-size:12px;line-height:1.5}

/* Afbeelding */
.image-section{padding:40px 0 70px}
.image-figure{margin:0}
.image-figure img{width:100%;height:auto;border-radius:28px;border:1px solid #dfe8f6}
.image-figure figcaption{margin-top:12px;color:#71839a;font-size:13px}

/* Voet (opbouw van v9) plus een regel met copyright en bedrijfsgegevens */
.footer-meta{margin-top:12px;color:#9aa7b8;font-size:11px}
.footer-meta a{color:inherit;text-decoration:underline}
.footer-brand img{height:27px;width:auto}

/* Nora-paneel */
.nora-noot{margin:0;color:#8a99ae;font-size:11px}
.overlay-brand img{width:48px;height:48px;object-fit:contain}

/* Demoformulier */
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-status{grid-column:1 / -1;margin:0;font-size:14px;font-weight:600;min-height:1px}
.contact-status.ok{color:#0FA878}
.contact-status.fout{color:#C2413B}
.contact-form.verstuurd .form-field,.contact-form.verstuurd .contact-actions{display:none}
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{border-color:#e7a4a0}

/* 404 */
.nf{padding-bottom:110px}
.nf h1{max-width:900px}
.nf-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

@media(max-width:860px){
  .faq-inner{grid-template-columns:1fr;gap:26px}
  .lang a{padding:7px 8px}
}

/* Voorbeeld in het CMS: geen vaste kop die over het venster schuift */
body[data-voorbeeld] .header{position:relative;top:0}

/* Kop: breder dan de inhoud (1420px), zodat negen menu-items met Investeerders plus de pillen
   Nora Live en Inloggen op één regel passen (de knop Plan een demo staat sinds 12-09-2026 niet
   meer in de kop). Krap: minder ruimte tussen de items; onder 1260px het uitklapmenu; onder 860px
   de portalen in dat uitklapmenu. Het logo krimpt nooit (gemeten 12-09-2026 op dertien breedtes).
   De regels hieronder zijn met .header-actions/.nav specifieker gemaakt: de basisregels van de
   pillen staan verderop in dit bestand en zouden ze anders overschrijven. */
.header .container{width:min(1420px,calc(100% - 42px))}
@media(min-width:861px){.header .brand{flex:0 0 auto}}
.header-actions{margin-left:auto}
.nav a,.header-actions .btn{white-space:nowrap}
@media(max-width:1480px){.nav a{padding-left:9px;padding-right:9px}}
@media(max-width:1420px){.nav a{padding-left:7px;padding-right:7px}}
@media(max-width:1260px){
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow-soft);flex-direction:column;align-items:stretch}
  .nav.open{display:flex}.nav a{text-align:left}.mobile-menu{display:inline-flex}.header-inner{position:relative}
  .header-actions .nora-nav-copy,.header-actions .inlog-tekst{display:grid}.header-actions .nora-nav-live{padding:5px 9px 5px 5px}.header-actions .inlog-knop{padding:5px 10px 5px 5px}
}
@media(max-width:860px){
  .header-actions .nora-nav-copy{display:none}.header-actions .nora-nav-live{padding:5px}.header-actions .inlog-keuze{display:none}
  .nav .nav-inloggen{display:grid;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
  .nav-inloggen>span{padding:6px 12px 2px;color:#5f7088;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .nav .nav-inloggen a{display:flex;justify-content:space-between}
}

/* Vaste ruimte voor de schuifbalk: een venster dat opent (investeerdersformulier, demo, Nora)
   zet de schuifbalk uit, en zonder deze regel schoof de hele pagina dan 17px opzij. Samen met
   100% in plaats van 100vw in teaser.css staat het Nora-beeld zo op elke pagina op dezelfde
   plek, ook met een gewone Windows-schuifbalk (gemeten 12-09-2026). */
html{scrollbar-gutter:stable}

/* Inloggen (Rogier 12-09-2026): dezelfde witte pil als Nora Live, rond icoon en twee regels,
   met een uitklapmenu naar de portalen. Op een smal scherm staan de portalen in het menu. */
.inlog-keuze{position:relative}
.inlog-knop{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid #dfe8f8;border-radius:999px;background:rgba(255,255,255,.95);cursor:pointer;box-shadow:0 6px 18px rgba(31,76,161,.045);transition:.18s ease;color:var(--ink);font:inherit}
.inlog-knop:hover,.inlog-knop[aria-expanded="true"]{transform:translateY(-1px);border-color:#cfddf7;box-shadow:0 10px 24px rgba(31,76,161,.07)}
.inlog-icoon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef3ff;color:var(--blue2);flex:0 0 auto}
.inlog-icoon svg{width:16px;height:16px}
.inlog-tekst{display:grid;text-align:left;line-height:1}
.inlog-tekst b{font-size:10px;letter-spacing:.12em}
.inlog-tekst small{margin-top:3px;color:#75869d;font-size:9px;white-space:nowrap}
.inlog-pijl{font-size:10px;color:#75869d;transition:transform .18s ease}
.inlog-knop[aria-expanded="true"] .inlog-pijl{transform:rotate(180deg)}
.inlog-lijst{position:absolute;right:0;top:calc(100% + 10px);z-index:130;min-width:230px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(20,54,120,.12)}
.inlog-lijst[hidden]{display:none!important}
.inlog-lijst a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:11px;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.inlog-lijst a:hover,.inlog-lijst a:focus-visible{background:#f2f6ff;color:var(--blue2)}
.inlog-lijst a span,.nav-inloggen a span{color:#75869d}
.nav-inloggen{display:none}