/* ═══════════════════════════════════════════════════════
   FEATURES SECTION — premium narrative zig-zag layout
═══════════════════════════════════════════════════════ */
#features {
  padding: 100px 60px 120px;
  position: relative;
}
#features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(120,120,150,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Feature clusters ── */
.feat-clusters { display: flex; flex-direction: column; gap: 80px; }
.feat-cluster { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.feat-cluster.visible { opacity: 1; transform: translateY(0); }
.feat-cluster-hd { margin-bottom: 32px; }
.feat-cluster-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #8B9EF0; text-transform: uppercase; margin-bottom: 10px; }
.feat-cluster-title { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 8px; }
.feat-cluster-desc { font-size: 15px; line-height: 1.7; color: rgba(148,163,184,0.82); max-width: 520px; }
/* ── Card grids ── */
.feat-cards { display: grid; gap: 20px; }
.feat-cards--3   { grid-template-columns: repeat(3, 1fr); }
.feat-cards--pay { grid-template-columns: 1fr 1.55fr; }
.feat-cards--2x2 { grid-template-columns: repeat(2, 1fr); }
/* ── Feature card ── */
.feat-card { padding: 30px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; height: 100%; }
.feat-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.11); background: rgba(255,255,255,0.04); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
.feat-card-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.25s ease, box-shadow 0.25s ease; }
.feat-card:hover .feat-card-icon { background: rgba(255,255,255,0.07); box-shadow: 0 0 18px rgba(255,255,255,0.05); }
.feat-card-icon svg { display: block; }
.feat-card-title { font-size: 17px; font-weight: 700; color: #F0F4FF; letter-spacing: -0.3px; margin-bottom: 10px; line-height: 1.3; }
.feat-card-desc { font-size: 14px; line-height: 1.75; color: rgba(148,163,184,0.85); }
/* ── Accounting highlight card ── */
.feat-card--accent { background: linear-gradient(140deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.02) 100%); border-color: rgba(255,255,255,0.08); }
.feat-card--accent:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 40px rgba(0,0,0,0.1); }
.feat-card--accent .feat-card-icon { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
/* ── Accounting flow indicator ── */
.feat-card-flow { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.feat-flow-step { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); padding: 5px 12px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); }
.feat-flow-arrow { color: rgba(255,255,255,0.18); font-size: 14px; }

