/*
Theme Name: Kaamos
Theme URI: https://kaamos.nl
Author: Kaamos
Author URI: https://kaamos.nl
Description: Pixel-perfect theme build from provided index.html (ACF-ready).
Version: 1.0.0
Text Domain: kaamos
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Noto+Sans:wght@400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:   #1E2340;
  --ink2:  #141729;
  --frost: #F4F4F8;
  --mist:  #D6E5ED;
  --twlt:  #C9A0B4;
  --twlt2: #EDD5E4;
  --body:  #2a2c3e;
  --sub:   #4a4d66;
  --line:  #e8e8f0;
  --white: #ffffff;
  --fh: 'Montserrat', sans-serif;
  --fb: 'Noto Sans', sans-serif;
  --max: 1000px;
  --gutter: clamp(20px, 5vw, 64px);
  color-scheme: dark;
}

html{ scroll-behavior: smooth; color-scheme: dark only; }
body{
  font-family: var(--fb);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--gutter);
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
nav.dark{
  background: rgba(20,23,41,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.06);
}
.nav-logo svg{ height: 22px; width: auto; display: block }
.nav-r{ display: flex; align-items: center; gap: 28px }
.nav-links{ display: flex; gap: 24px; list-style: none }
.nav-links a{
  color: rgba(255,255,255,.7); font-size: 14px; font-weight: 400;
  letter-spacing: .03em; text-decoration: none; transition: color .2s;
}
.nav-links a:hover{ color: #fff }
.nav-cta, #gform_submit_button_1{
  font-family: var(--fb); font-size: 13px; font-weight: 500;
  color: var(--white); background: var(--twlt);
  padding: 8px 18px; border-radius: 5px; text-decoration: none;
  letter-spacing: .03em; transition: background .2s;
}
.nav-cta:hover, #gform_submit_button_1:hover{ background: #b8899f }

/* nav-back (app template) */
.nav-back{
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,.6);
  text-decoration: none; letter-spacing: .03em; transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.nav-back::before{
  content: '←';
}
.nav-back:hover{ color: #fff }

/* Mobile burger */
.nav-burger{
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px; cursor: pointer;
  background: none; border: none; padding: 4px; flex-shrink: 0;
}
.nav-burger span{
  display: block; height: 1.5px; background: rgba(255,255,255,.85);
  border-radius: 2px; transition: transform .25s, opacity .25s;
}
.nav-burger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg) }
.nav-burger.open span:nth-child(2){ opacity: 0 }
.nav-burger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg) }

/* Mobile drawer */
.nav-mobile{
  display: none;
  position: fixed; top: 64px; left: 0; right: 0; z-index: 199;
  background: rgba(20,23,41,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 20px var(--gutter) 28px;
  flex-direction: column; gap: 0;
  transform: translateY(-8px); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}
.nav-mobile.open{
  transform: none; opacity: 1; pointer-events: all;
}
.nav-mobile a{
  display: block; padding: 14px 0;
  color: rgba(255,255,255,.75); font-size: 16px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06); transition: color .2s;
}
.nav-mobile a:last-child{ border-bottom: none }
.nav-mobile a:hover{ color: #fff }
.nav-mobile .nav-cta-mobile{
  display: inline-block; margin-top: 16px;
  padding: 11px 22px; background: var(--twlt); color: #fff;
  border-radius: 5px; font-size: 13px; font-weight: 500;
  letter-spacing: .03em; text-decoration: none; border-bottom: none;
  transition: background .2s;
}
.nav-mobile .nav-cta-mobile:hover{ background: #b8899f }

/* ── HERO ── */
.hero{
  position: relative; height: 100svh; min-height: 580px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center 22%;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform: scale(1.03) } to{ transform: scale(1.08) } }
.hero-ov{
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20,23,41,.0) 0%,
    rgba(20,23,41,.0) 35%,
    rgba(20,23,41,.55) 68%,
    rgba(20,23,41,.96) 100%
  );
}
.hero-c{
  position: relative; z-index: 2; width: 100%;
  max-width: calc(var(--max) + var(--gutter)*2);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(52px, 8vh, 88px);
}

.hero-h1{
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(36px, 6vw, 76px);
  line-height: .95; letter-spacing: -.02em;
  color: #fff; margin-bottom: 24px;
  
  animation: up .8s .18s both;
  max-width: 700px;
}

.hero-p{
  font-size: 15px; font-weight: 400; color: rgba(255,255,255,.65);
  line-height: 1.75; max-width: 420px; margin-bottom: 36px;
  animation: up .8s .28s both;
}
.hero-btns{ display: flex; gap: 10px; flex-wrap: wrap; animation: up .8s .38s both }

@keyframes up{
  from{ opacity: 0; transform: translateY(16px) }
  to{ opacity: 1; transform: none }
}

/* ── BUTTONS ── */
.btn{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fb); font-size: 13px; font-weight: 500;
  padding: 11px 22px; border-radius: 5px; text-decoration: none;
  letter-spacing: .04em; transition: all .18s; border: none; cursor: pointer;
}
.btn svg{ width: 14px; height: 14px; flex-shrink: 0 }
.btn-ink{ background: var(--ink); color: #fff }
.btn-ink:hover{ background: #2a3160 }
.btn-twlt{ background: var(--twlt); color: #fff }
.btn-twlt:hover{ background: #b8899f }
.btn-ghost{ background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22) }
.btn-ghost:hover{ background: rgba(255,255,255,.16) }
.btn-outline{ background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn-outline:hover{ border-color: var(--ink); background: var(--frost) }
.btn-link{ background: none; color: var(--twlt); padding: 11px 0; gap: 5px }
.btn-link:hover{ color: var(--ink); gap: 9px }

/* ── LAYOUT ── */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) }
section{ padding: clamp(72px, 10vw, 128px) var(--gutter) }
.sep{ height: 1px; background: var(--line); margin: 0 var(--gutter) }
.sep.dark{ background: rgba(255,255,255,.07) }

/* ── TYPE ── */


h2{
  font-family: var(--fh); font-weight: 900; 
  letter-spacing: -.02em; color: var(--ink);
  font-size: clamp(26px, 3.6vw, 46px); line-height: .95;
  margin-bottom: 20px;
}
h2.w{ color: #fff }
h2 em{ font-style: normal }
p.lead{
  font-size: 18px; font-weight: 400; color: var(--sub);
  line-height: 1.8; max-width: 520px;
}
p.lead.w{ color: rgba(255,255,255,.5) }

/* ── TRUST BAR ── */
.trust{
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px,4vw,60px); flex-wrap: wrap;
  padding: 28px var(--gutter);
}
.trust-item{
  font-size: 12px; font-weight: 500; color: var(--sub);
  display: flex; align-items: center; gap: 8px;
}
.trust-dot{
  width: 5px; height: 5px; border-radius: 50%; background: var(--twlt); flex-shrink: 0;
}

/* ── DIENSTEN ── */
.diensten{ background: var(--ink); position: relative; overflow: hidden }
.diensten::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 95% 5%, rgba(201,160,180,.12) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 2% 95%, rgba(214,229,237,.06) 0%, transparent 50%);
}
.d-head{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px,5vw,80px); align-items: end; margin-bottom: 64px;
}
.d-grid{
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,.07);
}
.d-card{
  padding: 40px 32px; border-right: 1px solid rgba(255,255,255,.07);
  transition: background .2s;
}
.d-card:last-child{ border-right: none }
.d-card:hover{ background: rgba(255,255,255,.03) }
.d-ico{
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(201,160,180,.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--twlt); margin-bottom: 22px;
}
.d-ico img,
.app-ico img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.d-ico svg{ width: 20px; height: 20px }
.d-card h3{
  font-family: var(--fh); font-weight: 900; font-size: 16px;
   letter-spacing: .02em;
  color: rgba(255,255,255,.9); margin-bottom: 12px;
}
.d-card p{ font-size: 16px; font-weight: 400; color: rgba(255,255,255,.6); line-height: 1.8; margin-bottom: 20px }
.d-tags{ display: flex; flex-wrap: wrap; gap: 5px }
.d-tag{
  font-size: 10px; font-weight: 500; letter-spacing: .06em;
  color: rgba(214,229,237,.65); background: rgba(214,229,237,.07);
  border: 1px solid rgba(214,229,237,.1); padding: 3px 9px; border-radius: 3px;
}

