/* Home (sohub skin) - wordmark hero, work grid, sticky service deck, approach, CTA. */

/* ---------- Fluted liquid-glass entrance (home preloader) ----------
   A ribbed liquid-glass panel (45° flutes, backdrop blur + gloss/sheen) sits
   over the logo, then swooshes off diagonally toward the bottom-right to unveil
   it before the overlay rises into the page. Home-only. */
.preloader { overflow: hidden; }
.preloader-mark { position: relative; z-index: 1; }
.preloader-flutes {
  position: absolute;
  inset: -8%;                 /* slight bleed so edges never show mid-swoosh */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* 45° fluted ribs over a faint blue glass tint */
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.55) 7px,
      rgba(255, 255, 255, 0.10) 15px,
      rgba(255, 255, 255, 0) 24px),
    linear-gradient(135deg, rgba(208, 226, 255, 0.40), rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  will-change: transform;
}
/* liquid specular sheen sweeping along the 45° axis */
.preloader-flutes::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.65) 50%, transparent 58%);
  transform: translate3d(-25%, -25%, 0);
  animation: flute-sheen 1.6s ease-in-out infinite;
}
@keyframes flute-sheen {
  from { transform: translate3d(-30%, -30%, 0); }
  to   { transform: translate3d(30%, 30%, 0); }
}
@media (prefers-reduced-motion: reduce) { .preloader-flutes { display: none; } }

/* ---------- Hero: giant lowercase wordmark scenery ---------- */

.hero {
  position: relative;
  overflow: clip;
}

/* Copy block (lede + tagline). Anchored in a band that always clears the fixed
   nav: top is the LOWER edge of (just-below-nav) vs the designed lower-third
   placement, so on short/wide viewports it drops below the logo instead of
   colliding with it. Lede sits above the tagline via flex order (DOM keeps the
   <h1> first for document outline). */
.hero-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  top: max(calc(var(--nav-height) + 1.25rem), calc(98svh - 34vw - 11rem));
  max-width: 48ch;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.6vh, 1.25rem);
}

/* Background video layer: 16:9 cover, faded to transparent at the top and the
   bottom, sitting behind every hero element. Decorative + non-interactive. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.25; /* subtle background wash */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.hero-wordmark {
  position: absolute;
  z-index: 1;
  bottom: 2svh;
  left: -2vw;
  display: flex; /* the 2D wordmark is the hero (no WebGL 3D) */
  font-size: 37vw; /* ~30% larger again (was 28.5vw) */
  font-weight: 700;
  letter-spacing: var(--track-5);
  line-height: 0.78;
  color: #0054ff; /* official UNIVA logo blue */
  white-space: nowrap;
  user-select: none;
}
/* Clip ONLY the bottom edge (so letters stay hidden below until they rise) and
   leave the top open — the tight line-height (0.78) otherwise lets overflow:clip
   shave the top of the "i" dot. The hero itself clips the left/right bleed. */
html.js .hero-wordmark { clip-path: inset(-100% -100% 0 -100%); }
html.js .wm-letter {
  display: inline-block;
  transform: translateY(112%);
  will-change: transform;
}

/* Per-letter pop on hover (enabled after the intro rise; JS sets the scale) */
.hero-wordmark.wm-ready .wm-letter { transition: transform 0.22s var(--ease-out, ease); }

/* Chromatic "fringe" glitch on click (hero-notes.js toggles .fringe). Offsets in
   em so the colour split scales with the giant glyphs; composes with the
   transform-based hover/rise since it only animates text-shadow. */
@keyframes wm-fringe {
  0%   { text-shadow: 0 0 transparent; }
  12%  { text-shadow: -0.035em 0 rgba(255,30,90,0.9), 0.035em 0 rgba(0,200,255,0.9); }
  38%  { text-shadow: 0.022em 0 rgba(255,30,90,0.8), -0.022em 0 rgba(0,200,255,0.85); }
  68%  { text-shadow: -0.012em 0 rgba(255,30,90,0.6), 0.012em 0 rgba(0,200,255,0.6); }
  100% { text-shadow: 0 0 transparent; }
}
.hero-wordmark .wm-letter.fringe { animation: wm-fringe 0.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .hero-wordmark .wm-letter.fringe { animation: none; } }

