/* ─────────────────────────────────────────────────────────────
   Butla — Google Material 3 dark
   Class names preserved for cascade across pages; values redone.
   ───────────────────────────────────────────────────────────── */

:root {
    /* Material 3 dark surface stack */
    --m-bg:           #202124;
    --m-surface:      #292a2d;
    --m-surface-2:    #303134;
    --m-surface-3:    #3c4043;
    --m-border:       #3c4043;
    --m-border-soft:  rgba(255,255,255,0.08);
    --m-text:         #e8eaed;
    --m-text-2:       #bdc1c6;
    --m-text-3:       #9aa0a6;
    --m-text-4:       #5f6368;
    /* Brand violet primary (Material 3 dark, brand-tinted) */
    --m-primary:      #b39ddb;          /* on-surface violet — soft for dark bg */
    --m-primary-bold: #7446f4;          /* full brand violet */
    --m-primary-hover:#c5b0e6;
    --m-primary-bg:   rgba(116, 70, 244, 0.16);  /* tonal violet bg */
    --m-on-primary:   #ffffff;
    --m-pink:         #de70da;
    --m-gradient:     linear-gradient(135deg, #7446f4 0%, #de70da 100%);
    --m-gradient-hover: linear-gradient(135deg, #8b5cf6 0%, #e98ae5 100%);

    /* Legacy variable names — preserved so existing components don't break,
       redefined to map onto the M3 dark palette. */
    --global-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --global-border-radius: 12px;
    --button-border-radius: 999px;
    --color-border:   var(--m-border);
    --line-height-default: 1.55;
    --glass-bg:       var(--m-surface);
    --glass-border:   var(--m-border);
    --glass-bg-hover: var(--m-surface-2);
    --accent-gradient: var(--m-gradient);            /* actual violet→pink gradient */
    --accent-purple:  var(--m-primary-bold);          /* solid brand violet #7446f4 */
    --text-secondary: var(--m-text-2);
    --text-muted:     var(--m-text-3);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--m-surface-3);
    border-radius: 999px;
    border: 2px solid var(--m-bg);
}
::-webkit-scrollbar-thumb:hover { background: #5f6368; }
* { scrollbar-width: thin; scrollbar-color: var(--m-surface-3) transparent; }

/* ─── Page base ─── */
html, body {
    background: var(--m-bg) !important;
    color: var(--m-text-2) !important;
    overflow-x: hidden;
    scroll-behavior: smooth;

    /* Bootstrap link tokens — point them at brand violet so any unstyled <a>
       inherits violet text instead of Bootstrap's #0d6efd blue. */
    --bs-link-color: var(--m-primary);
    --bs-link-hover-color: var(--m-primary-hover);
    --bs-link-color-rgb: 179, 157, 219;
    --bs-link-hover-color-rgb: 197, 176, 230;
}

::selection {
    background: rgba(116, 70, 244, 0.28);
    color: #fff;
}

/* ─── Global anchor reset ─── */
/* Plain links across all pages inherit the parent text color rather than
   Bootstrap blue. Pages can opt in to brand violet via .btn-text or similar. */
a, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}
a:hover, a:focus {
    color: var(--m-primary);
    text-decoration: none;
}
/* Anchors that visually act as links (in body copy, footer, nav, etc.)
   should be readable — set to muted text by default; brand colour on hover. */
p a, li a, .m-footer a, .nav-link, .text-muted a {
    color: var(--m-text-2);
}
p a:hover, li a:hover, .m-footer a:hover, .nav-link:hover, .text-muted a:hover {
    color: var(--m-text);
}

/* Bootstrap `text-muted` cleanup */
.text-muted { color: var(--m-text-3) !important; }
.link-dark { color: var(--m-text-3) !important; text-decoration: none; }
.link-dark:hover { color: var(--m-text) !important; }

/* ─── Header ─── */
header {
    border-bottom: 0 !important;
}
header.blurred {
    background-color: rgba(32, 33, 36, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-border-soft) !important;
}

/* ─── Hero ─── */
.hero-section {
    background: var(--m-bg);
    min-height: 100vh;
    border-radius: 0;
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}
.hero-section::before,
.hero-section::after { content: none; }

.hero-section > .container,
.hero-section > * {
    position: relative;
    z-index: 1;
}

/* No alternating section tints — keep a flat, calm rhythm */
section:nth-child(even) { background: transparent; }

/* ─── Type ─── */
.hero-text {
    font-size: 56px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em;
    line-height: 1.1 !important;
    color: var(--m-text);
}

.hero-text-secondary {
    font-size: 40px;
    font-weight: 500 !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--m-text);
}

.sub-hero-text {
    font-size: 32px;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: var(--m-text);
}

