/* Pulse Flow Studio. Colours from the logo (see brand/visual-identity.md) */
:root {
  --bg: #0e1118;
  --bg-alt: #121620;
  --surface: #171c27;
  --line: #262d3a;
  --text: #eef1f6;
  --muted: #a6aebc;
  --blue: #2d5aa8;
  --blue-bright: #4f86e8;
  --teal: #39c0b8;
  --grad: linear-gradient(90deg, var(--blue-bright), var(--teal));
  --radius: 16px;
  --max: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, sans-serif; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }
h1, h2, h3 { font-family: Montserrat, Inter, sans-serif; line-height: 1.1; margin: 0 0 16px; overflow-wrap: break-word; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: #fff; color: #000; padding: 8px 12px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 26px; border-radius: 999px; border: 0;
  background: var(--grad); color: #0b0e14; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 30px -8px rgba(57, 192, 184, .55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(57, 192, 184, .8); }
.btn:focus-visible, nav a:focus-visible, .link-arrow:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.btn-ghost { background: rgba(14, 17, 24, .9); color: var(--text); border: 1px solid #3a4352; box-shadow: none; }
.btn-ghost:hover { border-color: var(--teal); box-shadow: none; }
.btn-small { min-height: 44px; padding: 8px 18px; font-size: .95rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  transition: background .3s, border-color .3s; border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(14, 17, 24, .82); backdrop-filter: blur(12px); border-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 96px; height: auto; }
.brand span { font-family: Montserrat, sans-serif; font-weight: 800; letter-spacing: .03em; font-size: 1.3rem; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
nav { display: flex; align-items: center; gap: 26px; }
nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 500; transition: color .2s; }
nav a:not(.btn):hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 112px 0 90px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%;
  background: radial-gradient(60% 50% at 75% 35%, rgba(79, 134, 232, .18), transparent 70%),
              radial-gradient(40% 40% at 15% 70%, rgba(57, 192, 184, .10), transparent 70%);
  pointer-events: none;
}
.hero-pulse { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 200px; pointer-events: none; }
.hero-pulse path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pulse-base { stroke: #1f2633; stroke-width: 2; }
.pulse-trace {
  stroke: url(#pg); stroke-width: 3; stroke-dasharray: .28 1;
  filter: drop-shadow(0 0 6px rgba(57, 192, 184, .7));
  animation: trace 4.5s linear infinite;
}
@keyframes trace { from { stroke-dashoffset: 1.28; } to { stroke-dashoffset: 0; } }

.dots { position: absolute; right: 6%; top: 24%; display: flex; gap: 14px; align-items: flex-end; pointer-events: none; }
.dots i { display: block; border-radius: 50%; background: var(--teal); opacity: .8; animation: float 5s ease-in-out infinite; }
.dots i:nth-child(1) { width: 10px; height: 10px; }
.dots i:nth-child(2) { width: 16px; height: 16px; animation-delay: -1.6s; }
.dots i:nth-child(3) { width: 24px; height: 24px; animation-delay: -3.2s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--teal); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(57, 192, 184, .7); animation: beat 1.6s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(57, 192, 184, .7); } 70% { box-shadow: 0 0 0 12px rgba(57, 192, 184, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 192, 184, 0); } }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 22px; }
.hero h1 .grad { display: inline-block; animation: shimmer 6s linear infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--blue-bright), var(--teal), var(--blue-bright)); }
@keyframes shimmer { to { background-position: -200% 0; } }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 540px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions.center { justify-content: center; }

