/* Kodlane — problem → builder redesign (same palette, new layout) */
@import url('tokens/colors.css');
@import url('tokens/typography.css');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
 font-family: var(--kl-font);
 color: var(--kl-ink);
 background:
  radial-gradient(800px 420px at 100% 0%, var(--kl-blue-glow), transparent 50%),
  var(--kl-bg);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 overflow-x: clip;
}
a { color: var(--kl-blue); text-decoration: none; }
a:hover { color: var(--kl-blue-dark); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--kl-blue); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
.skip {
 position: absolute; left: -9999px; top: 0;
 background: var(--kl-blue); color: #fff; padding: 8px 16px; z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }
.container {
 max-width: var(--content-max, 1180px);
 margin: 0 auto;
 padding: 0 var(--page-pad, 28px);
}

.reveal {
 opacity: 0; transform: translateY(24px);
 transition: opacity var(--kl-duration-entrance) var(--kl-ease-spring), transform var(--kl-duration-entrance) var(--kl-ease-spring);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }

/* NAV — light, sticky */
.site-nav {
 position: sticky; top: 0; z-index: 40;
 padding: 14px 0;
 background: rgba(232, 236, 242, 0.88);
 backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(213, 219, 230, 0.85);
}
.nav-inner {
 display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
 color: var(--kl-muted); font-size: 14px; font-weight: 600;
 transition: color var(--kl-duration-fast) var(--kl-ease-spring);
}
.nav-links a:hover { color: var(--kl-ink); }
.lang-switch {
 display: inline-flex;
 border: 1px solid var(--kl-line);
 border-radius: var(--kl-radius-btn);
 overflow: hidden;
 background: var(--kl-white);
}
.lang-switch button {
 border: 0; background: transparent; font: inherit;
 font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
 padding: 7px 11px; color: var(--kl-muted); cursor: pointer;
}
.lang-switch button.is-active { background: var(--kl-ink); color: #fff; }

.btn, button.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 border: none; cursor: pointer; font-family: inherit; font-weight: 700;
 transition: transform var(--kl-duration-fast) var(--kl-ease-spring), background var(--kl-duration-fast) var(--kl-ease-spring), border-color var(--kl-duration-fast) var(--kl-ease-spring), color var(--kl-duration-fast) var(--kl-ease-spring);
}
.btn-primary {
 background: var(--kl-blue); color: #fff;
 padding: 13px 22px; border-radius: var(--kl-radius-btn); font-size: 14px;
}
.btn-primary:hover { background: var(--kl-blue-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost {
 background: transparent; color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.28);
 padding: 12px 20px; border-radius: var(--kl-radius-btn); font-size: 14px;
}
.btn-solid-ghost {
 background: var(--kl-white); color: var(--kl-ink);
 border: 1px solid var(--kl-line);
 padding: 12px 20px; border-radius: var(--kl-radius-btn); font-size: 14px;
}
.btn-solid-ghost:hover { border-color: var(--kl-blue); color: var(--kl-blue); }
.site-nav .btn-primary { padding: 10px 16px; }

/* HERO — split: problem copy | live media */
.hero {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 min-height: calc(100svh - 64px);
 background: var(--kl-bg);
}
.hero-copy {
 display: flex; flex-direction: column; justify-content: center;
 padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px) clamp(40px, 6vw, 72px);
 max-width: 640px;
 margin-left: auto;
 width: 100%;
}
.logo-link img { height: 32px; width: 32px; }
.hero-brand {
 font-size: clamp(2.6rem, 7vw, 4.75rem);
 font-weight: 800;
 letter-spacing: -0.06em;
 line-height: 0.95;
 color: var(--kl-ink);
 margin-bottom: 28px;
 opacity: 0; transform: translateY(20px);
 animation: rise 0.8s var(--kl-ease-spring) 0.08s forwards;
}
.hero-kicker {
 font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
 text-transform: uppercase; color: var(--kl-blue);
 margin-bottom: 12px;
 opacity: 0; transform: translateY(16px);
 animation: rise 0.7s var(--kl-ease-spring) 0.16s forwards;
}
.hero h1 {
 font-size: clamp(1.55rem, 3.4vw, 2.35rem);
 font-weight: 800; letter-spacing: -0.04em; line-height: 1.12;
 max-width: 20ch; margin-bottom: 14px;
 opacity: 0; transform: translateY(16px);
 animation: rise 0.7s var(--kl-ease-spring) 0.24s forwards;
}
.hero-lead {
 font-size: clamp(15px, 1.7vw, 17px);
 color: var(--kl-muted); max-width: 34ch;
 margin-bottom: 28px; line-height: 1.5;
 opacity: 0; transform: translateY(16px);
 animation: rise 0.7s var(--kl-ease-spring) 0.32s forwards;
}
.hero-cta {
 opacity: 0; transform: translateY(16px);
 animation: rise 0.7s var(--kl-ease-spring) 0.4s forwards;
}
.hero-visual {
 position: relative;
 background: var(--kl-navy-deep);
 overflow: hidden;
 min-height: 420px;
}
.hero-visual img {
 width: 100%; height: 100%;
 max-width: none;
 object-fit: cover;
 object-position: 62% 45%;
 position: absolute; inset: 0;
 transform: scale(1.12);
 animation: zoom 1.35s var(--kl-ease-spring) forwards;
}
.hero-visual::before {
 content: "";
 position: absolute; top: 0; left: 0; right: 0; height: 16%;
 z-index: 1;
 background: linear-gradient(180deg, rgba(7, 11, 20, 0.22) 0%, transparent 100%);
 pointer-events: none;
}
.hero-visual::after {
 content: "";
 position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(90deg, var(--kl-bg) 0%, transparent 12%);
 pointer-events: none;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes zoom { to { transform: scale(1); } }

/* RANGE — pages ←→ senior */
.range {
 padding: 56px 0 64px;
 background: var(--kl-navy);
 color: #fff;
}
.range-title {
 font-size: clamp(1.35rem, 2.6vw, 1.75rem);
 font-weight: 800; letter-spacing: -0.035em;
 margin-bottom: 22px;
}
.range-track {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 14px 20px;
 align-items: center;
 max-width: 780px;
}
.range-end strong {
 display: block; font-size: clamp(1.15rem, 2vw, 1.45rem);
 font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px;
}
.range-end p { color: rgba(226, 232, 240, 0.72); font-size: 15px; max-width: 26ch; line-height: 1.45; }
.range-end-right { text-align: right; }
.range-end-right p { margin-left: auto; }
.range-line {
 display: flex; align-items: center; gap: 10px; min-width: 168px;
}
.range-line span:first-child,
.range-line span:last-child {
 flex: 1; height: 1px; background: rgba(147, 197, 253, 0.45);
}
.range-line span:nth-child(2) {
 font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
 text-transform: uppercase; color: #93C5FD; white-space: nowrap;
}
.range-note {
 margin-top: 20px;
 max-width: 780px;
 text-align: center;
 font-size: 12px; font-weight: 600;
 letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.85);
}

/* SECTIONS */
.section { padding: 72px 0; }
.section-band {
 background: var(--kl-white);
 border-block: 1px solid var(--kl-line);
}
.section-head { margin-bottom: 28px; max-width: 640px; }
.section h2,
.contact h2 {
 font-size: clamp(1.7rem, 3.4vw, 2.5rem);
 font-weight: 800; letter-spacing: -0.045em; line-height: 1.1;
}
.section-lead {
 margin-top: 10px; color: var(--kl-muted); font-size: 16px; max-width: 42ch;
}

/* WORK */
.work-stack { display: grid; gap: 28px; }
.work-featured.is-live { display: grid; gap: 18px; }
.work-featured.is-live .work-media {
 border-radius: var(--kl-radius); overflow: hidden;
 border: 1px solid var(--kl-line); background: #E4EAF5;
}
.work-featured.is-live .work-media img {
 width: 100%; aspect-ratio: 16 / 9;
 object-fit: cover; object-position: top center;
}
.work-kind {
 font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
 text-transform: uppercase; color: var(--kl-blue); margin-bottom: 8px;
}
.work-featured-body h3 {
 font-size: clamp(1.35rem, 2.4vw, 1.85rem);
 font-weight: 700; letter-spacing: -0.035em; margin-bottom: 8px;
}
.work-featured-body p {
 font-size: 15px; color: var(--kl-muted); margin-bottom: 14px; max-width: 42ch;
}
.work-link { font-size: 14px; font-weight: 700; color: var(--kl-blue); }
.work-link:hover { color: var(--kl-blue-dark); }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.work-card { display: grid; gap: 14px; }
.work-card .work-media {
 border-radius: var(--kl-radius-sm); overflow: hidden;
 border: 1px solid var(--kl-line); background: #E4EAF5;
}
.work-card .work-media img {
 width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
 transition: transform var(--kl-duration-medium) var(--kl-ease-spring);
}
.work-card:hover .work-media img { transform: scale(1.03); }
.work-body h3 {
 font-size: 1.05rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px;
}
.work-body p { font-size: 14px; color: var(--kl-muted); max-width: 36ch; }

/* STEPS */
.steps {
 display: grid; grid-template-columns: repeat(3, 1fr);
 gap: 24px 32px; counter-reset: step;
 border-top: 1px solid var(--kl-line); padding-top: 28px;
}
.step::before {
 counter-increment: step;
 content: counter(step, decimal-leading-zero);
 display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
 color: var(--kl-blue); margin-bottom: 12px;
}
.step strong {
 display: block; font-size: 18px; font-weight: 700;
 letter-spacing: -0.025em; margin-bottom: 8px;
}
.step p { color: var(--kl-muted); font-size: 15px; max-width: 28ch; }

/* FOUNDER */
.founder {
 display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center;
}
.founder img {
 width: 200px; height: 200px; object-fit: cover; border-radius: var(--kl-radius);
}
.founder h2 {
 margin-bottom: 8px; font-size: clamp(1.45rem, 2.6vw, 1.9rem);
 font-weight: 700; letter-spacing: -0.03em;
}
.founder p { color: var(--kl-muted); max-width: 44ch; margin-bottom: 10px; font-size: 16px; }
.founder .role { font-weight: 700; color: var(--kl-slate); margin-bottom: 16px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
 border: 1px solid var(--kl-line); border-radius: var(--kl-radius-btn);
 padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--kl-slate);
}

