/* ÆRA visual system — AND EMILI */
:root {
    --primary: #986cff;
    --secondary: #00ab98;
    --tertiary: #ffca08;
    --accent1: #ff4b84;
    --accent2: #8ce3fa;
    --dark: #19191d;
    --light: #f7f5f0;
    --gray: #b9b6c0;
    --brand-purple: #986cff;
    --brand-purple-light: #ae8cff;
    --brand-purple-whisper: #f1ecff;
    --text-dark: #19191d;
    --text-body: #56545e;
    --shadow-soft: 0 14px 35px rgba(22, 18, 38, .07);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--dark);
    background: var(--light);
    line-height: 1.55;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -.04em;
    text-transform: none;
}

.mono { font-family: 'IBM Plex Mono', monospace; }
.container { max-width: 1280px; padding: 0 clamp(24px, 4vw, 56px); }
.section { padding: clamp(88px, 9vw, 136px) 0; }
.section--alt { background: #f3f0eb; }
.section--dark { background: var(--dark); color: #f7f5f0; }
.section__heading {
    max-width: 920px;
    margin-bottom: clamp(42px, 5vw, 68px);
    text-align: left;
}
.section__heading::after,
.section--alt .section__heading::after,
.faq-section .section__heading::after { display: none; }
.section__heading h2,
.section--alt .section__heading h2,
.faq-section .section__heading h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(2.9rem, 5.5vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1.03;
}
.section__subtitle {
    max-width: 660px;
    margin-top: 1.4rem;
    color: var(--text-body);
    font-size: clamp(1.06rem, 1.4vw, 1.23rem);
    line-height: 1.6;
}
.section--dark .section__subtitle { color: #c5c2cd; }
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    font: 600 .72rem/1.2 'IBM Plex Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6d54ad;
}
.section--dark .eyebrow { color: #bea6ff; }
.eyebrow__line { display: inline-block; width: 26px; height: 2px; background: currentColor; }

/* Navigation */
.nav,
.nav.nav--sticky {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    transform: none;
    border: 0;
    border-bottom: 1px solid rgba(25,25,29,.13);
    border-radius: 0;
    background: rgba(247,245,240,.95);
    box-shadow: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.nav::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #986cff 0 35%, #00ab98 35% 60%, #ffca08 60% 77%, #8ce3fa 77% 91%, #ff83af 91% 100%);
}
.nav__container {
    max-width: 1280px;
    height: 78px;
    padding: 0 clamp(24px, 4vw, 56px);
    margin: 0 auto;
    gap: 24px;
}
.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 0;
    color: var(--dark);
    text-decoration: none;
}
.nav__brand:hover { color: var(--dark); transform: none; text-shadow: none; }
.nav__brand-name {
    font: 2rem/.9 'Anton', Impact, sans-serif;
    letter-spacing: -.02em;
}
.nav__brand-by {
    display: inline-block;
    padding-left: 13px;
    border-left: 1px solid #aaa5ad;
    color: #6b6771;
    font: 500 .62rem/1.4 'IBM Plex Mono', monospace;
    letter-spacing: .01em;
}
.nav__brand-by strong { display: block; color: var(--dark); font-weight: 600; letter-spacing: .04em; }
.nav__menu { align-items: center; gap: clamp(16px, 2.5vw, 34px); margin-left: auto; }
.nav__item { margin: 0; }
.nav__link {
    color: #333039;
    font: 600 .78rem/1 'DM Sans', sans-serif;
    letter-spacing: .01em;
    text-transform: none;
}
.nav__link:hover { color: #7642e8; text-shadow: none; }
.nav__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 42px;
    padding: 0 16px;
    background: var(--dark);
    color: #fff;
    border: 1px solid var(--dark);
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 700;
    transition: background .2s, color .2s;
}
.nav__contact:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.nav__mobile-icon { border: 0; background: transparent; color: var(--dark); }
.mobile-menu {
    top: calc(100% + 1px);
    right: 24px;
    width: min(320px, calc(100vw - 48px));
    padding: 12px;
    background: #fff;
    border: 1px solid #d7d2dd;
    border-radius: 4px;
    box-shadow: 0 24px 50px rgba(20,16,29,.15);
}
.mobile-menu__item { margin: 0; }
.mobile-menu__link {
    color: var(--dark);
    padding: 13px 14px;
    border-radius: 3px;
    font-weight: 600;
}
.mobile-menu__link:hover { background: #f2edff; }
.mobile-menu__link--contact { margin-top: 8px; background: var(--dark); color: #fff; }
.mobile-menu__link--contact:hover { background: var(--primary); color: #fff; }
.side-nav { display: none; }

/* Hero */
.hero {
    display: block;
    min-height: 0;
    height: auto;
    padding: 148px 0 28px;
    background: #f7f5f0;
    color: var(--dark);
    overflow: hidden;
}
.hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .97fr);
    align-items: center;
    gap: clamp(35px, 5vw, 90px);
    min-height: 570px;
    padding-bottom: 60px;
}
.hero__content {
    max-width: none;
    padding: 0;
    text-align: left;
}
.hero__eyebrow { margin-bottom: 30px; }
.hero__title {
    margin: 0 0 22px;
    color: var(--dark);
    font: clamp(7.7rem, 13vw, 12.5rem)/.79 'Anton', Impact, sans-serif;
    letter-spacing: -.035em;
    text-shadow: none;
}
.hero__title-dot { color: var(--primary); }
.hero__statement {
    max-width: 550px;
    font-size: clamp(2.05rem, 3.5vw, 3.45rem);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1.06;
}
.hero__subtitle {
    max-width: 480px;
    margin: 23px 0 30px;
    color: #5b5860;
    font: 400 clamp(1.07rem, 1.35vw, 1.24rem)/1.55 'DM Sans', sans-serif;
    hyphens: none;
    word-break: normal;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 50px;
    padding: 12px 20px;
    border-radius: 4px;
    font: 700 .88rem/1.2 'DM Sans', sans-serif;
    letter-spacing: -.01em;
    transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary,
.playground .btn.btn--primary {
    background: var(--dark) !important;
    border: 1px solid var(--dark) !important;
    color: #fff !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.btn--primary:hover,
.playground .btn.btn--primary:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.btn--secondary {
    background: transparent;
    border: 1px solid var(--dark);
    color: var(--dark);
}
.btn--secondary:hover { background: #ebe3ff; color: var(--dark); }
.hero__cta-group { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.hero__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid #bdb9bd;
    color: #5c5960;
    font: 500 .68rem/1.2 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero__art {
    width: 100%;
    max-width: 548px;
    justify-self: end;
    border: 1px solid var(--dark);
    background: var(--primary);
    box-shadow: 16px 16px 0 #dfd6f6;
}
.hero__art-header,
.hero__art-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 18px;
    background: var(--dark);
    color: #fff;
    font: 500 .61rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .07em;
}
.hero__art-footer { background: #f9f7f2; color: var(--dark); border-top: 1px solid var(--dark); }
.hero__art-dots { display: flex; gap: 5px; }
.hero__art-dots i { display: block; width: 9px; height: 9px; border: 1px solid var(--dark); background: var(--secondary); }
.hero__art-dots i:nth-child(2) { background: var(--tertiary); }
.hero__art-dots i:nth-child(3) { background: #ff83af; }
.hero__art-canvas {
    position: relative;
    height: clamp(410px, 42vw, 495px);
    background-color: var(--primary);
    background-image: linear-gradient(rgba(0,0,0,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.065) 1px, transparent 1px);
    background-size: 36px 36px;
}
.hero__art-ring {
    position: absolute;
    top: 47%; left: 47%;
    width: 360px; height: 360px;
    border: 1px solid rgba(25,25,29,.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.hero__art-ring--two { width: 460px; height: 460px; }
.hero__art-core {
    position: absolute;
    top: 50%; left: 48%;
    display: grid;
    place-items: center;
    width: 254px; height: 254px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--dark);
    border-radius: 50%;
    background: #cfb7ff;
    color: var(--dark);
    font: 12rem/.8 'Anton', Impact, sans-serif;
    box-shadow: 10px 10px 0 rgba(30, 24, 45, .15);
}
.hero__art-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dark);
    box-shadow: 7px 7px 0 rgba(25,25,29,.18);
    color: var(--dark);
}
.hero__art-card--source { top: 50px; right: -18px; width: 235px; padding: 18px; background: #fff; transform: rotate(4deg); }
.hero__art-card--answer { bottom: 30px; left: -24px; width: 273px; padding: 18px; background: #ffda55; transform: rotate(-4deg); }
.hero__art-label { margin-bottom: 12px; font: 600 .59rem/1 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.hero__art-card strong { font-size: 1.2rem; letter-spacing: -.04em; }
.hero__source-list { display: flex; gap: 5px; margin-top: 16px; }
.hero__source-list span { padding: 5px 6px; border: 1px solid #ccc7d0; font: 500 .56rem/1 'IBM Plex Mono', monospace; }
.hero__art-rule { display: block; width: 100%; height: 5px; margin-top: 12px; background: rgba(25,25,29,.32); }
.hero__art-rule--short { width: 70%; margin-top: 6px; }
.hero__art-card small { margin-top: 16px; font: 500 .58rem/1 'IBM Plex Mono', monospace; }
.hero__art-coordinate { position: absolute; right: 12px; bottom: 14px; font: 500 .55rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; }

/* Introduction */
.intro-section { background: #fff; }
.intro__layout { display: grid; grid-template-columns: .88fr 1.12fr; align-items: start; gap: clamp(50px, 7vw, 120px); }
.intro-section .section__heading { margin: 0; }
.intro-section h2 em { color: var(--primary); font-style: normal; }
.intro__content { display: block; max-width: none; margin: 0; text-align: left; }
.intro__lead { max-width: 700px; margin-bottom: 20px; font-size: clamp(1.45rem, 2.15vw, 2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.3; }
.intro__text { max-width: 670px; margin-bottom: 38px; color: var(--text-body); font-size: 1.12rem; line-height: 1.72; }
.key-points { display: block; margin: 0; }
.key-point {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 66px;
    border-top: 1px solid #dedbe1;
    font-size: 1rem;
    font-weight: 600;
}
.key-point:last-child { border-bottom: 1px solid #dedbe1; }
.key-point__number { color: #8054e4; font: 600 .72rem/1 'IBM Plex Mono', monospace; }

/* Interactive capability demos */
#capabilities { background: #f0eee9; }
#capabilities .section__heading { max-width: 820px; text-align: left; }
#capabilities .capabilities { gap: 24px; }
#capabilities .capability--split,
#capabilities .capability--split.capability--left-text,
#capabilities .capability--split.capability--right-text {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    margin: 0;
    overflow: visible;
    background: #fff;
    border: 1px solid #d8d4d9;
    border-radius: 5px;
    box-shadow: none;
}
#capabilities .capability--split .capability__text,
#capabilities .capability--split.capability--left-text .capability__text,
#capabilities .capability--split.capability--right-text .capability__text {
    order: 0;
    min-width: 0;
    padding: clamp(30px, 3.5vw, 52px) !important;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid #e0dce3 !important;
    border-radius: 0;
    box-shadow: none;
    color: var(--dark) !important;
}
#capabilities .capability--split .capability__playground,
#capabilities .capability--split.capability--left-text .capability__playground,
#capabilities .capability--split.capability--right-text .capability__playground {
    order: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(22px, 2.5vw, 34px) !important;
    background: #f5f3f0 !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
#capabilities .capability--split .capability__icon {
    position: static !important;
    display: inline-grid;
    place-items: center;
    width: 50px; height: 50px;
    margin-bottom: 25px;
    border: 1px solid #d9d0ec;
    border-radius: 4px;
    background: #f0eaff;
    color: #7343da !important;
    font-size: 1.25rem !important;
}
#capabilities .capability--split .capability__title {
    color: var(--dark) !important;
    font-size: clamp(1.9rem, 2.7vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.055em;
    text-transform: none;
}
#capabilities .capability--split .capability__snippet {
    max-width: none;
    color: #392f43 !important;
    font: 600 1.12rem/1.5 'DM Sans', sans-serif;
}
#capabilities .capability--split .capability__description p {
    color: #66616b !important;
    font-size: .95rem;
    line-height: 1.65;
}
#capabilities .capability--split .playground {
    width: 100%;
    padding: clamp(22px, 2.5vw, 34px) !important;
    background: #fff !important;
    border: 1px solid #e0dce3 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 25px rgba(24,20,34,.035) !important;
}
.playground__title { font-size: 1rem; letter-spacing: -.02em; }
.playground__input, .playground__select {
    background: #fbfaf8 !important;
    border: 1px solid #d6d1db !important;
    border-radius: 4px !important;
}
.playground__output { border-radius: 4px !important; border-color: #ddd9e0 !important; }

/* Playground results */
#capabilities .result-panel {
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid #dcd6e2;
    border-top: 4px solid var(--primary);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(28, 22, 37, .06);
}
.result-panel__header,
.json-visualizer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 19px 22px;
    background: #f8f5fc;
    border-bottom: 1px solid #e6e0ed;
}
.result-panel__heading,
.json-visualizer__heading { min-width: 0; }
.result-panel__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #7655bf;
    font: 700 .64rem/1.2 'IBM Plex Mono', monospace;
    letter-spacing: .13em;
}
.result-panel__title,
.json-visualizer__title {
    margin: 0;
    color: #211d28;
    font: 700 1.17rem/1.22 'DM Sans', sans-serif;
    letter-spacing: -.04em;
    text-transform: none;
}
.result-panel__actions,
.json-visualizer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.result-panel__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    color: #256b5e;
    background: #e8f7f2;
    border: 1px solid #c6e7dc;
    border-radius: 3px;
    font: 700 .64rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.result-panel__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #00a78c; }
.result-panel__status--active { color: #6f4fc1; background: #eee8ff; border-color: #d9c9ff; }
.result-panel__status--active .result-panel__status-dot { background: var(--primary); animation: result-pulse 1.4s ease-in-out infinite; }
@keyframes result-pulse { 50% { opacity: .35; transform: scale(.7); } }
.result-panel__copy,
.json-visualizer__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 10px;
    color: #27232c;
    background: #fff;
    border: 1px solid #d9d2df;
    border-radius: 3px;
    font: 700 .68rem/1 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.result-panel__copy:hover,
.json-visualizer__copy:hover { border-color: var(--primary); background: #f4efff; }
.result-panel__body { padding: clamp(20px, 2.1vw, 29px) 22px; }
.result-panel__prose {
    color: #2e2932;
    font: 400 1rem/1.7 'DM Sans', sans-serif;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.result-panel__prose p { margin: 0 0 1em; }
.result-panel__prose p:last-child { margin-bottom: 0; }
.result-panel__prose ul,
.result-panel__prose ol { padding-left: 1.35em; margin: .6em 0; }
.result-panel__prose li { margin: .25em 0; }
.result-panel__prose strong { color: #201c26; font-weight: 700; }
.result-panel__prose a { color: #6548a8; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.result-panel__prose pre { max-width: 100%; overflow-x: auto; padding: 15px; background: #242029; color: #f6f0ff; border-radius: 3px; }
.result-panel__prose code { font-family: 'IBM Plex Mono', monospace; font-size: .88em; }
.result-panel__prose blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--primary); color: #5a5162; }
.result-panel__waiting { display: flex; align-items: center; gap: 13px; min-height: 60px; color: #655e6c; font-size: .94rem; }
.result-panel__waiting .loader { flex: 0 0 auto; }
.result-panel__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: #fbfaf8;
    border-top: 1px solid #ece8ed;
    color: #77717e;
    font: 600 .63rem/1.3 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
}
.result-panel__footer strong { color: #342d3a; font-size: .77rem; letter-spacing: 0; }
.result-panel__citation-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 19px;
    padding: 11px 13px;
    color: #645583;
    background: #f6f1ff;
    border-left: 2px solid var(--primary);
    font-size: .76rem;
    line-height: 1.5;
}
.result-panel__citation-note i { flex: 0 0 auto; margin-top: 2px; }
.result-panel__sources { margin-top: 26px; }
.result-panel__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ded9e2;
    color: #63586f;
    font: 700 .65rem/1.2 'IBM Plex Mono', monospace;
    letter-spacing: .11em;
}
.result-panel__section-heading strong { color: #7b60be; font-size: .76rem; }
#capabilities .sources { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; background: transparent; border: 0; }
#capabilities .source { min-width: 0; padding: 13px 15px; background: #f8fbfa; border: 1px solid #dcebe6; border-left: 3px solid var(--secondary); border-radius: 3px; }
.source__topline { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 5px; }
.source__number { color: #078d7e; font: 700 .68rem/1 'IBM Plex Mono', monospace; }
.source__path { overflow: hidden; color: #777880; font: 500 .66rem/1.2 'IBM Plex Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
#capabilities .source__title { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: #1e5d55; font: 700 .91rem/1.3 'DM Sans', sans-serif; text-decoration: none; overflow-wrap: anywhere; }
#capabilities a.source__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.source__title i { font-size: .68rem; }
.source__excerpt { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: #5e6064; font: 400 .8rem/1.5 'DM Sans', sans-serif; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sources__empty { margin: 5px 0; color: #77717e; font-size: .82rem; }
.result-panel__prose .citeable-sentence { background: #f3efff; border-bottom: 1px solid #a58de1; border-radius: 2px; padding: 1px 2px; }
.result-panel__prose .citeable-sentence:hover { background: #e8dcff !important; box-shadow: none !important; border-bottom-color: #7655bf; }

/* Structured output */
#capabilities .json-visualizer { border-top-color: var(--secondary); }
#capabilities .json-visualizer__header { background: #f3faf8; border-bottom-color: #deebe7; }
.json-visualizer__toggle { display: inline-flex; gap: 2px; padding: 3px; background: #e8f1ef; border: 1px solid #d4e5df; border-radius: 3px; }
.json-visualizer__toggle-btn { padding: 7px 10px; color: #526960; background: transparent; border: 0; border-radius: 2px; font: 700 .65rem/1 'IBM Plex Mono', monospace; letter-spacing: .03em; }
.json-visualizer__toggle-btn--active { color: #1f5d52; background: #fff; box-shadow: 0 1px 4px rgba(20, 50, 43, .12); }
.json-visualizer__content { padding: 16px 22px 22px; }
.json-rendered { font-family: 'DM Sans', sans-serif; }
.json-node { margin: 0; border-bottom: 1px solid #efecf0; }
.json-node:last-child { border-bottom: 0; }
.json-node__header { min-height: 43px; padding: 8px 2px; border-radius: 2px; cursor: default; }
.json-node__header[role="button"] { cursor: pointer; }
.json-node__header:hover { background: #f7f9f8; }
.json-node__header:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.json-node__key,
.json-simple-key { color: #302b35; font-size: .86rem; font-weight: 700; }
.json-node__icon { color: #678e83; }
.json-node__expand { color: #8c8792; font-size: .78rem; }
.json-node__badge { padding: 3px 7px; color: #26796c; background: #e4f5ef; border-radius: 2px; font: 600 .63rem/1 'IBM Plex Mono', monospace; }
.json-node__value,
.json-node__value--string,
.json-node__value--number,
.json-node__value--boolean,
.json-node__value--null { overflow-wrap: anywhere; }
.json-node__value--string { color: #237c69; }
.json-node__value--number { color: #7255b6; }
.json-node__value--boolean { color: #9a6013; }
.json-node__children { margin: 3px 0 10px 14px; padding-left: 15px; border-left: 1px solid #d8e8e2; }
.json-array-item { margin: 7px 0; padding: 9px 11px; background: #f8fbfa; border: 1px solid #e4efeb; border-radius: 2px; }
.json-simple-card { padding: 1px 15px; background: #fafcfb; border: 1px solid #e2ede8; border-radius: 2px; }
.json-simple-item { gap: 14px; border-bottom-color: #e4ebe8; }
.json-copy-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #65606a; opacity: 1; }
.json-copy-btn:hover { color: #6952ad; background: #efebf8; }
.json-raw { max-height: 470px; overflow: auto; padding: 18px; color: #eee9f2; background: #232029; border-radius: 3px; font: 400 .76rem/1.55 'IBM Plex Mono', monospace; white-space: pre; }
.result-panel__explanation { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0 0; padding: 11px 13px; color: #696475; background: #f8f5fc; border-left: 2px solid #b9a3e6; font-size: .77rem; line-height: 1.5; }
.result-panel__explanation i { flex: 0 0 auto; margin-top: 3px; color: #8069b5; }
#capabilities .file-upload__label {
    padding: 11px 18px;
    background: var(--dark);
    border: 1px solid var(--dark);
    border-radius: 4px;
    color: #fff;
    font: 700 .83rem/1.3 'DM Sans', sans-serif;
}
#capabilities .file-upload:hover .file-upload__label { background: var(--primary); border-color: var(--primary); box-shadow: none; transform: none; }
.btn--animated::before { display: none; }
.btn--pulse { animation: none; }
#capabilities .capability--split:nth-child(5n+2) .capability__icon { background: #e3f8f4; border-color: #b4dfd5; color: #007d72 !important; }
#capabilities .capability--split:nth-child(5n+3) .capability__icon { background: #fff4d6; border-color: #ead58a; color: #856300 !important; }
#capabilities .capability--split:nth-child(5n+4) .capability__icon { background: #e9faff; border-color: #b1dce9; color: #1d7791 !important; }
#capabilities .capability--split:nth-child(5n+5) .capability__icon { background: #ffe8ef; border-color: #e9b6c7; color: #b52d5b !important; }

/* Highlights and assistant */
#highlights { background: #19191d; }
#highlights .section__heading h2 { color: #fff; }
#highlights .highlights { gap: 16px; margin-top: 0; }
#highlights .highlight {
    padding: clamp(28px, 3vw, 40px);
    background: #242429;
    border: 1px solid #444149;
    border-top: 4px solid var(--primary);
    border-radius: 3px;
    box-shadow: none;
    text-align: left;
}
#highlights .highlight:nth-child(2) { border-top-color: var(--secondary); }
#highlights .highlight:nth-child(3) { border-top-color: var(--tertiary); }
#highlights .highlight__icon { margin-bottom: 25px; color: #b99aff; font-size: 1.8rem; }
#highlights .highlight:nth-child(2) .highlight__icon { color: #50d6c8; }
#highlights .highlight:nth-child(3) .highlight__icon { color: #ffd75f; }
#highlights .highlight__title { color: #fff; font-size: 1.4rem; line-height: 1.2; }
#highlights .highlight p { color: #c3c0c8; font-size: .97rem; line-height: 1.68; }
#highlights .highlight h4 { color: #fff; font-size: .78rem; letter-spacing: .02em; }
#highlights .persona-option { border-color: #635d6a; }
#highlights .persona-option > div { color: #f4f2f8; }
#chatbot.section { padding: 10px 0 130px !important; background: #19191d !important; }
#chatbot .section__heading { max-width: 750px; margin: 0 auto 45px; text-align: center; }
#chatbot .section__heading h2 { color: #fff; font-size: clamp(2.6rem, 4.8vw, 4.5rem); }
#chatbot .eyebrow { justify-content: center; }
#chatbot .chatbot-container { border: 1px solid #5a5367 !important; border-radius: 5px !important; box-shadow: 14px 14px 0 #42364d !important; }
#chatbot .chatbot-container { overflow: hidden; background: #fff; }
.chatbot__header { display: flex; align-items: center; gap: 16px; padding: 21px 24px; background: #fff; border-bottom: 1px solid #e2dde7; }
.chatbot__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; color: #1d1923; background: var(--primary); border-radius: 3px; font: 700 2rem/1 'DM Sans', sans-serif; }
.chatbot__identity { min-width: 0; flex: 1; }
.chatbot__eyebrow { color: #7a60ad; font: 700 .62rem/1.2 'IBM Plex Mono', monospace; letter-spacing: .09em; }
.chatbot__identity h4 { margin: 2px 0 1px; color: #1d1923; font-size: 1.2rem; line-height: 1.2; }
.chatbot__identity p { margin: 0; color: #66606c; font-size: .73rem; }
.chatbot__identity a { color: #6745ae; text-decoration: underline; text-underline-offset: 2px; }
.chatbot__online { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #247664; background: #e9f7f1; border: 1px solid #cbe9da; border-radius: 3px; font: 700 .63rem/1 'IBM Plex Mono', monospace; text-transform: uppercase; white-space: nowrap; }
.chatbot__online span { width: 6px; height: 6px; border-radius: 50%; background: #00a98a; }
.chatbot__messages { height: 400px; overflow-y: auto; padding: 26px; background: #f8f6f3; }
.chat-message { display: flex; margin-bottom: 16px; }
.chat-message--user { justify-content: flex-end; }
.chat-message--bot { justify-content: flex-start; }
.chat-message__bubble { max-width: min(78%, 580px); padding: 14px 17px; color: #302b35; background: #fff; border: 1px solid #e0dce3; border-left: 3px solid var(--secondary); border-radius: 4px; box-shadow: 0 4px 13px rgba(28, 22, 37, .045); font-size: .94rem; line-height: 1.6; overflow-wrap: anywhere; }
.chat-message--user .chat-message__bubble { color: #211b2a; background: #e9ddff; border-color: #d8c3ff; border-left-color: var(--primary); }
.chat-message__content { white-space: pre-wrap; }
.chat-message__content p { margin: 0 0 .65em; }
.chat-message__content p:last-child { margin: 0; }
.chat-message__content ul,
.chat-message__content ol { margin: .6em 0; padding-left: 1.35em; }
.chat-message__content li { margin: .2em 0; }
.chat-message__content blockquote { margin: .8em 0; padding-left: 13px; border-left: 2px solid var(--primary); color: #62586e; }
.chat-message__content pre { max-width: 100%; overflow-x: auto; padding: 12px; color: #f4eefb; background: #28232e; border-radius: 2px; }
.chat-message__content code { font: .86em 'IBM Plex Mono', monospace; }
.chat-message__content a { color: #6444a5; text-decoration: underline; text-underline-offset: 2px; }
#chatbot .message-bubble-thinking { min-height: 50px; max-width: 78%; padding: 12px 16px; background: #fff; border: 1px solid #dfd8e8; border-left: 3px solid var(--primary); border-radius: 3px; box-shadow: none; animation: none; }
#chatbot .message-bubble-thinking::before,
#chatbot .message-bubble-thinking::after { display: none; }
#chatbot .thinking-text { color: #69568e; font: 600 .82rem/1.4 'DM Sans', sans-serif; }
.chatbot__composer { padding: 17px 22px; background: #fff; border-top: 1px solid #e2dde7; }
.chatbot__form { margin: 0; }
.chatbot__input-row { display: flex; align-items: flex-end; gap: 9px; }
.chatbot__input { flex: 1; min-width: 0; min-height: 46px; max-height: 110px; padding: 11px 14px; resize: none; color: #2b2631; background: #faf9f7; border: 1px solid #d9d2df; border-radius: 3px; font-size: .92rem; outline: 0; transition: border-color .2s; }
.chatbot__input:focus { border-color: var(--primary); }
.chatbot__input::placeholder { color: #8b8490; }
.chatbot__send { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; color: #1e1925; background: var(--primary); border: 1px solid var(--primary); border-radius: 3px; cursor: pointer; transition: background .2s, border-color .2s; }
.chatbot__send:hover:not(:disabled) { background: #ae8cff; border-color: #ae8cff; }
.chatbot__send:disabled { color: #908c95; background: #e9e6eb; border-color: #e9e6eb; cursor: not-allowed; }

/* Applications */
#examples { background: #fff; }
.examples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 0; }
.example-card {
    border: 1px solid #d9d6dc;
    border-radius: 4px;
    box-shadow: none;
    background: #fff;
    transition: transform .25s, box-shadow .25s;
}
.example-card:hover { transform: translateY(-4px); border-color: #b5a1e5; box-shadow: 0 16px 30px rgba(27,22,39,.08); }
.example-card__media { height: 205px; background: #eee8f6; border-bottom: 1px solid #d9d6dc; }
.example-card__gif { image-rendering: auto; animation: none; filter: none; }
.example-card__content { padding: 25px 25px 29px; }
.example-card__title { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.04em; }
.example-card__description { color: #615e66; font-size: .92rem; line-height: 1.6; }
#examples .text-center.mt-5 { margin-top: 48px; }
#examples .text-center.mt-5 .mono { color: #665d6c !important; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }

/* Model access */
#access.access-section { background: var(--primary); color: var(--dark); }
#access .section__heading { margin-bottom: 42px; }
#access .eyebrow { color: #282038; }
#access .section__subtitle { color: #312843; }
.access__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.access__card {
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: clamp(28px, 3.5vw, 45px);
    background: #fdfbf6;
    border: 1px solid var(--dark);
    border-radius: 3px;
    color: var(--dark);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.access__card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 rgba(25,25,29,.35); }
.access__card--huggingface { background: #ffdb57; }
.access__card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 600 .7rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .1em;
}
.access__card-top > span:last-child { font-size: 1.3rem; }
.access__card-icon { margin: 28px 0 15px; font-size: 2.4rem; line-height: 1; }
.access__card strong { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.055em; }
.access__card-description { max-width: 410px; margin-top: 15px; color: #4b4652; font-size: 1rem; line-height: 1.55; }
.access__card-action { display: flex; justify-content: space-between; margin-top: auto; padding-top: 24px; border-top: 1px solid #49414f; font-size: .88rem; font-weight: 700; }
.access__meta { margin-top: 28px; font: 600 .73rem/1.3 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.access__meta span { margin: 0 10px; }

/* Developer cards */
#features { background: #f5f3ee; color: var(--dark); }
#features .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
#features .features:has(.feature--expanded) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#features .feature { border: 1px solid #ddd9df; border-radius: 4px; box-shadow: none; }
#features .feature:hover { box-shadow: 0 12px 25px rgba(23,20,28,.06); }
#features .feature__header { min-height: 142px; background: #eee9fa; color: var(--dark); }
#features .feature__header::before { display: none; }
#features .feature__title { color: var(--dark); }
#features .feature__subtitle { color: #625b70; }
#features .feature__content { padding: 25px; }
#features .feature__image { width: 46px; height: 46px; border-radius: 4px; }
#features .feature__description { min-height: 78px; }
#features .feature__code-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 23px;
    padding: 15px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #d7d3da;
    color: #6439ca;
    text-align: left;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
}
#features .feature__code-toggle:hover { color: var(--dark); }
#features .feature__code-toggle span { font-size: 1.25rem; }
#features .feature__code { margin-top: 20px; }
#features .feature--expanded { grid-column: 1 / -1; }
#features .feature--expanded .feature__header { min-height: 0; }
#features .feature--expanded .feature__content {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr);
    column-gap: 32px;
    align-items: start;
}
#features .feature--expanded .feature__image,
#features .feature--expanded .feature__description,
#features .feature--expanded .feature__code-toggle { grid-column: 1; }
#features .feature--expanded .feature__code { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
#features .code-block { background: #1f2026; border-radius: 3px; }
#features .code-header { background: #303039; border-radius: 3px 3px 0 0; }
#features .code-block pre { max-height: 420px; overflow: auto; white-space: pre; }

/* FAQ */
#faq.faq-section { background: #fff; }
#faq .faq-intro { margin: -15px 0 48px; max-width: 650px; text-align: left; color: #5b5860; }
#faq .faq-list { max-width: none; border-bottom: 1px solid #d8d5db; }
#faq .faq-item { margin: 0; background: transparent; border-top: 1px solid #d8d5db; border-radius: 0; box-shadow: none; }
#faq .faq-item:hover { transform: none; box-shadow: none; }
#faq .faq-question {
    width: 100%;
    padding: 26px 0;
    background: transparent;
    border: 0;
    color: var(--dark);
    text-align: left;
    font-size: clamp(1.05rem, 1.65vw, 1.36rem);
    font-weight: 600;
    letter-spacing: -.025em;
}
#faq .faq-question:hover { background: transparent; color: #7443d9; }
#faq .faq-question i { margin-left: 20px; color: #7443d9; }
#faq .faq-answer { padding: 0 50px 28px 0; background: transparent; color: #595660; }
#faq .faq-contact { margin-top: 30px; text-align: left; color: #5b5860; }
#faq .faq-contact a, #faq .faq-intro a { color: #7443d9; }

/* Contact and footer */
#contact.section--alt { background: #ece5ff; }
#contact .section__heading { max-width: 900px; margin-bottom: 26px; text-align: left; }
#contact .faq-intro { max-width: 650px; margin: 0 0 36px; color: #51475e; text-align: left; }
.contact__form {
    max-width: 780px;
    margin: 0;
    padding: clamp(24px, 4vw, 48px);
    background: #fff;
    border: 1px solid #d0c4e4;
    border-radius: 4px;
    box-shadow: 12px 12px 0 #d5c4f9;
}
.contact__form .hsfc-Step__Content { padding: 0 !important; }
.hs-form-html .hs-input { border-color: #c9c2d4 !important; border-radius: 4px !important; }
.hs-form-html .hs-button { background: var(--dark) !important; border-radius: 4px !important; font-family: 'DM Sans', sans-serif; letter-spacing: 0; }
.hs-form-html .hs-button:hover { background: #7443d9 !important; }
.footer { position: relative; background: #19191d; padding: 80px 0 32px; }
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #986cff 0 35%, #00ab98 35% 60%, #ffca08 60% 77%, #8ce3fa 77% 91%, #ff83af 91% 100%);
}
.footer__content { gap: 45px; }
.footer__brand { margin-bottom: 9px; color: #fff; font: 4rem/.95 'Anton', Impact, sans-serif; letter-spacing: -.03em; }
.footer__content > div:first-child > .mono { max-width: 220px; color: #b9b4be; font-size: .72rem; line-height: 1.6; }
.footer__content h4 { margin-bottom: 22px; color: #bcb7c3; font: 600 .66rem/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer__link { margin-bottom: 11px; }
.footer__link a { color: #e2dfe6; font-size: .88rem; }
.footer__link a:hover { color: #c7b1ff; }
.footer__social-icon { width: 38px; height: 38px; border: 1px solid #57515d; border-radius: 4px; background: transparent; }
.footer__social-icon:hover { background: var(--primary); border-color: var(--primary); transform: none; }
.footer__bottom { text-align: left; color: #a29ca9; font-size: .75rem; }
.footer__agency-logo { width: 74px; height: 74px; object-fit: cover; display: block; margin-top: 20px; }

/* Keep content available without entrance effects. */
.scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

@media (max-width: 1050px) {
    .nav__menu { gap: 16px; }
    .nav__link { font-size: .73rem; }
    .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #features .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__art-card--source { right: -9px; }
    .hero__art-card--answer { left: -9px; }
}

@media (max-width: 900px) {
    .nav__menu, .nav__contact { display: none; }
    .nav__mobile-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto; cursor: pointer; }
    .hero { padding-top: 125px; }
    .hero__layout { grid-template-columns: 1fr; gap: 55px; }
    .hero__art { justify-self: center; max-width: 610px; }
    .hero__content { max-width: 680px; }
    .intro__layout { grid-template-columns: 1fr; gap: 40px; }
    #capabilities .capability--split,
    #capabilities .capability--split.capability--left-text,
    #capabilities .capability--split.capability--right-text { grid-template-columns: 1fr; }
    #capabilities .capability--split .capability__text,
    #capabilities .capability--split.capability--left-text .capability__text,
    #capabilities .capability--split.capability--right-text .capability__text {
        order: 0;
        border: 0 !important;
        border-bottom: 1px solid #e0dce3 !important;
    }
    #capabilities .capability--split .capability__playground,
    #capabilities .capability--split.capability--left-text .capability__playground,
    #capabilities .capability--split.capability--right-text .capability__playground { order: 1; }
    #highlights .highlights { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .container { padding: 0 22px; }
    .section { padding: 76px 0; }
    .section__heading h2,
    .section--alt .section__heading h2,
    .faq-section .section__heading h2 { font-size: clamp(2.65rem, 12vw, 4.3rem); }
    .nav__container { height: 68px; padding: 0 22px; }
    .nav__brand-name { font-size: 1.75rem; }
    .hero { padding: 122px 0 20px; }
    .hero__layout { gap: 44px; padding-bottom: 45px; }
    .hero__title { font-size: clamp(7rem, 27vw, 10rem); margin-bottom: 20px; }
    .hero__statement { font-size: clamp(2.1rem, 9vw, 3.1rem); }
    .hero__subtitle { margin: 18px 0 25px; }
    .hero__cta-group { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .hero__cta-group .btn,
    .hero__cta-group .btn--secondary { width: 100%; justify-content: space-between; margin: 0 !important; padding: 12px 17px; }
    .hero__art { box-shadow: 8px 8px 0 #dfd6f6; }
    .hero__art-canvas { height: 360px; }
    .hero__art-core { width: 190px; height: 190px; font-size: 9rem; }
    .hero__art-ring { width: 270px; height: 270px; }
    .hero__art-ring--two { width: 355px; height: 355px; }
    .hero__art-card--source { top: 30px; right: -5px; width: 170px; padding: 12px; }
    .hero__art-card--answer { bottom: 19px; left: -6px; width: 210px; padding: 12px; }
    .hero__art-card strong { font-size: .98rem; }
    .hero__source-list { flex-wrap: wrap; margin-top: 9px; }
    .hero__art-coordinate { display: none; }
    .hero__bottom { font-size: .57rem; }
    .intro__lead { font-size: 1.5rem; }
    .intro__text { font-size: 1rem; }
    .examples-grid, .access__grid { grid-template-columns: 1fr; }
    #features .features,
    #features .features:has(.feature--expanded) { grid-template-columns: 1fr; }
    #features .feature--expanded .feature__content { display: block; }
    #features .feature--expanded .feature__code { margin-top: 20px; }
    .example-card__media { height: 215px; }
    .access__card { min-height: 300px; }
    #capabilities .capability--split .capability__text,
    #capabilities .capability--split.capability--left-text .capability__text,
    #capabilities .capability--split.capability--right-text .capability__text { padding: 26px !important; }
    #capabilities .capability--split .capability__playground,
    #capabilities .capability--split.capability--left-text .capability__playground,
    #capabilities .capability--split.capability--right-text .capability__playground { padding: 15px !important; }
    #capabilities .capability--split .playground { padding: 20px !important; }
    .result-panel__header,
    .json-visualizer__header { align-items: flex-start; padding: 16px; }
    .result-panel__actions,
    .json-visualizer__actions { width: 100%; justify-content: space-between; }
    .result-panel__body,
    .json-visualizer__content { padding: 18px 16px; }
    .result-panel__footer { padding: 11px 16px; }
    .json-simple-item { align-items: flex-start; flex-direction: column; gap: 6px; }
    .json-raw { font-size: .69rem; }
    #chatbot.section { padding-bottom: 80px !important; }
    #chatbot .chatbot-container { box-shadow: 6px 6px 0 #42364d !important; }
    .chatbot__header { gap: 10px; padding: 17px; }
    .chatbot__avatar { width: 40px; height: 40px; font-size: 1.65rem; }
    .chatbot__identity p { display: none; }
    .chatbot__online { padding: 6px; font-size: .56rem; }
    .chatbot__messages { padding: 18px; }
    .chat-message__bubble { max-width: 89%; }
    .chatbot__composer { padding: 13px; }
    .footer { padding-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}