/* ==========================================================================
   shresco: base
   ========================================================================== */

:root {
  /* Earthy dark mode: warm near-black (olive-charcoal) instead of the old
     blue-black, sage green in place of blue/purple. */
  --bg: #1b1a14;
  --bg-alt: #221f18;
  --bg-card: #27241a;
  --bg-card-hover: #302c1f;
  --border: rgba(242, 237, 224, 0.08);
  --border-strong: rgba(242, 237, 224, 0.16);
  --text: #f2ede0;
  --text-dim: #b5af9c;
  --text-dimmer: #938d7a;
  --accent: #7fa66a;
  --accent-2: #a8c17f;
  --accent-soft: rgba(127, 166, 106, 0.14);
  --amber: #ffb545;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Subtle fill tints: flip direction between themes so "a faint wash
     of the foreground color" stays faint in both, instead of white-on-white. */
  --surface-1: rgba(242, 237, 224, 0.03);
  --surface-2: rgba(242, 237, 224, 0.04);
  --surface-3: rgba(242, 237, 224, 0.06);
  --surface-4: rgba(242, 237, 224, 0.07);
  --surface-5: rgba(242, 237, 224, 0.12);
  --surface-6: rgba(242, 237, 224, 0.15);
  --header-bg: rgba(27, 26, 20, 0.7);
}

:root[data-theme="light"] {
  /* Earthy light mode: creamy off-white instead of the old cool white,
     sage green in place of blue/purple. */
  --bg: #f6f1e6;
  --bg-alt: #efe7d6;
  --bg-card: #fdfbf5;
  --bg-card-hover: #f5eee0;
  --border: rgba(64, 54, 34, 0.1);
  --border-strong: rgba(64, 54, 34, 0.2);
  --text: #3d3729;
  --text-dim: #5f5b4d;
  --text-dimmer: #726d5c;
  --accent: #5c7a4c;
  --accent-2: #7c9457;
  --accent-soft: rgba(92, 122, 76, 0.12);
  --amber: #c97f14;

  --surface-1: rgba(41, 38, 32, 0.03);
  --surface-2: rgba(41, 38, 32, 0.04);
  --surface-3: rgba(41, 38, 32, 0.055);
  --surface-4: rgba(41, 38, 32, 0.07);
  --surface-5: rgba(41, 38, 32, 0.1);
  --surface-6: rgba(41, 38, 32, 0.14);
  --header-bg: rgba(253, 251, 245, 0.75);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 18px;
}

.section-lead {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 560px;
  margin-bottom: 48px;
}

.accent-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note {
  color: var(--text-dimmer);
  font-size: 13px;
  margin-top: 28px;
}

/* Reveal-on-scroll: opacity-only, purely a taste call. This once carried a
   translateY too, dropped while chasing a bad CLS score — but that turned
   out to be a red herring (the real cause was a non-blocking stylesheet
   letting the page paint unstyled first). Transforms don't affect layout and
   so aren't counted as layout shifts; re-adding a translateY here would be
   safe if the slide-up is ever wanted back. */
.reveal {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.reveal.in-view {
  opacity: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(92, 122, 76, 0.55);
}
.btn-primary:hover { box-shadow: 0 10px 30px -6px rgba(92, 122, 76, 0.7); transform: translateY(-2px); }

.btn-ghost {
  background: var(--surface-1);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-4); transform: translateY(-2px); }

