/* --------------------------------------------------------------------------
   AIQENTA — Main Stylesheet

   TABLE OF CONTENTS
   01. Global Variables
   01a. Local Fonts
   02. Foundation and Shared Components
   03. AI Agency — Section Layouts
   04. AI Agents — Section Layouts
   05. Creator Studio — Section Layouts
   06. Responsive Layouts (see media-quries.css)
   07. Shared Component Styling
   08. AI Agency — Section Styling
   09. AI Agents — Section Styling
   10. Creator Studio — Section Styling
   11. Inner Pages and Footer
   12. Entrance Animation and Navigation Fallback
   13. Responsive Component Styling (see media-quries.css)
   14. Supporting Components
   15. Reduced Motion and Tablet Spacing (see media-quries.css)
   16. AI Agency Bootstrap Navigation and Layout
   17. AI Agency Service Selection
   18. AI Agency About Section
   19. AI Agency Testimonials
   20. AI Agency Contact Banner
   21. Lucide Icons
   22. Button Typography
   23. AI Agency Button Icons
   24. Creator Studio Header
   25. Creator Studio Button Icons
   26. Creator Studio Media Hero
   27. Creator Studio Brand Marquee
   28. Creator Studio Content Width
   29. Creator Studio Process
   30. AI Agents Navigation, Icons and Content Width
   31. AI Agents Banner
   32. AI Agents Features
   33. AI Agents Dashboard
   34. AI Agents Use Cases
   35. AI Agents Testimonials
   36. AI Agents FAQ
   37. AI Agents CTA Buttons
   38. Creator Studio Social Links
   39. Preloader
   40. Home 01 Reference Hero
   41. Home 01 Creator Studio Feature
   42. AI Agent Editorial Hero
   43. AI Agency Gradient Hero
   44. Creator Home Primary Buttons
   45. Shared Inner Pages for AI Agents Home
   46. Homepage Fixed-Pixel Type and Spacing
   47. Creator and Agency Mobile Alignment
   48. Shared Subpage Banner and About Page
   49. Services Page
   50. Projects Page
   51. Pricing Page
   52. Contact Page
   53. Team Page
   54. Integrations Page
   55. Testimonials Page
   56. Team Detail Page
   57. Flowstate Project Detail Page
   58. Workflow Automation Service Detail Page
   59. Journal Article Detail Page
   60. Shared Detail Sidebars
   61. Page Navigation and Coming Soon Page

   Typography: locally bundled Sora headings and Inter body text.
   Customize the global variables below before editing individual components.
   All @media rules are grouped by section in media-quries.css.
   Load that stylesheet after this one on every page.
-------------------------------------------------------------------------- */

/* ==================== 01. Global Variables — Start ==================== */

/* 01. Global Variables — Start */

:root {
    /* Core colors */
    --color-text: #151619;
    --color-text-muted: #61636b;
    --color-primary: #365ff4;
    --color-border: #dedfe4;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Surfaces */
    --color-surface: #f8f8fa;
    --color-surface-dark: #101115;
    --color-surface-warm: #fff9ef;
    --color-surface-violet: #f2eefb;

    /* Page accents and focus */
    --color-violet: #b16de5;
    --color-agent-accent: #7953c7;
    --color-creator-accent: #f5c944;
    --creator-primary-button: #895ad0;
    --color-coral: #f4808b;
    --color-focus: #fb8d37;

    /* Typography and layout */
    --font-body: "Inter", Arial, Helvetica, sans-serif;
    --font-heading: "Sora", Arial, Helvetica, sans-serif;
    --container-width: 1280px;
    --border-radius: 18px;
    --section-spacing: clamp(76px, 8vw, 128px);
}

/* ==================== 01. Global Variables — End ==================== */

/* ==================== 01a. Local Fonts — Start ==================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/sora-latin-variable.woff2") format("woff2");
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.hero-wordmark,
.agent-watermark,
.creator-marquee,
.creator-fullbleed-text {
    font-family: var(--font-heading);
}

/* ==================== 01a. Local Fonts — End ==================== */

/* ==================== 02. Foundation and Shared Components — Start ==================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* Navigation */

body.menu-open {
    overflow: hidden;
}

/* Global Layout and Typography */

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

body:not(.theme-agency):not(.theme-creator) .container,
.theme-creator main .container,
.theme-creator .site-footer .container {
    width: min(calc(100% - 96px), var(--container-width));
    margin: auto;
}

.section {
    padding: 130px 0;
}

.compact-section {
    padding: 90px 0;
}

.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.eyebrow.light {
    color: #e1e4ff;
}

.eyebrow.violet {
    color: #9d67cc;
}

.blue-period {
    color: #4d77ff;
}

h1,
h2,
h3,
p,
blockquote {
    margin-top: 0;
}

h1,
h2,
h3 {
    letter-spacing: -.055em;
}

p {
    line-height: 1.65;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 1000;
    background: var(--color-white);
    padding: 12px;
}

.skip-link:focus {
    top: 10px;
}

/* Navigation */

.site-header {
    position: relative;
    z-index: 30;
    width: min(calc(100% - 96px), var(--container-width));
    height: 84px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.site-header.header-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.065em;
    white-space: nowrap;
}

.brand-mark {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    margin-right: 2px;
}

.brand-dot {
    color: var(--color-primary);
    margin-left: -5px;
}

.desktop-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(17,18,28,.08);
    border-radius: 99px;
    padding: 5px;
}

.header-overlay .desktop-nav {
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(15px);
}

.desktop-nav a {
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 10px 15px;
    transition: background .25s;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current] {
    background: rgba(255,255,255,.25);
}

.site-header:not(.header-overlay) .desktop-nav a:hover,
.site-header:not(.header-overlay) .desktop-nav a[aria-current] {
    background: var(--color-white);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    background: var(--color-white);
    color: var(--color-text);
    padding: 8px 9px 8px 19px;
    white-space: nowrap;
}

.nav-cta span {
    background: var(--color-primary);
    color: var(--color-white);
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
}

