/* =========================================================
   Butik Krema, styles.css
   Design tokens, layout, components, motion, a11y
   ========================================================= */

:root {
  /* Ink */
  --c-ink: #231419;
  --c-ink-soft: #574048;
  --c-ink-muted: #897581;

  /* Surfaces */
  --c-bg: #fbf5ef;
  --c-surface: #ffffff;
  --c-surface-2: #f5e8d9;
  --c-line: #e9dcc8;
  --c-line-soft: #f2e8d7;

  /* Brand */
  --c-accent: #c66a7e;
  --c-accent-deep: #96435a;
  --c-accent-soft: #f6dde2;
  --c-accent-ring: rgba(198, 106, 126, 0.32);
  --c-cream: #e7b98a;
  --c-cream-soft: #fde6c7;
  --c-gold: #b78b4a;

  /* Feedback */
  --c-ok: #2f7a52;
  --c-ok-bg: #e4f3ea;
  --c-ok-ink: #205a3b;
  --c-err: #a33a3a;
  --c-err-bg: #fbe4e4;
  --c-err-ink: #7a1f1f;
  --c-focus: #96435a;

  /* Easing (easing only, no duration baked in) */
  --ease-smooth: cubic-bezier(.2, .7, .2, 1);
  --ease-warm:   cubic-bezier(.33, 1.2, .3, 1);
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in:     cubic-bezier(.55, .06, .68, .19);

  /* Type */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Book Antiqua", serif;
  --font-sans:  "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(35, 20, 25, .06), 0 2px 8px rgba(35, 20, 25, .04);
  --shadow-md: 0 6px 18px rgba(35, 20, 25, .08), 0 2px 6px rgba(35, 20, 25, .06);
  --shadow-lg: 0 24px 48px rgba(35, 20, 25, .12), 0 6px 18px rgba(35, 20, 25, .08);

  /* Layout */
  --wrap-max: 1160px;
  --wrap-pad: clamp(1.25rem, 2vw, 1.75rem);
  --header-h: 72px;
  --sbw: 0px;

  /* Parallax targets */
  --px: 0;
  --py: 0;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 17px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.scroll-locked {
  overflow: hidden;
  padding-right: var(--sbw);
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--c-ink);
  line-height: 1.22;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }

a {
  color: var(--c-accent-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 240ms var(--ease-smooth);
}
a:hover { color: var(--c-accent); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.2rem; }

/* ---------- A11y helpers ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  background: var(--c-ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 1000;
  transform: translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms var(--ease-smooth), opacity 200ms var(--ease-smooth);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Wrapper ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-inline: var(--wrap-pad);
}
@media (max-width: 960px) {
  .site-header .wrap { padding-inline: 1.25rem; }
}

/* ---------- Content text links (main area) ---------- */
main a:not(.btn):not(.nav-cta),
.prose a:not(.btn):not(.nav-cta),
.footer-col a:not(.btn),
.legal a:not(.btn),
.note a:not(.btn),
.card a:not(.btn),
.contact-card a:not(.btn),
.section-sub a:not(.btn),
.disclaimer a:not(.btn) {
  color: var(--c-accent-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-position: 50% 100%;
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-smooth), background-position 320ms var(--ease-smooth), color 200ms var(--ease-smooth);
  padding-bottom: 1px;
}
main a:not(.btn):not(.nav-cta):hover,
.prose a:not(.btn):not(.nav-cta):hover,
.footer-col a:not(.btn):hover,
.legal a:not(.btn):hover,
.note a:not(.btn):hover,
.card a:not(.btn):hover,
.contact-card a:not(.btn):hover,
.section-sub a:not(.btn):hover,
.disclaimer a:not(.btn):hover {
  color: var(--c-accent);
  background-size: 100% 1.5px;
  background-position: 0% 100%;
}

/* ---------- Sections / headings ---------- */
.section { padding: var(--s-8) 0; }
.section-alt { background: var(--c-surface-2); }
.section-head { max-width: 760px; margin-bottom: var(--s-6); }
.section-lead { color: var(--c-ink-soft); max-width: 62ch; }

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  background: var(--c-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--s-3);
}