.btn-sm { padding: 10px 20px; font-size: 13.5px; }
.btn-lg { padding: 16px 34px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.nav-pill {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px 10px 20px;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 30px -12px rgba(41, 38, 32, 0.38);
}

.logo {
  display: flex;
  align-items: center;
  font-size: 20.4px; /* ~20% larger than the original 17px, now that the mark is gone */
  letter-spacing: -0.01em;
}
.logo-text { font-weight: 800; }
.logo-suffix { font-weight: 500; color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1px solid transparent;
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(92, 122, 76, 0.55);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover { box-shadow: 0 8px 22px -6px rgba(92, 122, 76, 0.7); transform: translateY(-1px); }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text);
  transition: background 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { background: var(--surface-4); transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 84vw);
  height: 100%;
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  z-index: 200;
  padding: 28px 28px;
  transition: right 0.35s var(--ease);
}
.mobile-menu.open { right: 0; }
.mobile-menu-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  margin-bottom: 28px;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 22px; }
.mobile-menu nav a { font-size: 19px; font-weight: 700; }

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 32, 26, 0.55);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 168px 0 100px;
  /* A faint dot-grid gives the whole hero some texture instead of flat
     color; the two soft glows still do the heavy lifting on top of it. */
  background-image:
    radial-gradient(60% 50% at 80% 0%, rgba(92, 122, 76, 0.16), transparent 60%),
    radial-gradient(50% 40% at 10% 10%, rgba(124, 148, 87, 0.12), transparent 60%),
    radial-gradient(var(--border) 1px, transparent 1.5px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 26px 26px;
  background-color: var(--bg);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 720px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hero-title {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 22px;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 17.5px;
  max-width: 480px;
  margin: 0 auto 34px;
}

.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

/* Hero trust checklist: replaces the old performance-stats row. This
   audience cares about cost/risk, not Lighthouse scores, so lead with the
   things that remove the "what's the catch" hesitation instead. Reuses the
   same accent-gradient checkmark used in .price-features. */
.hero-checklist {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 28px;
  max-width: 560px;
  margin: 0 auto;
}
.hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: left;
}
.hero-checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 5px;
  background: var(--accent-soft);
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Hero visual: the notifications a working website sends its owner. Cards
   slide up in sequence the first time the stack is in view, then the whole
   stack fades and shrinks as the user scrolls past (js/script.js). All of it
   is transform/opacity/box-shadow only — never size or position — so none of
   it can register as a layout shift. Built from the site's own theme tokens,
   so it flips light/dark for free. */