.nav-cta.dark {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.nav-cta.dark span {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.nav-cta.yellow {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.nav-cta.yellow span {
    background: #ffe34f;
    color: var(--color-surface-dark);
}

.menu-toggle {
    display: none;
    position: relative;
    z-index: 40;
    border: 0;
    background: none;
    width: 44px;
    height: 44px;
    padding: 12px;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    margin: 6px 0;
    transition: transform .3s;
}

/* 02.04 Navigation — End */

/* 02.05 Global Layout and Typography — Start */

.mobile-menu {
    position: fixed;
    z-index: 25;
    inset: 0;
    background: var(--color-text);
    color: var(--color-white);
    display: grid;
    align-items: center;
    padding: 80px 8%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: .35s;
}

/* 02.05 Global Layout and Typography — End */

/* 02.06 Navigation — Start */

.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* 02.06 Navigation — End */

/* 02.07 Global Layout and Typography — Start */

.mobile-menu nav {
    display: grid;
    gap: 8px;
}

.mobile-menu a {
    font-size: clamp(28px,6vw,55px);
    font-weight: 700;
    letter-spacing: -.05em;
}

/* 02.07 Global Layout and Typography — End */

/* 02.08 Navigation — Start */

.menu-open .menu-toggle {
    color: var(--color-white);
}

.menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* 02.08 Navigation — End */

/* 02.09 Buttons and Links — Start */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: 99px;
    padding: 5px 22px 5px 5px;
    min-height: 43px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .3s, box-shadow .3s;
}

.pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px #00000022;
}

.pill-icon {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 17px;
}

.pill-white {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.pill-blue {
    background: var(--color-primary);
    color: var(--color-white);
}

.pill-blue .pill-icon {
    background: var(--color-white);
    color: var(--color-primary);
}

.pill-dark {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.pill-dark .pill-icon {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.pill-purple {
    background: #ca85e8;
    color: var(--color-surface-dark);
}

.pill-purple .pill-icon {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.pill-yellow {
    background: #ffe451;
    color: var(--color-surface-dark);
}

.pill-yellow .pill-icon {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.pill-outline {
    color: var(--color-white);
    border: 1px solid #ffffff6b;
}

.pill-outline .pill-icon {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

/* 02.09 Buttons and Links — End */

/* 02.10 Global Layout and Typography — Start */

.section-heading {
    margin-bottom: 60px;
}

.section-heading h2,
.center-heading h2 {
    font-size: clamp(38px,5.4vw,75px);
    line-height: 1.06;
    font-weight: 800;
    margin: 15px 0 0;
}

.section-heading p {
    max-width: 455px;
    font-size: 16px;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.two-col {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;
}

.center-heading {
    text-align: center;
    margin: 0 auto 55px;
    max-width: 850px;
}

.center-heading p {
    max-width: 560px;
    margin: 18px auto 25px;
    color: var(--color-text-muted);
}

/* 02.10 Global Layout and Typography — End */

/* 02.11 Footer — Start */

.site-footer {
    background: var(--color-surface-dark);
    color: var(--color-white);
    padding: 55px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr auto;
    gap: 30px;
    align-items: start;
}

.footer-grid p {
    font-size: 12px;
    color: #aaaaaa;
}

.footer-grid nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: 12px;
}

.footer-grid small {
    color: #9a9ba3;
    font-size: 10px;
}

.dark-footer {
    background: var(--color-surface-dark);
}

/* 02.11 Footer — End */

/* 02.12 Motion and Progressive Enhancement — Start */

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .7s, transform .7s;
}

html.js [data-reveal].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 02.12 Motion and Progressive Enhancement — End */

/* ==================== 02. Foundation and Shared Components — End ==================== */

/* ==================== 03. AI Agency — Section Layouts — Start ==================== */

/* 03.01 Agency Hero — Start */

.agency-hero {
    color: var(--color-white);
    min-height: 760px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 105%, #76d5e4 0%, #4386d5 29%, transparent 56%), radial-gradient(circle at 79% 81%, #2554c7, transparent 45%), linear-gradient(117deg, #559bdb 0%, #214db1 46%, #0e142a 100%);
}

.agency-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.agency-hero-inner {
    min-height: 760px;
    position: relative;
    padding-top: 185px;
}

.agency-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.agency-intro h1 {
    font-size: 75px;
    line-height: 1.07;
    max-width: 780px;
    margin: 30px 0;
}

.agency-intro .blue-period {
    color: #9ce4ed;
}

.hero-feature {
    width: 285px;
    align-self: flex-start;
    margin-top: 5px;
    border-radius: 16px;
    background: #1a2450a8;
    padding: 12px;
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 70px #0b164c4a;
    transition: transform .4s;
}

.hero-feature:hover {
    transform: translateY(-8px) rotate(-2deg);
}

.hero-feature img {
    width: 100%;
    height: 143px;
    object-fit: cover;
    border-radius: 10px;
}

.hero-feature div {
    padding: 16px 4px 5px;
}

.hero-feature span,
.hero-feature small {
    display: block;
    font-size: 9px;
    letter-spacing: .1em;
}

.hero-feature strong {
    display: block;
    font-size: 19px;
    line-height: 1.15;
    margin: 6px 0;
}

.hero-feature b {
    position: absolute;
    right: 22px;
    bottom: 23px;
}

.hero-wordmark {
    position: absolute;
    left: -.045em;
    bottom: -.27em;
    font-size: clamp(150px,26vw,380px);
    letter-spacing: -.105em;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    transform: scaleX(1.06);
    transform-origin: left;
    pointer-events: none;
}

.hero-bottom {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    z-index: 2;
}

/* 03.01 Agency Hero — End */

/* 03.02 Agency Statistics — Start */

.stats-band {
    background: var(--color-white);
    padding: 55px 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.stat-grid strong {
    display: block;
    font-size: clamp(34px,4vw,62px);
    letter-spacing: -.08em;
    line-height: 1.1;
    font-weight: 600;
}

.stat-grid span {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* 03.02 Agency Statistics — End */

/* 03.03 Agency Services — Start */

.services-section {
    background: var(--color-surface);
}

.service-list {
    border-top: 1px solid var(--color-border);
}

.service-row {
    display: grid;
    grid-template-columns: 45px minmax(220px,1fr) minmax(0,1.3fr) 42px;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    min-height: 100px;
    padding: 15px 0;
    transition: min-height .5s, background .4s;
}

.service-row.active {
    min-height: 258px;
    background: var(--color-white);
    border-radius: 12px;
    padding: 22px 22px;
}

.row-number {
    font-size: 12px;
    font-weight: 800;
    align-self: start;
    margin-top: 20px;
}

.service-row h3 {
    font-size: clamp(25px,3.5vw,49px);
    line-height: 1.05;
    margin: 0;
    font-weight: 700;
}

.service-row.active h3 {
    color: var(--color-primary);
}

.service-detail {
    display: flex;
    gap: 25px;
    align-items: end;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s, opacity .4s;
}

.service-row.active .service-detail {
    max-height: 230px;
    opacity: 1;
}

.service-detail p {
    font-size: 12px;
    max-width: 260px;
    margin: 0 0 12px;
}

.service-detail img {
    width: 40%;
    max-width: 230px;
    aspect-ratio: 1.35;
    object-fit: cover;
    border-radius: 8px;
}

/* 03.03 Agency Services — End */

/* 03.04 Buttons and Links — Start */

.circle-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-surface-dark);
    color: var(--color-white);
    font-size: 20px;
    transition: transform .3s, background .3s;
}

.circle-arrow:hover {
    transform: rotate(45deg);
    background: var(--color-primary);
}

.active .circle-arrow {
    background: var(--color-primary);
}

/* 03.04 Buttons and Links — End */

/* 03.05 Agency Studio — Start */

.about-section {
    background: var(--color-surface-dark);
    color: var(--color-white);
    padding: 130px 0;
}

.about-title h2 {
    font-size: clamp(60px,9vw,138px);
    font-weight: 500;
    line-height: .97;
    max-width: 1100px;
    margin: 30px 0 90px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: end;
}

.about-visual {
    position: relative;
}

.about-visual img {
    width: 100%;
    aspect-ratio: 1.32;
    object-fit: cover;
    border-radius: 12px;
}

.about-visual span {
    position: absolute;
    left: 15px;
    bottom: 15px;
    font-size: 9px;
    letter-spacing: .18em;
}

.about-copy h3 {
    font-size: clamp(32px,3.5vw,53px);
    line-height: 1.12;
    font-weight: 500;
    margin: 22px 0;
}

.about-copy p {
    color: #b8b8bd;
    font-size: 14px;
    max-width: 500px;
    margin-bottom: 28px;
}

/* 03.05 Agency Studio — End */

/* 03.06 Global Layout and Typography — Start */

.split-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

/* 03.06 Global Layout and Typography — End */

/* 03.07 Buttons and Links — Start */

.text-link {
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}

/* 03.07 Buttons and Links — End */

/* 03.08 Agency Projects — Start */

.work-grid {
    display: grid;
    grid-template-columns: 1fr .48fr .65fr;
    gap: 25px;
    align-items: start;
}

.work-card.large {
    grid-row: span 2;
    margin-top: 50px;
}

.work-card.offset {
    grid-column: 3;
}

.work-card.third {
    grid-column: 2/4;
    width: 60%;
    justify-self: center;
}

.work-sigil {
    grid-column: 2;
    grid-row: 1;
    font-size: 140px;
    line-height: 1;
    color: var(--color-primary);
    align-self: center;
    text-align: center;
}

.work-image {
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    background: var(--color-surface-dark);
}

.work-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform .8s;
}

.large .work-image img {
    height: 460px;
}

.work-card:hover img {
    transform: scale(1.07);
}

.work-hover {
    position: absolute;
    bottom: 20px;
    right: 20px;
    border-radius: 99px;
    background: var(--color-white);
    padding: 13px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(12px);
    transition: .3s;
}

.work-card:hover .work-hover {
    opacity: 1;
    transform: none;
}

.work-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 14px 0;
}

.work-meta h3 {
    font-size: 18px;
    letter-spacing: -.04em;
    margin: 0;
}

.work-meta span {
    font-size: 9px;
    letter-spacing: .1em;
}

/* 03.08 Agency Projects — End */

/* 03.09 Agency Pricing — Start */

.pricing-section {
    background: var(--color-surface);
}

.pricing-list {
    display: grid;
    gap: 15px;
}

.agency-plan {
    display: grid;
    grid-template-columns: 1fr .55fr;
    gap: 30px;
    background: var(--color-white);
    border: 1px solid var(--color-surface-violet);
    border-radius: 16px;
    padding: 38px 45px;
}

.plan-art {
    display: block;
    color: var(--color-primary);
    font-size: 70px;
}

.plan-art.dark {
    color: var(--color-text);
}

.agency-plan h3 {
    font-size: 45px;
    margin: 0 0 13px;
}

.agency-plan p {
    max-width: 330px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.plan-label {
    display: block;
    font-size: 9px;
    letter-spacing: .18em;
    font-weight: 800;
}

.agency-plan strong {
    display: block;
    font-size: 40px;
    margin: 5px 0 15px;
}

.agency-plan ul,
.agent-plan ul,
.creator-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.agency-plan li,
.agent-plan li,
.creator-plan li {
    font-size: 12px;
    margin: 7px 0;
}

.agency-plan li:before,
.agent-plan li:before,
.creator-plan li:before {
    content: '✦';
    font-size: 10px;
    margin-right: 9px;
    color: var(--color-primary);
}

/* 03.09 Agency Pricing — End */

/* 03.10 Buttons and Links — Start */

.agency-plan .pill {
    min-width: 260px;
}

/* 03.10 Buttons and Links — End */

/* 03.11 Agency Testimonial — Start */

.quote-section {
    padding: 90px 0;
    background: var(--color-surface-dark);
    color: var(--color-white);
}

/* 03.11 Agency Testimonial — End */

/* 03.12 Agency Journal — Start */

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.journal-card {
    border: 1px solid var(--color-surface-violet);
    border-radius: 11px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

.journal-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    margin-bottom: 22px;
}

.journal-card > span {
    margin-left: 20px;
    margin-right: 20px;
}

.journal-card > span {
    font-size: 9px;
    color: #888888;
    letter-spacing: .1em;
}

.journal-card h3 {
    font-size: 23px;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
}

.journal-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 10px 20px 0;
}

.journal-card .journal-card-arrow {
    flex: 0 0 36px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.journal-card .journal-card-arrow:is(:hover, :focus-visible) {
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(41, 89, 213, .25);
}

/* 03.12 Agency Journal — End */

/* 03.13 Contact Banner — Start */

.contact-panel {
    background: radial-gradient(circle at 77% 30%, #84c9ee, transparent 36%), linear-gradient(120deg, #2861cf, #163ca3 72%, #203ad1);
    color: var(--color-white);
    padding: 90px 0;
}

body:not(.theme-agency) .contact-panel .container {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}

.contact-panel h2 {
    font-size: clamp(40px,6vw,85px);
    line-height: 1.03;
    margin: 20px 0 35px;
}

.contact-email {
    font-size: clamp(25px,3.4vw,48px);
    font-weight: 700;
    letter-spacing: -.04em;
    text-decoration: underline;
    text-underline-offset: 8px;
}

.contact-box {
    background: var(--color-surface-dark);
    border-radius: 13px;
    padding: 25px;
    min-width: 185px;
    min-height: 145px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
}

/* 03.13 Contact Banner — End */

/* ==================== 03. AI Agency — Section Layouts — End ==================== */

/* ==================== 04. AI Agents — Section Layouts — Start ==================== */

/* 04.01 Buttons and Links — Start */

.contact-box .circle-arrow {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

/* 04.01 Buttons and Links — End */

/* 04.02 Agent Hero — Start */

.theme-agent {
    --color-violet: var(--color-violet);
}

.agent-hero {
    height: 680px;
    margin-top: -84px;
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    background: radial-gradient(circle at 0 100%, #fff1b0, transparent 31%), radial-gradient(circle at 0 3%, #eaa6ad, transparent 55%), radial-gradient(circle at 70% 20%, #28264e, transparent 50%), var(--color-surface-dark);
}

/* 04.02 Agent Hero — End */

/* 04.03 Navigation — Start */

.theme-agent .site-header {
    color: var(--color-surface-dark);
}

/* 04.03 Navigation — End */

/* 04.04 Agent Hero — Start */

.agent-hero-inner {
    height: 100%;
    position: relative;
    padding-top: 175px;
}

.agent-headline {
    position: relative;
    z-index: 4;
    max-width: 450px;
}

.agent-headline h1 {
    font-size: clamp(55px,6vw,92px);
    line-height: 1.02;
    margin: 16px 0;
}

.agent-headline h1 span,
.theme-agent h2 span {
    color: #ca8be8;
}

.agent-headline p {
    font-size: 14px;
    max-width: 340px;
    color: var(--color-surface-violet);
}

.agent-robot-wrap {
    position: absolute;
    z-index: 2;
    left: 34%;
    bottom: 0;
    width: 43%;
    height: 88%;
    display: flex;
    align-items: end;
    justify-content: center;
    mask-image: linear-gradient(var(--color-black) 82%, transparent 100%);
}

.agent-robot {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: grayscale(.3) contrast(1.08);
}

.agent-float {
    position: absolute;
    z-index: 4;
    right: 1%;
    top: 190px;
    width: 250px;
    border-radius: 20px;
    padding: 23px;
    background: linear-gradient(150deg, #e4b0d0, #7962b1);
    box-shadow: 0 25px 45px #05040b44;
}

.agent-float>span {
    font-size: 9px;
    letter-spacing: .14em;
}

.agent-float strong {
    display: block;
    font-size: 50px;
    line-height: 1.05;
}

.agent-float strong span {
    font-size: 25px;
}

.agent-float small {
    display: block;
    max-width: 160px;
    font-size: 10px;
    line-height: 1.5;
}

.avatar-stack {
    display: flex;
    margin-top: 13px;
    padding-left: 5px;
}

.avatar-stack img {
    width: 31px;
    height: 31px;
    object-fit: cover;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    margin-left: -6px;
}

.agent-watermark {
    position: absolute;
    bottom: -.12em;
    left: 0;
    font-size: clamp(110px,21vw,300px);
    font-weight: 800;
    letter-spacing: -.1em;
    color: #ffffff0d;
    line-height: 1;
    white-space: nowrap;
}

/* 04.04 Agent Hero — End */

/* 04.05 Agent Statistics — Start */

.agent-proof .section-heading h2 {
    font-size: 43px;
    line-height: 1.1;
}

.proof-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.proof-cards>div {
    padding: 28px;
    background: var(--color-surface);
    border-radius: 14px;
}

.proof-cards strong {
    font-size: 50px;
    display: block;
    letter-spacing: -.06em;
}

.proof-cards strong span {
    color: #b17dd6;
}

.proof-cards div>span {
    font-size: 11px;
    color: #777777;
}

/* 04.05 Agent Statistics — End */

/* 04.06 Agent Features — Start */

.features-layout {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 8%;
}

.features-intro {
    position: relative;
    overflow: hidden;
    min-height: 480px;
}

.features-intro h2 {
    font-size: clamp(52px,6vw,86px);
    line-height: 1.04;
    margin: 15px 0 22px;
}

.features-intro h2 span {
    color: #b989e2;
}

.features-intro p {
    font-size: 14px;
    max-width: 360px;
}

.features-ghost {
    position: absolute;
    bottom: -120px;
    left: -50px;
    font-size: 500px;
    color: var(--color-surface-violet);
    z-index: -1;
}

.feature-stack {
    display: grid;
    gap: 14px;
}

.feature-card {
    border: 1px solid var(--color-surface-violet);
    border-radius: 17px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 188px;
    overflow: hidden;
    box-shadow: 0 10px 35px #100c1a08;
}

.feature-card>div:first-child {
    padding: 24px;
}

.feature-card span {
    font-size: 11px;
}

.feature-card h3 {
    font-size: 22px;
    margin: 9px 0;
}

.feature-card p {
    font-size: 11px;
    color: #777777;
}

.feature-visual {
    background: linear-gradient(140deg, #fce1e1, #d9b3f1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
    position: relative;
}

.orbit-visual {
    flex-direction: row;
}

/* 04.06 Agent Features — End */

/* 04.07 Agent Dashboard — Start */

.dashboard-section {
    background: radial-gradient(ellipse at 50% 100%, #3d2d6d, transparent 55%), var(--color-surface-dark);
    color: var(--color-white);
    padding: 95px 0 0;
    overflow: hidden;
}

.dashboard-inner {
    text-align: center;
    position: relative;
}

.dashboard-inner h2 {
    font-size: 60px;
    line-height: 1.08;
    margin: 0 auto 22px;
}

.dashboard-inner h2 span {
    color: #b782ed;
}

.dashboard-inner p {
    color: #b2adbb;
    font-size: 13px;
    margin: auto;
    max-width: 500px;
}

.dashboard-image {
    max-width: 880px;
    margin: 55px auto -35px;
    border: 1px solid #ffffff23;
    border-radius: 18px 18px 0 0;
    padding: 13px 13px 0;
    background: #1d192a;
    box-shadow: 0 0 100px #7f47bc55;
    transform: perspective(1300px) rotateX(4deg);
    transform-origin: bottom;
}

.dashboard-image img {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.dashboard-chip {
    position: absolute;
    top: 57%;
    font-size: 9px;
    border-radius: 99px;
    background: #47305f;
    padding: 12px 16px;
}

/* 04.07 Agent Dashboard — End */

/* 04.08 Global Layout and Typography — Start */

.chip-left {
    left: 2%;
}

.chip-right {
    right: 2%;
}

/* 04.08 Global Layout and Typography — End */

/* 04.09 Agent Use Cases — Start */

.usecase-section {
    background: var(--color-surface);
}

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}

.usecase-grid article {
    background: var(--color-white);
    border-radius: 14px;
    padding: 30px;
    min-height: 205px;
    transition: transform .3s, box-shadow .3s;
}

.usecase-grid article:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px #28203712;
}

.usecase-grid article span {
    color: #bd83dc;
    font-size: 34px;
}

.usecase-grid h3 {
    font-size: 21px;
    margin: 15px 0 8px;
}

.usecase-grid p {
    font-size: 12px;
    color: #777777;
    margin: 0;
}

/* 04.09 Agent Use Cases — End */

/* 04.10 Agent Pricing — Start */

.agent-pricing .center-heading {
    max-width: 650px;
}

.agent-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.agent-plan {
    border: 1px solid var(--color-surface-violet);
    border-radius: 18px;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.agent-plan.featured {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.agent-plan h3 {
    font-size: 26px;
    line-height: 1.15;
    margin: 18px 0;
}

.agent-plan p {
    font-size: 12px;
    color: #8f8c98;
}

.agent-plan strong {
    display: block;
    font-size: 42px;
    margin: 15px 0;
}

.agent-plan strong small {
    font-size: 12px;
    font-weight: 500;
}

.agent-plan ul {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 25px;
    align-self: center;
    margin: 0;
}

.agent-plan.featured ul {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.agent-plan li {
    line-height: 1.5;
}

.agent-plan li:before {
    color: #bb7ddb;
}

/* 04.10 Agent Pricing — End */

/* 04.11 Agent Reviews — Start */

.agent-reviews {
    padding: 100px 0;
    background: radial-gradient(circle at 100% 100%, #ada8ec, transparent 42%), linear-gradient(130deg, var(--color-surface-warm), var(--color-surface));
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 17px;
}

.review-grid blockquote {
    margin: 0;
    background: var(--color-white);
    border-radius: 13px;
    padding: 25px;
    min-height: 215px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.035em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 04.11 Agent Reviews — End */

/* 04.12 Footer — Start */

.review-grid footer {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 700;
}

/* 04.12 Footer — End */

/* 04.13 Agent Reviews — Start */

.review-grid img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* 04.13 Agent Reviews — End */

/* 04.14 FAQ and Accordions — Start */

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
}

.faq-layout h2 {
    font-size: clamp(40px,5vw,67px);
    line-height: 1.07;
    margin: 18px 0;
}

.faq-layout p {
    font-size: 13px;
    color: #777777;
}

.accordion details {
    border-bottom: 1px solid var(--color-border);
}

.accordion summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    padding: 22px 0;
    font-size: 14px;
    font-weight: 700;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary:after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
}

.accordion details[open] summary:after {
    content: '−';
}

.accordion details p {
    font-size: 13px;
    color: #777777;
    margin: 0 0 20px;
    max-width: 540px;
}

/* 04.14 FAQ and Accordions — End */

/* 04.15 Agent Call to Action — Start */

.agent-cta {
    background: radial-gradient(circle at 50% 0, #653d9a, transparent 55%), linear-gradient(135deg, #17152e, var(--color-surface-dark));
    color: var(--color-white);
    text-align: center;
    padding: 100px 0;
}

.agent-cta h2 {
    font-size: clamp(43px,6.5vw,90px);
    line-height: 1.07;
    margin: 18px 0 25px;
}

.agent-cta h2 span {
    color: #c68aea;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* 04.15 Agent Call to Action — End */

/* ==================== 04. AI Agents — Section Layouts — End ==================== */

/* ==================== 05. Creator Studio — Section Layouts — Start ==================== */

/* 05.01 Creator Hero — Start */

.theme-creator {
    --color-primary: var(--color-creator-accent);
    --creator-page-gutter: 130px;
    --section-spacing: 112px;
}

.creator-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 91% 95%, #ed3984, transparent 40%), radial-gradient(circle at 72% 55%, #ffb92f, transparent 46%), linear-gradient(140deg, var(--color-surface-warm) 17%, #fff1dd 61%, #f6ad90);
    min-height: 710px;
    margin-top: -84px;
    padding-top: 130px;
}

.creator-hero .container {
    position: relative;
}

.creator-hero-copy {
    max-width: 840px;
    position: relative;
    z-index: 2;
}

.creator-hero h1 {
    font-size: 122px;
    line-height: .98;
    margin: 15px 0 20px;
}

.creator-hero h1 span,
.theme-creator h2 span {
    color: #e65b74;
}

.creator-hero-copy p {
    font-size: 14px;
    max-width: 375px;
}

.creator-social {
    position: absolute;
    right: 5%;
    top: 20px;
    display: flex;
    gap: 7px;
}

.creator-social span {
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #db5293;
}

.creator-marquee {
    position: absolute;
    top: 255px;
    left: -4%;
    font-size: 274px;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: -.1em;
    line-height: 1;
    color: #fff7efad;
    pointer-events: none;
}

.creator-gallery {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    align-items: end;
    gap: 20px;
    margin-top: 70px;
}

.creator-frame {
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px #b34e5255;
}

.creator-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.creator-frame:nth-child(2),
.creator-frame:nth-child(4) {
    height: 320px;
}

.creator-frame.central {
    height: 390px;
    border: 6px solid var(--color-text);
    border-bottom-width: 12px;
    border-radius: 30px;
    position: relative;
    transform: translateY(5px);
}

.creator-frame.central img {
    height: 100%;
}

.phone-top,
.phone-bottom {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--color-text);
    color: var(--color-white);
    font-size: 10px;
    padding: 8px;
    text-align: center;
    z-index: 2;
}

.phone-top {
    top: 0;
}

.phone-top span {
    margin-left: 20px;
    font-size: 8px;
}

.phone-bottom {
    bottom: 0;
}

/* 05.01 Creator Hero — End */

/* 05.02 Creator Channels — Start */

.brand-strip {
    padding: 28px 0;
    border-bottom: 1px solid var(--color-surface-violet);
}

.brand-strip .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.brand-strip span {
    font-size: 9px;
    letter-spacing: .13em;
    font-weight: 800;
}

.brand-strip div {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.06em;
    color: var(--color-text-muted);
}

/* 05.02 Creator Channels — End */

/* 05.03 Creator Introduction — Start */

.creator-intro {
    padding-bottom: 130px;
}

.creator-intro .center-heading {
    position: relative;
}

.creator-star {
    position: absolute;
    color: #f2727b;
    font-size: 75px;
    left: -15%;
    top: 45px;
}

.creator-intro .center-heading h2 {
    font-size: 76px;
}

.creator-mosaic {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 200px 200px;
    gap: 15px;
}

.creator-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.mosaic-stat {
    padding: 23px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mosaic-stat.peach {
    background: var(--color-surface-warm);
}

.mosaic-stat.cream {
    background: var(--color-surface-warm);
}

.mosaic-stat.black {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.mosaic-stat span {
    font-size: 9px;
    letter-spacing: .14em;
}

.mosaic-stat strong {
    font-size: 55px;
    line-height: 1;
    letter-spacing: -.08em;
}

.mosaic-stat small {
    font-size: 11px;
}

/* 05.03 Creator Introduction — End */

/* 05.04 Creator Prompt Form — Start */

.creator-studio-section {
    padding: 120px 0;
    background: radial-gradient(circle at 7% 88%, #ff686d, transparent 43%), radial-gradient(circle at 95% 28%, #ffd8a6, transparent 42%), var(--color-surface-warm);
}

.studio-ui {
    max-width: 950px;
    margin: auto;
    background: var(--color-white);
    border-radius: 20px;
    padding: 75px 60px;
    text-align: center;
    box-shadow: 0 30px 70px #e0727633;
}

.studio-ui h2 {
    font-size: clamp(39px,5vw,70px);
    line-height: 1.07;
    margin: 16px 0;
}

.studio-ui h2 span {
    color: var(--color-coral);
}

.studio-ui p {
    font-size: 13px;
    color: #777777;
}

.prompt-demo {
    max-width: 600px;
    margin: 28px auto 0;
    text-align: left;
}

.prompt-demo label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 8px;
}

.prompt-demo>div {
    display: flex;
    padding: 5px;
    border: 1px solid var(--color-border);
    border-radius: 99px;
}

.prompt-demo input {
    border: 0;
    outline: 0;
    min-width: 0;
    flex: 1;
    padding: 10px 18px;
    font-size: 12px;
    background: transparent;
}

.prompt-demo button {
    border: 0;
    border-radius: 99px;
    background: #ffe451;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
}

.prompt-demo small {
    display: block;
    margin: 12px;
    text-align: center;
    color: #aaaaaa;
    font-size: 9px;
    letter-spacing: .1em;
}

/* 05.04 Creator Prompt Form — End */

/* 05.05 Creator Services — Start */

.creator-services-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: repeat(2,200px);
    gap: 15px;
}

.creator-services-grid article {
    background: var(--color-surface);
    border-radius: 13px;
    padding: 28px;
    transition: transform .3s;
}

.creator-services-grid article:hover {
    transform: translateY(-5px);
}

.creator-services-grid article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.creator-services-grid article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

.services-portrait {
    grid-column: 2;
    grid-row: 1/3;
    overflow: hidden;
    border-radius: 13px;
}

.services-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tool-icon {
    display: block;
    width: 60px;
    height: 55px;
    object-fit: contain;
    object-position: left center;
}

.creator-services-grid h3 {
    font-size: 22px;
    margin: 17px 0 8px;
}

.creator-services-grid p {
    font-size: 11px;
    color: #777777;
    max-width: 220px;
}

/* 05.05 Creator Services — End */

/* 05.06 Creator Pricing — Start */

.creator-pricing {
    background: var(--color-surface-warm);
}

.creator-plan-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.creator-plan {
    background: var(--color-white);
    border-radius: 15px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    min-height: 440px;
}

.creator-plan.feature {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.creator-plan>span {
    font-size: 10px;
    letter-spacing: .13em;
    font-weight: 700;
}

.creator-plan h3 {
    font-size: 30px;
    line-height: 1.13;
    margin: 25px 0 12px;
}

.creator-plan > p {
    flex: 1;
    max-width: 34ch;
    min-height: 3.2em;
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.creator-plan.feature > p {
    color: rgba(255, 255, 255, .72);
}

.creator-plan strong {
    font-size: 49px;
    letter-spacing: -.08em;
}

.creator-plan strong small {
    font-size: 12px;
    letter-spacing: 0;
    font-weight: 500;
}

/* 05.06 Creator Pricing — End */

/* 05.07 Buttons and Links — Start */

.creator-plan .pill {
    align-self: flex-start;
    margin: 22px 0;
}

/* 05.07 Buttons and Links — End */

/* 05.08 Creator Pricing — Start */

.creator-plan li:before {
    color: var(--color-coral);
}

/* 05.08 Creator Pricing — End */

/* 05.09 Creator Banner — Start */

.creator-fullbleed {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: var(--color-text);
}

.creator-fullbleed img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.creator-fullbleed:after {
    content: "";
    position: absolute;
    inset: 68% 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .34));
    pointer-events: none;
}

.creator-video-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: clamp(48px, 5vw, 72px);
    height: clamp(48px, 5vw, 72px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .76);
    color: var(--color-white);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background .25s, scale .25s;
}

.creator-video-play:hover {
    background: var(--color-black);
    scale: 1.08;
}

.creator-video-play:focus-visible {
    outline: 3px solid var(--color-creator-accent);
    outline-offset: 5px;
}

.creator-video-play svg {
    width: 40%;
    height: 40%;
    margin-left: 3px;
    fill: currentColor;
}

.creator-fullbleed-text {
    position: absolute;
    z-index: 1;
    bottom: -.18em;
    left: -1.9em;
    white-space: nowrap;
    color: var(--color-white);
    font-size: 151px;
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1;
    pointer-events: none;
}

.creator-video-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.creator-video-modal .modal-header {
    gap: 16px;
    padding: 17px 22px;
    border: 0;
}

.creator-video-modal .modal-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
}

.creator-video-modal .modal-title span {
    margin-left: 10px;
    color: var(--color-creator-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.creator-video-modal video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-black);
}

/* 05.09 Creator Banner — End */

/* 05.10 Creator Testimonials — Start */

.creator-voices {
    background: var(--color-surface);
}

.creator-voices .center-heading {
    margin-bottom: 40px;
}

.creator-voice-carousel {
    position: relative;
}

.creator-voice-stage {
    height: 300px;
    min-width: 0;
    position: relative;
    touch-action: pan-y;
}

.creator-voice-card {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(43%, 490px);
    padding: 26px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .07);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.8);
    transition: left .45s ease, width .45s ease, transform .45s ease, opacity .35s ease, visibility .35s ease;
}

.creator-voice-card[data-position="current"] {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.creator-voice-card[data-position="previous"],
.creator-voice-card[data-position="next"] {
    z-index: 1;
    width: calc(50% - min(21.5%, 245px) - 16px);
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.creator-voice-card[data-position="previous"] {
    left: calc(25% - min(10.75%, 122.5px) - 8px);
}

.creator-voice-card[data-position="next"] {
    left: calc(75% + min(10.75%, 122.5px) + 8px);
}

.creator-voice-quote {
    height: 38px;
    color: var(--color-coral);
    font-family: Georgia, serif;
    font-size: 72px;
    font-weight: 700;
    line-height: .85;
}

.creator-voice-card blockquote {
    margin: 16px 0 24px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -.015em;
}

.creator-voice-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.creator-voice-author img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 38%;
}

/* Initials stand in only where no matching reviewer portrait is supplied. */
.reviewer-initials {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e9ddf8;
    color: var(--color-agent-accent);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.reviewer-initials[hidden] { display: none; }

.creator-voice-author strong,
.creator-voice-author span {
    display: block;
}

.creator-voice-author strong {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
}

.creator-voice-author span {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.creator-voice-author > .reviewer-initials {
    display: grid;
    margin-top: 0;
    color: var(--color-agent-accent);
    font-size: 13px;
    line-height: 1;
}

.creator-voice-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .25s, color .25s, transform .25s;
}

.creator-voice-arrow:first-child {
    left: -72px;
}

.creator-voice-arrow:last-child {
    right: -72px;
}

.creator-voice-arrow:hover {
    background: var(--color-text);
    color: var(--color-white);
    transform: translateY(calc(-50% - 2px));
}

.creator-voice-arrow svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-voice-arrow:first-child svg {
    transform: rotate(180deg);
}

.creator-voice-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
}

.creator-voice-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--color-border);
    cursor: pointer;
    transition: width .25s, background .25s;
}

.creator-voice-dots button[aria-pressed="true"] {
    width: 23px;
    background: var(--color-coral);
}

html:not(.js) .creator-voice-arrow,
html:not(.js) .creator-voice-dots {
    display: none;
}

/* 05.10 Creator Testimonials — End */

/* 05.11 Creator FAQ — Start */

.creator-faq {
    background: radial-gradient(circle at 12% 90%, #ff797b, transparent 35%), radial-gradient(circle at 92% 35%, #ffddd0, transparent 30%), var(--color-surface);
}

/* 05.11 Creator FAQ — End */

/* 05.12 FAQ and Accordions — Start */

.creator-faq .accordion {
    max-width: 900px;
    margin-inline: auto;
    --bs-accordion-color: var(--color-text);
    --bs-accordion-bg: var(--color-white);
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-bg: var(--color-white);
    --bs-accordion-active-bg: var(--color-white);
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-btn-focus-box-shadow: none;
}

.creator-faq-list .accordion-item {
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .035);
}

.creator-faq-list .accordion-button {
    gap: 24px;
    padding: 24px 28px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    box-shadow: none;
}

.creator-faq-list .accordion-button::after {
    width: 24px;
    height: auto;
    background-image: none;
    color: var(--color-text);
    content: '+';
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    transform: none;
}

.creator-faq-list .accordion-button:not(.collapsed)::after {
    content: '−';
    transform: none;
}

.creator-faq-list .accordion-button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

.creator-faq-list .accordion-body {
    max-width: 760px;
    padding: 0 28px 28px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.65;
}

/* 05.12 FAQ and Accordions — End */

/* 05.13 Creator Call to Action — Start */

.creator-end {
    background: var(--color-surface-dark);
    color: var(--color-white);
    padding: 95px 0 0;
    overflow: hidden;
}

.creator-end h2 {
    font-size: 100px;
    margin: 15px 0;
}

.end-portraits {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 50px;
    transform: translateY(30px);
}

.end-portraits img {
    width: 170px;
    height: 200px;
    object-fit: cover;
    border: 6px solid var(--color-white);
    border-radius: 12px;
    transform: rotate(-6deg);
}

.end-portraits img:nth-child(even) {
    transform: rotate(8deg) translateY(20px);
}

/* 05.13 Creator Call to Action — End */

/* ==================== 05. Creator Studio — Section Layouts — End ==================== */

/* ==================== 06. Responsive Layouts — Start ==================== */

/* 06.01 Responsive: (max-width:1100px) — Start */

/* 06.01 Responsive: (max-width:1100px) — End */

/* 06.02 Responsive: (max-width:800px) — Start */

/* 06.02 Responsive: (max-width:800px) — End */

/* 06.03 Responsive: (max-width:600px) — Start */

/* 06.03 Responsive: (max-width:600px) — End */

/* 06.04 Responsive: (prefers-reduced-motion:reduce) — Start */

/* 06.04 Responsive: (prefers-reduced-motion:reduce) — End */

/* ==================== 06. Responsive Layouts — End ==================== */

/* ==================== 07. Shared Component Styling — Start ==================== */

/* 07.01 Global Layout and Typography — Start */

body {
    font-size: 16px;
    line-height: 1.55;
}

h1,
h2,
h3 {
    font-weight: 600;
    letter-spacing: -.055em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 5px;
}

a,
button,
summary {
    touch-action: manipulation;
}

img {
    height: auto;
}

section[id] {
    scroll-margin-top: 32px;
}

.section {
    padding: var(--section-spacing) 0;
}
.section-heading h2,
.center-heading h2 {
    font-size: clamp(38px,4.6vw,68px);
    font-weight: 600;
    line-height: 1.04;
}

.section-heading p,
.center-heading p {
    font-size: 16px;
}

/* 07.01 Global Layout and Typography — End */

/* 07.02 Navigation — Start */

.site-header {
    height: 96px;
    gap: 22px;
}

.brand {
    font-size: 24px;
    letter-spacing: -.06em;
}

.desktop-nav a {
    font-size: 12px;
    padding: 10px 15px;
}

.nav-cta {
    font-size: 12px;
    min-height: 46px;
}

/* 07.02 Navigation — End */

/* 07.03 Buttons and Links — Start */

.pill {
    font-size: 13px;
    min-height: 48px;
    gap: 16px;
    padding: 6px 22px 6px 6px;
    border: 0;
}

.pill-icon {
    width: 36px;
    height: 36px;
}

.text-link {
    font-size: 14px;
}

.circle-arrow {
    min-width: 44px;
    min-height: 44px;
}

/* 07.03 Buttons and Links — End */

/* 07.04 Global Layout and Typography — Start */

.section-heading {
    margin-bottom: 48px;
}

.mobile-menu a {
    font-size: clamp(24px,5vw,42px);
}

.mobile-menu nav {
    gap: 9px;
}

/* 07.04 Global Layout and Typography — End */

/* 07.05 Navigation — Start */

.menu-toggle {
    color: inherit;
}

.menu-open .site-header .brand {
    color: var(--color-white);
}

.menu-open main,
.menu-open .site-footer {
    pointer-events: none;
}

.menu-open .site-header {
    z-index: 40;
}

/* 07.05 Navigation — End */

/* ==================== 07. Shared Component Styling — End ==================== */

/* ==================== 08. AI Agency — Section Styling — Start ==================== */

/* 08.01 Agency Hero — Start */

.agency-hero {
    background: radial-gradient(ellipse at 0 100%, #a6e1e2 0, transparent 46%), radial-gradient(ellipse at 55% 90%, #255cfc, transparent 58%), linear-gradient(118deg, #4279c5, #111e40 68%, var(--color-surface-dark));
}

.agency-hero,
.agency-hero-inner {
    min-height: 900px;
}

.agency-hero-inner {
    padding-top: 178px;
}

.agency-intro h1 {
    font-size: 84px;
    font-weight: 600;
    max-width: 850px;
    line-height: 1.02;
    margin: 25px 0 34px;
}

.hero-feature {
    margin-top: 20px;
    width: 264px;
    flex: none;
    border: 1px solid #ffffff20;
    transform: rotate(3deg);
    padding: 12px;
    background: #18213c99;
}

.hero-feature img {
    height: 158px;
}

.hero-feature strong {
    font-size: 23px;
}

.hero-feature span,
.hero-feature small {
    font-size: 10px;
}

.hero-wordmark {
    font-size: clamp(120px,20.2vw,290px);
    letter-spacing: -.065em;
    bottom: 58px;
    left: -.015em;
    transform: none;
    line-height: .85;
}

.hero-bottom {
    bottom: 26px;
    font-size: 10px;
}

/* 08.01 Agency Hero — End */

/* 08.02 Agency Statistics — Start */

.stat-grid>div {
    border-right: 1px solid var(--color-border);
    padding-left: 25px;
}

.stat-grid>div:first-child {
    padding-left: 0;
}

.stat-grid>div:last-child {
    border: 0;
}

.stat-grid strong {
    font-weight: 500;
    letter-spacing: -.065em;
}

.stat-grid span {
    font-size: 13px;
}

.stats-band {
    padding: 48px 0;
}

/* 08.02 Agency Statistics — End */

/* 08.03 Agency Services — Start */

.service-row {
    grid-template-columns: 34px 1fr 1fr 44px;
    gap: 22px;
    min-height: 110px;
}

.service-row.active {
    min-height: 265px;
    padding: 26px;
}

.service-select {
    border: 0;
    padding: 8px 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    letter-spacing: inherit;
    line-height: 1.05;
}

.service-row h3 {
    font-size: clamp(26px,3vw,43px);
}

.service-detail {
    align-items: center;
}

.service-detail p {
    font-size: 14px;
}

.service-detail img {
    width: 45%;
    aspect-ratio: 1;
    object-fit: cover;
    max-width: 190px;
}

.service-row.active .service-detail {
    max-height: 400px;
}

/* 08.03 Agency Services — End */

/* 08.04 Agency Studio — Start */

.about-title h2 {
    font-size: clamp(58px,8vw,115px);
    line-height: 1.01;
    margin-bottom: 70px;
}

.about-copy h3 {
    font-size: clamp(32px,3.4vw,49px);
}

.about-copy p {
    font-size: 16px;
}

.about-visual img {
    aspect-ratio: 1.13;
}

/* 08.04 Agency Studio — End */

/* 08.05 Agency Projects — Start */

.work-image {
    border-radius: var(--border-radius);
}

.work-image img {
    height: 280px;
}

.large .work-image img {
    height: 490px;
}

.work-meta {
    align-items: start;
    flex-direction: column;
}

.work-meta h3 {
    font-size: 24px;
}

.work-meta span {
    font-size: 11px;
}

.work-sigil {
    animation: none;
}

.work-hover {
    opacity: 1;
    transform: none;
}

.work-card:focus-visible .work-image img {
    transform: scale(1.04);
}

/* 08.05 Agency Projects — End */

/* 08.06 Agency Pricing — Start */

.pricing-list {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.agency-plan {
    grid-template-columns: 1fr;
    padding: 38px;
    gap: 10px;
    background: linear-gradient(145deg, var(--color-white) 40%, var(--color-surface-violet));
}

.agency-plan p {
    font-size: 15px;
    max-width: 100%;
}

.agency-plan h3 {
    font-size: 42px;
}

.agency-plan li {
    font-size: 14px;
}

/* 08.06 Agency Pricing — End */

/* 08.07 Buttons and Links — Start */

.agency-plan .pill {
    min-width: 0;
    width: fit-content;
}

/* 08.07 Buttons and Links — End */

/* 08.08 Agency Pricing — Start */

.agency-plan strong {
    font-size: 48px;
}

.plan-label {
    font-size: 11px;
}

/* 08.08 Agency Pricing — End */

/* 08.10 Agency Journal — Start */

.journal-card {
    border-radius: 16px;
    padding-bottom: 30px;
    transition: transform .25s;
}

.journal-card:hover {
    transform: translateY(-5px);
}

.journal-card > span {
    font-size: 11px;
}

.journal-card h3 {
    font-size: 26px;
}

/* 08.10 Agency Journal — End */

/* 08.11 Contact Banner — Start */

.contact-panel {
    padding: 95px 0;
}

.contact-email {
    font-size: clamp(25px,4vw,56px);
}

/* 08.11 Contact Banner — End */

/* ==================== 08. AI Agency — Section Styling — End ==================== */

/* ==================== 09. AI Agents — Section Styling — Start ==================== */

/* 09.01 Agent Hero — Start */

.theme-agent {
    --color-primary: var(--color-agent-accent);
}

/* 09.01 Agent Hero — End */

/* 09.02 Navigation — Start */

.theme-agent .site-header {
    background: #fffffff2;
    border-radius: 100px;
    padding: 0 12px 0 22px;
    height: 66px;
    top: 20px;
    margin-bottom: 30px;
}

.theme-agent .desktop-nav {
    background: none;
}

/* 09.02 Navigation — End */

/* 09.03 Agent Hero — Start */

.agent-hero {
    margin-top: -96px;
    height: 780px;
    background: radial-gradient(ellipse at 0 100%, #f7e6af, transparent 36%), radial-gradient(ellipse at 2% 25%, #cb889e, transparent 50%), radial-gradient(ellipse at 60% 60%, #3a2c71, transparent 58%), var(--color-surface-dark);
}

.agent-hero-inner {
    padding-top: 188px;
}

.agent-headline h1 {
    font-size: clamp(64px,6.6vw,96px);
    line-height: 1;
}

.agent-headline p {
    font-size: 16px;
    max-width: 340px;
}

.agent-robot-wrap {
    height: 84%;
    width: 49%;
    left: 31%;
}

.agent-float {
    right: 1%;
    top: 215px;
    width: 240px;
    background: linear-gradient(130deg, #ce9bc3, #695397);
    border: 1px solid #ffffff33;
}

.agent-float>span {
    font-size: 10px;
}

.agent-float small {
    font-size: 12px;
}

.agent-float strong {
    margin: 8px 0;
}

.agent-watermark {
    font-size: 19.7vw;
    letter-spacing: -.07em;
    bottom: 15px;
}

/* 09.03 Agent Hero — End */

/* 09.04 Agent Statistics — Start */

.proof-cards>div {
    padding: 28px 32px;
}

.proof-cards div>span {
    font-size: 13px;
}

/* 09.04 Agent Statistics — End */

/* 09.05 Agent Features — Start */

.agent-features {
    padding-top: 30px;
}

.features-layout {
    grid-template-columns: .85fr 1.15fr;
    gap: 7%;
}

.features-intro h2 {
    font-size: clamp(48px,5vw,72px);
}

.features-intro p {
    font-size: 16px;
}

.feature-card {
    min-height: 225px;
    border-color: var(--color-border);
    border-radius: 18px;
}

.feature-card h3 {
    font-size: 25px;
    line-height: 1.12;
}

.feature-card p {
    font-size: 14px;
}

.feature-card>div:first-child {
    padding: 28px;
}

.feature-visual {
    padding: 12px;
}

.orbit-visual {
    gap: 6px;
    flex-wrap: wrap;
}

/* 09.05 Agent Features — End */

/* 09.06 Agent Dashboard — Start */

.dashboard-section {
    padding-bottom: 80px;
    background: radial-gradient(ellipse at 50% 100%, #4c3576, transparent 65%), var(--color-surface-dark);
}

.dashboard-image {
    max-width: 1060px;
    margin: 50px auto 0;
    padding: 10px;
    border-radius: 20px;
    transform: none;
}

.dashboard-chip {
    display: none;
}

.live-dashboard {
    display: grid;
    grid-template-columns: 170px 1fr;
    background: var(--color-text);
    color: var(--color-surface-violet);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    font-size: 13px;
}

.live-dashboard aside {
    background: var(--color-text);
    border-right: 1px solid #ffffff10;
    padding: 24px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.live-dashboard aside strong {
    font-size: 17px;
    margin-bottom: 22px;
    letter-spacing: -.06em;
}

.live-dashboard aside span {
    padding: 9px;
    border-radius: 6px;
    color: #b4aabe;
}

.live-dashboard aside .dash-active {
    background: #7055a8;
    color: var(--color-white);
}

.live-dashboard aside small {
    margin-top: auto;
    font-size: 9px;
    color: #b4aabe;
}

.dash-main {
    padding: 26px;
}

.dash-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.dash-heading small {
    font-size: 9px;
    color: #aaa0bc;
}

.dash-heading h3 {
    font-size: 25px;
    margin: 5px 0 25px;
}

.status-dot {
    border: 1px solid #4e4164;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 10px;
}

.status-dot:before {
    content: '●';
    color: #b4eca0;
    margin-right: 7px;
}

.dash-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.dash-metrics>div {
    border: 1px solid #ffffff15;
    border-radius: 10px;
    padding: 18px;
    background: #211c30;
}

.dash-metrics small {
    font-size: 11px;
    color: #b9afc9;
}

.dash-metrics strong {
    display: block;
    font-size: 32px;
    letter-spacing: -.04em;
}

.dash-metrics em {
    font-style: normal;
    font-size: 10px;
    color: #c2aadf;
}

.dash-chart {
    border: 1px solid #ffffff15;
    padding: 18px;
    margin: 16px 0;
    border-radius: 10px;
}

.dash-chart h4 {
    margin: 0;
    font-size: 14px;
}

.dash-chart small {
    color: #aaa0bc;
    font-size: 10px;
}

.bars {
    display: flex;
    gap: 7%;
    align-items: end;
    height: 150px;
    padding: 10px 6% 20px;
    border-bottom: 1px solid #ffffff20;
    background: repeating-linear-gradient(0deg, transparent 0 39px, #ffffff08 40px);
}

.bars span {
    height: var(--bar);
    background: linear-gradient(#cfaff5, #7250b3);
    flex: 1;
    border-radius: 4px 4px 0 0;
    color: #b9afc9;
    font-size: 9px;
    position: relative;
    line-height: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 4px;
}

.dash-task {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #ffffff0c;
    font-size: 11px;
}

.dash-task b {
    color: #b4eca0;
    font-weight: 400;
}

.dash-task span:nth-child(2) {
    color: #aaa0bc;
}

/* 09.06 Agent Dashboard — End */

/* 09.07 Agent Use Cases — Start */

.usecase-grid article {
    border: 1px solid var(--color-border);
    border-radius: 15px;
    transition: transform .25s, box-shadow .25s;
}

.usecase-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px #2513380a;
}

.usecase-grid h3 {
    font-size: 24px;
}

.usecase-grid p {
    font-size: 15px;
}

/* 09.07 Agent Use Cases — End */

/* 09.08 Agent Pricing — Start */

.agent-plan p,
.agent-plan li {
    font-size: 14px;
}

.agent-plan strong small {
    font-size: 14px;
}

/* 09.08 Agent Pricing — End */

/* 09.09 Agent Reviews — Start */

.review-grid blockquote {
    font-size: 21px;
    line-height: 1.45;
    margin: 0;
    padding: 30px;
    min-height: 230px;
}

/* 09.09 Agent Reviews — End */

/* 09.10 Footer — Start */

.review-grid footer {
    font-size: 13px;
}

/* 09.10 Footer — End */

/* 09.11 FAQ and Accordions — Start */

.accordion summary {
    font-size: 16px;
    padding: 23px 34px 23px 0;
    line-height: 1.4;
}

.accordion p {
    font-size: 15px;
    color: var(--color-text-muted);
}

.faq-layout p {
    font-size: 16px;
}

/* 09.11 FAQ and Accordions — End */

/* ==================== 09. AI Agents — Section Styling — End ==================== */

/* ==================== 10. Creator Studio — Section Styling — Start ==================== */

/* 10.01 Creator Hero — Start */

.creator-hero {
    margin-top: -96px;
    padding-top: 150px;
    padding-bottom: 38px;
    min-height: 850px;
}

.creator-hero-copy {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 0 50px;
    align-items: end;
}

.creator-hero-copy .eyebrow {
    grid-column: 1/3;
}

.creator-hero h1 {
    font-size: 115px;
    grid-row: 2/4;
    line-height: .94;
    font-weight: 600;
    margin: 22px 0 0;
}

.creator-hero-copy p {
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    margin-bottom: 22px;
}

/* 10.01 Creator Hero — End */

/* 10.02 Buttons and Links — Start */

.creator-hero-copy>.pill {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
}

/* 10.02 Buttons and Links — End */

/* 10.03 Creator Hero — Start */

.creator-social {
    display: none;
}

.creator-gallery {
    margin-top: 65px;
    gap: 22px;
    align-items: center;
}

.creator-frame {
    height: 300px;
    border: 5px solid #ffffff77;
    transform: rotate(-4deg);
}

.creator-frame:nth-child(2) {
    height: 320px;
    transform: rotate(3deg);
}

.creator-frame:nth-child(4) {
    height: 320px;
    transform: rotate(-3deg);
}

.creator-frame:nth-child(5) {
    transform: rotate(4deg);
}

.creator-frame.central {
    height: 400px;
    transform: translateY(-8px);
    border-color: var(--color-text);
}

.creator-frame img {
    object-position: 50% 35%;
}

.creator-marquee {
    top: 320px;
    font-size: 216px;
}

/* 10.03 Creator Hero — End */

/* 10.04 Creator Channels — Start */

.brand-strip .container {
    gap: 20px;
}

.brand-strip div {
    font-size: 18px;
    letter-spacing: -.04em;
}

/* 10.04 Creator Channels — End */

/* 10.05 Creator Introduction — Start */

.creator-mosaic {
    grid-template-rows: 230px 230px;
    gap: 20px;
}

.mosaic-stat {
    padding: 30px;
}

.mosaic-stat span {
    font-size: 11px;
}

.mosaic-stat small {
    font-size: 14px;
}

.mosaic-stat strong {
    font-size: 66px;
}

/* 10.05 Creator Introduction — End */

/* 10.06 Creator Prompt Form — Start */

.studio-ui {
    max-width: 1000px;
    padding: 65px 55px;
}

.studio-ui p {
    font-size: 16px;
}

.prompt-demo label {
    font-size: 14px;
}

.prompt-demo input {
    font-size: 15px;
}

.prompt-demo input:focus-visible {
    outline: none;
    box-shadow: none;
}

.prompt-demo > div:focus-within {
    border-color: var(--color-text);
}

.prompt-demo button {
    font-size: 13px;
    min-height: 46px;
}

.prompt-demo small {
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

/* 10.06 Creator Prompt Form — End */

/* 10.07 Creator Services — Start */

.creator-services-grid {
    grid-template-rows: repeat(2, minmax(220px,auto));
}

.creator-services-grid article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.creator-services-grid article:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.creator-services-grid article:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.creator-services-grid article:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

.creator-services-grid h3 {
    font-size: 26px;
}

.creator-services-grid p {
    font-size: 15px;
}

/* 10.07 Creator Services — End */

/* 10.08 Creator Pricing — Start */

.creator-plan li {
    font-size: 14px;
}

.creator-plan>span {
    font-size: 12px;
}

.creator-plan h3 {
    font-size: 32px;
}

/* 10.08 Creator Pricing — End */

/* 10.10 Creator Banner — Start */

/* 10.10 Creator Banner — End */

/* 10.11 Contact Banner — Start */

.creator-end .contact-email {
    font-size: 72px;
}

/* 10.11 Contact Banner — End */

/* ==================== 10. Creator Studio — Section Styling — End ==================== */

/* ==================== 11. Inner Pages and Footer — Start ==================== */

/* 11.01 Inner Page Headers — Start */

.theme-inner {
    background: var(--color-surface);
}

/* 11.01 Inner Page Headers — End */

/* 11.02 Navigation — Start */

.theme-inner .site-header {
    border-bottom: 1px solid var(--color-border);
}

/* 11.02 Navigation — End */

/* 11.03 Inner Page Headers — Start */

.inner-hero {
    padding: 60px 0 90px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 95% 100%, var(--color-surface-violet), transparent 50%);
}

.breadcrumb {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 60px;
}

.inner-hero h1 {
    font-size: clamp(56px,7.5vw,108px);
    line-height: 1.01;
    max-width: 1080px;
    margin: 24px 0 30px;
}

.lead {
    font-size: 20px;
    line-height: 1.6;
    max-width: 650px;
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.theme-inner h3 {
    font-size: 32px;
    line-height: 1.15;
}

/* 11.03 Inner Page Headers — End */

/* 11.04 Editorial Layouts — Start */

.story-split,
.reading-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    align-items: start;
}

.story-split {
    align-items: center;
}

.story-split>img {
    width: 100%;
    aspect-ratio: 1.05;
    object-fit: cover;
    border-radius: 18px;
}

.story-split p,
.reading-split p {
    color: var(--color-text-muted);
    font-size: 17px;
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}

.editorial-card {
    background: var(--color-surface-violet);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 34px;
    min-height: 295px;
}

.editorial-card h3 {
    font-size: 30px;
    line-height: 1.15;
    margin: 38px 0 18px;
}

.editorial-card p {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0;
}

/* 11.04 Editorial Layouts — End */

/* 11.05 Creator Hero — Start */

.theme-creator .editorial-card {
    background: var(--color-surface-warm);
    border-color: #f4e8d9;
}

/* 11.05 Creator Hero — End */

/* 11.06 Editorial Layouts — Start */

.process-list {
    border-top: 1px solid var(--color-border);
}

.process-list article {
    padding: 32px 0;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 120px 1fr 1.2fr;
    gap: 30px;
    align-items: start;
}

.process-list article>span {
    font-size: 13px;
    color: var(--color-primary);
}

.process-list h3,
.process-list p {
    margin: 0;
}

.process-list p {
    color: var(--color-text-muted);
}

/* 11.06 Editorial Layouts — End */

/* 11.07 Service Catalog — Start */

.service-catalog {
    border-top: 1px solid var(--color-border);
}

.catalog-row {
    display: grid;
    grid-template-columns: 60px 1fr 240px;
    align-items: center;
    gap: 30px;
    padding: 35px 0;
    border-bottom: 1px solid var(--color-border);
}

.catalog-row>span {
    color: var(--color-primary);
}

.catalog-row img {
    width: 240px;
    height: 170px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .35s;
}

.catalog-row:hover img {
    transform: rotate(3deg);
}

.catalog-row h3 {
    font-size: clamp(29px,3.5vw,50px);
    margin: 0 0 12px;
}

.catalog-row p {
    color: var(--color-text-muted);
}

.catalog-row small {
    font-size: 13px;
}

.wide-art {
    position: relative;
    padding-top: 50px;
}

.wide-art img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 20px;
}

.wide-art>span {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--color-white);
}

.clean-list {
    padding-left: 20px;
    line-height: 2;
    color: var(--color-text-muted);
}

/* 11.07 Service Catalog — End */

/* 11.08 Portfolio and Case Studies — Start */

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px 30px;
}

.portfolio-card:nth-child(even) {
    padding-top: 100px;
}

.portfolio-card img {
    width: 100%;
    aspect-ratio: 1.13;
    object-fit: cover;
    border-radius: 16px;
    transition: filter .3s;
}

.portfolio-card:hover img {
    filter: brightness(1.13);
}

.portfolio-card>div {
    padding: 25px 0;
}

.portfolio-card h3 {
    margin: 12px 0;
    font-size: 35px;
}

.portfolio-card h3 span {
    float: right;
}

.portfolio-card p {
    color: var(--color-text-muted);
    margin: 0;
}

.project-cover {
    padding-top: 50px;
}

.project-cover img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    border-radius: 20px;
}

.project-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 45px;
    margin-bottom: 70px;
}

.project-facts small {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: .1em;
    margin-bottom: 15px;
}

.project-facts strong {
    font-size: 18px;
    font-weight: 500;
}

/* 11.08 Portfolio and Case Studies — End */

/* 11.09 Pricing Comparison — Start */

.table-scroll {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 610px;
}

caption {
    text-align: left;
    padding: 20px;
    font-size: 13px;
    color: var(--color-text-muted);
}

th,
td {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

thead {
    background: var(--color-surface-violet);
}

th {
    font-weight: 600;
}

.fine-print {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 24px;
}

/* 11.09 Pricing Comparison — End */

/* 11.10 Journal Articles — Start */

.article-card {
    display: flex;
    flex-direction: column;
}

.article-card img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}

.article-card h3 {
    margin: 18px 0;
    font-size: 31px;
}

.article-card h3 .article-title-line {
    display: block;
}

.article-card p {
    color: var(--color-text-muted);
    margin-bottom: 25px;
}

.article-card .article-card-cta {
    align-self: flex-start;
    gap: 14px;
    margin-top: auto;
    padding: 6px 6px 6px 20px;
}

.article-card:hover .article-card-cta,
.article-card:focus-visible .article-card-cta {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px #00000022;
}

.article-body {
    max-width: 780px;
    margin: auto;
    padding: 80px 30px 110px;
    font-size: 18px;
}

.article-body p,
.article-body li {
    color: #4e515b;
    line-height: 1.85;
}

.article-body .article-intro {
    font-size: 26px;
    line-height: 1.55;
    color: var(--color-text);
}

.article-body h2 {
    font-size: 37px;
    line-height: 1.1;
    margin: 50px 0 22px;
}

.article-body blockquote {
    margin: 40px 0;
    padding: 25px 30px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface-violet);
    font-size: 29px;
    line-height: 1.4;
    letter-spacing: -.025em;
}

.article-cover img {
    height: 440px;
}

/* 11.10 Journal Articles — End */

/* 11.11 FAQ and Accordions — Start */

.faq-page-section {
    background:
        radial-gradient(circle at 8% 88%, rgba(137, 90, 208, .15), transparent 37%),
        radial-gradient(circle at 92% 16%, rgba(244, 128, 139, .12), transparent 34%),
        linear-gradient(145deg, #fffaf6 0%, #faf6fb 100%);
}

.faq-page-section .center-heading h2 span {
    color: #e65b74;
}

/* 11.11 FAQ and Accordions — End */

/* 11.12 Contact Form — Start */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 10%;
}

.contact-layout h2 {
    font-size: clamp(40px,5vw,66px);
    line-height: 1.05;
    margin: 20px 0;
}

.contact-layout p {
    color: var(--color-text-muted);
}

.demo-note {
    background: var(--color-surface-violet);
    border-left: 3px solid var(--color-primary);
    padding: 22px;
    margin: 30px 0;
}

.demo-note p {
    font-size: 14px;
    margin: 8px 0 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-white);
    padding: 38px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    align-self: start;
}

.contact-form label {
    font-size: 14px;
    margin-top: 10px;
}

.contact-form label span {
    font-size: 12px;
    color: var(--color-text-muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    border: 1px solid #cacdd5;
    border-radius: 8px;
    padding: 13px;
    background: var(--color-surface);
    color: var(--color-text);
    min-width: 0;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
}

.form-status {
    font-size: 13px;
    margin: 8px 0 0;
}

/* 11.12 Contact Form — End */

/* 11.13 Error Page — Start */

.theme-error .error-screen {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px 24px;
    background:
        radial-gradient(ellipse 35% 42% at 50% 43%, rgba(143, 119, 199, .26), transparent 100%),
        radial-gradient(ellipse 42% 70% at 0 100%, rgba(199, 175, 228, .3), transparent 100%),
        linear-gradient(135deg, #eeeef1 0%, #dfe0e7 58%, #e9e8ed 100%);
    color: var(--color-text);
}

.theme-error .error-content { width: min(100%, 900px); text-align: center; }
.theme-error .error-eyebrow { color: var(--color-agent-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.theme-error .error-hero-visual { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; margin: 24px auto 8px; }
.theme-error .error-hero-visual span { color: #302947; font-family: var(--font-heading); font-size: 250px; font-weight: 500; line-height: 1; letter-spacing: -.08em; text-shadow: 0 0 34px rgba(121, 83, 199, .2); }
.theme-error .error-hero-visual img { width: 310px; height: 310px; object-fit: contain; filter: drop-shadow(0 20px 35px rgba(116, 68, 184, .18)); }
.theme-error .error-content h1 { margin: 10px 0 13px; color: var(--color-text); font-size: 48px; line-height: 1.1; }
.theme-error .error-content h1 span { color: var(--color-agent-accent); }
.theme-error .error-content > p { max-width: 560px; margin: 0 auto; color: var(--color-text-muted); font-size: 16px; line-height: 1.65; }
.theme-error .error-home-link { gap: 15px; min-height: 48px; margin-top: 30px; padding: 6px 6px 6px 22px; background: var(--color-agent-accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.theme-error .error-home-link .pill-icon { width: 36px; height: 36px; background: #fff; color: var(--color-agent-accent); }
.theme-error .error-home-link .lucide-icon { width: 16px; height: 16px; transform: rotate(-45deg); }

/* 11.13 Error Page — End */

/* 11.14 Footer — Start */

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-bottom: 35px;
}

.footer-top p {
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -.025em;
    color: #cbcbd4;
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 18px 30px;
    flex-wrap: wrap;
    padding: 28px 0;
    border-block: 1px solid #ffffff25;
    font-size: 14px;
}

.footer-links a:hover {
    color: #adc0ff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    color: #a6a6b1;
    font-size: 12px;
}

.footer-bottom small {
    font-size: 12px;
}

.site-footer {
    padding: 55px 0 30px;
}

/* 11.14 Footer — End */

/* ==================== 11. Inner Pages and Footer — End ==================== */

/* ==================== 12. Entrance Animation and Navigation Fallback — Start ==================== */

/* 12.01 Motion and Progressive Enhancement — Start */

html.js [data-reveal] {
    transition: opacity .75s, transform .75s;
    transition-delay: var(--reveal-delay,0ms);
}

html.js [data-reveal].in-view {
    transform: none;
}

/* 12.01 Motion and Progressive Enhancement — End */

/* 12.02 Agency Hero — Start */

.hero-feature {
    --reveal-delay: 160ms;
}

.agency-intro>*:nth-child(2),
.agent-headline>*:nth-child(2),
.creator-hero-copy>*:nth-child(2) {
    animation: hero-enter .85s both;
}

.agency-intro>*:nth-child(3),
.agent-headline>*:nth-child(3) {
    animation: hero-enter 1s .12s both;
}

/* 12.02 Agency Hero — End */

/* 12.03 Animation: hero-enter — Start */

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 12.03 Animation: hero-enter — End */

/* 12.04 Navigation — Start */

html:not(.js) .menu-toggle {
    display: none;
}

html:not(.js) .desktop-nav {
    display: flex;
    flex-wrap: wrap;
}

html:not(.js) .site-header {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    padding-block: 15px;
}

/* 12.04 Navigation — End */

/* ==================== 12. Entrance Animation and Navigation Fallback — End ==================== */

/* ==================== 13. Responsive Component Styling — Start ==================== */

/* 13.01 Responsive: (min-width:801px) and (max-width:1100px) — Start */

/* 13.01 Responsive: (min-width:801px) and (max-width:1100px) — End */

/* 13.02 Responsive: (max-width:800px) — Start */

/* 13.02 Responsive: (max-width:800px) — End */

/* 13.03 Responsive: (max-width:600px) — Start */

/* 13.03 Responsive: (max-width:600px) — End */

/* 13.04 Responsive: (max-width:360px) — Start */

/* 13.04 Responsive: (max-width:360px) — End */

/* ==================== 13. Responsive Component Styling — End ==================== */

/* ==================== 14. Supporting Components — Start ==================== */

/* 14.01 Agency Hero — Start */

.hero-feature {
    display: block;
    position: relative;
}

/* 14.01 Agency Hero — End */

/* 14.02 Global Layout and Typography — Start */

.mobile-menu {
    transition: opacity .3s, transform .3s;
}

/* 14.02 Global Layout and Typography — End */

/* 14.03 Portfolio and Case Studies — Start */

.detail-back {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    padding-bottom: 90px;
}

/* 14.03 Portfolio and Case Studies — End */

/* 14.04 Editorial Layouts — Start */

.reading-split h2 {
    font-size: clamp(36px,4vw,56px);
    line-height: 1.08;
    margin-top: 20px;
}

/* 14.04 Editorial Layouts — End */

/* 14.05 Responsive: (max-width:600px) — Start */

/* 14.05 Responsive: (max-width:600px) — End */

/* 14.06 Navigation — Start */

.menu-open.theme-agent .site-header {
    background: var(--color-text);
}

/* 14.06 Navigation — End */

/* ==================== 14. Supporting Components — End ==================== */

/* ==================== 15. Reduced Motion and Tablet Spacing — Start ==================== */

/* 15.01 Responsive: (prefers-reduced-motion:reduce) — Start */

/* 15.01 Responsive: (prefers-reduced-motion:reduce) — End */

/* 15.02 Responsive: (min-width:601px) and (max-width:800px) — Start */

/* 15.02 Responsive: (min-width:601px) and (max-width:800px) — End */

/* ==================== 15. Reduced Motion and Tablet Spacing — End ==================== */

/* ==================== 16. AI Agency Bootstrap Navigation and Layout — Start ==================== */

.theme-agency { --section-spacing: 112px; }

/* 16.01 Navigation — Start */

.home-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    color: var(--color-white);
}

.home-navbar {
    min-height: 96px;
    padding-block: 14px;
}

.home-navbar .brand {
    color: var(--color-white);
    margin: 0;
}

.home-navigation {
    flex-grow: 0;
    gap: 16px;
    margin-left: auto;
}

.home-nav-list {
    min-width: 580px;
    justify-content: space-between;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 100px;
    background: rgba(255, 255, 255, .11);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-nav-link {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 15px !important;
    border-radius: 30px;
    transition: background .2s ease, color .2s ease;
}

.home-nav-link:hover,
.home-nav-link:focus-visible,
.home-nav-link.active,
.home-nav-link.show {
    color: var(--color-white);
    background: rgba(255, 255, 255, .16);
}

.theme-agency .home-nav-list .home-nav-link:is(:hover, :focus-visible, .active, .show) {
    color: var(--color-white);
}

.home-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    padding: 7px 8px 7px 18px;
    border-radius: 30px;
    color: var(--color-text);
    background: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-contact-link:hover {
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.home-contact-link span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 17px;
}

.home-mega {
    position: static;
}

.home-mega-menu,
.home-dropdown {
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-white);
    box-shadow: 0 24px 65px rgba(10, 18, 49, .18);
    padding: 14px;
}

.home-mega .home-mega-menu {
    width: min(1280px, calc(100vw - 32px));
    left: 50%;
    top: calc(100% - 4px);
    transform: translateX(-50%);
    padding: 22px 10px;
}

.home-mega-grid > div {
    padding-inline: 18px;
    border-right: 1px solid var(--color-border);
}

.home-mega-grid > div:last-child {
    border-right: 0;
}

.home-preview {
    display: block;
    color: var(--color-text);
    transition: transform .25s ease;
}

.home-preview:hover,
.home-preview:focus-visible {
    color: var(--color-text);
    transform: translateY(-4px);
}

.home-preview-image {
    display: block;
    aspect-ratio: 1.28;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 12px 28px rgba(10, 18, 49, .08);
    transition: outline-color .2s ease, box-shadow .25s ease;
}

.home-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .35s ease;
}

.home-preview:hover .home-preview-image img {
    transform: scale(1.035);
}

.home-preview.is-current .home-preview-image {
    outline-color: var(--color-primary);
}

.home-preview:focus-visible .home-preview-image {
    outline-color: var(--color-focus);
}

.home-preview-copy {
    display: block;
    padding: 20px 2px 8px;
}

.home-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-preview-heading strong {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.04em;
}

.home-preview-arrow {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #edf3ff;
    color: var(--color-primary);
    font-size: 20px;
}

.home-mega-grid > div:nth-child(2) .home-preview-arrow {
    background: var(--color-surface-warm);
    color: var(--color-agent-accent);
}

.home-mega-grid > div:nth-child(3) .home-preview-arrow {
    background: var(--color-surface-violet);
    color: var(--color-primary);
}

.home-preview small {
    display: block;
    max-width: 310px;
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.45;
}

.home-dropdown {
    min-width: 210px;
}

.home-dropdown-link {
    border-radius: 9px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
}

.home-dropdown-link:hover,
.home-dropdown-link:focus-visible {
    color: var(--color-primary);
    background: var(--color-surface);
}

/* 16.01 Navigation — End */

/* 16.02 AI Agency Layout — Start */

.theme-agency .agency-hero-top,
.theme-agency .stat-grid {
    gap: 0;
}

.theme-agency .stat-grid {
    display: flex;
}

.theme-agency .stat-grid > div {
    padding-inline: calc(var(--bs-gutter-x) * .5);
}

.theme-agency .hero-feature {
    display: block;
    max-width: 100%;
    margin-left: auto;
}

.theme-agency .home-work-grid .work-card {
    display: block;
    width: 100%;
    margin-top: 0;
}

.theme-agency .home-work-third .work-sigil {
    margin-bottom: 24px;
}

.theme-agency .home-contact-inner .contact-box {
    margin-left: auto;
}

/* 16.02 AI Agency Layout — End */

/* 16.03 Responsive Navigation and Layout — Start */

/* 16.03 Responsive Navigation and Layout — End */

/* ==================== 16. AI Agency Bootstrap Navigation and Layout — End ==================== */

/* ==================== 17. AI Agency Service Selection — Start ==================== */

.theme-agency .service-row,
.theme-agency .service-row.active {
    padding: 22px;
}

.theme-agency .service-row {
    transition: min-height .45s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, border-radius .25s ease;
}

/* ==================== 17. AI Agency Service Selection — End ==================== */

/* ==================== 18. AI Agency About Section — Start ==================== */

.about-section {
    padding: 115px 0;
    background: radial-gradient(ellipse at 12% 72%, rgba(31, 80, 175, .22), transparent 38%), #080d18;
    color: var(--color-white);
}

.theme-agency .about-section {
    padding: 115px 0;
    background: radial-gradient(ellipse at 12% 72%, rgba(31, 80, 175, .22), transparent 38%), #080d18;
}

.home-about-heading {
    margin-bottom: clamp(42px, 5vw, 70px);
    text-align: center;
}

.home-about-heading .eyebrow {
    display: block;
    margin-bottom: 24px;
    color: #8db6ff;
}

.home-about-heading-row {
    text-align: center;
}

.home-about-heading h2 {
    margin: 0;
    font-size: 98px;
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: .97;
}

.home-about-heading h2 span {
    color: #77c7ff;
}

.home-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.home-about-visual {
    position: relative;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(134, 182, 255, .24);
    border-radius: 24px;
    background: rgba(255, 255, 255, .04);
}

.home-about-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 0.7;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
}

.home-about-image-note {
    position: absolute;
    right: 30px;
    bottom: 30px;
    max-width: calc(100% - 60px);
    padding: 20px 23px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(9, 19, 42, .82);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
    backdrop-filter: blur(12px);
}

.home-about-image-note span,
.home-about-kicker {
    display: block;
    color: #91baff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}

.home-about-image-note strong {
    display: block;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.home-about-copy {
    min-width: 0;
}

.home-about-copy h3 {
    margin: 18px 0 24px;
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1.12;
}

.home-about-copy h3 span {
    color: #77c7ff;
}

.home-about-copy > p {
    max-width: 500px;
    margin: 0 0 26px;
    color: #bcc6d8;
    font-size: 16px;
    line-height: 1.7;
}

.home-about-principles {
    margin-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.home-about-principles > div {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.home-about-principles span {
    color: #91baff;
    font-size: 11px;
    letter-spacing: .08em;
}

.home-about-principles strong {
    font-size: 15px;
    font-weight: 500;
}

.home-about-link {
    width: fit-content;
    padding-left: 21px;
    padding-right: 5px;
    font-size: 13px;
}

/* ==================== 18. AI Agency About Section — End ==================== */

/* ==================== 19. AI Agency Testimonials — Start ==================== */

.home-testimonial-section {
    padding: 130px 0;
    background: var(--color-black);
}

.theme-agency .home-testimonial-label {
    margin: 0 0 clamp(48px, 5vw, 72px);
    color: #a3e3fa;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
}

.home-testimonial-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-testimonial-left {
    padding-top: 145px;
}

.home-testimonial-right {
    align-items: flex-end;
    padding-top: 190px;
}

.home-testimonial-control {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    transition: color .2s ease;
}

.home-testimonial-control:hover {
    color: var(--color-primary);
}

.home-testimonial-control span {
    font-size: 28px;
    line-height: .7;
}

.home-testimonial-side img,
.home-testimonial-side .reviewer-initials {
    width: min(100%, 255px);
    margin-top: 28px;
    border-radius: 22px;
    object-fit: cover;
}

.home-testimonial-side .reviewer-initials {
    height: auto;
    background: linear-gradient(145deg, #18376f, #264fa0);
    color: var(--color-white);
    font-size: 52px;
}

.home-testimonial-left img,
.home-testimonial-left .reviewer-initials {
    aspect-ratio: .88;
}

.home-testimonial-right img,
.home-testimonial-right .reviewer-initials {
    width: min(100%, 210px);
    aspect-ratio: 1;
}

.home-testimonial-content {
    position: relative;
    padding-left: 82px;
}

.home-testimonial-mark {
    position: absolute;
    top: -30px;
    left: -22px;
    color: var(--color-primary);
    font-family: Georgia, serif;
    font-size: 160px;
    font-weight: 700;
    line-height: 1;
}

.home-testimonial-panel {
    transition: opacity .18s ease, transform .18s ease;
}

.home-testimonial-panel.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

.home-testimonial-panel blockquote {
    margin: 0;
}

.home-testimonial-panel blockquote p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 51px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.12;
}

.home-testimonial-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 60px 0 0;
}

.home-testimonial-rule {
    width: 42px;
    height: 1px;
    margin-right: 16px;
    background: rgba(255, 255, 255, .45);
}

.home-testimonial-author > img,
.home-testimonial-author > .reviewer-initials {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.home-testimonial-author > .reviewer-initials {
    background: rgba(255, 255, 255, .16);
    color: var(--color-white);
}

.home-testimonial-author strong {
    font-size: 22px;
    font-weight: 500;
}

.home-testimonial-author small {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

/* ==================== 19. AI Agency Testimonials — End ==================== */

/* ==================== 20. AI Agency Contact Banner — Start ==================== */

.theme-agency .agency-endcap {
    color: var(--color-white);
    background:
        radial-gradient(ellipse at 80% 3%, rgba(133, 202, 237, .62), transparent 38%),
        linear-gradient(180deg, #285bc4 0%, #1c47aa 45%, #17336e 72%, #111522 100%);
}

.theme-agency .agency-endcap .contact-panel {
    padding-bottom: 100px;
    background: transparent;
}

.theme-agency .agency-endcap .site-footer {
    padding-top: 38px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
}

.theme-agency .contact-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.theme-agency .contact-email .lucide-icon {
    width: 18px;
    height: 18px;
}

.theme-agency .home-contact-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(144, 203, 255, .35);
    background: #081529;
    font-weight: 500;
    transition: transform .25s ease, box-shadow .25s ease;
}

.theme-agency .home-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .2);
}

.home-contact-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: 0;
    pointer-events: none;
}

.home-contact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 12, 28, .96) 0%, rgba(5, 12, 28, .78) 38%, rgba(5, 12, 28, .08) 100%);
    pointer-events: none;
}

.home-contact-card-copy,
.home-contact-card .circle-arrow {
    position: relative;
    z-index: 2;
}

.home-contact-card-copy {
    max-width: 52%;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.35;
}

/* ==================== 20. AI Agency Contact Banner — End ==================== */

/* ==================== 21. Lucide Icons — Start ==================== */

.lucide-icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.125em;
    transform: rotate(-45deg);
}

.theme-agency .lucide-arrow-left {
    transform: rotate(180deg);
}

.theme-agency .home-testimonial-right .lucide-icon {
    transform: none;
}

.theme-agency .lucide-arrow-down {
    transform: rotate(90deg);
}

/* ==================== 21. Lucide Icons — End ==================== */

/* ==================== 22. Button Typography — Start ==================== */

button,
.pill,
.service-select,
.home-contact-link,
.home-about-link,
.contact-email,
.contact-box,
.circle-arrow,
.text-link,
.work-hover {
    font-family: var(--font-body);
    text-transform: capitalize;
}

/* ==================== 22. Button Typography — End ==================== */

/* ==================== 23. AI Agency Button Icons — Start ==================== */

.theme-agency .pill {
    padding: 6px 6px 6px 22px;
}

/* ==================== 23. AI Agency Button Icons — End ==================== */

/* ==================== 24. Creator Studio Header — Start ==================== */

.theme-creator .home-header {
    position: relative;
    background: transparent;
    color: var(--color-surface-dark);
}

.theme-creator .creator-header-width {
    padding-inline: var(--creator-page-gutter);
}

.theme-creator .home-navbar .brand,
.theme-creator .home-navbar .brand-dot {
    color: var(--color-surface-dark);
}

.theme-creator .home-nav-list {
    border-color: rgba(16, 17, 21, .08);
    background: rgba(255, 255, 255, .42);
}

.theme-creator .home-nav-link {
    color: var(--color-surface-dark);
}

.theme-creator .home-nav-link:hover,
.theme-creator .home-nav-link:focus-visible,
.theme-creator .home-nav-link.active,
.theme-creator .home-nav-link.show {
    color: var(--color-surface-dark);
    background: rgba(16, 17, 21, .09);
}

.theme-creator .home-contact-link {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.theme-creator .home-contact-link:hover {
    color: var(--color-white);
}

.theme-creator .home-contact-link span {
    background: var(--color-creator-accent);
    color: var(--color-surface-dark);
}

.theme-creator .creator-hero {
    margin-top: -96px;
    padding-top: 142px;
}

/* ==================== 24. Creator Studio Header — End ==================== */

/* ==================== 25. Creator Studio Button Icons — Start ==================== */

.theme-creator .pill {
    justify-content: space-between;
    padding: 6px 6px 6px 22px;
}

.theme-creator .prompt-demo button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 5px 5px 18px;
    white-space: nowrap;
}

.theme-creator .prompt-demo button .pill-icon {
    width: 32px;
    height: 32px;
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.theme-creator .contact-email {
    display: inline-flex;
    align-items: center;
    gap: .2em;
}

.theme-creator .contact-email .lucide-icon {
    width: .7em;
    height: .7em;
}

.theme-creator .lucide-arrow-up {
    transform: rotate(-90deg);
}

/* ==================== 25. Creator Studio Button Icons — End ==================== */

/* ==================== 26. Creator Studio Media Hero — Start ==================== */

.theme-creator .creator-media-hero {
    min-height: clamp(900px, 78.125vw, 1500px);
    margin-top: -96px;
    padding: 166px 0 80px;
    background: radial-gradient(ellipse 38% 42% at 53% 105%, #ed5058 0%, rgba(237, 80, 88, .92) 34%, transparent 100%), radial-gradient(ellipse 36% 37% at 18% 107%, rgba(255, 202, 79, .5), transparent), radial-gradient(ellipse 25% 23% at 103% 45%, #ed3984, transparent), radial-gradient(ellipse 48% 56% at 96% 80%, #ed3984, transparent), radial-gradient(ellipse 30% 25% at 98% 27%, #f08737, transparent), radial-gradient(ellipse 40% 47% at 75% 45%, #ffad30, transparent), linear-gradient(110deg, #fbf6f1 39%, #faece0 63%, #f6d99f);
}

.creator-media-hero .creator-hero-copy {
    position: relative;
    display: block;
    max-width: none;
    padding-inline: var(--creator-page-gutter);
}

.creator-media-hero h1 {
    margin: 0;
    font-size: 140px;
    font-weight: 650;
    line-height: .86;
    letter-spacing: -.065em;
}

.creator-media-hero h1 .creator-hero-line {
    display: block;
    color: var(--color-text);
    white-space: nowrap;
}

.creator-media-hero h1 .creator-hero-line-offset {
    margin: 8px 0 0 clamp(195px, 20vw, 390px);
    letter-spacing: -.052em;
}

.creator-media-hero .creator-hero-copy p {
    position: absolute;
    top: 54%;
    left: var(--creator-page-gutter);
    max-width: 300px;
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
}

.creator-media-hero .creator-social {
    position: absolute;
    top: 24px;
    right: 16.3%;
    display: flex;
    gap: 0;
}

.creator-media-hero .creator-social img {
    width: clamp(38px, 3.65vw, 70px);
    height: clamp(38px, 3.65vw, 70px);
    margin-left: clamp(-14px, -.73vw, -6px);
}

.creator-media-hero .creator-marquee {
    top: clamp(360px, 31vw, 595px);
    bottom: auto;
    left: -2%;
    z-index: 0;
    color: rgba(255, 255, 255, .48);
    font-size: 360px;
    letter-spacing: -.1em;
}

.creator-media-hero .creator-gallery {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr;
    align-items: end;
    width: 100%;
    max-width: 1920px;
    gap: clamp(12px, 1.65vw, 32px);
    margin: 34px auto 0;
    padding-inline: 43px;
    touch-action: pan-y;
}

.creator-media-hero .creator-gallery:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 8px;
}

.creator-media-hero .creator-gallery > .creator-frame:not(.central) {
    display: block;
    width: 100%;
    height: clamp(220px, 25.8vw, 496px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: var(--color-white);
    cursor: pointer;
    transform: none;
    box-shadow: 0 14px 30px rgba(101, 49, 52, .12);
    transition: transform .28s ease, opacity .2s ease, box-shadow .28s ease;
}

.creator-media-hero .creator-gallery > .creator-frame:not(.central):hover,
.creator-media-hero .creator-gallery > .creator-frame:not(.central):focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(101, 49, 52, .24);
}

.creator-media-hero .creator-gallery > .creator-frame:not(.central):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.creator-media-hero .creator-gallery > .creator-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.creator-media-hero .creator-gallery > .creator-frame:first-child img {
    transform: scale(1.2);
    transform-origin: center 25%;
}

.creator-media-hero .creator-gallery > .creator-frame:nth-child(2) img {
    transform: scale(1.08);
    transform-origin: center 30%;
}

.creator-media-hero .creator-phone {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: clamp(340px, 40vw, 770px);
    padding: 9px;
    overflow: hidden;
    border: 9px solid var(--color-surface-dark);
    border-bottom-width: 12px;
    border-radius: 34px;
    background: var(--color-white);
    transform: translateY(clamp(8px, 2.6vw, 50px));
    box-shadow: 0 18px 42px rgba(16, 17, 21, .22);
}

.creator-media-hero .phone-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(25px, 2.6vw, 50px);
    min-height: clamp(25px, 2.6vw, 50px);
    padding: 2px 8px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 700;
}

.creator-media-hero .phone-top span {
    margin: 0;
    font-size: 11px;
}

.creator-media-hero .phone-island {
    width: clamp(45px, 5.2vw, 100px);
    height: clamp(12px, 1.5vw, 28px);
    border-radius: 100px;
    background: var(--color-surface-dark);
}

.creator-media-hero .phone-profiles {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: clamp(52px, 7vw, 135px);
    min-height: clamp(52px, 7vw, 135px);
    background: var(--color-white);
}

.creator-media-hero .phone-profiles figure {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: 0;
}

.creator-media-hero .creator-gallery .phone-profiles img {
    width: clamp(30px, 3vw, 58px);
    height: clamp(30px, 3vw, 58px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center 28%;
}

.creator-media-hero .phone-profiles figcaption {
    color: var(--color-text);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.creator-media-hero .creator-phone-screen {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
}

.creator-media-hero .creator-gallery > .creator-phone .creator-phone-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center 48%;
    transform: scale(1.24);
    transition: opacity .18s ease, transform .25s ease;
}

.creator-media-hero .creator-gallery.is-sliding > .creator-frame:not(.central) {
    opacity: .55;
    transform: translateX(calc(var(--slide-direction, 1) * -24px));
}

.creator-media-hero .creator-gallery.is-sliding .creator-phone-image {
    opacity: .35;
    transform: scale(1.27);
}

/* ==================== 26. Creator Studio Media Hero — End ==================== */

/* ==================== 27. Creator Studio Brand Marquee — Start ==================== */

.creator-brand-strip {
    display: flex;
    align-items: center;
    height: clamp(130px, 11.45vw, 220px);
    padding: 0;
    overflow: hidden;
    background: var(--color-white);
}

.creator-brand-strip .creator-brand-inner {
    display: flex;
    align-items: center;
    gap: clamp(32px, 7vw, 134px);
    padding-inline: var(--creator-page-gutter);
}

.creator-brand-label {
    flex: none;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.creator-brand-viewport {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.creator-brand-track,
.creator-brand-set {
    display: flex;
    align-items: center;
    width: max-content;
}

.creator-brand-track {
    animation: creator-brand-slide 34s linear infinite;
    will-change: transform;
}

.creator-brand-set {
    flex: none;
    gap: 86px;
    padding-right: 86px;
}

.creator-brand-set img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
}

.creator-brand-strip:hover .creator-brand-track {
    animation-play-state: paused;
}

@keyframes creator-brand-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ==================== 27. Creator Studio Brand Marquee — End ==================== */

/* ==================== 28. Creator Studio Content Width — Start ==================== */

.creator-page-container {
    padding-inline: var(--creator-page-gutter, var(--agent-page-gutter, clamp(24px, 9vw, 174px)));
}

/* ==================== 28. Creator Studio Content Width — End ==================== */

/* ==================== 29. Creator Studio Process — Start ==================== */

.creator-process {
    padding: 130px 0;
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.creator-process-layout {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: start;
    gap: clamp(70px, 8vw, 160px);
}

.creator-process-intro {
    position: sticky;
    top: clamp(88px, 11vh, 132px);
    align-self: start;
    padding-top: 12px;
}

.creator-process-kicker,
.creator-process-stage {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
}

.creator-process-kicker {
    color: var(--creator-process-accent, var(--color-creator-accent));
}

.creator-process h2 {
    max-width: 680px;
    margin: 32px 0 34px;
    font-size: 61px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.06em;
}

.creator-process h2 span {
    color: var(--creator-process-accent, var(--color-creator-accent));
}

.creator-process-intro p {
    max-width: 440px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 17px;
    line-height: 1.65;
}

.creator-process-rule {
    display: block;
    width: 92px;
    height: 2px;
    margin-top: 58px;
    background: var(--creator-process-accent, var(--color-creator-accent));
}

.creator-process-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.creator-process-list li {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.creator-process-list li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.creator-process-number {
    color: var(--creator-process-accent, var(--color-creator-accent));
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.05em;
}

.creator-process-stage {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.creator-process-list h3 {
    margin: 14px 0 11px;
    color: var(--color-white);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.creator-process-list p {
    max-width: 540px;
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 16px;
    line-height: 1.6;
}

/* ==================== 29. Creator Studio Process — End ==================== */

/* ==================== 29.01 Creator Introduction — Start ==================== */

.theme-creator .creator-intro .center-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: end;
    column-gap: clamp(40px, 6vw, 110px);
    max-width: none;
    margin-bottom: clamp(42px, 4.5vw, 72px);
    text-align: left;
}

.theme-creator .creator-intro .center-heading .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 22px;
}

.theme-creator .creator-intro .center-heading h2 {
    grid-column: 1;
    grid-row: 2 / 4;
    margin: 0;
    font-size: 68px;
    line-height: 1.06;
}

.theme-creator .creator-intro .center-heading p {
    grid-column: 2;
    grid-row: 2;
    max-width: 410px;
    margin: 0 0 20px;
    line-height: 1.6;
}

.theme-creator .creator-intro .center-heading .pill {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
}

.theme-creator .creator-intro .creator-star {
    top: -25px;
    right: 4%;
    left: auto;
    font-size: 58px;
}

.theme-creator .creator-intro .creator-mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, 230px);
    gap: 16px;
}

.theme-creator .creator-intro .creator-mosaic > :nth-child(1),
.theme-creator .creator-intro .creator-mosaic > :nth-child(6) { grid-column: span 5; }

.theme-creator .creator-intro .creator-mosaic > :nth-child(2),
.theme-creator .creator-intro .creator-mosaic > :nth-child(5) { grid-column: span 4; }

.theme-creator .creator-intro .creator-mosaic > :nth-child(3),
.theme-creator .creator-intro .creator-mosaic > :nth-child(4) { grid-column: span 3; }

.theme-creator .creator-intro .mosaic-stat.peach { background: #fff0e8; }
.theme-creator .creator-intro .mosaic-stat:nth-child(4) { background: #f5f0fb; }

/* ==================== 29.01 Creator Introduction — End ==================== */

/* ==================== 29.02 Creator Toolkit — Start ==================== */

.theme-creator .creator-services-editorial {
    background: #fcf8f2;
}

.theme-creator .creator-toolkit-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, .9fr);
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
}

.theme-creator .creator-toolkit-intro {
    padding-top: 13px;
}

.theme-creator .creator-toolkit-intro .eyebrow {
    display: block;
    margin-bottom: clamp(24px, 3vw, 46px);
}

.theme-creator .creator-toolkit-intro h2 {
    margin: 0;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -.055em;
}

.theme-creator .creator-toolkit-intro h2 span {
    color: #895ad0;
}

.theme-creator .creator-toolkit-intro p {
    max-width: 330px;
    margin: 28px 0 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.theme-creator .creator-toolkit-portrait {
    grid-column: 3;
    grid-row: 1;
    height: clamp(420px, 34vw, 540px);
    overflow: hidden;
    border-radius: 20px;
}

.theme-creator .creator-toolkit-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% center;
}

.theme-creator .creator-toolkit-list {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid #dfd7d0;
}

.theme-creator .creator-toolkit-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 26px;
    align-items: start;
    gap: 17px;
    padding: 24px 0;
    border-top: 1px solid #dfd7d0;
}

.theme-creator .creator-toolkit-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 13px;
    background: #eee7f9;
}

.theme-creator .creator-toolkit-icon img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(40%) sepia(32%) saturate(1570%) hue-rotate(223deg) brightness(91%) contrast(91%);
}

.theme-creator .creator-toolkit-item:nth-child(even) .creator-toolkit-icon {
    background: #ffebee;
}

.theme-creator .creator-toolkit-copy h3 {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.2;
}

.theme-creator .creator-toolkit-copy p {
    max-width: 300px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.theme-creator .creator-toolkit-number {
    padding-top: 4px;
    color: #a88e94;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: right;
}

/* ==================== 29.02 Creator Toolkit — End ==================== */

/* ==================== 30. AI Agents Navigation, Icons and Content Width — Start ==================== */

/* 30.01 Navigation and Hero — Start */

.theme-agent .agent-hero {
    margin-top: 0;
}

.theme-agent .home-nav-list .home-nav-link {
    color: var(--color-white);
}

.theme-agent .home-nav-list .home-nav-link:hover,
.theme-agent .home-nav-list .home-nav-link:focus-visible,
.theme-agent .home-nav-list .home-nav-link.active,
.theme-agent .home-nav-list .home-nav-link.show {
    color: var(--color-white);
    background: rgba(255, 255, 255, .16);
}

.theme-agent .home-contact-link span {
    background: var(--color-agent-accent);
}

/* 30.01 Navigation and Hero — End */

/* 30.02 Buttons and Use Case Icons — Start */

.theme-agent .pill,
.theme-team-detail .team-detail-actions .pill {
    justify-content: space-between;
    padding: 6px 6px 6px 22px;
}

.theme-agent .usecase-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-surface-violet);
    color: var(--color-agent-accent);
}

.theme-agent .usecase-icon .lucide-icon {
    width: 24px;
    height: 24px;
    transform: none;
}

.theme-agent .lucide-arrow-up {
    transform: rotate(-90deg);
}

/* 30.02 Buttons and Use Case Icons — End */

/* 30.03 Content Width — Start */

.theme-agent {
    --agent-page-gutter: 130px;
    --section-spacing: 112px;
}

.agent-page-container {
    padding-inline: var(--agent-page-gutter, var(--creator-page-gutter, clamp(24px, 9vw, 174px)));
}

/* 30.03 Content Width — End */

/* 30.04 Section Eyebrows — Start */

.theme-agent .eyebrow {
    display: block;
    margin: 0 0 18px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
}

.theme-agent .eyebrow.violet { color: var(--color-agent-accent); }
.theme-agent .eyebrow.light { color: #e1e4ff; }

/* 30.04 Section Eyebrows — End */

/* 30.05 Section Headings and Descriptions — Start */

.agent-section-title {
    margin: 0 0 22px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.agent-section-title.light { color: var(--color-white); }

.agent-section-description {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* 30.05 Section Headings and Descriptions — End */

/* ==================== 30. AI Agents Navigation, Icons and Content Width — End ==================== */

/* ==================== 31. AI Agents Banner — Start ==================== */

/* 31.01 Header — Start */

.theme-agent .home-header {
    position: relative;
    background: transparent;
    color: var(--color-surface-dark);
}

.theme-agent .home-navbar {
    min-height: 96px;
    padding-block: 14px;
}

.theme-agent .home-navbar > .agent-page-container {
    width: 100%;
    min-height: 0;
    padding-inline: var(--agent-page-gutter);
    border-radius: 0;
    background: transparent;
}

.theme-agent .home-navbar .brand,
.theme-agent .home-navbar .brand-dot {
    color: var(--color-text);
}

.theme-agent .home-nav-list {
    padding: 6px 8px;
    border: 1px solid rgba(16, 17, 21, .08);
    background: rgba(255, 255, 255, .42);
    backdrop-filter: none;
}

.theme-agent .home-nav-list .home-nav-link {
    color: var(--color-text);
}

.theme-agent .home-nav-list .home-nav-link:hover,
.theme-agent .home-nav-list .home-nav-link:focus-visible,
.theme-agent .home-nav-list .home-nav-link.active,
.theme-agent .home-nav-list .home-nav-link.show {
    color: var(--color-text);
    background: rgba(16, 17, 21, .09);
}

.theme-agent .home-contact-link {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.theme-agent .home-contact-link:hover {
    color: var(--color-white);
}

.theme-agent .home-contact-link span {
    background: var(--color-creator-accent);
    color: var(--color-surface-dark);
}

/* 31.01 Header — End */

/* 31.02 Hero Composition — Start */

.theme-agent .agent-hero {
    height: clamp(780px, 63.1vw, 1212px);
    background:
        radial-gradient(ellipse 35% 42% at 0 100%, #f6e3ba 0%, transparent 100%),
        radial-gradient(ellipse 52% 74% at 0 47%, #e5aaa9 0%, rgba(216, 142, 172, .5) 56%, transparent 100%),
        radial-gradient(ellipse 38% 64% at 33% 48%, #9b77c7 0%, rgba(93, 75, 169, .48) 69%, transparent 100%),
        radial-gradient(ellipse 34% 47% at 91% 100%, #222b78 0%, transparent 100%),
        linear-gradient(100deg, #c88d9f 0%, #8864b3 31%, #1b286b 58%, #0b0e18 81%, #080a07 100%);
}

.theme-agent .agent-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: url("../images/agent-grain.png") repeat;
    opacity: .1;
    mix-blend-mode: soft-light;
}

.theme-agent .agent-hero-inner {
    padding-top: 222px;
}

.theme-agent .agent-headline {
    max-width: 650px;
}

.theme-agent .agent-headline h1 {
    margin: 0;
    color: var(--color-white);
    font-size: 88px;
    line-height: .98;
    letter-spacing: -.055em;
}

.theme-agent .agent-headline h1 span {
    color: var(--color-white);
}

.theme-agent .agent-headline p {
    max-width: clamp(360px, 28.6vw, 550px);
    margin: 28px 0 0;
    color: var(--color-white);
    font-size: 17px;
    line-height: 1.5;
}

.theme-agent .agent-headline .pill {
    margin-top: 34px;
}

.theme-agent .agent-robot-wrap {
    left: 24.3%;
    bottom: 0;
    width: 52.8%;
    height: 85.8%;
    mask-image: none;
}

.theme-agent .agent-robot {
    filter: none;
}

.theme-agent .agent-watermark {
    z-index: 1;
    bottom: -.13em;
    left: var(--agent-page-gutter);
    color: rgba(255, 255, 255, .09);
    font-size: 302px;
    letter-spacing: -.08em;
}

/* 31.02 Hero Composition — End */

/* 31.03 Hero Statistic — Start */

.theme-agent .agent-float {
    top: 26.6%;
    right: var(--agent-page-gutter);
    width: clamp(220px, 20.8vw, 400px);
    min-height: clamp(200px, 17.8vw, 342px);
    padding: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(155deg, #a876ae 0%, #60478f 100%);
    text-align: center;
}

.theme-agent .agent-float .avatar-stack {
    justify-content: center;
    margin: 0 0 clamp(22px, 2vw, 38px);
    padding: 0;
}

.theme-agent .agent-float .avatar-stack img {
    width: clamp(34px, 2.55vw, 49px);
    height: clamp(34px, 2.55vw, 49px);
    margin-left: -6px;
    border: 2px solid var(--color-white);
    border-radius: 9px;
    transform: rotate(-13deg);
}

.theme-agent .agent-float .avatar-stack img:nth-child(even) {
    transform: rotate(12deg);
}

.theme-agent .agent-float strong {
    margin: 0;
    font-size: 54px;
    line-height: 1;
}

.theme-agent .agent-float strong span {
    font-size: .68em;
}

.theme-agent .agent-float small {
    max-width: 260px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.25;
}

/* 31.03 Hero Statistic — End */

/* 31.04 Responsive Banner — Start */

/* 31.04 Responsive Banner — End */

/* ==================== 31. AI Agents Banner — End ==================== */

/* ==================== 31.05 AI Agents Proof — Start ==================== */

.theme-agent .agent-proof {
    padding-block: 98px;
    background: var(--color-white);
}

.theme-agent .agent-proof-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: end;
    gap: clamp(30px, 6vw, 120px);
}

.theme-agent .agent-proof-dot { color: var(--color-agent-accent); }

.theme-agent .agent-proof-intro p {
    max-width: 500px;
    margin-inline-start: auto;
}

.theme-agent .proof-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 24px);
    margin-top: clamp(36px, 4.5vw, 72px);
}

.theme-agent .proof-cards > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(175px, 13vw, 235px);
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}

.theme-agent .proof-cards .proof-stat-index {
    color: var(--color-agent-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.theme-agent .proof-cards strong {
    display: block;
    margin: 18px 0 12px;
    color: var(--color-text);
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.07em;
    line-height: 1;
}

.theme-agent .proof-cards strong span { color: var(--color-agent-accent); }

.theme-agent .proof-cards .proof-stat-label {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* ==================== 31.05 AI Agents Proof — End ==================== */

/* ==================== 32. AI Agents Features — Start ==================== */

/* 32.01 Section Layout — Start */

.theme-agent .agent-features {
    padding: 98px 0 112px;
    background: var(--color-surface);
}

.theme-agent .features-layout {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: 6%;
}

.theme-agent .features-intro {
    position: sticky;
    top: 110px;
    align-self: start;
    min-height: 0;
    overflow: visible;
}

.theme-agent .features-heading-dot { color: var(--color-agent-accent); }

.theme-agent .features-intro p {
    max-width: 430px;
}

.theme-agent .features-intro-note {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
    margin-top: 58px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.theme-agent .features-intro-note span {
    color: var(--color-agent-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.theme-agent .features-intro-note strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
}

/* 32.01 Section Layout — End */

/* 32.02 Feature Cards — Start */

.theme-agent .feature-stack {
    gap: clamp(16px, 1.8vw, 28px);
    grid-auto-rows: auto;
}

.theme-agent .feature-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    min-height: clamp(260px, 17vw, 310px);
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.theme-agent .feature-card:hover,
.theme-agent .feature-card:focus-within {
    border-color: var(--color-agent-accent);
    box-shadow: 0 18px 44px rgba(19, 20, 28, .08);
}

.theme-agent .feature-card-reverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.theme-agent .feature-card-reverse .feature-visual { order: 1; }
.theme-agent .feature-card-reverse .feature-card-copy { order: 2; }

.theme-agent .feature-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
}

.theme-agent .feature-card-number {
    display: block;
    margin-bottom: auto;
    color: var(--color-agent-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.theme-agent .feature-card h3 {
    max-width: 300px;
    margin: 22px 0 0;
    color: var(--color-text);
    font-size: 23px;
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.theme-agent .feature-card p {
    max-width: 330px;
    margin: 12px 0 22px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.theme-agent .feature-card .pill {
    min-height: 40px;
    margin-top: auto;
    padding: 4px 4px 4px 24px;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
}

.theme-agent .feature-card .pill-icon {
    width: 32px;
    height: 32px;
}

.theme-agent .feature-card:hover .pill,
.theme-agent .feature-card:focus-within .pill {
    background: var(--color-agent-accent);
}

.theme-agent .feature-visual {
    min-width: 0;
    min-height: 0;
    padding: 18px;
    overflow: hidden;
    border-radius: 9px;
}

.theme-agent .workflow-visual {
    background: var(--color-surface-violet);
}

.theme-agent .chat-visual {
    gap: 14px;
    background: var(--color-surface-warm);
}

.theme-agent .orbit-visual {
    background: var(--color-surface-dark);
}

/* 32.02 Feature Cards — End */

/* 32.03 Feature Image Assets — Start */

.theme-agent .workflow-board,
.theme-agent .chat-status,
.theme-agent .agent-network {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    object-fit: contain;
    flex: none;
}

.theme-agent .workflow-board { width: min(100%, 305px); }
.theme-agent .chat-status { width: min(100%, 294px); }
.theme-agent .agent-network { width: min(85%, 230px); }

.theme-agent .workflow-board,
.theme-agent .chat-status { border-radius: 10px; }

.theme-agent .chat-request {
    align-self: flex-end;
    padding: 9px 12px;
    border-radius: 7px;
    background: var(--color-surface-dark);
    color: var(--color-white);
    font-size: 10px;
}

/* 32.03 Feature Image Assets — End */
/* 32.04 Responsive Features — Start */

/* 32.04 Responsive Features — End */

/* ==================== 32. AI Agents Features — End ==================== */

/* ==================== 33. AI Agents Dashboard — Start ==================== */

.dashboard-section {
    overflow: hidden;
    padding: 101px 0 0;
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.dashboard-stage {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

.dashboard-stage::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 74%, rgba(121, 83, 199, .42), transparent 47%),
        radial-gradient(circle at 16% 55%, rgba(54, 95, 244, .16), transparent 28%),
        radial-gradient(circle at 86% 48%, rgba(177, 109, 229, .16), transparent 26%);
    content: "";
}

.dashboard-inner {
    position: relative;
    max-width: none;
    text-align: center;
}

.dashboard-inner h2 {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 1050px;
    margin-inline: auto;
}

.dashboard-display {
    position: relative;
    margin-top: clamp(12px, 2vw, 48px);
}

.dashboard-device {
    position: relative;
    z-index: 1;
    width: min(65.73%, 1262px);
    margin-inline: auto;
}

.dashboard-device img {
    display: block;
    width: 100%;
    height: auto;
}

.dashboard-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1em .55em .55em;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 99px;
    background: rgba(71, 65, 85, .72);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.dashboard-chip > span {
    display: grid;
    width: 1.55em;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--color-agent-accent);
    font-size: 1.1em;
}

.dashboard-chip.chip-left { left: 8%; }
.dashboard-chip.chip-right { right: 8%; }
.dashboard-chip.chip-top { top: 34%; }
.dashboard-chip.chip-bottom { top: 58%; }

/* ==================== 33. AI Agents Dashboard — End ==================== */

/* ==================== 34. Shared Use Case Cards — Start ==================== */

.theme-agent .usecase-section {
    padding-block: 108px;
    background: var(--color-surface);
}

.theme-agent .usecase-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    align-items: end;
    gap: clamp(32px, 6vw, 110px);
    margin-bottom: clamp(36px, 4vw, 70px);
}

.theme-agent .usecase-heading-dot { color: var(--color-agent-accent); }

.theme-agent .usecase-heading p {
    max-width: 500px;
    margin-inline-start: auto;
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px);
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-grid article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 29px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: none;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-grid article:hover {
    border-color: var(--color-agent-accent);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(19, 20, 28, .07);
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    margin: 0 0 22px;
    border: 1px solid #e9e1f5;
    border-radius: 13px;
    background: var(--color-surface-violet);
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-icon img {
    display: block;
    width: 28px;
    height: 28px;
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-grid h3 {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.2;
}

:is(.theme-agent, .theme-integrations, .pricing-page) .usecase-grid p {
    max-width: 500px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* ==================== 34. Shared Use Case Cards — End ==================== */

/* ==================== 34.01 AI Agents Pricing — Start ==================== */

.theme-agent .agent-plan-grid {
    max-width: 1020px;
    margin-inline: auto;
    gap: 22px;
}

.theme-agent .agent-plan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 43px;
    border: 1px solid #e8e3ee;
    border-radius: 18px;
    background: var(--color-white);
}

.theme-agent .agent-plan.featured {
    border-color: var(--color-surface-dark);
    background: var(--color-surface-dark);
}

.theme-agent .agent-plan-copy { width: 100%; }

.theme-agent .agent-plan h3 {
    margin: 24px 0 16px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.12;
}

.theme-agent .agent-plan p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.theme-agent .agent-plan.featured p { color: #c9c5d2; }

.theme-agent .agent-plan strong {
    margin: 28px 0 21px;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1;
}

.theme-agent .agent-plan strong small {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.theme-agent .agent-plan ul,
.theme-agent .agent-plan.featured ul {
    width: 100%;
    align-self: stretch;
    margin: 0 0 26px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.theme-agent .agent-plan li {
    margin: 8px 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.theme-agent .agent-plan li::before { color: var(--color-agent-accent); }
.theme-agent .agent-plan.featured li::before { color: #d9b6f1; }

.theme-agent .agent-plan-cta,
.theme-team-detail .agent-plan-cta {
    width: max-content;
    min-height: 48px;
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
}

.theme-agent .agent-plan-cta .pill-icon,
.theme-team-detail .agent-plan-cta .pill-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

/* ==================== 34.01 AI Agents Pricing — End ==================== */

/* ==================== 35. AI Agents Testimonials — Start ==================== */

.theme-agent .agent-reviews {
    position: relative;
    padding-block: 101px;
    background:
        radial-gradient(circle at 58% 44%, rgba(143, 119, 199, .24), transparent 34%),
        radial-gradient(circle at 4% 100%, rgba(199, 175, 228, .28), transparent 30%),
        linear-gradient(135deg, #eeeef1 0%, #dfe0e7 58%, #e9e8ed 100%);
}

.theme-agent .agent-reviews::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/agent-grain.png") repeat;
    opacity: .055;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.theme-agent .agent-reviews > .agent-page-container {
    position: relative;
    z-index: 1;
}

.theme-agent .review-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, clamp(250px, 20vw, 340px));
    gap: clamp(14px, 1.7vw, 28px);
}

.theme-agent .review-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 32px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 14px 30px rgba(21, 22, 25, .045);
    transition: transform .25s ease, box-shadow .25s ease;
}

.theme-agent .review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(21, 22, 25, .085);
}

.theme-agent .review-card-featured {
    grid-column: 1;
    grid-row: 1 / 3;
}

.theme-agent .review-card-wide {
    grid-column: 2 / 4;
    grid-row: 1;
}

.theme-agent .review-card-small {
    grid-row: 2;
}

.theme-agent .review-card-dark {
    background: var(--color-surface-dark);
    color: var(--color-white);
}

.theme-agent .review-stat {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2em .65em;
}

.theme-agent .review-card-featured .review-stat {
    display: block;
}

.theme-agent .review-stat strong {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    letter-spacing: -.07em;
    line-height: 1;
}

.theme-agent .review-card-wide .review-stat strong {
    font-size: 36px;
}

.theme-agent .review-stat span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.theme-agent .review-card blockquote {
    display: block;
    min-height: 0;
    margin: clamp(15px, 1.5vw, 26px) 0 auto;
    padding: 0;
    background: none;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
}

.theme-agent .review-card-small blockquote {
    margin-top: 0;
}

.theme-agent .review-quote-mark {
    display: block;
    height: .65em;
    color: var(--color-agent-accent);
    font-family: var(--font-heading);
    font-size: 49px;
    font-weight: 700;
    line-height: 1;
}

.theme-agent .review-card-dark .review-quote-mark {
    color: var(--color-violet);
}

.theme-agent .review-card blockquote p {
    max-width: 58ch;
    margin: .8em 0 0;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.52;
}

.theme-agent .review-card-featured blockquote p {
    max-width: 42ch;
    font-size: 18px;
}

.theme-agent .review-card-dark blockquote p {
    color: var(--color-white);
}

.theme-agent .review-card .review-attribution {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    font-family: var(--font-body);
}

.theme-agent .review-card .review-attribution img {
    width: clamp(34px, 3vw, 48px);
    height: clamp(34px, 3vw, 48px);
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.theme-agent .review-card .review-attribution .reviewer-initials {
    width: clamp(34px, 3vw, 48px);
    height: clamp(34px, 3vw, 48px);
}

.theme-agent .review-card-dark .reviewer-initials {
    background: rgba(255, 255, 255, .16);
    color: var(--color-white);
}

.theme-agent .review-card .review-attribution strong,
.theme-agent .review-card .review-attribution small {
    display: block;
    line-height: 1.3;
}

.theme-agent .review-card .review-attribution strong {
    font-size: 14px;
    font-weight: 600;
}

.theme-agent .review-card .review-attribution small {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.theme-agent .review-card-dark .review-attribution small {
    color: rgba(255, 255, 255, .65);
}

/* ==================== 35. AI Agents Testimonials — End ==================== */

/* ==================== 36. AI Agents FAQ — Start ==================== */

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion {
    --bs-accordion-color: var(--color-text);
    --bs-accordion-bg: var(--color-surface-violet);
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--color-text);
    --bs-accordion-btn-focus-box-shadow: none;
    background: transparent;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-item {
    overflow: hidden;
    margin-bottom: 20px;
    border: 0;
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 14px 30px rgba(21, 22, 25, .045);
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-item:last-child { margin-bottom: 0; }

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-header {
    margin: 0;
    font-family: var(--font-body);
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-button {
    gap: 14px;
    padding: 19px 22px;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    box-shadow: none;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .agent-faq-number {
    flex: 0 0 22px;
    color: #878592;
    font-size: 14px;
    font-weight: 500;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .agent-faq-question {
    flex: 1;
    font-size: 20px;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-button::after {
    width: 18px;
    height: 22px;
    margin-left: auto;
    background-image: none;
    color: var(--color-text);
    content: '+';
    font-size: 21px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    transform: none;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-button:not(.collapsed)::after {
    content: '−';
    transform: none;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

:is(.theme-agent, .theme-workflow-detail) .agent-faq-accordion .accordion-body {
    padding: 0 44px 21px 58px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
}

/* ==================== 36. AI Agents FAQ — End ==================== */

/* ==================== 37. AI Agents CTA Buttons — Start ==================== */

.theme-agent .agent-endcap {
    background:
        radial-gradient(ellipse 58% 58% at 50% 0%, #653d9a 0%, rgba(77, 47, 113, .55) 43%, transparent 100%),
        linear-gradient(180deg, #17152e 0%, var(--color-surface-dark) 100%);
    color: var(--color-white);
}

.theme-agent .agent-endcap .agent-cta {
    padding-bottom: 86px;
    background: transparent;
}

.theme-agent .agent-endcap .site-footer {
    padding-top: 0;
    background: transparent;
}

.theme-agent .agent-cta .agent-cta-button,
.theme-team-detail .team-detail-actions .agent-cta-button {
    min-height: 48px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.theme-agent .agent-cta .agent-cta-primary,
.theme-agent .agent-cta .agent-cta-primary:visited,
.theme-team-detail .team-detail-actions .agent-cta-primary,
.theme-team-detail .team-detail-actions .agent-cta-primary:visited {
    background: var(--color-agent-accent);
    color: var(--color-white);
}

.theme-agent .agent-cta .agent-cta-primary .pill-icon,
.theme-team-detail .team-detail-actions .agent-cta-primary .pill-icon {
    background: var(--color-white);
    color: var(--color-black);
}

.theme-agent .agent-cta .agent-cta-secondary,
.theme-agent .agent-cta .agent-cta-secondary:visited {
    background: var(--color-white);
    color: var(--color-surface-dark);
}

.theme-agent .agent-cta .agent-cta-secondary .pill-icon {
    background: var(--color-agent-accent);
    color: var(--color-white);
}

.theme-agent .agent-cta .agent-cta-button:focus-visible,
.theme-team-detail .team-detail-actions .agent-cta-button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
}

/* ==================== 37. AI Agents CTA Buttons — End ==================== */

/* ==================== 38. Creator Studio Social Links — Start ==================== */

.creator-media-hero .creator-social {
    z-index: 2;
}

.creator-media-hero .creator-social a {
    position: relative;
    display: block;
    flex: 0 0 clamp(38px, 3.65vw, 70px);
    width: clamp(38px, 3.65vw, 70px);
    height: clamp(38px, 3.65vw, 70px);
    margin-left: clamp(-14px, -.73vw, -6px);
    border-radius: 50%;
    transition: transform .2s ease;
}

.creator-media-hero .creator-social a:hover {
    z-index: 1;
    transform: translateY(-4px);
}

.creator-media-hero .creator-social a:focus-visible {
    z-index: 1;
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.creator-media-hero .creator-social a img {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: 0;
}

/* ==================== 38. Creator Studio Social Links — End ==================== */

/* ==================== 39. Preloader — Start ==================== */

.site-preloader {
    --preloader-accent: #895ad0;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--color-surface-dark);
    color: var(--color-white);
    transition: opacity .4s ease, visibility .4s ease;
}

.site-preloader-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 17px;
}

.site-preloader-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--preloader-accent);
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
}

.site-preloader-name {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.site-preloader-name span {
    color: var(--preloader-accent);
}

.site-preloader-track {
    width: 132px;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
}

.site-preloader-track span {
    display: block;
    width: 42%;
    height: 100%;
    background: var(--preloader-accent);
    animation: preloader-progress 1.15s ease-in-out infinite;
}

html.js .site-preloader.is-dismissing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html:not(.js) .site-preloader {
    animation: preloader-fallback 2.8s forwards;
}

@keyframes preloader-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(350%); }
}

@keyframes preloader-fallback {
    0%, 75% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ==================== 39. Preloader — End ==================== */

/* ==================== 40. Home 01 Reference Hero — Start ==================== */

.theme-creator .creator-reference-hero {
    min-height: 700px;
    margin-top: -96px;
    padding: 112px 0 45px;
    background: radial-gradient(circle at 81% 88%, var(--color-surface-violet), transparent 33%),
        radial-gradient(circle at 51% 87%, color-mix(in srgb, var(--color-coral) 18%, var(--color-white)), transparent 27%),
        var(--color-surface-warm);
}

.creator-reference-hero::before,
.creator-reference-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.creator-reference-hero::before {
    width: 280px;
    height: 280px;
    left: -125px;
    top: 43%;
    border-radius: 45% 55% 52% 48%;
    background: var(--color-violet);
    opacity: .18;
}

.creator-reference-hero::after {
    width: 330px;
    height: 330px;
    right: -160px;
    bottom: -165px;
    border-radius: 50%;
    background: var(--color-creator-accent);
    opacity: .18;
}

.creator-reference-row { min-height: 540px; }
.creator-reference-copy { position: relative; z-index: 2; }

.creator-reference-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    padding: 8px 14px;
    border-radius: 99px;
    background: var(--color-border);
    color: var(--color-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
}

.creator-reference-hero .creator-reference-copy h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 75px;
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.045em;
}

.creator-reference-copy h1 span {
    color: var(--color-violet);
    background: linear-gradient(100deg, var(--color-agent-accent), var(--color-violet) 52%, var(--color-coral));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.creator-reference-copy p {
    max-width: 380px;
    margin: 19px 0 22px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.creator-reference-actions { display: flex; align-items: center; gap: 20px; }
.creator-reference-primary,
.creator-reference-demo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 99px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}

.creator-reference-primary {
    padding: 5px 5px 5px 20px;
    background: var(--color-surface-dark);
    color: var(--color-white);
    box-shadow: 0 9px 20px rgba(16, 17, 21, .15);
}

.creator-reference-primary:hover,
.creator-reference-primary:focus-visible { color: var(--color-white); transform: translateY(-3px); }
.creator-reference-primary .pill-icon { width: 36px; height: 36px; background: var(--color-creator-accent); color: var(--color-surface-dark); }
.creator-reference-demo { padding: 5px 0; background: transparent; color: var(--color-text); }
.creator-reference-demo:hover { transform: translateY(-3px); }
.creator-reference-demo span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-border); border-radius: 50%; }
.creator-reference-demo .lucide-icon { width: 12px; height: 12px; transform: none; }

.creator-reference-visual { position: relative; z-index: 1; height: 560px; isolation: isolate; }
.creator-reference-orb { position: absolute; z-index: -1; display: block; border-radius: 50%; pointer-events: none; }
.creator-reference-orb-one { width: 260px; height: 310px; top: 25%; right: 11%; background: var(--color-violet); opacity: .2; filter: blur(18px); }
.creator-reference-orb-two { width: 190px; height: 190px; bottom: 4%; left: 14%; background: var(--color-coral); opacity: .15; filter: blur(22px); }
.creator-reference-spark { position: absolute; z-index: 3; color: var(--color-violet); line-height: 1; pointer-events: none; }
.creator-reference-spark-one { top: 17%; left: 19%; font-size: 39px; }
.creator-reference-spark-two { right: 15%; bottom: 10%; font-size: 28px; }

.creator-reference-hero .creator-reference-gallery {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 34%;
    display: block;
    width: min(46%, 290px);
    height: 550px;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: rotate(-3deg);
    transform-origin: center;
    touch-action: pan-y;
}

.creator-reference-phone {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 8px solid var(--color-surface-dark);
    border-radius: 34px;
    background: var(--color-surface-violet);
    box-shadow: 0 24px 48px rgba(16, 17, 21, .19), 0 3px 0 var(--color-agent-accent);
}

.creator-reference-status {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 39px;
    flex: none;
    padding: 0 14px;
    background: var(--color-surface-violet);
    color: var(--color-text);
    font-size: 10px;
    font-weight: 700;
}

.creator-reference-island { position: absolute; left: 50%; width: 70px; height: 18px; border-radius: 99px; background: var(--color-surface-dark); transform: translateX(-50%); }
.creator-reference-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; margin: 0 6px; border-radius: 9px; background: var(--color-surface-violet); }
.creator-reference-screen::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--color-violet) 30%, transparent)); pointer-events: none; }
.creator-reference-preview { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; transition: opacity .2s ease, transform .25s ease; }
.creator-reference-scene { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 99px; background: rgba(16, 17, 21, .75); color: var(--color-white); font-size: 8px; font-weight: 700; letter-spacing: .07em; }
.creator-reference-gallery.is-sliding .creator-reference-preview { opacity: .45; transform: scale(1.04); }
.creator-reference-phone-bottom { flex: none; padding: 10px 9px 7px; }
.creator-reference-edit-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--color-text); font-size: 9px; font-weight: 700; }
.creator-reference-edit-label span { color: var(--color-violet); }
.creator-reference-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.creator-reference-thumbs button { height: 48px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: var(--color-white); cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.creator-reference-thumbs button:hover,
.creator-reference-thumbs button:focus-visible { border-color: var(--color-violet); transform: translateY(-2px); }
.creator-reference-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.creator-reference-toolrow { display: flex; justify-content: space-around; margin-top: 8px; color: var(--color-agent-accent); font-size: 15px; line-height: 1; }
.creator-reference-toolrow .lucide-icon { width: 15px; height: 15px; transform: none; }

.creator-reference-audio,
.creator-reference-play,
.creator-reference-filmstrip { position: absolute; z-index: 3; pointer-events: none; }
.creator-reference-audio { top: 41%; left: 12%; display: flex; align-items: center; gap: 9px; width: 155px; padding: 11px; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: 0 15px 32px rgba(177, 109, 229, .2); transform: rotate(-4deg); }
.creator-reference-audio-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: none; border-radius: 9px; background: var(--color-agent-accent); color: var(--color-white); }
.creator-reference-audio-copy { flex: 1; color: var(--color-text); font-size: 9px; font-weight: 700; }
.creator-reference-wave { display: block; height: 17px; margin-top: 4px; background: repeating-linear-gradient(90deg, var(--color-violet) 0 2px, transparent 2px 5px); mask-image: linear-gradient(0deg, transparent, var(--color-black) 30%, var(--color-black) 70%, transparent); }
.creator-reference-play { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: linear-gradient(135deg, var(--color-agent-accent), var(--color-violet)); color: var(--color-white); box-shadow: 0 12px 24px rgba(121, 83, 199, .23); }
.creator-reference-play .lucide-icon { width: 17px; height: 17px; transform: none; }
.creator-reference-play-one { top: 29%; left: 17%; transform: rotate(8deg); }
.creator-reference-play-two { top: 48%; right: 15%; transform: rotate(-7deg); }
.creator-reference-filmstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; top: 44%; right: -4%; width: 205px; height: 85px; padding: 6px; border-block: 6px dashed var(--color-surface-dark); background: var(--color-surface-dark); transform: rotate(-8deg); box-shadow: 0 13px 25px rgba(16, 17, 21, .19); }
.creator-reference-filmstrip img { width: 100%; height: 100%; object-fit: cover; }

/* ==================== 40. Home 01 Reference Hero — End ==================== */

/* ==================== 41. Home 01 Creator Studio Feature — Start ==================== */

.theme-creator .creator-studio-feature {
    position: relative;
    min-height: 420px;
    padding: 54px 0;
    overflow: hidden;
    background: linear-gradient(105deg, var(--color-surface-violet), var(--color-surface-warm) 55%, var(--color-surface-violet));
}

.studio-feature-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 8% 11%, var(--color-violet), transparent 33%),
        radial-gradient(circle at 90% 62%, var(--color-coral), transparent 34%);
    opacity: .24;
    pointer-events: none;
}

.studio-feature-card {
    position: relative;
    z-index: 2;
    padding: 42px 48px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-white);
    box-shadow: 0 20px 60px rgba(16, 17, 21, .08);
    text-align: center;
}

.studio-feature-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
}

.studio-feature-card h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 49px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.055em;
}

.studio-feature-card h2 span { color: var(--color-coral); }
.studio-feature-card p { max-width: 450px; margin: 18px auto 22px; color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }

.studio-feature-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 46px;
    padding: 5px 5px 5px 19px;
    border-radius: 99px;
    background: var(--color-creator-accent);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.studio-feature-cta:hover,
.studio-feature-cta:focus-visible { color: var(--color-text); transform: translateY(-3px); box-shadow: 0 9px 22px rgba(16, 17, 21, .14); }
.studio-feature-cta .pill-icon { width: 36px; height: 36px; background: var(--color-surface-dark); color: var(--color-white); }

.studio-feature-icon {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 18px 22px rgba(72, 52, 129, .18));
}

.studio-feature-icon img { display: block; width: 100%; height: auto; }
.studio-feature-gallery { top: 50px; left: 14%; width: 125px; transform: rotate(-12deg); }
.studio-feature-play { bottom: 46px; left: 8%; width: 145px; transform: rotate(14deg); }
.studio-feature-clapper { top: 100px; right: 11%; width: 180px; transform: rotate(-8deg); }

/* ==================== 41. Home 01 Creator Studio Feature — End ==================== */

/* ==================== 42. AI Agent Editorial Hero — Start ==================== */

.theme-agent .agent-hero {
    height: clamp(740px, 57vw, 940px);
    margin-top: -96px;
    color: var(--color-text);
    background:
        radial-gradient(circle at 58% 44%, rgba(143, 119, 199, .24), transparent 34%),
        radial-gradient(circle at 4% 100%, rgba(199, 175, 228, .28), transparent 30%),
        linear-gradient(135deg, #eeeef1 0%, #dfe0e7 58%, #e9e8ed 100%);
}

.theme-agent .agent-hero::before { opacity: .055; mix-blend-mode: multiply; }
.theme-agent .agent-hero-inner { padding-top: 230px; }
.theme-agent .agent-headline { max-width: 510px; }
.theme-agent .agent-headline h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 84px;
    line-height: .98;
    letter-spacing: -.065em;
}
.theme-agent .agent-headline h1 span { color: var(--color-agent-accent); }
.theme-agent .agent-headline p {
    max-width: 370px;
    margin-top: 25px;
    color: #4f505b;
    font-size: 15px;
    line-height: 1.55;
}
.theme-agent .agent-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 25px; margin-top: 29px; }
.theme-agent .agent-headline .pill { margin: 0; white-space: nowrap; }
.theme-agent .agent-hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.theme-agent .agent-hero-text-link:hover { color: var(--color-agent-accent); }
.theme-agent .agent-hero-text-link .lucide-icon { width: 17px; height: 17px; transform: rotate(-45deg); }
.theme-agent .agent-robot-wrap {
    z-index: 2;
    left: 27%;
    width: 51%;
    height: 92%;
    mask-image: linear-gradient(#000 84%, transparent 100%);
}
.theme-agent .agent-robot { filter: drop-shadow(0 25px 35px rgba(29, 24, 47, .22)); }
.theme-agent .agent-watermark {
    z-index: 1;
    bottom: -.16em;
    left: 2%;
    color: rgba(255, 255, 255, .28);
    font-size: 331px;
    letter-spacing: -.09em;
}
.theme-agent .agent-float {
    top: 23%;
    right: var(--agent-page-gutter);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    width: clamp(290px, 26vw, 380px);
    min-height: 170px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: rgba(255, 255, 255, .67);
    box-shadow: 0 24px 55px rgba(37, 32, 62, .1);
    text-align: left;
    backdrop-filter: blur(14px);
}
.theme-agent .agent-float-mark {
    position: relative;
    display: grid;
    flex: 0 0 35%;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    border-radius: 15px;
    background: var(--color-surface-dark);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 44px;
}
.theme-agent .agent-float-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: grayscale(1) contrast(1.15);
    opacity: .52;
}
.theme-agent .agent-float-mark::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 17, 21, .32), rgba(16, 17, 21, .66));
    content: "";
}
.theme-agent .agent-float-mark > span {
    position: relative;
    z-index: 1;
    font-size: inherit;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.theme-agent .agent-float-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 10px 8px 10px 0; }
.theme-agent .agent-float-copy > span { color: var(--color-agent-accent); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.theme-agent .agent-float-copy strong { margin-top: 9px; color: var(--color-text); font-family: var(--font-heading); font-size: 21px; line-height: 1.12; letter-spacing: -.04em; }
.theme-agent .agent-float-copy p { margin: 7px 0 0; color: #595964; font-size: 12px; line-height: 1.35; }
.theme-agent .agent-float-copy a { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--color-text); font-size: 12px; font-weight: 700; text-decoration: none; }
.theme-agent .agent-float-copy a:hover { color: var(--color-agent-accent); }
.theme-agent .agent-float-copy .lucide-icon { width: 13px; height: 13px; transform: rotate(-45deg); }
.theme-agent .agent-hero-capabilities {
    position: absolute;
    z-index: 4;
    right: var(--agent-page-gutter);
    bottom: 18%;
    width: clamp(255px, 23vw, 305px);
    color: var(--color-text);
}
.theme-agent .agent-hero-capabilities > span { display: block; margin-bottom: 15px; color: var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.theme-agent .agent-hero-capabilities > div { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-agent .agent-hero-capabilities > div span { padding: 7px 11px; border: 1px solid rgba(16, 17, 21, .19); border-radius: 30px; background: rgba(255, 255, 255, .52); font-size: 11px; font-weight: 600; }

/* ==================== 42. AI Agent Editorial Hero — End ==================== */

/* ==================== 42.01 AI Agents Fixed-Pixel Responsive Scale — Start ==================== */

/* ==================== 42.01 AI Agents Fixed-Pixel Responsive Scale — End ==================== */

/* ==================== 43. AI Agency Gradient Hero — Start ==================== */

.theme-agency .agency-hero {
    min-height: clamp(760px, 62vw, 930px);
    background:
        radial-gradient(ellipse at 0 100%, rgba(166, 225, 226, .72), transparent 46%),
        radial-gradient(ellipse at 55% 90%, rgba(37, 92, 252, .74), transparent 58%),
        linear-gradient(118deg, #4279c5 0%, #111e40 68%, #101522 100%);
}
.theme-agency .agency-hero::after { display: none; }
.theme-agency .agency-hero-inner { min-height: clamp(760px, 62vw, 930px); padding-top: 178px; }
.theme-agency .agency-hero-top { min-height: 0; align-items: flex-start !important; }
.theme-agency .agency-intro { position: relative; z-index: 4; }
.theme-agency .agency-intro .eyebrow { color: #d7e7ff; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.theme-agency .agency-intro h1 {
    max-width: 850px;
    margin: 25px 0 0;
    color: var(--color-white);
    font-size: 84px;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.06em;
}
.theme-agency .agency-intro .blue-period { color: #8edcff; }
.theme-agency .agency-intro p { max-width: 415px; margin: 24px 0 0; color: #e0e9fc; font-size: 16px; line-height: 1.6; }
.theme-agency .agency-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.theme-agency .agency-hero-actions .pill { gap: 15px; min-height: 48px; padding: 6px 6px 6px 18px; font-weight: 700; text-decoration: none; }
.theme-agency .agency-hero-actions .pill-blue { background: var(--color-primary); color: var(--color-white); }
.theme-agency .agency-hero-actions .pill-white { color: var(--color-text); }
.theme-agency .agency-hero-actions .pill-white .pill-icon { background: var(--color-surface-dark); color: var(--color-white); }

.theme-agency .hero-feature {
    display: block;
    position: relative;
    width: 264px;
    min-height: 274px;
    max-width: 100%;
    margin: 20px 0 0 auto;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(20,31,64,.82);
    box-shadow: 0 28px 65px rgba(8,18,50,.2);
    color: var(--color-white);
    text-decoration: none;
    transform: none;
}
.theme-agency .hero-feature:hover,
.theme-agency .hero-feature:focus-visible { color: var(--color-white); transform: translateY(-5px); }
.theme-agency .hero-feature img { display: block; width: 100%; height: 158px; object-fit: cover; border-radius: 10px; }
.theme-agency .hero-feature div { padding: 16px 4px 5px; }
.theme-agency .hero-feature span { font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.theme-agency .hero-feature strong { font-family: var(--font-heading); font-size: 22px; font-weight: 700; }
.theme-agency .hero-feature small { font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.theme-agency .hero-feature-arrow { position: absolute; right: 20px; bottom: 24px; width: 15px; height: 15px; transform: rotate(-45deg); }

.theme-agency .agency-hero-visual { position: relative; z-index: 3; min-height: 650px; isolation: isolate; }
.theme-agency .agency-visual-disc {
    position: absolute;
    top: 12%;
    right: -10%;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 37% 29%, #d9edff 0%, #9ac7ec 49%, #376db6 100%);
    box-shadow: inset -28px -38px 55px rgba(10, 29, 77, .35), 0 35px 80px rgba(6, 17, 58, .28);
}
.theme-agency .agency-visual-pane {
    position: absolute;
    display: block;
    border: 1px solid rgba(224, 247, 255, .72);
    border-radius: 24px;
    box-shadow: 12px 25px 55px rgba(3, 22, 75, .38), inset 3px 0 8px rgba(255, 255, 255, .62);
    backdrop-filter: blur(4px);
}
.theme-agency .agency-visual-pane-back {
    top: 4%; right: 8%; width: 37%; height: 75%;
    transform: skewY(-13deg) rotate(8deg);
    background: linear-gradient(115deg, rgba(214, 242, 255, .69), rgba(47, 126, 221, .37) 55%, rgba(12, 41, 127, .7));
}
.theme-agency .agency-visual-pane-middle {
    top: 16%; right: 30%; width: 38%; height: 74%;
    transform: skewY(-12deg) rotate(-9deg);
    background: linear-gradient(130deg, rgba(205, 238, 255, .68), rgba(55, 143, 234, .5) 48%, rgba(14, 58, 154, .82));
}
.theme-agency .agency-visual-pane-front {
    top: 27%; right: 15%; width: 49%; height: 68%;
    transform: skewY(-11deg) rotate(12deg);
    background: linear-gradient(135deg, rgba(206, 240, 255, .45), rgba(25, 122, 228, .62) 42%, rgba(11, 55, 146, .85));
}
.theme-agency .agency-visual-orbit {
    position: absolute;
    z-index: 2;
    top: 39%; right: -16%; width: 107%; height: 36%;
    border: clamp(14px, 2.1vw, 31px) solid rgba(199, 229, 250, .64);
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(5, 31, 94, .32), inset 0 10px 20px rgba(255, 255, 255, .3);
    transform: rotate(-31deg);
    pointer-events: none;
}
.theme-agency .agency-insight-panel {
    position: absolute;
    z-index: 4;
    right: -7%;
    bottom: 13%;
    width: min(300px, 55%);
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 17px;
    background: rgba(244, 250, 255, .88);
    box-shadow: 0 25px 50px rgba(4, 27, 80, .2);
    color: var(--color-text);
    backdrop-filter: blur(14px);
}
.theme-agency .agency-insight-panel > span { display: block; color: var(--color-primary); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.theme-agency .agency-insight-panel strong { display: block; margin-top: 12px; font-family: var(--font-heading); font-size: 21px; font-weight: 600; line-height: 1.2; }
.theme-agency .agency-insight-panel > div { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.theme-agency .agency-insight-panel small { color: var(--color-text-muted); font-size: 10px; font-weight: 600; }
.theme-agency .hero-wordmark { z-index: 1; left: 0; bottom: 56px; color: rgba(255, 255, 255, .09); }
.theme-agency .hero-bottom { z-index: 5; bottom: 25px; color: #dcecff; }

/* ==================== 43. AI Agency Gradient Hero — End ==================== */

/* ==================== 43.01 AI Agency Illustrated Hero — Start ==================== */

.theme-agency .agency-hero {
    min-height: 830px;
    background:
        radial-gradient(ellipse at 2% 6%, rgba(43, 127, 247, .7), transparent 39%),
        radial-gradient(ellipse at 96% 100%, rgba(41, 172, 235, .76), transparent 33%),
        radial-gradient(ellipse at 18% 100%, rgba(24, 77, 179, .8), transparent 42%),
        linear-gradient(112deg, #0d367d 0%, #0a1e45 47%, #06132d 100%);
}

.theme-agency .agency-hero-inner {
    min-height: 830px;
    padding-top: 142px;
    padding-bottom: 70px;
}

.theme-agency .agency-hero-top {
    align-items: center !important;
    gap: 0;
}

.theme-agency .agency-intro {
    width: 56%;
    padding-right: 0;
}

.theme-agency .agency-intro .eyebrow {
    color: #a3e3fa;
    font-size: 12px;
    letter-spacing: .16em;
}

.theme-agency .agency-intro h1 {
    max-width: 780px;
    margin-top: 28px;
    font-size: 75px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.theme-agency .agency-intro p {
    max-width: 530px;
    margin-top: 24px;
    color: #e1ebfb;
    font-size: 19px;
    line-height: 1.55;
}

.theme-agency .agency-hero-actions {
    margin-top: 34px;
    gap: 14px;
}

.theme-agency .agency-hero-actions .pill {
    min-height: 54px;
    padding-left: 22px;
    font-size: 14px;
}

.theme-agency .agency-hero-actions .pill-blue {
    background: #2359f5;
}

.theme-agency .agency-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 650px;
    margin-top: 52px;
    padding-top: 27px;
    border-top: 1px solid rgba(185, 220, 255, .23);
}

.theme-agency .agency-hero-metrics > div {
    padding: 0 20px;
    border-left: 1px solid rgba(136, 197, 255, .4);
}

.theme-agency .agency-hero-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.theme-agency .agency-hero-metrics strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1;
}

.theme-agency .agency-hero-metrics span {
    display: block;
    margin-top: 8px;
    color: #b7d9ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.theme-agency .agency-hero-visual {
    width: 44%;
    min-height: 640px;
    padding: 0;
    isolation: isolate;
}

.theme-agency .agency-hero-art {
    position: absolute;
    top: 50%;
    left: 49%;
    display: block;
    width: min(760px, 116%);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 30px 60px rgba(0, 10, 40, .3));
}

.theme-agency .agency-hero-note {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 8px;
    width: 182px;
    padding: 18px 20px;
    border: 1px solid rgba(109, 189, 255, .58);
    border-radius: 18px;
    background: rgba(8, 28, 65, .75);
    box-shadow: 0 20px 48px rgba(0, 12, 45, .3);
    backdrop-filter: blur(13px);
}

.theme-agency .agency-hero-note span {
    color: #74d8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}

.theme-agency .agency-hero-note strong {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 19px;
    line-height: 1.15;
}

.theme-agency .agency-hero-note small {
    color: #bfd9f6;
    font-size: 12px;
    line-height: 1.4;
}

.theme-agency .agency-hero-note-strategy { top: 8%; left: 4%; }
.theme-agency .agency-hero-note-products { top: 27%; right: 0; }
.theme-agency .agency-hero-note-technology { right: 1%; bottom: 8%; }

/* ==================== 43.01 AI Agency Illustrated Hero — End ==================== */

/* ==================== 44. Creator Home Primary Buttons — Start ==================== */

.theme-creator.creator-home {
    --creator-process-accent: #c6a5f0;
}

.theme-creator.creator-home .creator-faq {
    background:
        radial-gradient(circle at 8% 88%, rgba(137, 90, 208, .15), transparent 37%),
        radial-gradient(circle at 92% 16%, rgba(244, 128, 139, .12), transparent 34%),
        linear-gradient(145deg, #fffaf6 0%, #faf6fb 100%);
}

.theme-creator.creator-home .creator-end .contact-email {
    gap: 8px;
    font-size: 22px;
}

.theme-creator.creator-home .creator-end .contact-email .lucide-icon {
    width: 18px;
    height: 18px;
}

.theme-creator.creator-home :is(
    .home-contact-link,
    .creator-reference-primary,
    .creator-intro .pill,
    .studio-feature-cta,
    .prompt-demo button,
    .creator-plan .pill
) {
    background: var(--creator-primary-button);
    color: var(--color-white);
}

.theme-creator.creator-home :is(
    .home-contact-link,
    .creator-reference-primary,
    .creator-intro .pill,
    .studio-feature-cta,
    .creator-plan .pill
):is(:hover, :focus-visible, :visited) {
    color: var(--color-white);
}

.theme-creator.creator-home :is(
    .home-contact-link > span,
    .creator-reference-primary .pill-icon,
    .creator-intro .pill-icon,
    .studio-feature-cta .pill-icon,
    .prompt-demo button .pill-icon,
    .creator-plan .pill-icon
) {
    background: var(--color-white);
    color: var(--color-black);
}

/* ==================== 44. Creator Home Primary Buttons — End ==================== */

/* ==================== 45. Shared Inner Pages for AI Agents Home — Start ==================== */

.theme-agent-inner {
    --color-primary: #7953c7;
    --color-border: #e7e1ee;
    --color-surface-violet: #f4eefb;
    --agent-page-gutter: clamp(24px, 9vw, 174px);
    background: #fbf9fd;
}

.theme-agent-inner .agent-page-container {
    padding-inline: var(--agent-page-gutter);
}

.theme-agent-inner .home-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    background: transparent;
    color: var(--color-text);
}

.theme-agent-inner .home-navbar > .agent-page-container {
    width: 100%;
    background: transparent;
}

.theme-agent-inner .home-navbar .brand,
.theme-agent-inner .home-navbar .brand-dot {
    color: var(--color-text);
}

.theme-agent-inner .home-nav-list {
    border: 1px solid rgba(16, 17, 21, .08);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: none;
}

.theme-agent-inner .home-nav-list .home-nav-link {
    color: var(--color-text);
}

.theme-agent-inner .home-nav-list .home-nav-link:is(:hover, :focus-visible, .active, .show) {
    color: var(--color-text);
    background: rgba(121, 83, 199, .12);
}

.theme-agent-inner .home-contact-link {
    background: var(--creator-primary-button);
    color: var(--color-white);
}

.theme-agent-inner .home-contact-link:hover {
    color: var(--color-white);
}

.theme-agent-inner .home-contact-link > span {
    background: var(--color-white);
    color: var(--creator-primary-button);
}

.theme-agent-inner .inner-hero {
    padding: clamp(70px, 8vw, 120px) 0 clamp(86px, 9vw, 132px);
    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 42% 82% at 94% 24%, rgba(171, 128, 219, .36), transparent 100%),
        radial-gradient(ellipse 38% 65% at 2% 95%, rgba(248, 203, 186, .54), transparent 100%),
        #f7f3f6;
}

.theme-agent-inner .inner-hero h1 {
    font-weight: 600;
    letter-spacing: -.06em;
}

.theme-agent-inner .inner-hero .eyebrow,
.theme-agent-inner .inner-hero .blue-period,
.theme-agent-inner .process-list article > span,
.theme-agent-inner .catalog-row > span {
    color: var(--color-agent-accent);
}

.theme-agent-inner .editorial-card,
.theme-agent-inner .demo-note {
    background: #f5effb;
}

.theme-agent-inner .contact-panel {
    background:
        radial-gradient(ellipse 64% 90% at 54% 0%, rgba(116, 72, 176, .74), transparent 100%),
        linear-gradient(130deg, #1d1a35, #111019);
}

.theme-agent-inner .inner-endcap {
    background:
        radial-gradient(ellipse 58% 100% at 50% 0%, rgba(93, 58, 145, .34), transparent 100%),
        var(--color-surface-dark);
    color: var(--color-white);
}

.theme-agent-inner .inner-endcap .site-footer {
    padding: clamp(55px, 6vw, 85px) 0 30px;
    background: transparent;
}

.theme-agent-inner .inner-endcap .footer-links a:hover {
    color: #cda7fa;
}

.home-mega-grid > div:first-child .home-preview-arrow {
    background: #f1eafa;
    color: var(--color-agent-accent);
}

.home-mega-grid > div:nth-child(2) .home-preview-arrow {
    background: #fff0f2;
    color: #dc688c;
}

/* ==================== 45. Shared Inner Pages for AI Agents Home — End ==================== */

/* ==================== 46. Homepage Fixed-Pixel Type and Spacing — Start ==================== */

/* Keep the shared template rules fluid on inner pages; these values belong to the two homepages. */
.theme-creator .center-heading h2,
.theme-agency .section-heading h2 { font-size: 66px; }
.theme-agency .service-row h3 { font-size: 43px; }
.theme-agency .contact-panel h2 { font-size: 85px; }

/* ==================== 46. Homepage Fixed-Pixel Type and Spacing — End ==================== */

/* ==================== 47. Creator and Agency Mobile Alignment — Start ==================== */

/* ==================== 47. Creator and Agency Mobile Alignment — End ==================== */

/* ==================== 48. About Page — Start ==================== */

.theme-about {
    --about-ink: #17151e;
    --about-violet: var(--color-agent-accent);
    background: #fff;
}

.theme-about .eyebrow.violet { color: var(--about-violet); }

.theme-about .agent-section-title,
.pricing-page .pricing-approach-heading .agent-section-title {
    margin: 22px 0 0;
    color: var(--about-ink, var(--color-text));
    font-family: var(--font-heading);
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1.09;
}

.theme-about .agent-section-title span,
.theme-about .agent-section-title em,
.pricing-page .pricing-approach-heading .agent-section-title span {
    color: var(--about-violet, var(--color-agent-accent));
    font-style: normal;
}

.theme-about .agent-section-title.light { color: var(--color-white); }

.theme-about .agent-section-description,
.pricing-page .pricing-approach-heading .agent-section-description {
    max-width: 500px;
    margin: 22px 0 0;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.theme-about .pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 50px;
    padding: 6px 6px 6px 20px;
    font-size: 13px;
    font-weight: 700;
}

.theme-about .pill-icon {
    display: grid;
    flex: none;
    place-items: center;
}

.theme-about .lucide-icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-45deg);
}

/* Shared inner-page banner: breadcrumb, title, and short description only. */
.theme-agent-inner .subpage-hero {
    padding: 196px 0 110px;
    background:
        radial-gradient(ellipse 35% 85% at 95% 12%, rgba(174, 128, 226, .14), transparent 100%),
        radial-gradient(ellipse 35% 70% at 5% 100%, rgba(248, 211, 219, .18), transparent 100%),
        #f7f3f8;
}

.theme-agent-inner .subpage-hero-copy { text-align: center; }

.theme-agent-inner .subpage-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.theme-agent-inner .subpage-breadcrumb a:hover,
.theme-agent-inner .subpage-breadcrumb a:focus-visible,
.theme-agent-inner .subpage-breadcrumb [aria-current="page"] { color: var(--color-agent-accent); }

.theme-agent-inner .subpage-hero-copy h1 {
    margin: 24px 0 16px;
    color: var(--color-text);
    font-size: 86px;
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: 1.04;
}

.theme-agent-inner .subpage-hero-copy h1 span { color: var(--color-agent-accent); }

.theme-agent-inner .subpage-hero-copy > p {
    max-width: 610px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* About beliefs and pricing approach share the same editorial card system. */
.theme-about .about-belief,
.pricing-page .pricing-approach { padding: 115px 0 125px; }
:is(.theme-about .about-belief-heading, .pricing-page .pricing-approach-heading) { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 60px; align-items: end; }
:is(.theme-about .about-belief-heading, .pricing-page .pricing-approach-heading) .eyebrow { grid-column: 1 / -1; }
:is(.theme-about .about-belief-heading, .pricing-page .pricing-approach-heading) h2 { grid-column: 1; margin-bottom: 0; }
:is(.theme-about .about-belief-heading, .pricing-page .pricing-approach-heading) p { grid-column: 2; margin-bottom: 5px; }
:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 55px; }

:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) article {
    padding: 30px;
    border: 1px solid #eae3f0;
    border-radius: 20px;
    background: #faf8fc;
}

:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) article:nth-child(2) { background: #f1ebf8; }
:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) article > span { color: var(--color-agent-accent); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) h3 { max-width: 280px; margin: 22px 0 13px; font-size: 24px; font-weight: 600; line-height: 1.17; }
:is(.theme-about .about-belief-grid, .pricing-page .pricing-approach-grid) p { max-width: 310px; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }

/* The studio, process, and perspectives use one palette across all three homes. */
.about-story {
    --about-violet: var(--color-agent-accent);
    padding: 115px 0;
    background:
        radial-gradient(ellipse 45% 65% at 10% 75%, rgba(62, 87, 169, .2), transparent 100%),
        radial-gradient(ellipse 50% 70% at 94% 12%, rgba(117, 74, 177, .17), transparent 100%),
        #15141f;
    color: var(--color-white);
}

.about-story .home-about-layout { gap: 75px; }
.about-story .home-about-visual { border-color: rgba(196, 165, 240, .25); }
.about-story .home-about-image-note { background: rgba(20, 19, 36, .88); }
.about-story .home-about-image-note span,
.about-story .home-about-kicker,
.about-story .home-about-principles span { color: #c4a3f2; }
.about-story .home-about-copy h2 {
    margin: 18px 0 24px;
    color: var(--color-white);
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1.12;
}
.about-story .home-about-copy h2 span { color: #c4a3f2; }
.about-story .home-about-copy > p { color: #d1ccda; }
.about-story .home-about-principles strong { color: #f4f0f8; }
.about-story .home-about-link { background: var(--about-violet); color: var(--color-white); }
.about-story .home-about-link .pill-icon { background: var(--color-white); color: var(--about-violet); }

.process-studio {
    --about-violet: var(--color-agent-accent);
    --about-ink: #17151e;
    --creator-process-accent: var(--about-violet);
    padding: 115px 0;
    background: #f6f2f9;
    color: var(--about-ink);
}
.process-studio .creator-process-layout { gap: 85px; }
.process-studio h2 { font-size: 58px; }
.process-studio .creator-process-intro p,
.process-studio .creator-process-list p { color: var(--color-text-muted); }
.process-studio .creator-process-stage { color: #766d7f; }
.process-studio .creator-process-list li { padding: 58px 0; border-color: #ddd4e6; }
.process-studio .creator-process-list h3 { color: var(--about-ink); }

.voices-studio { --about-violet: var(--color-agent-accent); background: #fff; }
.voices-studio .center-heading { max-width: 790px; margin-inline: auto; }
.voices-studio .center-heading h2 span { color: var(--about-violet); }
.voices-studio .creator-voice-card { border-color: #e8e1ed; background: #fbf9fd; }
.voices-studio .creator-voice-quote { color: var(--about-violet); }
.voices-studio .creator-voice-dots button[aria-pressed="true"] { background: var(--about-violet); }
.voices-studio .creator-voice-arrow:hover { background: var(--about-violet); border-color: var(--about-violet); }

/* This closing component keeps its own styling when moved to another page. */
.agent-endcap.about-endcap {
    --about-violet: var(--color-agent-accent);
    --about-ink: #17151e;
    background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(107, 70, 165, .6), transparent 100%), #101115;
    color: var(--color-white);
}
.about-endcap .about-cta { padding: 105px 0 80px; background: transparent; }
.about-endcap .about-cta h2 {
    margin: 20px 0 19px;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1.09;
}
.about-endcap .about-cta h2 span { color: #bd8ceb; }
.about-endcap .about-cta p { margin: 0 auto 30px; color: #ded8e8; font-size: 16px; }
.about-endcap .about-cta .cta-actions { flex-wrap: wrap; }
.about-endcap .about-cta .pill { display: inline-flex; align-items: center; width: max-content; min-height: 50px; padding: 6px 6px 6px 20px; font-size: 13px; font-weight: 700; }
.about-endcap .about-cta .pill-icon { display: grid; flex: none; place-items: center; }
.about-endcap .about-cta-primary { background: var(--about-violet); color: var(--color-white); }
.about-endcap .about-cta-primary .pill-icon { background: var(--color-white); color: var(--about-violet); }
.about-endcap .about-cta-secondary { background: var(--color-white); color: var(--about-ink); }
.about-endcap .about-cta-secondary .pill-icon { background: var(--about-violet); color: var(--color-white); }
.agent-endcap.about-endcap .site-footer { padding-top: 0; }
.about-endcap .lucide-icon { width: 16px; height: 16px; }

/* ==================== 48. Shared Subpage Banner and About Page — End ==================== */

/* ==================== 49. Services Page — Start ==================== */

.services-page .services-section {
    background: #fff;
}

.services-page .services-section .section-heading .eyebrow,
.services-page .services-outcomes .eyebrow {
    color: var(--color-agent-accent);
}

.services-page .services-section .section-heading h2,
.services-page .services-outcomes-heading h2 {
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.services-page .services-section .section-heading .blue-period,
.services-page .services-outcomes-heading h2 span {
    color: var(--color-agent-accent);
}

.services-page .services-section .section-heading p,
.services-page .services-outcomes-heading > p {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.65;
}

.services-page .service-list {
    border-color: #e8e2ed;
}

.services-page .service-list:has(> .service-row:first-child.active) {
    border-top-color: transparent;
}

.services-page .service-row {
    border-color: #e8e2ed;
}

.services-page .service-row:has(+ .service-row.active) {
    border-bottom-color: transparent;
}

.services-page .service-row.active {
    min-height: 248px;
    border: 1px solid #e8e2ed;
    background: #f9f6fc;
}

.services-page .service-row.active .service-select {
    color: var(--color-agent-accent);
}

.services-page .service-detail p {
    color: #494750;
    font-size: 14px;
    line-height: 1.6;
}

.services-page .service-detail img {
    border-radius: 10px;
}

/* The dashboard is an example of connected work, not a separate homepage hero. */
.services-page .dashboard-inner > .eyebrow {
    position: relative;
    z-index: 2;
    margin-bottom: 17px;
    color: #caa7f0;
}

.services-page .dashboard-inner h2 span {
    color: #b88ae9;
}

.services-page .dashboard-inner .dashboard-intro {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto 25px;
    color: #c8c4d0;
    font-size: 16px;
    line-height: 1.65;
}

.services-page .dashboard-display {
    margin-top: 12px;
}

/* Outcomes bridge the dark product preview and the closing violet CTA. */
.services-page .services-outcomes {
    background: #f7f3fa;
}

.services-page .services-outcomes-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: end;
    gap: 60px;
}

.services-page .services-outcomes-heading > p {
    max-width: 460px;
    margin: 0 0 7px;
}

.services-page .services-outcomes .editorial-card {
    min-height: 270px;
    padding: 36px;
    border-color: #e8e0ed;
    background: #fff;
}

.services-page .services-outcomes .editorial-card .eyebrow {
    font-size: 11px;
    font-weight: 700;
}

.services-page .services-outcomes .editorial-card h3 {
    margin-top: 54px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.04em;
}

.services-page .services-outcomes .editorial-card p {
    font-size: 15px;
    line-height: 1.6;
}

/* ==================== 49. Services Page — End ==================== */

/* ==================== 50. Projects Page — Start ==================== */

/* The portfolio uses the shared subpage palette rather than one homepage's accent. */
.projects-page { --creator-page-gutter: 130px; }

.projects-page .projects-gallery {
    background: #fff;
}

.projects-page .projects-gallery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: end;
    column-gap: 64px;
}

.projects-page .projects-gallery-heading .eyebrow {
    grid-column: 1 / -1;
    color: var(--color-agent-accent);
}

.projects-page .projects-gallery-heading h2 {
    grid-column: 1;
    margin-top: 18px;
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.projects-page .projects-gallery-heading h2 span {
    color: var(--color-agent-accent);
}

.projects-page .projects-gallery-heading p {
    grid-column: 2;
    max-width: 470px;
    margin: 0 0 6px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.65;
}

.projects-page .portfolio-grid {
    gap: 28px;
}

.projects-page .portfolio-card,
.projects-page .portfolio-card:nth-child(even) {
    overflow: hidden;
    padding-top: 0;
    border: 1px solid #e7e0ed;
    border-radius: 18px;
    background: #f9f6fc;
    transition: transform .25s ease, border-color .25s ease;
}

.projects-page .portfolio-card:hover,
.projects-page .portfolio-card:focus-visible {
    border-color: #bca5d8;
    transform: translateY(-4px);
}

.projects-page .portfolio-card:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.projects-page .portfolio-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.projects-page .portfolio-card > div {
    padding: 27px 30px 30px;
}

.projects-page .portfolio-card .eyebrow {
    color: var(--color-agent-accent);
    font-size: 11px;
    font-weight: 700;
}

.projects-page .portfolio-card h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 15px 0 10px;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.18;
}

.projects-page .portfolio-card h3 .pill-icon {
    display: grid;
    float: none;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-agent-accent);
    color: #fff;
    font-family: var(--font-body);
}

.projects-page .portfolio-card .pill-icon .lucide-icon {
    width: 16px;
    height: 16px;
}

.projects-page .portfolio-card p {
    font-size: 15px;
    line-height: 1.6;
}

.projects-page .creator-brand-strip {
    background: #f2ecf8;
}

.projects-page .projects-faq {
    background: #f7f3fa;
}

.projects-page .projects-faq .center-heading {
    max-width: 820px;
    margin: 0 auto 44px;
}

.projects-page .projects-faq .center-heading .eyebrow,
.projects-page .projects-faq .center-heading h2 span {
    color: var(--color-agent-accent);
}

.projects-page .projects-faq .center-heading h2 {
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.projects-page .projects-faq .accordion-item {
    border: 1px solid #e8e0ed;
    background: #fff;
    box-shadow: none;
}

.projects-page .projects-faq .accordion-button {
    font-size: 20px;
}

.projects-page .projects-faq .accordion-button::after {
    color: var(--color-agent-accent);
}

/* ==================== 50. Projects Page — End ==================== */

/* ==================== 51. Pricing Page — Start ==================== */

/* Shared pricing content stays independent of the three homepage-specific plan layouts. */

.pricing-page .pricing-approach,
.pricing-page .pricing-directions {
    background: var(--color-white);
}

.pricing-page :is(.pricing-approach, .pricing-options, .pricing-directions) .eyebrow {
    color: var(--color-agent-accent);
}

.pricing-page .pricing-directions .section-heading h2,
.pricing-page .pricing-options .center-heading h2 {
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.pricing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-page .pricing-options {
    background:
        radial-gradient(circle at 5% 10%, rgba(121, 83, 199, .08), transparent 34%),
        linear-gradient(135deg, #f5f6fc, #faf7fb);
}

.pricing-options .center-heading {
    max-width: 820px;
}

.pricing-options .center-heading h2 span {
    color: var(--color-agent-accent);
}

.pricing-options .center-heading p {
    max-width: 610px;
    margin: 22px auto 0;
}

.pricing-billing {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    margin: 0 auto 34px;
    padding: 5px;
    border: 1px solid #e4ddec;
    border-radius: 100px;
    background: #fff;
}

.pricing-billing button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 20px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease;
}

.pricing-billing button:hover { background: #f1ebfa; }
.pricing-billing button:focus-visible { outline: 2px solid var(--color-agent-accent); outline-offset: 2px; }
.pricing-billing button.is-active,
.pricing-billing button.is-active:hover { background: var(--color-agent-accent); color: #fff; }

.pricing-billing button span {
    padding: 4px 7px;
    border-radius: 100px;
    background: #eee7f8;
    color: var(--color-agent-accent);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-billing button.is-active span { background: #ffffff29; color: #fff; }

.pricing-plan-grid {
    gap: 20px;
}

.pricing-plan {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 36px;
    border: 1px solid #e6e1ed;
    border-radius: 22px;
    background: var(--color-white);
}

.pricing-plan-featured {
    border-color: #252337;
    background: linear-gradient(155deg, #25213d, #11131b 80%);
    color: var(--color-white);
}

.pricing-plan-kicker {
    color: var(--color-agent-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
}

.pricing-plan-featured .pricing-plan-kicker {
    color: #c5a5f5;
}

.pricing-plan h3 {
    min-height: 2.25em;
    margin: 25px 0 12px;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.15;
}

.pricing-plan > p {
    min-height: 5em;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pricing-plan-featured > p {
    color: #d7d1e1;
}

.pricing-plan-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 24px 0 22px;
}

.pricing-plan-price strong {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-family: var(--font-heading);
    font-size: 43px;
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1.15;
}

.pricing-plan-period {
    margin-left: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.pricing-plan-price small {
    color: var(--color-text-muted);
    font-size: 12px;
}

.pricing-plan-featured .pricing-plan-price small {
    color: #c9c2d4;
}

.pricing-plan ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.pricing-plan li {
    display: flex;
    gap: 10px;
    margin: 11px 0;
    font-size: 14px;
    line-height: 1.45;
}

.pricing-plan li::before {
    flex: none;
    content: '✦';
    color: var(--color-agent-accent);
    font-size: 12px;
}

.pricing-plan-featured li::before {
    color: #c5a5f5;
}

.pricing-plan .pill {
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 6px 6px 20px;
}

.pricing-plan-featured .pill {
    background: var(--color-agent-accent);
    color: var(--color-white);
}

.pricing-plan-featured .pill-icon {
    background: var(--color-white);
    color: var(--color-agent-accent);
}

.pricing-page .pricing-directions .section-heading {
    max-width: 880px;
}

.pricing-page .pricing-directions .section-heading p {
    max-width: 660px;
    margin-top: 20px;
}

.pricing-direction-card .text-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--color-agent-accent);
}

.pricing-direction-card .lucide-icon {
    width: 16px;
    height: 16px;
}

/* ==================== 51. Pricing Page — End ==================== */

/* ==================== 52. Contact Page — Start ==================== */

.contact-page .contact-section {
    padding-block: 110px;
    background: #f8f7fb;
}

.contact-page .contact-layout {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
    gap: 8%;
}

.contact-intro {
    padding-top: 25px;
}

.contact-intro > .eyebrow,
.contact-form-heading .eyebrow {
    color: var(--color-agent-accent);
}

.contact-page .contact-intro h2 {
    max-width: 580px;
    margin: 22px 0 24px;
    font-size: 58px;
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: 1.08;
}

.contact-intro h2 span {
    color: var(--color-agent-accent);
}

.contact-page .contact-lead {
    max-width: 520px;
    font-size: 17px;
    line-height: 1.7;
}

.contact-guidance {
    max-width: 520px;
    margin-top: 42px;
    padding: 29px 32px 20px;
    border: 1px solid #e9e3ee;
    border-radius: 20px;
    background: var(--color-white);
}

.contact-guidance-title {
    color: var(--color-agent-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.contact-guidance-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 15px;
    padding: 21px 0;
    border-bottom: 1px solid #eae5ef;
}

.contact-guidance-item:last-child {
    padding-bottom: 3px;
    border-bottom: 0;
}

.contact-guidance-item > span {
    padding-top: 3px;
    color: var(--color-agent-accent);
    font-size: 12px;
    font-weight: 700;
}

.contact-guidance-item h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.contact-page .contact-guidance-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.contact-page .contact-intro-footnote {
    margin: 21px 0 0;
    color: var(--color-agent-accent);
    font-size: 13px;
    font-weight: 600;
}

.contact-page .contact-form {
    display: block;
    padding: 36px;
    border: 1px solid #e6e0ec;
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(37, 28, 58, .06);
}

.contact-form-heading {
    margin-bottom: 28px;
}

.contact-form-heading h3 {
    margin: 13px 0 7px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.045em;
}

.contact-form-heading p {
    margin: 0;
    font-size: 14px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-field {
    min-width: 0;
    margin-bottom: 19px;
}

.contact-page .contact-field label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.contact-page .contact-field label span {
    font-size: 11px;
    font-weight: 500;
}

.contact-page .contact-form :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #dcd7e3;
    border-radius: 10px;
    background: #fbfafc;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
}

.contact-page .contact-form textarea {
    min-height: 145px;
    resize: vertical;
}

.contact-page .contact-form textarea::placeholder {
    color: #89838f;
}

.contact-page .contact-form :is(input, select, textarea):focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--color-agent-accent);
    background: var(--color-white);
}

.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.contact-submit-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 5px;
}

.contact-page .contact-form .pill {
    justify-content: flex-start;
    width: max-content;
    margin: 0;
    padding: 6px 6px 6px 20px;
    background: var(--color-agent-accent);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
}

.contact-page .contact-form .pill-icon {
    background: var(--color-white);
    color: var(--color-agent-accent);
}

.contact-page .contact-form .pill:disabled {
    cursor: wait;
    opacity: .7;
    transform: none;
}

.contact-page .form-status {
    min-height: 20px;
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.contact-page .form-status.is-success { color: #207453; }
.contact-page .form-status.is-error { color: #b14059; }

/* ==================== 52. Contact Page — End ==================== */

/* ==================== 53. Team Page — Start ==================== */

.team-section {
    padding: 110px 0 120px;
    background: #fff;
}

.team-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: end;
    gap: 48px;
    margin-bottom: 46px;
}

.team-heading .eyebrow { display: block; margin-bottom: 21px; }

.team-heading h2 {
    max-width: 720px;
    margin: 0;
    white-space: pre-line;
}

.team-heading h2 span { color: var(--color-agent-accent); }

.team-heading .agent-section-description {
    max-width: 420px;
    margin: 0 0 8px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.team-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: #d6d3db;
    isolation: isolate;
}

.team-card::before {
    position: absolute;
    z-index: 3;
    right: -11px;
    bottom: -18px;
    width: 59px;
    height: 59px;
    border-radius: 50%;
    background: #fff;
    content: "";
}

.team-card::after {
    position: absolute;
    z-index: 1;
    inset: 52% 0 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(transparent, rgba(11, 12, 21, .18) 32%, rgba(11, 12, 21, .92));
    content: "";
    pointer-events: none;
}

.team-card-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}

.team-card-link:focus-visible { outline: 3px solid var(--color-agent-accent); outline-offset: 5px; }

.team-card-link > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center 32%;
    transition: transform .4s ease;
}

.team-card:hover .team-card-link > img { filter: saturate(1.08); }

.team-card-copy {
    position: absolute;
    z-index: 2;
    right: 68px;
    bottom: 21px;
    left: 23px;
    color: #fff;
}

.team-card-copy h3 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.team-card-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    line-height: 1.4;
}

.team-card-arrow {
    position: absolute;
    z-index: 4;
    right: -1px;
    bottom: -8px;
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    padding: 0;
    border: 1px solid var(--color-agent-accent);
    border-radius: 50%;
    background: var(--color-agent-accent);
    box-shadow: 0 3px 10px #15161918;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.team-card-link:hover .team-card-arrow,
.team-card-link:focus-visible .team-card-arrow { transform: translateY(-3px); }

.team-card-arrow .pill-icon {
    width: 30px;
    height: 30px;
    background: transparent;
    color: #fff;
}

.team-card-arrow .lucide-icon { width: 15px; height: 15px; transform: rotate(-45deg); }

.team-disclaimer {
    margin: 26px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ==================== 53. Team Page — End ==================== */

/* ==================== 54. Integrations Page — Start ==================== */

.integrations-section {
    padding: 108px 0 118px;
    background: #fff;
}

.integrations-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    align-items: end;
    gap: 45px;
    margin-bottom: 37px;
}

.integrations-heading .eyebrow { display: block; margin-bottom: 20px; }
.integrations-heading h2 { max-width: 760px; margin: 0; }
.integrations-heading h2 span,
.integrations-method h2 span { color: var(--color-agent-accent); }
.integrations-heading .agent-section-description { max-width: 400px; margin: 0 0 7px; }

.integrations-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 27px;
}

.integrations-filters button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 8px 17px;
    border: 1px solid #e8e2f0;
    border-radius: 100px;
    background: #fff;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.integrations-filters button span { font-size: 10px; opacity: .6; }
.integrations-filters button:hover { border-color: var(--color-agent-accent); }
.integrations-filters button:focus-visible { outline: 2px solid var(--color-agent-accent); outline-offset: 3px; }
.integrations-filters button.is-active { border-color: var(--color-agent-accent); background: var(--color-agent-accent); color: #fff; }

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px;
}

.integration-card { min-width: 0; }
.integration-card[hidden] { display: none; }

.integration-card > a {
    display: flex;
    flex-direction: column;
    min-height: 317px;
    height: 100%;
    padding: 27px;
    border: 1px solid #eae5f0;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 46%, #faf7fe);
    color: var(--color-text);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.integration-card > a:hover,
.integration-card > a:focus-visible {
    transform: translateY(-4px);
    border-color: #cbb9eb;
    box-shadow: 0 20px 38px #351d5b13;
}

.integration-card > a:focus-visible { outline: 2px solid var(--color-agent-accent); outline-offset: 3px; }

.integration-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 25px;
}

.integration-card-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #f0e9fb;
}

.integration-card-icon img { width: 34px; height: 34px; }

.integration-card-number {
    color: #aca5b7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.integration-card-category {
    color: var(--color-agent-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.integration-card h3 {
    margin: 9px 0 11px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.integration-card p {
    max-width: 315px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.integration-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
}

.integration-card-link .pill-icon {
    flex: none;
    width: 32px;
    height: 32px;
    background: var(--color-agent-accent);
    color: #fff;
}

.integration-card-link .lucide-icon { width: 14px; height: 14px; transform: rotate(-45deg); }

.integrations-note {
    margin: 24px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.integrations-method {
    padding: 98px 0 112px;
    background: #f6f3fa;
}

.integrations-method-intro { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.integrations-method-intro .eyebrow { display: block; margin-bottom: 20px; }
.integrations-method-intro h2 { margin: 0; }
.integrations-method-intro .agent-section-description { max-width: 620px; margin: 19px auto 0; }

/* ==================== 54. Integrations Page — End ==================== */

/* ==================== 55. Testimonials Page — Start ==================== */

.testimonials-section {
    padding: 105px 0 122px;
    background: #faf8fc;
}

.testimonials-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: end;
    gap: 42px;
    margin-bottom: 52px;
}

.testimonials-heading .eyebrow { display: block; margin-bottom: 19px; }
.testimonials-heading h2 { max-width: 730px; margin: 0; }
.testimonials-heading .agent-section-description { max-width: 455px; margin: 0 0 5px auto; }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.testimonial-story {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 328px;
    margin: 0;
    padding: 30px;
    border: 1px solid #e8e1ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px #21103608;
}

.testimonial-story-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: var(--color-agent-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.testimonial-story-type::after {
    content: '✦';
    font-size: 16px;
    letter-spacing: 0;
}

.testimonial-story blockquote { margin: 25px 0 30px; }
.testimonial-story blockquote p {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.47;
}

.testimonial-story figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 19px;
    border-top: 1px solid #e9e3ed;
}

.testimonial-story figcaption img,
.testimonial-story-initials {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-story-initials {
    display: grid;
    place-items: center;
    background: #e9ddf8;
    color: var(--color-agent-accent);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
}

.testimonial-story figcaption strong,
.testimonial-story figcaption small { display: block; }
.testimonial-story figcaption strong { font-size: 13px; font-weight: 700; line-height: 1.35; }
.testimonial-story figcaption small { margin-top: 2px; color: var(--color-text-muted); font-size: 11px; line-height: 1.4; }

.testimonial-story-featured {
    position: relative;
    grid-column: span 2;
    overflow: hidden;
    min-height: 328px;
    padding: 36px 38% 35px 36px;
    border-color: transparent;
    background: linear-gradient(125deg, #251849 0%, #493078 56%, #7953c7 100%);
}

.testimonial-story-featured::after {
    position: absolute;
    z-index: 1;
    right: 30%;
    bottom: -125px;
    width: 260px;
    height: 260px;
    border: 1px solid #ffffff47;
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.testimonial-story-featured .testimonial-story-type,
.testimonial-story-featured blockquote p,
.testimonial-story-featured figcaption strong { color: #fff; }
.testimonial-story-featured blockquote p { font-size: 25px; line-height: 1.38; }
.testimonial-story-featured figcaption { position: relative; z-index: 2; border-color: #ffffff38; }
.testimonial-story-featured figcaption small { color: #e0d6ee; }
.testimonial-story-featured-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 35%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mask-image: linear-gradient(to right, transparent, #000 32%);
}

.testimonials-note {
    margin: 28px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* ==================== 55. Testimonials Page — End ==================== */

/* ==================== 56. Team Detail Page — Start ==================== */

.theme-team-detail .subpage-hero-copy h1 > span:first-child { color: var(--color-text); }

.team-detail-profile { padding: 112px 0 120px; background: #fff; }

.team-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
    align-items: center;
    gap: 90px;
}

.team-detail-portrait {
    position: relative;
    overflow: hidden;
    min-height: 580px;
    height: 100%;
    margin: 0;
    border-radius: 24px;
    background: #eae6ed;
}

.team-detail-portrait::after {
    position: absolute;
    inset: 65% 0 0;
    background: linear-gradient(transparent, #111018b8);
    content: '';
    pointer-events: none;
}

.team-detail-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

.team-detail-portrait figcaption {
    position: absolute;
    z-index: 1;
    right: 29px;
    bottom: 26px;
    left: 29px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}

.team-detail-copy .eyebrow { display: block; margin-bottom: 21px; }
.team-detail-copy h2 { max-width: 700px; margin: 0 0 25px; }
.team-detail-copy h2 > span:last-child { color: var(--color-agent-accent); }

.team-detail-role {
    display: inline-block;
    margin: 0 0 26px;
    padding: 9px 14px;
    border: 1px solid #ded4ed;
    border-radius: 99px;
    background: #faf7ff;
    color: var(--color-agent-accent);
    font-size: 12px;
    font-weight: 700;
}

.team-detail-lead {
    max-width: 620px;
    margin: 0 0 19px;
    color: var(--color-text);
    font-size: 20px;
    line-height: 1.55;
}

.team-detail-support {
    max-width: 610px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.team-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.team-detail-actions .lucide-icon { transform: rotate(-45deg); }

.team-detail-focus { padding: 104px 0 116px; background: #f7f4fa; }

.team-detail-focus-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
    align-items: end;
    gap: 50px;
    margin-bottom: 43px;
}

.team-detail-focus-heading .eyebrow { display: block; margin-bottom: 19px; }
.team-detail-focus-heading h2 { max-width: 720px; margin: 0; }
.team-detail-focus-heading .agent-section-description { max-width: 440px; margin: 0 0 5px auto; }

.team-detail-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.team-detail-focus-card {
    padding: 28px;
    border: 1px solid #e9e2ef;
    border-radius: 20px;
    background: #fff;
}

.team-detail-focus-card > span { color: var(--color-agent-accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.team-detail-focus-card h3 { margin: 20px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.team-detail-focus-card p { max-width: 340px; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }

.team-detail-next { padding: 90px 0 105px; background: #fff; }
.team-detail-next-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 450px); align-items: center; gap: 50px; }
.team-detail-next-inner .eyebrow { display: block; margin-bottom: 17px; }
.team-detail-next-inner h2 { max-width: 670px; margin: 0; }

.team-detail-next-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 20px;
    background: #221b38;
    color: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.team-detail-next-card:hover,
.team-detail-next-card:focus-visible { transform: translateY(-3px); box-shadow: 0 15px 35px #261a4126; color: #fff; }
.team-detail-next-card:focus-visible { outline: 2px solid var(--color-agent-accent); outline-offset: 4px; }
.team-detail-next-card img { flex: none; width: 84px; height: 95px; border-radius: 12px; object-fit: cover; object-position: center 25%; }
.team-detail-next-card > span:nth-child(2) { min-width: 0; }
.team-detail-next-card small,
.team-detail-next-card strong,
.team-detail-next-card em { display: block; }
.team-detail-next-card small { margin-bottom: 9px; color: #c6a7e9; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.team-detail-next-card strong { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; }
.team-detail-next-card em { margin-top: 5px; color: #c9c1d8; font-size: 11px; font-style: normal; }
.team-detail-next-card > .pill-icon { flex: none; margin-left: auto; background: var(--color-agent-accent); }
.team-detail-next-card .lucide-icon { transform: rotate(-45deg); }
.team-detail-next .team-disclaimer { margin-top: 32px; }

/* Ayaan Malik profile: the portrait stays beside the scrolling story. */
.team-detail-profile-sticky { padding: 98px 0 115px; }
.team-detail-profile-sticky + .team-detail-next { background: #f7f4fa; }
.team-detail-profile-sticky .team-detail-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 84px;
}

.team-detail-profile-sticky .team-detail-portrait {
    position: sticky;
    top: 105px;
    align-self: start;
    height: calc(100vh - 140px);
    min-height: 520px;
    max-height: 700px;
}

.team-detail-story { min-width: 0; }
.team-detail-story .team-detail-copy { padding: 15px 0 74px; }
.team-detail-story-section { padding: 76px 0 80px; border-top: 1px solid #e8e1ed; }
.team-detail-story-section:last-child { padding-bottom: 0; }
.team-detail-story-section .eyebrow { display: block; margin-bottom: 20px; }
.team-detail-story-section h2 { max-width: 670px; margin: 0 0 19px; }
.team-detail-story-section h2 > span:last-child { color: var(--color-agent-accent); }
.team-detail-story-section .agent-section-description { max-width: 610px; margin: 0; }

.team-detail-skills {
    margin-top: 37px;
    padding: 37px 40px 30px;
    border: 1px solid #e9e2ef;
    border-radius: 22px;
    background: #f8f5fb;
}

.team-detail-skill + .team-detail-skill { margin-top: 36px; }
.team-detail-skill-label { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.team-detail-skill-label h3 { margin: 0; color: var(--color-text); font-size: 20px; font-weight: 600; line-height: 1.3; }
.team-detail-skill-label > span { color: var(--color-agent-accent); font-size: 16px; font-weight: 600; }
.team-detail-skill-track { overflow: hidden; height: 8px; border-radius: 99px; background: #ece5f5; }
.team-detail-skill-track > span { display: block; width: var(--skill-level); height: 100%; border-radius: inherit; background: var(--color-agent-accent); }
.team-detail-skills-note { margin: 27px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }

.team-detail-timeline { position: relative; margin: 39px 0 0; padding: 0 0 0 48px; list-style: none; }
.team-detail-timeline::before { position: absolute; top: 8px; bottom: 22px; left: 8px; width: 1px; background: #d9ccea; content: ''; }
.team-detail-timeline li { position: relative; padding: 0 0 37px; }
.team-detail-timeline li:last-child { padding-bottom: 0; }
.team-detail-timeline li::before { position: absolute; top: 4px; left: -47px; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; background: var(--color-agent-accent); box-shadow: 0 0 0 2px var(--color-agent-accent); content: ''; }
.team-detail-timeline-period { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 99px; background: #eee6f7; color: var(--color-agent-accent); font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.team-detail-timeline h3 { margin: 0 0 9px; color: var(--color-text); font-size: 21px; font-weight: 600; line-height: 1.3; }
.team-detail-timeline p { max-width: 580px; margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.7; }

/* ==================== 56. Team Detail Page — End ==================== */

/* ==================== 57. Flowstate Project Detail Page — Start ==================== */

.case-study-section { padding: 100px 0 116px; background: #f8f6fa; }

.case-study-sidebar { position: sticky; top: 100px; min-width: 0; }

.case-study-facts {
    overflow: hidden;
    padding: 30px 29px 23px;
    border: 1px solid #e8e1ed;
    border-radius: 20px;
    background: #fff;
}

.case-study-facts .eyebrow { display: block; margin-bottom: 15px; }
.case-study-facts h2 { margin: 0 0 26px; font-size: 30px; font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.case-study-facts h2 span { color: var(--color-agent-accent); }
.case-study-facts dl { margin: 0; }

.case-study-facts dl > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid #eee9f1;
}

.case-study-facts dt { color: var(--color-text-muted); font-size: 12px; font-weight: 500; }
.case-study-facts dd { margin: 0; color: var(--color-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.case-study-facts > p { margin: 19px 0 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.6; }

.case-study-sidebar-cta {
    padding: 30px;
    border-radius: 20px;
    background: radial-gradient(circle at 85% 7%, #7e57c7 0, transparent 46%), #211b38;
    color: #fff;
}

.case-study-sidebar-cta .eyebrow { display: block; font-size: 10px; }
.case-study-sidebar-cta h3 { margin: 24px 0 27px; font-size: 25px; font-weight: 600; letter-spacing: -.05em; line-height: 1.25; }
.case-study-sidebar-cta .pill { padding-right: 5px; background: #fff; color: var(--color-text); font-size: 11px; }
.case-study-sidebar-cta .pill-icon { background: var(--color-agent-accent); color: #fff; }
.case-study-sidebar-cta .lucide-icon { transform: rotate(-45deg); }

.case-study-content { min-width: 0; }
.case-study-cover { position: relative; overflow: hidden; margin: 0; border-radius: 21px; background: #143a6c; }
.case-study-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-study-cover figcaption {
    position: absolute;
    right: 21px;
    bottom: 20px;
    padding: 10px 13px;
    border: 1px solid #ffffff40;
    border-radius: 99px;
    background: #111423a8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
}

.case-study-block { padding: 36px 0 30px; border-bottom: 1px solid #e3dce9; }
.case-study-block .eyebrow { display: block; margin-bottom: 19px; }
.case-study-block h2 { max-width: 740px; margin: 0 0 25px; font-size: 47px; font-weight: 600; letter-spacing: -.055em; line-height: 1.13; }
.case-study-block h2 span { color: var(--color-agent-accent); }
.case-study-block > p { max-width: 760px; margin: 0 0 15px; color: var(--color-text-muted); font-size: 15px; line-height: 1.75; }
.case-study-block > p:last-child { margin-bottom: 0; }
.case-study-block > .case-study-lead { color: var(--color-text); font-size: 20px; line-height: 1.55; }

.case-study-priority-list { display: grid; gap: 0; margin: 33px 0 0; padding: 0; list-style: none; }
.case-study-priority-list li { display: flex; align-items: start; gap: 21px; padding: 21px 0; border-top: 1px solid #e3dce9; }
.case-study-priority-list li > span {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ddf7;
    color: var(--color-agent-accent);
    font-size: 11px;
    font-weight: 700;
}

.case-study-priority-list h3 { margin: 1px 0 7px; font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.case-study-priority-list p { max-width: 590px; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }

.case-study-visual-frame { display: grid; place-items: center; height: 240px; padding: 19px; background: #efedf4; }
.case-study-visual-frame img { width: 100%; height: 100%; border-radius: 10px; object-fit: contain; }

.case-study-approach { border: 0; }
.case-study-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 33px; }
.case-study-steps article { min-height: 230px; padding: 24px 20px; border: 1px solid #e8e1ed; border-radius: 17px; background: #fff; }
.case-study-steps article > span { color: var(--color-agent-accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.case-study-steps h3 { margin: 36px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.case-study-steps p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.65; }

.case-study-outcome { padding: 43px 45px; border-radius: 20px; background: linear-gradient(120deg, #211a38, #44306c); color: #fff; }
.case-study-outcome .eyebrow { display: block; margin-bottom: 16px; }
.case-study-outcome h2 { margin: 0 0 22px; font-size: 42px; font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.case-study-outcome h2 span { color: #c49aeb; }
.case-study-outcome p { max-width: 680px; margin: 0 0 15px; color: #e4ddec; font-size: 15px; line-height: 1.7; }
.case-study-outcome p:last-child { margin-bottom: 0; }

.case-study-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; }
.case-study-navigation a { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.case-study-navigation a:hover { color: var(--color-agent-accent); }
.case-study-navigation .pill-icon { width: 32px; height: 32px; background: var(--color-agent-accent); color: #fff; }
.case-study-navigation .lucide-icon { width: 15px; height: 15px; transform: rotate(-45deg); }

/* ==================== 57. Flowstate Project Detail Page — End ==================== */

/* ==================== 58. Workflow Automation Service Detail Page — Start ==================== */
.workflow-detail-section { padding: 100px 0 112px; background: #f8f6fa; }
.workflow-detail-sidebar { position: sticky; top: 100px; min-width: 0; }
.workflow-detail-index, .journal-detail-index, .journal-detail-related { padding: 29px; border: 1px solid #e8e1ed; border-radius: 20px; background: #fff; }
.workflow-detail-index .eyebrow, .journal-detail-index .eyebrow, .journal-detail-related .eyebrow { display: block; margin-bottom: 20px; }
.workflow-detail-index a { display: grid; grid-template-columns: 24px 1fr 15px; align-items: center; gap: 9px; padding: 17px 0; border-top: 1px solid #eee9f1; color: var(--color-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.workflow-detail-index a > span:first-child { color: var(--color-agent-accent); font-size: 10px; }
.workflow-detail-index a > span:last-child { color: var(--color-agent-accent); text-align: right; }
.workflow-detail-index a:hover, .journal-detail-index a:hover { color: var(--color-agent-accent); }
.workflow-detail-index a:focus-visible, .journal-detail-index a:focus-visible, .journal-detail-related a:focus-visible, .workflow-detail-next a:focus-visible, .journal-detail-navigation a:focus-visible { outline: 2px solid var(--color-agent-accent); outline-offset: 3px; }
.workflow-detail-contact, .journal-detail-sidebar-cta { padding: 29px; border-radius: 20px; background: radial-gradient(circle at 90% 8%, #7953c7 0, transparent 48%), #211b38; color: #fff; }
.workflow-detail-contact .eyebrow, .journal-detail-sidebar-cta .eyebrow { display: block; font-size: 10px; }
.workflow-detail-contact h2, .journal-detail-sidebar-cta h2 { margin: 23px 0 12px; font-size: 26px; font-weight: 600; letter-spacing: -.05em; line-height: 1.2; }
.workflow-detail-contact p, .journal-detail-sidebar-cta p { margin: 0 0 23px; color: #ded6eb; font-size: 13px; line-height: 1.6; }
.workflow-detail-contact .pill, .journal-detail-sidebar-cta .pill { gap: 12px; padding-right: 5px; background: #fff; color: var(--color-text); font-size: 11px; font-weight: 700; text-decoration: none; }
.workflow-detail-contact .pill-icon, .journal-detail-sidebar-cta .pill-icon { background: var(--color-agent-accent); color: #fff; }
.workflow-detail-contact .lucide-icon, .journal-detail-sidebar-cta .lucide-icon { transform: rotate(-45deg); }
.workflow-detail-content { min-width: 0; }
.workflow-detail-cover { position: relative; overflow: hidden; margin: 0; border-radius: 21px; background: #102459; }
.workflow-detail-cover img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.workflow-detail-cover figcaption { position: absolute; right: 21px; bottom: 20px; padding: 9px 13px; border: 1px solid #ffffff55; border-radius: 99px; background: #111423ac; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.workflow-detail-block { padding: 63px 0 30px; border-bottom: 1px solid #e3dce9; scroll-margin-top: 95px; }
.workflow-detail-block .eyebrow { display: block; margin-bottom: 19px; }
.workflow-detail-block h2 { max-width: 750px; margin: 0 0 24px; font-size: 45px; font-weight: 600; letter-spacing: -.055em; line-height: 1.14; }
.workflow-detail-block h2 span { color: var(--color-agent-accent); }
.workflow-detail-block > p { max-width: 740px; margin: 0 0 15px; color: var(--color-text-muted); font-size: 15px; line-height: 1.75; }
.workflow-detail-block > .workflow-detail-lead { color: var(--color-text); font-size: 20px; line-height: 1.55; }
.workflow-detail-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.workflow-detail-highlights article { padding: 24px; border: 1px solid #e9e2ee; border-radius: 16px; background: #fff; }
.workflow-detail-highlights article > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #eee5fa; color: var(--color-agent-accent); font-size: 19px; }
.workflow-detail-highlights h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.workflow-detail-highlights p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.65; }
.workflow-detail-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 30px 0 34px; padding: 0; list-style: none; }
.workflow-detail-benefits li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #e3dce9; color: var(--color-text); font-size: 14px; line-height: 1.5; }
.workflow-detail-benefits li span { flex: none; color: var(--color-agent-accent); font-size: 10px; font-weight: 700; }
.workflow-detail-steps { margin-top: 29px; }
.workflow-detail-steps article { display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 20px; padding: 23px 0; border-top: 1px solid #e3dce9; }
.workflow-detail-steps article > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #ebe1f7; color: var(--color-agent-accent); font-size: 11px; font-weight: 700; }
.workflow-detail-steps h3 { margin: 0 0 7px; font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.workflow-detail-steps p { max-width: 620px; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }
.workflow-detail-delivery { display: grid; grid-template-columns: 1.1fr 1fr; gap: 17px; margin-top: 31px; }
.workflow-detail-delivery > div { padding: 28px; border: 1px solid #e8e1ed; border-radius: 17px; background: #fff; }
.workflow-detail-delivery h3 { margin: 0 0 18px; font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.workflow-detail-delivery ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.workflow-detail-delivery li { position: relative; padding-left: 21px; font-size: 13px; line-height: 1.55; }
.workflow-detail-delivery li::before { position: absolute; left: 0; color: var(--color-agent-accent); content: '✦'; }
.workflow-detail-delivery p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.7; }
.workflow-detail-faq { border-bottom: 0; }
.workflow-detail-next, .journal-detail-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.workflow-detail-next a, .journal-detail-navigation a { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.workflow-detail-next a:hover, .journal-detail-navigation a:hover { color: var(--color-agent-accent); }
.workflow-detail-next .pill-icon, .journal-detail-navigation .pill-icon { width: 32px; height: 32px; background: var(--color-agent-accent); color: #fff; }
.workflow-detail-next .lucide-icon, .journal-detail-navigation .lucide-icon { width: 15px; height: 15px; transform: rotate(-45deg); }
.workflow-detail-next a:first-child .lucide-icon { flex: none; transform: none; }
/* ==================== 58. Workflow Automation Service Detail Page — End ==================== */

/* ==================== 59. Journal Article Detail Page — Start ==================== */
.journal-detail-section { padding: 100px 0 115px; background: #f8f6fa; }
.journal-detail-article { min-width: 0; }
.journal-detail-cover { position: relative; overflow: hidden; margin: 0 0 31px; border-radius: 20px; background: #112e69; }
.journal-detail-cover img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.journal-detail-cover figcaption { position: absolute; right: 20px; bottom: 20px; padding: 9px 12px; border: 1px solid #ffffff55; border-radius: 99px; background: #111423a8; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.journal-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; color: var(--color-text-muted); font-size: 11px; }
.journal-detail-meta .eyebrow { margin: 0; }
.journal-detail-intro { max-width: 780px; margin: 0 0 20px; color: var(--color-text); font-size: 23px; font-weight: 500; line-height: 1.55; letter-spacing: -.025em; }
.journal-detail-article > section { padding: 20px 0 17px; scroll-margin-top: 95px; }
.journal-detail-article h2 { max-width: 770px; margin: 0 0 21px; font-size: 35px; font-weight: 600; letter-spacing: -.055em; line-height: 1.2; }
.journal-detail-article h2 span { color: var(--color-agent-accent); }
.journal-detail-article section > p { max-width: 760px; margin: 0 0 19px; color: var(--color-text-muted); font-size: 15px; line-height: 1.85; }
.journal-detail-article blockquote { position: relative; margin: 33px 0 0; padding: 30px 36px; border-left: 4px solid var(--color-agent-accent); border-radius: 0 16px 16px 0; background: #eee8f7; }
.journal-detail-article blockquote > span { display: block; height: 31px; color: var(--color-agent-accent); font-size: 65px; line-height: .9; }
.journal-detail-article blockquote p { margin: 11px 0 14px; color: var(--color-text); font-family: var(--font-heading); font-size: 20px; font-weight: 600; letter-spacing: -.04em; line-height: 1.5; }
.journal-detail-article blockquote cite { color: var(--color-agent-accent); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .12em; }
.journal-detail-checklist { margin: 30px 0 0; padding: 0; list-style: none; }
.journal-detail-checklist li { display: flex; gap: 17px; padding: 15px 0; border-top: 1px solid #e4ddea; color: var(--color-text); font-size: 14px; line-height: 1.55; }
.journal-detail-checklist li span { color: var(--color-agent-accent); font-size: 11px; font-weight: 700; }
.journal-detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 35px; padding: 25px 0; border-top: 1px solid #e3dce9; border-bottom: 1px solid #e3dce9; }
.journal-detail-tags > span { margin-right: 8px; color: var(--color-agent-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.journal-detail-tags a { padding: 8px 12px; border: 1px solid #e3dce9; border-radius: 99px; background: #fff; color: var(--color-text); font-size: 11px; font-weight: 600; text-decoration: none; }
.journal-detail-tags a:hover { border-color: var(--color-agent-accent); color: var(--color-agent-accent); }
.journal-detail-navigation { padding-top: 28px; }
.journal-detail-sidebar { position: sticky; top: 100px; min-width: 0; }
.journal-detail-index a { display: block; padding: 13px 0; border-top: 1px solid #eee9f1; color: var(--color-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.journal-detail-related { margin-top: 0; }
.journal-detail-related a { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #eee9f1; color: var(--color-text); font-size: 13px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.journal-detail-related a:hover { color: var(--color-agent-accent); }
.journal-detail-related img { width: 64px; height: 59px; border-radius: 8px; object-fit: cover; }

/* ==================== 59. Journal Article Detail Page — End ==================== */

/* ==================== 60. Shared Detail Sidebars — Start ==================== */
/* The project, service and journal details use one sidebar type system. */
/* Bootstrap rows and columns align the sidebars; only their content widths are customized. */
.sidebar-detail-row { --bs-gutter-x: 34px; --bs-gutter-y: 35px; --detail-sidebar-width: 320px; }
.sidebar-detail-row > .detail-sidebar-column { width: calc(var(--detail-sidebar-width) + var(--bs-gutter-x)); }
.detail-sidebar-stack { --bs-gutter-x: 14px; --bs-gutter-y: 18px; }
.case-study-sidebar .detail-sidebar-stack { --bs-gutter-x: 15px; }
.detail-sidebar-stack .detail-sidebar-cta { margin-top: 0; }

.detail-sidebar-card {
    padding: 30px 29px 23px;
    border: 1px solid #e8e1ed;
    border-radius: 20px;
    background: #fff;
    color: var(--color-text);
}
.detail-sidebar-card > .eyebrow {
    display: block;
    margin: 0 0 15px;
    color: var(--color-agent-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
}
.detail-sidebar-card > h2 {
    margin: 0 0 26px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.15;
}
.detail-sidebar-card > h2 span { color: var(--color-agent-accent); }
.workflow-detail-index a,
.journal-detail-index a,
.journal-detail-related a {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.workflow-detail-index a > span:first-child { color: var(--color-text-muted); font-size: 12px; font-weight: 500; }
.detail-sidebar-cta {
    margin-top: 18px;
    padding: 30px;
    border-radius: 20px;
    background: radial-gradient(circle at 85% 7%, #7e57c7 0, transparent 46%), #211b38;
    color: #fff;
}
.detail-sidebar-cta > .eyebrow {
    display: block;
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
}
.detail-sidebar-cta > h3 {
    margin: 24px 0 27px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1.25;
}
.detail-sidebar-cta > p { margin: -14px 0 25px; color: #e4ddec; font-size: 13px; line-height: 1.6; }
.detail-sidebar-cta .pill { justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 6px 6px 22px; background: #fff; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.detail-sidebar-cta .pill-icon { flex: none; width: 36px; height: 36px; background: var(--color-agent-accent); color: #fff; }
.detail-sidebar-cta .lucide-icon { transform: rotate(-45deg); }

/* ==================== 60. Shared Detail Sidebars — End ==================== */

/* ==================== 61. Page Navigation and Coming Soon Page — Start ==================== */
.home-pages-menu { min-width: 230px; }
.home-dropdown .home-dropdown-link.active { background: var(--color-surface-violet); color: var(--color-agent-accent); }

/* Standalone coming-soon screen, sharing the homepage and 404 palette. */
.theme-coming-soon .coming-soon-screen {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 88px 24px;
    background:
        radial-gradient(ellipse 35% 42% at 50% 43%, rgba(143, 119, 199, .26), transparent 100%),
        radial-gradient(ellipse 42% 70% at 0 100%, rgba(199, 175, 228, .3), transparent 100%),
        linear-gradient(135deg, #eeeef1 0%, #dfe0e7 58%, #e9e8ed 100%);
    color: var(--color-text);
}
.theme-coming-soon .coming-soon-content { width: min(100%, 760px); text-align: center; }
.theme-coming-soon .coming-soon-mark { display: block; margin-bottom: 18px; color: var(--color-agent-accent); font-size: 68px; line-height: 1; text-shadow: 0 0 36px rgba(121, 83, 199, .22); }
.theme-coming-soon .coming-soon-eyebrow { display: block; margin-bottom: 20px; color: var(--color-agent-accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.theme-coming-soon h1 { margin: 0; color: var(--color-text); font-size: 72px; font-weight: 600; line-height: 1.12; letter-spacing: -.06em; }
.theme-coming-soon h1 span { color: var(--color-agent-accent); }
.theme-coming-soon .coming-soon-intro { max-width: 560px; margin: 22px auto 0; color: var(--color-text-muted); font-size: 17px; line-height: 1.7; }
.theme-coming-soon .coming-soon-form { max-width: 590px; margin: 38px auto 0; }
.theme-coming-soon .coming-soon-form-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.theme-coming-soon .coming-soon-form input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 21px;
    border: 1px solid #dcd3e9;
    border-radius: 28px;
    outline: 0;
    background: #fff;
    color: var(--color-text);
    font-size: 14px;
}
.theme-coming-soon .coming-soon-form input[type="email"]::placeholder { color: #777082; opacity: 1; }
.theme-coming-soon .coming-soon-form input[type="email"]:focus { border-color: var(--color-agent-accent); box-shadow: 0 0 0 3px rgba(121, 83, 199, .15); }
.theme-coming-soon .coming-soon-submit { justify-content: space-between; flex: none; min-height: 52px; padding: 6px 6px 6px 20px; border: 0; background: var(--color-agent-accent); color: #fff; font-size: 13px; font-weight: 700; }
.theme-coming-soon .coming-soon-submit .pill-icon { width: 38px; height: 38px; background: #fff; color: var(--color-agent-accent); }
.theme-coming-soon .coming-soon-submit .lucide-icon,
.theme-coming-soon .coming-soon-home .lucide-icon { width: 16px; height: 16px; transform: rotate(-45deg); }
.theme-coming-soon .coming-soon-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.theme-coming-soon .coming-soon-note { margin: 13px 0 0; color: var(--color-text-muted); font-size: 12px; }
.theme-coming-soon .coming-soon-status { margin: 14px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.theme-coming-soon .coming-soon-status:empty { display: none; }
.theme-coming-soon .coming-soon-status.is-success { color: #176143; }
.theme-coming-soon .coming-soon-status.is-error { color: #a42a42; }
.theme-coming-soon .coming-soon-home { display: inline-flex; align-items: center; gap: 7px; margin-top: 38px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--color-text); font-size: 13px; font-weight: 700; }
.theme-coming-soon .coming-soon-home:hover { color: var(--color-agent-accent); }

/* ==================== 61. Page Navigation and Coming Soon Page — End ==================== */