/*
 * Enigmatix — кастомные стили темы.
 * Порт design-tokens и компонентных стилей из экспорта OpenDesign (enigmatix-landing.html).
 * Tailwind-утилиты — в css/tailwind.css (сборка в tailwind/).
 */
:root{
  /* hex-fallback (аудит 3K6-27 WARN 7): в браузерах <Chrome 111 нет oklch().
     «Строка выше» не работает: кастом-переменные не валидируются при парсинге,
     var() разворачивает последнее значение, и строки с оклch-токенами отбрасываются
     в точке использования — поэтому oklch-значения перенесены в @supports. */
  --color-bg:#090f14;
  --color-surface:#11181e;
  --color-raised:#1c242b;
  --color-border:#29333b;
  --color-border-strong:#4d5d6b;
  --color-text:#f0f4f7;
  --color-muted:#98a3ad;
  --color-accent:#52ccea;
  --color-accent-hover:#86ddf4;
  --color-accent-ink:#00101f;
  --color-success:#47c58c;
  --color-danger:#f66d67;
  --color-shadow:#000307;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}
@supports (color: oklch(0.5 0 0)){
  :root{
    --color-bg: oklch(0.165 0.014 245);
    --color-surface: oklch(0.205 0.016 245);
    --color-raised: oklch(0.255 0.018 245);
    --color-border: oklch(0.315 0.02 245);
    --color-border-strong: oklch(0.47 0.03 245);
    --color-text: oklch(0.965 0.006 245);
    --color-muted: oklch(0.71 0.02 245);
    --color-accent: oklch(0.79 0.115 217);
    --color-accent-hover: oklch(0.85 0.09 217);
    --color-accent-ink: oklch(0.16 0.05 235);
    --color-success: oklch(0.74 0.14 160);
    --color-danger: oklch(0.70 0.17 25);
    --color-shadow: oklch(0.09 0.02 245);
  }
}
html{scroll-behavior:smooth;color-scheme:dark}
body{line-height:1.6;font-family:var(--font-body)}
section{scroll-margin-top:96px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
.wrap{margin-inline:auto;max-width:76rem;padding-inline:var(--space-4)}
@media(min-width:640px){.wrap{padding-inline:var(--space-6)}}
@media(min-width:1024px){.wrap{padding-inline:var(--space-8)}}
/* Внутренние страницы: регион highlighted — заголовок страницы (h1) и системные сообщения. */
#block-enigmatix-page-title{max-width:76rem;margin-inline:auto;padding:var(--space-6) var(--space-4) 0}
@media(min-width:640px){#block-enigmatix-page-title{padding-inline:var(--space-6)}}
@media(min-width:1024px){#block-enigmatix-page-title{padding-inline:var(--space-8)}}
#block-enigmatix-page-title h1{margin:0;font-family:var(--font-display);font-size:1.75rem;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--color-text)}
[data-drupal-messages]{max-width:76rem;margin-inline:auto;padding-inline:var(--space-4)}
@media(min-width:640px){[data-drupal-messages]{padding-inline:var(--space-6)}}
@media(min-width:1024px){[data-drupal-messages]{padding-inline:var(--space-8)}}
[data-drupal-messages] > [role="contentinfo"]{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border-strong);border-left:3px solid var(--color-success);border-radius:var(--radius-md);color:var(--color-text);font-size:.9375rem}
[data-drupal-messages] > [role="contentinfo"]:has([role="alert"]){border-left-color:var(--color-danger)}
[data-drupal-messages] a{color:var(--color-accent)}
[data-drupal-messages] a:hover{color:var(--color-accent-hover)}
.skip-link{position:fixed;top:-100%;left:var(--space-4);z-index:100;padding:var(--space-3) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text);transition:top .2s ease}
.skip-link:focus{top:var(--space-4)}
.site-header{background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.site-header.is-scrolled{border-bottom-color:var(--color-border)}
@supports not (backdrop-filter: blur(1px)){.site-header{background:var(--color-bg)}}
.nav-link{position:relative;color:var(--color-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:.9rem;transition:color .15s ease}
.nav-link:hover{color:var(--color-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:.625rem 1.375rem;font-weight:600;font-size:.9375rem;line-height:1.2;border-radius:var(--radius-md);border:1px solid transparent;text-align:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-solid:hover{background:var(--color-accent-hover)}
.btn-ghost{border-color:var(--color-border-strong);color:var(--color-text);background:transparent}
.btn-ghost:hover{background:var(--color-raised);border-color:var(--color-muted)}
.btn-block{width:100%}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted)}
.eyebrow .slash{color:var(--color-accent)}
.chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.75rem;color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.375rem .75rem;background:color-mix(in srgb,var(--color-surface) 70%,transparent);white-space:nowrap}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.card-hover{transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.card-hover:hover{border-color:var(--color-border-strong);background:color-mix(in srgb,var(--color-surface) 55%,var(--color-raised));transform:translateY(-2px)}
.tick-item{display:flex;gap:.625rem;color:var(--color-muted);font-size:.9rem;line-height:1.45}
.tick{width:1rem;height:1rem;flex:none;margin-top:.2rem}
.tick path{stroke:var(--color-accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.field{width:100%;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:.75rem var(--space-4);color:var(--color-text);font-size:.95rem;transition:border-color .15s ease,box-shadow .15s ease}
.field::placeholder{color:color-mix(in srgb,var(--color-muted) 75%,transparent)}
.field:hover{border-color:var(--color-muted)}
.field:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent)}
.field[aria-invalid="true"]{border-color:var(--color-danger)}
select.field{appearance:none;-webkit-appearance:none;padding-right:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%2398a3ad' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:14px 14px}
select.field option{background:var(--color-surface);color:var(--color-text)}
.field-error{display:none;margin-top:var(--space-2);font-size:.8125rem;color:var(--color-danger)}
.field-error.is-active{display:block}
.checkbox{accent-color:var(--color-accent);width:1.125rem;height:1.125rem;flex:none}
.link{color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
.link:hover{color:var(--color-accent);text-decoration-color:var(--color-accent)}
.dotgrid{position:relative}
.dotgrid::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--color-border) 60%,transparent) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.07s}
.js .reveal[data-delay="2"]{transition-delay:.14s}
.panel-frame{position:relative}
.panel-frame::after{content:"";position:absolute;inset:0;transform:translate(16px,16px);border:1px solid var(--color-border);border-radius:var(--radius-xl);z-index:0}
.panel{position:relative;z-index:1;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 60px color-mix(in srgb,var(--color-shadow) 45%,transparent)}
.progress{height:.375rem;border-radius:var(--radius-full);background:var(--color-raised);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--color-accent);border-radius:inherit}
.bar{background:var(--color-accent);border-radius:2px 2px 0 0;width:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{transition:none;opacity:1;transform:none}
  .card-hover,.btn{transition:none}
}

/* --- Классы вместо инлайн-стилей экспорта (Drupal: без style="") --- */
.panel-header{background:color-mix(in srgb,var(--color-raised) 55%,transparent)}
.progress-fill--86{width:86%}
.bar-h-36{height:36%}
.bar-h-42{height:42%}
.bar-h-56{height:56%}
.bar-h-58{height:58%}
.bar-h-64{height:64%}
.bar-h-72{height:72%}
.bar-h-84{height:84%}

.stroke-success{stroke:var(--color-success)}