/* =========================================================
   ai, jo! V4 — Creative Tech sluoksnis virš components.css
   Redakcinė kompozicija, statiški vaizdai, interaktyvumas — iš sąsajos.
   Judesys: tik būsenų perėjimai (150–420 ms), be begalinių animacijų.
   ========================================================= */

/* ---------- Tonai ---------- */
.on-paper { --bg: var(--paper); --surface: var(--white); --fg: var(--fg-on-paper); --fg-muted: var(--fg-muted-on-paper);
  --line: color-mix(in srgb, var(--ink) 15%, transparent); --focus: var(--alt); --accent: var(--alt-ink); --mark-bg: var(--alt); --head: var(--ink); }
.on-light { --bg: var(--light); --surface: var(--white); --fg: var(--fg-on-paper); --fg-muted: var(--fg-muted-on-paper);
  --line: color-mix(in srgb, var(--ink) 13%, transparent); --focus: var(--alt); --accent: var(--alt-ink); --mark-bg: var(--alt); --head: var(--ink); }
.on-ink { --bg: var(--ink); --surface: var(--ink-2); --fg: var(--fg-on-ink); --fg-muted: var(--fg-muted-on-ink);
  --line: color-mix(in srgb, var(--light) 14%, transparent); --focus: var(--hi); --accent: var(--hi); --mark-bg: var(--hi); --head: var(--fg-on-ink); }
.on-alt { --bg: var(--alt); --surface: color-mix(in srgb, var(--white) 12%, transparent); --fg: var(--fg-on-alt); --fg-muted: var(--fg-muted-on-alt);
  --line: color-mix(in srgb, var(--white) 28%, transparent); --focus: var(--white); --accent: var(--hi); --mark-bg: var(--hi); --head: var(--white); }
.on-hi { --bg: var(--hi); --surface: color-mix(in srgb, var(--white) 45%, transparent); --fg: var(--fg-on-hi); --fg-muted: #34384A;
  --line: color-mix(in srgb, var(--ink) 20%, transparent); --focus: var(--ink); --accent: var(--ink); --mark-bg: var(--ink); --head: var(--ink); }
.on-paper, .on-light, .on-ink, .on-alt, .on-hi { background-color: var(--bg); color: var(--fg); }

body { background: var(--paper); color: var(--fg-on-paper); font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, h4 { font-weight: 500; color: var(--head, var(--fg)); }
.h2 { letter-spacing: -0.045em; line-height: 1.02; }
.h3, .proc-title, .topic-title, .faq summary, .mf-q { font-weight: 500; letter-spacing: -0.02em; }
.lead { line-height: 1.5; }

/* ---------- Etiketė ---------- */
.eyebrow { font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: 0.02em; text-transform: none; color: var(--fg-muted); gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--mark-bg); }

