:root{
  --red:#d71920;
  --black:#090909;
  --dark:#101010;
  --gray:#777;
  --light:#e8e8e8;
  --line:#e7e7e7;
  --soft:#f6f6f6;
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#151515;
  background:#fff;
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
.w,.wrap{width:min(1120px,92%);margin:auto}

/* =========================
   HEADER
========================= */
header{
  height:76px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:9999;
  backdrop-filter:blur(10px);
}
.nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo{
  font-weight:900;
  font-size:17px;
  line-height:1.1;
  white-space:nowrap;
  letter-spacing:-.5px;
}
.logo span{color:var(--red)}
.logo small{
  display:block;
  margin-top:4px;
  font-size:7px;
  color:#888;
  letter-spacing:2px;
}
.menu{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:10px;
  font-weight:800;
}
.menu>a,.dropbtn{
  color:#111;
  font-size:10px;
  font-weight:800;
  transition:.2s;
}
.menu>a:hover,.dropbtn:hover,
.menu>a.active,.dropbtn.active{color:var(--red)}

.dropdown{position:relative}
.dropbtn{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.dropbtn span{
  font-size:11px;
  transition:.25s;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  width:190px;
  transform:translate(-50%,10px);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 15px 35px rgba(0,0,0,.1);
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
  z-index:99999;
}
.dropdown-menu:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--red);
}
.dropdown-menu a{
  display:block;
  padding:12px 16px;
  color:#111;
  font-size:9px;
  font-weight:800;
  border-bottom:1px solid #eee;
  transition:.2s;
}
.dropdown-menu a:last-child{border:0}
.dropdown-menu a:hover{
  color:var(--red);
  background:#f8f8f8;
  padding-left:21px;
}
.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.dropdown:hover .dropbtn span{transform:rotate(180deg)}