/* ── AANPAK ── */
.aanpak{ background: var(--frost) }
.aanpak-inner{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,100px);
  align-items: start;
}
.aanpak-steps{ display: flex; flex-direction: column; gap: 0 }
.step{
  display: grid; grid-template-columns: 48px 1fr;
  gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child{ border-top: 1px solid var(--line) }
.step-n{
  font-family: var(--fh); font-weight: 900; font-size: 28px;
  color: var(--line); letter-spacing: -.02em; line-height: 1;
  padding-top: 2px; transition: color .2s;
}
.step:hover .step-n{ color: var(--twlt) }
.step h4{
  font-family: var(--fh); font-weight: 900; font-size: 15px;
   letter-spacing: .06em;
  color: var(--ink); margin-bottom: 6px;
}
.step p{ font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.75 }

/* PROCESS */
.process{ background: var(--frost) }
.process-steps{
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 24px; margin-top: 52px; position: relative;
}
.process-steps::before{
  content: '';
  position: absolute; top: 28px; left: 10%; right: 10%;
  height: 1px; background: var(--line); z-index: 0;
}
.proc-step{ position: relative; z-index: 1 }
.proc-num{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-weight: 900; font-size: 18px;
  color: var(--ink); margin-bottom: 20px;
  transition: background .2s, border-color .2s;
}
.proc-step:hover .proc-num{ background: var(--twlt); border-color: var(--twlt); color: #fff }
.proc-step h3{
  font-family: var(--fh); font-weight: 900; font-size: 13px;
  letter-spacing: .05em; color: var(--ink); margin-bottom: 8px;
}
.proc-step p{ font-size: 15px; color: var(--body); line-height: 1.7 }

@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}
/* ── APPS ── */
.apps {
    background: var(--white)
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.app-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    transition: box-shadow .2s, transform .2s;
}

.app-card:hover {
    box-shadow: 0 8px 32px rgba(30,35,64,.10);
    transform: translateY(-2px)
}

.app-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: var(--frost);
}

.app-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}



/* Icoon overlay */
.app-overlay-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: white;
}

.app-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -.02em;
}

.app-foot {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
}

.app-card h4 {
    font-family: var(--fh);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--ink);
    margin: 0;
}

.app-arrow {
    color: var(--twlt);
    font-size: 18px;
    line-height: 1;
    transition: transform .18s;
}

.app-card:hover .app-arrow {
    transform: translateX(3px)
}

.web-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--frost);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px 22px;
    text-decoration: none;
    transition: all .18s;
}

.web-card:hover {
    background: var(--white);
    box-shadow: 0 2px 16px rgba(30,35,64,.07);
    border-color: var(--twlt)
}

.web-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--twlt2), var(--mist));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    flex-shrink: 0;
}

.web-ico svg {
    width: 17px;
    height: 17px
}

.web-card h4 {
    font-family: var(--fh);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .05em;
    color: var(--ink);
    margin-bottom: 2px;
}

.web-card span {
    font-size: 14px;
    font-weight: 400;
    color: var(--body)
}

