/* ---- tokens/colors.css ---- */
/* ==========================================================================
   MLinside — Color tokens
   Sourced from the two live Tilda pages (mlinside.ru/, /system-design):
   near-black / deep-navy dark theme with a single lime-green accent.
   ========================================================================== */
:root {
  /* ---- Base neutrals (dark theme is the ONLY theme in the source) ---- */
  --black-1: #0d0d0d;   /* primary page background (Base ML page) */
  --black-2: #151719;   /* alt panel background */
  --navy-1:  #03002f;   /* hero / video-section background (System Design page) */
  --navy-2:  #0e121e;   /* tooltip / menu popover background */
  --navy-3:  #0f0d3b;   /* secondary hero panel */
  --ink-1:   #131313;   /* card background, System Design page */
  --ink-2:   #1a1a1a;   /* alt dark surface */
  --ink-3:   #202020;

  --white:      #ffffff;
  --gray-1:     #cfcfcf;  /* secondary/muted text on dark */
  --gray-2:     #9a9a9a;
  --gray-3:     #c5c5c5;

  /* ---- Brand accent: lime green ---- */
  --lime-1: #ceff8b;   /* primary accent — CTAs, active nav pill, links */
  --lime-2: #cdfd8b;   /* near-duplicate, used interchangeably in source */
  --lime-3: #c0ff6a;   /* icon fills */
  --lime-4: #b0ff45;   /* saturated variant, small accents */
  --lime-hover-solid: #9cca5d;  /* hover bg for solid lime buttons (darker) */
  --lime-hover-outline: #91b75d; /* hover text/border for outline lime buttons */

  /* ---- Secondary structural accents ---- */
  --violet-border: #2d2a63; /* 1px border on glass cards over navy hero */

  /* ---- Brand accent 2: magenta (promoted to a standing secondary accent) ----
     Formerly a rare decorative tag; now the fixed counterpart to lime. Used to
     mark the "solution / engineering / Как?" side of compare-contrast content,
     while lime marks the "problem / product / Зачем?" side (see --accent-problem
     / --accent-solution below and the Slides subsystem). */
  --magenta-1: #d26def;   /* primary magenta accent — solution-space labels, thin borders, icon fills */
  --magenta-2: #c85fe6;   /* deeper magenta — hover / pressed */
  --magenta-accent: var(--magenta-1); /* legacy alias, kept for existing one-off usages */

  /* ---- Section-glow blue (background-only accent) ----
     Never used for text or solid fills — only as a soft background glow behind
     title / section-divider slides and hero panels (see --glow-blue-section). */
  --blue-glow: #2850be;

  /* ---- Export-safe opaque equivalents of the glass surfaces ----
     PPTX export flattens rgba() fills to SOLID WHITE. These are the same
     tints precomputed over --black-1 (#0d0d0d). Use these — not rgba() —
     for any surface or border that may be exported. See readme.md →
     "Export-safe rules (PPTX)". */
  --surface-glass-1: #151515;  /* = rgba(255,255,255,0.03) over #0d0d0d */
  --surface-glass-2: #171717;  /* = rgba(255,255,255,0.04) */
  --surface-glass-3: #191919;  /* = rgba(255,255,255,0.05) — default glass card */
  --hairline-1:      #2b2b2b;  /* = rgba(255,255,255,0.09) */
  --hairline-2:      #333333;  /* = rgba(255,255,255,0.12) */
  --hairline-3:      #363636;  /* = rgba(255,255,255,0.14) */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--black-1);
  --bg-page-alt: var(--navy-1);
  --bg-surface: var(--ink-1);
  --bg-surface-glass: var(--surface-glass-3);
  --border-glass: var(--violet-border);
  --border-hairline: var(--hairline-1);

  --text-primary: var(--white);
  --text-secondary: var(--gray-1);
  --text-on-accent: #000000;

  --accent-primary: var(--lime-1);
  --accent-primary-hover: var(--lime-hover-solid);
  --accent-outline-hover: var(--lime-hover-outline);

  /* Secondary accent (magenta) */
  --accent-secondary: var(--magenta-1);
  --accent-secondary-hover: var(--magenta-2);

  /* Problem / Solution semantic pairing — a two-accent code for compare-contrast
     content: lime = problem space (product, «Зачем?/Что?»),
     magenta = solution space (engineering, «Как?»). */
  --accent-problem: var(--lime-1);
  --accent-solution: var(--magenta-1);

  --link-color: var(--lime-1);
  --link-color-hover: var(--lime-hover-outline);
}