/* ---------- Logotipas ---------- */
.logo { font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.on-ink .logo, .mobile-menu .logo { color: var(--hi); }

/* ---------- Mygtukai: Lime — pagrindinis veiksmas ---------- */
.btn { font-weight: 500; letter-spacing: -0.005em; min-height: 52px; }
.btn--primary, .form-card .btn--primary { background: var(--hi); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.btn--primary:hover, .form-card .btn--primary:hover { background: var(--ink); color: var(--hi); }
.on-ink .btn--primary:hover { background: var(--white); color: var(--ink); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost { border: 1.5px solid color-mix(in srgb, var(--fg) 40%, transparent); }
.btn--ghost:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.link-arrow { font-weight: 500; }

/* ---------- Peržiūros juosta, header, meniu ---------- */
.preview-bar { background: var(--ink); color: var(--light); --focus: var(--hi); font-weight: 400; }
.site-header.on-paper { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.site-header .container { min-height: 72px; }
.nav-list a { font-weight: 500; color: var(--fg-muted); }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--fg); }
.nav-list a::after { background: var(--alt); }
.mobile-menu ul a { font-weight: 500; letter-spacing: -0.035em; }
.mobile-menu ul a[aria-current="page"] { color: var(--hi); }

/* =========================================================
   HERO
   ========================================================= */
.hero--v4 { padding-block: clamp(40px, 6vw, 96px) clamp(64px, 8vw, 120px); }
.h4-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: end; }
.h4-kicker { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.9375rem; color: var(--fg-muted); }
.h4-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 30%, transparent); }
.h4-title { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px); font-size: var(--fs-hero); line-height: 0.94; letter-spacing: -0.055em; font-weight: 500; max-width: 11.5ch; text-wrap: balance; }
.h4-title .hl { color: var(--alt-ink); }
.h4-copy { grid-column: 1 / span 6; margin-top: clamp(40px, 5vw, 72px); }
.h4-copy .lead { max-width: 40ch; }
.h4-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Paslaugų rodyklė (kai nėra skulptūros) */
.h4-index { grid-column: 8 / span 5; margin-top: var(--s-7); border-top: 1.5px solid var(--ink); }
.h4-index-lbl { font-size: var(--fs-small); color: var(--fg-muted); padding-top: var(--s-3); }
.h4-index ol { list-style: none; padding: 0; margin-top: var(--s-2); }
.h4-index li { border-bottom: 1px solid var(--line); }
.h4-index a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s-3); min-height: 64px; padding-block: var(--s-3);
  color: var(--fg); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), padding var(--dur-med) var(--ease-out); }
.hi-n { font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.hi-t { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); letter-spacing: -0.025em; font-weight: 500; }
.h4-index a .arr { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .h4-index a:hover { color: var(--alt-ink); padding-left: 6px; }
  .h4-index a:hover .arr { transform: translateX(4px); }
}
/* Kai įdėta skulptūra */
.hero--v4.has-sculpture .h4-title { grid-column: 1 / span 7; position: relative; z-index: 1; }
.hero--v4.has-sculpture .h4-figure { grid-column: 7 / span 6; grid-row: 1 / span 3; align-self: center; margin: 0; }
.h4-figure img { width: 100%; height: auto; display: block; }

/* =========================================================
   PASLAUGOS (Charcoal + AI Core), sukrautos kortelės
   ========================================================= */
.pic { display: block; }
.pic img { display: block; width: 100%; height: auto; }
.pg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.pg-intro { grid-column: 1 / span 5; position: sticky; top: 112px; }
.pg-intro .lead { margin-top: var(--s-5); color: var(--fg-muted); }
.pg-fig { margin: var(--s-7) 0 0; max-width: 420px; border-radius: var(--r-lg); overflow: hidden; }
.pc-stack { grid-column: 7 / span 6; list-style: none; padding: 0; display: grid; }
.pc { border-radius: var(--r-xl); position: relative; box-shadow: 0 -16px 36px -18px rgb(0 0 0 / 0.55); transition: transform var(--dur-med) var(--ease-out); }
.pc + .pc { margin-top: -28px; }
.pc.c-hi { background: var(--hi); color: var(--ink); --fg: var(--ink); --fg-muted: #34384A; --line: color-mix(in srgb, var(--ink) 20%, transparent); --focus: var(--ink); }
.pc.c-paper { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-muted: var(--fg-muted-on-paper); --line: color-mix(in srgb, var(--ink) 16%, transparent); --focus: var(--alt); }
.pc.c-alt { background: var(--alt); color: var(--white); --fg: var(--white); --fg-muted: var(--fg-muted-on-alt); --line: color-mix(in srgb, var(--white) 28%, transparent); --focus: var(--white); }
.pc-d > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n tag tog" "t t t" "s s s";
  gap: var(--s-3) var(--s-3); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 34px) clamp(44px, 4vw, 56px); border-radius: inherit; }