/* Hero entrance */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .24s; }
.hero-copy > :nth-child(4) { animation-delay: .36s; }
.hero-copy > :nth-child(5) { animation-delay: .48s; }
/* Logo lockup: pulse symbol over a live-text wordmark (FLOW in the logo gradient) */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lockup img { width: 100%; height: auto; }
.wordmark { font-family: Montserrat, Inter, sans-serif; font-weight: 800; letter-spacing: .03em; line-height: 1; color: #fff; white-space: nowrap; }
.wordmark b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-logo { width: clamp(260px, 28vw, 400px); margin: 0 0 24px -6px; filter: drop-shadow(0 0 28px rgba(57, 192, 184, .28)); }
.hero-logo .wordmark { font-size: clamp(1.45rem, 2.55vw, 2.05rem); }
.hero-copy > .hero-logo { animation: rise .9s var(--ease) forwards, glow 4.5s 1s ease-in-out infinite; }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 22px rgba(57, 192, 184, .22)); } 50% { filter: drop-shadow(0 0 40px rgba(79, 134, 232, .45)); } }
.builder { opacity: 0; transform: translateY(26px) scale(.98); animation: rise 1.1s .3s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Builder motion graphic ---------- */
.builder { position: relative; }
.browser {
  border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02), 0 0 60px -20px rgba(79, 134, 232, .35);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #1b212d; border-bottom: 1px solid var(--line); }
.tl { width: 11px; height: 11px; border-radius: 50%; background: #3a4352; }
.tl:nth-child(1) { background: #e0605a; } .tl:nth-child(2) { background: #e6b24a; } .tl:nth-child(3) { background: #5fbf6a; }
.url { flex: 1; margin-left: 12px; padding: 5px 12px; border-radius: 8px; background: #11151d; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--teal); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.browser-view { position: relative; aspect-ratio: 16 / 10; background: #0b0e14; overflow: hidden; }
.frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.frame.active { opacity: 1; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); }
.frame.active img { animation: wipe 1s 1.25s var(--ease) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

.skeleton i { position: absolute; display: block; border-radius: 6px; background: linear-gradient(90deg, #1d2431, #273042, #1d2431); background-size: 200% 100%; transform-origin: left center; transform: scaleX(0); }
.frame.active .skeleton i { animation: grow .45s var(--ease) forwards, sheen 1.2s linear infinite; }
.s-nav { left: 5%; right: 5%; top: 5%; height: 6%; }
.s-logo { left: 40%; width: 20%; top: 17%; height: 26%; border-radius: 50% !important; transform-origin: center !important; }
.s-h1 { left: 15%; width: 70%; top: 50%; height: 11%; }
.s-h2 { left: 28%; width: 44%; top: 65%; height: 5%; }
.s-btn { left: 30%; width: 18%; top: 76%; height: 8%; border-radius: 99px !important; }
.s-btn2 { left: 52%; }
.frame.active .s-nav { animation-delay: 0s, 0s; }
.frame.active .s-logo { animation-delay: .15s, 0s; }
.frame.active .s-h1 { animation-delay: .3s, 0s; }
.frame.active .s-h2 { animation-delay: .45s, 0s; }
.frame.active .s-btn { animation-delay: .6s, 0s; }
.frame.active .s-btn2 { animation-delay: .7s, 0s; }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes sheen { to { background-position: -200% 0; } }

.scan { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--teal); box-shadow: 0 0 18px 4px rgba(57, 192, 184, .6); opacity: 0; }
.builder.cycle .scan { animation: scan 1s 1.25s var(--ease) forwards; }
@keyframes scan { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.build-log { display: flex; justify-content: center; gap: 8px; margin-top: 18px; font-size: .78rem; }
.log-line { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: #6f7888; transition: color .3s, border-color .3s, background .3s; }
.builder.cycle .log-line { animation: logon .3s forwards; }
.builder.cycle .log-line:nth-child(1) { animation-delay: .1s; }
.builder.cycle .log-line:nth-child(2) { animation-delay: .7s; }
.builder.cycle .log-line:nth-child(3) { animation-delay: 1.4s; }
.builder.cycle .log-line:nth-child(4) { animation-delay: 2.2s; }
@keyframes logon { to { color: var(--text); border-color: var(--teal); background: rgba(57, 192, 184, .1); } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { padding: 0 28px; color: var(--muted); font-size: .95rem; white-space: nowrap; display: flex; align-items: center; gap: 28px; }
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-left: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.kicker { color: var(--teal); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.section-lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 0 48px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.work-card { display: flex; flex-direction: column; gap: 20px; }
.work-card:nth-child(2) { transition-delay: .1s; }
.work-card:nth-child(3) { transition-delay: .2s; }
.shot {
  border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s ease-out, box-shadow .3s; will-change: transform;
}
.shot:hover { box-shadow: 0 30px 60px -25px rgba(79, 134, 232, .5); }
.shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.shot:hover img { transform: scale(1.05); }
/* Two cards (while some portfolio pieces wait for permission): keep them centred */
.work-grid:has(> .work-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.work-next .shot { border-style: dashed; border-color: #3a4352; }
.next-slot {
  aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 120%, rgba(57, 192, 184, .16), transparent 60%), var(--surface);
}
.next-slot span { color: var(--muted); font-size: .8rem; }
.next-slot strong {
  font-family: Montserrat, Inter, sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: next-flow 4s linear infinite;
}
@keyframes next-flow { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .next-slot strong { animation: none; } }
.mini-bar { display: flex; gap: 5px; padding: 8px 10px; background: #1b212d; }
.mini-bar span { width: 7px; height: 7px; border-radius: 50%; background: #3a4352; }
.work-meta p { color: var(--muted); margin: 0 0 12px; }
.tag { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; border: 1px solid #3a4352; color: var(--muted); margin-bottom: 12px; }
.tag-live { border-color: var(--teal); color: var(--teal); }
.link-arrow { color: var(--teal); font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Skills ---------- */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.skill {
  position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden;
}
.skill::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(57, 192, 184, .14), transparent 60%);
  pointer-events: none;
}
.skill:hover::before { opacity: 1; }
.skill p { color: var(--muted); margin: 0; }
.skills .skill:nth-child(3n+2) { transition-delay: .08s; }
.skills .skill:nth-child(3n) { transition-delay: .16s; }
.ico { width: 48px; height: 48px; margin-bottom: 18px; fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico .pop, .ico .pop2 { stroke: var(--blue-bright); }
.skill.in .pop { animation: pop 2.8s ease-in-out infinite; }
.skill.in .pop2 { animation: pop 2.8s .4s ease-in-out infinite; }
@keyframes pop { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ico-motion .wave { stroke-dasharray: 120; stroke-dashoffset: 120; }
.skill.in .wave { animation: draw 2.4s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 120; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }
.ico-pound .strike { stroke: var(--blue-bright); stroke-dasharray: 40; stroke-dashoffset: 40; }
.skill.in .strike { animation: strike .8s .5s ease-out forwards; }
@keyframes strike { to { stroke-dashoffset: 0; } }
.ico-pick rect { transition: fill .3s; }
.skill.in .ico-pick .c1 { animation: pick 4s infinite; }
.skill.in .ico-pick .c2 { animation: pick 4s 1s infinite; }
.skill.in .ico-pick .c3 { animation: pick 4s 2s infinite; }
.skill.in .ico-pick .c4 { animation: pick 4s 3s infinite; }
@keyframes pick { 0%, 20% { fill: rgba(57, 192, 184, .35); } 25%, 100% { fill: transparent; } }

/* ---------- Pricing ---------- */
.founding {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 40px; padding: 18px 22px;
  border-radius: 14px; border: 1px dashed rgba(57, 192, 184, .55); background: rgba(57, 192, 184, .07);
}
.founding p { margin: 0; flex: 1 1 320px; }
.founding .live-dot { flex: none; }
.founding .link-arrow { white-space: nowrap; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
}
.plan:nth-child(2) { transition-delay: .1s; }
.plan:nth-child(3) { transition-delay: .2s; }
.plan h3 { font-size: 1.4rem; margin-bottom: 4px; }
.plan-for { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.price { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 2.8rem; line-height: 1; margin: 0 0 24px; }
.price .from, .price .per { font-size: .85rem; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.price .from { display: block; margin-bottom: 8px; text-transform: uppercase; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex-grow: 1; align-content: start; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(57, 192, 184, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2339c0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.plan-note { color: var(--muted); font-size: .85rem; margin: -8px 0 20px; }
.plan .btn { align-self: stretch; }

/* Featured plan: a gradient border that flows round the card */
.plan-featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle, 0deg), var(--blue-bright), var(--teal), #1d2431, var(--blue-bright)) border-box; border: 2px solid transparent; box-shadow: 0 30px 70px -30px rgba(57, 192, 184, .45); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan-featured.in { animation: border-flow 6s linear infinite; }
@keyframes border-flow { to { --angle: 360deg; } }
.badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 99px; background: var(--grad); color: #0b0e14; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.extras { margin: 32px 0 0; color: var(--muted); text-align: center; }
.extras .mono { color: var(--text); font-size: .9rem; }

/* ---------- Process ---------- */
.process { position: relative; margin-top: 56px; }
.process-line { position: absolute; left: 0; right: 0; top: -10px; width: 100%; height: 120px; pointer-events: none; }
.process-line path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pl-base { stroke: var(--line); }
.pl-draw { stroke: var(--teal); stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); filter: drop-shadow(0 0 6px rgba(57, 192, 184, .6)); }
.steps { list-style: none; margin: 0; padding: 120px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step:nth-child(2) { transition-delay: .1s; } .step:nth-child(3) { transition-delay: .2s; } .step:nth-child(4) { transition-delay: .3s; }
.num { display: inline-block; color: var(--teal); font-size: .85rem; margin-bottom: 10px; }
.step p { color: var(--muted); margin: 0; }

/* ---------- CTA ---------- */
.cta { position: relative; padding: 120px 0; text-align: center; overflow: hidden; }
.cta-glow {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(79, 134, 232, .22), rgba(57, 192, 184, .22), rgba(79, 134, 232, .05), rgba(79, 134, 232, .22));
  filter: blur(90px); animation: spin 18s linear infinite; pointer-events: none;
}
@keyframes spin { to { rotate: 360deg; } }
.cta-inner { position: relative; }
.cta-logo { width: min(380px, 80%); margin: 0 auto 30px; }
.cta-logo .wordmark { font-size: clamp(1.3rem, 2.5vw, 1.95rem); }
.cta p { color: var(--muted); font-size: 1.1rem; max-width: 520px; margin: 0 auto; }
.cta .btn { overflow-wrap: anywhere; text-align: center; }

/* Contact form */
.contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  max-width: 680px; margin: 40px auto 0; padding: 28px; text-align: left;
  background: rgba(23, 28, 39, .82); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a4352;
  background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(57, 192, 184, .25); }
.field ::placeholder { color: #6b7485; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-foot .btn { cursor: pointer; font: inherit; font-weight: 700; }
.form-foot .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.cta .form-status { margin: 0; font-size: .95rem; text-align: left; }
.form-status.ok { color: var(--teal); }
.form-status.err { color: #f2a7a7; }
.cta .form-alt { margin-top: 18px; font-size: .95rem; }
@media (max-width: 640px) {
  .contact-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.footer-inner p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { padding-top: 120px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .browser { transform: none; }
  .work-grid, .skills, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { max-width: 520px; margin: 0 auto; gap: 32px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 100px; }
  .dots { top: 12%; }
}
@media (max-width: 640px) {
  nav a:not(.btn) { display: none; }
  .brand span { display: none; }
  .brand img { width: 84px; }
  .hero-logo { width: min(300px, 80vw); margin-bottom: 22px; }
  .hero-logo .wordmark { font-size: 1.5rem; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 80px 0; }
  .hero-pulse { height: 120px; }
  .dots { display: none; }
}

/* ---------- Reduced motion: everything still shows, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-copy > *, .builder, .reveal { opacity: 1; transform: none; }
  .frame:first-child { opacity: 1; }
  .frame img { clip-path: none; }
  .skeleton, .scan, .caret { display: none; }
  .pulse-trace { display: none; }
  .pl-draw { stroke-dashoffset: 0; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track span:nth-child(n+9) { display: none; }
}

@media (max-width: 960px) {
  .work-grid:has(> .work-card:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}