/* Kahf Technologies - light cinematic theme (locked brand)
   Palette: warm white #FEFEFD / #F6F6F4, pale emerald mist #E9F7EE,
   deep emerald #05503C, mid emerald #16A34A (secondary), black #0A0A0A.
   Fonts: Playfair Display (headlines) + Inter (body/UI). */

:root {
  --bg: #FEFEFD;
  --bg-soft: #F6F6F4;
  --mist: #E9F7EE;
  --deep: #05503C;
  --deep-dark: #043D2E;
  --mid: #16A34A;
  --ink: #0A0A0A;
  --muted: #4C5A53;
  --line: rgba(5, 80, 60, 0.12);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 2px rgba(5, 80, 60, 0.04), 0 10px 24px rgba(5, 80, 60, 0.07), 0 22px 44px rgba(5, 80, 60, 0.05);
  --shadow-md: 0 2px 6px rgba(5, 80, 60, 0.05), 0 22px 44px rgba(5, 80, 60, 0.11), 0 44px 84px rgba(5, 80, 60, 0.09);
  --shadow-lg: 0 4px 10px rgba(5, 80, 60, 0.06), 0 34px 68px rgba(5, 80, 60, 0.15), 0 64px 120px rgba(5, 80, 60, 0.11);
  --shadow-pill: 0 2px 6px rgba(5, 80, 60, 0.05), 0 18px 38px rgba(5, 80, 60, 0.12), 0 42px 84px rgba(5, 80, 60, 0.10);
  --card-border: rgba(255, 255, 255, 0.85);
  --radius: 20px;
  --radius-sm: 14px;
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 780px at 50% -6%, #FFFFFF 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(1500px 1050px at 50% 42%, #FDFEFB 0%, var(--bg-soft) 78%);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Cinematic atmosphere: emerald mist clouds drift at the corners and edges,
   with faint diagonal light rays falling from the top corners, exactly as in
   the approved reference. Fixed layer, present behind every section. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(248deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(720px 480px at -8% 12%, rgba(233, 247, 238, 0.95), rgba(233, 247, 238, 0) 62%),
    radial-gradient(760px 520px at 108% 28%, rgba(233, 247, 238, 0.9), rgba(233, 247, 238, 0) 62%),
    radial-gradient(900px 600px at 50% 115%, rgba(233, 247, 238, 0.75), rgba(233, 247, 238, 0) 65%);
  background-size: 130% 100%, 130% 100%, auto, auto, auto;
  background-position: left top, right top, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
/* Organic mist texture over the gradient base (soft clouds, PIL generated) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("../img/mist.png") center / cover no-repeat;
  opacity: 0.85;
}
/* Heroes carry a stronger local layer of the same atmosphere (light rays and
   bokeh sparkles); see .hero::before and .page-hero::before below. */

main, header, footer { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }
a { color: var(--deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(1180px, 92%); margin: 0 auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.14; color: var(--ink); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--deep); }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.95rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.35rem; }
p { color: var(--muted); }

.kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--deep); margin-bottom: 1.1rem;
}
.kicker::after {
  content: ""; display: block; width: 52px; height: 2px;
  background: var(--mid); margin-top: 0.7rem; border-radius: 2px;
}
.kicker.center { text-align: center; }
.kicker.center::after { margin-left: auto; margin-right: auto; }

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section.alt { background: linear-gradient(180deg, rgba(246,246,244,0) 0%, rgba(246,246,244,0.85) 18%, rgba(246,246,244,0.85) 82%, rgba(246,246,244,0) 100%); }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 1rem; font-size: 1.06rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--deep); color: #fff; box-shadow: 0 14px 30px rgba(5, 80, 60, 0.28); position: relative; overflow: hidden; isolation: isolate; }
.btn-primary:hover { background: var(--deep-dark); box-shadow: 0 18px 36px rgba(5, 80, 60, 0.32); }
/* Cinematic light sweep across primary buttons on hover */
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-18deg); transition: transform 0.65s ease; z-index: -1; pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(260%) skewX(-18deg); }
.btn-ghost { background: var(--glass-strong); color: var(--deep); border-color: rgba(5, 80, 60, 0.35); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--deep); }
.btn-light { background: #fff; color: var(--deep); }
.btn .arr { transition: transform 0.25s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Header: detached floating glass pill, as in the approved reference.
   The bar itself is transparent; the .nav inside it is the pill. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  padding: 0.9rem 0 0.6rem;
  background: transparent; border-bottom: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
/* Smart hide: JS adds .nav-hidden once the visitor scrolls down past the
   hero top; the pill slides up beyond its own height and fades away, and
   returns on any upward scroll. Under prefers-reduced-motion the global
   rule at the end of this file switches transitions off, so the show/hide
   becomes instant while the logic still applies. */
.site-header.nav-hidden {
  transform: translateY(calc(-100% - 1rem));
  opacity: 0;
  pointer-events: none;
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 1.35rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 30px;
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: auto; display: block; }
.brand-text { line-height: 1.05; }
.brand-text .name { font-weight: 800; letter-spacing: 0.14em; font-size: 1.12rem; color: var(--ink); display: block; }
.brand-text .sub { font-weight: 600; letter-spacing: 0.34em; font-size: 0.58rem; color: var(--deep); display: block; margin-top: 0.18rem; }
.nav-links { display: none; align-items: center; gap: 1.9rem; list-style: none; }
.nav-links a { color: var(--ink); font-weight: 500; font-size: 0.98rem; }
.nav-links a:hover, .nav-links a.active { color: var(--deep); text-decoration: none; }
.nav-links a.active { font-weight: 700; }
.nav-cta { display: none; }
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 0.5rem;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s; }
.mobile-menu {
  display: none; flex-direction: column; gap: 0.2rem;
  width: min(1180px, 92%); margin: 0.55rem auto 0; padding: 0.9rem 1.1rem 1.1rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px;
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 0.65rem 0.4rem; color: var(--ink); font-weight: 500; border-bottom: 1px solid rgba(5,80,60,0.06); }
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 0.7rem; justify-content: center; }
@media (max-width: 560px) {
  .site-header { padding-top: 0.6rem; }
  .nav { padding: 0.5rem 0.95rem; border-radius: 24px; }
  .brand img { width: 32px; }
  .brand-text .name { font-size: 0.98rem; }
  .brand-text .sub { font-size: 0.5rem; }
}
@media (min-width: 940px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* Hero */
.hero { padding: clamp(2.4rem, 5.5vw, 4.4rem) 0 clamp(4rem, 8vw, 6.5rem); position: relative; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; }
/* Strongest atmosphere lives in the hero: light rays from the top corners,
   bokeh sparkles and a denser mist, fading out towards the section foot. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(248deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0) 58%),
    url("../img/sparkles.png"),
    radial-gradient(620px 420px at 96% 0%, rgba(190, 228, 200, 0.5), rgba(190, 228, 200, 0) 65%),
    radial-gradient(560px 420px at -4% 88%, rgba(190, 228, 200, 0.42), rgba(190, 228, 200, 0) 65%);
  background-size: 130% 100%, 130% 100%, cover, auto, auto;
  background-position: left top, right top, center, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.hero-grid { display: grid; gap: 3.2rem; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; } }
.hero .sub { margin-top: 1.4rem; font-size: 1.13rem; max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero-note { margin-top: 1.2rem; font-size: 0.92rem; color: var(--muted); }
.hero-note strong { color: var(--deep); font-weight: 600; }

.hero-stage { position: relative; min-height: 575px; perspective: 1300px; transform-style: preserve-3d; }
.hero-glow {
  position: absolute; inset: 2% -14% -4% -2%;
  background:
    radial-gradient(closest-side, rgba(22, 163, 74, 0.30), rgba(22, 163, 74, 0) 70%),
    radial-gradient(closest-side at 72% 78%, rgba(5, 80, 60, 0.20), rgba(5, 80, 60, 0) 70%);
  filter: blur(10px); pointer-events: none;
}
.dash-card {
  position: absolute; width: min(320px, 84%);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(5, 80, 60, 0.05), 0 26px 52px rgba(5, 80, 60, 0.14), 0 56px 110px rgba(5, 80, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(1.45); -webkit-backdrop-filter: blur(16px) saturate(1.45);
  padding: 1.15rem 1.25rem;
  transition: box-shadow 0.4s ease; /* transform is driven by the JS depth rig */
  will-change: transform;
}
.dash-card h4 {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem;
}
.dash-card .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--mist); display: inline-flex; align-items: center; justify-content: center;
}
.dash-card .ic svg { width: 17px; height: 17px; stroke: var(--deep); }
.dash-cal { top: 0; right: 0; animation: floaty 7s ease-in-out infinite; }
.dash-growth { top: 238px; left: 0; width: min(300px, 84%); animation: floaty 8s ease-in-out 0.8s infinite; }
.dash-pay { bottom: 0; right: 3%; width: min(308px, 84%); animation: floaty 7.5s ease-in-out 1.6s infinite; }
@keyframes floaty { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 0.68rem; text-align: center; color: var(--muted); }
.cal-grid b { color: var(--ink); font-weight: 600; }
.cal-grid .on {
  background: var(--deep); color: #fff; border-radius: 50%; font-weight: 700;
  width: 20px; height: 20px; line-height: 20px; margin: 0 auto;
}
.cal-note { margin-top: 0.65rem; font-size: 0.8rem; color: var(--muted); }
.cal-note strong { color: var(--ink); display: block; font-size: 0.84rem; }
.growth-num { font-family: var(--font-head); font-size: 1.5rem; color: var(--deep); font-weight: 700; }
.growth-label { font-size: 0.8rem; color: var(--muted); }
.pay-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--muted); }
.pay-row + .pay-row { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(5,80,60,0.08); }
.pay-row .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--mist); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pay-row .dot svg { width: 12px; height: 12px; stroke: var(--deep); }
@media (max-width: 560px) {
  .hero-stage { min-height: 500px; }
  .dash-growth { top: 218px; }
}

