/* ============================================================
   TeyaHealth — Full Rebrand Homepage
   New identity: Evergreen × Cream × Electric Lime
   Type: Fraunces (display) + Inter (UI)
   Self-contained — no Bootstrap, no legacy style.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --evergreen: #0E3B2E;
    --evergreen-2: #14533F;
    --ink: #11201A;
    --ink-soft: #44584F;
    --ink-faint: #7E9188;
    --cream: #FAF6EF;
    --cream-2: #F3EDE0;
    --paper: #FFFFFF;
    --lime: #C9F26F;
    --lime-dark: #9CCF3D;
    --mint: #BFE8CF;
    --line: rgba(17, 32, 26, .12);
    --line-light: rgba(250, 246, 239, .18);
    --serif: "Space Grotesk", "Inter", sans-serif; /* display font */
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --r-xl: 28px;
    --r-lg: 20px;
    --r-md: 14px;
    --shadow: 0 30px 80px rgba(14, 59, 46, .16);
    --shadow-sm: 0 10px 30px rgba(14, 59, 46, .1);
    /* agent palette (rebranded) */
    --ag-patient: #3B82F6;
    --ag-frontdesk: #8B5CF6;
    --ag-nurse: #EC4899;
    --ag-provider: #F59E0B;
    --ag-billing: #14B8A6;
    --ag-docs: #6366F1;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.tb {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.tb img { max-width: 100%; display: block; }
.tb a { color: inherit; }

.tb .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- Type ---------- */
.tb h1, .tb h2.disp, .tb h3.disp {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.06;
    color: var(--ink);
}

/* Space Grotesk has no italics — accents are color-only */
.tb h1 em, .tb h2.disp em, .tb h3.disp em,
.tb-quote blockquote em { font-style: normal; }

.tb .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--evergreen-2);
}

.tb .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-dark); }

.tb .lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.tb .btn-lime {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--lime);
    color: var(--evergreen) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    box-shadow: 0 8px 24px rgba(156, 207, 61, .35);
}

.tb .btn-lime:hover { transform: translateY(-2px); background: #D6F98B; box-shadow: 0 14px 32px rgba(156, 207, 61, .45); }
.tb .btn-lime i { font-size: 12px; transition: transform .25s ease; }
.tb .btn-lime:hover i { transform: translateX(3px); }

.tb .btn-green {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--evergreen);
    color: var(--cream) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease;
}

.tb .btn-green:hover { transform: translateY(-2px); background: var(--evergreen-2); }

.tb .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease;
}

.tb .btn-ghost:hover { border-color: var(--evergreen); background: rgba(14, 59, 46, .05); }

/* ---------- Reveal ---------- */
.tb .rv { opacity: 0; transform: translateY(38px); filter: blur(7px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1); }
.tb .rv.in { opacity: 1; transform: none; filter: none; }
.tb .rv.d1 { transition-delay: .1s; }
.tb .rv.d2 { transition-delay: .2s; }
.tb .rv.d3 { transition-delay: .3s; }
.tb .rv.d4 { transition-delay: .4s; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.tb-announce {
    background: var(--evergreen);
    color: var(--cream);
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
}

.tb-announce a { color: var(--lime); text-decoration: none; font-weight: 800; margin-left: 8px; white-space: nowrap; }
.tb-announce a:hover { text-decoration: underline; }

/* ============================================================
   NAV
   ============================================================ */
.tb-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(250, 246, 239, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.tb-nav .inner {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* new wordmark */
.tb-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    text-decoration: none;
    line-height: 1;
}

.tb-logo .word {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 29px;
    letter-spacing: -.04em;
    color: var(--evergreen);
}

.tb-logo .spark { width: 9px; height: 9px; border-radius: 50%; background: var(--lime-dark); align-self: center; margin-left: 3px; }

.tb-logo .health {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--ink-faint);
    margin-left: 8px;
    text-transform: uppercase;
}

.tb-nav .links { display: flex; align-items: center; gap: 28px; margin-left: auto; }

.tb-nav .links a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .2s ease;
}

.tb-nav .links a:hover { color: var(--evergreen); }

.tb-nav .cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 999px; background: var(--evergreen); color: var(--cream) !important; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background .25s ease; }
.tb-nav .cta:hover { background: var(--evergreen-2); }