.hero-text-description {
    font-size: 17px;
    color: var(--m-text-2);
    line-height: 1.55;
}

/* ─── Cards ─── */
.glass-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--global-border-radius);
    transition: var(--global-transition);
    box-shadow: none;
}
.glass-card:hover {
    background: var(--m-surface-2);
    border-color: var(--m-surface-3);
    box-shadow: none;
}

.feature-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--global-border-radius);
    padding: 24px;
    text-align: left;
    transition: var(--global-transition);
    cursor: default;
}
.feature-card:hover {
    background: var(--m-surface-2);
    border-color: var(--m-surface-3);
    transform: none;
    box-shadow: none;
}
.feature-card img {
    transition: transform 0.2s ease;
}

/* ─── Buttons (legacy classes used across pages) ─── */
/* `.bg-black` is the project's primary CTA class — brand violet→pink gradient.
   Selectors stack `.el-button` so it wins over `.el-button--default` regardless of
   source order. Descendants forced white so nested <span>/<i> stay readable. */
.bg-black,
.el-button.bg-black,
.gradient-button,
.el-button.gradient-button {
    background: var(--m-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(116, 70, 244, 0.28) !important;
    transition: background-position 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease,
                transform 0.15s ease !important;
}
.bg-black:hover,
.el-button.bg-black:hover,
.gradient-button:hover,
.el-button.gradient-button:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 8px 24px rgba(116, 70, 244, 0.38) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* Force white on every nested element inside gradient buttons —
   prevents Element UI's `.el-button span { color }` and any other inheritance
   from rendering text as muted/blue/violet on top of the gradient. */
.bg-black, .bg-black *,
.el-button.bg-black, .el-button.bg-black *,
.gradient-button, .gradient-button *,
.el-button.gradient-button, .el-button.gradient-button * {
    color: #fff !important;
}
.bg-black .text-white,
.gradient-button .text-white,
.bg-black i,
.gradient-button i { color: #fff !important; }

.b-0 { border: none !important; }

/* ─── Accents ─── */
.divider-white {
    border-bottom: 1px solid var(--m-border-soft);
}

.sub-header {
    font-weight: 500 !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-primary);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}

.gradient-text {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: var(--m-primary);
}

/* ─── Point lists ─── */
.point-list-wrapper {
    font-size: 15px;
    line-height: var(--line-height-default);
    width: 320px;
}
.point-list {
    padding: 12px 16px;
    margin: 0 0 8px 0;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 8px;
    transition: var(--global-transition);
    cursor: default;
}
.point-list:hover {
    background: var(--m-surface-2);
    border-color: var(--m-surface-3);
    transform: none;
}
.point-list .bx {
    color: var(--m-primary);
    font-size: 18px;
}

/* ─── Thumbnails ─── */
.thumbnail-bg-board {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    margin: 0 10px;
    padding-top: 60px;
    overflow: hidden;
    height: 600px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    transition: var(--global-transition);
}
.thumbnail-bg-board:hover {
    border-color: var(--m-surface-3);
}
.thumbnail-28,
.thumbnail-29 {
    background-color: var(--m-surface);
    background-position: bottom center;
    background-size: cover;
}
.thumbnail-28 { background-image: url("https://butai-assets.s3.us-west-2.amazonaws.com/images/image-28.jpg"); }
.thumbnail-29 { background-image: url("https://butai-assets.s3.us-west-2.amazonaws.com/images/image-29.jpg"); }

/* ─── Avatar stack ─── */
.transforming-people { display: flex; gap: 0; }
.transforming-people .item {
    text-align: left;
    width: auto;
    align-self: center;
}
.transforming-people .item:not(:first-child) { margin-left: -14px; }
.transforming-people .item-container img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid var(--m-bg);
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.transforming-people .item-container img:hover {
    transform: scale(1.06);
    z-index: 2;
    position: relative;
}

/* ─── Hero thumbnail ─── */
.hero-thumbnail {
    position: absolute;
    width: 650px;
    filter: none;
    transition: transform 0.3s ease;
}
.hero-thumbnail:hover { transform: scale(1.01); }

/* ─── Services container ─── */
.ai-services .container {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 56px 40px;
}

/* ─── Query chip marquee ─── */
.q-list-item > div {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 999px;
    padding: 8px 16px;
    transition: var(--global-transition);
    cursor: pointer;
    white-space: nowrap;
    color: var(--m-text-2);
}
.q-list-item > div:hover {
    background: var(--m-surface-2);
    border-color: var(--m-surface-3);
    transform: none;
}

/* ─── CTA banner ─── */
.get-started-hero { height: auto; padding: 80px 0; }
.get-started-hero .container,
.cta-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 56px 32px;
}

