/* ===================================================================
   BrainGrapes — styles.css
   "The observatory above the clouds." Ethereal lavender sky, frosted
   glass, Instrument Serif display. One ink colour at many opacities.
   The sky (procedural drifting clouds) lives in clouds.js and follows
   the time of day — dawn, day, dusk, night.
   =================================================================== */

:root {
  /* sky (overridden per mood at the bottom of this file) */
  --sky-top: #c8c1ec;
  --sky-mid: #e6e1f6;
  --sky-low: #f6ebf1;

  /* ink — one colour, many opacities */
  --ink:    #37335e;
  --ink-80: rgba(55, 51, 94, 0.80);
  --ink-62: rgba(55, 51, 94, 0.62);
  --ink-45: rgba(55, 51, 94, 0.45);
  --ink-28: rgba(55, 51, 94, 0.28);
  --ink-14: rgba(55, 51, 94, 0.14);
  --ink-08: rgba(55, 51, 94, 0.08);

  /* accents (periwinkle → grape, blush) */
  --peri:      #8b87d8;
  --peri-deep: #6c67c4;
  --grape:     #664ea6;   /* the logo's own violet, kept as a brand tie   */
  --lav:       #b9b5e9;
  --blush:     #dda4bd;

  /* glass */
  --glass:        rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-brd:    rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 18px 50px -18px rgba(101, 92, 168, 0.35);

  --radius:    22px;
  --radius-sm: 13px;
  --maxw:      1140px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-ui:    "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 78% 108%, rgba(226, 187, 205, 0.5) 0%, rgba(226, 187, 205, 0) 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the procedural cloud canvas — painted behind all content */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* everything real sits above the sky */
.nav, main, .footer, .bg-fab, .bg-chat, .skip-link { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--peri); color: #fff; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Accessibility & resilience ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--peri-deep);
  outline-offset: 2px;
  border-radius: 6px;
}
body.sky-night a:focus-visible, body.sky-night button:focus-visible { outline-color: var(--lav); }

.skip-link {
  position: fixed; left: 14px; top: -72px; z-index: 200;
  background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem;
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--glass-shadow);
  transition: top .22s var(--ease);
}
.skip-link:focus { top: 14px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

.service-card, .price-card, .process__step, .value { min-width: 0; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; letter-spacing: -.01em; margin: 0; font-weight: 700; overflow-wrap: break-word; text-wrap: balance; }
.hero__lead, .section__sub, .about__content > p, .pricing__note { text-wrap: pretty; }

/* the signature: an italic serif emphasis */
.serif-accent {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--peri-deep);
  letter-spacing: 0;
}

/* ---------- Glass helper ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .72em 1.5em; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn--lg { padding: .92em 1.8em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary {
  background: linear-gradient(120deg, var(--peri-deep), var(--peri) 55%, #a89ede);
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(108, 103, 196, 0.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(108, 103, 196, 0.65); }
.btn--ghost { background: rgba(255,255,255,.32); color: var(--ink-80); border-color: var(--ink-28); font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--peri); color: var(--ink); transform: translateY(-2px); background: rgba(255,255,255,.5); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn--ghost:hover .arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-scrolled { border-bottom-color: var(--glass-brd); box-shadow: 0 12px 36px -24px rgba(101, 92, 168, 0.5); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand__mark { width: 58px; height: 58px; object-fit: contain; }

/* Turning head: an 8-frame turntable of the real drawn views (left profile →
   back-left → back → back-right → right profile → front-right → front →
   front-left), 45° per frame, so the head genuinely rotates in 3D. steps(8)
   walks the strip and the 360° loop is seamless. Frames are height-normalised
   and neck-anchored so the head pivots without jitter. */
.brand__turn {
  display: inline-block;
  background: url("assets/braingrapes-head-sprite.png") 0 0 / 464px 58px no-repeat;
  animation: head-turn 1.6s steps(8) infinite;
}
@keyframes head-turn { from { background-position-x: 0; } to { background-position-x: -464px; } }
@media (prefers-reduced-motion: reduce) {
  .brand__turn { animation: none; background-position-x: -232px; } /* hold the right profile — the logo's own view */
}
.brand__name { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); letter-spacing: 0; }
.brand__name--accent { color: var(--peri-deep); font-style: italic; }

.nav__links { display: flex; gap: 30px; white-space: nowrap; }
.nav__links a { font-weight: 500; font-size: .95rem; color: var(--ink-62); position: relative; padding: 4px 0; transition: color .25s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--peri); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

/* mood toggle */
.mood-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--ink-14);
  background: rgba(255,255,255,.5); color: var(--ink-62);
  cursor: pointer; transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.mood-btn:hover { border-color: var(--peri); color: var(--ink); transform: translateY(-1px); }
