/* ==========================================================================
   OptimalLab — home
   ========================================================================== */
:root{
  /* brand (binding) */
  --optimal-blue: #506B88;
  --optimal-teal: #10A8C0;
  --optimal-light-teal: #60C0C8;

  --bg: #FFFFFF;
  --bg-soft: #F6F8FA;
  --ink: #0F1B2A;
  --ink-2: #445366;
  --ink-3: #5B6B7D;
  --line: #E3E8EE;
  --line-strong: #CFD7E0;
  --teal-ink: #0A7A8C;
  --focus: #10A8C0;

  --f-display: "Geologica", "Golos Text", system-ui, sans-serif;
  --f-text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;
  --gutter: 32px;
  --header-h: 64px;
  --radius: 10px;
  --radius-lg: 14px;
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-frame: 0 1px 1px rgba(15,27,42,.05), 0 6px 12px -4px rgba(15,27,42,.08), 0 18px 24px -12px rgba(15,27,42,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--line-strong) var(--bg);
}
body{
  margin:0;
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(16,168,192,.22); color:var(--ink); }
h1,h2,h3{ font-family:var(--f-display); margin:0; color:var(--ink); text-wrap:balance; font-weight:600; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
svg{ display:block; }
img{ display:block; max-width:100%; height:auto; }
button,input,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }

.defs{ position:absolute; width:0; height:0; overflow:hidden; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ic{ width:18px; height:18px; flex:none; }

.wrap{ max-width:calc(var(--wrap) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:12px; }

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--radius);
  font-size:15px; font-weight:500; line-height:1; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn .ic{ width:16px; height:16px; transition: transform .3s var(--ease-out); }
.btn:hover .ic{ transform:translateX(3px); }
.btn-primary{ background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(15,27,42,.2), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover{ background:#1D3048; }
.btn-secondary{ background:var(--bg); color:var(--ink); border-color:var(--line-strong); box-shadow:0 1px 2px rgba(15,27,42,.05); }
.btn-secondary:hover{ border-color:#A9B5C3; background:var(--bg-soft); }

/* Header ----------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.header-row{ height:100%; display:flex; align-items:center; gap:32px; }

.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-mark{ width:26px; height:26px; }
.brand-name{ font-family:var(--f-display); font-weight:500; font-size:18px; letter-spacing:-.02em; color:var(--optimal-blue); }
.brand-name b{ font-weight:700; color:var(--ink); }

.main-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.main-nav a{
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  padding:8px 12px; border-radius:8px;
  transition:color .2s, background-color .2s;
}
.main-nav a:hover{ color:var(--ink); background:var(--bg-soft); }
.main-nav .nav-cta{ margin-left:8px; color:var(--ink); border:1px solid var(--line-strong); padding:7px 14px; }
.main-nav .nav-cta:hover{ border-color:#A9B5C3; background:var(--bg-soft); }

.nav-toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; border-radius:8px;
}
.nav-toggle span{ position:absolute; left:13px; right:13px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease-out); }
.nav-toggle span:first-child{ top:18px; }
.nav-toggle span:last-child{ top:25px; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------- */
.hero{
  position:relative;
  padding:72px 0 112px;
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(16,168,192,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 10%, rgba(80,107,136,.08), transparent 70%),
    var(--bg);
  overflow:hidden;
}
.hero-copy{ max-width:840px; }
.hero h1{
  font-size:clamp(2.5rem, 5.2vw, 4.25rem);
  line-height:1.04; letter-spacing:-.035em; font-weight:600;
}
.hero-lead{ margin-top:24px; max-width:60ch; font-size:18.5px; line-height:1.6; color:var(--ink-2); }
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

/* Showcase --------------------------------------------------------------- */
.showcase{ margin-top:64px; }
.tabs{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.7);
  padding:4px; gap:4px;
}
.tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:10px 12px; border:0; border-radius:10px; background:transparent; cursor:pointer;
  text-align:left; font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--ink-2);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.tab span{ font-family:var(--f-text); font-weight:400; font-size:12.5px; letter-spacing:0; color:var(--ink-3); }
.tab:hover{ background:var(--bg-soft); color:var(--ink); }
.tab[aria-selected="true"]{
  background:#fff; color:var(--ink);
  box-shadow: 0 1px 2px rgba(15,27,42,.08), 0 0 0 1px var(--line), inset 0 -2px 0 var(--optimal-teal);
}
.tab:focus-visible{ outline-offset:-2px; }

.panels{ margin-top:24px; }
.panel{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:48px; align-items:center; }
.panel[hidden]{ display:none; }
.panel:focus-visible{ outline-offset:8px; border-radius:var(--radius-lg); }
.panel.is-entering .panel-info, .panel.is-entering .browser{ animation: panelIn .5s var(--ease-out) both; }
.panel.is-entering .browser{ animation-delay:.05s; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }

.panel-info h3{ font-size:30px; letter-spacing:-.03em; line-height:1.1; }
.panel-lead{ margin-top:12px; color:var(--ink-2); font-size:16.5px; }
.points{ margin:24px 0 28px; display:grid; gap:10px; }
.points li{ display:flex; gap:10px; font-size:15px; color:var(--ink); line-height:1.5; }
.points .ic{ width:18px; height:18px; color:var(--teal-ink); margin-top:2px; }

.browser{
  display:block; position:relative;
  border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-frame);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
a.browser:hover{ transform:translateY(-3px); box-shadow: 0 1px 1px rgba(15,27,42,.05), 0 10px 16px -6px rgba(15,27,42,.12), 0 24px 24px -12px rgba(15,27,42,.18); }
.browser-bar{
  display:flex; align-items:center; gap:6px;
  height:36px; padding:0 14px; background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:#D5DCE4; }
.browser-url{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 auto; transform:translateX(-18px);
  height:22px; padding:0 12px; border-radius:6px; background:#fff; border:1px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
}
.browser-url .ic{ width:12px; height:12px; }
.browser img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; }

.browser-soon .soon{
  aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--bg-soft); box-shadow:inset 0 0 0 24px var(--bg-soft), inset 0 0 0 25px var(--line-strong);
}
.soon b{ font-family:var(--f-display); font-weight:600; font-size:clamp(28px, 4vw, 44px); letter-spacing:-.03em; color:var(--ink); }
.soon span{ font-size:15px; color:var(--ink-3); }

/* Sections --------------------------------------------------------------- */
.section{ padding:120px 0; }
.section-soft{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; align-items:end;
  margin-bottom:56px;
}
.section-head h2{ font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.08; letter-spacing:-.03em; }
.section-head p{ font-size:17.5px; color:var(--ink-2); max-width:52ch; }
.section-head-stack{ display:block; margin-bottom:0; }
.section-head-stack p{ margin-top:20px; }

/* Ledger (what each product leads) -------------------------------------- */
.ledger{ border-top:1px solid var(--ink); }
.ledger-row{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.3fr);
  gap:24px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-size:15.5px; color:var(--ink-2);
}
.ledger-headrow{ padding:14px 0; font-size:13px; font-weight:500; color:var(--ink-3); }
.ledger-dir{ padding:28px 0 10px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; color:var(--teal-ink); }
.ledger-name{
  display:inline-flex; align-items:center; gap:8px; justify-self:start;
  font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.015em; color:var(--ink);
}
a.ledger-name .ic{ width:15px; height:15px; color:var(--ink-3); transition: color .2s, transform .3s var(--ease-out); }
a.ledger-name:hover{ color:var(--teal-ink); }
a.ledger-name:hover .ic{ color:var(--teal-ink); transform:translate(2px,-2px); }
.ledger-name-soon{ flex-direction:column; align-items:flex-start; gap:0; }
.ledger-name-soon em{ font-family:var(--f-text); font-style:normal; font-weight:400; font-size:13px; letter-spacing:0; color:var(--ink-3); }
.ledger-row [role="cell"]:last-child{ color:var(--ink); font-weight:500; }

