@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); .tk-root { --page-bg: #FFFFFF; --paper: #FFFFFF; --paper-alt: #F3EEFC; --ink: #170C33; --slate: #5C5478; --line: #E3DAF7; --navy: #2C1B72; --navy-deep: #0E0730; --navy-soft: #EDE7FC; --amber: #D926EF; --amber-soft: #F9E4FC; --violet: #7C3AED; --violet-bright: #9B6BFF; --violet-soft: #ECE3FF; --green: #17875A; --green-soft: #E3F7ED; --orange: #FF7A45; --orange-soft: #FFE7DA; /* deep-purple "night" surfaces, used by .tk-section-dark and the closing block */ --dusk: #170B3F; --dusk-2: #241050; --dusk-line: rgba(197,163,255,0.16); --dusk-ink: #F3EEFF; --dusk-slate: #B6A6E8; --grad-pop: linear-gradient(120deg, #7C3AED 0%, #D926EF 100%); --grad-warm: linear-gradient(120deg, #7C3AED 0%, #FF7A45 100%); --grad-glow: linear-gradient(120deg, #9B6BFF 0%, #D926EF 50%, #FF7AC6 100%); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; background: var(--page-bg); color: var(--ink); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---------- signature: animated gradient / glow text ---------- */ .tk-grad-text { background: var(--grad-glow); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: tk-grad-shift 7s ease-in-out infinite; } @keyframes tk-grad-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .tk-grad-text { animation: none; } } /* ---------- signature: ambient purple glow orbs ---------- */ .tk-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: 0.55; animation: tk-orb-float 11s ease-in-out infinite; } @keyframes tk-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16px, 18px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .tk-orb, .tk-hero::before { animation: none; } } /* ---------- dark purple "night" section ---------- */ .tk-section-dark { position: relative; background: radial-gradient(900px 500px at 12% 8%, rgba(155,107,255,0.30), transparent 58%), radial-gradient(760px 520px at 92% 96%, rgba(217,38,239,0.22), transparent 55%), linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 100%); border-bottom-color: var(--dusk-line); color: var(--dusk-ink); overflow: hidden; } .tk-section-dark .tk-eyebrow { --eyebrow-bg: var(--violet-bright); } .tk-section-dark .tk-h2, .tk-section-dark .tk-h1 { color: #FFFFFF; } .tk-section-dark .tk-lede, .tk-section-dark p { color: var(--dusk-slate); opacity: 1; } .tk-section-dark .tk-interstitial-statement { color: #FFFFFF; } .tk-section-dark .tk-interstitial-sub { color: var(--violet-bright); } /* thin fade at the very top/bottom edge so the dark section eases in and out of the light paper sections around it, instead of cutting straight from light to dark on a hard line */ .tk-section-dark::before, .tk-section-dark::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; } .tk-section-dark::before { top: 0; background: linear-gradient(180deg, var(--paper) 0%, transparent 100%); } .tk-section-dark::after { bottom: 0; background: linear-gradient(180deg, transparent 0%, var(--paper) 100%); } .tk-section-dark .tk-section-inner { position: relative; z-index: 1; } /* ---------- velvety purple zone: reusable, seamless across sections ---------- Used for the tail of the product page (Shared Foundation + Final CTA) and the homepage's "It looks before it speaks" strip. One background and one maze-image layer applied ONCE at the wrapper level -- each section previously painted its own independent copy of the gradient, which is exactly why a visible seam showed up where one section's gradient ended and the next one's started fresh. Wrap whichever section(s) belong in the same continuous zone in a single .tk-foundation-zone div and this handles the rest. */ .tk-foundation-zone { position: relative; background: radial-gradient(1100px 560px at 15% -10%, rgba(155,107,255,0.30), transparent 60%), radial-gradient(900px 520px at 100% 110%, rgba(217,70,239,0.16), transparent 55%), linear-gradient(165deg, #3B1E78 0%, #2A1259 55%, #230F4D 100%); } .tk-foundation-zone .tk-eyebrow { --eyebrow-bg: var(--violet-bright); } .tk-foundation-zone .tk-h1, .tk-foundation-zone .tk-h2 { color: #FFFFFF; } /* body copy needs to stay legible over a busy background image, not just a flat color -- brighter than --dusk-slate and a soft shadow so it holds up even over the lighter parts of the maze artwork */ .tk-foundation-zone .tk-lede, .tk-foundation-zone p { color: #E4DBFF; opacity: 1; text-shadow: 0 1px 4px rgba(10,4,30,0.5); } .tk-foundation-zone .tk-interstitial-statement { color: #FFFFFF; } .tk-foundation-zone .tk-interstitial-sub { color: var(--violet-bright); } .tk-foundation-zone .tk-foundation-chip { border-top-color: rgba(255,255,255,0.16); } .tk-foundation-zone .tk-foundation-chip-title { color: #fff; } .tk-foundation-zone .tk-foundation-chip-body { color: #E4DBFF; text-shadow: 0 1px 4px rgba(10,4,30,0.5); } /* every section inside the zone goes transparent so the one shared background above is what actually shows -- no more per-section copies */ .tk-foundation-zone .tk-section, .tk-foundation-zone .tk-cta-section, .tk-foundation-zone .tk-interstitial { background: transparent; border-bottom: none; } .tk-foundation-zone > * { position: relative; z-index: 1; } .tk-foundation-zone .tk-section-inner, .tk-foundation-zone .tk-closing-inner, .tk-foundation-zone .tk-cta-inner { position: relative; z-index: 1; } /* the maze artwork -- a real element rather than a ::before, since ::before/::after on the zone itself are needed for the top/bottom fade edges below and a single pseudo-element can't do both jobs */ .tk-foundation-maze { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/maze-flow-bg.webp"); background-repeat: repeat-y; background-position: top center; background-size: 100% auto; opacity: 0.18; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.9) 96%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.9) 96%, transparent 100%); } /* optional fades where a zone borders a light section -- top and/or bottom, whichever the zone actually needs */ .tk-foundation-zone-fade-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, transparent 100%); } .tk-foundation-zone-fade-bottom::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 32px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--paper) 100%); } /* echoes the gate scene's reveal-glow bloom, so the dark zones feel like part of the same premium moment rather than unrelated treatments that happen to both be purple -- a soft light burst that blooms in once, the first time the zone actually scrolls into view */ .tk-foundation-bloom { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(640px 420px at 18% 8%, rgba(255,255,255,0.16), transparent 65%); opacity: 0; transform: scale(0.85); } .tk-foundation-bloom-in { animation: tk-foundation-bloom-in 1.8s cubic-bezier(.16,.8,.32,1) forwards; } @keyframes tk-foundation-bloom-in { 0% { opacity: 0; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.5; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .tk-foundation-bloom-in { animation: none; opacity: 0.5; transform: scale(1); } } .tk-root * { box-sizing: border-box; } .tk-root button { font-family: inherit; cursor: pointer; } .tk-root input { font-family: inherit; } .tk-root a { cursor: pointer; color: inherit; text-decoration: none; } .tk-mono { font-family: var(--font-mono); } /* ---------- layout ---------- */ .tk-section-inner { max-width: 1080px; margin: 0 auto; padding: 0 28px; } .tk-section { width: 100%; margin: 0; padding: 72px 0; background: radial-gradient(1100px 460px at 14% -12%, rgba(124,92,252,0.05), transparent 58%), radial-gradient(900px 420px at 100% 112%, rgba(217,70,239,0.04), transparent 55%), var(--paper); border-bottom: 1px solid var(--line); position: relative; } .tk-section-alt { background: radial-gradient(1100px 460px at 88% -12%, rgba(124,92,252,0.06), transparent 58%), radial-gradient(900px 420px at 4% 112%, rgba(217,70,239,0.045), transparent 55%), var(--paper-alt); } .tk-main { position: relative; } /* ---------- contextual rhythm (site-wide): most sections keep the standard beat, but a section that's directly continuing the point above it doesn't need a full reset, and a section that's a real pivot (a closing statement, a big shift in topic) earns more room than the default. Applied selectively, not on every section. ---------- */ .tk-section.tk-section-tight { padding-top: 40px; } .tk-section.tk-section-loose { padding-top: 128px; padding-bottom: 128px; } @media (max-width: 640px) { .tk-section { padding: 48px 0; } .tk-section.tk-section-tight { padding-top: 28px; } .tk-section.tk-section-loose { padding-top: 64px; padding-bottom: 64px; } } /* ---------- continuous maze-art background zone ---------- Wraps a run of consecutive light sections so the marble-run artwork reads as one full-width piece flowing down behind all of them. The zone itself carries the paper backdrop; the maze image sits on top of that at low opacity; the wrapped sections are made transparent so nothing in between blocks it out -- each section's own opaque background was hiding the image completely, which is why some sections showed it and others showed nothing at all. The image is sized to the full width of the zone (edge-to-edge) and repeats vertically as it flows through however many sections are in the zone, feathering in at the very top so it eases in rather than snapping on. */ .tk-flow-zone { position: relative; background: radial-gradient(1100px 460px at 14% -8%, rgba(124,92,252,0.09), transparent 58%), radial-gradient(900px 420px at 100% 30%, rgba(217,70,239,0.07), transparent 55%), var(--paper); } .tk-flow-zone::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/maze-flow-bg.webp"); background-repeat: repeat-y; background-position: top center; background-size: 100% auto; opacity: 0.17; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 3%, rgba(0,0,0,0.9) 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 3%, rgba(0,0,0,0.9) 100%); } .tk-flow-zone > * { position: relative; z-index: 1; } /* pin-and-overlap: this zone locks in place at the top of the viewport while the section after it (given a higher z-index and an opaque background of its own) scrolls up and over it, covering it entirely instead of just pushing it off screen in the ordinary way. Both pieces must sit inside a .tk-overlap-scope wrapper -- the z-index escalation this needs to stack the "cover" above the "pinned" layer otherwise has no boundary, and elements later on the page that never got a z-index of their own (i.e. everything after this effect) can end up stuck underneath it even once it's supposed to have scrolled fully out of the way. isolation:isolate contains the z-index fight to just these two layers so nothing outside this wrapper is affected. */ .tk-overlap-scope { position: relative; isolation: isolate; } .tk-flow-zone-pin { position: sticky; top: 0; z-index: 1; min-height: 100vh; } .tk-pin-cover { position: sticky; top: 0; z-index: 2; /* No min-height (and no independent background) here on purpose -- both sections that use this now guarantee their own min-height:100vh (.tk-reasons-cinema, .tk-gate-scene), so this wrapper can only ever be exactly as tall as its child. Giving the wrapper its own separate floor/background was the actual bug: if that floor ever won out over the child's real height by even a few pixels, the wrapper's own (static, un-transitioning) background showed through as a stray band under the content. With no independent size or color of its own, there's nothing for a mismatch to reveal. */ } .tk-flow-zone .tk-hero, .tk-flow-zone .tk-section, .tk-flow-zone .tk-stack, .tk-flow-zone .tk-page-hero { border-bottom: none; } /* strip each wrapped section's own opaque fill (and the sticky pin panel inside the pipeline showcase) so the shared zone background -- paper tone + maze art -- is what actually shows through them */ .tk-flow-zone .tk-section, .tk-flow-zone .tk-showcase-scene-pin, .tk-flow-zone .tk-page-hero { background: transparent; } @media (max-width: 900px) { .tk-flow-zone::before { opacity: 0.1; } } /* ---------- corkboard thread ---------- */ .tk-corkboard { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: none; } @media (min-width: 1500px) { .tk-corkboard { display: block; } } .tk-corkboard-line { position: absolute; top: 0; bottom: 0; left: 22px; width: 2px; background-image: repeating-linear-gradient(to bottom, var(--line) 0 7px, transparent 7px 16px); } .tk-corkboard-lit { position: absolute; top: 0; left: 22px; width: 2px; background-image: repeating-linear-gradient(to bottom, var(--amber) 0 7px, transparent 7px 16px); transition: height 140ms linear; } .tk-corkboard-pin { position: absolute; left: 22px; width: 9px; height: 9px; margin-left: -4px; margin-top: -4px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); box-shadow: 0 1px 2px rgba(23,25,27,0.12); transition: background 320ms ease, border-color 320ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1), box-shadow 320ms ease; } .tk-corkboard-pin-active { background: var(--amber); border-color: var(--amber); transform: scale(1.2); box-shadow: 0 0 0 5px rgba(196,60,214,0.16); } /* ---------- nav ---------- */ .tk-nav { position: sticky; top: 0; z-index: 50; background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; margin: 0 8px; border-radius: 0; transition: background 260ms ease, backdrop-filter 260ms ease, border-color 260ms ease, border-radius 260ms ease, margin 260ms ease; } .tk-nav-scrolled { background: rgba(255,255,255,0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: transparent; margin: 8px 12px 0; border-radius: 12px; box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(20,20,28,0.12); } .tk-nav-inner { height: 54px; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .tk-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; } .tk-brand-mark { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: block; object-fit: cover; } .tk-word { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.01em; color: var(--navy-deep); } .tk-word-dot { color: var(--amber); } .tk-nav-links { display: flex; gap: 40px; margin-right: auto; margin-left: 12px; } .tk-nav-links a { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--slate); position: relative; padding-bottom: 4px; opacity: 0.85; transition: opacity 140ms ease, color 140ms ease; } .tk-nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--grad-pop); transition: right 200ms cubic-bezier(.16,.8,.32,1); } .tk-nav-links a:hover { opacity: 1; color: var(--navy-deep); } .tk-nav-links a:hover::after { right: 0; } .tk-nav-cta { display: inline-flex; flex-shrink: 0; } .tk-nav-cta.tk-btn { padding: 7px 16px; font-size: 12.5px; border-radius: 6px; box-shadow: none; } .tk-nav-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 6px; } .tk-nav-burger span { width: 18px; height: 1.5px; background: var(--ink); display: block; } .tk-nav-mobile { display: none; } /* ---------- powered-by badge: fixed, unobtrusive corner mark ---------- */ .tk-powered-badge { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; box-shadow: 0 8px 20px -10px rgba(23,17,54,0.25); pointer-events: none; } .tk-powered-badge strong { color: var(--navy-deep); font-weight: 700; } @media (max-width: 640px) { .tk-powered-badge { right: 10px; bottom: 10px; font-size: 9.5px; padding: 6px 10px; } } /* ---------- waitlist confirmation modal ---------- */ .tk-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(21,15,40,0.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: tk-modal-fade-in 220ms ease; } @keyframes tk-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } .tk-modal-card { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 36px 32px 28px; box-shadow: 0 40px 90px -30px rgba(21,15,59,0.4); animation: tk-modal-pop-in 260ms cubic-bezier(.2,.8,.3,1.05); } @keyframes tk-modal-pop-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .tk-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--paper-alt); color: var(--slate); transition: background 160ms ease, color 160ms ease; } .tk-modal-close:hover { background: var(--line); color: var(--navy-deep); } .tk-modal-close:disabled { opacity: 0.4; cursor: default; } .tk-modal-check { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px; background: var(--green); color: #fff; } .tk-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--navy-deep); margin: 0 0 10px; } .tk-modal-body { font-size: 14.5px; color: var(--slate); line-height: 1.6; margin: 0 0 22px; } .tk-modal-body strong { color: var(--ink); font-weight: 600; } .tk-modal-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; font-size: 13.5px; color: var(--ink); line-height: 1.5; cursor: pointer; } .tk-modal-checkbox-row input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--violet); cursor: pointer; } @media (max-width: 900px) { .tk-nav-links, .tk-nav-cta { display: none; } .tk-nav-burger { display: flex; } .tk-nav-mobile.tk-nav-mobile { display: flex; flex-direction: column; gap: 2px; padding: 8px 28px 18px; border-top: 1px solid var(--line); background: #fff; } .tk-nav-mobile a { padding: 10px 0; font-size: 15px; color: var(--slate); border-bottom: 1px solid var(--line); } } .tk-nav-mobile-product { border-bottom: 1px solid var(--line); } .tk-nav-mobile-product-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 15px; color: var(--slate); background: none; border: none; text-align: left; } .tk-nav-mobile-chevron { font-size: 12px; transition: transform 200ms ease; color: var(--slate); } .tk-nav-mobile-chevron-open { transform: rotate(180deg); } .tk-nav-mobile-product-list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; } .tk-nav-mobile-product-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 8px; font-size: 14px; color: var(--ink); } .tk-nav-mobile-product-row:hover { background: var(--paper-alt); } .tk-nav-mobile-product-all { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--slate); padding: 8px 6px 2px; } /* ---------- eyebrow / stage labels: soft pill badge, trailing off into a couple of lighter tinted echoes of itself (Clay-style) ---------- */ .tk-eyebrow { position: relative; display: flex; width: fit-content; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: #fff; margin: 0 0 22px; text-transform: uppercase; background: var(--eyebrow-bg, var(--amber)); padding: 7px 18px; border-radius: 999px; isolation: isolate; } .tk-eyebrow::before, .tk-eyebrow::after { content: ""; position: absolute; top: 50%; height: 100%; border-radius: 999px; transform: translateY(-50%); z-index: -1; pointer-events: none; } .tk-eyebrow::before { right: -9px; width: calc(100% - 4px); background: color-mix(in srgb, var(--eyebrow-bg, var(--amber)) 32%, transparent); } .tk-eyebrow::after { right: -17px; width: calc(100% - 22px); background: color-mix(in srgb, var(--eyebrow-bg, var(--amber)) 16%, transparent); } .tk-stage-label { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .tk-stage-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--paper); background: var(--navy); border-radius: 999px; padding: 3px 9px; } .tk-stage-t { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--slate); text-transform: uppercase; } /* ---------- typography ---------- */ .tk-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 6.6vw, 70px); line-height: 1.04; letter-spacing: -0.026em; margin: 0 0 56px; color: var(--navy-deep); } .tk-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -0.014em; margin: 0 0 16px; color: var(--navy-deep); max-width: 760px; } .tk-lede { font-size: 17px; color: var(--slate); max-width: 620px; margin: 0 0 48px; } .tk-hero-sub { font-size: 18px; color: var(--slate); max-width: 520px; margin: 0 0 96px; } /* ---------- centered section head ---------- Used for standalone section intros that aren't paired with a side visual (e.g. "How it works" on agent pages) -- gives agent pages a deliberate mix of left- and center-aligned headings instead of everything pinned to the left edge. Hero and Problem sections stay left-aligned since their copy sits beside an animation; this is for the sections that own the full width by themselves. */ .tk-agent-section-head-center { text-align: center; max-width: 720px; margin: 0 auto; } .tk-agent-section-head-center .tk-h2 { max-width: 100%; margin-left: auto; margin-right: auto; } .tk-agent-section-head-center .tk-agent-signal-label { align-items: center; } .tk-agent-section-head-center .tk-agent-signal-label-rule { margin: 0 auto; } /* body copy reads slightly softer than full ink black */ .tk-root p { opacity: 0.85; } /* ---------- buttons / inputs ---------- */ .tk-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; padding: 13px 24px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; transition: transform 120ms ease, background 120ms ease; } .tk-btn-primary { background: var(--grad-pop); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -6px rgba(124,58,237,0.55); transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .tk-btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(217,38,239,0.6); } .tk-btn-primary:disabled { opacity: 0.6; cursor: default; box-shadow: none; } .tk-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease; } .tk-btn-ghost:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); background: var(--violet-soft); transform: translateY(-1px); } .tk-btn-ghost:disabled { opacity: 0.5; cursor: default; } .tk-input-row { display: flex; align-items: stretch; max-width: 560px; border: 1px solid var(--line); background: #fff; border-radius: 999px; overflow: hidden; } .tk-input-prefix { display: flex; align-items: center; padding: 0 0 0 20px; font-family: var(--font-mono); font-size: 14px; color: var(--slate); } .tk-input { flex: 1; border: none; outline: none; padding: 14px 8px; font-size: 15px; font-family: var(--font-mono); background: transparent; min-width: 0; } .tk-input-row .tk-btn { border-radius: 0; } @media (max-width: 560px) { .tk-input-row { flex-direction: column; border-radius: 20px; } .tk-input-prefix { display: none; } .tk-input { padding: 14px 20px; } } /* ---------- reveal animation (fade + lift, once) ---------- */ .tk-reveal { opacity: 0; transform: translateY(16px); transition: opacity 640ms cubic-bezier(.16,.8,.32,1), transform 640ms cubic-bezier(.16,.8,.32,1); } .tk-reveal-in { opacity: 1; transform: translateY(0); } /* ---------- scroll progress ---------- */ .tk-scroll-track { height: 2px; background: transparent; } .tk-scroll-fill { height: 100%; background: var(--amber); width: 0%; transition: width 80ms linear; } /* ---------- hero ---------- */ .tk-hero { width: 100%; margin: 0; min-height: 95vh; display: flex; align-items: center; } .tk-hero > .tk-section-inner { width: 100%; max-width: 1440px; position: relative; z-index: 1; } .tk-hero { background: radial-gradient(1150px 760px at 90% -14%, rgba(155,107,255,0.42), transparent 52%), radial-gradient(820px 660px at -6% 108%, rgba(217,38,239,0.22), transparent 50%), radial-gradient(700px 560px at 46% 30%, rgba(217,70,239,0.16), transparent 55%), var(--paper); padding: 72px 0 100px; overflow: hidden; position: relative; } .tk-hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 680px; height: 680px; right: -220px; top: -280px; background: radial-gradient(circle, rgba(155,107,255,0.36), transparent 68%); filter: blur(20px); animation: tk-orb-float 12s ease-in-out infinite; } .tk-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.035; mix-blend-mode: multiply; } .tk-hero-bg-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/hero-maze-bg.webp"); background-size: cover; background-position: 62% 42%; opacity: 0.24; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(68% 64% at 62% 42%, rgba(0,0,0,0.95), transparent 88%); mask-image: radial-gradient(68% 64% at 62% 42%, rgba(0,0,0,0.95), transparent 88%); } @media (max-width: 1020px) { .tk-hero-bg-art { opacity: 0.16; } } /* ---------- full-viewport hero variant: static (no animated orb, no rotating panel), single centered column, white text on a dark ground reused from the closing section's palette ---------- */ .tk-hero-full { min-height: 100vh; padding: 120px 0; align-items: center; justify-content: center; background: radial-gradient(1100px 620px at 16% -12%, rgba(155,107,255,0.30), transparent 58%), radial-gradient(900px 620px at 90% 108%, rgba(217,38,239,0.22), transparent 55%), linear-gradient(180deg, #0B0821 0%, var(--dusk) 32%, var(--dusk-2) 100%); } .tk-hero-full::before, .tk-hero-full::after { content: none; } .tk-hero-grid-full { display: flex; justify-content: center; } .tk-hero-copy-full { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .tk-hero-full .tk-h1 { color: #fff; max-width: 820px; } .tk-hero-full .tk-hero-sub { color: rgba(250,249,245,0.76); margin-left: auto; margin-right: auto; } .tk-hero-full .tk-hero-secondary { color: rgba(250,249,245,0.68); } .tk-hero-full .tk-hero-secondary:hover { color: #fff; border-color: rgba(255,255,255,0.3); } @media (max-width: 640px) { .tk-hero-full { padding: 100px 0; } } /* ---------- centered two-line statement, full width, above the copy/animation row -- exactly two lines by design: each half of the sentence is its own block-level span rather than one wrapped paragraph, so the break point is deliberate, not whatever the browser's word-wrap happens to land on. ---------- */ .tk-hero-h1-centered { text-align: center; max-width: 1080px; margin: 0 auto 44px; font-size: clamp(34px, 4.6vw, 58px); /* the base .tk-h1 line-height (1.04) is tuned for a single line or a naturally-wrapped paragraph -- tight enough here, with two deliberate stacked lines, that descenders on the first line (the "g" in "Agentic") get clipped by the second line right underneath it. A taller line-height on this specific centered variant gives them room without affecting tk-h1 anywhere else. */ line-height: 1.22; } .tk-hero-h1-centered .tk-h1-line { display: block; } .tk-hero-grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 640px); gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; } .tk-hero-copy { max-width: 500px; } .tk-hero-copy .tk-hero-sub { max-width: 480px; margin: 0 0 32px; } .tk-hero-copy .tk-input-row { margin-left: 0; margin-right: 0; } .tk-h1-line { display: inline-block; } .tk-hero-anim-wrap { position: relative; width: 100%; } /* premium ambient container the journey visualization sits inside */ .tk-hero-journey { position: relative; height: 496px; border-radius: 32px; padding: 40px; background: radial-gradient(130% 140% at 10% -6%, rgba(124,92,252,0.20) 0%, rgba(124,92,252,0) 55%), radial-gradient(130% 140% at 100% 104%, rgba(255,122,69,0.18) 0%, rgba(255,122,69,0) 55%), linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 60px 120px -40px rgba(21,15,59,0.30), inset 0 1px 0 rgba(255,255,255,0.85); backdrop-filter: blur(8px); overflow: hidden; transition: box-shadow 320ms ease, transform 320ms ease; } .tk-hero-journey:hover { box-shadow: 0 70px 130px -40px rgba(21,15,59,0.34), inset 0 1px 0 rgba(255,255,255,0.85); } .tk-hero-journey::before { content: ""; position: absolute; inset: -50%; background: radial-gradient(circle at 22% 12%, rgba(124,92,252,0.24), transparent 60%), radial-gradient(circle at 88% 92%, rgba(255,122,69,0.20), transparent 60%); filter: blur(64px); pointer-events: none; } @media (max-width: 640px) { .tk-hero-journey { padding: 22px; border-radius: 22px; height: auto; } } .tk-hero-secondary { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--slate); border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .tk-hero-secondary:hover { color: var(--ink); border-color: var(--line); } @media (max-width: 1020px) { .tk-hero-grid { grid-template-columns: 1fr; gap: 64px; } .tk-hero-copy { max-width: none; } .tk-hero-anim-wrap { order: -1; max-width: 560px; margin: 0 auto; } } @media (max-width: 640px) { .tk-hero { padding: 48px 0 56px; } .tk-hero-h1-centered { margin-bottom: 26px; } } /* ---------- hero journey visualization (Website -> Understanding -> Market -> Strategy -> Agents) ---------- */ .tk-journey-browser { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.7); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 22px; } .tk-journey-browser-dots { display: flex; gap: 5px; } .tk-journey-browser-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .tk-journey-browser-url { font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-deep); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tk-journey-browser-status { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); flex-shrink: 0; } .tk-journey-browser-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px 2px rgba(124,92,252,0.5); animation: tk-journey-pulse 1.4s ease-in-out infinite; } @keyframes tk-journey-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .tk-journey-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,220px) 1fr; gap: 28px; } .tk-journey-rail { display: flex; flex-direction: column; } .tk-journey-step { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 11px 8px; border-radius: 14px; cursor: pointer; text-align: left; background: none; border: none; width: 100%; transition: background 200ms ease; } .tk-journey-step:hover { background: rgba(124,92,252,0.06); } .tk-journey-step-track { position: absolute; left: 27px; top: 46px; bottom: -3px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .tk-journey-step:last-child .tk-journey-step-track { display: none; } .tk-journey-step-track-fill { position: absolute; inset: 0; background: var(--grad-warm); transform: scaleY(0); transform-origin: top; transition: transform 480ms cubic-bezier(.16,.8,.32,1); } .tk-journey-step-done .tk-journey-step-track-fill, .tk-journey-step-active .tk-journey-step-track-fill { transform: scaleY(1); } .tk-journey-step-icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); color: var(--slate); transition: background 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease; } .tk-journey-step-active .tk-journey-step-icon { background: var(--grad-warm); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -6px rgba(124,92,252,0.55); transform: scale(1.06); } .tk-journey-step-done .tk-journey-step-icon { background: var(--paper-alt); color: var(--violet); border-color: var(--violet); } .tk-journey-step-copy { padding-top: 2px; } .tk-journey-step-label { display: block; font-size: 14px; font-weight: 600; color: var(--slate); margin-bottom: 2px; transition: color 220ms ease; letter-spacing: -0.005em; } .tk-journey-step-active .tk-journey-step-label { color: var(--navy-deep); } .tk-journey-step-caption { display: block; font-size: 12.5px; color: var(--slate); opacity: 0; height: 0; overflow: hidden; transition: opacity 220ms ease, height 220ms ease, margin-top 220ms ease; max-width: 190px; line-height: 17px; } .tk-journey-step-active .tk-journey-step-caption { opacity: 0.85; height: 40px; margin-top: 2px; } .tk-journey-panel { position: relative; z-index: 1; height: 288px; align-self: center; overflow: hidden; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); } .tk-journey-panel > div { height: 100%; } .tk-journey-panel-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); margin: 0 0 14px; } .tk-journey-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .tk-journey-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--navy-deep); } .tk-journey-chip-key { color: var(--slate); } .tk-journey-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .tk-journey-bars { display: flex; flex-direction: column; gap: 12px; } .tk-journey-bar-row { display: grid; grid-template-columns: 118px 1fr 40px; align-items: center; gap: 10px; } .tk-journey-bar-label { font-size: 12.5px; color: var(--navy-deep); font-weight: 500; } .tk-journey-bar-track { height: 8px; border-radius: 4px; background: var(--paper-alt); overflow: hidden; } .tk-journey-bar-fill { height: 100%; border-radius: 4px; background: var(--grad-warm); width: 0%; transition: width 700ms cubic-bezier(.16,.8,.32,1); } .tk-journey-bar-pct { font-family: var(--font-mono); font-size: 12px; color: var(--slate); text-align: right; } .tk-journey-checklist { display: flex; flex-direction: column; gap: 10px; } .tk-journey-check-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--slate); } .tk-journey-check-mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--paper-alt); border: 1px solid var(--line); color: transparent; transition: all 260ms ease; } .tk-journey-check-row-done .tk-journey-check-mark { background: var(--grad-warm); border-color: transparent; color: #fff; } .tk-journey-check-row-done { color: var(--navy-deep); } .tk-journey-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tk-journey-agent { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); opacity: 0.35; transform: scale(0.94); transition: opacity 280ms ease, transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; } .tk-journey-agent-active { opacity: 1; transform: scale(1); border-color: transparent; box-shadow: 0 14px 26px -10px rgba(124,92,252,0.4); background: linear-gradient(160deg, rgba(124,92,252,0.09), rgba(255,122,69,0.09)), #fff; } .tk-journey-agent-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper-alt); color: var(--violet); } .tk-journey-agent-label { font-size: 11.5px; font-weight: 600; color: var(--navy-deep); } @media (max-width: 720px) { .tk-journey-body { grid-template-columns: 1fr; } .tk-journey-rail { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .tk-journey-step { flex-direction: column; align-items: center; text-align: center; min-width: 84px; } .tk-journey-step-track { display: none; } .tk-journey-step-caption { display: none; } .tk-journey-agents { grid-template-columns: repeat(3, 1fr); } /* restated explicitly at this breakpoint -- narrower widths wrap the panel's own content (chips, bar labels, agent grid) onto more lines than at desktop, so the fixed height needs to be tall enough here specifically, not just inherited from the desktop rule */ .tk-journey-panel { height: 300px; } } /* ---------- hero flagship animation ---------- */ .tk-anim-root { position: relative; width: 100%; transition: opacity 80ms linear; opacity: calc(1 - (var(--tk-anim-exit, 0) * 0.55)); } .tk-anim-inner { position: relative; z-index: 1; } .tk-anim-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 34px rgba(21,15,59,0.12)); } .tk-anim-frame { fill: url(#tkFrameGradient); stroke: var(--line); stroke-width: 1.5; } .tk-anim-dot { fill: var(--line); } .tk-anim-line { stroke: var(--line); stroke-width: 1; } .tk-anim-fill { fill: rgba(23,25,27,0.16); } .tk-anim-fill-strong { fill: var(--navy-deep); opacity: 0.85; } .tk-anim-outline { fill: none; stroke: var(--navy-deep); stroke-width: 1.5; opacity: 0.5; } .tk-anim-card { fill: #fff; stroke: var(--line); stroke-width: 1; } .tk-anim-beam { fill: url(#tkBeamGradient); } .tk-anim-chip-bg { fill: var(--navy-deep); } .tk-anim-chip-src { fill: var(--paper); font-family: var(--font-mono); font-size: 10.5px; } .tk-anim-chip-field { fill: var(--amber); font-family: var(--font-mono); font-size: 9px; } .tk-anim-edge { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0.6; } .tk-anim-node { fill: var(--amber); } .tk-anim-node-core { fill: var(--navy-deep); } .tk-anim-profile-label { fill: var(--navy-deep); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .tk-anim-conf-label { fill: var(--slate); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; } .tk-anim-conf-value { fill: var(--navy-deep); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .tk-anim-bar-track { fill: rgba(23,25,27,0.08); } .tk-anim-bar-fill { fill: url(#tkBarGradient); transform-box: fill-box; transform-origin: left center; } .tk-anim-gate-line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 4; } .tk-anim-gate-lock-bg { fill: var(--paper); stroke: var(--navy-deep); stroke-width: 1.5; } .tk-anim-gate-lock-body { fill: var(--navy-deep); } .tk-anim-gate-lock-shackle { fill: none; stroke: var(--navy-deep); stroke-width: 2; } .tk-anim-ripple { fill: none; stroke: var(--amber); stroke-width: 1.5; } .tk-anim-branch-path { fill: none; stroke: var(--navy-deep); stroke-width: 1.5; opacity: 0.7; } .tk-anim-branch-node { fill: var(--amber); } .tk-anim-branch-label { fill: var(--slate); font-family: var(--font-mono); font-size: 9px; } .tk-anim-build-frame { fill: #fff; stroke: var(--line); stroke-width: 1.5; } .tk-anim-build-nav { fill: rgba(23,25,27,0.14); transform-box: fill-box; transform-origin: left; } .tk-anim-build-headline { fill: var(--navy-deep); transform-box: fill-box; transform-origin: left; } .tk-anim-build-card { fill: var(--paper-alt); stroke: var(--line); stroke-width: 1; } .tk-anim-build-button { fill: var(--amber); transform-box: fill-box; transform-origin: center; } .tk-anim-pulse-halo-outer { fill: rgba(124,92,252,0.14); } .tk-anim-pulse-halo { fill: rgba(217,70,239,0.22); } .tk-anim-pulse-core { fill: var(--amber); } .tk-anim-approve { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: var(--navy-deep); color: var(--paper); border: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 24px rgba(16,27,51,0.22); } .tk-anim-approve:hover { background: var(--navy); } /* reduced motion: show the resolved end-state, skip the sequence entirely */ .tk-anim-reduced .tk-anim-wireframe { opacity: 0.12; } .tk-anim-reduced .tk-anim-chip { display: none; } .tk-anim-reduced .tk-anim-pulse, .tk-anim-reduced .tk-anim-beam { display: none; } .tk-anim-reduced .tk-anim-node, .tk-anim-reduced .tk-anim-profile-label { opacity: 1; } .tk-anim-reduced .tk-anim-edge { stroke-dashoffset: 0 !important; } .tk-anim-reduced .tk-anim-bar-fill { transform: scaleX(0.92); } .tk-anim-reduced [data-gate-hidden], .tk-anim-reduced .tk-anim-gate-lock-bg, .tk-anim-reduced .tk-anim-gate-line { opacity: 0.2; } .tk-anim-reduced [data-branch-dim] { opacity: 1 !important; } .tk-anim-reduced .tk-anim-branch-path { stroke-dashoffset: 0 !important; } .tk-anim-reduced .tk-anim-branch-node, .tk-anim-reduced .tk-anim-build-frame, .tk-anim-reduced .tk-anim-build-card, .tk-anim-reduced .tk-anim-build-button { opacity: 1; } .tk-anim-reduced .tk-anim-build-nav, .tk-anim-reduced .tk-anim-build-headline { transform: scaleX(1); } /* ---------- evidence tag ---------- */ .tk-evidence-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--amber); background: var(--amber-soft); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; display: inline-block; box-shadow: 0 0 0 1px rgba(217,70,239,0.12); } .tk-artifact-tag { margin-bottom: 16px; } button.tk-artifact:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(23,25,27,0.08); border-color: #cfc9ba; } /* ---------- artifact card shell ---------- */ .tk-artifact { background: #fff; border: 1px solid rgba(23,25,27,0.07); border-radius: 18px; padding: 26px; box-shadow: 0 1px 3px rgba(23,25,27,0.04); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .tk-artifact:hover { border-color: rgba(124,92,252,0.35); box-shadow: 0 24px 48px -20px rgba(21,15,59,0.22); } /* ---------- company intelligence — overlapping, not side-by-side ---------- */ .tk-ci-stage { position: relative; padding: 8px 0 76px; max-width: 880px; } /* notepad-style ruled lines as the cards' own background (not the page behind them) -- kept faint enough to read as paper texture, not something competing with the text sitting on it. */ /* dot-grid, not ruled lines -- lines have a fixed repeat interval that can never line up with these cards' own content dividers (row heights vary with how much each field wraps), so the two sets of horizontal rules kept crossing each other and reading as visual noise. A dot pattern has no direction to clash with, so it stays clean under any content. */ .tk-ci-stage .tk-artifact { background-color: #fff; background-image: radial-gradient(circle, rgba(23,25,27,0.13) 1px, transparent 1px); background-size: 20px 20px; } .tk-ci-crawl { position: relative; z-index: 1; max-width: 430px; transform: rotate(-1.4deg); opacity: 0; transition: opacity 560ms ease, transform 560ms ease; } .tk-ci-profile { position: relative; z-index: 2; max-width: 460px; margin: -38px 0 0 auto; box-shadow: 0 26px 50px rgba(16,27,51,0.16); opacity: 0; transform: translateY(18px); transition: opacity 620ms ease 160ms, transform 620ms ease 160ms, box-shadow 260ms ease; } .tk-ci-stage-in .tk-ci-crawl { opacity: 1; } .tk-ci-stage-in .tk-ci-profile { opacity: 1; transform: translateY(0); } .tk-ci-callout { position: absolute; left: 6%; bottom: 0; z-index: 3; max-width: 260px; background: var(--navy-deep); color: var(--paper); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; padding: 12px 16px; border-radius: 12px 12px 12px 3px; box-shadow: 0 14px 28px rgba(16,27,51,0.22); opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; } .tk-ci-stage-in .tk-ci-callout { opacity: 1; transform: translateY(0); } @media (max-width: 900px) { .tk-ci-stage { padding-bottom: 24px; } .tk-ci-crawl { transform: none; max-width: none; } .tk-ci-profile { margin: 18px 0 0; max-width: none; } .tk-ci-callout { position: static; max-width: none; margin-top: 18px; } } .tk-crawl-lines { display: flex; flex-direction: column; gap: 10px; } .tk-crawl-line { font-family: var(--font-mono); font-size: 12.5px; color: var(--slate); margin: 0; opacity: 0; transform: translateX(-6px); transition: opacity 480ms ease, transform 480ms ease; } .tk-crawl-line-in { opacity: 1; transform: translateX(0); } .tk-fields { margin: 0 0 14px; } .tk-field { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms ease; } .tk-field:last-child { border-bottom: none; } .tk-field-in { opacity: 1; transform: translateY(0); } .tk-field dt { font-size: 11.5px; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .tk-field dd { font-size: 13.5px; margin: 0; color: var(--ink); } /* no border-top here on purpose -- the field list above already ends cleanly (its own last row has no border-bottom), so a second rule line here plus this block's own padding-top was reading as one more orphaned, oddly-spaced divider rather than a clean section break. The confidence number and bar are visually distinct enough on their own without a rule to separate them. */ .tk-confidence { padding-top: 4px; opacity: 0; transition: opacity 500ms ease; } .tk-confidence-in { opacity: 1; } .tk-confidence-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--slate); margin-bottom: 8px; } .tk-confidence-number { font-size: 15px; color: var(--navy-deep); font-weight: 600; } .tk-confidence-bar { height: 6px; background: var(--paper-alt); border-radius: 3px; overflow: hidden; } .tk-confidence-fill { height: 100%; background: var(--amber); transition: width 1.4s cubic-bezier(.2,.7,.3,1); } .tk-confidence-note { font-size: 12.5px; color: var(--slate); margin: 10px 0 0; } /* ---------- approval gate: click-to-unlock, circular reveal ---------- */ .tk-gate { display: flex; flex-direction: column; align-items: center; } .tk-gate-card { width: 100%; max-width: 560px; background: #fff; border: 1.5px solid rgba(23,25,27,0.08); border-radius: 22px; padding: 30px; } .tk-gate-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy-deep); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; } .tk-gate-agent-tag { margin-bottom: 14px; } .tk-gate-summary { font-size: 15px; margin: 0 0 26px; color: var(--ink); } /* the lock itself -- the one thing on this card the visitor is meant to act on. Sized and glowing enough that it reads as the obvious next move, not just another button among several. */ .tk-gate-lock-wrap { display: flex; flex-direction: column; align-items: center; } .tk-gate-lock-btn { position: relative; width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--grad-pop); border: none; color: #fff; cursor: pointer; box-shadow: 0 16px 36px -12px rgba(124,58,237,0.55), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 260ms ease; } .tk-gate-lock-btn:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 20px 44px -10px rgba(124,58,237,0.65), inset 0 1px 0 rgba(255,255,255,0.3); } .tk-gate-lock-btn:disabled { cursor: default; } .tk-gate-lock-btn-open { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(124,58,237,0); } .tk-gate-lock-glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(155,107,255,0.5), transparent 70%); opacity: 0.7; filter: blur(6px); animation: tk-gate-lock-pulse 2.4s ease-in-out infinite; } .tk-gate-lock-btn-open .tk-gate-lock-glow { animation: none; opacity: 0; transition: opacity 400ms ease; } @keyframes tk-gate-lock-pulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.18); opacity: 0.85; } } .tk-gate-lock-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 320ms ease, transform 420ms cubic-bezier(.34,1.56,.64,1); } .tk-gate-lock-icon-open { opacity: 0; transform: rotate(-24deg) scale(0.6); } .tk-gate-lock-btn-open .tk-gate-lock-icon-closed { opacity: 0; transform: rotate(24deg) scale(0.6); } .tk-gate-lock-btn-open .tk-gate-lock-icon-open { opacity: 1; transform: rotate(0deg) scale(1); } .tk-gate-lock-caption { margin-top: 16px; font-size: 13.5px; color: var(--slate); text-align: center; } /* the overlap trick: both layers occupy the exact same grid cell, so the section is always as tall as whichever one needs more room -- no layout shift when the reveal happens, since the space was already reserved for both states from the very first paint. */ .tk-gate-scene { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 100px 0; overflow: hidden; background: var(--paper); transition: background 1.5s ease; } /* the locked (default) state was plain flat paper -- no texture at all -- since the maze pattern only ever got added to the unlocked gradient. A ::before overlay keeps it independent of the background transition above, so it's there in both states and just fades out as the section transitions to its dark unlocked look (which has its own texture already, via the gradients). */ .tk-gate-scene::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/maze-flow-bg.webp"); background-repeat: repeat-y; background-position: top center; background-size: 100% auto; opacity: 0.16; mix-blend-mode: multiply; transition: opacity 1.2s ease; } .tk-gate-scene-unlocked::before { opacity: 0; } .tk-gate-scene-unlocked { background: radial-gradient(1100px 600px at 15% -10%, rgba(155,107,255,0.28), transparent 60%), radial-gradient(900px 520px at 100% 110%, rgba(217,70,239,0.16), transparent 55%), linear-gradient(165deg, #241056 0%, #170B3F 70%); } .tk-gate-scene-grid { display: grid; grid-template-columns: 1fr; position: relative; z-index: 1; } .tk-gate-layer-lock, .tk-gate-layer-reveal { grid-area: 1 / 1; width: 100%; align-self: center; } .tk-gate-layer-lock { transition: opacity 1.3s ease 150ms; } .tk-gate-scene-unlocked .tk-gate-layer-lock { opacity: 0; pointer-events: none; } .tk-gate-layer-reveal { position: relative; pointer-events: none; /* clip-path is set inline (needs the actual click coordinates), this just gives it a smooth, premium easing curve to animate along -- slow start, confident finish, like a vault door swinging open */ transition: clip-path 1.5s cubic-bezier(.65,0,.35,1); will-change: clip-path; } .tk-gate-scene-unlocked .tk-gate-layer-reveal { pointer-events: auto; } /* a brief bloom of light at the exact point the lock was clicked, burning off as the circle finishes expanding past it */ .tk-gate-reveal-glow { position: absolute; z-index: 0; pointer-events: none; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(155,107,255,0.4) 45%, transparent 75%); opacity: 0; transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.65,0,.35,1); } .tk-gate-scene-unlocked .tk-gate-reveal-glow { opacity: 0; transform: scale(22); animation: tk-gate-reveal-flash 1.5s cubic-bezier(.65,0,.35,1); } @keyframes tk-gate-reveal-flash { 0% { opacity: 0.9; transform: scale(0.4); } 35% { opacity: 0.7; transform: scale(6); } 100% { opacity: 0; transform: scale(22); } } .tk-gate-layer-reveal > *:not(.tk-gate-reveal-glow) { position: relative; z-index: 1; } .tk-gate-layer-reveal .tk-h2, .tk-gate-layer-reveal .tk-lede { color: #fff; } .tk-gate-layer-reveal .tk-lede { opacity: 0.72; margin-bottom: 24px; } .tk-scene-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 999px; padding: 6px 16px; font-size: 13px; margin-bottom: 22px; } .tk-scene-pill-check { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; font-size: 12px; } @media (prefers-reduced-motion: reduce) { .tk-gate-layer-reveal { transition: opacity 400ms ease; clip-path: none !important; opacity: 0; } .tk-gate-scene-unlocked .tk-gate-layer-reveal { opacity: 1; } .tk-gate-scene-unlocked .tk-gate-layer-lock { display: none; } .tk-gate-reveal-glow, .tk-gate-lock-glow { display: none; } } @media (max-width: 640px) { .tk-gate-scene { padding: 72px 0; } } .tk-pipeline-outputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; } /* six agent cards, evenly structured: a clean 3-column x 2-row grid (was an uneven 3-then-2-then-orphan layout with hand-tuned column spans left over from when there were only 5 cards -- with a real 6th card added, those spans produced sliver-width columns that forced the agent-name badge to overflow past its own card into the next one). */ .tk-pipeline-outputs-agents { grid-template-columns: repeat(3, 1fr); } .tk-output-card { position: relative; background: #fff; border: 1px solid rgba(23,25,27,0.07); border-radius: 18px; padding: 22px; transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, opacity 200ms linear; } /* glow-on-hover: a soft ambient glow behind the card plus a lit border -- kept low-opacity so it lifts the card without washing out its text */ .tk-output-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 19px; background: linear-gradient(135deg, var(--violet), var(--amber)); opacity: 0; filter: blur(16px); transition: opacity 280ms ease; } .tk-output-card:hover { transform: translateY(-4px); border-color: rgba(124,92,252,0.4); box-shadow: 0 14px 32px -14px rgba(124,92,252,0.22), 0 0 0 1px rgba(124,92,252,0.1); } .tk-output-card:hover::before { opacity: 0.18; } .tk-output-n { font-size: 12px; color: var(--amber); display: block; } .tk-output-agent-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .tk-output-agent { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; background: rgba(155,107,255,0.16); color: #fff !important; opacity: 1 !important; border: 1px solid rgba(155,107,255,0.4); max-width: 100%; white-space: normal; line-height: 1.4; } .tk-output-card:not(.tk-output-card-dark) .tk-output-agent { background: var(--violet-soft); border-color: rgba(124,92,252,0.3); color: var(--violet) !important; } .tk-output-card h3 { font-size: 16px; margin: 0 0 8px; color: var(--navy-deep); font-family: var(--font-display); font-weight: 600; } .tk-output-card p { font-size: 13.5px; color: var(--slate); margin: 0 0 10px; } .tk-output-cta { font-size: 12px; color: var(--slate); opacity: 0.75; } .tk-output-card-dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); backdrop-filter: blur(2px); } .tk-output-card-dark h3 { color: #fff; } .tk-output-card-dark p { color: rgba(255,255,255,0.7); } .tk-output-card-dark .tk-output-cta { color: rgba(255,255,255,0.55); opacity: 1; } .tk-output-card-dark:hover { border-color: rgba(155,107,255,0.5); box-shadow: 0 14px 32px -12px rgba(155,107,255,0.28), 0 0 0 1px rgba(155,107,255,0.16); } .tk-output-card-dark:hover::before { opacity: 0.24; } @media (max-width: 900px) { .tk-pipeline-outputs { grid-template-columns: repeat(2, 1fr); } .tk-pipeline-outputs-agents { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tk-pipeline-outputs { grid-template-columns: 1fr; } .tk-pipeline-outputs-agents { grid-template-columns: 1fr; } } .tk-pipeline-outputs-agents { gap: 12px; } .tk-pipeline-outputs-agents .tk-output-card { padding: 18px 20px; } .tk-pipeline-outputs-agents .tk-output-agent-row { margin-bottom: 8px; } .tk-pipeline-outputs-agents .tk-output-card h3 { font-size: 15px; margin-bottom: 6px; } .tk-pipeline-outputs-agents .tk-output-card p { font-size: 12.5px; line-height: 1.45; margin-bottom: 6px; } /* ---------- market sizing: nested TAM / SAM / SOM circles ---------- */ .tk-market { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; opacity: 0; transition: opacity 500ms ease; } .tk-market-in { opacity: 1; } .tk-market-svg { width: 100%; height: auto; } .tk-market-ring { fill: none; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.86); transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1); } .tk-market-in .tk-market-ring { opacity: 1; transform: scale(1); } .tk-market-ring-tam { stroke: rgba(23,25,27,0.32); stroke-width: 1.25; transition-delay: 460ms; } .tk-market-ring-sam { stroke: var(--navy-deep); stroke-width: 1.5; opacity: 0; transition-delay: 230ms; } .tk-market-in .tk-market-ring-sam { opacity: 0.8; } .tk-market-ring-som { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.75; transition-delay: 0ms; } .tk-market-legend { display: flex; flex-direction: column; gap: 30px; } .tk-market-row { display: flex; gap: 14px; opacity: 0; transform: translateX(10px); transition: opacity 520ms ease, transform 520ms ease; } .tk-market-in .tk-market-row { opacity: 1; transform: translateX(0); } .tk-market-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .tk-market-dot-tam { background: rgba(23,25,27,0.32); } .tk-market-dot-sam { background: var(--navy-deep); } .tk-market-dot-som { background: var(--amber); } .tk-market-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); margin: 0 0 4px; } .tk-market-value { font-size: 27px; color: var(--navy-deep); margin: 0 0 6px; font-weight: 500; } .tk-market-note { font-size: 13.5px; color: var(--slate); margin: 0; max-width: 360px; } @media (max-width: 800px) { .tk-market { grid-template-columns: 1fr; } .tk-market-svg { max-width: 260px; margin: 0 auto; } } /* ---------- lead scoring ---------- */ .tk-scoring { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; opacity: 0; transition: opacity 500ms ease; } .tk-scoring-in { opacity: 1; } .tk-weights { display: flex; flex-direction: column; gap: 20px; } .tk-weight-row { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 12px; } .tk-weight-label { font-size: 13.5px; color: var(--ink); } .tk-weight-track { height: 10px; background: var(--paper-alt); border-radius: 3px; overflow: hidden; } .tk-weight-fill { height: 100%; background: var(--navy); border-radius: 3px; transition: width 900ms cubic-bezier(.2,.7,.3,1); } .tk-weight-pct { font-size: 12.5px; color: var(--slate); text-align: right; } .tk-fit-stack { position: relative; } .tk-fit-stack::before, .tk-fit-stack::after { content: ""; position: absolute; inset: 0; border-radius: 18px; border: 1px solid rgba(23,25,27,0.06); background: #fff; } .tk-fit-stack::before { transform: translate(10px, 10px); z-index: 0; opacity: 0.7; } .tk-fit-stack::after { transform: translate(20px, 20px); z-index: -1; opacity: 0.4; } .tk-fit-stack .tk-fit-card { position: relative; z-index: 1; } .tk-fit-stack-tag { display: inline-block; margin-top: 18px; font-size: 12px; color: var(--slate); font-family: var(--font-mono); } .tk-fit-card { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; } .tk-fit-name { font-size: 14.5px; color: var(--slate); margin: 0 0 10px; } .tk-fit-score { font-family: var(--font-mono); font-size: 34px; color: var(--navy-deep); font-weight: 500; margin-bottom: 14px; } .tk-fit-max { font-size: 15px; color: var(--green); font-family: var(--font-body); font-weight: 600; margin-left: 4px; } .tk-fit-breakdown { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 12px; } .tk-fit-breakdown p { font-size: 13px; color: var(--slate); margin: 0 0 8px; } .tk-fit-breakdown strong { color: var(--ink); } .tk-fit-hint { font-size: 12.5px; color: var(--amber); font-weight: 600; } @media (max-width: 800px) { .tk-scoring { grid-template-columns: 1fr; } } /* ---------- content proof ---------- */ .tk-content-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; opacity: 0; transition: opacity 500ms ease; } .tk-content-grid-in { opacity: 1; } .tk-score-number { font-family: var(--font-mono); font-size: 44px; color: var(--navy-deep); margin: 6px 0 18px; } .tk-score-max { font-size: 18px; color: var(--slate); } .tk-score-track { position: relative; height: 8px; background: var(--paper-alt); border-radius: 3px; margin-bottom: 28px; } .tk-score-fill { height: 100%; background: var(--amber); border-radius: 3px; transition: width 500ms ease; } .tk-score-target { position: absolute; top: -22px; transform: translateX(-50%); font-size: 11px; color: var(--slate); font-family: var(--font-mono); } .tk-score-target::after { content: ""; position: absolute; top: 20px; left: 50%; width: 1px; height: 16px; background: var(--slate); } .tk-score-status { font-size: 13.5px; color: var(--slate); margin: 0; } .tk-score-pass { color: var(--green); font-weight: 600; } .tk-chip-card { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; } .tk-chip-keyword { font-size: 16px; color: var(--navy-deep); margin: 4px 0 16px; } .tk-chip-hint { font-size: 12.5px; color: var(--amber); font-weight: 600; } .tk-chip-data { display: flex; flex-direction: column; gap: 10px; } .tk-chip-data > div { display: flex; justify-content: space-between; font-size: 13.5px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .tk-chip-data span { color: var(--slate); } @media (max-width: 800px) { .tk-content-grid { grid-template-columns: 1fr; } } /* ---------- aria ---------- */ .tk-aria { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; } .tk-aria-chat { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; } .tk-chat-bubble { background: var(--navy); color: var(--paper); font-size: 14px; padding: 14px 16px; border-radius: 10px 10px 10px 2px; font-style: italic; } .tk-aria-run { align-self: flex-start; } .tk-report { display: flex; flex-direction: column; border: 1px solid rgba(23,25,27,0.07); border-radius: 18px; overflow: hidden; background: #fff; } .tk-report-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; transition: background 400ms ease, opacity 400ms ease; } .tk-report-row:last-child { border-bottom: none; } .tk-report-row-dim { opacity: 0.4; } .tk-report-row-active { background: var(--amber-soft); font-weight: 600; } .tk-report-updated { font-size: 11.5px; color: var(--amber); } @media (max-width: 760px) { .tk-aria { grid-template-columns: 1fr; } .tk-aria-chat { position: static; flex-direction: row; align-items: center; } } /* ---------- website output ---------- */ .tk-browser { border: 1px solid rgba(23,25,27,0.08); border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 24px; } .tk-browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--paper-alt); border-bottom: 1px solid rgba(23,25,27,0.06); } .tk-browser-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .tk-browser-url { margin-left: 8px; font-size: 12px; color: var(--slate); } .tk-browser-body { padding: 32px; } .tk-browser-hero { margin-bottom: 24px; } .tk-browser-line { height: 14px; background: var(--paper-alt); border-radius: 6px; margin-bottom: 10px; } .tk-browser-line-lg { width: 62%; height: 22px; } .tk-browser-line-md { width: 40%; } .tk-browser-cta { width: 130px; height: 34px; background: var(--navy); border-radius: 999px; margin-top: 16px; } .tk-browser-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .tk-browser-card { height: 90px; background: var(--paper-alt); border-radius: 12px; } @media (max-width: 480px) { .tk-browser-body { padding: 22px; } .tk-browser-cards { grid-template-columns: 1fr; gap: 10px; } .tk-browser-card { height: 64px; } } .tk-human-moment { background: #fff; border: 1px solid rgba(23,25,27,0.07); border-left: 3px solid var(--amber); padding: 18px 22px; border-radius: 16px; } .tk-human-moment p { margin: 0; font-size: 14.5px; color: var(--ink); } /* ---------- objections — a typeset list, not a card grid ---------- */ .tk-compare-statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.35; color: var(--navy-deep); max-width: 720px; margin: 0 0 20px; } .tk-compare-sub { margin-bottom: 56px; } .tk-objections-list { border-bottom: 1px solid var(--line); } .tk-objection-row { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 30px 0; border-top: 1px solid var(--line); } .tk-objection-n { padding-top: 5px; font-size: 12.5px; color: var(--amber); } .tk-objection-body { display: grid; grid-template-columns: 260px 1fr; gap: 32px; } .tk-objection-body h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-objection-body p { font-size: 14.5px; color: var(--slate); margin: 0; max-width: 540px; } @media (max-width: 760px) { .tk-objection-body { grid-template-columns: 1fr; gap: 8px; } } /* ---------- final cta ---------- */ .tk-cta-section { padding: 108px 0; background: var(--navy-deep); border-bottom: none; } .tk-cta-inner { max-width: 620px; text-align: left; } .tk-cta-section .tk-h2 { color: var(--paper); } .tk-cta-section .tk-lede { color: rgba(250,249,245,0.72); } .tk-cta-section .tk-input-row { background: #fff; border-color: transparent; } .tk-cta-section .tk-btn-primary { background: var(--amber); color: var(--navy-deep); } .tk-cta-section .tk-btn-primary:hover { background: #b026c7; } .tk-cta-alt { font-size: 13px; color: var(--slate); margin: 14px 0 0; } .tk-cta-section .tk-cta-alt { color: rgba(250,249,245,0.55); } /* ---------- footer ---------- */ .tk-footer { padding: 40px 0 48px; } .tk-footer-inner { display: flex; flex-direction: column; gap: 10px; } .tk-footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .tk-word-footer { font-size: 17px; } .tk-footer-links { display: flex; gap: 22px; flex-wrap: wrap; } .tk-footer-links a { font-size: 13.5px; color: var(--slate); } .tk-footer-links a:hover { color: var(--ink); } .tk-footer-note { font-size: 13.5px; color: var(--slate); margin: 4px 0 0; } .tk-footer-legal { font-size: 12px; color: var(--slate); margin: 18px 0 0; } /* ============================================================ HOMEPAGE-ONLY SECTIONS — the trailer, not the movie ============================================================ */ /* ---------- who it's for: very small, very quiet ---------- */ .tk-forwho { padding: 84px 0; } .tk-forwho-inner { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; justify-content: center; text-align: center; } .tk-forwho-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--slate); text-transform: uppercase; } .tk-forwho-words { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .tk-forwho-word { font-family: var(--font-display); font-size: 18px; color: var(--navy-deep); } .tk-forwho-sep { color: var(--line); } /* ---------- what do you want to build: big clean box, Clay-style ---------- */ .tk-build { text-align: center; } .tk-build-inner { max-width: 760px; margin: 0 auto; } .tk-build .tk-h2 { max-width: none; font-size: clamp(30px, 4vw, 44px); } .tk-build-box { position: relative; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 32px 32px 64px; margin-top: 8px; box-shadow: 0 2px 0 rgba(21,23,26,0.02); } .tk-build-textarea { width: 100%; min-height: 88px; border: none; outline: none; resize: none; font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--ink); background: transparent; } .tk-build-textarea::placeholder { color: #9CA0A6; } .tk-build-submit { position: absolute; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 140ms ease, transform 140ms ease; } .tk-build-submit:hover { background: var(--navy-deep); transform: translateY(-1px); } .tk-build-chip-bar { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--paper-alt); border-radius: 999px; padding: 10px 14px; margin-top: -26px; position: relative; z-index: 1; } .tk-build-chip { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); border: none; background: #fff; border-radius: 999px; padding: 9px 18px; transition: box-shadow 160ms ease, transform 160ms ease; box-shadow: 0 1px 2px rgba(21,23,26,0.06); } .tk-build-chip:hover { box-shadow: 0 4px 10px rgba(21,23,26,0.1); transform: translateY(-2px); } @media (max-width: 640px) { .tk-build-box { padding: 24px 20px 56px; } .tk-build-chip-bar { flex-direction: column; align-items: stretch; border-radius: 20px; } } /* ---------- proof strip: quick capability glimpses, testimonial-length ---------- */ .tk-proof { padding: 52px 0; } .tk-proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .tk-proof-item { border-left: 2px solid var(--amber); padding-left: 20px; } .tk-proof-item p { font-size: 15px; color: var(--ink); margin: 0; line-height: 1.55; } .tk-proof-item span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--slate); text-transform: uppercase; display: block; margin-top: 10px; } @media (max-width: 760px) { .tk-proof-row { grid-template-columns: 1fr; gap: 28px; } } /* ---------- interactive showcase: two-panel card layout ---------- */ .tk-showcase-head { max-width: 680px; margin: 0 0 28px; } .tk-showcase-head .tk-h2 { margin-bottom: 14px; font-size: clamp(34px, 4.6vw, 54px); background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy-deep) 32%, var(--violet-bright) 48%, var(--amber) 54%, var(--navy-deep) 68%, var(--navy-deep) 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: tk-heading-sweep 3s ease-in-out infinite; } .tk-showcase-head .tk-lede { margin-bottom: 0; } @keyframes tk-heading-sweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .tk-showcase-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; width: 100%; max-width: 1320px; } .tk-showcase-panel { border-radius: 32px; padding: 40px; display: flex; flex-direction: column; justify-content: center; } .tk-showcase-panel-left { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--violet-soft) 0%, #D6C9FF 55%, #AD91F5 100%); } .tk-showcase-panel-left::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(480px 320px at 8% 0%, rgba(124,92,252,0.16), transparent 62%); } .tk-showcase-panel-right { position: relative; overflow: hidden; justify-content: center; background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-mid) 55%, var(--panel-b) 100%); } .tk-showcase-learn-more { position: relative; z-index: 2; align-self: flex-end; /* the overlay card inside the stage hangs 56px below the stage's own flow height by design (it's meant to look layered on top of the card beneath it) -- this link needs enough top clearance to land below that hang, not just below the stage's nominal bottom edge. */ margin-top: 84px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy-deep); background: rgba(255,255,255,0.92); padding: 9px 14px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(23,17,54,0.35); transition: background 160ms ease, color 160ms ease, transform 160ms ease; } .tk-showcase-learn-more:hover { background: #fff; color: var(--violet); transform: translateY(-1px); } .tk-showcase-panel-right::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(420px 300px at 94% 8%, rgba(255,255,255,0.5), transparent 60%); } .tk-showcase-panel-right-amber { --panel-a: var(--amber-soft); --panel-mid: var(--violet-soft); --panel-b: var(--violet-bright); } .tk-showcase-panel-right-violet { --panel-a: var(--violet-soft); --panel-mid: #C9B6FF; --panel-b: var(--violet-bright); } .tk-showcase-panel-right-navy { --panel-a: var(--navy-soft); --panel-mid: var(--violet-soft); --panel-b: var(--violet-bright); } /* ---------- scroll-pinned track: background/scrollbar advance normally, the panels stay fixed in the viewport while the active step advances one-for-one with how far the visitor has scrolled ---------- */ /* 280vh gives each of the 6 steps a comfortable ~30% of viewport-height worth of scroll room to advance through on tall screens. But that per-step room is a straight fraction of viewport height -- on a shorter laptop screen it shrinks right along with the viewport, to the point where a single scroll gesture can blow past an entire step. The max() below adds a floor: whichever is taller, 280vh or enough room for 6 steps at ~260px each, wins. On tall screens 280vh already clears that floor, so nothing changes there; only shorter screens get the extra room. */ .tk-showcase-scene-wrap { position: relative; height: max(280vh, calc(100vh + 1560px)); } .tk-showcase-scene-pin { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; align-items: center; overflow: hidden; } .tk-showcase-deco { position: absolute; inset: -10% -10% -10% -10%; pointer-events: none; z-index: 0; will-change: transform; transition: transform 650ms cubic-bezier(.2,.7,.3,1); } .tk-showcase-deco svg { width: 100%; height: 100%; } .tk-showcase-deco circle, .tk-showcase-deco path { stroke: var(--navy-deep); stroke-width: 1; opacity: 0.05; fill: none; } .tk-showcase-grid { position: relative; z-index: 1; } /* ---------- left panel: numbered accordion, one step expanded at a time ---------- */ .tk-showcase-accordion { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; } .tk-showcase-step-item { display: flex; align-items: flex-start; gap: 16px; text-align: left; background: none; border: none; border-radius: 16px; padding: 14px 16px; margin: 0; cursor: pointer; font-family: inherit; width: 100%; transition: background 280ms ease, padding 280ms ease, box-shadow 280ms ease; } .tk-showcase-step-item-active { background: #fff; padding: 22px 22px; box-shadow: 0 1px 0 rgba(21,23,26,0.02), 0 24px 44px -30px rgba(20,20,28,0.2); } .tk-showcase-step-num { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #fff; opacity: 0.55; transition: background 280ms ease, color 280ms ease, opacity 280ms ease, transform 280ms ease, box-shadow 280ms ease; } /* each step gets its own gradient chip so the "1 2 3 4 5 6" rail itself reads as colorful wayfinding, not six identical grey dots */ .tk-showcase-step-item:nth-child(1) .tk-showcase-step-num { background: linear-gradient(135deg, var(--amber), var(--violet)); } .tk-showcase-step-item:nth-child(2) .tk-showcase-step-num { background: linear-gradient(135deg, var(--violet), var(--navy)); } .tk-showcase-step-item:nth-child(3) .tk-showcase-step-num { background: linear-gradient(135deg, var(--navy), var(--amber)); } .tk-showcase-step-item:nth-child(4) .tk-showcase-step-num { background: linear-gradient(135deg, var(--orange), var(--violet)); } .tk-showcase-step-item:nth-child(5) .tk-showcase-step-num { background: linear-gradient(135deg, var(--violet), var(--amber)); } .tk-showcase-step-item:nth-child(6) .tk-showcase-step-num { background: linear-gradient(135deg, var(--navy), var(--orange)); } .tk-showcase-step-item-active .tk-showcase-step-num { opacity: 1; transform: scale(1.1); box-shadow: 0 10px 22px -8px rgba(124,92,252,0.6); } .tk-showcase-step-copy { min-width: 0; padding-top: 4px; } .tk-showcase-step-title { display: block; font-size: 15px; font-weight: 600; color: var(--slate); line-height: 1.4; transition: color 280ms ease, font-size 280ms ease; } .tk-showcase-step-item-active .tk-showcase-step-title { color: var(--navy-deep); font-size: 18px; } .tk-showcase-step-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; } .tk-showcase-step-item-active .tk-showcase-step-body-wrap { grid-template-rows: 1fr; margin-top: 10px; } .tk-showcase-step-body-inner { overflow: hidden; } .tk-showcase-step-body-text { display: block; font-size: 14.5px; color: var(--slate); line-height: 23px; max-width: 380px; } .tk-showcase-stage { position: relative; width: 100%; } .tk-showcase-stage-layer { position: relative; } .tk-datacard { background: #fff; border-radius: 22px; padding: 26px 26px 64px; box-shadow: 0 1px 0 rgba(21,23,26,0.02), 0 30px 60px -30px rgba(20,20,28,0.22); border: 1px solid rgba(23,25,27,0.05); transition: box-shadow 280ms ease, border-color 280ms ease, transform 280ms ease; } .tk-datacard:hover { border-color: rgba(124,92,252,0.28); box-shadow: 0 1px 0 rgba(21,23,26,0.02), 0 40px 76px -28px rgba(21,15,59,0.32), 0 0 0 1px rgba(124,92,252,0.08); transform: translateY(-3px); } .tk-datacard-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .tk-datacard-header h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-datacard-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--slate); white-space: nowrap; } .tk-datacard-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #35B06B; display: inline-block; } .tk-datacard-row { padding: 14px 0; border-top: 1px solid var(--line); } .tk-datacard-row:first-of-type { border-top: none; padding-top: 4px; } .tk-datacard-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .tk-datacard-code { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .tk-datacard-code-b { background: var(--amber); } .tk-datacard-code-a { background: var(--violet); } .tk-datacard-code-c { background: var(--navy); } .tk-datacard-code-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--line); } .tk-datacard-label { font-size: 13.5px; font-weight: 600; color: var(--navy-deep); } .tk-datacard-best { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: #2E8B57; background: rgba(53,176,107,0.12); border-radius: 999px; padding: 3px 9px; } .tk-datacard-row-bottom { display: flex; align-items: flex-start; gap: 18px; padding-left: 31px; } .tk-datacard-metrics { display: flex; gap: 18px; flex: 1; } .tk-datacard-metric { display: flex; flex-direction: column; gap: 3px; } .tk-datacard-metric-label { font-size: 10.5px; color: var(--slate); } .tk-datacard-metric-value { font-size: 13.5px; font-weight: 700; color: var(--navy-deep); } .tk-datacard-bars { display: flex; flex-direction: column; gap: 7px; width: 96px; padding-top: 3px; } .tk-datacard-bar-track { width: 100%; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; } .tk-datacard-bar-fill { height: 100%; border-radius: 999px; } .tk-datacard-bar-fill-b { background: var(--amber); } .tk-datacard-bar-fill-a { background: var(--violet); } .tk-datacard-bar-fill-c { background: var(--navy); } .tk-datacard-row-faded { opacity: 0.4; } .tk-datacard-row-faded .tk-datacard-row-top { margin-bottom: 0; } .tk-overlay-card { position: absolute; left: -4%; right: 10%; bottom: -56px; background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 1px 0 rgba(21,23,26,0.02), 0 34px 60px -24px rgba(20,20,28,0.3); border: 1px solid rgba(23,25,27,0.06); } .tk-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .tk-overlay-header h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-overlay-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--violet); background: var(--violet-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .tk-overlay-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .tk-overlay-code { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: #fff; flex-shrink: 0; } .tk-overlay-code-b { background: var(--amber); } .tk-overlay-code-a { background: var(--violet); } .tk-overlay-code-c { background: var(--navy); } .tk-overlay-label { font-size: 12px; color: var(--slate); width: 84px; flex-shrink: 0; } .tk-overlay-bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .tk-overlay-bar-fill { height: 100%; border-radius: 999px; } .tk-overlay-bar-fill-b { background: var(--amber); } .tk-overlay-bar-fill-a { background: var(--violet); } .tk-overlay-bar-fill-c { background: var(--navy); } .tk-overlay-pct { font-size: 12px; font-weight: 700; color: var(--navy-deep); width: 32px; text-align: right; flex-shrink: 0; } @media (max-width: 900px) { .tk-showcase-grid { grid-template-columns: 1fr; gap: 20px; } .tk-showcase-panel { padding: 30px 24px; } .tk-overlay-card { left: 0; right: 6%; bottom: -48px; } } @media (max-width: 560px) { .tk-datacard-row-bottom { flex-direction: column; gap: 10px; padding-left: 31px; } .tk-datacard-bars { width: 100%; flex-direction: row; gap: 10px; } .tk-overlay-label { width: 64px; } } /* On narrow viewports the pin becomes an ordinary stacked block, and every step stays permanently expanded so nothing is scroll-gated. This must match the tk-showcase-grid stacking breakpoint above (900px) -- otherwise a mid-width window gets a tall single-column stack forced inside a clipped, still-pinned 100vh box. */ @media (max-width: 900px) { .tk-showcase-scene-wrap { height: auto; } .tk-showcase-scene-pin { position: relative; height: auto; padding: 48px 0; } .tk-showcase-deco { display: none; } .tk-showcase-step-item, .tk-showcase-step-item-active { background: #fff; padding: 20px 18px; margin-bottom: 10px; box-shadow: 0 1px 0 rgba(21,23,26,0.02), 0 16px 32px -26px rgba(20,20,28,0.18); cursor: default; } .tk-showcase-step-num, .tk-showcase-step-item-active .tk-showcase-step-num { background: var(--navy-deep); color: #fff; } .tk-showcase-step-title, .tk-showcase-step-item-active .tk-showcase-step-title { font-size: 16px; color: var(--navy-deep); } .tk-showcase-step-body-wrap, .tk-showcase-step-item-active .tk-showcase-step-body-wrap { grid-template-rows: 1fr; margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { .tk-showcase-scene-wrap { height: auto; } .tk-showcase-scene-pin { position: relative; height: auto; padding: 48px 0; } .tk-showcase-head .tk-h2 { animation: none; } } /* ---------- guardrails: numbered list + sticky visual (Artisan-style) ---------- */ .tk-guardrails-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: start; } .tk-guardrails-list { display: flex; flex-direction: column; } .tk-guardrail-row { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity 550ms ease, transform 550ms ease; } .tk-guardrail-row:last-child { border-bottom: 1px solid var(--line); } .tk-guardrail-row-in { opacity: 1; transform: translateY(0); } .tk-guardrail-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; } .tk-guardrail-row h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy-deep); margin: 3px 0 6px; } .tk-guardrail-row p { font-size: 14.5px; color: var(--slate); margin: 0; max-width: 400px; } .tk-guardrails-visual { position: sticky; top: 96px; } .tk-guardrails-card { background: var(--paper-alt); border-radius: 24px; padding: 28px; border: 1px solid var(--line); transition: border-color 280ms ease; } .tk-guardrails-card:hover { border-color: rgba(124,92,252,0.35); } .tk-guardrails-card .tk-artifact { margin-top: 16px; } .tk-guardrails-caption { font-size: 13.5px; color: var(--slate); margin: 16px 4px 0; } @media (max-width: 900px) { .tk-guardrails-grid { grid-template-columns: 1fr; } .tk-guardrails-visual { position: static; } } /* ---------- three connected blocks: sticky-stacking cards ---------- Each card pins to the top of the viewport; the next one rises from below and covers it. Only the currently-topmost card is interactive. */ .tk-stack { position: relative; margin-bottom: 56px; } /* "Starting from a blank page?" heading was reading as an orphaned, colorless line sitting in a lot of empty space -- give it the same glow-sweep treatment as "One pipeline. Six specialists." so it has actual presence instead of blending into the background. */ #workflow .tk-h2 { font-size: clamp(32px, 4.4vw, 50px); background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy-deep) 32%, var(--violet-bright) 48%, var(--amber) 54%, var(--navy-deep) 68%, var(--navy-deep) 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: tk-heading-sweep 3s ease-in-out infinite; text-shadow: 0 0 60px rgba(124,92,252,0.25); } @media (prefers-reduced-motion: reduce) { #workflow .tk-h2 { animation: none; } } .tk-stack-card-wrap { position: relative; height: 165vh; } .tk-stack-card-wrap:last-child { height: 100vh; } /* The homepage's Website Studio card is the only card in its list (onlyKeys filters it down to one), which makes it both first and last child -- so it was getting the "last card" 100vh wrap, meant for a card with nothing after it to hand off to. But a 100vh wrap around a 100vh sticky pin gives the pin almost no room to actually stick: it pins and releases within the same scroll frame, which reads as a brief hold-then-jump stutter rather than a smooth pin. Give this one instance real dwell room instead. Scoped to #workflow (only used here) so the shared 3-card layout elsewhere is untouched. */ #workflow .tk-stack-card-wrap:last-child { height: 165vh; } .tk-stack-card { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; } .tk-stack-card-inner { width: calc(100% - 32px); max-width: 1360px; margin: 0 auto; min-height: clamp(660px, 74vh, 700px); height: auto; border-radius: 32px; background: var(--card-bg, var(--paper)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; padding: 24px 88px 24px 128px; will-change: transform, filter; transform-origin: center top; box-shadow: 0 40px 90px -40px rgba(21,15,59,0.16); transition: box-shadow 320ms ease; } .tk-stack-card-inner:hover { box-shadow: 0 50px 110px -36px rgba(21,15,59,0.26); } .tk-stack-copy { max-width: 480px; } .tk-stack-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; color: var(--navy-deep); margin: 0 0 12px; letter-spacing: -0.01em; } .tk-stack-body { font-size: 16px; color: var(--slate); margin: 0 0 16px; max-width: 360px; line-height: 26px; } .tk-stack-caption { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--card-accent, var(--navy)); text-transform: uppercase; margin: 0 0 24px; display: block; } .tk-stack-link { font-size: 14px; font-weight: 600; color: var(--navy-deep); display: inline-flex; align-items: center; gap: 5px; } .tk-stack-link:hover { color: var(--card-accent, var(--amber)); } .tk-stack-icon-wrap { display: flex; align-items: center; justify-content: center; } .tk-stack-icon-wrap svg { width: 100%; max-width: 280px; height: auto; } .tk-stack-card-1 { --card-bg: var(--amber-soft); --card-accent: var(--amber); z-index: 1; } .tk-stack-card-2 { --card-bg: var(--violet-soft); --card-accent: var(--violet); z-index: 2; } .tk-stack-card-3 { --card-bg: var(--navy-soft); --card-accent: var(--navy); z-index: 3; } /* ---------- pill badge: label + trailing fading dots ---------- */ .tk-pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 32px; } .tk-pill-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--card-accent, var(--navy)); padding: 7px 16px; border-radius: 999px; } .tk-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--card-accent, var(--navy)); } .tk-pill-dot-2 { opacity: 0.4; } .tk-pill-dot-3 { opacity: 0.16; animation: tk-pulse-dot 2.2s ease-in-out infinite; } @keyframes tk-pulse-dot { 0%, 100% { opacity: 0.16; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .tk-pill-dot-3 { animation: none; } } /* ---------- experience card additions: badge, tagline, outcome chips ---------- */ .tk-stack-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-deep); background: rgba(255,255,255,0.6); border: 1px solid var(--card-accent, var(--navy)); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; } .tk-stack-tagline { display: block; font-size: 14px; font-weight: 500; color: var(--card-accent, var(--navy)); margin: 0 0 10px; } .tk-outcome-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; max-width: 380px; } .tk-outcome-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--navy-deep); background: rgba(21,15,59,0.06); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; transition: background 160ms ease, border-color 160ms ease; } .tk-outcome-chip:hover { background: #fff; border-color: var(--card-accent, var(--violet)); } /* ---------- coming-soon variant: honest about what isn't shipped yet ---------- */ .tk-stack-card-soon .tk-stack-card-inner { opacity: 0.82; } .tk-stack-badge-soon { color: var(--navy-deep); background: rgba(217,70,239,0.12); border-color: var(--amber); } .tk-stack-link-disabled { color: var(--slate); cursor: default; pointer-events: none; } .tk-stack-link-disabled:hover { color: var(--slate); } /* ---------- shared foundation: compact principle chips, not paragraphs ---------- */ .tk-foundation-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; max-width: 760px; margin-top: 8px; } .tk-foundation-chip { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); } .tk-foundation-chip-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--navy-deep); } .tk-foundation-chip-body { font-size: 14px; color: var(--slate); line-height: 1.55; } @media (max-width: 720px) { .tk-foundation-chips { grid-template-columns: 1fr; } } /* ---------- stack icon: drawn line-art, animates in once per card ---------- */ .tk-stack-icon path, .tk-stack-icon circle, .tk-stack-icon line { transition: opacity 575ms ease; } .tk-stack-icon .tk-draw { transition: stroke-dashoffset 1.3s cubic-bezier(.2,.7,.3,1); } .tk-stack-icon-in .tk-draw { stroke-dashoffset: 0 !important; } .tk-stack-icon-dot { opacity: 0; transition: opacity 470ms ease, transform 470ms ease; transform: scale(0.6); transform-box: fill-box; transform-origin: center; } .tk-stack-icon-in .tk-stack-icon-dot { opacity: 1; transform: scale(1); } @media (max-width: 1180px) { .tk-stack-card-wrap, .tk-stack-card-wrap:last-child { height: auto; } .tk-stack-card { position: relative; top: auto; height: auto; padding: 12px 0; } .tk-stack-card-inner { height: auto; grid-template-columns: 1fr; padding: 48px 28px; text-align: center; gap: 32px; } .tk-stack-copy { max-width: none; margin: 0 auto; } .tk-stack-icon-wrap svg { max-width: 220px; } } /* Reduced motion deliberately does NOT flatten the sticky stack here -- the pin/overlap is a scroll-linked layout, not a decorative animation, so reduced-motion users still get it. Only the decorative bits (icon draw-in, exit dim/scale) are skipped, and those are already gated in JS via usePrefersReducedMotion(). */ /* ---------- Website Studio: layer stack visual ---------- Replaces the small line-art icon on the website-generator card only. Four diamonds -- one per build stage -- with the active one lit, lifted forward, and expanded into a detail card below. Reskinned from a dark "8 Weeks to Production" reference into TroviqAI's light, warm-paper, serif-display language. */ @media (min-width: 1181px) { .tk-stack-card-studio .tk-stack-card-inner { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; padding-right: 64px; } } .tk-layerstack-wrap { display: flex; align-items: center; justify-content: center; width: 100%; } .tk-layerstack { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; } /* ---------- split variant: diamonds + badge on the left, the detail card on the right, both vertically centered against each other -- for a full-width section where the plain stacked layout leaves the left and right thirds of the page empty. Achieved with grid placement only; the component's DOM order doesn't change. ---------- */ .tk-layerstack-split { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 420px); column-gap: 56px; align-items: center; } .tk-layerstack-split .tk-layerstack-badge-row { grid-column: 1; grid-row: 1; } .tk-layerstack-split .tk-layer-rows { grid-column: 1; grid-row: 2; } .tk-layerstack-split .tk-layer-detail { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } /* the label next to each diamond was built for the wider stacked layout (480px) where every title fit on one line -- at this layout's narrower 360px left column that same nowrap+ellipsis rule was cutting titles off mid-word ("Describ...", "Build fo..."). Let it wrap onto two lines here instead of truncating; nothing reads a title as "Describ..." and understands it. */ .tk-layerstack-split .tk-layer-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; max-width: 150px; } @media (max-width: 760px) { .tk-layerstack-split { grid-template-columns: 1fr; row-gap: 24px; } .tk-layerstack-split .tk-layer-detail { grid-column: 1; grid-row: 3; } .tk-layerstack-split .tk-layer-label { max-width: none; } } .tk-layerstack-badge-row { display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; } .tk-layerstack-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; box-shadow: 0 14px 28px -16px rgba(21,15,59,0.2); } .tk-layerstack-badge-line { width: 1px; height: 22px; margin-top: 3px; background-image: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 9px); } .tk-layer-rows { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 6px 0 20px; } .tk-layer-row { display: flex; align-items: center; gap: 16px; position: relative; background: none; border: none; margin: 0; padding: 7px 6px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(14px); transition: opacity 640ms cubic-bezier(.2,.7,.3,1), transform 640ms cubic-bezier(.2,.7,.3,1); } .tk-layer-row:not(:first-child) { margin-top: -22px; } .tk-layer-row-in { opacity: 1; transform: translateY(0); } .tk-layer-row-noanim { transition: none; } .tk-layer-row:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 14px; } .tk-layer-diamond-wrap { flex-shrink: 0; width: 148px; display: block; transition: transform 420ms cubic-bezier(.2,.7,.3,1), opacity 420ms ease; } .tk-layer-row-noanim .tk-layer-diamond-wrap { transition: none; } .tk-layer-diamond-svg { width: 100%; height: auto; display: block; overflow: visible; } .tk-layer-diamond-shape { fill: var(--paper); stroke: var(--line); stroke-width: 1.5px; transition: stroke 300ms ease, stroke-width 300ms ease; } .tk-layer-diamond-wrap-active .tk-layer-diamond-shape { stroke: var(--violet); stroke-width: 2px; } .tk-layer-diamond-wrap-active .tk-layer-diamond-svg { filter: drop-shadow(0 0 14px rgba(124,92,252,0.4)) drop-shadow(0 0 28px rgba(217,70,239,0.22)); } .tk-layer-connector { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tk-layer-connector-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); opacity: 0.4; transition: background 280ms ease, opacity 280ms ease, transform 280ms ease; } .tk-layer-row-active .tk-layer-connector-dot { background: var(--violet); opacity: 1; transform: scale(1.35); } .tk-layer-connector-line { width: 26px; height: 1px; background: var(--line); flex-shrink: 0; } .tk-layer-label { font-size: 14.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 280ms ease; } .tk-layer-row-active .tk-layer-label { color: var(--ink); font-weight: 600; } .tk-layer-detail { width: 100%; margin-top: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 20px; box-shadow: 0 26px 54px -32px rgba(21,15,59,0.2); height: 268px; overflow: hidden; } .tk-layer-detail-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; } .tk-layer-detail-bar { width: 3px; height: 12px; border-radius: 2px; background: var(--grad-pop); display: inline-block; } .tk-layer-detail-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--navy-deep); margin: 0 0 8px; letter-spacing: -0.01em; } .tk-layer-detail-body { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin: 0 0 16px; } .tk-layer-detail-chips { margin: 0; max-width: none; } @keyframes tk-layer-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .tk-layer-detail-anim { animation: tk-layer-fade-in 320ms cubic-bezier(.2,.7,.3,1); } @media (max-width: 1180px) { .tk-layerstack { max-width: 320px; margin: 0 auto; } .tk-layer-diamond-wrap { width: 108px; } .tk-layer-connector-line { width: 14px; } .tk-layer-label { white-space: normal; font-size: 13px; line-height: 1.3; max-width: 108px; } .tk-layer-row:not(:first-child) { margin-top: -16px; } /* narrower card wraps the detail text onto more lines -- give it more reserved height so the box still doesn't resize per-layer */ .tk-layer-detail { height: 310px; } } /* ---------- editorial interstitial: one line, lots of air ---------- */ .tk-interstitial { padding: 64px 0; text-align: center; } .tk-interstitial-statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.35; color: var(--navy-deep); max-width: 640px; margin: 0 auto 14px; } .tk-interstitial-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--slate); margin: 0; font-family: var(--font-mono); text-transform: uppercase; } /* ---------- closing philosophy: one sentence, then done ---------- */ /* ---------- closing philosophy: one sentence, then done ---------- Starts on the same dark tone SixReasonsSection ends on (#0B0821) so the two sections read as one continuous surface instead of an abrupt hand-off from a color-cycling section into a flat static one. */ .tk-closing { padding: 110px 0; text-align: center; position: relative; overflow: hidden; background: radial-gradient(1000px 560px at 18% -10%, rgba(155,107,255,0.34), transparent 58%), radial-gradient(820px 560px at 88% 110%, rgba(217,38,239,0.24), transparent 55%), linear-gradient(180deg, #0B0821 0%, var(--dusk) 30%, var(--dusk-2) 100%); } .tk-closing-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .tk-closing-statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.8vw, 50px); line-height: 1.2; letter-spacing: -0.015em; color: #FFFFFF; margin: 0 0 40px; } .tk-closing .tk-btn-primary { background: var(--grad-glow); background-size: 220% 220%; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 46px -12px rgba(155,107,255,0.65); animation: tk-grad-shift 7s ease-in-out infinite; } .tk-closing .tk-btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 22px 54px -10px rgba(217,38,239,0.75); } /* ============================================================ INNER-PAGE SHELL — used by Product, Use Cases, Solutions, Resources, Company, Pricing, Demo ============================================================ */ .tk-page-hero { padding: 88px 0 56px; background: radial-gradient(900px 480px at 88% -20%, rgba(155,107,255,0.22), transparent 55%), radial-gradient(700px 420px at 0% 100%, rgba(217,38,239,0.10), transparent 55%), var(--paper); } .tk-page-hero-inner { max-width: 760px; } /* ---------- product-page hero: dark, diagonal light bars, grain, fades in from black on load (Raycast-style) ---------- */ .tk-page-hero-raycast { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #08080a; padding: 140px 28px; } .tk-page-hero-raycast::before { content: ""; position: absolute; inset: -15%; background: radial-gradient(60% 55% at 50% 45%, rgba(8,8,10,0) 0%, rgba(8,8,10,0.85) 100%), repeating-linear-gradient( 124deg, #08080a 0px, #08080a 64px, #4B2E82 64px, #4B2E82 118px, #1C1230 118px, #1C1230 168px, #08080a 168px, #08080a 236px ); filter: blur(34px) saturate(1.1); opacity: 0; animation: tk-raycast-fade-in 2.4s ease-out 0.1s forwards; } .tk-page-hero-raycast::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.16; mix-blend-mode: overlay; } @keyframes tk-raycast-fade-in { 0% { opacity: 0; filter: blur(56px) saturate(1.1); } 100% { opacity: 1; filter: blur(34px) saturate(1.1); } } .tk-page-hero-raycast .tk-page-hero-inner { position: relative; z-index: 1; max-width: 820px; } .tk-page-hero-raycast .tk-eyebrow { --eyebrow-bg: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); } .tk-page-hero-raycast .tk-h1 { color: #fff; font-weight: 700; text-shadow: 0 4px 40px rgba(0,0,0,0.4); } .tk-page-hero-raycast .tk-hero-sub { color: rgba(255,255,255,0.72); max-width: 560px; margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { .tk-page-hero-raycast::before { animation: none; opacity: 1; } } @media (max-width: 640px) { .tk-page-hero-raycast { min-height: 100vh; padding: 100px 20px; } } .tk-page-list { border-bottom: 1px solid var(--line); } .tk-page-row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); } .tk-page-row h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-page-row p { font-size: 14.5px; color: var(--slate); margin: 0; max-width: 560px; } @media (max-width: 760px) { .tk-page-row { grid-template-columns: 1fr; gap: 8px; } } .tk-principle-list { display: flex; flex-direction: column; gap: 20px; max-width: 720px; } .tk-principle-list p { font-size: 16px; color: var(--ink); margin: 0; line-height: 1.6; } .tk-principle-list strong { color: var(--navy-deep); } .tk-pricing-card { max-width: 560px; background: #fff; border: 1px solid rgba(23,25,27,0.1); border-radius: 24px; padding: 40px; transition: border-color 280ms ease; } .tk-pricing-card:hover { border-color: rgba(124,92,252,0.35); } .tk-pricing-card p { font-size: 15.5px; color: var(--slate); margin: 0 0 24px; } /* ============================================================ PRODUCT PAGE — three-experience pattern additions ============================================================ */ /* ---------- experience switcher: quiet in-page jump links under the hero ---------- */ .tk-switcher { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .tk-switcher-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 12px; transition: border-color 160ms ease, color 160ms ease; } .tk-switcher-link:hover { border-color: var(--navy-deep); color: var(--navy-deep); } .tk-switcher-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* ---------- agent roster: "Meet the AI team" ---------- */ .tk-agent-section { background: var(--paper-alt); } .tk-agent-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; } .tk-agent-row { padding: 44px 0; border-top: 1px solid var(--line); } .tk-agent-list .tk-agent-row:last-child { border-bottom: 1px solid var(--line); } .tk-agent-row-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .tk-agent-badge { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid; border-opacity: 0.3; } .tk-agent-step { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--slate); text-transform: uppercase; } .tk-agent-role { font-family: var(--font-display); font-weight: 600; color: var(--navy-deep); font-size: clamp(20px, 2.2vw, 25px); margin: 0 0 12px; } .tk-agent-narrative { font-size: 15.5px; line-height: 1.65; color: var(--slate); margin: 0 0 20px; max-width: 620px; } .tk-agent-checklist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; max-width: 600px; } .tk-agent-checklist li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.5; } .tk-agent-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 700; color: var(--amber); } .tk-agent-feeds { font-size: 12px; color: var(--slate); letter-spacing: 0.02em; } .tk-agent-flag { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--paper); border: 1px dashed var(--line); font-size: 12.5px; color: var(--slate); font-style: italic; max-width: 600px; } @media (max-width: 640px) { .tk-agent-row { padding: 32px 0; } } /* ---------- deep-dive section header: icon badge + eyebrow ---------- */ .tk-dive-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .tk-dive-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--paper-alt); border: 1px solid var(--line); color: var(--navy-deep); } /* ---------- horizontal timeline (Website Generator: describe -> build) ---------- */ .tk-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; margin: 12px 0 8px; } .tk-timeline::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 1px; background: var(--line); } .tk-timeline-step { position: relative; padding-top: 56px; opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease; } .tk-timeline-step-in { opacity: 1; transform: translateY(0); } .tk-timeline-dot { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--navy-deep); transition: border-color 300ms ease, background 300ms ease, color 300ms ease; } .tk-timeline-step-in .tk-timeline-dot { border-color: var(--amber); background: var(--amber); color: #fff; } .tk-timeline-step h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy-deep); margin: 0 0 6px; } .tk-timeline-step p { font-size: 13px; color: var(--slate); margin: 0; max-width: 220px; } @media (max-width: 760px) { .tk-timeline { grid-template-columns: 1fr; gap: 26px; } .tk-timeline::before { top: 0; bottom: 0; left: 19px; right: auto; width: 1px; height: auto; } .tk-timeline-step { padding-top: 0; padding-left: 56px; min-height: 40px; } } /* ---------- agent identity strip + delegation pills (Agentic experience) ---------- */ .tk-agent-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin: 0 8px 8px 0; } .tk-agent-pill-aria { background: var(--violet-soft); color: var(--violet); } .tk-agent-pill-kira { background: #E0F2FE; color: #0369A1; } .tk-agent-pill-nova { background: #FEF3C7; color: #B45309; } .tk-agent-chat { display: flex; flex-direction: column; gap: 10px; } .tk-agent-chat .tk-chat-bubble { align-self: flex-start; max-width: 82%; } .tk-agent-chat-reply { align-self: flex-start; max-width: 88%; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 10px 10px 10px 2px; padding: 12px 16px; font-size: 13.5px; color: var(--ink); } /* ============================================================ SOLUTIONS -- "one understanding, six outcomes" branch diagram and the consistent problem/solution/output/CTA frame used by every solution section. ============================================================ */ .tk-branch-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 8px 0 8px; } .tk-branch-source { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-deep); background: var(--navy-soft); border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px; } .tk-branch-stem { width: 1px; height: 28px; background: var(--line); } .tk-branch-outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; } .tk-branch-outcome { font-family: var(--font-mono); font-size: 12px; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; opacity: 0; transform: translateY(8px); transition: opacity 460ms ease, transform 460ms ease, border-color 180ms ease, color 180ms ease; } .tk-branch-outcome-in { opacity: 1; transform: translateY(0); } .tk-branch-outcome:hover { border-color: var(--amber); color: var(--navy-deep); } .tk-solution-meta { display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 4px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .tk-solution-meta-item { flex: 1 1 200px; min-width: 180px; padding: 20px 24px; border-left: 1px solid var(--line); } .tk-solution-meta-item:first-child { border-left: none; } .tk-solution-meta-item h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 8px; } .tk-solution-meta-item p { font-size: 13.5px; color: var(--ink); margin: 0; line-height: 1.5; } @media (max-width: 760px) { .tk-solution-meta-item { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--line); } .tk-solution-meta-item:first-child { border-top: none; } } .tk-solution-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--navy-deep); border-bottom: 1px solid var(--navy-deep); padding-bottom: 2px; transition: color 160ms ease, border-color 160ms ease; } .tk-solution-cta:hover { color: var(--amber); border-color: var(--amber); } /* ---------- Go To Market: horizontal roadmap (unique to Solutions) ---------- */ .tk-roadmap { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin: 12px 0 8px; position: relative; } .tk-roadmap::before { content: ""; position: absolute; top: 9px; left: 10px; right: 10px; height: 1px; background: var(--line); } .tk-roadmap-node { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tk-roadmap-dot { width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 2px solid var(--line); z-index: 1; transition: border-color 320ms ease, background 320ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1); } .tk-roadmap-node-in .tk-roadmap-dot { border-color: var(--amber); background: var(--amber); transform: scale(1.05); } .tk-roadmap-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } .tk-roadmap-node h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-roadmap-node p { font-size: 13.5px; color: var(--slate); margin: 0; line-height: 1.55; max-width: 250px; } @media (max-width: 760px) { .tk-roadmap { flex-direction: column; gap: 26px; } .tk-roadmap::before { top: 0; bottom: 0; left: 9px; right: auto; width: 1px; height: auto; } .tk-roadmap-node { padding-left: 30px; } .tk-roadmap-dot { position: absolute; left: -30px; top: 0; } } /* ---------- Website Creation: before/after split (unique to Solutions) ---------- */ .tk-baw { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 22px; align-items: stretch; margin: 8px 0 8px; } .tk-baw-before { border: 1px dashed var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 14px; background: var(--paper); } .tk-baw-before-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } .tk-baw-before-blank { border: 1px solid var(--line); border-radius: 8px; height: 120px; background: repeating-linear-gradient(45deg, var(--paper) 0 8px, var(--paper-alt) 8px 16px); } .tk-baw-before p { font-size: 13.5px; color: var(--ink); opacity: 0.85; margin: 0; line-height: 1.55; } @media (max-width: 780px) { .tk-baw { grid-template-columns: 1fr; } } /* ---------- Business Intelligence: KPI tiles + report list ---------- */ .tk-dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 36px; } .tk-dash-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .tk-dash-tile-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; } .tk-dash-tile-value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-dash-tile-delta { font-size: 12px; color: var(--green); margin-top: 6px; } @media (max-width: 760px) { .tk-dash { grid-template-columns: 1fr; } } /* ============================================================ BUILT FOR -- persona switcher + before/after story panel ============================================================ */ .tk-story-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 44px; } .tk-story-tab { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--slate); background: transparent; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .tk-story-tab-active { border-color: var(--navy-deep); color: #fff; background: var(--navy-deep); } .tk-story-tab:hover:not(.tk-story-tab-active) { border-color: var(--navy-deep); color: var(--navy-deep); } .tk-story-pain { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 27px); color: var(--navy-deep); margin: 0 0 32px; max-width: 700px; line-height: 1.4; } .tk-story-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-bottom: 24px; } .tk-story-col { border: 1px solid var(--line); border-radius: 14px; padding: 24px; } .tk-story-col-before { background: var(--paper-alt); } .tk-story-col-after { background: #fff; border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet-soft); } .tk-story-col h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; } .tk-story-col-after h4 { color: var(--violet); } .tk-story-col p { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.6; } .tk-story-arrow-wrap { display: flex; align-items: center; justify-content: center; color: var(--slate); } .tk-story-outcome { display: flex; gap: 12px; align-items: flex-start; padding: 20px 24px; background: var(--navy-deep); border-radius: 14px; } .tk-story-outcome p { color: var(--paper); font-size: 14.5px; margin: 0; line-height: 1.55; } .tk-story-outcome strong { color: var(--amber); } @media (max-width: 760px) { .tk-story-flow { grid-template-columns: 1fr; } .tk-story-arrow-wrap { transform: rotate(90deg); padding: 6px 0; } } /* ============================================================ RESOURCES -- featured article + alive category grids ============================================================ */ /* solid white, not transparent -- this card sits inside a flow-zone (maze texture) now, and without its own opaque fill the pattern was showing straight through it. Kept as a plain white card on purpose, same as before that section got wrapped. */ .tk-featured { background: #fff; display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .tk-featured-copy { padding: 44px; display: flex; flex-direction: column; justify-content: center; } .tk-featured-visual { background: var(--navy-deep); padding: 44px; display: flex; align-items: center; justify-content: center; min-height: 220px; } @media (max-width: 780px) { .tk-featured { grid-template-columns: 1fr; } } /* ---------- featured article: shown as an actual preview window, not a generic icon-on-navy tile -- a small browser chrome framing a scaled-down look at the post itself. ---------- */ .tk-featured-window { width: 100%; max-width: 320px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5); } .tk-featured-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-alt); border-bottom: 1px solid rgba(23,25,27,0.06); } .tk-featured-window-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .tk-featured-window-url { margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); } .tk-featured-window-body { padding: 20px; } .tk-featured-window-tag { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: var(--violet); background: var(--violet-soft); padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; } .tk-featured-window-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--navy-deep); margin: 0 0 10px; } .tk-featured-window-line { height: 7px; border-radius: 4px; background: var(--paper-alt); margin-bottom: 7px; } .tk-featured-window-line:nth-child(3) { width: 88%; } .tk-featured-window-line:nth-child(4) { width: 62%; } /* ============================================================ BLOG POST -- editorial reading layout. Sizing and rhythm modeled on how established publications actually set long-form body copy (Medium, NYT, Stripe's blog): ~18px body type, a tighter ~1.6 line-height rather than double-spaced, and a column narrow enough to keep line length in the readable 60-75 character range instead of stretching edge to edge. ============================================================ */ .tk-blog-hero { padding: 56px 0 0; position: relative; overflow: hidden; } .tk-blog-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(217,38,239,0.10), transparent 65%); pointer-events: none; } .tk-blog-hero::after { content: "“"; position: absolute; top: -40px; left: -6px; font-family: var(--font-display); font-size: 220px; line-height: 1; font-weight: 700; color: var(--navy-deep); opacity: 0.04; pointer-events: none; } .tk-blog-hero .tk-section-inner { position: relative; z-index: 1; } .tk-blog-back { display: flex; width: fit-content; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--slate); margin-bottom: 22px; transition: color 140ms ease, gap 140ms ease; } .tk-blog-back:hover { color: var(--navy-deep); gap: 9px; } .tk-blog-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--violet); background: var(--violet-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 20px; } .tk-blog-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.2; color: var(--navy-deep); max-width: 820px; margin: 0 0 22px; } .tk-blog-meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--slate); margin-bottom: 44px; } .tk-blog-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--amber)); } .tk-blog-meta-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tk-blog-meta-author { color: var(--navy-deep); font-weight: 600; } .tk-blog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate); opacity: 0.6; } .tk-blog-body { max-width: 660px; counter-reset: blog-section; } .tk-blog-body p { font-size: 18px; line-height: 1.62; color: var(--ink); margin: 0 0 20px; } /* drop cap on the opening paragraph -- the one classic editorial signal that says "someone designed this page," not just a document rendered into HTML */ .tk-blog-body > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 700; font-size: 66px; line-height: 0.72; float: left; padding: 6px 10px 0 0; color: var(--amber); } .tk-blog-body h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--navy-deep); line-height: 1.3; margin: 48px 0 18px; } .tk-blog-body h2::before { counter-increment: blog-section; content: counter(blog-section, decimal-leading-zero); font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--amber); flex-shrink: 0; } .tk-blog-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--navy-deep); line-height: 1.4; margin: 28px 0 10px; } .tk-blog-body ul { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .tk-blog-body ul li { font-size: 18px; line-height: 1.55; color: var(--ink); } .tk-blog-pullquote { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.5; color: var(--navy-deep); margin: 40px 0; padding: 4px 0 4px 34px; border-left: 3px solid var(--amber); } .tk-blog-pullquote::before { content: "“"; position: absolute; left: 6px; top: -22px; font-family: var(--font-display); font-weight: 700; font-size: 58px; color: var(--amber); opacity: 0.4; } .tk-blog-footer { max-width: 660px; margin-top: 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 28px 30px; border-radius: 18px; background: var(--paper-alt); border: 1px solid var(--line); } .tk-blog-footer-text { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--navy-deep); } .tk-blog-footer-sub { font-size: 13.5px; color: var(--slate); margin-top: 2px; } @media (max-width: 640px) { .tk-blog-hero { padding-top: 40px; } .tk-blog-hero::after { font-size: 140px; } .tk-blog-body p, .tk-blog-body ul li { font-size: 16.5px; } .tk-blog-body h2 { font-size: 22px; margin: 36px 0 14px; } .tk-blog-body h3 { font-size: 17.5px; } .tk-blog-body > p:first-of-type::first-letter { font-size: 50px; padding: 4px 8px 0 0; } .tk-blog-footer { flex-direction: column; align-items: flex-start; padding: 22px 22px; } } .tk-resource-block { margin-bottom: 64px; } .tk-resource-block:last-child { margin-bottom: 0; } .tk-resource-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .tk-resource-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy-deep); margin: 0; } .tk-resource-head span { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate); } .tk-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .tk-resource-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #fff; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .tk-resource-card:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(124,92,252,0.35); } .tk-resource-card-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); margin: 0 0 10px; } .tk-resource-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--navy-deep); margin: 0 0 8px; line-height: 1.35; } .tk-resource-card p { font-size: 12.5px; color: var(--slate); margin: 0; line-height: 1.5; } /* ============================================================ COMPANY -- belief statement + principles timeline ============================================================ */ .tk-belief-statement { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.4; color: var(--navy-deep); max-width: 760px; margin: 0; } .tk-company-problem { display: flex; flex-direction: column; gap: 16px; max-width: 680px; } .tk-company-problem p { font-size: 16px; color: var(--ink); margin: 0; line-height: 1.65; } /* ---------- editorial pull-quote: a short, load-bearing sentence gets set apart from ordinary body copy -- large serif, a thin rule for punctuation, not a plain paragraph the eye skips past. ---------- */ .tk-company-pullquote-wrap { max-width: 680px; } .tk-company-pullquote-lead { font-size: 16px; color: var(--ink); line-height: 1.65; margin: 0 0 22px; } .tk-company-pullquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.35; color: var(--navy-deep); margin: 0; letter-spacing: -0.01em; padding-left: 22px; border-left: 3px solid var(--amber); } /* ---------- our belief: editorial two-column split -- a short label + statement anchored on the left, the supporting explanation on the right, rather than one long stacked column. ---------- */ /* ---------- our belief: the statement is the whole point of the section, so it gets full width to breathe -- not squeezed into a narrow column where five short line-breaks make it read as clutter instead of a single confident claim. Supporting copy sits below it, in a normal readable column. ---------- */ .tk-belief-split { max-width: 820px; } .tk-belief-split .tk-belief-statement { max-width: none; } .tk-belief-split-body { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; max-width: 620px; } .tk-belief-split-body p { font-size: 16px; color: var(--ink); margin: 0; line-height: 1.7; } /* ---------- design principles: a real 2x2 grid of substantial cards, each with its own color identity -- not a thin horizontal timeline with small type, which read as an afterthought rather than four things the whole product is actually built on. ---------- */ .tk-principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .tk-principle-card { position: relative; overflow: hidden; min-height: 300px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px 32px 30px; opacity: 0; transform: translateY(16px); transition: opacity 560ms cubic-bezier(.2,.7,.3,1), transform 560ms cubic-bezier(.2,.7,.3,1), border-color 220ms ease, box-shadow 220ms ease; } .tk-principle-card-in { opacity: 1; transform: translateY(0); } .tk-principle-card:hover { border-color: color-mix(in srgb, var(--principle-accent, var(--violet)) 40%, var(--line)); box-shadow: 0 24px 48px -28px rgba(23,12,51,0.28); } .tk-principle-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--principle-accent, var(--violet)); } .tk-principle-num { position: absolute; top: 22px; right: 28px; font-family: var(--font-display); font-weight: 700; font-size: 56px; color: var(--principle-accent, var(--violet)); opacity: 0.1; line-height: 1; pointer-events: none; } .tk-principle-icon { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--principle-accent, var(--violet)) 14%, transparent); color: var(--principle-accent, var(--violet)); } .tk-principle-card h4 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy-deep); margin: 0 0 10px; letter-spacing: -0.005em; } .tk-principle-card p { position: relative; z-index: 1; font-size: 14.5px; color: var(--slate); margin: 0; line-height: 1.65; max-width: 380px; } @media (max-width: 760px) { .tk-principles-grid { grid-template-columns: 1fr; } .tk-principle-num { font-size: 44px; top: 20px; right: 24px; } /* the shared min-height exists to match cards within a 2-column row -- once they stack single-file on mobile there's no row to match, so it just leaves dead space under short entries */ .tk-principle-card { min-height: 0; padding: 28px 24px 26px; } } /* ---------- backed-by / parent-company credit ---------- */ .tk-backed-section { max-width: 780px; } .tk-backed-text { font-size: 16px; color: var(--ink); line-height: 1.7; margin: 0; max-width: 640px; } .tk-backed-text + .tk-backed-text { margin-top: 14px; } .tk-team-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 44px 0 20px; } .tk-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* whole card is the link now -- a large square photo fills the top of the card so every teammate is clearly visible, the role badge sits over the photo's bottom-left corner, and the name + "view profile" cue sit in a body block underneath. Every card lines up the same way regardless of how long a name is. */ .tk-team-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; color: inherit; overflow: hidden; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .tk-team-card:hover { border-color: rgba(124,92,252,0.4); transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 48px -22px rgba(23,12,51,0.32); } .tk-team-photo-wrap { position: relative; width: 100%; padding-top: 100%; flex-shrink: 0; background: var(--paper-alt); overflow: hidden; } .tk-team-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform 400ms ease; } .tk-team-card:hover .tk-team-photo { transform: scale(1.05); } .tk-team-role { position: absolute; left: 14px; bottom: 14px; z-index: 1; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(23,12,51,0.35); } .tk-team-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 26px; } .tk-team-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy-deep); line-height: 1.3; margin: 0; } .tk-team-cta { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: var(--slate); transition: color 160ms ease; } .tk-team-card:hover .tk-team-cta { color: var(--violet); } @media (max-width: 900px) { .tk-team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tk-team-grid { grid-template-columns: 1fr; } } /* ============================================================ ONE PLATFORM -- premium showcase placeholder ============================================================ */ .tk-platform { text-align: center; } .tk-platform-stage-wrap { max-width: 980px; margin: 0 auto; } .tk-platform-stage { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(165deg, #17123c 0%, #241c56 48%, #150f3b 100%); box-shadow: 0 70px 140px -50px rgba(21,15,59,0.55), 0 0 0 1px rgba(255,255,255,0.07) inset; } .tk-platform-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 340px at 12% 8%, rgba(124,92,252,0.35), transparent 60%), radial-gradient(520px 320px at 90% 92%, rgba(255,122,69,0.24), transparent 60%), radial-gradient(700px 420px at 50% 46%, rgba(217,70,239,0.12), transparent 65%); } .tk-platform-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%); } .tk-platform-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 22px 30px; border-bottom: 1px solid rgba(255,255,255,0.08); } .tk-platform-chrome-dots { display: flex; gap: 6px; } .tk-platform-chrome-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); display: block; } .tk-platform-chrome-url { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.55); flex: 1; text-align: center; } .tk-platform-chrome-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); flex-shrink: 0; } .tk-platform-chrome-dot { width: 6px; height: 6px; border-radius: 50%; background: #35B06B; box-shadow: 0 0 0 3px rgba(53,176,107,0.2); } .tk-platform-body { position: relative; z-index: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 32px; } .tk-platform-orbit { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 0 auto; } .tk-platform-orbit svg { width: 100%; height: 100%; } .tk-platform-orbit-ring { fill: none; stroke: rgba(255,255,255,0.14); stroke-dasharray: 2 7; } .tk-platform-orbit-spin { transform-origin: 260px 260px; animation: tk-orbit-spin 50s linear infinite; } .tk-platform-orbit-spin-rev { animation-direction: reverse; animation-duration: 64s; } @keyframes tk-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tk-platform-orbit-node { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.32); } .tk-platform-orbit-node-fill { fill: #fff; } .tk-platform-orbit-label { font-family: var(--font-mono); font-size: 10.5px; fill: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.06em; } .tk-platform-orbit-line { stroke: rgba(255,255,255,0.16); stroke-width: 1; } .tk-platform-orbit-hub { filter: drop-shadow(0 0 26px rgba(217,70,239,0.55)); } .tk-platform-orbit-hub-pulse { animation: tk-hub-pulse 3.6s ease-in-out infinite; transform-origin: 260px 260px; } @keyframes tk-hub-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .tk-platform-orbit-spin, .tk-platform-orbit-hub-pulse { animation: none; } } .tk-platform-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 30px; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .tk-platform-footer-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .tk-platform-footer-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 14px; } .tk-platform-footer-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: tk-pulse-dot 2.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .tk-platform-footer-badge-dot { animation: none; } } @media (max-width: 640px) { .tk-platform-body { min-height: 260px; padding: 28px 20px; } .tk-platform-orbit { max-width: 260px; } .tk-platform-chrome-url { display: none; } } /* ============================================================ SIX REASONS -- "The Screening Room": a dark, letterboxed stage with a horizontal filmstrip selector. Deliberately breaks from the light card / tab patterns used elsewhere. ============================================================ */ .tk-reasons-cinema { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(1400px 700px at 50% -12%, rgba(124,92,252,0.16), transparent 60%), linear-gradient(180deg, #0B0821 0%, #150F3B 55%, #0B0821 100%); overflow: hidden; } .tk-reasons-cinema-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .tk-reasons-cinema-glow::before, .tk-reasons-cinema-glow::after { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(120px); opacity: 0.32; transition: background 700ms ease; } .tk-reasons-cinema-glow::before { top: -240px; left: 6%; background: var(--reason-accent-1, #7C5CFC); animation: tk-reasons-drift-a 16s ease-in-out infinite; } .tk-reasons-cinema-glow::after { bottom: -260px; right: 4%; background: var(--reason-accent-2, #D946EF); animation: tk-reasons-drift-b 18s ease-in-out infinite; } @keyframes tk-reasons-drift-a { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px, 34px) scale(1.14); } } @keyframes tk-reasons-drift-b { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-36px, -28px) scale(1.1); } } .tk-reasons-cinema-scanlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity: 0.5; } .tk-reasons-cinema-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(1100px 640px at 50% 42%, transparent 45%, rgba(6,4,20,0.68) 100%); } .tk-reasons-cinema-inner { position: relative; z-index: 2; } .tk-reasons-cinema-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .tk-reasons-cinema-eyebrow { color: rgba(255,255,255,0.6) !important; display: inline-flex !important; align-items: center; gap: 8px; justify-content: center; } .tk-reasons-cinema-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--reason-accent-1, #7C5CFC); box-shadow: 0 0 10px 2px var(--reason-accent-1, #7C5CFC); transition: background 400ms ease; } .tk-reasons-cinema-h2 { color: #fff !important; } /* the screen */ .tk-reasons-screen { position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); box-shadow: 0 60px 120px -50px rgba(0,0,0,0.65); overflow: hidden; } .tk-reasons-sprockets { height: 16px; background-image: radial-gradient(circle, rgba(255,255,255,0.16) 0 3px, transparent 3.5px); background-size: 24px 100%; background-position: center; background-repeat: repeat-x; background-color: rgba(0,0,0,0.18); } .tk-reasons-screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .tk-reasons-screen-bar span:first-child { color: var(--reason-accent-1, #7C5CFC); transition: color 400ms ease; } .tk-reasons-screen-body { position: relative; padding: 46px 44px 40px; min-height: 380px; overflow: hidden; } .tk-reasons-screen-num { position: absolute; right: 24px; top: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(120px, 16vw, 220px); line-height: 1; color: rgba(255,255,255,0.05); user-select: none; pointer-events: none; } .tk-reasons-screen-eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--reason-accent-1, #7C5CFC); margin: 0 0 18px; position: relative; transition: color 400ms ease; } .tk-reasons-screen-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; margin: 0 0 18px; color: #fff; max-width: 640px; position: relative; } .tk-reasons-screen-h3 span { color: rgba(255,255,255,0.5); font-weight: 500; } .tk-reasons-screen-desc { font-size: 15.5px; color: rgba(255,255,255,0.62); line-height: 1.7; max-width: 560px; margin: 0 0 36px; position: relative; } .tk-reasons-screen-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } .tk-reasons-feature-cine-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--reason-accent-1, #7C5CFC), var(--reason-accent-2, #D946EF)); color: #fff; margin-bottom: 12px; transition: background 400ms ease; } .tk-reasons-feature-cine-title { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 4px; } .tk-reasons-feature-cine-body { font-size: 12.5px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.55; } .tk-reasons-caption-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; background: rgba(0,0,0,0.28); border-top: 1px solid rgba(255,255,255,0.08); } .tk-reasons-caption-bar strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; } .tk-reasons-caption-bar span { font-size: 12.5px; color: rgba(255,255,255,0.5); } .tk-reasons-caption-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); flex-shrink: 0; } /* filmstrip nav */ .tk-reasons-filmstrip { display: flex; gap: 12px; margin-top: 28px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .tk-reasons-filmstrip::-webkit-scrollbar { display: none; } .tk-reasons-frame { flex: 1 1 0; min-width: 132px; text-align: left; cursor: pointer; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); position: relative; transition: border-color 220ms ease, background 220ms ease, transform 220ms ease; } .tk-reasons-frame:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); } .tk-reasons-frame-active { border-color: var(--reason-accent-1, #7C5CFC); background: rgba(255,255,255,0.07); } .tk-reasons-frame-sprockets { display: block; height: 8px; background-image: radial-gradient(circle, rgba(255,255,255,0.14) 0 1.6px, transparent 2px); background-size: 12px 100%; background-position: center; background-repeat: repeat-x; } .tk-reasons-frame-body { display: block; padding: 12px 12px 10px; } .tk-reasons-frame-num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4); display: block; margin-bottom: 4px; } .tk-reasons-frame-active .tk-reasons-frame-num { color: var(--reason-accent-1, #7C5CFC); } .tk-reasons-frame-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); line-height: 1.3; display: block; } .tk-reasons-frame-active .tk-reasons-frame-title { color: #fff; } .tk-reasons-frame-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--reason-accent-1, #7C5CFC); } @media (max-width: 900px) { .tk-reasons-screen-features { grid-template-columns: 1fr; gap: 20px; } .tk-reasons-screen-body { padding: 40px 26px 30px; } .tk-reasons-screen-num { font-size: 96px; top: 0; right: 12px; } } @media (max-width: 640px) { .tk-reasons-caption-bar { flex-direction: column; align-items: flex-start; } .tk-reasons-frame { min-width: 112px; } .tk-reasons-screen-num { display: none; } } /* ============================================================ PLATFORM INDEX -- "Every module, indexed." ============================================================ */ .tk-platform-index { background: var(--paper); } .tk-pindex-rail { display: flex; align-items: center; margin: 0 0 40px; max-width: 640px; } .tk-pindex-rail-node { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: #fff; border: 1.5px solid var(--line); color: var(--navy-deep); } .tk-pindex-rail-node-amber { border-color: var(--amber); color: var(--amber); } .tk-pindex-rail-node-violet { border-color: var(--violet); color: var(--violet); } .tk-pindex-rail-node-navy { border-color: var(--navy); color: var(--navy); } .tk-pindex-rail-seg { flex: 1 1 auto; height: 1.5px; margin: 0 2px; background-image: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px); } .tk-pindex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tk-pindex-card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 22px 22px 20px; display: flex; flex-direction: column; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .tk-pindex-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -22px rgba(23,12,51,0.28); } .tk-pindex-card-amber:hover { border-color: var(--amber); } .tk-pindex-card-violet:hover { border-color: var(--violet); } .tk-pindex-card-navy:hover { border-color: var(--navy); } .tk-pindex-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .tk-pindex-card-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--slate); } .tk-pindex-card-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); background: var(--paper-alt); border-radius: 999px; padding: 3px 9px; } .tk-pindex-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-deep); margin: 0 0 6px; } .tk-pindex-card-sub { font-size: 13.5px; color: var(--slate); font-style: italic; margin: 0 0 16px; line-height: 1.4; } .tk-pindex-card-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); } .tk-pindex-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 8px; margin-left: -12px; transition: background 160ms ease, border-color 160ms ease; } .tk-pindex-row-accented { border-left-color: var(--row-accent, transparent); } .tk-pindex-row-accented:hover { background: color-mix(in srgb, var(--row-accent, transparent) 10%, transparent); } .tk-pindex-row-anchor { display: flex; align-items: center; gap: 10px; width: 100%; color: inherit; text-decoration: none; } .tk-pindex-row-chip { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; padding: 4px 8px; border-radius: 6px; color: var(--row-accent, var(--slate)); background: color-mix(in srgb, var(--row-accent, var(--slate)) 16%, transparent); } .tk-pindex-row-name { font-size: 14px; color: var(--ink); flex: 1 1 auto; } .tk-pindex-row-arrow { color: var(--line); flex-shrink: 0; transition: color 160ms ease, transform 160ms ease; } .tk-pindex-row:hover .tk-pindex-row-arrow { color: var(--row-accent, var(--navy-deep)); transform: translate(1px, -1px); } .tk-pindex-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-deep); text-decoration: none; opacity: 0.72; transition: opacity 160ms ease, gap 160ms ease; } .tk-pindex-card-link:hover { opacity: 1; gap: 9px; } @media (max-width: 900px) { .tk-pindex-grid { grid-template-columns: 1fr; } .tk-pindex-rail { max-width: none; } } /* ============================================================ AGENT LANDING PAGES -- one page per agent (/product/[slug]). Shared hero + stat-rail + fan/mockup pieces used across the six pages so they read as one family while each page's own icon, copy, and "how it works" visual keep it from feeling like six copies of the same template. ============================================================ */ /* ---------- hero: animation-free, full-width copy ---------- The signature per-agent animation used to sit in a stage to the right of the copy here; it now lives in the Problem section just below instead, so the hero is copy-only and the headline and lede are free to use the section's whole width rather than share it with a visual column. */ .tk-agent-hero { padding: 108px 0 64px; position: relative; overflow: hidden; } .tk-agent-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 420px at 92% -10%, var(--agent-glow, rgba(217,38,239,0.12)), transparent 60%); } .tk-agent-hero .tk-section-inner { position: relative; z-index: 1; max-width: 1260px; } .tk-agent-hero-full { display: block; } .tk-agent-hero-copy { max-width: 560px; } /* full-width hero variant: headline gets the same large, full-bleed treatment as the homepage's main statement now that it isn't sharing the row with a visual stage; the lede stays capped at a readable line length instead of stretching edge to edge */ .tk-agent-hero-full .tk-agent-hero-copy { max-width: 1080px; } .tk-agent-hero-full h1.tk-h1 { font-size: clamp(38px, 5.6vw, 64px); max-width: 1080px; } .tk-agent-hero-full .tk-lede { max-width: 640px; } .tk-agent-hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; margin-bottom: 26px; } .tk-agent-hero-badge-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--agent-soft, var(--amber-soft)); } .tk-agent-hero-badge-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); } .tk-agent-hero-badge-text strong { color: var(--ink); font-weight: 600; } .tk-agent-hero h1 { margin-bottom: 20px; } .tk-agent-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .tk-agent-hero-cta-note { font-size: 13px; color: var(--slate); } /* re-used as the animation stage in the Problem section below (previously the hero's right-hand column) */ .tk-agent-hero-stage { position: relative; width: 100%; max-width: 600px; min-height: 460px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } @media (max-width: 1080px) { .tk-agent-hero .tk-section-inner { max-width: 1080px; } .tk-agent-hero-stage { max-width: 480px; min-height: 400px; } } @media (max-width: 860px) { .tk-agent-hero-stage { max-width: 420px; min-height: 340px; } } @media (max-width: 480px) { .tk-agent-hero-stage { max-width: 100%; min-height: 300px; } } /* ---------- problem section: copy left, signature agent animation right -- the animation that used to live in the hero now opens this section instead. Any extra content the section carries (e.g. the before/after stat comparison) sits below, spanning the section's full width rather than being squeezed into the copy column. ---------- */ .tk-agent-problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; margin-bottom: 8px; } .tk-agent-problem-copy { max-width: 560px; } @media (max-width: 900px) { .tk-agent-problem-grid { grid-template-columns: 1fr; gap: 40px; } .tk-agent-problem-copy { max-width: 100%; } } /* ============================================================ HERO ANIMATION PRIMITIVES -- shared visual language for the six agent hero animations (components/troviq/agents/hero- animations/*). Generic node/pill/card/line building blocks so every agent's animation reads as the same instrument family, even though each one tells a different story. Positioning is data-driven per component (inline left/top %), sizing and color language lives here. ============================================================ */ .tk-ha-stage { position: relative; width: 100%; min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tk-ha-node { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--agent-accent, var(--amber)); border: 2px solid #fff; box-shadow: 0 0 0 4px var(--agent-soft, var(--amber-soft)), 0 3px 8px -2px rgba(23,17,54,0.35); transform: translate(-50%, -50%); } .tk-ha-node-muted { background: var(--slate); box-shadow: 0 0 0 4px var(--paper-alt); opacity: 0.5; border-color: #fff; } .tk-ha-core { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3; } .tk-ha-core-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--agent-accent, var(--amber)); box-shadow: 0 6px 16px -6px rgba(23,17,54,0.4); } .tk-ha-core-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-deep); white-space: nowrap; } .tk-ha-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; font-weight: 500; color: var(--ink); white-space: nowrap; pointer-events: none; } .tk-ha-pill { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -10px rgba(23,17,54,0.32); font-size: 12.5px; color: var(--ink); white-space: nowrap; z-index: 2; } .tk-ha-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--agent-accent, var(--amber)); flex-shrink: 0; } .tk-ha-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .tk-ha-line { stroke: var(--line); stroke-width: 1.1; fill: none; } .tk-ha-line-accent { stroke: var(--agent-accent, var(--amber)); stroke-width: 1.4; fill: none; } .tk-ha-card { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 24px 52px -22px rgba(23,17,54,0.32); z-index: 4; width: max-content; max-width: 250px; } .tk-ha-card-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--agent-accent, var(--amber)); margin-bottom: 8px; display: block; } .tk-ha-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy-deep); margin: 0 0 10px; } .tk-ha-card-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; padding: 4px 0; } .tk-ha-card-row span:first-child { color: var(--slate); } .tk-ha-card-row span:last-child { color: var(--ink); font-weight: 600; } .tk-ha-status-pill { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); z-index: 4; } .tk-ha-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); } .tk-ha-caption { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); white-space: nowrap; text-align: center; } .tk-ha-count { font-family: var(--font-mono); font-size: 13px; color: var(--navy-deep); font-weight: 600; } @media (max-width: 860px) { .tk-ha-stage { min-height: 300px; } .tk-ha-card { max-width: 200px; padding: 14px 16px; } .tk-ha-pill { font-size: 11.5px; padding: 6px 12px; } .tk-ha-label { font-size: 10.5px; } } /* ---------- compass hero: a real competitive landscape, laid out as a simple vertical list -- normal block flow, so nothing can ever overlap regardless of how narrow the stage is. Your company sits above the list; competitor rows stack below it; a gap row grows open between two of them and the opportunity lands inside that gap, pushing the rows apart instead of floating over them. ---------- */ .tk-cp-hero { justify-content: flex-start; padding-top: 26px; } .tk-cp-wrap { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .tk-cp-you { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; } .tk-cp-you-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--navy-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; flex-shrink: 0; } .tk-cp-you-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-deep); font-weight: 600; } .tk-cp-list { width: 100%; display: flex; flex-direction: column; gap: 8px; } .tk-cp-row { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; } .tk-cp-row-logo { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #fff; } .tk-cp-row-body { min-width: 0; flex: 1; } .tk-cp-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; } .tk-cp-row-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--navy-deep); white-space: nowrap; } .tk-cp-row-line { font-size: 11.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-cp-row-category { flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--paper-alt); color: var(--slate); font-weight: 600; white-space: nowrap; } .tk-cp-gap-row { width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tk-cp-gap-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; background: var(--agent-accent, var(--amber)); color: #fff; box-shadow: 0 10px 22px -10px rgba(23,17,54,0.4); white-space: nowrap; } .tk-cp-gap-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; flex-shrink: 0; } .tk-cp-gap-cat { font-family: var(--font-mono); font-size: 10px; color: var(--slate); } @media (max-width: 480px) { .tk-cp-row-line { display: none; } } /* ---------- competitor intelligence hero: scanned site card + timeline ---------- */ .tk-ci-hero { display: flex; align-items: center; gap: 28px; padding: 20px; width: 100%; } .tk-ci-hero-card { position: relative; flex: 1 1 56%; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 44px -22px rgba(23,17,54,0.28); } .tk-ci-hero-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--paper-alt); border-bottom: 1px solid var(--line); } .tk-ci-hero-bar span:not(.tk-ci-hero-url) { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .tk-ci-hero-url { margin-left: 6px; font-size: 13px; color: var(--slate); } .tk-ci-hero-rows { position: relative; padding: 6px 18px; } .tk-ci-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 0; border-bottom: 1px solid var(--line); position: relative; } .tk-ci-hero-row:last-child { border-bottom: none; } .tk-ci-hero-row-label { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.05em; color: var(--ink); font-weight: 500; } .tk-ci-hero-row-scan { animation: tk-ci-row-pulse 3.2s ease-in-out; } @keyframes tk-ci-row-pulse { 0%, 100% { background: transparent; } 45% { background: var(--agent-soft, var(--amber-soft)); } } .tk-ci-hero-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 600; } .tk-ci-hero-tag-changed { background: var(--agent-soft, var(--amber-soft)); color: var(--agent-accent, var(--amber)); } .tk-ci-hero-tag-unchanged { background: var(--paper-alt); color: var(--slate); } .tk-ci-scanline { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--agent-accent, var(--amber)), transparent); box-shadow: 0 0 10px 1px var(--agent-soft, var(--amber-soft)); animation: tk-ci-scan-sweep 3.2s linear; z-index: 2; } @keyframes tk-ci-scan-sweep { 0% { top: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .tk-ci-hero-side { flex: 1 1 44%; display: flex; flex-direction: column; gap: 22px; } .tk-ci-hero-timeline { display: flex; flex-direction: column; gap: 16px; } .tk-ci-hero-event { display: flex; flex-direction: column; gap: 3px; } .tk-ci-hero-event-time { font-size: 11.5px; color: var(--agent-accent, var(--amber)); font-weight: 600; } .tk-ci-hero-event-label { font-size: 15px; color: var(--ink); } .tk-ci-hero-summary { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); } .tk-ci-hero-summary-n { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy-deep); } .tk-ci-hero-summary-tag { font-family: var(--font-mono); font-size: 12.5px; color: var(--agent-accent, var(--amber)); letter-spacing: 0.03em; } @media (max-width: 860px) { .tk-ci-hero { flex-direction: column; padding: 12px; } .tk-ci-hero-card, .tk-ci-hero-side { flex: 1 1 auto; width: 100%; } } /* ---------- reach hero: same starting message, split three ways -- three named prospects each get their own personalized line, then everything funnels into one review-and-approve gate before it's allowed to send anywhere. The approval step is the whole point, so it's a real, separate beat -- not folded into the message. ---------- */ .tk-rc-hero { justify-content: flex-start; padding-top: 30px; } .tk-rc-recipients { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 400px; } .tk-rc-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); } .tk-rc-row:last-child { border-bottom: none; } .tk-rc-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; background: var(--agent-accent, var(--amber)); } .tk-rc-body { min-width: 0; flex: 1; } .tk-rc-name-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; } .tk-rc-name { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--navy-deep); } .tk-rc-role { font-size: 11.5px; color: var(--slate); } .tk-rc-line { font-size: 12.5px; line-height: 1.55; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-rc-line-personal { color: var(--ink); } .tk-rc-line-personal strong { color: var(--agent-accent, var(--amber)); font-weight: 600; } .tk-rc-gate-slot { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; } .tk-rc-gate { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; } .tk-rc-gate-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px 22px; border-radius: 999px; background: var(--navy-deep); color: #fff; border: none; } .tk-rc-gate-btn-done { background: var(--green); } .tk-rc-gate-note { font-size: 11.5px; color: var(--slate); } .tk-rc-channels { display: flex; gap: 22px; } .tk-rc-channel { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); } .tk-rc-channel-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--agent-accent, var(--amber)); } /* ---------- scout hero: magnifying-glass sweep over the browser body ---------- */ .tk-sc-lens { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--agent-accent, var(--amber)); background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), transparent 60%), rgba(255, 200, 120, 0.08); box-shadow: 0 6px 16px -6px rgba(23,17,54,0.35); pointer-events: none; z-index: 2; } .tk-sc-lens::after { content: ""; position: absolute; width: 2px; height: 16px; background: var(--agent-accent, var(--amber)); border-radius: 2px; right: -7px; bottom: -4px; transform: rotate(45deg); } /* ---------- scout hero: a compact browser scan + extracted field list + hand-off to the rest of the platform ---------- */ .tk-sc-hero { flex-direction: column; justify-content: flex-start; padding: 34px 10px 10px; gap: 22px; } /* fixed-height slot: reserved regardless of which phase's content is inside it, so the browser above it is never asked to move to make room for something appearing or disappearing below. */ .tk-sc-below { width: 100%; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tk-sc-browser { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(23,17,54,0.28); } .tk-sc-browser-body { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 90px; } .tk-sc-browser-line { height: 9px; border-radius: 4px; background: var(--paper-alt); transition: background 500ms ease; } .tk-sc-browser-line-lg { width: 70%; } .tk-sc-browser-line-md { width: 50%; } .tk-sc-browser-block { height: 30px; border-radius: 8px; background: var(--paper-alt); transition: background 500ms ease; } .tk-sc-browser-line-scan { animation: tk-sc-line-pulse 2.6s ease-in-out; } @keyframes tk-sc-line-pulse { 0%, 100% { background: var(--paper-alt); } 40% { background: var(--agent-soft, var(--amber-soft)); } } .tk-sc-fields { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 3px; } .tk-sc-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .tk-sc-field-row:last-child { border-bottom: none; } .tk-sc-field-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); flex-shrink: 0; } .tk-sc-field-value { font-size: 13.5px; color: var(--navy-deep); text-align: right; } .tk-sc-distribute { display: flex; flex-direction: column; align-items: center; gap: 18px; } .tk-sc-distribute-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); } .tk-sc-distribute-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .tk-sc-recipient { display: flex; flex-direction: column; align-items: center; gap: 8px; } .tk-sc-recipient-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -12px rgba(23,17,54,0.3); } .tk-sc-recipient-label { font-family: var(--font-mono); font-size: 11px; color: var(--slate); } @media (max-width: 640px) { .tk-sc-fields { max-width: 320px; } .tk-sc-distribute-row { gap: 14px; } /* field values are full sentences -- at this width they're more likely to wrap onto a second line, so the reserved area needs more headroom here than the desktop 190px gives it */ .tk-sc-below { height: 280px; } .tk-sc-field-value { flex: 1 1 auto; min-width: 0; } } /* ---------- pulse hero: scattered performance signals -> one clean line ---------- */ .tk-pl-hero { flex-direction: column; justify-content: flex-start; padding-top: 40px; gap: 20px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } .tk-pl-sources { display: flex; gap: 28px; align-items: flex-end; justify-content: center; } .tk-pl-source { display: flex; flex-direction: column; align-items: center; gap: 8px; } .tk-pl-source-svg { width: 64px; height: 42px; } .tk-pl-source-path { fill: none; stroke: var(--agent-accent, var(--amber)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; } .tk-pl-source-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); } .tk-pl-signal { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .tk-pl-signal-svg { width: 100%; height: 100px; } .tk-pl-signal-path { fill: none; stroke: var(--agent-accent, var(--amber)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .tk-pl-below { width: 100%; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; } .tk-pl-metrics { display: flex; gap: 36px; } .tk-pl-metric { display: flex; flex-direction: column; align-items: center; gap: 4px; } .tk-pl-metric-value { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy-deep); } .tk-pl-metric-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); } .tk-pl-insight-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); } .tk-pl-insight { font-size: 14px; color: var(--ink); text-align: center; max-width: 340px; margin: 0; } .tk-pl-insight strong { color: var(--agent-accent, var(--amber)); } .tk-pl-loop { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--slate); } @media (max-width: 640px) { .tk-pl-sources { gap: 16px; } .tk-pl-metrics { gap: 22px; } /* the insight sentence and metrics row both wrap onto more lines at this width, so the reserved slot needs more room than the desktop 128px to avoid clipping */ .tk-pl-below { height: 210px; } } /* ---------- website studio hero: a real browser frame under construction ---------- */ .tk-ws-stage { justify-content: flex-start; padding-top: 24px; } .tk-ws-frame { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 56px -24px rgba(23,17,54,0.3); } .tk-ws-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--paper-alt); border-bottom: 1px solid var(--line); } .tk-ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .tk-ws-url { margin-left: 6px; font-size: 12px; color: var(--slate); flex: 1; } .tk-ws-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); } .tk-ws-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); } .tk-ws-body { padding: 24px; min-height: 300px; display: flex; flex-direction: column; gap: 14px; position: relative; } .tk-ws-empty { position: absolute; inset: 22px; border: 1px dashed var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); } .tk-ws-block { background: var(--paper-alt); border-radius: 8px; transition: background 600ms ease; } .tk-ws-nav { height: 16px; width: 40%; } .tk-ws-navrow { height: 16px; display: flex; align-items: center; justify-content: space-between; } .tk-ws-navrow-live { height: auto; } .tk-ws-navrow-logo { width: 20px; height: 20px; border-radius: 6px; background: var(--agent-accent, var(--violet)); flex-shrink: 0; } .tk-ws-navrow-links { display: flex; gap: 18px; } .tk-ws-navrow-links span { font-size: 12.5px; color: var(--slate); font-weight: 500; } .tk-ws-hero { height: 118px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 18px; gap: 8px; } .tk-ws-row { display: flex; gap: 10px; } .tk-ws-feature { height: 42px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0; justify-content: center; } .tk-ws-feature-live { justify-content: flex-start; padding: 0 12px; } .tk-ws-feature-icon { color: var(--agent-accent, var(--violet)); flex-shrink: 0; } .tk-ws-feature-label { font-size: 12px; font-weight: 500; color: var(--navy-deep); white-space: nowrap; } .tk-ws-proof { height: 18px; width: 60%; } .tk-ws-proofrow { min-height: 32px; display: flex; align-items: center; gap: 12px; } .tk-ws-proof-avatars { display: flex; flex-shrink: 0; } .tk-ws-proof-avatars span { width: 24px; height: 24px; border-radius: 50%; background: var(--agent-soft, var(--violet-soft)); border: 2px solid #fff; margin-left: -8px; } .tk-ws-proof-avatars span:first-child { margin-left: 0; } .tk-ws-proof-quote { font-family: var(--font-display); font-size: 13.5px; font-style: italic; color: var(--navy-deep); } .tk-ws-ctarow { display: flex; align-items: center; gap: 16px; } .tk-ws-cta { height: 34px; width: 110px; border-radius: 999px; } .tk-ws-secondary-link { font-size: 12.5px; color: var(--slate); font-weight: 500; } .tk-ws-block-live { background: var(--agent-soft, var(--violet-soft)); } .tk-ws-cta.tk-ws-block-live { background: var(--navy-deep); } .tk-ws-copy { display: flex; flex-direction: column; gap: 8px; width: 100%; } .tk-ws-copy-h { display: block; height: 14px; width: 78%; background: var(--slate); opacity: 0.35; border-radius: 4px; } .tk-ws-copy-s { display: block; height: 9px; width: 55%; background: var(--slate); opacity: 0.22; border-radius: 4px; } .tk-ws-copy-cta { display: block; height: 24px; width: 96px; background: var(--line); border-radius: 999px; margin-top: 6px; transition: background 500ms ease; } .tk-ws-copy-cta-live { background: var(--agent-accent, var(--violet)); } .tk-ws-prompt { transform: translate(-50%, -50%); } @media (max-width: 860px) { .tk-ws-body { min-height: 220px; padding: 16px; } .tk-ws-hero { height: 92px; } .tk-ws-navrow-links { gap: 12px; } .tk-ws-navrow-links span { font-size: 11px; } .tk-ws-proof-quote { font-size: 12px; } } /* ---------- stat rail: compact "traditional way -> troviqai way" strip, distinct from tk-story-flow's card treatment -- used inline within the problem paragraph instead of as its own boxed section ---------- */ .tk-agent-stat-rail { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; background: var(--paper-alt); border-left: 3px solid var(--agent-accent, var(--amber)); margin: 8px 0 44px; } .tk-agent-stat { text-align: left; } .tk-agent-stat-value { font-family: var(--font-mono); font-size: 26px; color: var(--navy-deep); line-height: 1; margin-bottom: 6px; } .tk-agent-stat-label { font-size: 12.5px; color: var(--slate); max-width: 200px; line-height: 1.4; } .tk-agent-stat-arrow { color: var(--agent-accent, var(--amber)); flex-shrink: 0; } .tk-agent-stat-after .tk-agent-stat-value { color: var(--agent-accent, var(--amber)); } @media (max-width: 560px) { .tk-agent-stat-rail { padding: 20px; gap: 14px; } } /* ---------- channel fan: content agent's "one workspace, every channel" visual -- a loose fanned deck rather than a flat grid ---------- */ .tk-fan { position: relative; height: 260px; display: flex; align-items: center; justify-content: center; } .tk-fan-card { position: absolute; width: 168px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(23,17,54,0.25); transition: transform 320ms ease, box-shadow 320ms ease; } .tk-fan-card:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 26px 48px -20px rgba(23,17,54,0.32); z-index: 5; } .tk-fan-card-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .tk-fan-card h5 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--navy-deep); margin: 0 0 4px; } .tk-fan-card p { font-size: 12px; color: var(--slate); margin: 0; line-height: 1.4; } @media (max-width: 620px) { .tk-fan { height: auto; flex-direction: column; gap: 14px; padding: 12px 0; } .tk-fan-card { position: static; width: 100%; transform: none !important; } } /* ---------- outreach message preview: a drafted, reviewable message, not a live chat -- deliberately styled like a card waiting for approval rather than a messaging app ---------- */ .tk-message-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 24px 56px -28px rgba(23,17,54,0.28); } .tk-message-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .tk-message-to { font-size: 13.5px; color: var(--ink); } .tk-message-to strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--navy-deep); margin-bottom: 2px; } .tk-message-channel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); white-space: nowrap; } .tk-message-body { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 18px; } .tk-message-highlight { background: var(--violet-soft); color: var(--violet); padding: 1px 5px; border-radius: 4px; font-weight: 600; } .tk-message-actions { display: flex; align-items: center; gap: 10px; } .tk-message-approve { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 8px; background: var(--navy-deep); color: #fff; border: none; } .tk-message-edit { font-family: var(--font-mono); font-size: 12px; color: var(--slate); padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: transparent; } .tk-message-tag { margin-top: 16px; } /* ---------- nav "Product" panel: quiet, static, a single roomy list -- no blur, no glow, a short fade + 6px slide and nothing else ---------- */ .tk-nav-item { position: relative; display: flex; align-items: center; height: 100%; } .tk-nav-panel { position: absolute; top: calc(100% + 10px); left: -22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px -22px rgba(23,17,54,0.20); padding: 14px; width: 400px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; } .tk-nav-panel-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .tk-nav-panel-list { display: flex; flex-direction: column; gap: 2px; } .tk-nav-panel-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: 10px; transition: background 140ms ease; } .tk-nav-panel .tk-nav-panel-row { font-size: 14px; color: var(--ink); letter-spacing: 0; } .tk-nav-panel-row:hover { background: var(--paper-alt); color: var(--ink); } .tk-nav-panel-row-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .tk-nav-panel-row-text { display: flex; flex-direction: column; gap: 3px; } .tk-nav-panel-row-title { font-weight: 600; color: var(--navy-deep); font-size: 14px; } .tk-nav-panel-row-sub { font-size: 12.5px; color: var(--slate); line-height: 1.4; } .tk-nav-panel-foot { display: flex; align-items: center; gap: 6px; margin: 6px 4px 2px; padding-top: 14px; border-top: 1px solid var(--line); } .tk-nav-panel .tk-nav-panel-foot { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--slate); } .tk-nav-panel-foot:hover { color: var(--navy-deep); } /* reset the top-level nav link treatment (sliding underline, reduced opacity) so it doesn't bleed into the panel's own link rows -- .tk-nav-panel a matches .tk-nav-links a in specificity, so this relies on appearing later in the sheet to win the tie */ .tk-nav-panel a { opacity: 1; padding-bottom: 0; font-weight: 400; position: static; transition: none; } .tk-nav-panel a::after { content: none; } @media (prefers-reduced-motion: reduce) { .tk-nav-panel { transition: opacity 120ms ease; } } @media (max-width: 900px) { .tk-nav-panel { display: none; } } /* ============================================================ AGENT PAGES -- EDITORIAL REDESIGN LAYER Scoped entirely under .tk-agent-page so nothing here touches the homepage, /product, or /solutions. Softer paper tone, more open layouts, fewer generic card shells, larger visual stages, intentional asymmetry. Reuses every existing token (ink / slate / line / agent-accent) -- no new brand colors. ============================================================ */ .tk-agent-page { --paper: #FAF9F6; --paper-alt: #F5F1FB; } .tk-agent-page .tk-section .tk-section-inner { max-width: 1240px; } /* the busy maze pattern reads much louder against the more open agent-page layouts than it does on the denser homepage, so it's toned down here specifically -- and a very soft agent-tinted wash sits behind the "how it works" visuals so any leftover whitespace still feels like an intentional design choice rather than bare background showing through */ .tk-agent-page .tk-flow-zone::before { opacity: 0.08; } .tk-agent-page .tk-section-alt { background: radial-gradient(1300px 780px at 50% 15%, var(--agent-soft), transparent 68%), var(--paper-alt); } /* ---------- agent color identity -- one dominant identity color per agent (accent / soft / dark / signal), set once on the page root via data-agent and inherited everywhere through the existing --agent-accent / --agent-soft custom properties. This replaces repeating an inline style={accentStyle} block on every section: set the attribute once on .tk-root and every descendant -- badges, icons, hero animation, timeline numerals, CTA button -- picks it up automatically. ---------- */ [data-agent="scout"] { --agent-accent: #D97706; --agent-soft: #FEF3E2; --agent-dark: #B45309; --agent-signal: #FBBF24; --agent-glow: rgba(217,119,6,0.12); } [data-agent="compass"] { --agent-accent: #2563EB; --agent-soft: #EAF2FF; --agent-dark: #1D4ED8; --agent-signal: #60A5FA; --agent-glow: rgba(37,99,235,0.12); } [data-agent="hunt"] { --agent-accent: #059669; --agent-soft: #E8F7F1; --agent-dark: #047857; --agent-signal: #34D399; --agent-glow: rgba(5,150,105,0.12); } [data-agent="quill"] { --agent-accent: #A21CAF; --agent-soft: #FCE7F8; --agent-dark: #86198F; --agent-signal: #D946EF; --agent-glow: rgba(162,28,175,0.12); } [data-agent="reach"] { --agent-accent: #0891B2; --agent-soft: #E7F8FA; --agent-dark: #0E7490; --agent-signal: #22D3EE; --agent-glow: rgba(8,145,178,0.12); } [data-agent="website-studio"] { --agent-accent: #7C3AED; --agent-soft: #F0EAFF; --agent-dark: #6D28D9; --agent-signal: #A78BFA; --agent-glow: rgba(124,58,237,0.12); } [data-agent="pulse"] { --agent-accent: #E11D48; --agent-soft: #FFE4E9; --agent-dark: #BE123C; --agent-signal: #FB7185; --agent-glow: rgba(225,29,72,0.12); } /* the agent's CTA button and its own tag/pill on the More Agents grid pick up the identity color automatically -- restrained: this is the ONE button on the page allowed to carry the accent as a fill */ .tk-agent-page .tk-cta-section .tk-btn-primary { background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%), linear-gradient(135deg, var(--agent-accent, var(--violet)), var(--agent-dark, var(--navy-deep))); color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 26px -8px rgba(0,0,0,0.35); } .tk-agent-page .tk-agent-hero .tk-btn-primary { background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%), linear-gradient(135deg, var(--agent-accent, var(--violet)), var(--agent-dark, var(--navy-deep))); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 26px -8px rgba(0,0,0,0.35); } /* the hero's highlighted phrase (.tk-grad-text) otherwise uses the same fixed violet/magenta/pink brand gradient on every page -- on an agent page specifically, that's the single boldest piece of text above the fold, so it should read as that agent's color, not the generic brand one. Same treatment on the "STEP" markers and timeline numerals: those already switch to --agent-accent, this just extends the identity to the one place it was still generic. */ .tk-agent-page .tk-grad-text { background-image: linear-gradient(120deg, var(--agent-accent), var(--agent-signal, var(--agent-accent)) 50%, var(--agent-dark, var(--agent-accent)) 100%); background-size: 220% 220%; } /* section eyebrows ("THE PROBLEM", "HOW IT WORKS") were a fixed amber on every page -- on agent pages that flattens six distinct color identities into one repeated accent every time a new section starts. Switching it to the agent's own accent makes that identity carry through the whole page, not just the hero and the CTA button. */ .tk-agent-page .tk-eyebrow { --eyebrow-bg: var(--agent-accent); } .tk-agent-page .tk-agent-hero-badge { border-color: var(--agent-soft); } /* ---------- data surface: a restrained card for a genuine discrete object (an evidence snippet, a scored list) -- lighter than .tk-artifact's shadowed card, closer to "a bordered panel that clearly contains one dataset" than a floating dashboard tile ---------- */ .tk-agent-data-surface { position: relative; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 32px 36px; } @media (max-width: 640px) { .tk-agent-data-surface { padding: 24px 20px; } } /* ---------- vertical numbered timeline -- the "how it works" spine. A single connecting line down column 1, number + heading + body hung off it -- replaces the 3/4-up horizontal strip on agent pages specifically (the horizontal .tk-timeline is left alone for its other uses on /product). ---------- */ .tk-agent-timeline { position: relative; max-width: 640px; margin: 0 auto; } .tk-agent-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 19px; width: 1px; background: var(--line); } .tk-agent-timeline-step { position: relative; padding: 0 0 44px 60px; opacity: 0; transform: translateY(10px); transition: opacity 560ms ease, transform 560ms ease; } .tk-agent-timeline-step:last-child { padding-bottom: 0; } .tk-agent-timeline-step-in { opacity: 1; transform: translateY(0); } .tk-agent-timeline-num { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--navy-deep); transition: border-color 300ms ease, background 300ms ease, color 300ms ease; } .tk-agent-timeline-step-in .tk-agent-timeline-num { border-color: var(--agent-accent, var(--violet)); background: var(--agent-accent, var(--violet)); color: #fff; } .tk-agent-timeline-step h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy-deep); margin: 8px 0 8px; } .tk-agent-timeline-step p { font-size: 14.5px; color: var(--slate); margin: 0; line-height: 1.6; } /* ---------- section-internal divider: used to separate distinct visual groups within one section (e.g. the timeline from the visual stage beneath it) without resorting to a full new section or a card border ---------- */ .tk-agent-divider { width: 100%; height: 1px; background: var(--line); border: none; margin: 0; } /* ---------- defined asymmetric split ratios -- a small fixed set instead of arbitrary inline gridTemplateColumns per instance, so every asymmetric composition on the page reads as coming from the same system ---------- */ .tk-agent-split-40-60 { grid-template-columns: 0.4fr 1fr; } .tk-agent-split-60-40 { grid-template-columns: 1fr 0.4fr; } .tk-agent-split-35-65 { grid-template-columns: 0.35fr 1fr; } .tk-agent-split-42-58 { grid-template-columns: 0.42fr 1fr; } /* scoped recolors: components shared with other pages (Solutions, Product) keep their default amber/violet identity there -- on agent pages specifically, the "selected/highlighted" state of each reused component switches to that agent's own color */ .tk-agent-page .tk-market-ring-som { fill: var(--agent-soft); stroke: var(--agent-accent); } .tk-agent-page .tk-market-dot-som { background: var(--agent-accent); } .tk-agent-page .tk-fit-score { color: var(--agent-accent); } .tk-agent-page .tk-fit-stack-tag { color: var(--agent-accent); } .tk-agent-page .tk-evidence-tag { color: var(--agent-accent); } .tk-agent-page .tk-score-fill { background: var(--agent-accent); } .tk-agent-page .tk-score-target { color: var(--agent-accent); } .tk-agent-page .tk-chip-keyword { color: var(--agent-accent); } .tk-agent-page .tk-datacard-code-b, .tk-agent-page .tk-datacard-bar-fill-b { background: var(--agent-accent); } .tk-agent-page .tk-weight-fill { background: var(--agent-accent); } .tk-agent-page .tk-message-highlight { background: var(--agent-soft); color: var(--agent-dark); } .tk-agent-page .tk-message-approve { background: var(--agent-accent); } .tk-agent-page .tk-message-channel { background: var(--agent-soft); color: var(--agent-dark); } .tk-agent-split-62-38 { grid-template-columns: 1.6fr 1fr; } /* generous rhythm between conceptual sections, not just between elements inside one -- the brief's "100-160px on desktop" */ .tk-agent-page .tk-section { padding: 104px 0; } .tk-agent-page .tk-agent-hero { padding: 96px 0 72px; } /* ---------- contextual rhythm: sections that pick up the thread from the one above sit closer together; a section that's a genuine beat change (the closing CTA) gets more air. Not every gap on the page should read the same. ---------- */ .tk-agent-page .tk-section-tight { padding-top: 52px; } .tk-agent-page .tk-section-loose { padding-top: 136px; padding-bottom: 136px; } @media (max-width: 640px) { .tk-agent-page .tk-section { padding: 64px 0; } .tk-agent-page .tk-agent-hero { padding: 64px 0 40px; } .tk-agent-page .tk-section-tight { padding-top: 36px; } .tk-agent-page .tk-section-loose { padding-top: 76px; padding-bottom: 76px; } } /* hero stage: significantly larger and allowed to dominate -- width is driven per-page via inline gridTemplateColumns so each hero can be 35/65, 40/60, etc. rather than one fixed ratio everywhere */ .tk-agent-page .tk-agent-hero-stage { max-width: none; min-height: 480px; } @media (max-width: 1080px) { .tk-agent-page .tk-agent-hero-stage { min-height: 420px; } } @media (max-width: 860px) { .tk-agent-page .tk-agent-hero-stage { min-height: 360px; } } /* open section: a heading + copy block with no surrounding card -- the default "container" for everything that used to be wrapped in .tk-artifact just because it was a component */ .tk-agent-open-section { position: relative; width: 100%; } /* full-width visual stage -- the hero object of a section. Sized generously (default ~86% via max-width against the 1080px inner column) so it reads as the main event rather than a shrunken diagram off to one side. */ .tk-agent-visual-stage { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; } .tk-agent-visual-stage-full { max-width: none; } /* asymmetric two-column composition. Base handles gap + mobile collapse; the actual ratio is set per-instance via an inline gridTemplateColumns style so each section can vary (35/65, 60/40, etc.) instead of repeating one 50/50 pattern. */ .tk-agent-asymmetric { display: grid; gap: 64px; align-items: start; } .tk-agent-asymmetric-center { align-items: center; } /* inside a two-column split (text beside a visual), the label stays left-aligned with its own column's text -- the default centering is for full-width sections sitting under a centered heading, which this isn't */ .tk-agent-asymmetric .tk-agent-signal-label { margin: 0; width: fit-content; } .tk-agent-asymmetric .tk-agent-signal-label-rule { margin: 0; } .tk-agent-asymmetric .tk-agent-editorial-list { margin: 0; max-width: none; } @media (max-width: 900px) { .tk-agent-asymmetric { grid-template-columns: 1fr !important; gap: 36px; } } /* small technical / intelligence annotation -- a label attached to a visualization, never a card. "LIVE SIGNAL / 92% confidence" language. Also carries the STEP 01/02/03 markers inside "How it works" -- those are core content the marketing team called out as important, so this can't read as a faint caption; it needs to hold its own against the animations next to it. */ .tk-agent-signal-label { display: flex; flex-direction: column; gap: 8px; width: fit-content; margin: 0 auto; } .tk-agent-signal-label-title { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--agent-accent, var(--violet)); } .tk-agent-signal-label-rule { display: block; width: 32px; height: 2px; background: var(--agent-accent, var(--line)); opacity: 0.4; margin: 0 auto; } .tk-agent-signal-label-value { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; color: var(--navy-deep); } @media (max-width: 640px) { .tk-agent-signal-label-title { font-size: 12px; } } /* editorial list: replaces a stack of small cards with one open list separated by thin rules -- used for ICP/profile fields, topic gaps, live signal feeds, etc. Self-centers by default so it lines up under the (centered) section heading above it, rather than requiring every call site to remember to add its own centering wrapper -- a couple of them didn't, which is exactly what produced a centered heading over a left-stranded list. */ .tk-agent-editorial-list { display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; } .tk-agent-editorial-row { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 520ms ease, transform 520ms ease; } .tk-agent-editorial-row-in { opacity: 1; transform: translateY(0); } .tk-agent-editorial-row:first-child { padding-top: 0; } .tk-agent-editorial-row:last-child { border-bottom: none; } .tk-agent-editorial-row-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slate); flex: 0 0 230px; } .tk-agent-editorial-row-value { font-size: 15.5px; color: var(--navy-deep); text-align: right; flex: 1; margin: 0; } .tk-agent-editorial-row-value strong { color: var(--agent-accent, var(--violet)); font-weight: 600; } @media (max-width: 640px) { .tk-agent-editorial-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0; } .tk-agent-editorial-row-label { flex: none; } .tk-agent-editorial-row-value { text-align: left; } } /* live-feed variant of the editorial list: timestamp + line instead of label + value -- the "analyst's live feed" */ .tk-agent-feed-row { display: flex; align-items: flex-start; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-6px); transition: opacity 480ms ease, transform 480ms ease; } .tk-agent-feed-row-in { opacity: 1; transform: translateX(0); } .tk-agent-feed-row:last-child { border-bottom: none; } .tk-agent-feed-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--agent-accent, var(--violet)); flex: 0 0 46px; padding-top: 2px; } .tk-agent-feed-text { font-size: 14px; color: var(--ink); opacity: 0.85; margin: 0; line-height: 1.55; } /* open "traditional way -> troviqai way" statement -- typography carrying the contrast instead of two boxed stat cards */ .tk-agent-stat-comparison { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; margin: 8px 0 8px; } .tk-agent-stat-comparison-block { text-align: left; } .tk-agent-stat-comparison-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; } .tk-agent-stat-comparison-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); color: var(--navy-deep); line-height: 1; margin: 0 0 8px; } .tk-agent-stat-comparison-after .tk-agent-stat-comparison-value { color: var(--agent-accent, var(--violet)); } .tk-agent-stat-comparison-label { font-size: 13.5px; color: var(--slate); max-width: 220px; margin: 0; } .tk-agent-stat-comparison-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--agent-accent, var(--violet)); flex-shrink: 0; } .tk-agent-stat-comparison-arrow-line { display: block; width: 44px; height: 1px; background: currentColor; opacity: 0.55; } @media (max-width: 560px) { .tk-agent-stat-comparison { gap: 22px; } .tk-agent-stat-comparison-arrow { display: none; } } /* thin rule used as a section-internal divider, e.g. between a heading block and the large visual beneath it */ .tk-agent-rule { width: 100%; height: 1px; background: var(--line); border: none; margin: 0; } /* larger, asymmetric market-rings treatment for full-stage use */ .tk-agent-page .tk-market { gap: 72px; } .tk-agent-page .tk-market-svg { max-width: 420px; } /* open "more agents" rows -- replaces the 6-card grid with a single list of rows separated by thin dividers, scoped so the shared .tk-output-card styling used elsewhere is untouched */ /* two-column editorial layout: three rows left, three rows right. grid-auto-flow: column fills the first column top-to-bottom before starting the second, so with six rows and three grid-template-rows that lands exactly 3-and-3 rather than alternating left/right. A vertical rule (border-right on the left column) separates the two columns instead of a column-gap, so the divider reads as one continuous line rather than empty space. */ .tk-agent-directory { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; width: 100%; margin-top: 8px; } .tk-agent-directory > *:nth-child(-n+3) { padding-right: 32px; border-right: 1px solid var(--line); } .tk-agent-directory > *:nth-child(n+4) { padding-left: 32px; } .tk-agent-directory-row { display: flex; align-items: center; gap: 20px; padding: 26px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding-left 200ms ease, background 200ms ease; } /* bottom row of each column loses its own border-bottom (nth-child(3n) catches rows 3 and 6 -- the last row in each column under grid-auto-flow: column with three rows per column) */ .tk-agent-directory > *:nth-child(3n) .tk-agent-directory-row { border-bottom: none; } .tk-agent-directory-row:hover { padding-left: 12px; background: rgba(124,58,237,0.03); } @media (max-width: 900px) { /* stack back to a single column on narrower screens where two columns would feel cramped */ .tk-agent-directory { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .tk-agent-directory > *:nth-child(-n+3) { padding-right: 4px; border-right: none; } .tk-agent-directory > *:nth-child(n+4) { padding-left: 4px; } .tk-agent-directory > *:nth-child(3n) .tk-agent-directory-row { border-bottom: 1px solid var(--line); } .tk-agent-directory > *:last-child .tk-agent-directory-row { border-bottom: none; } } .tk-agent-directory-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .tk-agent-directory-body { flex: 1; min-width: 0; } .tk-agent-directory-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .tk-agent-directory-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .tk-agent-directory-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--navy-deep); margin: 0 0 3px; } .tk-agent-directory-tagline { font-size: 13.5px; color: var(--slate); margin: 0; } .tk-agent-directory-arrow { color: var(--line); flex-shrink: 0; transition: color 160ms ease, transform 160ms ease; } .tk-agent-directory-row:hover .tk-agent-directory-arrow { color: var(--agent-accent, var(--violet)); transform: translate(2px, -2px); } @media (max-width: 640px) { .tk-agent-directory-row { padding: 20px 2px; gap: 14px; } .tk-agent-directory-name { font-size: 16px; } }

See it work on your own site.