/* Premium marketing layer. Palette and typography continue to come from custom.css. */
.sales-section { position: relative; isolation: isolate; }
.sales-section > .sales-container { position: relative; z-index: 1; }
#services::before, #process::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; background-image: radial-gradient(var(--sales-border) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.sales-heading h2 { position: relative; }
.sales-heading h2::after { content: ''; display: block; width: 48px; height: 3px; margin-top: 24px; background: linear-gradient(90deg, var(--sales-accent), var(--silver-gray)); border-radius: 4px; transform-origin: left; transition: width .5s ease; }
.sales-heading:hover h2::after { width: 88px; }
.experience-surface { position: relative; isolation: isolate; transition: border-color .35s, box-shadow .35s, transform .35s; }
.experience-surface::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--sales-accent) 9%, transparent), transparent 75%); transition: opacity .35s; }
.experience-surface:hover::before, .experience-surface:focus-within::before { opacity: 1; }
.experience-surface:hover { border-color: color-mix(in srgb, var(--sales-accent) 45%, var(--sales-border)); }
.sales-use-cases .service-card { border-radius: 24px; padding: 26px; overflow: hidden; }
.sales-use-cases .service-icon-wrapper { display: none; }
.sales-use-cases .service-title { margin-top: 24px; font-weight: 600; letter-spacing: -.025em; }
.sales-use-cases .service-cta { margin-top: auto; align-self: stretch; justify-content: space-between; }
.sales-use-cases .sales-checks { padding-bottom: 24px; }
.experience-art { height: 174px; flex-shrink: 0; position: relative; border: 1px solid var(--sales-border); border-radius: 14px; background: var(--sales-alt); color: var(--sales-accent); overflow: hidden; transform: perspective(800px) rotateX(var(--art-x, 0deg)) rotateY(var(--art-y, 0deg)); transition: transform .4s ease, box-shadow .4s; }
.service-card:hover .experience-art { box-shadow: 0 12px 28px -18px var(--sales-accent); }
.experience-window-bar { display: flex; gap: 10px; align-items: center; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--sales-border); font-size: 8px; color: var(--sales-muted); letter-spacing: .015em; }
.experience-window-dots { display: flex; gap: 3px; }
.experience-window-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--silver-gray); opacity: .55; }
.experience-live-dot { width: 5px; height: 5px; border-radius: 50%; margin-left: auto; background: var(--sales-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sales-accent) 10%, transparent); }
.experience-operation-row { display: flex; gap: 9px; align-items: center; margin: 11px 12px 0; padding: 9px; border: 1px solid var(--sales-border); border-radius: 8px; background: var(--sales-bg); font-size: 9px; color: var(--sales-ink); }
.experience-tiny-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sales-alt); color: var(--sales-accent); }
.experience-operation-row small { display: block; color: var(--sales-muted); font-size: 7px; margin-top: 3px; }
.experience-operation-row b { margin-left: auto; font-size: 7px; font-weight: 500; color: var(--sales-muted); }
.experience-art-line { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; overflow: hidden; }
.experience-art-line span { display: block; height: 100%; width: 45%; background: linear-gradient(90deg, transparent, var(--sales-accent), transparent); transform: translateX(-120%); }
.experience-flow { display: flex; align-items: center; padding: 24px 18px 12px; }
.experience-flow > span { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--sales-accent) 30%, var(--sales-border)); background: var(--sales-bg); display: grid; place-items: center; position: relative; }
.experience-flow i { font-size: 14px; }
.experience-flow small { position: absolute; top: 49px; font-size: 8px; color: var(--sales-muted); white-space: nowrap; }
.experience-flow-link { flex: 1; height: 1px; position: relative; background: var(--sales-border); overflow: hidden; }
.experience-flow-link::after { content: ''; display: block; width: 24px; height: 100%; background: var(--sales-accent); transform: translateX(-25px); }
.experience-art-caption { position: absolute; bottom: 10px; width: 100%; display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 7px; color: var(--sales-muted); }
.experience-art-caption i { width: 4px; height: 4px; border-radius: 50%; background: var(--sales-accent); }
.experience-product-shell { display: flex; gap: 12px; padding: 14px; height: 140px; }
.experience-product-nav { width: 32px; flex-shrink: 0; border-right: 1px solid var(--sales-border); display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.experience-product-nav i { width: 15px; height: 5px; background: var(--silver-gray); border-radius: 3px; opacity: .3; }
.experience-product-nav i:first-child { background: var(--sales-accent); opacity: .8; }
.experience-product-content { flex: 1; min-width: 0; }
.experience-wire-heading { height: 6px; width: 60%; background: var(--silver-gray); opacity: .4; border-radius: 3px; margin: 4px 0 14px; }
.experience-wire-cards { display: flex; gap: 8px; }
.experience-wire-cards i { flex: 1; height: 30px; border: 1px solid var(--sales-border); border-radius: 5px; background: var(--sales-bg); }
.experience-product-content svg { margin-top: 10px; width: 100%; height: 30px; stroke-dasharray: 250; stroke-dashoffset: 0; }
.experience-release-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--sales-accent); }
.experience-release-mark svg { width: 56px; height: 56px; transform-origin: center; }
.experience-release-mark span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sales-offer { border-radius: 28px; box-shadow: 0 30px 90px -60px var(--sales-accent); }
.sales-offer-intro { position: relative; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--sales-accent) 5%, transparent), transparent 70%); }
.sales-delivery-list li { transition: padding .3s, background .3s; border-radius: 8px; }
.sales-delivery-list li:hover { padding-left: 12px; background: color-mix(in srgb, var(--sales-accent) 4%, transparent); }
.experience-timeline { position: relative; }
.experience-timeline > li { position: relative; }
.experience-timeline .sales-step-marker { position: relative; }
.experience-timeline .sales-step-marker::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: linear-gradient(90deg, var(--sales-accent), var(--silver-gray)); transition: width .6s; }
.experience-timeline li:hover .sales-step-marker::after, .experience-timeline li:focus-within .sales-step-marker::after { width: 100%; }
.experience-timeline .sales-step-marker > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--sales-border); border-radius: 14px; font-size: 18px; background: var(--sales-bg); box-shadow: 0 6px 16px -12px var(--sales-accent); transition: color .3s, background .3s, transform .3s; }
.experience-timeline li:hover .sales-step-marker > span { background: var(--primary-blue); color: white; transform: translateY(-3px); }
.experience-timeline .process-step-card { border-radius: 18px; height: calc(100% - 89px); }
.experience-timeline .process-step-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -28px var(--sales-accent); }
.experience-architecture { padding: 24px; border: 1px solid var(--sales-border); border-radius: 22px; background: var(--sales-bg); box-shadow: 0 16px 40px -36px var(--sales-ink); }
.experience-diagram-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--sales-muted); margin-bottom: 22px; }
.experience-layer { display: flex; justify-content: center; gap: 8px; font-size: 10px; }
.experience-layer > span { padding: 9px 12px; border: 1px solid var(--sales-border); border-radius: 8px; background: var(--sales-alt); }
.experience-layer-core { padding: 15px; color: var(--sales-accent); border: 1px solid color-mix(in srgb, var(--sales-accent) 30%, var(--sales-border)); border-radius: 10px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--sales-accent) 5%, var(--sales-bg)); align-items: center; }
.experience-layer-link { width: 1px; height: 20px; background: var(--sales-border); margin: 0 auto; position: relative; overflow: hidden; }
.experience-layer-link::after { content: ''; position: absolute; width: 1px; height: 10px; background: var(--sales-accent); transform: translateY(-10px); }
.sales-principles { gap: 24px; }
.sales-principles article { border: 1px solid var(--sales-border); border-radius: 16px; background: var(--sales-bg); padding: 22px; transition: transform .3s, border-color .3s; }
.sales-principles article:hover { transform: translateX(5px); border-color: var(--sales-accent); }
.sales-principles article h3 { font-size: 16px; }
.sales-principles article p { font-size: 13px; }
.sales-working-agreement { padding: 44px; border: 1px solid var(--sales-border); border-radius: 24px; background: var(--sales-alt); }
.sales-working-agreement li { border-left: 2px solid var(--sales-border); padding-left: 20px; transition: border-color .3s, transform .3s; }
.sales-working-agreement li:hover { border-color: var(--sales-accent); transform: translateX(4px); }
.sales-proof { border-radius: 22px; }
.sales-proof:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -36px var(--sales-accent); }
.sales-avatar { box-shadow: 0 0 0 5px var(--sales-alt); transition: transform .4s; }
.sales-proof:hover .sales-avatar { transform: rotate(-7deg); }
.experience-faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.experience-faq-intro { position: sticky; top: 120px; }
.experience-faq-intro .sales-heading { margin-bottom: 24px; }
.experience-faq-contact p { font-size: 13px; color: var(--sales-muted); margin-bottom: 12px; }
.experience-faq-contact a { font-size: 14px; font-weight: 600; color: var(--sales-accent); display: inline-flex; gap: 24px; align-items: center; }
.experience-question-art { height: 156px; position: relative; width: min(100%, 320px); margin: 28px 0; }
.experience-question-orbit { width: 140px; height: 140px; border: 1px dashed var(--sales-border); border-radius: 50%; position: absolute; left: 54px; top: 8px; }
.experience-question-orbit::before { content: ''; position: absolute; inset: 16px; border: 1px solid var(--sales-border); border-radius: 50%; }
.experience-question-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sales-accent); left: 9px; top: 24px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sales-accent) 8%, transparent); }
.experience-question-symbol { position: absolute; left: 102px; top: 50px; font-size: 44px; line-height: 1; font-family: Poppins, Inter, sans-serif; color: var(--sales-accent); }
.experience-question-chip,.experience-answer-chip { position: absolute; font-size: 10px; padding: 10px 14px; border: 1px solid var(--sales-border); border-radius: 10px; background: var(--sales-bg); box-shadow: 0 8px 28px -18px var(--sales-accent); }
.experience-question-chip { top: 20px; left: 4px; }
.experience-answer-chip { bottom: 18px; left: 126px; display: flex; gap: 12px; align-items: center; }
.experience-answer-chip i { color: var(--sales-accent); }
.experience-faq-layout .sales-faq { display: grid; gap: 12px; }
.experience-faq-layout .sales-faq details { border: 1px solid var(--sales-border); border-radius: 16px; background: var(--sales-alt); overflow: hidden; }
.experience-faq-layout .sales-faq details[open] { background: var(--sales-bg); border-color: color-mix(in srgb, var(--sales-accent) 45%, var(--sales-border)); box-shadow: 0 12px 28px -24px var(--sales-accent); }
.experience-faq-layout .sales-faq summary { padding: 24px; min-height: 96px; gap: 18px; align-items: center; }
.experience-faq-layout .sales-faq summary .experience-faq-question { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--sales-ink); font-weight: 600; }
.experience-faq-question small { font-size: 9px; color: var(--sales-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.experience-faq-layout .sales-faq details[open] summary .experience-faq-question { transform: none; }
.experience-faq-layout .sales-faq .experience-faq-question > span { font-size: inherit; color: inherit; font-weight: inherit; }
.experience-faq-layout .sales-faq details[open] summary .experience-faq-question > span { transform: none; }
.experience-faq-layout .sales-faq .experience-faq-toggle { width: 32px; height: 32px; border: 1px solid var(--sales-border); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: transform .3s, background .3s; color: var(--sales-accent); }
.experience-faq-toggle svg { width: 16px; height: 16px; }
.experience-faq-layout .sales-faq details[open] .experience-faq-toggle { background: color-mix(in srgb, var(--sales-accent) 8%, transparent); transform: rotate(45deg); }
.experience-faq-layout .sales-faq details[data-closing=true] .experience-faq-toggle { transform: rotate(0); }
.experience-faq-layout .sales-faq details p { padding: 0 24px 24px; font-size: 14px; line-height: 1.85; }
.sales-faq-answer { position: relative; }
.experience-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--sales-alt); padding-top: 0; }
.experience-footer-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--sales-accent) 24%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .5; mask-image: radial-gradient(ellipse at 25% 0%, #000, transparent 80%); z-index: -1; }
.experience-footer-invitation { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 64px 0; border-bottom: 1px solid var(--sales-border); margin-bottom: 56px; }
.experience-footer .experience-footer-invitation h2 { font-size: clamp(28px, 3.5vw, 48px); font-family: Poppins, Inter, sans-serif; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.experience-footer .sales-eyebrow { margin: 0 0 16px; }
.experience-footer .sales-footer-brand { display: inline-flex; align-items: center; gap: 14px; }
.experience-footer-logo { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--sales-border); border-radius: 16px; background: var(--sales-bg); }
.experience-footer-logo img { width: 36px; height: 36px; }
.experience-footer-digital { display: block; font-family: Inter, sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; color: var(--sales-muted); }
.experience-footer .sales-footer-top > div > a:not(.sales-footer-brand) { transition: color .2s, transform .2s; width: fit-content; }
.experience-footer .sales-footer-top > div > a:not(.sales-footer-brand):hover { transform: translateX(4px); }
.experience-reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.experience-awaiting { opacity: 0; transform: translateY(28px); }
.experience-is-visible .experience-art-line span { animation: experience-send 3s ease-in-out 3; }
.experience-is-visible .experience-flow-link::after { animation: experience-send 2.8s ease-in-out 3; }
.experience-is-visible .experience-flow-link:nth-of-type(2)::after { animation-delay: .7s; }
.experience-is-visible .experience-product-content svg { animation: experience-draw 1.6s ease .4s both; }
.experience-is-visible .experience-layer-link::after { animation: experience-connect 2.4s ease-in-out 3; }
.experience-is-visible .experience-question-orbit { animation: experience-orbit 18s linear 2; }
.experience-motion-paused .sales-section *, .experience-motion-paused .sales-section *::after { animation-play-state: paused !important; }
@keyframes experience-send { 0%,15% { transform: translateX(-120%); } 85%,100% { transform: translateX(350%); } }
@keyframes experience-draw { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 0; } }
@keyframes experience-connect { to { transform: translateY(28px); } }
@keyframes experience-orbit { to { transform: rotate(360deg); } }
@media(max-width:1100px) { .experience-faq-layout { gap: 36px; } .experience-operation-row { gap: 6px; margin-inline: 8px; padding: 7px; } .experience-operation-row b { display: none; } .experience-flow { padding-inline: 12px; } .sales-use-cases .service-card { padding: 22px; } .experience-art { height: 166px; } }
@media(max-width:767px) { .experience-faq-layout { grid-template-columns: 1fr; gap: 32px; } .experience-faq-intro { position: static; } .experience-question-art { display: none; } .experience-faq-layout .sales-faq summary { padding: 20px; } .experience-faq-layout .sales-faq details p { padding: 0 20px 20px; } .experience-faq-layout .sales-faq summary .experience-faq-question { font-size: 14px; } .sales-working-agreement { padding: 28px; } .experience-footer-invitation { align-items: start; flex-direction: column; padding: 48px 0; margin-bottom: 40px; } .experience-timeline .process-step-card { height: auto; } .experience-art { height: 174px; } .experience-operation-row { padding: 9px; margin-inline: 12px; } .experience-operation-row b { display: inline; } }
@media(max-width:360px) { .experience-layer { font-size: 8px; gap: 4px; } .experience-layer > span { padding: 8px; } .experience-architecture { padding: 18px; } .experience-faq-layout .sales-faq summary { padding: 18px; } .experience-operation-row b { display: none; } }
@media(prefers-reduced-motion:reduce) { .experience-reveal,.experience-awaiting { opacity: 1; transform: none; transition: none; } .experience-art,.sales-proof:hover,.sales-principles article:hover { transform: none; } .experience-product-content svg { stroke-dashoffset: 0; } }
@media(hover:none), (pointer:coarse) { .experience-surface::before { display: none; } .experience-art { transform: none; } }
@media(forced-colors:active) { .experience-art,.experience-architecture,.experience-faq-layout .sales-faq details,.experience-footer-logo { border-color: CanvasText; } .experience-surface::before,.experience-footer-dots { display: none; } }

