/* ==========================================================================
   Kalinotech — reset, typography, shell, navigation, footer, primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* Moved out of view vertically: a large inline offset would push it sideways
   in RTL and widen the document. */
.skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-s) var(--r-s);
  transform: translateY(-140%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- shell */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell-narrow { width: min(100% - (var(--gutter) * 2), var(--shell-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }

/* ------------------------------------------------------------ typography */
.display-1, .display-2, .display-3 {
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -.005em;
  margin: 0;
}
.display-1 { font-size: var(--fs-display-1); line-height: 1.14; }
.display-2 { font-size: var(--fs-display-2); }
.display-3 { font-size: var(--fs-display-3); }

.lead {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62ch;
}
[data-nav-dark] .lead { color: var(--on-night-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  direction: ltr;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--amber);
  flex: none;
}
[data-nav-dark] .eyebrow { color: var(--on-night-2); }

.accent { color: var(--amber); }
.num { font-variant-numeric: tabular-nums; font-weight: 800; }
.latin { direction: ltr; unicode-bidi: isolate; font-feature-settings: "ss01"; }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn svg { flex: none; transition: transform var(--dur-fast) var(--ease); }
.btn:hover { transform: scale(1.02); }
.btn:hover svg { transform: translateX(-4px); }
.btn:active { transform: scale(.99); }

.btn--accent { --btn-bg: var(--amber); --btn-bd: var(--amber); --btn-fg: #FFFFFF; }
.btn--light  { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--ink); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn--sm     { padding: 10px 18px; font-size: .86rem; gap: 8px; }
[data-nav-dark] .btn--ghost { --btn-fg: #fff; --btn-bd: var(--line-night); }
[data-nav-dark] .btn--ghost:hover { --btn-bd: rgba(255,255,255,.55); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
  position: relative;
  padding-bottom: 3px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease);
}
.link-arrow:hover::after { width: 100%; }
.link-arrow svg { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(-5px); }

/* ------------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease),
              border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 18px;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.nav__logo { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__logo svg { width: 34px; height: 34px; }
.nav__logo-text { display: grid; line-height: 1.25; }
.nav__logo-text b { font-size: .95rem; font-weight: 800; letter-spacing: .04em; direction: ltr; }
.nav__logo-text span { font-size: .68rem; color: var(--ink-2); letter-spacing: .01em; }

.nav__links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); margin-inline-start: auto; }
.nav__links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding-block: 6px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--amber);
  transition: width var(--dur) var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__cta { flex: none; margin-inline-start: 10px; }
.nav__cta .btn { padding: 11px 22px; font-size: .88rem; }

.nav__burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
}
.nav__burger span { display: block; width: 17px; height: 9px; position: relative; }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger span::before { top: 0; }
.nav__burger span::after { bottom: 0; }

/* dark-over-hero state */
.nav.is-over-dark { color: #fff; }
.nav.is-over-dark .nav__links a { color: var(--on-night-2); }
.nav.is-over-dark .nav__links a:hover, .nav.is-over-dark .nav__links a[aria-current="page"] { color: #fff; }
.nav.is-over-dark .nav__logo-text span { color: var(--on-night-2); }
.nav.is-over-dark .nav__burger { border-color: var(--line-night); }
.nav.is-over-dark .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }

.nav.is-stuck {
  padding-block: 10px;
  background: rgba(245, 245, 242, .82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line-2);
}
.nav.is-stuck.is-over-dark {
  background: rgba(8, 10, 15, .72);
  border-bottom-color: var(--line-night-2);
}

/* A backdrop blur has to read back the pixels behind it on every frame.
   Touch devices scroll far more smoothly with an opaque bar instead, and
   the same goes for the small translucent chips on cards. */
@media (hover: none), (max-width: 860px) {
  .nav.is-stuck { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.is-stuck.is-over-dark { background: #0B0E14; }
  .globe-tip, .bento__chip, .pcard__chip, .pcard__place, .bindex__tags i, .case__badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .bento__chip, .pcard__chip, .pcard__place { background: rgba(8, 10, 15, .62); }
  .bindex__tags i { background: rgba(255, 255, 255, .2); }
  /* the fine noise wash costs a full-screen paint for a texture nobody sees on a phone */
  .hero__noise { display: none; }
}

/* ------------------------------------------------------- mobile drawer */
/* A side drawer rather than a full-screen takeover: the page stays visible
   behind it, so it reads as a menu over the site instead of a new page. The
   labels are nav labels, set at nav size — blown up to headline size they
   just looked like an error. */
/* the drawer and its scrim sit over the bar: the drawer brings its own
   header with the close button, and the bar behind it is dimmed like the
   rest of the page */
.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 1);
  background: rgba(4, 6, 12, .6);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.nav__scrim.is-open { opacity: 1; }

.nav__panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: calc(var(--z-nav) + 2);
  width: min(336px, 86vw);
  max-width: 100%;
  background: #0A0D13;
  color: #fff;
  border-inline-end: 1px solid var(--line-night-2);
  box-shadow: 0 0 60px rgba(0, 0, 0, .5);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  visibility: hidden;
  /* slides out towards its own edge, whichever side the language puts it on */
  transform: translateX(calc(var(--panel-dir, 1) * -102%));
  transition: transform .42s var(--ease), visibility .42s;
}
[dir="rtl"] .nav__panel { --panel-dir: -1; }
.nav__panel.is-open { visibility: visible; transform: none; }

.nav__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-night-2);
}
.nav__panel-brand { display: grid; gap: 1px; line-height: 1.3; }
.nav__panel-brand b { font-size: .84rem; font-weight: 700; letter-spacing: .08em; }
.nav__panel-brand span { font-size: .68rem; color: var(--on-night-3); }
.nav__panel-close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-night-2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.nav__panel-close:hover { background: rgba(255, 255, 255, .08); }

.nav__panel-links { overflow-y: auto; padding: 6px 0; -webkit-overflow-scrolling: touch; }
.nav__panel-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: .98rem;
  font-weight: 600;
  color: var(--on-night-2);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__panel-links a:last-child { border-bottom: 0; }
.nav__panel-links a i {
  font-style: normal;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--on-night-3);
}
.nav__panel-links a svg { color: var(--on-night-3); opacity: .6; }
.nav__panel-links a:hover, .nav__panel-links a:focus-visible { background: rgba(255, 255, 255, .05); color: #fff; }
.nav__panel-links a[aria-current="page"] { color: #fff; background: rgba(10, 123, 255, .1); }
.nav__panel-links a[aria-current="page"] i,
.nav__panel-links a[aria-current="page"] svg { color: var(--amber); opacity: 1; }

.nav__panel-foot {
  display: grid;
  gap: 12px;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-night-2);
}
.nav__panel-foot .btn { justify-content: center; }
.nav__panel-contact { display: grid; gap: 4px; font-size: .76rem; }
.nav__panel-contact a { color: var(--on-night-3); transition: color .2s var(--ease); }
.nav__panel-contact a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nav__panel { transition: none; }
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--night);
  color: var(--on-night-2);
  padding-block: clamp(56px, 7vw, 96px) 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset-inline-start: -10%;
  top: -40%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(22, 119, 255, .16), transparent 62%);
  pointer-events: none;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  position: relative;
}
.footer h4 {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.footer li + li { margin-top: 10px; }
.footer a { font-size: .92rem; transition: color var(--dur-fast) var(--ease); }
.footer a:hover { color: #fff; }
.footer__brand p { max-width: 42ch; font-size: .92rem; margin-top: 18px; }
.footer__mark { display: flex; align-items: center; gap: 12px; color: #fff; }
.footer__mark svg { width: 38px; height: 38px; }
.footer__mark b { font-size: 1.05rem; font-weight: 800; letter-spacing: .05em; direction: ltr; }
.footer__socials { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.footer__socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-night); border-radius: var(--r-pill);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.footer__socials a:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line-night-2);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  position: relative;
}
.footer__bottom .latin { letter-spacing: .06em; }

/* ------------------------------------------------------------ reveals */
/* No blanket will-change here: it would hold a compositor layer for every
   revealed element on the page at once, which is heavy on phones. The
   transition itself promotes each element only while it runs. */
[data-reveal="up"] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease) var(--d, 0ms), transform .85s var(--ease) var(--d, 0ms);
}
[data-reveal="fade"] {
  opacity: 0;
  transition: opacity .9s var(--ease) var(--d, 0ms);
}
[data-reveal="blur"] {
  opacity: 0;
  filter: blur(10px);
  transform: scale(.96);
  transition: opacity 1s var(--ease) var(--d, 0ms), filter 1s var(--ease) var(--d, 0ms),
              transform 1s var(--ease) var(--d, 0ms);
}
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(.94) translateY(40px);
  transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* On a phone the content should be there as soon as you reach it: shorter
   moves, no stagger, and no blur to rasterise. */
