/* entaura.ai site styles: light theme. Home-only rules live in home.css. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --soft: #f7f7f5;
  --card: #f3f3f1;
  --line: #e8e8e5;
  --line-strong: #d6d6d2;
  --text: #0b0b0b;
  --body: #565656;
  --faint: #8c8c88;
  --ask: #1f9c86;
  --ask-tint: #e2f6f1;
  --insight: #3567d8;
  --insight-tint: #e6eeff;
  --watch: #8457d4;
  --watch-tint: #f0e9ff;
  --peach: #e9795b;
  --peach-tint: #fff0ea;
  --display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: #cfe0ff; color: var(--text); }
:focus-visible { outline: 2px solid var(--insight); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--text); }

.container { width: min(1200px, calc(100% - 48px)); margin: auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Second heading lines used to be gradient text; they are now a quiet grey. */
.gradient-text { color: var(--faint); }

/* ---------- Gradient orb ---------- */

.orb {
  position: relative;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: #dfe9ff;
  box-shadow: inset 0 -12px 30px rgba(255, 255, 255, .55), inset 0 10px 24px rgba(40, 60, 120, .08);
}
.orb::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background: conic-gradient(from 210deg, #8fb4f7, #8fdce6, #bfe8a8, #f7dc9a, #f8bca8, #e9b0dc, #c3a6f3, #8fb4f7);
  filter: blur(var(--orb-blur, 14px));
  animation: orb-spin 18s linear infinite;
}
/* entaura.ai's variation: logo colours, plus a faint halo line inside the rim. */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle, transparent 69%, rgba(255, 255, 255, .9) 71.5%, transparent 74%);
}
/* Small orbs need a tighter blur or their colours wash out to grey. */
.orb.small { --orb-blur: 3px; }
.orb.small::after { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 38%); }
.orb.ask::before { background: conic-gradient(from 200deg, #8fb4f7, #8fdce6, #a9d8fb, #8fb4f7); }
.orb.insight::before { background: conic-gradient(from 200deg, #8fdce6, #bfe8a8, #f7dc9a, #8fdce6); }
.orb.watch::before { background: conic-gradient(from 200deg, #f8bca8, #e9b0dc, #c3a6f3, #f8bca8); }
/* The original pastel sphere, kept for the home hero. */
.orb.classic::before { background: conic-gradient(from 210deg, #9cc8ff, #a8eadf, #d6c2ff, #ffc9b8, #ffe6a8, #9cc8ff); }
.orb.classic::after { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 42%); }
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* ---------- Product wordmark (components/ProductMark.jsx) ---------- */

.pmark { --pm: 27px; display: inline-block; height: var(--pm); width: auto; max-width: 100%; object-fit: contain; vertical-align: middle; user-select: none; }
.pmark-sm { --pm: 20px; }
.pmark-lg { --pm: 36px; }

/* ---------- Header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
/* Home page at the very top: let the hero ribbon show through the header. */
.topbar.at-top { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.nav { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: -.035em; }
.brand img { width: 46px; height: 32px; object-fit: contain; }
.navlinks { display: flex; gap: 30px; align-items: center; color: var(--body); font-size: 14px; font-weight: 500; }
.navlinks a:hover, .footer a:hover { color: var(--text); }
.menu-button { display: none; background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 10px 0; }
.nav-dropdown-trigger span { margin-left: 4px; color: var(--faint); }
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-mega {
  position: absolute;
  z-index: 30;
  top: 42px;
  left: 50%;
  width: 320px;
  padding: 8px;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(20, 20, 40, .18);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-dropdown:hover .nav-mega, .nav-dropdown:focus-within .nav-mega, .nav-dropdown.open .nav-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-mega a { display: flex; gap: 12px; padding: 12px; border-radius: 12px; }
.nav-mega a:hover, .nav-mega a:focus { background: var(--soft); }
.nav-mega .orb { flex: none; width: 32px; height: 32px; }
.nav-mega strong, .nav-mega small { display: block; }
.nav-mega .pmark { --pm: 16px; margin-bottom: 2px; }
.nav-mega strong { color: var(--text); font-size: 14px; font-weight: 600; }
.nav-mega small { margin-top: 2px; color: var(--body); font-size: 12.5px; }
.solutions-dropdown .nav-mega { display: none !important; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.button.primary { background: var(--text); border-color: var(--text); color: #fff; }
.button.primary:hover { background: #2b2b2b; }
.button.ghost:hover { background: var(--soft); border-color: var(--faint); }
.navcta { padding: 9px 18px; font-size: 13.5px; }

/* ---------- Sections ---------- */

.section { padding: 120px 0; }
.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 0; }
.section-head p { color: var(--body); font-size: 18px; max-width: 640px; margin: 20px 0 0; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 96px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 80% at 85% 10%, #eef3ff, transparent 70%), radial-gradient(40% 60% at 10% 100%, #f1fbf8, transparent 70%);
}
.page-hero h1 { font-size: clamp(50px, 7.4vw, 96px); letter-spacing: -.05em; line-height: .98; max-width: 900px; margin: 22px 0 26px; }
.page-hero p { font-size: 20px; color: var(--body); max-width: 680px; margin: 0; }
.solutions-hero { background: radial-gradient(55% 80% at 90% 0%, #f2ecff, transparent 70%), radial-gradient(45% 60% at 0% 100%, #eaf3ff, transparent 70%); }

/* ---------- Product pages ---------- */

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.detail-grid h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 22px; }
.detail-grid p { color: var(--body); font-size: 17px; }

.examples { padding-top: 0; }
.example-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.example-card { padding: 28px; border-radius: 22px; background: var(--card); }
.example-card p { margin: 0; color: var(--text); font-family: var(--display); font-size: 20px; line-height: 1.4; letter-spacing: -.01em; }



.contact-strip { padding: 110px 0; text-align: center; background: var(--soft); border-top: 1px solid var(--line); }
.contact-strip h2 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 16px; }
.contact-strip p { color: var(--body); font-size: 18px; margin: 0 auto 30px; max-width: 600px; }
.contact-strip-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Diagrams */
.connector-diagram, .knowledge-diagram, .analytics-diagram {
  position: relative;
  min-height: 420px;
  padding: 28px;
  border-radius: 28px;
  background: radial-gradient(60% 50% at 50% 55%, #eef4ff, transparent 75%), var(--card);
  overflow: hidden;
}
.diagram-heading h3 { margin: 12px 0 6px; font-size: 26px; line-height: 1.1; letter-spacing: -.03em; }
.diagram-heading p { margin: 0; color: var(--body); font-size: 14px; }
.diagram-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 14px; min-height: 230px; margin-top: 18px; }
.diagram-stage::before, .diagram-stage::after { content: ""; position: absolute; z-index: 0; top: 50%; width: 24%; border-top: 1px dashed var(--line-strong); }
.diagram-stage::before { left: 24%; }
.diagram-stage::after { right: 24%; }
.connector-column { z-index: 1; display: grid; gap: 10px; }
.connector-column.left { justify-items: end; }
.connector-column.right { justify-items: start; }
.tool-chip { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 7px 12px 7px 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); font-size: 12px; }
.tool-chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ask-tint); color: var(--ask); font-size: 9px; font-style: normal; font-weight: 700; }
.tool-chip.storage i { background: var(--insight-tint); color: var(--insight); }
.tool-chip.marketing i, .tool-chip.engineering i { background: var(--peach-tint); color: var(--peach); }
.tool-chip.sales i { background: var(--watch-tint); color: var(--watch); }
.diagram-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 126px;
  height: 126px;
  margin: auto;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .6), 0 20px 40px -20px rgba(40, 70, 140, .35);
  text-align: center;
}
.diagram-core img { width: 42px; height: 27px; object-fit: contain; margin-bottom: 4px; }
.diagram-core strong { font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.05; }
.diagram-core small { display: block; margin-top: 4px; color: var(--faint); font-size: 9px; }
.diagram-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); color: var(--body); font-size: 11px; }
.diagram-foot b { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ask); }
/* Ask: sources orbiting the core (components/KnowledgeDiagram.jsx) */
.knowledge-diagram { display: flex; flex-direction: column; }
.orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 28px auto 8px; container-type: inline-size; }
.orbit-ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw);
  margin: calc(var(--s) * -.5cqw) 0 0 calc(var(--s) * -.5cqw);
  border-radius: 50%; border: 1px solid rgba(120, 140, 255, .28);
  transform: rotate(var(--offset));
  animation: orbit-spin var(--d) linear infinite;
}
.orbit-ring.reverse { animation-direction: reverse; border-color: rgba(200, 140, 240, .26); }
/* A soft spark that rides each ring. */
.orbit-ring::after {
  content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #6f9bff; box-shadow: 0 0 10px 3px rgba(111, 155, 255, .55);
}
.orbit-ring.reverse::after { background: #c38cf0; box-shadow: 0 0 10px 3px rgba(195, 140, 240, .5); }
.orbit-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--s) * -.5cqw)) rotate(calc(var(--a) * -1)); }
.orbit-logo {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  --chip: clamp(30px, 10cqw, 44px);
  width: var(--chip); height: var(--chip); margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2); border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(20, 30, 70, .35);
  transform: rotate(calc(var(--offset) * -1));
  animation: orbit-counter var(--d) linear infinite;
  transition: box-shadow .25s;
}
.orbit-ring.reverse .orbit-logo { animation-direction: reverse; }
.orbit-logo img { width: 55%; height: 55%; object-fit: contain; }
.orbit-logo:hover { box-shadow: 0 0 0 4px rgba(111, 155, 255, .18), 0 8px 18px -8px rgba(20, 30, 70, .4); }
/* Ring and logo turn by equal and opposite amounts, so logos stay level. */
@keyframes orbit-spin { from { transform: rotate(var(--offset)); } to { transform: rotate(calc(var(--offset) + 360deg)); } }
@keyframes orbit-counter { from { transform: rotate(calc(var(--offset) * -1)); } to { transform: rotate(calc(var(--offset) * -1 - 360deg)); } }
.orbit-core {
  position: absolute; left: 50%; top: 50%; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw;
  display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 20px 40px -18px rgba(40, 70, 140, .45);
}
.orbit-core img { position: relative; width: 62%; }
.orbit-core i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(111, 155, 255, .5); animation: orbit-ping 3.2s ease-out infinite; }
.orbit-core i + i { animation-delay: 1.6s; border-color: rgba(195, 140, 240, .5); }
@keyframes orbit-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.knowledge-answer { align-self: center; padding: 10px 14px; border-radius: 12px; font-size: 13px; background: var(--ask-tint); border: 1px solid #bfe8de; color: #146e5e; }
.analytics-window { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.analytics-top { display: flex; justify-content: space-between; color: var(--body); font-size: 12px; }
.analytics-top b { color: var(--insight); font-weight: 600; font-size: 12px; }
.analytics-kpis { display: flex; gap: 22px; margin: 20px 0; }
.analytics-kpis span { color: var(--faint); font-size: 11px; }
.analytics-kpis strong { display: block; color: var(--text); font-family: var(--display); font-weight: 500; font-size: 20px; margin-top: 3px; }
.analytics-bars { height: 145px; display: flex; align-items: end; gap: 8px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.analytics-bars i { flex: 1; height: 32%; border-radius: 6px 6px 2px 2px; background: #9cc0ff; animation: bar-rise .8s ease both; transform-origin: bottom; }
.analytics-bars i:nth-child(2) { height: 48%; animation-delay: .08s; }
.analytics-bars i:nth-child(3) { height: 41%; animation-delay: .16s; }
.analytics-bars i:nth-child(4) { height: 66%; animation-delay: .24s; }
.analytics-bars i:nth-child(5) { height: 57%; animation-delay: .32s; }
.analytics-bars i:nth-child(6) { height: 76%; animation-delay: .4s; }
.analytics-bars i:nth-child(7) { height: 93%; animation-delay: .48s; background: var(--insight); }
@keyframes bar-rise { from { transform: scaleY(0); } }
.analytics-labels { display: flex; justify-content: space-between; padding-top: 8px; color: var(--faint); font-size: 10px; }

/* ---------- Solutions ---------- */

.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.problem-card { padding: 30px; border-radius: 22px; background: var(--card); }
.problem-card span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; font-size: 18px; color: var(--text); }
.problem-card h3 { margin: 22px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.problem-card p { color: var(--body); font-size: 15px; margin: 0; }

.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.industry-card { min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: border-color .2s, background .2s; }
.industry-card:hover { background: var(--soft); border-color: var(--line-strong); }
.industry-card h3 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 10px; }
.industry-card p { color: var(--body); font-size: 14px; margin: 0; }

.solution-detail { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.solution-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.solution-detail-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.solution-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card); font-size: 18px; }
.solution-detail-grid h3 { font-size: 26px; letter-spacing: -.03em; margin: 22px 0 10px; }
.solution-detail-grid p { color: var(--body); font-size: 15px; }
.solution-detail-grid p strong { color: var(--text); font-weight: 600; }
.solution-detail-grid ul { padding: 0; list-style: none; font-size: 14px; }
.solution-detail-grid li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.solution-detail-grid li::before { content: "✓"; color: var(--ask); margin-right: 10px; font-weight: 700; }
.solution-detail-grid a { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 14px; border-bottom: 1px solid currentColor; }

/* ---------- Contact ---------- */

.contact-section { padding: 120px 0; }
.contact-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; min-width: 0; }
.contact-form label { display: grid; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: 0;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(11, 11, 11, .06); }
.contact-form .full { grid-column: 1 / -1; }
.contact-form .button { justify-self: start; }
.contact-office { padding: 30px; border-radius: 24px; background: var(--card); min-width: 0; }
.contact-office h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; margin: 14px 0; }
.contact-office p { color: var(--body); font-size: 14.5px; line-height: 1.65; }
.contact-office p strong { color: var(--text); }
.contact-office a { color: var(--text); font-weight: 500; border-bottom: 1px solid var(--line-strong); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--soft); }
.footer-inner { display: flex; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-powered { padding-left: 16px; border-left: 1px solid var(--line-strong); font-size: 13.5px; color: var(--faint); }
.footer-links { display: flex; align-self: center; gap: 22px; font-size: 14px; color: var(--body); margin-left: auto; }
.legal { width: 100%; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }

/* ---------- Responsive ---------- */

@media (max-width: 850px) {
  .navlinks { display: none; }
  .navlinks.open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    padding: 12px 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .navlinks.open > a { padding: 10px 0; }
  .navlinks.open .nav-dropdown { display: block; width: 100%; }
  .navlinks.open .nav-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; text-align: left; }
  .nav-mega { position: static; width: auto; display: none; transform: none; opacity: 1; visibility: visible; box-shadow: none; }
  .navlinks.open .nav-dropdown.open .nav-mega { display: block; transform: none; margin: 0 0 8px; background: var(--soft); border: 0; }
  .menu-button { display: block; }
  .navcta { display: none; }

  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .example-list, .industry-grid, .problem-grid { grid-template-columns: 1fr 1fr; }
  .solution-detail-grid, .contact-layout { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .full { grid-column: auto; }
  .connector-diagram, .knowledge-diagram, .analytics-diagram { min-height: 0; }
  .diagram-stage { gap: 6px; }
  .diagram-core { width: 100px; height: 100px; }
  .footer-links { margin-left: 0; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, 1200px); }
  .section { padding: 80px 0; }
  .page-hero { padding: 80px 0 64px; }
  .page-hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .page-hero p { font-size: 17px; }
  .example-list, .industry-grid, .problem-grid { grid-template-columns: 1fr; }
  .contact-section { padding: 80px 0; }
  .contact-form, .contact-office { padding: 22px; }
  .diagram-stage { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .diagram-stage::before, .diagram-stage::after { display: none; }
  .connector-column.left, .connector-column.right { justify-items: center; }
  .diagram-core { grid-row: 1; grid-column: 1; }
  .connector-column.left { grid-row: 2; }
  .connector-column.right { grid-row: 3; }
  .diagram-foot { flex-direction: column; }
  .analytics-bars { height: 110px; }
  .footer-inner { flex-direction: column; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb::before, .analytics-bars i, .orbit-ring, .orbit-logo, .orbit-core i { animation: none; }
}

/* ---------- Integration page ---------- */

.int-soft { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.int-faq-section { border-top: 1px solid var(--line); }
.int-icon { flex: none; width: 20px; height: 20px; color: var(--body); }

/* At a glance: your systems → entaura → your team */
.int-glance-section { padding: 72px 0 96px; }
.int-glance { display: grid; grid-template-columns: 1fr minmax(80px, .7fr) auto minmax(80px, .7fr) 1fr; align-items: center; }
.int-node { padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -32px rgba(0, 0, 0, .3); }
.int-node strong { display: block; margin-bottom: 12px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.int-node ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.int-node li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.int-link { position: relative; height: 1px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.int-link span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--card); font-family: var(--mono); font-size: 11px; color: var(--body); white-space: nowrap; }
.int-link i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text); opacity: 0; }
.int-glance.in .int-link i { animation: int-travel 2.6s ease-in-out infinite; }
.int-glance.in .int-link:nth-of-type(4) i { animation-delay: 1.3s; }
@keyframes int-travel { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.int-core { display: grid; justify-items: center; gap: 4px; text-align: center; }
.int-core-mark { display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 8px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 0 0 11px var(--line), 0 24px 50px -30px rgba(40, 60, 140, .45); }
.int-core-mark img { width: 52px; height: 32px; object-fit: contain; }
.int-core strong { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.int-core small { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.int-caption { margin: 40px 0 0; text-align: center; color: var(--body); font-size: 15px; }

/* How it works: five plain-language steps on a filling track */
.int-phases { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.int-phases::before, .int-phases::after { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 1px; background: var(--line-strong); }
.int-phases::after { background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
.int-phases.in::after { transform: scaleX(1); }
.int-phases li { position: relative; z-index: 1; display: grid; justify-items: start; align-content: start; gap: 6px; opacity: .35; transition: opacity .5s ease var(--d, 0ms); }
.int-phases.in li { opacity: 1; }
.int-step { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); }
.int-step .int-icon { color: var(--text); }
.int-phases small { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .06em; }
.int-phases h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.int-phases p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.int-phases em { margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--body); }

/* What we provide · what you bring */
.int-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.int-split article { padding: 28px 30px 18px; border-radius: 24px; background: var(--card); }
.int-items { list-style: none; margin: 16px 0 0; padding: 0; }
.int-items li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-strong); }
.int-items li .int-icon { margin-top: 1px; color: var(--text); }
.int-items div { display: grid; gap: 2px; }
.int-items strong { font-size: 15.5px; font-weight: 500; }
.int-items small { font-size: 13.5px; color: var(--faint); }
.int-note { margin: 36px 0 0; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -.03em; max-width: 820px; }
.int-note span { color: var(--faint); }

/* Deployment: toggle + where it lives */
.int-deploy { padding: 10px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.int-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--card); }
.int-toggle i { position: absolute; top: 4px; bottom: 4px; left: calc(4px + var(--i) * (50% - 4px)); width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px -10px rgba(0, 0, 0, .25); transition: left .45s cubic-bezier(.3, .8, .2, 1); }
.int-toggle button { position: relative; z-index: 1; border: 0; background: none; padding: 12px 10px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; color: var(--faint); cursor: pointer; transition: color .3s; }
.int-toggle button[aria-pressed="true"] { color: var(--text); }
.int-deploy-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 28px 22px 22px; animation: int-fade .45s ease both; }
@keyframes int-fade { from { opacity: 0; transform: translateY(6px); } }
.int-place { position: relative; padding: 44px 22px 22px; border-radius: 20px; border: 1.5px dashed var(--line-strong); }
.int-place > span { position: absolute; top: 12px; left: 16px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--body); }
.int-place > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.int-place b { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-weight: 500; font-size: 14.5px; }
.int-place b img { width: 30px; height: 19px; object-fit: contain; }
.int-place.hosted { border-color: var(--text); }
.int-facts dl { margin: 0; }
.int-facts dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.int-facts dt { color: var(--faint); }
.int-facts dd { margin: 0; }
.int-facts p { margin: 16px 0 0; font-size: 14.5px; color: var(--body); }
.int-facts p b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* Security */
.int-security { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.int-security div { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid var(--line); }
.int-security .int-icon { margin-bottom: 8px; color: var(--text); }
.int-security h3 { margin: 0; font-size: 16.5px; letter-spacing: -.01em; }
.int-security p { margin: 0; font-size: 14px; color: var(--body); }

/* FAQ */
.int-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.int-faq { border-top: 1px solid var(--line-strong); }
.int-faq details { border-bottom: 1px solid var(--line); }
.int-faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 17px; font-weight: 500; }
.int-faq summary::-webkit-details-marker { display: none; }
.int-faq summary i { position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); }
.int-faq summary i::before, .int-faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s; }
.int-faq summary i::after { transform: rotate(90deg); }
.int-faq details[open] summary i::after { transform: rotate(0deg); }
.int-faq details p { margin: 0; padding: 0 40px 22px 0; color: var(--body); font-size: 15.5px; line-height: 1.6; animation: int-open .3s ease both; }
@keyframes int-open { from { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 1080px) {
  .int-glance { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .int-node { width: min(360px, 100%); }
  .int-link { width: 1px; height: 64px; margin: 8px 0; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px); }
  .int-link span { left: 14px; bottom: 50%; transform: translateY(50%); }
  .int-link i { left: -3px; }
  .int-glance.in .int-link i { animation-name: int-travel-y; }
  @keyframes int-travel-y { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
  .int-phases { grid-template-columns: 1fr; gap: 26px; }
  .int-phases::before, .int-phases::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 1px; height: auto; }
  .int-phases::after { transform: scaleY(0); transform-origin: top; }
  .int-phases.in::after { transform: scaleY(1); }
  .int-phases li { grid-template-columns: 44px 1fr; column-gap: 16px; justify-items: start; }
  .int-phases li > * { grid-column: 2; }
  .int-phases .int-step { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .int-security { grid-template-columns: 1fr 1fr; }
  .int-faq-wrap { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 760px) {
  .int-glance-section { padding: 48px 0 64px; }
  .int-split, .int-deploy-body { grid-template-columns: 1fr; }
  .int-split article { padding: 22px 20px 12px; }
  .int-deploy-body { padding: 22px 8px 12px; }
  .int-toggle button { font-size: 13.5px; padding: 10px 6px; }
  .int-facts dl div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 480px) {
  .int-security { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .int-faq details p, .int-faq summary i::before, .int-faq summary i::after, .int-deploy-body, .int-toggle i, .int-phases li { animation: none; transition: none; }
  .int-glance .int-link i { animation: none !important; display: none; }
  .int-phases::after { transform: none; transition: none; }
  .int-phases li { opacity: 1; }
}
/* Home page. Every rule is scoped to .home; shared tokens come from styles.css. */

.home .tone-ask { --tone: var(--ask); --tint: var(--ask-tint); }
.home .tone-insight { --tone: var(--insight); --tint: var(--insight-tint); }
.home .tone-watch { --tone: var(--watch); --tint: var(--watch-tint); }

/* ---------- Shared ---------- */

.home .h-section { padding: 128px 0; position: relative; }
.home .h-soft { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home .h-head { max-width: 780px; margin-bottom: 56px; }
.home .h-head h2 {
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.home .h-head h2 .muted, .home .h-head h2 .gradient-text { color: var(--faint); }
.home .h-head p { color: var(--body); font-size: 18px; max-width: 620px; margin: 22px 0 0; }
.home .h-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.home .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease var(--delay, 0ms), transform .7s ease var(--delay, 0ms); }
.home .reveal.in { opacity: 1; transform: none; }

.home pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: #3a3a3a; white-space: pre-wrap; }
.home .chip-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tone, var(--text)); background: var(--tint, var(--card)); padding: 3px 8px; border-radius: 6px;
}

/* ---------- Shared keyframes ---------- */

@keyframes hc-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes hc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hc-grow { from { transform: scaleY(0); } }
@keyframes hc-blink { 50% { opacity: 0; } }
@keyframes hc-dot { 50% { opacity: .3; transform: translateY(-3px); } }

.home .sp-card header b {
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tone, var(--ask)); background: var(--tint, var(--ask-tint)); padding: 3px 8px; border-radius: 6px;
}
.home .sp-msg {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 12px 30px -18px rgba(70, 40, 140, .35);
}
.home .sp-msg img, .home .sp-msg svg { flex: none; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 4px; }
.home .sp-msg div { display: grid; gap: 2px; font-size: 13.5px; color: var(--body); }
.home .sp-msg small { color: var(--faint); font-size: 11.5px; }
.home .sp-msg strong { color: var(--text); font-weight: 600; font-size: 14.5px; }

/* ---------- Hero (ElevenLabs-style) ---------- */

.home .hx { position: relative; isolation: isolate; padding: 64px 0 72px; overflow-x: clip; }
.home .hx > .container { position: relative; z-index: 1; }
/* Stripe-style ribbon: runs under the transparent header and behind the demo card, fades out to the left and bottom. */
.home .hx-ribbon {
  position: absolute; z-index: 0; top: -68px; right: 0; width: 64vw; height: 700px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 74%, transparent 100%); mask-composite: intersect;
  animation: hx-ribbon-in 1.6s .2s ease both;
}
@keyframes hx-ribbon-in { from { opacity: 0; } }
.home .hx-top { display: grid; justify-items: start; max-width: 760px; margin-bottom: 36px; }
.home .hx h1 { margin: 22px 0 28px; font-size: clamp(42px, 4.6vw, 66px); line-height: 1; letter-spacing: -.05em; font-weight: 400; }
/* Each headline line rises out of its own mask. */
.home .hx-line { display: block; clip-path: inset(-.1em -.2em -.2em -.1em); }
.home .hx-line > span { display: inline-block; animation: hx-rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.home .hx-line:nth-child(2) > span { animation-delay: .09s; }
.home .hx-line:nth-child(3) > span { animation-delay: .18s; }
.home .hx-line.muted { color: #a1a1aa; }
@keyframes hx-rise { from { transform: translateY(130%); } }
@keyframes hx-up { from { opacity: 0; transform: translateY(16px); } }

/* Rotating word: letters cascade through a clean window. */
.home .hx-rot { display: inline-grid; clip-path: inset(.1em -.2em -.04em 0); }
.home .hx-word { grid-area: 1 / 1; white-space: nowrap; }
.home .hx-ch { display: inline-block; }
.home .hx-word.in .hx-ch { animation: hx-ch-in .65s calc(var(--i) * 30ms + 260ms) cubic-bezier(.2, .8, .2, 1) both; }
.home .hx-word.out .hx-ch { animation: hx-ch-out .38s calc(var(--i) * 20ms) cubic-bezier(.5, 0, .75, .3) both; }
@keyframes hx-ch-in { from { transform: translateY(115%); } }
@keyframes hx-ch-out { to { transform: translateY(-120%); } }

.home .hx-actions { display: flex; flex-wrap: wrap; gap: 10px; animation: hx-up .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
.home .hx-actions .button { padding: 11px 20px; font-size: 15px; }

/* Badge: white pill whose hairline border carries a travelling light in the logo colours. */
@property --hx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.home .hx-badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 9px; border-radius: 999px; background: #fff;
  color: #111; font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  animation: hx-up .9s .2s cubic-bezier(.2, .7, .2, 1) both;
}
.home .hx-badge img { width: 20px; height: 14px; object-fit: contain; }
.home .hx-badge::before, .home .hx-badge::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--hx-a), var(--line-strong) 0 62%, #1d4fd8 68%, #2ab7e3 74%, #2cc9a6 80%, #a06cf0 86%, #d9539c 92%, var(--line-strong) 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hx-badge-spin 4.5s linear infinite;
}
/* A blurred copy of the ring gives the travelling light a soft glow. */
.home .hx-badge::after {
  inset: -2px; padding: 3px; filter: blur(4px); opacity: .6;
  background: conic-gradient(from var(--hx-a), transparent 0 62%, #1d4fd8 68%, #2ab7e3 74%, #2cc9a6 80%, #a06cf0 86%, #d9539c 92%, transparent 98%);
}
@keyframes hx-badge-spin { to { --hx-a: 360deg; } }

/* Product card */
.home .hx-card { border-radius: 28px; background: var(--card); padding: 4px; border: 1px solid var(--line); animation: hx-up 1s .35s cubic-bezier(.2, .7, .2, 1) both; }
.home .hx-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin-bottom: 4px; }
.home .hx-tab-pill {
  position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100% / 3); width: calc(100% / 3);
  border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px -10px rgba(20, 30, 70, .25);
  transition: left .5s cubic-bezier(.3, .8, .2, 1);
}
.home .hx-tabs button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 6px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 22px; }
.home .hx-tabs .pmark { --pm: 18px; opacity: .6; transition: opacity .3s; }
.home .hx-tabs button:hover .pmark, .home .hx-tabs button.on .pmark { opacity: 1; }