/* =========================
   BUTTON
========================= */
.btn,.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  font-weight:900;
  cursor:pointer;
  transition:.2s;
}
.btn{
  padding:12px 17px;
  font-size:9px;
  border:0;
}
.btn:hover{transform:translateY(-2px)}
.red,.cta{
  background:var(--red);
  color:#fff;
}
.red:hover,.cta:hover{background:#b9151b}
.outline{
  border:1px solid #444;
  color:#fff;
}
.outline:hover{border-color:#fff}
.cta{
  padding:11px 16px;
  font-size:10px;
}

/* =========================
   GENERAL
========================= */
section{padding:78px 0}
.k{
  margin-bottom:14px;
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:3px;
}
.head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:34px;
}
.head h2{
  margin:0;
  font-size:clamp(29px,4vw,43px);
  line-height:1.05;
  letter-spacing:-2px;
}
.head p{
  max-width:500px;
  margin:0;
  color:var(--gray);
  font-size:12px;
  line-height:1.7;
}

/* =========================
   HERO
========================= */
.hero,.about-hero,.contact-hero{
  background:var(--black);
  color:#fff;
  overflow:hidden;
}
.hero .grid{
  min-height:580px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:55px;
}
.hero .k{color:#999}
.hero h1,.about-hero h1,.contact-hero h1{
  margin:0;
  font-size:clamp(42px,6vw,70px);
  line-height:.94;
  letter-spacing:-3px;
}
.hero h1 span,
.about-hero h1 span,
.contact-hero h1 span{color:var(--red)}

.lead,.about-hero-content p{
  max-width:590px;
  margin:20px 0 27px;
  color:#aaa;
  font-size:13px;
  line-height:1.7;
}
.buttons,.hero-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

/* HERO ART */
.art,.about-visual{
  position:relative;
  overflow:hidden;
  border:1px solid #292929;
  background:#111;
}
.art{height:400px}
.art:before,.visual-grid{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.8%,#292929 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,#292929 50%,transparent 50.2%);
}
.machine{
  position:absolute;
  width:205px;
  height:245px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:7px solid #3b3b3b;
  border-radius:5px;
}
.machine:before{
  content:"";
  position:absolute;
  width:125px;
  height:8px;
  left:33px;
  top:42px;
  background:var(--red);
  box-shadow:0 60px #444,0 120px #333;
}
.machine:after{
  content:"";
  position:absolute;
  width:8px;
  height:205px;
  left:91px;
  top:16px;
  background:#444;
}

/* =========================
   CARDS
========================= */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.card{
  min-height:210px;
  padding:27px;
  border:1px solid var(--light);
  transition:.25s;
}
.card:hover,.solution:hover,.ph-card:hover,.value:hover,
.meaning-card:hover,.step:hover,.eco:hover{
  transform:translateY(-4px);
}
.card:hover,.solution:hover,.ph-card:hover,.value:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}
.icon{
  width:43px;
  height:43px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#fff0f1;
  color:var(--red);
  font-size:19px;
}
.card h3{margin:0 0 7px;font-size:14px}
.card p{
  margin:0;
  color:var(--gray);
  font-size:11px;
  line-height:1.7;
}

/* =========================
   SOLUTIONS
========================= */
.solutions,.soft-section,.start,.vm{
  background:var(--soft);
}
.solutions .cards{grid-template-columns:repeat(3,1fr)}
.solution{
  min-height:220px;
  padding:28px;
  background:#fff;
  border-top:3px solid var(--red);
  transition:.25s;
}
.num{
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}
.solution h3{
  margin:14px 0 7px;
  font-size:21px;
}
.solution p{
  margin:0 0 15px;
  color:var(--gray);
  font-size:11px;
  line-height:1.7;
}
.solution a{
  color:var(--red);
  font-size:9px;
  font-weight:900;
}

/* =========================
   BRANDS
========================= */
.brands,.about-dark,.ecosystem,.dark,.map{
  background:#101010;
  color:#fff;
}
.brands .head p,.about-dark .head p,.dark .head p{color:#999}
.brandlist{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid #292929;
}
.brandlist div{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid #292929;
  color:#777;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}
.brandlist div:hover{color:#fff}
.brandlist div:last-child{border-right:0}
.brand-button{margin-top:20px}

/* =========================
   WHY / SHOWROOM
========================= */
.why,.show{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.why>div,.show>div{
  min-height:210px;
  padding:30px;
  background:var(--soft);
}
.why .dark{background:#111;color:#fff}
.why h3,.show h3{
  margin:0 0 10px;
  font-size:21px;
}
.why p,.show p{
  margin:0;
  color:var(--gray);
  font-size:11px;
  line-height:1.7;
}
.why .dark p,.show .black p{color:#999}
.checks{
  display:grid;
  gap:7px;
  margin-top:18px;
}
.checks span{
  padding:9px;
  background:#fff;
  border:1px solid #ddd;
  font-size:10px;
}
.dark .checks span{
  background:#151515;
  border-color:#292929;
  color:#aaa;
}
.show>div{min-height:270px}
.show .black{background:#111;color:#fff}
.show .light{background:var(--soft)}
.show h3{font-size:25px}
.clients{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:18px;
}
.client{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ddd;
  color:#777;
  font-size:9px;
  font-weight:900;
}
.client:hover{
  color:var(--red);
  border-color:#bbb;
}
.client-link{
  display:inline-block;
  margin-top:15px;
  color:var(--red);
  font-size:9px;
  font-weight:900;
}

/* =========================
   ABOUT
========================= */
.about-hero-grid{
  min-height:580px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:65px;
}
.about-visual{
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual-grid{
  opacity:.45;
}
.visual-ring{
  position:absolute;
  width:265px;
  height:265px;
  border:1px solid #333;
  border-radius:50%;
}
.visual-ring:before{
  content:"";
  position:absolute;
  inset:25px;
  border:1px solid #292929;
  border-radius:50%;
}
.visual-ring:after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  top:50%;
  left:-4px;
  transform:translateY(-50%);
  background:var(--red);
  box-shadow:265px 0 0 var(--red),128px -132px 0 #444,128px 132px 0 #444;
}
.visual-word{
  position:relative;
  z-index:2;
  color:#444;
  font-size:60px;
  font-weight:900;
  letter-spacing:-5px;
}
.visual-word span{color:var(--red)}
.visual-line{
  position:absolute;
  width:100%;
  height:1px;
  background:#292929;
}
.about-visual small{
  position:absolute;
  bottom:24px;
  color:#777;
  font-size:8px;
  letter-spacing:3px;
}
.visual-corner{
  position:absolute;
  width:25px;
  height:25px;
}
.visual-corner.top-left{
  top:18px;
  left:18px;
  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}
.visual-corner.top-right{
  top:18px;
  right:18px;
  border-top:1px solid #555;
  border-right:1px solid #555;
}
.visual-corner.bottom-left{
  bottom:18px;
  left:18px;
  border-bottom:1px solid #555;
  border-left:1px solid #555;
}
.visual-corner.bottom-right{
  bottom:18px;
  right:18px;
  border-bottom:2px solid var(--red);
  border-right:2px solid var(--red);
}

/* ABOUT STORY */
.about-story,.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.story-content p,.story p{
  margin:0 0 17px;
  color:#555;
  font-size:14px;
  line-height:1.8;
}
.quote{
  position:relative;
  padding:35px 35px 35px 42px;
  background:var(--soft);
  border-left:4px solid var(--red);
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}
.quote span{
  position:absolute;
  top:10px;
  left:16px;
  color:var(--red);
  font-size:42px;
  line-height:1;
}

/* UNITY MEANING */
.meaning{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.meaning-card{
  min-height:190px;
  padding:25px 20px;
  border:1px solid #2d2d2d;
  transition:.25s;
}
.meaning-card:hover{
  border-color:var(--red);
  background:#151515;
}
.meaning-card strong{
  display:block;
  color:var(--red);
  font-size:36px;
  line-height:1;
}
.meaning-card h3{
  margin:13px 0 8px;
  font-size:12px;
  letter-spacing:1px;
}
.meaning-card p{
  margin:0;
  color:#999;
  font-size:10px;
  line-height:1.7;
}

/* PHILOSOPHY */
.philosophy,.vm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.ph-card{
  position:relative;
  padding:34px;
  background:var(--soft);
  border-top:3px solid var(--red);
  transition:.25s;
}
.ph-number{
  margin-bottom:22px;
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}
.ph-card h3{
  margin:0 0 10px;
  font-size:20px;
}
.ph-card p{
  margin:0;
  color:#666;
  font-size:11px;
  line-height:1.75;
}

/* VISION MISSION */
.vm-card{
  padding:35px;
  background:#fff;
  border-top:4px solid var(--red);
}
.vm-label{
  margin-bottom:15px;
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}
.vm-card h3{
  margin:0 0 12px;
  font-size:21px;
  line-height:1.25;
}
.vm-card p{
  margin:0;
  color:#666;
  font-size:11px;
  line-height:1.8;
}

/* VALUES */
.values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.value{
  min-height:190px;
  padding:28px;
  border:1px solid var(--line);
  transition:.25s;
}
.value:hover{border-color:#ccc}
.value .icon{margin-bottom:18px}
.value h3{
  margin:0 0 7px;
  font-size:14px;
}
.value p{
  margin:0;
  color:var(--gray);
  font-size:11px;
  line-height:1.7;
}

/* APPROACH */
.approach{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.step{
  min-height:190px;
  padding:25px 18px;
  border:1px solid #2e2e2e;
  transition:.25s;
}
.step:hover{border-color:var(--red)}
.step b{
  color:var(--red);
  font-size:10px;
  letter-spacing:2px;
}
.step h3{
  margin:14px 0 7px;
  font-size:14px;
}
.step p{
  margin:0;
  color:#999;
  font-size:10px;
  line-height:1.7;
}

/* ECOSYSTEM */
.eco-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.eco{
  min-height:210px;
  padding:28px;
  border:1px solid #2c2c2c;
  transition:.25s;
}
.eco:hover{border-color:#555}
.eco .icon{
  background:#1d1d1d;
}
.eco h3{
  margin:0 0 8px;
  font-size:15px;
}
.eco p{
  margin:0;
  color:#999;
  font-size:10px;
  line-height:1.7;
}

/* =========================
   PACKAGES
========================= */
.packages{
  background:#fff;
}
.package-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.package{
  position:relative;
  padding:32px 28px;
  background:#fff;
  border:1px solid var(--line);
  transition:.25s ease;
}
.package:hover{
  transform:translateY(-5px);
  border-color:#ccc;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.package.featured{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-8px);
}
.package.featured:hover{
  transform:translateY(-13px);
}
.package-badge{
  position:absolute;
  top:0;
  right:0;
  padding:7px 12px;
  background:var(--red);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}
.package-label{
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
}
.package h3{
  margin:12px 0 5px;
  font-size:23px;
}
.package-desc{
  margin:0 0 22px;
  color:#888;
  font-size:10px;
  line-height:1.7;
}
.package.featured .package-desc{color:#999}
.package-price{
  margin-bottom:22px;
  font-size:32px;
  font-weight:900;
  line-height:1;
}
.package-price small{
  font-size:10px;
  font-weight:400;
  color:#888;
}
.package-list{
  display:grid;
  gap:9px;
  margin:0 0 25px;
  padding:0;
  list-style:none;
}
.package-list li{
  padding-bottom:9px;
  border-bottom:1px solid #eee;
  color:#666;
  font-size:10px;
}
.package.featured .package-list li{
  border-color:#292929;
  color:#bbb;
}
.package-list li:before{
  content:"✓";
  margin-right:8px;
  color:var(--red);
  font-weight:900;
}
.package .btn{
  width:100%;
}
.package.featured .btn{
  background:var(--red);
  color:#fff;
}

/* PACKAGE DARK */
.packages-dark{
  background:#111;
  color:#fff;
}
.packages-dark .head p{color:#999}
.package-dark-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.package-dark-card{
  padding:25px 20px;
  border:1px solid #2d2d2d;
  transition:.25s;
}
.package-dark-card:hover{
  border-color:var(--red);
  transform:translateY(-4px);
}
.package-dark-card b{
  color:var(--red);
  font-size:9px;
  letter-spacing:2px;
}
.package-dark-card h3{
  margin:13px 0 8px;
  font-size:15px;
}
.package-dark-card p{
  margin:0;
  color:#999;
  font-size:10px;
  line-height:1.7;
}

/* =========================
   CTA
========================= */
.cta-section,.contact-cta{
  background:var(--red);
  color:#fff;
}
.cta-flex,.cta .flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.cta-flex h2,.cta h2{
  margin:0;
  font-size:clamp(29px,4vw,44px);
  line-height:1.05;
  letter-spacing:-2px;
}
.cta-flex p,.cta p{
  margin:9px 0 0;
  color:#ffd7d9;
  font-size:11px;
  line-height:1.6;
}
.black-btn,.blackbtn{
  background:#111;
  color:#fff;
}
.black-btn:hover,.blackbtn:hover{background:#000}
.white{color:#fff!important}

/* =========================
   CONTACT
========================= */
.contact-hero{padding:85px 0}
.contact-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:60px;
  align-items:center;
}
.contact-lead{
  max-width:560px;
  margin:20px 0 28px;
  color:#aaa;
  font-size:13px;
}
.hero-card{
  padding:38px;
  border:1px solid #2a2a2a;
  background:#111;
}
.hero-icon{
  width:58px;
  height:58px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #333;
  border-radius:12px;
  color:var(--red);
  font-size:25px;
}
.hero-card h3{
  margin:0 0 8px;
  font-size:21px;
}
.hero-card p{
  margin:0;
  color:#888;
  font-size:11px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.info{
  display:flex;
  gap:18px;
  align-items:flex-start;
  min-height:130px;
  padding:30px;
  border:1px solid var(--line);
}
.info h3{
  margin:0 0 5px;
  font-size:13px;
}
.info p,.info a{
  margin:0;
  color:var(--gray);
  font-size:11px;
}
.info a:hover{color:var(--red)}

.options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.option{
  min-height:190px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
}
.option h3{
  margin:14px 0 7px;
  font-size:19px;
}
.option p{
  margin:0 0 12px;
  color:var(--gray);
  font-size:11px;
}
.option a{
  color:var(--red);
  font-size:9px;
  font-weight:900;
}

/* FORM */
.form-section{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
  align-items:start;
}
.form-note{
  padding:32px;
  background:#111;
  color:#fff;
}
.form-note h3{
  margin:0 0 10px;
  font-size:24px;
}
.form-note p{color:#999;font-size:11px}
.form-note ul{
  padding:0;
  margin:24px 0 0;
  list-style:none;
}
.form-note li{
  padding:10px 0;
  border-bottom:1px solid #292929;
  color:#bbb;
  font-size:10px;
}
.form{
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
}
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field{margin-bottom:14px}
.field label{
  display:block;
  margin-bottom:7px;
  font-size:9px;
  font-weight:900;
}
.field input,.field select,.field textarea{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  outline:none;
  background:#fff;
  font:inherit;
  font-size:11px;
}
.field textarea{
  height:115px;
  resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red);
}
.form button{
  border:0;
  cursor:pointer;
}

/* MAP */
.map-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.map-box{
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px;
  border:1px solid #292929;
  text-align:center;
}
.map-box h3{
  margin:0 0 7px;
  font-size:23px;
}
.map-box p{
  color:#999;
  font-size:11px;
}
.map-box.light{
  background:var(--soft);
  color:#111;
  border:0;
}

/* =========================
   FOOTER
========================= */
footer{
  padding:40px 0 18px;
  background:#090909;
  color:#fff;
}
footer .foot{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:30px;
}
footer p,footer a{
  color:#888;
  font-size:10px;
  line-height:1.7;
}
footer a:hover{color:#fff}
footer h4{
  margin:0 0 10px;
  color:#fff;
  font-size:8px;
  letter-spacing:2px;
}
footer .logo{color:#fff}
.copy{
  margin-top:28px;
  padding-top:14px;
  border-top:1px solid #252525;
  color:#666;
  font-size:8px;
}

/* =========================
   RESPONSIVE 1000px
========================= */
@media(max-width:1000px){
  .menu{gap:12px}
  .nav{gap:12px}
  .logo{font-size:15px}

  .about-hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
    padding:80px 0;
  }
  .about-visual{
    max-width:650px;
    width:100%;
    margin:auto;
  }
  .meaning{grid-template-columns:repeat(3,1fr)}
  .approach{grid-template-columns:repeat(3,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .package-dark-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================
   RESPONSIVE 850px
========================= */
@media(max-width:850px){
  .menu{display:none}

  .hero .grid,
  .contact-hero-grid,
  .why,
  .show,
  .form-section,
  .map-grid,
  .about-story,
  .story,
  .philosophy,
  .vm-grid{
    grid-template-columns:1fr;
  }

  .art,.hero-card,.about-mark{display:none}

  .cards,
  .contact-grid,
  .options,
  .package-grid{
    grid-template-columns:1fr 1fr;
  }

  .brandlist{grid-template-columns:repeat(3,1fr)}
  .clients{grid-template-columns:1fr 1fr}
  .meaning{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .approach{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:1fr}
}

/* =========================
   RESPONSIVE 550px
========================= */
@media(max-width:550px){
  header{height:68px}
  .logo{font-size:14px}
  .logo small{
    font-size:6px;
    letter-spacing:1.5px;
  }
  header .cta{
    padding:10px 12px;
    font-size:8px;
  }

  section{padding:60px 0}

  .head{display:block}
  .head p{margin-top:12px}

  .cards,
  .brandlist,
  .clients,
  .contact-grid,
  .options,
  .row,
  .meaning,
  .values,
  .approach,
  .eco-grid,
  .package-grid,
  .package-dark-grid,
  footer .foot{
    grid-template-columns:1fr;
  }

  .brandlist div{
    border-right:0;
    border-bottom:1px solid #292929;
  }
  .brandlist div:last-child{border-bottom:0}

  .why>div,.show>div{padding:25px}

  .about-hero-grid{
    padding:65px 0;
  }
  .about-hero h1,.contact-hero h1{
    font-size:42px;
    letter-spacing:-2px;
  }
  .about-hero-content p{font-size:12px}

  .about-visual{height:300px}
  .visual-ring{
    width:205px;
    height:205px;
  }
  .visual-word{font-size:45px}

  .quote{
    padding:30px;
    font-size:17px;
  }

  .ph-card,
  .vm-card,
  .value,
  .eco,
  .package,
  .package-dark-card{
    padding:25px;
  }

  .package.featured{
    transform:none;
  }
  .package.featured:hover{
    transform:translateY(-5px);
  }

  .cta-flex,.cta .flex{
    display:block;
  }
  .cta-flex .btn,
  .cta .btn,
  .contact-cta .btn{
    margin-top:20px;
  }

  .contact-hero{padding:65px 0}
}

/* =====================================================
   PACKAGES PAGE
   UNITY FITNESS EQUIPMENT
===================================================== */

/* ---------- PACKAGE HERO ---------- */

.hero {
    background: var(--black);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "PACKAGES";
    position: absolute;
    right: -85px;
    bottom: -48px;
    font-size: 145px;
    font-weight: 900;
    color: #151515;
    letter-spacing: -9px;
    pointer-events: none;
}

.hero-grid {
    min-height: 540px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 55px;
    position: relative;
    z-index: 1;
}

.hero .kicker {
    color: #aaa;
}

.hero h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.94;
    letter-spacing: -3px;
}

.hero h1 span {
    color: var(--red);
}

.hero p {
    max-width: 610px;
    margin: 20px 0 28px;
    color: #aaa;
    font-size: 14px;
    line-height: 1.7;
}


/* ---------- PACKAGE NAV ---------- */

.package-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid #303030;
    background: #111;
}

.package-nav a {
    padding: 28px 15px;
    border: 1px solid #303030;
    text-align: center;
    color: #aaa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    transition: 0.2s ease;
}

.package-nav a:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}


/* ---------- PACKAGE OVERVIEW ---------- */

.package-section {
    border-top: 1px solid #eee;
    background: var(--soft);
}

.package-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
    margin-bottom: 28px;
}

.package-title h2 {
    margin: 0;
    font-size: 38px;
    letter-spacing: -2px;
}

.package-title h2 span {
    color: var(--red);
}

.package-title p {
    max-width: 480px;
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
}


/* ---------- PACKAGE CARDS ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.card {
    position: relative;
    min-height: 385px;
    display: flex;
    flex-direction: column;
    padding: 29px;
    background: #fff;
    border: 1px solid var(--line);
    transition: 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.card.featured {
    border-top: 4px solid var(--red);
}

.tag {
    margin-bottom: 12px;
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.card h3 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -1px;
}

.card .desc {
    margin: 10px 0 20px;
    color: #777;
    font-size: 11px;
    line-height: 1.7;
}

.card ul {
    display: grid;
    gap: 9px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.card li {
    position: relative;
    padding-left: 19px;
    color: #555;
    font-size: 11px;
}

.card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 900;
}

.card .btn {
    width: max-content;
    margin-top: auto;
}


/* ---------- DARK PACKAGE SECTION ---------- */

.dark {
    background: #101010;
    color: #fff;
}

.dark .head p {
    color: #999;
}

.dark .kicker {
    color: var(--red);
}


/* ---------- PACKAGE SELECTOR ---------- */

.selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.selector-box {
    padding: 34px;
    border: 1px solid #303030;
    background: #151515;
}

.selector-box h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.selector-box p {
    margin: 0;
    color: #999;
    font-size: 12px;
}

.choice {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.choice div {
    padding: 11px;
    border: 1px solid #303030;
    color: #aaa;
    font-size: 11px;
}

.choice b {
    color: #fff;
}


/* ---------- COMPARISON ---------- */

.compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.compare-card {
    min-height: 190px;
    padding: 27px;
    border: 1px solid var(--line);
    background: #fff;
    transition: 0.25s ease;
}

.compare-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.compare-card .num {
    color: var(--red);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.compare-card h3 {
    margin: 12px 0 6px;
    font-size: 16px;
}

.compare-card p {
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.7;
}


/* ---------- PROCESS ---------- */

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

.step {
    min-height: 185px;
    padding: 25px;
    border: 1px solid #ddd;
    background: #fff;
    transition: 0.25s ease;
}

.step:hover {
    transform: translateY(-4px);
    border-color: #ccc;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.step b {
    color: var(--red);
    font-size: 11px;
}

.step h3 {
    margin: 12px 0 7px;
    font-size: 14px;
}

.step p {
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.7;
}


/* ---------- NOTE ---------- */

.note {
    margin-top: 20px;
    padding: 15px;
    border-left: 3px solid var(--red);
    background: #fafafa;
    color: #777;
    font-size: 10px;
    line-height: 1.7;
}


/* ---------- CTA ---------- */

.cta-section {
    background: var(--red);
    color: #fff;
}

.cta-section .kicker {
    color: #fff;
}

.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-flex h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.cta-flex p {
    margin: 9px 0 0;
    color: #ffd5d7;
    font-size: 12px;
    line-height: 1.6;
}

.cta-section .btn.dark {
    background: #111;
    color: #fff;
}

.cta-section .btn.dark:hover {
    background: #000;
}


/* ---------- FOOTER PACKAGES ---------- */

.footer-logo {
    color: #fff;
}

.footer-desc {
    margin-top: 14px;
}


/* =====================================================
   PACKAGES RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .package-nav {
        max-width: 650px;
        width: 100%;
    }

    .cards {
        grid-template-columns: 1fr 1fr;
    }

    .compare {
        grid-template-columns: 1fr 1fr;
    }

    .selector {
        grid-template-columns: 1fr;
    }

    .process {
        grid-template-columns: 1fr 1fr;
    }

    .package-title {
        align-items: start;
    }

    .cta-flex {
        align-items: flex-start;
    }
}


@media (max-width: 560px) {

    .hero-grid {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .hero h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .hero p {
        font-size: 12px;
    }

    .hero::after {
        font-size: 80px;
        right: -45px;
        bottom: -20px;
    }

    .package-nav {
        grid-template-columns: 1fr;
    }

    .package-nav a {
        padding: 18px;
    }

    .cards,
    .compare,
    .process {
        grid-template-columns: 1fr;
    }

    .package-title {
        display: block;
    }

    .package-title h2 {
        font-size: 32px;
    }

    .package-title p {
        margin-top: 13px;
    }

    .card {
        min-height: auto;
        padding: 25px;
    }

    .selector-box {
        padding: 25px;
    }

    .cta-flex {
        display: block;
    }

    .cta-flex .btn {
        margin-top: 22px;
    }

}

/* =========================================================
   PRODUCTS PAGE
   ========================================================= */

/* PRODUCT HERO */
.products-page .hero{
    background:#0a0a0a;
    color:#fff;
    overflow:hidden;
    position:relative;
}

.hero:after{
    content:"PRODUCTS";
    position:absolute;
    right:-100px;
    bottom:-50px;
    font-size:150px;
    font-weight:900;
    color:#151515;
    letter-spacing:-8px;
    pointer-events:none;
}

.hero-grid{
    min-height:430px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:50px;
    position:relative;
    z-index:1;
}

.hero h1{
    font-size:clamp(42px,6vw,70px);
    line-height:.94;
    letter-spacing:-3px;
}

.hero h1 span{
    color:var(--red);
}

.hero p{
    color:#aaa;
    max-width:590px;
    margin:18px 0 25px;
    font-size:14px;
}


/* HERO VISUAL */
.hero-visual{
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.circle{
    width:270px;
    height:270px;
    border:1px solid #333;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.circle:before{
    content:"UNITY";
    font-size:45px;
    font-weight:900;
    color:#272727;
    transform:rotate(-18deg);
}

.center-label{
    position:absolute;
    background:var(--red);
    padding:14px 20px;
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
}


/* BUTTON */
.btn{
    display:inline-flex;
    padding:12px 18px;
    border-radius:4px;
    font-size:11px;
    font-weight:800;
}

.btn.red{
    background:var(--red);
    color:#fff;
}

.btn.out{
    border:1px solid #444;
    color:#fff;
}


/* SECTION HEAD */
.products-page section{
    padding:80px 0;
}

.head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px;
    margin-bottom:35px;
}

.head h2{
    font-size:clamp(29px,4vw,45px);
    line-height:1.05;
    letter-spacing:-1.8px;
}

.head p{
    max-width:510px;
    color:var(--gray);
    font-size:13px;
}


/* FILTER */
.filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.filter{
    border:1px solid #ddd;
    background:#fff;
    padding:10px 15px;
    border-radius:30px;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.filter:hover,
.filter.active{
    background:var(--red);
    color:#fff;
    border-color:var(--red);
}


/* PRODUCT GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    overflow:hidden;
    transition:.25s;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 35px rgba(0,0,0,.08);
}


/* PRODUCT IMAGE PLACEHOLDER */
.pic{
    height:185px;
    background:linear-gradient(
        135deg,
        #202020,
        #0d0d0d
    );
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    color:#333;
    font-size:45px;
    font-weight:900;
}

.pic:after{
    content:"UNITY";
    position:absolute;
    bottom:12px;
    right:12px;
    font-size:9px;
    color:#555;
    letter-spacing:2px;
}

.pic b{
    color:var(--red);
}


/* PRODUCT INFO */
.info{
    padding:17px;
}

.info small{
    color:var(--red);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
}

.info h3{
    font-size:15px;
    margin:6px 0;
}

.info p{
    font-size:11px;
    color:#777;
}

.link{
    display:inline-block;
    color:var(--red);
    font-size:10px;
    font-weight:900;
    margin-top:11px;
}


/* DARK SECTION */
.dark{
    background:#101010;
    color:#fff;
}

.dark .head p{
    color:#999;
}


/* BRANDS */
.brand-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.brand{
    height:105px;
    border:1px solid #303030;
    background:#171717;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    letter-spacing:1px;
    font-size:14px;
    color:#ddd;
    transition:.2s;
}

.brand:hover{
    border-color:var(--red);
    color:var(--red);
    transform:translateY(-3px);
}

.brand small{
    display:block;
    color:#777;
    font-size:7px;
    letter-spacing:2px;
    text-align:center;
    margin-top:4px;
}

.notice{
    margin-top:20px;
    font-size:10px;
    color:#777;
}


/* CATEGORY */
.category{
    background:var(--soft);
}

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

.category-card{
    background:#fff;
    padding:28px;
    border-top:3px solid var(--red);
    min-height:190px;
}

.ico{
    width:45px;
    height:45px;
    border-radius:12px;
    background:#fff0f1;
    color:var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    margin-bottom:18px;
}

.category-card h3{
    font-size:16px;
    margin-bottom:7px;
}

.category-card p{
    font-size:11px;
    color:#777;
}


/* SOLUTION */
.solution{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.sol{
    background:#111;
    color:#fff;
    padding:30px;
    min-height:190px;
}

.sol h3{
    font-size:17px;
    margin-bottom:8px;
}

.sol p{
    color:#aaa;
    font-size:11px;
}

.sol .ico{
    background:#222;
}


/* CTA */
.brand-cta{
    background:var(--red);
    color:#fff;
}

.brand-cta .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.brand-cta h2{
    font-size:clamp(28px,4vw,44px);
    line-height:1.05;
    letter-spacing:-1.5px;
}

.brand-cta p{
    font-size:12px;
    color:#ffd6d8;
    margin-top:8px;
}


/* =========================================================
   PRODUCTS RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-visual{
        display:none;
    }

    .grid{
        grid-template-columns:1fr 1fr;
    }

    .brand-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .category-grid{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:560px){

    .products-page section{
        padding:60px 0;
    }

    .grid,
    .category-grid,
    .solution{
        grid-template-columns:1fr;
    }

    .brand-grid{
        grid-template-columns:1fr 1fr;
    }

    .head{
        display:block;
    }

    .head p{
        margin-top:13px;
    }

    .brand-cta .wrap{
        display:block;
    }

    .brand-cta .btn{
        margin-top:22px;
    }

}

:root{
  --red:#e21d2a;
  --black:#0a0a0a;
  --dark:#111;
  --gray:#6b6b6b;
  --line:#e8e8e8;
  --soft:#f5f5f5;
  --white:#fff;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:#111;
  background:#fff;
  line-height:1.5;
}

a{
  text-decoration:none;
  color:inherit;
}

.wrap{
  width:min(1180px,92%);
  margin:auto;
}

/* =========================
   HEADER
========================= */

header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #eee;
  backdrop-filter:blur(12px);
}

.nav{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo{
  font-weight:900;
  letter-spacing:-.7px;
  font-size:18px;
}

.logo span{
  color:var(--red);
}

.logo small{
  display:block;
  color:#777;
  font-size:8px;
  letter-spacing:2px;
  margin-top:3px;
}

.menu{
  display:flex;
  gap:23px;
  font-size:11px;
  font-weight:800;
}

.menu a:hover{
  color:var(--red);
}

.cta{
  background:var(--red);
  color:#fff;
  padding:11px 16px;
  border-radius:4px;
  font-size:11px;
  font-weight:800;
}

/* =========================
   HERO
========================= */

.hero{
  background:#0a0a0a;
  color:#fff;
  overflow:hidden;
  position:relative;
}

.hero:after{
  content:"PRODUCTS";
  position:absolute;
  right:-100px;
  bottom:-50px;
  font-size:150px;
  font-weight:900;
  color:#151515;
  letter-spacing:-8px;
}

.hero-grid{
  min-height:430px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:50px;
  position:relative;
  z-index:1;
}

.kicker{
  font-size:10px;
  color:var(--red);
  font-weight:900;
  letter-spacing:3px;
  margin-bottom:14px;
}

.hero .kicker{
  color:#aaa;
}

.hero h1{
  font-size:clamp(42px,6vw,70px);
  line-height:.94;
  letter-spacing:-3px;
}

.hero h1 span{
  color:var(--red);
}

.hero p{
  color:#aaa;
  max-width:590px;
  margin:18px 0 25px;
  font-size:14px;
}

.btn{
  display:inline-flex;
  padding:12px 18px;
  border-radius:4px;
  font-size:11px;
  font-weight:800;
}

.btn.red{
  background:var(--red);
  color:#fff;
}

.btn.out{
  border:1px solid #444;
  color:#fff;
}

.hero-visual{
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.circle{
  width:270px;
  height:270px;
  border:1px solid #333;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.circle:before{
  content:"UNITY";
  font-size:45px;
  font-weight:900;
  color:#272727;
  transform:rotate(-18deg);
}

.center-label{
  position:absolute;
  background:var(--red);
  padding:14px 20px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

/* =========================
   SECTION
========================= */

section{
  padding:80px 0;
}

.head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:35px;
}

.head h2{
  font-size:clamp(29px,4vw,45px);
  line-height:1.05;
  letter-spacing:-1.8px;
}

.head p{
  max-width:510px;
  color:var(--gray);
  font-size:13px;
}

/* =========================
   FILTER
========================= */

.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.filter{
  border:1px solid #ddd;
  background:#fff;
  padding:10px 15px;
  border-radius:30px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.filter:hover,
.filter.active{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

/* =========================
   PRODUCT GRID
========================= */

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

.card{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  overflow:hidden;
  transition:.25s;
}

.card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 35px rgba(0,0,0,.08);
}

.pic{
  height:185px;
  background:linear-gradient(135deg,#202020,#0d0d0d);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:#333;
  font-size:45px;
  font-weight:900;
}

.pic:after{
  content:"UNITY";
  position:absolute;
  bottom:12px;
  right:12px;
  font-size:9px;
  color:#555;
  letter-spacing:2px;
}

.pic b{
  color:var(--red);
}

.info{
  padding:17px;
}

.info small{
  color:var(--red);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}

.info h3{
  font-size:15px;
  margin:6px 0;
}

.info p{
  font-size:11px;
  color:#777;
}

.link{
  display:inline-block;
  color:var(--red);
  font-size:10px;
  font-weight:900;
  margin-top:11px;
}

/* =========================
   DARK SECTION
========================= */

.dark{
  background:#101010;
  color:#fff;
}

.dark .head p{
  color:#999;
}

/* =========================
   BRAND
========================= */

.brand-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.brand{
  height:105px;
  border:1px solid #303030;
  background:#171717;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:1px;
  font-size:14px;
  color:#ddd;
  transition:.2s;
}

.brand:hover{
  border-color:var(--red);
  color:var(--red);
  transform:translateY(-3px);
}

.brand small{
  display:block;
  color:#777;
  font-size:7px;
  letter-spacing:2px;
  text-align:center;
  margin-top:4px;
}

.notice{
  margin-top:20px;
  font-size:10px;
  color:#777;
}

.dark .notice{
  color:#777;
}

/* =========================
   CATEGORY
========================= */

.category{
  background:var(--soft);
}

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

.category-card{
  background:#fff;
  padding:28px;
  border-top:3px solid var(--red);
  min-height:190px;
}

.ico{
  width:45px;
  height:45px;
  border-radius:12px;
  background:#fff0f1;
  color:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  margin-bottom:18px;
}

.category-card h3{
  font-size:16px;
  margin-bottom:7px;
}

.category-card p{
  font-size:11px;
  color:#777;
}

/* =========================
   SOLUTION
========================= */

.solution{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.sol{
  background:#111;
  color:#fff;
  padding:30px;
  min-height:190px;
}

.sol h3{
  font-size:17px;
  margin-bottom:8px;
}

.sol p{
  color:#aaa;
  font-size:11px;
}

.sol .ico{
  background:#222;
}

/* =========================
   CTA
========================= */

.brand-cta{
  background:var(--red);
  color:#fff;
}

.brand-cta .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.brand-cta h2{
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  letter-spacing:-1.5px;
}

.brand-cta p{
  font-size:12px;
  color:#ffd6d8;
  margin-top:8px;
}

/* =========================
   FOOTER
========================= */

footer{
  background:#090909;
  color:#fff;
  padding:45px 0 22px;
}

.foot{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:35px;
}

.foot p,
.foot a{
  font-size:11px;
  color:#999;
}

.foot h4{
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:12px;
}

.copy{
  border-top:1px solid #242424;
  margin-top:35px;
  padding-top:16px;
  color:#666;
  font-size:9px;
}

/* =========================
   RESPONSIVE TABLET
========================= */

@media(max-width:900px){

  .menu{
    display:none;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-visual{
    display:none;
  }

  .grid{
    grid-template-columns:1fr 1fr;
  }

  .brand-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .category-grid{
    grid-template-columns:1fr 1fr;
  }

  .foot{
    grid-template-columns:1fr 1fr;
  }

}

/* =========================
   RESPONSIVE MOBILE
========================= */

@media(max-width:560px){

  section{
    padding:60px 0;
  }

  .grid,
  .category-grid,
  .solution,
  .foot{
    grid-template-columns:1fr;
  }

  .brand-grid{
    grid-template-columns:1fr 1fr;
  }

  .head{
    display:block;
  }

  .head p{
    margin-top:13px;
  }

  .brand-cta .wrap{
    display:block;
  }

  .brand-cta .btn{
    margin-top:22px;
  }

}

/* =========================================================
   UNITY FITNESS EQUIPMENT
   PRODUCTS PAGE
========================================================= */

:root {
    --red: #e21d2a;
    --red-dark: #b91420;

    --black: #080808;
    --black-2: #101010;
    --black-3: #171717;

    --white: #ffffff;
    --soft: #f5f5f5;
    --line: #e5e5e5;

    --text: #111111;
    --gray: #707070;
    --gray-light: #999999;

    --container: 1180px;

    --radius: 6px;

    --shadow:
        0 15px 40px rgba(0, 0, 0, .08);

    --transition: .25s ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);
    background: var(--white);

    line-height: 1.6;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(var(--container), 92%);
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;

    height: 78px;

    background:
        rgba(255, 255, 255, .96);

    border-bottom:
        1px solid #eeeeee;

    backdrop-filter:
        blur(15px);
}

.nav {
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: inline-block;

    flex-shrink: 0;
}

.logo strong {
    display: block;

    font-size: 18px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -.7px;
}

.logo strong span {
    color: var(--red);
}

.logo small {
    display: block;

    margin-top: 6px;

    color: #777;

    font-size: 7px;
    line-height: 1;

    letter-spacing: 2px;

    font-weight: 700;
}


/* =========================================================
   MAIN MENU
========================================================= */

.main-menu {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-left: auto;
}

.main-menu > a,
.nav-link {
    position: relative;

    display: flex;
    align-items: center;
    gap: 5px;

    height: 78px;

    color: #222;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .3px;
}

.main-menu > a::after,
.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--red);

    transition: var(--transition);
}

.main-menu > a:hover,
.nav-link:hover,
.nav-link.active {
    color: var(--red);
}

.main-menu > a:hover::after,
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;

    top: calc(100% - 1px);
    left: 50%;

    width: 185px;

    transform:
        translateX(-50%)
        translateY(10px);

    background: var(--white);

    border:
        1px solid #eeeeee;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .10);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}

.dropdown-menu a {
    display: block;

    padding: 13px 16px;

    border-bottom:
        1px solid #eeeeee;

    font-size: 9px;
    font-weight: 800;

    color: #222;

    transition: var(--transition);
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: #fff3f4;
    color: var(--red);

    padding-left: 21px;
}


/* =========================================================
   HEADER CTA
========================================================= */

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 17px;

    background: var(--red);
    color: var(--white);

    border-radius: 4px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;

    transition: var(--transition);
}

.nav-cta:hover {
    background: var(--black);

    transform: translateY(-2px);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    background: var(--black);

    color: var(--white);

    overflow: hidden;
}

.hero-bg-text {
    position: absolute;

    right: -70px;
    bottom: -55px;

    font-size: 150px;
    font-weight: 900;

    letter-spacing: -10px;

    color: #111111;

    pointer-events: none;
}

.hero-grid {
    min-height: 500px;

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items: center;

    gap: 50px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {
    margin-bottom: 14px;

    color: var(--red);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 3px;
}

.hero .eyebrow {
    color: #aaa;
}


/* =========================================================
   HERO TYPOGRAPHY
========================================================= */

.hero h1 {
    max-width: 700px;

    font-size:
        clamp(48px, 7vw, 78px);

    line-height: .91;

    letter-spacing: -4px;

    font-weight: 900;
}

.hero h1 span {
    display: block;

    color: var(--red);
}

.hero p {
    max-width: 610px;

    margin-top: 23px;

    color: #aaa;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {
    display: flex;

    gap: 10px;

    margin-top: 28px;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 19px;

    border-radius: 4px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .4px;

    transition: var(--transition);
}

.btn-red {
    background: var(--red);
    color: var(--white);
}

.btn-red:hover {
    background: var(--white);
    color: var(--black);

    transform: translateY(-2px);
}

.btn-outline {
    border:
        1px solid #444;

    color: var(--white);
}

.btn-outline:hover {
    border-color: var(--red);

    background: var(--red);

    transform: translateY(-2px);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    height: 350px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;
}

.visual-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid #292929;
}

.ring-one {
    width: 310px;
    height: 310px;
}

.ring-two {
    width: 230px;
    height: 230px;

    border-color: #333;
}

.visual-center {
    width: 145px;
    height: 145px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--red);

    border-radius: 50%;

    box-shadow:
        0 0 0 15px rgba(226, 29, 42, .05);
}

.visual-center strong {
    font-size: 25px;
    font-weight: 900;

    letter-spacing: -1px;
}

.visual-center span {
    font-size: 6px;
    font-weight: 800;

    letter-spacing: 1.5px;

    opacity: .85;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

section {
    padding: 90px 0;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: grid;

    grid-template-columns:
        1fr
        .8fr;

    align-items: end;

    gap: 50px;

    margin-bottom: 40px;
}

.section-heading h2 {
    max-width: 600px;

    font-size:
        clamp(32px, 4.5vw, 52px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 900;
}

.section-heading h2 span {
    color: var(--red);
}

.section-heading > p {
    max-width: 500px;

    color: var(--gray);

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {
    background: var(--white);
}


/* =========================================================
   FILTER
========================================================= */

.product-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 30px;
}

.filter-btn {
    padding: 11px 16px;

    border:
        1px solid #dddddd;

    background: var(--white);

    border-radius: 50px;

    color: #222;

    cursor: pointer;

    font-size: 9px;
    font-weight: 900;

    transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--red);

    border-color: var(--red);

    color: var(--white);
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    background: var(--white);

    border:
        1px solid #e5e5e5;

    border-radius: 7px;

    overflow: hidden;

    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .09);
}

.product-card.hidden {
    display: none;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    height: 210px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #222,
            #0b0b0b
        );
}

.product-image::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.product-image::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border:
        1px solid rgba(255,255,255,.04);

    border-radius: 50%;
}

.product-image span {
    position: relative;
    z-index: 2;

    font-size: 54px;

    font-weight: 900;

    letter-spacing: -4px;

    color: var(--red);
}

.product-image small {
    position: absolute;

    right: 14px;
    bottom: 12px;

    color: #666;

    font-size: 7px;

    letter-spacing: 2px;

    font-weight: 800;
}


/* =========================================================
   IMAGE VARIATIONS
========================================================= */

.strength-image {
    background:
        linear-gradient(
            135deg,
            #1b1b1b,
            #070707
        );
}

.cardio-image {
    background:
        linear-gradient(
            135deg,
            #252525,
            #0b0b0b
        );
}

.freeweight-image {
    background:
        linear-gradient(
            135deg,
            #181818,
            #080808
        );
}

.functional-image {
    background:
        linear-gradient(
            135deg,
            #242424,
            #090909
        );
}

.accessories-image {
    background:
        linear-gradient(
            135deg,
            #1d1d1d,
            #080808
        );
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-content {
    padding: 19px;
}

.product-category {
    color: var(--red);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.7px;
}

.product-content h3 {
    margin-top: 6px;

    font-size: 16px;
    line-height: 1.3;
}

.product-content p {
    min-height: 70px;

    margin-top: 9px;

    color: #777;

    font-size: 11px;

    line-height: 1.65;
}

.product-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 13px;

    color: var(--red);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .5px;

    transition: var(--transition);
}

.product-link span {
    transition: var(--transition);
}

.product-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   BRANDS
========================================================= */

.brands-section {
    background: var(--black-2);

    color: var(--white);
}

.dark-heading > p {
    color: #999;
}


/* =========================================================
   BRAND GRID
========================================================= */

.brands-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}

.brand-item {
    min-height: 125px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--black-3);

    border:
        1px solid #303030;

    transition: var(--transition);
}

.brand-item:hover {
    border-color: var(--red);

    transform: translateY(-4px);

    background: #1b1b1b;
}

.brand-item strong {
    font-size: 20px;

    letter-spacing: 1px;

    color: #ddd;
}

.brand-item:hover strong {
    color: var(--red);
}

.brand-item small {
    margin-top: 5px;

    color: #777;

    font-size: 7px;

    letter-spacing: 1.5px;
}

.brand-more {
    border-style: dashed;
}

.brand-note {
    margin-top: 18px;

    color: #777;

    font-size: 10px;
}


/* =========================================================
   CATEGORIES
========================================================= */

.categories-section {
    background: var(--soft);
}

.category-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}

.category-card {
    min-height: 250px;

    position: relative;

    padding: 27px;

    background: var(--white);

    border-top:
        3px solid var(--red);

    transition: var(--transition);
}

.category-card:hover {
    transform: translateY(-5px);

    box-shadow:
        var(--shadow);
}

.category-number {
    position: absolute;

    top: 20px;
    right: 20px;

    color: #ddd;

    font-size: 10px;

    font-weight: 900;
}

.category-icon {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    background: #fff0f1;

    border-radius: 10px;

    color: var(--red);

    font-size: 14px;

    font-weight: 900;
}

.category-card h3 {
    font-size: 18px;
}

.category-card p {
    margin-top: 8px;

    color: #777;

    font-size: 11px;

    line-height: 1.7;
}

.category-card > span {
    display: inline-block;

    margin-top: 20px;

    color: var(--red);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .5px;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-section {
    background: var(--white);
}

.solutions-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;
}

.solution-card {
    min-height: 200px;

    position: relative;

    padding: 30px;

    background: var(--black-2);

    color: var(--white);

    overflow: hidden;
}

.solution-card::after {
    content: "";

    position: absolute;

    right: -40px;
    bottom: -60px;

    width: 170px;
    height: 170px;

    border:
        1px solid #292929;

    border-radius: 50%;
}

.solution-number {
    margin-bottom: 35px;

    color: var(--red);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}

.solution-card h3 {
    font-size: 17px;

    letter-spacing: .2px;
}

.solution-card p {
    max-width: 470px;

    margin-top: 8px;

    color: #999;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    padding: 70px 0;

    background: var(--red);

    color: var(--white);
}

.cta-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.cta-section .eyebrow {
    color: #fff;

    opacity: .8;
}

.cta-section h2 {
    max-width: 700px;

    font-size:
        clamp(30px, 4vw, 47px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;
}

.cta-section h2 span {
    display: block;

    color: #111;
}

.cta-section p {
    max-width: 600px;

    margin-top: 10px;

    color: #ffd8da;

    font-size: 12px;
}

.btn-dark {
    flex-shrink: 0;

    background: var(--black);

    color: var(--white);
}

.btn-dark:hover {
    background: var(--white);

    color: var(--black);

    transform: translateY(-3px);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 50px 0 22px;

    background: #080808;

    color: var(--white);
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap: 40px;
}

.footer-logo strong {
    color: var(--white);
}

.footer-logo small {
    color: #666;
}

.footer-brand p {
    margin-top: 15px;

    color: #777;

    font-size: 10px;
}

.footer-column h4 {
    margin-bottom: 14px;

    font-size: 8px;

    letter-spacing: 2px;
}

.footer-column a,
.footer-column p {
    display: block;

    margin-bottom: 8px;

    color: #888;

    font-size: 10px;
}

.footer-column a:hover {
    color: var(--red);
}

.footer-bottom {
    margin-top: 40px;

    padding-top: 17px;

    border-top:
        1px solid #242424;

    color: #555;

    font-size: 8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .main-menu {
        gap: 15px;
    }

    .product-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .site-header {
        height: 70px;
    }

    .nav {
        height: 70px;
    }

    .main-menu {
        display: none;
    }

    .logo strong {
        font-size: 15px;
    }

    .logo small {
        font-size: 6px;
    }

    .nav-cta {
        padding: 10px 13px;

        font-size: 9px;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }

    .hero-grid {
        min-height: 580px;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .hero-content {
        padding-top: 50px;
    }

    .hero h1 {
        font-size:
            clamp(43px, 12vw, 65px);

        letter-spacing: -3px;
    }

    .hero p {
        font-size: 12px;
    }

    .hero-visual {
        height: 180px;
    }

    .ring-one {
        width: 180px;
        height: 180px;
    }

    .ring-two {
        width: 130px;
        height: 130px;
    }

    .visual-center {
        width: 90px;
        height: 90px;
    }

    .visual-center strong {
        font-size: 17px;
    }

    .hero-bg-text {
        font-size: 90px;
    }


    /* SECTION */

    section {
        padding: 65px 0;
    }

    .section-heading {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size:
            clamp(30px, 9vw, 44px);
    }


    /* PRODUCTS */

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-content p {
        min-height: auto;
    }


    /* BRANDS */

    .brands-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* CATEGORY */

    .category-grid {
        grid-template-columns: 1fr;
    }


    /* SOLUTIONS */

    .solutions-grid {
        grid-template-columns: 1fr;
    }


    /* CTA */

    .cta-inner {
        display: block;
    }

    .cta-inner .btn {
        margin-top: 25px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .container {
        width: 90%;
    }

    .nav-cta {
        padding: 9px 11px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .btn {
        width: auto;
    }

    .product-filter {
        gap: 6px;
    }

    .filter-btn {
        padding: 9px 12px;
    }

    .brands-grid {
        grid-template-columns: 1fr 1fr;
    }

    .brand-item {
        min-height: 100px;
    }

    .brand-item strong {
        font-size: 15px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

}