.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); background:#a02e31; border-color:#a02e31}
.media-actions{display:flex; justify-content:center; margin-top:12px}
/* Reveal animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}
:root{
  --brand:#BF3A3D;
  --text:#111111;
  --muted:#666666;
  --bg:#ffffff;
  --card:#fafafa;
  --border:#eaeaea;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:56px;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* Topbar */
.topbar{position:fixed; inset:0 0 auto 0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:56px}
.brand{font-weight:700; letter-spacing:.2px}
.main-nav{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); padding:16px 0}
.main-nav.is-open{display:block}
.main-nav__link{display:block; color:#333; padding:12px 20px; transition:background .15s ease, color .15s ease; border-bottom:1px solid var(--border)}
.main-nav__link:hover{background:#f4f4f4; color:#000}
.main-nav__link:last-child{border-bottom:none}
.main-nav__link.is-active{color:var(--brand); background:#fbecee}
.menu-toggle{display:flex;flex: auto; flex-direction:column; gap:3px; padding:8px; margin-left:auto; margin-right:14px; background:none; border:none; cursor:pointer}
.menu-toggle span{width:20px; height:2px; background:#333; transition:transform .2s ease, opacity .2s ease}
.menu-toggle.is-open span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:rotate(-45deg) translate(7px, -6px)}
.lang-switch{margin-left:14px; margin-right:0; font-weight:600; color:var(--brand); border:1px solid var(--border); padding:6px 10px; border-radius:8px; background:#fff; transition:box-shadow .18s ease, transform .18s ease}
.lang-switch:hover{transform:translateY(-1px); box-shadow:var(--shadow)}

.social{display:flex; gap:14px}
.social--lg{gap:18px}
.social__link{width:24px; height:24px; display:inline-grid; place-items:center; color:#000; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; border-radius:50%}
.social__link::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:var(--brand); border-radius:50%; transform:scale(0); transition:transform .3s ease; opacity:0.1}
.social__link svg{width:22px; height:22px; fill:#111; transition:all .3s ease; position:relative; z-index:1}
.social__link:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}
.social__link:hover{transform:translateY(-2px) scale(1.1)}
.social__link:hover::before{transform:scale(1)}
.social__link:hover svg{fill:var(--brand); transform:rotate(5deg)}

/* Hero */
.hero{padding:56px 0 28px; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero::before{content:""; position:absolute; inset:0; background-image:url('https://backend.focusbehevior.com/uploads/Focus_4_023a233dde.jpg'); background-size:cover; background-position:center; filter:blur(4px); transform:scale(1.06); opacity:.6; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.32) 30%, rgba(0,0,0,.16) 55%, rgba(0,0,0,.16) 70%, rgba(0,0,0,.46) 100%),
  linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.24) 100%);
  z-index:-1}
.hero .container{position:relative; z-index:1}
.hero .container::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(92vw, 900px); height:min(52vh, 420px); border-radius:999px; background:radial-gradient(58% 58% at 50% 50%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 58%, rgba(0,0,0,0) 82%); z-index:-1}
.hero__photo{width:120px; height:120px; object-fit:cover; border-radius:50%; margin:0 auto 16px; box-shadow:var(--shadow); border:2px solid #fff}
.hero__name{margin:0; font-size:clamp(28px, 5vw, 48px); line-height:1.15; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.35)}
.hero__title{margin:.25rem 0 0; color:#fff; font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero__tag{margin:.75rem auto 1rem; color:#f8f8f8; text-shadow:0 2px 10px rgba(0,0,0,.55)}
.hero__social{display:flex; gap:14px; justify-content:center; margin-top:10px}
.hero .social__link svg{fill:#fff; transition:all .3s ease}
.hero .social__link::before{background:rgba(255,255,255,0.2)}
.hero .social__link:hover svg{fill:#fff; transform:rotate(5deg) scale(1.1)}
.hero .social__link:hover{transform:translateY(-2px) scale(1.1)}

/* Sections */
.section{padding:28px 0}
.section h2{font-size:20px; margin:0 0 12px; letter-spacing:.2px}
.section p{margin:0 0 10px}

.two-col{display:grid; gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), #a02e31); transform:scaleX(0); transition:transform .3s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,.12); border-color:var(--brand)}
.card:hover::before{transform:scaleX(1)}
.group h3{margin:0 0 10px; font-size:16px}
.list{list-style:none; padding:0; margin:0}
.list--companies .company{display:grid; grid-template-columns:1fr; padding:0}
.company__link{display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.company__link:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#ddd}
.company__link:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.logo{width:48px; height:48px; object-fit:contain; background:#fff; border-radius:8px; padding:6px; border:1px solid var(--border)}

/* New Companies Layout */
.companies-layout{display:flex; gap:40px; align-items:center; background:#f8f9fa; padding:40px; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.08); border:1px solid #e9ecef}
.companies-content{flex:0 0 42%; min-width:300px}
.companies-icon{width:56px; height:56px; color:var(--brand); margin-bottom:20px; transition:transform .3s ease, color .3s ease}
.companies-icon:hover{transform:scale(1.1); color:#a02e31}
.companies-icon svg{width:100%; height:100%; transition:transform .3s ease}
.companies-icon:hover svg{transform:rotate(5deg)}
.companies-content h2{margin:0 0 16px 0; font-size:32px; font-weight:700; line-height:1.2; color:#1a1a1a}
.companies-content p{margin:0; color:#555; font-size:16px; line-height:1.6; max-width:400px}
.companies-grid{flex:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px}
.company-card{background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid #f0f0f0; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.company-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), #a02e31); transform:scaleX(0); transition:transform .3s ease}
.company-card:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 8px 25px rgba(191, 58, 61, 0.15); border-color:var(--brand)}
.company-card:hover::before{transform:scaleX(1)}
.company-card a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; transition:transform .2s ease}
.company-card:hover a{transform:scale(1.05)}
.company-card img{max-width:100%; max-height:70px; object-fit:contain; transition:all .3s ease}
.company-card:hover img{transform:scale(1.1)}

/* Video Section */
.video{background:#f8f9fa}
.video-wrapper{max-width:800px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.12)}
.video-wrapper video{width:100%; height:auto; display:block; background:#000}

/* Credentials Section */
.credentials-layout{display:flex; gap:32px; align-items:center; background:#f8f9fa; padding:32px; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.08); border:1px solid #e9ecef}
.credentials-image{flex:0 0 40%; min-width:280px}
.credentials-image img{width:100%; height:auto; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.1)}
.credentials-content{flex:1; min-width:300px}
.credentials-content .bullets{padding-left:18px; margin:0}
.credentials-content .bullets li{margin-bottom:8px; line-height:1.5}

/* Floating WhatsApp Button */
.whatsapp-float{position:fixed; bottom:20px; right:20px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37, 211, 102, 0.4); z-index:1000; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); animation:float 3s ease-in-out infinite}
.whatsapp-float:hover{transform:scale(1.1); box-shadow:0 6px 25px rgba(37, 211, 102, 0.6)}
.whatsapp-float svg{width:32px; height:32px; fill:#fff}
@keyframes float{0%, 100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}

/* Clients grid */
/* Carousel */
.carousel{position:relative; display:flex; align-items:center; gap:8px}
.carousel__btn{border:1px solid var(--border); background:#fff; width:32px; height:32px; border-radius:10px; display:none; place-items:center; cursor:pointer}
.carousel__btn svg{width:20px; height:20px; fill:#111}
.carousel__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:6px; scrollbar-width:none}
.carousel__track::-webkit-scrollbar{width:0; height:0; background:transparent}
.carousel__track::-webkit-scrollbar-thumb{background:transparent}
.client-card{min-width:140px; flex:0 0 auto; background:transparent; border:0; padding:6px 4px; display:grid; gap:6px; align-content:start; justify-items:center; text-align:center; scroll-snap-align:start}
.client-card img{width:64px; height:64px; object-fit:cover; justify-self:center; filter:grayscale(.1); border-radius:50%; border:1px solid var(--border); background:#fff; transition:all .3s ease}
.client-card:hover img{filter:grayscale(0%) brightness(1.1); transform:scale(1.05)}
.client-card__name{font-weight:600; margin-top:2px}
.client-card__caption{color:var(--muted); font-size:14px; max-width:200px}

/* RTL adjustments for carousel: keep LTR scroll, RTL text */
[dir="rtl"] .carousel__track{direction:ltr}
[dir="rtl"] .client-card{direction:rtl; text-align:right}

/* Bullets */
.bullets{padding-left:18px; margin:0}
.bullets li{margin:6px 0}
.rtl{direction:rtl; text-align:start}
.toggle{margin-top:10px}
.toggle>summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:600}
.toggle>summary::marker{display:none}
.toggle>summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}

/* Media */
.media-grid{display:grid; grid-template-columns:1fr; gap:14px}
.media-item{aspect-ratio:16/9; overflow:hidden; border-radius:14px; box-shadow:var(--shadow); transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative}
.media-item::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), #a02e31); transform:scaleX(0); transition:transform .3s ease; z-index:1}
.media-item:hover{transform:translateY(-3px); box-shadow:0 8px 25px rgba(191, 58, 61, 0.15)}
.media-item:hover::before{transform:scaleX(1)}
.media-item iframe{width:100%; height:100%; border:0; transition:transform .3s ease}
.media-item:hover iframe{transform:scale(1.02)}

/* Contact */
.contact-line{margin-top:10px; color:var(--muted)}
.contact-card{margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); display:grid; gap:10px; justify-items:center; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.contact-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), #a02e31); transform:scaleX(0); transition:transform .3s ease}
.contact-card:hover{transform:translateY(-3px); box-shadow:0 8px 25px rgba(191, 58, 61, 0.15); border-color:var(--brand)}
.contact-card:hover::before{transform:scaleX(1)}
.contact-grid{display:grid; gap:14px}
.contact-layout{display:grid; gap:14px}
.contact-info{background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.contact-info::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), #a02e31); transform:scaleX(0); transition:transform .3s ease}
.contact-info:hover{transform:translateY(-3px); box-shadow:0 8px 25px rgba(191, 58, 61, 0.15); border-color:var(--brand)}
.contact-info:hover::before{transform:scaleX(1)}
.info-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.info-item{display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:start}
.info-icon{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; background:#fbecee; color:var(--brand); border:1px solid var(--border)}
.info-text{display:grid; gap:2px}
.info-label{font-weight:600; font-size:14px}
.info-value{color:#444; font-size:14px}
.map-card{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.map-card header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border)}
.map-card header .map-title{font-weight:600}
.map-embed{width:100%; aspect-ratio:16/9; border:0; display:block}
.map-actions{display:flex; gap:10px; padding:10px 12px; border-top:1px solid var(--border); background:#fafafa}
.map-actions .btn{padding:8px 12px}
.contact-actions{display:flex; gap:12px}
.contact-actions .btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease}
.contact-actions .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); border-color:#ddd}
.btn--primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn--primary:hover{box-shadow:0 6px 18px rgba(191,58,61,.25)}
.btn--whatsapp{background:#25D366; border-color:#25D366; color:#fff}
.btn--whatsapp:hover{box-shadow:0 6px 18px rgba(37,211,102,.25)}
.contact-line{margin:0; color:var(--muted)}
.contact-line a{color:#000; border-bottom:1px dashed var(--border)}
.contact-line a:hover{border-color:var(--brand)}

/* Footer */
.footer{padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:14px}

/* Responsive */
.companies-layout{flex-direction:column; gap:32px; padding:24px; text-align:center}
.companies-content{flex:none; text-align:center}
.companies-content p{max-width:none; margin:0 auto}
.companies-grid{grid-template-columns:repeat(2, 1fr); gap:16px}
.company-card{padding:20px}
.company-card img{max-height:55px}
.credentials-layout{flex-direction:column; gap:24px; padding:24px; text-align:center}
.credentials-image{flex:none; text-align:center}
.credentials-content{flex:none; text-align:start}

@media (min-width: 720px){
  .section{padding:40px 0}
  .two-col{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(4, 1fr)}
  .media-grid{grid-template-columns:repeat(3, 1fr)}
  .contact-grid{grid-template-columns:1fr 1fr; align-items:start}
  .contact-layout{grid-template-columns:1fr 2fr; align-items:start}
  .carousel__btn{display:inline-grid; width:40px; height:40px}
  .carousel__btn svg{width:22px; height:22px}
  .client-card{min-width:200px; padding:10px 8px; gap:8px}
  .menu-toggle{display:none}
  .main-nav{display:flex; position:static; background:none; backdrop-filter:none; border:none; padding:0; gap:14px; margin-left:16px}
  .main-nav__link{display:inline; padding:6px 8px; border-bottom:none; border-radius:8px}
  .companies-layout{flex-direction:row; gap:40px; padding:40px; text-align:left}
  .companies-content{flex:0 0 42%; text-align:start}
  .companies-content p{max-width:400px; margin:0}
  .companies-grid{grid-template-columns:repeat(2, 1fr); gap:20px}
  .company-card{padding:24px}
  .company-card img{max-height:70px}
  .credentials-layout{flex-direction:row; gap:32px; padding:32px; text-align:left}
  .credentials-image{flex:0 0 40%; text-align:left}
  .credentials-content{flex:1; text-align:start}
  .client-card img{width:84px; height:84px}
}

@media (min-width: 480px) and (max-width: 719.98px){
  .client-card{min-width:160px}
  .client-card img{width:72px; height:72px}
}

@media (max-width: 479.98px){
  .carousel__track{gap:8px; padding:4px}
  .client-card__caption{font-size:12px}
  .map-embed{aspect-ratio:4/3}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}