/* Dignity – static replica of the Framer site.
   Breakpoints follow Framer: Desktop >= 1200px, Tablet 810–1199px, Phone < 810px. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Framer colour tokens (light / dark) */
:root {
  color-scheme: light dark;
  --bg: #fff;
  --text: rgb(28, 28, 28);          /* Primary */
  --secondary: rgb(61, 61, 61);     /* Secondary */
  --light-gray: rgb(107, 107, 107); /* Light Gray */
  --blue: rgb(0, 115, 255);
  --blue-deep: rgb(0, 68, 255);
  --cyan: rgb(0, 204, 255);
  --tertiary: rgb(242, 242, 242);
  --muted: rgb(61, 61, 61);
  --line: rgba(28, 28, 28, .12);
  --field: rgba(187, 187, 187, .15);
  --field-line: rgba(136, 136, 136, .1);
  --placeholder: rgb(153, 153, 153);
  --disabled: rgb(128, 128, 128);
  --grad: linear-gradient(180deg, var(--cyan) 0%, var(--blue) 100%);
  --spring: cubic-bezier(.3, 1.25, .5, 1);     /* ~ Framer spring, bounce .2 */
  --spring-soft: cubic-bezier(.25, 1.15, .45, 1); /* ~ bounce .3/.35 */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(0, 0, 0);
    --text: rgb(235, 235, 235);
    --secondary: rgb(204, 204, 204);
    --muted: rgb(204, 204, 204);
    --tertiary: rgb(28, 28, 28);
    --line: rgba(235, 235, 235, .12);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, sans-serif; font-size: 20px; line-height: 1.2; overflow-x: hidden; padding-top: 70px; }
main { display: block; max-width: 1200px; margin: 0 auto; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; padding: 0 30px; }
.blue { color: var(--blue); }
.center { text-align: center; }

/* Framer text styles */
.h1 { font-family: "Instrument Sans", "Inter", sans-serif; font-weight: 700; font-size: 70px; line-height: 1em; }
.h2 { font-weight: 600; font-size: 40px; line-height: 1.2em; }
.h2b { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 50px; line-height: 1em; }
.h3 { font-weight: 600; font-size: 25px; line-height: 1.2em; }
@media (max-width: 1199.98px) { .h1 { font-size: 56px; } .h2 { font-size: 34px; } .h2b { font-size: 44px; } }
@media (max-width: 809.98px) { .h1 { font-size: 44px; } .h2 { font-size: 28px; } .h2b { font-size: 36px; } }

/* ---------- navbar (Framer: hides on scroll down, returns on scroll up) ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; background: var(--bg); transition: transform .4s var(--spring); }
.nav.is-hidden { transform: translateY(-150px); }
.nav, .nav-bar, .nav-drawer { display: flex; align-items: center; }
.nav { height: 70px; max-width: 1200px; margin: 0 auto; padding: 10px 40px 10px 30px; justify-content: space-between; gap: 30px; }
.nav-drawer { flex: 1; justify-content: space-between; gap: 30px; }
.nav-logo { display: block; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.nav-logo:hover { transform: scale(1.1); }
.nav-logo img { width: 100px; height: 50px; object-fit: contain; object-position: left center; }
.nav-links { flex: 1; display: flex; justify-content: center; gap: 30px; }
.nav-links a { font-size: 20px; line-height: 1.2; display: inline-block; text-decoration: underline transparent; text-underline-offset: 3px; text-decoration-skip-ink: all; transition: transform .45s cubic-bezier(.22, 1, .36, 1), text-decoration-color .3s ease; }
.nav-links a:hover { text-decoration-color: currentColor; }
.nav-links a:hover { transform: scale(1.1); }
.nav-cta .cta { height: 50px; padding: 0 20px; }
.nav-cta .cta:hover { transform: scale(1.05); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; align-items: center; justify-content: center; color: var(--text); }
.nav-toggle .ic-close { display: none; }
@media (max-width: 1199.98px) {
  .nav { padding: 10px 30px 10px 20px; gap: 20px; }
  .nav-drawer, .nav-links { gap: 20px; }
}
@media (max-width: 809.98px) {
  .nav { height: auto; max-height: 100vh; flex-direction: column; align-items: stretch; gap: 0; padding: 0 20px; overflow: hidden; }
  .nav-bar { height: 70px; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer { flex-direction: column; align-items: flex-start; gap: 0; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .4s var(--ease), visibility 0s .4s; }
  .nav.is-open .nav-drawer { max-height: 320px; visibility: visible; transition: max-height .4s var(--ease); }
  .nav-links { flex: none; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 20px; padding: 10px 0 24px; }
  .nav-cta { padding: 0 0 24px; }
  .nav.is-open .ic-menu { display: none; }
  .nav.is-open .ic-close { display: block; }
}

/* ---------- CTA (component with hover variants) ---------- */
/* Hover grows the button horizontally. The negative margin cancels the extra padding, so
   neighbours never shift; padding, margin, colour and shadow share one easing and duration. */
