/* HERO ---------------------------------------------- */
  .hero{padding:60px 0 96px;position:relative;overflow:hidden}
  .hero .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
  .hero h1.display{font-size:clamp(34px,4vw,54px);line-height:1.12}
  .hero h1 .em{color:#7C3AED;display:inline-block;transform:skewX(-5deg);letter-spacing:-0.01em}
  .hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .hero .badge{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 10px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;color:var(--ink-2);font-weight:500}
  .hero .badge-dot{width:7px;height:7px;border-radius:50%;background:#3B82F6}
  .hero .badge-brand{background:var(--grad-cta);border-color:transparent;color:#fff;font-weight:600}
  .hero .badge-brand .badge-dot{background:#fff}
  .hero .lede{font-size:18px;margin-top:24px;max-width:520px}
  .hero .ctas{display:flex;gap:10px;margin-top:36px}
  .hero .meta{display:flex;gap:24px;margin-top:36px;color:var(--soft);font-size:13px}
  .hero .meta b{color:var(--ink);font-weight:700;font-size:18px;display:block;margin-bottom:2px}

  /* hero product mockup — web admin + mobile user */
  .mock{position:relative;padding:0 4px 6px 0}
  .webwin{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 44px 92px -38px rgba(67,56,202,.36),0 14px 34px -16px rgba(13,13,18,.12)}
  .webwin .wtop{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#faf9f7;border-bottom:1px solid var(--line)}
  .webwin .wdots{display:flex;gap:7px;flex-shrink:0}
  .webwin .wdots i{width:11px;height:11px;border-radius:50%;background:#e0dcd2}
  .webwin .wdots i:nth-child(1){background:#f0a9a4}
  .webwin .wdots i:nth-child(2){background:#f3cf8d}
  .webwin .wdots i:nth-child(3){background:#a9d8ad}
  .webwin .wurl{flex:1;max-width:280px;height:28px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:8px}
  .webwin .wscreen{height:340px;overflow:hidden;background:#fff}
  .webwin .wscreen img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
  .phone-mini{position:absolute;right:-22px;bottom:-26px;width:160px;height:332px;background:#0d0d12;border-radius:28px;padding:3px;box-shadow:0 34px 60px -22px rgba(79,70,229,.42),0 12px 26px -10px rgba(13,13,18,.24);z-index:3}
  .phone-mini img{width:100%;height:100%;border-radius:24px;object-fit:cover;object-position:top;display:block}
  .phone{width:284px;height:584px;background:#0d0d12;border-radius:44px;padding:9px;box-shadow:0 40px 80px -30px rgba(79,70,229,.35), 0 12px 28px -8px rgba(0,0,0,.18);position:relative;overflow:hidden}
  .phone::before{content:none}
  .phone-img{width:100%;height:100%;display:block;border-radius:35px;object-fit:cover;object-position:top}
  .phone .screen{width:100%;height:100%;border-radius:34px;background:linear-gradient(180deg,#f6f4f0,#fff);overflow:hidden;position:relative;padding:48px 18px 18px}
  .phone .ph-h{font-size:11px;color:var(--soft);font-weight:600}
  .phone .ph-name{font-size:20px;font-weight:800;letter-spacing:-0.02em;margin-top:2px}
  .phone .ph-time{margin-top:24px;font-size:36px;font-weight:800;letter-spacing:-0.04em;font-feature-settings:"tnum"}
  .phone .ph-date{font-size:12px;color:var(--soft);font-weight:500}
  .phone .ph-card{margin-top:18px;background:var(--grad);color:#fff;border-radius:18px;padding:16px;}
  .phone .ph-card .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
  .phone .ph-card .v{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-top:4px}
  .phone .ph-card .footnote{font-size:11px;opacity:.7;margin-top:8px;display:flex;align-items:center;gap:6px}
  .phone .ph-checkin{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--ind);color:var(--ind);font-weight:800;font-size:15px;padding:14px 12px;border-radius:16px;margin-top:14px;gap:6px}
  .phone .ph-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:12px;background:#f7f6f1;margin-top:8px;font-size:12px}
  .phone .ph-row .dot{width:6px;height:6px;border-radius:50%;background:var(--ind);margin-right:8px}
  .phone .ph-row .rt{color:var(--soft);font-feature-settings:"tnum"}
  .phone .ph-row.muted .dot{background:#cfc8b8}

  /* floating tag */
  .float-tag{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;box-shadow:0 24px 50px -16px rgba(67,56,202,.16)}
  .float-tag .ico{width:28px;height:28px;border-radius:8px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;color:var(--ind)}
  .float-tag .ico svg{width:14px;height:14px}
  .float-tag .sub{font-size:11px;color:var(--soft);font-weight:500;margin-top:1px}
  .tag-1{top:48px;right:-30px;animation:bob 6s ease-in-out infinite}
  .tag-2{bottom:80px;left:-44px;animation:bob 7s ease-in-out infinite -2s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}