.mood-btn__glyph { font-size: 15px; line-height: 1; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: rgba(255,255,255,.5); border: 1px solid var(--ink-14);
  border-radius: 12px; cursor: pointer; }
.nav__toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 22px; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--glass-brd); }
.nav__mobile a { padding: 12px 4px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink-08); }
.nav__mobile a.btn { border: 1px solid transparent; color: #fff; margin-top: 12px; }
.nav.is-open .nav__mobile { display: flex; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(84px, 13vw, 150px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-62);
  background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd); padding: 8px 15px; border-radius: 999px; box-shadow: var(--glass-shadow); margin: 0 0 26px; }
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--peri); box-shadow: 0 0 0 4px rgba(139,135,216,.22); }

.hero__title { font-size: clamp(2.8rem, 7vw, 5.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 24px; }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 300; color: var(--ink-80); max-width: 600px; margin: 0 0 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__meta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ink-14); }
.hero__meta-item { display: flex; flex-direction: column; }
.hero__meta-item strong { font-family: var(--font-serif); font-weight: 400; font-size: 2.1rem; color: var(--ink); letter-spacing: 0; }
.hero__meta-item span { font-size: .85rem; color: var(--ink-45); }

/* ---------- Marquee strip ---------- */
.strip { border-block: 1px solid var(--ink-08); padding: 18px 0; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; gap: 26px; align-items: center; white-space: nowrap; animation: scroll 34s linear infinite; font-family: var(--font-mono); font-size: .86rem; color: var(--ink-45); text-transform: uppercase; letter-spacing: .1em; }
.marquee__track span:not(:nth-child(2n)) { color: var(--ink-80); font-weight: 500; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Generic section ---------- */
.section { padding: clamp(72px, 10vw, 120px) 0; }
.section--alt { position: relative; }
.section__head { max-width: 700px; margin: 0 0 56px; }
.section__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 16px; }
.section__sub { font-size: 1.08rem; font-weight: 300; color: var(--ink-62); margin: 0; }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.service-card {
  position: relative; background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  padding: 42px; box-shadow: var(--glass-shadow); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--peri-deep), var(--blush)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -20px rgba(101, 92, 168, 0.5); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px;
  background: rgba(139,135,216,.14); color: var(--peri-deep); margin-bottom: 24px; }
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { font-size: 1.45rem; letter-spacing: -.01em; margin-bottom: 12px; }
.service-card > p { margin: 0 0 22px; font-weight: 300; color: var(--ink-62); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.ticks li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--ink-80); font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(139,135,216,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236c67c4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.price-card { position: relative; background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  padding: 42px; box-shadow: var(--glass-shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -20px rgba(101, 92, 168, 0.5); }
.price-card--feature { border-color: var(--peri); box-shadow: 0 22px 55px -18px rgba(108, 103, 196, 0.45); background: var(--glass-strong); }
.price-card__tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); margin: 0 0 14px; }
.price-card h3 { font-size: 1.32rem; letter-spacing: -.01em; margin-bottom: 14px; }
.price-card__price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.price-card__price strong { font-family: var(--font-serif); font-size: 3rem; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.price-card__price span { font-size: 1rem; color: var(--ink-45); }
.price-card__note { font-size: .94rem; color: var(--ink-45); font-weight: 300; margin: 0 0 24px; }
.price-card__fine { font-size: .82rem; color: var(--ink-45); font-weight: 300; margin: -8px 0 22px; line-height: 1.55; }
.price-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 13px; }
.price-list li { position: relative; padding-left: 28px; font-size: .96rem; color: var(--ink-80); font-weight: 500; }
.price-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(139,135,216,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236c67c4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; }
.pricing__note { text-align: center; margin: 40px auto 0; max-width: 580px; font-size: 1.02rem; font-weight: 300; color: var(--ink-62); }
.pricing__note strong { color: var(--ink); font-weight: 600; }

/* ---------- Process ---------- */
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process__step { position: relative; padding-right: 18px; }
.process__num { font-family: var(--font-serif); font-style: italic; font-size: 1.8rem; color: var(--peri-deep); }
.process__step h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: 12px 0 10px; }
.process__step p { margin: 0; font-size: .95rem; font-weight: 300; color: var(--ink-62); }
.process__step::after { content: "→"; position: absolute; top: 42px; right: -14px; color: var(--ink-28); font-size: 1.1rem; }
.process__step:last-child::after { display: none; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.about__media { display: flex; justify-content: center; padding: 48px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-brd); border-radius: var(--radius); box-shadow: var(--glass-shadow); }
.about__media img { filter: drop-shadow(0 18px 34px rgba(101, 92, 168, 0.28)); }
.about__content > p { margin: 0 0 28px; font-size: 1.08rem; font-weight: 300; color: var(--ink-80); }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; }
.value h4 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 6px; }
.value p { margin: 0; font-size: .92rem; font-weight: 300; color: var(--ink-62); }

