/* =====================================================================
   NINETEEN SOLUTIONS - SITE STYLESHEET (css/site.css)
   The only stylesheet for every page. Hand written, no framework.

   CONTENTS
     1. Brand tokens
     2. Base (reset, body, headings, forms)
     3. Effects (WhatsApp button, home backdrop, contact page, placeholders)
     4. Components (named for what they are: .site-header, .btn-primary,
        .card, .faq-item ...). Each has its own look, so a change to one
        component never leaks into another.
     5. Spacing helpers (.mt-4, .gap-3, .stack-6 ...) and .hidden
     6. Reduced motion

   FONTS
     Body and headings: Plus Jakarta Sans. Fonts are self-hosted in /fonts (see
     the @font-face rules below). To change the font, replace the files, the
     @font-face rules, --font-body, and the preload <link> in each page head.
     Space Mono is kept for small accents only (labels, code look).
   ===================================================================== */

/* ---------- Fonts (self-hosted in /fonts, so no third-party request delays first paint) ---------- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/space-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/space-mono-700-latin.woff2) format('woff2'); }

/* ---------- 1. Brand tokens ---------- */
:root {
  --ink: #0F2A4A;         /* headings, strong text */
  --inksoft: #1F2A3D;     /* body text */
  --bg: #FFFFFF;          /* page background */
  --bgsoft: #F6F8FB;      /* section background, cards */
  --line: #E4E9F1;        /* hairline borders */
  --accent: #4F46E5;      /* buttons, links, highlights */
  --accentsoft: #EEF0FD;  /* accent tint */

  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- 2. Base ---------- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid var(--line); }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--inksoft); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: transparent; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, textarea, select { background: transparent; }
table { border-collapse: collapse; }
summary { cursor: pointer; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::placeholder { color: #94a3b8; }

/* ---------- 3. Components ---------- */

/* Persistent WhatsApp button, bottom right on every public page */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 9999px;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 20px -6px rgba(15, 42, 74, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 24px -6px rgba(15, 42, 74, .5); }
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 640px) { .wa-float { right: 24px; bottom: 24px; } }

/* Home page: faint scrolling code backdrop behind the hero.
   Decorative only. The track holds two copies and slides up by half
   its height, so the loop has no seam. */
.code-backdrop {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.code-track { position: absolute; top: 0; left: 0; right: 0; will-change: transform; animation: codeScroll 40s linear infinite; }
.code-backdrop pre {
  display: block; margin: 0; padding: 0 12px;
  font-family: var(--font-accent); font-size: 13px; line-height: 1.7; white-space: pre;
  color: var(--ink); opacity: .11;
}
@keyframes codeScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@media (max-width: 640px) {
  .code-backdrop pre { font-size: 11px; line-height: 1.6; opacity: .13; }
  .code-track { animation-duration: 30s; }
}

/* Contact page effects */
.orb { position: absolute; border-radius: 9999px; filter: blur(70px); pointer-events: none; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: #22C55E; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #22C55E; animation: ping-ring 1.8s ease-out infinite; }
.cursor { display: inline-block; width: 8px; height: 15px; background: #A5B4FC; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes floaty  { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(30px, -24px, 0) scale(1.08); } }
@keyframes floaty2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-34px, 28px, 0) scale(1.12); } }
@keyframes ping-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.orb-a { animation: floaty 14s ease-in-out infinite; }
.orb-b { animation: floaty2 17s ease-in-out infinite; }

/* Page load entrance (CSS only, replaces the old GSAP script) */
@keyframes ns-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-hero] { animation: ns-rise .7s ease-out both; }
[data-hero]:nth-child(2) { animation-delay: .1s; }
[data-hero]:nth-child(3) { animation-delay: .2s; }
[data-hero]:nth-child(4) { animation-delay: .3s; }
#term [data-line] { animation: ns-rise .5s ease-out both; }
#term [data-line]:nth-child(2) { animation-delay: .6s; }
#term [data-line]:nth-child(3) { animation-delay: 1s; }
#term [data-line]:nth-child(4) { animation-delay: 1.4s; }
#term [data-line]:nth-child(5) { animation-delay: 1.8s; }
#term [data-line]:nth-child(6) { animation-delay: 2.2s; }
/* Scroll reveal: js/site.js adds .reveal, then .in when the element is on screen */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Calculator and contact chips */
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }

/* Work page: "Next on the list" placeholder cards. Light CSS-only motion. */
@keyframes ns-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ns-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.placeholder { animation: ns-rise .7s ease-out both; }
.placeholder:nth-child(2) { animation-delay: .12s; }
.placeholder:nth-child(3) { animation-delay: .24s; }
.placeholder [class^="bar-"] { background: linear-gradient(90deg, #EEF0FD 25%, #E0E4FB 50%, #EEF0FD 75%); background-size: 200% 100%; animation: ns-shimmer 2.4s linear infinite; border-radius: 6px; }
.placeholder .placeholder-icon { animation: ns-float 4s ease-in-out infinite; }

/* ---------- 4. Components ---------- */
/* Grouped by area. Responsive rules sit directly under the component they belong to. */

.mobile-nav-link:hover { color: var(--ink); }
.mobile-nav-link { padding-top: .5rem; padding-bottom: .5rem; }
.footer-link:hover { color: var(--ink); }
.footer-link { display: inline-flex; align-items: center; }
.nav-link:hover { color: var(--ink); }
.nav-link { transition: color .15s, background-color .15s, border-color .15s; }
.icon { width: 1rem; height: 1rem; }
.row { display: flex; align-items: center; }
.icon-fixed { flex-shrink: 0; width: 1rem; height: 1rem; }
.field-label { font-weight: 600; font-size: .75rem; line-height: 1rem; display: block; }
.heading-sm { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; }
.site-header { background-color: rgba(255,255,255,.9); border-bottom-width: 1px; border-color: var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; }
.header-bar { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.logo-img { width: auto; height: 2.25rem; }
.accent { color: var(--accent); }
.desktop-nav { color: var(--inksoft); font-weight: 500; font-size: .875rem; line-height: 1.25rem; display: none; align-items: center; }
@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
}
.header-cta { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: none; align-items: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1rem; padding-right: 1rem; padding-top: .625rem; padding-bottom: .625rem; }
.header-cta:hover { background-color: rgba(79,70,229,.9); }
@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}
.menu-button { color: var(--ink); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
@media (min-width: 1024px) {
  .menu-button { display: none; }
}
.icon-md { width: 1.25rem; height: 1.25rem; }
.mobile-nav { background-color: #fff; border-top-width: 1px; border-color: var(--line); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: .5rem; padding-bottom: 1rem; }
@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}
.mobile-nav-list { color: var(--inksoft); font-weight: 500; font-size: .875rem; line-height: 1.25rem; display: flex; flex-direction: column; }
.mobile-nav-cta { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: .625rem; padding-bottom: .625rem; }
.section { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.site-footer { border-top-width: 1px; border-color: var(--line); padding-top: 2.5rem; padding-bottom: 2.5rem; }
/* Footer: brand and address on the left, contact links over social links on the right; centred and stacked on phones */
.footer-bar { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.footer-brand { display: flex; flex-direction: column; gap: .25rem; }
.footer-name { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.footer-nav { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1.25rem; row-gap: .5rem; }
.footer-links .footer-link { gap: .375rem; min-height: 44px; }
.footer-links-quiet { font-size: .8125rem; }
@media (min-width: 768px) {
  .footer-bar { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .footer-name { justify-content: flex-start; }
  .footer-nav { align-items: flex-end; }
  .footer-links { justify-content: flex-end; }
  .footer-links .footer-link { min-height: 0; }
}
.footer-logo { width: auto; height: 1.25rem; }
/* Room under the footer so the floating WhatsApp button never covers a link */
@media (max-width: 1279px) { .site-footer { padding-bottom: 6.5rem; } }
.link-quiet:hover { color: var(--ink); }
.icon-whatsapp { color: #25D366; flex-shrink: 0; width: 1rem; height: 1rem; }
.icon-accent { color: var(--accent); flex-shrink: 0; width: 1rem; height: 1rem; }
.note { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; }
.body-text { color: var(--inksoft); line-height: 1.625; }
.cell { padding: .75rem; }
.heading { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; }
.faq-item { border-width: 1px; border-color: var(--line); border-radius: .75rem; }
.faq-question { color: var(--ink); font-family: var(--font-body); font-weight: 700; cursor: pointer; }
.faq-answer { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; line-height: 1.625; }
.nav-current { color: var(--ink); font-weight: 600; }
.chip { transition: all .2s ease; color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 9999px; font-weight: 600; font-size: .875rem; line-height: 1.25rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.heading-xl { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; }
.btn-primary { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; display: inline-flex; align-items: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; }
.btn-primary:hover { background-color: rgba(79,70,229,.9); }
.section-ruled { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); border-bottom-width: 1px; border-color: var(--line); }
.page-title { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; line-height: 1.25; }
@media (min-width: 640px) {
  .page-title { font-size: 3rem; line-height: 1; }
}
.lead { color: var(--inksoft); font-size: 1.125rem; line-height: 1.75rem; line-height: 1.625; }
.note-xs { color: var(--inksoft); font-size: .75rem; line-height: 1rem; }
.body-sm { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; line-height: 1.625; }
.eyebrow { color: var(--accent); font-family: var(--font-accent); font-weight: 600; font-size: .75rem; line-height: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.section-soft { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); background-color: var(--bgsoft); border-top-width: 1px; border-color: var(--line); }
.icon-md-accent { color: var(--accent); width: 1.25rem; height: 1.25rem; }
.link-muted { color: var(--inksoft); font-size: .75rem; line-height: 1rem; text-decoration: underline; }
@media (min-width: 640px) {
  .span-2-sm { grid-column: span 2 / span 2; }
}
.text-link-sm { color: var(--accent); font-weight: 600; font-size: .875rem; line-height: 1.25rem; }
.term-muted { color: #94a3b8; }
.term-strong { color: #fff; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.timeline-row { padding-left: 3.5rem; }
@media (min-width: 768px) {
  .timeline-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; padding-left: 0; }
}
.timeline-dot { color: #fff; background-color: var(--accent); border-radius: 9999px; box-shadow: 0 0 0 4px var(--ring, #fff); --ring: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; }
@media (min-width: 768px) {
  .timeline-dot { left: 50%; transform: translateX(-50%); }
}
.card { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; }
.icon-tile { background-color: var(--accentsoft); border-radius: .75rem; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
.heading-semi { color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; line-height: 1.75rem; }
.cell-nowrap { white-space: nowrap; padding: .75rem; }
.card-outline { border-width: 1px; border-color: var(--line); border-radius: 1rem; }
.strong { color: var(--ink); font-family: var(--font-body); font-weight: 700; }
.field-label-ink { color: var(--ink); font-weight: 600; font-size: .75rem; line-height: 1rem; display: block; }
.input-field { border-width: 1px; border-color: var(--line); border-radius: .5rem; font-size: .875rem; line-height: 1.25rem; width: 100%; padding-left: .75rem; padding-right: .75rem; padding-top: .625rem; padding-bottom: .625rem; }
.error-text { color: #dc2626; font-size: .875rem; line-height: 1.25rem; }
.stat-lg { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; }
.teaser-card:hover { background-color: var(--bgsoft); }
.teaser-card { border-width: 1px; border-color: var(--line); border-radius: 1rem; transition: color .15s, background-color .15s, border-color .15s; padding: 1.75rem; }
.icon-lg-accent { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.notice-card { color: var(--inksoft); background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; font-size: .875rem; line-height: 1.25rem; padding: 1.5rem; }
.placeholder { background-color: var(--bgsoft); border-width: 1px; border-style: dashed; border-color: rgba(79,70,229,.4); border-radius: .75rem; display: flex; flex-direction: column; padding: 1.75rem; }
.placeholder-icon { color: var(--accent); background-color: var(--accentsoft); border-radius: .5rem; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; }
.bar-title { width: 75%; height: 1.25rem; }
.bar-line { width: 100%; height: 1rem; }
.bar-line-short { width: 83.333333%; height: 1rem; }
.stat-md { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; line-height: 2rem; }
.section-banded { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); background-color: var(--bgsoft); border-top-width: 1px; border-bottom-width: 1px; border-color: var(--line); }
.section-title { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; }
@media (min-width: 640px) {
  .section-title { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 768px) {
  .align-right-md { text-align: right; }
}
.card-grid-3 { display: grid; }
@media (min-width: 640px) {
  .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-title { color: var(--ink); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; }
.text-link { color: var(--accent); font-weight: 600; }
.tag-label { color: var(--accent); font-weight: 600; font-size: .75rem; line-height: 1rem; letter-spacing: .025em; text-transform: uppercase; }
.sticky-bar { background-color: var(--bgsoft); display: flex; flex-wrap: wrap; align-items: center; position: sticky; bottom: 0; padding-top: 1rem; padding-bottom: 1rem; }
.row-sm { font-size: .875rem; line-height: 1.25rem; display: flex; align-items: center; }
.grid-2-sm { display: grid; }
@media (min-width: 640px) {
  .grid-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.heading-admin { color: var(--ink); font-weight: 700; }
.label-tag { color: var(--accent); font-family: var(--font-accent); font-size: 11px; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.list-card { border-width: 1px; border-color: var(--line); border-radius: 1rem; overflow: hidden; }
.list-card > * + * { border-top-width: 1px; border-color: var(--line); }
.error-code { color: var(--accent); font-family: var(--font-accent); font-weight: 700; font-size: 3.75rem; line-height: 1; }
.soft-text { color: var(--inksoft); }
.admin-body { background-color: var(--bgsoft); min-height: 100vh; }
.toast { border-radius: .5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); font-weight: 600; font-size: .875rem; line-height: 1.25rem; position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 50; padding-left: 1rem; padding-right: 1rem; padding-top: .625rem; padding-bottom: .625rem; }
.admin-shell { max-width: 64rem; padding-left: 1rem; padding-right: 1rem; padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 640px) {
  .admin-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.section-compact { padding-top: 3rem; padding-bottom: 3rem; }
.layout-sidebar { display: grid; align-items: flex-start; }
@media (min-width: 1024px) {
  .layout-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .span-2-lg { grid-column: span 2 / span 2; }
}
.callout { color: var(--ink); background-color: var(--accentsoft); border-width: 1px; border-color: var(--line); border-radius: 1rem; font-size: .875rem; line-height: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; }
.bold { font-family: var(--font-body); font-weight: 700; }
@media (min-width: 1024px) {
  .sticky-lg { position: sticky; top: 6rem; }
}
.hint-accent { color: var(--accent); font-weight: 600; font-size: .75rem; line-height: 1rem; }
.note-scroll { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; overflow-y: auto; max-height: 16rem; }
.divider-top { border-top-width: 1px; border-color: var(--line); padding-top: 1.25rem; }
.label-tag-md { color: var(--accent); font-family: var(--font-accent); font-size: .75rem; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.stat-locked { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; user-select: none; }
.btn-block { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; transition: color .15s, background-color .15s, border-color .15s; width: 100%; padding-top: .75rem; padding-bottom: .75rem; }
.btn-block:hover { background-color: rgba(79,70,229,.9); }
.note-xs-relaxed { color: var(--inksoft); font-size: .75rem; line-height: 1rem; line-height: 1.625; }
.struck { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; text-decoration: line-through; }
.btn-block-flex { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background-color .15s, border-color .15s; width: 100%; padding-top: .75rem; padding-bottom: .75rem; }
.btn-block-flex:hover { background-color: rgba(79,70,229,.9); }
.hero-contact { border-bottom-width: 1px; border-color: var(--line); overflow: hidden; }
.dots-layer { background-image: radial-gradient(#C7CBEF 1.2px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); mask-image: linear-gradient(to bottom, black, transparent 85%); position: absolute; inset: 0; }
.hero-grid { display: grid; align-items: center; padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) {
  .hero-grid { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pill-badge { color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600; font-size: .75rem; line-height: 1rem; display: inline-flex; align-items: center; padding-left: 1rem; padding-right: 1rem; padding-top: .375rem; padding-bottom: .375rem; }
.display-contact { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; line-height: 1.08; letter-spacing: -.025em; }
@media (min-width: 640px) {
  .display-contact { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .display-contact { font-size: 3.75rem; line-height: 1; }
}
.lead-narrow { color: var(--inksoft); font-size: 1.125rem; line-height: 1.75rem; line-height: 1.625; max-width: 36rem; }
.button-row { display: flex; flex-direction: column; }
@media (min-width: 640px) {
  .button-row { flex-direction: row; }
}
.btn-primary-glow-center { color: #fff; background-color: var(--accent); border-radius: .5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); box-shadow: 0 10px 15px -3px rgba(99,102,241,.25), 0 4px 6px -4px rgba(99,102,241,.25); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; }
.btn-primary-glow-center:hover { background-color: rgba(79,70,229,.9); }
.btn-secondary-center { color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .5rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; }
.btn-secondary-center:hover { background-color: var(--bgsoft); }
.terminal { background-color: #0F172A; border-width: 1px; border-color: #1E293B; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); box-shadow: 0 25px 50px -12px rgba(49,46,129,.2); overflow: hidden; }
.terminal-bar { background-color: #111C33; border-bottom-width: 1px; border-color: #1E293B; display: flex; align-items: center; padding-left: 1rem; padding-right: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.term-dot-red { background-color: #FF5F57; border-radius: 9999px; width: .75rem; height: .75rem; }
.term-dot-yellow { background-color: #FEBC2E; border-radius: 9999px; width: .75rem; height: .75rem; }
.term-dot-green { background-color: #28C840; border-radius: 9999px; width: .75rem; height: .75rem; }
.term-title { color: #94a3b8; font-family: var(--font-accent); font-size: .75rem; line-height: 1rem; }
.term-body { color: #cbd5e1; font-family: var(--font-accent); font-size: 13px; line-height: 1.75rem; min-height: 250px; padding: 1.25rem; }
.term-prompt { color: #a5b4fc; }
.term-ok { color: #34d399; }
.grid-3-md { display: grid; }
@media (min-width: 768px) {
  .grid-3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-card-whatsapp { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; background: linear-gradient(135deg, #4F46E5 0%, #6D5DF5 55%, #8B7CF8 100%); background-size: 200% 200%; animation: shift 8s ease infinite; color: #fff; border-radius: 1rem; overflow: hidden; padding: 2rem; }
.contact-card-whatsapp:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(79, 70, 229, .35); border-color: #C7CBEF; }
@media (prefers-reduced-motion: reduce) {
  .contact-card-whatsapp { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-card-whatsapp:hover { transform: none; }
}
@media (min-width: 768px) {
  .contact-card-whatsapp { grid-column: span 2 / span 2; }
}
.bubble-a { background-color: rgba(255,255,255,.1); border-radius: 9999px; position: absolute; bottom: -2.5rem; right: -2.5rem; width: 14rem; height: 14rem; }
.bubble-b { background-color: rgba(255,255,255,.1); border-radius: 9999px; position: absolute; top: -3rem; right: 4rem; width: 8rem; height: 8rem; }
.icon-tile-light { background-color: rgba(255,255,255,.2); border-radius: .75rem; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; }
.eyebrow-light { color: rgba(255,255,255,.75); font-family: var(--font-accent); font-size: .75rem; line-height: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.heading-card-xl { font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; }
.text-light { color: rgba(255,255,255,.85); }
.btn-light { color: var(--accent); background-color: #fff; border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: inline-flex; align-items: center; transition: all .15s; padding-left: 1rem; padding-right: 1rem; padding-top: .625rem; padding-bottom: .625rem; }
.grid-1 { display: grid; }
.contact-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; display: block; padding: 1.5rem; }
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(79, 70, 229, .35); border-color: #C7CBEF; }
@media (prefers-reduced-motion: reduce) {
  .contact-card:hover { transform: none; }
}
.note-break { color: var(--inksoft); font-size: .875rem; line-height: 1.25rem; overflow-wrap: break-word; }
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; }
.box-md { max-width: 28rem; }
.input-center { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .5rem; font-size: .875rem; line-height: 1.25rem; width: 100%; padding-left: 1rem; padding-right: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.btn-primary-glow { color: #fff; background-color: var(--accent); border-radius: .5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); box-shadow: 0 10px 15px -3px rgba(99,102,241,.25), 0 4px 6px -4px rgba(99,102,241,.25); font-weight: 600; display: inline-flex; align-items: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; }
.btn-primary-glow:hover { background-color: rgba(79,70,229,.9); }
.timeline-track { background-color: var(--line); position: absolute; top: .5rem; bottom: .5rem; left: 19px; width: 1px; }
@media (min-width: 768px) {
  .timeline-track { left: 50%; }
}
.timeline-fill { transform-origin: top; background-color: var(--accent); width: 100%; height: 100%; }
.btn-secondary-sm { color: var(--ink); border-width: 1px; border-color: var(--line); border-radius: .5rem; font-weight: 600; display: inline-flex; align-items: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; }
.btn-secondary-sm:hover { background-color: var(--bgsoft); }
.pill-badge-soft { color: var(--ink); background-color: var(--bgsoft); border-width: 1px; border-color: var(--line); border-radius: 9999px; font-weight: 600; font-size: .75rem; line-height: 1rem; display: inline-flex; align-items: center; padding-left: 1rem; padding-right: 1rem; padding-top: .375rem; padding-bottom: .375rem; }
.pill-dot { background-color: var(--accent); border-radius: 9999px; width: .375rem; height: .375rem; }
.hero-home { overflow: hidden; }
.hero-inner { padding-top: 5rem; padding-bottom: 6rem; }
.display { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; line-height: 1.08; letter-spacing: -.025em; }
@media (min-width: 640px) {
  .display { font-size: 3rem; line-height: 1; }
}
@media (min-width: 768px) {
  .display { font-size: 3.75rem; line-height: 1; }
}
.lead-center { color: var(--inksoft); font-size: 1.125rem; line-height: 1.75rem; line-height: 1.625; max-width: 42rem; }
.button-row-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width: 640px) {
  .button-row-center { flex-direction: row; }
}
.btn-secondary { color: var(--ink); border-width: 1px; border-color: var(--line); border-radius: .5rem; font-weight: 600; display: inline-flex; align-items: center; transition: color .15s, background-color .15s, border-color .15s; padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; }
.btn-secondary:hover { background-color: var(--bgsoft); }
.intro-box { max-width: 42rem; }
.text-link-block { color: var(--accent); font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: inline-block; }
.grid-2-md { display: grid; }
@media (min-width: 768px) {
  .grid-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section-top-ruled { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); border-top-width: 1px; border-color: var(--line); }
.photo-4x3 { border-radius: 1rem; object-fit: cover; aspect-ratio: 4 / 3; width: 100%; max-width: 28rem; }
.auth-card { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; max-width: 28rem; padding: 2rem; }
.auth-card-sm { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; max-width: 24rem; padding: 2rem; }
.btn-block-sm { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; width: 100%; padding-top: .625rem; padding-bottom: .625rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.link-soft { color: var(--inksoft); }
.link-soft:hover { color: var(--ink); }
.tab-bar { display: flex; overflow-x: auto; padding-bottom: .5rem; }
.field-card { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .75rem; padding: 1rem; }
.pill-row { display: flex; flex-wrap: wrap; }
.sticky-bar-nowrap { background-color: var(--bgsoft); display: flex; align-items: center; position: sticky; bottom: 0; padding-top: 1rem; padding-bottom: 1rem; }
.row-between-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.inline-group { display: flex; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; }
.thumb { border-width: 1px; border-color: var(--line); border-radius: .5rem; object-fit: cover; aspect-ratio: 16 / 9; width: 10rem; }
.thumb-empty { color: var(--inksoft); background-color: var(--bgsoft); border-width: 1px; border-style: dashed; border-color: var(--line); border-radius: .5rem; font-size: .75rem; line-height: 1rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 10rem; }
.file-input { font-size: .75rem; line-height: 1rem; display: block; }
.accordion { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .75rem; }
.accordion-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-left: 1rem; padding-right: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.title-sm { color: var(--ink); font-weight: 700; font-size: .875rem; line-height: 1.25rem; }
.accordion-body { border-top-width: 1px; border-color: var(--line); display: grid; padding-left: 1rem; padding-right: 1rem; padding-top: .25rem; padding-bottom: 1rem; }
@media (min-width: 640px) {
  .accordion-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.span-2-flex { display: flex; padding-top: .25rem; }
@media (min-width: 640px) {
  .span-2-flex { grid-column: span 2 / span 2; }
}
.field-label-accent { color: var(--accent); font-weight: 600; font-size: .75rem; line-height: 1rem; letter-spacing: .025em; text-transform: uppercase; display: block; }
.bold-sm { font-weight: 700; font-size: .875rem; line-height: 1.25rem; }
.photo-preview { border-width: 1px; border-color: var(--line); border-radius: .5rem; object-fit: cover; aspect-ratio: 16 / 9; width: 100%; }
.photo-empty { color: var(--inksoft); background-color: var(--bgsoft); border-width: 1px; border-style: dashed; border-color: var(--line); border-radius: .5rem; font-size: .75rem; line-height: 1rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; }
.grid-3-sm { display: grid; }
@media (min-width: 640px) {
  .grid-3-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.error-card { color: #dc2626; background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; font-size: .875rem; line-height: 1.25rem; padding: 1.5rem; }
.table-card { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: 1rem; overflow-x: auto; }
.data-table { font-size: .875rem; line-height: 1.25rem; width: 100%; }
.table-head { color: var(--inksoft); border-bottom-width: 1px; border-color: var(--line); font-size: .75rem; line-height: 1rem; text-transform: uppercase; }
.table-row { border-bottom-width: 1px; border-color: var(--line); vertical-align: top; }
.price-note { color: var(--inksoft); font-weight: 400; font-size: .875rem; line-height: 1.25rem; }
.row-top { display: flex; align-items: flex-start; }
.icon-tile-fixed { background-color: var(--accentsoft); border-radius: .75rem; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; }
.heading-semi-sm { color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; }
.empty-note { color: var(--inksoft); }
@media (min-width: 768px) {
  .empty-note { grid-column: span 2 / span 2; }
}
.project-thumb { background-color: var(--bgsoft); overflow: hidden; aspect-ratio: 16 / 9; }
.cover-img { object-fit: cover; width: 100%; height: 100%; }
.project-thumb-empty { color: var(--inksoft); background-color: var(--bgsoft); font-family: var(--font-accent); font-size: .875rem; line-height: 1.25rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; }
.text-link-icon { color: var(--accent); font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: inline-flex; align-items: center; }
.card-clip { border-width: 1px; border-color: var(--line); border-radius: 1rem; overflow: hidden; }
.card-body { padding: 1.5rem; }
.row-pad { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; }
.check-input { accent-color: #4f46e5; flex-shrink: 0; width: 1rem; height: 1rem; }
.grow { flex: 1 1 0%; }
.price-tag { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: .875rem; line-height: 1.25rem; flex-shrink: 0; max-width: 45%; }
.option-list { display: flex; flex-wrap: wrap; }
.option-pill { border-width: 1px; border-color: var(--line); border-radius: .5rem; font-size: .75rem; line-height: 1rem; display: flex; align-items: center; cursor: pointer; padding-left: .75rem; padding-right: .75rem; padding-top: .5rem; padding-bottom: .5rem; }
.radio-input { accent-color: #4f46e5; }
.link-row { color: var(--accent); font-weight: 600; font-size: .875rem; line-height: 1.25rem; display: flex; justify-content: center; }
.info-card { color: var(--inksoft); background-color: var(--bgsoft); border-width: 1px; border-color: var(--line); border-radius: 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 1.625; padding: 1.5rem; }
.photo-wide { border-radius: 1rem; object-fit: cover; aspect-ratio: 16 / 7; width: 100%; max-width: 48rem; }
.section-flush { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); padding-top: 0; }
.heading-lg { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; line-height: 2rem; }


/* Containers: centred column with side gutters. Width variants below. */
.container { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container { padding-left: 2rem; padding-right: 2rem; } }
.container--wide { max-width: 72rem; } .container--medium { max-width: 64rem; } .container--text { max-width: 56rem; }
.container--prose { max-width: 48rem; } .container--narrow { max-width: 42rem; } .container--form { max-width: 36rem; }


/* Admin page and calculator extras */
.input-field-sm { background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .5rem; font-size: .875rem; line-height: 1.25rem; width: 100%; padding-left: .75rem; padding-right: .75rem; padding-top: .5rem; padding-bottom: .5rem; }
.btn-primary-sm { color: #fff; background-color: var(--accent); border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: .625rem; padding-bottom: .625rem; }
.btn-primary-sm:hover { background-color: rgba(79,70,229,.9); }
.btn-outline-xs { color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); border-radius: .5rem; font-weight: 600; font-size: .75rem; line-height: 1rem; padding-left: .75rem; padding-right: .75rem; padding-top: .375rem; padding-bottom: .375rem; }
.btn-outline-xs:hover { background-color: var(--bgsoft); }
.tab-button { border-radius: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.25rem; white-space: nowrap; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.tab-button--on { color: #fff; background-color: var(--accent); }
.tab-button--off { color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); }
.tab-button--off:hover { background-color: var(--bgsoft); }
.pill-button { border-radius: 9999px; font-weight: 600; font-size: .75rem; line-height: 1rem; padding-left: .875rem; padding-right: .875rem; padding-top: .375rem; padding-bottom: .375rem; }
.pill-button--on { color: #fff; background-color: var(--ink); }
.pill-button--off { color: var(--ink); background-color: #fff; border-width: 1px; border-color: var(--line); }
.pill-button--off:hover { background-color: var(--bgsoft); }
.toast--error { color: #fff; background-color: #dc2626; }
.toast--ok { color: #fff; background-color: var(--ink); }
.danger-text { color: #dc2626; }
.fill { width: 100%; }
.font-strong { font-weight: 700; }
.is-clickable { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.is-soon { opacity: .6; }
.mt-14 { margin-top: 3.5rem; }
.stack-2 > * + * { margin-top: .5rem; }
.stack-3 > * + * { margin-top: .75rem; }
.stack-4 > * + * { margin-top: 1rem; }
.stack-5 > * + * { margin-top: 1.25rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.stack-8 > * + * { margin-top: 2rem; }
.stack-12 > * + * { margin-top: 3rem; }
.stack-16 > * + * { margin-top: 4rem; }

.card-soon { background-color: var(--bgsoft); border-width: 2px; border-style: dashed; border-color: var(--line); border-radius: 1rem; }

/* ---------- 5. Spacing helpers ---------- */
/* Margin, gap and padding steps from one scale (1 step = .25rem). .hidden is the show/hide switch used by js/site.js. */
.gap-1 { gap: .25rem; }
.gap-1\.5 { gap: .375rem; }
.gap-12 { gap: 3rem; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.hidden { display: none !important; }
.mb-1 { margin-bottom: .25rem; }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.min-w-0 { min-width: 0; }
.ml-3 { margin-left: .75rem; }
.ml-7 { margin-left: 1.75rem; }
.mt-1 { margin-top: .25rem; }
.mt-16 { margin-top: 4rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.relative { position: relative; }
.stack-1\.5 > * + * { margin-top: .375rem; }
.stack-10 > * + * { margin-top: 2.5rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.is-dim { opacity: .5; }
.contact-card-whatsapp:hover .btn-light { gap: .75rem; }

/* ---------- 5b. Offers, promises and the "Get My Website" journey (October 2026) ----------
   A livelier layer on top of the brand colours, used by the offer bar, offer cards, promise band,
   Our Work hero and call-to-action bands. Contrast: text on the gradients is white on the indigo and
   violet stops (sky is darkened to #0369A1 behind text); amber badges use dark text; the green FREE
   tag uses a deeper green (#047857) behind white text. Every animation stops under reduced motion (section 6). */
:root {
  --violet: #7C3AED; --sky: #0EA5E9; --sky-deep: #0369A1; --amber: #F59E0B; --amber-ink: #3B2300;
  --green: #10B981; --green-deep: #047857; --navy: #0B1F38;
  --fun: linear-gradient(110deg, var(--accent) 0%, var(--violet) 55%, var(--sky-deep) 100%);
}

/* Spacing helpers used by the new sections */
.mt-5 { margin-top: 1.25rem; } .mt-10 { margin-top: 2.5rem; } .mb-10 { margin-bottom: 2.5rem; }

/* Header button that starts a project */
.header-go { color: #fff; background: var(--accent); border-radius: .5rem; font-weight: 700; font-size: .875rem; padding: .625rem 1rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; transition: background-color .15s; }
.header-go:hover { background: #4338CA; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 380px) { .header-go { padding: .55rem .7rem; font-size: .8rem; } .logo-word { font-size: .95rem; } }

/* Arrow that nudges right on hover (buttons and links) */
.nudge { transition: transform .2s ease; }
a:hover .nudge, a:focus-visible .nudge, button:hover .nudge { transform: translateX(4px); }

/* Big filled button ("See all 19 services and prices", "Get My Website") */
.btn-bold { color: #fff; background: var(--accent); border-radius: .75rem; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .875rem 1.5rem; box-shadow: 0 8px 22px -10px rgba(79,70,229,.7); transition: background-color .15s, transform .15s; text-align: center; }
.btn-bold:hover { background: #4338CA; }
.btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.75); border-radius: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .875rem 1.5rem; transition: background-color .15s; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }
.btn-white { color: var(--ink); background: #fff; border-radius: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .875rem 1.5rem; transition: transform .15s; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row-center { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ----- Top offer bar: rotates through the offers; all of them are in the list for screen readers ----- */
.offer-bar { background: var(--fun); color: #fff; font-size: .875rem; font-weight: 600; position: relative; }
.offer-bar[hidden] { display: none; }
.offer-bar-inner { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.offer-list { position: relative; flex: 1; min-height: 44px; overflow: hidden; }
.offer-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(100%); transition: opacity .45s ease, transform .45s ease; }
.offer-item.is-on { opacity: 1; transform: none; position: relative; min-height: 44px; }
.offer-item.is-out { transform: translateY(-100%); }
.offer-item:not(.is-on) a { pointer-events: none; }
.offer-item a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .25rem; text-align: center; line-height: 1.3; }
.offer-item a:hover .offer-text, .offer-item a:focus-visible .offer-text { text-decoration: underline; }
.offer-chip { background: var(--amber); color: var(--amber-ink); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .5rem; flex-shrink: 0; }
.offer-chip.is-free { background: #fff; color: var(--green-deep); }
.offer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: .5rem; color: #fff; font-size: 1.25rem; flex-shrink: 0; }
.offer-close:hover { background: rgba(255,255,255,.15); }
.offer-bar a:focus-visible, .offer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ----- Offer cards ----- */
.offer-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .offer-grid { grid-template-columns: repeat(4, 1fr); } }
.offer-card { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.5rem; color: #fff; display: flex; flex-direction: column; gap: .75rem; min-height: 15rem; box-shadow: 0 18px 40px -24px rgba(15,42,74,.6); }
.offer-card.is-bundle { background: linear-gradient(145deg, var(--accent), var(--violet)); }
.offer-card.is-check { background: linear-gradient(145deg, var(--sky-deep), var(--accent)); }
.offer-card.is-referral { background: linear-gradient(145deg, var(--violet), #9D174D); }
.offer-card.is-hosting { background: linear-gradient(145deg, var(--green-deep), var(--sky-deep)); }
.offer-card h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.offer-card p { font-size: .925rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.offer-card .btn-white { margin-top: auto; align-self: flex-start; }
.offer-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.offer-icon svg { width: 1.4rem; height: 1.4rem; }
/* Amber "Save" badge with a gentle pulse */
.badge-save { position: absolute; top: 1rem; right: 1rem; background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: .8rem; border-radius: 999px; padding: .3rem .7rem; animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 50% { box-shadow: 0 0 0 10px rgba(245,158,11,0); } }
/* Green FREE tag, cut like a discount tag, slightly rotated, with a shine sweep */
.tag-free { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .3rem; background: var(--green-deep); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .65rem .3rem 1rem; border-radius: .25rem .45rem .45rem .25rem; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); transform: rotate(-4deg); }
.tag-free::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; position: absolute; left: 6px; top: calc(50% - 2.5px); }
.tag-free::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: tag-shine 3.2s ease-in-out infinite; }
@keyframes tag-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.offer-card .tag-free { position: absolute; top: 1.1rem; right: 1rem; font-size: .85rem; }
.tag-free-inline { margin-left: .4rem; vertical-align: middle; transform: rotate(-3deg); }
/* Cards rise in one after another when scrolled into view */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.rise.in { opacity: 1; transform: none; }

/* Inline offer reminder (calculator, contact) */
.offer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; border-radius: 1rem; padding: 1rem 1.25rem; background: linear-gradient(110deg, var(--accentsoft), #F3E8FF 60%, #E0F2FE); border: 1px solid var(--line); }
.offer-strip strong { color: var(--ink); }
.offer-strip p { color: var(--inksoft); font-size: .925rem; }

/* ----- Home: four service groups that open in place ----- */
.svc-groups { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .svc-groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.svc-group { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.svc-group:hover { border-color: #C7CBEF; box-shadow: 0 12px 30px -22px rgba(79,70,229,.6); }
.svc-group.is-open { border-color: var(--accent); cursor: default; }
.svc-head { width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; min-height: 44px; border-radius: .5rem; }
.svc-head-text { flex: 1; min-width: 0; }
.svc-head-title { display: block; color: var(--ink); font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.svc-count { display: inline-block; margin-top: .25rem; background: var(--accentsoft); color: var(--accent); font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; }
.svc-chevron { width: 2rem; height: 2rem; border-radius: 999px; background: var(--bgsoft); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; transition: transform .3s ease; }
.svc-group.is-open .svc-chevron { transform: rotate(180deg); }
.svc-tagline { margin: .75rem 0 .9rem; font-size: .9rem; color: var(--inksoft); }
.svc-lines li { border-top: 1px solid var(--line); padding: .6rem 0; }
.svc-name { color: var(--ink); font-weight: 600; font-size: .925rem; }
/* Details open with a smooth height animation (grid rows 0fr to 1fr); hidden from keyboard and screen readers while closed */
.svc-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.svc-more > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .35s; }
.svc-group.is-open .svc-more { grid-template-rows: 1fr; }
.svc-group.is-open .svc-more > div { visibility: visible; transition-delay: 0s; }
.svc-desc { display: block; font-size: .875rem; color: var(--inksoft); padding-top: .25rem; }
.svc-price-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; padding-top: .35rem; }
.svc-price { font-weight: 700; color: var(--accent); font-size: .9rem; }
.svc-link { font-size: .85rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; }

/* ----- "What we promise, in writing": navy band, white cards with a moving gradient border ----- */
.promise-band { background: var(--navy); color: #fff; padding: clamp(56px, 8vw, 96px) 0; position: relative; overflow: hidden; }
.promise-band .eyebrow { color: #A5B4FC; }
.promise-band h2 { color: #fff; }
.promise-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 640px) { .promise-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise-card { position: relative; border-radius: 1rem; padding: 2px; background: linear-gradient(120deg, var(--accent), var(--violet), var(--sky), var(--green), var(--accent)); background-size: 300% 300%; animation: border-flow 8s linear infinite; }
@keyframes border-flow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.promise-inner { background: #fff; color: var(--inksoft); border-radius: calc(1rem - 2px); padding: 1.4rem; height: 100%; }
.promise-inner h3 { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin: .85rem 0 .4rem; }
.promise-inner p { font-size: .9rem; line-height: 1.55; }
.promise-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--accentsoft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.promise-icon svg { width: 1.35rem; height: 1.35rem; }
.promise-band.is-compact { padding: clamp(40px, 6vw, 64px) 0; }
.promise-band.is-compact .promise-grid { margin-top: 1.5rem; }
.promise-band.is-compact .promise-inner { padding: 1.1rem; }

/* ----- "Ready to see your website?" band ----- */
.cta-band { background: var(--fun); color: #fff; border-radius: 1.5rem; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: #fff; }
.cta-band p { margin: .75rem auto 1.75rem; max-width: 36rem; color: rgba(255,255,255,.92); }

/* ----- Home hero badge next to the main button ----- */
.hero-free { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--ink); }

/* ----- Our Work hero: moving gradient, floating shapes, tilted browser frames ----- */
.work-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--accent), var(--violet), var(--sky-deep), var(--accent)); background-size: 300% 300%; animation: border-flow 18s linear infinite; }
.work-hero-inner { position: relative; display: grid; gap: 2.5rem; align-items: center; padding: clamp(56px, 9vw, 112px) 0; }
@media (min-width: 900px) { .work-hero-inner { grid-template-columns: 1.05fr 1fr; } }
.work-hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.work-hero .lead-light { margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.93); max-width: 34rem; }
.work-hero .eyebrow-light { color: #E0E7FF; font-family: var(--font-accent); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.shape { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; animation: float-y 9s ease-in-out infinite; pointer-events: none; }
.shape-a { width: 220px; height: 220px; background: #A78BFA; top: -60px; right: 8%; }
.shape-b { width: 140px; height: 140px; background: #38BDF8; bottom: -40px; left: 6%; animation-delay: -3s; }
.shape-c { width: 70px; height: 70px; background: #FBBF24; top: 30%; left: 46%; animation-delay: -5s; opacity: .45; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.frames { position: relative; height: clamp(250px, 46vw, 400px); }
.frame { position: absolute; width: 78%; border-radius: .75rem; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -25px rgba(0,0,0,.55); animation: float-y 7s ease-in-out infinite; }
.frame-bar { height: 22px; background: #E8EAF2; display: flex; align-items: center; gap: 5px; padding: 0 9px; }
.frame-bar i { width: 7px; height: 7px; border-radius: 50%; background: #C3C8D6; }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.frame-1 { left: 0; top: 0; transform: rotate(-4deg); z-index: 1; }
.frame-2 { right: 0; top: 18%; transform: rotate(3deg); z-index: 2; animation-delay: -2.5s; }
.frame-3 { left: 12%; bottom: 0; transform: rotate(-1deg); z-index: 3; width: 70%; animation-delay: -4.5s; }
.frame-1 { --r: -4deg; } .frame-2 { --r: 3deg; } .frame-3 { --r: -1deg; }
.frame { animation-name: frame-float; }
@keyframes frame-float { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-12px); } }

/* ---------- 6. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .code-track, .orb-a, .orb-b, .contact-card-whatsapp, .live-dot::after, .cursor,
  [data-hero], #term [data-line],
  .placeholder, .placeholder [class^="bar-"], .placeholder .placeholder-icon { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .contact-card:hover, .contact-card-whatsapp:hover, .wa-float:hover { transform: none; }
  /* October 2026 layer: nothing moves */
  .offer-item, .svc-more, .svc-more > div, .svc-chevron, .nudge, .rise { transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .badge-save, .tag-free::after, .promise-card, .work-hero, .shape, .frame { animation: none !important; }
  a:hover .nudge, a:focus-visible .nudge, button:hover .nudge { transform: none; }
}