.grid-2 {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
.grid-3 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.prose h2 { margin-top: var(--s-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-5); color: var(--c-ink); }
.prose.narrow { max-width: 68ch; margin: 0 auto; }

.muted { color: var(--c-ink-muted); font-weight: normal; }
.req { color: var(--c-accent-deep); margin-left: 2px; }

/* Bakery bullet list (cupcake-cup marker) */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}
.bullet-list li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 34px;
  border-bottom: 1px solid var(--c-line-soft);
}
.bullet-list li:last-child { border-bottom: 0; }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .85em;
  width: 18px;
  height: 14px;
  border-radius: 9px 9px 3px 3px;
  background:
    linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, .45) 42.2%, rgba(255, 255, 255, .45) 47%, transparent 47.2%, transparent 100%),
    linear-gradient(160deg, var(--c-accent-soft), var(--c-accent));
  box-shadow: 0 2px 4px rgba(35, 20, 25, .16), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform 320ms var(--ease-warm), filter 320ms var(--ease-smooth);
}
.bullet-list li:hover::before {
  transform: rotate(-5deg) scale(1.08);
  filter: saturate(1.18);
}
.bullet-list li:nth-child(2n)::before {
  background:
    linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, .45) 42.2%, rgba(255, 255, 255, .45) 47%, transparent 47.2%, transparent 100%),
    linear-gradient(160deg, var(--c-cream-soft), var(--c-cream));
}
.bullet-list li:nth-child(3n)::before {
  background:
    linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, .45) 42.2%, rgba(255, 255, 255, .45) 47%, transparent 47.2%, transparent 100%),
    linear-gradient(160deg, #efe1ff, #b8a3e6);
}

/* Plain list (no decorative markers) */
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.plain-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line-soft); }
.plain-list li:last-child { border-bottom: none; }
.plain-list.small li { padding: var(--s-1) 0; border-bottom: 0; font-size: .94rem; color: var(--c-ink-soft); }

/* Note / callout */
.note {
  font-size: .93rem;
  color: var(--c-ink-soft);
  background: var(--c-surface);
  border-left: 3px solid var(--c-accent);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  margin-top: var(--s-5);
}
.callout {
  background: linear-gradient(180deg, #fff, var(--c-accent-soft));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.callout p { margin: 0; font-size: 1.02rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--c-line);
  isolation: isolate;
}
/* Frosted glass on pseudo so backdrop-filter does NOT create a containing
   block for fixed descendants (mobile nav overlay). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 245, 239, .88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  z-index: -1;
  pointer-events: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 260ms var(--ease-smooth);
}
.brand-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(35, 20, 25, .14));
  transition: filter 420ms var(--ease-smooth);
}
.brand:hover .brand-mark {
  filter: drop-shadow(0 10px 20px rgba(198, 106, 126, .42));
}

/* SVG internals: transform-box pins transform-origin to each element's bbox */
.brand-mark .krk-cup,
.brand-mark .krk-swirl,
.brand-mark .krk-cherry,
.brand-mark .sp {
  transform-box: fill-box;
}

.brand-mark .krk-cup {
  transform-origin: 50% 100%;
  transition: transform 520ms var(--ease-warm);
}
.brand:hover .brand-mark .krk-cup {
  transform: rotate(-2deg) scale(1.02);
}

.brand-mark .krk-swirl {
  transform-origin: 50% 90%;
  transition: transform 520ms var(--ease-warm);
}
.brand:hover .brand-mark .krk-swirl {
  transform: rotate(5deg) translateY(-1px) scale(1.03);
}

.brand-mark .krk-cherry {
  transform-origin: 50% 100%;
  transition: transform 500ms var(--ease-warm);
}
.brand:hover .brand-mark .krk-cherry {
  animation: krk-cherry-hop 1.4s var(--ease-warm) infinite;
}
@keyframes krk-cherry-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%      { transform: translateY(-4px) rotate(-8deg); }
  65%      { transform: translateY(-1px) rotate(5deg); }
}

.brand-mark .sp {
  opacity: 0;
  transform-origin: center;
  transition: opacity 280ms var(--ease-smooth), transform 280ms var(--ease-smooth);
}
.brand:hover .brand-mark .sp1 { animation: krk-sp-a 1.6s var(--ease-smooth) infinite; }
.brand:hover .brand-mark .sp2 { animation: krk-sp-b 1.8s var(--ease-smooth) infinite; animation-delay: .2s; }
.brand:hover .brand-mark .sp3 { animation: krk-sp-c 1.4s var(--ease-smooth) infinite; animation-delay: .4s; }
@keyframes krk-sp-a {
  0%,100% { opacity: 0; transform: translate(0, 0) rotate(-28deg); }
  25%     { opacity: 1; }
  50%     { opacity: .7; transform: translate(-3px, -4px) rotate(-50deg); }
  75%     { opacity: .2; }
}
@keyframes krk-sp-b {
  0%,100% { opacity: 0; transform: translate(0, 0) rotate(28deg); }
  25%     { opacity: 1; }
  50%     { opacity: .7; transform: translate(3px, -4px) rotate(50deg); }
  75%     { opacity: .2; }
}
@keyframes krk-sp-c {
  0%,100% { opacity: 0; transform: translate(0, 0) rotate(-14deg); }
  25%     { opacity: 1; }
  50%     { opacity: .7; transform: translate(1px, -5px) rotate(-34deg); }
  75%     { opacity: .2; }
}