/* ---------- CTA / Contact ---------- */
.cta { position: relative; padding: clamp(72px, 10vw, 120px) 0; }
.cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cta__text h2 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.04; margin-bottom: 18px; }
.cta__sub { color: var(--ink-62); font-weight: 300; font-size: 1.08rem; margin: 0 0 32px; max-width: 460px; }
.cta__contacts { list-style: none; padding: 0; margin: 0; display: flex; gap: 48px; }
.cta__contacts li { display: flex; flex-direction: column; gap: 4px; }
.cta__contacts span:first-child { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); }
.cta__contacts a, .cta__contacts li > span:last-child { color: var(--ink); font-weight: 500; }
.cta__contacts a:hover { color: var(--peri-deep); }

.cta__form { background: var(--glass-strong); border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 34px; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--glass-shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-62); margin-bottom: 7px; }
.field input, .field textarea { width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--ink-14);
  background: rgba(255,255,255,.6); color: var(--ink); font-family: var(--font-ui); font-size: .96rem; transition: border-color .2s, background .2s, box-shadow .2s; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--peri); background: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(139,135,216,.16); }
.form-note { text-align: center; font-size: .85rem; color: var(--ink-45); margin: 16px 0 0; }
.form-note a { color: var(--peri-deep); }
.cta__form .hp { display: none !important; }
.form-done { text-align: center; padding: 28px 8px; }
.form-done h3 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); font-size: 1.7rem; margin-bottom: 10px; }
.form-done p { color: var(--ink-62); font-weight: 300; margin: 0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--ink-08); padding: 56px 0 28px; }
.footer__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--ink-08); }
.footer__brand p { margin: 14px 0 0; font-size: .92rem; font-weight: 300; color: var(--ink-45); max-width: 260px; }
.footer__links { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.footer__links a { font-size: .95rem; color: var(--ink-62); font-weight: 500; }
.footer__links a:hover { color: var(--peri-deep); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; }
.footer__bottom p { margin: 0; font-size: .85rem; color: var(--ink-45); }

/* ---------- AI assistant widget ---------- */
.bg-fab { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(120deg, var(--peri-deep), var(--peri) 60%, #a89ede); color: #fff; border: 0; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: .92rem;
  padding: 13px 20px; border-radius: 999px; box-shadow: 0 14px 34px -10px rgba(108, 103, 196, 0.6); transition: transform .25s var(--ease), box-shadow .25s; }
.bg-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(108, 103, 196, 0.7); }
.bg-fab__dot { width: 8px; height: 8px; border-radius: 50%; background: #cfeee0; box-shadow: 0 0 0 4px rgba(207,238,224,.3); }
.bg-fab[hidden] { display: none; }

.bg-chat { position: fixed; right: 22px; bottom: 22px; z-index: 121; display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px));
  background: var(--glass-strong); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-brd); border-radius: 22px; box-shadow: var(--glass-shadow); overflow: hidden; }
.bg-chat[hidden] { display: none; }
.bg-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  background: linear-gradient(120deg, var(--peri-deep), var(--peri)); color: #fff; }
.bg-chat__id { display: flex; align-items: center; gap: 11px; }
.bg-chat__av { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; letter-spacing: -.02em; }
.bg-chat__id b { font-size: .98rem; display: block; }
.bg-chat__id small { font-size: .74rem; color: rgba(255,255,255,.82); }
.bg-chat__close { background: none; border: 0; color: rgba(255,255,255,.85); font-size: 1rem; cursor: pointer; }
.bg-chat__close:hover { color: #fff; }
.bg-chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,.28); }
.bg-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.bg-msg--bot { background: rgba(255,255,255,.85); border: 1px solid var(--glass-brd); color: var(--ink-80); align-self: flex-start; border-bottom-left-radius: 5px; }
.bg-msg--me { background: linear-gradient(120deg, var(--peri-deep), var(--peri)); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bg-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-45); animation: bgbln 1s infinite; }
.bg-typing i:nth-child(2) { animation-delay: .15s; } .bg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bgbln { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.bg-chat__bar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--glass-brd); background: rgba(255,255,255,.55); }
.bg-chat__bar input { flex: 1; padding: 11px 14px; border: 1px solid var(--ink-14); border-radius: 12px; background: rgba(255,255,255,.7); font-family: var(--font-ui); font-size: .92rem; color: var(--ink); }
.bg-chat__bar input:focus { outline: none; border-color: var(--peri); box-shadow: 0 0 0 4px rgba(139,135,216,.16); }
.bg-chat__bar button { flex: none; width: 44px; border: 0; border-radius: 12px; background: linear-gradient(120deg, var(--peri-deep), var(--peri)); color: #fff; font-size: 1.1rem; cursor: pointer; transition: filter .25s; }
.bg-chat__bar button:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .bg-fab, .bg-chat__bar button { transition: none; } .bg-typing i { animation: none; } }

