/* ==========================================================================
   Sitequest — tijdelijke pre-AI landing (fase 1)
   Byte-getrouw overgenomen uit de Claude Design-export (§28). De <style>-blokken
   uit "Sitequest Tijdelijke Landing.dc.html" + "Sitequest Plan een gesprek.dc.html"
   zijn hier samengevoegd (landing = superset). De dc-runtime-attributen
   style-hover / style-focus bestaan niet in platte HTML en zijn hieronder
   vertaald naar echte :hover / :focus-regels (blok "Interactie-states").
   Tokens (--accent:#FF8555 e.d.) staan inline op #sqroot in de HTML.
   ========================================================================== */

*{box-sizing:border-box}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Open Sans',sans-serif;margin:0;letter-spacing:-0.02em;line-height:1.05}
p{margin:0}
a{text-decoration:none;color:var(--accent)}
a:hover{color:var(--ink)}
input,textarea,select,button{font-family:inherit}
::selection{background:#FF8555;color:#fff}
@keyframes upFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sqDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,26px)}}
@keyframes sqDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
@keyframes sqDraw{to{stroke-dashoffset:0}}
.sqorb{position:absolute;border-radius:50%;filter:blur(32px);will-change:transform;pointer-events:none}
.sqorb.c{display:none}
@media (prefers-reduced-motion:reduce){.sqorb{animation:none!important}.sqdraw path{animation:none!important;stroke-dashoffset:0!important}.sqe{opacity:1!important;animation:none!important}.sqfloatcard{animation:none!important}.sqjs .rv{opacity:1!important}}
.sqdraw path{stroke-dasharray:1;stroke-dashoffset:1;animation:sqDraw .95s cubic-bezier(.7,0,.2,1) .55s forwards}
[data-hero-pattern="geen"] .sqpat{display:none!important}
[data-hero-pattern="stippen"] .sqpat{background-image:radial-gradient(var(--hgrid) 1.2px,transparent 1.2px);background-size:22px 22px}
[data-hero-pattern="raster"] .sqpat{background-image:linear-gradient(var(--hgrid) 1px,transparent 1px),linear-gradient(90deg,var(--hgrid) 1px,transparent 1px);background-size:34px 34px}
.rv.sq-in{animation:upFade .65s cubic-bezier(.2,.6,.2,1) both}
.sqjs .rv{opacity:0}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sqSheen{0%{transform:translateX(-140%)}60%,100%{transform:translateX(260%)}}
.sqe{opacity:0;animation:upFade .7s cubic-bezier(.2,.6,.2,1) forwards}
.sqe1{animation-delay:.02s}.sqe2{animation-delay:.12s}.sqe3{animation-delay:.22s}.sqe4{animation-delay:.32s}.sqe5{animation-delay:.42s}
.sqfloatcard{animation:softFloat 6.5s ease-in-out infinite}
.sqherocards .sqfloatcard:nth-child(2){animation-delay:1.1s}
.sqherocards .sqfloatcard:nth-child(3){animation-delay:2.2s}
.sqcta{position:relative;overflow:hidden}
.sqcta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-140%);animation:sqSheen 5.5s ease-in-out 1.4s infinite;pointer-events:none}
/* ---- Hero proof: spotlight-strip (mobile-first, §28 Claude Design) ---- */
.sqproof{display:flex;flex-direction:column;width:100%;max-width:460px;margin:34px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 26px 54px -36px rgba(22,19,15,.42);overflow:hidden}
.sqptile{position:relative;display:flex;align-items:center;gap:15px;padding:16px 18px;width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:none;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .32s ease}
.sqptile + .sqptile{border-top:1px solid var(--line)}
.sqptile.on{background:var(--chip)}
.sqpic{width:47px;height:47px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--line);color:var(--ink2);transition:background .32s ease,color .32s ease,border-color .32s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.sqptile.on .sqpic{background:var(--accent);color:var(--onAccent);border-color:transparent;transform:scale(1.08) rotate(-3deg);box-shadow:0 14px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.sqptxt{flex:1;min-width:0;padding-right:24px}
.sqpt{display:block;font-family:'Open Sans';font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
.sqps{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;transition:color .32s ease}
.sqptile.on .sqps{color:var(--ink2)}
.sqpnum{position:absolute;top:14px;right:16px;font-family:'Space Mono';font-size:12px;font-weight:700;color:color-mix(in srgb,var(--ink) 20%,transparent);transition:color .32s ease,transform .32s ease}
.sqptile.on .sqpnum{color:var(--accent);transform:translateY(-1px)}
.sqpbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);opacity:0;border-radius:0 3px 3px 0}
.sqptile.on .sqpbar{opacity:1;animation:sqPFill 3s linear forwards}
@keyframes sqPFill{from{width:0}to{width:100%}}
@media (min-width:821px){
  .sqproof{flex-direction:row;max-width:760px;margin-top:40px}
  .sqptile{flex-direction:column;align-items:flex-start;gap:15px;padding:24px 22px 26px}
  .sqptile + .sqptile{border-top:none;border-left:1px solid var(--line)}
  .sqptxt{flex:none;padding-right:0}
  .sqptile.on .sqpic{transform:translateY(-3px) rotate(-3deg)}
}
@media (prefers-reduced-motion:reduce){.sqptile.on .sqpbar{animation:none;width:100%}}
@media (prefers-reduced-motion:reduce){.sqcta::after{animation:none!important;display:none}}
/* In-view-animatiegate (Eigenaar-regel): elke animatie die anders al bij page-load
   of doorlopend draait — ook buiten beeld — staat gepauzeerd tot JS het element als
   in-beeld markeert (.sq-in via de reveal-observer in main.js). De onderlijning-draw
   (.sqdraw) tekent zich dus pas zodra hij in beeld komt; sheen/shimmer/float/orbs
   lopen pas vanaf dat moment. Alleen actief onder .sqjs (JS aan, motion toegestaan);
   zonder JS of bij reduced-motion gelden de bestaande basisregels. */
