/* ============================================================
   Kasama Systems — "Shoreline" website system  (multi-page)
   Aesthetic: calm eco-spa · soft abstract forms (no leaves)
   Type: Poppins (headings/logo) · Atkinson Hyperlegible (body)
   Goldenrod = flat solid pops only. No gradients.
   ============================================================ */

:root {
  /* Ground & surfaces */
  --paper: #F9F5EC;
  --paper-deep: #F1EBDE;
  --surface: #FFFDFA;
  --surface-2: #FCFAF4;
  --white: #FFFFFF;

  /* Ink */
  --ink: #1B292D;
  --ink-soft: #4A585C;
  --ink-mute: #778385;

  /* Lines */
  --line: #D7E1DD;
  --line-soft: #E6EDEA;

  /* Sage — primary */
  --sage-deep: #285847;
  --sage: #547F6E;
  --sage-soft: #C2DFD3;
  --sage-wash: #E4F3EC;

  /* Sand */
  --sand: #DBC8AA;
  --sand-soft: #F1E6D6;

  /* Narra wood — grounding */
  --wood-deep: #4A200E;
  --wood: #6E3B21;
  --wood-soft: #A57C67;
  --wood-wash: #F7E4D7;

  /* Goldenrod — flat, positive pops only */
  --gold: #DCA83C;
  --gold-ink: #845A0F;
  --gold-wash: #F7E7BF;

  /* Blue & sky · moss */
  --moss: #40704E;

  /* Derived deep forest (hero / headers) */
  --forest: #143229;
  --forest-2: #1E4636;

  /* Type */
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Rhythm */
  --container: 1240px;
  --gutter: clamp(1.4rem, 5vw, 5rem);
  --section-y: clamp(5rem, 10vw, 10rem);
  --radius: 28px;
  --radius-lg: 44px;

  --pop: var(--gold);
}

/* ------------------------------------------------------------ Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.62;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sage-soft); color: var(--sage-deep); }

/* ------------------------------------------------------------ Type */
h1, h2, h3, h4, .head { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.018em; line-height: 1.04; color: var(--ink); }
.display { font-size: clamp(2.9rem, 7.2vw, 6.6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; }
.h2 { font-size: clamp(2.1rem, 4.3vw, 3.7rem); letter-spacing: -0.022em; }
.h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing: -0.012em; line-height: 1.12; }
.eyebrow {
  font-family: var(--font-head); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 1.7rem; height: 1px; background: currentColor; opacity: 0.5; }
.lede { font-size: clamp(1.18rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--ink-soft); letter-spacing: -0.006em; }
.muted { color: var(--ink-mute); }
.index-tag { font-family: var(--font-head); font-weight: 300; font-size: .95rem; color: var(--sage); letter-spacing: .04em; }

/* ------------------------------------------------------------ Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: var(--section-y); }

/* ------------------------------------------------------------ Buttons */
.btn {
  font-family: var(--font-head); font-weight: 500; font-size: 0.96rem; letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 0.6em; padding: 0.92em 1.5em;
  border-radius: 100px; border: 1px solid transparent; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .3s, color .3s, border-color .3s; white-space: nowrap;
}
.btn .arr { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--sage-deep); color: var(--sand-soft); }
.btn-primary:hover { background: var(--forest-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sage); color: var(--sage-deep); transform: translateY(-2px); }
.btn-on-dark { background: var(--sand-soft); color: var(--sage-deep); }
.btn-on-dark:hover { background: var(--white); transform: translateY(-2px); }
.btn-outline-dark { background: transparent; color: var(--sand-soft); border-color: rgba(241,230,214,.32); }
.btn-outline-dark:hover { border-color: var(--sand-soft); transform: translateY(-2px); }

