/* ============================================================
   Chaib — Luminous Gradient SaaS (2026)
   Electric-indigo → violet → cyan. Glass surfaces, restrained
   gradient, "design-review annotation" signature language.
   Plus Jakarta Sans + IBM Plex Mono. Scoped under .ts-site.
   ============================================================ */

/* ---------- Reset & tokens ---------- */
.ts-site, .ts-site * { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body.ts-site { margin: 0; padding: 0; overflow-x: hidden; }
body.ts-lock-scroll { overflow: hidden; }
.ts-site img, .ts-site svg { max-width: 100%; display: block; }

.ts-site {
    --white:    #ffffff;
    --bg:       #ffffff;
    --soft:     #f6f7ff;
    --soft-2:   #eef0fb;
    --ink:      #0f1024;
    --ink-2:    #232544;
    --text:     #4a4d68;
    --muted:    #7a7e9c;
    --line:     #e8e9f5;
    --line-2:   #dcdef0;

    --a1:       #5b5bff;
    --a2:       #8a5cff;
    --a3:       #12b8ff;
    --a-deep:   #4b2fe0;
    --a-tint:   #eef0ff;
    --a-soft:   #e0e2ff;

    --grad:      linear-gradient(100deg, #5b5bff 0%, #8a5cff 46%, #12b8ff 100%);
    --grad-rev:  linear-gradient(280deg, #5b5bff 0%, #8a5cff 46%, #12b8ff 100%);
    --grad-soft: linear-gradient(100deg, #6d5cff, #12b8ff);

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 34px;

    --sh-1: 0 1px 2px rgba(15,16,36,.05);
    --sh-2: 0 2px 6px rgba(15,16,36,.05), 0 14px 30px -16px rgba(30,24,90,.20);
    --sh-3: 0 4px 12px rgba(15,16,36,.06), 0 30px 60px -24px rgba(40,30,120,.28);
    --sh-a: 0 14px 30px -12px rgba(91,91,255,.65);
    --glass: 0 20px 46px -22px rgba(40,30,120,.42);

    --shell: 1200px;
    --header-h: 74px;

    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.ts-site ::selection { background: var(--a-soft); color: var(--ink); }
.ts-site :focus-visible { outline: 3px solid rgba(91,91,255,.55); outline-offset: 3px; border-radius: 6px; }

/* ---------- Typography ---------- */
.ts-site h1, .ts-site h2, .ts-site h3, .ts-site h4 {
    font-family: var(--font); color: var(--ink); margin: 0;
    letter-spacing: -.025em; line-height: 1.08; font-weight: 800;
}
.ts-site h1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); }
.ts-site h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
.ts-site h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.ts-site :where(p) { margin: 0; }
.ts-site a  { color: inherit; text-decoration: none; }
.ts-grad-text {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Layout primitives ---------- */
.ts-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.ts-section { padding: clamp(58px, 6vw, 88px) 0; position: relative; }
.ts-soft { background: linear-gradient(180deg, var(--soft) 0%, #ffffff 100%); }
.ts-eyebrow {
    display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--a1);
    background: var(--a-tint); border: 1px solid var(--a-soft); padding: 7px 13px;
    border-radius: 999px; margin: 0 0 18px;
}
.ts-section-head { max-width: 640px; margin: 0 0 44px; }
.ts-section-head h2 { margin: 0 0 14px; }
.ts-section-head p { color: var(--text); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.ts-site .ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font); font-weight: 600; font-size: .98rem; line-height: 1;
    color: #fff; background: var(--grad); background-size: 140% 140%;
    padding: 15px 26px; border-radius: 12px; border: 0; cursor: pointer;
    box-shadow: var(--sh-a); transition: transform .18s ease, box-shadow .25s ease, background-position .5s ease;
}
.ts-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(91,91,255,.75); background-position: 100% 0; }
.ts-btn:active { transform: translateY(0); }
.ts-site .ts-btn-secondary {
    color: var(--ink-2); background: #fff; box-shadow: var(--sh-1);
    border: 1.5px solid var(--line-2);
}
.ts-btn-secondary:hover { border-color: var(--a-soft); box-shadow: var(--sh-2); background: #fff; }
.ts-btn-small { padding: 11px 18px; font-size: .9rem; }
.ts-btn-wide { width: 100%; }

/* ---------- Header / nav ---------- */
.ts-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ts-header.ts-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -22px rgba(30,24,90,.5); }
.ts-nav { display: flex; align-items: center; gap: 22px; height: var(--header-h); }
.ts-brand { display: inline-flex; align-items: center; }
.ts-brand img { height: 40px; width: auto; }
.ts-menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.ts-menu a {
    font-size: .94rem; font-weight: 500; color: var(--ink-2); padding: 9px 14px;
    border-radius: 9px; transition: color .18s ease, background .18s ease;
}
.ts-menu a:hover { color: var(--a1); background: var(--a-tint); }
.ts-nav-cta { margin-left: auto; }
.ts-menu-toggle {
    display: none; margin-left: auto; align-items: center; gap: 9px;
    background: #fff; border: 1.5px solid var(--line-2); border-radius: 11px;
    padding: 9px 14px 9px 12px; cursor: pointer; color: var(--ink);
}
.ts-burger { display: flex; flex-direction: column; gap: 4px; }
.ts-burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.ts-menu-toggle-text { font-size: .86rem; font-weight: 600; margin-left: 3px; }

/* ---------- Hero ---------- */
.ts-hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.ts-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(60% 60% at 82% 8%, rgba(122,110,255,.16), transparent 60%),
      radial-gradient(50% 55% at 6% 92%, rgba(18,184,255,.12), transparent 60%);
}
.ts-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(46px); opacity: .5; pointer-events: none;
    transform: translate(var(--cursor-shift-x, 0), var(--cursor-shift-y, 0)); transition: transform .5s ease; }
.ts-orb-1 { width: 340px; height: 340px; right: -60px; top: -90px; background: radial-gradient(circle at 30% 30%, #8a5cff, #4b2fe0 72%); }
.ts-orb-2 { width: 260px; height: 260px; left: -70px; bottom: -70px; background: radial-gradient(circle at 40% 40%, #12b8ff, #5b5bff 72%); opacity: .35; }
.ts-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.ts-hero h1 { margin: 6px 0 20px; }
.ts-hero-text { font-size: 1.12rem; color: var(--text); max-width: 30em; margin: 0 0 40px; }
.ts-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ts-actions.ts-center { justify-content: center; }
.ts-trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ts-trust li { position: relative; padding-left: 24px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.ts-trust li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
    border-radius: 50%; background: var(--grad);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/11px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/11px no-repeat;
}

/* Hero art — the "design review" signature */
.ts-hero-art { position: relative; }
.ts-review-card {
    position: relative; z-index: 2; background: rgba(255,255,255,.82); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--r-xl); box-shadow: var(--glass); padding: 18px; overflow: hidden;
}
.ts-review-card::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid var(--line); pointer-events:none; }
.ts-review-card-top { display: flex; align-items: center; gap: 7px; padding: 4px 4px 14px; }
.ts-rc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.ts-rc-dot:nth-child(1){ background:#ff6b8b; } .ts-rc-dot:nth-child(2){ background:#ffc24b; } .ts-rc-dot:nth-child(3){ background:#3ed6a0; }
.ts-rc-url { margin-left: 10px; font-family: var(--mono); font-size: .72rem; color: var(--muted);
    background: var(--soft-2); border-radius: 999px; padding: 5px 12px; flex: 1; }
.ts-review-wire { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg,#fff,var(--soft)); padding: 16px; }
.ts-wire-bar { height: 10px; width: 46%; border-radius: 4px; background: var(--grad); opacity: .9; }
.ts-wire-hero { height: 46px; border-radius: 10px; margin: 14px 0; background: var(--soft-2);
    border: 1px dashed var(--line-2); position: relative; }
.ts-wire-hero::before { content:""; position:absolute; left:14px; top:12px; width:40%; height:8px; border-radius:4px; background:var(--line-2); }
.ts-wire-hero::after { content:""; position:absolute; left:14px; top:26px; width:26%; height:8px; border-radius:4px; background:var(--a-soft); }
.ts-wire-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.ts-wire-row span { height: 34px; border-radius: 9px; background: var(--soft-2); border: 1px solid var(--line); }
.ts-review-notes { margin-top: 14px; display: grid; gap: 8px; }
.ts-note-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .84rem; font-weight: 600; color: var(--ink-2); background: #fff;
    border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; }
.ts-note-row i { font-family: var(--mono); font-style: normal; font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.ts-note-row.ok   i { color: #10916a; background: #dff6ec; }
.ts-note-row.up   i { color: var(--a-deep); background: var(--a-tint); }
.ts-note-row.warn i { color: #b26a00; background: #fdefd2; }

.ts-floating-card {
    position: absolute; z-index: 3; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh-3); padding: 13px 16px; width: max-content;
}
.ts-floating-card strong { display: block; font-size: 1.02rem; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.ts-floating-card span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.ts-floating-card-one { left: -30px; top: -30px; }
.ts-floating-card-two { right: -16px; bottom: -32px; }

/* ---------- Proof band ---------- */
.ts-proof { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.ts-proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ts-proof-grid > div { padding: 4px 0; }
.ts-proof-grid strong { display: block; font-size: 1.02rem; color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.ts-proof-grid span { display: block; font-size: .86rem; color: var(--muted); margin-top: 4px; }

/* ---------- Cards / services ---------- */
.ts-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ts-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 24px; box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.ts-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--a-soft); }
.ts-card-icon {
    width: 46px; height: 46px; border-radius: 13px; background: var(--grad);
    display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-a); margin-bottom: 16px;
}
.ts-card-icon svg { width: 23px; height: 23px; stroke: #fff; fill: none; }
.ts-card h3 { margin: 0 0 8px; }
.ts-card p { font-size: .92rem; color: var(--text); }

/* ---------- Consulting / review framework ---------- */
.ts-about-band { display: grid; grid-template-columns: .95fr 1.05fr; gap: 54px; align-items: center; }
.ts-review-stack {
    background: linear-gradient(160deg, #12132b, #1c1d3d); color: #fff; border-radius: var(--r-2xl);
    padding: 28px; box-shadow: var(--sh-3); position: relative; overflow: hidden;
}
.ts-review-stack::before { content:""; position:absolute; inset:0; background:
    radial-gradient(60% 60% at 85% 0%, rgba(122,110,255,.4), transparent 60%),
    radial-gradient(50% 55% at 10% 100%, rgba(18,184,255,.28), transparent 60%); }
.ts-review-panel-head { position: relative; margin-bottom: 18px; }
.ts-review-panel-head span { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #a99bff; }
.ts-review-panel-head strong { display: block; margin-top: 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.ts-review-stack article { position: relative; display: flex; gap: 15px; align-items: flex-start; padding: 15px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); margin-top: 11px; }
.ts-review-stack article span { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
    display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: .82rem; color: #fff; }
.ts-review-stack article strong { display: block; font-size: .98rem; color: #fff; font-weight: 700; }
.ts-review-stack article p { margin: 4px 0 0; font-size: .84rem; color: #c7c9e6; }
.ts-consulting-copy h2 { margin: 0 0 16px; }
.ts-consulting-copy > p { color: var(--text); font-size: 1.04rem; margin-bottom: 20px; }
.ts-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ts-check li { position: relative; padding-left: 30px; font-size: .96rem; color: var(--ink-2); font-weight: 500; }
.ts-check li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px;
    background: var(--a-tint); border: 1px solid var(--a-soft);
    -webkit-mask: none;
}
.ts-check li::after {
    content: ""; position: absolute; left: 5px; top: 7px; width: 10px; height: 6px;
    border-left: 2px solid var(--a1); border-bottom: 2px solid var(--a1); transform: rotate(-45deg);
}

/* ---------- Process ---------- */
.ts-process { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; counter-reset: step; }
.ts-process article { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--sh-1); }
.ts-process article span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: 12px; background: var(--grad); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 1.05rem;
    box-shadow: var(--sh-a); margin-bottom: 16px; }
.ts-process article h3 { margin: 0 0 8px; }
.ts-process article p { font-size: .92rem; color: var(--text); }
.ts-process article:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; right: -13px; width: 26px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}

/* ---------- Pricing ---------- */
.ts-pricing-head { display: grid; grid-template-columns: 1.4fr .9fr; gap: 30px; align-items: end; margin-bottom: 44px; }
.ts-pricing-head h2 { margin: 0 0 14px; }
.ts-pricing-head > div > p { color: var(--text); font-size: 1.05rem; }
.ts-pricing-summary { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.ts-pricing-summary strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.ts-pricing-summary span { display: block; color: var(--muted); font-size: .88rem; margin-top: 5px; }
.ts-pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; align-items: stretch; }
.ts-price-card {
    position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line);
    border-radius: var(--r-xl); padding: 26px 24px; box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .25s ease;
}
.ts-price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.ts-price-card.ts-popular { border-color: transparent; box-shadow: 0 0 0 2px var(--a1), var(--sh-3); }
.ts-pill { position: absolute; top: -12px; left: 24px; font-family: var(--mono); font-size: .66rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 6px 12px;
    border-radius: 999px; box-shadow: var(--sh-a); }
.ts-plan-top h3 { margin: 0 0 6px; }
.ts-plan-top p { font-size: .86rem; color: var(--muted); min-height: 62px; }
.ts-price-row { margin: 18px 0 4px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ts-price { font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.ts-duration { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin-top: 6px; }
.ts-price-card ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; flex: 1; }
.ts-price-card li { position: relative; padding-left: 26px; font-size: .88rem; color: var(--text); }
.ts-price-card li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--a-tint); }
.ts-price-card li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px;
    border-left: 2px solid var(--a1); border-bottom: 2px solid var(--a1); transform: rotate(-45deg); }
.ts-note { margin: 30px auto 0; max-width: 780px; text-align: center; font-size: .84rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.ts-faq-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.ts-faq-intro h2 { margin: 0 0 12px; }
.ts-faq-intro > p { color: var(--text); }
.ts-faq-support { margin-top: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); }
.ts-faq-support strong { display: block; color: var(--ink); font-weight: 700; }
.ts-faq-support span { display: block; color: var(--text); font-size: .9rem; margin: 6px 0 14px; }
.ts-faq-support a { display: inline-flex; font-weight: 600; color: var(--a1); }
.ts-faq-support a:hover { text-decoration: underline; }
.ts-faq-list { display: grid; gap: 12px; }
.ts-faq-list details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; transition: border-color .2s ease; }
.ts-faq-list details[open] { border-color: var(--a-soft); box-shadow: var(--sh-2); }
.ts-faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 20px; font-weight: 700; color: var(--ink); font-size: 1rem; }
.ts-faq-list summary::-webkit-details-marker { display: none; }
.ts-faq-list summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--a-tint);
    color: var(--a1); font-weight: 700; display: grid; place-items: center; transition: transform .25s ease; }
.ts-faq-list details[open] summary::after { content: "\2212"; transform: rotate(180deg); }
.ts-faq-list details p { margin: 0; padding: 0 20px 20px; color: var(--text); font-size: .93rem; }

/* ---------- CTA ---------- */
.ts-cta .ts-shell { position: relative; background: linear-gradient(150deg, #14142e, #1e1c47); border-radius: var(--r-2xl);
    padding: clamp(40px, 6vw, 68px); text-align: center; overflow: hidden; box-shadow: var(--sh-3); }
.ts-cta .ts-shell::before { content:""; position:absolute; inset:0; background:
    radial-gradient(50% 60% at 80% 0%, rgba(122,110,255,.5), transparent 60%),
    radial-gradient(50% 60% at 15% 100%, rgba(18,184,255,.32), transparent 60%); }
.ts-cta h2 { position: relative; color: #fff; max-width: 620px; margin: 0 auto 16px; }
.ts-cta p { position: relative; color: #c7c9e6; max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }
.ts-cta .ts-actions { position: relative; }
.ts-cta .ts-btn-secondary { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.ts-cta .ts-btn-secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }

/* ---------- Page hero (inner pages) ---------- */
.ts-page-hero { position: relative; padding: clamp(58px, 8vw, 96px) 0 clamp(30px, 4vw, 48px); overflow: hidden; }
.ts-page-hero::before { content:""; position:absolute; inset:0; background:
    radial-gradient(50% 70% at 88% 0%, rgba(122,110,255,.14), transparent 60%); }
.ts-page-hero .ts-shell { position: relative; }
.ts-page-hero h1 { margin: 0 0 18px; }
.ts-page-hero > .ts-shell > p { max-width: 640px; font-size: 1.1rem; color: var(--text); }

/* ---------- About page ---------- */
.ts-about-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: center; }
.ts-about-hero-grid h1 { margin: 0 0 18px; }
.ts-about-hero-grid > div > p { color: var(--text); font-size: 1.08rem; margin-bottom: 26px; }
.ts-about-stats { display: grid; gap: 14px; }
.ts-about-stats > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); }
.ts-about-stats strong { display: block; color: var(--ink); font-weight: 800; font-size: 1.05rem; }
.ts-about-stats span { display: block; color: var(--muted); font-size: .88rem; margin-top: 4px; }
.ts-about-story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; }
.ts-side-label { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin-bottom: 14px; }
.ts-about-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--sh-2); }
.ts-about-card h2 { margin: 0 0 16px; }
.ts-about-card p { color: var(--text); margin-bottom: 14px; }
.ts-about-method { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px; }
.ts-about-method ol { list-style: none; counter-reset: m; margin: 0; padding: 0; display: grid; gap: 18px; }
.ts-about-method li { counter-increment: m; position: relative; padding-left: 46px; }
.ts-about-method li::before { content: counter(m,decimal-leading-zero); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
    border-radius: 10px; background: var(--grad); color: #fff; font-family: var(--mono); font-weight: 600; font-size: .8rem;
    display: grid; place-items: center; box-shadow: var(--sh-a); }
