/* Beti Connect modern responsive layer — 2026-09-20 */
:root {
  --modern-ink: #10233f;
  --modern-muted: #63758c;
  --modern-blue: #1979d4;
  --modern-teal: #0aa897;
  --modern-line: #dbe7f1;
  --modern-soft: #f6faff;
  --modern-card: rgba(255,255,255,.92);
  --modern-shadow: 0 18px 52px rgba(36,73,115,.10);
  --modern-radius: 24px;
}

html { overflow-x: clip; }
body {
  min-width: 320px;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.container { width: min(1180px, calc(100% - 40px)); }

/* Modern compact header */
.site-header,
.home-page .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(207,222,235,.86);
  box-shadow: 0 8px 28px rgba(36,73,115,.055);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.site-header.header-scrolled,
.home-page .site-header.header-scrolled {
  background: rgba(255,255,255,.97);
  border-bottom-color: #d5e3ef;
  box-shadow: 0 12px 36px rgba(36,73,115,.09);
}
.nav-wrap { min-height: 70px; gap: 14px; }
.brand { gap: 10px; min-width: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  padding: 0;
  overflow: hidden;
  background: #061231;
  border: 1px solid #c9ddeb;
  box-shadow: 0 7px 18px rgba(36,73,115,.10);
}
.brand-mark::after { display: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-title,
.home-page .site-header:not(.header-scrolled) .brand-title { color: var(--modern-ink); font-size: 14px; }
.brand-subtitle,
.home-page .site-header:not(.header-scrolled) .brand-subtitle { color: #73849a; font-size: 9px; letter-spacing: .01em; }
.site-nav { border: 0; background: transparent; padding: 0; gap: 2px; }
.site-nav a,
.home-page .site-header:not(.header-scrolled) .site-nav a {
  color: #52647d;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 12px;
}
.site-nav a:hover,.site-nav a.active,
.home-page .site-header:not(.header-scrolled) .site-nav a:hover,
.home-page .site-header:not(.header-scrolled) .site-nav a.active {
  color: #155fae;
  background: #eff7fd;
  box-shadow: none;
}
.site-nav a::after { display: none; }
.lang-toggle,.menu-toggle,
.home-page .site-header:not(.header-scrolled) .lang-toggle,
.home-page .site-header:not(.header-scrolled) .menu-toggle {
  color: #173252;
  background: #fff;
  border-color: #d7e5f1;
  box-shadow: 0 5px 15px rgba(36,73,115,.06);
}
.home-page .site-header:not(.header-scrolled) .menu-toggle span { background:#173252; }
.lang-toggle { min-width: 52px; height: 40px; }
.menu-toggle { width: 42px; height: 42px; border-radius: 13px; }

/* New home intro: no giant logo/hero image */
.home-brand-hero {
  min-height: 0;
  padding: clamp(54px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(10,168,151,.13), transparent 27%),
    radial-gradient(circle at 8% 0%, rgba(25,121,212,.14), transparent 31%),
    linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
}
.home-brand-hero::before {
  content:"";
  display:block;
  position:absolute;
  inset:auto -15% -55% 46%;
  width:620px;
  height:620px;
  border-radius:50%;
  border:1px solid rgba(25,121,212,.10);
  box-shadow:0 0 0 75px rgba(25,121,212,.025),0 0 0 150px rgba(10,168,151,.018);
  pointer-events:none;
}
.brand-hero-overlay { display:none; }
.brand-hero-ui { min-height:0; }
.home-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  align-items:center;
  gap:clamp(32px,6vw,78px);
}
.home-intro-copy { max-width: 720px; }
.home-intro-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:6px 12px;
  border:1px solid #cfe3f1;
  border-radius:999px;
  background:#fff;
  color:#176fb6;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 8px 24px rgba(36,73,115,.06);
}
.home-intro-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#0aa897; box-shadow:0 0 0 5px rgba(10,168,151,.10); }
.home-intro-copy h1 {
  max-width:760px;
  margin:18px 0;
  color:var(--modern-ink);
  font-size:clamp(42px,5.4vw,70px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:900;
}
html[dir="rtl"] .home-intro-copy h1 { letter-spacing:-.025em; }
.home-intro-copy h1 strong { color:#1474c5; font-weight:900; }
.home-intro-copy>p { max-width:680px; color:var(--modern-muted); font-size:clamp(15px,1.6vw,18px); line-height:1.85; }
.home-intro-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.home-intro-actions .btn { border-radius:14px; }
.home-intro-note { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; color:#708197; font-size:11px; font-weight:700; }
.home-intro-note span { display:inline-flex; align-items:center; gap:7px; }
.home-intro-note span::before { content:""; width:6px; height:6px; border-radius:50%; background:#0aa897; }
.home-intro-visual {
  position:relative;
  min-height:390px;
  display:grid;
  place-items:center;
}
.home-intro-brand-card {
  width:min(100%,390px);
  padding:24px;
  border:1px solid #d6e5f0;
  border-radius:30px;
  background:rgba(255,255,255,.86);
  box-shadow:0 28px 70px rgba(36,73,115,.13);
  backdrop-filter:blur(14px);
}
.home-intro-brand-card img {
  display:block;
  width:104px;
  height:104px;
  object-fit:cover;
  margin-bottom:24px;
  border-radius:27px;
  box-shadow:0 16px 36px rgba(15,53,93,.20);
}
.home-intro-brand-card b { display:block; color:#10233f; font-size:24px; line-height:1.18; }
.home-intro-brand-card p { margin-top:9px; color:#6b7d93; font-size:13px; }
.home-intro-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.home-intro-mini-grid span { padding:12px; border:1px solid #e0eaf2; border-radius:14px; background:#f8fbfe; color:#35516d; font-size:10px; font-weight:800; }
.home-intro-float {
  position:absolute;
  padding:10px 14px;
  border:1px solid #d8e6f0;
  border-radius:14px;
  background:#fff;
  color:#41617f;
  font-size:10px;
  font-weight:800;
  box-shadow:0 14px 34px rgba(36,73,115,.11);
}
.home-intro-float.one { top:30px; right:-6px; }
.home-intro-float.two { bottom:34px; left:-16px; }
html[dir="rtl"] .home-intro-float.one { right:auto; left:-6px; }
html[dir="rtl"] .home-intro-float.two { left:auto; right:-16px; }

/* Consistent cards and sections */
.signal-strip { border-block:1px solid #e1eaf2; background:rgba(255,255,255,.95); }
.signal-grid { gap:0; }
.signal-grid>span { padding-block:18px; }
.premium-site .section, .section { padding-block: clamp(58px,7vw,86px); }
.section-heading { margin-bottom: clamp(26px,4vw,42px); }
.section-heading h2,.philosophy-grid>div:first-child h2 { letter-spacing:-.025em; }
.product-tile,.principle-card,.content-box,.support-card,.region-card,.app-card {
  border-radius:var(--modern-radius);
}
.product-tile,.principle-card,.app-card {
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.product-tile:hover,.principle-card:hover,.app-card:hover { transform:translateY(-4px); }

/* Classic pages */
.page-main { min-height:60vh; }
.page-hero,.legal-hero { padding-top:clamp(88px,10vw,118px); padding-bottom:clamp(44px,6vw,68px); }
.page-hero .container,.legal-hero .container { max-width:980px; }
.content-box { padding:clamp(20px,3vw,34px); }

/* Footer */
.site-footer,.premium-footer { padding-bottom:env(safe-area-inset-bottom,0); }
.footer-brand-block .brand-mark { width:46px;height:46px;border-radius:14px; }
.footer-brand-block .brand-mark img { width:100%;height:100%;object-fit:cover; }

/* Responsive navigation and layout */
@media (max-width: 1080px) {
  .site-nav a { padding-inline:8px; font-size:11px; }
  .brand-subtitle { display:none; }
}
@media (max-width: 920px) {
  .nav-wrap { min-height:66px; }
  .menu-toggle { display:flex; }
  .site-nav,
  .home-page .site-header:not(.header-scrolled) .site-nav {
    position:absolute;
    top:calc(100% + 8px);
    left:20px;
    right:20px;
    display:none;
    max-height:calc(100svh - 92px);
    overflow:auto;
    padding:8px;
    border:1px solid #d5e4ef;
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 60px rgba(36,73,115,.16);
  }
  .site-nav.open { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  .site-nav a,
  .home-page .site-header:not(.header-scrolled) .site-nav a {
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#52647d;
    background:#f8fbfd;
    border:1px solid transparent;
  }
  .site-nav a:hover,.site-nav a.active { color:#155fae; background:#eef7fd; border-color:#d6e8f4; }
  .home-intro-grid { grid-template-columns:1fr; text-align:center; }
  .home-intro-copy { margin-inline:auto; }
  .home-intro-copy>p { margin-inline:auto; }
  .home-intro-actions,.home-intro-note { justify-content:center; }
  .home-intro-visual { min-height:330px; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 28px,1180px); }
  .site-header { padding-top:env(safe-area-inset-top,0); }
  .brand-mark { width:38px;height:38px;flex-basis:38px;border-radius:11px; }
  .brand-title { font-size:12px; }
  .brand-text { max-width:142px; }
  .lang-toggle { min-width:46px;height:38px;font-size:11px; }
  .menu-toggle { width:40px;height:40px; }
  .site-nav,.home-page .site-header:not(.header-scrolled) .site-nav { left:14px;right:14px; }
  .site-nav.open { grid-template-columns:1fr; }
  .home-brand-hero { padding:42px 0 52px; }
  .home-intro-copy h1 { font-size:clamp(36px,12vw,48px); }
  .home-intro-copy>p { font-size:14px; }
  .home-intro-actions { display:grid; grid-template-columns:1fr; }
  .home-intro-actions .btn { width:100%; min-height:48px; }
  .home-intro-visual { min-height:0; padding-top:8px; }
  .home-intro-brand-card { width:100%; padding:20px; border-radius:24px; text-align:start; }
  .home-intro-brand-card img { width:78px;height:78px;border-radius:21px;margin-bottom:18px; }
  .home-intro-brand-card b { font-size:21px; }
  .home-intro-float { display:none; }
  .signal-grid { grid-template-columns:1fr 1fr; }
  .signal-grid>span { min-height:74px; padding:14px 8px; }
  .signal-grid>span:nth-child(odd) { border-inline-end:1px solid #e5edf4; }
  .signal-grid>span:nth-child(-n+2) { border-bottom:1px solid #e5edf4; }
  .premium-site .section,.section { padding-block:52px; }
  .section-heading h2,.philosophy-grid>div:first-child h2 { font-size:clamp(28px,9vw,36px); }
  .product-tile,.principle-card,.content-box,.app-card { border-radius:20px; }
}
@media (max-width: 380px) {
  .container { width:calc(100% - 22px); }
  .brand-text { max-width:116px; }
  .brand-title { font-size:11px; }
  .home-intro-copy h1 { font-size:34px; }
  .home-intro-mini-grid { grid-template-columns:1fr; }
}
@media (hover: none) {
  .product-tile:hover,.principle-card:hover,.app-card:hover,.btn:hover { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; }
}

/* HomiGo Auto Parts — standalone marketplace entry */
.site-nav .auto-parts-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #765300;
  background: linear-gradient(180deg, #fffaf0, #fff5d8);
  border: 1px solid #f1d486;
}
.site-nav .auto-parts-nav-link:hover {
  color: #4d3600;
  background: #ffefb8;
  border-color: #e2bd50;
}
.external-dot { font-size: 10px; line-height: 1; }

.auto-parts-product {
  position: relative;
  overflow: hidden;
  border-color: rgba(219,169,38,.35) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,195,43,.16), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fffdf7 100%);
}
.auto-parts-product::after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-70px;
  bottom:-92px;
  border-radius:50%;
  border:1px solid rgba(222,174,45,.22);
  box-shadow:0 0 0 34px rgba(247,191,35,.035),0 0 0 68px rgba(247,191,35,.018);
  pointer-events:none;
}
html[dir="rtl"] .auto-parts-product::after { right:auto; left:-70px; }
.auto-parts-brand-icon {
  width: 62px !important;
  height: 62px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 17px !important;
  background: #070707 !important;
  border: 1px solid #e5bd32 !important;
  box-shadow: 0 12px 28px rgba(119,86,0,.16);
}
.auto-parts-brand-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.auto-parts-pill {
  color:#5f4300 !important;
  background:#fff3c8 !important;
  border-color:#edd177 !important;
}
.auto-parts-product .product-kicker { color:#9a6c00; }
.auto-parts-launch {
  color:#16120a !important;
  background:linear-gradient(135deg,#ffd43b,#e9af13) !important;
  border-color:#e0ac1f !important;
  box-shadow:0 10px 24px rgba(216,157,0,.16);
}
.auto-parts-launch:hover { filter:brightness(.98); }
.footer-auto-parts-link a b { color:#f2c13a; font-size:10px; }

@media (max-width: 920px) {
  .site-nav .auto-parts-nav-link { justify-content:center; }
}
@media (max-width: 620px) {
  .auto-parts-brand-icon { width:56px !important; height:56px !important; border-radius:15px !important; }
}