.pc:last-child .pc-d > summary { padding-bottom: clamp(22px, 2.6vw, 32px); }
.pc-d > summary::-webkit-details-marker { display: none; }
.pc-d > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.pc-n { grid-area: n; font-size: var(--fs-small); font-variant-numeric: tabular-nums; align-self: center; }
.pc-tag { grid-area: tag; align-self: center; font-size: var(--fs-small); color: var(--fg-muted); }
.pc-tog { grid-area: tog; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast); }
.pc-tog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pc-d[open] .pc-tog { transform: rotate(45deg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.pc-title { grid-area: t; margin-top: var(--s-5); font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.045em; color: inherit; }
.pc-short { grid-area: s; max-width: 42ch; color: var(--fg-muted); }
.pc-body { padding: 0 clamp(22px, 2.6vw, 34px) clamp(48px, 4.4vw, 60px); }
.pc:last-child .pc-body { padding-bottom: clamp(24px, 2.6vw, 34px); }
.pc-lbl { font-size: var(--fs-small); color: var(--fg-muted); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.pc-out { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.pc-out li { display: flex; gap: var(--s-3); }
.pc-out li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.62em; border-radius: 1px; background: currentColor; }
.pc-foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pc-price { font-weight: 500; font-variant-numeric: tabular-nums; }
html.js-ready .pc-d[open] .pc-body { animation: v4-fade var(--dur-slow) var(--ease-out); }
@keyframes v4-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .pc:hover { transform: translateY(-6px); } }

/* =========================================================
   PLAYGROUND
   ========================================================= */
.pl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.pl-intro { grid-column: 1 / span 4; }
.pl-intro .lead { margin-top: var(--s-5); color: var(--fg-muted); font-size: 1.125rem; }
.pl-fig { margin: var(--s-7) 0 0; border-radius: var(--r-lg); overflow: hidden; max-width: 460px; }
.pl-app { grid-column: 6 / span 7; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgb(41 43 56 / 0.06), 0 24px 60px -32px rgb(41 43 56 / 0.35);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.pl-bar { display: flex; align-items: center; gap: var(--s-3); padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.pl-dots { display: inline-flex; gap: 6px; }
.pl-dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.pl-name { font-weight: 500; }
.pl-badge { margin-left: auto; padding: 4px 10px; border-radius: var(--r-pill); background: var(--alt-soft); color: var(--alt-ink); font-weight: 500; font-size: 0.8125rem; white-space: nowrap; }
.pl-tabs { padding: 20px 20px 0; }
.tablist.pl-tablist, .tablist.cm-tablist { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; border-radius: 0; box-shadow: none; }
.tablist.pl-tablist [role="tab"], .tablist.cm-tablist [role="tab"] { min-height: 44px; padding: 10px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: transparent;
  font: inherit; font-weight: 500; font-size: 0.9375rem; color: var(--fg); cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.tablist.pl-tablist [role="tab"]:hover, .tablist.cm-tablist [role="tab"]:hover { border-color: var(--ink); }
.tablist.pl-tablist [role="tab"][aria-selected="true"], .tablist.cm-tablist [role="tab"][aria-selected="true"] { background: var(--hi); border-color: var(--ink); color: var(--ink); }
.pl-tabs .tabpanels { margin-top: 20px; }
.pl-panel { padding-bottom: 20px; display: grid; gap: 14px; }
.pl-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }
html.js-ready .pl-panel.is-anim, html.js-ready .cm-panel.is-anim { animation: v4-fade var(--dur-slow) var(--ease-out); }
.pl-k { font-size: 0.8125rem; font-weight: 500; color: var(--fg-muted); letter-spacing: 0.01em; }
.pl-problem { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); background: var(--light); }
.pl-problem p { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.pl-flows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl-flow { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); }
.pl-flow ol { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 10px; counter-reset: st; }
.pl-flow li { counter-increment: st; display: grid; grid-template-columns: 24px 1fr; gap: 8px; font-size: 0.9375rem; line-height: 1.45; }
.pl-flow li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 500; border: 1px solid var(--line); color: var(--fg-muted); }
.pl-flow--with { background: var(--alt); border-color: var(--alt); color: var(--white); }
.pl-flow--with .pl-k { color: var(--fg-muted-on-alt); }
.pl-flow--with li::before { border-color: color-mix(in srgb, var(--white) 40%, transparent); color: var(--white); }
.pl-out { padding: 16px 18px; border-radius: var(--r-md); background: var(--ink); color: var(--light); }
.pl-out .pl-k { color: var(--fg-muted-on-ink); }
.pl-out-t { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; }
.pl-review { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 4px 2px 0; }
.pl-review-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--hi); display: grid; place-items: center; }
.pl-review-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-review p:last-child { font-size: 0.9375rem; }
.pl-note { padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--fg-muted); }
.tabs-nojs .pl-panel + .pl-panel { border-top: 1px solid var(--line); padding-top: 20px; }

