/* Banniz website v8 — design & motion layer (shared by index.html and pricing.html).
   Loaded after the page styles. Brand colours and fonts are unchanged; this file adds
   tokens, accessibility fixes and the CSS side of the Motion system (motion-ui.js).
   Rule: content is visible without JavaScript. Only html.mo-intro (set in <head>,
   removed by motion-ui.js or after 2.5 s at the latest) hides the hero for its entrance. */

/* ---------- tokens ---------- */
@property --hs { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hs-bg { syntax: "<number>"; inherits: true; initial-value: 0; }
:root {
  /* radius scale (inline styles were mapped onto these) */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
  /* spacing scale: 4 px rhythm (inline paddings/gaps ≥ 12 px were rounded onto it) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* accessible gold for small text on light surfaces (from the brand gradient family) */
  --gold-ink: #7f6124;
  --gold-fill: #8a6a28;
  /* focus ring: navy on light surfaces, light gold on dark surfaces */
  --focus: var(--navy);
  /* motion tokens: springs generated from Motion's spring() (stiffness 400/28, 260/22) */
  --spring-snappy: linear(0, 0.0218, 0.0784, 0.1583, 0.2519, 0.3517, 0.4519, 0.5484, 0.638, 0.7188, 0.7899, 0.8509, 0.9019, 0.9434, 0.9763, 1.0015, 1.0199, 1.0326, 1.0406, 1.0448, 1.046, 1.045, 1.0424, 1.0387, 1.0344, 1.0298, 1.0252, 1.0208, 1.0166, 1.0129, 1.0096, 1.0068, 1.0045, 1.0026, 1.0011, 0.9999, 0.9991, 0.9985, 0.9981, 0.9979, 1);
  --spring-soft: linear(0, 0.0207, 0.0748, 0.1517, 0.2426, 0.3404, 0.4395, 0.5356, 0.6258, 0.7079, 0.7808, 0.8439, 0.8972, 0.941, 0.9762, 1.0033, 1.0235, 1.0376, 1.0467, 1.0517, 1.0533, 1.0525, 1.0497, 1.0457, 1.041, 1.0358, 1.0305, 1.0253, 1.0205, 1.016, 1.0121, 1.0087, 1.0058, 1.0034, 1.0015, 1, 0.9988, 0.9981, 0.9975, 0.9973, 1);
  --t-fast: .16s; --t-base: .44s; --t-slow: .53s;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring-snappy: cubic-bezier(.34, 1.4, .64, 1); --spring-soft: cubic-bezier(.3, 1.3, .6, 1); }
}

/* ---------- focus visible (contrast ≥ 3:1 against the surrounding surface) ---------- */
.dark, .hero, .p-hero, .site-header, footer, .numbers, .marquee, .clients, .final, .calc-out, .quiz-out,
.book-form, .price-card.dark, .pkg-note, .sticky-cta, .world, .visual { --focus: var(--gold-light); }
.lang-list { --focus: var(--navy); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .opt:has(input:focus-visible) {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.opt input:focus-visible { outline: none; }
.lang-list button:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
form.contact :is(input, select, textarea):focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--green); box-shadow: none; }
.book-form :is(input, select, textarea):focus { outline: 3px solid var(--gold-light); outline-offset: 1px; box-shadow: none; }
.field :is(input, select):focus-visible { outline-offset: 1px; }
/* sticky header never hides the focused element */
html { scroll-padding-top: 96px; }
@media (max-width: 700px) { html { scroll-padding-bottom: 88px; } }

/* ---------- touch targets ≥ 44 px ---------- */
.btn, .lab-tab, .chip-btn, .jump a, .menu-toggle, .lang-btn, .lang-list button, .menu-langs button,
.linkbtn, .linkbtn-light { min-height: 44px; }
.jump a, .chip-btn, .menu-langs button, .linkbtn-light { display: inline-flex; align-items: center; }
.menu-toggle, .lang-btn { min-width: 44px; justify-content: center; }
.book-month button { width: 44px; height: 44px; }
.linkbtn { padding: 8px 4px; }
footer ul { gap: 0; }
footer ul a, .legal a { display: inline-block; padding-block: 10px; }
@media (max-width: 560px) {
  .book-pick { padding: 24px 16px; }
  .cal { gap: 4px; }
}