.home .hx-stage {
  position: relative; display: flex; flex-direction: column;
  height: 640px; border-radius: 24px; background: #f7f7f6; border: 1px solid var(--line); overflow: hidden;
}
.home .hx-log { flex: 1; min-height: 0; width: min(780px, 100% - 48px); margin: 0 auto; padding: 24px 0 10px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-width: none; }
.home .hx-log::-webkit-scrollbar { display: none; }
.home .hx-q.typing { box-shadow: 0 0 0 1px var(--line-strong); background: #fff; }
.home .hx-q { align-self: flex-end; transition: background .3s, box-shadow .3s; margin: 0; max-width: 80%; padding: 11px 18px; border-radius: 18px; background: #e9ebef; color: var(--text); font-size: 15px; animation: hc-rise .35s ease both; }
.home .hx-turn { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; animation: hc-rise .3s ease both; }
.home .hx-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .15); }
.home .hx-avatar img { width: 17px; height: 11px; object-fit: contain; }
.home .hx-a { display: grid; gap: 14px; min-width: 0; padding-top: 3px; }

/* Reasoning: steps ticked off while thinking, then folded into one line. */
.home .hx-reason { justify-self: start; }
.home .hx-reason-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.home .hx-reason-steps li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); animation: hc-rise .3s ease both; }
.home .hx-reason-steps li i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #111; color: #fff; }
.home .hx-reason-steps li.run { color: var(--text); }
.home .hx-reason-steps li.run i { background: none; border: 1.5px solid var(--line-strong); border-top-color: #111; animation: hx-spin .7s linear infinite; }
.home .hx-reason-steps li.run i svg { display: none; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
.home .hx-reason > button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; color: var(--body); cursor: pointer; transition: border-color .2s; }
.home .hx-reason > button:hover { border-color: var(--line-strong); color: var(--text); }
.home .hx-reason > button i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e8f7ef; color: #13795b; }
.home .hx-reason .chev { color: var(--faint); transition: transform .2s; }
.home .hx-reason.open .chev { transform: rotate(180deg); }
.home .hx-reason.open .hx-reason-steps { margin: 10px 0 2px 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.home .hx-a > p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text); }
.home .hx-a strong { font-weight: 600; }
.home .hx-a mark { color: var(--text); font-weight: 600; background: none; padding: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: rgba(17, 17, 17, .25); text-underline-offset: 4px; }
.home .hx-extra { animation: hc-rise .5s ease both; }