.hero-build-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 56px;
  will-change: transform, opacity;
}
.notif-stage {
  position: relative;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Soft colored bloom behind the cards so they don't float in a void. Two
   layers: a tight bright one hugging the cards, a much bigger dim one that
   washes color out into the empty space around the whole stage. */
.notif-stage::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  z-index: 0;
  background:
    radial-gradient(45% 45% at 30% 25%, rgba(92, 122, 76, 0.30), transparent 70%),
    radial-gradient(45% 45% at 72% 70%, rgba(124, 148, 87, 0.26), transparent 70%);
  filter: blur(26px);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-build-wrap.in-view .notif-stage::before { opacity: 1; animation: bloom-breathe 7s ease-in-out 1.1s infinite; }
@keyframes bloom-breathe { 50% { opacity: 0.62; } }

.hero-build-wrap::before {
  content: "";
  position: absolute;
  inset: -60px -18%;
  z-index: 0;
  background:
    radial-gradient(38% 60% at 12% 30%, rgba(92, 122, 76, 0.16), transparent 72%),
    radial-gradient(34% 55% at 90% 65%, rgba(255, 181, 69, 0.13), transparent 72%),
    radial-gradient(30% 50% at 55% 100%, rgba(124, 148, 87, 0.14), transparent 72%);
  filter: blur(38px);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-build-wrap.in-view::before { opacity: 1; }

/* Deliberately not lined up: each card sits at its own angle and offset, gets
   tossed in from a different direction, then bobs on its own clock. The rest
   angle is repeated inside every keyframe set so the toss can hand off to the
   bob without the card snapping straight. */
.notif-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  /* Pinned so the content-cycling in js/script.js (swapping which
     notification appears in which slot) can never change a card's box —
     title/sub are single-line + ellipsis below for the same reason. That's
     what keeps the "jumble" effect from ever being able to trigger a layout
     shift, no matter what text rotates through. */
  min-height: 70px;
  border-radius: 18px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px -22px rgba(41, 38, 32, 0.46);
  opacity: 0;
}
.nc-1 { margin: 0 42px 0 0; transform: rotate(-3.2deg); border-color: var(--accent-soft); }
.nc-2 { margin: -6px 0 0 38px; transform: rotate(2.6deg); }
.nc-3 { margin: -2px 22px 0 6px; transform: rotate(-1.6deg); }

.hero-build-wrap.in-view .nc-1 { animation: toss-1 0.75s var(--ease) 0.1s forwards, bob-1 5.5s ease-in-out 1.1s infinite; }
.hero-build-wrap.in-view .nc-2 { animation: toss-2 0.75s var(--ease) 0.3s forwards, bob-2 6.4s ease-in-out 1.3s infinite; }
.hero-build-wrap.in-view .nc-3 { animation: toss-3 0.75s var(--ease) 0.5s forwards, bob-3 7.1s ease-in-out 1.5s infinite; }

@keyframes toss-1 {
  from { opacity: 0; transform: rotate(-17deg) translate(-38px, 30px) scale(0.88); }
  to   { opacity: 1; transform: rotate(-3.2deg) translate(0, 0) scale(1); }
}
@keyframes toss-2 {
  from { opacity: 0; transform: rotate(15deg) translate(46px, 26px) scale(0.88); }
  to   { opacity: 1; transform: rotate(2.6deg) translate(0, 0) scale(1); }
}
@keyframes toss-3 {
  from { opacity: 0; transform: rotate(-13deg) translate(-30px, 34px) scale(0.9); }
  to   { opacity: 1; transform: rotate(-1.6deg) translate(0, 0) scale(1); }
}
@keyframes bob-1 {
  0%, 100% { opacity: 1; transform: rotate(-3.2deg) translateY(0); }
  50%      { opacity: 1; transform: rotate(-2.3deg) translateY(-7px); }
}
@keyframes bob-2 {
  0%, 100% { opacity: 1; transform: rotate(2.6deg) translateY(0); }
  50%      { opacity: 1; transform: rotate(3.5deg) translateY(-5px); }
}
@keyframes bob-3 {
  0%, 100% { opacity: 1; transform: rotate(-1.6deg) translateY(0); }
  50%      { opacity: 1; transform: rotate(-2.4deg) translateY(-6px); }
}

.notif-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-icon svg { width: 20px; height: 20px; }
/* Counter-tilt so the badge looks hand-placed rather than machined on. */
.nc-1 .notif-icon { transform: rotate(5deg); }
.nc-2 .notif-icon { transform: rotate(-6deg); }
.nc-3 .notif-icon { transform: rotate(4deg); }
.ni-blue { background: rgba(92, 122, 76, 0.16); color: var(--accent); }
.ni-amber { background: rgba(255, 181, 69, 0.18); color: var(--amber); }
.ni-purple { background: rgba(124, 148, 87, 0.16); color: var(--accent-2); }
.hero-build-wrap.in-view .nc-1 .notif-icon { animation: notif-pulse 3.4s ease-out 1.4s infinite; }
@keyframes notif-pulse {
  0% { box-shadow: 0 0 0 0 rgba(92, 122, 76, 0.45); }
  35%, 100% { box-shadow: 0 0 0 12px rgba(92, 122, 76, 0); }
}

/* Confetti scattered around the whole wrap (not just tight to the cards) so
   the wide-open margins on bigger screens get some life too. Three shapes —
   four-point sparkle, plain dot, plus-sign — mixed for a scrapbook feel
   rather than one repeated icon. Positioned in % of the full-width wrap, so
   they spread further apart the wider the viewport gets. */
.spark { position: absolute; z-index: 2; opacity: 0; }
.spark-diamond {
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.spark-dot { width: 7px; height: 7px; border-radius: 50%; }
.spark-plus {
  width: 14px;
  height: 14px;
  clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
}

.sp-1 { top: 6%;   left: 20%;  background: var(--accent); }
.sp-2 { top: 14%;  right: 16%; background: var(--amber); width: 9px; height: 9px; }
.sp-4 { top: 48%;  right: 6%;  background: var(--accent); }
.sp-5 { top: 2%;   right: 34%; background: var(--accent-2); }

.hero-build-wrap.in-view .sp-1 { animation: twinkle 4.2s ease-in-out 1.5s infinite; }
.hero-build-wrap.in-view .sp-2 { animation: twinkle 5.1s ease-in-out 2.2s infinite; }
.hero-build-wrap.in-view .sp-4 { animation: twinkle 5.6s ease-in-out 1.9s infinite; }
.hero-build-wrap.in-view .sp-5 { animation: twinkle 4.9s ease-in-out 2.6s infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 0.85; transform: scale(1) rotate(90deg); }
}

.notif-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notif-title,
.notif-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.notif-sub {
  font-size: 13px;
  color: var(--text-dim);
}
.notif-stars { color: var(--amber); letter-spacing: 2px; }

/* Content-cycling crossfade: only opacity, so a swap can never affect the
   fixed-size card around it. Icon and icon-color swap at the same beat. */
.notif-card.is-swapping .notif-icon,
.notif-card.is-swapping .notif-text,
.notif-card.is-swapping .notif-time { opacity: 0; transition: opacity 0.22s ease; }
.notif-icon, .notif-text, .notif-time { transition: opacity 0.22s ease; }
.notif-icon { transition-property: opacity, background-color, color; }

.notif-time {
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
  min-width: 26px;
  font-size: 11.5px;
  color: var(--text-dimmer);
  text-align: right;
}

/* With motion reduced, drop every animation but keep the scattered angles —
   the cards are revealed by the toss keyframes, so opacity has to be restored
   here or they'd stay invisible. */
@media (prefers-reduced-motion: reduce) {
  .hero-build-wrap { transform: none !important; }
  .hero-build-wrap .notif-card,
  .hero-build-wrap .spark,
  .hero-build-wrap .notif-icon,
  .hero-build-wrap .notif-stage::before { animation: none !important; }
  .hero-build-wrap .notif-card { opacity: 1; }
  .hero-build-wrap .spark { opacity: 0.7; }
  .hero-build-wrap.in-view .notif-stage::before { opacity: 1; }
}

/* ==========================================================================
   Page hero (About / Pricing / Contact)
   ========================================================================== */

.page-hero {
  position: relative;
  padding: 168px 0 70px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 50% 0%, rgba(92, 122, 76, 0.14), transparent 70%);
}
.page-hero-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.page-hero .section-eyebrow { display: block; }
.page-hero .section-title { margin-left: auto; margin-right: auto; }
.page-hero .section-lead { margin-left: auto; margin-right: auto; }
.contact-location { color: var(--text-dimmer); font-size: 13.5px; margin-top: -28px; }