/* ---------- contrast fixes (WCAG AA 4.5:1 for normal text) ---------- */
.pkg .type, .svc-btn .go, .svc-from, .founder.gold .role, .price-card .best,
.price-card li.gold, .price-card li.gold::before, .flow i { color: var(--gold-ink); }
.svc-btn[aria-selected="true"] .svc-from, .svc-btn[aria-selected="true"] .go { color: var(--gold-light); }
.price-card.dark .best, .price-card.dark li.gold, .price-card.dark li.gold::before { color: var(--gold-light); }
.btn-gold { background: var(--gold-fill); }
.btn-gold:hover { background: var(--gold-ink); }
.inc.hi .ic { background: var(--gold-fill); }
.disc .ic[style*="--gold"] { background: var(--gold-fill) !important; }
.slot { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .24); }
.story-step { opacity: .78; }
.sector:nth-child(3) p { color: rgba(255, 255, 255, .95); }

/* ---------- header: shrink with transform/opacity only (driven by --hs, 0 → 1) ---------- */
.site-header, .site-header.scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: --hs .3s, --hs-bg .3s; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(6, 21, 43, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark);
  opacity: var(--hs-bg); transform: scaleY(calc(1 - .175 * var(--hs))); transform-origin: 50% 0;
}
.site-header .nav, .site-header.scrolled .nav { min-height: 80px; transition: none; transform: translateY(calc(-7px * var(--hs))); }
.site-header .brand img { transform: scale(calc(1 - .1 * var(--hs))); transform-origin: 0 50%; }
[dir="rtl"] .site-header .brand img { transform-origin: 100% 50%; }
html:not(.mo) .site-header.scrolled { --hs: 1; --hs-bg: 1; }
html.mo .site-header { transition: none; }
.site-header:has(.menu.open) { --hs-bg: 1 !important; }
@media (max-width: 980px) { .menu { top: calc(100% - 7px * var(--hs)); } }

/* ---------- buttons: hover lift (CSS spring) + press (Motion spring via --press) ---------- */
.btn, .lab-tab, .svc-btn, .q-opt, .chip-btn, .cal button, .bk-slots button, .lang-btn, .menu-toggle,
.opt, .jump a, .menu-langs button, .book-month button { scale: var(--press, 1); }
.btn { transition: background .2s, color .2s, border-color .2s, box-shadow .25s, transform .25s var(--ease), translate var(--t-base) var(--spring-snappy); }
.btn:hover:not(:disabled) { translate: 0 -2px; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 16px 34px -12px rgba(18, 163, 140, .75); }
.btn .arr { transition: transform var(--t-base) var(--spring-snappy); }
.book-form .btn:disabled:hover { translate: none; }
.lab-tab { transition: background .2s, color .2s; }
.lab-tab:hover:not([aria-selected="true"]) { color: var(--navy); background: var(--mist); }

/* cards: one shared hover curve */
.pkg, .price-card { transition: border-color .2s, box-shadow .3s, transform var(--t-slow) var(--spring-soft); }
.sector, .founder, .review, .client { transition: border-color .3s, background .3s, box-shadow .35s, transform var(--t-slow) var(--spring-soft); }
.svc-btn { transition: border-color .2s, box-shadow .2s, background .2s, color .2s, transform var(--t-slow) var(--spring-soft); }
.q-opt { transition: border-color .2s, background .2s, transform var(--t-slow) var(--spring-soft); }
/* pointer-following 3D tilt stays direct (no overshoot) */
.tilt { transition: transform .25s ease, box-shadow .25s ease; }
.sec { transition: border-color .2s, transform var(--t-slow) var(--spring-soft); }
.sec:hover { transform: translateY(-3px); }
.opt { transition: border-color .2s, background .2s; }

