/* ================================================================
   0) TABLE OF CONTENTS
   ----------------------------------------------------------------
   1) Reset & Base
   2) CSS Variables
   3) Layering / Z‑index policy
   4) Topbar
   5) Navbar (custom + blobs + states)
      5.1) Hero navbar positioning (#heroNavbar)
      5.2) Scrolled navbar (.navbar-scrolled)
      5.3) Mobile header & collapse behavior
      5.4) Toggler icons (light/dark)
      5.5) Blob sizing on mobile
   6) Hero (section) & Feature mockup
      6.1) Social icons & Scroll-down button
   7) Services section
   8) Why choose section
   9) Key features (accent + buttons)
  10) Testimonials (Bootstrap carousel & Owl carousel)
  11) Projects (pills & buttons)
  12) CTA section (#cta)
  13) Subhero (gradient, breadcrumbs, blobs, wave)
  14) Footer tweaks
  15) Final CTA section (#final-cta)
  16) Domain search UI (domain-bar, domain-card, chips, feedback)
  17) Auth pages (layout, logo, form focus, password meter)
  18) Globals (buttons, focus states)
  19) Small utilities & spacing helpers
  20) LEGACY / DUPLICATES (bewust behouden)
   ================================================================ */

/* ================================================================
   1) Reset & Base
   ================================================================ */
body { margin: 0; padding: 0; font-family: 'Space Grotesk', sans-serif; }
body.auth-page { padding-top: 0 !important; }

/* ================================================================
   2) CSS Variables
   ================================================================ */
:root {
  --topbar-h: 36px;          /* hoogte topbar */
  --navbar-bg: #12B797;      /* primaire navbar achtergrond */
  --shape-left: url('../../assets/img/hero-shape-inetproductions.png');
  --shape-right: url('../../assets/img/hero-shape-right.png');
}

/* ================================================================
   3) Layering / Z-index policy (globaal)
   Topbar > Scrolled Navbar > Hero Navbar > Hero content > decorative blobs
   ================================================================ */
.topbar { z-index: 1300 !important; }
.navbar-scrolled { z-index: 1200 !important; }
#heroNavbar { z-index: 1100 !important; }
header.hero { position: relative; z-index: 0; }
header.hero::before, header.hero::after { z-index: -1 !important; pointer-events: none !important; }
#heroNavbar, .navbar-scrolled { pointer-events: auto; }
body { padding-top: 0 !important; } /* voorkom kunstmatige top-ruimte */

/* ================================================================
   4) Topbar
   ================================================================ */