.tb-nav .burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: var(--evergreen);
    font-size: 17px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* mobile menu */
.tb-mobile {
    display: none;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    padding: 10px 28px 22px;
}

.tb-mobile.open { display: block; }
.tb-mobile a { display: block; padding: 13px 0; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line); }
.tb-mobile a:last-child { border-bottom: 0; }
.tb-mobile a.hl { color: var(--evergreen); }

/* ============================================================
   HERO
   ============================================================ */
.tb-hero { position: relative; padding: clamp(64px, 9vh, 110px) 0 0; text-align: center; overflow: clip; }

.tb-hero::before {
    content: "";
    position: absolute;
    inset: -10% -10% 0;
    background:
        radial-gradient(900px 460px at 80% -10%, rgba(201, 242, 111, .25), transparent 60%),
        radial-gradient(700px 420px at 10% 10%, rgba(191, 232, 207, .35), transparent 60%),
        radial-gradient(620px 420px at 50% 120%, rgba(201, 242, 111, .14), transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: tb-aurora 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* Cinematic agent-orchestration field — drawn behind hero content. */
.tb-hero-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    animation: tb-fx-in 1.2s ease forwards .3s;
}

.tb-hero .wrap, .tb-hero .tb-frame-zone { position: relative; z-index: 1; }

.tb-hero .pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: none;
    transition: border-color .25s ease;
}

.tb-hero .pill:hover { border-color: var(--evergreen); }
.tb-hero .pill .new { background: var(--lime); color: var(--evergreen); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.tb-hero .pill i { color: var(--evergreen-2); font-size: 11px; }

.tb-hero h1 {
    font-size: clamp(42px, 6.8vw, 84px);
    max-width: 16ch;
    margin: 30px auto 24px;
}

.tb-hero h1 em { font-style: italic; color: var(--evergreen-2); }

.tb-hero h1 .hl {
    position: relative;
    white-space: nowrap;
}

.tb-hero h1 .hl::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 8%;
    height: 32%;
    background: var(--lime);
    z-index: -1;
    border-radius: 6px;
    opacity: .8;
}

.tb-hero .lede { max-width: 620px; margin: 0 auto 36px; }

.tb-hero .ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.tb-hero .proof {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-faint);
}

.tb-hero .proof span { display: inline-flex; align-items: center; gap: 7px; }
.tb-hero .proof i { color: var(--evergreen-2); font-size: 12px; }

/* ---------- Hero product frame ---------- */
.tb-frame-zone { position: relative; margin-top: clamp(48px, 7vh, 84px); }

.tb-frame {
    position: relative;
    max-width: 1020px;
    margin: 0 auto;
    background: var(--evergreen);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 18px 18px 0;
    box-shadow: var(--shadow);
}

.tb-screen {
    background: var(--paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
    text-align: left;
}

.tb-screen .bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}

.tb-screen .bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-2); border: 1px solid var(--line); }

.tb-screen .bar .ttl { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.tb-screen .bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--evergreen-2); }
.tb-screen .bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-dark); animation: tb-pulse 1.7s infinite; }

.tb-screen .body { display: grid; grid-template-columns: 1.05fr .95fr; }
.tb-screen .pane { padding: 24px; }
.tb-screen .pane + .pane { border-left: 1px solid var(--line); }

.tb-screen .pane-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }

.tb-screen .tl { list-style: none; }
.tb-screen .tl li { display: flex; align-items: center; gap: 13px; padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.tb-screen .tl li + li { border-top: 1px dashed var(--line); }
.tb-screen .tl .ck { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--mint); color: var(--evergreen); }
.tb-screen .tl li.now .ck { background: var(--evergreen); color: var(--lime); animation: tb-pulse 1.7s infinite; }
.tb-screen .tl li.todo { color: var(--ink-faint); }
.tb-screen .tl li.todo .ck { background: var(--cream-2); color: var(--ink-faint); }
.tb-screen .tl .ev { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--evergreen-2); background: var(--cream); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }

.tb-screen .feed { list-style: none; }
.tb-screen .feed li { display: flex; gap: 11px; padding: 9px 0; font-size: 13.5px; color: var(--ink-soft); align-items: flex-start; }
.tb-screen .feed .av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; background: var(--av, var(--evergreen)); }
.tb-screen .feed strong { color: var(--ink); font-weight: 800; }
.tb-screen .feed .t { line-height: 1.45; }
.tb-screen .feed .stamp { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }

/* floating chips */
.tb-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    animation: tb-float 5.5s ease-in-out infinite;
    z-index: 2;
}

.tb-chip i { color: var(--evergreen-2); }
.tb-chip .mono { font-family: var(--mono); font-size: 11px; color: var(--evergreen-2); font-weight: 600; }
.tb-chip.a { top: -8px; left: max(1%, calc(50% - 640px)); }
.tb-chip.b { bottom: 30%; right: max(1%, calc(50% - 645px)); animation-delay: 1.5s; }

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.tb-strip { background: var(--evergreen); padding: 18px 0; overflow: hidden; }

.tb-strip .track { display: flex; gap: 54px; width: max-content; animation: tb-marquee 42s linear infinite; }

.tb-strip span {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .02em;
    color: rgba(250, 246, 239, .85);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 54px;
}

.tb-strip span::after { content: "✦"; font-size: 11px; color: var(--lime); font-style: normal; }

/* ============================================================
   IMPACT (cream, editorial)
   ============================================================ */
.tb-impact { padding: clamp(80px, 11vh, 130px) 0; }

.tb-impact .head { max-width: 780px; margin-bottom: 60px; }
.tb-impact .head h2.disp { font-size: clamp(32px, 4.4vw, 56px); margin-top: 18px; }
.tb-impact .head h2.disp em { font-style: italic; color: var(--evergreen-2); }

.tb-impact .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }

.tb-impact .cell { padding: 30px 26px 0 0; border-right: 1px solid var(--line); padding-left: 26px; }
.tb-impact .cell:first-child { padding-left: 0; }
.tb-impact .cell:last-child { border-right: 0; }

.tb-impact .n { font-family: var(--serif); font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--evergreen); }
.tb-impact .n .u { font-size: .4em; color: var(--lime-dark); margin-left: 2px; }
.tb-impact .l { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ============================================================
   PHASES (dark band)
   ============================================================ */
.tb-phases { background: var(--evergreen); color: var(--cream); padding: clamp(84px, 12vh, 140px) 0; border-radius: var(--r-xl); margin: 0 16px; }

.tb-phases .head { text-align: center; max-width: 760px; margin: 0 auto clamp(50px, 7vh, 72px); }
.tb-phases .eyebrow { color: var(--lime); justify-content: center; }
.tb-phases .eyebrow .dot { background: var(--lime); }
.tb-phases .head h2.disp { color: var(--cream); font-size: clamp(32px, 4.4vw, 56px); margin: 18px 0; }
.tb-phases .head h2.disp em { font-style: italic; color: var(--lime); }
.tb-phases .head .lede { color: rgba(250, 246, 239, .75); }

.tb-phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tb-phase {
    background: rgba(250, 246, 239, .06);
    border: 1px solid var(--line-light);
    border-radius: var(--r-lg);
    padding: 30px 28px;
    transition: background .3s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
}

.tb-phase:hover { background: rgba(250, 246, 239, .1); transform: translateY(-6px); }

.tb-phase .ph { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px; }
.tb-phase h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: 22px; color: var(--cream); margin-bottom: 12px; line-height: 1.25; }
.tb-phase p { font-size: 14.5px; line-height: 1.65; color: rgba(250, 246, 239, .72); margin-bottom: 24px; }

.tb-phase .rows { margin-top: auto; border-top: 1px solid var(--line-light); padding-top: 16px; }
.tb-phase .row-i { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: rgba(250, 246, 239, .85); }
.tb-phase .row-i i { color: var(--lime); font-size: 11px; width: 15px; }
.tb-phase .row-i .mono { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--lime); }

/* ============================================================
   AGENTS
   ============================================================ */
.tb-agents { padding: clamp(84px, 12vh, 140px) 0; }

.tb-agents .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 52px; }
.tb-agents .head h2.disp { font-size: clamp(32px, 4.4vw, 56px); margin-top: 18px; max-width: 15ch; }
.tb-agents .head h2.disp em { font-style: italic; color: var(--evergreen-2); }

.tb-agents .link-more { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--evergreen); text-decoration: none; border-bottom: 2px solid var(--lime); padding-bottom: 4px; transition: gap .25s ease; }
.tb-agents .link-more:hover { gap: 14px; }

