/* ONBO · night look (chosen 2026-11-01): dark, electric purple, glass panels, wide display type.
   Taken from the preview's option 2; the page's <html> carries data-look="2", data-theme="dark" and data-lean.
   data-lean = the simple version: secondary lines step back, headings, numbers and actions stay. */

/* ---------- less text: the secondary lines step back, headings, numbers and actions stay */
html[data-lean] .d-proof .body,
html[data-lean] .d-ba > .wrap > .body,
html[data-lean] #inside > .wrap > .body,
html[data-lean] .feat__tabs [role="tab"] span,
html[data-lean] .d-out__line { display: none !important; }
html[data-lean] .feat__tabs [role="tab"] { min-height: 52px; align-content: center; }

html[data-lean] .d-proof .d-facts { display: none !important; }

/* ---------- shared: the old lime becomes the look's accent everywhere */
html[data-look][data-v] .logo-c i { background: var(--pop); color: var(--pop-ink); }
html[data-look][data-v] .btn--pop { background: var(--pop); color: var(--pop-ink); }
html[data-look][data-v] .demo-access .btn--primary { background: var(--pop); color: var(--pop-ink); }
html[data-look][data-v] .d-kick::before, html[data-look][data-v] .d-pilot b::before, html[data-look][data-v] .d-team__n::before, html[data-look][data-v] .ind-list li::before { background-color: var(--pop); }
html[data-look][data-v] .d-mtag i, html[data-look][data-v] .d-team__role::before { background: var(--pop); box-shadow: 0 0 0 4px var(--pop-soft); }
html[data-look][data-v] .d-big__item[data-spot]::before, html[data-look][data-v] .d-calc__out[data-spot]::before, html[data-look][data-v] .d-stat--dark[data-spot]::before, html[data-look][data-v] .d-demo__card[data-spot]::before { background: radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px), var(--pop), transparent 70%); }
html[data-look][data-v] .d-calc input[type="range"]::-webkit-slider-thumb { border-color: var(--pop); }
html[data-look][data-v] .d-calc input[type="range"]::-moz-range-thumb { border-color: var(--pop); }
html[data-look][data-v] .d-steps__n { color: var(--pop-on-dark); }
html[data-look][data-v] .d-ba__fig--after figcaption b { color: var(--pop-on-dark); }
html[data-look][data-v] .d-ba__arrow { background: var(--pop); }
html[data-look][data-v] .d-ba__arrow svg { stroke: var(--pop-ink); }
html[data-look][data-v] .d-live b, html[data-look][data-v] .d-team__faces span + span { color: var(--pop-on-dark); }
html[data-look][data-v] .d-big__item--hi dd, html[data-look][data-v] .d-out__num, html[data-look][data-v] .d-stat--dark b { color: var(--pop-on-dark); }
html[data-look][data-v] .d-sticky { background: var(--pop); color: var(--pop-ink); }
html[data-look][data-v] .d-reassure::before { background: var(--pop) var(--check) center / 12px no-repeat; box-shadow: none; }
html[data-look][data-v] .cs-list li::before, html[data-look][data-v] .ind-list li::before { background: var(--pop) var(--check) center / 13px no-repeat; }
html[data-look][data-v] .timeline li::before { background: var(--pop); color: var(--pop-ink); }
html[data-look][data-v] mark.d-hl { color: var(--ink); background: linear-gradient(transparent 55%, var(--pop-soft) 55%, var(--pop-soft) 92%, transparent 92%); border-radius: 0; }
html[data-look][data-v] .d-team__ic { background: var(--pop-tint); box-shadow: inset 0 0 0 1px var(--line); }
html[data-look][data-v] .d-team__ic svg { stroke: var(--pop-deep); }
html[data-look][data-v] .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }


/* =====================================================================
   2 · Нощ: dark, electric cyan with a violet glow, glass panels, wide display type
   ===================================================================== */