.topbar {
  background: #FAD029;
  height: var(--topbar-h);
  line-height: var(--topbar-h);
  position: relative; /* laat z-index werken in normal flow */
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.topbar .topbar-link { color:#1a1a1a; font-weight:600; font-size:.875rem; text-decoration:none; }
.topbar .topbar-link:hover { text-decoration: underline; }

/* ================================================================
   5) Navbar (custom + blobs + states)
   ================================================================ */
.navbar-custom { overflow: visible; background-color: var(--navbar-bg); padding: 1rem 0; z-index: 10; box-shadow: none !important; }

/* 5.0) Links & CTA */
.navbar-custom .nav-link { color:#fff !important; font-size:17px; font-weight:700; white-space:nowrap; }
.navbar-custom .nav-link:hover { color:#e0e0e0 !important; }
.navbar-nav .nav-item { margin: 0 .5rem; }
.navbar-custom .btn-warning { color:#000; font-weight:600; padding:.75rem 1.75rem; font-size:15px; text-transform:uppercase; border-radius:.5rem; transition: background-color .2s, transform .2s, box-shadow .2s; }
.navbar-custom .btn-warning:hover { background-color:#e6b800; box-shadow:0 4px 8px rgba(0,0,0,.15); transform: translateY(-2px); }

/* 5.0) Side blobs (decoratief) */
.navbar-custom::before {
  content: ""; position:absolute; top:0; left:0; width:355px; height:245px;
  background-image: var(--shape-left); background-size:355px 245px; background-repeat:no-repeat; background-position:left top; z-index:-1;
}
.navbar-custom::after {
  content: ""; position:absolute; top:0; right:0; width:435px; height:205px;
  background-image: var(--shape-right); background-size:435px 205px; background-repeat:no-repeat; background-position:right top; z-index:-1;
}

/* 5.1) Hero navbar positioning */
#heroNavbar { position:absolute; top: var(--topbar-h); left:0; right:0; }

/* 5.2) Scrolled navbar (sticky) */
.navbar-scrolled { position: fixed !important; top:-100px; left:0; right:0; margin:0 !important; padding-top:0 !important; transition: top .35s ease; }
.navbar-scrolled.show { top:0; }
.navbar-scrolled .nav-link { color:#333 !important; font-weight:700; }
.navbar-scrolled .btn-warning { color:#000; }

/* 5.3) Mobile header & collapse behavior */
@media (max-width: 991.98px) {
  #heroNavbar .container, .navbar-scrolled .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
  #heroNavbar .navbar-brand, .navbar-scrolled .navbar-brand, #heroNavbar .btn.btn-warning, .navbar-scrolled .btn.btn-warning, #heroNavbar .navbar-toggler, .navbar-scrolled .navbar-toggler { flex:0 0 auto; }
  #heroNavbar .navbar-brand, .navbar-scrolled .navbar-brand { order:1; }
  #heroNavbar .btn.btn-warning, .navbar-scrolled .btn.btn-warning { order:2; margin-left:auto; padding:.55rem 1.1rem; border-radius:.5rem; }
  #heroNavbar .navbar-toggler, .navbar-scrolled .navbar-toggler { order:3; margin-left:.5rem; }

  /* Menu ALTIJD onder de complete navbar (ook tijdens collapsing) */
  #heroNavbar .collapse.navbar-collapse, #heroNavbar .collapsing { position:absolute; top:100%; left:0; right:0; width:100%; background-color: var(--navbar-bg); padding:1rem; z-index:9; box-shadow:0 8px 18px rgba(0,0,0,.12); }
  #heroNavbar .collapse .nav-link, #heroNavbar .collapsing .nav-link { color:#fff !important; }

  .navbar-scrolled .collapse.navbar-collapse, .navbar-scrolled .collapsing { position:absolute; top:100%; left:0; right:0; width:100%; background-color:#fff; padding:1rem; z-index:9; box-shadow:0 8px 18px rgba(0,0,0,.06); }
  .navbar-scrolled .collapse .nav-link, .navbar-scrolled .collapsing .nav-link { color:#333 !important; }
}

/* 5.4) Toggler icons */
#heroNavbar .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.navbar-scrolled .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* 5.5) Blob sizing on mobile */
@media (max-width: 991.98px) {
  #heroNavbar::before { width:260px; height:150px; background-size:220px 150px; top:0; left:0; opacity:.35; }
  #heroNavbar::after  { width:260px; height:130px; background-size:260px 130px; top:0; right:0; opacity:.35; }
}

/* ================================================================
   6) Hero (section) & Feature mockup
   ================================================================ */
.hero { background-color:#12B797; position:relative; min-height:60vh; padding:4rem 0; overflow:hidden; z-index:1; }
.hero, .hero h1, .hero p { color:#fff !important; text-align:center; }

/* extra top padding zodat topbar+navbar nooit overlappen met hero content */
header.hero { padding-top: calc(6rem + 40px); }

/* feature-mockup: enter animation + accent circle */
.feature-mockup { position:relative; display:inline-block; opacity:0; transform: translateY(60px) scale(0.97); transition: opacity .85s ease-out, transform .85s cubic-bezier(.22,1,.36,1); will-change: transform, opacity; }
.feature-mockup.reveal { opacity:1; transform: translateY(0) scale(1); }
.feature-mockup::before { content:""; position:absolute; top:50%; left:50%; width:300px; height:300px; background-color: rgba(18,183,151,.2); border-radius:50%; transform: translate(-50%, -50%); z-index:-1; }
@media (max-width: 992px) { .feature-mockup::before { width:200px; height:200px; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .feature-mockup { transition:none; transform:none; opacity:1; } }

/* 6.1) Social icons & Scroll-down */
.social-icons { position:absolute; left:0; top:50%; transform: translateY(-50%); }
.social-icons li + li { margin-top:1rem; }
.social-icons a { display:block; width:2.5rem; height:2.5rem; line-height:2.5rem; border:2px solid #fff; border-radius:50%; color:#fff; text-align:center; transition: background-color .2s; }
.social-icons a:hover { background-color: rgba(255,255,255,.2); }

.scroll-down { position:absolute; right:2rem; bottom:2rem; width:3rem; height:3rem; border:2px solid rgba(255,255,255,.6); border-radius:50%; color:#fff; font-size:1.5rem; background-color: rgba(255,255,255,.1); transition: background-color .2s, transform .2s; text-decoration:none; z-index:5; }
.scroll-down:hover { background-color: rgba(255,255,255,.3); transform: translateY(4px); }
@media (max-width: 575.98px) { .scroll-down { right:1rem; bottom:1rem; } }

/* Helpers inside hero */
.hero-mockup { max-width: 960px; }
.hero .lead { max-width: 60ch; margin-inline:auto; }

/* ================================================================
   7) Services section
   ================================================================ */
#services { background-color:#F3F3F3; }
.service-card { opacity:0; transform: translateY(30px) scale(.95); transition: opacity .6s ease-out var(--delay,0ms), transform .6s cubic-bezier(.23,1,.32,1) var(--delay,0ms), background-color .45s ease; }
.service-card.in-view { opacity:1; transform: translateY(0) scale(1); }
.service-card:hover { background-color:#12B797; }
.service-card .card-title, .service-card .card-text, .service-card .read-more, .service-card .service-icon { transition: color .45s ease; }
.service-icon { font-size:3rem; color:#12B797; transition: color .45s ease; }
.service-card:hover .service-icon, .service-card:hover .card-title, .service-card:hover .card-text, .service-card:hover .read-more { color:#fff !important; }
.read-more { position:relative; color:inherit; text-decoration:none; padding-bottom:4px; }
.read-more::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:#FAD029; }

/* ================================================================
   8) Why choose section
   ================================================================ */
#why-choose { background-color:#F3F3F3; }
#why-choose.bg-white { background-color:#fff !important; }
#why-choose h2 { color:#000; }
.section-line-left { display:block; margin:0 0 .5rem; width:80px; height:auto; }
.image-wrapper { position:relative; display:inline-block; }
.why-image { position:relative; z-index:1; }
.bg-block { position:absolute; top:20px; left:20px; width:100%; height:100%; background-color:#E6B800; border-radius:.5rem; z-index:0; }
#why-choose .image-wrapper { overflow:visible !important; }
#why-choose .bg-block { position:absolute; top:20px; left:20px; width:100%; height:100%; background-color:#E6B800; border-radius:.5rem; z-index:0; }
@media (max-width: 767.98px) { #why-choose .bg-block { top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px); } }
#why .bullet-icon { color:#FFC107; font-size:1.2rem; }

/* ================================================================
   9) Key features (accent + buttons)
   ================================================================ */
@media (max-width: 991.98px) { #key-features .col-lg-6:not(.text-center) { margin-bottom:2rem; } }
#key-features .btn-outline-primary { color:#2AA38C !important; border-color:#2AA38C !important; }
#key-features .btn-outline-primary:hover, #key-features .btn-outline-primary:focus { background-color:#2AA38C !important; color:#fff !important; }

/* ================================================================
  10) Testimonials
   ================================================================ */
#testimonials .card { background-color:#2C3E3A; border-radius:.6rem; }
#testimonialCarousel { overflow:visible !important; }
#testimonialCarousel .carousel-indicators { position:static !important; margin-top:2rem; display:flex !important; justify-content:center !important; gap:.5rem; }
#testimonialCarousel .carousel-indicators .active { background-color:#E6B800; }
#testimonials .text-muted { color: rgba(255,255,255,.8) !important; }
#testimonials .quote-icon { position:static !important; display:block; font-size:2.5rem; margin-bottom:.75rem; color:#E6B800; }
@media (min-width:768px) { #testimonials .carousel-item .col-md-4 { display:block; } }

/* Owl carousel equal-height + dots */
#testimonials .owl-carousel .owl-stage { display:flex; }
#testimonials .owl-carousel .owl-item { display:flex; }
#testimonials .owl-carousel .item { display:flex; width:100%; padding:.5rem; }
#testimonials .card-body { flex:1 1 auto; }
#testimonials .owl-dots { display:flex !important; justify-content:center; gap:.5rem; margin-top:1.25rem; }
#testimonials .owl-dot span { width:10px; height:10px; background: rgba(255,255,255,.35); display:block; border-radius:999px; transition: background-color .2s ease; }
#testimonials .owl-dot.active span, #testimonials .owl-dot:hover span { background:#E6B800; }
#testimonials #testimonialOwl {max-width: 1440px;margin-inline: auto;padding-left: 1rem;padding-right: 1rem;
}

/* ================================================================
  11) Projects (pills & buttons)
   ================================================================ */
#våre-prosjekter .nav-pills .nav-link { background-color:transparent !important; color:inherit !important; }
#våre-prosjekter .nav-pills .nav-link:not(.active) { background-color:#F7F7F7 !important; color:#333 !important; }
#våre-prosjekter .nav-pills .nav-link.active { background-color:#12B797 !important; color:#fff !important; }
#våre-prosjekter .nav-pills .nav-link small { color:#E6B800 !important; }
#våre-prosjekter .btn-outline-success:hover, #våre-prosjekter .btn-outline-success:focus { background-color:#12B797 !important; color:#fff !important; border-color:#12B797 !important; }

/* ================================================================
  12) CTA section (#cta)
   ================================================================ */
#cta { background-color:#2AA38C; }
#cta .btn-cta { background-color:#FFCA2C; color:#000; padding:.75rem 2rem; font-weight:600; border:2px solid #FFCA2C; border-radius:.5rem; transition: background-color .2s, transform .2s; }
#cta .btn-cta:hover, #cta .btn-cta:focus { background-color:#e6b800; border-color:#e6b800; transform: translateY(-2px); color:#000; }

/* ================================================================
  13) Subhero (gradient, breadcrumbs, blobs, wave)
   ================================================================ */
.subhero { background: linear-gradient(135deg, #12B797 0%, #0f9981 60%, #12B797 100%); overflow:hidden; }
.subhero .container { padding-bottom:4rem; }
@media (min-width: 992px) { .subhero .container { padding-bottom:8rem; } }

/* Breadcrumbs */
.subhero-breadcrumb { justify-content:center; position:relative; z-index:5; }
.subhero-breadcrumb .breadcrumb { background:transparent; padding:0; margin:0 auto; }
.subhero-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.65); }
.subhero-breadcrumb a { text-decoration:none; }
.subhero-breadcrumb a:hover { color:#fff !important; }

/* Decorative blobs */
.subhero-blob { position:absolute; inset:auto; filter:blur(40px); opacity:.18; pointer-events:none; background: radial-gradient(closest-side, #E6B800, transparent 70%); transform: translateZ(0); }
.subhero-blob--left { width:280px; height:280px; left:-80px; top:-40px; }
.subhero-blob--right { width:360px; height:360px; right:-120px; top:20px; }

/* Wave clip bottom */
.subhero-wave { position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.subhero-wave svg { display:block; width:100%; height:64px; }
.subhero-wave path { fill:#fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .subhero-blob { transition:none; } }

/* Mobile fine-tuning */
@media (max-width:575.98px) { .subhero-blob--left { width:200px; height:200px; left:-60px; top:-30px; } }
@media (max-width:575.98px) { .subhero-blob--right { width:240px; height:240px; right:-80px; top:10px; } }
@media (max-width:575.98px) { .subhero-wave svg { height:48px; } }

/* ================================================================
  14) Footer tweaks
   ================================================================ */
.site-footer .social-btn { background: rgba(255,255,255,.1); border:none; color:#fff; }
.site-footer .social-btn i { line-height:1; }
@media (max-width: 767.98px) { .site-footer .row.align-items-center.g-3 { row-gap:.75rem; } }
.footer-bottom .small { text-align:left; }
@media (min-width: 768px) { .footer-bottom .small { text-align:unset; } }

/* ================================================================
  15) Final CTA section (#final-cta)
   ================================================================ */
#final-cta { background-color:#2AA38C; }
#final-cta .text-white-75 { color: rgba(255,255,255,.85); }
#final-cta h2 { margin-bottom:1rem; }
#final-cta p { margin-bottom:2rem; font-size:1.1rem; }
#final-cta .btn.btn-warning { font-weight:600; border-radius:.5rem; padding:.75rem 2rem; transition: transform .2s ease, box-shadow .25s ease; }
#final-cta .btn.btn-warning:hover, #final-cta .btn.btn-warning:focus-visible { box-shadow: 0 .5rem 1.25rem rgba(255,193,7,.55); transform: translateY(-2px); }

/* ================================================================
  16) Domain search UI (bar, card, chips, feedback)
   ================================================================ */
.domain-bar { max-width:720px; }
.domain-bar .form-control { border:0; }
.domain-bar .form-control:focus { box-shadow:none; }
.domain-bar .input-group-lg .form-control { padding-top:.9rem; padding-bottom:.9rem; }
.domain-bar .btn.btn-warning { font-weight:700; }
#domain-result b { font-weight:700; }

/* Domain card */
.domain-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1.25rem; }
.domain-card .form-control { padding-top:.9rem; padding-bottom:.9rem; border:1px solid rgba(0,0,0,.12); }
.domain-card .form-control:focus { box-shadow: 0 0 0 .25rem rgba(18,183,151,.15); border-color:#12B797; }
.domain-card .btn-warning { color:#1b1b1b; font-weight:700; }

/* Chips */
.tld-chips .chip { background: rgba(18,183,151,.08); color:#0f3b35; border:1px solid rgba(18,183,151,.18); border-radius:999px; padding:.35rem .6rem; font-weight:700; }
.tld-chips .chip .price { font-weight:600; opacity:.8; margin-left:.25rem; }

/* Feedback colors */
#domain-result { font-weight:600; }
#domain-result.is-available { color:#0a7a62; }
#domain-result.is-taken { color:#b02a37; }

/* ================================================================
  17) Auth pages
   ================================================================ */
.auth-logo { position:absolute; top:1rem; left:1rem; z-index:50; }
.auth-logo img { height:40px; width:auto; }
.auth-wrap { background-color:#12B797; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; }

/* Password meter */
.pw-meter { height:8px; border-radius:999px; background:#e9ecef; overflow:hidden; }
.pw-meter > .fill { height:100%; width:0%; background:#dc3545; transition: width .2s ease, background-color .2s ease; }
.pw-meter-label { font-size:.85rem; min-height:1.2rem; }
.pw-criteria { list-style:none; padding-left:0; margin:.5rem 0 0; }
.pw-criteria li { font-size:.85rem; color:#6c757d; display:flex; align-items:center; gap:.4rem; }
.pw-criteria li.ok { color:#198754; }
.pw-criteria li .dot { width:.5rem; height:.5rem; border-radius:50%; background: currentColor; display:inline-block; }

/* Divider in auth cards */
.auth-card-divider { position:relative; margin:1.25rem 0; }
.auth-card-divider hr { margin:0; }
.auth-card-divider span { font-size:.8rem; color:#6c757d; }
.auth-card-divider .label { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); padding:0 .5rem; background:#fff; color:#6c757d; font-size:.85rem; }

/* ================================================================
  18) Globals (buttons, focus states, forms)
   ================================================================ */
.btn-warning { background-color:#FFC107 !important; border-color:#FFC107 !important; color:#212529 !important; }
.btn-warning:hover { background-color:#e0a800 !important; border-color:#d39e00 !important; }

.form-control:focus { border-color:#FFC107 !important; box-shadow: 0 0 0 .2rem rgba(255,193,7,.25) !important; }

/* Focus states (toegankelijkheid) */
a.btn:focus-visible, .navbar .nav-link:focus-visible, .scroll-down:focus-visible { outline:3px solid rgba(255,255,255,.65); outline-offset:2px; }
.navbar-scrolled .nav-link:focus-visible { outline-color: rgba(13,110,253,.55); }

/* Hover/focus helpers for hero buttons */
.hero .btn.btn-warning:hover, .hero .btn.btn-warning:focus-visible { box-shadow:0 0.5rem 1.25rem rgba(255,193,7,.55); transform: translateY(-2px); transition: all .25s ease-in-out; }
.hero .btn.btn-dark:hover, .hero .btn.btn-dark:focus-visible { box-shadow:0 0.5rem 1.25rem rgba(33,37,41,.55); transform: translateY(-2px); transition: all .25s ease-in-out; }

/* ================================================================
  19) Small utilities & spacing helpers
   ================================================================ */
.domain-bar .btn.btn-warning { font-weight:700; } /* ensure weight */
.hero .row.mt-2.mb-4 { margin-bottom: 1rem !important; }
.divider-label { display:flex; align-items:center; justify-content:center; gap:1rem; color:rgba(255,255,255,.9); font-weight:700; margin-top:2rem; margin-bottom:1rem; }
.divider-label::before, .divider-label::after { content:""; flex:1 1 80px; height:1px; background:rgba(255,255,255,.35); }
.divider-label span { white-space:nowrap; }

/* ================================================================
  20) LEGACY / DUPLICATES (bewust behouden, no-op/consistent)
   ----------------------------------------------------------------
   De volgende blokken stonden meervoudig in het origineel.
   Ze zijn functioneel identiek aan de geconsolideerde varianten
   hierboven. We behouden ze om zeker te zijn dat niets breekt.
   ================================================================ */

/* Duplicates of :root --topbar-h & topbar/link styles (kept) */
:root { --topbar-h: 36px; }
#heroNavbar { top: var(--topbar-h); }
.topbar { background-color:#FAD029; height:var(--topbar-h); line-height:var(--topbar-h); box-shadow:0 1px 0 rgba(0,0,0,.06); }
.topbar .topbar-link { color:#1a1a1a; font-weight:600; font-size:.875rem; text-decoration:none; }
.topbar .topbar-link:hover { text-decoration: underline; }

/* Explicit high z-index topbar (already enforced in section 3) */
.topbar { position:relative; z-index:9999; }

/* Redundant hero layering hints (already set) */
header.hero { position:relative; z-index:0; }
header.hero::before, header.hero::after { z-index:-1; }

/* Re-declare heroNavbar absolute stack (already set) */
#heroNavbar { position:absolute; top: var(--topbar-h) !important; left:0; right:0; z-index:500; }

/* Re-declare scrolled navbar stickiness (already set) */
.navbar-scrolled { position: fixed !important; top:-100px; left:0; right:0; z-index:800; margin:0 !important; padding-top:0 !important; transition: top .35s ease; }
.navbar-scrolled.show { top:0; }

/* Keep pointer-events safety notes */
#heroNavbar, .navbar-scrolled { pointer-events:auto; }

/* Voeg ruimte toe boven sub-hero, zodat het niet onder de navbar valt */
#sub-hero {
  padding-top: 7rem;   /* ruimte onder navbar */
  padding-bottom: 5rem; /* extra lucht onder de tekst */
}

#sub-hero .domain-card {
  max-width: 1140px;   /* gelijk aan homepage */
  margin-left: auto;
  margin-right: auto;
}

/* iets ruimer op grote schermen */
@media (min-width: 992px) {
  #sub-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Compacte sub-hero (alleen waar .subhero--compact op staat) */
#sub-hero.subhero--compact .container {
  /* vang oude globale pb-overschrijvingen af */
  padding-bottom: 1.25rem;
}

@media (min-width: 992px) {
  #sub-hero.subhero--compact .container {
    padding-bottom: 1.75rem;
  }
}

/* Minder lucht onder de domein-card zelf */
#sub-hero.subhero--compact .domain-card {
  margin-bottom: .5rem; /* of 0 als je het nóg strakker wil */
}

/* optioneel: chips wat minder extra marge geven */
#sub-hero.subhero--compact .tld-chips {
  margin-top: .75rem;   /* was mt-3 vanuit markup (~1rem is vaak genoeg) */
}

/* Uitlegkaarten zonder shadow/border-heavy */
.card-explain{
  background:#fff;
  border:0;
  box-shadow:none;
}

/* Mini pricing cards */
.plan-mini{
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-mini:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.09);
  border-color:rgba(18,183,151,.28);
}
.plan-mini--accent{
  border-color:rgba(230,184,0,.35);
  box-shadow:0 4px 14px rgba(230,184,0,.08);
}

.plan-mini__features li{
  display:flex; align-items:flex-start; gap:.5rem;
  margin:.45rem 0; color:#4b5563;
}
.plan-mini__features i{ color:#E6B800; line-height:1.35; }

/* badges in jullie kleuren */
.bg-success-subtle{ background:rgba(18,183,151,.12)!important; }
.text-success-emphasis{ color:#0f5f4f!important; }
.border-success-subtle{ border-color:rgba(18,183,151,.28)!important; }

/* --- Pricing cards: equal height + hover lift (zelfde feel als hosting) --- */
.pricing-card {
  border: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform, box-shadow;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.pricing-card .card-body {
  display: flex;
  flex-direction: column;   /* maakt uitlijnen onderaan makkelijk */
  padding: 1.5rem;
}

.pricing-card .price {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}

.pricing-card .features {
  margin: .75rem 0 1rem;
  padding-left: 0;
  list-style: none;
}
.pricing-card .features li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .35rem;
}
.pricing-card .features li i {
  color: #12B797;           /* jouw groen */
  margin-top: .15rem;
}

.pricing-card .card-cta {
  margin-top: auto;         /* DIT lijnt knoppen op gelijke hoogte uit */
  display: flex;
  gap: .5rem;
}

/* labels (Populær / Anbefalt) */
.plan-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: #111;
  background: #FFE48A;      /* geel tint die past bij btn-warning */
  border-radius: 999px;
  padding: .3rem .6rem;
}

/* “Included” blurbs */
.included-wrap .blurb {
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.included-wrap .blurb:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.included-wrap .blurb i {
  font-size: 1.75rem;
  color: #12B797;           
}
.included-wrap h5 {
  font-weight: 700;
  margin: .6rem 0 .25rem;
}
.included-wrap p {
  color: #6c757d;
  margin: 0;
}

/* Zorg dat alle kaarten in een rij even hoog worden */
.row-eq .col > .card {
  height: 100%;
}

/* Maak de "Alle extensies bekijken"-knop zichtbaar en in de hover-stijl als default */
#domain-result .btn.btn-outline-light {
    background-color: #ffffff;      /* standaard wit */
    color: #000000;                 /* zwarte tekst */
    border-color: #dee2e6;          /* subtiele rand */
    transition: all 0.15s ease-in-out;
}

/* Klein hover-effect, iets donkerder rand / achtergrond */
#domain-result .btn.btn-outline-light:hover {
    background-color: #f8f9fa;
    color: #000000;
    border-color: #ced4da;
}

.page-no-hero .navbar-scrolled-static {
  position: static;          /* niet fixed, gewoon in de normale flow */
  top: auto;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* ===== NAVIGATION FONT STYLING ===== */

/* Algemene nav-links (inner pages + scrolled navbar + hero menu) */
.navbar .nav-link {
    font-weight: 700 !important;
    color: #333 !important;
}

/* Hover + active state */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: #000 !important; /* iets donkerder voor interactie */
}

/* Hero navbar (witte tekst op groene header) — NIET dit standaard donker maken */
.page-has-hero #heroNavbar .nav-link {
    color: #fff !important;
    font-weight: 700 !important;
}

.page-has-hero #heroNavbar .nav-link:hover {
    color: #f5f5f5 !important;
}