/* ==========================================================================
   Axeclusive — product demo website
   Design tokens → base → components → sections → utilities
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --c-primary: #635BFF;
  --c-primary-2: #8B5CF6;
  --c-secondary: #7C3AED;
  --c-accent: #06B6D4;
  --c-success: #10B981;
  --c-warning: #F59E0B;
  --c-error: #EF4444;
  --c-biz: #635BFF;              /* changes with the business switcher */

  --g-primary: linear-gradient(135deg, #635BFF, #8B5CF6);
  --g-secondary: linear-gradient(135deg, #06B6D4, #3B82F6);
  --g-hero: linear-gradient(120deg, #4F46E5, #7C3AED 55%, #06B6D4);

  --bg: #F8FAFC;
  --bg-2: #FFFFFF;
  --bg-3: #F1F5F9;
  --txt: #0F172A;
  --txt-2: #475569;
  --txt-3: #94A3B8;
  --line: rgba(15, 23, 42, .08);
  --line-2: rgba(15, 23, 42, .14);
  --glass: rgba(255, 255, 255, .72);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-2: 0 8px 30px rgba(15, 23, 42, .08);
  --shadow-3: 0 24px 60px rgba(49, 46, 129, .16);

  --f-sans: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: linear(0, .053, .168, .313, .455, .586, .698, .789, .861, .916, .954, .98, .997, 1.007, 1.012, 1.014, 1.013, 1.009, 1.005, 1.002, 1);
  --t-fast: 160ms; --t-med: 300ms; --t-slow: 600ms;
  --nav-h: 72px;
}
[data-theme="dark"] {
  --bg: #0B1020;
  --bg-2: #111831;
  --bg-3: #172042;
  --txt: #F1F5F9;
  --txt-2: #B6C0D4;
  --txt-3: #7C88A6;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --glass: rgba(17, 24, 49, .72);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .35);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ── Base ────────────────────────────────────────────────────────────── */
.axp, .axp * { box-sizing: border-box; }
html:has(.axp) { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body.axl-page { margin: 0; background: var(--bg); }
.axp { font-family: var(--f-sans); color: var(--txt); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color var(--t-med), color var(--t-med); }
.axp h1, .axp h2, .axp h3, .axp h4 { margin: 0; color: var(--txt); letter-spacing: -.025em; line-height: 1.1; font-weight: 800; }
.axp p { margin: 0; }
.axp a { color: inherit; text-decoration: none; }
.axp button { font: inherit; color: inherit; cursor: pointer; }
.axp :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 8px; }
.axp svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.axp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.axp .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.axp section { position: relative; padding: var(--s-9) 0; }
.axp .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: var(--s-4); }
.axp .h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.axp .lead { color: var(--txt-2); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 680px; }
.axp .center { text-align: center; }
.axp .center .lead { margin: var(--s-4) auto 0; }
.axp .grad-txt { background: var(--g-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.axp .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: .98rem; border: 1px solid transparent; transition: transform var(--t-fast) var(--spring), box-shadow var(--t-med) var(--ease), background-color var(--t-med), border-color var(--t-med); white-space: nowrap; }
.axp .btn:hover { transform: translateY(-2px); }
.axp .btn:active { transform: translateY(0) scale(.98); }
.axp .btn-p { background: var(--g-primary); color: #fff; box-shadow: 0 8px 24px rgba(99, 91, 255, .35); }
.axp .btn-p:hover { box-shadow: 0 14px 34px rgba(99, 91, 255, .45); }
.axp .btn-s { background: var(--bg-2); border-color: var(--line-2); color: var(--txt); box-shadow: var(--shadow-1); }
.axp .btn-g { background: transparent; color: var(--txt-2); }
.axp .btn-g:hover { color: var(--txt); background: var(--bg-3); }
.axp .btn-sm { min-height: 38px; padding: 8px 14px; font-size: .88rem; border-radius: 10px; }
.axp .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: axp-ripple .6s var(--ease) forwards; pointer-events: none; }
@keyframes axp-ripple { to { transform: scale(4); opacity: 0; } }

/* ── Cards & chips ───────────────────────────────────────────────────── */
.axp .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.axp .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--bg-3); color: var(--txt-2); border: 1px solid var(--line); }
.axp .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.axp .pill.ok { background: rgba(16, 185, 129, .12); color: #059669; }
.axp .pill.wait { background: rgba(245, 158, 11, .14); color: #B45309; }
.axp .pill.no { background: rgba(239, 68, 68, .12); color: #DC2626; }
.axp .pill.info { background: rgba(99, 91, 255, .12); color: var(--c-primary); }
[data-theme="dark"] .axp .pill.ok { color: #34D399; } [data-theme="dark"] .axp .pill.wait { color: #FBBF24; } [data-theme="dark"] .axp .pill.no { color: #F87171; } [data-theme="dark"] .axp .pill.info { color: #A5B4FC; }

/* ── Background decoration ───────────────────────────────────────────── */
.axp .bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }
.axp .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; animation: axp-float 18s ease-in-out infinite alternate; }
[data-theme="dark"] .axp .blob { opacity: .35; }
@keyframes axp-float { to { transform: translate(40px, -30px) scale(1.08); } }

/* ── Demo banner & navigation ────────────────────────────────────────── */
.axp .demo-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--c-dark, #0F172A); color: #E2E8F0; font-size: .82rem; font-weight: 600; }
.axp .demo-bar .live { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.axp .demo-bar .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: axp-live 2s infinite; }
@keyframes axp-live { 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.axp .demo-bar button { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.axp .demo-bar button svg.i { width: 14px; height: 14px; }

.axp .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: height var(--t-med) var(--ease), background-color var(--t-med), box-shadow var(--t-med), border-color var(--t-med); border-bottom: 1px solid transparent; }
.admin-bar .axp .nav { top: 32px; }
.axp .nav.scrolled { height: 60px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); box-shadow: var(--shadow-1); }
.axp .nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.axp .logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; margin-right: auto; }
.axp .logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--g-hero); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(99, 91, 255, .35); }
.axp .logo-mark svg.i { width: 18px; height: 18px; }
.axp .nav-links { display: flex; gap: 4px; }
.axp .nav-links a { white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: var(--txt-2); font-weight: 500; font-size: .93rem; transition: color var(--t-fast), background-color var(--t-fast); }
.axp .nav-links a:hover { color: var(--txt); background: var(--bg-3); }
.axp .icon-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); transition: background-color var(--t-fast), transform var(--t-fast); }
.axp .icon-btn:hover { background: var(--bg-3); }
.axp .icon-btn .sun { display: none; } [data-theme="dark"] .axp .icon-btn .sun { display: block; } [data-theme="dark"] .axp .icon-btn .moon { display: none; }
.axp .burger { display: none; }
.axp .burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
.axp .burger span + span { margin-top: 4px; }
.axp .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.axp .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.axp .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.axp .mnav { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49; background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); padding: 12px 20px 20px; display: grid; gap: 4px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform var(--t-med) var(--ease), opacity var(--t-med); }
.axp .mnav.open { transform: none; opacity: 1; pointer-events: auto; }
.axp .mnav a { padding: 14px 12px; border-radius: 12px; font-weight: 600; }
.axp .mnav a:hover { background: var(--bg-3); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.axp .hero { padding: 88px 0 var(--s-9); overflow: hidden; }
.axp .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.axp .hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); letter-spacing: -.04em; line-height: 1.02; }
.axp .hero .lead { margin: 22px 0 32px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.axp .hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.axp .hero .micro { margin-top: 22px; color: var(--txt-3); font-size: .88rem; display: flex; gap: 10px; flex-wrap: wrap; }
.axp .hero .micro span { display: inline-flex; align-items: center; gap: 6px; }
.axp .hero .micro svg.i { width: 15px; height: 15px; color: var(--c-success); }

/* Hero product mockup (animated) */
.axp .mock { position: relative; height: 560px; }
.axp .mock-dash { position: absolute; right: 0; top: 30px; width: 88%; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
.axp .mock-top { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.axp .mock-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-3); }
.axp .mock-top b { margin-left: 10px; font-size: .78rem; color: var(--txt-3); font-weight: 600; }
.axp .mock-body { padding: 16px; display: grid; gap: 12px; }
.axp .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.axp .mock-kpi { padding: 12px; border-radius: 12px; background: var(--bg-3); }
.axp .mock-kpi small { display: block; font-size: .7rem; color: var(--txt-3); font-weight: 600; }
.axp .mock-kpi strong { font-size: 1.3rem; letter-spacing: -.02em; }
.axp .mock-kpi.bump { animation: axp-bump .6s var(--spring); }
@keyframes axp-bump { 40% { transform: scale(1.06); background: rgba(99, 91, 255, .14); } }
.axp .mock-rows { display: grid; gap: 8px; }
.axp .mock-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: .78rem; }
.axp .mock-row b { font-weight: 700; }
.axp .mock-row.new { animation: axp-rowin .7s var(--spring) both; border-color: rgba(99, 91, 255, .4); background: rgba(99, 91, 255, .06); }
@keyframes axp-rowin { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.axp .phone { position: absolute; left: 0; bottom: 0; width: 262px; height: 520px; border-radius: 40px; padding: 10px; background: #0F172A; box-shadow: 0 30px 70px rgba(15, 23, 42, .35), inset 0 0 0 2px #334155; }
.axp .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 31px; background: var(--bg-2); overflow: hidden; }
.axp .phone-notch { position: absolute; top: 8px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: #0F172A; z-index: 3; }
.axp .ph-app { position: absolute; inset: 0; padding: 42px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: .78rem; }
.axp .ph-title { font-weight: 800; font-size: .95rem; }
.axp .ph-sub { color: var(--txt-3); font-size: .72rem; }
.axp .ph-stage { position: absolute; inset: 88px 14px 14px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(16px); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.axp .ph-stage.on { opacity: 1; transform: none; }
.axp .ph-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.axp .ph-cal span { padding: 6px 0; border-radius: 8px; font-size: .7rem; color: var(--txt-2); transition: background-color .3s, color .3s, transform .3s var(--spring); }
.axp .ph-cal span.dim { color: var(--txt-3); opacity: .45; }
.axp .ph-cal span.av { background: var(--bg-3); color: var(--txt); font-weight: 600; }
.axp .ph-cal span.sel { background: var(--c-primary); color: #fff; transform: scale(1.1); }
.axp .ph-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.axp .ph-slots span { padding: 9px 0; text-align: center; border-radius: 10px; border: 1px solid var(--line-2); font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--spring), background-color .25s, color .25s; }
.axp .ph-stage.on .ph-slots span { opacity: 1; transform: none; }
.axp .ph-slots span.sel { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.axp .ph-svc { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-2); transition: border-color .25s, background-color .25s; }
.axp .ph-svc.sel { border-color: var(--c-primary); background: rgba(99, 91, 255, .08); }
.axp .ph-svc em { font-style: normal; margin-left: auto; font-weight: 700; }
.axp .ph-field { padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); min-height: 38px; color: var(--txt); }
.axp .ph-field.typing::after { content: "|"; animation: axp-blink .8s steps(1) infinite; color: var(--c-primary); }
@keyframes axp-blink { 50% { opacity: 0; } }
.axp .ph-btn { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--g-primary); color: #fff; font-weight: 700; text-align: center; transition: transform .2s; }
.axp .ph-btn.press { transform: scale(.96); }
.axp .ph-done { align-items: center; justify-content: center; text-align: center; }
.axp .check-anim { width: 64px; height: 64px; }
.axp .check-anim circle { stroke: var(--c-success); stroke-width: 3; fill: none; stroke-dasharray: 190; stroke-dashoffset: 190; }
.axp .check-anim path { stroke: var(--c-success); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.axp .on .check-anim circle, .axp .check-anim.play circle { animation: axp-draw .6s var(--ease) forwards; }
.axp .on .check-anim path, .axp .check-anim.play path { animation: axp-draw .4s .45s var(--ease) forwards; }
@keyframes axp-draw { to { stroke-dashoffset: 0; } }
.axp .toast { position: absolute; right: -8px; top: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); font-size: .8rem; width: 250px; opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .35s, transform .5s var(--spring); z-index: 4; }
.axp .toast.on { opacity: 1; transform: none; }
.axp .toast .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(16, 185, 129, .14); color: var(--c-success); }
.axp .toast small { display: block; color: var(--txt-3); }

/* ── Logos / trust strip ─────────────────────────────────────────────── */
.axp .strip { padding: 0 0 var(--s-8); }
.axp .strip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ── Story (problem → solution) ──────────────────────────────────────── */
.axp .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin-top: var(--s-7); }
.axp .cmp { padding: 28px; }
.axp .cmp h3 { font-size: 1.25rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.axp .cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.axp .cmp li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); font-weight: 500; transition: opacity .5s, transform .6s var(--spring); }
.axp .cmp .x { color: var(--c-error); }
.axp .cmp .v { color: var(--c-success); }
.axp .cmp.old li { transition-delay: calc(var(--i) * 90ms); }
.axp .compare.go .cmp.old li { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .5); }
.axp .cmp.new li { opacity: 0; transform: translateX(-16px); transition-delay: calc(300ms + var(--i) * 110ms); }
.axp .compare.go .cmp.new li { opacity: 1; transform: none; }
.axp .cmp.new { border-color: rgba(99, 91, 255, .35); box-shadow: 0 20px 50px rgba(99, 91, 255, .12); }
.axp .cmp-arrow { display: grid; place-items: center; }
.axp .cmp-arrow span { width: 56px; height: 56px; border-radius: 50%; background: var(--g-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(99, 91, 255, .35); }

/* ── Business switcher + booking demo ────────────────────────────────── */
.axp .biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: var(--s-6) 0 var(--s-5); }
.axp .biz { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; transition: transform var(--t-med) var(--spring), border-color var(--t-med), box-shadow var(--t-med); }
.axp .biz .em { font-size: 1.7rem; line-height: 1; transition: transform var(--t-med) var(--spring); }
.axp .biz:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.axp .biz:hover .em { transform: scale(1.15) rotate(-6deg); }
.axp .biz[aria-pressed="true"] { border-color: var(--c-biz); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-biz) 22%, transparent), var(--shadow-2); }
.axp .styles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--s-5); }
.axp .seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.axp .seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: .86rem; color: var(--txt-2); transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.axp .seg button[aria-pressed="true"] { background: var(--bg-2); color: var(--txt); box-shadow: var(--shadow-1); }