.brand-name {
  display: inline-block;
  transition: color 320ms var(--ease-smooth), letter-spacing 320ms var(--ease-smooth), transform 320ms var(--ease-smooth);
}
.brand:hover .brand-name {
  color: var(--c-accent-deep);
  letter-spacing: 0.006em;
}
.brand:hover { color: var(--c-accent-deep); }

.main-nav {
  display: flex;
  align-items: center;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--c-ink-soft);
  font-size: .96rem;
  padding: 6px 2px;
  transition: color 220ms var(--ease-smooth);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  transition: left 260ms var(--ease-smooth), right 260ms var(--ease-smooth);
}
.nav-list a:hover,
.nav-list a.is-active {
  color: var(--c-ink);
}
.nav-list a:hover::after,
.nav-list a.is-active::after {
  left: 0;
  right: 0;
}
.nav-list a[aria-current="page"] {
  color: var(--c-ink);
}
.nav-list a[aria-current="page"]::after {
  left: 0;
  right: 0;
}

/* Hamburger */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-line);
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background-color 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth);
  padding: 0;
}
.nav-toggle:hover { background: var(--c-surface); border-color: var(--c-ink-muted); }
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 260ms var(--ease-smooth), opacity 200ms var(--ease-smooth);
}
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  /* Lift brand and toggle above overlay within header stacking context */
  .brand, .nav-toggle { position: relative; z-index: 45; }

  /* Visual emphasis when the X is shown */
  .nav-toggle[aria-expanded="true"] {
    background: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: 0 2px 8px rgba(150, 67, 90, .18);
  }
  .nav-toggle[aria-expanded="true"] .bar {
    background: var(--c-accent-deep);
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--c-bg);
    padding: calc(var(--header-h) + var(--s-5)) var(--s-5) var(--s-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.995);
    transition: opacity 260ms var(--ease-smooth),
                transform 260ms var(--ease-smooth),
                visibility 0s linear 260ms;
  }
  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 260ms var(--ease-smooth),
                transform 260ms var(--ease-smooth),
                visibility 0s;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s-1);
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .nav-list li { width: 100%; }
  .nav-list a {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 1.2rem;
    font-family: var(--font-serif);
    border-bottom: 1px solid var(--c-line-soft);
  }
  .nav-list li:last-child a { border-bottom: 0; }
  .nav-list a::after { bottom: -1px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-9) 0 var(--s-8);
  background:
    radial-gradient(1000px 440px at 85% -10%, var(--c-accent-soft), transparent 60%),
    radial-gradient(800px 320px at -10% 10%, var(--c-cream-soft), transparent 60%),
    linear-gradient(180deg, var(--c-bg) 0%, #fff 100%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 80%, rgba(183, 139, 74, .22), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(198, 106, 126, .22), transparent 60%),
    radial-gradient(2px 2px at 80% 70%, rgba(198, 106, 126, .18), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.25fr 1fr; gap: var(--s-8); }
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--c-ink-soft);
  max-width: 60ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.hero-meta dt {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.hero-meta dd {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--c-ink);
  font-size: .95rem;
}

.hero-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--c-accent-soft), var(--c-cream));
  margin: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 8px), 0) scale(1.04);
  transition: transform 600ms var(--ease-smooth);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 40%);
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: .96rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background-image: none;
  transition: transform 220ms var(--ease-smooth),
              background-color 240ms var(--ease-smooth),
              color 240ms var(--ease-smooth),
              border-color 240ms var(--ease-smooth),
              box-shadow 260ms var(--ease-smooth);
}
.btn + .btn { margin-left: 6px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--c-accent-deep);
  color: #fff;
  box-shadow: 0 8px 20px rgba(150, 67, 90, .28), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.btn-primary:hover {
  background-color: var(--c-accent);
  color: #fff;
  box-shadow:
    0 0 0 4px var(--c-accent-ring),
    0 14px 32px rgba(150, 67, 90, .32),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .16);
}

.btn-secondary {
  background-color: #fff;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-secondary:hover {
  background-color: var(--c-surface-2);
  border-color: var(--c-ink-muted);
  color: var(--c-ink);
}