html:root[data-look="2"][data-v] {
  --bg: #06070B; --surface: #0E1016; --surface-2: #161922; --ink: #EDEFF6; --ink-2: #8F96AA; --line: #1D2130;
  --accent: #EDEFF6; --accent-ink: #06070B; --accent-text: #EDEFF6;
  --pop: #5B4CFF; --pop-ink: #FFFFFF; --pop-on-dark: #A49CFF; --pop-soft: rgba(124, 108, 255, .3); --pop-tint: rgba(91, 76, 255, .16); --pop-deep: #A49CFF;
  --block-bg: #0B0D13; --block-ink: #EDEFF6; --block-ink-2: #8F96AA; --block-accent: #A49CFF; --block-line: #1D2130;
  --grid: rgba(124, 108, 255, .07); --mark: #A49CFF; --frame: #1B1F2B;
  --f-display: "Unbounded", "Arial Black", sans-serif; --f-text: "Onest", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --d-weight: 600; --d-track: -0.03em; --r-card: 16px;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
html[data-look="2"][data-v] body { background: var(--bg); }
html[data-look="2"][data-v] .display.h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.04; }
html[data-look="2"][data-v] .display.h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); line-height: 1.1; }
html[data-look="2"][data-v] .d-hero::before { background:
  radial-gradient(520px circle at 72% 44%, rgba(91, 76, 255, .20), transparent 62%),
  radial-gradient(440px circle at 90% 80%, rgba(200, 90, 255, .22), transparent 62%),
  linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px; }