/* ── OVER ── */
.over{
  background: linear-gradient(150deg, #EDD5E4 0%, #dce9f0 48%, #F4F4F8 100%);
  overflow: hidden; position: relative;
}
.over-grid{ display: grid; grid-template-columns: 1fr 1fr }
.over-photo{
  position: relative; overflow: hidden; min-height: 600px;
}
.over-photo img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: center top;
  filter: saturate(.85) contrast(1.05);
  transition: transform 10s ease;
  display: block;
}
.over-photo:hover img{ transform: scale(1.04) }
.photo-caption{
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px 36px;
  background: linear-gradient(to top, rgba(20,23,41,.75), transparent);
}
.photo-caption strong{
  font-family: var(--fh); font-weight: 900; font-size: 48px;
  color: #fff; line-height: 1; display: block;
}
.photo-caption span{ font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase }
.over-text{
  padding: clamp(48px,6vw,80px) clamp(36px,5vw,72px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.over-text p{
  font-size: 17px; font-weight: 400; color: var(--body);
  line-height: 1.85; margin-bottom: 14px;
}
.over-text p strong{ font-weight: 500; color: var(--ink) }
.award{
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(201,160,180,.15);
  border-left: 3px solid var(--twlt);
  padding: 14px 16px; margin: 20px 0 24px;
  font-size: 15px; font-weight: 400; color: var(--body); line-height: 1.7;
}
.award svg{ width: 18px; height: 18px; color: var(--twlt); flex-shrink: 0; margin-top: 1px }
.award strong{ font-weight: 500 }
.clients-label{
  font-size: 10px;  letter-spacing: .2em;
  color: var(--sub); display: block; margin-bottom: 10px; font-weight: 500;
}
.clients{ display: flex; flex-wrap: wrap; gap: 7px }
.client{
  font-size: 12px; font-weight: 500; color: var(--body);
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
  padding: 6px 14px; border-radius: 3px; letter-spacing: .03em;
}

/* ── FAQ ── */
.faq{ background: var(--white) }
.faq-wrap{ max-width: 680px; margin: 52px auto 0 }
.faq-item{ border-bottom: 1px solid var(--line) }
.faq-q{
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; text-align: left;
  font-family: var(--fh); font-weight: 900; font-size: 16px;
   letter-spacing: .04em;
  color: var(--ink); transition: color .18s;
}
.faq-q:hover{ color: var(--twlt) }
.faq-ico{
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sub); transition: transform .25s, color .25s;
}
.faq-ico svg{ width: 12px; height: 12px }
.faq-item.open .faq-ico{ transform: rotate(45deg); color: var(--twlt) }
.faq-body{
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
}
.faq-body p{ font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.8; padding-bottom: 24px }
.faq-item.open .faq-body{ max-height: 260px }

/* ── CONTACT ── */
.contact{
  background: var(--ink); padding: clamp(80px,10vw,128px) var(--gutter);
  position: relative; overflow: hidden;
}
.contact::before{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 5% 50%, rgba(201,160,180,.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 95% 50%, rgba(214,229,237,.06) 0%, transparent 55%);
  pointer-events: none;
}
.contact-inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px,7vw,100px); align-items: start;
  position: relative; z-index: 1;
}
.contact-l h2{ color: #fff; font-size: clamp(28px,4vw,48px); margin-bottom: 14px }
.contact-l p{ color: rgba(255,255,255,.55); font-size: 16px; line-height: 1.85; margin-bottom: 0 }
.contact-info{ display: flex; flex-direction: column; gap: 14px; margin-top: 32px }
.contact-info-item{
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.5); font-size: 15px;
}
.contact-info-item svg{ width: 16px; height: 16px; flex-shrink: 0; color: var(--twlt) }
.contact-info-item a{ color: rgba(255,255,255,.55); text-decoration: none; transition: color .18s }
.contact-info-item a:hover{ color: #fff }
.cf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.cf-field{ display: flex; flex-direction: column; gap: 6px }
.cf-field label{
  font-family: var(--fh); font-weight: 900; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.cf-field input,
.cf-field select,
.cf-field textarea{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px; padding: 12px 14px;
  font-family: var(--fb); font-size: 15px; font-weight: 400;
  color: #fff; outline: none;
  transition: border-color .18s, background .18s;
  -webkit-appearance: none;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder{ color: rgba(255,255,255,.25) }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  border-color: var(--twlt);
  background: rgba(255,255,255,.07);
}
.cf-field select{
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: rgba(255,255,255,.05);
  padding-right: 38px;
}
.cf-field select option{ background: var(--ink2); color: #fff }
.cf-field textarea{ resize: vertical; min-height: 130px; line-height: 1.65 }
.contact-form{ display: flex; flex-direction: column; gap: 16px }
.cf-footer{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 4px; flex-wrap: wrap;
}
.cf-note{ font-size: 13px; color: rgba(255,255,255,.28); line-height: 1.5 }
@media(max-width: 860px){
  .contact-inner{ grid-template-columns: 1fr }
  .cf-row{ grid-template-columns: 1fr }
}

/* ── FOOTER ── */
footer{ background: var(--ink2); border-top: 1px solid rgba(255,255,255,.05) }
.footer-inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px,5vw,80px);
  padding: 64px var(--gutter) 48px;
}
.f-brand svg {
                height: 20px;
                width: auto;
                display: block;
                margin-bottom: 16px
            }

            .f-meta {
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                gap: 6px
            }

            .f-meta-item {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                color: rgba(255,255,255,.35);
            }

            .f-meta-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                flex-shrink: 0;
                background: rgba(158,216,200,.55);
            }

            .f-meta-dot.available {
                background: rgba(130,210,140,.7);
                box-shadow: 0 0 6px rgba(130,210,140,.4)
            }
.f-logo svg{ height: 20px; width: auto; display: block; margin-bottom: 12px }
.f-desc{ font-size: 14px; font-weight: 400; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 240px }
.f-credit{ font-size: 11px; color: rgba(255,255,255,.18); margin-top: 12px }
.f-credit a{ color: rgba(255,255,255,.28); text-decoration: none }
.f-credit a:hover{ color: rgba(255,255,255,.5) }
.f-col h5{
  font-family: var(--fh); font-weight: 900; font-size: 10px;
   letter-spacing: .18em;
  color: rgba(255,255,255,.25); margin-bottom: 16px;
}
.f-col ul{ list-style: none; display: flex; flex-direction: column; gap: 10px }
.f-col a{ font-size: 14px; font-weight: 400; color: rgba(255,255,255,.6); text-decoration: none; transition: color .18s }
.f-col a:hover{ color: rgba(255,255,255,.75) }
.footer-base{
  border-top: 1px solid rgba(255,255,255,.05);
  max-width: var(--max); margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 400; color: rgba(255,255,255,.35);
}

/* ── REVEAL ── */
.r{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.r.in{ opacity: 1; transform: none }

/* ── KAAMOS SECTIE ── */
.kaamos{
  background: var(--ink);
  padding: clamp(80px,10vw,128px) var(--gutter);
  position: relative; overflow: hidden;
}
.kaamos::before{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 10% 50%, rgba(201,160,180,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(214,229,237,.06) 0%, transparent 55%);
  pointer-events: none;
}
.kaamos-inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px); align-items: center;
  position: relative; z-index: 1;
}
.kaamos-text h2{
  color: #fff; font-size: clamp(28px,4vw,48px);
  margin-bottom: 10px;
}
.kaamos-text .kaamos-sub{
  font-family: var(--fh); font-weight: 900; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--twlt); margin-bottom: 20px; display: block;
}
.kaamos-text p{
  color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.85;
  margin-bottom: 16px;
}
.kaamos-text p:last-child{ margin-bottom: 0 }
.kaamos-myth{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--twlt);
  border-radius: 10px;
  padding: 28px 30px;
}
.kaamos-myth-label{
  font-family: var(--fh); font-weight: 900; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--twlt); margin-bottom: 14px; display: block;
}
.kaamos-myth p{
  color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.8;
  margin-bottom: 12px; font-style: italic;
}
.kaamos-myth p:last-child{ margin-bottom: 0 }
.kaamos-myth-link{
  display: inline-block; margin-top: 14px;
  font-size: 13px; color: var(--twlt); text-decoration: none;
  border-bottom: 1px solid rgba(201,160,180,.3);
  padding-bottom: 1px; transition: color .2s, border-color .2s;
}
.kaamos-myth-link:hover{ color: #fff; border-color: rgba(255,255,255,.3) }
@media(max-width: 800px){
  .kaamos-inner{ grid-template-columns: 1fr }
}

/* ── REVIEWS ── */
.reviews{ background: var(--frost); }
.reviews-grid{
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 24px; margin-top: 52px;
}
.review-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  transition: box-shadow .2s, transform .2s;
}
.review-card:hover{
  box-shadow: 0 6px 28px rgba(30,35,64,.08);
  transform: translateY(-2px);
}
.review-stars{ display: flex; gap: 3px }
.review-stars svg{ width: 14px; height: 14px; fill: var(--twlt); color: var(--twlt) }
.review-quote{
  font-size: 16px; font-weight: 400; color: var(--body);
  line-height: 1.8; flex: 1;
  position: relative;
  z-index:1;
}
.review-quote::before{
  content: '\201C';
  font-family: var(--fh); font-size: 56px; font-weight: 900;
  color: var(--twlt2); line-height: 1;
  position: absolute; top: -14px; left: -6px;
  pointer-events: none;
  z-index: -1;
}
.review-author{ display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line) }
.review-avatar{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--twlt2), var(--mist));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-weight: 900; font-size: 13px; color: var(--ink);
}
.review-name{ font-family: var(--fh); font-weight: 900; font-size: 13px; color: var(--ink); letter-spacing: .03em }
.review-role{ font-size: 12px; color: var(--sub); margin-top: 1px }
@media(max-width: 860px){ .reviews-grid{ grid-template-columns: 1fr } }
@media(min-width: 560px) and (max-width: 860px){ .reviews-grid{ grid-template-columns: 1fr 1fr } }