/* ── Feature card visuals (Phase 2) ── */
.fvc { margin-top: 18px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
/* Orders & POS */
.fvc-pos-hd { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fvc-pos-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; color: rgba(255,255,255,0.42); text-transform: uppercase; }
.fvc-pos-live { font-size: 9px; color: #10B981; display: flex; align-items: center; gap: 4px; }
.fvc-pos-live::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #10B981; animation: fvc-pulse 1.6s ease-in-out infinite; }
.fvc-pos-rows { padding: 6px 13px; display: flex; flex-direction: column; gap: 2px; }
.fvc-pos-row { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.4); padding: 2px 0; }
.fvc-pos-row--new { color: rgba(255,255,255,0.55); font-weight: 500; }
.fvc-pos-total { display: flex; justify-content: space-between; padding: 7px 13px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; font-weight: 700; color: #fff; }
/* Reservations */
.fvc-res { padding: 11px 13px 9px; }
.fvc-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.fvc-tbl { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; border: 1px solid; }
.fvc-tbl--occ  { background: rgba(91,115,240,0.07);  border-color: rgba(91,115,240,0.18);  color: #8B9EF0; }
.fvc-tbl--free { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07);  color: rgba(255,255,255,0.22); }
.fvc-tbl--res  { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.22);  color: #F59E0B; }
.fvc-res-leg { display: flex; gap: 12px; }
.fvc-res-legitem { display: flex; align-items: center; gap: 4px; font-size: 9px; color: rgba(255,255,255,0.25); }
.fvc-res-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* Delivery feed */
.fvc-deliv-row { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fvc-deliv-row:last-child { border: none; }
.fvc-deliv-src { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: 1px solid; flex-shrink: 0; width: 50px; text-align: center; }
.fvc-deliv-src--tal { color: #FF6B00; border-color: rgba(255,107,0,0.28);  background: rgba(255,107,0,0.07); }
.fvc-deliv-src--car { color: #00CA4E; border-color: rgba(0,202,78,0.28);   background: rgba(0,202,78,0.07); }
.fvc-deliv-id { font-size: 10px; color: rgba(255,255,255,0.3); flex: 1; font-family: var(--mono); }
.fvc-deliv-stat { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.fvc-deliv-stat--new  { color: #8B9EF0; background: rgba(91,115,240,0.08); }
.fvc-deliv-stat--prep { color: #F59E0B; background: rgba(245,158,11,0.1); }
.fvc-deliv-amt { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.52); flex-shrink: 0; }
/* Secure Payments */
.fvc-pay { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.fvc-pay-approved { display: flex; align-items: center; gap: 8px; }
.fvc-pay-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.28); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #10B981; flex-shrink: 0; }
.fvc-pay-label { font-size: 12px; font-weight: 600; color: #10B981; }
.fvc-pay-detail { display: flex; justify-content: space-between; align-items: baseline; }
.fvc-pay-card { font-size: 11px; color: rgba(255,255,255,0.3); }
.fvc-pay-amount { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.4px; }
/* Accounting ledger */
.fvc-ledger-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fvc-ledger-row:last-child { border: none; }
.fvc-ledger-lbl { font-size: 11px; color: rgba(255,255,255,0.35); }
.fvc-ledger-val { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.68); font-family: var(--mono); }
.fvc-ledger-val--accent { color: #8B9EF0; }
/* Inventory */
.fvc-inv { padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
.fvc-inv-row { display: flex; align-items: center; gap: 9px; }
.fvc-inv-name { font-size: 11px; color: rgba(255,255,255,0.38); width: 58px; flex-shrink: 0; }
.fvc-inv-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.fvc-inv-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #5B73F0, #6366F1); }
.fvc-inv-fill--warn { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.fvc-inv-qty { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); width: 24px; text-align: right; flex-shrink: 0; }
.fvc-inv-qty--warn { color: #F59E0B; }
.fvc-inv-alert { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.fvc-inv-alert-dot { width: 4px; height: 4px; border-radius: 50%; background: #F59E0B; flex-shrink: 0; animation: fvc-pulse 1.6s ease-in-out infinite; }
.fvc-inv-alert-text { font-size: 10px; color: rgba(245,158,11,0.65); }
/* Analytics */
/* ── Analytics card — god tier ── */
.fvc-an { padding: 14px 16px 12px; position: relative; overflow: hidden; }
.fvc-an::before { content: ''; position: absolute; top: -40%; left: -20%; width: 140%; height: 140%; background: radial-gradient(ellipse at 30% 0%, rgba(91,115,240,0.08) 0%, transparent 60%); pointer-events: none; animation: anShimmer 6s ease-in-out infinite; }
.fvc-an::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(91,115,240,0.3) 50%, transparent 100%); animation: anScanline 3s ease-in-out infinite; }
.fvc-an-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fvc-an-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(91,115,240,0.9); background: rgba(91,115,240,0.08); border: 1px solid rgba(91,115,240,0.15); border-radius: 6px; padding: 3px 8px; animation: anBadgePulse 3s ease-in-out infinite; }
.fvc-an-live { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #10B981; font-weight: 600; letter-spacing: 0.3px; }
.fvc-an-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,0.6); animation: anLivePulse 1.5s ease-in-out infinite; }
.fvc-an-metric { margin-bottom: 14px; position: relative; z-index: 1; }
.fvc-an-num { font-family: var(--mono), monospace; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.5px; line-height: 1; background: linear-gradient(135deg, #fff 0%, rgba(139,158,240,0.9) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(91,115,240,0.15)); }
.fvc-an-sublabel { font-size: 9px; color: rgba(148,163,184,0.5); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
.fvc-an-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #10B981; margin-top: 5px; padding: 2px 7px; border-radius: 5px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.12); }
.fvc-an-trend svg { width: 10px; height: 10px; }
.fvc-an-sparkline { position: relative; height: 28px; margin-bottom: 14px; }
.fvc-an-sparkline svg { width: 100%; height: 100%; }
.fvc-an-spark-path { fill: none; stroke: rgba(91,115,240,0.7); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; filter: drop-shadow(0 0 3px rgba(91,115,240,0.4)); }
.fvc-an.animated .fvc-an-spark-path { animation: anSparkDraw 1.8s cubic-bezier(0.22,1,0.36,1) forwards; }
.fvc-an-spark-fill { fill: url(#anSparkGrad); opacity: 0; }
.fvc-an.animated .fvc-an-spark-fill { animation: anSparkFill 0.8s 1.2s ease forwards; }
.fvc-an-spark-dot { r: 2.5; fill: #5B73F0; stroke: rgba(91,115,240,0.3); stroke-width: 4; opacity: 0; }
.fvc-an.animated .fvc-an-spark-dot { animation: anDotAppear 0.4s 1.6s cubic-bezier(0.34,1.56,0.64,1) forwards, anDotGlow 2s 2s ease-in-out infinite; }
.fvc-an-bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; position: relative; z-index: 1; }
.fvc-an-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.fvc-an-bar { width: 100%; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, rgba(91,115,240,0.18) 0%, rgba(91,115,240,0.06) 100%); border: 1px solid rgba(91,115,240,0.1); border-bottom: none; transform-origin: bottom; transform: scaleY(0); position: relative; overflow: hidden; }
.fvc-an.animated .fvc-an-bar { animation: anBarRise 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.fvc-an.animated .fvc-an-col:nth-child(1) .fvc-an-bar { animation-delay: 0.1s; }
.fvc-an.animated .fvc-an-col:nth-child(2) .fvc-an-bar { animation-delay: 0.18s; }
.fvc-an.animated .fvc-an-col:nth-child(3) .fvc-an-bar { animation-delay: 0.26s; }
.fvc-an.animated .fvc-an-col:nth-child(4) .fvc-an-bar { animation-delay: 0.34s; }
.fvc-an.animated .fvc-an-col:nth-child(5) .fvc-an-bar { animation-delay: 0.42s; }
.fvc-an.animated .fvc-an-col:nth-child(6) .fvc-an-bar { animation-delay: 0.50s; }
.fvc-an.animated .fvc-an-col:nth-child(7) .fvc-an-bar { animation-delay: 0.58s; }
.fvc-an-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
.fvc-an.animated .fvc-an-bar::after { animation: anBarSheen 2s 1.2s ease-in-out forwards; }
.fvc-an-bar--pk { background: linear-gradient(180deg, rgba(91,115,240,0.5) 0%, rgba(91,115,240,0.2) 100%); border-color: rgba(91,115,240,0.35); box-shadow: 0 -4px 12px rgba(91,115,240,0.15); }
.fvc-an-bar--pk::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px; border-radius: 2px; background: rgba(91,115,240,0.8); box-shadow: 0 0 8px rgba(91,115,240,0.5); }
.fvc-an-day { font-size: 8.5px; color: rgba(255,255,255,0.22); letter-spacing: 0.2px; transition: color 0.2s ease; }
.fvc-an-col:hover .fvc-an-day { color: rgba(255,255,255,0.5); }
.fvc-an-col:hover .fvc-an-bar { filter: brightness(1.3); transform: scaleY(1) scaleX(1.08); }
.fvc-an-bar { transition: filter 0.2s ease, transform 0.2s ease; }
.fvc-an-tooltip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%) scale(0.8); opacity: 0; background: rgba(20,21,25,0.95); border: 1px solid rgba(91,115,240,0.2); color: #fff; font-size: 9px; font-weight: 600; font-family: var(--mono), monospace; padding: 3px 7px; border-radius: 5px; white-space: nowrap; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.fvc-an-col:hover .fvc-an-tooltip { opacity: 1; transform: translateX(-50%) scale(1); }
.fvc-an-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(91,115,240,0.12) 20%, rgba(91,115,240,0.12) 80%, transparent 100%); margin: 10px 0 8px; }
.fvc-an-footer { display: flex; justify-content: space-between; align-items: center; }
.fvc-an-stat { display: flex; flex-direction: column; gap: 1px; }
.fvc-an-stat-val { font-family: var(--mono), monospace; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); }
.fvc-an-stat-label { font-size: 8px; color: rgba(148,163,184,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
/* ── Analytics keyframes ── */
@keyframes anBarRise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes anBarSheen { 0% { left: -100%; } 100% { left: 200%; } }
@keyframes anShimmer { 0%, 100% { opacity: 0.5; transform: translateX(-5%); } 50% { opacity: 1; transform: translateX(5%); } }
@keyframes anScanline { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@keyframes anLivePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16,185,129,0.6); } 50% { opacity: 0.4; box-shadow: 0 0 2px rgba(16,185,129,0.2); } }
@keyframes anBadgePulse { 0%, 100% { border-color: rgba(91,115,240,0.15); } 50% { border-color: rgba(91,115,240,0.35); } }
@keyframes anSparkDraw { to { stroke-dashoffset: 0; } }
@keyframes anSparkFill { to { opacity: 0.4; } }
@keyframes anDotAppear { to { opacity: 1; } }
@keyframes anDotGlow { 0%, 100% { stroke-width: 4; stroke: rgba(91,115,240,0.3); } 50% { stroke-width: 6; stroke: rgba(91,115,240,0.5); } }
@keyframes anCountUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Team management */
.fvc-team-row { display: flex; align-items: center; gap: 9px; padding: 7px 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fvc-team-row:last-child { border: none; }
.fvc-team-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.fvc-team-info { flex: 1; min-width: 0; }
.fvc-team-name  { font-size: 11px; color: rgba(255,255,255,0.65); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvc-team-shift { font-size: 10px; color: rgba(255,255,255,0.25); }
.fvc-team-badge { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 4px; border: 1px solid; flex-shrink: 0; }
.fvc-team-badge--mgr   { background: rgba(91,115,240,0.07); color: #8B9EF0; border-color: rgba(91,115,240,0.15); }
.fvc-team-badge--cash  { background: rgba(16,185,129,0.08);  color: #10B981; border-color: rgba(16,185,129,0.18); }
.fvc-team-badge--kitch { background: rgba(245,158,11,0.08);  color: #F59E0B; border-color: rgba(245,158,11,0.18); }
/* AI Assistant */
.fvc-ai { padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
.fvc-ai-bub { padding: 8px 11px; border-radius: 4px 12px 12px 12px; font-size: 11px; line-height: 1.5; }
.fvc-ai-bub--user { background: rgba(91,115,240,0.07); border: 1px solid rgba(91,115,240,0.14); color: rgba(255,255,255,0.65); max-width: 82%; }
.fvc-ai-bub--bot { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.58); align-self: flex-end; border-radius: 12px 4px 12px 12px; max-width: 90%; }
.fvc-ai-hl { color: #9BAEF5; font-weight: 600; }
.fvc-ai-typing { display: flex; gap: 4px; align-items: center; padding: 8px 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px 4px 12px 12px; width: fit-content; align-self: flex-end; }
.fvc-ai-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.28); animation: fvc-type 1.4s ease-in-out infinite; }
.fvc-ai-dot:nth-child(2) { animation-delay: 0.2s; }
.fvc-ai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fvc-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
@keyframes fvc-type { 0%,60%,100% { opacity:0.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
/* Loyalty */
.feat-cards--loyalty { grid-template-columns: 1fr; max-width: 480px; }
.fvc-loyalty { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fvc-loyalty-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fvc-loyalty-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); flex-shrink: 0; }
.fvc-loyalty-info { flex: 1; min-width: 0; }
.fvc-loyalty-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); }
.fvc-loyalty-tier { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.fvc-loyalty-pts { font-size: 12px; font-weight: 700; color: #10B981; flex-shrink: 0; }
.fvc-loyalty-rewards { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); }
.fvc-loyalty-reward { font-size: 10px; color: rgba(255,255,255,0.5); padding: 3px 8px; border-radius: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }