/* Skwila FR CSS (LTR) - v11 */
:root{
  --bg:#0A0A0A; --fg:#FFFFFF; --muted:#9AA0A6; --accent:#FFC107;
  --border:rgba(255,255,255,0.08); --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.35);
  --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif; line-height:1.5;}
a{color:var(--fg); text-decoration:none}
img,svg,video{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin-inline:auto; padding-inline:16px}

/* Header: sticky on phones, fixed on tablet/desktop */
.site-header{position:sticky; top:0; z-index:100; background:rgba(10,10,10,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border);}
@media (min-width:768px){ .site-header{position:fixed; inset-inline:0; top:0} body{padding-top:72px} }
.header-inner{display:flex; align-items:center; gap:12px; min-height:64px; padding-block:8px; flex-wrap:wrap; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{display:inline-grid; place-content:center; width:28px; height:28px; background:var(--accent); color:#000; border-radius:8px; box-shadow:var(--shadow)}
.nav{display:none; gap:16px; justify-content:center}
@media (min-width:768px){ .nav{display:flex} }
.header-actions{display:flex; align-items:center; gap:10px; width:100%; justify-content:space-between}
@media (min-width:768px){ .header-actions{width:auto} }
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#000; font-weight:700}
.lang-toggle{display:flex; gap:8px}
.lang{background:#1a1b20; border:1px solid var(--border); padding:6px 10px; border-radius:10px}
.lang.active{border-color:var(--accent); opacity:.95}

/* Hero */
.hero{padding:24px 0 32px}
.hero-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:center}
.hero-title{font-size:24px; line-height:1.25; margin:0 0 8px}
.hero-sub{color:var(--muted); margin:0 0 14px; font-size:15px}
.hero-art{display:none}
@media (min-width:768px){ .hero-grid{grid-template-columns:1.1fr .9fr; gap:28px} .hero-art{display:block} .hero-title{font-size:32px} }

.phone{width:240px; border-radius:36px; border:1px solid var(--border); background:#0f1014; box-shadow:var(--shadow); position:relative; overflow:hidden; margin-inline:auto}
.phone-notch{position:absolute; top:0; inset-inline-start:50%; transform:translateX(-50%); width:120px; height:24px; background:#0f1014; border-bottom-left-radius:16px; border-bottom-right-radius:16px; border:1px solid var(--border); border-top:none}
.phone-screen{width:100%; aspect-ratio:9/19.5; object-fit:cover}

/* Sections */
.section{padding:28px 0}
.section-alt{background:#0f1014}
.section-title{margin:0 0 14px; font-size:20px}
@media (min-width:768px){ .section-title{font-size:22px} }
.cards{display:grid; grid-template-columns:1fr; gap:12px}
.card{background:#101218; border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.card-icon{font-size:22px}
.card-list{margin:8px 0 0 16px; color:var(--muted); font-size:15px}

/* Carousel */
.carousel{position:relative; overflow:hidden; max-width:100%}
.car-track{direction:ltr; display:flex; gap:12px; padding:8px; border-radius:14px; border:1px solid var(--border); background:#0f1014;
           overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; max-width:100%}
.slide{flex:0 0 85%; max-width:380px; scroll-snap-align:start}
.shot{width:100%; aspect-ratio:9/19.5; border-radius:24px; border:1px solid var(--border); background:#121212; box-shadow:var(--shadow); object-fit:cover}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); background:#1a1b20; border:1px solid var(--border); color:#fff; border-radius:12px; width:36px; height:36px}
.car-btn.prev{inset-inline-start:8px}
.car-btn.next{inset-inline-end:8px}

/* Desktop slide sizing */
@media (min-width:768px){ .slide{flex:0 0 30%; max-width:320px} }
@media (min-width:1200px){ .slide{flex:0 0 24%; max-width:300px} }

/* CTA & Footer */
.section-cta .cta-band{display:flex; gap:12px; align-items:center; justify-content:space-between; background:#101218; border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.site-footer{border-top:1px solid var(--border); padding:20px 0}
.footer-grid{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.foot-links{display:flex; gap:16px}