/* ==========================================================================
   /enterprise — hero vault, stats, six feature graphics, AI-native block
   (cells / rise / spotlight come from prompt-volumes.css)
   ========================================================================== */
.et { --expo: cubic-bezier(.19, 1, .22, 1); --cell-line: rgba(255,255,255,.1); --ok: #08ffb6; --vio: #a78bfa; --blue: #6ea8ff; }

/* ---------- Hero ---------- */
.et-hero { position: relative; padding: 104px 0 88px; overflow: hidden; background: radial-gradient(60% 90% at 82% 10%, #18181b 0%, #000 70%); }
.et-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.et-hero .eyebrow { display: block; font-size: 14px; color: var(--fg-3); margin-bottom: 18px; }
.et-hero h1 { font-size: clamp(38px, 5.2vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -0.045em; max-width: 520px; }
.et-hero p { margin-top: 20px; max-width: 400px; font-size: 17px; color: var(--fg); }
.et-hero .hero-cta { justify-content: flex-start; margin-top: 28px; }

.et-vault { position: relative; width: min(380px, 100%); aspect-ratio: 1; margin: 0 auto; }
.et-vault .ring { position: absolute; inset: var(--i); border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); animation: etSpin var(--t) linear infinite; }
.et-vault .ring::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 12px var(--c, #fff); }
.et-vault .ring:nth-child(2) { animation-direction: reverse; }
@keyframes etSpin { to { transform: rotate(360deg); } }
.et-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 24px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, #1d1d20, #0e0e0f); box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 60px rgba(8,255,182,.08); transition: transform .6s var(--expo), box-shadow .6s; }
.et-core svg { width: 34px; height: 34px; }
.et-core .shackle { transition: transform .6s var(--expo); transform-origin: 16px 14px; }
.et-vault:hover .et-core { transform: scale(1.06); box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 80px rgba(8,255,182,.22); }
.et-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #111112; font-size: 12.5px; color: var(--fg-3); white-space: nowrap; cursor: default; transition: color .4s, border-color .4s, background .4s, transform .6s var(--expo); }
.et-chip i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #555; display: grid; place-items: center; font-style: normal; font-size: 9px; color: transparent; transition: background .4s, border-color .4s, color .4s; }
.et-chip.on { color: var(--fg); border-color: rgba(8,255,182,.45); background: #0f1714; transform: translateY(-3px); }
.et-chip.on i { background: var(--ok); border-color: var(--ok); color: #000; }
.et-chip:nth-of-type(1) { left: -2%; top: 14%; } .et-chip:nth-of-type(2) { right: -4%; top: 22%; }
.et-chip:nth-of-type(3) { left: 2%; bottom: 18%; } .et-chip:nth-of-type(4) { right: 0; bottom: 10%; }

/* ---------- Stats split ---------- */
.et-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 72px 0; border-top: 1px solid var(--cell-line); }
.et-split h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; max-width: 380px; }
.et-split .hero-cta { justify-content: flex-start; margin-top: 24px; }
.et-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.et-stats div { padding-left: 16px; border-left: 1px solid var(--cell-line); transition: border-color .4s; }
.et-stats div:hover { border-left-color: var(--ok); }
.et-stats strong { display: block; font-size: 30px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.et-stats div > span { color: var(--fg-2); font-size: 14.5px; }

/* ---------- Feature cells ---------- */
.et-kicker { font-size: 15px; font-weight: 500; margin-bottom: 18px; }
.et-cells { grid-template-columns: 1fr 1fr; }
.et-cells .pv-cell { padding: 0 0 34px; }
.et-cells .pv-cell h3 { font-size: 16px; font-weight: 500; padding: 0 30px; }
.et-cells .pv-cell p { margin-top: 8px; padding: 0 30px; max-width: 440px; color: var(--fg-2); font-size: 15px; }
.et-g { position: relative; height: 250px; margin-bottom: 26px; overflow: hidden; display: grid; place-items: center; font-size: 12.5px; background: radial-gradient(60% 70% at 50% 45%, rgba(255,255,255,.035), transparent 70%); }
.et-card { width: min(340px, 84%); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #101011; padding: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.et-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: #0e0e0f; color: var(--fg-3); transition: color .4s, border-color .4s, background .4s; }
.et-row + .et-row { margin-top: 6px; }
.et-row .sp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-row.on { color: var(--fg); border-color: rgba(255,255,255,.28); background: #19191b; }
.et-tag { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; color: var(--fg-3); white-space: nowrap; transition: color .4s, border-color .4s, background .4s; }
.et-tag.ok { color: var(--ok); border-color: rgba(8,255,182,.4); background: rgba(8,255,182,.08); }
.et-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.et-pills button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-3); font-size: 12px; transition: color .3s, border-color .3s, background .3s; }
.et-pills button:hover { color: var(--fg); }
.et-pills button.on { background: var(--fg); color: #000; border-color: var(--fg); }

/* 1. SOC 2 shield */
.et-soc svg { width: 110px; height: 120px; overflow: visible; }
.et-soc .sh { fill: rgba(255,255,255,.03); stroke: #6d6d70; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.et-soc .ck { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(8,255,182,.5)); }
.et-soc.play .sh { animation: etDraw 1.3s var(--expo) forwards; } .et-soc.play .ck { animation: etDraw .7s var(--expo) .7s forwards; }
@keyframes etDraw { to { stroke-dashoffset: 0; } }
.et-soc .scan { position: absolute; left: 50%; top: 50%; width: 170px; height: 1px; margin-left: -85px; background: linear-gradient(90deg, transparent, rgba(8,255,182,.7), transparent); animation: etScan 3.2s ease-in-out infinite; }
@keyframes etScan { 0%, 100% { transform: translateY(-70px); opacity: 0; } 20%, 80% { opacity: 1; } 50% { transform: translateY(40px); } }
.et-ticks { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.et-ticks span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-3); font-size: 11.5px; cursor: default; transition: color .4s, border-color .4s; }
.et-ticks span::before { content: "✓ "; color: transparent; transition: color .4s; }
.et-ticks span.on { color: var(--fg); border-color: rgba(8,255,182,.45); } .et-ticks span.on::before { color: var(--ok); }
.et-soc svg { margin-top: -34px; }

/* 2. SSO flow */
.et-sso { width: min(380px, 88%); }
.et-flow { position: relative; display: flex; align-items: center; justify-content: space-between; }
.et-node { position: relative; z-index: 1; width: 92px; padding: 14px 6px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: #121213; text-align: center; color: var(--fg-2); transition: border-color .5s, box-shadow .5s, color .5s; }
.et-node svg { display: block; width: 22px; height: 22px; margin: 0 auto 8px; }
.et-node.lit { border-color: rgba(8,255,182,.5); color: var(--fg); box-shadow: 0 0 30px rgba(8,255,182,.12); }
.et-wire { position: absolute; left: 92px; right: 92px; top: 50%; height: 0; border-top: 1px dashed rgba(255,255,255,.22); }
.et-token { position: absolute; left: 92px; top: 50%; padding: 3px 9px; margin-top: -12px; border-radius: 999px; background: var(--fg); color: #000; font-size: 11px; font-weight: 600; opacity: 0; }
.et-sso.go .et-token { animation: etToken 1.5s var(--expo) forwards; }
@keyframes etToken { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--run) - 100%)); } }
.et-sso .et-pills { justify-content: center; margin-top: 22px; }
.et-sso .state { text-align: center; margin-top: 12px; color: var(--fg-3); min-height: 19px; }
.et-sso .state b { color: var(--ok); font-weight: 500; }

/* 3. Support chat */
.et-chat { display: grid; gap: 8px; }
.et-chat .et-pills { margin-bottom: 4px; }
.et-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; background: #1b1b1d; color: var(--fg-2); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--expo); }
.et-msg.me { justify-self: end; background: #242427; color: var(--fg); border-bottom-right-radius: 4px; }
.et-msg.them { border: 1px solid rgba(8,255,182,.25); background: #0f1714; color: var(--fg); border-bottom-left-radius: 4px; }
.et-msg small { display: block; font-size: 10.5px; color: var(--ok); margin-bottom: 2px; }
.et-msg.in { opacity: 1; transform: none; }
.et-dots { display: inline-flex; gap: 3px; } .et-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); animation: etBlink 1s infinite; } .et-dots i:nth-child(2) { animation-delay: .15s; } .et-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes etBlink { 50% { opacity: .2; } }

/* 4. Backups */
.et-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.et-day { position: relative; height: 86px; border-radius: 9px; border: 1px solid var(--line); background: #0e0e0f; overflow: hidden; cursor: pointer; transition: border-color .4s, transform .5s var(--expo); }
.et-day::before { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: linear-gradient(180deg, rgba(110,168,255,.55), rgba(110,168,255,.12)); transition: height .9s var(--expo); }
.et-day span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10.5px; color: var(--fg-3); }
.et-day i { position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; background: var(--blue); color: #000; transform: scale(0); transition: transform .5s var(--expo); }
.et-day.done::before { height: 100%; } .et-day.done i { transform: none; } .et-day.done span { color: var(--fg); }
.et-day.pick { border-color: var(--fg); transform: translateY(-4px); }
.et-backup-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; color: var(--fg-3); }
.et-backup-foot b { color: var(--fg); font-weight: 500; }

/* 5. API console */
.et-api { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.et-api .bar { display: flex; gap: 5px; margin-bottom: 12px; } .et-api .bar i { width: 8px; height: 8px; border-radius: 50%; background: #333; }
.et-api .req { color: var(--fg); min-height: 18px; white-space: nowrap; overflow: hidden; }
.et-api .req b { color: var(--vio); font-weight: 500; }
.et-api .req::after { content: ""; display: inline-block; width: 6px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--fg); animation: etBlink .8s steps(2) infinite; }
.et-api .res { margin-top: 10px; padding: 10px; border-radius: 9px; background: #0a0a0b; border: 1px solid var(--line); color: var(--fg-2); min-height: 92px; }
.et-api .res div { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .5s var(--expo); white-space: nowrap; }
.et-api .res div.in { opacity: 1; transform: none; }
.et-api .res .ok { color: var(--ok); } .et-api .res em { font-style: normal; color: var(--blue); }

/* 6. RBAC */
.et-rbac .et-pills { margin-bottom: 12px; }
.et-perm { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); color: var(--fg-3); transition: color .4s; }
.et-perm .sp { flex: 1; }
.et-perm i { width: 30px; height: 17px; border-radius: 999px; background: #232325; position: relative; transition: background .4s; }
.et-perm i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #6d6d70; transition: transform .5s var(--expo), background .4s; }
.et-perm.yes { color: var(--fg); } .et-perm.yes i { background: rgba(8,255,182,.28); } .et-perm.yes i::after { transform: translateX(13px); background: var(--ok); }

/* ---------- AI native ---------- */
.et-native { display: grid; grid-template-columns: 1fr 1.25fr; border: 1px solid var(--cell-line); }
.et-native > div { padding: 40px 34px; }
.et-native > div + div { border-left: 1px solid var(--cell-line); display: grid; gap: 36px; }
.et-native h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -0.03em; }
.et-native > div:first-child p { margin-top: 14px; color: var(--fg-2); max-width: 340px; }
.et-item h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.et-item h3 svg { width: 16px; height: 16px; color: var(--fg-2); }
.et-item > p { margin-top: 8px; color: var(--fg-2); max-width: 420px; }
.et-guard { margin-top: 16px; max-width: 420px; }
.et-hub { position: relative; height: 190px; margin-top: 16px; max-width: 420px; border: 1px solid var(--line); border-radius: 14px; background: #0c0c0d; overflow: hidden; }
.et-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.et-hub line { stroke: rgba(255,255,255,.14); stroke-dasharray: 4 5; transition: stroke .4s; }
.et-hub line.on { stroke: var(--ok); animation: etMarch .6s linear infinite; }
@keyframes etMarch { to { stroke-dashoffset: -9; } }
.et-hub .hub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(255,255,255,.2); background: #17171a; z-index: 1; }
.et-hub .hub img { width: 20px; height: auto; }
.et-hub .sat { position: absolute; padding: 5px 10px; margin: -13px 0 0 0; transform: translateX(-50%); border-radius: 8px; border: 1px solid var(--line); background: #131314; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; cursor: pointer; z-index: 1; transition: color .4s, border-color .4s, background .4s; }
.et-hub .sat.on { color: var(--fg); border-color: rgba(8,255,182,.5); background: #0f1714; }

@media (max-width: 900px) {
  .et-hero-grid, .et-split, .et-native { grid-template-columns: 1fr; } .et-native > div + div { border-left: 0; border-top: 1px solid var(--cell-line); }
  .et-cells { grid-template-columns: 1fr; } .et-vault { width: min(320px, 92%); margin-top: 20px; }
}
@media (max-width: 640px) { .et-hero { padding: 72px 0 56px; } .et-native > div { padding: 28px 20px; } .et-cells .pv-cell h3, .et-cells .pv-cell p { padding: 0 20px; } .et-chip:nth-of-type(1) { left: 0; } .et-chip:nth-of-type(2) { right: 0; } .et-split { padding: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .et-vault .ring, .et-soc .scan, .et-hub line.on, .et-dots i { animation: none !important; } .et-soc .sh, .et-soc .ck { stroke-dashoffset: 0; } .et-msg, .et-api .res div { opacity: 1; transform: none; } }