/* About page: hero + founder bio share one container, so the bio can
   sit right under the headline instead of starting a new section. */
.about-hero-inner { max-width: 760px; }
.about-bio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 32px;
  text-align: left;
  margin-top: 56px;
}
.about-bio .founder-avatar { margin: 0; background: linear-gradient(135deg, #faf6ee, #f2ead9); }
.about-bio .founder-text p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.about-bio .founder-intro { color: var(--text); font-size: 16px; }
.about-bio .founder-intro strong { font-weight: 700; }
.about-bio .btn { margin-top: 8px; }

/* ==========================================================================
   Services ribbon (marquee tape across the hero/features seam)
   ========================================================================== */

.ribbon-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Pulls up into the hero's bottom padding and down into the features
     section's top padding, so it visually sits across the seam rather than
     between two flush edges. */
  margin: -54px 0 -34px;
}
.ribbon {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 34px -14px rgba(41, 38, 32, 0.35);
  overflow: hidden;
}
.ribbon-track {
  display: flex;
  width: max-content;
  /* Duration scales with the word list length (was 34s for 8 items) so the
     scroll speed — and reading pace — stays the same as items are added. */
  animation: ribbon-scroll 115s linear infinite;
}
.ribbon-set { display: flex; flex-shrink: 0; }
.ribbon-item {
  padding: 17px 26px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  white-space: nowrap;
}
@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
}

.features { padding: 110px 0; background: var(--bg); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.feature-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover); transform: translateY(-3px); }
.feature-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 18px;
}
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.feature-card p { color: var(--text-dim); font-size: 14.5px; }

/* ==========================================================================
   Founder / direct-line section
   ========================================================================== */