.axp .bk { --c-primary: var(--c-biz); position: relative; padding: 28px; border-radius: var(--r-xl); transition: box-shadow var(--t-med); }
.axp .bk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.axp .bk-logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--c-biz) 14%, transparent); }
.axp .bk-head h3 { font-size: 1.2rem; }
.axp .bk-head p { color: var(--txt-3); font-size: .86rem; }
.axp .bk-progress { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.axp .bk-progress i { width: 26px; height: 6px; border-radius: 3px; background: var(--bg-3); transition: background-color var(--t-med), width var(--t-med) var(--ease); }
.axp .bk-progress i.done { background: var(--c-biz); }
.axp .bk-progress i.cur { width: 40px; background: var(--c-biz); }
.axp .bk-body { display: grid; gap: 18px; }
.axp .bk-panel { display: grid; gap: 12px; animation: axp-panel .45s var(--ease) both; }
@keyframes axp-panel { from { opacity: 0; transform: translateY(10px); } }
.axp .bk-panel h4 { font-size: .95rem; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.axp .bk-panel h4 .n { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .75rem; background: color-mix(in srgb, var(--c-biz) 14%, transparent); color: var(--c-biz); }
.axp .opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.axp .opt { position: relative; text-align: left; display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 56px; border-radius: 14px; background: var(--bg-2); border: 1.5px solid var(--line-2); transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--spring), box-shadow var(--t-fast); }
.axp .opt:hover { border-color: color-mix(in srgb, var(--c-biz) 55%, transparent); transform: translateY(-2px); }
.axp .opt[aria-pressed="true"] { border-color: var(--c-biz); background: color-mix(in srgb, var(--c-biz) 7%, var(--bg-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-biz) 16%, transparent); }
.axp .opt .meta { color: var(--txt-3); font-size: .8rem; }
.axp .opt .price { margin-left: auto; font-weight: 800; }
.axp .opt .tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-biz); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform var(--t-med) var(--spring); }
.axp .opt .tick svg.i { width: 12px; height: 12px; stroke-width: 3; }
.axp .opt[aria-pressed="true"] .tick { transform: scale(1); }
.axp .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .85rem; flex-shrink: 0; }
.axp .star { color: #F59E0B; font-weight: 700; font-size: .8rem; }

.axp .cal { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--bg-2); touch-action: pan-y; }
.axp .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; }
.axp .cal-head button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; }
.axp .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.axp .cal-grid .dow { font-size: .72rem; color: var(--txt-3); font-weight: 700; padding: 4px 0; }
.axp .cal-grid button { aspect-ratio: 1; min-height: 40px; border-radius: 12px; border: 0; background: transparent; font-weight: 600; font-size: .9rem; position: relative; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-med) var(--spring); }
.axp .cal-grid button:not(:disabled):hover { background: var(--bg-3); }
.axp .cal-grid button:disabled { color: var(--txt-3); opacity: .4; cursor: not-allowed; }
.axp .cal-grid button.has::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c-biz); }
.axp .cal-grid button[aria-pressed="true"] { background: var(--c-biz); color: #fff; transform: scale(1.06); }
.axp .cal-grid button[aria-pressed="true"]::after { background: #fff; }
.axp .cal-grid button.today { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.axp .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.axp .slot { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--bg-2); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t-fast); animation: axp-slot .4s var(--spring) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes axp-slot { from { opacity: 0; transform: translateY(6px) scale(.95); } }
.axp .slot:hover:not(:disabled) { border-color: var(--c-biz); }
.axp .slot:disabled { text-decoration: line-through; opacity: .4; cursor: not-allowed; }
.axp .slot[aria-pressed="true"] { background: var(--c-biz); color: #fff; border-color: var(--c-biz); }
.axp .slot svg.i { width: 14px; height: 14px; stroke-width: 3; display: none; }
.axp .slot[aria-pressed="true"] svg.i { display: block; animation: axp-pop .35s var(--spring); }
@keyframes axp-pop { from { transform: scale(0); } }
.axp .fld { display: grid; gap: 6px; }
.axp .fld label { font-size: .82rem; font-weight: 600; color: var(--txt-2); }
.axp .fld input, .axp .fld textarea, .axp .fld select { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--bg-2); color: var(--txt); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.axp .fld input:focus, .axp .fld textarea:focus { outline: none; border-color: var(--c-biz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-biz) 16%, transparent); }
.axp .fld .err { color: var(--c-error); font-size: .78rem; min-height: 1em; }
.axp .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.axp .form-grid .full { grid-column: 1 / -1; }
.axp .bk-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.axp .bk-foot .sum { margin-right: auto; color: var(--txt-2); font-size: .9rem; }
.axp .bk-foot .sum b { color: var(--txt); }
.axp .btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: axp-rot .7s linear infinite; }
@keyframes axp-rot { to { transform: rotate(360deg); } }
.axp .confirm { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 10px 0; }
.axp .confirm .check-anim { width: 84px; height: 84px; }
.axp .confirm h3 { font-size: 1.6rem; }
.axp .receipt { width: 100%; max-width: 440px; margin-top: 8px; border-radius: 16px; border: 1px dashed var(--line-2); padding: 16px 18px; text-align: left; display: grid; gap: 8px; }
.axp .receipt div { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.axp .receipt span { color: var(--txt-3); }
.axp .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.axp .confetti i { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: axp-fall 1.6s var(--ease) forwards; }
@keyframes axp-fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }

/* Widget styles */
.axp .bk.s-classic .bk-body { max-width: 560px; margin: 0 auto; }
.axp .bk.s-modern .bk-body { grid-template-columns: 1.1fr 1fr .9fr; align-items: start; }
.axp .bk.s-modern .bk-body > .bk-panel.form, .axp .bk.s-modern .bk-body > .confirm { grid-column: 1 / -1; }
.axp .bk.s-modern .opt-grid { grid-template-columns: 1fr; }
.axp .bk.s-mobile { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; justify-content: center; }
.axp .bk.s-mobile .bk-inner { width: 360px; max-width: 100%; border-radius: 44px; padding: 12px; background: #0F172A; box-shadow: 0 30px 70px rgba(15, 23, 42, .3), inset 0 0 0 2px #334155; }
.axp .bk.s-mobile .bk-screen { border-radius: 34px; background: var(--bg-2); padding: 40px 16px 20px; height: 680px; overflow-y: auto; position: relative; }
.axp .bk.s-mobile .bk-head { margin-bottom: 14px; }
.axp .bk.s-mobile .bk-progress { width: 100%; margin: 6px 0 0; }
.axp .bk.s-mobile .bk-progress i { flex: 1; }
.axp .bk.s-mobile .opt-grid, .axp .bk.s-mobile .form-grid { grid-template-columns: 1fr; }
.axp .bk.s-mobile .slots { grid-template-columns: 1fr 1fr; }
.axp .bk.s-mobile .bk-foot { position: sticky; bottom: -20px; background: var(--bg-2); padding: 12px 0 4px; margin-top: 12px; }
.axp .bk.s-mobile .bk-foot .btn { flex: 1; }
.axp .bk:not(.s-mobile) .bk-inner, .axp .bk:not(.s-mobile) .bk-screen { display: contents; }
.axp .real-link { margin-top: 18px; text-align: center; color: var(--txt-3); font-size: .9rem; }
.axp .real-link a { color: var(--c-primary); font-weight: 600; }

/* ── Features ────────────────────────────────────────────────────────── */
.axp .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: var(--s-7); }
.axp .feat { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-med); }
.axp .feat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 91, 255, .12), transparent 45%); opacity: 0; transition: opacity var(--t-med); }
.axp .feat:hover { transform: translateY(-8px); box-shadow: var(--shadow-3); border-color: rgba(99, 91, 255, .35); }
.axp .feat:hover::before { opacity: 1; }
.axp .feat .fi { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(99, 91, 255, .1); color: var(--c-primary); margin-bottom: 16px; transition: transform var(--t-med) var(--spring), background-color var(--t-med), color var(--t-med); }
.axp .feat:hover .fi { transform: rotate(-8deg) scale(1.08); background: var(--g-primary); color: #fff; }
.axp .feat h3 { position: relative; font-size: 1.08rem; margin-bottom: 6px; letter-spacing: -.01em; }
.axp .feat p { position: relative; color: var(--txt-2); font-size: .93rem; }
.axp .feat .peek { position: relative; height: 0; opacity: 0; overflow: hidden; transition: height var(--t-med) var(--ease), opacity var(--t-med), margin var(--t-med); display: flex; gap: 6px; align-items: flex-end; }
.axp .feat:hover .peek { height: 34px; opacity: 1; margin-top: 14px; }
.axp .feat .peek i { flex: 1; border-radius: 4px 4px 0 0; background: var(--g-primary); opacity: .75; height: 0; transition: height .5s var(--spring); }
.axp .feat:hover .peek i { height: var(--h); }

/* ── Dashboard (admin interface) ─────────────────────────────────────── */
.axp .dash { display: grid; grid-template-columns: 232px 1fr; min-height: 640px; border-radius: var(--r-xl); overflow: hidden; margin-top: var(--s-7); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.axp .dash-side { background: var(--bg-3); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.axp .dash-side .logo { margin: 0 8px 18px; font-size: .98rem; }
.axp .dash-side button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; font-weight: 600; font-size: .9rem; color: var(--txt-2); text-align: left; transition: background-color var(--t-fast), color var(--t-fast); }
.axp .dash-side button:hover { background: var(--bg-2); color: var(--txt); }
.axp .dash-side button[aria-current="page"] { background: var(--bg-2); color: var(--c-primary); box-shadow: var(--shadow-1); }
.axp .dash-side .badge { margin-left: auto; background: var(--c-primary); color: #fff; font-size: .7rem; padding: 1px 7px; border-radius: 99px; }
.axp .dash-main { display: flex; flex-direction: column; min-width: 0; }
.axp .dash-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.axp .dash-top h3 { font-size: 1.15rem; margin-right: auto; }
.axp .search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt-3); min-width: 200px; }
.axp .search input { border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; width: 100%; }
.axp .sel { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt); padding: 0 10px; font: inherit; font-size: .88rem; }
.axp .dash-view { padding: 20px; display: grid; gap: 16px; align-content: start; animation: axp-panel .4s var(--ease) both; overflow: auto; }
.axp .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.axp .kpi { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.axp .kpi small { color: var(--txt-3); font-weight: 600; font-size: .78rem; display: flex; align-items: center; gap: 6px; }
.axp .kpi small svg.i { width: 15px; height: 15px; }
.axp .kpi strong { display: block; font-size: 1.7rem; letter-spacing: -.03em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.axp .kpi .d { font-size: .76rem; font-weight: 700; color: var(--c-success); }
.axp .kpi .d.neg { color: var(--c-error); }
.axp .kpi.flash { animation: axp-bump .8s var(--spring); }
.axp .dash-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.axp .box { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--bg-2); min-width: 0; }
.axp .box h4 { font-size: .95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.axp .spark { width: 100%; height: 150px; }
.axp .spark path.area { fill: url(#axp-g1); }
.axp .spark path.line { fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease); }
.axp .spark.on path.line { stroke-dashoffset: 0; }
.axp .list { display: grid; gap: 8px; }
.axp .li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); transition: background-color var(--t-fast), border-color var(--t-fast); }
.axp .li:hover { background: var(--bg-3); }
.axp .li .t { font-weight: 700; font-size: .82rem; width: 64px; color: var(--txt-2); }
.axp .li .who { min-width: 0; flex: 1; }
.axp .li .who b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axp .li .who small { color: var(--txt-3); }
.axp .li.new { border-color: rgba(99, 91, 255, .5); background: rgba(99, 91, 255, .06); animation: axp-rowin .7s var(--spring) both; }
.axp .avail { display: flex; align-items: center; gap: 10px; }
.axp .avail .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.axp .avail .bar i { display: block; height: 100%; border-radius: 4px; background: var(--g-primary); width: 0; transition: width 1.2s var(--ease); }
.axp table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.axp .tbl th { text-align: left; color: var(--txt-3); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.axp .tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.axp .tbl tr { transition: background-color var(--t-fast); }
.axp .tbl tbody tr:hover { background: var(--bg-3); }
.axp .tbl-wrap { overflow-x: auto; }
.axp .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* Calendar (admin) */
.axp .acal-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.axp .acal-bar .staff-f { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.axp .acal-bar .staff-f button { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 999px; padding: 5px 12px 5px 5px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; transition: opacity var(--t-fast), border-color var(--t-fast); }
.axp .acal-bar .staff-f button[aria-pressed="false"] { opacity: .45; }
.axp .acal-bar .staff-f .avatar { width: 22px; height: 22px; font-size: .6rem; }
.axp .week { display: grid; grid-template-columns: 58px repeat(var(--cols, 7), minmax(96px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: 520px; }
.axp .week .hd { position: sticky; top: 0; z-index: 2; background: var(--bg-3); padding: 10px 6px; text-align: center; font-size: .78rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.axp .week .hd.today { color: var(--c-primary); }
.axp .week .tm { font-size: .72rem; color: var(--txt-3); text-align: right; padding: 4px 8px 0 0; border-bottom: 1px solid var(--line); height: 56px; }
.axp .week .cell { position: relative; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 56px; transition: background-color var(--t-fast); }
.axp .week .cell.over { background: rgba(99, 91, 255, .1); }
.axp .appt { position: absolute; left: 3px; right: 3px; top: 3px; z-index: 1; border-radius: 9px; padding: 5px 7px; font-size: .72rem; line-height: 1.3; color: #fff; cursor: grab; box-shadow: 0 4px 12px rgba(15, 23, 42, .15); transition: transform var(--t-fast) var(--spring), box-shadow var(--t-fast), outline-color var(--t-fast); outline: 2px solid transparent; overflow: hidden; }
.axp .appt:hover { transform: translateY(-1px); }
.axp .appt[aria-pressed="true"] { outline-color: var(--txt); transform: scale(1.03); z-index: 3; }
.axp .appt.dragging { opacity: .5; }
.axp .appt b { display: block; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axp .month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.axp .month .md { min-height: 86px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; font-size: .75rem; display: grid; align-content: start; gap: 3px; }
.axp .month .md.out { opacity: .35; }
.axp .month .md b { font-size: .8rem; }
.axp .month .md span { border-radius: 6px; padding: 2px 5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axp .appt-detail { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg-3); animation: axp-panel .35s var(--ease) both; flex-wrap: wrap; }
.axp .appt-detail .grow { flex: 1; min-width: 180px; }
.axp .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.axp .person { padding: 16px; border-radius: 16px; border: 1px solid var(--line); display: grid; gap: 10px; transition: transform var(--t-med) var(--spring), box-shadow var(--t-med); }
.axp .person:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.axp .person .row { display: flex; align-items: center; gap: 10px; }
.axp .person small { color: var(--txt-3); }
.axp .profile { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.axp .profile .cust-list button { width: 100%; text-align: left; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.axp .profile .cust-list button[aria-current="true"] { background: var(--bg-3); }
.axp .tabs-inline { display: flex; gap: 8px; }

/* ── How it works & embed ────────────────────────────────────────────── */
.axp .steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--s-7); position: relative; }
.axp .steps4::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: var(--line-2); }
.axp .steps4::after { content: ""; position: absolute; top: 34px; left: 8%; height: 2px; width: 0; background: var(--g-primary); transition: width 1.6s var(--ease); }
.axp .steps4.go::after { width: 84%; }
.axp .st4 { position: relative; text-align: center; padding: 0 8px; }
.axp .st4 .num { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 20px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); transition: background-color .5s, color .5s, transform .6s var(--spring); transition-delay: calc(var(--i) * 350ms); }
.axp .steps4.go .num { background: var(--g-primary); color: #fff; transform: scale(1.05); }
.axp .st4 h3 { font-size: 1.1rem; margin-bottom: 6px; }
.axp .st4 p { color: var(--txt-2); font-size: .93rem; }
.axp .editor { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; }
.axp .ed-steps { display: grid; gap: 10px; }
.axp .ed-step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); font-weight: 600; color: var(--txt-3); transition: color .3s, border-color .3s, background-color .3s, transform .4s var(--spring); }
.axp .ed-step .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); font-size: .8rem; }
.axp .ed-step.on { color: var(--txt); border-color: rgba(99, 91, 255, .45); transform: translateX(6px); }
.axp .ed-step.on .n { background: var(--g-primary); color: #fff; }
.axp .ed-win { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-3); }
.axp .ed-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1E1E1E; color: #ddd; font-size: .78rem; }
.axp .ed-bar .wp { width: 22px; height: 22px; border-radius: 50%; background: #3858E9; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .7rem; }
.axp .ed-bar .pub { margin-left: auto; background: #3858E9; color: #fff; padding: 5px 12px; border-radius: 4px; font-weight: 600; transition: transform .2s; }
.axp .ed-bar .pub.press { transform: scale(.92); }
.axp .ed-canvas { position: relative; padding: 22px; min-height: 330px; display: grid; gap: 12px; align-content: start; }
.axp .ed-line { height: 12px; border-radius: 6px; background: var(--bg-3); }
.axp .ed-inserter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--spring); }
.axp .ed-inserter.on { opacity: 1; transform: none; }
.axp .ed-inserter span { padding: 10px 6px; border-radius: 10px; background: var(--bg-3); text-align: center; font-size: .72rem; font-weight: 600; transition: background-color .25s, color .25s; }
.axp .ed-inserter span.hl { background: var(--g-primary); color: #fff; }
.axp .ed-block { border: 2px dashed var(--line-2); border-radius: 14px; padding: 14px; opacity: 0; transform: scale(.97); transition: opacity .4s, transform .5s var(--spring), border-color .3s; }
.axp .ed-block.on { opacity: 1; transform: none; }
.axp .ed-block.live { border-style: solid; border-color: rgba(99, 91, 255, .45); }
.axp .ed-block .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.axp .ed-block .mini i { height: 30px; border-radius: 8px; background: var(--bg-3); }
.axp .ed-block .mini i.hl { background: var(--g-primary); }
.axp .ed-block select { margin-top: 8px; }

/* ── Pricing, testimonials, stats, trust, FAQ ────────────────────────── */
.axp .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--s-7); align-items: stretch; }
.axp .plan { position: relative; padding: 26px; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.axp .plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.axp .plan.hot { border: 2px solid var(--c-primary); box-shadow: 0 24px 60px rgba(99, 91, 255, .18); }
.axp .plan .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--g-primary); color: #fff; padding: 4px 12px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.axp .plan h3 { font-size: 1.1rem; }
.axp .plan .for { color: var(--txt-3); font-size: .88rem; margin: 4px 0 16px; min-height: 2.8em; }
.axp .plan .pr { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.axp .plan .pr small { font-size: .9rem; color: var(--txt-3); font-weight: 600; }
.axp .plan .ph { display: inline-block; margin-top: 4px; font-size: .72rem; font-weight: 700; color: #B45309; background: rgba(245, 158, 11, .14); border-radius: 6px; padding: 2px 8px; }
.axp .plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; flex: 1; font-size: .92rem; color: var(--txt-2); }
.axp .plan li { display: flex; gap: 10px; }
.axp .plan li svg.i { width: 18px; height: 18px; color: var(--c-success); margin-top: 2px; }
.axp .note { text-align: center; color: var(--txt-3); margin-top: 22px; font-size: .9rem; display: flex; justify-content: center; gap: 8px; align-items: center; }
.axp .testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--s-7); }
.axp .testi { padding: 26px; display: grid; gap: 16px; }
.axp .testi blockquote { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.55; }
.axp .testi .who { display: flex; align-items: center; gap: 12px; }
.axp .testi .who small { display: block; color: var(--txt-3); }
.axp .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--s-6); }
.axp .stat { text-align: center; padding: 28px 16px; }
.axp .stat strong { display: block; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.axp .stat span { color: var(--txt-2); font-weight: 500; }
.axp .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--s-6); }
.axp .trust div { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); font-weight: 600; }
.axp .trust svg.i { color: var(--c-success); }
.axp .faq { max-width: 820px; margin: var(--s-7) auto 0; display: grid; gap: 10px; }
.axp .faq details { border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.axp .faq details[open] { border-color: rgba(99, 91, 255, .35); box-shadow: var(--shadow-2); }
.axp .faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.axp .faq summary::-webkit-details-marker { display: none; }
.axp .faq summary svg.i { margin-left: auto; transition: transform var(--t-med) var(--ease); color: var(--txt-3); }
.axp .faq details[open] summary svg.i { transform: rotate(45deg); color: var(--c-primary); }
.axp .faq .a { padding: 0 20px 18px; color: var(--txt-2); animation: axp-panel .35s var(--ease) both; }

/* ── Real plugin + final CTA + footer ────────────────────────────────── */
.axp .real-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: var(--s-6); }
.axp .real { overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.axp .real:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.axp .real img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.axp .real div { padding: 14px 16px 16px; }
.axp .real b { display: block; }
.axp .real span { color: var(--c-primary); font-weight: 600; font-size: .86rem; }
.axp .login-box { margin-top: 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 24px; }
.axp .login-box code { background: var(--bg-3); padding: 2px 8px; border-radius: 6px; }
.axp .final { overflow: hidden; margin: 0 24px; border-radius: 36px; background: var(--g-hero); color: #fff; text-align: center; padding: var(--s-9) 24px; }
.axp .final h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); max-width: 900px; margin: 0 auto; }
.axp .final p { color: rgba(255, 255, 255, .85); max-width: 640px; margin: 18px auto 32px; font-size: 1.12rem; }
.axp .final .btn-s { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.axp .final .btn-w { background: #fff; color: #312E81; }
.axp .final .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.axp footer { padding: var(--s-8) 0 var(--s-6); }
.axp .foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.axp .foot h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); margin-bottom: 12px; }
.axp .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.axp .foot a { color: var(--txt-2); font-size: .93rem; }
.axp .foot a:hover { color: var(--txt); }
.axp .copy { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--txt-3); font-size: .86rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── Tour / presentation mode ────────────────────────────────────────── */
.axp .tour-hl { position: fixed; z-index: 2147483000; border-radius: 16px; box-shadow: 0 0 0 4px var(--c-primary), 0 0 0 9999px rgba(15, 23, 42, .55); pointer-events: none; transition: all .45s var(--ease); }
.axp .tour-tip { position: fixed; z-index: 2147483001; width: min(340px, calc(100vw - 32px)); padding: 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-3); transition: top .45s var(--ease), left .45s var(--ease), opacity .2s; }
.axp .tour-tip h4 { font-size: 1rem; margin-bottom: 6px; }
.axp .tour-tip p { color: var(--txt-2); font-size: .92rem; }
.axp .tour-tip .ctl { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.axp .tour-tip .ctl .cnt { margin-right: auto; color: var(--txt-3); font-size: .8rem; font-weight: 600; }
.axp .tap { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(99, 91, 255, .5); pointer-events: none; z-index: 5; animation: axp-tap 1.3s infinite; }
@keyframes axp-tap { 0% { box-shadow: 0 0 0 0 rgba(99, 91, 255, .55); } 100% { box-shadow: 0 0 0 18px rgba(99, 91, 255, 0); } }
body.axp-present .axp .nav-links, body.axp-present .axp .strip, body.axp-present .axp .testimonials-sec, body.axp-present .axp .stats-sec { display: none; }

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.axp .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.axp .rv.in { opacity: 1; transform: none; }
.axp .rv-scale { transform: scale(.96) translateY(24px); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .axp .hero .wrap { grid-template-columns: 1fr; }
  .axp .hero .copy { text-align: center; }
  .axp .hero .cta, .axp .hero .micro { justify-content: center; }
  .axp .hero .lead { margin-left: auto; margin-right: auto; }
  .axp .mock { max-width: 620px; margin: 0 auto; width: 100%; }
  .axp .plans { grid-template-columns: repeat(2, 1fr); }
  .axp .foot { grid-template-columns: repeat(3, 1fr); }
  .axp .foot > div:first-child { grid-column: 1 / -1; }
  .axp .bk.s-modern .bk-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1140px) {
  .axp .nav-links, .axp .nav .try { display: none; }
  .axp .burger { display: grid; }
  .axp .demo-bar .msg { display: none; }
}
@media (max-width: 960px) {
  .axp .dash { grid-template-columns: 1fr; }
  .axp .dash-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .axp .dash-side .logo { display: none; }
  .axp .dash-side button { white-space: nowrap; }
  .axp .dash-cols, .axp .profile, .axp .editor, .axp .compare { grid-template-columns: 1fr; }
  .axp .cmp-arrow span { transform: rotate(90deg); }
  .axp .steps4 { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .axp .steps4::before, .axp .steps4::after { display: none; }
  .axp .testis, .axp .trust { grid-template-columns: 1fr 1fr; }
  .axp .stats { grid-template-columns: 1fr 1fr; }
  .axp .bk.s-modern .bk-body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .axp section { padding: 72px 0; }
  .axp .wrap { padding: 0 16px; }
  .axp .hero { padding-top: 48px; }
  .axp .mock { height: 470px; }
  .axp .mock-dash { width: 100%; top: 0; }
  .axp .phone { width: 220px; height: 440px; left: 50%; margin-left: -110px; }
  .axp .toast { right: 0; left: 0; margin: 0 auto; }
  .axp .bk { padding: 18px; border-radius: 22px; }
  .axp .form-grid, .axp .plans, .axp .testis, .axp .trust, .axp .steps4 { grid-template-columns: 1fr; }
  .axp .foot { grid-template-columns: 1fr 1fr; }
  .axp .final { margin: 0 12px; border-radius: 24px; }
  .axp .bk-progress { width: 100%; margin: 0; }
  .axp .bk-progress i { flex: 1; }
  .axp .search { min-width: 0; flex: 1; }
  .axp .admin-bar .nav { top: 46px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .axp *, .axp *::before, .axp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .axp .rv { opacity: 1; transform: none; }
  .axp .blob { display: none; }
}

/* ── Dashboard light/dark toggle (switches the dashboard only) ───────── */
.axp .dash[data-dtheme="dark"] { --bg: #0B1020; --bg-2: #111831; --bg-3: #172042; --txt: #F1F5F9; --txt-2: #B6C0D4; --txt-3: #7C88A6; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 30px rgba(0,0,0,.35); color: var(--txt); }
.axp .dash[data-dtheme="light"] { --bg: #F8FAFC; --bg-2: #FFFFFF; --bg-3: #F1F5F9; --txt: #0F172A; --txt-2: #475569; --txt-3: #94A3B8; --line: rgba(15,23,42,.08); --line-2: rgba(15,23,42,.14); --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04); --shadow-2: 0 8px 30px rgba(15,23,42,.08); color: var(--txt); }
.axp .dash, .axp .dash * { transition-property: background-color, color, border-color, box-shadow, transform, opacity, width, stroke-dashoffset; }
.axp .dash.switching, .axp .dash.switching * { transition-duration: .45s !important; transition-timing-function: var(--ease) !important; }
.axp .dtoggle { position: relative; width: 64px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); padding: 0; flex-shrink: 0; }
.axp .dtoggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--g-primary); box-shadow: 0 4px 12px rgba(99,91,255,.4); transition: transform .45s var(--spring), background .3s; }
.axp .dtoggle .knob svg.i { width: 14px; height: 14px; }
.axp .dash[data-dtheme="light"] .dtoggle .knob { transform: translateX(30px); background: linear-gradient(135deg, #F59E0B, #F97316); box-shadow: 0 4px 12px rgba(245,158,11,.4); }
.axp .dtoggle .sun, .axp .dash[data-dtheme="light"] .dtoggle .moon { display: none; }
.axp .dash[data-dtheme="light"] .dtoggle .sun { display: block; }

/* Dashboard fully animated: sidebar items, KPI cards, rows and panels enter in sequence */
.axp .dash.in-view .dash-side button { animation: axp-side .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms + 150ms); }
@keyframes axp-side { from { opacity: 0; transform: translateX(-12px); } }
.axp .dash-view > *, .axp .kpi, .axp .dash-view .li, .axp .tbl tbody tr, .axp .person, .axp .week .appt, .axp .month .md { animation: axp-dash-in .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes axp-dash-in { from { opacity: 0; transform: translateY(10px); } }
.axp .kpi { transition: transform var(--t-med) var(--spring), box-shadow var(--t-med), border-color var(--t-med); }
.axp .kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(99,91,255,.35); }
.axp .li, .axp .person { transition: transform var(--t-med) var(--spring), background-color var(--t-fast), border-color var(--t-fast); }
.axp .li:hover { transform: translateX(4px); }

/* ── Background: noise texture + very subtle particles ───────────────── */
.axp::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] .axp::after { opacity: .06; }
.axp .particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.axp .particles i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-primary); opacity: 0; animation: axp-rise-p linear infinite; }
.axp .particles i:nth-child(3n) { background: var(--c-accent); width: 3px; height: 3px; }
@keyframes axp-rise-p { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .35; } 85% { opacity: .2; } 100% { opacity: 0; transform: translateY(-520px); } }
@media (prefers-reduced-motion: reduce) { .axp .particles { display: none; } .axp .dash-view > *, .axp .kpi, .axp .li, .axp .tbl tbody tr, .axp .person, .axp .week .appt, .axp .month .md, .axp .dash.in-view .dash-side button { animation: none !important; } }