/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#000; --fg:#fff; --muted:#bdbdbd; --card:#0c0c0c;
  --accent:#ffffff; --accent2:#1a1a1a; --border:#1f1f1f;
}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);overflow-x:hidden}

/* Layout helpers */
.container{width:min(1200px,92vw);margin:auto}
.section{padding:80px 0}
.section.alt{background:#0a0a0a}
h1,h2{margin:0 0 14px}
h1{font-size:clamp(30px,6vw,56px);font-weight:800}
h2{font-size:clamp(22px,4vw,36px);font-weight:800}
h3{margin:0 0 8px;font-size:22px}
p{margin:0 0 10px;color:var(--muted);line-height:1.7}
.btn{border:1px solid var(--border);padding:10px 18px;border-radius:999px;text-decoration:none;color:var(--fg);display:inline-block;transition:.2s}
.btn.dark{background:#fff;color:#000;border-color:#fff}
.btn.lite{background:transparent}
.btn:hover{transform:translateY(-2px)}

/* Navbar */
.nav{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.6);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:700}
.brand img{width:28px;height:28px;filter:invert(1)}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{color:var(--muted);text-decoration:none;font-weight:600}
.menu a:hover{color:#fff}
.lang-toggle{display:flex;gap:8px}

/* Hero */
.hero{position:relative;min-height:76vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
#fx{position:absolute;inset:0}
.hero-copy{position:relative;text-align:center;padding:120px 0 80px}
.hero-logo{width:min(220px,38vw);margin-bottom:16px;filter:drop-shadow(0 12px 30px rgba(255,255,255,.06))}

/* Partners */
.partners{padding:50px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brands{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:16px}
.brand-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);padding:10px 14px;border-radius:14px}
.brand-card img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff}
.brand-card span{font-weight:700}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card img{width:100%;height:220px;object-fit:cover;background:#111}
.card.small{padding:18px}
.card-body{padding:14px}

/* Features */
.feature{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}

/* Timeline */
.timeline{list-style:none;margin:18px 0 0;padding:0;border-right:2px dashed #2b2b2b}
.timeline li{display:flex;gap:14px;align-items:flex-start;margin:16px 0;padding-right:8px}
.timeline .step{display:inline-grid;place-items:center;background:#fff;color:#000;width:28px;height:28px;border-radius:50%;font-weight:800}
.timeline h4{margin:0 0 6px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;margin-top:14px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}
.contact-link{display:block;color:#fff;text-decoration:none;margin-bottom:8px}
.form{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:700px){.form .row{grid-template-columns:1fr}}
.form input,.form textarea{width:100%;padding:12px;border-radius:12px;background:#0e0e0e;border:1px solid var(--border);color:#fff}
.form button{margin-top:8px}

/* Footer */
.footer{border-top:1px solid var(--border);padding:22px 0;color:var(--muted);text-align:center}

/* Tilt */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt:hover{transform:perspective(800px) rotateX(2deg) rotateY(-2deg)}


/* === WHY (mini-cards) — added patch only for #why === */
#why .why-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1100px){ #why .why-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ #why .why-grid{ grid-template-columns: 1fr; } }

#why .why-card{
  background: linear-gradient(180deg, #151515, #0f0f0f);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
#why .why-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.45); }

#why .why-card .visual{ height: 140px; background: #0c0c0c; overflow: hidden; }
#why .why-card .visual img{ width:100%; height:100%; display:block; object-fit:cover; opacity:.95; }

#why .why-card .inner{ padding: 14px 16px 16px; }
#why .why-card h3{ font-size: clamp(16px,2vw,20px); margin: 6px 0 6px; }
#why .why-card p{ color:#cfcfcf; line-height:1.8; margin:0; }

/* keep WHY section visually smaller than product cards */
#why .why-card .visual{ height: 130px; }
#why .why-card{ border-radius: 16px; }
/* === END WHY patch === */


/* === WHY centering patch === */
#why h2, #why .lead { text-align:center; }

#why .why-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  justify-items: stretch;
  align-items: stretch;
  margin-left:auto;
  margin-right:auto;
}

#why .why-grid .why-card:nth-child(4){
  grid-column: 2;
}

@media (max-width: 1100px){
  #why .why-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #why .why-grid .why-card:nth-child(4){ grid-column: auto; }
}
@media (max-width: 640px){
  #why .why-grid{ grid-template-columns: 1fr; }
}

/* keep WHY cards smaller than product cards */
#why .why-card .visual{ height: 130px; }
#why .why-card{ border-radius: 16px; }
/* === END WHY centering patch === */


/* === WHY centering override (flex on large screens) === */
@media (min-width: 1100px){
  #why .why-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: stretch;
  }
  #why .why-card{
    flex: 0 1 calc((100% - 36px)/3); /* 3 columns with 2 gaps */
    max-width: 380px;
  }
}
#why h2, #why .lead { text-align: center; }
/* =============================================== */


/* === MORE SECTION SLIDER (Autoplay + Progress + LTR enforced) === */
.more-section{position:relative; margin-top:28px}
.more-section .more-progress{position:sticky; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius:2px; overflow:hidden; z-index:5}
.more-section .more-progress .bar{height:100%; width:0% ; background:linear-gradient(90deg, #7c6cff, #55d1ff); will-change:width;}

.more-section .more-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.more-section .more-controls{display:flex; align-items:center; gap:8px}
.more-section .more-controls button{all:unset; cursor:pointer; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--card); border:1px solid var(--border); font-size:22px; line-height:1; user-select:none}
.more-section .more-controls button:focus-visible{outline:2px solid #7c6cff}
.more-section .more-controls .pagination{min-width:44px; text-align:center; opacity:.7; font-variant-numeric:tabular-nums}

.more-section .more-viewport{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); direction:ltr}
.more-section .more-track{display:flex; contain:layout style; will-change:transform; touch-action:pan-x; cursor:grab}
.more-section .more-track.dragging{cursor:grabbing}
.more-section .slide{min-width:100%; width:100%; flex:0 0 100%; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; background:var(--card)}
@media(max-width:900px){ .more-section .slide{grid-template-columns:1fr} }

/* Card inside slide */
.more-section .product-card{display:flex; flex-direction:column; background:transparent}
.more-section .product-card .media{position:relative; height:100%; min-height:280px; overflow:hidden; background:#0e0e0e}
.more-section .product-card .media img{width:100%; height:100%; object-fit:cover; transform:translateZ(0)}
.more-section .product-card .media::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 70% 30%, transparent 40%, rgba(124,108,255,.16) 65%, rgba(0,0,0,.4) 100%); pointer-events:none; transition:opacity .3s ease}
.more-section .slide.active .product-card .media::after{opacity:1}

.more-section .product-card .body{padding:18px}
.more-section .badge{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); margin-bottom:10px}
.more-section .badge svg{width:22px; height:22px}

/* Parallax subtle on active slide only */
@media (prefers-reduced-motion: no-preference){
  .more-section .slide.active .media img{transition:transform .12s linear; will-change:transform}
}


/* === Footer text sizing fix (make credit same size as rights) === */
footer small{ font-size:1em; line-height:1.6; }
footer .footer-credit{ font-size:0.95em; line-height:1.6; margin-top:8px; }