/* ---- tokens/typography.css ---- */
/* ==========================================================================
   MLinside — Typography
   Single font: Inter (variable, weights 100–900 + italic) — matches the
     site's `--t-text-font` (Inter 400/500 body & nav) and is also used for
     all headlines and all slide type. No separate display face.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.ttf') format('truetype-variations');
}


:root {
  /* Font families — Inter only; --font-display is an alias kept for
     backwards compatibility with existing components. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);

  /* Type scale (px, desktop) */
  --text-display-xl: 800 96px/0.95 var(--font-display);   /* hero, e.g. big gradient headline */
  --text-display-lg: 700 48px/1.1 var(--font-display);    /* section H1, uppercase */
  --text-display-md: 700 34px/1.15 var(--font-display);   /* card headline, uppercase */
  --text-display-sm: 600 20px/1.2 var(--font-display);    /* small uppercase kicker headline */

  --text-body-lg: 400 17px/1.5 var(--font-body);
  --text-body-md: 400 15px/1.5 var(--font-body);
  --text-body-sm: 400 13px/1.4 var(--font-body);
  --text-caption: 400 11px/1 var(--font-body);

  --text-nav: 500 18px/1.2 var(--font-body);
  --text-button: 500 16px/1 var(--font-body);

  /* ---- Slide type scale — THE STANDARD for 1920×1080 decks ----
     One token per text role. NEVER hand-pick a slide font-size: every piece of
     slide text uses one of these verbatim. If a headline does not fit, step
     DOWN exactly one rung (title→h1→h2→h3) — never invent an in-between value,
     and never scale up. Distilled from the ML System Design lecture deck.
     See readme.md → "Slide type standard". */
  --text-slide-numeral: 700 320px/1 var(--font-display);   /* ghost decorative section number */
  --text-slide-title:   700 96px/1.0 var(--font-display);  /* title-slide headline ONLY */
  --text-slide-h1:      700 72px/1.05 var(--font-display); /* section-divider headline */
  --text-slide-h2:      700 44px/1.1 var(--font-display);  /* content-slide title, column title */
  --text-slide-h3:      700 32px/1.15 var(--font-display); /* card / diagram label inside a slide */
  --text-slide-lead:    400 34px/1.35 var(--font-body);    /* deck / subtitle under a title */
  --text-slide-body:    400 30px/1.4 var(--font-body);     /* body copy */
  --text-slide-kicker:  500 24px/1.2 var(--font-body);     /* eyebrow above a headline (uppercase) */
  --text-slide-caption: 500 22px/1 var(--font-body);       /* role label / caption */

  /* Letter spacing */
  --tracking-display: -0.02em;   /* tight, matches source's -3px on 48px headlines */
  --tracking-caps: 0.04em;       /* small uppercase labels/kickers */
  --tracking-normal: 0;
}

/* ---- tokens/spacing.css ---- */
/* ==========================================================================
   MLinside — Spacing, radius & layout tokens
   Values distilled from the source pages' inline artboard positioning
   (1200px desktop container, 15-70px section gutters, 10-30px component gaps).
   ========================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 70px;   /* observed section side gutter on 1200px container */
  --space-11: 122px;  /* observed large section vertical padding */

  --container-max: 1200px;
  --container-pad: 70px;

  /* ---- Corner radii ---- */
  --radius-none: 0px;
  --radius-sm: 10px;   /* header bar, small chips */
  --radius-md: 15px;   /* glass benefit/pricing cards */
  --radius-lg: 24px;
  --radius-pill: 999px; /* buttons, stream badge, nav-active pill */

  /* ---- Border widths ---- */
  --border-width-hairline: 1px;
}

/* ---- tokens/effects.css ---- */
/* ==========================================================================
   MLinside — Effects: blur, glow, gradients, transitions
   ========================================================================== */