/* ---------- Reveal animation (opt-in; see index.html inline script) ---------- */
.reveal-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-on .reveal[data-delay="1"] { transition-delay: .1s; }
.reveal-on .reveal[data-delay="2"] { transition-delay: .2s; }
.reveal-on .reveal[data-delay="3"] { transition-delay: .3s; }
.reveal-on .reveal[data-delay="4"] { transition-delay: .4s; }
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

/* ===================================================================
   TIME-OF-DAY SKY MOODS
   The clouds.js engine adds one of these classes to <body>, following
   the clock or the mood toggle. Only the sky tint changes for dawn/dusk;
   night is a true dark sky, so text on the open sky flips to moonlit
   white while the glass cards stay light (and re-declare the dark ink
   scale) so everything on them stays perfectly readable.
   =================================================================== */
body.sky-dawn { --sky-top: #c2cbec; --sky-mid: #e7e3f6; --sky-low: #fdeadd; }
body.sky-dusk { --sky-top: #b7a3de; --sky-mid: #e2d2ee; --sky-low: #f8dcd6; }

body.sky-night {
  --sky-top: #141230;
  --sky-mid: #221f45;
  --sky-low: #3a3160;
  --ink:    #eeecfa;
  --ink-80: rgba(238, 236, 250, 0.85);
  --ink-62: rgba(238, 236, 250, 0.66);
  --ink-45: rgba(238, 236, 250, 0.48);
  --ink-28: rgba(238, 236, 250, 0.30);
  --ink-14: rgba(238, 236, 250, 0.16);
  --ink-08: rgba(238, 236, 250, 0.10);
  --glass-shadow: 0 18px 50px -18px rgba(8, 6, 28, 0.55);
  --glass:        rgba(255, 255, 255, 0.90);
  --glass-strong: rgba(255, 255, 255, 0.93);
  --glass-brd:    rgba(255, 255, 255, 0.65);
  background:
    radial-gradient(56% 38% at 80% 10%, rgba(216, 222, 255, 0.16) 0%, rgba(216, 222, 255, 0) 62%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  background-attachment: fixed;
}
/* Light glass surfaces re-declare the DARK ink scale so their content stays legible on white. */
body.sky-night :is(.nav, .nav__mobile, .service-card, .price-card, .about__media, .cta__form, .bg-chat, .eyebrow, .btn--ghost, .mood-btn, .nav__toggle) {
  --ink:    #37335e;
  --ink-80: rgba(55, 51, 94, 0.80);
  --ink-62: rgba(55, 51, 94, 0.62);
  --ink-45: rgba(55, 51, 94, 0.45);
  --ink-28: rgba(55, 51, 94, 0.28);
  --ink-14: rgba(55, 51, 94, 0.14);
  --ink-08: rgba(55, 51, 94, 0.08);
  color: var(--ink);
}
body.sky-night .nav, body.sky-night .nav__mobile { background: rgba(255,255,255,.92); }
body.sky-night .mood-btn, body.sky-night .nav__toggle, body.sky-night .btn--ghost { background: rgba(255,255,255,.9); }
body.sky-night .field input, body.sky-night .field textarea { background: rgba(255,255,255,.9); }
body.sky-night .bg-chat__log { background: rgba(255,255,255,.5); }
body.sky-night .bg-msg--bot { background: rgba(255,255,255,.9); }
body.sky-night .bg-chat__bar { background: rgba(255,255,255,.75); }
body.sky-night .bg-chat__bar input { background: rgba(255,255,255,.85); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav__links, .nav__cta > .btn { display: none; }
  .nav__toggle { display: flex; }
  .services, .pricing, .process, .values, .cta__inner, .about { grid-template-columns: 1fr; }
  .about { gap: 36px; }
  .process__step::after { display: none; }
  .ticks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero__meta { gap: 26px; }
  .cta__contacts { flex-direction: column; gap: 20px; }
  .service-card { padding: 32px 26px; }
  .footer__inner { flex-direction: column; gap: 28px; }
}