/* =========================================================
   BE DI / SU DI
   ========================================================= */
.cm-tabs .tabpanels { margin-top: var(--s-5); }
.cm-panel { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; }
.cm-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.cm-col { padding: clamp(28px, 4vw, 56px); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); }
.cm-before { background: var(--white); }
.cm-with { background: var(--alt); color: var(--white); }
.cm-k { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--fs-small); color: var(--fg-muted); }
.cm-k::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }
.cm-with .cm-k { color: var(--fg-muted-on-alt); }
.cm-with .cm-k::before { background: var(--hi); border-color: var(--hi); }
.cm-t { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 400; max-width: 30ch; }
.tabs-nojs .cm-panel + .cm-panel { margin-top: var(--s-4); }

/* =========================================================
   PAGRINDINĖ ŽINUTĖ (Ocean Blue) ir TEMOS
   ========================================================= */
.core .core-msg { font-size: var(--fs-statement); line-height: 1; letter-spacing: -0.05em; max-width: 16ch; color: var(--white); }
.core-points li { border-top-color: var(--line); }
.core-points .cp-n { font-weight: 500; color: var(--hi); }
.core-points b { font-weight: 500; }
.topic-d { border-radius: var(--r-md); background: var(--white); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.topic-num { font-weight: 500; color: var(--alt-ink); }
.topic-ico { border-radius: 50%; background: var(--paper); color: var(--alt-ink); }
@media (hover: hover) {
  .topics-grid:not(.is-accordion) .topic-d:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgb(41 43 56 / 0.45); }
  .topics-grid:not(.is-accordion) .topic-d:hover .topic-ico { background: var(--hi); color: var(--ink); }
}
.topics-closing { font-weight: 400; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 44ch; }
.topics-grid.is-accordion details[open] .topic-chev { background: var(--hi); border-color: var(--ink); color: var(--ink); }

/* ---------- Komandų skirtukai ---------- */
.tablist { border-radius: var(--r-pill); background: var(--white); padding: 5px; gap: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.tablist [role="tab"] { border-radius: var(--r-pill); font-weight: 500; color: var(--fg-muted); }
.tablist [role="tab"]:hover { color: var(--fg); }
.tablist [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--white); }
.tabpanel { border-radius: var(--r-lg); background: var(--white); }
.tabpanel .who { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--alt-ink); }

/* =========================================================
   MOKYMŲ EIGA + Learning Steps
   ========================================================= */
