:root{
  --bg:#0a0a0c;
  --bg2:#0f0f13;
  --panel:#111118;
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.14);
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.70);
  --muted2:rgba(242,242,242,.55);
  --accent:#ff2a2a;
  --accent2:rgba(255,42,42,.18);
  --shadow:0 10px 30px rgba(0,0,0,.30); /* soft, minimal; not “3D” */
  --radius:18px;
  --radius2:14px;
  --max:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--bg), #070709 60%, var(--bg));
  color:var(--text);
  line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
::selection{ background:rgba(255,42,42,.35); }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px; top:10px;
  background:var(--panel);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

.muted{ color:var(--muted); }
.kicker{
  margin:0 0 10px;
  color:var(--muted);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,10,12,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 160px;
}
.logo__mark{
  width:14px;height:14px;
  border:1.5px solid rgba(255,255,255,.75);
  border-radius:4px;
  position:relative;
}
.logo__mark::after{
  content:"";
  position:absolute;
  inset:3px;
  background:var(--accent);
  border-radius:2px;
}
.logo__text{
  font-weight:700;
  font-size:14px;
}
.logo__dot{ color:var(--accent); }

.nav{ display:flex; align-items:center; }
.nav__toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:6px;
  cursor:pointer;
}
.nav__toggle-line{
  display:block;
  width:18px;height:2px;
  background:rgba(255,255,255,.80);
}
.nav__toggle.close-menu .nav__toggle-line:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle.close-menu .nav__toggle-line:nth-child(2){
  opacity:0;
}

.nav__toggle.close-menu .nav__toggle-line:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav__link{
  font-size:13px;
  color:var(--muted);
  padding:10px 8px;
  border-radius:10px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.nav__link:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.nav__cta{ margin-left:6px; }

/* Buttons (flat) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  font-weight:600;
  font-size:13px;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  background:var(--accent);
  border-color:rgba(255,42,42,.35);
  color:#ffffff;
}
.btn--primary:hover{
  background:#ff3b3b;
}
.btn--ghost{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
}

/* Sections */
.section{
  padding:86px 0;
}
.section--tight{
  padding: 15px 0 20px 0;
}
.section__head{
  margin-bottom:26px;
  max-width:720px;
}
.section__head--on-dark .section__subtitle{ color:rgba(255,255,255,.72); }
.section__title{
  margin:0;
  font-size:34px;
  line-height:35px;
  letter-spacing:-.02em;
}
.section__subtitle{
  margin:10px 0 0;
  color:var(--muted);
}

section {
	border-top: 1px solid rgba(255,255,255,.15);
}

/* Grid */
.grid{
  display:grid;
  gap:16px;
}
.grid--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

/* Hero */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-bottom: 120px;
}

.hero__markets{
    position:absolute;
    left:0;
    width:100%;
    z-index:3;
}

.hero__markets-inner{
    margin-inline:auto;
    display:flex;
    gap:22px;
    align-items:center;
}

.hero__market{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:13px;
    color:rgba(255,255,255,.75);
}

.hero__flag{
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:2px;
}

.parallax{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.25), rgba(10,10,12,.82) 50%, rgba(10,10,12,.92));
}
.hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:30px;
  padding:20px 0;
}
.hero__title{
  margin:0;
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero__subtitle{
  margin:16px 0 0;
  max-width:540px;
  color:rgba(242,242,242,.78);
  font-size:16px;
}
.hero__actions{
  margin-top:22px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.trust{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}
.trust__item{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius:999px;
}
.trust__dot{
  width:8px;height:8px;
  border-radius:999px;
  background:var(--accent);
}

.hero__collage{
  display:grid;
  gap:12px;
  align-content:start;
}
.collage-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,17,24,.55);
  border-radius:var(--radius);
  overflow:hidden;
}
.collage-card__media{
  aspect-ratio: 16/10;
  background:rgba(255,255,255,.03);
}
.collage-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}
.collage-card__meta{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pill{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  font-size:12px;
}
.hero__scrollhint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  opacity:.8;
}
.hero__scrollline{
  display:block;
  width:1px;height:36px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{ transform:translateY(0); opacity:.7; }
  50%{ transform:translateY(6px); opacity:1; }
}