html[data-look="2"][data-v] .bar { background: rgba(6, 7, 11, .72); border-bottom-color: var(--line); }
html[data-look="2"][data-v] .btn--pop { box-shadow: 0 0 0 1px rgba(91, 76, 255, .4), 0 10px 36px -8px rgba(91, 76, 255, .55); }
html[data-look="2"][data-v] .btn--ghost { border-color: #2A3042; color: var(--ink); }
html[data-look="2"][data-v] .btn:hover { transform: translateY(-2px); }
html[data-look="2"][data-v] .d-proof { background: linear-gradient(180deg, #0B0D13, #06070B); border-block: 1px solid var(--line); }
html[data-look="2"][data-v] .d-big__item, html[data-look="2"][data-v] .d-calc__in, html[data-look="2"][data-v] .d-calc__out, html[data-look="2"][data-v] .d-stat, html[data-look="2"][data-v] .d-team__pts li, html[data-look="2"][data-v] .d-demo__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .08); }
html[data-look="2"][data-v] .d-calc__out, html[data-look="2"][data-v] .d-stat--dark { background: radial-gradient(500px circle at 100% 0%, rgba(91, 76, 255, .14), transparent 60%), #0B0D13; }
html[data-look="2"][data-v] .d-big__item--hi dd, html[data-look="2"][data-v] .d-out__num { text-shadow: 0 0 36px rgba(124, 108, 255, .55); }
html[data-look="2"][data-v] .d-steps { border-top-color: #2A3042; }
html[data-look="2"][data-v] .d-steps__n { background: rgba(91, 76, 255, .16); border: 1px solid rgba(124, 108, 255, .55); color: var(--pop-on-dark); }
html[data-look="2"][data-v] .d-laptop__screen { box-shadow: 0 0 0 1px rgba(91, 76, 255, .25), 0 40px 90px -30px rgba(91, 76, 255, .4); }
html[data-look="2"][data-v] .close { background: radial-gradient(700px circle at 15% 0%, rgba(200, 90, 255, .16), transparent 60%), #0B0D13; border-top: 1px solid var(--line); }
html[data-look="2"][data-v] .d-ba__fig img, html[data-look="2"][data-v] .feat__player, html[data-look="2"][data-v] .d-demo__shot { border-color: rgba(255, 255, 255, .1); }
html[data-look="2"][data-v] .d-team__faces span { border-color: var(--bg); }
html[data-look="2"][data-v] .d-team__faces span + span { background: var(--pop); color: var(--pop-ink); }


/* the route logo: white letters, the last "o" filled with the accent */
html[data-look][data-v] .logo-c { color: var(--ink); }
.logo-c svg { display: block; height: 28px; width: auto; overflow: visible; }
@media (max-width: 760px) { .logo-c svg { height: 24px; } }

/* every call to action in the accent: the one bright, warm thing on a dark page */
html[data-look="2"][data-v] .btn--primary, html[data-look="2"][data-v] .btn--pop, html[data-look="2"][data-v] .close .cta-row .btn--primary {
  background: linear-gradient(180deg, #7062FF, #5140F5); color: #FFFFFF; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(164, 156, 255, .35), 0 14px 34px -12px rgba(91, 76, 255, .85); }
html[data-look="2"][data-v] .btn--primary:hover, html[data-look="2"][data-v] .btn--pop:hover, html[data-look="2"][data-v] .close .cta-row .btn--primary:hover {
  transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(164, 156, 255, .6), 0 20px 46px -12px rgba(91, 76, 255, 1); }
html[data-look="2"][data-v] .bar nav a.btn--primary { color: #FFFFFF; }
html[data-look="2"][data-v] .d-sticky { background: linear-gradient(180deg, #7062FF, #5140F5); color: #FFFFFF; box-shadow: 0 14px 34px -10px rgba(91, 76, 255, .8); }

/* before and after: the slide stays flat and grey, the lesson moves and glows */
html[data-look="2"][data-v] .d-ba__fig:not(.d-ba__fig--after) img { filter: grayscale(1) contrast(.92) brightness(.82); opacity: .72; border-color: #2A3042; box-shadow: none; transition: filter .6s ease, opacity .6s ease, transform .6s ease; }
html[data-look="2"][data-v] .d-ba__fig:not(.d-ba__fig--after) figcaption b { background: #1D2130; color: #8F96AA; }
html[data-look="2"][data-v] .d-ba__fig--after figcaption b { background: var(--pop); color: #FFFFFF; }
.d-ba__live { position: relative; border-radius: 18px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), #5B4CFF, #C85AFF, #A49CFF, #7B3DFF, #5B4CFF); box-shadow: 0 0 0 1px rgba(164, 156, 255, .25), 0 40px 110px -30px rgba(91, 76, 255, .9); animation: ba-spin 6s linear infinite; }
.d-ba__live video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; border-radius: 16px; background: #0E1016; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ba-spin { to { --ang: 360deg; } }
html[data-look="2"][data-v] .d-ba__arrow { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--pop); animation: ba-pulse 2.2s ease-out infinite; }
html[data-look="2"][data-v] .d-ba__arrow svg { stroke: #FFFFFF; stroke-width: 2.4; animation: ba-nudge 2.2s ease-in-out infinite; }
@keyframes ba-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 76, 255, .6); } 70% { box-shadow: 0 0 0 20px rgba(91, 76, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 76, 255, 0); } }
@keyframes ba-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@media (min-width: 901px) {
  html[data-look="2"][data-v] .d-ba__grid { grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.1fr); gap: 32px; perspective: 1800px; }
  html[data-look="2"][data-v] .d-ba__fig:not(.d-ba__fig--after) img { transform: rotateY(12deg) scale(.95); transform-origin: right center; }
  html[data-look="2"][data-v] .d-ba__fig:not(.d-ba__fig--after):hover img { filter: grayscale(.3); opacity: 1; transform: none; }
  .d-ba__live { transform: rotateY(-5deg); transform-origin: left center; }
}
@media (max-width: 900px) { html[data-look="2"][data-v] .d-ba__fig { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .d-ba__live, html[data-look="2"][data-v] .d-ba__arrow, html[data-look="2"][data-v] .d-ba__arrow svg { animation: none; } }

/* =====================================================================
   Highlights: colour contrast on a dark page. Two bright purple bands (results, enquiry),
   a purple result card, a white form, and small purple accents in between.
   ===================================================================== */
html[data-look="2"][data-v] {
  --band: radial-gradient(900px circle at 92% -10%, rgba(255, 255, 255, .22), transparent 55%), radial-gradient(760px circle at 0% 110%, rgba(214, 120, 255, .45), transparent 60%), linear-gradient(135deg, #3B29D4 0%, #5B4CFF 50%, #7E3CF2 100%);
}
/* buttons on a purple band turn white, so they still stand out */
html[data-look="2"][data-v] .d-proof .btn--pop, html[data-look="2"][data-v] .d-calc__out .btn--pop, html[data-look="2"][data-v] .close .cta-row .btn--primary {
  background: #FFFFFF; color: #3F2FE0; box-shadow: 0 16px 36px -14px rgba(18, 8, 80, .65); }
html[data-look="2"][data-v] .d-proof .btn--pop:hover, html[data-look="2"][data-v] .d-calc__out .btn--pop:hover, html[data-look="2"][data-v] .close .cta-row .btn--primary:hover {
  box-shadow: 0 22px 46px -14px rgba(18, 8, 80, .8); }

/* hero: brighter aurora and a headline that catches the light */
html[data-look="2"][data-v] .d-hero::before { background:
  radial-gradient(560px circle at 72% 44%, rgba(91, 76, 255, .34), transparent 62%),
  radial-gradient(460px circle at 92% 82%, rgba(200, 90, 255, .32), transparent 62%),
  radial-gradient(420px circle at 8% 0%, rgba(124, 108, 255, .18), transparent 60%),
  linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px; }

/* Titan Properties results: a vivid purple band, the main number on a white tile */
html[data-look="2"][data-v] .d-proof { background: var(--band); border-block: 0; --block-ink: #FFFFFF; --block-ink-2: rgba(255, 255, 255, .8); --block-line: rgba(255, 255, 255, .24); }
html[data-look="2"][data-v] .d-proof .d-kick { color: rgba(255, 255, 255, .85); }
html[data-look="2"][data-v] .d-proof .d-kick::before { background: #FFFFFF; }
html[data-look="2"][data-v] .d-proof .d-big__item { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-look="2"][data-v] .d-proof .d-big dd { color: #FFFFFF; text-shadow: none; }
html[data-look="2"][data-v] .d-proof .d-big__item--hi { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(18, 8, 80, .7); }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dd { color: #4434E8; text-shadow: none; }
html[data-look="2"][data-v] .d-proof .d-big__item--hi dt { color: #4A4F66; }
html[data-look="2"][data-v] .d-proof .d-link { color: #FFFFFF; }

/* calculator: the result is a purple card with white numbers */
html[data-look="2"][data-v] .d-calc__out { background: radial-gradient(600px circle at 100% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(140deg, #4434E8 0%, #5B4CFF 50%, #8A44FF 100%); border-color: transparent; box-shadow: 0 40px 90px -40px rgba(91, 76, 255, .95); --block-ink: #FFFFFF; --block-ink-2: rgba(255, 255, 255, .82); --block-line: rgba(255, 255, 255, .26); }
html[data-look="2"][data-v] .d-calc__out .d-out__num, html[data-look="2"][data-v] .d-calc__out .d-out__pair b { color: #FFFFFF; text-shadow: none; }

/* steps, tabs, stats and team: small filled purple accents */
html[data-look="2"][data-v] .d-steps__n { background: linear-gradient(135deg, #7062FF, #4F3BF0); color: #FFFFFF; border: 0; box-shadow: 0 10px 24px -10px rgba(91, 76, 255, .9); }
html[data-look="2"][data-v] .feat__tabs [role="tab"][aria-selected="true"] { background: linear-gradient(135deg, #6656FF, #4F3BF0); color: #FFFFFF; border-color: transparent; box-shadow: 0 12px 28px -12px rgba(91, 76, 255, .9); }
html[data-look="2"][data-v] .d-stat--dark { background: radial-gradient(420px circle at 100% 0%, rgba(255, 255, 255, .2), transparent 55%), linear-gradient(140deg, #4434E8, #5B4CFF 55%, #8A44FF); border-color: transparent; }
html[data-look="2"][data-v] .d-stat--dark b { color: #FFFFFF; }
html[data-look="2"][data-v] .d-stat--dark span, html[data-look="2"][data-v] .d-stat--dark .src { color: rgba(255, 255, 255, .85); }
html[data-look="2"][data-v] .d-team__ic { background: linear-gradient(135deg, #7062FF, #8A44FF); box-shadow: 0 10px 24px -12px rgba(91, 76, 255, .9); }
html[data-look="2"][data-v] .d-team__ic svg { stroke: #FFFFFF; }
html[data-look="2"][data-v] .d-team__faces span:first-child { background: #A49CFF; color: #0B0D12; }
html[data-look="2"][data-v] mark.d-hl { background: linear-gradient(transparent 55%, rgba(124, 108, 255, .55) 55%, rgba(124, 108, 255, .55) 92%, transparent 92%); }

/* enquiry: the second purple band, with the form as a white card on it */
html[data-look="2"][data-v] .close { background: var(--band); border-top: 0; --block-ink: #FFFFFF; --block-ink-2: rgba(255, 255, 255, .85); }
html[data-look="2"][data-v] .close .form { --bg: #F4F4FB; --surface: #FFFFFF; --ink: #14162B; --ink-2: #4A4F66; --line: #D9DAEA; background: #FFFFFF; color: #14162B; color-scheme: light; box-shadow: 0 40px 90px -40px rgba(18, 8, 80, .7); }
html[data-look="2"][data-v] .close .form .err { color: #B3261E; }
html[data-look="2"][data-v] .close .form input:focus-visible, html[data-look="2"][data-v] .close .form select:focus-visible, html[data-look="2"][data-v] .close .form textarea:focus-visible { outline: 2px solid #5B4CFF; outline-offset: 1px; }