/* ── RESPONSIVE ── */
@media(max-width: 900px){
  .nav-links{ display: none }
  .nav-burger{ display: flex }
  .nav-mobile{ display: flex }
  .d-head{ grid-template-columns: 1fr; gap: 24px }
  .d-grid{ grid-template-columns: 1fr; border-top: none }
  .d-card{ border-right: none; border-top: 1px solid rgba(255,255,255,.07) }
  .aanpak-inner{ grid-template-columns: 1fr }
  #p-apps{ grid-template-columns: 1fr 1fr }
  #p-web{ grid-template-columns: 1fr }
  .over-grid{ grid-template-columns: 1fr }
  .over-photo{ min-height: 55vw }
  .footer-inner{ grid-template-columns: 1fr; gap: 32px }
  .footer-base{ flex-direction: column; gap: 6px; text-align: center }
  .apps-grid {grid-template-columns: 1fr 1fr;}
}
@media(max-width: 560px){
  #p-apps{ grid-template-columns: 1fr }
  .apps-grid {grid-template-columns: 1fr;
  }
  .hero-h1{ font-size: clamp(34px,10vw,50px) }
}

.L{fill:#fff}
.L{fill:rgba(255,255,255,.45)}

/* ─────────────────────────────────────────────
   Gravity Forms → Kaamos Contact styling
   Scoped zodat alleen je contact-sectie raakt
   ───────────────────────────────────────────── */

/* Zorg dat Gravity wrapper niet eigen "card" styling oplegt */
.contact .contact-form .gform_wrapper,
.contact .contact-form .gform-theme,
.contact .contact-form .gform-body,
.contact .contact-form .gform_footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Velden container = jouw spacing */
.contact .contact-form .gform_fields {
  display: grid;
  gap: 14px;
}

/* 2 kolommen rij zoals .cf-row (GF gebruikt width-half classes) */
.contact .contact-form .gform_fields {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
  .contact .contact-form .gform_fields { grid-template-columns: 1fr; }
}

/* Gravity zet soms half-width via flex; dit maakt het grid leidend */
.contact .contact-form .gfield--width-half,
.contact .contact-form .gfield--width-full,
.contact .contact-form .gfield {
  width: auto !important;
  grid-column: auto;
  margin: 0 !important;
}

/* Forceer dat textarea (meestal full width) 2 kolommen pakt */
.contact .contact-form .gfield--type-textarea,
.contact .contact-form #field_1_3 { /* evt. aanpassen als je form id/field id anders is */
  grid-column: 1 / -1;
}

/* Labels: match met .cf-field label */
.contact .contact-form .gfield_label,
.contact .contact-form .gform-field-label {
  font-family: var(--fh) !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
  margin: 0 0 6px 0 !important;
}

/* Required asterisk/text minder schreeuwerig */
.contact .contact-form .gfield_required,
.contact .contact-form .gfield_required_text {
  color: rgba(255,255,255,.25) !important;
  font-weight: 700 !important;
}

/* Inputs/select/textarea: match met .cf-field input/select/textarea */
.contact .contact-form input[type="text"],
.contact .contact-form input[type="email"],
.contact .contact-form input[type="tel"],
.contact .contact-form input[type="url"],
.contact .contact-form textarea,
.contact .contact-form select {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font-family: var(--fb) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #fff !important;
  outline: none !important;
  transition: border-color .18s, background .18s !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  width: 100%;
}

/* Placeholder */
.contact .contact-form input::placeholder,
.contact .contact-form textarea::placeholder {
  color: rgba(255,255,255,.25) !important;
}

/* Focus */
.contact .contact-form input:focus,
.contact .contact-form textarea:focus,
.contact .contact-form select:focus {
  border-color: var(--twlt) !important;
  background: rgba(255,255,255,.07) !important;
}

/* Select: eigen caret + padding rechts */
.contact .contact-form select {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: rgba(255,255,255,.05) !important;
  padding-right: 38px !important;
}
.contact .contact-form select option {
  background: var(--ink2);
  color: #fff;
}

/* Textarea sizing */
.contact .contact-form textarea {
  resize: vertical !important;
  min-height: 130px !important;
  line-height: 1.65 !important;
}

/* Beschrijving / helptekst */
.contact .contact-form .gfield_description {
  color: rgba(255,255,255,.28) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 6px 0 0 0 !important;
}

/* Counter (als je GF counter aan hebt) */
.contact .contact-form .ginput_counter {
  color: rgba(255,255,255,.28) !important;
  font-size: 13px !important;
}

/* Footer = jouw .cf-footer */
.contact .contact-form .gform_footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}

/* Submit knop: probeer je bestaande .btn styling te hergebruiken */
.contact .contact-form .gform_button,
.contact .contact-form button[type="submit"],
.contact .contact-form input[type="submit"] {
  cursor: pointer;
  border:none !important;

}

/* Validation errors: in jouw dark stijl */
.contact .contact-form .gfield_validation_message,
.contact .contact-form .validation_message {
  background: rgba(255, 80, 80, .10) !important;
  border: 1px solid rgba(255, 80, 80, .18) !important;
  color: rgba(255, 170, 170, .95) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  margin-top: 8px !important;
}

.gfield_required {
  display: none !important
}