.sqjs .sqdraw path,
.sqjs .sqfloatcard,
.sqjs .sqburst,
.sqjs .sqorb{animation-play-state:paused}
.sqjs .sqcta::after{animation-play-state:paused}
.sqjs .sqdraw.sq-in path,
.sqjs .sqfloatcard.sq-in,
.sqjs .sqburst.sq-in,
.sqjs .sqorb.sq-in{animation-play-state:running}
.sqjs .sqcta.sq-in::after{animation-play-state:running}
.sqcard{transition:transform .22s ease,border-color .2s ease,box-shadow .22s ease}
.sqlink{transition:color .2s ease}
/* Mobiel menu: standaard verborgen (mobiel), zichtbaar met .open; op desktop via media-query hard verborgen. */
.sqmob{display:none}
.sqmob.open{display:flex}
.sqacc-body{overflow:hidden;transition:max-height .32s ease,opacity .26s ease;max-height:0;opacity:0}
.sqacc-body.open{max-height:600px;opacity:1}

/* ---- Merk-eigen visuele accenten ---- */
.sqkick{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:999px;background:var(--chip);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 18px}
.sqkick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.sqkick.ctr{margin-left:auto;margin-right:auto}
.sqcard{position:relative;overflow:hidden;transition:transform .22s ease,border-color .2s ease,box-shadow .22s ease}
.sqcard::before{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:3}
.sqcard:hover::before{transform:scaleX(1)}
.sqcard:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 26px 50px -34px rgba(22,19,15,.34)}
.sqsvc:hover{transform:translateY(-3px)}
.sqsvc2:hover{transform:translateY(-3px)}
.sqsvc2:hover .sqicon{background:var(--accent);color:var(--onAccent)}
.sqsvc:hover .sqicon{background:var(--accent);color:var(--onAccent)}
.sqicon{transition:background .22s ease,color .22s ease}
.sqstep:hover{transform:translateY(-3px)}
.sqstepno{transition:background .22s ease,color .22s ease}
.sqstep:hover .sqstepno{background:var(--accent);color:var(--onAccent)}
@keyframes sqShimmer{0%{background-position:-220% 0}100%{background-position:220% 0}}
.sqpromo{position:relative;overflow:hidden;background:linear-gradient(120deg,#1F1B15 0%,#16130F 60%);border:1px solid var(--band-line)}
.sqpromo::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 88% 10%,var(--hglow) 0%,transparent 60%);pointer-events:none}
.sqburst{background:linear-gradient(90deg,var(--accent),#FFB07A,var(--accent));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sqShimmer 4.5s linear infinite}
@media (prefers-reduced-motion:reduce){.sqburst{animation:none}}
/* Mobiel: één kolom; volgorde head → vragen → CTA blijft gelijk via display:contents + order. */
.sqfaq-wrap{display:flex;flex-direction:column;gap:24px}
.sqfaq-side{display:contents}
.sqfaq-head{order:1}
.sqfaq-acc{order:2}
.sqfaq-card{order:3}
.sqfaqbtn:hover{color:var(--accent)}
/* Desktop: linkerkolom (titel + CTA) als één sticky blok; accordion rechts. */
@media (min-width:821px){
  .sqfaq-wrap{display:grid!important;grid-template-columns:.82fr 1.18fr!important;gap:40px!important;align-items:start!important}
  .sqfaq-side{display:flex!important;flex-direction:column;gap:20px;grid-column:1;align-self:start;position:sticky;top:88px}
  .sqfaq-acc{grid-column:2}
}

/* Portfolio-placeholder (image-slot uit het ontwerp = bewust een placeholder; geen verzonnen screenshot) */
.sqph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:repeating-linear-gradient(135deg,var(--surface2) 0 14px,var(--chip) 14px 28px);color:var(--muted)}
.sqph b{font-family:'Open Sans';font-weight:700;font-size:14px;color:var(--ink2)}
.sqph span{font-family:'Space Mono';font-size:11.5px}

/* ===== Mobile-first: alle basiswaarden staan inline (mobiel). Desktop-uitbreidingen hieronder. ===== */
@media (min-width:821px){
  .sqorb{filter:blur(46px)}
  .sqorb.c{display:block}
  .sqnav-bar{padding:14px 32px!important}
  .sqnavlinks{display:flex!important}
  .sqphone{display:inline-flex!important}
  .sqworklink{display:inline!important}
  .sqburger{display:none!important}
  .sqmob{display:none!important}
  .sqhero{padding:96px 32px!important;min-height:84vh!important}
  .sqsec{padding:92px 32px!important}
  .sqftr{padding:64px 32px 34px!important}
  .sqhero-cta{flex-direction:row!important;justify-content:center!important;max-width:none!important}
  .sqhero-cta a{width:auto!important}
  .sqherocards{grid-template-columns:repeat(3,1fr)!important}
  .sqg2{grid-template-columns:1fr 1fr!important}
  .sqg4{grid-template-columns:repeat(4,1fr)!important}
  .sqbento{grid-template-columns:repeat(3,1fr)!important}
  .sqwork-mobile{display:none!important}
  .sqwork-desktop{display:grid!important}
  .sqprices{grid-template-columns:repeat(3,1fr)!important}
  .sqportfolio{grid-template-columns:repeat(3,1fr)!important}
  .sqcontact{grid-template-columns:.9fr 1.1fr!important;gap:48px!important}
  .sqform-2{grid-template-columns:1fr 1fr!important}
  .sqfootgrid{grid-template-columns:1.4fr 1fr 1fr!important}
  .sqhead-row{flex-direction:row!important;align-items:center!important}
  .sqwork-head{flex-direction:row!important;align-items:flex-end!important}
  .sqcontact-sec{padding:80px 32px!important}
}

/* ==========================================================================
   Interactie-states — vertaling van de dc-attributen style-hover / style-focus
   (die in platte HTML niets doen) naar echte CSS. Zelfde waarden als in het
   ontwerp, gekoppeld via helper-classes op de betreffende elementen.
   ========================================================================== */
.hv-bright{transition:filter .2s ease}
.hv-bright:hover{filter:brightness(.95)}
.hv-accentborder{transition:border-color .2s ease}
.hv-accentborder:hover{border-color:var(--accent)}
.hv-accenttext{transition:color .2s ease}
.hv-accenttext:hover{color:var(--accent)}
.hv-soc{transition:border-color .2s ease,color .2s ease}
.hv-soc:hover{border-color:var(--accent);color:var(--accent)}
.sqnavlinks .sqlink:hover{color:var(--ink);background:var(--surface2)}
.sqinput{transition:border-color .2s ease}
.sqinput:focus{border-color:var(--accent);outline:none}

/* FAQ-accordion — het ontwerp gebruikt een geanimeerde custom accordion (§28 byte-getrouw).
   Volledig CSS-gedreven via [data-open]; main.js zet enkel dat attribuut (exclusief). */
.sqfaq-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.sqfaq-item[data-open]{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 22px 44px -34px rgba(22,19,15,.32)}
.sqfaq-icon{flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;background:var(--chip);color:var(--ink)}
.sqfaq-item[data-open] .sqfaq-icon{background:var(--accent);color:var(--onAccent)}
.sqfaq-icon .sq-ic-plus,.sqfaq-icon .sq-ic-minus{width:18px;height:18px;align-items:center;justify-content:center}
.sqfaq-icon .sq-ic-plus{display:flex}
.sqfaq-icon .sq-ic-minus{display:none}
.sqfaq-item[data-open] .sqfaq-icon .sq-ic-plus{display:none}
.sqfaq-item[data-open] .sqfaq-icon .sq-ic-minus{display:flex}
.sqfaq-item[data-open] .sqacc-body{max-height:600px;opacity:1}

/* Consent-regel op het contactformulier (AVG art. 13) */
.sqconsent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--ink2)}
.sqconsent input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.sqconsent a{color:var(--accent);font-weight:600}
.sqconsent a:hover{color:var(--ink)}

/* Honeypot — onzichtbaar spam-veld (geen echte gebruiker vult dit) */
.sqhp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Verzendknop tijdens bezig/uitgeschakeld */
button[disabled]{opacity:.6;cursor:progress}

/* Losse content-pagina (privacyverklaring) */
.sqprose{max-width:760px;margin:0 auto;color:var(--ink2);font-size:15.5px;line-height:1.7}
.sqprose h1{color:var(--ink);font-size:clamp(28px,6vw,42px);margin-bottom:10px}
.sqprose h2{color:var(--ink);font-size:22px;margin:34px 0 10px}
.sqprose p{margin:0 0 14px}
.sqprose ul{margin:0 0 14px;padding-left:22px}
.sqprose li{margin:0 0 7px}
.sqprose a{color:var(--accent);font-weight:600}
.sqprose a:hover{color:var(--ink)}
.sqprose .sqmeta{font-family:'Space Mono';font-size:12.5px;color:var(--muted);margin-bottom:28px}