.btn-strong {
  background-color: var(--c-ink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(35, 20, 25, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-strong:hover {
  background-color: #3a2630;
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(35, 20, 25, .16),
    0 12px 28px rgba(35, 20, 25, .26),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-ghost {
  background-color: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-ghost:hover {
  background-color: #fff;
  border-color: var(--c-ink);
  color: var(--c-ink);
}

/* Ensure anchor styled buttons never get underline gradient from content-link rules */
a.btn {
  padding-bottom: 0;
  background-image: none !important;
}

/* ---------- Cards ---------- */
.cards { margin-top: var(--s-5); }
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 380ms var(--ease-smooth),
              box-shadow 380ms var(--ease-smooth),
              border-color 380ms var(--ease-smooth),
              filter 380ms var(--ease-smooth);
}
.card:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: 0 18px 38px rgba(198, 106, 126, .18), var(--shadow-md);
  border-color: var(--c-accent-soft);
  filter: saturate(1.04);
}
.card-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--c-accent-soft), var(--c-cream));
  overflow: hidden;
  position: relative;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms var(--ease-smooth); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: transform 380ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth);
}
.steps li:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.step-num {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--c-accent-deep);
  background: var(--c-accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--s-3);
}

/* ---------- Prices ---------- */
.price-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: transform 380ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth), border-color 380ms var(--ease-smooth);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(198, 106, 126, .18);
  border-color: var(--c-accent-soft);
}
.price-range {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--c-accent-deep);
  margin: 4px 0 var(--s-3);
}

/* ---------- Planner ---------- */
.planner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  container-type: inline-size;
}
@container (min-width: 720px) {
  .planner { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
}
.planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
}
.planner-field { display: flex; flex-direction: column; gap: 6px; }
.planner-field label { font-weight: 600; font-size: .92rem; color: var(--c-ink-soft); }
.planner-field select,
.planner-field input[type="range"] {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
}
.planner-field input[type="range"] { padding: 0; accent-color: var(--c-accent); }
.planner-field output {
  align-self: flex-end;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
}

/* Switch (shared by planner + cookie settings) */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  width: 100%; height: 100%;
}
.switch .switch-track {
  position: absolute;
  inset: 0;
  background: var(--c-line);
  border-radius: 999px;
  transition: background-color 240ms var(--ease-smooth);
}
.switch .switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-warm);
}
.switch input:checked ~ .switch-track { background: var(--c-accent); }
.switch input:checked ~ .switch-knob { transform: translateX(18px); }
.switch input:disabled ~ .switch-track { opacity: .5; }
.switch input:focus-visible ~ .switch-track {
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

.planner-switch-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: 28px;
}
.planner-switch-row .switch-text {
  color: var(--c-ink-soft);
  font-size: .95rem;
}

.planner-output {
  background: linear-gradient(165deg, var(--c-surface-2), #fff);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.planner-label {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0;
}
.planner-value {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2rem);
  color: var(--c-accent-deep);
  margin: 0;
}
.planner-note { font-size: .88rem; color: var(--c-ink-muted); margin: 0; }
.planner-cta { margin-top: var(--s-5); text-align: center; }

/* ---------- FAQ (grid-template-rows 0fr then 1fr) ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 280ms var(--ease-smooth), box-shadow 280ms var(--ease-smooth);
}
.faq-item.is-open {
  border-color: var(--c-accent-soft);
  box-shadow: var(--shadow-sm);
}
.faq-q {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  width: 100%;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
  box-sizing: border-box;
}
.faq-q:focus-visible { outline: 3px solid var(--c-accent-soft); outline-offset: -3px; border-radius: var(--radius-md); }
.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--c-accent-deep);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 280ms var(--ease-smooth);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-smooth);
}
.faq-a > .faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--s-5);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  color: var(--c-ink-soft);
  padding-top: 0;
  padding-bottom: var(--s-4);
  margin: 0;
}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero {
  padding: var(--s-8) 0 var(--s-6);
  background:
    radial-gradient(800px 320px at 90% -20%, var(--c-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--c-bg), #fff);
}
.page-hero .lead {
  font-size: 1.08rem;
  color: var(--c-ink-soft);
  max-width: 70ch;
}

.breadcrumbs {
  font-size: .88rem;
  color: var(--c-ink-muted);
  margin-bottom: var(--s-4);
}
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li::after { content: "/"; padding: 0 6px; color: var(--c-ink-muted); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--c-ink-muted); }

/* ---------- CTA box ---------- */
.section-cta { padding-top: var(--s-6); padding-bottom: var(--s-9); }
.cta-box {
  background: linear-gradient(165deg, var(--c-ink), #3a2630);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--s-7);
  display: grid;
  gap: var(--s-5);
  align-items: center;
  grid-template-columns: 1fr;
}
.cta-box h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-box p  { color: rgba(255, 255, 255, .78); margin: 0; max-width: 56ch; }
.cta-box .btn-primary {
  background-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(198, 106, 126, .34);
}
.cta-box .btn-primary:hover {
  background-color: var(--c-accent-soft);
  color: var(--c-ink);
  box-shadow: 0 0 0 4px var(--c-accent-ring), 0 12px 26px rgba(198, 106, 126, .38);
}
@media (min-width: 760px) { .cta-box { grid-template-columns: 1.5fr auto; padding: var(--s-8); } }

/* ---------- Contact page ---------- */
.contact-channels {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--s-6);
}
.contact-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  min-width: 0;
  transition: border-color 280ms var(--ease-smooth), box-shadow 280ms var(--ease-smooth), transform 380ms var(--ease-smooth);
}
.contact-card > div {
  flex: 1;
  min-width: 0;
}
.contact-card p,
.contact-card a,
.contact-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.contact-card:hover {
  border-color: var(--c-accent-soft);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.contact-card .icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card h3 { margin: 0 0 4px; font-size: 1rem; font-family: var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-muted); font-weight: 600; }