/* Result tiles shared by ask and insight */
.home .hx-ask, .home .hx-insight { display: grid; gap: 12px; }
.home .hx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home .hx-facts > div { display: grid; gap: 4px; padding: 10px 18px; animation: hc-rise .5s var(--d, 0ms) ease both; }
.home .hx-facts > div + div { border-left: 1px solid var(--line); }
.home .hx-facts > div:first-child { padding-left: 0; }
.home .hx-facts strong { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -.035em; line-height: 1.1; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .hx-facts .up strong { color: #13795b; }
.home .hx-facts span { font-size: 12.5px; color: var(--faint); }
.home .hx-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.home .hx-docs > span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: #111; animation: hc-rise .45s var(--d, 0ms) ease both; }
.home .hx-docs svg { color: var(--faint); }
.home .hx-docs b { font-weight: 500; }
.home .hx-docs small { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.home .hx-docs i { order: -1; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--card); font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--body); }

.home .hx-dock { display: flex; align-items: center; gap: 16px; padding: 12px 14px 14px; }
.home .hx-chips { flex: 1; min-width: 0; display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.home .hx-dock-cta { flex: none; padding: 9px 18px; border-radius: 999px; background: #111; color: #fff; font-size: 14px; font-weight: 500; transition: background .2s; }
.home .hx-dock-cta:hover { background: #2b2b2b; }
.home .hx-chips::-webkit-scrollbar { display: none; }
.home .hx-chips button { flex: none; white-space: nowrap; border: 1px solid transparent; background: none; border-radius: 999px; padding: 8px 15px; font-size: 14px; color: var(--body); cursor: pointer; transition: border-color .2s, color .2s; }
.home .hx-chips button:hover { color: var(--text); }
.home .hx-chips button.on { color: #111; border-color: var(--line); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.home .hx-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--text); animation: hc-blink 1s steps(1) infinite; }

/* Insight chart */
.home .ic { padding: 16px 22px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.home .ic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.home .ic-head strong { display: block; font-size: 15px; font-weight: 600; }
.home .ic-head small { color: var(--faint); font-size: 12.5px; }
.home .ic-views { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--card); }
.home .ic-views button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 12.5px; color: var(--body); cursor: pointer; }
.home .ic-views button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.home .ic-legend { display: flex; gap: 16px; margin: 12px 0 10px; font-size: 12.5px; color: var(--body); }
.home .ic-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.home .ic .s0 i, .home .ic b.s0 { background: #3567d8; }
.home .ic-track b.s0 { background: linear-gradient(90deg, #7ea0ef, #3567d8); }
.home .ic-bars b.s0 { background: linear-gradient(0deg, #7ea0ef, #3567d8); }
.home .ic .s1 i, .home .ic b.s1 { background: #d6e0f5; }
.home .ic-bar { display: grid; gap: 4px; }
.home .ic-row { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding: 4px 6px; margin: 0 -6px; border-radius: 10px; transition: background .2s; }
.home .ic-row:not(.ic-axis):hover { background: #f4f7fd; }
.home .ic-row.top { background: #f7f9fe; }
.home .ic-label { font-size: 12.5px; color: var(--body); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .ic-row.top .ic-label { color: var(--text); font-weight: 600; }
.home .ic-track { position: relative; display: grid; gap: 3px; }
.home .ic-track b { position: relative; z-index: 1; display: block; height: 10px; border-radius: 0 10px 10px 0; transform-origin: left; animation: ic-grow-x .8s cubic-bezier(.2, .7, .2, 1) both; }
.home .ic { --ic-pad: 96px; }
.home .ic-track { padding-right: var(--ic-pad); }
.home .ic-val { position: absolute; top: -3px; margin-left: 8px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; animation: hc-rise .4s .6s ease both; }
.home .ic-row.top .ic-val { color: #111; font-weight: 600; }
.home .ic-val i, .home .ic-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 500; font-family: var(--mono); }
.home .ic-val i.up, .home .ic-chip.up { color: #13795b; background: #e8f7ef; }
.home .ic-val i.down, .home .ic-chip.down { color: #b6472a; background: #fdeee8; }
.home .ic-tip { position: absolute; z-index: 5; right: 6px; bottom: calc(100% + 4px); display: grid; gap: 3px; min-width: 200px; padding: 9px 11px; border-radius: 10px; background: #111; color: #fff; font-size: 11.5px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.home .ic-tip b { font-weight: 600; margin-bottom: 2px; }
.home .ic-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); }
.home .ic-tip span i { width: 7px; height: 7px; border-radius: 50%; }
.home .ic-tip span i.s0 { background: #7ea0ef; }
.home .ic-tip span i.s1 { background: #d6e0f5; }
.home .ic-tip strong { margin-left: auto; color: #fff; font-family: var(--mono); font-weight: 500; }
.home .ic-row:hover .ic-tip { opacity: 1; transform: none; }
.home .ic-grid { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--line-strong); }
.home .ic-grid:not(:first-child) { display: none; }
.home .ic-axis .ic-track { height: 14px; }
.home .ic-axis small { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--faint); white-space: nowrap; }
@keyframes ic-grow-x { from { transform: scaleX(0); } }
.home .ic-col { display: grid; grid-template-columns: 64px 1fr; gap: 8px; height: 192px; padding-bottom: 24px; margin-top: 14px; }
.home .ic-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 10.5px; color: var(--faint); margin: -6px 0; }
.home .ic-plot { position: relative; display: flex; gap: 12px; border-bottom: 1px solid var(--line-strong); }
.home .ic-hgrid { display: none; }
.home .ic-group { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.home .ic-bars { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.home .ic-bars b { width: min(22px, 40%); border-radius: 6px 6px 0 0; transform-origin: bottom; animation: hc-grow .8s cubic-bezier(.2, .7, .2, 1) both; }

.home .ic-cval { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--faint); animation: hc-rise .4s .7s ease both; }
.home .ic-group.top .ic-cval { color: #111; font-weight: 600; }
.home .ic-group > span { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 11px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .ic-group.top > span { color: var(--text); font-weight: 600; }
.home .ic-table { margin-top: 12px; overflow-x: auto; }
.home .ic-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.home .ic-table th, .home .ic-table td { padding: 8px 6px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.home .ic-table th { border-top: 0; color: var(--faint); font-weight: 500; font-size: 12px; }
.home .ic-table td:first-child, .home .ic-table th:first-child { text-align: left; }
.home .ic-table td { font-family: var(--mono); font-size: 12.5px; }
.home .ic-table td:first-child { font-family: var(--sans); }
.home .ic-table tr.top td { font-weight: 600; background: #f4f7fd; }
.home .ic-table .up { color: #13795b; }
.home .ic-table .down { color: #b6472a; }
.home .ic-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.home .ic-how { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.home .ic-how span { font-family: var(--mono); color: var(--faint); }
.home .ic-how em { font-style: normal; font-weight: 500; font-size: 12px; color: #2a55b8; background: #eaf0fc; padding: 2px 8px; border-radius: 999px; }
.home .ic-copy { border: 0; background: none; font-size: 12px; color: var(--faint); cursor: pointer; }
.home .ic-copy:hover { color: var(--text); }
.home .ic-sql { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; color: #3a3a3a; animation: hc-rise .3s ease both; }

/* Watch: set up a watch, then the alert arrives on WhatsApp and Telegram */
.home .hx-wf { flex: 1; min-height: 0; width: min(1000px, 100% - 48px); margin: 0 auto; padding: 24px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; }
.home .hx-wf-setup { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -36px rgba(0, 0, 0, .25); }
.home .hx-wf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.home .hx-wf-top strong { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.home .hx-wf-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--card); font-family: var(--mono); font-size: 11.5px; color: var(--body); transition: background .3s, color .3s; }
.home .hx-wf-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.home .hx-wf-status.watching i { background: #22a06b; animation: hx-wf-pulse 1.4s ease-out infinite; }
.home .hx-wf-status.watching { background: var(--card); color: var(--body); }
.home .hx-wf-status.met { background: var(--card); color: #111; }
.home .hx-wf-status.met i { background: #22a06b; }
@keyframes hx-wf-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 160, 107, .5); } 100% { box-shadow: 0 0 0 7px rgba(34, 160, 107, 0); } }
.home .hx-wf-prompt { margin: 0; min-height: 52px; padding: 13px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.home .hx-wf-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.home .hx-wf-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line-strong); opacity: .55; transition: opacity .4s, border-color .4s, background .4s; }
.home .hx-wf-rows li.on { opacity: 1; border-style: solid; border-color: var(--line); background: #fff; animation: hc-rise .4s ease both; }
.home .hx-wf-rows li > div { display: grid; min-width: 0; }
.home .hx-wf-rows small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.home .hx-wf-rows strong { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .hx-wf-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--faint); transition: background .4s, color .4s; }
.home .hx-wf-rows li.on .hx-wf-icon { background: #f4f4f5; color: #52525b; }
.home .hx-wf-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.home .hx-wf-rows li.on .hx-wf-check { transform: scale(1); }
.home .hx-wf-run { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.home .hx-wf-run small { flex: none; font-size: 12.5px; color: var(--faint); }
.home .hx-wf-run.met small { color: #111; font-weight: 500; }
.home .hx-wf-scan { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--card); overflow: hidden; }
.home .hx-wf-scan i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, #a1a1aa, transparent); transform: translateX(-100%); opacity: 0; }
.home .hx-wf-run.watching .hx-wf-scan i { opacity: 1; animation: hx-wf-scan 1.1s ease-in-out infinite; }
.home .hx-wf-run.met .hx-wf-scan i { opacity: 1; transform: none; background: #111; transition: opacity .3s; }
@keyframes hx-wf-scan { to { transform: translateX(100%); } }

/* Watch lock screen: one cropped phone, alerts arrive as liquid-glass notifications. */
.home .hx-ls {
  position: relative; align-self: stretch; width: 400px; min-height: 440px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent);
}
.home .hx-ls-phone {
  position: absolute; left: 50%; top: 40px; width: 290px; height: 620px; transform: translateX(-50%);
  padding: 7px; border-radius: 50px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .3);
}
.home .hx-ls-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 43px; color: #111;
  background:
    radial-gradient(circle at 18% 58%, rgba(44, 201, 166, .2), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(160, 108, 240, .2), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(29, 79, 216, .16), transparent 55%),
    #f4f5f8;
}
.home .hx-ls-status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 28px; font-size: 14px; font-weight: 600; }
.home .hx-ls-icons { display: inline-flex; align-items: center; gap: 4px; }
.home .hx-ls-icons i { width: 4px; height: 9px; border-radius: 1px; background: #111; }
.home .hx-ls-icons i:first-child { height: 6px; }
.home .hx-ls-icons b { width: 22px; height: 10px; margin-left: 3px; border-radius: 3px; border: 1.5px solid rgba(17, 17, 17, .7); background: linear-gradient(90deg, #111 70%, transparent 70%) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat; }

.home .hx-ls-island {
  position: absolute; z-index: 2; left: 50%; top: 11px; width: 96px; height: 28px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 999px; background: #000;
  transition: width .55s cubic-bezier(.3, 1.4, .4, 1);
}
.home .hx-ls-island i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; opacity: 0; transition: opacity .3s; }
.home .hx-ls-island span { color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; opacity: 0; transition: opacity .3s .1s; }
.home .hx-ls-island.live { width: 128px; }
.home .hx-ls-island.got { width: 124px; animation: hx-ls-bounce .6s cubic-bezier(.3, 1.4, .4, 1); }
.home .hx-ls-island.live i, .home .hx-ls-island.live span, .home .hx-ls-island.got i, .home .hx-ls-island.got span { opacity: 1; }
.home .hx-ls-island.live i { animation: hx-ls-dot 1.2s ease-out infinite; }
.home .hx-ls-island.got i { background: #4ade80; }
@keyframes hx-ls-dot { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 100% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }
@keyframes hx-ls-bounce { 40% { transform: translateX(-50%) scale(1.08); } }

.home .hx-ls-clock { display: grid; justify-items: center; margin-top: 30px; }
.home .hx-ls-clock small { font-size: 13px; font-weight: 500; color: #52525b; }
.home .hx-ls-clock strong { font-family: var(--display); font-size: 78px; font-weight: 400; line-height: 1; letter-spacing: -.045em; }

.home .hx-ls-stack { position: relative; height: 220px; margin: 24px 10px 0; }
.home .hx-ls-note {
  position: absolute; left: 0; right: 0; top: calc(var(--pos) * 110px); height: 102px;
  display: grid; align-content: center; gap: 1px; padding: 9px 13px; border-radius: 22px; color: #111;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px -16px rgba(0, 0, 0, .3);
  transition: top .55s cubic-bezier(.2, .8, .2, 1);
  animation: hx-ls-drop .7s cubic-bezier(.2, 1.1, .3, 1) both;
}
.home .hx-ls-note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: rgba(17, 17, 17, .6); text-transform: uppercase; letter-spacing: .03em; }
.home .hx-ls-note-head img, .home .hx-ls-note-head svg { width: 18px; height: 18px; border-radius: 5px; }
.home .hx-ls-note-head time { margin-left: auto; text-transform: none; letter-spacing: 0; }
.home .hx-ls-note strong { font-size: 13.5px; font-weight: 600; }
.home .hx-ls-note p { margin: 0; font-size: 12.5px; line-height: 1.35; color: rgba(17, 17, 17, .72); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.home .hx-ls-note p b { font-weight: 600; color: #111; }
@keyframes hx-ls-drop { from { opacity: 0; transform: translateY(-36px) scale(.9); filter: blur(6px); } }



/* ---------- Logo marquee ---------- */

.home .h-logos { padding: 40px 0 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home .h-logos > p { margin: 0 auto 24px; text-align: center; color: var(--body); font-size: 14px; }
.home .h-logos strong { color: var(--text); font-weight: 600; }
.home .h-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.home .h-marquee-track { display: flex; width: max-content; animation: marquee 66s linear infinite; }
.home .h-marquee:hover .h-marquee-track { animation-play-state: paused; }
.home .h-marquee ul { display: flex; gap: 40px; margin: 0; padding: 0 20px; list-style: none; }
.home .h-marquee li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #6f6f6b; white-space: nowrap; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.home .h-marquee li:hover { filter: none; opacity: 1; }
.home .h-marquee img { width: 26px; height: 26px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Vision ---------- */

.home .h-vision-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home .h-vision-steps li { position: relative; overflow: hidden; padding: 32px; min-height: 260px; border-radius: 28px; background: var(--card); display: flex; flex-direction: column; }
.home .h-vision-steps span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.home .h-vision-steps h3 { margin: auto 0 10px; padding-top: 48px; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.home .h-vision-steps p { margin: 0; color: var(--body); font-size: 15px; }
.home .h-vision-steps .orb { position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; opacity: .9; }

/* ---------- Product showcase ---------- */

.home .h-showcase { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.home .h-showcase-nav { display: grid; gap: 8px; position: sticky; top: 92px; }
.home .sn-item { border-radius: 22px; border: 1px solid var(--line); background: #fff; transition: background .25s, border-color .25s; }
.home .sn-item button { width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; padding: 20px 22px; display: grid; justify-items: start; gap: 12px; }
.home .sn-item.active { background: var(--soft); border-color: var(--line-strong); }
.home .sn-item:not(.active):hover { background: var(--soft); }
.home .sn-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.home .sn-item strong { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.02em; }
.home .sn-item .pmark { --pm: 28px; }
.home .sn-detail { padding: 0 22px 22px; animation: hc-rise .4s ease both; }
.home .sn-detail p { margin: 0 0 14px; color: var(--body); font-size: 15px; }
.home .sn-detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.home .sn-detail li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text); }
.home .sn-detail li::before { content: "✓"; position: absolute; left: 0; color: var(--tone); font-weight: 700; }

.home .h-showcase-stage { position: relative; border-radius: 32px; padding: 30px; background: var(--card); }
.home .stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.home .stage-head h3 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.home .stage-head a { font-size: 14px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid currentColor; }
.home .stage-body { animation: hc-rise .45s ease both; }

.home .sp-card { border-radius: 20px; background: #fff; border: 1px solid var(--line); padding: 18px; }
.home .sp-card header { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--body); margin-bottom: 14px; }

.home .sp-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home .sp-ask dl { margin: 0; display: grid; gap: 2px; }
.home .sp-ask dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 14px; }
.home .sp-ask dt { color: var(--faint); }
.home .sp-ask dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--text); }
.home .sp-ask .hit { background: var(--ask-tint); }
.home .sp-doc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--body); font-family: Georgia, "Times New Roman", serif; }
.home .sp-doc small { display: block; font-family: var(--sans); font-weight: 600; color: var(--text); margin-bottom: 6px; font-size: 13px; }
.home .sp-doc mark { background: var(--ask-tint); color: var(--text); padding: 1px 3px; border-radius: 4px; box-shadow: inset 0 -2px 0 #8fd9c8; }
.home .sp-verdict {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px; font-size: 15px; color: var(--text);
  background: #fff; border: 1px solid var(--line);
}
.home .sp-verdict strong { margin-left: auto; font-family: var(--display); font-weight: 500; font-size: 24px; }
.home .sp-badge { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #a2391c; background: var(--peach-tint); }

.home .sp-question { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-family: var(--display); font-size: 19px; letter-spacing: -.015em; color: var(--text); }
.home .sp-question span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: #fff; font-family: var(--mono); font-size: 12px; }
.home .sp-ask .sp-question { margin-bottom: 4px; }

.home .sp-insight { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home .sp-table { grid-column: 1 / -1; }
.home .sp-insight table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.home .sp-insight th, .home .sp-insight td { padding: 8px 6px; text-align: right; border-top: 1px solid var(--line); }
.home .sp-insight th { border-top: 0; color: var(--faint); font-weight: 500; font-size: 12px; }
.home .sp-insight th:first-child, .home .sp-insight td:first-child { text-align: left; }
.home .sp-insight td { font-family: var(--mono); font-size: 13px; }
.home .sp-insight td:first-child { font-family: var(--sans); font-weight: 500; }
.home .sp-insight tr.top td { background: var(--insight-tint); font-weight: 600; }
.home .sp-qchart { display: flex; gap: 14px; height: 150px; padding: 0 4px 22px; border-bottom: 1px solid var(--line); }
.home .sp-qchart > div { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.home .sp-qchart .bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; }
.home .sp-qchart i { width: 14px; border-radius: 4px 4px 0 0; background: #2563eb; opacity: .55; transform-origin: bottom; animation: hc-grow .8s cubic-bezier(.2, .7, .2, 1) both; }
.home .sp-qchart i.cost { background: #e8a317; }
.home .sp-qchart .top i { opacity: 1; }
.home .sp-qchart small { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 11px; color: var(--faint); }
.home .sp-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--body); }
.home .sp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: #2563eb; }
.home .sp-legend i.cost { background: #e8a317; }
.home .sp-insight pre { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; color: #3a3a3a; }
.home .sp-watch { display: grid; gap: 14px; }

.home .sp-recipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home .sp-recipe header { font-family: var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.home .sp-recipe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.home .sp-recipe li { padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--faint); }
.home .sp-recipe li.on { color: var(--text); background: var(--watch-tint); font-weight: 500; }
.home .sp-recipe li.on::before { content: "● "; color: var(--watch); }
.home .sp-feed { display: grid; gap: 10px; }
.home .sp-msg span { color: var(--body); }

/* ---------- Platform flow ---------- */

.home .fl-shell { border-radius: 32px; border: 1px solid var(--line); background: #fff; padding: 22px 28px 0; }
.home .fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.home .fl-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); }
.home .fl-pills button { border: 0; background: none; cursor: pointer; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--body); }
.home .fl-pills button:hover { color: var(--text); }
.home .fl-pills button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.home .fl-pills button.active::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--tone); vertical-align: 1px; }

.home .fl-grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr 1fr; gap: 56px; align-items: center; padding: 36px 0; }
.home .fl-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.home .fl-link { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.home .fl-link.live { stroke: var(--tone); stroke-width: 1.5; stroke-dasharray: none; opacity: .75; }
.home .fl-link.live.drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fl-draw .9s ease forwards; }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
.home .fl-dot {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent);
  offset-rotate: 0deg;
  animation: fl-travel 1.1s cubic-bezier(.5, 0, .3, 1) forwards;
}
@keyframes fl-travel { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 90% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

.home .fl-col { position: relative; z-index: 1; display: grid; gap: 8px; }
.home .fl-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.home .fl-node {
  position: relative; padding: 12px 14px; border-radius: 14px; background: var(--card); font-size: 14px; color: var(--text);
  border: 1px solid transparent; transition: opacity .4s, background .4s, border-color .4s, box-shadow .4s;
}
.home .fl-node.is-dim { opacity: .5; }
.home .fl-node.is-active, .home .fl-node.is-done { background: #fff; border-color: var(--line-strong); }
.home .fl-node.is-active { border-color: var(--text); box-shadow: 0 10px 30px -18px rgba(20, 30, 70, .45); }
.home .fl-product { display: flex; align-items: center; gap: 12px; background: #fff; border-color: var(--line); }
.home .fl-product .orb { width: 28px; height: 28px; flex: none; }
.home .fl-product > span { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.home .fl-product strong { font-family: var(--display); font-weight: 500; font-size: 16px; }
.home .fl-product small { color: var(--faint); font-size: 12px; }
.home .fl-product.is-active small, .home .fl-product.is-done small { color: var(--tone); font-family: var(--mono); font-size: 11.5px; animation: hc-rise .4s ease both; }
.home .fl-channel { display: flex; align-items: center; gap: 10px; }
.home .fl-channel img { width: 18px; height: 18px; object-fit: contain; }
.home .fl-toast {
  position: absolute; z-index: 3; right: 10px; top: -14px;
  padding: 4px 10px; border-radius: 999px; background: var(--text); color: #fff;
  font-style: normal; font-size: 11.5px; white-space: nowrap;
  animation: fl-pop .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes fl-pop { from { opacity: 0; transform: translateY(6px) scale(.9); } }

.home .fl-core {
  justify-items: center; text-align: center; gap: 8px;
  padding: 30px 18px; border-radius: 28px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 70px -45px rgba(30, 50, 110, .45);
  transition: box-shadow .4s, border-color .4s;
}
.home .fl-core > .orb { width: 84px; height: 84px; margin-bottom: 4px; transition: transform .6s; }
.home .fl-core strong { font-family: var(--display); font-weight: 500; font-size: 18px; margin-bottom: 6px; }
.home .fl-core span { width: 100%; font-size: 13px; color: var(--body); padding: 8px 10px; border-radius: 10px; background: var(--soft); border: 1px solid transparent; }
.home .fl-core.is-active { border-color: var(--text); }
.home .fl-core.is-active > .orb { animation: fl-pulse 1.3s ease-in-out infinite; }
.home .fl-core.is-active span { animation: fl-chip 2.4s ease both; animation-delay: calc(var(--i) * .45s); }
.home .fl-core.is-done span { background: #fff; border-color: var(--line); color: var(--text); }
@keyframes fl-pulse { 50% { transform: scale(1.08); } }
@keyframes fl-chip { 0%, 100% { background: var(--soft); } 15%, 60% { background: #fff; border-color: var(--text); color: var(--text); } }

.home .fl-steps { list-style: none; margin: 0 -28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.home .fl-steps li + li { border-left: 1px solid var(--line); }
.home .fl-steps button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 0 22px 20px; display: grid; gap: 4px; color: inherit; }
.home .fl-steps i { display: block; height: 2px; margin: 0 -22px 14px; background: transparent; overflow: hidden; }
.home .fl-steps li.done i, .home .fl-steps li.active i { background: var(--line); }
.home .fl-steps li.done i { background: var(--text); }
.home .fl-steps b { display: block; height: 100%; background: var(--text); transform-origin: left; animation: hc-progress linear forwards; }
.home .fl-steps span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.home .fl-steps small { font-size: 14px; color: var(--faint); }
.home .fl-steps li.active span, .home .fl-steps li.active small { color: var(--text); }
.home .fl-steps li.done small { color: var(--body); }

/* ---------- Use cases ---------- */

.home .uc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.home .uc-head .h-head { margin-bottom: 0; }
.home .uc-cta { flex: none; padding: 12px 22px; font-size: 15px; }
.home .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home .uc-card { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.home .uc-card > .pmark { align-self: flex-start; }
.home .uc-card ul { list-style: none; margin: 0; padding: 0; display: grid; }
.home .uc-card li + li { border-top: 1px solid var(--line); }
.home .uc-card a { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--display); font-size: 19px; line-height: 1.35; letter-spacing: -.015em; color: var(--text); }
.home .uc-card li:last-child a { padding-bottom: 0; }
.home .uc-card a i { flex: none; font-style: normal; font-size: 15px; color: var(--faint); transition: transform .2s, color .2s; }
.home .uc-card a:hover i { color: var(--text); transform: translate(2px, -2px); }
.home .uc-card a:hover span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* ---------- CTA ---------- */

.home .h-cta {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 24px; padding: 96px 32px; border-radius: 36px; text-align: center;
  background: var(--card);
}
.home .h-cta > .orb { position: absolute; z-index: -1; width: 520px; height: 520px; left: 50%; top: 115%; transform: translate(-50%, -50%); opacity: .85; filter: blur(8px); }
.home .h-cta h2 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.05em; line-height: 1.02; margin: 16px auto; max-width: 820px; }
.home .h-cta p { color: var(--body); font-size: 18px; margin: 0 auto 32px; max-width: 560px; }
.home .h-cta .h-actions { justify-content: center; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .home .h-showcase { grid-template-columns: 1fr; }
  .home .h-showcase-nav { position: static; grid-template-columns: repeat(3, 1fr); }
  .home .sn-detail { display: none; }
  .home .fl-grid { grid-template-columns: 1fr; gap: 44px; }
  .home .fl-col:not(.fl-core) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .home .fl-col .fl-label { grid-column: 1 / -1; }
  /* Stacked layout: curves would cut across cards, so link columns simply. */
  .home .fl-svg, .home .fl-dot { display: none; }
  .home .fl-col:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -36px; width: 1px; height: 28px; background: var(--tone); opacity: .6; }
  .home .fl-product.is-active, .home .fl-product.is-done, .home .fl-channel.is-active, .home .fl-channel.is-done { grid-column: 1 / -1; }
  .home .fl-steps { grid-template-columns: repeat(2, 1fr); }
  .home .fl-steps li:nth-child(3) { border-left: 0; }
  .home .fl-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .home .fl-steps li:nth-child(n+3) i { margin-top: -1px; }
}

@media (max-width: 760px) {
  .home .hx { padding: 40px 0 48px; }
  .home .hx-top { margin-bottom: 28px; }
  .home .hx h1 { margin: 18px 0 24px; font-size: clamp(36px, 10vw, 46px); }
  .home .hx-ribbon { width: 115vw; right: -30vw; height: 520px; opacity: .55; }
  .home .hx-card { border-radius: 24px; padding: 6px; }
  .home .hx-tabs button { height: 40px; }
  .home .hx-tabs .pmark { --pm: 14px; }
  .home .hx-stage { height: auto; min-height: 560px; border-radius: 20px; }
  .home .ic-copy { display: none; }
  .home .ic-axis small:nth-child(even) { display: none; }
  .home .ic-how { flex-wrap: wrap; text-align: left; }
  .home .hx-log, .home .hx-wf { width: calc(100% - 28px); }
  .home .hx-dock { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 10px 12px; }
  .home .hx-chips { justify-content: flex-start; }
  .home .hx-dock-cta { text-align: center; }
  .home .hx-wf { grid-template-columns: 1fr; gap: 22px; padding-top: 16px; }
  .home .hx-wf-setup { padding: 14px; gap: 12px; }
  .home .hx-wf-prompt { font-size: 14.5px; min-height: 0; }
  .home .hx-wf-rows strong { white-space: normal; font-size: 14px; }
  .home .hx-wf-run small { font-size: 11.5px; }
  .home .hx-ls { width: 100%; min-height: 0; height: 380px; }
  .home .hx-ls-phone { width: 256px; top: 28px; }
  .home .hx-ls-clock strong { font-size: 64px; }
  .home .hx-ls-status { padding: 0 22px; }
  .home .hx-ls-island.live, .home .hx-ls-island.got { width: 112px; }
  .home .hx-log { padding-top: 24px; }
  .home .hx-a > p { font-size: 15.5px; }
  .home .hx-facts > div { padding: 10px 10px; }
  .home .hx-facts strong { font-size: 18px; }
  .home .hx-facts span { font-size: 11.5px; }
  .home .hx-docs small { display: none; }
  .home .ic { padding: 14px; }
  .home .ic-head { flex-direction: column; }
  .home .ic-row { grid-template-columns: 84px 1fr; }
  .home .ic { --ic-pad: 46px; }
  .home .ic-val i, .home .ic-axis { display: none; }
  .home .ic-col { grid-template-columns: 48px 1fr; }
  .home .ic-plot { gap: 4px; }
  .home .h-section { padding: 84px 0; }
  .home .h-vision-steps, .home .uc-grid { grid-template-columns: 1fr; }
  .home .uc-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 36px; }
  .home .h-vision-steps li { min-height: 0; }
  .home .h-showcase-nav { grid-template-columns: 1fr; }
  .home .sn-item button { padding: 14px 16px; }
  .home .sn-item strong { font-size: 18px; }
  .home .sn-item .pmark { --pm: 24px; }
  .home .h-showcase-stage { padding: 16px; border-radius: 24px; }
  .home .stage-head { flex-direction: column; gap: 8px; }
  .home .sp-ask, .home .sp-insight, .home .sp-recipe { grid-template-columns: 1fr; }
  .home .sp-insight .sp-card { grid-column: 1 / -1; }
  .home .sp-verdict { flex-wrap: wrap; }
  .home .h-cta { padding: 64px 20px 120px; border-radius: 28px; }
  .home .fl-shell { padding: 16px 16px 0; border-radius: 24px; }
  .home .fl-bar { flex-wrap: wrap; }
  .home .fl-steps { margin: 0 -16px; }
  .home .fl-steps button { padding: 0 14px 16px; }
  .home .fl-steps i { margin: 0 -14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .home .h-marquee-track, .home .fl-core.is-active > .orb, .home .fl-core.is-active span { animation: none; }
  .home .reveal { opacity: 1; transform: none; transition: none; }
  .home .stage-body, .home .sn-detail, .home .sp-qchart i, .home .hx-line > span, .home .hx-ch, .home .hx-actions, .home .hx-ribbon, .home .hx-badge, .home .hx-badge::before, .home .hx-badge::after, .home .hx-card, .home .ic-track b, .home .ic-bars b, .home .hx-facts > div, .home .hx-reason-steps li, .home .hx-turn, .home .ic-cval, .home .hx-wf * { animation: none !important; }
}
/* Try page: live entaura ask demo chat. Scoped to .try; tokens from styles.css. */

.try { padding-bottom: 96px; overflow-x: clip; }

.try-hero { padding: 72px 0 40px; text-align: center; display: grid; justify-items: center; }
.try-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--body);
}
.try-pill .orb { width: 18px; height: 18px; }
.try-hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -.05em; margin: 24px 0 18px; text-wrap: balance; max-width: 900px; }
.try-hero p { margin: 0; color: var(--body); font-size: 18px; max-width: 620px; }

/* Chat card */
.try-chat {
  position: relative; isolation: isolate;
  max-width: 920px; margin: 0 auto;
  display: flex; flex-direction: column;
  height: min(760px, calc(100vh - 120px)); min-height: 560px;
  border-radius: 28px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 80px -40px rgba(30, 50, 110, .35);
}
.try-glow { position: absolute; z-index: -1; width: 520px; height: 520px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .45; filter: blur(40px); pointer-events: none; }

.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.tc-title { display: flex; align-items: center; gap: 10px; }
.tc-title img { width: 34px; height: 24px; object-fit: contain; }
.tc-title strong { font-family: var(--display); font-weight: 500; font-size: 17px; }
.tc-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: var(--card); font-family: var(--mono); font-size: 11px; color: var(--body); }
.tc-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.tc-status.live i { background: var(--ask); box-shadow: 0 0 0 3px var(--ask-tint); }

/* The hosted demo, filling the card below its header */
.try-chat { height: auto; min-height: 0; }
.tc-frame { position: relative; height: 640px; border-radius: 0 0 28px 28px; overflow: hidden; background: #fff; }
.tc-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(0, 0, 0, .035) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: tc-shimmer 1.4s linear infinite; transition: opacity .4s;
}
.tc-frame.loaded::before { opacity: 0; animation: none; }
.tc-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@keyframes tc-shimmer { to { background-position: -200% 0; } }
.try-note { max-width: 920px; margin: 16px auto 0; text-align: center; font-size: 13px; color: var(--faint); }
.try-note a { color: var(--text); font-weight: 500; margin-left: 14px; }

@media (max-width: 760px) {
  .try { padding-bottom: 32px; }
  .try-hero { padding: 48px 0 28px; }
  .try-hero p { font-size: 16px; }
  .try-chat { border-radius: 22px; }
  .tc-head { padding: 12px 14px; }
  .tc-frame { height: min(640px, calc(100vh - 160px)); min-height: 520px; border-radius: 0 0 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-frame::before { animation: none; }
}