@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@400;500;600;700&family=Rubik:wght@300..800&display=swap");

/* Dekel Ben Tal - component styles. Colors, spacing, radii and shadows come from tokens.css (tokens.json). */
:root {
  --dbt-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dbt-ease-default: cubic-bezier(.4, 0, .2, 1);
  --dbt-dur-fast: 150ms;
  --dbt-dur-slow: 500ms;
}

.dbt-surface { background: var(--surface); color: var(--text); font-family: var(--font-sans); }
.dbt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dbt-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dbt-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* focus, shared */
.dbt-btn:focus-visible, .dbt-iconbtn:focus-visible, .dbt-chip input:focus-visible + span,
.dbt-quiz:focus-visible, .dbt-service:focus-visible, .dbt-nav a:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* Button */
.dbt-btn { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 16px/1.25 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 12px 24px; transition: transform var(--dbt-dur-fast) var(--dbt-ease-default), background-color var(--dbt-dur-fast), color var(--dbt-dur-fast), border-color var(--dbt-dur-fast); }
.dbt-btn--sm { padding: 8px 16px; font-size: 15px; }
.dbt-btn--lg { padding: 16px 28px; font-size: 16px; }
.dbt-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.dbt-btn--secondary { background: var(--inverse-surface); color: var(--inverse-text); }
.dbt-btn--outline { background: transparent; color: var(--text); border-color: var(--border); }
.dbt-btn--ghost { background: transparent; color: var(--text-soft); font-weight: 500; }
.dbt-btn--primary:hover, .dbt-btn--secondary:hover { transform: scale(1.04); }
.dbt-btn--secondary:hover { background: var(--accent); color: var(--text-on-accent); }
.dbt-btn--outline:hover { background: var(--inverse-surface); color: var(--inverse-text); border-color: var(--border-strong); }
.dbt-btn--ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.dbt-btn[disabled], .dbt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.dbt-btn__icon { display: inline-flex; transition: transform var(--dbt-dur-fast) var(--dbt-ease-default); }
.dbt-btn:hover .dbt-btn__icon { transform: translateX(4px); }
[dir="rtl"] .dbt-btn__icon { transform: scaleX(-1); }

/* Icon + IconButton */
.dbt-icon { width: 1em; height: 1em; flex: none; }
.dbt-iconbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); cursor: pointer; font-size: 18px;
  border: 2px solid var(--border); background: transparent; color: var(--text); transition: background-color var(--dbt-dur-fast), color var(--dbt-dur-fast), border-color var(--dbt-dur-fast), transform var(--dbt-dur-fast); }
.dbt-iconbtn--solid { border-color: transparent; background: var(--inverse-surface); color: var(--inverse-text); }
.dbt-iconbtn--lg { width: 64px; height: 64px; font-size: 22px; }
.dbt-iconbtn:hover { background: var(--inverse-surface); color: var(--inverse-text); border-color: var(--border-strong); }
.dbt-iconbtn--solid:hover { transform: scale(1.06); }

/* Tag */
.dbt-tag { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; font: 500 14px/1.3 var(--font-sans); color: var(--text-soft); }
.dbt-tag--sm { padding: 4px 12px; font-size: 13px; font-weight: 600; }

/* ChoiceChip */
.dbt-chip { position: relative; display: inline-block; cursor: pointer; }
.dbt-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dbt-chip span { display: inline-block; border: 2px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px; font: 500 16px/1.3 var(--font-sans); color: var(--text); transition: border-color var(--dbt-dur-fast), background-color var(--dbt-dur-fast), color var(--dbt-dur-fast); }
.dbt-chip:hover span { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.dbt-chip input:checked + span { border-color: var(--border-strong); background: var(--inverse-surface); color: var(--inverse-text); }

/* Eyebrow, SectionHeader */
.dbt-eyebrow { margin: 0; font: 600 14px/1.4 var(--font-sans); text-transform: uppercase; letter-spacing: .18em; color: var(--accent-text); }
.dbt-meta { margin: 0; font: 600 13px/1.4 var(--font-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); }
.dbt-section-header { display: flex; flex-direction: column; }
.dbt-section-header .dbt-eyebrow { margin-bottom: var(--space-5); }
.dbt-display { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 108px); line-height: .95; letter-spacing: -.04em; color: var(--text); }
.dbt-display__accent { font-weight: 300; color: var(--accent-display); }
.dbt-display--md { font-size: clamp(36px, 5vw, 72px); }
[dir="rtl"] .dbt-display { letter-spacing: -.01em; }
.dbt-lede { margin: var(--space-5) 0 0; max-width: var(--measure-lede); font: 400 20px/1.625 var(--font-sans); color: var(--text-soft); }

/* TextField */
.dbt-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.dbt-field label { font-weight: 600; color: var(--text); }
.dbt-field input, .dbt-field textarea { width: 100%; box-sizing: border-box; border: 2px solid var(--border); border-radius: var(--radius-2xl); background: var(--field);
  padding: 14px 20px; font: 400 18px/1.4 var(--font-sans); color: var(--text); outline: none; resize: none; transition: border-color var(--dbt-dur-fast), background-color var(--dbt-dur-fast); }
.dbt-field input::placeholder, .dbt-field textarea::placeholder { color: var(--text-muted); }
.dbt-field input:hover, .dbt-field textarea:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.dbt-field input:focus, .dbt-field textarea:focus { border-color: var(--border-strong); background: var(--field-focus); }
.dbt-field__hint { font-size: 14px; color: var(--text-muted); }