@media (hover: none), (max-width: 860px) {
  [data-reveal] { --d: 0ms !important; }
  [data-reveal="up"] { transform: translateY(18px); transition-duration: .45s; }
  [data-reveal="fade"] { transition-duration: .45s; }
  [data-reveal="scale"] { transform: translateY(18px); transition-duration: .5s; }
  [data-reveal="blur"] { filter: none; transform: none; transition-duration: .45s; }
}

/* line-by-line headline reveal */
.reveal-lines { display: grid; }
.reveal-lines > span { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.reveal-lines > span > i {
  display: block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform .95s var(--ease) var(--ld, 0ms);
}
.reveal-lines.is-in > span > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .reveal-lines > span > i { transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-lines > span > i { transform: none !important; }
}

/* ------------------------------------------------------------- cursor */
/* The native pointer always stays visible; this is only a soft companion
   ring that reacts to what is under the pointer. */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; }
.cursor__dot {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 17, 17, .3);
  background: transparent;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
              background-color .35s var(--ease), border-color .35s var(--ease),
              opacity .3s var(--ease);
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: transparent;
  overflow: hidden;
}
.cursor.is-dark .cursor__dot { border-color: rgba(255, 255, 255, .34); }
.cursor.is-link .cursor__dot {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-color: var(--amber);
}
.cursor.is-cta .cursor__dot {
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-color: var(--amber);
  background: rgba(10, 123, 255, .1);
}
.cursor.is-view .cursor__dot {
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  background: var(--amber); border-color: var(--amber); color: #FFFFFF;
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

/* --------------------------------------------------------- breakpoints */
@media (max-width: 1180px) {
  .nav__links { gap: 14px; }
  .nav__links a { font-size: .85rem; }
}
@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --fs-body: 1rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .btn { padding: 13px 22px; }
}

/* ------------------------------------------------- admin quick-access bar */
.abar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  height: 40px;
  background: #101318;
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.abar__in {
  width: min(100% - 28px, 1640px);
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.abar__in::-webkit-scrollbar { display: none; }
.abar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding-inline: 11px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.abar a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.abar__brand { font-weight: 700; color: #fff; }
.abar__logo {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--amber);
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 800;
}
.abar__edit { color: var(--amber) !important; font-weight: 600; }
.abar__edit:hover { background: rgba(10, 123, 255, .14) !important; }
.abar__sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); margin-inline: 6px; flex: none; }
.abar__dot {
  font-style: normal;
  min-width: 18px;
  padding-inline: 5px;
  border-radius: 99px;
  background: var(--amber);
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}
.abar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; height: 100%; }
.abar__me { color: rgba(255,255,255,.5); padding-inline: 8px; white-space: nowrap; }

body.has-abar { padding-top: 40px; }
body.has-abar .nav { top: 40px; }
body.has-abar .hero__stage,
body.has-abar .journey__stage { top: 40px; height: calc(100vh - 40px); }

@media (max-width: 700px) {
  .abar { font-size: .76rem; }
  .abar__me { display: none; }
  .abar a { padding-inline: 9px; }
}