:root {
    --ink: #09090d;
    --muted: #666574;
    --paper: #f8f7fb;
    --white: #ffffff;
    --line: rgba(9, 9, 13, 0.13);
    --line-strong: rgba(9, 9, 13, 0.28);
    --violet: #715cff;
    --purple: #a63dff;
    --pink: #ff4fa0;
    --cyan: #21d9d0;
    --blue: #304cff;
    --lime: #cbff69;
    --radius: 28px;
    --max: 1240px;
    --shadow: 0 28px 80px rgba(30, 18, 77, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
video { max-width: 100%; }
::selection { background: #c8bbff; color: #0a0711; }

.shell { width: min(calc(100% - 30px), var(--max)); margin-inline: auto; }
.section { padding: 200px 0; position: relative; }
.section-tight { padding: 88px 0; }
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.kicker::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--violet), var(--cyan));
    box-shadow: 0 0 18px rgba(113, 92, 255, .75);
}
.kicker.sphbrand{
    color: rgb(255, 255, 255);
    font-size: 18px;
    letter-spacing: 6px;
    float: left;
    position: relative;
    font-family: Raleway, sans-serif;
    font-weight: 200;
}
h1, h2, h3, p { margin-top: 0; }
.hero-title {
    margin-bottom: 48px;
    max-width: 880px;
    font-size: clamp(58px, 6vw, 122px);
    line-height: 100px;
    letter-spacing: 10px;
    font-weight: 300;
    text-transform: uppercase;
}
.hero-title em {
    display: block;
    font-style: normal;
    color: transparent;
    background: linear-gradient(90deg, #51aaff, #9a42ff 46%, #ff4e92 84%, #ff8c45);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 150px;
}
h2 {
    margin-bottom: 26px;
    max-width: 900px;
    font-size: clamp(44px, 5.7vw, 82px);
    line-height: 1.15;
    letter-spacing: -2px;
    font-weight: 500;
}
h3 {
    margin-bottom: 14px;
    font-size: clamp(24px, 2.2vw, 35px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 500;
}
h3.listspread{
    line-height: 2;
    padding: 20px 0;
}

h1.lead { font-weight: 400; }
.lead {
    max-width: 760px;
    margin-bottom: 34px;
    font-size: clamp(21px, 2.1vw, 30px);
    line-height: 1.35;
    letter-spacing: -.025em;
}
.body-copy {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}
.micro { color: var(--muted); font-size: 13px; line-height: 1.5; }
.gradient-text {
    color: transparent;
    background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Navigation */
.nav-wrap {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding: 16px 0;
    transition: .3s ease;
}
.nav-wrap.scrolled {
    background: rgba(248, 247, 251, .79);
    backdrop-filter: blur(22px) saturate(130%);
    border-bottom: 1px solid var(--line);
}
body:not(.menu-open) .nav-wrap:not(.scrolled) { color: white; }
body:not(.menu-open) .nav-wrap:not(.scrolled) .nav-toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
body:not(.menu-open) .nav-wrap:not(.scrolled) .nav-toggle span,
body:not(.menu-open) .nav-wrap:not(.scrolled) .nav-toggle::before,
body:not(.menu-open) .nav-wrap:not(.scrolled) .nav-toggle::after { background: white; }
body:not(.menu-open) .nav-wrap:not(.scrolled) .button.small { background: white; color: var(--ink); border-color: white; }
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
}
.nav-cta-mobile{display: none !important;}

.brand {
    position: relative;
    z-index: 3;
    color: rgb(255, 255, 255);
    font-size: 18px;
    letter-spacing: 6px;
    float: left;
    font-family: Raleway, sans-serif;
    font-weight: 200;
}
.nav-cta-mobile { display: none; position: relative; z-index: 3; }
.nav-links { display: flex; align-items: center; gap: 31px; font-size: 14px; }
.nav-links a:not(.button) { opacity: .72; transition: opacity .2s ease; }
.nav-links a:not(.button):hover { opacity: 1; }
.nav-toggle {
    display: none;
    position: relative;
    z-index: 3;
    width: 46px; height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
    content: "";
    position: absolute;
    left: 13px;
    width: 18px;
    height: 1px;
    background: var(--ink);
    transition: .2s ease;
}
.nav-toggle::before { top: 16px; }
.nav-toggle span { top: 22px; }
.nav-toggle::after { top: 28px; }
.menu-open .nav-toggle span { opacity: 0; }
.menu-open .nav-toggle::before { transform: translateY(6px) rotate(45deg); }
.menu-open .nav-toggle::after { transform: translateY(-6px) rotate(-45deg); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(9,9,13,.16); }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { background: var(--white); }
.button.small { min-height: 44px; padding: 0 19px; font-size: 13px; }
.button .arrow { transition: transform .2s ease; }
.button:hover .arrow { transform: translateX(3px); }

/* Blurred gradient glow inside a dark container. Needs the container to be position: relative + overflow: hidden. */
.lantern { position: relative; }
.lantern::after {
    content: "";
    position: absolute;
    width: 820px;
    height: 820px;
    left: -280px;
    top: -340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(87, 61, 255, .45), rgba(255, 69, 164, .16) 35%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
}


/* Hero */
.hero {
    min-height: 100svh;
    padding: 152px 0 80px;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: white;
    background: #08070c;
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: radial-gradient(circle at 72% 38%, rgba(161, 78, 255, .18), transparent 32%);
    pointer-events: none;
}
.hero .hero-note { color: rgba(255,255,255,.65); }
.hero .button { background: white; color: var(--ink); border-color: white; }
.hero .button:hover { box-shadow: 0 14px 30px rgba(255,255,255,.14); }
.hero .button.secondary { background: transparent; color: white; border-color: rgba(255,255,255,.45); }
.hero .button.secondary:hover { background: rgba(255,255,255,.12); }
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr);
    gap: 58px;
    align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .lead { max-width: 715px; }
.hero-note { margin: 22px 0 0 4px; font-size: 15px; color: var(--muted); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.demo-stage {
    position: relative;
    min-height: 660px;
    display: grid;
    place-items: center;
    perspective: 1400px;
}
.demo-stage::before {
    content: "";
    position: absolute;
    width: 510px; height: 510px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160,67,255,.16), rgba(48,76,255,.04) 48%, transparent 69%);
    filter: blur(10px);
}
#birth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    top:-105px;
}
.demo-window {
    position: absolute;
    z-index: 2;
    width: min(90%, 420px);
    /* min-height: 400px; */
    border: 1px solid rgba(16,10,26,.18);
    border-radius: 30px;
    background: rgba(92,92,92,.25);
    backdrop-filter: blur(24px) saturate(130%);
    overflow: hidden;
    transform: rotateY(-4deg) rotateX(2deg);
    animation: float-window 7s ease-in-out infinite;
    /* hidden until the birth animation finishes (JS adds .revealed) */
    opacity: 0;
    transition: opacity 1.2s ease;
    bottom:8%;
}
.demo-window.revealed { opacity: 1; }
@keyframes float-window { 50% { transform: rotateY(1deg) rotateX(-1deg) translateY(-12px); } }
.profile-line { display: flex; gap: 16px; align-items: center; padding: 24px 24px 17px; }
.profile-line strong { display: block; font-size: 18px; letter-spacing: -.025em; }
.profile-line span { color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 3px; padding: 24px 24px 16px; }
.tabs span { padding: 9px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; }
.tabs span:first-child { color: white; background: var(--ink); }
.chat-body { padding: 8px 10px 18px; }
.message { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; }
.chat-body .message { display: none; }
.chat-body .message.is-visible { display: flex; }
.message-mark { --size: 35px; margin-top: 2px; }
.bubble {
    max-width: 90%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 4px 17px 17px 17px;
    background: rgba(71,66,81,.75);
    font-size: 14px;
    line-height: 1.48;
}
.question-label { margin: 24px 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color:#dcdcdc; }
.question-stack { display: grid; gap: 8px; }
.question-label, .question-stack { margin-left: 35px;}
.question {
    width: 65%;
    min-width: 325px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.85);
    color: var(--ink);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: .2s ease;
}
.question:hover, .question.active { border-color: #8a5dff; background: rgba(92,44,219); transform: translateX(3px); color:#fff; }
.chat-input {
    position: absolute;
    inset: auto 24px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    scale:0.8;
    margin-bottom: -15px;
}
.chat-input span { flex: 1; color: #94919c; font-size: 13px; }
.send { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: white; }

/* Persona = round user photo + Spheria orb badge.
    Change the person by editing the <img src="..."> inside each .persona.
    Change the size per context with --size. */
.persona {
    position: relative;
    display: block;
    flex: none;
    width: var(--size, 74px);
    height: var(--size, 74px);
}
.persona img,
.persona video {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.persona::after {
    content: "";
    position: absolute;
    right: -6%;
    bottom: -18%;
    width: 46%;
    height: 46%;
    border-radius: 50%;
    background: #fff url("https://storage.googleapis.com/krtx-ws.appspot.com/public/blob_150x150.png") center/88% no-repeat;
    box-shadow: 0 4px 12px rgba(9,9,13,.22);
}

/* Proof strip */
.proof-strip { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.35); }
.proof-row { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.proof-row p { margin: 0; font-size: 13px; color: var(--muted); }
.wordmarks { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 22px 34px; color: #7b7981; font-size: 14px; font-weight: 650; }
.wordmarks img { height: 64px; width: auto; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; }

/* Time / cards */
.savetime { width: 90%; text-align: left; margin-bottom: 65px; container-type: inline-size; }
.savetime h2 { margin-bottom: 0; max-width: none; }
/* One-line fit: 6.3cqi = 6.3% of .savetime's width. The sentence is ~15.8em
    wide, so 100/15.8 ≈ 6.3 keeps it exactly one line at every screen size.
    If you change the text, retune: 100 / (text width in em). */
.savetime .gradient-text { display: inline-block; white-space: nowrap; font-size: clamp(26px, 6.3cqi, 82px); }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.feature-card {
    min-height: 410px;
    position: relative;
    padding: 28px;
    padding-top:45px;
    /* border: 1px solid var(--line); */
    border-radius: var(--radius);
    background: rgba(255,255,255,.62);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.feature-card h3{letter-spacing: -0.5px; font-size: clamp(20px, 2vw, 30px); margin-bottom:25px}
.feature-card p { max-width: 80%; color: var(--muted); line-height: 1.5; }
.card-visual { position: absolute; right: 22px; top: 48px; width: 130px; height: 130px; opacity: .95; }
.card-visual.rings { border: 1px solid rgba(113,92,255,.38); border-radius: 50%; box-shadow: 0 0 0 18px rgba(113,92,255,.05), 0 0 0 42px rgba(255,79,160,.035); }
.card-visual.rings::before, .card-visual.rings::after { content: ""; position: absolute; border-radius: 50%; }
.card-visual.rings::before { width: 16px; height: 16px; background: var(--pink); top: 10px; right: 10px; box-shadow: -98px 72px 0 var(--cyan), -25px 110px 0 var(--violet); }
.card-visual.lines { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(9,9,13,.14) 12px 13px); transform: rotate(-8deg); }
.card-visual.lines::after { content: ""; position: absolute; inset: 13px 5px; background: linear-gradient(90deg, transparent 0 22%, var(--violet) 22% 48%, transparent 48% 58%, var(--pink) 58% 82%, transparent 82%); mix-blend-mode: multiply; filter: blur(3px); opacity: .65; }
.card-visual.portal { border-radius: 24px; background: linear-gradient(145deg, #111019, #4931c8 50%, #ff4c9e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.card-visual.portal::before { content: "↗"; position: absolute; right: 13px; top: 9px; color: white; font-size: 25px; }
.card-visual.portal .persona { position: absolute; --size: 52px; left: 38px; bottom: 38px; }
/* In-flow, full-width centered illustration inside a feature card */
.card-illustration { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 80%;margin:auto; margin-top: 32px; border: 1px solid lightblue; border-radius: 20px;padding: 20px 0; }
.card-illustration .persona { --size: 74px;}
.card-illustration .illustration-name { text-align: center; font-size: 16px; letter-spacing: -.02em; line-height: 1.4; }
.card-illustration .illustration-name span { color: var(--muted); font-size: 13px; }
.card-illustration .ask-link { display: block; margin: 0; text-align: center; font-size: 12px; }

/* Feature card — LinkedIn video type */
.feature-card h3 { max-width: 90%; font-weight: 600; }
.feature-card.linkedin-video p { max-width: 480px; }
.feature-card.linkedin-video video { width: 100%; margin-top: 5px; margin-bottom:10px; border-radius: 18px; border: 1px solid var(--line); }

/* Conversation demo */
.dark-zone {
    color: white;
    background: #171521 !important;
    overflow: hidden;
}
.dark-zone::before {
    content: "";
    position: absolute;
    width: 820px; height: 820px;
    left: -280px; top: -340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(87,61,255,.45), rgba(255,69,164,.16) 35%, transparent 68%);
    filter: blur(30px);
}
.dark-zone .kicker, .dark-zone .body-copy { color: rgba(255,255,255,.65); }
.conversation-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
.conversation-copy { position: sticky; top: 140px; align-self: start; container-type: inline-size; }
.conversation-copy h2 { 
    max-width: 520px; 
    line-height: 110px;
    letter-spacing: 0px;
 }
.conversation-copy .fit-line { 
    display: inline-block; white-space: nowrap; 
    font-size: clamp(20px, 2.5vw, 52px); 
    letter-spacing: -0.5px;
}
.answer-console {
    position: relative;
    min-height: 690px;
    border-radius: 34px;
    background: rgba(255,255,255,.055);
    overflow: hidden;
}
.console-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; font-size: 13px; letter-spacing: 2px; }
.console-person { display: flex; align-items: center; gap: 11px; }
.console-person .persona { --size: 155px; }
.console-content { padding: 48px 42px 110px; }
.console-question { margin-bottom: 35px; color: rgba(255,255,255,.75); font-size: 15px; font-weight: 500; }
.console-answer {
    min-height: 140px;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -.02em;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.16);
}
.console-source { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 38px; }
.source-pill { padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.62); font-size: 11px; }
.console-questions { position: absolute; inset: auto 25px 24px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.console-questions::-webkit-scrollbar { display: none; }
.console-questions button { flex: 0 0 auto; padding: 12px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.05); cursor: pointer; }
.console-questions button:hover, .console-questions button.active { color: white; border-color: #ba73ff; background: rgba(160,76,255,.18); }
.typing::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 5px; background: #c184ff; vertical-align: -.04em; animation: blink .72s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Knowledge pipeline */
.pipeline-intro { display: grid; gap: 22px; margin-bottom: 65px; }
.pipeline-intro h2 { margin-bottom: 0; }
.pipeline-intro .body-copy { max-width: 640px; }
.pipeline {
    position: relative;
    min-height: 540px;
    display: grid;
    grid-template-columns: 1fr 320px 1fr;
    grid-template-rows: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 45px;
    border: 1px solid var(--line);
    border-radius: 40px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}
.pipeline-title {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: center;
    position: relative;
    z-index: 2;
    max-width: none;
    margin-bottom: 0;
    text-align: center;
}
.source-list, .output-list { position: relative; z-index: 2; display: grid; gap: 11px; }
.data-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.87);
    box-shadow: 0 10px 30px rgba(31,20,80,.045);
    font-size: 14px;
}
.data-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #f0eef7; font-size: 12px; font-weight: 700; }
.source-list .data-card:nth-child(2), .output-list .data-card:nth-child(2) { transform: translateX(18px); }
.source-list .data-card:nth-child(4), .output-list .data-card:nth-child(4) { transform: translateX(9px); }
.brain-core { position: relative; z-index: 3; display: grid; place-items: center; min-height: 330px; }
.brain-core .persona { --size: 185px; }
.brain-core .persona img { box-shadow: 0 28px 65px rgba(99,57,255,.3); }
.orbit { position: absolute; width: 290px; height: 290px; border: 1px solid rgba(91,64,255,.25); border-radius: 50%; animation: spin 18s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; }
.orbit::before { top: 26px; left: 45px; background: var(--pink); box-shadow: 0 0 15px var(--pink); }
.orbit::after { right: -4px; top: 135px; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
@keyframes spin { to { transform: rotate(360deg); } }
.brain-label { position: absolute; bottom: 18px; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* Second Brain -> AI Twin. Animations start when the reveal observer adds
    .visible to .twin-card, so the story plays on scroll: knowledge chips feed
    the orb, a pulse crosses each link, then the portrait wakes up as the twin. */
.twin-card {
    position: relative;
    padding: 70px 60px 64px;
    border-radius: 42px;
    color: white;
    background: #08070d;
    overflow: hidden;
}
.twin-copy { position: relative; z-index: 2; }
.twin-copy .body-copy { width:100%; color: rgba(255,255,255,.68); }
.twin-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 90px 1fr 90px 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 75px;
}
.twin-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.twin-stage-label { margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: center; }
.twin-chip {
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-size: 13px;
    white-space: nowrap;
}
.twin-card.visible .twin-chip { animation: chip-feed 7s ease-in-out infinite; }
.twin-card.visible .twin-chip:nth-of-type(2) { animation-delay: 1.75s; }
.twin-card.visible .twin-chip:nth-of-type(3) { animation-delay: 3.5s; }
.twin-card.visible .twin-chip:nth-of-type(4) { animation-delay: 5.25s; }
@keyframes chip-feed {
    0% { opacity: 0; transform: translateX(-18px); }
    10%, 58% { opacity: 1; transform: translateX(0); }
    72%, 100% { opacity: 0; transform: translateX(46px); }
}
.twin-link { position: relative; width: 100%; height: 1px; margin-top: -38px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); }
.twin-pulse { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); opacity: 0; }
.twin-pulse.pulse-2 { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.twin-card.visible .twin-pulse { animation: pulse-travel 2.2s ease-in-out infinite; }
.twin-card.visible .twin-pulse.pulse-2 { animation-delay: 1.1s; }
@keyframes pulse-travel {
    0% { left: 0; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { left: calc(100% - 7px); opacity: 0; }
}
@keyframes pulse-travel-v {
    0% { top: 0; opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { top: calc(100% - 7px); opacity: 0; }
}
.twin-core { position: relative; display: grid; place-items: center; width: 230px; height: 230px; }
.twin-core::before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(113,92,255,.42), transparent 70%); filter: blur(12px); }
/* screen blend removes the black background of blob_blackbg.png on the dark card */
.twin-orb { position: relative; width: 158px; height: 158px; mix-blend-mode: screen; }
.twin-card.visible .twin-orb { animation: orb-breathe 2.2s ease-in-out infinite; }
@keyframes orb-breathe { 50% { transform: scale(1.04); } }
.twin-being { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 230px; justify-content: center; }
.twin-self .persona { --size: 132px; }
.twin-self .persona video { filter: grayscale(1) brightness(.45); transition: filter 1.1s ease 1.3s; }
.twin-card.visible .twin-self .persona video { filter: none; }
.twin-self .persona::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(186,115,255,.6);
    box-shadow: 0 0 30px rgba(150,80,255,.4), inset 0 0 18px rgba(150,80,255,.18);
    opacity: 0;
}
.twin-card.visible .twin-self .persona::before { animation: twin-ring 1.2s ease-out 1.5s forwards; }
@keyframes twin-ring { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
/* the Spheria orb badge docks onto the portrait: the brain becomes part of you */
.twin-self .persona::after { opacity: 0; transform: scale(.3); }
.twin-card.visible .twin-self .persona::after { 
    animation: badge-pop .7s cubic-bezier(.22,.68,0,1) 1.9s forwards; 
    width: 38%;
    height: 38%;
}
@keyframes badge-pop { to { opacity: 1; transform: scale(1); } }
.twin-bubble {
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px 16px 16px 16px;
    background: rgba(255,255,255,.09);
    font-size: 14px;
    opacity: 0;
    transform: translateY(10px) scale(.92);
}
.twin-card.visible .twin-bubble { animation: bubble-pop .6s cubic-bezier(.22,.68,0,1) 2.3s forwards; }
@keyframes bubble-pop { to { opacity: 1; transform: none; } }
.twin-punchline {
    position: relative;
    z-index: 2;
    max-width: 90%;
    margin: 75px auto 0;
    text-align: center;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 500;
}
.twin-cta { position: relative; z-index: 2; margin-top: 32px; text-align: center; }
.twin-card .button { background: white; color: var(--ink); border-color: white; }
.twin-card .button:hover { box-shadow: 0 14px 30px rgba(255,255,255,.14); }

/* Share */
.share-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; }
.share-copy .body-copy { max-width: 520px; }
.share-list { display: grid; gap: 1px; margin-top: 36px; border-top: 1px solid var(--line); }
.share-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.share-item i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-style: normal; font-size: 11px; }
.share-item span { font-size: 16px; }
.share-item b { color: var(--muted); font-size: 12px; font-weight: 500; }
.linkedin-card {
    position: relative;
    min-height: 430px;
    margin-top:15px;
    padding: 26px;
    border-radius: 34px;
    background: #fff;
    /* box-shadow: var(--shadow); */
    border: 1px solid var(--line);
    overflow: hidden;
}
.share-grid .linkedin-card{
    margin-top: 200px;
}
.littlebgcolor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(155,73,255,.16), transparent 37%); pointer-events: none; }

