/* Brand colors are derived from the supplied transparent think-symbol.png. */
:root {
  color-scheme: light;
  --brand-violet: #6128ed;
  --brand-orchid: #c45af7;
  --ink: #21172e;
  --muted: #554b63;
  --purple: #7131d4;
  --line: #dfd3ef;
  --surface: #fcfaff;
  --page-bg: #faf8fe;
  --band-bg: linear-gradient(115deg, #fdfbff, #f8f4fe 62%, #f5effd);
  --band-alt: linear-gradient(115deg, #faf7ff, #f2ecfb);
  --panel-bg: linear-gradient(135deg, #ffffffbd, #fbf8ff80);
  --panel-solid: #fcfaff;
  --panel-hover: #f2eafb;
  --tint-bg: linear-gradient(125deg, #f5edff, #ece3fa);
  --tint-warm: linear-gradient(125deg, #faedff, #f1e7fd);
  --note-bg: linear-gradient(105deg, #eee1ff, #ddc7fa);
  --input-bg: #fffaff;
  --input-border: #c9b9de;
  --placeholder: #756781;
  --focus: #8750db;
  --link: #6729bf;
  --muted-icon: #70518c;
  --navy: #171220;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f3f3;
  --muted: #c4c4c4;
  --purple: #c59aff;
  --line: #444444;
  --surface: #242424;
  --page-bg: #181818;
  --band-bg: linear-gradient(115deg, #1b1b1b, #202020 62%, #242424);
  --band-alt: linear-gradient(115deg, #222222, #272727);
  --panel-bg: linear-gradient(135deg, #2c2c2c, #282828);
  --panel-solid: #292929;
  --panel-hover: #363636;
  --tint-bg: linear-gradient(125deg, #2b2b2b, #303030);
  --tint-warm: linear-gradient(125deg, #303030, #2d2d2d);
  --note-bg: linear-gradient(105deg, #303030, #383838);
  --input-bg: #1e1e1e;
  --input-border: #767676;
  --placeholder: #b0b0b0;
  --focus: #c395ff;
  --link: #cea6ff;
  --muted-icon: #c2a4e0;
}

body { color: var(--ink); background: var(--page-bg); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--focus); }
input:focus-visible, textarea:focus-visible { outline-color: var(--focus); }
::selection { background: #c8a4f5; color: #20102e; }
.skip { background: var(--panel-solid); color: var(--ink); }
.header { background: linear-gradient(110deg, #171220 12%, #251633 65%, #422366); border-color: #b989f52b; }
.header .bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; min-height: 74px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 34px; letter-spacing: -.025em; flex: none; }
.brand-symbol { width: 42px; height: 42px; object-fit: contain; flex: none; }
.header nav { justify-content: flex-end; gap: clamp(16px, 1.6vw, 25px); min-width: 0; }
.header nav .nav-cta { margin-left: 16px; background: linear-gradient(135deg, #9138ce, var(--brand-violet)); border-color: #bb7bea8c; box-shadow: inset 0 1px 2px #f3caff55, 0 4px 16px #6128ed33; }
.header nav a:not(.nav-cta):after { background: #c98aff; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #ecd9ff; background: #d5b7ff12; border: 1px solid #b999d755; border-radius: 11px; transition: background .18s, border-color .18s; }
.theme-toggle:hover { background: #c797ff26; border-color: #c9a3f5aa; }
.theme-toggle:focus-visible, .menu:focus-visible, .header a:focus-visible { outline-color: #ddb7ff; }
.theme-icon { width: 22px; height: 22px; }
.theme-sun, [data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
.menu { min-height: 44px; padding-inline: 12px; background: #d5b7ff12; border-color: #b999d755; }
.hero { background: radial-gradient(ellipse at 70% 13%, #6c2ca33d, transparent 45%), radial-gradient(ellipse at 99% 96%, #b246c966, transparent 32%), radial-gradient(ellipse at 7% 107%, #6128ed99, transparent 44%), linear-gradient(115deg, #180f29 4%, #231435 45%, #38204f 75%, #612c8a 100%); }
.hero:before { background: radial-gradient(ellipse at -12% 36%, #a64de94d, transparent 34%), radial-gradient(ellipse at 103% 22%, #d46bf769, transparent 33%); }
.hero:after { background: radial-gradient(ellipse at 42% 104%, #8f42ee69, transparent 38%); }
.hero-wave { border-color: #d89aff33; background: linear-gradient(125deg, transparent 46%, #9d60dd14 75%, #cf6cf533); box-shadow: 12px 3px 35px #9e4be63d; }
.hero-wave-two { background: linear-gradient(140deg, #9242e333, #d571fb61 14%, #4b245844 26%, #963dde44); box-shadow: -15px -5px 40px #af59e96b; }
.hero h1 span { background-image: linear-gradient(95deg, #da8dfb 8%, #c389ff 52%, #ac88ff 97%); }
.hero-tags li { background: linear-gradient(140deg, #c297ff1f, #db9df51c); border-color: #cb9df54d; }
.hero-tags .icon { color: #d7b5fc; }
.button { background: linear-gradient(140deg, #8f36ce, #742be7 48%, #5720d7); border-color: #b476e8; box-shadow: inset 0 1px 2px #f0cbff55, 0 4px 12px #6128ed26; }
.button:hover { box-shadow: inset 0 1px 2px #f0cbff55, 0 6px 18px #6128ed40; }
.button-outline { background: #25183388; border-color: #d3bce8; box-shadow: inset 0 0 0 1px #c5a7e333; }
.home-section { background: var(--band-bg); }
.home-section:nth-of-type(even) { background: var(--band-alt); }
.facts > div, .service-card, .audience-list li, .process-grid li > div, .price-card, .project-form, .service-detail, .timeline-item { background: var(--panel-bg); border-color: var(--line); }
.facts .icon, .contact-details .icon { color: var(--muted-icon); }
.service-card p, .process-grid p, .faq-list details p, .contact-copy > p:not(.eyebrow), .prices-copy > p:last-child, .audience-section > div > p:not(.eyebrow) { color: var(--muted); }
.service-card > .icon:last-child { color: var(--muted-icon); }
.service-card:hover { border-color: #ad70e5; box-shadow: 0 8px 22px #7131d410; }
.benefits-head > p { border-color: #b487d5; color: var(--muted); }
.benefit-card, .benefit-card:first-child, .benefit-card:nth-child(3) { background: var(--tint-bg); border-color: var(--line); }
.benefit-card:first-child, .benefit-card:nth-child(3) { background: var(--tint-warm); }
.benefit-card:nth-child(3) .icon { color: var(--purple); }
.process-grid:before { background: var(--line); }
.step-number, .process-grid li:last-child .step-number { background: linear-gradient(145deg, #9541d5, #6128ed); box-shadow: inset 0 1px 3px #f6d9ff66; }
.process-grid li:last-child .step-number { background: linear-gradient(145deg, #9940b5, #7e2ec6); }
.price-note { background: var(--note-bg); color: var(--ink); }
.price-note .icon { color: var(--purple); }
.story-section { background: var(--page-bg); }
.story-banner { background: radial-gradient(ellipse at 0 120%, #ac42c780, transparent 26%), radial-gradient(ellipse at 102% 130%, #8a3eec, transparent 35%), radial-gradient(ellipse at 54% 0, #9b57d266, transparent 37%), linear-gradient(115deg, #22152f, #352045 75%, #432a60); border-color: #9d6bcd66; }
.story-banner:after { background: linear-gradient(90deg, transparent, #cd6df940); box-shadow: 7px 0 23px #ac5aff45; }
.story-copy .eyebrow { color: #ddc7ef; }
.story-copy p:last-child { color: #f2eaf8; }
.story-checks { background: #20142d77; border-color: #bd92e566; }
.story-checks .icon { color: #d29df8; }
.faq-list details { background: var(--panel-bg); border-color: var(--line); }
.faq-list summary:after { border-color: var(--muted-icon); }
.faq-list details[open] summary { background: var(--panel-hover); }
.form-field input, .form-field textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--ink); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--placeholder); }
.form-actions > p, .form-note, .form-status, .muted, .legal-date { color: var(--muted); }
.form-status a, .form-actions p a, .form-note a, .legal-content a, .text-link, .contact-method strong { color: var(--link); }
.footer { background: linear-gradient(110deg, #1d142a, #261934 76%, #332143); }
.footer-brand { border-color: #d4b0f333; }
.inner-page main { background: radial-gradient(ellipse at 100% 0, #a65de917, transparent 50%), var(--page-bg); }
.tag-list li { background: var(--tint-bg); color: var(--link); border-color: var(--line); }
.callout { background: var(--tint-bg); border-color: var(--line); }
.timeline-item { border-top-color: #ac6be8; }
.contact-method, .split-section { border-color: var(--line); }
/* Neutral charcoal surfaces; purple stays on the brand and interactive accents. */
[data-theme="dark"] .header { background: linear-gradient(110deg, #1b1b1b, #252525); border-color: #3a3a3a; }
[data-theme="dark"] .hero { background: linear-gradient(115deg, #191919 4%, #232323 60%, #303030 100%); }
[data-theme="dark"] .hero:before { background: radial-gradient(ellipse at 100% 20%, #ffffff06, transparent 50%); }
[data-theme="dark"] .hero:after { background: none; }
[data-theme="dark"] .hero-wave { border-color: #ffffff12; background: linear-gradient(125deg, transparent 46%, #ffffff02 75%, #ffffff08); box-shadow: none; }
[data-theme="dark"] .hero-wave-two { background: linear-gradient(140deg, #ffffff02, #ffffff08 14%, #ffffff02 26%, #ffffff04); box-shadow: none; }
[data-theme="dark"] .hero-lead, [data-theme="dark"] .hero h1 { color: var(--ink); }
[data-theme="dark"] .hero-intro { color: #d3d3d3; }
[data-theme="dark"] .hero-tags li { background: #ffffff06; border-color: #535353; }
[data-theme="dark"] .button-outline { background: #292929aa; border-color: #b9b9b9; box-shadow: inset 0 0 0 1px #ffffff12; }
[data-theme="dark"] .theme-toggle, [data-theme="dark"] .menu { background: #ffffff08; border-color: #555555; }
[data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .menu:hover { background: #ffffff12; border-color: #b08bd9; }
[data-theme="dark"] .story-banner { background: linear-gradient(115deg, #272727, #333333); border-color: #515151; box-shadow: inset 0 1px 5px #ffffff08; }
[data-theme="dark"] .story-banner:after { background: linear-gradient(90deg, transparent, #ffffff05); box-shadow: none; }
[data-theme="dark"] .story-copy p:last-child { color: #e0e0e0; }
[data-theme="dark"] .story-checks { background: #22222299; border-color: #5a5a5a; }
[data-theme="dark"] .footer { background: linear-gradient(110deg, #1a1a1a, #242424); }
[data-theme="dark"] .footer-brand { border-color: #4a4a4a; }
[data-theme="dark"] .inner-page main { background: var(--page-bg); }
[data-theme="dark"] .service-card, [data-theme="dark"] .project-form { box-shadow: 0 4px 16px #00000022; }
@media (min-width: 1051px) and (max-width: 1200px) {
  .header .bar { gap: 18px; }
  .header nav { gap: 14px; font-size: 12px; }
  .header nav .nav-cta { margin-left: 0; padding-inline: 12px; }
  .header .logo { font-size: 30px; gap: 9px; }
  .header .brand-symbol { width: 38px; height: 38px; }
}
@media (max-width: 1050px) {
  .header .bar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 0; min-height: 70px; }
  .header .logo { grid-column: 1; grid-row: 1; font-size: 30px; width: fit-content; }
  .header .brand-symbol { width: 38px; height: 38px; }
  .header .menu { grid-column: 2; grid-row: 1; }
  .header .theme-toggle { grid-column: 3; grid-row: 1; }
  .header nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; width: 100%; padding: 8px 0 20px; font-size: 14px; }
  .header nav a { padding: 11px 12px; min-height: 44px; }
  .header nav a:not(.nav-cta):after { left: 12px; right: 12px; bottom: 5px; }
  .header nav .nav-cta { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; padding: 11px 18px; }
}
@media (max-width: 600px) {
  .header .bar { column-gap: 10px; }
  .header .logo { font-size: 28px; gap: 9px; }
  .header .brand-symbol { width: 35px; height: 35px; }
  .header nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
}
@media (max-width: 360px) {
  .header .bar { column-gap: 8px; }
  .header .logo { font-size: 26px; gap: 7px; }
  .header .brand-symbol { width: 31px; height: 31px; }
  .menu { font-size: 12px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Keep long audience labels and the game checklist inside their panels. */
.audience-list li { white-space: normal; }
@media (min-width: 361px) and (max-width: 700px) {
  .story-banner { grid-template-columns: minmax(0, 1fr) minmax(108px, .5fr); }
}