.contact-card p { margin: 0; color: var(--c-ink); font-weight: 600; }
.contact-card p.desc { color: var(--c-ink-soft); font-weight: 400; font-size: .94rem; margin-top: 4px; }

.contact-aside {
  background: linear-gradient(165deg, #fff, var(--c-surface-2));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
@media (min-width: 960px) {
  .contact-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    align-self: start;
  }
}

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form .field { display: flex; flex-direction: column; gap: 6px; }
.form label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  font: inherit;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  transition: border-color 220ms var(--ease-smooth), box-shadow 220ms var(--ease-smooth);
}
.form textarea { resize: vertical; min-height: 140px; }
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.form .check label {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-weight: 400;
  color: var(--c-ink-soft);
  cursor: pointer;
  font-size: .94rem;
}
.form .check input[type="checkbox"] { margin-top: 4px; accent-color: var(--c-accent); }
.form .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions { margin-top: var(--s-2); }
.form button[disabled] {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.form-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.form-wrap h2 { margin: 0 0 var(--s-3); }

.form-status {
  margin: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 var(--s-4);
  overflow: hidden;
  transform: translateY(-4px);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-ink);
  font-weight: 600;
  transition: max-height 320ms var(--ease-smooth),
              opacity 240ms var(--ease-smooth),
              transform 280ms var(--ease-smooth),
              padding 320ms var(--ease-smooth),
              color 200ms var(--ease-smooth),
              background-color 200ms var(--ease-smooth);
}
.form-status:not(:empty) {
  max-height: 8em;
  opacity: 1;
  transform: none;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border-left-color: var(--c-line);
}
.form-status.ok {
  color: var(--c-ok-ink);
  background: var(--c-ok-bg);
  border-left-color: var(--c-ok);
}
.form-status.err {
  color: var(--c-err-ink);
  background: var(--c-err-bg);
  border-left-color: var(--c-err);
}

/* ---------- Cookie banner & settings ---------- */
.cookie-banner[hidden],
.cookie-settings[hidden] {
  display: none !important;
}
.cookie-banner {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity 280ms var(--ease-smooth), transform 280ms var(--ease-smooth);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: none;
}
.cookie-inner { padding: var(--s-5); }
.cookie-text h2 { font-size: 1.1rem; margin: 0 0 6px; }
.cookie-text p { margin: 0; color: var(--c-ink-soft); font-size: .94rem; }
.cookie-actions {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cookie-actions .btn {
  flex: 1 1 150px;
  min-height: 44px;
  padding: 0 18px;
}

.cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(35, 20, 25, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity 280ms var(--ease-smooth);
}
.cookie-settings.is-visible { opacity: 1; }
.cookie-settings-box {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  max-width: 520px;
  width: 100%;
  padding: var(--s-6);
  transform: translateY(10px) scale(.985);
  transition: transform 300ms var(--ease-warm);
  box-shadow: var(--shadow-lg);
  max-height: 86vh;
  overflow-y: auto;
}
.cookie-settings.is-visible .cookie-settings-box { transform: none; }
.cookie-settings-box h2 { margin: 0 0 var(--s-4); }

.cookie-options { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.switch-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line-soft);
  cursor: pointer;
}
.switch-row:last-child { border-bottom: 0; }
.switch-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.switch-name { font-weight: 600; color: var(--c-ink); }
.switch-desc { font-size: .88rem; color: var(--c-ink-soft); }
.cookie-settings-actions { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, .78);
  padding: var(--s-8) 0 var(--s-4);
  margin-top: 0;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--c-accent-soft); }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-3);
}
.foot-brand {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.foot-text { font-size: .92rem; color: rgba(255, 255, 255, .62); }
.foot-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { padding: var(--s-2) 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.foot-col li:last-child { border-bottom: 0; }
.foot-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .85rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}
.foot-bottom p { margin: 0; }

/* ---------- Sitemap-grid ---------- */
.sitemap-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--s-5) 0;
}
.sitemap-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: transform 320ms var(--ease-smooth), box-shadow 320ms var(--ease-smooth), border-color 320ms var(--ease-smooth);
}
.sitemap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-accent-soft);
}
.sitemap-card h3 {
  font-size: 1.02rem;
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}
.sitemap-card ul { padding: 0; margin: 0; list-style: none; }
.sitemap-card li { padding: var(--s-1) 0; }
.sitemap-card p.meta { font-size: .88rem; color: var(--c-ink-muted); margin: 0 0 var(--s-3); }