/* ─── Scroll-in animation (kept, milder) ─── */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-up-delay-1 { transition-delay: 0.05s; }
.fade-up-delay-2 { transition-delay: 0.1s; }
.fade-up-delay-3 { transition-delay: 0.15s; }
.fade-up-delay-4 { transition-delay: 0.2s; }
.fade-up-delay-5 { transition-delay: 0.25s; }

/* Glow class neutralized (no purple glow) */
.glow-purple { box-shadow: none; }

/* ─── Spacing helpers ─── */
.pt-md-100 { padding-top: 96px; }
.pt-100 { padding-top: 96px; }

/* ─── Element-UI button overrides for Google look ─── */
.el-button {
    border-radius: var(--button-border-radius) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: var(--global-transition) !important;
}
.el-button--default {
    background: transparent !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text) !important;
}
.el-button--default:hover,
.el-button--default:focus {
    background: var(--m-surface-2) !important;
    border-color: var(--m-surface-3) !important;
    color: var(--m-text) !important;
}
/* Element UI's primary type defaults to its own blue. Re-skin to brand gradient. */
.el-button--primary,
.el-button--info,
.el-button--success {
    background: var(--m-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(116, 70, 244, 0.28) !important;
}
.el-button--primary:hover,
.el-button--primary:focus,
.el-button--info:hover,
.el-button--info:focus,
.el-button--success:hover,
.el-button--success:focus {
    background-position: 100% 50% !important;
    box-shadow: 0 8px 24px rgba(116, 70, 244, 0.38) !important;
    color: #fff !important;
}
/* Force every span/icon inside any el-button white when on the gradient */
.el-button.bg-black span,
.el-button.bg-black i,
.el-button.gradient-button span,
.el-button.gradient-button i,
.el-button--primary span,
.el-button--primary i { color: #fff !important; }

/* Bootstrap btn-primary (rare, just in case) */
.btn-primary {
    background: var(--m-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(116, 70, 244, 0.28) !important;
}
.btn-primary:hover {
    background-position: 100% 50% !important;
    box-shadow: 0 8px 24px rgba(116, 70, 244, 0.38) !important;
    color: #fff !important;
}

/* ─── Responsive ─── */
@media only screen and (max-width: 768px) {
    .mt-sm-0 { margin-top: 0 !important; }
    .mt-xs-0 { margin-top: 0 !important; }
    .mb-sm-50 { margin-bottom: 40px !important; }

    div[class*="thumbnail-"] img { width: 100% !important; }

    .container { padding-left: 20px !important; padding-right: 20px !important; }
    .pt-md-100, .pt-100 { padding-top: 40px !important; }

    .hero-text { font-size: 32px !important; }
    .hero-text-secondary { font-size: 26px !important; }
    .sub-hero-text { font-size: 22px !important; }

    .hero-thumbnail { position: relative; width: 100%; }
    .hero-section { min-height: auto; padding-bottom: 40px; padding-top: 88px; }

    .lead { font-size: 13px !important; }
    .transformation-lb span { font-size: 14px !important; }
    .point-list-wrapper { width: 100%; }

    .thumbnail-bg-board { height: 400px; margin: 0; }

    .ai-services .container { padding: 32px 20px; border-radius: 12px; }
    .get-started-hero .container,
    .cta-card { padding: 40px 24px; border-radius: 12px; }
    .feature-card { padding: 20px; }
}

/* ─── GSAP-pinned section bg fallback ─── */
.pin-spacer { background: transparent !important; }
[style*="overflow: hidden"] { background: var(--m-bg); }

/* ══════════════════════════════════════
   LIGHT THEME (kept minimal — Google light surface)
   Triggered by `body.light-theme` from header toggle.
   ══════════════════════════════════════ */
body.light-theme,
body.light-theme html {
    background: #ffffff !important;
    color: #3c4043 !important;
    --m-bg:           #ffffff;
    --m-surface:      #f8f9fa;
    --m-surface-2:    #f1f3f4;
    --m-surface-3:    #e8eaed;
    --m-border:       #dadce0;
    --m-border-soft:  rgba(0,0,0,0.06);
    --m-text:         #202124;
    --m-text-2:       #3c4043;
    --m-text-3:       #5f6368;
    --m-text-4:       #80868b;
    --m-primary:      #7446f4;
    --m-primary-bold: #5b35d8;
    --m-primary-hover:#5b35d8;
    --m-primary-bg:   rgba(116, 70, 244, 0.10);
    --m-on-primary:   #ffffff;
}

body.light-theme ::selection {
    background: rgba(26, 115, 232, 0.18);
    color: #202124;
}

body.light-theme .text-white { color: var(--m-text) !important; }
body.light-theme .nav-link span,
body.light-theme .nav-text { color: var(--m-text) !important; }

body.light-theme header.blurred {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid var(--m-border-soft) !important;
}
</content>