/* QuizOption */
.dbt-quiz { display: flex; align-items: center; gap: var(--space-4); width: 100%; text-align: start; border: 2px solid var(--border); border-radius: var(--radius-2xl);
  background: transparent; padding: 16px 20px; font: 500 17px/1.4 var(--font-sans); color: var(--text); cursor: pointer; transition: border-color var(--dbt-dur-fast), background-color var(--dbt-dur-fast); }
.dbt-quiz:hover, .dbt-quiz--selected { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 3%, transparent); }
.dbt-quiz__letter { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 14px; font-weight: 700; }
.dbt-quiz--correct { border-color: var(--border-strong); background: var(--inverse-surface); color: var(--inverse-text); }
.dbt-quiz--correct .dbt-quiz__letter { background: var(--accent); color: var(--text-on-accent); }
.dbt-quiz--wrong { border-style: dashed; color: var(--text-muted); }

/* Step */
.dbt-step { position: relative; padding-inline-start: 48px; font-family: var(--font-sans); }
.dbt-step__n { position: absolute; inset-inline-start: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box;
  border: 2px solid var(--accent); border-radius: var(--radius-pill); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--accent-text); }
.dbt-step__body { margin: var(--space-2) 0 0; font-size: 19px; line-height: 1.625; color: var(--text); }

/* ProgressBar */
.dbt-progress { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.dbt-progress__head { display: flex; justify-content: space-between; font: 600 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); }
.dbt-progress__track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.dbt-progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dbt-dur-slow) var(--dbt-ease-expo); }

/* ServiceRow */
.dbt-service { display: grid; grid-template-columns: 64px minmax(0, 1.7fr) minmax(0, 1fr) 48px; gap: var(--space-8); align-items: center; width: 100%; text-align: start;
  padding: 32px 0; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--text); cursor: pointer; font-family: var(--font-sans); }
.dbt-service__n { align-self: start; padding-top: 14px; font: 700 14px/1 var(--font-display); color: var(--text-muted); }
.dbt-service__title { font: 800 clamp(32px, 4.5vw, 66px)/1 var(--font-display); letter-spacing: -.035em; transition: color var(--dbt-dur-slow) var(--dbt-ease-expo), transform var(--dbt-dur-slow) var(--dbt-ease-expo); }
.dbt-service__desc { max-width: var(--measure-copy); font-size: 17px; line-height: 1.625; color: var(--text-muted); }
.dbt-service__toggle { display: grid; place-items: center; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--border); border-radius: var(--radius-pill); font-size: 20px; transition: transform var(--dbt-dur-slow) var(--dbt-ease-expo), background-color var(--dbt-dur-fast); }
.dbt-service:hover .dbt-service__title, .dbt-service[aria-expanded="true"] .dbt-service__title { color: var(--accent-display); transform: translateX(8px); }
.dbt-service[aria-expanded="true"] .dbt-service__toggle { transform: rotate(45deg); background: var(--inverse-surface); color: var(--inverse-text); border-color: transparent; }
@media (max-width: 900px) { .dbt-service { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); } .dbt-service__desc { grid-column: 2 / 3; } }

/* Quote */
.dbt-quote { position: relative; margin: 0; padding: 40px 32px 28px; border-radius: var(--radius-3xl); background: var(--surface-raised); font-family: var(--font-sans); }
.dbt-quote__mark { position: absolute; top: -20px; inset-inline-start: 32px; font: 400 72px/1 var(--font-display); color: var(--accent); }
.dbt-quote blockquote { margin: 0; font-size: 20px; line-height: 1.6; color: var(--text); }
.dbt-quote figcaption { margin-top: var(--space-3); }
.dbt-quote__name { display: block; font-weight: 700; color: var(--text); }
.dbt-quote__role { display: block; color: var(--text-muted); }

/* Wordmark, NavBar */
.dbt-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 18px/1 var(--font-display); letter-spacing: -.025em; color: var(--text); text-decoration: none; }
.dbt-wordmark__dot { width: .55em; height: .55em; border-radius: var(--radius-pill); background: var(--accent); flex: none; }
.dbt-wordmark--xl { font-size: clamp(48px, 7.4vw, 120px); font-weight: 800; letter-spacing: -.045em; }
.dbt-wordmark--xl .dbt-wordmark__dot { display: none; }
.dbt-wordmark__period { color: var(--accent); }
.dbt-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; max-width: var(--container-max); box-sizing: border-box;
  padding: 8px 12px 8px 20px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-raised); backdrop-filter: blur(12px); }
.dbt-nav ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.dbt-nav ul a { display: block; border-radius: var(--radius-pill); padding: 8px 16px; font: 500 15px/1.3 var(--font-sans); color: var(--text-soft); text-decoration: none; transition: background-color var(--dbt-dur-fast), color var(--dbt-dur-fast); }
.dbt-nav ul a:hover, .dbt-nav ul a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.dbt-nav__actions { display: flex; gap: var(--space-2); align-items: center; }
@media (max-width: 760px) { .dbt-nav ul { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dbt-btn, .dbt-btn__icon, .dbt-iconbtn, .dbt-service__title, .dbt-service__toggle, .dbt-progress__fill { transition: none; }
  .dbt-btn:hover, .dbt-btn:hover .dbt-btn__icon, .dbt-iconbtn--solid:hover { transform: none; }
}