.hero-render {
  position: absolute;
  z-index: 2;
  width: clamp(11rem, 24vw, 26rem);
  height: auto;
  right: clamp(1rem, 12vw, 13rem);
  bottom: clamp(4rem, 16vw, 18rem);
  border-radius: var(--r-card);
  rotate: -5deg;
  pointer-events: none;
  user-select: none;
}
/* Hover jiggle — animates the independent `rotate` property so it composes with
   the float-loop (which animates `transform`). hero-notes.js makes the flag
   hoverable (pointer-events:auto). */
@keyframes flag-jiggle {
  0%, 100% { rotate: -5deg; }
  20% { rotate: -12deg; }
  45% { rotate: 1deg; }
  70% { rotate: -9deg; }
  85% { rotate: -3deg; }
}
@media (hover: hover) {
  .hero-render:hover { animation: float-loop 5s ease-in-out infinite, flag-jiggle 0.6s ease; }
}

.hero-tagline { position: static; }
/* Lock the tagline to its two-line arrangement on EVERY viewport (and even
   without JS): "Fikir UNIVA," / "fikir AI." — each line block-level so they
   stack, and nowrap so neither line ever wraps within itself. */
.hero-tagline .line { display: block; white-space: nowrap; }

/* Rotating hero headline — phrases swoosh through on a loop (Owner 2026-07-03).
   Pure CSS (each item animates the same keyframe, staggered by animation-delay) so it
   works even on the infinite-scroll clone of the hero, with no JS. Items stack absolutely
   and a reserved min-height keeps the lede below from jumping between phrases. */