.founder {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.founder-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.founder-inner.no-avatar {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.founder-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder-text h3 { font-size: 22px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.01em; }
.founder-text p { color: var(--text-dim); font-size: 15px; max-width: 560px; }
.founder-inner.no-avatar .founder-text p {
  font-weight: 500;
  color: var(--text);
  font-size: 18px;
  max-width: 100%;
}
.founder-cta { flex-shrink: 0; }

/* ==========================================================================
   Services
   ========================================================================== */

.services { padding: 110px 0; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.service-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.service-num {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}
.service-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.service-card p { color: var(--text-dim); font-size: 13.5px; }

.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.service-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.service-detail:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.service-detail .service-num { font-size: 13px; margin-bottom: 16px; }
.service-detail h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.01em; }
.service-detail > p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 20px; }
.service-detail .price-features { margin-bottom: 0; }

/* ==========================================================================
   Portfolio
   ========================================================================== */

.work { padding: 110px 0; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Blog with only one real post published so far: single centered column
   instead of a 3-col grid with two empty slots. */
/* Two classes (not just .work-grid-single) so this beats the later
   .work-grid media-query rules regardless of source order — same
   cascade-order issue hit before with .faq and .pricing.after-hero. */
.work-grid.work-grid-single { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
.work-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.work-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.work-thumb {
  height: 170px;
  background: linear-gradient(135deg, rgba(92,122,76,0.16), rgba(124,148,87,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-thumb::after {
  content: "Coming soon";
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  border: 1px dashed var(--border-strong);
  padding: 6px 14px;
  border-radius: 999px;
}
/* Published post thumbnail: solid badge instead of the dashed "coming
   soon" placeholder style, and a warmer gradient fill instead of the flat
   placeholder tint, so a real post visually reads as live, not a stub. */
.work-thumb-live { background: linear-gradient(135deg, rgba(92,122,76,0.22), rgba(124,148,87,0.18)); }
.work-thumb-live::after {
  content: "Read article";
  color: #fff;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.work-card h3 { font-size: 15.5px; font-weight: 700; padding: 18px 18px 2px; }
.work-card p { color: var(--text-dim); font-size: 13px; padding: 0 18px 18px; }

/* Diagonal "coming soon" tape, stuck across the empty portfolio grid. */
.work-tape-wrap { position: relative; overflow: hidden; }
.coming-soon-tape {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 130vw;
  max-width: 1400px;
  padding: 16px 0;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 20px 50px -16px rgba(41, 38, 32, 0.42);
  text-align: center;
  pointer-events: none;
}
.coming-soon-tape span {
  display: block;
  font-size: clamp(16px, 4.4vw, 32px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ==========================================================================
   Standards strip
   ========================================================================== */

.standards {
  padding: 70px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.standard-item strong { display: block; font-size: 30px; font-weight: 800; margin-bottom: 4px; }
.standard-item span { color: var(--text-dim); font-size: 13.5px; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing { padding: 110px 0; }
.after-hero { padding-top: 20px; }
.founding-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 560px;
  /* Pulls up to close the gap left by .section-lead's margin-bottom (48px)
     plus .page-hero's own bottom padding — that gap reads as fine on other
     after-hero pages, which go straight into a plain grid/list, but a
     bordered, colored box floating that far below the hero looked like a
     mistake. Scoped here rather than touching .section-lead/.page-hero,
     which are shared by every other page-hero page. */
  margin: -70px auto 44px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 181, 69, 0.14), rgba(255, 181, 69, 0.04));
  border: 1px solid rgba(255, 181, 69, 0.35);
  position: relative;
  z-index: 1;
}
.founding-tag {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--amber), #ff9d3d);
  color: #1a1305;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.founding-heading { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.founding-banner p { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border-color: rgba(92, 122, 76, 0.5);
  background: linear-gradient(180deg, rgba(92,122,76,0.08), var(--bg-card) 40%);
  position: relative;
}
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.price-name { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; text-align: center; }
.price-was {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dimmer);
  text-decoration: line-through;
  margin-bottom: 2px;
  text-align: center;
}
.price-was span { text-decoration: line-through; }
.price-was-placeholder { visibility: hidden; }
.price-value { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2px; text-align: center; }
.price-value span { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.price-founding-note {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 14px;
  text-align: center;
  line-height: 1.6;
}
.price-founding-note-none { color: var(--text-dimmer); }
.price-save {
  display: inline-block;
  background: rgba(255, 181, 69, 0.16);
  color: var(--amber);
  font-weight: 700;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.price-sub { color: var(--text-dimmer); font-size: 13px; margin-bottom: 24px; text-align: center; }
.price-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; }
.price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-dim); }
.price-features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 5px;
  background: var(--accent-soft);
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}
/* Pricing-tier cards only (not the Services page, which reuses
   .price-features with its checkmarks/left-alignment intact):
   no checkmark icon, list centered under the centered title/price. */
.pricing-grid .price-features li { display: block; text-align: center; }
.pricing-grid .price-features li::before { display: none; }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials { padding: 110px 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.testimonial-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card p { font-size: 14.5px; color: var(--text); margin-bottom: 20px; }
.testimonial-author strong { display: block; font-size: 14px; font-weight: 700; }
.testimonial-author span { font-size: 12.5px; color: var(--text-dimmer); }

/* ==========================================================================
   CTA banner
   ========================================================================== */

.cta-banner {
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(92,122,76,0.14), transparent 70%);
}
.cta-inner { position: relative; z-index: 1; }
.cta-inner h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.cta-inner p { color: var(--text-dim); font-size: 16px; margin-bottom: 30px; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact { padding: 10px 0 140px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 480px;
  margin: 0 auto;
}
.contact-card { text-align: left; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.contact-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.contact-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dimmer); }
.contact-value { font-size: 16px; font-weight: 700; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: 20px 0 100px; }
.faq-container { max-width: 760px; }
.faq-category {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 48px 0 16px;
}
.faq-category:first-child { margin-top: 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-dimmer);
  transition: transform 0.2s ease;
}
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 4px 22px 20px;
  color: var(--text-dim);
  font-size: 14.5px;
}
.faq-item p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Blog article
   ========================================================================== */

.article-hero { padding-bottom: 40px; }
.article-section { padding: 20px 0 110px; }
.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-dimmer);
}
.article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dimmer); }