:root {
  /* ---- Glassmorphism (benefit cards, pricing cards over navy hero) ----
     SCREEN-ONLY. --glass-blur/--glass-bg do not survive PPTX export (rgba
     flattens to white, backdrop-filter is dropped). For anything exportable
     use the opaque --surface-glass-* tokens and no backdrop-filter. */
  --glass-blur: blur(14px); /* @kind other */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: 1px solid var(--violet-border);

  /* ---- Decorative accent glow (blurred lime circle behind numerals/icons) ----
     SCREEN-ONLY: these gradients + --glow-blur render as flat solid circles in
     PPTX export. For slides / anything exported, use the PNG glows in
     assets/glows/ (glow-{lime|magenta}-{tl|tr|bl|br|center}.png) instead. */
  --glow-lime: radial-gradient(circle, rgba(192, 255, 106, 0.6) 0%, rgba(206, 255, 139, 0.3) 100%); /* @kind other */
  /* Magenta counterpart to --glow-lime (solution-space numerals/icons/personas) */
  --glow-magenta: radial-gradient(circle, rgba(210, 109, 239, 0.6) 0%, rgba(210, 109, 239, 0.28) 100%); /* @kind other */
  --glow-blur: blur(25px); /* @kind other */

  /* ---- Blue section glow (background wash behind title / section-divider slides) ----
     Soft radial wash ~28% at the anchor fading to 0; layered over --black-1,
     kept out from under body copy. Color = --blue-glow. */
  --glow-blue-section: radial-gradient(60% 55% at 50% 0%, rgba(40, 80, 190, 0.28) 0%, rgba(40, 80, 190, 0) 62%); /* @kind other */

  /* ---- Gradient text (headline treatment used throughout both pages) ---- */
  --gradient-text-hero: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  --gradient-text-muted: linear-gradient(100deg, rgba(237,237,237,0.85) 0%, rgba(96,96,96,1) 100%);
  --gradient-text-card: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(203,203,203,1) 100%);

  /* ---- Overlay fades (used to fade video/hero art into background color) ---- */
  --fade-to-page: linear-gradient(0deg, var(--black-1) 0%, rgba(13,13,13,0) 100%);
  --fade-to-navy: linear-gradient(0deg, var(--navy-1) 0%, rgba(3,0,47,0) 100%);

  /* ---- Beveled accent shape (alternative to the pill) ----
     Rectangle with two opposite corners cut at 45° — top-left & bottom-right. */
  --bevel-cut: 16px; /* @kind other */
  --shape-bevel: polygon(var(--bevel-cut) 0, 100% 0, 100% calc(100% - var(--bevel-cut)), calc(100% - var(--bevel-cut)) 100%, 0 100%, 0 var(--bevel-cut)); /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: ease-in-out; /* @kind other */
  --duration-fast: 0.15s; /* @kind other */
  --duration-base: 0.2s; /* @kind other */
  --duration-slow: 0.3s; /* @kind other */
  --transition-interactive: background-color var(--duration-base) var(--ease-standard),
                            color var(--duration-base) var(--ease-standard),
                            border-color var(--duration-base) var(--ease-standard),
                            box-shadow var(--duration-base) var(--ease-standard);
}

/* ---- styles.css ---- */
/* MLinside Design System — global stylesheet entry point.
   Consumers should link only this file; it pulls in the full token set. */