/* Force full width op responsive */
@media (max-width: 860px) {

  .contact .contact-form .gform_wrapper,
  .contact .contact-form form,
  .contact .contact-form .gform_body,
  .contact .contact-form .gform_fields {
    width: 100% !important;
    max-width: 100% !important;
  }

  .contact .contact-form .gform_fields {
    grid-template-columns: 1fr !important;
  }

  /* Gravity "half width" overrides killen */
  .contact .contact-form .gfield,
  .contact .contact-form .gfield--width-half,
  .contact .contact-form .gfield--width-full {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ─────────────────────────────────────────────
   App detail template (tpl-app.php)
   Scoped: raakt alleen pages met dit template
   ───────────────────────────────────────────── */
.page-template-tpl-app nav, .page-template-tpl-app-hub nav{
  background: rgba(20,23,41,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* nav links in template */
.page-template-tpl-app .nav-back, .page-template-tpl-app-hub .nav-back{
  display:flex; align-items:center; gap:8px;
  color: rgba(255,255,255,.6);
  font-size:14px; text-decoration:none;
  transition: color .2s; letter-spacing:.02em;
}
.page-template-tpl-app .nav-back:hover, .page-template-tpl-app-hub .nav-back:hover{ color:#fff; }

/* App hero (andere hero dan homepage) */
.page-template-tpl-app .hero, .page-template-tpl-app-hub .hero{
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 140px var(--gutter) 80px;
  min-height: 520px;
  display: flex;
  align-items: center;
  height: auto; /* override homepage hero 100svh */
}
.page-template-tpl-app .hero::before, .page-template-tpl-app-hub .hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 90% at 0% 50%, rgba(201,160,180,.13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 100% 20%, rgba(214,229,237,.08) 0%, transparent 50%);
  pointer-events:none;
}
.page-template-tpl-app .hero-inner  , .page-template-tpl-app-hub .hero-inner  {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter);
}
.page-template-tpl-app-hub .hero-inner {
  display:  block !important
}
.page-template-tpl-app .hero-tag, .page-template-tpl-app-hub .hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(201,160,180,.15);
  border: 1px solid rgba(201,160,180,.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--twlt);
  letter-spacing: .06em;
  margin-bottom: 20px;
}
.page-template-tpl-app .hero h1, .page-template-tpl-app-hub .hero h1{
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.05;
  color:#fff;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.page-template-tpl-app .hero-desc, .page-template-tpl-app-hub .hero-desc{
  font-size:18px;
  color: rgba(255,255,255,.6);
  line-height:1.8;
  max-width:520px;
  margin-bottom:36px;
}
.page-template-tpl-app .hero-btns, .page-template-tpl-app-hub .hero-btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* Stats bar */
.page-template-tpl-app .stats{ background: var(--frost); border-bottom: 1px solid var(--line); }
.page-template-tpl-app .stats-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 0 var(--gutter);
}
.page-template-tpl-app .stat{
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.page-template-tpl-app .stat:last-child{ border-right:none; }
.page-template-tpl-app .stat-n{
  font-family: var(--fh);
  font-weight: 900;
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.page-template-tpl-app .stat-l{ font-size: 13px; color: var(--sub); }

/* Sections (template gebruikt .wrap, maar geen globale section padding) */
.page-template-tpl-app .wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 100px) var(--gutter);
}

/* Labels */
.page-template-tpl-app .section-label{
  font-family: var(--fh);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--twlt);
  margin-bottom: 14px;
  display: block;
}

/* Screenshots */
.page-template-tpl-app .screenshots-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  margin-bottom: 40px;
}
.page-template-tpl-app .screenshots-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.page-template-tpl-app .screen-wrap{
  border-radius: 20px;
  overflow:hidden;
  background: var(--ink2);
  border: 1px solid rgba(30,35,64,.1);
  aspect-ratio: 9/18;
  position: relative;
  box-shadow: 0 8px 32px rgba(30,35,64,.10);
}
.page-template-tpl-app .screen-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.page-template-tpl-app .screen-label{
  position:absolute;
  bottom:10px; left:0; right:0;
  text-align:center;
  font-size:11px;
  color: rgba(255,255,255,.7);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Features */
.page-template-tpl-app .features{ background: var(--frost); }
.page-template-tpl-app .features-layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
  min-height: 420px;
}
.page-template-tpl-app .feat-tabs{
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column;
}
.page-template-tpl-app .feat-tab{
  padding: 18px 20px;
  cursor:pointer;
  border-bottom: 1px solid var(--line);
  font-family: var(--fh);
  font-weight: 900;
  font-size: 13px;
  color: var(--ink);
  background:#fff;
  position: relative;
}
.feat-tab.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid var(--white);
}
.page-template-tpl-app .feat-tab.active{ background: var(--ink); color:#fff; }
.page-template-tpl-app .feat-panels{ padding: 34px; }
.page-template-tpl-app .feat-panel{ display:none; }
.page-template-tpl-app .feat-panel.active{ display:block; }
.page-template-tpl-app .feat-panel-label{
  font-family: var(--fh);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--twlt);
  margin-bottom: 10px;
  display:block;
}
.page-template-tpl-app .feat-panel h3{
  font-family: var(--fh);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.2;
}
.page-template-tpl-app .feat-panel p{
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 12px;
}
.page-template-tpl-app .feat-bullets{
  margin-top: 16px;
  display:flex; flex-direction:column; gap: 10px;
}
.page-template-tpl-app .feat-bullet{ display:flex; gap: 10px; }
.page-template-tpl-app .feat-bullet::before{
  content:'';
  width:7px; height:7px;
  border-radius: 50%;
  background: var(--twlt);
  margin-top: 9px;
  flex-shrink:0;
}

/* Review */
/* ── REVIEW (App detail) ───────────────────────────────────────────── */
.page-template-tpl-app .review-section{
  background: var(--frost);
  padding: clamp(64px, 8vw, 100px) var(--gutter);
}

.page-template-tpl-app .review-inner{
  max-width: var(--max);
  margin: 0 auto;
}

.page-template-tpl-app .review-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 56px);
  position: relative;
  box-shadow: 0 10px 40px rgba(30,35,64,.08);
}

.page-template-tpl-app .review-quote-mark{
  font-family: Georgia, serif;
  font-size: 110px;
  line-height: .7;
  color: var(--twlt);
  opacity: .18;
  position: absolute;
  top: 18px;
  left: 22px;
  pointer-events: none;
}

.page-template-tpl-app .review-text{
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--ink);
  line-height: 1.85;
  font-style: italic;
  max-width: 760px;
  margin: 0 0 26px 0;
  position: relative;
  z-index: 1;
}