/* CONTACT */
.contact { padding: 72px 0 80px; scroll-margin-top: 88px; }
.contact-lead {
 margin-top: 12px; color: var(--kl-muted); font-size: 16px; max-width: 34ch;
}
.contact-layout {
 display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px;
 align-items: start; margin-top: 28px;
}
.funnel {
 display: grid; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--kl-slate);
}
.funnel span { display: flex; gap: 12px; align-items: baseline; }
.funnel b { color: var(--kl-blue); font-variant-numeric: tabular-nums; min-width: 1.2em; }
form label {
 display: grid; gap: 6px; font-size: 13px; color: var(--kl-slate); margin-top: 14px;
}
input, textarea, select {
 width: 100%; padding: 13px 14px;
 border: 1px solid var(--kl-line); border-radius: var(--kl-radius-btn);
 font-size: 16px; font-family: inherit; background: var(--kl-white); color: var(--kl-ink);
}
input:focus, textarea:focus, select:focus {
 outline: none; border-color: #93C5FD;
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.small { font-size: 12px; color: var(--kl-muted); margin-top: 14px; }

footer {
 padding: 28px 0 48px; border-top: 1px solid var(--kl-line);
 text-align: center; color: var(--kl-muted); font-size: 14px; line-height: 1.8;
 background: var(--kl-bg-alt);
}
.footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.footer-links a { color: var(--kl-muted); font-weight: 600; }
.footer-links a:hover { color: var(--kl-blue); }

.cookie-banner {
 position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
 z-index: 50; max-width: 360px; padding: 14px 16px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: var(--kl-radius-sm);
 background: rgba(7, 11, 20, 0.96); color: #fff;
}
.cookie-banner p { font-size: 12px; color: rgba(226, 232, 240, 0.8); margin: 0 0 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cookie-actions .btn-primary,
.cookie-actions .btn-ghost { padding: 10px 14px; font-size: 13px; min-height: 42px; }
.cookie-actions a { color: #93C5FD; font-size: 12px; font-weight: 600; }

@media (max-width: 980px) {
 .site-nav {
  /* backdrop-filter + sticky = iOS/IG scroll paint glitch */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--kl-bg);
 }
 .hero {
  display: flex; flex-direction: column; min-height: 0;
 }
 .hero-visual {
  order: -1;
  /* fixed ratio - avoid vh jumps when IG chrome shows/hides */
  height: 280px;
  min-height: 280px;
  max-height: none;
  flex: 0 0 auto;
  isolation: isolate;
 }
 .hero-visual img {
  transform: none;
  animation: none;
  /* kill global img { height:auto } fight */
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 70% 40%;
 }
 .hero-visual::after {
  background: linear-gradient(180deg, transparent 50%, var(--kl-bg) 100%);
 }
 .hero-copy {
  max-width: none; margin: 0; padding: 22px var(--page-pad) 28px;
  /* avoid animating transforms under sticky nav on scroll */
  opacity: 1; transform: none;
 }
 .hero-brand, .hero-kicker, .hero h1, .hero-lead, .hero-cta {
  opacity: 1; transform: none; animation: none;
 }
 .hero-brand { margin-bottom: 14px; }
 .range-track { grid-template-columns: 1fr; gap: 16px; max-width: none; }
 .range-end-right { text-align: left; }
 .range-end-right p { margin-left: 0; }
 .range-line { order: -1; min-width: 0; }
 .range-note { text-align: left; max-width: none; }
 .steps, .contact-layout { grid-template-columns: 1fr; }
 .founder { grid-template-columns: 140px 1fr; gap: 24px; }
 .founder img { width: 140px; height: 140px; }
}

@media (max-width: 760px) {
 :root { --page-pad: 18px; }
 .nav-links { display: none; }
 .hero-brand { font-size: clamp(2rem, 11vw, 2.75rem); margin-bottom: 10px; }
 .hero-kicker { margin-bottom: 8px; }
 .hero h1 { max-width: none; margin-bottom: 10px; }
 .hero-lead { margin-bottom: 20px; }
 .hero-visual { height: 240px; min-height: 240px; }
 .work-grid { grid-template-columns: 1fr; }
 .steps { grid-template-columns: 1fr; gap: 0; }
 .step { padding: 18px 0; border-bottom: 1px solid var(--kl-line); }
 .step:last-child { border-bottom: none; }
 .founder { grid-template-columns: 1fr; }
 .founder img { width: 120px; height: 120px; }
 .form-row { grid-template-columns: 1fr; }
 .form-actions { flex-direction: column; align-items: stretch; }
 .form-actions .btn { width: 100%; }
 .section, .contact { padding: 52px 0; }
 .cookie-banner {
  left: 12px; right: 12px; max-width: none;
  bottom: max(12px, env(safe-area-inset-bottom));
 }
}

@media (prefers-reduced-motion: reduce) {
 .reveal, .hero-brand, .hero-kicker, .hero h1, .hero-lead, .hero-cta, .hero-visual img,
 .work-card .work-media img {
  animation: none !important; transition: none !important;
  opacity: 1 !important; transform: none !important;
 }
}

html[data-lang-wait="1"] body,
html[lang="lt"]:not([data-i18n-ready]) body { visibility: hidden; }