/* ---- page (from the design component) ---- */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #0d0d0d; color: #ffffff; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
  a { color: var(--lime-1); text-decoration: none; }
  a:hover { color: var(--lime-hover-outline); }
  ::placeholder { color: rgba(255,255,255,0.35); }
  [data-on-lime]::placeholder { color: rgba(0,0,0,0.45); }
  @keyframes bgDrift { from { transform: scale(1.09) translate3d(1.4%, 0.8%, 0); } to { transform: scale(1.02) translate3d(-1.4%, -0.8%, 0); } }
  @media (prefers-reduced-motion: reduce) { video[data-bg], img[data-bg] { animation: none !important; } }
  @keyframes dashIn { to { stroke-dashoffset: 0; } }
  @keyframes sealStamp { from { opacity: 0; transform: scale(1.8); } 70% { opacity: 1; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
  @keyframes strikeIn { 0% { stroke-dashoffset: 20; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.25; } }
  @keyframes parry { 0% { opacity: 0; transform: translateX(0); } 40% { opacity: 1; transform: translateX(-2px); } 100% { opacity: 0.9; transform: translateX(0); } }
  @keyframes splitOut { from { opacity: 0; transform: scale(0.6); transform-origin: 32px 22px; } to { opacity: 1; transform: scale(1); transform-origin: 32px 22px; } }
  @keyframes scrollBob { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-7px); } 60% { transform: translateY(-6px); } }
  @keyframes unroll { from { transform: scaleX(0.22); opacity: 0.5; } to { transform: scaleX(1); opacity: 1; } }
  @keyframes unrollLines { 0%,55% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes cursorBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
  @keyframes popIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @keyframes turnRight { from { transform: scaleX(-1); } to { transform: scaleX(1); } }
  @keyframes talkDots { 0%,100% { opacity: 0.15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1.5px); } }
  @keyframes beltWrap { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes beltKnot { from { transform: scale(1.8, 0.4); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1, 1); opacity: 1; } }
  @keyframes beltTails { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes cellBlink { 0%,100% { fill-opacity: 0; } 50% { fill-opacity: 0.9; } }
  @keyframes barTint { 0%,100% { fill: #ffffff; } 40% { fill: #6a6a6a; } 70% { fill: #2a2a2a; } }
  @keyframes barBob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { [data-anim] * { animation: none !important; } }
  @keyframes hourglassFlip { 0%, 82% { transform: rotate(0deg); } 96%, 100% { transform: rotate(180deg); } }
  @keyframes sandTop { 0% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0.04); } }
  @keyframes sandBottom { 0% { transform: scaleY(0.08); } 80%, 100% { transform: scaleY(1); } }
  @keyframes sandFall { 0%, 2% { opacity: 0; stroke-dashoffset: 0; } 4%, 78% { opacity: 1; stroke-dashoffset: -14; } 80%, 100% { opacity: 0; stroke-dashoffset: -14; } }
  @keyframes twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
  @keyframes breathe { 0%,100% { opacity: 0.55; } 50% { opacity: 0.8; } }
  @keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---- static-build helpers ---- */
.only-mobile { display: none !important; }
@media (max-width: 760px) {
  .only-mobile { display: contents !important; }
  .only-desktop { display: none !important; }
  .benefits-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .benefits-aside { position: static !important; }
}
@media (max-width: 1100px) { .only-wide { display: none !important; } }
.sc[hidden] { display: none !important; }
button { font-family: var(--font-body); }

/* MLinside Button */
.btn { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1; border-radius: var(--radius-pill, 999px); border: 1px solid transparent; padding: 14px 28px; cursor: pointer; transition: var(--transition-interactive, all 0.2s ease-in-out); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.sm { font-size: 13px; padding: 10px 18px; }
.btn.bevel { border-radius: 0; clip-path: var(--shape-bevel); padding: 18px 36px; }
.btn.bevel.sm { padding: 10px 18px; }
.btn-primary { background: var(--accent-primary, #ceff8b); color: var(--text-on-accent, #000000); }
.btn-primary:hover { background: var(--accent-primary-hover, #9cca5d); }
.btn-outline { background: transparent; color: var(--accent-primary, #ceff8b); border-color: var(--accent-primary, #ceff8b); }
.btn-outline:hover { color: var(--accent-outline-hover, #91b75d); border-color: var(--accent-outline-hover, #91b75d); }
.btn-ghost { background: rgba(0, 0, 0, 0.2); color: var(--text-primary, #ffffff); }
.btn-ghost:hover { background: rgb(64, 64, 64); }

/* MLinside Accordion */
.acc { display: flex; flex-direction: column; width: 100%; }
.acc-item { border-bottom: 1px solid var(--border-hairline, #2b2b2b); }
.acc-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; text-align: left; font-family: var(--font-body); font-size: 17px; color: var(--text-primary, #ffffff); }
.acc-ch { color: var(--accent-primary, #ceff8b); font-size: 20px; flex-shrink: 0; transition: transform var(--duration-base, 0.2s) var(--ease-standard, ease); }
.acc-item.open .acc-ch { transform: rotate(180deg); }
.acc-a { padding-bottom: 20px; color: var(--text-secondary, #a0a0a0); font-family: var(--font-body); font-size: 14px; line-height: 1.5; }

/* hover states from the design */
.hv-1:hover{background:var(--lime-hover-solid) !important}
.hv-2:hover{color:#ffffff !important}
.hv-3:hover{color:#ffffff !important}
.hv-4:hover{color:#ffffff !important}
.hv-5:hover{color:#ffffff !important}
.hv-6:hover{color:#ffffff !important}
.hv-7:hover{background:var(--lime-hover-solid) !important}
.hv-8:hover{border-color:var(--lime-1) !important}
.hv-9:hover{border-color:var(--lime-1) !important}
.hv-10:hover{border-color:var(--lime-1) !important}
.hv-11:hover{border-color:var(--lime-1) !important}
.hv-12:hover{border-color:var(--lime-1) !important}
.hv-13:hover{border-color:var(--lime-1) !important}
.hv-14:hover{border-color:var(--lime-1) !important}
.hv-15:hover{border-color:var(--lime-1) !important}
.hv-16:hover{border-color:var(--lime-1) !important}
.hv-17:hover{background:#000000 !important;color:var(--lime-1) !important}
.hv-18:hover{background:#000000 !important;color:var(--lime-1) !important}
.hv-19:hover{color:#ffffff !important}
.hv-20:hover{color:#ffffff !important}
.hv-21:hover{color:#ffffff !important}
.hv-22:hover{color:#ffffff !important}
.hv-23:hover{background:var(--lime-hover-solid) !important}
.hv-24:hover{background:#1b8cc2 !important}
.hv-25:hover{background:#1b8cc2 !important}
.hv-26:hover{color:#ffffff !important}