/* ---------- Reveal system (only applied when JS injects data-reveal) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out), filter 720ms var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal="right"] { transform: translateX(-22px); }
[data-reveal="zoom"]  { transform: scale(.96); }
[data-reveal="image"] {
  opacity: 0;
  transform: scale(1.02);
  filter: saturate(.7) brightness(.92);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Intro animation (hero + header cascade) ---------- */
body:not(.is-loaded) [data-animasyon] {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: saturate(.9);
}
body.is-loaded [data-animasyon] {
  animation: krk-bloom-up 820ms var(--ease-warm) both;
  animation-delay: var(--anim-delay, 0ms);
}
@keyframes krk-bloom-up {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); filter: saturate(.9); }
  55%  { opacity: 1; filter: saturate(1.05); }
  100% { opacity: 1; transform: none; filter: saturate(1); }
}

body:not(.is-loaded) .brand-mark[data-animasyon] {
  transform: rotate(-12deg) scale(.7);
  filter: saturate(.6);
}
body.is-loaded .brand-mark[data-animasyon] {
  animation: krk-stamp 720ms var(--ease-warm) both;
}
@keyframes krk-stamp {
  0%   { opacity: 0; transform: rotate(-12deg) scale(.7); }
  55%  { opacity: 1; transform: rotate(4deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* =========================================================
   Thematic effects (bakery / cream / shelf shimmer)
   ========================================================= */

/* ---- Hero sprinkles (floating colored ovals) ---- */
.sprinkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sprinkles span {
  position: absolute;
  bottom: -24px;
  animation: krk-sprinkle-rise 14s linear infinite;
  opacity: 0;
}
.sprinkles span i {
  display: block;
  width: 12px;
  height: 5px;
  border-radius: 999px;
  transform: rotate(var(--sp-rot, 0deg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(35, 20, 25, .08);
}
.sprinkles span:nth-child(1)  { left: 6%;   animation-duration: 13s; animation-delay: 0.2s; --sp-rot: -18deg; }
.sprinkles span:nth-child(1) i { background: var(--c-accent); }
.sprinkles span:nth-child(2)  { left: 16%;  animation-duration: 17s; animation-delay: 1.6s; --sp-rot: 28deg; }
.sprinkles span:nth-child(2) i { background: var(--c-cream-soft); }
.sprinkles span:nth-child(3)  { left: 28%;  animation-duration: 15s; animation-delay: 3.4s; --sp-rot: -44deg; }
.sprinkles span:nth-child(3) i { background: var(--c-gold); }
.sprinkles span:nth-child(4)  { left: 42%;  animation-duration: 18s; animation-delay: 0.9s; --sp-rot: 12deg; }
.sprinkles span:nth-child(4) i { background: var(--c-accent-deep); }
.sprinkles span:nth-child(5)  { left: 58%;  animation-duration: 14s; animation-delay: 5.2s; --sp-rot: -32deg; }
.sprinkles span:nth-child(5) i { background: var(--c-cream); }
.sprinkles span:nth-child(6)  { left: 70%;  animation-duration: 16s; animation-delay: 2.8s; --sp-rot: 40deg; }
.sprinkles span:nth-child(6) i { background: var(--c-accent); width: 9px; height: 4px; }
.sprinkles span:nth-child(7)  { left: 82%;  animation-duration: 19s; animation-delay: 4.1s; --sp-rot: -22deg; }
.sprinkles span:nth-child(7) i { background: var(--c-gold); }
.sprinkles span:nth-child(8)  { left: 92%;  animation-duration: 13s; animation-delay: 1.3s; --sp-rot: 34deg; }
.sprinkles span:nth-child(8) i { background: var(--c-accent-deep); }

@keyframes krk-sprinkle-rise {
  0%   { transform: translate(0, 0);                           opacity: 0; }
  8%   { opacity: .55; }
  55%  { transform: translate(18px, -55vh);                    opacity: .55; }
  90%  { opacity: .15; }
  100% { transform: translate(-6px, -100vh);                   opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; }

/* ---- Hero image: cream shimmer sweep ---- */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 40%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .05) 58%, transparent 72%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 60% 100%;
  background-position: 0 0, -80% 0;
  animation: krk-cream-shine 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes krk-cream-shine {
  0%, 75% { background-position: 0 0, -80% 0; }
  100%    { background-position: 0 0, 180% 0; }
}

/* ---- Eyebrow: soft glow pulse ---- */
.hero .eyebrow {
  position: relative;
  box-shadow: 0 0 0 0 rgba(198, 106, 126, .0);
  animation: krk-eyebrow-glow 5s ease-in-out infinite;
}
@keyframes krk-eyebrow-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 106, 126, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(198, 106, 126, .14); }
}

/* ---- Card: warm aura + frosted edge on hover ---- */
.card { position: relative; isolation: isolate; }
.card::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 18px);
  background: radial-gradient(60% 65% at 50% 55%, rgba(198, 106, 126, .28), transparent 70%);
  opacity: 0;
  transition: opacity 420ms var(--ease-smooth);
}
.card:hover::before { opacity: 1; }

/* ---- Button primary: gloss sweep ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -45%;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left 720ms var(--ease-smooth);
  mix-blend-mode: soft-light;
  z-index: 0;
}
.btn-primary:hover::before { left: 120%; }

/* ---- Steps: stamp-in step number + warm edge hover ---- */
.steps li .step-num {
  transform: rotate(-6deg) scale(.9);
  transition: transform 520ms var(--ease-warm);
}
.steps li.is-visible .step-num,
.steps li:hover .step-num {
  transform: rotate(0) scale(1.02);
}
.steps li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 380ms var(--ease-smooth);
  pointer-events: none;
}
.steps li:hover::before {
  box-shadow: inset 0 0 0 1px var(--c-accent-soft), 0 0 0 4px rgba(198, 106, 126, .08);
}

