/* DANCA · identidad 2026. Concepto: del caos al orden. Gris = consultas sueltas, azul eléctrico = sistema. */
:root {
  --bg: #05070d;
  --bg-2: #0c111c;
  --bg-3: #121a29;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f4f4f6;
  --muted: #9b9ba8;
  --ind: #2e6bff;
  --vio: #4fd8ff;
  --amb: #ffc46b;
  --grad: linear-gradient(120deg, #2e6bff 0%, #4fd8ff 100%);
  --display: "Unbounded", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --body: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-lg: 28px; --r-md: 18px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60% 50% at 80% -10%, rgba(46,107,255,.16), transparent 70%), radial-gradient(40% 40% at 0% 30%, rgba(79,216,255,.07), transparent 70%); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vio); outline-offset: 3px; border-radius: 8px; }
img, canvas { max-width: 100%; }
.gutter { padding-inline: max(20px, env(safe-area-inset-left)); }
.wrap { max-width: 1200px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.kicker { font: 500 13px var(--mono); letter-spacing: .02em; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px rgba(46,107,255,.8); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Cabecera */
.top { position: sticky; top: 0; z-index: 50; background: rgba(8,8,12,.72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 17px var(--display); letter-spacing: .06em; }
.mark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); position: relative; box-shadow: 0 0 22px -4px rgba(46,107,255,.9); }
.mark::before, .mark::after { content: ""; position: absolute; left: 7px; right: 7px; height: 3px; border-radius: 3px; background: var(--bg); }
.mark::before { top: 8px; } .mark::after { bottom: 8px; left: 11px; }
.nav { display: none; gap: 30px; align-items: center; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.cta-sm { text-decoration: none; padding: 9px 18px; border-radius: 999px; background: var(--text); color: var(--bg) !important; font-weight: 600; }
.burger { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; position: relative; cursor: pointer; }
.burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -1px 0 0 -9px; background: var(--text); border-radius: 2px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.burger span:first-child { transform: translateY(-4px); } .burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(8,8,12,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: calc(100px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.sheet.open { visibility: visible; opacity: 1; }
.sheet a { font: 600 clamp(1.6rem, 7.4vw, 2.6rem)/1.25 var(--display); letter-spacing: -.03em; text-decoration: none; padding: 6px 0; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1), color .2s; }
.sheet.open a { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 55ms + 80ms); }
.sheet a[aria-current="page"] { color: var(--vio); }
.sheet small { margin-top: auto; color: var(--muted); font: 13px var(--mono); }
.sheet a:nth-child(1) { --n: 0; } .sheet a:nth-child(2) { --n: 1; } .sheet a:nth-child(3) { --n: 2; } .sheet a:nth-child(4) { --n: 3; } .sheet a:nth-child(5) { --n: 4; } .sheet a:nth-child(6) { --n: 5; } .sheet a:nth-child(7) { --n: 6; }
@media (min-width: 960px) { .nav { display: flex; } .burger { display: none; } }

/* Botones */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid var(--line-2); background: transparent; cursor: pointer; transition: transform .15s, background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: rgba(255,255,255,.3); }
.btn:active { transform: scale(.97); }
.btn.main { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.main:hover { background: #fff; }
.btn.glow { background: var(--grad); color: #fff; border: 0; box-shadow: 0 10px 40px -10px rgba(46,107,255,.75); }
.btn .wa { width: 18px; height: 18px; }

/* Hero */
.hero { padding-block: 48px 24px; display: grid; gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 6.2vw, 4.2rem); letter-spacing: -.045em; font-weight: 600; }
.hero .lede { color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 38ch; }
.stack { display: grid; gap: 24px; align-content: center; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: rgba(46,107,255,.18) radial-gradient(circle, var(--vio) 0 2.5px, transparent 3.5px); }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr 1fr; padding-block: 88px 56px; gap: 48px; } }

/* Sección genérica */
.sec { padding-block: 72px; display: grid; gap: 28px; }
.sec-head { display: grid; gap: 14px; max-width: 760px; }
.sec h2, .sec-head h2 { font-size: clamp(1.65rem, 4.2vw, 2.9rem); }
.sec-head p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }
.phead { padding-block: 64px 16px; display: grid; gap: 18px; max-width: 900px; }
.phead h1 { font-size: clamp(2rem, 5.6vw, 3.9rem); }
.phead p { color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.25rem); max-width: 52ch; }
@media (min-width: 960px) { .sec { padding-block: 112px; } }