/* Cards (flat) */
.card{
  border:1px solid var(--border);
  background:rgba(17,17,24,.40);
  border-radius:var(--radius);
  padding:18px;
  transition: border-color .2s ease, background .2s ease;
}
.card:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(17,17,24,.55);
}
.card__icon{
  width:40px;height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.86);
}
.card__icon svg{ width:22px;height:22px; }
.card__title{ margin:12px 0 8px; font-size:16px; }
.card__text{ margin:0; color:var(--muted); font-size:14px; }

/* Products */
.product{
  border:1px solid var(--border);
  background:rgba(17,17,24,.40);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: border-color .2s ease, background .2s ease;
}
.product:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(17,17,24,.55);
}
.product__media{
  aspect-ratio:16/10;
  background:rgba(255,255,255,.03);
}
.product__media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}
.product__body{
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}
.product__title{ margin:0; font-size:16px; }
.product__text{ margin:0; color:var(--muted); font-size:14px; }
.specs{
  margin:0;
  padding:0 0 0 16px;
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.product .btn{ margin-top:auto; width:fit-content; }

/* Banner */
.banner{
  position:relative;
  padding:86px 0;
  overflow:hidden;
}
.banner__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,12,.92), rgba(10,10,12,.60) 55%, rgba(10,10,12,.92));
}
.banner__inner{
  position:relative; z-index:2;
  max-width:720px;
}
.banner__title{
  margin:0;
  font-size:38px;
  letter-spacing:-.02em;
}
.banner__text{
  margin:12px 0 18px;
  color:rgba(255,255,255,.74);
}

/* Why */
.why{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(17,17,24,.40);
  transition: border-color .2s ease, background .2s ease;
}
.why:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(17,17,24,.55);
}
.why__icon{
  width:42px;height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.86);
  flex:0 0 auto;
}
.why__icon svg{ width:22px; height:22px; }
.why__title{ margin:0; font-size:16px; }
.why__text{ margin:6px 0 0; color:var(--muted); font-size:14px; }

/* Brands */
.brand-strip{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.brand{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px 12px;
  color:rgba(255,255,255,.78);
  transition: border-color .2s ease, background .2s ease;
}
.brand:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
}
.brand svg{ height:28px; }

/* Gallery */
.gallery{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.gitem{
  padding:0;
  border:1px solid var(--border);
  background:rgba(17,17,24,.40);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}
.gitem:hover{
  border-color:rgba(255,255,255,.20);
  background:rgba(17,17,24,.55);
  transform: translateY(-1px);
}
.gitem img{
  width:100%;
  height:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:200;
}
.lightbox.is-open{ display:block; }
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.lightbox__panel{
  position:relative;
  z-index:2;
  width:min(980px, calc(100% - 30px));
  margin:60px auto;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  background:rgba(12,12,16,.92);
  overflow:hidden;
}
.lightbox__img{
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  background:#0b0b0d;
}
.lightbox__caption{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.lightbox__close{
  position:absolute;
  top:10px; right:10px;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.lightbox__close:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
}

/* Contact (parallax) */
.contact{
  position:relative;
  padding:20px 0;
  overflow:hidden;
  border-top:1px solid var(--border);
}
.contact__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.88), rgba(10,10,12,.92));
}
.contact__inner{
  position:relative;
  z-index:2;
}
.contact-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:16px;
  margin-top:22px;
}
.contact-card{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,17,24,.44);
  border-radius:var(--radius);
  padding:18px;
}
.contact-card__title{ margin:0 0 10px; font-size:16px; }
.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.contact-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.note{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius2);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.note__bar{
  width:3px;
  height:100%;
  min-height:38px;
  background:var(--accent);
  border-radius:999px;
}

/* Form (flat) */
.form{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,17,24,.44);
  border-radius:var(--radius);
  padding:18px;
}
.form__row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.field{
  display:grid;
  gap:8px;
  margin-bottom:12px;
}
.field__label{
  font-size:12px;
  color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}
