:root {
  --color-bg: #010102;
  --color-surface: #0f1011;
  --color-surface-alt: #141516;
  --color-border: #23252a;
  --color-text: #f7f8f8;
  --color-text-dim: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-text-label: #9aa0ab;
  --color-accent: #286bf4;
  --color-accent-light: #6b96ff;
}
html, body { margin: 0; padding: 0; background: var(--color-bg); }
body { font-family: 'Inter', sans-serif; color: var(--color-text); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent-light); }
::selection { background: rgba(41,110,249,.35); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes glowPulse { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes bubbleIn { 0%, 8% { opacity: 0; transform: translateY(10px) scale(.96); } 16%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes typingDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
/* transform+opacity ring pulse (replaces box-shadow ringPulse — avoids per-frame repaint on infinite loops) */
.pulse-ring { position: relative; }
.pulse-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(41,110,249,.55); animation: pulseRing var(--pulse-dur, 2.4s) cubic-bezier(.22,1,.36,1) infinite; pointer-events: none; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes flowDot { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* dot rides a full-width wrapper on transform (GPU, subpixel) instead of animating `left` (layout, snaps to px) */
@keyframes slideGlide { 0% { transform: translateX(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.slide-dot { will-change: transform; pointer-events: none; }
.slide-dot::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #6b96ff; box-shadow: 0 0 10px rgba(107,150,255,.9); }
@keyframes cellPulse { 0%, 100% { background: rgba(41,110,249,.18); } 50% { background: rgba(41,110,249,.55); } }
@keyframes bellRing { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }
@keyframes tickerUp { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-25%); } 50%, 70% { transform: translateY(-50%); } 75%, 95% { transform: translateY(-75%); } 100% { transform: translateY(-100%); } }
/* React Bits-inspired effects (BlurText, ShinyText, ScrollReveal, CountUp) + Uiverse send button — class/keyframe parts can't be inline */
@keyframes wordBlurIn { from { opacity: 0; filter: blur(10px); transform: translateY(26px); } to { opacity: 1; filter: blur(0); transform: none; } }
.hero-word { display: inline-block; animation: wordBlurIn .85s cubic-bezier(.22,1,.36,1) both; color: var(--color-text); }
.rv { opacity: 0; transform: translateY(26px); filter: blur(4px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; filter: blur(0); }
.send-btn { position: relative; }
.send-btn .plane-wrap { display: block; transform-origin: center; transition: transform .35s ease-in-out; }
.send-btn:hover .plane-wrap { animation: planeFly .6s ease-in-out infinite alternate; }
.send-btn:hover .plane-wrap svg { transform: translateX(3.2em) rotate(45deg) scale(1.15); }
.send-btn svg { transition: transform .35s ease-in-out; }
.send-btn .send-label { display: block; transition: transform .35s ease-in-out, opacity .3s; }
.send-btn:hover .send-label { transform: translateX(4em); opacity: 0; }
.send-btn:active { transform: scale(.96); }
@keyframes planeFly { from { transform: translateY(.12em); } to { transform: translateY(-.12em); } }
/* hover-group + pseudo-element effects (adapted from user's Uiverse snippets) — can't be expressed inline */
@keyframes blobDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(46px,30px) scale(1.25); } }
@keyframes blobDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,-26px) scale(1.2); } }
.auto-card { position: relative; transition: box-shadow .45s ease, border-color .45s ease; }
.auto-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; top: -50px; left: -50px; background: rgba(41,110,249,.13); filter: blur(30px); animation: blobDriftA 9s ease-in-out infinite; pointer-events: none; }
.auto-card::before { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; bottom: -45px; right: -45px; background: rgba(2,74,216,.12); filter: blur(28px); animation: blobDriftB 11s 2s ease-in-out infinite; pointer-events: none; }
.auto-card:hover { box-shadow: 0 0 34px rgba(41,110,249,.16); border-color: rgba(41,110,249,.35) !important; }
.svc-card { transition: transform .45s cubic-bezier(.23,1,.32,1), filter .45s cubic-bezier(.23,1,.32,1), border-color .3s ease; }
.svc-card:hover { transform: scale(1.03); border-color: rgba(41,110,249,.4) !important; z-index: 2; }
.svc-grid:hover > .svc-card:not(:hover) { filter: blur(3px) brightness(.75); transform: scale(.98); }
.work-card { position: relative; }
.work-card::before { content: ""; z-index: 0; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(-45deg, rgba(41,110,249,.55) 0%, rgba(0,219,222,.35) 100%); filter: blur(22px); opacity: 0; transform: scale(.95); transition: opacity .5s ease; pointer-events: none; }
.work-card:hover::before { opacity: .5; }
.work-card > * { position: relative; z-index: 1; }
.work-shot { width: 100%; height: 100%; background-size: cover; background-position: top center; transition: transform .7s cubic-bezier(.23,1,.32,1); }
.work-card:hover .work-shot { transform: scale(1.05); }
.work-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(1,1,2,.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .5s cubic-bezier(.23,1,.32,1); }
.work-overlay span { border: 1px solid rgba(247,248,248,.5); color: var(--color-text); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; padding: 10px 20px; border-radius: 999px; transform: translateY(14px); transition: transform .5s cubic-bezier(.23,1,.32,1); }
.work-card:hover .work-overlay { opacity: 1; }
.step-card { position: relative; transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease; }
.step-card:hover { transform: translateY(-4px); border-color: rgba(41,110,249,.35) !important; background: #111216 !important; }
.step-badge { position: relative; z-index: 1; transition: box-shadow .4s ease, border-color .3s ease; }
.step-card:hover .step-badge { box-shadow: 0 0 0 4px rgba(41,110,249,.14); border-color: var(--color-accent) !important; }
.proc-nav-btn:hover .step-badge { border-color: rgba(41,110,249,.4) !important; }
.proc-nav-btn.active .step-badge { background: linear-gradient(rgba(41,110,249,.14),rgba(41,110,249,.14)), #141516 !important; border-color: var(--color-accent) !important; box-shadow: 0 0 0 4px rgba(41,110,249,.14); }
.proc-nav-btn.active .proc-nav-label { color: var(--color-text) !important; }
@media (max-width: 900px) {
  .proc-nav-label { display: none; }
}
/* left column: heading pinned to the card stack's top edge, stepper to its bottom — both nudged slightly higher */
.proc-left { display: flex; flex-direction: column; justify-content: flex-start; gap: 90px; padding: 8px 0; }
@media (max-width: 600px) {
  .proc-left { padding: 0; gap: 32px; }
  .proc-nav { gap: 40px !important; }
  /* mobile only: center the heading/steps, and put the step circles below the card instead of above it */
  #steps-grid { display: flex !important; flex-direction: column !important; }
  .proc-left { display: contents; }
  .proc-left > div:first-child { text-align: center; }
  #proc-cardswap { order: 2; }
  .proc-left > .proc-nav { order: 3; align-self: center !important; }
}
#proc-cardswap { position: relative; height: 440px; perspective: 1000px; }
#proc-cardswap .cardswap-card { padding: 0; }
@media (max-width: 600px) {
  #proc-cardswap { height: 470px; }
}
.cardswap-card { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--color-border); background: linear-gradient(135deg,var(--color-surface-alt),#0a0b0c); padding: 6px 10px; box-shadow: 0 10px 24px rgba(0,0,0,.5); backface-visibility: hidden; }
@media (max-width: 900px) {
  #darbai-cardswap { display: none; }
}
.flow-cap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; color: var(--color-text-label); margin: 0 0 18px; }
.flow-cap b { color: var(--color-accent-light); font-weight: 500; }
.flow-cap svg { flex-shrink: 0; opacity: .6; }
.cal-cell { aspect-ratio: 1; border-radius: 5px; background: var(--color-surface-alt); display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #52565e; }
.cal-today { background: transparent; border: 1px solid #3e3e44; color: var(--color-text-dim); }
.cal-booked { background: rgba(41,110,249,.22); color: #dbe6ff; animation: cellPulse 2.6s infinite; }
@keyframes chatMsg1Loop { 0%,5% { opacity: 0; transform: translateY(10px) scale(.96); } 10% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; transform: translateY(-6px); } }
@keyframes chatTypingLoop { 0%,12% { opacity: 0; } 16% { opacity: 1; } 32% { opacity: 1; } 38%,100% { opacity: 0; } }
@keyframes chatMsg2Loop { 0%,40% { opacity: 0; transform: translateY(10px) scale(.96); } 46% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%,100% { opacity: 0; transform: translateY(-6px); } }
.chat-msg1 { animation: chatMsg1Loop 9s ease infinite; }
.chat-typing { animation: chatTypingLoop 9s ease infinite; }
.chat-msg2 { animation: chatMsg2Loop 9s ease infinite; }
@keyframes bubbleAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.call-bubble { animation: bubbleAppear .35s cubic-bezier(.22,1,.36,1) both; }
#call-thread-inner { transition: transform .12s linear; will-change: transform; }
#call-greet { animation: chatMsg1Loop 9s ease infinite; }
@keyframes cursorBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.type-cursor { display: inline-block; width: 2px; height: 12px; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: cursorBlink .9s step-end infinite; }
@keyframes iconBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.icon-badge { transition: transform .3s ease, background .3s ease; animation: iconBreathe 4s ease-in-out infinite; }
.auto-card:hover .icon-badge { transform: scale(1.14) !important; background: rgba(41,110,249,.26) !important; }
.brand-mark { display: grid; transition: transform .3s ease, box-shadow .3s ease; animation: iconBreathe 5s ease-in-out infinite; box-shadow: 0 0 0 rgba(41,110,249,0); }
.brand-mark:hover { transform: scale(1.15) rotate(-6deg); box-shadow: 0 0 16px rgba(41,110,249,.55); }
.contact-icon { transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.contact-icon:hover { transform: scale(1.12); border-color: var(--color-accent) !important; background: rgba(41,110,249,.14) !important; }
.win-dot { animation: winDotPulse 3s ease-in-out infinite; }
.win-dot:nth-child(2) { animation-delay: .4s; }
.win-dot:nth-child(3) { animation-delay: .8s; }
@keyframes winDotPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.flow-icon-idle { animation: iconBreathe 3.4s ease-in-out infinite; }
.back-top svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.back-top:hover svg { transform: translateY(-3px); }
.step-badge { animation: iconBreathe 4.6s ease-in-out infinite; }
.cal-today { animation: winDotPulse 2.4s ease-in-out infinite; }
@keyframes lanyardSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.lanyard-sway { animation: lanyardSway 4.5s ease-in-out infinite; }
.lanyard-sway.dragging { animation: none; }
.lanyard-card input, .lanyard-card textarea { background: #f4f4f6; border: 1px solid #e2e2e6; border-radius: 8px; padding: 11px 13px; color: #1a1a1a; font-size: 14px; font-family: Inter, sans-serif; outline: none; box-sizing: border-box; width: 100%; max-width: 100%; }
.lanyard-card textarea { resize: vertical; }
#lanyard-handle:active { cursor: grabbing; }
.footer-email-link { transition: color .2s ease, gap .2s ease; }
.footer-email-link:hover { color: var(--color-accent-light); }
.lanyard-card input:focus, .lanyard-card textarea:focus { border-color: var(--color-accent); }
.lanyard-card label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: #7a7a80; }
@keyframes beamGlow { to { stroke-dashoffset: -520; } }
.beam-glow { stroke-dasharray: 10 510; animation: beamGlow 2.6s linear infinite; }
.beam-node { transition: transform .3s ease, box-shadow .3s ease; }
.beam-node:hover { transform: scale(1.1); box-shadow: 0 0 18px rgba(41,110,249,.35); }
@keyframes rotateWordIn { from { opacity: 0; transform: translateY(55%); } to { opacity: 1; transform: translateY(0); } }
.rotate-word { display: inline-block; animation: rotateWordIn .45s cubic-bezier(.22,1,.36,1) both; color: var(--color-accent-light); font-weight: 600; }
.rotate-word-hero { min-width: 5.6ch; text-align: center; }
.anim-paused, .anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }
.prog-fill { width: 80%; transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.22,1,.36,1) .35s; }
.prog.in .prog-fill { transform: scaleX(1); }
.work-card:hover .work-overlay span { transform: none; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tool-icon { transition: transform .3s ease, box-shadow .3s ease; animation: iconFloat 5s ease-in-out infinite; }
.tool-icon:hover { transform: translateY(-6px) scale(1.08) !important; box-shadow: 0 8px 24px rgba(41,110,249,.28) !important; }
.proc-line { position: absolute; height: 2px; background: linear-gradient(90deg,var(--color-accent),var(--color-accent-light)); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22,1,.36,1) .2s; overflow: hidden; }
.proc-wrap.in .proc-line { transform: scaleX(1); }
.proc-line::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); opacity: 0; }
.proc-wrap.in .proc-line::after { opacity: 1; animation: procFlash 2.2s ease-in-out 1.8s infinite; }
@keyframes procFlash { 0% { transform: translateX(-120%); } 100% { transform: translateX(430%); } }
.nav-link { transition: color .2s ease; }
.nav-link.active { color: #fff !important; font-weight: 600; }
.nav-link:not(.active):hover { color: var(--color-text) !important; }
.back-top-btn { width: 50px; height: 50px; border-radius: 50%; background-color: rgb(20,20,20); border: none; font-weight: 600; display: block; box-shadow: 0 0 0 4px rgba(41,110,249,.25); cursor: pointer; transition-duration: .3s; overflow: hidden; position: relative; -webkit-tap-highlight-color: transparent; outline: none; }
.back-top-svg { position: absolute; top: 50%; left: 50%; width: 12px; transform: translate(-50%,-50%); transition-duration: .3s; }
.back-top-svg path { fill: #fff; }
.back-top-btn:hover { width: 140px; border-radius: 50px; transition-duration: .3s; background-color: #286bf4; }
.back-top-btn:hover .back-top-svg { transition-duration: .3s; transform: translate(-50%,-250%); }
.back-top-btn::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: "Back to Top"; color: #fff; font-size: 0; white-space: nowrap; }
.back-top-btn:hover::before { font-size: 13px; opacity: 1; transition-duration: .3s; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #27a644; animation: glowPulse 1.8s infinite; margin-right: 6px; box-shadow: 0 0 6px rgba(39,166,68,.7); }
.nav-hamburger { display: none; }
.mobile-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 82vw); transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); z-index: 110; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.5); box-sizing: border-box; }
.mobile-panel.open { transform: translateX(0); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); pointer-events: none; transition: background .35s ease; z-index: 105; }
.mobile-backdrop.open { background: rgba(0,0,0,.55); pointer-events: auto; }
#qr-toggle:hover { color: var(--color-accent-light); }
.qr-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1); }
.qr-panel.open { grid-template-rows: 1fr; }
.qr-panel > div { overflow: hidden; }
#qr-box svg { width: 100%; height: 100%; display: block; }
#qr-toggle-d:hover { border-color: #3e3e44; }
#qr-toggle svg, #qr-toggle-d svg { transition: transform .25s cubic-bezier(.22,1,.36,1); }
#qr-toggle:hover svg, #qr-toggle-d:hover svg { transform: scale(1.1) rotate(-4deg); }
.qr-popover { position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 14px; background: #0f1011; border: 1px solid #23252a; box-shadow: 0 20px 45px rgba(0,0,0,.5); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.qr-popover.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#qr-box-d svg { width: 100%; height: 100%; display: block; }
.qr-panel > div > div { opacity: 0; transition: opacity .3s ease .08s; }
.qr-panel.open > div > div { opacity: 1; }
#qr-box svg, #qr-box-d svg { opacity: 0; transition: opacity .3s ease; }
#qr-box svg.in, #qr-box-d svg.in { opacity: 1; }
@media (max-width: 900px) {
  .nav-links-desktop { display: none !important; }
  .nav-hamburger { display: grid !important; }
}
@media (max-width: 480px) {
  .nav-cta-desktop { display: none !important; }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 480px) {
  .how-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  /* prevents the fixed chat FAB from covering the last hero stat on first paint */
  #top { padding-top: 120px !important; padding-bottom: 72px !important; }
  /* services: show 4 of 8 cards behind a toggle so the section doesn't dominate the scroll */
  #services-grid:not(.expanded) .svc-extra { display: none !important; }
  #services-toggle { display: block !important; }
  .svc-card { padding: 20px !important; gap: 10px !important; }
  /* stat strip: two stats on top, one centered underneath (triangle layout) */
  #hero-stats { margin-top: 40px !important; flex-wrap: wrap !important; align-items: stretch !important; row-gap: 20px !important; }
  #hero-stats > span[style*="width:1px"] { display: none; }
  #hero-stats > span { flex-direction: column !important; align-items: center !important; gap: 5px !important; padding: 0 4px !important; text-align: center; }
  #hero-stats > span:nth-child(1), #hero-stats > span:nth-child(3) { flex: 0 0 45%; }
  #hero-stats > span:nth-child(5) { flex: 0 0 100%; }
  #hero-stats > span > b { font-size: 30px !important; }
  #hero-stats > span > span { font-size: 11px !important; letter-spacing: .06em !important; white-space: nowrap; }
  /* keep both hero CTAs on one line */
  .hero-ctas { flex-wrap: nowrap !important; }
  .hero-ctas > a { padding: 13px 18px !important; font-size: 14px !important; white-space: nowrap; }
}
@media (max-height: 700px) and (max-width: 600px) {
  /* short/older phone screens: shrink hero rhythm so content clears the fixed chat FAB on first paint */
  #top { padding-top: 84px !important; padding-bottom: 96px !important; }
  #top h1 { font-size: 36px !important; margin: 16px 0 12px !important; }
  #top p[data-t="hero_sub"] { margin: 0 auto 18px !important; }
  #hero-stats { margin-top: 20px !important; }
  #hero-stats > span > b { font-size: 22px !important; }
}
@media (max-width: 900px) {
  .reviews-layout { grid-template-columns: 1fr !important; }
  .reviews-layout > div:first-child { position: static !important; width: 100%; max-width: 480px; margin: 0 auto; box-sizing: border-box; }
}
@media (max-width: 560px) {
  #reviews-grid { column-count: 1 !important; }
}
@media (min-width: 961px) {
  /* keeps card title + meta on the same row so the work-card grid stays aligned when a title is longer than its siblings (only matters once cards sit side by side) */
  .work-card h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* --- ported style-hover states from the prototype --- */
.btn-primary { background:var(--color-accent); color:#fff; transition:background .2s, transform .2s; }
.btn-primary:hover { background:#4d8afd; color:#fff; }

/* cta letter-flip (Susisiekti buttons) */
.cta-flip { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.cta-flip .span-mother { display: flex; justify-content: center; line-height: 1; }
.cta-flip .span-mother2 { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 50%; height: 1em; margin-top: -.5em; overflow: hidden; pointer-events: none; line-height: 1; }
.cta-flip .span-mother2 span { transform: translateY(-3em); transition-property: transform; }
.cta-flip:hover .span-mother span { transform: translateY(3em); transition-property: transform; }
.cta-flip:hover .span-mother2 span { transform: translateY(0); }
.hero-cta:hover { transform:translateY(-1px); }
.btn-ghost { border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-dim); transition:border-color .2s, color .2s; }
.btn-ghost:hover { border-color:#3e3e44; color:var(--color-text); }
.nav-plain:hover { color:var(--color-text); }
.contact-line { color:var(--color-text-dim); }
.contact-line:hover { color:var(--color-accent-light); }
.work-card:hover { border-color:#3e3e44 !important; transform:translateY(-3px); color:var(--color-text); }
.review-submit:hover { background:#1d5ce0; }
.chat-fab:hover { transform:scale(1.08); }
.mobile-panel { height:100dvh; }

/* form feedback states */
.form-note { font-size:13px; border-radius:8px; padding:10px 13px; display:flex; align-items:center; gap:8px; }
.form-note.ok { background:rgba(39,166,68,.1); border:1px solid rgba(39,166,68,.3); color:#bfe8c9; }
.form-note.err { background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.35); color:#f3b8b8; }
/* lanyard contact card sits on a white surface — the dark-theme pastel-on-tint palette above is nearly invisible there */
.lanyard-card .form-note.ok { background:#e9f9ee; border:1px solid #a9e0bb; color:#187a3c; }
.lanyard-card .form-note.err { background:#fdecec; border:1px solid #f3b0b0; color:#c62828; }
button[disabled] { opacity:.6; cursor:not-allowed !important; }
.hp-field { position:absolute; left:-9999px; opacity:0; height:0; width:0; pointer-events:none; }
.star-btn { background:none; border:none; padding:10px; margin:-10px; cursor:pointer; line-height:0; }
.review-input { background:var(--color-bg); border:1px solid var(--color-border); border-radius:8px; padding:11px 14px; color:#e8eaed; font-family:Inter,sans-serif; font-size:14px; transition:border-color .2s ease, box-shadow .2s ease; }
.review-input:focus { border-color:var(--color-accent); outline:none; box-shadow:0 0 0 3px rgba(40,107,244,.18); }

/* --- premium motion layer --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* staggered card reveals (animation, not transition — avoids clashing with per-card hover transitions) */
.st { opacity: 0; }
.st.in { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--std, 0s); }

/* press feedback */
.btn-primary:active, .hero-cta:active, .review-submit:active, .nav-hamburger:active, .back-top-btn:active, #qr-toggle:active, #qr-toggle-d:active { transform: scale(.96); }
.btn-ghost { transition: border-color .2s, color .2s, transform .15s ease; }
.btn-ghost:active { transform: scale(.96); }
.review-submit { transition: background .2s ease, transform .15s ease; }
#chat-send { transition: transform .15s ease, background .2s ease; }
#chat-send:hover { background: #4d8afd !important; }
#chat-send:active { transform: scale(.92); }


/* visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 3px; border-radius: 4px; }
.review-input:focus-visible, .lanyard-card input:focus-visible, .lanyard-card textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lanyard-card input, .lanyard-card textarea { transition: border-color .2s ease, box-shadow .2s ease; }
.lanyard-card input:focus, .lanyard-card textarea:focus { box-shadow: 0 0 0 3px rgba(40,107,244,.15); }

/* form feedback: shake on error, settle-in on success */
@keyframes noteShake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes notePop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.form-note.err { animation: noteShake .4s cubic-bezier(.36,.07,.19,.97); }
.form-note.ok { animation: notePop .35s cubic-bezier(.22,1,.36,1); }

/* star picker feel */
.star-btn { transition: transform .15s cubic-bezier(.22,1,.36,1); }
.star-btn:hover { transform: scale(1.18); }
.star-btn:active { transform: scale(.9); }
@keyframes starPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.star-btn[aria-checked="true"] svg { animation: starPop .3s cubic-bezier(.22,1,.36,1); }

/* chat FAB sonar ping — quiet attention cue */
.chat-fab { position: relative; -webkit-tap-highlight-color: transparent; outline: none; }
.chat-fab:focus, .chat-fab:focus-visible { outline: none; }
.chat-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(41,110,249,.55); animation: fabRing 3.8s cubic-bezier(.22,1,.36,1) 2s infinite; pointer-events: none; }
@keyframes fabRing { 0% { transform: scale(1); opacity: .7; } 55%, 100% { transform: scale(1.55); opacity: 0; } }

/* chat FAB click bubble-pop */
.fab-bubble-top, .fab-bubble-bottom { position: absolute; content: ""; width: 150%; left: 50%; height: 100%; transform: translateX(-50%); z-index: -1; background-repeat: no-repeat; opacity: 0; pointer-events: none; }
.fab-bubble-top { top: -70%;
  background-image: radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #286bf4 20%, transparent 30%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #286bf4 15%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
  background-position: 50% 120%;
}
.fab-bubble-bottom { bottom: -70%;
  background-image: radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #286bf4 15%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%),
    radial-gradient(circle, #286bf4 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
}
.chat-fab.bubble-pop .fab-bubble-top { opacity: 1; animation: fabTopBubbles .6s ease; }
.chat-fab.bubble-pop .fab-bubble-bottom { opacity: 1; animation: fabBottomBubbles .6s ease; }
@keyframes fabTopBubbles {
  0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
  50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
  100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
@keyframes fabBottomBubbles {
  0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
  50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
  100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}

/* --- mobile layout corrections --- */
@media (max-width: 440px) {
  /* tools diagram uses fixed 350px coordinates — recenter it instead of letting the padding-box shrink it */
  .tools-rig { max-width: none !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%); }
}
@media (max-width: 600px) {
  /* keep copyright clear of the chat FAB and center the bottom bar */
  .footer-bottom { justify-content: center !important; text-align: center; padding-bottom: 64px !important; }
  .footer-bottom [data-t="footer_tagline"] { max-width: 210px; margin: 0 auto; }
  /* wordmark section fills the reclaimed space instead of leaving it as dead space below the bottom bar */
  #footer-wordmark { padding: 48px 32px 72px !important; }
  /* rings shader centers in its box — pin it to the top of the hero so the animation is on-screen */
  #hero-rings { top: 40px !important; bottom: auto !important; height: 560px; }
  /* the text-legibility vignette was swallowing the rings on small screens */
  .hero-dim { background: radial-gradient(ellipse 420px 300px at 50% 38%, rgba(1,1,2,.5) 0%, rgba(1,1,2,.2) 55%, rgba(1,1,2,0) 78%) !important; }
  /* email-flow demo: narrow the icon columns so the connector tracks (and their sliding dots) get real width */
  .auto-card { padding: 20px !important; }
  .mail-flow { gap: 6px !important; }
  .mail-flow .mail-node { width: 48px !important; }
  .mail-flow .mail-node > span:last-child { font-size: 9.5px !important; letter-spacing: .05em !important; }
  /* voice-agent demo: drop the redundant avatar column so bubbles get full width */
  .call-avatar { display: none !important; }
  .call-demo { padding: 18px 14px !important; }
  #call-thread { gap: 9px !important; height: 112px !important; }
  #call-ticket { margin-left: 0 !important; }
  .call-bubble { max-width: 96% !important; }
}