/* Plans ------------------------------------------------------------------ */
.plans-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 96px; align-items:start; }
.roadmap{ display:grid; gap:12px; }
.roadmap li{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px; display:grid; grid-template-columns:1fr auto; gap:4px 16px;
  box-shadow:0 1px 2px rgba(15,27,42,.04);
}
.roadmap h3{ font-size:19px; letter-spacing:-.02em; grid-column:1; grid-row:1; }
.roadmap p{ color:var(--ink-2); font-size:15.5px; grid-column:1; grid-row:2; }
.status{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  display:inline-flex; align-items:center; gap:8px;
  height:28px; padding:0 12px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  background:var(--bg-soft); border:1px dashed var(--line-strong);
}
.status::before{ content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-3); }

/* Contact ---------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 96px; align-items:start; }
.contact-copy h2{ font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.08; letter-spacing:-.03em; }
.contact-copy p{ margin-top:20px; font-size:17.5px; color:var(--ink-2); max-width:44ch; }
.contact-mail a{
  font-weight:500; color:var(--teal-ink);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:rgba(10,122,140,.4);
}
.contact-mail a:hover{ text-decoration-color:currentColor; }

.contact-form{
  display:grid; gap:20px; padding:28px;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff;
  box-shadow: 0 1px 2px rgba(15,27,42,.04), 0 10px 20px -12px rgba(15,27,42,.12);
}
.who{ border:0; padding:0; margin:0; min-width:0; }
.who legend{ padding:0; margin-bottom:8px; font-size:14px; font-weight:500; color:var(--ink-2); }
.segmented{
  display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  padding:3px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--line);
}
.segmented label{ position:relative; }
.segmented input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.segmented span{
  display:block; text-align:center; padding:7px 16px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--ink-3);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.segmented label:hover span{ color:var(--ink); }
.segmented input:checked + span{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(15,27,42,.1), 0 0 0 1px var(--line); }
.segmented input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:1px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-input{ display:grid; gap:6px; align-content:start; }
.field-input > span{ font-size:14px; font-weight:500; color:var(--ink-2); }
.field-input input, .field-input textarea{
  width:100%; padding:11px 13px; font-size:15.5px;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius);
  caret-color:var(--optimal-teal);
  transition: border-color .2s, box-shadow .2s;
}
.field-input textarea{ resize:vertical; min-height:108px; }
.field-input input::placeholder, .field-input textarea::placeholder{ color:#6E7D8E; }
.field-input input:hover, .field-input textarea:hover{ border-color:#A9B5C3; }
.field-input input:focus, .field-input textarea:focus{ outline:none; border-color:var(--optimal-teal); box-shadow:0 0 0 3px rgba(16,168,192,.16); }
.field-error{ display:none; font-style:normal; font-size:13.5px; color:#B42318; }
.field-input.is-invalid input{ border-color:#D92D20; }
.field-input.is-invalid input:focus{ box-shadow:0 0 0 3px rgba(217,45,32,.14); }
.field-input.is-invalid .field-error{ display:block; }

.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.form-note{ font-size:13.5px; color:var(--ink-3); flex:1 1 220px; }
.form-note.is-done{ color:var(--teal-ink); }

/* Footer ----------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding:64px 0 32px; background:var(--bg); }
.footer-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:40px; }
.footer-brand p{ margin-top:14px; font-size:14.5px; color:var(--ink-3); }
.footer-col{ display:grid; gap:10px; align-content:start; font-size:14.5px; }
.footer-col h2{ font-family:var(--f-text); font-size:13px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.footer-col a{ color:var(--ink-3); transition:color .2s; justify-self:start; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px){
  .tabs{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; scroll-snap-align:start; }
  .panel{ grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:32px; }
}

@media (max-width: 900px){
  :root{ --gutter:20px; }
  .hero{ padding:48px 0 80px; }
  .showcase{ margin-top:48px; }
  .panel{ grid-template-columns:1fr; gap:28px; }
  .panel .browser{ order:-1; }
  .section{ padding:88px 0; }
  .section-head, .plans-grid, .contact-grid{ grid-template-columns:1fr; }
  .section-head{ margin-bottom:40px; }

  .ledger-headrow{ display:none; }
  .ledger-row{ grid-template-columns:1fr 1fr; gap:10px 20px; padding:20px 0; align-items:start; }
  .ledger-row .ledger-name{ grid-column:1 / -1; }
  .ledger-row [data-label]{ display:grid; gap:2px; font-size:15px; }
  .ledger-row [data-label]::before{ content:attr(data-label); font-size:12.5px; font-weight:500; color:var(--ink-3); }
  .ledger-row [data-label="Что ведёт"]{ grid-column:1 / -1; }
}

@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; left:0; right:0; top:var(--header-h);
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px 20px 20px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px -16px rgba(15,27,42,.2);
    visibility:hidden; opacity:0; transform:translateY(-6px);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
  }
  .main-nav.is-open{ visibility:visible; opacity:1; transform:none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  .main-nav a{ padding:14px 4px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0; }
  .main-nav .nav-cta{ margin:12px 0 0; border:1px solid var(--line-strong); border-radius:var(--radius); text-align:center; }

  .hero h1{ font-size:clamp(2.1rem, 9.4vw, 2.75rem); }
  .hero-lead{ font-size:16.5px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .panel-info h3{ font-size:26px; }
  .panel-info .btn{ width:100%; white-space:normal; height:auto; min-height:44px; padding:12px 18px; text-align:center; }
  .browser-url{ transform:none; }
  .browser-bar{ padding:0 10px; }
  .roadmap li{ grid-template-columns:1fr; }
  .status{ grid-column:1; grid-row:auto; justify-self:start; margin-bottom:6px; order:-1; }
  .roadmap h3, .roadmap p{ grid-row:auto; }
  .contact-form{ padding:20px; }
  .form-row{ grid-template-columns:1fr; }
  .segmented{ display:grid; width:100%; }
  .segmented span{ padding:8px 6px; }
  .form-foot .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
}

/* Products joining the group: names only, until their descriptions are confirmed */
.joining{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-2); font-size:15px; }
.joining b{ font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.01em; }
.joining-note{ color:var(--ink-3); }