/* ---- Section-alt: slow wandering bloom backdrop ---- */
.section-alt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section-alt::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(45% 40% at 25% 30%, rgba(246, 221, 226, .9), transparent 70%),
    radial-gradient(40% 35% at 78% 70%, rgba(253, 230, 199, .8), transparent 70%);
  animation: krk-bloom-drift 22s ease-in-out infinite alternate;
  opacity: .7;
  pointer-events: none;
}
@keyframes krk-bloom-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.04); }
  100% { transform: translate3d(-3%, 2%, 0) scale(.98); }
}

/* ---- Price card: soft cream ribbon at top on hover ---- */
.price-card {
  position: relative;
  overflow: hidden;
}
.price-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-cream), var(--c-accent));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-smooth);
  animation: krk-ribbon-shift 6s ease-in-out infinite;
}
.price-card:hover::after { transform: scaleX(1); }
@keyframes krk-ribbon-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Planner value: tender halo on update ---- */
.planner-value { position: relative; display: inline-block; }
.planner-value::after {
  content: "";
  position: absolute;
  inset: -6px -14px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(198, 106, 126, .28), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.planner-value.is-pulse::after {
  animation: krk-halo 880ms ease-out;
}
@keyframes krk-halo {
  0%   { opacity: 0; transform: scale(.82); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.16); }
}

/* ---- Contact card: inline svg icon glow on hover ---- */
.contact-card .icon {
  transition: transform 380ms var(--ease-warm), background-color 320ms var(--ease-smooth), color 320ms var(--ease-smooth), box-shadow 380ms var(--ease-smooth);
}
.contact-card:hover .icon {
  transform: rotate(-6deg) scale(1.06);
  background-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(198, 106, 126, .28);
}

/* ---- FAQ question: warm drip on hover ---- */
.faq-q {
  position: relative;
}
.faq-q::after {
  content: "";
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent-soft), transparent);
  opacity: 0;
  transition: opacity 280ms var(--ease-smooth);
}
.faq-item:hover .faq-q::after { opacity: 1; }
.faq-item.is-open .faq-q::after { opacity: 0; }

/* =========================================================
   Epic thematic effects (advanced tier)
   ========================================================= */

/* ---- Scroll progress ribbon (cream gradient) ---- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(90deg, var(--c-accent-deep), var(--c-accent), var(--c-cream));
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(198, 106, 126, .45);
  transition: width 90ms linear;
}

/* ---- Hero background drift ---- */
.hero::before {
  animation: krk-hero-drift 28s ease-in-out infinite alternate;
}
@keyframes krk-hero-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-16px, -8px, 0); }
}

/* ---- 3D tilt + cream-light follow on cards ---- */
.card {
  --tx: 0deg;
  --ty: 0deg;
  --lift: 0px;
  --subr: 0deg;
  --gx: 50%;
  --gy: 50%;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift)) rotate(var(--subr));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 260ms var(--ease-smooth),
              box-shadow 380ms var(--ease-smooth),
              border-color 380ms var(--ease-smooth),
              filter 380ms var(--ease-smooth);
}
.card:hover {
  --lift: -5px;
  --subr: -0.35deg;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift)) rotate(var(--subr));
  box-shadow: 0 28px 58px rgba(198, 106, 126, .26), var(--shadow-md);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--gx) var(--gy),
              rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-smooth);
  mix-blend-mode: soft-light;
  z-index: 3;
}
.card:hover::after { opacity: 1; }

