/* Homepage content layout. Visual tokens come from the unchanged Apps-page site.css.
   No site.js, cursor or reveal effects: homepage interactions remain independent. */
.homepage{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.55 var(--body);overflow-x:visible}
.homepage [hidden]{display:none!important}
.homepage img{height:auto}
.homepage a{text-underline-offset:.22em}
.homepage button,.homepage input,.homepage textarea{font:inherit}
.homepage button,.homepage summary{cursor:pointer}
.homepage :focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.homepage h1,.homepage h2,.homepage h3{font-family:var(--disp);letter-spacing:-.025em}
.homepage h2{font-size:clamp(1.85rem,3.8vw,3rem);font-weight:750;line-height:1.08;text-wrap:balance;margin-bottom:2.2rem}
.homepage h3{font-size:1.2rem;font-weight:700;line-height:1.2}
.homepage p+p{margin-top:1rem}
.homepage svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.homepage .hp-shell{width:min(100% - 2.6rem,var(--maxw));margin-inline:auto}
.homepage .hp-skip{position:absolute;z-index:200;top:1rem;left:1rem;padding:.75rem 1rem;background:#fff;transform:translateY(-200%)}
.homepage .hp-skip:focus{transform:none}
/* Same 74px transparent navigation, logo treatment and link typography as Apps.
   Absolute positioning keeps the band continuous without scroll-driven effects. */
.homepage .hp-header{position:absolute;inset:0 0 auto;z-index:100;color:#fff;border-bottom:1px solid transparent}
.homepage .hp-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:74px;flex-wrap:wrap}
.homepage .hp-logo{display:inline-flex;align-items:center;gap:.6rem;font:800 1.3rem/1.2 var(--disp);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.homepage .hp-logo img{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px #a855f7,0 0 14px rgba(168,85,247,.6)}
.homepage .hp-nav nav{display:flex;align-items:center;flex-wrap:wrap;gap:2rem;margin-left:auto}
.homepage .hp-nav nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:.93rem;font-weight:600;color:var(--on-dark);position:relative}
.homepage .hp-nav nav a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:2px;background:var(--neon);transform:scaleX(0);transform-origin:left}
.homepage .hp-nav nav a:hover{color:#fff}
.homepage .hp-nav nav a:hover::after{transform:scaleX(1)}
/* Without working observers, dock in a reserved footer space instead of covering content. */
.homepage{position:relative}
.homepage .hp-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.homepage .hp-wa{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;border:0;border-radius:50%;color:#fff;background:#25d366;box-shadow:0 10px 28px -10px rgba(37,211,102,.65)}
.homepage .hp-wa.hp-wa-floating{position:fixed}
.homepage .hp-wa svg{fill:currentColor;stroke:none;width:27px;height:27px}
.homepage .hp-menu-toggle{min-height:44px;padding:.45rem .9rem;border:1.5px solid rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.06);border-radius:999px}
/* Apps page-hero gradient, dots, heading scale, grid and spacing. */
.homepage .hp-hero{position:relative;padding:calc(74px + clamp(4rem,8vw,7rem)) 0 clamp(3.5rem,7vw,6rem);background:var(--band);color:#fff;overflow:hidden}
.homepage .hp-hero::before,.homepage .hp-contact::before,.homepage .hp-footer::before{content:'';position:absolute;inset:0;background-image:var(--dots);background-size:34px 34px;opacity:.5;pointer-events:none;mask-image:radial-gradient(70% 80% at 75% 30%,#000 20%,transparent 100%)}
.homepage .hp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:clamp(2rem,6vw,5rem)}
.homepage .hp-hero-copy{min-width:0;container-type:inline-size}
.homepage h1{font-size:clamp(2.1rem,8cqi,4rem);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:none;text-wrap:balance;overflow-wrap:normal}
.homepage h1 span{color:var(--neon-soft);text-shadow:0 0 24px rgba(192,132,252,.55)}
.homepage .hp-lead{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.65;color:var(--on-dark);max-width:62ch;margin-top:1.7rem}
.homepage .hp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:2rem}
.homepage .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1.7rem;min-height:52px;max-width:100%;border:1.5px solid transparent;border-radius:999px;font-size:.97rem;font-weight:600;letter-spacing:.01em;text-decoration:none;line-height:1.35;text-align:center}
/* Use the shared gradient with dark text to retain AA contrast across its light end. */
.homepage .hp-primary{background:var(--grad);color:var(--night);box-shadow:0 6px 24px rgba(124,58,237,.38)}
.homepage .hp-primary:hover{box-shadow:0 8px 32px rgba(168,85,247,.6)}
.homepage .hp-secondary{border-color:var(--ink);background:transparent;color:var(--ink)}
.homepage .hp-secondary:hover{border-color:var(--accent);color:var(--accent-deep)}
.homepage .hp-hero .hp-secondary{border-color:rgba(255,255,255,.75);color:#fff}
.homepage .hp-hero :focus-visible,.homepage .hp-header :focus-visible,.homepage .hp-footer :focus-visible,.homepage .hp-contact :focus-visible{outline-color:var(--neon-soft)}
.homepage .hp-hero-price{background:var(--paper-2);color:var(--ink);border-radius:16px;padding:clamp(1.5rem,3vw,2.2rem);border:1px solid rgba(255,255,255,.7);box-shadow:var(--glow-strong);min-width:0}
.homepage .hp-eyebrow{font:700 .72rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.2rem;color:var(--accent-deep)}
.homepage .hp-price{font:700 clamp(1.5rem,2.3vw,2rem)/1.25 var(--body);letter-spacing:-.025em;color:var(--accent-deep)}
.homepage .hp-tax{font-size:.86rem;margin-top:.75rem;color:var(--ink-soft)}
.homepage .hp-text-link{display:inline-block;margin-top:2rem;min-height:44px;padding-block:.6rem;font-size:.95rem;text-decoration:underline}
.homepage main{counter-reset:hp-section}
.homepage .hp-section{padding:clamp(3.8rem,7vw,6.5rem) 0;scroll-margin-top:1rem;counter-increment:hp-section;border-top:1.5px solid var(--ink)}
.homepage .hp-section h2::before{content:'§ ' counter(hp-section,decimal-leading-zero);display:block;font:700 .68rem/1.6 var(--mono);letter-spacing:.12em;margin-bottom:.8rem;color:var(--accent-deep)}
.homepage .hp-section:nth-child(even){background:var(--paper-2)}
.homepage .hp-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.homepage .hp-service{display:flex;flex-direction:column;min-width:0;border:1.5px solid var(--ink);background:var(--paper);padding:1.5rem;border-radius:8px;text-decoration:none}
.homepage .hp-service:hover{border-color:var(--accent)}
.homepage .hp-service svg{margin-bottom:1.4rem;color:var(--accent)}
.homepage .hp-service h3{font-size:1.2rem;margin-bottom:.65rem}
.homepage .hp-service p{font-size:.94rem;line-height:1.65;color:var(--ink-soft);margin-bottom:1.2rem}
.homepage .hp-card-foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);font:700 .68rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.homepage .hp-price-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.homepage .hp-package{padding:clamp(1.5rem,3vw,2.2rem);border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-2)}
.homepage .hp-package h3{margin-bottom:1.5rem}
.homepage .hp-package-list{list-style:none;padding:0;margin:2rem 0 1.25rem}
.homepage .hp-package-list li{display:flex;align-items:baseline;gap:.85rem;padding:.85rem 0;border-top:1px solid var(--line)}
.homepage .hp-package-list li::before{content:'✓';font-family:var(--mono);font-weight:700;color:var(--accent)}
.homepage .hp-small{font-size:.85rem;line-height:1.65}
.homepage .hp-start{margin-top:1.25rem}
.homepage .hp-custom{padding-top:1.5rem;max-width:36rem}
.homepage .hp-custom h3{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;max-width:23ch}
.homepage .hp-custom p:not(.hp-eyebrow){margin-top:1.25rem;color:var(--ink-soft)}
.homepage .hp-custom .hp-btn{margin-top:1.5rem}
.homepage .hp-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;list-style:none;padding:0;margin:0;counter-reset:steps}
.homepage .hp-steps li{counter-increment:steps;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);padding:1.5rem}
.homepage .hp-steps li::before{content:counter(steps,decimal-leading-zero);display:block;font:700 .72rem/1.6 var(--mono);color:var(--accent);margin-bottom:1rem}
.homepage .hp-steps h3{margin-bottom:.65rem}
.homepage .hp-steps p{color:var(--ink-soft);font-size:.94rem;line-height:1.65}
.homepage .hp-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-2);padding:clamp(1.25rem,3vw,2.2rem)}
.homepage .hp-case+.hp-case{margin-top:2rem}
.homepage .hp-case-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.homepage .hp-case-logo{display:flex;align-items:center;justify-content:center;width:220px;max-width:100%;height:110px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:1.5rem;padding:1rem}
.homepage .hp-case-logo img{width:100%;height:100%;object-fit:contain}
.homepage .hp-case-logo:has(img[src*="/diamant/"]){background:var(--ink);border-color:var(--ink)}
.homepage .hp-case h3{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;max-width:26ch}
.homepage .hp-case p{margin-top:1rem;margin-bottom:1.5rem;color:var(--ink-soft);line-height:1.75}
.homepage .hp-case .hp-btn{margin-top:auto;font-size:.9rem;overflow-wrap:anywhere;padding-inline:1.2rem}
.homepage .hp-case figure{min-width:0}
.homepage .hp-screenshot{width:100%;height:auto;border:1.5px solid var(--ink);border-radius:6px}
.homepage figcaption{font:400 .65rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-top:.75rem;color:var(--ink-soft)}
.homepage .hp-why-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,7vw,6rem);align-items:start}
.homepage .hp-photo-placeholder{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;text-align:center;border:1.5px dashed var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink-soft)}
.homepage .hp-photo-placeholder svg{width:64px;height:64px;margin-bottom:1.5rem;stroke-width:1}
.homepage .hp-photo-placeholder span{font-size:.85rem;margin-top:.5rem}
.homepage .hp-reasons article{border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);padding:1.5rem}
.homepage .hp-reasons article+article{margin-top:1rem}
.homepage .hp-reasons h3{display:flex;align-items:center;gap:.6rem;margin-bottom:.65rem}
.homepage .hp-reasons p{font-size:.94rem;color:var(--ink-soft);line-height:1.65}
.homepage .hp-reasons svg{width:24px;height:24px}
.homepage details{border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-2);padding:0 1.4rem}
.homepage details+details{margin-top:1rem}
.homepage details[open]{border-color:var(--accent)}
.homepage summary{font-size:1.04rem;font-weight:600;padding-block:1.35rem;min-height:44px}
.homepage details p{padding:0 0 1.4rem;max-width:72ch;font-size:.95rem;line-height:1.65;color:var(--ink-soft)}
/* Match the Apps content-grid title/body alignment for process and FAQ. */
@media(min-width:901px){.homepage #werkwijze>.hp-shell,.homepage .hp-faq{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:clamp(2rem,7vw,6rem);align-items:start}.homepage .hp-faq h2{grid-column:1;grid-row:1/20}.homepage .hp-faq details{grid-column:2}}
.homepage .hp-section.hp-contact{position:relative;background:var(--band);color:#fff}
.homepage .hp-contact>.hp-shell,.homepage .hp-footer>.hp-shell{position:relative}
.homepage .hp-contact h2::before{color:var(--neon-soft)}
.homepage .hp-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.4rem,5vw,4rem)}
.homepage .hp-contact h3{font-size:clamp(1.85rem,3.8vw,3rem);line-height:1.08;margin-bottom:1.25rem}
.homepage .hp-contact-grid>div p{color:var(--on-dark)}
.homepage .hp-contact-grid>div a{display:inline-block;padding-block:.6rem;overflow-wrap:anywhere;text-decoration:underline}
.homepage .hp-contact form{display:flex;flex-direction:column;align-items:stretch;min-width:0;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.07);padding:1.8rem}
.homepage label{font-weight:600;display:block;margin-bottom:.5rem}
.homepage label span{font-weight:400;font-size:.85rem;color:var(--on-dark)}
.homepage input,.homepage textarea{display:block;width:100%;min-width:0;min-height:52px;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--ink);padding:.85rem 1rem;margin-bottom:1.25rem}
.homepage textarea{resize:vertical}
.homepage .hp-contact .hp-primary{align-self:flex-start}
.homepage .hp-contact .hp-small{color:var(--on-dark);margin-top:1rem}
.homepage .hp-footer{position:relative;background:var(--band);color:var(--cream);padding-top:3.2rem;border-top:1px solid rgba(255,255,255,.16)}
.homepage .hp-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.homepage .hp-footer-brand p{max-width:34ch;margin-top:1rem;font-size:.9rem;color:var(--on-dark-soft)}
.homepage .hp-footer h3{font:700 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:1rem}
.homepage .hp-footer ul{list-style:none;padding:0;margin:0}
.homepage .hp-footer li{margin-bottom:.35rem;font-size:.92rem;color:var(--on-dark-soft)}
.homepage .hp-footer li a{display:inline-block;padding-block:.4rem;text-decoration:none;overflow-wrap:anywhere}
.homepage .hp-footer a:hover{text-decoration:underline}
.homepage .hp-footer .hp-tax{color:var(--on-dark-soft)}
.homepage .hp-footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;padding-block:1.6rem;border-top:1px solid rgba(255,255,255,.16);font:400 .8rem/1.6 var(--mono);color:var(--on-dark-soft)}
@media(min-width:1000px){.homepage .hp-menu-toggle{display:none!important}}
@media(max-width:1100px){.homepage .hp-services{grid-template-columns:repeat(2,minmax(0,1fr))}.homepage .hp-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.homepage .hp-nav nav{gap:1.2rem}}
@media(max-width:999px){html.js .homepage #hp-menu:not([data-open="true"]){display:none}.homepage .hp-header{background:rgba(22,6,54,.96);border-bottom-color:rgba(255,255,255,.12)}.homepage .hp-nav{min-height:68px;gap:1rem}.homepage .hp-menu-toggle{margin-left:auto}.homepage .hp-nav nav{order:4;width:100%;margin:0;gap:.25rem 1.5rem;padding-bottom:1rem}.homepage .hp-nav nav a{padding-block:.3rem}.homepage .hp-hero{padding-top:calc(68px + clamp(4rem,8vw,7rem))}}
@media(max-width:900px){.homepage .hp-hero-grid,.homepage .hp-price-grid,.homepage .hp-case,.homepage .hp-why-grid,.homepage .hp-contact-grid{grid-template-columns:minmax(0,1fr)}.homepage .hp-hero-price{max-width:520px}.homepage .hp-hero-copy{max-width:740px}.homepage .hp-case figure{width:100%}.homepage .hp-photo-placeholder{aspect-ratio:4/3;max-width:450px}}
@media(max-width:640px){.homepage .hp-hero{padding-top:calc(68px + 3rem)}.homepage .hp-section{padding:3.5rem 0}.homepage .hp-nav{gap:.6rem}.homepage .hp-logo{font-size:1.15rem}.homepage .hp-wa{width:44px;height:44px}.homepage .hp-menu-toggle{padding-inline:.65rem}.homepage .hp-hero-grid{gap:2rem}.homepage .hp-hero-price{padding:1.5rem}.homepage .hp-hero-price .hp-text-link{margin-top:1rem}.homepage .hp-btn{width:100%}.homepage .hp-services,.homepage .hp-steps{grid-template-columns:minmax(0,1fr)}.homepage .hp-case{padding:1rem;gap:1.5rem}.homepage .hp-contact form{padding:1.25rem}.homepage .hp-footer-grid{gap:2rem 1.25rem}.homepage .hp-footer-brand{grid-column:1/-1}}
@media(max-width:400px){.homepage .hp-footer-grid{grid-template-columns:minmax(0,1fr)}.homepage .hp-logo{font-size:1.05rem}.homepage .hp-logo img{width:28px;height:28px}}
/* Without JS the expanded navigation stays in flow rather than covering the hero. */
@media(max-width:999px){html:not(.js) .homepage .hp-header{position:relative}html:not(.js) .homepage .hp-hero{padding-top:3rem}}
@media(prefers-reduced-motion:reduce){.homepage *,.homepage *::before,.homepage *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Guided contact: reuse Apps tokens, with white controls on both surfaces. */
.homepage .hp-intake { min-width: 0; }
.homepage .hp-intake fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; }
.homepage .hp-intake legend { font-weight: 600; margin-bottom: .65rem; }
.homepage .hp-progress { font: 600 .8rem/1.5 var(--mono); margin-bottom: 1.2rem; }
.homepage .hp-topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.homepage .hp-topic { min-height: 44px; padding: .6rem .85rem; border: 1.5px solid var(--line-strong); border-radius: 999px; color: var(--ink); background: #fff; font-size: .9rem; }
.homepage .hp-topic[aria-pressed="true"] { color: #fff; background: #5028A0; border-color: #c084fc; box-shadow: inset 0 0 0 1px #fff; }
.homepage .hp-example { font-size: .9rem; line-height: 1.5; margin: 0 0 .75rem; }
.homepage .hp-intake input, .homepage .hp-intake textarea { font-size: 16px; }
.homepage .hp-intake .hp-optional { margin: 0 0 1.25rem; padding: 0 .9rem; background: transparent; border-color: currentColor; }
.homepage .hp-optional summary { font-size: .9rem; padding-block: .85rem; }
.homepage .hp-optional summary span { font-weight: 400; }
.homepage .hp-error { margin: -.5rem 0 1rem; font-weight: 600; }
.homepage .hp-contact .hp-error { color: #fff; }
.homepage .hp-message-summary { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1rem; margin: 1rem 0; }
.homepage .hp-intake-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.homepage .hp-intake-actions > a { flex: 1 1 170px; }
.homepage .hp-intake-actions > [data-back] { flex: 1 0 100%; }
.homepage .hp-contact .hp-intake .hp-secondary { color: #fff; border-color: #fff; }
.homepage .hp-contact .hp-review-title { font-size: 1.3rem; line-height: 1.3; margin: 0; }
html.hp-chat-open { overflow: hidden; }
.homepage .hp-chat { position: fixed; inset: auto 20px 20px auto; width: min(440px, calc(100% - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 40px), calc(var(--chat-height, 100dvh) - 40px)); margin: 0; padding: 0; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 16px 60px #16063640; overflow: hidden; }
.homepage .hp-chat[open] { display: flex; flex-direction: column; }
.homepage .hp-chat::backdrop { background: #16063655; }
.homepage .hp-chat-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; background: var(--band); color: #fff; }
.homepage .hp-chat h2 { font-size: 1.35rem; line-height: 1.3; margin: 0; }
.homepage .hp-chat-close { width: 44px; min-height: 44px; flex: none; border: 1px solid #ffffff80; border-radius: 50%; color: #fff; background: transparent; font-size: 1.7rem; line-height: 1; }
.homepage .hp-chat-body { padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.homepage #hp-chat-intro { font-size: .9rem; margin-bottom: 1.25rem; }
.homepage .hp-chat label span { color: var(--ink-soft); }
.homepage .hp-chat .hp-review-title { font-size: 1.15rem; }
.homepage .hp-chat .hp-handoff-note { margin-top: 1rem; }
.homepage .hp-chat-email { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 640px), (max-height: 500px) {
  .homepage .hp-chat { top: calc(var(--chat-top, 0px) + 8px); bottom: auto; right: max(8px, env(safe-area-inset-right, 0px)); width: min(440px, calc(100% - 16px)); max-height: min(calc(100dvh - 16px), calc(var(--chat-height, 100dvh) - 16px)); border-radius: 16px; }
  .homepage .hp-chat-body { padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) and (min-height: 501px) {
  .homepage .hp-chat { top: auto; bottom: calc(100% - var(--chat-height, 100dvh) - var(--chat-top, 0px) + max(8px, env(safe-area-inset-bottom, 0px))); }
}

/* Approved motion: finite native transitions, independent transform layers. */
.homepage .hp-hero-light { position:absolute; inset:-30%; pointer-events:none; opacity:0; background:radial-gradient(ellipse at center,#c084fc44,transparent 60%); }
.homepage .hp-service { transition: border-color 180ms, box-shadow 180ms, translate 200ms; }
@media(hover:hover) { .homepage .hp-service:hover { translate:0 -5px; box-shadow:0 10px 24px #5028a018; } }
.homepage .hp-service:active { translate:0 1px; }
.homepage .hp-steps { position:relative; isolation:isolate; }
.homepage .hp-steps li { position:relative; z-index:1; }
.homepage .hp-step-line { position:absolute; top:50%; left:4%; right:4%; height:2px; background:var(--accent); transform-origin:left center; z-index:0; }
.homepage .hp-case-enlarge { display:block; width:100%; border:0; padding:0; background:transparent; border-radius:6px; overflow:hidden; cursor:zoom-in; }
.homepage .hp-case-enlarge .hp-screenshot { display:block; transition:transform 260ms; }
@media(hover:hover) { .homepage .hp-case-enlarge:hover .hp-screenshot { transform:scale(1.025); } }
.homepage .hp-faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; }
.homepage .hp-faq summary::-webkit-details-marker { display:none; }
.homepage .hp-faq summary::after { content:'+'; flex:none; width:1.2em; text-align:center; color:var(--accent); font-size:1.4rem; }
.homepage .hp-faq details[open] summary::after { content:'−'; }
.homepage .hp-faq summary[aria-expanded="false"]::after { content:'+'; }
.homepage .hp-topic { transition:background-color 180ms, color 180ms, border-color 180ms; }
.homepage .hp-lightbox { position:fixed; inset:0; width:min(1480px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1.5px solid var(--ink); border-radius:12px; background:var(--paper); color:var(--ink); overflow:hidden; }
.homepage .hp-lightbox[open] { display:flex; flex-direction:column; }
.homepage .hp-lightbox header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; }
.homepage .hp-lightbox h2 { font-size:1rem; line-height:1.4; margin:0; }
.homepage .hp-lightbox button { min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); font-size:1.6rem; }
.homepage .hp-lightbox-image { overflow:auto; min-height:0; overscroll-behavior:contain; }
.homepage .hp-lightbox img { display:block; width:100%; height:auto; }
.homepage .hp-lightbox::backdrop { background:#160636aa; }
.homepage dialog[open]::backdrop { animation:hp-backdrop-in 240ms ease-out both; }
.homepage dialog[data-closing="true"]::backdrop { animation:hp-backdrop-out 200ms ease-in both; }
@keyframes hp-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes hp-backdrop-out { from { opacity:1; } to { opacity:0; } }
html.hp-lightbox-open { overflow:hidden; }
@media(max-width:640px) { .homepage .hp-step-line { top:4%; bottom:4%; left:50%; width:2px; height:auto; right:auto; transform-origin:center top; } .homepage .hp-lightbox { width:calc(100% - 16px); max-height:calc(100dvh - 16px); } .homepage .hp-lightbox header { padding-top:max(.75rem,env(safe-area-inset-top)); } }
/* Bounded mobile navigation: consent/contact remain intact beneath the modal layer. */
.mobile-menu-backdrop{position:fixed;inset:0;z-index:300;background:rgba(12,3,30,.65);touch-action:none}
.mobile-menu-backdrop[hidden]{display:none!important}
@media(max-width:999px){
 .homepage .hp-header.mobile-menu-open{position:fixed;top:var(--menu-top,0px);left:0;right:0;bottom:auto;z-index:301;background:var(--night,#160636);backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:env(safe-area-inset-top,0px)}
 .homepage .hp-menu-toggle{min-height:48px;height:48px;min-width:94px;width:auto;padding:0 .85rem;font-size:.93rem;font-weight:600;white-space:nowrap;flex-shrink:0}
 .homepage .hp-nav #hp-menu.open{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:100%;margin:0;gap:4px;padding:12px max(20px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));max-height:calc(var(--menu-height,100dvh) - 100% - 28px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--night,#160636);border-bottom:1px solid rgba(192,132,252,.3);border-radius:0 0 20px 20px;box-shadow:0 18px 36px rgba(12,3,30,.3);scroll-padding-block:12px;box-sizing:border-box}
 .homepage .hp-nav #hp-menu.open > li{width:100%;flex-shrink:0;list-style:none}
 .homepage .hp-nav #hp-menu.open a{display:flex;align-items:center;width:100%;min-height:48px;flex-shrink:0;padding:12px 16px;border-radius:10px;font-size:1rem;line-height:1.4;box-sizing:border-box}
 .homepage .hp-nav #hp-menu.open a:hover,.homepage .hp-nav #hp-menu.open a:focus-visible{background:rgba(192,132,252,.13);color:#fff;outline:2px solid var(--neon-soft,#c084fc);outline-offset:-2px}
 .homepage .hp-nav #hp-menu[hidden]{display:none!important}
}