/* ==========================================================================
   Theme: Bento Business, soft tiles, friendly clarity, startup energy.
   ========================================================================== */

[data-theme="bento"] {
  --bg: #f3f5f9;
  --bg-soft: #eaedf4;
  --surface: #ffffff;
  --ink: #16181d;
  --muted: #5f6673;
  --accent: #4c64f4;
  --accent-ink: #ffffff;
  --accent-2: #18b89b;
  --line: #e6e9f1;
  --border-w: 1px;
  --radius: 18px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.07);
  --shadow-strong: 0 2px 4px rgba(16, 24, 40, 0.06), 0 18px 44px rgba(16, 24, 40, 0.12);

  --font-display: "Inter", system-ui, sans-serif;
  --h-weight: 800;
  --h-tracking: -0.025em;
  --h-transform: none;
  --kicker-font: "Inter", sans-serif;
  --btn-radius: 99px;
}

[data-theme="bento"] .kicker {
  display: inline-block;
  background: rgba(76, 100, 244, 0.1);
  color: var(--accent);
  padding: 0.3rem 0.85rem;
  border-radius: 99px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

[data-theme="bento"] .btn { border-color: transparent; }
[data-theme="bento"] .btn--primary {
  background: linear-gradient(135deg, #4c64f4, #7857f0);
  color: #fff;
  box-shadow: 0 8px 20px rgba(76, 100, 244, 0.32);
}
[data-theme="bento"] .btn--primary:hover {
  background: linear-gradient(135deg, #3d54e6, #6a48e4);
  transform: translateY(-2px);
}
[data-theme="bento"] .btn--ghost { background: #fff; box-shadow: var(--shadow); }
[data-theme="bento"] .btn--ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

[data-theme="bento"] .hp { border-color: transparent; box-shadow: var(--shadow); border-radius: 99px; }
[data-theme="bento"] .site-header { border-bottom-color: transparent; }
[data-theme="bento"] .lang-btn { background: #fff; border-color: transparent; box-shadow: var(--shadow); }

/* Hero: floating soft tiles */
[data-theme="bento"] .ha-1 {
  opacity: 1; width: 5.4rem; height: 5.4rem; border-radius: 20px;
  background: linear-gradient(135deg, #c7d2ff, #e3dcff);
  top: 0; right: 4%;
  box-shadow: var(--shadow);
}
[data-theme="bento"] .ha-2 {
  opacity: 1; width: 3.4rem; height: 3.4rem; border-radius: 14px;
  background: linear-gradient(135deg, #b8f1e4, #d6f7ef);
  bottom: 6%; left: 2%;
  box-shadow: var(--shadow);
}
[data-theme="bento"] .ha-3 {
  opacity: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: linear-gradient(135deg, #ffd9a8, #ffe9cc);
  bottom: 22%; right: 12%;
  box-shadow: var(--shadow);
}
[data-theme="bento"] .win { border-color: transparent; }
[data-theme="bento"] .win-bar { border-bottom-color: var(--line); }
[data-theme="bento"] .win-dots i { background: #d9def0; }
[data-theme="bento"] .win-dots i:first-child { background: #8da2ff; }
[data-theme="bento"] .ha-chip { border-radius: 99px; background: linear-gradient(135deg, #4c64f4, #7857f0); }
[data-theme="bento"] .ha-chip--alt { background: #eef0f8; border-color: transparent; }
[data-theme="bento"] .ha-line { background: #edf0f7; }

/* Bento grids: the first service tile goes wide, like a feature tile */
@media (min-width: 640px) {
  [data-theme="bento"] .svc-card:first-child { grid-column: span 2; }
}
[data-theme="bento"] .svc-card { border-color: transparent; }
[data-theme="bento"] .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
[data-theme="bento"] .svc-icon {
  background: rgba(76, 100, 244, 0.1);
  border-radius: 12px;
  padding: 0.5rem;
  width: 2.9rem; height: 2.9rem;
}
[data-theme="bento"] .why-card,
[data-theme="bento"] .step,
[data-theme="bento"] .demo-card,
[data-theme="bento"] .price-card,
[data-theme="bento"] .form { border-color: transparent; }
[data-theme="bento"] .demo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
[data-theme="bento"] .demo-thumb { border-color: transparent; background: #f0f2f8; }
[data-theme="bento"] .dt-b { background: linear-gradient(135deg, #4c64f4, #7857f0); }

[data-theme="bento"] .step-num {
  border: none;
  background: rgba(76, 100, 244, 0.12);
  color: var(--accent);
}
[data-theme="bento"] .price-card--featured {
  background: linear-gradient(170deg, #ffffff 60%, #eef1ff);
  box-shadow: var(--shadow-strong);
}
[data-theme="bento"] .price-badge { background: linear-gradient(135deg, #4c64f4, #7857f0); }
[data-theme="bento"] .field input, [data-theme="bento"] .field select, [data-theme="bento"] .field textarea {
  background: #f5f6fa; border-color: transparent; border-radius: 12px;
}
[data-theme="bento"] .field input:focus, [data-theme="bento"] .field select:focus, [data-theme="bento"] .field textarea:focus {
  border-color: var(--accent); background: #fff;
}
[data-theme="bento"] .form-submit { border-color: transparent; }
[data-theme="bento"] .site-footer { border-top-color: transparent; background: var(--bg-soft); }

/* Gentle pop-in motion */
[data-theme="bento"] .reveal { transform: translateY(12px) scale(0.97); }
[data-theme="bento"] .reveal.in-view { transform: none; }

[data-theme="bento"] .car-btn { border-color: transparent; box-shadow: var(--shadow); border-radius: 99px; }

/* Ticker: a tidy info lane */
[data-theme="bento"] { --tk-speed: 50; }
[data-theme="bento"] .ticker {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[data-theme="bento"] .tk-item { font-family: "Inter", sans-serif; font-weight: 600; }
[data-theme="bento"] .tk-sep { color: var(--accent); }
[data-theme="bento"] .tk-sep::before { content: "●"; font-size: 0.55em; vertical-align: 0.15em; }
[data-theme="bento"] .tk-group .tk-sep:nth-of-type(2n) { color: var(--accent-2); }

/* Philosophy panel: just another friendly tile */
[data-theme="bento"] .mode-panel { border-color: transparent; box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="bento"] .mc-prev {
  background: #f3f5f9;
  border-radius: 14px;
  border: 1px solid #e6e9f1;
}
.mode-card[data-mode="bento"] .mp-a {
  width: 2.6rem; height: 2.2rem; border-radius: 9px;
  background: #ffffff; box-shadow: 0 4px 10px rgba(16,24,40,0.08);
  left: 0.6rem; top: 0.6rem;
}
.mode-card[data-mode="bento"] .mp-b {
  width: 1.5rem; height: 1.5rem; border-radius: 8px;
  background: linear-gradient(135deg, #4c64f4, #7857f0);
  right: 0.7rem; top: 0.8rem;
}
.mode-card[data-mode="bento"] .mp-c {
  width: 4.5rem; height: 1.3rem; border-radius: 8px;
  background: #ffffff; box-shadow: 0 4px 10px rgba(16,24,40,0.08);
  left: 0.6rem; bottom: 0.6rem;
}
.mode-card[data-mode="bento"] .mc-aa {
  font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.03em;
  color: #16181d; right: 0.75rem; bottom: 0.55rem; font-size: 1.3rem;
}