.article-body { max-width: 700px; margin: 0 auto; padding: 0 0 20px; }
.article-body p {
  color: var(--text-dim);
  font-size: 16.5px;
  line-height: 1.75;
  margin-bottom: 22px;
}
.article-body h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 52px 0 18px;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body ul, .article-body ol {
  margin: -6px 0 22px;
  padding-left: 22px;
}
.article-body ul { list-style: disc; }
.article-body li {
  color: var(--text-dim);
  font-size: 16.5px;
  line-height: 1.6;
  margin-bottom: 9px;
}
.article-body li:last-child { margin-bottom: 0; }
.article-body li::marker { color: var(--accent); font-weight: 700; }
.article-body p a, .article-body li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-lead { font-size: 19px !important; color: var(--text) !important; }

.article-faq-heading { margin-bottom: 20px !important; }

.article-cta { margin-top: 56px; padding: 32px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); text-align: center; }
.article-cta h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.article-cta p { color: var(--text-dim); font-size: 15px; margin-bottom: 20px !important; }

.article-back { display: inline-block; margin-bottom: 28px; font-size: 14px; color: var(--text-dim); }
.article-back:hover { color: var(--text); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--border); padding: 48px 0 28px; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 32px;
}
.footer-links { display: flex; gap: 26px; font-size: 14px; color: var(--text-dim); flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }
.footer-contact { display: flex; gap: 20px; font-size: 14px; color: var(--text-dim); }
.footer-contact a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 22px; text-align: center; }
.footer-bottom p { font-size: 13px; color: var(--text-dimmer); }
/* Small easter egg credit line under the copyright text. */
.footer-cats { margin-top: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .standards-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .founder-inner { grid-template-columns: 1fr; text-align: center; }
  .founder-avatar { margin: 0 auto; }
  .founder-text p { margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-right { gap: 12px; }
  .hero { padding: 140px 0 60px; }
  .page-hero { padding: 140px 0 50px; }
  .features, .services, .work, .pricing, .testimonials { padding: 64px 0; }
  /* Higher specificity than the rule above (two classes vs one), so this
     wins regardless of source order — same "tight spacing right after a
     page-hero" cascade bug hit .faq earlier; .pricing needed the same fix. */
  .pricing.after-hero { padding-top: 20px; }
  .founder, .cta-banner, .standards { padding: 56px 0; }
  .contact { padding: 10px 0 90px; }
  .features-grid, .services-grid, .work-grid { grid-template-columns: 1fr; }
  .standards-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-build-wrap { margin-top: 40px; }
  .notif-card { padding: 13px 15px; gap: 12px; }
  /* Narrower screens can't spare as much room for the scatter, and the
     offsets were squeezing the longest title onto a second line. */
  .nc-1 { margin-right: 20px; }
  .nc-2 { margin-left: 18px; }
  .nc-3 { margin-right: 10px; margin-left: 2px; }
  .notif-icon { width: 36px; height: 36px; }
  .notif-title { font-size: 14px; }
  .notif-sub { font-size: 12.5px; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
  .footer-links { justify-content: center; }
  .footer-contact { justify-content: center; }

  .about-bio { grid-template-columns: 1fr; text-align: left; margin-top: 40px; }
  .about-bio .founder-avatar { margin: 0 auto 16px; }

  .article-section { padding: 20px 0 64px; }
  .article-body p, .article-body li { font-size: 15.5px; }
  .article-body h2 { font-size: 21px; margin: 40px 0 14px; }
  .article-cta { padding: 24px 20px; }
}