.pr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
.pr-fig { grid-column: 1 / span 6; margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.pr-main { grid-column: 8 / span 5; }
.pr-main .prose { margin-top: var(--s-5); }
.proc-step { border-radius: var(--r-lg); background: var(--surface); }
.proc-num { font-weight: 500; color: var(--alt-ink); }
.proc-ico { color: var(--alt-ink); }
.proc-items li { border-radius: var(--r-pill); font-weight: 500; }
.proc-step.is-final { --accent: var(--hi); background: var(--ink); color: var(--light); --fg: var(--light); --fg-muted: var(--fg-muted-on-ink); --line: color-mix(in srgb, var(--light) 16%, transparent); }
.proc-step.is-final .proc-title { color: var(--white); }
.proc-step.is-final .proc-num, .proc-step.is-final .proc-ico { color: var(--hi); }
.proc-step.is-final .proc-items li { background: color-mix(in srgb, var(--hi) 16%, transparent); color: var(--light); }
.proc-arrow { color: var(--alt-ink); }

/* =========================================================
   APIE (Human Intelligence)
   ========================================================= */
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
.ab-main { grid-column: 1 / span 6; }
.ab-main .h2 { max-width: 14ch; }
.ab-main .prose { margin-top: var(--s-5); }
.ab-main .link-arrow { margin-top: var(--s-6); }
.ab-fig { grid-column: 8 / span 5; margin: 0; justify-self: end; max-width: 440px; width: 100%; }
.ab-fig .pic { border-radius: var(--r-xl); overflow: hidden; }
.ab-fig figcaption { margin-top: var(--s-3); font-size: 0.8125rem; color: var(--fg-muted); }

/* =========================================================
   POREIKIŲ ĮVERTINIMAS
   ========================================================= */
.form-card { background: var(--light); border-radius: var(--r-xl); --line: color-mix(in srgb, var(--ink) 15%, transparent); --accent: var(--alt-ink); --focus: var(--alt); --head: var(--ink); }
.mf-qn { font-weight: 500; color: var(--alt-ink); }
.mf-bar span { background: var(--alt); }
.mf-opt span { border-radius: var(--r-md); }
.mf-opt input:checked + span { background: var(--hi); border-color: var(--ink); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--alt) 25%, transparent); border-color: var(--alt); }
.chips input:checked + span { background: var(--hi); color: var(--ink); }
.mf-rec { margin-bottom: var(--s-5); padding: 18px 20px; border-radius: var(--r-md); background: var(--alt); color: var(--white); }
.mf-rec-k { font-size: 0.8125rem; font-weight: 500; color: var(--fg-muted-on-alt); }
.mf-rec-t { margin-top: 6px; font-size: 1.375rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.025em; }
.mf-rec-why { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; font-size: 0.9375rem; }
.mf-rec-why li { display: flex; gap: 10px; }
.mf-rec-why li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 1px; background: var(--hi); }
.mf-rec-note { margin-top: 12px; font-size: 0.8125rem; color: var(--fg-muted-on-alt); }
html.js-ready .mf-rec:not([hidden]) { animation: v4-fade var(--dur-slow) var(--ease-out); }

/* ---------- DUK ---------- */
.faq details[open] summary .pm { background: var(--hi); border-color: var(--ink); color: var(--ink); }

/* =========================================================
   FINALINIS KVIETIMAS (Future Portal)
   ========================================================= */
.final { padding-block: clamp(80px, 10vw, 152px); overflow: hidden; }
.fn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
.fn-main { grid-column: 1 / span 6; }
.fn-title { font-size: var(--fs-statement); line-height: 0.98; letter-spacing: -0.055em; max-width: 12ch; }
.fn-main .lead { margin-top: var(--s-6); color: var(--fg-muted); }
.fn-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.fn-fig { grid-column: 7 / span 6; margin: 0; justify-self: end; width: 100%; max-width: 539px;   /* ne didesnis už originalą */ }
.fn-fig .pic { border-radius: var(--r-xl); overflow: hidden; }