.tb-agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }

/* Shared event-bus spine connecting the five agents (desktop only). */
.tb-agent-grid::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: -26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    z-index: 0;
}

.tb-agent-grid::after {
    content: "";
    position: absolute;
    top: -30px;
    left: 6%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime-dark);
    box-shadow: 0 0 0 4px rgba(156, 207, 61, .22);
    z-index: 1;
    animation: tb-bus 6s linear infinite;
}

@keyframes tb-bus {
    0%   { left: 6%;  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { left: 94%; opacity: 0; }
}

.tb-agent {
    --ac: var(--evergreen);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 20px 20px;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.tb-agent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ac); }

.tb-agent:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

.tb-agent .num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-faint); display: block; margin-bottom: 14px; }
.tb-agent .ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: var(--ac); margin-bottom: 16px; }
.tb-agent h3 { font-size: 16.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.tb-agent .role { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); margin-bottom: 10px; }
.tb-agent p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 14px; }
.tb-agent .ev { font-family: var(--mono); font-size: 10px; color: var(--ac); border-top: 1px dashed var(--line); padding-top: 10px; display: block; word-break: break-word; }

/* ============================================================
   PILLARS (editorial split rows)
   ============================================================ */
.tb-pillars { padding: 0 0 clamp(84px, 12vh, 140px); }

.tb-pillars .head { max-width: 700px; margin-bottom: 50px; }
.tb-pillars .head h2.disp { font-size: clamp(32px, 4.4vw, 56px); margin-top: 18px; }

.tb-pillar {
    display: grid;
    grid-template-columns: 90px 1fr 1.2fr 50px;
    align-items: center;
    gap: 28px;
    padding: 34px 10px;
    border-top: 1px solid var(--line);
    text-decoration: none;
    transition: background .3s ease, padding-left .3s ease;
}

.tb-pillar:last-child { border-bottom: 1px solid var(--line); }
.tb-pillar:hover { background: rgba(201, 242, 111, .12); padding-left: 22px; }

.tb-pillar .ic { width: 60px; height: 60px; border-radius: 18px; background: var(--evergreen); color: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 23px; }
.tb-pillar h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: clamp(20px, 2.3vw, 26px); color: var(--ink); }
.tb-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.tb-pillar .arr { justify-self: end; color: var(--ink-faint); font-size: 17px; transition: transform .3s ease, color .3s ease; }
.tb-pillar:hover .arr { transform: translateX(6px); color: var(--evergreen); }

/* ============================================================
   QUOTE
   ============================================================ */
.tb-quote { background: var(--cream-2); padding: clamp(84px, 12vh, 140px) 0; text-align: center; border-radius: var(--r-xl); margin: 0 16px; }

.tb-quote .stars { color: var(--lime-dark); font-size: 15px; letter-spacing: 6px; margin-bottom: 28px; }

.tb-quote blockquote { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.8vw, 34px); line-height: 1.45; letter-spacing: -.015em; color: var(--ink); max-width: 900px; margin: 0 auto 30px; }
.tb-quote blockquote em { color: var(--evergreen-2); }

.tb-quote .who { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.tb-quote .who span { display: block; font-weight: 600; color: var(--ink-faint); margin-top: 4px; }

/* ============================================================
   TRUST
   ============================================================ */
.tb-trust { padding: clamp(84px, 12vh, 140px) 0; }

.tb-trust .head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.tb-trust .head .eyebrow { justify-content: center; }
.tb-trust .head h2.disp { font-size: clamp(30px, 4vw, 50px); margin-top: 18px; }
.tb-trust .head h2.disp em { font-style: italic; color: var(--evergreen-2); }

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

.tb-trust .cell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; transition: transform .3s ease, box-shadow .3s ease; }
.tb-trust .cell:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.tb-trust .cell .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--mint); color: var(--evergreen); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; }
.tb-trust .cell h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.tb-trust .cell p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.tb-final { background: var(--evergreen); border-radius: var(--r-xl); margin: 0 16px; padding: clamp(90px, 13vh, 150px) 0; text-align: center; position: relative; overflow: hidden; }

.tb-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 400px at 85% 110%, rgba(201, 242, 111, .2), transparent 60%);
    pointer-events: none;
}