.cta { --t: .45s; --e: cubic-bezier(.22, 1, .36, 1); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; line-height: 1.2; padding: 20px; margin: 0; border-radius: 15px; white-space: nowrap; transform: translateZ(0); transition: padding var(--t) var(--e), margin var(--t) var(--e), background-color var(--t) var(--e), border-color var(--t) var(--e), color var(--t) var(--e), box-shadow var(--t) var(--e), transform var(--t) var(--e); will-change: transform; }
.cta-1 { background: var(--grad); color: #fff; box-shadow: 0 0 0 0 rgba(0, 115, 255, 0); }
.cta-1:hover, .cta-1:focus-visible { padding-left: 30px; padding-right: 30px; margin-left: -10px; margin-right: -10px; transform: scale(1.05); box-shadow: 0 .3px 1.5px -1.17px rgba(0, 115, 255, .68), 0 1.14px 5.7px -2.33px rgba(0, 115, 255, .61), 0 5px 25px -3.5px rgba(0, 115, 255, .3); }
.cta-2 { color: var(--text); border: 4px solid var(--secondary); padding: 16px 20px; background: transparent; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
.cta-2:hover, .cta-2:focus-visible { padding: 16px 30px; margin-left: -10px; margin-right: -10px; border-color: var(--text); background: var(--text); color: var(--bg); transform: scale(1.05); box-shadow: 0 .3px 1.5px -1.17px rgba(0, 0, 0, .66), 0 1.14px 5.7px -2.33px rgba(0, 0, 0, .59), 0 5px 25px -3.5px rgba(0, 0, 0, .29); }
.cta.hover-lg:hover { transform: scale(1.1); }
@supports not (color: rgb(0 0 0 / 0)) { .cta { will-change: auto; } }
.cta:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-row { display: flex; gap: 30px; justify-content: center; padding: 30px; }

/* ---------- shared heroes ---------- */
.page-hero { text-align: center; padding: 30px; display: flex; flex-direction: column; align-items: center; }
.page-hero .h1 { max-width: 600px; }
.hero-svc .h1 { max-width: 469px; }
.hero-about { padding: 50px; }
.hero-about .h1 { max-width: 650px; }
.section-h { padding: 10px 0 10px 30px; }

/* ---------- home ---------- */
.home-hero { position: relative; height: 372px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.home-h1 { width: 656px; padding: 30px 0 0; }
.lead { max-width: 562px; margin-top: 30px; font-size: 20px; }
.hero-btns { padding: 30px; }
.vec { position: absolute; width: 80px; height: 80px; color: var(--text); pointer-events: none; }
.vec svg { width: 100%; height: 100%; display: block; }
.vec-burst { left: 213px; top: 26px; transform: rotate(18deg); }
.vec-hash { left: 83px; bottom: 58px; transform: rotate(18deg); }
.vec-sparkle { left: 1004px; top: 110px; transform: rotate(18deg); }
.vec-cursor { left: 1050px; bottom: 107px; transform: rotate(-9deg); }
.benefits-h { width: 750px; max-width: 100%; margin: 0 auto; padding: 30px 0; }
.benefit-row { display: flex; justify-content: space-between; padding: 30px 0; }
.benefit-row figure { margin: 0; width: 364px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.benefit-row img { width: 122px; height: 122px; }
.statement { display: flex; gap: 17px; padding: 65px; }
.statement-bar { flex: 0 0 8px; border-radius: 93px; background: var(--blue); box-shadow: 0 .6px 3px rgba(0, 204, 255, .02), 0 2.3px 11.4px rgba(0, 204, 255, .06), 0 10px 50px rgba(0, 204, 255, .25); }
.quick { display: flex; align-items: center; padding: 30px 30px 30px 50px; }
.quick .h2b { width: 323px; padding-left: 12px; }
.all-in { padding: 120px 30px 120px 80px; }
.more { padding-top: 30px; }
.more .h2 { padding: 30px; }
.more-btns { gap: 30px; }
.home-closing { padding: 30px 30px 50px; }
.home-closing .h2b { padding: 0 0 30px; }

/* ---------- services / seo ---------- */
.hero-svc .h2b, .hero-seo .h2b { padding-top: 0; }
.svc, .seo { padding-top: 30px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 15px 0 30px; }
.svc-card { background: var(--bg); border: 4px solid var(--blue); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 10px; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1); }
.svc-card:hover { box-shadow: 0 .6px 3px rgba(0, 115, 255, .02), 0 2.3px 11.4px rgba(0, 115, 255, .06), 0 10px 50px rgba(0, 115, 255, .25); }
.svc-top, .seo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.svc-title { font-weight: 600; font-size: 25px; line-height: 1.2; color: var(--blue); }
.svc-icon { color: var(--blue); display: inline-flex; flex: 0 0 auto; }
.svc-card p, .seo-card p { font-size: 20px; line-height: 1.2; }
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 30px 0; align-items: start; }
.seo-card { background: var(--bg); border: 4px solid var(--blue); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 10px; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1); }
.seo-card:hover { box-shadow: 0 10px 50px rgba(0, 115, 255, .25); }
.seo-icon { display: inline-flex; color: var(--text); flex: 0 0 auto; }
.seo { min-height: 600px; }
.lift:hover { transform: translateY(-6px); }

/* ---------- prices ---------- */
.prices { text-align: center; display: flex; flex-direction: column; align-items: center; }
.prices > .h2 { padding: 30px; }
.price-row { display: flex; justify-content: center; align-items: flex-start; gap: 30px; padding: 10px; }
.price-card { text-align: left; background: var(--bg); border-radius: 14px; padding: 32px; width: 347px; max-width: 100%; display: flex; flex-direction: column; gap: 30px; }
.price-basic { box-shadow: inset 0 0 0 4px var(--text), 0 14px 40px rgba(0, 0, 0, .16); }
.price-full { box-shadow: inset 0 0 0 5px var(--blue), 0 0 40px rgba(0, 204, 255, .35); }
.pc-name { font-weight: 600; font-size: 25px; line-height: 1.2; }
.pc-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: -30px; }
.pc-amount { font-weight: 800; font-size: 40px; line-height: 1.1; }
.pc-month { font-weight: 700; font-size: 25px; line-height: 1.1; }
.price-card ul { display: flex; flex-direction: column; gap: 15px; }
.feat { display: flex; align-items: flex-start; }
.feat-ic { flex: 0 0 24px; display: inline-flex; }
.feat-t { flex: 1; text-align: center; font-size: 20px; line-height: 1.2; }
.feat-yes .feat-ic, .feat-star .feat-ic { color: var(--blue-deep); }
.feat-no .feat-ic, .feat-no .feat-t { color: var(--disabled); }
.price-note { width: 665px; max-width: 100%; padding: 30px; font-size: 20px; }

