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

.sect {
  padding: var(--section-y) 0;
}

.sect--alt {
  background: var(--surface-alt);
}

.sect--dark {
  background: var(--surface-inverse-deep);
  color: var(--text-on-dark);
}

.sect--dark h1,
.sect--dark h2,
.sect--dark h3 {
  color: var(--white);
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-9);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
}

@media (max-width: 960px) {
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
}

/* Scroll entrance: class added by main.js, so no-JS visitors always see full content */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Grid items inside a revealed section step in one after another instead
   of popping as a single block — same fade+rise, just staggered per item.
   FAQ is excluded: it has its own hover/open motion and a fixed item count
   that would otherwise outgrow the nth-child delay rules. */
.reveal .grid2 > *,
.reveal .grid3 > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible .grid2 > *,
.reveal.is-visible .grid3 > * {
  opacity: 1;
  transform: none;
}

.reveal.is-visible .grid2 > *:nth-child(2),
.reveal.is-visible .grid3 > *:nth-child(2) { transition-delay: 90ms; }
.reveal.is-visible .grid2 > *:nth-child(3),
.reveal.is-visible .grid3 > *:nth-child(3) { transition-delay: 180ms; }
.reveal.is-visible .grid2 > *:nth-child(4),
.reveal.is-visible .grid3 > *:nth-child(4) { transition-delay: 270ms; }
.reveal.is-visible .grid2 > *:nth-child(5),
.reveal.is-visible .grid3 > *:nth-child(5) { transition-delay: 360ms; }
.reveal.is-visible .grid2 > *:nth-child(6),
.reveal.is-visible .grid3 > *:nth-child(6) { transition-delay: 450ms; }

/* Reveal sets transform:none on grid children; restore lift/shift hovers afterward */
@media (hover: hover) {
  .reveal.is-visible .grid2 > *:hover,
  .reveal.is-visible .grid3 > *:hover {
    transform: var(--lift-hover);
  }
}

.hero-glow {
  position: absolute;
  right: -140px;
  top: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.22), transparent 65%);
  pointer-events: none;
  /* Counter-drifts against the cursor and sinks/swells on scroll, so it
     reads as a light source further back than the canvas. Vars come from
     main.js and stay 0 without JS or with reduced motion. */
  transform:
    translate3d(calc(var(--hero-nx, 0) * -36px), calc(var(--hero-ny, 0) * -28px + var(--hero-scroll, 0) * 160px), 0)
    scale(calc(1 + var(--hero-scroll, 0) * 0.35));
  will-change: transform;
}

/* Cursor + scroll reactive canvas — see main.js. With reduced motion it is
   left unpainted and the static .hero-glow above carries the hero alone.
   The mask lets the field dissolve into the section below instead of
   ending on a hard edge. */
.k-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* O nama: a taller hero for the logo particle mark, copy centred beside it. */
.k-hero--tall {
  display: flex;
  align-items: center;
  min-height: clamp(440px, 64vh, 620px);
}

.k-hero--tall .k-hero__in {
  width: 100%;
}

.k-hero__canvas[data-effect="logo"] {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Hero section */
.k-hero {
  position: relative;
  overflow: hidden;
}

.k-hero__in {
  position: relative;
  padding-top: var(--space-14);
  padding-bottom: var(--space-13);
  /* Copy lags the scroll a touch and dims as the hero leaves, so the
     background visibly moves faster than the text. */
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 72px), 0);
  opacity: calc(1 - var(--hero-scroll, 0) * 0.55);
}

/* Sub-page intro band: same dark canvas treatment as the homepage hero, at
   ordinary section height since there's no badge/actions/trust row here. */
.k-hero--sub .k-hero__in {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.k-hero__title {
  color: var(--white);
  max-width: 22ch;
  margin: var(--space-5) 0;
}

/* The display size is reserved for the home hero (and 404); every other
   page title uses --display-page from the base h1 rule. */
.k-hero__title--display {
  font-size: var(--display-1);
}

.k-hero__lead {
  font-size: var(--text-lg);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}

.k-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-8) 0 var(--space-7);
}

/* Section tiers. Default .sect is the standard tier. Compact is for lists,
   FAQ and teasers: less air and a subsection-size heading, so the sections
   that carry the argument stand above it. */
.sect--compact {
  padding: clamp(48px, 6vw, 80px) 0;
}

.sect--compact h2 {
  font-size: var(--display-3);
}

/* Long-form content (articles, case studies, legal, about): headings here
   are subsections of the page, not page sections. */
.k-prose h2 {
  font-size: var(--display-3);
  margin: var(--space-10) 0 var(--space-4);
}

.k-prose h3 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.k-prose > :first-child {
  margin-top: 0;
}

.k-prose--article {
  font-size: var(--text-md);
  line-height: 1.75;
}

/* Layout utilities */
.grid-start {
  align-items: start;
}

#kako-radi,
section[id] {
  scroll-margin-top: 5rem;
}

/* Article TOC targets: clear the sticky nav (~77px) with a little air above the heading. */
.k-article__body [id] {
  scroll-margin-top: 6rem;
}

/* FAQ heading column follows the questions down instead of leaving an
   empty column beside them. */
@media (min-width: 761px) {
  .k-faq-head {
    position: sticky;
    top: calc(76px + var(--space-6));
  }
}

.mt-section {
  margin-top: var(--space-9);
}

.mt-actions {
  margin-top: var(--space-7);
}

.mt-block {
  margin-top: var(--space-5);
}