/* ---------- Bendra ---------- */
.svc-card, .price, .steps li, .dg { border-radius: var(--r-lg); }
.cta-band h2 { font-weight: 500; letter-spacing: -0.05em; }
.statement p.big { font-weight: 500; letter-spacing: -0.05em; }
.anchor-nav a.is-active { background: var(--hi); color: var(--ink); }
.site-footer { padding-top: var(--s-8); }
.f-title { font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.f-links a:hover { color: var(--hi); }
.err-page .glyph { color: var(--alt-ink); font-weight: 500; }
html.edit-mode [data-edit] { outline-color: var(--alt); }

/* =========================================================
   ATSAKAS
   ========================================================= */
@media (max-width: 1023px) {
  .pg-intro, .pc-stack, .pl-intro, .pl-app, .pr-fig, .pr-main, .ab-main, .ab-fig, .fn-main, .fn-fig { grid-column: 1 / -1; }
  .pg-intro { position: static; }
  .pc-stack { margin-top: var(--s-7); }
  .pl-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); align-items: start; }
  .pl-intro > :not(.pl-fig) { grid-column: 1; }
  .pl-fig { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .pl-app { margin-top: var(--s-6); }
  .pr-main { margin-top: var(--s-7); }
  .ab-fig { justify-self: start; margin-top: var(--s-7); }
  .fn-fig { justify-self: start; margin-top: var(--s-7); }
  .h4-copy { grid-column: 1 / span 7; }
  .h4-index { grid-column: 1 / -1; }
  .hero--v4.has-sculpture .h4-title, .hero--v4.has-sculpture .h4-figure { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 767px) {
  .hero--v4 { padding-top: var(--s-6); }
  .h4-title { font-size: clamp(2.625rem, 0.6rem + 10.2vw, 4rem); line-height: 0.98; letter-spacing: -0.05em; margin-top: var(--s-5); }
  .h4-copy { grid-column: 1 / -1; margin-top: var(--s-6); }
  .h4-actions { flex-direction: column; }
  .h4-actions .btn { width: 100%; }
  .h4-index { margin-top: var(--s-7); }
  .pg-fig { max-width: 300px; margin-top: var(--s-6); }
  .pc + .pc { margin-top: -22px; }
  .pc-d > summary { grid-template-areas: "n tag tog" "t t t" "s s s"; }
  .pl-intro { display: block; }
  .pl-fig { display: none; }            /* telefone svarbiau pati sąsaja */
  .pl-tabs { padding: 16px 16px 0; }
  .pl-bar { padding: 12px 16px; }
  .pl-name { display: none; }
  .pl-flows { grid-template-columns: 1fr; }
  .pl-note { padding: 12px 16px 14px; }
  .tablist.cm-tablist { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tablist.cm-tablist [role="tab"] { white-space: normal; line-height: 1.2; padding-inline: 12px; }
  .proc-step.is-final .proc-ico { color: var(--ink); }
  .cm-panel { grid-template-columns: 1fr; }
  .cm-col { min-height: 0; gap: var(--s-5); }
  .core .core-msg { font-size: clamp(2.125rem, 0.8rem + 7vw, 3rem); }
  .pr-fig { border-radius: var(--r-lg); }
  .ab-fig { max-width: 340px; }
  .fn-title { font-size: clamp(2.375rem, 0.8rem + 8vw, 3.5rem); }
  .fn-actions { flex-direction: column; align-items: stretch; }
  .fn-actions .link-arrow { justify-content: center; }
  .fn-fig { max-width: 380px; }
  .tablist { border-radius: var(--r-lg); }
  .tablist [role="tab"] { border-radius: var(--r-md); }
}
@media (max-width: 359px) {
  .h4-title { font-size: 2.375rem; }
  .pl-badge { font-size: 0.75rem; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc, .pc:hover, .topic-d:hover { transform: none !important; }
  html.js-ready .pc-d[open] .pc-body, html.js-ready .pl-panel.is-anim, html.js-ready .cm-panel.is-anim, html.js-ready .mf-rec:not([hidden]) { animation: none; }
}
.proc--col .proc-step.is-final .proc-ico { background: var(--hi); color: var(--ink); }

/* =========================================================
   Kliento papildymas V1 (2026-11-05): temų bento, komandų skirtukai, 3 etapų schema
   ========================================================= */

/* ---------- Temos: 3×2 bento ---------- */
.bento { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.bt { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.bt-h { margin: 0; font: inherit; color: inherit; }
.bt-btn { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n pm" "t t";
  gap: var(--s-6) var(--s-4); padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) var(--s-4); border-radius: var(--r-lg); }
.bt-btn:focus-visible { outline: 3px solid var(--alt); outline-offset: 3px; }
.bt-n { grid-area: n; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.75rem, 1.9rem + 2.2vw, 4.25rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--alt-ink);
  font-variant-numeric: tabular-nums; transition: color var(--dur-med) var(--ease-out); }
.bt-t { grid-area: t; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.2; letter-spacing: -0.02em; }
.bt-pm { grid-area: pm; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; align-self: start;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.bt-pm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bt-pm .v { transition: transform var(--dur-med) var(--ease-out); transform-origin: center; }
.bt-p { padding: 0 clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px); }
.bt-p p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg-muted-on-paper); max-width: 44ch; }
/* su JS: uždaros kortelės slepia aprašymą (be JS — viskas matoma) */
.bento[data-js] .bt-p { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out); }
.bento[data-js] .bt-p > p { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
.bento[data-js] .bt.is-open .bt-p { grid-template-rows: 1fr; padding-bottom: clamp(22px, 2.4vw, 32px); }
.bento[data-js] .bt.is-open .bt-p > p { visibility: visible; transition-delay: 0s; }
/* aktyvi (atidaryta) kortelė — Ocean Blue */
.bt.is-open { background: var(--alt); color: var(--white); box-shadow: none; }
.bt.is-open .bt-n { color: var(--white); }
.bt.is-open .bt-p p { color: var(--paper); }
.bt.is-open .bt-pm { background: var(--hi); color: var(--ink); box-shadow: none; }
.bt.is-open .bt-pm .v { transform: scaleY(0); }
.bt.is-open .bt-btn:focus-visible { outline-color: var(--hi); }
@media (hover: hover) {
  .bt:not(.is-open):hover { box-shadow: inset 0 0 0 1.5px var(--alt); }
  .bt:not(.is-open):hover .bt-pm { box-shadow: inset 0 0 0 1.5px var(--alt); color: var(--alt-ink); }
}
.topics-closing { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Komandų skirtukai ---------- */
.tablist.tm-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--r-lg); background: var(--white); }
.tm-tablist [role="tab"] { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--r-md);
  font-weight: 500; color: var(--fg-muted-on-paper); background: transparent; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tm-tablist [role="tab"]:hover { color: var(--ink); background: var(--light); }