.hero-rotator { position: relative; display: block; min-height: 2.35em; }
.hero-rotator .rot-item {
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; will-change: transform, opacity, filter;
  animation: rot-cycle 11.2s cubic-bezier(.19, 1, .22, 1) infinite both;
}
.hero-rotator .rot-item:nth-child(1) { animation-delay: 0s; }
.hero-rotator .rot-item:nth-child(2) { animation-delay: 2.8s; }
.hero-rotator .rot-item:nth-child(3) { animation-delay: 5.6s; }
.hero-rotator .rot-item:nth-child(4) { animation-delay: 8.4s; }
.hero-rotator .rot-hl { color: var(--blue); }
@keyframes rot-cycle {
  0%   { opacity: 0; transform: translateX(0.4em) skewX(-8deg); filter: blur(9px); }
  3%   { opacity: 1; transform: none; filter: blur(0); }
  22%  { opacity: 1; transform: none; filter: blur(0); }
  25%  { opacity: 0; transform: translateX(-0.4em) skewX(8deg); filter: blur(9px); }
  100% { opacity: 0; transform: translateX(0.4em) skewX(-8deg); filter: blur(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator .rot-item { animation: none; }
  .hero-rotator .rot-item:nth-child(1) { position: relative; opacity: 1; }
}

.hero-lede {
  order: -1;
  max-width: 44ch;
  font-size: var(--text-small);
  line-height: 1.6;
}
.hero-lede strong { color: var(--ink); }

.hero-scroll {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 2.5svh;
}

@media (max-width: 760px) {
  /* Clean vertical stack: nav → flag (top-right) → copy → giant "univa" pinned
     to the floor. Flag and copy both anchor off the nav, so the copy always
     clears the (now taller 4:3) flag; the wordmark drops to the bottom so the
     tagline never collides with it. */
  .hero-render { top: calc(var(--nav-height) + 0.5rem); right: 5vw; bottom: auto; width: 40vw; }
  .hero-copy { top: calc(var(--nav-height) + 37vw + 1rem); }
  .hero-wordmark { font-size: 32vw; bottom: 2svh; }
}

/* ---------- Section heads ---------- */

.section-head .statement { max-width: 26ch; }
.fact-row { margin-top: 2.25rem; }
.section-lede {
  margin-top: 1.75rem;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

/* ---------- Vision duo panels ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.duo-panel {
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
}
.duo-panel h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: var(--track-3);
  line-height: 1.15;
  max-width: 24ch;
}
.duo-panel p { max-width: 48ch; }
.duo-panel .tag {
  background: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.6rem;
}

/* ---------- Work grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .pcard-wide { grid-column: 1 / -1; }
}

.work-more { margin-top: 3.5rem; display: flex; }

/* ---------- Academy teaser ---------- */

.academy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* ---------- Growth ---------- */

.growth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
/* Desktop: revenue chart fills the left half, bold growth words fill the right. */
@media (min-width: 900px) {
  .growth-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
}

/* Bold editorial words beside the chart */
.growth-words { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: center; }
.growth-kicker {
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: var(--track-7);
  color: var(--ink);
}
.growth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.growth-points li {
  display: grid;
  gap: 0.15rem;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line, rgba(10, 22, 64, 0.14));
}
.growth-points li:first-child { padding-top: 0; border-top: 0; }
.growth-points strong {
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--track-3);
  color: var(--ink);
}
.growth-points span { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; }

/* ---------- AI in your office: role use-case dashboards ---------- */
.office-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .office-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.usecase { display: grid; gap: 0.55rem; align-content: start; }
.uc-role { font-size: var(--text-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0054ff; }
.uc-title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: var(--track-3); line-height: 1.15; }
.uc-win { margin-top: 0.4rem; background: #fff; border-radius: 16px; overflow: hidden; }
.uc-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f5ff; }
.uc-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #cdd8f2; }
.uc-bar > span:nth-child(1) { background: #ff5f57; }
.uc-bar > span:nth-child(2) { background: #febc2e; }
.uc-bar > span:nth-child(3) { background: #28c840; }
.uc-bar b { margin-left: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.uc-body { padding: 14px 16px 16px; display: grid; gap: 10px; }

.uc-task { display: grid; gap: 6px; }
.uc-tk { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.uc-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.uc-chip { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.uc-chip.ok { background: #dcf3e5; color: #0f7a3d; }
.uc-chip.risk { background: #fdeccd; color: #8a5a00; }
.uc-chip.done { background: #dde7ff; color: #0044cc; }
.uc-prog { height: 7px; border-radius: 5px; background: #eef2fb; overflow: hidden; }
.uc-prog i { display: block; height: 100%; background: #1aa35a; border-radius: 5px; }
.uc-prog i.risk { background: #e8a300; }
.uc-prog i.done { background: #0054ff; }

.uc-post { display: flex; align-items: center; gap: 10px; }
.uc-day { font-size: 0.64rem; font-weight: 700; color: var(--muted); width: 30px; flex: none; }
.uc-ch { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; color: #fff; }
.uc-ch.ig { background: #e1306c; }
.uc-ch.li { background: #0a66c2; }
.uc-ch.tt { background: #111; }
.uc-pt { flex: 1; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.uc-time { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.uc-reach { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.uc-reach > span { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.uc-reach .uc-prog { flex: 1; }
.uc-reach b { color: #1aa35a; font-size: 0.82rem; }

.uc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uc-kpi { background: #f5f8ff; border-radius: 10px; padding: 10px 6px; display: grid; gap: 2px; text-align: center; }
.uc-klab { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.uc-kval { font-size: clamp(0.95rem, 1.3vw, 1.15rem); font-weight: 700; color: var(--ink); }
.uc-delta { font-size: 0.66rem; font-weight: 700; }
.uc-delta.up, .uc-delta.down { color: #1aa35a; }
.uc-chart { width: 100%; height: 72px; display: block; }
.uc-chart rect { fill: #c7d8ff; }
.uc-chart rect.hot { fill: #0054ff; }

.uc-ai { margin-top: 4px; padding: 9px 11px; border-radius: 10px; background: #eef3ff; color: #3c4c78; font-size: 0.78rem; line-height: 1.45; }
.uc-ai b { color: #0054ff; }
.office-cta { margin-top: clamp(1.75rem, 4vh, 2.75rem); }

.chart-panel {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.chart-title { font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: var(--track-3); }
.chart-sub { color: var(--muted); font-size: var(--text-small); margin-top: 0.3rem; margin-bottom: 1.5rem; }
.chart-panel svg { width: 100%; height: auto; }
.chart-note { color: var(--muted); font-size: var(--text-small); margin-top: 1.25rem; }

.ggrid { stroke: #2b4894; stroke-width: 1; }
.ggridlab, .gyear { fill: var(--muted); font-size: 12px; font-family: var(--font-sans); }
.garea { fill: rgba(120, 160, 255, 0.18); }
.gline { stroke: var(--on-dark); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.gdot { fill: var(--on-dark); }
.glabel { fill: var(--on-dark); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }
.glabel.dim { fill: var(--muted); font-weight: 500; }

.grants { display: grid; gap: 1rem; align-content: start; }
.grant-panel {
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}
.grant-amt {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: var(--track-3);
  white-space: nowrap;
}
.grant-what { font-weight: 600; }
.grant-when { font-size: var(--text-small); margin-top: 0.2rem; }

/* ---------- Founders ---------- */

.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) { .founders-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.founder-card {
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: clamp(6.5rem, 11vw, 10rem) 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 560px) { .founder-card { grid-template-columns: 1fr; } }

.founder-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  background: var(--ink);
  overflow: clip;
  display: grid;
  place-items: center;
  max-width: 12rem;
}
.founder-initials {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--on-dark);
  letter-spacing: var(--track-3);
}
.founder-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Monochrome at rest to match the editorial theme; colour on card hover. */
  filter: grayscale(1) contrast(1.04) brightness(1.02);
  transition: filter 0.55s var(--ease-out);
}
.founder-card:hover .founder-photo img { filter: grayscale(0); }

.founder-body h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: var(--track-3); }
.founder-role { font-size: var(--text-small); font-weight: 600; margin-top: 0.2rem; }
.founder-bio { font-size: var(--text-small); line-height: 1.65; margin-top: 0.9rem; max-width: 48ch; color: #3c4c78; }

/* ---------- Services: sticky stacked deck ---------- */

.deck {
  display: grid;
  gap: 1.25rem;
}

.deck-card {
  color: var(--on-dark);
  border-radius: var(--r-mega);
  padding: clamp(1.5rem, 4.5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vh, 2rem);
}
.deck-card-1 { background: var(--deck-1); }
.deck-card-2 { background: var(--deck-2); }
.deck-card-3 { background: var(--deck-3); }
.deck-card-4 { background: var(--deck-4); }

@media (min-width: 1024px) {
  .deck { gap: 0; }
  .deck-card {
    position: sticky;
    min-height: min(36rem, 76svh);
  }
  .deck-card-1 { top: calc(var(--nav-height) + 0rem); }
  .deck-card-2 { top: calc(var(--nav-height) + 1.25rem); margin-top: 1.25rem; }
  .deck-card-3 { top: calc(var(--nav-height) + 2.5rem); margin-top: 1.25rem; }
  .deck-card-4 { top: calc(var(--nav-height) + 3.75rem); margin-top: 1.25rem; }

  /* JS-pinned variant: cards stack absolutely, GSAP scrubs y + scale. */
  .deck--pinned {
    position: relative;
    height: min(34rem, 74svh);
  }
  .deck--pinned .deck-card {
    position: absolute;
    inset: 0;
    margin-top: 0;
    min-height: 0;
    height: 100%;
    transform-origin: center top;
    overflow: clip;
  }
}

.deck-head {
  display: grid;
  font-size: var(--text-cardhead);
  font-weight: 600;
  letter-spacing: var(--track-5);
  line-height: 0.95;
}
.deck-head .deck-sub { color: var(--muted); }

.deck-desc {
  margin-top: auto;
  font-size: clamp(1.125rem, 1.9vw, 1.75rem);
  line-height: 1.3;
  max-width: 36ch;
  color: #e7eeff;
}

.deck-proof {
  color: var(--muted);
  font-size: var(--text-small);
}
.deck-proof strong { color: var(--on-dark); font-weight: 600; }

/* ---------- Approach ---------- */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.approach-item {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  align-content: start;
}
.approach-item h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 600;
  letter-spacing: var(--track-3);
}
.approach-item p { max-width: 38ch; }

/* ---------- Insights teaser ---------- */

.insights-teaser-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.insights-teaser-row .eyebrow { display: block; margin-bottom: 1rem; }
.teaser-statement {
  font-size: clamp(1.625rem, 3.4vw, 3.5rem);
  max-width: 22ch;
}

/* ---------- CTA ---------- */

.cta {
  display: grid;
  justify-items: start;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding-block: calc(var(--space-section) * 1.15);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  html.js .wm-letter { transform: none; }
}