.linkedin-top { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.right{position: absolute; right:10px; top : 14px;}
.linkedin-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: #0877b9; color: white; font-weight: 700; font-size: 22px; }
.posted { color: var(--muted); font-size: 11px; }
.linkedin-copy { position: relative; max-width: 500px; margin-bottom: 5px; font-size: 17px; line-height: 20px !important; letter-spacing: -.015em; padding-left: 20px; }
.embedded-ai { position: relative; padding: 22px; border-radius: 23px; background: #faf9fc; }
.embedded-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.embedded-head .persona { --size: 55px; }
.embedded-title strong { display: block; }
.embedded-title span { color: var(--muted); font-size: 12px; }
.ask-link { display: inline-flex; align-items: center; gap: 8px; margin: 3px 0 18px; border-bottom: 1px solid; color: #145cc4; font-size: 13px; font-weight: 700; letter-spacing: .07em; }
.sample-prompts { display: grid; gap: 0; border-left: 2px solid #b44cff; padding-left: 17px; }
.sample-prompts span { padding: 8px 0; font-size: 14px; }
.linkedin-actions { position: relative; 
    /* inset: auto 26px 23px;  */
    display: flex; justify-content: space-between; width: calc(100% - 52px); padding-top: 16px; padding-left:20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* Control */
.control-zone { background: #edeaf4; }
.control-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 75px; align-items: center; }
.privacy-panel {
    position: relative;
    min-height: 520px;
    padding: 31px;
    border: 1px solid rgba(9,9,13,.12);
    border-radius: 34px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.privacy-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.privacy-head span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 208px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f1eff5;
}
.toggle button { position: relative; z-index: 2; height: 35px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; transition: .2s ease; }
.toggle button.active { background: var(--ink); color: white; }
.privacy-body { position: relative; z-index: 2; padding-top: 48px; }
.lock { width: 84px; height: 84px; margin-bottom: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; }
.lock svg { width: 32px; height: 32px; fill: currentColor; }
.lock .lock-open { display: none; }
.lock.is-public .lock-closed { display: none; }
.lock.is-public .lock-open { display: block; }
.privacy-body h3 { max-width: 400px; font-size: 42px; }
.privacy-state { max-width: 410px; color: var(--muted); line-height: 1.5; }
.ownership-points { display: grid; gap: 35px; margin-top: 40px; }
.ownership-point { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; }
.ownership-point i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: white; font-style: normal; font-size: 12px; }
.ownership-point strong { 
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.ownership-point span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Testimonials / people */
.people-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 50px; }
.people-head h2 { margin-bottom: 0; }
.people-image { padding: 12px; border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: 0 30px 70px rgba(30,18,77,.1); }
.people-image img { width: 100%; border-radius: 18px; }
.people-note { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 35px; }
.people-note strong { font-size: 21px; letter-spacing: -.025em; }

/* CTA */
/* final CTA moved to its own component : css/human_all_the_way.css */

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.68,0,1); }
[data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
    .hero-grid, .conversation-layout, .share-grid, .control-grid { grid-template-columns: 1fr; }
    .hero { padding-top: 135px; }
    .hero-copy { max-width: 850px; }
    .demo-stage { min-height: 610px; }
    .demo-window { max-width: 580px; }
    .conversation-copy { position: relative; top: 0; }
    .cards-2 { grid-template-columns: 1fr 1fr; }
    .cards-2 .feature-card:last-child { grid-column: 1 / -1; min-height: 340px; }
    .pipeline { grid-template-columns: 1fr 260px 1fr; padding: 28px; }
    .share-grid { gap: 45px; }
    .linkedin-card { max-width: 730px; }
    .control-grid { gap: 45px; }
    .conversation-copy h2 { line-height: 1.3; }
    .twin-flow { grid-template-columns: 1fr 50px 1fr 50px 1fr; }
}

@media (max-width: 800px) {
    .hideonmobile{display:none};
    .shell { width: min(calc(100% - 26px), var(--max)); }
    .section { padding: 88px 0; }
    .hero-title { font-size: 65px; line-height: 1.2; letter-spacing: 5px; }
    .hero-title em { line-height: 1.35; }
    
    h2, .conversation-copy h2, .savetime h2 { font-size: 13.2vw; line-height: 70px; letter-spacing: -1px; }
    .pipeline-intro h2, .twin-copy h2{font-size: 12vw !important; letter-spacing: -3px; line-height: 60px;}

    .nav-toggle { display: none; }
    .nav-wrap{padding:5px;}
    .nav-wrap.scrolled{
        background: rgb(8 7 11 / 82%);
        backdrop-filter: blur(22px) saturate(130%);
    }
    .nav-links {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 35px;
    background: rgba(248,247,251,.98);
    font-size: 26px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: .25s ease;
    }
    .menu-open .nav-links { opacity: 1; pointer-events: auto; transform: none; }
    .nav-links .button { margin-top: 15px; }
    .nav-cta-mobile{display: flex !important;}

    .hero { min-height: auto; padding: 130px 0 65px; }
    .hero-grid { grid-template-columns: 1fr; gap: 0px; }
    .hero-grid .demo-stage { order: -1; }
    .nav-cta-mobile { display: inline-flex; }
    .hero-actions { display: none; }
    .hero::before { width: 740px; height: 530px; right: -390px; top: -40px; opacity: .66; }
    .hero .lead { font-size: 21px; }
    .hero-copy{
        padding:0px 10px 0px 30px;
    }
    .demo-stage { min-height: 400px; margin-inline: -3px; }
    .demo-window { min-height: 230px; scale:0.8; border-radius: 24px; transform: none; animation: none; bottom:20px;}
    .question-label, .question-stack { margin-left: 0; }
    .question { width: 100%; min-width: 0; }
    .savetime .gradient-text { font-size: clamp(16px, 6.3cqi, 82px); }
    .floating-chip { display: none; }
    .chat-input { inset: auto 17px 17px; }
    .profile-line, .tabs, .chat-body { padding-left: 17px; padding-right: 17px; }
    .proof-row { align-items: flex-start; flex-direction: column; }
    .wordmarks { flex-wrap: nowrap; justify-content: space-between; width: 100%; gap: 10px; }
    .wordmarks img { height: 44px; width: auto; max-width: 19%; object-fit: contain; }
    .cards-2 { grid-template-columns: 1fr; }
    .cards-2 .feature-card:last-child { grid-column: auto; }
    .feature-card { min-height: 360px; background:unset; box-shadow: unset; }
    .conversation-layout { gap: 40px; }
    .answer-console { min-height: 630px; border-radius: 27px; }
    .console-person .persona { --size: 90px; }
    .console-content { padding: 37px 24px 110px; }
    .console-answer { min-height: 180px; }
    /* the card fills .shell : scale would shrink it away from the edges,
       so the inner blocks are sized down instead of scaling the whole box */
    .pipeline { 
        grid-template-columns: 1fr; min-height: auto; padding: 22px 14px; gap: 14px; width: 100%; border-radius: 26px;        margin: auto;
        margin-top: 70px; scale:0.94; }
    .pipeline .pipeline-title { font-size: 19px; }
    .pipeline .pipeline-title.body-copy { font-size: 15px; }
    .pipeline .data-card { padding: 12px 14px; font-size: 14px; }
    /* keep the orb at its old scaled-down size now the scale is gone */
    .pipeline .brain-core { min-height: 260px; }
    .pipeline .brain-core .persona { --size: 150px; }
    .pipeline .orbit { width: 232px; height: 232px; }
    .pipeline::before { transform: translate(-50%,-50%) rotate(90deg); width: 640px; opacity: .3; }
    .pipeline-intro{margin-bottom: 0;}
    .brain-core { min-height: 300px; order: 1; }
    .source-list { order: 2; }
    .output-list { order: 3; }
    .source-list .data-card:nth-child(2), .output-list .data-card:nth-child(2), .source-list .data-card:nth-child(4), .output-list .data-card:nth-child(4) { transform: none; }
    .share-grid, .control-grid { gap: 42px; }
    .linkedin-card { min-height: 415px; padding: 20px; }
    .share-grid .linkedin-card{ margin-top: 0px; }
    .linkedin-actions { inset-inline: 20px; width: calc(100% - 40px); }
    .card-illustration{width: 95%;}
    .card-visual{right: 18px;top:18px;}
    .control-grid .privacy-panel { order: 2; }
    .privacy-panel { padding: 22px; min-height: 500px; scale:0.9;margin-top:-50px; }
    .privacy-head { align-items: flex-start; gap: 16px; flex-direction: column; }
    .people-head { display: block; }
    .people-head .body-copy { margin-top: 20px; }
    .people-note { grid-template-columns: 1fr; gap: 20px; }
    .savetime{
        margin-bottom:30px;
    }

    .savetime .gradient-text{
        font-size: 24px;
        letter-spacing: -1px;
    }
    .twin-card { padding: 45px 22px; border-radius: 31px; }
    .twin-flow { grid-template-columns: 1fr; gap: 6px; margin-top: 45px; }
    /* vertical flow: links become vertical lines, chips drift down toward the brain */
    .twin-link { width: 1px; height: 55px; margin: 00px auto; background: linear-gradient(180deg, transparent, rgba(255,255,255,.3), transparent); }
    .twin-pulse { top: 0; left: -3px; }
    .twin-card.visible .twin-pulse { animation-name: pulse-travel-v; }
    /* chips are laid out in a wrapping row here, so they fade in place
       rather than drifting down like the old stacked column did */
    .twin-card.visible .twin-chip { animation-name: chip-feed-row; }
    /* 3 chips only on mobile : the 4th would orphan onto its own line */
    .twin-knowledge .chip-desktop-only { display: none; }
    /* restagger over 3 chips instead of 4 (7s / 3) */
    .twin-card.visible .twin-chip:nth-of-type(2) { animation-delay: 2.33s; }
    .twin-card.visible .twin-chip:nth-of-type(3) { animation-delay: 4.66s; }
    /* chips wrap side by side instead of stacking, to save vertical space */
    .twin-knowledge {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .twin-stage{gap:0px; margin-bottom:-10px;}
    .twin-knowledge .twin-chip {
        padding: 8px 13px;
        font-size: 12px;
        white-space: normal;
    }
    /* the label is a flex item of the wrapping row : keep it on its own line */
    .twin-knowledge .twin-stage-label { flex-basis: 100%; }
    .twin-core { width: 150px; height: 120px; }
    .twin-core::before { width: 160px; height: 160px; }
    .twin-orb { width: 110px; height: 110px; }
    .twin-being { min-height: 0; padding-top: 14px; }
    .twin-stage-label { margin-top: 16px; }
    .twin-punchline { margin-top: 70px; }
}
@keyframes chip-feed-v {
    0% { opacity: 0; transform: translateY(-14px); }
    10%, 58% { opacity: 1; transform: translateY(0); }
    72%, 100% { opacity: 0; transform: translateY(30px); }
}
/* wrapped row on mobile : transform only, so a chip fading out never
   reflows the chips sitting next to it */
@keyframes chip-feed-row {
    0% { opacity: 0; transform: translateY(-10px) scale(.96); }
    10%, 58% { opacity: 1; transform: translateY(0) scale(1); }
    72%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
}

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