/* ============================================================ NAV */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: 1.1rem; transition: background .4s ease, box-shadow .4s ease, padding .4s ease; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav-link {
  font-family: var(--font-head); font-weight: 400; font-size: 0.94rem;
  color: var(--sand-soft); opacity: .82; letter-spacing: -0.004em;
  transition: opacity .25s, color .25s; position: relative;
}
.nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-link:hover { opacity: 1; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { opacity: 1; }
.nav-cta { display: inline-flex; }
.nav.scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding-block: .75rem; }
.nav.scrolled .nav-link { color: var(--ink-soft); opacity: .9; }
.nav.scrolled .nav-link.active { color: var(--sage-deep); opacity: 1; }
.nav.scrolled .logo .k { color: var(--sage-deep); }
.nav.scrolled .logo .s { color: var(--sage); }
.nav.scrolled .nav-cta.btn-outline-dark { color: var(--sage-deep); border-color: var(--line); }
.nav.scrolled .nav-cta.btn-outline-dark:hover { border-color: var(--sage); }

/* ------------------------------------------------------------ Logo */
.logo { font-family: var(--font-head); font-size: 1.42rem; letter-spacing: -0.01em; line-height: 1; display: inline-flex; align-items: baseline; gap: .34ch; white-space: nowrap; }
.logo .k { font-weight: 500; color: var(--sage-deep); }
.logo .s { font-weight: 300; color: var(--sage); }
.nav .logo .k { color: var(--sand-soft); }
.nav .logo .s { color: var(--sage-soft); }

/* ============================================================ SCENE — soft abstract forms (no leaves) */
.scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.scene > * { position: absolute; will-change: transform; }
.disc { border-radius: 50%; }
.pebble { border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%; }
.pebble.alt { border-radius: 60% 40% 47% 53% / 52% 58% 42% 48%; }
.ring { border-radius: 50%; background: none; border: 1px solid rgba(194,223,211,.28); }

/* hero cluster — translucent sage/moss forms, one flat gold dot */
.scene .s-disc-1 { width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; right: -6vw; top: 6%; background: color-mix(in srgb, var(--sage) 26%, transparent); }
.scene .s-pebble-1 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; right: 16vw; bottom: -8vw; background: color-mix(in srgb, var(--sage-deep) 52%, transparent); }
.scene .s-pebble-2 { width: 20vw; height: 22vw; max-width: 280px; max-height: 300px; right: 1vw; top: 16%; background: color-mix(in srgb, var(--moss) 34%, transparent); }
.scene .s-ring-1 { width: 58vw; height: 58vw; right: -14vw; top: 0; }
.scene .s-gold { width: 64px; height: 64px; background: var(--pop); right: 16vw; top: 26%; border-radius: 50%; }
.scene .s-sand { width: 26vw; height: 26vw; max-width: 360px; max-height: 360px; right: 28vw; bottom: -12vw; background: color-mix(in srgb, var(--sand) 22%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .scene > * { animation: float 15s ease-in-out infinite; }
  .scene .s-pebble-1 { animation-duration: 19s; animation-delay: -4s; }
  .scene .s-pebble-2 { animation-duration: 17s; animation-delay: -7s; }
  .scene .s-gold { animation-duration: 12s; animation-delay: -2s; }
  .scene .s-ring-1 { animation: none; }
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ============================================================ HERO (home) */
.hero { position: relative; background: var(--forest); color: var(--sand-soft); overflow: hidden; min-height: 100svh; display: flex; align-items: center; }
.hero::after { content:""; position:absolute; inset:0 0 auto 0; height: 180px; background: linear-gradient(180deg, rgba(8,24,18,.34), transparent); pointer-events:none; z-index: 2; }
.hero-inner { position: relative; z-index: 3; padding-block: clamp(8rem, 16vh, 12rem) clamp(4rem, 9vh, 7rem); width: 100%; }
.hero h1 { color: var(--paper); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--sage-soft); }
.hero .lede { color: color-mix(in srgb, var(--sand-soft) 86%, transparent); max-width: 46ch; margin-top: 1.7rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.6rem; align-items: center; }
.hero-meta { margin-top: clamp(3.5rem, 8vh, 6rem); display: flex; flex-wrap: wrap; gap: clamp(1.5rem,4vw,3.4rem); align-items: center; }
.hero-meta .stat { display: flex; flex-direction: column; gap: .15rem; }
.hero-meta .stat b { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; color: var(--sand-soft); letter-spacing: -0.01em; }
.hero-meta .stat span { font-size: .86rem; color: color-mix(in srgb, var(--sage-soft) 80%, transparent); }
.hero-meta .divider { width:1px; height: 2.4rem; background: rgba(241,230,214,.18); }

/* ============================================================ PAGE HEADER (inner pages) */
.page-header { position: relative; background: var(--forest); color: var(--sand-soft); overflow: hidden; }
.page-header::after { content:""; position:absolute; inset:0 0 auto 0; height: 160px; background: linear-gradient(180deg, rgba(8,24,18,.34), transparent); pointer-events:none; z-index: 2; }
.page-header .scene .s-disc-1 { top: -10%; }
.page-header .scene .s-pebble-2 { top: 30%; }
.page-header-inner { position: relative; z-index: 3; padding-block: clamp(8.5rem, 18vh, 12rem) clamp(3.5rem, 7vh, 6rem); max-width: 60ch; }
.page-header h1 { color: var(--paper); font-size: clamp(2.5rem, 5.6vw, 4.6rem); letter-spacing: -0.026em; line-height: 1.0; margin-top: 1rem; }
.page-header h1 em { font-style: normal; color: var(--sage-soft); }
.page-header .lede { color: color-mix(in srgb, var(--sand-soft) 88%, transparent); margin-top: 1.5rem; max-width: 50ch; }
.page-header .eyebrow { color: var(--sage-soft); }

/* ============================================================ Section header */
.sec-head { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 62ch; }
.sec-head .h2 { margin-top: .3rem; }
.sec-head .lede { margin-top: .3rem; }

/* ============================================================ HOME — statement + index rows */
.statement { background: var(--surface-2); }
.statement-inner { max-width: 24ch; }
.statement p { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.18; color: var(--sage-deep); max-width: 20ch; }
.statement p .hl { color: var(--wood); }
.statement .s-sub { font-family: var(--font-body); font-size: clamp(1.05rem,1.4vw,1.25rem); color: var(--ink-soft); margin-top: 1.6rem; max-width: 52ch; }

.index-rows { border-top: 1px solid var(--line); margin-top: 0; }
.index-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem,3vw,2.6rem); align-items: center;
  padding-block: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line);
  transition: padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.index-row:hover { padding-left: 1rem; }