.ts-about-method li strong { display: block; color: var(--ink); font-weight: 700; }
.ts-about-method li span { display: block; color: var(--text); font-size: .9rem; margin-top: 4px; }
.ts-principles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ts-principles-grid article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1); }
.ts-principles-grid article span { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--a1); }
.ts-principles-grid article h3 { margin: 12px 0 8px; }
.ts-principles-grid article p { font-size: .9rem; color: var(--text); }
.ts-about-business { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ts-about-business h2 { margin: 0 0 14px; }
.ts-about-business > div > p { color: var(--text); font-size: 1.04rem; }

/* ---------- Info / business card ---------- */
.ts-info { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-2); }
.ts-business-card strong { display: block; color: var(--ink); font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.ts-business-card p { color: var(--text); font-size: .94rem; margin-bottom: 6px; }
.ts-business-card a { color: var(--a1); font-weight: 600; }
.ts-business-card a:hover { text-decoration: underline; }

/* ---------- Contact page ---------- */
.ts-contact-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.ts-contact-promise { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); }
.ts-contact-promise strong { display: block; color: var(--ink); font-weight: 800; }
.ts-contact-promise span { display: block; color: var(--text); font-size: .9rem; margin-top: 6px; }
.ts-contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.ts-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--sh-2); }
.ts-form-head { margin-bottom: 22px; }
.ts-form-head h2 { margin: 0 0 10px; }
.ts-form-head p { color: var(--text); font-size: .95rem; }
.ts-form label { display: block; font-weight: 600; color: var(--ink-2); font-size: .9rem; margin-bottom: 6px; }
.ts-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ts-form textarea, .ts-form select {
    width: 100%; font-family: var(--font); font-size: .96rem; color: var(--ink);
    background: var(--soft); border: 1.5px solid var(--line-2); border-radius: 11px; padding: 13px 15px; margin-bottom: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ts-form input:focus, .ts-form textarea:focus, .ts-form select:focus { outline: none; border-color: var(--a1); background: #fff; box-shadow: 0 0 0 4px rgba(91,91,255,.14); }
.ts-form textarea { min-height: 130px; resize: vertical; }
.ts-form input[type=submit], .ts-form .wpcf7-submit {
    font-family: var(--font); font-weight: 600; font-size: .98rem; color: #fff; background: var(--grad);
    padding: 15px 28px; border: 0; border-radius: 12px; cursor: pointer; box-shadow: var(--sh-a);
    transition: transform .18s ease, box-shadow .25s ease; -webkit-appearance: none; appearance: none;
}
.ts-form input[type=submit]:hover, .ts-form .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(91,91,255,.75); }
.ts-contact-side { display: grid; gap: 20px; }
.ts-contact-steps { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; }
.ts-contact-steps ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
.ts-contact-steps li { counter-increment: s; position: relative; padding-left: 44px; }
.ts-contact-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px;
    background: var(--grad); color: #fff; font-family: var(--mono); font-weight: 600; font-size: .85rem; display: grid; place-items: center; box-shadow: var(--sh-a); }
.ts-contact-steps li strong { display: block; color: var(--ink); font-weight: 700; font-size: .95rem; }
.ts-contact-steps li span { display: block; color: var(--text); font-size: .86rem; margin-top: 3px; }

/* ---------- Policy ---------- */
.ts-policy { max-width: 800px; }
.ts-policy h2 { margin: 34px 0 14px; font-size: 1.5rem; }
.ts-policy h3 { margin: 24px 0 10px; }
.ts-policy p, .ts-policy li { color: var(--text); margin-bottom: 12px; }
.ts-policy ul, .ts-policy ol { padding-left: 22px; margin-bottom: 16px; }
.ts-policy a { color: var(--a1); font-weight: 600; }

/* ---------- Footer ---------- */
.ts-footer { background: #0c0d1f; color: #c7c9e6; padding: 64px 0 30px; margin-top: 0; }
.ts-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.ts-footer-brand img { height: 40px; margin-bottom: 16px; }
.ts-footer-grid > div > p { font-size: .9rem; color: #9a9cc0; line-height: 1.7; }
.ts-footer-grid h2 { font-size: .78rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6f719c; margin: 0 0 16px; font-weight: 600; }
.ts-footer-grid a { display: block; font-size: .92rem; color: #c7c9e6; padding: 5px 0; transition: color .18s ease; }
.ts-footer-grid a:hover { color: #fff; }
.ts-footer-grid > div:nth-child(4) a { display: inline; padding: 0; color: var(--a3); }
.ts-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 44px; padding-top: 24px; font-size: .82rem; color: #7f81ab; }

/* ---------- Motion: scroll reveal (JS-gated so content shows without JS) ---------- */
.ts-anim .ts-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.ts-anim .ts-reveal.ts-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .ts-card-grid, .ts-pricing-grid, .ts-principles-grid { grid-template-columns: repeat(2,1fr); }
    .ts-proof-grid { grid-template-columns: repeat(2,1fr); gap: 24px; }
}
@media (max-width: 920px) {
    .ts-hero-grid, .ts-about-band, .ts-about-story, .ts-about-business, .ts-faq-wrap,
    .ts-pricing-head, .ts-contact-grid, .ts-contact-hero-grid, .ts-about-hero-grid { grid-template-columns: 1fr; }
    .ts-hero-art { max-width: 460px; margin: 8px auto 0; }
    .ts-review-stack { order: 2; }
    .ts-process { grid-template-columns: 1fr; }
    .ts-process article:not(:last-child)::after { display: none; }
}
@media (max-width: 760px) {
    .ts-menu-toggle { display: inline-flex; }
    .ts-menu { display: none; }
    .ts-header .ts-nav .ts-nav-cta { display: none; }
    .ts-header.ts-menu-open .ts-menu {
        display: flex; flex-direction: column; align-items: stretch; gap: 2px;
        position: absolute; left: 16px; right: 16px; top: calc(var(--header-h) - 4px);
        background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sh-3);
    }
    .ts-header.ts-menu-open .ts-menu a { padding: 13px 16px; font-size: 1rem; }
    .ts-menu-toggle[aria-expanded="true"] .ts-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .ts-menu-toggle[aria-expanded="true"] .ts-burger span:nth-child(2) { opacity: 0; }
    .ts-menu-toggle[aria-expanded="true"] .ts-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 560px) {
    .ts-card-grid, .ts-pricing-grid, .ts-principles-grid, .ts-proof-grid { grid-template-columns: 1fr; }
    .ts-footer-grid { grid-template-columns: 1fr 1fr; }
    .ts-floating-card-one { left: -6px; } .ts-floating-card-two { right: -4px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ts-site * { scroll-behavior: auto !important; }
    .ts-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ts-orb { transition: none !important; }
    .ts-btn:hover, .ts-card:hover, .ts-price-card:hover { transform: none; }
}