/* ---------- process (ProcessSteps code component) ---------- */
.proz-hero { padding: 30px 30px 30px 50px; }
.proz-hero .h1 { max-width: 600px; }
.proz-accent { padding: 10px 0 10px 0; }
.steps { max-width: 900px; margin: 40px auto; border-top: 1px solid var(--line); }
.step { display: flex; align-items: center; gap: 32px; padding: 26px 8px; border-bottom: 1px solid var(--line); }
.step-n { flex: 0 0 56px; font-weight: 800; font-size: 32px; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.step-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 32px; }
.step-t { flex: 0 0 260px; font-weight: 600; font-size: 22px; line-height: 1.25; }
.step-d { flex: 1; font-size: 17px; line-height: 1.45; color: var(--muted); }
.pro-group { position: relative; margin: 28px 0 0; }
.pro-group > ol { border: 2px solid var(--blue); border-radius: 16px; margin: 0 -16px; padding: 0 16px; }
.pro-group .step { border-bottom: 0; }
.pro-badge { position: absolute; top: -12px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; font-size: 12px; line-height: 1; white-space: nowrap; }
.steps.js .step, .steps.js .pro-group { opacity: 0; transform: translateX(-48px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.steps.js.in .step, .steps.js.in .pro-group { opacity: 1; transform: none; }
.steps.js .pro-group .step { opacity: 1; transform: none; }
.closing { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 60px 30px; }

/* ---------- about ---------- */
.about-person { display: flex; gap: 40px; align-items: flex-start; padding: 50px; }
.avatar { flex: 0 0 140px; width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(180deg, var(--blue) 0%, var(--cyan) 100%); }
.about-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; }
.about-text p { font-size: 20px; text-align: left; }
.about-role { font-weight: 600; font-style: italic; font-size: 18px; color: var(--blue); }
.shader { flex: 1 1 0; align-self: stretch; min-height: 208px; border-radius: 20px; position: relative; overflow: hidden; background: #0040e0; isolation: isolate; }
/* stand-in for Framer's "Liquid Gradient" WebGL shader: drifting colour blobs + grain */
.shader i, .shader i::before, .shader i::after { position: absolute; content: ""; border-radius: 50%; filter: blur(28px); mix-blend-mode: screen; }
.shader i { inset: -40% -20%; border-radius: 0; filter: none; mix-blend-mode: normal; background: radial-gradient(40% 55% at 20% 70%, #001a8c 0%, transparent 70%), radial-gradient(35% 60% at 85% 30%, #00128a 0%, transparent 70%), linear-gradient(120deg, #0030d0, #0066ff 45%, #003ad6); animation: liquid-a 14s ease-in-out infinite alternate; }
.shader i::before { width: 70%; height: 55%; left: 25%; top: 25%; background: radial-gradient(closest-side, #ffffff 0%, #bff3ff 35%, rgba(0, 204, 255, .6) 60%, transparent 100%); animation: liquid-b 11s ease-in-out infinite alternate; }
.shader i::after { width: 45%; height: 80%; left: 55%; top: 5%; background: radial-gradient(closest-side, #8fe6ff 0%, rgba(0, 150, 255, .7) 50%, transparent 100%); animation: liquid-c 9s ease-in-out infinite alternate; }
.shader::after { content: ""; position: absolute; inset: 0; opacity: .7; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes liquid-a { to { transform: translate(-8%, 4%) rotate(6deg) scale(1.1); } }
@keyframes liquid-b { 0% { transform: translate(-30%, 10%) rotate(-25deg) scale(1, .45); } 100% { transform: translate(20%, -15%) rotate(35deg) scale(1.2, .35); } }
@keyframes liquid-c { 0% { transform: translate(10%, -10%) rotate(20deg) scale(.6, 1); } 100% { transform: translate(-40%, 15%) rotate(-30deg) scale(.8, 1.2); } }
.about-values { padding: 30px 30px 0; }
.vals { display: flex; flex-direction: column; gap: 20px; padding: 30px 0; }
.val { display: flex; flex-direction: column; gap: 10px; }
.val-head { display: flex; align-items: center; gap: 10px; padding: 0 30px; }
.pill { flex: 0 0 100px; height: 20px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); }
.val-title { font-size: 50px; }
.val p { font-size: 20px; padding-left: 100px; text-align: left; }
.tools { padding: 20px 30px 0; }
.tool-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 30px 70px; }
.tool { padding: 30px; display: block; }
.tool img { width: 70px; height: 70px; border-radius: 20px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.tool img:hover { transform: scale(1.1); }

/* ---------- webdesign ---------- */
.wd-hero { padding: 50px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.wd-title { font-family: "Instrument Sans", sans-serif; font-weight: 700; font-size: 150px; line-height: 1.2em; background: linear-gradient(0deg, var(--blue) 19%, var(--cyan) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-sub { font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.2; text-align: center; }
.wd-sub span { display: inline-block; }
.wd-props { display: flex; flex-direction: column; padding: 0 0 40px; will-change: transform; }
.prop { display: flex; align-items: center; gap: 10px; padding-left: 100px; }
.prop-dot { flex: 0 0 70px; height: 100px; background: radial-gradient(closest-side, var(--blue) 0%, var(--cyan) 55%, rgba(0, 204, 255, 0) 100%); background: radial-gradient(circle at 50% 50%, var(--blue) 0 22%, rgba(0, 115, 255, .7) 28%, rgba(0, 204, 255, .25) 38%, rgba(0, 204, 255, 0) 46%); filter: blur(1.5px); }
.wd-scroll { display: flex; align-items: flex-start; padding: 70px 0 0 30px; }
.wd-sticky-col { flex: 1; align-self: stretch; }
.wd-sticky { position: sticky; top: 200px; font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 50px; line-height: 1em; padding: 0 30px; }
.c1 { color: rgb(59, 59, 59); }
.c2 { color: rgb(107, 107, 107); }
.c3 { color: var(--light-gray); }
@media (prefers-color-scheme: dark) { .c1 { color: rgb(220, 220, 220); } .c2, .c3 { color: rgb(150, 150, 150); } }
.wd-pixels { flex: 1; display: flex; flex-direction: column; align-items: center; }
.wd-pixels img { width: 300px; height: 300px; object-fit: contain; }
.wd-pixels .px-laptop { height: 500px; object-position: center 40%; margin-bottom: -100px; }
@media (prefers-color-scheme: dark) { .wd-pixels img { filter: invert(1); } }
.wd-switch { display: flex; flex-direction: column; align-items: center; padding: 100px 0; text-align: center; }
.wd-switch-1 { font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 50px; line-height: 70px; }
.wd-design { font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 100px; line-height: 100px; background: linear-gradient(0deg, var(--blue-deep) 0%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-cycle { position: relative; display: grid; font-family: "Inter", sans-serif; font-weight: 600; font-size: 50px; line-height: 70px; }
.wd-cycle em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.cy { grid-area: 1 / 1; opacity: 0; transform: translateY(30px); filter: blur(4px); transition: opacity .5s var(--spring), transform .5s var(--spring), filter .5s; white-space: nowrap; }
.cy.is-on { opacity: 1; transform: none; filter: none; }
.cy.is-out { opacity: 0; transform: translateY(-30px); }

/* ---------- contact / thanks ---------- */
.contact { display: flex; flex-direction: column; align-items: center; padding-bottom: 60px; }
.contact > .h2b { padding: 20px; }
.form { width: 762px; max-width: 100%; padding: 50px 20px 20px; display: flex; flex-direction: column; gap: 30px; }
.form label { display: flex; flex-direction: column; gap: 10px; font-size: 20px; line-height: 1.2; }
.form input, .form select { width: 100%; height: 40px; padding: 0 12px; background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; font: 400 14px/1 "Inter", sans-serif; color: var(--text); appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus { outline: none; border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.form input::placeholder { color: var(--placeholder); }
.form select:invalid { color: var(--placeholder); }
.sel { position: relative; display: block; }
.sel-chev { position: absolute; right: 12px; top: 13px; color: var(--placeholder); pointer-events: none; }
.submit { height: 50px; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font: 600 20px/1.2 "Inter", sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--spring); }
.submit:hover { transform: scale(1.02); }
.spinner { display: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 7deg, #fff 342deg); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); animation: spin 1s linear infinite; }
.submit.is-loading .submit-t { display: none; }
.submit.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-note { font-size: 16px; color: var(--muted); margin-top: -10px; }
.form-note:empty { display: none; }
.thanks { display: flex; flex-direction: column; align-items: center; min-height: 420px; }
.thanks .h2b { padding: 20px; }
.thanks .btn-row { padding: 50px; }

/* ---------- legal ---------- */
.imprint { width: 1100px; max-width: 100%; margin: 0 auto; padding: 50px 0 120px; display: flex; flex-direction: column; gap: 10px; }
.imprint p { font-size: 20px; }
.legal { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.legal p { font-size: 20px; text-align: left; }
.empty-page { min-height: 440px; }

/* ---------- footer ---------- */
.footer { max-width: 1200px; min-height: 300px; margin: 0 auto; padding: 30px 128px 30px 30px; display: grid; grid-template-columns: 1fr 264px 250px; grid-template-rows: 1fr auto; column-gap: 0; }
.footer-brand { width: 210px; text-align: center; }
.footer-brand img { width: 206px; height: 74px; object-fit: cover; }
.footer-brand p { font-size: 20px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col h4 { font-weight: 600; font-size: 20px; line-height: 24px; }
.footer-col a, .footer-col span { font-size: 20px; line-height: 24px; transition: color .2s; }
.footer-col a:hover { color: var(--blue); }
.footer-copy { grid-column: 1 / -1; align-self: end; font-size: 20px; padding-top: 20px; }

/* ---------- appear effects (Framer "Appear" / "In view", replay) ---------- */
html.js [data-fx] { transition: opacity .5s var(--spring-soft), transform .5s var(--spring-soft), box-shadow .4s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }
html.js [data-fx="mount"] { opacity: 0; transform: translateY(30px); transition-duration: .7s; transition-delay: .05s; }
html.js [data-fx="up"] { opacity: 0; transform: translateY(28px); }
html.js [data-fx="up16"] { opacity: 0; transform: translateY(16px); }
html.js [data-fx="left150"] { opacity: 0; transform: translateX(-150px); transition-duration: .4s; transition-timing-function: var(--spring); }
html.js [data-fx="left300"] { opacity: 0; transform: translateX(-300px); transition-duration: .4s; transition-timing-function: var(--spring); }
html.js [data-fx="fade"] { opacity: 0; transition-duration: .4s; }
html.js [data-fx="fade-slow"] { opacity: 0; transition-duration: 1s; }
html.js [data-fx="mountfade"] { opacity: 0; transition-duration: .4s; }
html.js [data-fx="scale"] { opacity: 0; transform: scale(.5); transition-duration: .4s; transition-timing-function: var(--spring); }
html.js [data-fx="drop"] { opacity: 0; transform: translateY(-150px); transition-duration: .4s; transition-timing-function: var(--spring); }
html.js [data-fx="skew"] { opacity: 0; transform: translateX(-463px) skewX(-20deg); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1.1, .36, 1); }
html.js [data-fx].in { opacity: 1; transform: none; }
/* card hover lift must win over the appear transform once visible */
html.js .lift[data-fx].in:hover { transform: translateY(-6px); transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1); transition-delay: 0s; }

/* Reduced motion: drop large movement (slide-ins, parallax, drifting backgrounds, text cycling) but keep
   short, calm hover feedback (colour, padding, shadow) so buttons and links still feel responsive. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-fx], .steps.js .step, .steps.js .pro-group { opacity: 1 !important; transform: none !important; transition: box-shadow .3s ease !important; }
  .shader i, .shader i::before, .shader i::after, .cy { animation: none !important; }
  .wd-props { transform: none !important; }
  .nav { transition: none; }
  .cta { --t: .3s; }
  .cta:hover, .cta:focus-visible, .lift:hover, html.js .lift[data-fx].in:hover, .nav-links a:hover, .nav-logo:hover, .tool img:hover, .submit:hover { transform: none !important; }
}
}

/* ---------- Tablet (810–1199px) ---------- */
@media (max-width: 1199.98px) {
  .home-hero { height: 372px; }
  .home-h1 { width: 600px; }
  .vec-sparkle, .vec-cursor { left: auto; right: 40px; }
  .vec-sparkle { right: 80px; }
  .vec-burst { left: 20px; top: 10px; }
  .vec-hash { left: 40px; }
  .benefits-h { width: 100%; }
  .benefit-row figure { width: auto; flex: 1; }
  .all-in { padding: 80px 30px 80px 50px; }
  .more-btns { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .svc-grid { gap: 20px; padding: 15px 20px; }
  .seo-grid { gap: 20px; padding: 20px; }
  .seo-card, .svc-card { padding: 20px; }
  .price-note { width: 600px; }
  .steps { max-width: 100%; }
  .about-person { padding: 30px; gap: 30px; }
  .about-values { padding: 30px 30px 0; }
  .wd-title { font-size: 110px; }
  .prop { padding-left: 60px; }
  .wd-sticky-col { padding-right: 20px; }
  .wd-sticky { padding: 0; }
  .imprint { padding: 50px 40px 40px; }
  .footer { padding: 30px; grid-template-columns: 1fr 188px 190px; }
  .tool-row { padding: 30px 0; gap: 10px; }
  .tool { padding: 20px; }
}

/* ---------- Phone (< 810px) ---------- */
@media (max-width: 809.98px) {
  .wrap { padding: 0 20px; }
  .btn-row { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .page-hero { padding: 30px 20px; }
  .page-hero .h1, .hero-svc .h1, .hero-about .h1 { max-width: 330px; }
  .hero-about { padding: 30px 20px; }
  .section-h { padding: 20px 0 0 20px; }

  .home-hero { height: 440px; }
  .home-h1 { width: 330px; }
  .lead { margin-top: 20px; padding: 0 4px; }
  .vec { display: none; }
  .hero-btns { flex-direction: column; align-items: center; }
  .benefits-h { padding: 0 20px; }
  .benefit-row { flex-direction: column; align-items: center; gap: 30px; padding: 20px; }
  .benefit-row figure { width: 100%; }
  .statement { padding: 30px 20px; }
  .quick { flex-wrap: wrap; padding: 20px; gap: 10px; }
  .quick .h2 { width: 100%; }
  .quick .h2b { width: auto; padding-left: 0; }
  .all-in { padding: 20px; }
  .more .h2 { padding: 20px; }
  .more-btns { gap: 12px; }
  .home-closing { padding: 20px 20px 40px; }

  .svc-grid, .seo-grid { grid-template-columns: 1fr; gap: 20px; padding: 10px 20px; }
  .seo { min-height: 0; }

  .price-row { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; padding: 10px; }
  .price-card { width: 100%; padding: 24px; }
  .price-note { width: 100%; padding: 20px; }

  .proz-hero { padding: 30px 20px; }
  .proz-hero .h1 { max-width: 330px; }
  .proz-accent { padding: 10px 0; }
  .steps { margin: 20px 0; }
  .step { align-items: flex-start; gap: 16px; padding: 20px 4px; }
  .step-n { flex-basis: 32px; }
  .step-body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .step-t { flex: none; }
  .pro-group > ol { margin: 0; padding: 0 8px; }
  .closing { padding: 40px 20px; }

  .about-person { flex-direction: column; padding: 20px; gap: 24px; }
  .shader { width: 100%; flex: none; height: 220px; }
  .about-values { padding: 20px 20px 0; }
  .val-head { padding: 0; }
  .pill { flex-basis: 60px; }
  .val-title { font-size: 36px; }
  .val p { padding-left: 30px; }
  .tools { padding: 20px 20px 0; }
  .tool-row { padding: 20px 0; gap: 10px; }
  .tool { padding: 10px; }
  .tool img { width: 56px; height: 56px; border-radius: 16px; }

  .wd-hero { padding: 30px 20px; }
  .wd-title { font-size: 54px; }
  .wd-sub { display: flex; flex-direction: column; gap: 16px; }
  .prop { padding-left: 40px; }
  .wd-scroll { flex-direction: column; align-items: center; gap: 20px; padding: 40px 20px; }
  .wd-sticky-col { width: 100%; padding: 0; }
  .wd-sticky { position: static; padding: 0; }
  .wd-switch { padding: 60px 0; }
  .wd-switch-1 { font-size: 34px; line-height: 1.2; }
  .wd-design { font-size: 72px; line-height: 1.1; }
  .wd-cycle { font-size: 31px; line-height: 44px; }

  .form { padding: 20px 20px; }
  .imprint { padding: 30px 20px 40px; }
  .legal { padding: 20px; }

  .footer { padding: 40px 20px; grid-template-columns: 1fr 1fr; grid-template-rows: auto; row-gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-copy { grid-column: 1 / -1; grid-row: 2; padding: 0; }
  .footer-col { grid-row: 3; }
  .footer-col a, .footer-col span { font-size: 18px; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.submit:disabled { cursor: progress; }