.index-row .ir-num { font-family: var(--font-head); font-weight: 300; color: var(--sage); font-size: 1rem; }
.index-row .ir-main h3 { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem,3vw,2.3rem); letter-spacing: -0.018em; color: var(--ink); }
.index-row .ir-main p { color: var(--ink-soft); font-size: 1rem; margin-top: .35rem; max-width: 52ch; }
.index-row .ir-arr { font-family: var(--font-head); font-size: 1.6rem; color: var(--sage); transition: transform .4s cubic-bezier(.2,.7,.3,1), color .3s; }
.index-row:hover .ir-arr { transform: translateX(6px); color: var(--sage-deep); }
.index-row:hover .ir-main h3 { color: var(--sage-deep); }

/* ============================================================ PROOF STRIP */
.strip { background: var(--sage-deep); color: var(--sand-soft); }
.strip-inner { display: flex; align-items: center; gap: clamp(1.4rem,4vw,3.2rem); padding-block: 1.5rem; flex-wrap: wrap; justify-content: center; }
.strip-item { font-family: var(--font-head); font-weight: 400; font-size: clamp(.92rem,1.1vw,1.05rem); letter-spacing: -.005em; color: color-mix(in srgb, var(--sand-soft) 90%, transparent); display:flex; align-items:center; gap:.6em; }
.strip-item .dot { width:6px; height:6px; border-radius:50%; background: var(--pop); }

