/* ОГЛАССКО v7 — Editorial-bold design system (с нуля, отдельно от og2.css).
   Редакционно-журнальный направление: крупный display Inter, Playfair Italic
   акцентные слова, сбалансированные cream/dark секции, асимметричный bento,
   графические цифры, тонкий grain. Палитра-константа. */
/* ─── Inter (self-hosted, локально, без зависимости от Google Fonts) ─── */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/inter-cyrillic-800-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/inter-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/inter-cyrillic-900-normal.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/inter-latin-900-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
  --ink:#0B0F11; --ink2:#11171A; --brand:#336D76; --brandd:#1F4347;
  --soft:#5B8E96; --mint:#6EDCD0; --cream:#F5F3ED; --creamd:#EDE9DE;
  --creamw:#FBF9F3; --coral:#FF6B4A;
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; min-width:0 }
html{ scroll-behavior:smooth }
body{ font-family:Inter,"Helvetica Neue",Arial,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden }
img,svg,video{ max-width:100%; height:auto }
::selection{ background:rgba(51,109,118,.2) }
.wrap{ max-width:1280px; margin:0 auto; padding:0 24px }
.wrap-wide{ max-width:1440px; margin:0 auto; padding:0 24px }
/* TYPE */
.mono{ font-family:ui-monospace,'JetBrains Mono',monospace; letter-spacing:.02em }
.display{ font-weight:800; line-height:.96; letter-spacing:-.04em }
.display-xl{ font-size:clamp(2.6rem, 1.6rem + 4.5vw, 5.8rem); font-weight:800; line-height:.96; letter-spacing:-.04em; word-break:break-word }
.display-lg{ font-size:clamp(2rem, 1.4rem + 3vw, 4rem); font-weight:800; line-height:.98; letter-spacing:-.035em; word-break:break-word }
.display-md{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem); font-weight:800; line-height:1.02; letter-spacing:-.03em; word-break:break-word }
/* НАКЛОН = настоящий Inter italic (НЕ skewX): transform+background-clip:text ломает градиент; + отступ под наклон, чтобы не резался хвост последней буквы. */
.ital{ font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-style:italic; font-weight:500; letter-spacing:-.02em; color:var(--brand); display:inline-block; line-height:inherit; padding:.02em .18em .04em .02em; margin:0 -.1em }
.ital-grad{ color:var(--brand); background:linear-gradient(100deg,#6EDCD0 0%,#5B8E96 55%,#336D76 100%); -webkit-background-clip:text; background-clip:text; overflow:visible }
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .ital-grad{ -webkit-text-fill-color:transparent; color:transparent } }
.ital-dark{ color:var(--ink) }
.label{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--brand) }
.lead{ font-size:1.1rem; line-height:1.55; color:rgba(11,15,17,.62); max-width:60ch; font-weight:400 }
.dark .lead{ color:rgba(245,243,237,.55) }
.num-graphic{ font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-weight:900; font-size:clamp(4rem, 2.5rem + 4.5vw, 9rem); line-height:.9; letter-spacing:-.06em; display:inline-block; transform:skewX(-8deg); transform-origin:50% 50% }
/* BUTTONS */
.btn{ display:inline-flex; align-items:center; gap:.5rem; height:56px; padding:0 2rem; border-radius:9999px; font-weight:600; font-size:15px; transition:.25s; white-space:nowrap }
.btn-primary{ background:var(--coral); color:#fff }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px rgba(255,107,74,.5) }
.btn-dark{ background:var(--ink); color:var(--cream) }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px rgba(11,15,17,.45) }
.btn-line{ border:1.5px solid rgba(15,20,22,.18); color:var(--ink) }
.btn-line:hover{ border-color:var(--ink) }
.dark .btn-line, .deep .btn-line{ border-color:rgba(245,243,237,.2); color:var(--cream) }
.dark .btn-line:hover, .deep .btn-line:hover{ border-color:var(--cream) }
/* SURFACES */
.dark{ background:var(--ink); color:var(--cream) }
.deep{ background:var(--brandd); color:var(--cream) }
.grain{ position:relative }
.grain::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}
.dark.grain::before, .deep.grain::before{ mix-blend-mode:overlay; opacity:.06 }
.card-l{ background:#fff; border:1px solid rgba(11,15,17,.06); border-radius:14px; padding:24px }
.card-d{ background:var(--ink); color:var(--cream); border-radius:14px; padding:24px }
/* Variants — bento-friendly, не ломают grid */
.card-l.bento, .card-d.bento{ border-radius:24px }
/* TAGS */
.tagrow{ display:flex; flex-wrap:wrap; gap:.6rem }
.tag{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem; border-radius:9999px; background:#fff; border:1px solid rgba(15,20,22,.08); font-size:13px; font-weight:500; color:var(--ink) }
.dark .tag{ background:rgba(245,243,237,.04); border-color:rgba(245,243,237,.12); color:var(--cream) }
.tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); display:inline-block }
/* HEADER */
header{ position:fixed; top:0; left:0; right:0; z-index:50; transition:.3s }
header.on-light{ background:rgba(245,243,237,.78); backdrop-filter:blur(14px); border-bottom:1px solid rgba(15,20,22,.06) }
header.on-dark{ background:rgba(11,15,17,.78); backdrop-filter:blur(14px); border-bottom:1px solid rgba(245,243,237,.06); color:var(--cream) }
.h-bar{ display:flex; align-items:center; justify-content:space-between; height:78px }
.h-nav a{ font-size:14px; font-weight:500; color:rgba(15,20,22,.6); transition:.2s }
.h-nav a:hover{ color:var(--ink) }
header.on-dark .h-nav a{ color:rgba(245,243,237,.6) }
header.on-dark .h-nav a:hover{ color:#fff }
/* PRODUCT MOCK */
.vid{ position:relative; aspect-ratio:16/10; background:#070b0d; border-radius:16px; overflow:hidden; border:1px solid rgba(245,243,237,.08) }
.vid::before{ content:''; position:absolute; inset:0; opacity:.05; background-image:radial-gradient(rgba(110,220,208,.9) 1px,transparent 1px); background-size:22px 22px }
.bbox{ position:absolute; border:1.5px solid; border-radius:4px }
.bbox > span{ position:absolute; top:-22px; left:-1px; font-family:ui-monospace,monospace; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; white-space:nowrap }
/* CORNER MARKER */
.corner{ position:relative }
.corner::after{ content:''; position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-top:2px solid var(--mint); border-right:2px solid var(--mint); pointer-events:none }
/* Legacy inset top-left corner (для существующей вёрстки, если нужна) */
.corner-tl{ position:relative }
.corner-tl::after{ content:''; position:absolute; top:18px; left:18px; width:24px; height:24px; border-left:1.5px solid var(--mint); border-top:1.5px solid var(--mint); border-radius:2px 0 0 0; pointer-events:none }
/* REVEAL — контент виден по умолчанию */
.r.in{ animation:fadeup .8s cubic-bezier(.16,1,.3,1) both }
@keyframes fadeup{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce){ .r.in{ animation:none } }
/* SECTION offset */
section{ scroll-margin-top:90px }
/* FOOTER */
footer a{ color:rgba(245,243,237,.55) } footer a:hover{ color:#fff }
input,textarea,select{ font-size:16px }

/* ─── RESPONSIVE — mobile/tablet overrides ─── */
@media(max-width:1024px){
  section{ scroll-margin-top:80px }
}
@media(max-width:640px){
  .wrap, .wrap-wide{ padding:0 18px }
  .h-bar{ height:64px }
  section{ scroll-margin-top:72px }
  .btn{ height:50px; padding:0 1.4rem; font-size:14px }
  .label{ font-size:10px; letter-spacing:.18em }
  .tag{ padding:.42rem .85rem; font-size:12.5px }
  .corner::after{ width:10px; height:10px }
  .corner-tl::after{ top:14px; left:14px; width:20px; height:20px }
  .card-l, .card-d{ border-radius:20px }
  .lead{ font-size:1.02rem; line-height:1.55 }
  h1,h2,h3{ overflow-wrap:break-word }
}
@media(max-width:400px){
  .wrap, .wrap-wide{ padding:0 14px }
  .btn{ height:48px; padding:0 1.2rem; font-size:13.5px }
  .tag{ padding:.4rem .75rem; font-size:12px }
}

/* ─── A11Y: focus-visible outline ─── */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark a:focus-visible, .dark button:focus-visible, .dark .btn:focus-visible {
  outline-color: var(--mint);
}

/* ─── Active nav item ─── */
.h-nav a[aria-current="page"], #mnav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
}
header.on-dark .h-nav a[aria-current="page"] { color: #fff }

/* ─── Mobile drawer slide-in ─── */
@media (max-width: 1023px) {
  #mnav {
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    background: rgba(245,243,237,.98); backdrop-filter: blur(20px);
    transform: translateY(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 49; overflow-y: auto; padding: 24px;
  }
  #mnav:not(.hidden) { transform: translateY(0) }
  header.on-dark + #mnav, header.on-dark #mnav { background: rgba(11,15,17,.98) }
  header.on-dark + #mnav a, header.on-dark #mnav a { color: var(--cream) }
  header.on-dark + #mnav .card-l, header.on-dark #mnav .card-l {
    background: rgba(245,243,237,.04);
    border-color: rgba(245,243,237,.12);
  }
  header.on-dark + #mnav a[style*="border-top"], header.on-dark #mnav a[style*="border-top"] {
    border-top-color: rgba(245,243,237,.1) !important;
  }
  header.on-dark #burger {
    border-color: rgba(245,243,237,.25) !important;
    color: var(--cream);
  }
  header.on-dark #burger svg { stroke: var(--cream) }
  body:has(#mnav:not(.hidden)) { overflow: hidden }
}

/* ─── Sticky CTA ─── */
#sticky-cta { will-change: opacity }

/* ─── FIX: недостающие в tw.css утилиты сетки (col-span-9/10/11, col-start-*) ───
   Без них editorial-геро (grid lg:grid-cols-12) схлопывались в вертикальные буквы.
   og3.css грузится ПОСЛЕ tw.css, поэтому добиваем пробелы здесь. ─── */
.col-span-9{grid-column:span 9/span 9}
.col-span-10{grid-column:span 10/span 10}
.col-span-11{grid-column:span 11/span 11}
.col-start-9{grid-column-start:9}
.col-start-10{grid-column-start:10}
.col-start-11{grid-column-start:11}
@media(min-width:768px){
  .md\:col-span-9{grid-column:span 9/span 9}
  .md\:col-span-10{grid-column:span 10/span 10}
  .md\:col-span-11{grid-column:span 11/span 11}
}
@media(min-width:1024px){
  .lg\:col-span-9{grid-column:span 9/span 9}
  .lg\:col-span-10{grid-column:span 10/span 10}
  .lg\:col-span-11{grid-column:span 11/span 11}
  .lg\:col-start-6{grid-column-start:6}
  .lg\:col-start-7{grid-column-start:7}
  .lg\:col-start-8{grid-column-start:8}
  .lg\:col-start-9{grid-column-start:9}
  .lg\:col-start-10{grid-column-start:10}
  .lg\:col-start-11{grid-column-start:11}
}

/* ─── Hero giant numbers utility ─── */
.num-graphic-hero {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-style: normal;
  font-size: clamp(5rem, 2rem + 12vw, 18rem);
  line-height: .9; letter-spacing: -.06em;
  display: inline-block; transform: skewX(-8deg);
}

/* ─── Touch targets 44px min for mobile menu ─── */
@media (max-width: 1023px) {
  #mnav a { min-height: 44px; display: flex; align-items: center }
}


/* ─── Footer-grid mobile-fix: на телефоне Платформа+Компания рядом, лого/контакты full-width ─── */
@media (max-width: 767px){
  .oglassko-footer-grid{
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 1.5rem !important;
  }
  .oglassko-footer-grid > *:nth-child(1),
  .oglassko-footer-grid > *:nth-child(4){
    grid-column: span 2 / span 2;
  }
}