.page-template-tpl-app .review-meta{
      display: flex;
    flex-direction: column;
    gap: 3px;
}

.page-template-tpl-app .review-avatar{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(201,160,180,.35);
  background: linear-gradient(135deg, var(--twlt2), var(--mist));
  flex: 0 0 auto;
}

.page-template-tpl-app .review-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-template-tpl-app .review-name{
  font-family: var(--fh);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: .01em;
}

.page-template-tpl-app .review-role{
  color: var(--sub);
  font-size: 13px;
  margin-top: 3px;
}

.page-template-tpl-app .review-stars{
      display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.review-stars svg {
    width: 14px;
    height: 14px;
    fill: #f5a623;
    flex-shrink: 0;
}

/* phone mockup in hero */
.hero-phone{
  position: relative; width: 200px; flex-shrink: 0;
}
.phone-frame{
  width: 200px; height: 410px;
  background: var(--ink2);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 36px;
  position: relative; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-notch{
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 26px;
  background: var(--ink2);
  border-radius: 0 0 16px 16px;
  z-index: 2;
}
.phone-screen{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1a2744 0%, #0d1a2e 40%, #1a1035 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 16px 20px;
  gap: 10px;
}
.phone-screen-logo{
  font-family: var(--fh); font-weight: 900; font-size: 13px;
  color: rgba(255,255,255,.9); letter-spacing: .08em;
}
.phone-aurora{
  width: 100%; height: 90px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(100,220,180,.15) 30%,
    rgba(80,180,240,.2) 55%,
    rgba(160,100,220,.15) 75%,
    transparent 100%);
  border-radius: 8px;
  position: relative; overflow: hidden;
}
.phone-aurora::before{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(100,220,180,.3) 25%,
    rgba(80,180,240,.3) 50%, rgba(160,100,220,.3) 75%, transparent 100%);
  animation: aurorashift 4s ease-in-out infinite alternate;
}
@keyframes aurorashift{
  from{ transform: translateX(-20%) skewX(-5deg) }
  to{   transform: translateX(20%)  skewX(5deg)  }
}
.phone-row{ width: 100%; display: flex; gap: 6px }
.phone-pill{
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.08);
}
.phone-pill.accent{ background: rgba(201,160,180,.3) }
.phone-card-mini{
  width: 100%; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
}
.phone-card-mini span{
  display: block; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.12);
}
.phone-card-mini span:last-child{ width: 60%; background: rgba(201,160,180,.25) }


/* Responsive */
@media (max-width: 560px){
  .page-template-tpl-app .review-card{
    padding: 28px 22px;
  }
  .page-template-tpl-app .review-quote-mark{
    left: 16px;
    top: 14px;
    font-size: 96px;
  }
}


.page-template-tpl-app .store-btns{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap: wrap;
}
.page-template-tpl-app .store-btn{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 13px 22px;
  text-decoration:none;
  transition: .2s;
  min-width: 180px;
}
.page-template-tpl-app .store-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.page-template-tpl-app .store-btn-text span{
  display:block;
  font-size:10px;
  color: rgba(255,255,255,.45);
  letter-spacing:.05em;
}
.page-template-tpl-app .store-btn-text strong{
  display:block;
  font-size:15px;
  font-weight:600;
  color:#fff;
}

/* ── Phone Mockup ── */
.hero-phone{
  position: relative; width: 200px; flex-shrink: 0;
}
.pm-frame{
  width: 200px; height: 410px;
  background: var(--ink2, #141729);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 36px;
  position: relative; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
.pm-notch{
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 26px;
  background: var(--ink2, #141729);
  border-radius: 0 0 16px 16px;
  z-index: 2;
}
.pm-screen{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1a2744 0%, #0d1a2e 40%, #1a1035 100%);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 44px 16px 24px;
  gap: 12px;
}

/* App icon + name */
.pm-identity{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.page-template-tpl-app .pm-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.05);
  flex: 0 0 auto;
}

.page-template-tpl-app .pm-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover; /* of contain als je geen crop wilt */
  display: block;
}
.pm-name{
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 11px;
  color: rgba(255,255,255,.85); letter-spacing: .1em;
  text-transform: uppercase;
}

/* Ghost content */
.pm-row{ width: 100%; display: flex; gap: 6px }
.pm-pill{
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.07);
}
.pm-pill.a{ background: var(--pm-accent, rgba(201,160,180,.3)); opacity: .7 }
.pm-pill.s{ flex: .6 }

.pm-card{
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
.pm-card-line{
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.11);
}
.pm-card-line.s{ width: 65% }
.pm-card-line.xs{ width: 40%; background: var(--pm-accent, rgba(201,160,180,.2)); opacity: .6 }
.pm-card-line.sep{ height: 1px; background: rgba(255,255,255,.06); margin: 2px 0 }

.pm-card.row{
  flex-direction: row; align-items: center; gap: 9px;
}
.pm-card-dot{
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: var(--pm-accent, rgba(201,160,180,.2)); opacity: .5;
}
.pm-card-lines{ flex: 1; display: flex; flex-direction: column; gap: 5px }

/* Bottom bar */
.page-template-tpl-app .back-bar{
  background: var(--ink2);
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 20px var(--gutter);
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.page-template-tpl-app .back-bar a{ color: rgba(255,255,255,.4); text-decoration:none; }
.page-template-tpl-app .back-copy{ font-size:12px; color: rgba(255,255,255,.2); }

/* Responsive for template */
@media(max-width: 860px){
  .page-template-tpl-app .hero-inner{ grid-template-columns: 1fr; }
  .page-template-tpl-app .stats-inner{ grid-template-columns: 1fr 1fr; }
      .hero-phone {
        display: none;
    }
  .page-template-tpl-app .stat{
    border-right:none;
    border-bottom: 1px solid var(--line);
    padding: 24px 16px;
  }
  .page-template-tpl-app .screenshots-intro{ grid-template-columns: 1fr; }
  .page-template-tpl-app .screenshots-grid{ grid-template-columns: 1fr 1fr; }
  .page-template-tpl-app .features-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .page-template-tpl-app .feat-tabs{
    flex-direction: row;
    overflow:auto;
    border-right:none;
    border-bottom: 1px solid var(--line);
  }
  .page-template-tpl-app .feat-tab{
    border-bottom:none;
    border-right: 1px solid var(--line);
    white-space: nowrap;
  }
}
@media(max-width: 480px){
  .page-template-tpl-app .screenshots-grid{ grid-template-columns: 1fr; }
}

.page-template-tpl-app .hero-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.page-template-tpl-app .hero-logo{
  width:56px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 auto;
}
.hero-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--twlt);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    animation: up .7s .05s both;
}
.page-template-tpl-app .hero-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ── BACKEND SECTIE ── */
.backend{ background: var(--twlt2) }
.backend-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 1. Kop */
.backend-head{
  max-width: 620px;
  padding-bottom: clamp(36px,4vw,52px);
}
.eyebrow{
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--twlt);
  margin-bottom: 16px;
}
.backend-head h2{ margin-bottom: 18px }