/* ============================================================ PROBLEM (where you are) */
.problem-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.2rem, 5vw, 5.5rem); align-items: start; }
.gap-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gap-item { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.gap-item .gi-num { font-family: var(--font-head); font-weight: 300; color: var(--wood-soft); font-size: 1rem; }
.gap-item .gi-body h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.18rem; letter-spacing: -.01em; }
.gap-item .gi-body p { color: var(--ink-soft); margin-top: .25rem; font-size: .98rem; }
.problem-aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.8rem,3vw,2.6rem); position: relative; overflow: hidden; }
.problem-aside .pa-quote { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.4rem,2.2vw,1.95rem); letter-spacing: -.02em; line-height: 1.16; color: var(--sage-deep); }
.problem-aside .pa-quote .hl { color: var(--wood); }
.problem-aside .pa-foot { margin-top: 1.6rem; color: var(--ink-mute); font-size: .92rem; }
.problem-aside .pa-shape { position:absolute; width: 220px; height: 220px; border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%; background: color-mix(in srgb, var(--sage-soft) 50%, transparent); right: -70px; bottom: -70px; }

/* ============================================================ SOLUTION (where you are going) */
.sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2vw,1.4rem); }
.sol-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.6rem,2.6vw,2.3rem); display: flex; flex-direction: column; gap: 1rem; min-height: 230px; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s; position: relative; overflow: hidden; }
.sol-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(20,50,41,.4); border-color: var(--sage-soft); }
.sol-card .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sage-wash); color: var(--sage-deep); }
.sol-card .ico svg { width: 23px; height: 23px; }
.sol-card h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.28rem; letter-spacing: -.012em; margin-top: auto; }
.sol-card p { color: var(--ink-soft); font-size: .99rem; }
.sol-card .sc-num { position: absolute; top: 1.5rem; right: 1.6rem; font-family: var(--font-head); font-weight: 300; color: var(--line); font-size: 1.05rem; }
.sol-card.feature { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(1.5rem,4vw,3.5rem); background: var(--sage-deep); color: var(--sand-soft); border: none; min-height: 0; }
.sol-card.feature h4, .sol-card.feature p { color: var(--sand-soft); }
.sol-card.feature .ico { background: rgba(241,230,214,.14); color: var(--sand-soft); }
.sol-card.feature .fc-text { display:flex; flex-direction: column; gap:.7rem; }
.sol-card.feature .fc-text h4 { font-size: clamp(1.5rem,2.4vw,2.1rem); margin: 0; }
.sol-card.feature .fc-shape { position:absolute; right:-50px; top:-50px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--pop) 90%, transparent); opacity: .14; }

/* ============================================================ PERSONA (perspective) */
.persona-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.2rem,5vw,5.5rem); align-items: center; }
.persona-card { position: relative; aspect-ratio: 4/4.6; border-radius: var(--radius-lg); overflow: hidden; background: var(--sage-deep); display:flex; align-items:flex-end; padding: clamp(1.8rem,3vw,2.6rem); }
.persona-card .pc-shape { position:absolute; }
.pc-shape.a { width: 64%; height: 54%; border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%; background: color-mix(in srgb, var(--sage) 42%, transparent); top: -8%; right: -12%; }
.pc-shape.b { width: 50%; height: 44%; border-radius: 60% 40% 47% 53% / 52% 58% 42% 48%; background: color-mix(in srgb, var(--moss) 52%, transparent); bottom: -6%; left: -16%; }
.pc-shape.c { width: 30%; height: 30%; border-radius: 50%; border: 1px solid rgba(194,223,211,.35); right: 16%; top: 16%; }
.pc-shape.d { width: 44px; height: 44px; border-radius: 50%; background: var(--pop); right: 22%; bottom: 26%; }
.persona-card .pc-label { position: relative; z-index: 2; color: var(--sand-soft); }
.persona-card .pc-label .role { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem,2vw,1.7rem); letter-spacing: -.015em; }
.persona-card .pc-label .sub { color: var(--sage-soft); font-size: .95rem; margin-top: .3rem; }
.persona-list { display: grid; gap: 1.5rem; margin-top: 2.2rem; }
.persona-list .pl { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.persona-list .pl .pl-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--sand-soft); color: var(--wood); display:grid; place-items:center; flex:none; }
.persona-list .pl .pl-ic svg { width: 19px; height: 19px; }
.persona-list .pl h4 { font-family: var(--font-head); font-weight:500; font-size: 1.1rem; letter-spacing:-.01em; }
.persona-list .pl p { color: var(--ink-soft); font-size: .96rem; margin-top: .2rem; }
.persona blockquote { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem,2.6vw,2.3rem); letter-spacing:-.02em; line-height:1.18; color: var(--sage-deep); max-width: 20ch; }
.persona blockquote .by { display:block; font-family: var(--font-body); font-weight:400; font-size: .92rem; color: var(--ink-mute); letter-spacing: 0; margin-top: 1rem; }