.tb-final .wrap { position: relative; }
.tb-final .eyebrow { color: var(--lime); justify-content: center; }
.tb-final .eyebrow .dot { background: var(--lime); }
.tb-final h2.disp { color: var(--cream); font-size: clamp(34px, 5vw, 64px); max-width: 18ch; margin: 20px auto 22px; }
.tb-final h2.disp em { font-style: italic; color: var(--lime); }
.tb-final p { color: rgba(250, 246, 239, .75); max-width: 560px; margin: 0 auto 38px; font-size: 16.5px; line-height: 1.7; }
.tb-final .ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.tb-final .btn-ghost { border-color: rgba(250, 246, 239, .3); color: var(--cream) !important; }
.tb-final .btn-ghost:hover { border-color: var(--lime); background: rgba(201, 242, 111, .08); }

/* ============================================================
   FOOTER
   ============================================================ */
.tb-footer { padding: clamp(64px, 9vh, 100px) 0 0; }

.tb-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 56px; }

.tb-footer .about p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-top: 18px; max-width: 34ch; }

.tb-footer h4 { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }

.tb-footer ul { list-style: none; }
.tb-footer ul li { margin-bottom: 11px; }
.tb-footer ul a { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color .2s ease; }
.tb-footer ul a:hover { color: var(--evergreen); }

.tb-footer .social { display: flex; gap: 10px; margin-top: 20px; }
.tb-footer .social a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 15px; text-decoration: none; transition: all .25s ease; }
.tb-footer .social a:hover { background: var(--evergreen); color: var(--lime); border-color: var(--evergreen); }

.tb-footer .bottom {
    border-top: 1px solid var(--line);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-faint);
}

.tb-footer .bottom a { color: var(--ink-faint); text-decoration: none; margin-left: 22px; }
.tb-footer .bottom a:hover { color: var(--evergreen); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes tb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(156, 207, 61, .5); }
    60% { box-shadow: 0 0 0 8px rgba(156, 207, 61, 0); }
}

@keyframes tb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes tb-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes tb-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

@keyframes tb-fx-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .tb .rv { opacity: 1; transform: none; filter: none; transition: none; }
    .tb-chip, .tb-strip .track { animation: none; }
    .tb-screen .bar .live::before, .tb-screen .tl li.now .ck { animation: none; }
    .tb-hero::before { animation: none; }
    .tb-hero-fx { display: none; }
    .tb-agent-grid::after { animation: none; opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
    .tb-chip { display: none; }
}