.tm-tablist [role="tab"][aria-selected="true"] { background: var(--hi); color: var(--ink); }
.tm-tablist [role="tab"]:focus-visible { outline: 3px solid var(--alt); outline-offset: 2px; }
.tm-ico { width: 20px; height: 20px; flex: none; }
.tm-tabs .tabpanels { margin-top: var(--s-4); }
.tm-tabs .tabpanel { padding: clamp(24px, 2.6vw, 36px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.tm-head { display: flex; align-items: center; gap: var(--s-4); }
.tm-mark { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--alt); color: var(--white); }
.tm-mark .icon { width: 24px; height: 24px; }
.tm-head .who { margin: 0; font-size: 1.0625rem; }
.tm-tabs .tp-desc { margin-top: var(--s-5); font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem); line-height: 1.5; color: var(--ink); }
.tm-tabs .tabpanel:not([hidden]) { animation: tm-in var(--dur-med) var(--ease-out); }
@keyframes tm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- „DI galimybių daug…“ + 3 etapų schema ---------- */
.proc-sec .pr-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; row-gap: var(--s-5); margin-bottom: 0; }
.proc-sec .pr-main { grid-column: 1 / span 5; grid-row: 1 / span 2; margin: 0; position: sticky; top: 112px; }
.proc-sec .pr-ig { grid-column: 6 / span 7; grid-row: 1; }
.proc-sec .pr-fig { grid-column: 6 / span 7; grid-row: 2; border-radius: var(--r-xl); }
.proc-sec .pr-main .h2 { max-width: 14ch; }
.pr-cta { margin-top: var(--s-6); }

.sg-canvas { border-radius: var(--r-xl); padding: clamp(20px, 3vw, 40px); background-color: var(--light);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.2px); background-size: 22px 22px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.sg { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
/* jungiamoji linija tarp etapų */
.sg:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 50px; bottom: calc(var(--s-4) * -1 - 6px); width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent); }
.sg:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: calc(var(--s-4) * -1 - 6px); width: 2px; border-radius: 2px;
  background: var(--hi); transform-origin: top; transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