/* Page hero (inner pages) */
.page-hero { padding: clamp(2.2rem, 5vw, 3.8rem) 0 clamp(2.2rem, 4vw, 3.2rem); position: relative; isolation: isolate; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0) 57%),
    linear-gradient(248deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 59%),
    url("../img/sparkles.png"),
    radial-gradient(560px 360px at 100% -10%, rgba(190, 228, 200, 0.45), rgba(190, 228, 200, 0) 65%),
    radial-gradient(70% 90% at 88% 115%, rgba(22, 163, 74, 0.13), rgba(22, 163, 74, 0) 70%);
  background-size: 130% 100%, 130% 100%, cover, auto, auto;
  background-position: left top, right top, center, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 97%);
}
.page-hero .sub { margin-top: 1.1rem; font-size: 1.1rem; max-width: 44rem; }
.page-hero .hero-ctas { margin-top: 1.8rem; }

/* Cards and grids */
.grid { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84));
  border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.card .ic {
  width: 48px; height: 48px; border-radius: 14px; background: var(--mist);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.card .ic svg { width: 24px; height: 24px; stroke: var(--deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.99rem; }
.card .more { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: 0.95rem; }
.num-badge {
  font-family: var(--font-head); font-style: italic; color: var(--mid);
  font-size: 1rem; font-weight: 700; display: block; margin-bottom: 0.5rem;
}

/* Lists with ticks */
.tick-list { list-style: none; display: grid; gap: 0.65rem; }
.tick-list li { position: relative; padding-left: 1.8rem; color: var(--muted); font-size: 0.99rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.18rem; width: 19px; height: 19px; border-radius: 50%;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305503C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.tick-list li strong { color: var(--ink); font-weight: 600; }

/* Pain / fix split cards */
.split-card { display: grid; gap: 0; overflow: hidden; padding: 0; }
.split-card .pain, .split-card .fix { padding: 1.9rem 1.7rem; }
.split-card .fix { background: linear-gradient(160deg, rgba(233,247,238,0.9), rgba(233,247,238,0.35)); border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .split-card { grid-template-columns: 1fr 1fr; }
  .split-card .fix { border-top: 0; border-left: 1px solid var(--line); }
}
.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.32rem 0.7rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.tag.pain { background: #FDF0EC; color: #9A3B1E; }
.tag.fix { background: var(--deep); color: #fff; }

/* Sample system strip */
.sample-frame {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.66));
  border: 1px solid rgba(255,255,255,0.9); border-radius: 26px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: clamp(1.4rem, 3.5vw, 2.6rem); position: relative; isolation: isolate;
}
/* Emerald glow pool behind the sample system, echoing the hero */
.sample-frame::before {
  content: ""; position: absolute; inset: -12% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 65% at 50% 45%, rgba(22, 163, 74, 0.16), rgba(22, 163, 74, 0) 72%);
  filter: blur(12px);
}
.sample-flow { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 900px) { .sample-flow { grid-template-columns: repeat(4, 1fr); } }
.flow-step {
  background: linear-gradient(168deg, #FFFFFF, rgba(255, 255, 255, 0.92));
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 1.3rem 1.2rem; position: relative;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.flow-step .step-n {
  font-family: var(--font-head); font-style: italic; font-weight: 700; color: var(--mid);
  font-size: 0.95rem; display: block; margin-bottom: 0.45rem;
}
.flow-step h4 { font-size: 1rem; margin-bottom: 0.4rem; font-family: var(--font-body); font-weight: 700; }
.flow-step p { font-size: 0.9rem; }
.sample-note { margin-top: 1.4rem; font-size: 0.92rem; text-align: center; }

/* Process */
.process { counter-reset: step; display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .process { grid-template-columns: repeat(2, 1fr); } }
.process-step {
  display: flex; gap: 1.1rem;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84));
  border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95); align-items: flex-start;
}
.process-step .n {
  font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.6rem;
  color: var(--deep); background: var(--mist); width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.process-step h3 { font-size: 1.14rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 0.3rem; }
.process-step p { font-size: 0.96rem; }

/* Packages */
.pkg-grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 960px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
  border: 1px solid var(--card-border); border-radius: 24px;
  padding: 2.2rem 1.9rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex; flex-direction: column;
  position: relative; transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pkg:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.pkg .pkg-name { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.22em; color: var(--deep); text-transform: uppercase; }
.pkg .price { font-family: var(--font-head); font-size: 2.15rem; font-weight: 700; margin: 0.7rem 0 0.15rem; color: var(--ink); }
.pkg .price small { font-size: 1rem; font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.pkg .from { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.pkg .blurb { margin: 1rem 0 1.3rem; font-size: 0.99rem; }
.pkg .tick-list { margin-bottom: 1.8rem; }
.pkg .btn { margin-top: auto; justify-content: center; }
.pkg .time { text-align: center; font-size: 0.88rem; color: var(--muted); margin-top: 0.9rem; }
.pkg.hero-pkg {
  background: linear-gradient(165deg, #065C44 0%, var(--deep) 55%, var(--deep-dark) 100%);
  border-color: rgba(255,255,255,0.14); box-shadow: var(--shadow-lg); color: #fff;
}
.pkg.hero-pkg .pkg-name { color: #BFE8D2; }
.pkg.hero-pkg .price { color: #fff; }
.pkg.hero-pkg .price small, .pkg.hero-pkg .from, .pkg.hero-pkg .blurb, .pkg.hero-pkg .time { color: rgba(255,255,255,0.82); }
.pkg.hero-pkg .tick-list li { color: rgba(255,255,255,0.9); }
.pkg.hero-pkg .tick-list li strong { color: #fff; }
.pkg.hero-pkg .tick-list li::before { background-color: rgba(255,255,255,0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.pkg-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--mid); color: #fff; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 999px;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.terms-bar {
  margin-top: 2.4rem;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.85));
  border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: grid; gap: 1rem;
}
@media (min-width: 860px) { .terms-bar { grid-template-columns: repeat(3, 1fr); } }
.terms-bar h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.terms-bar p { font-size: 0.92rem; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 0.9rem; }
.faq details {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.85));
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.95); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-head); font-size: 1.5rem; color: var(--deep);
  line-height: 1; transition: transform 0.3s ease; flex: none;
}
.faq details[open ] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.25rem; font-size: 0.98rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(160deg, #065C44 0%, var(--deep) 58%, var(--deep-dark) 100%);
  border-radius: 28px; padding: clamp(2.4rem, 5vw, 3.8rem);
  text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 42px 110px rgba(5, 80, 60, 0.30);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 300px at 85% -10%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
              radial-gradient(480px 260px at 8% 115%, rgba(22,163,74,0.35), rgba(22,163,74,0) 60%);
}
.cta-band h2 { color: #fff; position: relative; }
.cta-band h2 em { color: #A9E7C6; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 1rem auto 2rem; position: relative; }
.cta-band .btn { position: relative; }

/* Articles */
.article-card { display: flex; flex-direction: column; }
.article-card .tag { align-self: flex-start; background: var(--mist); color: var(--deep); }
.article-card h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.article-card .soon { margin-top: auto; padding-top: 1.1rem; font-size: 0.88rem; font-weight: 600; color: var(--mid); letter-spacing: 0.05em; text-transform: uppercase; }

/* Forms */
.form-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(255,255,255,0.9); border-radius: 26px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: clamp(1.7rem, 4vw, 2.6rem); position: relative; isolation: isolate;
}
.form-card::before {
  content: ""; position: absolute; inset: -10% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 40%, rgba(22, 163, 74, 0.14), rgba(22, 163, 74, 0) 72%);
  filter: blur(12px);
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.45rem; color: var(--ink); }
.field label .req { color: var(--mid); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid rgba(5,80,60,0.22); border-radius: 12px;
  padding: 0.85rem 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--deep); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
.field .error { display: none; color: #B3261E; font-size: 0.86rem; margin-top: 0.4rem; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #B3261E; }
.field.invalid .error { display: block; }
.form-success { display: none; text-align: center; padding: 2rem 1rem; }
.form-success.show { display: block; }
.form-success .tick {
  width: 68px; height: 68px; border-radius: 50%; background: var(--mist); margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.form-success .tick svg { width: 32px; height: 32px; stroke: var(--deep); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-success h3 { margin-bottom: 0.6rem; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 32, 25, 0.5);
  backdrop-filter: blur(5px); display: none; align-items: flex-start; justify-content: center;
  padding: 4.5vh 4% 3vh; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: linear-gradient(168deg, #FFFFFF, #FBFCFA); border-radius: 26px; width: min(560px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-lg), 0 50px 130px rgba(4, 40, 30, 0.35);
  padding: clamp(1.6rem, 4vw, 2.4rem); position: relative;
  animation: modalIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; font-size: 1.25rem; line-height: 1;
  color: var(--ink); cursor: pointer;
}
.modal h2 { font-size: 1.8rem; margin-bottom: 0.5rem; padding-right: 2.4rem; }
.modal .modal-sub { font-size: 0.98rem; margin-bottom: 1.5rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(246, 246, 244, 0.35), rgba(240, 247, 241, 0.75));
  padding: 3.2rem 0 2rem; margin-top: 2rem;
}
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand p { font-size: 0.96rem; margin-top: 1rem; max-width: 22rem; }
.site-footer h4 { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deep); margin-bottom: 1rem; }
.footer-links { list-style: none; display: grid; gap: 0.55rem; }
.footer-links a { color: var(--muted); font-size: 0.97rem; }
.footer-links a:hover { color: var(--deep); }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between;
  font-size: 0.88rem; color: var(--muted);
}

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}