.field__input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  padding:12px 12px;
  color:rgba(255,255,255,.92);
  outline:none;
  transition: border-color .2s ease, background .2s ease;
}
.field__input:hover{
  border-color:rgba(255,255,255,.22);
}
.field__input:focus{
  border-color:rgba(255,42,42,.55);
  background:rgba(0,0,0,.22);
}
.field__input--area{ resize:vertical; min-height:120px; }

.form__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
}
.form__hint{ margin:0; }
.form__status{
  margin:12px 0 0;
  color:rgba(255,255,255,.78);
  min-height:1.2em;
}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background:rgba(5,5,7,.6);
  padding:22px 0 22px;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:16px;
  align-items:start;
}
.logo--small .logo__text{ font-size:13px; }
.footer__links, .footer__social{
  display:grid;
  gap:10px;
}
.footer__links a, .footer__social a{
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  width:fit-content;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.footer__links a:hover, .footer__social a:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0px);
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__title{ font-size:44px; }
  .grid--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav__toggle{ display:inline-flex; }
/*  .nav__menu{
    position:absolute;
    right:20px;
    top:64px;
    width:min(360px, calc(100vw - 40px));
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,10,12,.92);
    backdrop-filter: blur(10px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .nav__menu.is-open{ display:flex; }*/
  .nav__link{ padding:12px 12px; }
  .nav__cta{ margin-left:0; width:100%; }
  .grid--3{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; transform:none; opacity:1; }
  .btn{ transition:none; }
  .hero__scrollline{ animation:none; }
}

.brands-image{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.brands-image img{
  width:100%;
  height:auto;
  display:block;
}

.custom-select{
  position:relative;
  width:100%;
}

.custom-select-trigger{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;

  background:rgba(0,0,0,.18);
  cursor:pointer;
}

.custom-select-trigger svg{
  width:16px;
  height:16px;
  stroke:white;
  stroke-width:2;
  fill:none;
}

.custom-options{
  position:absolute;
  top:100%;
  left:0;
  right:0;

  margin-top:6px;

  background:rgba(10,10,12,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;

  overflow:hidden;

  opacity:0;
  pointer-events:none;
  transform:translateY(-5px);

  transition:.2s;
}

.custom-select.open .custom-options{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.custom-option{
  padding:12px 14px;
  cursor:pointer;
  transition:background .15s;
}

.custom-option:hover{
  background:rgba(255,255,255,.05);
}

.brands-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.brand-card{
    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;

    background:rgba(255,255,255,.02);
}

.brand-card img{
    width: 100%;
    object-fit:contain;
    border-radius:18px;
}

.brand-card:hover img{
    filter:none;
    opacity:1;
}

@media (max-width:720px){
    .brand-card {
        background: none;
		border: 0;
    }
    .brand-card img {
        width: 60%
    }
    .brands-grid{
        grid-template-columns:repeat(1,1fr);
    }

}

.lang-switcher{
  position:relative;
  display:flex;
  align-items:center;
}

.lang-switcher__links{
  display:flex;
  align-items:center;
  gap: 5px;
}

.lang-switcher__links a{
  font-size:13px;
  color:var(--muted);
  padding:10px 8px;
  border-radius:10px;
  transition: color .2s ease, background .2s ease;
}

.lang-switcher__links a.is-active {
	text-decoration: underline;
	color: var(--accent);
}

.lang-switcher__links a:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}

.lang-switcher__toggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:74px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}

.lang-switcher__current{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}

.lang-switcher__chevron{
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,.8);
  border-bottom:2px solid rgba(255,255,255,.8);
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.lang-switcher.is-open .lang-switcher__chevron{
  transform:rotate(-135deg);
}

@media (max-width:720px){
  .lang-switcher{
    width:100%;
  }

  .lang-switcher__toggle{
    display:flex;
    width:100%;
  }

  .lang-switcher__links{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,10,12,.96);
    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .lang-switcher.is-open .lang-switcher__links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .lang-switcher__links a{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
	text-align: center;
  }
	.lang-switcher__links a.is-active{
		color:var(--text);
		text-decoration:none;
		background-color: var(--accent);
	}
}

@media (max-width:370px){
	.hero__inner {
		padding: 10px 0;
	}
	.trust__item {
		gap: 5px;
		font-size: 12px;
		padding: 8px 10px
	}
	.hero__title {
		font-size: 40px;
	}
}