/* Text accents stay readable on both dark studio surfaces. */
body.dark-mode .sales-section, body.dark-mode .sales-footer { --sales-accent: color-mix(in srgb, var(--primary-blue-light) 80%, var(--text-primary-dark) 20%); }
.experience-reveal.experience-awaiting { transform: translateY(28px); }
@media(prefers-reduced-motion:reduce) { .experience-reveal.experience-awaiting { transform: none; } }

.footer-social-links { display:flex; align-items:center; gap:10px; margin-top:22px; }
.footer-social-link { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--sales-border); border-radius:11px; color:var(--sales-ink); background:var(--sales-bg); transition:transform .25s,border-color .25s,color .25s; }
.footer-social-link svg { width:17px; height:17px; }
.footer-social-link:enabled, a.footer-social-link { cursor:pointer; }
a.footer-social-link:hover { color:var(--sales-accent); border-color:var(--sales-accent); transform:translateY(-3px); }
button.footer-social-link:disabled { opacity:.45; cursor:default; }
.contact-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sales-contact-status { color:var(--sales-muted); font-size:13px; line-height:1.8; margin-top:18px; overflow-wrap:anywhere; }
.sales-contact-status[data-tone=error] { color:#b91c1c; }
body.dark-mode .sales-contact-status[data-tone=error] { color:#fca5a5; }
.sales-brief[aria-busy=true] .form-input, .sales-brief[aria-busy=true] .form-textarea { opacity:.75; }
.sales-brief .form-submit-btn { width:100%; min-height:56px; }
.portfolio-card:focus-within .portfolio-image-overlay { opacity:1; }
.portfolio-card:focus-within .portfolio-overlay-content { opacity:1; transform:translateY(0); }
.portfolio-title a { color:inherit; text-decoration:none; }
.portfolio-title a:hover { color:var(--primary-blue); }
body.dark-mode .portfolio-title a:hover { color:var(--primary-blue-light); }

/* Optional, non-modal analytics choice; it never changes page layout. */
.analytics-consent { position:fixed; right:24px; bottom:24px; width:min(420px,calc(100% - 40px)); max-height:calc(100svh - 112px); overflow-y:auto; z-index:70; padding:24px; border:1px solid var(--border-light); border-radius:20px; background:var(--bg-primary-light); color:var(--text-primary-light); box-shadow:0 18px 64px -26px rgba(15,23,42,.35); font-family:Inter,sans-serif; }
.analytics-consent[hidden] { display:none !important; }
.analytics-consent-heading { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.analytics-consent h2 { font-family:Poppins,Inter,sans-serif; font-size:17px; line-height:1.4; font-weight:600; letter-spacing:-.025em; margin:0; }
.analytics-consent-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bg-secondary-light); color:var(--primary-blue); flex-shrink:0; }
.analytics-consent-mark svg { width:20px; height:20px; }
.analytics-consent p { font-size:13px; line-height:1.75; color:var(--text-secondary-light); margin:0; }
.analytics-consent details { margin-top:12px; }
.analytics-consent summary { cursor:pointer; font-size:12px; font-weight:600; padding:5px 0; color:var(--primary-blue); }
.analytics-consent details p { margin-top:8px; font-size:12px; }
.analytics-consent-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.analytics-consent-actions button { min-height:44px; padding:10px; border:1px solid var(--border-light); border-radius:10px; background:var(--bg-secondary-light); color:var(--text-primary-light); font:600 12px/1.5 Inter,sans-serif; cursor:pointer; transition:border-color .2s,background .2s; }
.analytics-consent-actions button:hover { border-color:var(--primary-blue); background:var(--bg-primary-light); }
.analytics-consent-actions button:disabled { opacity:.5; cursor:default; }
.analytics-consent :is(button,summary):focus-visible { outline:3px solid var(--primary-blue); outline-offset:3px; }
.footer-preferences { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.analytics-preferences { color:var(--sales-muted); font:inherit; cursor:pointer; background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; }
.analytics-preferences:hover { color:var(--sales-accent); }
.analytics-preferences:disabled { cursor:default; opacity:.5; }
body.dark-mode .analytics-consent { border-color:var(--border-dark); background:var(--bg-primary-dark); color:var(--text-primary-dark); }
body.dark-mode .analytics-consent p { color:var(--text-secondary-dark); }
body.dark-mode .analytics-consent-mark { background:var(--bg-secondary-dark); color:var(--text-primary-dark); }
body.dark-mode .analytics-consent summary { color:var(--text-primary-dark); }
body.dark-mode .analytics-consent-actions button { border-color:var(--border-dark); background:var(--bg-secondary-dark); color:var(--text-primary-dark); }
body.dark-mode .analytics-consent-actions button:hover { border-color:var(--primary-blue-light); background:var(--bg-primary-dark); }
@media(max-width:767px) { .analytics-consent { right:20px; bottom:20px; padding:20px; } .footer-preferences { gap:18px; } }
@media(prefers-reduced-motion:reduce) { .analytics-consent * { transition:none !important; } }
@media(forced-colors:active) { .analytics-consent,.analytics-consent-actions button { border-color:CanvasText; } }