@media (max-width: 991px) {
    .tb-nav .links { display: none; }
    .tb-nav .burger { display: inline-flex; }
    .tb-nav .cta { display: none; }
    .tb-screen .body { grid-template-columns: 1fr; }
    .tb-screen .pane + .pane { border-left: 0; border-top: 1px solid var(--line); }
    .tb-impact .grid { grid-template-columns: 1fr 1fr; border-top: 0; }
    .tb-impact .cell { border-top: 1px solid var(--line); padding-left: 0; padding-right: 20px; border-right: 0; }
    .tb-phase-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .tb-agent-grid { grid-template-columns: 1fr 1fr; }
    .tb-agent-grid::before, .tb-agent-grid::after { display: none; }
    .tb-pillar { grid-template-columns: 64px 1fr 40px; }
    .tb-pillar p { grid-column: 2; }
    .tb-pillar .arr { grid-row: 1; }
    .tb-trust .grid { grid-template-columns: 1fr 1fr; }
    .tb-footer .top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .tb .wrap { padding: 0 20px; }
    .tb-hero h1 { font-size: clamp(34px, 9.4vw, 48px); }
    .tb .lede { font-size: 15.5px; }
    .tb-frame { padding: 10px 10px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .tb-screen .tl .ev { display: none; }
    .tb-phases, .tb-quote, .tb-final { margin: 0 10px; }
    .tb-agent-grid { grid-template-columns: 1fr; }
    .tb-agent-grid .tb-agent:last-child { grid-column: auto; }
    .tb-pillar .ic { width: 48px; height: 48px; font-size: 19px; border-radius: 14px; }
    .tb-agent:hover, .tb-trust .cell:hover, .tb-phase:hover { transform: none; }
}

@media (max-width: 480px) {
    .tb-hero .ctas, .tb-final .ctas { flex-direction: column; align-items: stretch; }
    .tb .btn-lime, .tb .btn-green, .tb .btn-ghost { width: 100%; justify-content: center; }
    .tb-impact .grid { grid-template-columns: 1fr; }
    .tb-trust .grid { grid-template-columns: 1fr; }
    .tb-footer .top { grid-template-columns: 1fr; gap: 34px; }
    .tb-hero .proof { gap: 12px 18px; }
    .tb-announce { font-size: 12px; }
}

/* ============================================================
   HOME — AGENT ORBIT (animated ring around TeyaAi)
   ============================================================ */
.tb-orbit-wrap { margin-top: clamp(28px, 5vh, 56px); }
.tb-orbit { position: relative; width: min(660px, 94vw); margin: 0 auto; aspect-ratio: 1 / 1; }

.tb-orbit .lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.tb-orbit .lines .track   { fill: none; stroke: rgba(17,32,26,.05); stroke-width: .5; }
.tb-orbit .lines .dashring { fill: none; stroke: rgba(17,32,26,.16); stroke-width: .35; stroke-dasharray: 1 2.4; transform-origin: 50% 50%; animation: tb-orbit-spin 70s linear infinite; }
.tb-orbit .lines .spoke   { stroke-width: .5; stroke-dasharray: .7 1.7; stroke-linecap: round; }
.tb-orbit .lines .arc     { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 6; animation: tb-orbit-flow 1.5s linear infinite; }
@keyframes tb-orbit-flow { to { stroke-dashoffset: -20; } }
@keyframes tb-orbit-spin { to { transform: rotate(360deg); } }

.tb-orbit .hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 34%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 36%, #fff, #F6F1E8);
    box-shadow: 0 26px 64px rgba(14,59,46,.18), inset 0 0 0 1px rgba(17,32,26,.05);
    display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; z-index: 3;
}
.tb-orbit .hub::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(17,32,26,.07); }
.tb-orbit .hub .halo { position: absolute; inset: -4%; border-radius: 50%; box-shadow: 0 0 48px 6px rgba(99,102,241,.20); animation: tb-hub-pulse 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes tb-hub-pulse { 0%,100% { opacity: .45; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.03); } }
.tb-orbit .hub .star { width: 30%; max-width: 64px; }
.tb-orbit .hub .wm { font-family: var(--serif); font-weight: 700; font-size: clamp(15px, 3.5vw, 27px); letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.tb-orbit .hub .wm em { font-style: normal; color: var(--ink-faint); font-weight: 600; }

.tb-onode { position: absolute; transform: translate(-50%,-50%); width: clamp(98px, 15vw, 142px); text-align: center; text-decoration: none; z-index: 2; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.tb-onode .tile { position: relative; width: clamp(48px, 8.4vw, 64px); height: clamp(48px, 8.4vw, 64px); border-radius: 18px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: clamp(19px, 3.4vw, 25px); background: var(--ac); box-shadow: 0 14px 30px -8px var(--ac); }
.tb-onode .tile::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--ac); opacity: .14; z-index: -1; }
.tb-onode .num { position: absolute; top: -10px; right: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ac); font-family: var(--mono); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.tb-onode h3 { font-size: clamp(14px, 1.7vw, 17px); font-weight: 800; color: var(--ink); margin: 0 0 3px; }
.tb-onode .role { font-size: clamp(9px, 1vw, 11px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac); line-height: 1.3; display: block; }
.tb-onode:hover { transform: translate(-50%,-50%) scale(1.07); }

.tb-onode.p1 { top: 9%;  left: 50%; }
.tb-onode.p2 { top: 31%; left: 84%; }
.tb-onode.p3 { top: 69%; left: 84%; }
.tb-onode.p4 { top: 91%; left: 50%; }
.tb-onode.p5 { top: 69%; left: 16%; }
.tb-onode.p6 { top: 31%; left: 16%; }

.tb-orbit-list { display: none; }

@media (max-width: 600px) {
    .tb-orbit { display: none; }
    .tb-orbit-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
    .tb-orbit-list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color .25s ease; }
    .tb-orbit-list a:hover { border-color: var(--ac); }
    .tb-orbit-list .tile { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; background: var(--ac); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    .tb-orbit-list h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
    .tb-orbit-list .role { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-orbit .lines .arc, .tb-orbit .lines .dashring, .tb-orbit .hub .halo { animation: none; }
}