/* service explorer visual: parts can pop in from their own centre */
.visual svg > * { transform-box: fill-box; transform-origin: 50% 50%; }

/* FAQ: closing state rotates the + back right away */
.faq details.closing summary::after { transform: none; }
.faq summary { min-height: 44px; align-items: center; }

/* language menu + mobile menu animate from their anchor corner */
.lang-list { transform-origin: 100% 0; }
[dir="rtl"] .lang-list { transform-origin: 0 0; }

/* booking feedback */
.cal button[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(13, 41, 81, .8); }
.bk-slots button { transition: border-color .15s, background .15s; }
.bk-slots button[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(7, 105, 92, .8); }

/* ---------- hero entrance (only while html.mo-intro is set) ---------- */
html.mo .hero h1 .line { animation: none; }
html.mo-intro :is(.hero .pill, .hero h1 .line, .hero .rotator, .hero p.sub, .hero-cta > *, .hero-meta, .hero-visual, .p-hero .container > *) { opacity: 0; }

/* parallax layers use the independent translate property, so they never fight other transforms */
.hero-visual, .globe-wrap, .p-chev { translate: 0 0; }

/* print: always the final state */
@media print { * { opacity: 1 !important; transform: none !important; translate: none !important; } }

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled), .sec:hover { translate: none; transform: none; }
  .site-header::before, .site-header .nav, .site-header .brand img { transition: none; }
}

/* ---------- more touch targets (found by the 390/1440 px audit) ---------- */
.brand { min-height: 44px; }
@media (min-width: 981px) {
  .menu a:not(.btn) { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .menu a:not(.btn)::after { bottom: 4px; }
}
.legal a { padding-block: 12px; }
.field input[type=range] { height: 44px; margin-block: -8px; }
.consent input[type=checkbox] { width: 20px !important; height: 20px; flex: none; accent-color: var(--green); }

/* header fit: brand never shrinks under the menu; menu spacing adapts between 981 px and 1440 px */
@media (min-width: 981px) {
  .brand { flex: none; }
  html[lang="en"] .menu { gap: clamp(14px, 2.4vw - 8px, 28px); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  html[lang="en"] .menu a:not(.btn) { font-size: 0.84rem; }
  .menu .btn { padding-inline: 16px; }
}
@media (min-width: 981px) {
  html:not([lang="en"]) .menu { gap: clamp(10px, 1.6vw - 4px, 20px); }
  html .menu .btn { white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  html:not([lang="en"]) .menu a:not(.btn) { font-size: 0.8rem; }
  html:not([lang="en"]) .menu .btn { padding-inline: 14px; font-size: 0.82rem; }
  .nav { gap: 12px; }
}

/* explorer: long CTA labels ("See AI Solutions & Automation prices") must wrap, not widen the page on phones */
.explorer, .svc-panel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 921px) { .explorer { grid-template-columns: 340px minmax(0, 1fr); } }
@media (min-width: 1101px) { .svc-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.svc-cta { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }


/* ---------- v9: social icons (footer) ---------- */
.social-wrap { margin-top: 20px; }
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.sicon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #dbe3f0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  transition: color .2s, background .2s, border-color .2s, transform var(--t-base) var(--spring-snappy); }
.sicon svg { width: 20px; height: 20px; display: block; }
.sicon:hover { color: #06152b; background: var(--mint); border-color: var(--mint); transform: translateY(-2px); }
footer ul a.sicon, .social a { padding-block: 0; }
/* the language list now holds 10 languages: let it scroll on short screens */
.lang-list { max-height: min(70vh, 520px); overflow-y: auto; }

/* ---------- v9: long words (German, Turkish, Portuguese…) must never push the hero wider than the phone ---------- */
.hero-grid > *, .hero-copy, .p-hero .container > * { min-width: 0; }
.hero h1, .p-hero h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 560px) {
  html:is([lang="de"], [lang="tr"], [lang="pt"], [lang="fr"], [lang="it"]) .hero h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); }
  .hero h1 { overflow-wrap: anywhere; }
}