/* Qué construimos */
.build { display: grid; gap: 12px; }
.feat { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); padding: 28px; display: grid; gap: 12px; overflow: hidden; isolation: isolate; }
.feat::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(46,107,255,.14), transparent 60%); }
.feat:hover::after, .feat.lit::after { opacity: 1; }
.feat .n { font: 500 12.5px var(--mono); color: var(--vio); }
.feat h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.feat p { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tag { font: 12px var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); }
.tag.ok { border-color: rgba(79,216,255,.5); color: var(--vio); }
@media (min-width: 900px) { .build { grid-template-columns: repeat(3, 1fr); } }

/* Industrias */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -20px; padding-inline: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-weight: 500; font-size: 15px; color: var(--muted); transition: background .2s, color .2s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.case { display: grid; gap: 18px; align-items: start; }
.case .in { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 22px 22px 22px 6px; padding: 18px; font-size: 16px; max-width: 480px; }
.case .in small { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 12px var(--mono); margin-bottom: 8px; }
.case .in small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amb); box-shadow: 0 0 8px var(--amb); }
.arrow { font: 500 12.5px var(--mono); color: var(--vio); }
.out { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.out div { background: var(--bg-2); padding: 16px; min-width: 0; }
.out dt { font: 12px var(--mono); color: var(--muted); }
.out dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.case.swap { animation: swap .4s cubic-bezier(.2,.8,.2,1); }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 900px) { .case { grid-template-columns: 1fr auto 1.2fr; align-items: center; } .arrow { writing-mode: initial; } }