/* Price cards share the tilt + glow pattern (::before here as ::after is ribbon) */
.price-card {
  --tx: 0deg;
  --ty: 0deg;
  --lift: 0px;
  --gx: 50%;
  --gy: 50%;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 260ms var(--ease-smooth),
              box-shadow 380ms var(--ease-smooth),
              border-color 380ms var(--ease-smooth);
}
.price-card:hover {
  --lift: -4px;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift));
  box-shadow: 0 22px 46px rgba(198, 106, 126, .22);
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(200px circle at var(--gx) var(--gy),
              rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-smooth);
  mix-blend-mode: soft-light;
  z-index: 1;
}
.price-card:hover::before { opacity: 1; }

/* ---- Cream-pour reveal on card media when entering viewport ---- */
.card[data-reveal] .card-media {
  position: relative;
}
.card[data-reveal] .card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              #fce4ea 0%,
              rgba(253, 230, 199, .94) 45%,
              rgba(255, 255, 255, .82) 100%);
  transform: translateY(0);
  transition: transform 1400ms cubic-bezier(.73, 0, .18, 1) 200ms;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 -8px 12px -8px rgba(198, 106, 126, .3);
}
.card[data-reveal].is-visible .card-media::before {
  transform: translateY(101%);
}

/* ---- Stamp reveal (section heads) ---- */
[data-reveal="stamp"] {
  opacity: 0;
  transform: scale(.72) rotate(-5deg);
  filter: saturate(.25) blur(3px);
  transition: opacity 780ms var(--ease-warm),
              transform 780ms var(--ease-warm),
              filter 780ms var(--ease-smooth);
}
[data-reveal="stamp"].is-visible {
  opacity: 1;
  transform: scale(1) rotate(0);
  filter: saturate(1) blur(0);
}

/* ---- H1 piping underline (cream pipe stroke draw) ---- */
.h1-underline {
  display: block;
  width: min(320px, 86%);
  height: 14px;
  margin: -4px 0 16px;
  overflow: visible;
}
.h1-underline path {
  stroke: var(--c-accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  filter: drop-shadow(0 1px 1.5px rgba(198, 106, 126, .4));
}
body.is-loaded .h1-underline path {
  animation: krk-pipe-draw 2000ms cubic-bezier(.22, .61, .36, 1) 720ms forwards;
}
@keyframes krk-pipe-draw {
  to { stroke-dashoffset: 0; }
}

/* ---- Mouse sprinkle trail on hero ---- */
.hero-trail {
  position: absolute;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--tr-rot, 0deg)) scale(0);
  animation: krk-trail-life 1400ms cubic-bezier(.22, .61, .36, 1) forwards;
  box-shadow: 0 0 6px currentColor;
  z-index: 0;
}
@keyframes krk-trail-life {
  0%   { transform: translate(-50%, -50%) rotate(var(--tr-rot)) scale(0); opacity: 0; }
  18%  { transform: translate(-50%, -50%) rotate(var(--tr-rot)) scale(1); opacity: .9; }
  100% {
    transform: translate(calc(-50% + var(--tr-dx, 0)), calc(-50% + var(--tr-dy, 30px)))
               rotate(calc(var(--tr-rot) * 3)) scale(.4);
    opacity: 0;
  }
}

/* ---- Confetti burst on CTA click ---- */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 400;
  transform: translate(-50%, -50%) scale(0);
  animation: krk-confetti-burst 1400ms cubic-bezier(.33, .9, .4, 1) var(--cd, 0ms) forwards;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
@keyframes krk-confetti-burst {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
  18%  { transform: translate(-50%, -50%) scale(1.15) rotate(calc(var(--cr, 0) * .2)); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--cx, 0px)),
                         calc(-50% + var(--cy, 0px) + 80px))
               scale(.45) rotate(var(--cr, 0));
    opacity: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  body:not(.is-loaded) [data-animasyon] { opacity: 1 !important; transform: none !important; filter: none !important; }
  body.is-loaded [data-animasyon] { animation: none !important; }
  html { scroll-behavior: auto !important; }
  .sprinkles { display: none !important; }
  .hero-media::after { animation: none !important; background-position: 0 0, 200% 0 !important; }
  .section-alt::before { animation: none !important; }
  .price-card::after { animation: none !important; }
  .hero .eyebrow { animation: none !important; }
  .hero-trail, .confetti-piece { display: none !important; }
  .h1-underline path { animation: none !important; stroke-dashoffset: 0 !important; }
  .card[data-reveal] .card-media::before { display: none !important; }
  .hero::before { animation: none !important; }
  body::before { display: none !important; }
  .card, .price-card { transform: none !important; }
}