/* ============================================================ CONTACT (get in touch) */
.contact { position: relative; background: var(--forest); color: var(--sand-soft); overflow: hidden; }
.contact-inner { position: relative; z-index: 3; padding-block: clamp(8.5rem, 18vh, 12rem) clamp(5rem, 10vh, 9rem); max-width: 760px; }
.contact h1 { color: var(--paper); font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.028em; line-height: 1.0; margin-top: 1rem; }
.contact h1 em { font-style: normal; color: var(--sage-soft); }
.contact .lede { color: color-mix(in srgb, var(--sand-soft) 88%, transparent); margin-top: 1.5rem; max-width: 56ch; }
.contact-mail { margin-top: 2.6rem; display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing: -.02em; color: var(--sand-soft); border-bottom: 1px solid rgba(241,230,214,.4); padding-bottom: .25rem; transition: border-color .3s, color .3s; }
.contact-mail:hover { border-color: var(--sand-soft); }
.contact-mail .arr { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.contact-mail:hover .arr { transform: translateX(5px); }
.contact-actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.contact-points { margin-top: clamp(3.5rem,7vh,5.5rem); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.6rem); max-width: 760px; }
.contact-points .cp { border-top: 1px solid rgba(241,230,214,.22); padding-top: 1.1rem; }
.contact-points .cp .cp-k { font-family: var(--font-head); font-weight: 500; font-size: 1.02rem; color: var(--sand-soft); }
.contact-points .cp .cp-v { font-size: .92rem; color: color-mix(in srgb,var(--sage-soft) 86%, transparent); margin-top: .3rem; }

/* ============================================================ FOOTER */
.footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,4vw,4rem); padding-block: clamp(3.5rem,6vw,5rem) 2.5rem; }
.footer .logo { font-size: 1.7rem; }
.footer .f-tag { color: var(--ink-soft); margin-top: 1rem; max-width: 34ch; font-size: .98rem; }
.footer .f-mail { display:inline-flex; align-items:center; gap:.5em; margin-top: 1.4rem; font-family: var(--font-head); font-weight: 500; color: var(--sage-deep); letter-spacing:-.01em; border-bottom: 1px solid var(--sage-soft); padding-bottom: 2px; transition: border-color .3s; }
.footer .f-mail:hover { border-color: var(--sage-deep); }
.footer h5 { font-family: var(--font-head); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.1rem; }
.footer .f-col a.f-link { display: block; color: var(--ink-soft); padding-block: .42rem; font-size: .98rem; transition: color .25s; width: fit-content; white-space: nowrap; }
.footer .f-col a.f-link:hover { color: var(--sage-deep); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.6rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .85rem; }
.footer-bar .seal { display:inline-flex; align-items:center; gap:.55em; white-space: nowrap; }
.footer-bar .seal .dot { width:7px;height:7px;border-radius:50%; background: var(--moss); }

/* ============================================================ Reveal animation */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; }
  .reveal.d2 { transition-delay: .16s; }
  .reveal.d3 { transition-delay: .24s; }
  .reveal.d4 { transition-delay: .32s; }
}

/* ============================================================ Responsive */
@media (max-width: 960px) {
  .problem-grid, .persona-grid { grid-template-columns: 1fr; }
  .sol-card.feature { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer .f-brand { grid-column: 1 / -1; }
  .contact-points { grid-template-columns: 1fr; gap: 0; }
  .contact-points .cp { padding-block: 1.1rem; }
}
@media (max-width: 680px) {
  .nav-links .nav-link { display: none; }
  .nav-links .nav-cta { display: inline-flex; }
  .sol-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-meta .divider { display: none; }
  .index-row { grid-template-columns: auto 1fr; }
  .index-row .ir-arr { display: none; }
}