/* Planes */
.plan-list { display: grid; gap: 14px; }
.plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 16px; background: var(--bg-2); align-content: start; }
.plan.featured { border-color: rgba(79,216,255,.45); background: linear-gradient(180deg, rgba(46,107,255,.12), var(--bg-2) 55%); box-shadow: 0 30px 80px -40px rgba(46,107,255,.6); }
.plan .name { font: 600 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.plan .price { font: 600 clamp(2.6rem, 6vw, 3.4rem)/1 var(--display); letter-spacing: -.04em; }
.plan .price span { font: 400 15px var(--body); color: var(--muted); letter-spacing: 0; }
.plan .price .from { display: block; font: 500 12.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.plan .price .price-detail { display: block; margin-top: .55rem; font: 400 15px/1.35 var(--body); color: var(--muted); letter-spacing: 0; }
.plan .crc { font: 400 13.5px var(--mono); color: var(--muted); margin-top: -6px; }
.plan .credit { font-size: 14px; line-height: 1.45; color: var(--text); background: rgba(46,107,255,.1); border: 1px solid rgba(46,107,255,.35); border-radius: 12px; padding: 10px 12px; }
.plan p { color: var(--muted); font-size: 15.5px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: rgba(46,107,255,.18) radial-gradient(circle, var(--vio) 0 3px, transparent 4px); }
.plan .btn { width: 100%; margin-top: 4px; }
.badge { justify-self: start; font: 500 12px var(--mono); color: #fff; background: var(--grad); padding: 5px 10px; border-radius: 999px; }
.plans-note { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .plan-list { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

/* Proceso */

/* Preguntas */
.faq-list { max-width: 860px; }
.q { border-top: 1px solid var(--line); }
.q:last-child { border-bottom: 1px solid var(--line); }
.q button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; background: none; border: 0; padding: 22px 0; font-weight: 500; font-size: 17.5px; cursor: pointer; }
.q button i { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: background .2s; }
.q button i::before, .q button i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 1.5px; background: var(--text); transition: transform .35s; }
.q button i::after { transform: rotate(90deg); }
.q button[aria-expanded="true"] i { background: var(--text); }
.q button[aria-expanded="true"] i::before, .q button[aria-expanded="true"] i::after { background: var(--bg); }
.q button[aria-expanded="true"] i::after { transform: rotate(0); }
.q .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.q .a > div { overflow: hidden; color: var(--muted); }
.q .a > div p { padding-bottom: 22px; max-width: 64ch; }
.q.open .a { grid-template-rows: 1fr; }

/* Cierre y pie */
.close { padding-block: 96px; display: grid; gap: 26px; justify-items: start; position: relative; }
.close h2 { font-size: clamp(2rem, 5.6vw, 4rem); max-width: 18ch; }
footer { padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; border-top: 1px solid var(--line); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer a { text-decoration: none; } footer a:hover { color: var(--text); }
.float { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(112px + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 14px 40px -12px rgba(0,0,0,.8); text-decoration: none; transition: transform .15s; }
.float:active { transform: scale(.94); }
.float svg { width: 26px; height: 26px; }

/* Explora */
.go-grid { display: grid; gap: 12px; }
.go-card { position: relative; display: grid; gap: 8px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; transition: border-color .25s, transform .15s; overflow: hidden; }
.go-card:hover { border-color: rgba(79,216,255,.45); }
.go-card:active { transform: scale(.985); }
.go-card b { font: 600 1.2rem var(--display); letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; }
.go-card b::after { content: "\2192"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); font: 400 15px var(--body); transition: background .2s, color .2s; }
.go-card:hover b::after { background: var(--text); color: var(--bg); }
.go-card span { color: var(--muted); font-size: 15px; }
@media (min-width: 700px) { .go-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .go-grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Recurso gratis */
.home-resource-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(circle at 100% 0, rgba(79,216,255,.14), transparent 50%), var(--bg-2); }
.home-resource-banner > div { display: grid; gap: 10px; max-width: 60ch; }
.home-resource-banner h2 { font-size: clamp(1.4rem, 3.6vw, 2.2rem); }
.home-resource-banner p, .home-resource-banner small { color: var(--muted); }
.home-resource-banner small { font-size: 13px; }



/* DANCA 2026 · Sistema de diseño de la Home.
   Inspiración de principios (no código) de Linear y Attio. */
.home-page {
  --bg: #080a11;
  --bg-2: #0e1420;
  --bg-3: #142031;
  --line: rgba(172,196,231,.11);
  --line-2: rgba(167,195,236,.22);
  --text: #f4f7fd;
  --muted: #a4b1c6;
  --ind: #497cff;
  --vio: #78aeff;
  --grad: linear-gradient(110deg,#b9d1ff 0%,#8db5ff 44%,#629aff 100%);
}
.home-page .top {
  background: rgba(9,12,20,.89);
  border-bottom: 1px solid rgba(183,207,243,.1);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.home-page .top .bar { height: 72px; }
.home-page .brand { font-family: var(--display); letter-spacing: .045em; font-size: 17px; }
.home-page .mark { box-shadow: 0 7px 25px rgba(52,116,252,.22); background: linear-gradient(145deg,#457bff,#68baff); }
.home-page .nav { gap: clamp(15px,2.1vw,31px); }
.home-page .nav > a, .home-page .nav-trigger {
  font: 500 13px/1.5 var(--body);
  color: #b1bdd0;
  white-space: nowrap;
}
.home-page .nav > a:hover,.home-page .nav-trigger:hover { color: #f9fbff; }
.home-page .nav-trigger {
  display: inline-flex;align-items:center;gap:7px;
  padding: 10px 0;background:transparent;border:0;cursor:pointer;
}
.home-page .nav-trigger[aria-expanded="true"] {color:#fff}
.home-page .nav-trigger span {font-size:19px;transition:transform .2s}
.home-page .nav-trigger[aria-expanded="true"] span {transform:rotate(180deg)}
.home-page .nav-dropdown {position:relative}
.home-page .nav .cta-sm {
  border-radius:9px;
  background:#edf3ff;
  color:#0b1323!important;
  padding:11px 16px;
  font:600 13px/1 var(--body);
}
.home-page .nav .cta-sm:hover {background:#fff}
.home-page .nav-popover {
  position:absolute;
  top:calc(100% + 20px);
  left:-48px;
  width:min(590px,calc(100vw - 60px));
  padding:22px;
  border:1px solid rgba(172,196,231,.2);
  border-radius:18px;
  background:rgba(17,24,39,.98);
  box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.055);
  backdrop-filter:blur(24px);
  white-space:normal;
}
.home-page .nav-popover[hidden]{display:none}
.home-page .nav-popover-intro{display:grid;gap:8px;margin-bottom:18px}
.home-page .nav-popover-intro strong{color:#edf4ff;font-size:18px;letter-spacing:-.02em}
.home-page .nav-popover .kicker{font-size:10px}
.home-page .nav-popover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.home-page .nav-popover-grid a {
  display:flex;align-items:flex-start;gap:12px;
  padding:13px;border:1px solid transparent;border-radius:11px;
  text-decoration:none;background:rgba(178,204,249,.045);
  white-space:normal;transition:background .18s,border-color .18s;
}
.home-page .nav-popover-grid a:hover,.home-page .nav-popover-grid a:focus-visible{
  background:rgba(107,155,237,.12);border-color:rgba(123,166,235,.2);
}
.home-page .nav-popover-index{font:500 11px var(--mono);color:#6d9aff}
.home-page .nav-popover-grid strong{display:block;font-size:13px;color:#f1f5ff}
.home-page .nav-popover-grid small{display:block;font-size:12px;line-height:1.5;color:#9eb0ca;margin-top:4px}
.home-page .nav-popover-bottom{display:flex;justify-content:space-between;margin-top:15px;padding-top:15px;border-top:1px solid var(--line);text-decoration:none;color:#b9d3ff;font-size:13px}
.home-page .burger {
  display:flex;align-items:center;gap:12px;justify-content:center;
  width:auto;min-width:86px;height:43px;padding:0 13px;
  border-radius:10px;background:rgba(255,255,255,.035);
}
.home-page .burger-label {position:static!important;display:inline-block;background:none!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;font:500 13px var(--body);color:#e8f1ff}
.home-page .burger-lines {position:relative!important;display:block!important;width:18px!important;height:18px!important;margin:0!important;background:none!important;transform:none!important}
.home-page .burger-lines i {position:absolute;left:1px;top:5px;width:16px;height:1.5px;border-radius:2px;background:#edf5ff;transform-origin:center;transition:transform .25s}
.home-page .burger-lines i:last-child {top:12px}
.home-page .burger[aria-expanded="true"] .burger-lines i:first-child {transform:translateY(3.5px) rotate(45deg)}
.home-page .burger[aria-expanded="true"] .burger-lines i:last-child {transform:translateY(-3.5px) rotate(-45deg)}
.home-page .sheet {
  padding:calc(102px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-left,0px)) calc(25px + env(safe-area-inset-bottom,0px));
  gap:17px;overflow-y:auto;background:rgba(9,13,22,.985);
}
.home-page .sheet-heading {display:grid;gap:8px}
.home-page .sheet-heading .kicker{font-size:11px}
.home-page .sheet-heading h2{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.2}
.home-page .sheet-heading p{font-size:14px;color:#a5b5ca;line-height:1.5}
.home-page .sheet-needs{display:grid;gap:7px}
.home-page .sheet-need {
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;
  align-items:center;min-height:54px;width:100%;text-align:left;
  padding:11px 14px;border-radius:11px;
  border:1px solid rgba(181,207,244,.13);background:rgba(255,255,255,.025);
  font:500 14px var(--body);cursor:pointer;color:#e6edf9;
}
.home-page .sheet-need span:first-child {font:500 11px var(--mono);color:#7f99bd}
.home-page .sheet-need span:last-child{color:#8fb7fd}
.home-page .sheet-need.is-selected{
  background:linear-gradient(110deg,rgba(63,117,218,.20),rgba(64,117,208,.055));
  border-color:rgba(112,162,244,.5);
}
.home-page .sheet-answer {display:grid;gap:11px;padding:17px 18px;border:1px solid rgba(111,160,242,.26);border-radius:13px;background:#101e33}
.home-page .sheet-answer-label {font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#8eb7ff}
.home-page .sheet-answer p {font-size:14px;line-height:1.6;color:#e1e9f7}
.home-page .sheet a {font:500 14px/1.5 var(--body);opacity:1;transform:none;transition:color .18s}
.home-page .sheet.open a {opacity:1;transform:none;transition-delay:0ms}
.home-page .sheet-answer a{color:#a8c8ff;text-decoration:none;padding:0;min-height:27px}
.home-page .sheet-links{display:flex;justify-content:space-between;gap:8px 13px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px}
.home-page .sheet-links a{color:#aebfd9;font-size:12px;padding:3px 0}
.home-page .sheet-gon{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;text-align:left;min-height:35px;padding:4px 0;color:#9fbffc;font:500 13px var(--body);cursor:pointer}
.home-page .sheet-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:11px 15px!important;background:#edf3ff;border-radius:11px;color:#0d1627!important;text-decoration:none}
.home-page .sheet-legal{font:400 11px var(--body);color:#7f92ae;margin:0}
.home-page .hero-section {
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 58% 80% at 80% 22%,rgba(58,98,196,.16),transparent 77%),
             radial-gradient(ellipse 40% 65% at 8% 60%,rgba(36,67,128,.10),transparent 80%);
}
.home-page .hero-section::after {
  content:"";position:absolute;z-index:-1;inset:0;
  background-image:linear-gradient(rgba(196,215,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(196,215,255,.028) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:linear-gradient(90deg,transparent 12%,#000 92%);
  pointer-events:none;
}
.home-page .hero {
  display:grid;grid-template-columns:minmax(0,1fr);
  padding-block:46px 62px;gap:34px;align-items:center;
}
.home-page .hero-copy {display:grid;gap:23px;min-width:0}
.home-page .hero-kicker{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:#b3c7e6}
.home-page .hero h1 {
  max-width:14ch;
  font:600 clamp(2.4rem,5vw,5.15rem)/1.1 var(--display);
  letter-spacing:-.065em;
}
.home-page .hero .lede {max-width:46ch;color:#afbdd3;font-size:clamp(1rem,1.5vw,1.13rem);line-height:1.65}
.home-page .grad {background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-page .hero-actions{align-items:center;gap:12px}
.home-page .hero-actions .btn {min-height:51px;border-radius:10px;font-size:14px;padding:0 17px;white-space:normal}
.home-page .hero-actions .main {
  background:#eef3ff;color:#0a1324;border-color:#eef3ff;
  box-shadow:0 14px 40px -24px rgba(205,225,255,.65);
}
.home-page .hero-actions .main:hover{background:#fff}
.home-page .hero-actions .hero-secondary{
  background:rgba(255,255,255,.025);color:#eaf0fc;
  border-color:rgba(170,197,238,.23);
}
.home-page .hero-note {color:#91a1b8;font-size:12px;line-height:1.7}
.home-page .hero-demo {min-width:0;width:100%;scroll-margin-top:110px}
.home-page .product-shell {
  overflow:hidden;border-radius:18px;
  border:1px solid rgba(157,190,246,.23);
  background:linear-gradient(140deg,#111a2a,#0c1421 75%);
  box-shadow:0 50px 100px -44px rgba(0,0,0,.94),0 16px 60px -48px #79a2ff,inset 0 1px rgba(255,255,255,.1);
}
.home-page .product-top{
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  height:46px;padding:0 17px;border-bottom:1px solid rgba(167,195,242,.13);
  background:linear-gradient(90deg,rgba(81,124,202,.075),rgba(255,255,255,.01));
}
.home-page .product-dots{display:flex;gap:5px}
.home-page .product-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#40516a}
.home-page .product-dots i:first-child{background:#7286a8}
.home-page .product-window-title{font:500 11px var(--body);color:#b0c2e1;white-space:nowrap}
.home-page .product-demo-tag{font:500 9px var(--mono);letter-spacing:.06em;color:#8baff3;border:1px solid rgba(132,167,225,.26);border-radius:5px;padding:4px 6px}
.home-page .product-body{display:grid;grid-template-columns:165px minmax(0,1fr);min-height:385px}
.home-page .product-sidebar {display:flex;flex-direction:column;gap:13px;padding:22px 12px;border-right:1px solid rgba(167,195,242,.12);background:rgba(6,13,25,.50)}
.home-page .product-sidebar-title{font:500 9px/1.4 var(--mono);letter-spacing:.05em;color:#758aa9;padding-inline:9px}
.home-page .product-tabs{display:grid;gap:7px}
.home-page .product-tab {
  display:flex;align-items:center;gap:9px;padding:11px 10px;
  border:1px solid transparent;border-radius:8px;min-height:45px;
  background:transparent;text-align:left;color:#97abc8;cursor:pointer;
  font:500 12px/1.3 var(--body);white-space:nowrap;
}
.home-page .product-tab span{font:500 10px var(--mono);color:#637a9b}
.home-page .product-tab.is-current{background:rgba(93,144,238,.14);border-color:rgba(119,167,252,.24);color:#f3f7ff}
.home-page .product-tab.is-current span{color:#86b5ff}
.home-page .product-tab:hover:not(.is-current){background:rgba(172,201,250,.07);color:#fff}
.home-page .product-sidebar-footer{margin-top:auto;padding-inline:9px;color:#6e82a0;font-size:11px;line-height:1.5}
.home-page .product-workspace{display:flex;flex-direction:column;min-width:0;padding:21px 20px}
.home-page .product-workspace-top {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:23px}
.home-page .product-workspace-top > div{display:grid;gap:3px;min-width:0}
.home-page .product-workspace-top > div span{font:500 9px var(--mono);letter-spacing:.09em;color:#8097bb}
.home-page .product-workspace-top > div strong{font-size:16px;letter-spacing:-.025em;color:#f4f7fc}
.home-page .product-workspace-status{font-size:10px;line-height:1.35;color:#aec4e2;white-space:nowrap}
.home-page .product-workspace-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#84afd4;margin-right:4px}
.home-page .product-screen{flex:1;min-width:0;animation:product-fade .21s ease-out}
.home-page .product-screen[hidden]{display:none}
.home-page .product-micro{font:500 10px var(--mono);letter-spacing:.1em;color:#76a7ff;margin-bottom:13px}
.home-page .product-message-card,.home-page .product-record{
  border:1px solid rgba(174,197,239,.18);border-radius:12px;
  background:linear-gradient(125deg,rgba(76,105,160,.16),rgba(255,255,255,.015));
  padding:16px;margin-bottom:16px;
}
.home-page .product-message-head{display:flex;align-items:center;gap:10px}
.home-page .product-avatar{display:grid;place-items:center;width:33px;height:33px;flex:none;border-radius:10px;background:rgba(90,157,216,.2);font-size:13px;color:#a1d2ff}
.home-page .product-message-head > span:nth-child(2){display:grid;gap:1px;flex:1;min-width:0}
.home-page .product-message-head strong{color:#f1f6ff;font-size:12px}
.home-page .product-message-head small{color:#91a7c6;font-size:10px}
.home-page .product-soft-tag{flex:none;font:500 10px var(--mono);color:#a4c7ff;background:rgba(71,126,227,.13);border-radius:5px;padding:5px}
.home-page .product-message-card p{margin-top:17px;color:#edf4ff;font-size:13px;line-height:1.55}
.home-page .product-record-label{font:500 10px var(--mono);letter-spacing:.08em;color:#87adff}
.home-page .product-record strong{display:block;color:#f2f6ff;font-size:15px;margin-top:9px;line-height:1.35}
.home-page .product-record p{color:#aebed6;font-size:12px;margin-top:6px;line-height:1.55}
.home-page .product-detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:11px 2px;border-bottom:1px solid rgba(158,187,230,.11)}
.home-page .product-detail-row span{font-size:11px;color:#8ea0bd}
.home-page .product-detail-row strong{font-size:11px;font-weight:600;text-align:right;color:#e7f0ff;max-width:60%;line-height:1.45}
.home-page .product-blue-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#699fff;margin-right:4px}
.home-page .product-status-note{font-size:11px;color:#9fbce7;line-height:1.55;margin-top:17px}
.home-page .product-status-note span{color:#65a9ff;margin-right:4px}
.home-page .product-workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:18px}
.home-page .product-workspace-footer > span{font-size:9px;color:#7d92af;line-height:1.5;max-width:195px}
.home-page #product-next{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;flex:none;border-radius:8px;border:1px solid rgba(142,183,249,.25);background:rgba(91,138,231,.12);font:600 11px var(--body);color:#d8e8ff;cursor:pointer}
.home-page #product-next:hover{background:rgba(91,138,231,.25)}
.home-page .hero-bottom{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:12px;min-height:43px;padding-block:5px 17px;
  border-top:1px solid rgba(171,197,231,.095);
}
.home-page .hero-bottom span{font:500 9px var(--mono);letter-spacing:.12em;color:#8c9cb6}
.home-page .hero-bottom i{height:1px;width:24px;background:rgba(154,185,228,.3)}
.home-page .how-section{background:linear-gradient(180deg,rgba(13,20,33,.7),rgba(8,10,17,0) 85%)}
.home-page .sec {gap:32px}
.home-page .sec-head {gap:13px}
.home-page .sec-head h2{letter-spacing:-.055em;line-height:1.16}
.home-page .sec-head p{line-height:1.6}
.home-page .how-link{justify-self:start;color:#b5ceff;text-decoration:none;font-weight:600;font-size:14px}
.home-page .how-link:hover{text-decoration:underline;text-underline-offset:5px}
.home-page .feat {background:linear-gradient(145deg,rgba(21,29,45,.94),rgba(14,19,30,.98));border-radius:16px}
.home-page .plan{border-radius:16px}
.home-page .go-card{border-radius:15px}
.home-page .home-resource-banner{border-radius:17px}
.home-page .float{display:none}
.home-page .gon-invite{display:none}
.home-page .gon-launcher{min-width:0;min-height:56px;width:56px;height:56px;padding:6px;gap:0;border-radius:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:max(14px,env(safe-area-inset-right,0px))}
.home-page .gon-launcher .gon-avatar{width:42px;height:42px}
.home-page .gon-launcher-copy,.home-page .gon-launcher-spark{display:none}
.home-page.menu-open .gon-launcher,.home-page.menu-open .gon-panel{display:none!important}
@keyframes product-fade {from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:960px){
  .home-page .burger{display:none}
  .home-page .hero {grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:clamp(30px,4vw,65px);padding-block:104px 92px}
  .home-page .hero h1{max-width:12ch}
}
@media(max-width:959px){
  .home-page .burger{display:flex}
  .home-page .hero{gap:28px;padding-block:44px 55px}
  .home-page .hero h1{max-width:18ch;font-size:clamp(2.15rem,7.7vw,3.4rem)}
  .home-page .hero-copy{gap:18px}
  .home-page .hero-actions .btn{min-height:49px}
}
@media(max-width:650px){
  .home-page .hero{padding-top:22px;padding-bottom:28px;gap:16px}
  .home-page .hero-copy{gap:14px}
  .home-page .hero h1{font-size:clamp(1.8rem,7.4vw,2.8rem);letter-spacing:-.055em}
  .home-page .hero .lede{font-size:15px;line-height:1.55}
  .home-page .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .home-page .hero-actions .main{width:100%;justify-content:space-between}
  .home-page .hero-actions .hero-secondary{align-self:flex-start;min-height:34px;padding:0 4px;background:transparent;border-color:transparent;color:#b8cfff}
  .home-page .hero-note{font-size:10.5px;line-height:1.45}
  .home-page .product-body{display:flex;flex-direction:column;min-height:0}
  .home-page .product-top{height:40px;padding:0 13px}
  .home-page .product-sidebar{padding:11px 12px;border-right:0;border-bottom:1px solid rgba(167,195,242,.12);gap:8px}
  .home-page .product-sidebar-title,.home-page .product-sidebar-footer{display:none}
  .home-page .product-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .home-page .product-tab{justify-content:center;flex-wrap:wrap;gap:4px;min-height:39px;padding:8px 3px;font-size:11px;white-space:normal;text-align:center}
  .home-page .product-tab span{font-size:9px}
  .home-page .product-workspace{padding:17px 16px}
  .home-page .product-workspace-top{margin-bottom:17px}
  .home-page .product-workspace-top > div strong{font-size:15px}
  .home-page .product-workspace-status{font-size:9px}
  .home-page .product-screen{min-height:246px}
  .home-page .hero-bottom{gap:8px;padding-bottom:12px}
  .home-page .hero-bottom i{width:12px}
  .home-page .hero-bottom span{font-size:8px}
  .home-page .sec{padding-block:58px}
}
@media(max-width:350px){
  .home-page .product-workspace-status{display:none}
  .home-page .product-workspace{padding-inline:12px}
  .home-page .product-tab{font-size:10px}
  .home-page .hero-bottom{gap:6px}
  .home-page .hero-bottom i{width:7px}
  .home-page .sheet{gap:13px}
  .home-page .sheet-need{min-height:45px}
  .home-page .sheet-answer{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .home-page .product-screen{animation:none}
  .home-page .nav-trigger span,.home-page .burger-lines i{transition:none}
}