/* 2. Mockup — volledige breedte */
.backend-mockup{
  margin-bottom: clamp(36px,4vw,52px);
}
.bm-wrap{
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(30,35,64,.06), 0 8px 24px rgba(30,35,64,.1), 0 28px 64px rgba(30,35,64,.16);
}

/* Browser bar */
.bm-bar{ background:#2a2a2e; padding:10px 14px; display:flex; align-items:center; gap:10px }
.bm-dots{ display:flex; gap:5px }
.bm-dot{ width:10px; height:10px; border-radius:50% }
.bm-dot-r{ background:#FF5F57 } .bm-dot-y{ background:#FEBC2E } .bm-dot-g{ background:#28C840 }
.bm-url{ flex:1; background:rgba(255,255,255,.1); border-radius:5px; min-height:24px }

/* WP Admin */
.bm-admin{ display:flex; background:#141729 }
.bm-sidebar{ width:160px; background:#1a1a1a; flex-shrink:0; display:flex; flex-direction:column }
.bm-logo-wrap{ padding:13px 16px 11px; border-bottom:1px solid rgba(255,255,255,.08) }
.bm-logo-wrap svg{ height:13px; width:auto; display:block }
.bm-menu{ padding:5px 0 }
.bm-item{ display:flex; align-items:center; gap:9px; padding:8px 16px }
.bm-item.act{ background:rgba(201,160,180,.12); border-left:3px solid #C9A0B4; padding-left:13px }
.bm-icon{ width:13px; height:13px; border-radius:2px; background:rgba(255,255,255,.14); flex-shrink:0 }
.bm-item.act .bm-icon{ background:#C9A0B4; opacity:.85 }
.bm-lbl{ height:7px; border-radius:3px; background:rgba(255,255,255,.18) }
.bm-item.act .bm-lbl{ background:rgba(255,255,255,.65) }
.bm-right{ flex:1; display:flex; flex-direction:column; background:#f0f0f1 }
.bm-topbar{ height:42px; background:#141729; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.05) }
.bm-tb-side{ display:flex; align-items:center; gap:8px }
.bm-pill{ height:19px; border-radius:10px; background:rgba(255,255,255,.1) }
.bm-avatar{ width:24px; height:24px; border-radius:50%; background:#C9A0B4; opacity:.65 }
.bm-pheader{ padding:12px 16px 10px; display:flex; align-items:center; gap:9px; background:#f0f0f1; border-bottom:1px solid #dcdcde }
.bm-ptitle{ height:21px; border-radius:3px; background:#1E2340; width:60px; opacity:.85 }
.bm-pbtn{ height:24px; border-radius:3px; background:#1E2340; width:76px; opacity:.6 }
.bm-ptab{ height:8px; border-radius:3px; background:rgba(30,35,64,.2) }
.bm-content{ padding:13px 16px; flex:1 }
.bm-filters{ display:flex; align-items:center; gap:7px; margin-bottom:11px }
.bm-fbox{ height:23px; border-radius:3px; background:white; border:1px solid #dcdcde }
.bm-fbtn{ background:rgba(201,160,180,.2); border-color:rgba(201,160,180,.4); width:42px }
.bm-fcount{ margin-left:auto; height:7px; border-radius:3px; background:rgba(30,35,64,.12); width:34px }
.bm-table{ background:white; border:1px solid #dcdcde; border-radius:3px; overflow:hidden }
.bm-thead{ display:grid; grid-template-columns:20px 1fr 80px 96px 68px 30px 90px; padding:7px 12px; background:#f6f7f7; border-bottom:1px solid #dcdcde; align-items:center; gap:7px }
.bm-th-chk{ width:12px; height:12px; border:2px solid #8c8f94; border-radius:2px }
.bm-th-l{ height:7px; border-radius:3px; background:rgba(30,35,64,.22) }
.bm-trow{ display:grid; grid-template-columns:20px 1fr 80px 96px 68px 30px 90px; padding:10px 12px; border-bottom:1px solid #f0f0f1; align-items:center; gap:7px }
.bm-trow:last-child{ border-bottom:none }
.bm-trow:nth-child(even){ background:#fafafa }
.bm-rchk{ width:12px; height:12px; border:2px solid #dcdcde; border-radius:2px }
.bm-rname{ height:9px; border-radius:3px; background:rgba(30,35,64,.65) }
.bm-rpill{ height:8px; border-radius:3px; background:rgba(30,35,64,.1) }
.bm-rpill.twlt{ background:rgba(201,160,180,.45) }
.bm-rpill.mist{ background:rgba(214,229,237,.7) }
.bm-rbadge{ width:15px; height:15px; border-radius:50%; background:#1E2340; opacity:.55; margin:auto }
.bm-rdate{ display:flex; flex-direction:column; gap:3px }
.bm-rd-a{ height:8px; border-radius:3px; background:rgba(30,35,64,.3) }
.bm-rd-b{ height:6px; border-radius:3px; background:rgba(30,35,64,.15); width:75% }

/* 3. Drie punten horizontaal */
.backend-points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px,4vw,48px);
  border-top: 1px solid rgba(201,160,180,.4);
  padding-top: clamp(32px,4vw,48px);
}
.bp{ display:flex; flex-direction:column; gap:10px }
.bp-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--twlt); flex-shrink: 0;
  margin-bottom: 2px;
}
.bp-text{ font-size:15px; color:var(--sub); line-height:1.7 }
.bp-text strong{ display:block; font-weight:600; color:var(--body); margin-bottom:6px; font-size:15px }

@keyframes bm-sh{ 0%,100%{opacity:.4} 50%{opacity:1} }
.bs { animation:bm-sh 2.8s ease-in-out infinite }
.bs2{ animation:bm-sh 2.8s .5s ease-in-out infinite }
.bs3{ animation:bm-sh 2.8s 1s ease-in-out infinite }
.bs4{ animation:bm-sh 2.8s 1.5s ease-in-out infinite }

@media(max-width:640px){
  .backend-points{ grid-template-columns:1fr }
}

/* ── MOCKUP SHOWCASE (from app-laten-maken_6.html) ── */
.mockup-section{
  background: var(--ink2);
  overflow: hidden; position: relative;
}
.mockup-section::before{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 0% 50%, rgba(201,160,180,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 100% 50%, rgba(214,229,237,.07) 0%, transparent 50%);
}
.mockup-inner{
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px,10vw,120px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,80px); align-items: center;
  position: relative; z-index: 1;
}
.mockup-phones{
  display: flex; justify-content: center; align-items: flex-end;
  gap: -20px; position: relative; height: 500px;
}
.phone-wrapper{
  position: relative; flex-shrink: 0;
}
.phone-wrapper.main-phone{
  z-index: 2;
}
.phone-wrapper.back-phone{
  position: absolute; right: -30px; top: 50px;
  z-index: 1; opacity: .7;
  transform: rotate(8deg);
}

/* Large phone for mockup section */
.phone-lg .phone-frame{
  border-radius: 40px;
  box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.phone-lg .phone-screen{
  width: 260px; height: 520px;
}
.phone-sm .phone-frame{
  border-radius: 34px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.phone-sm .phone-screen{
  width: 220px; height: 440px;
}
.phone-sm .app-header{ padding: 36px 16px 12px }
.phone-sm .app-avatar{ width: 24px; height: 24px }
.phone-sm .app-title-sm{ font-size: 11px }

/* Backend laptop mockup */
.laptop-mockup{
  position: absolute; bottom: -20px; right: -40px;
  width: 280px;
  z-index: 3;
}
.laptop-frame{
  background: #1a1d2e;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.laptop-titlebar{
  background: #0d1117; padding: 8px 12px;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ltb-dot{ width: 6px; height: 6px; border-radius: 50% }
.laptop-content{ padding: 12px }
.lc-row{
  display: grid; grid-template-columns: 70px 1fr;
  gap: 10px; margin-bottom: 12px;
}
.lc-sidebar{
  display: flex; flex-direction: column; gap: 6px;
}
.lc-menu-item{
  font-size: 8px; color: rgba(255,255,255,.3); padding: 4px 8px;
  border-radius: 4px; letter-spacing: .04em;
  cursor: default; transition: all .2s;
}
.lc-menu-item.active{
  background: rgba(201,160,180,.15); color: var(--twlt);
}
.lc-main{ display: flex; flex-direction: column; gap: 6px }
.lc-table-row{
  display: grid; grid-template-columns: 1fr 60px 50px;
  gap: 6px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 8px;
}
.lc-table-row.header{ color: rgba(255,255,255,.25); letter-spacing: .06em }
.lc-table-row:not(.header){ color: rgba(255,255,255,.6) }
.lc-status{
  font-size: 7px; padding: 2px 5px; border-radius: 3px;
  font-weight: 500; letter-spacing: .04em;
}
.lc-status.live{ background: rgba(63,185,80,.15); color: #3fb950 }
.lc-status.draft{ background: rgba(255,255,255,.07); color: rgba(255,255,255,.4) }
.laptop-base{
  background: #0d1117; height: 14px;
  border: 1px solid rgba(255,255,255,.08); border-top: none;
  border-radius: 0 0 4px 4px;
  display: flex; align-items: center; justify-content: center;
}
.laptop-base::after{
  content: ''; width: 60px; height: 3px;
  background: rgba(255,255,255,.06); border-radius: 2px;
}

/* App UI inside phone (used in mockup section) */
.app-header{
  padding: 44px 18px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.app-header-row{
  display: flex; justify-content: space-between; align-items: center;
}

.app-greeting{ font-size: 10px; color: rgba(255,255,255,.35); letter-spacing: .06em; margin-bottom: 2px }

.app-title-sm{ font-family: var(--fh); font-size: 13px; color: #fff; font-weight: 900; letter-spacing: .02em }

.app-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--twlt), var(--mist));
}

.app-body{ flex: 1; padding: 14px 14px; display: flex; flex-direction: column; gap: 10px }

.app-card-sm{
  background: rgba(255,255,255,.05); border-radius: 12px;
  padding: 12px 14px; border: 1px solid rgba(255,255,255,.06);
}

.app-card-label{ font-size: 8px; color: rgba(255,255,255,.3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px }

.app-card-val{ font-size: 18px; font-family: var(--fh); font-weight: 900; color: #fff; line-height: 1 }

.app-card-sub{ font-size: 8px; color: rgba(201,160,180,.7); margin-top: 3px }

.app-map{
  background: rgba(214,229,237,.06); border-radius: 12px;
  height: 90px; border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.map-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--twlt);
  box-shadow: 0 0 0 4px rgba(201,160,180,.25), 0 0 0 8px rgba(201,160,180,.1);
}

.app-row{ display: flex; gap: 8px }

.app-row .app-card-sm{ flex: 1 }

.app-bottom{
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; justify-content: space-around;
}

.nav-icon{
  width: 18px; height: 18px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 3px;
}

.nav-icon span{
  display: block; width: 14px; height: 1.5px;
  background: rgba(255,255,255,.3); border-radius: 2px;
}

.nav-icon.active span{ background: var(--twlt) }

.nav-icon-dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--twlt); margin-top: 2px;
}

.eyebrow-dark {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--twlt);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.pc{
  display:block;
  text-decoration:none;
  border-radius:14px;
  overflow:hidden;
}
.pc-bg{
  background: linear-gradient(145deg, hsl(var(--a)) 0%, hsl(var(--b)) 100%);
  border-radius:14px;
  padding:32px 24px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  min-height:200px;
}
.pc:hover .pc-bg{
  transform:translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
/* subtle grain overlay */
.pc-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  opacity:.4;
}
.pc-icon{
  width:72px;
  height:72px;
  border-radius:18px;
  object-fit:cover;
  display:block;
  margin:0 auto 20px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  /* fallback if image missing */
  background:rgba(255,255,255,.08);
}
.pc-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.pc-label span{
  font-size:14px;
  font-weight:700;
  color:#fff;
  font-family:var(--fh);
  letter-spacing:-.01em;
}
.pc-label svg{
  color:rgba(255,255,255,.5);
  flex-shrink:0;
  transition:transform .2s, color .2s;
}
.pc:hover .pc-label svg{
  transform:translateX(3px);
  color:var(--twlt);
}
.pc-tag{
  position:absolute;
  top:14px;
  right:14px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
}
@media(max-width:700px){
  .portfolio-grid{ grid-template-columns:repeat(2,1fr) !important }
}
@media(max-width:440px){
  .portfolio-grid{ grid-template-columns:1fr !important }
}

.section-inner {
    max-width: var(--max);
    margin: 0 auto;
}

.btn-primary{
  font-family: var(--fb); font-size: 14px; font-weight: 600;
  color: var(--ink); background: #fff;
  padding: 13px 26px; border-radius: 6px; text-decoration: none;
  letter-spacing: .02em; transition: all .2s;
}
.btn-primary:hover{ background: var(--twlt2); transform: translateY(-1px) }