.sg.is-done::after { transform: scaleY(1); }
.sg-node { position: relative; z-index: 1; width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.sg.is-done .sg-node, .sg.is-open .sg-node { background: var(--hi); box-shadow: none; }
.sg-card { border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  transition: box-shadow var(--dur-med) var(--ease-out); }
.sg-h { margin: 0; font: inherit; color: inherit; }
.sg-btn { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-radius: var(--r-lg); }
.sg-btn:focus-visible { outline: 3px solid var(--alt); outline-offset: 3px; }
.sg-txt { display: grid; gap: 4px; }
.sg-lbl { font-family: var(--font-display); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--alt-ink); }
.sg-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.sg-ico { width: 52px; height: 52px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--paper); color: var(--alt-ink);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.sg-ico .icon { width: 26px; height: 26px; }
.sg-p { padding: 0 var(--s-5) var(--s-5); }
.sg-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-items li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
.sg--final .sg-items li::before { content: ""; width: 14px; height: 8px; margin-top: -3px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.sg--final .sg-items li { background: var(--hi); }
/* aktyvus etapas — Ocean Blue akcentas */
.sg.is-open .sg-card { box-shadow: inset 0 0 0 2px var(--alt), 0 16px 36px -28px rgb(41 43 56 / 0.5); }
.sg.is-open .sg-ico { background: var(--alt); color: var(--white); }
@media (hover: hover) {
  .sg:not(.is-open) .sg-card:hover { box-shadow: inset 0 0 0 1.5px var(--alt); }
  .sg:not(.is-open) .sg-card:hover .sg-ico { color: var(--alt-ink); background: var(--alt-soft); }
}
.sg:not(.is-open) .sg-card:focus-within { box-shadow: inset 0 0 0 1.5px var(--alt); }
/* su JS: uždarų etapų detalės paslėptos */
.stages[data-js] .sg-p { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out); }
.stages[data-js] .sg-p > ul { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
.stages[data-js] .sg.is-open .sg-p { grid-template-rows: 1fr; padding-bottom: var(--s-5); }
.stages[data-js] .sg.is-open .sg-p > ul { visibility: visible; transition-delay: 0s; padding: 2px; margin: -2px; }

/* ---------- atsakas ---------- */
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-sec .pr-main, .proc-sec .pr-ig, .proc-sec .pr-fig { grid-column: 1 / -1; grid-row: auto; position: static; }
  .proc-sec .pr-main .h2 { max-width: 18ch; }
  .proc-sec .pr-fig { max-width: 520px; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; gap: var(--s-3); }
  .bt-btn { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t pm"; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); min-height: 72px; }
  .bt-n { font-size: 1.75rem; min-width: 2ch; }
  .bt-t { font-size: 1.0625rem; }
  .bt-pm { width: 40px; height: 40px; }
  .bt-p { padding-inline: var(--s-5); }
  .bento[data-js] .bt.is-open .bt-p { padding-bottom: var(--s-5); }
  .tablist.tm-tablist { gap: 4px; padding: 4px; }
  .tm-tablist [role="tab"] { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 6px; font-size: 0.875rem; }
  .sg-canvas { padding: var(--s-4); border-radius: var(--r-lg); }
  .sg { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); }
  .sg-node { width: 36px; height: 36px; margin-top: 10px; font-size: 0.875rem; }
  .sg:not(:last-child)::before, .sg:not(:last-child)::after { left: 17px; top: 46px; }
  .sg-btn { padding: var(--s-4); }
  .sg-ico { width: 44px; height: 44px; }
  .sg-ico .icon { width: 22px; height: 22px; }
  .sg-p { padding-inline: var(--s-4); }
  .proc-sec .pr-fig { max-width: 100%; }
}
@media (max-width: 399px) {
  .tm-tablist [role="tab"] { font-size: 0.8125rem; }
  .tm-ico { width: 18px; height: 18px; }
  .sg-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bento[data-js] .bt-p, .stages[data-js] .sg-p, .sg::after, .bt-pm .v { transition: none !important; }
  .tm-tabs .tabpanel:not([hidden]) { animation: none; }
}
@media (max-width: 359px) {
  .tablist.tm-tablist { grid-template-columns: 1fr; }
  .tm-tablist [role="tab"] { flex-direction: row; justify-content: flex-start; min-height: 48px; padding-inline: 14px; font-size: 0.875rem; }
}