/* css/components.css */

/* =========================================================
   NAVBAR
========================================================= */

.navbar {

  position: sticky;

  top: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(255,255,255,0.88);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid var(--border);
}

.navbar-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 92px;
}

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

.navbar-logo img {

  height: 42px;

  width: auto;
}

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

.navbar-menu {

  display: flex;

  align-items: center;

  gap: 42px;
}

.navbar-menu a {

  position: relative;

  font-size: 15px;

  font-weight: 600;

  color: var(--text);

  transition:
    var(--transition);
}

.navbar-menu a:hover {

  color:
    var(--accent);
}

/* UNDERLINE */

.navbar-menu a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0%;

  height: 2px;

  background:
    var(--accent);

  transition:
    var(--transition);
}

.navbar-menu a:hover::after {

  width: 100%;
}

/* =========================
   LANGUAGE BUTTON
========================= */

.lang-button {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 46px;

  padding-left: 18px;
  padding-right: 18px;

  border-radius: 999px;

  background: white;

  border:
    1px solid var(--border);

  font-weight: 600;

  cursor: pointer;

  transition:
    var(--transition);
}

.lang-button:hover {

  border-color:
    var(--accent);

  color:
    var(--accent);
}

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

.hero {

  padding-top: 70px;

  padding-bottom: 40px;
}

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

.hero-container {

  display: grid;

  grid-template-columns:
    1.1fr 1fr;

  align-items: center;

  gap: 60px;
}

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

.hero-content h1 {

  max-width: 720px;

  font-size: 76px;

  line-height: 1.02;

  letter-spacing: -3px;

  font-weight: 800;

  margin-bottom: 30px;

  color:
    var(--text);
}

.hero-content h1 span {

  color:
    var(--accent);
}

/* =========================
   PARAGRAPH
========================= */

.hero-content p {

  max-width: 620px;

  font-size: 22px;

  line-height: 1.7;

  color:
    var(--text-light);

  margin-bottom: 52px;
}

/* =========================================================
   BENEFITS
========================================================= */

.hero-benefits {

  display: flex;

  flex-wrap: wrap;

  gap: 28px;
}

/* =========================
   BENEFIT ITEM
========================= */

.benefit-item {

  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 240px;
}

/* =========================
   BENEFIT ICON
========================= */

.benefit-icon {

  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius:
    var(--radius-md);

  background:
    white;

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

  font-size: 24px;

  flex-shrink: 0;
}

/* BENEFIT TEXT */

.benefit-item div:last-child {

  font-size: 15px;

  line-height: 1.5;

  font-weight: 600;

  color:
    var(--text);
}

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

.hero-visual {

  position: relative;

  height: 700px;
}

/* =========================
   ALL HERO IMAGES
========================= */

.hero-visual img {

  position: absolute;

  object-fit: contain;

  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.12));

  transition:
    var(--transition);
}

/* HOVER EFFECT */

.hero-visual img:hover {

  transform:
    translateY(-6px);
}

/* =========================================================
   SWITCH
========================================================= */

.hero-switch {

  width: 380px;

  top: 0;
  right: 0;

  z-index: 5;
}

/* =========================================================
   MEDIA CONVERTER
========================================================= */

.hero-mc {

  width: 280px;

  bottom: 10px;
  left: 120px;

  z-index: 2;
}

/* =========================================================
   SFPs
========================================================= */

.hero-sfp {

  z-index: 4;
}

/* SFP 1 */

.hero-sfp-1 {

  width: 240px;

  top: 110px;
  left: 0;

  transform:
    rotate(-10deg);
}

/* SFP 2 */

.hero-sfp-2 {

  width: 260px;

  top: 230px;
  left: 120px;

  transform:
    rotate(8deg);
}

/* SFP 3 */

.hero-sfp-3 {

  width: 230px;

  top: 400px;
  left: 10px;

  transform:
    rotate(-14deg);
}

/* =========================================================
   CROSSSELL
========================================================= */

.crosssell-section {

  padding:
    100px 0 60px;
}

/* HEADER */

.crosssell-header {

  margin-bottom: 48px;
}

.crosssell-header span {

  display: inline-block;

  font-size: 16px;

  color:
    var(--text-light);

  margin-bottom: 14px;
}

.crosssell-header h2 {

  font-size: 48px;

  line-height: 1.1;

  font-weight: 800;

  color:
    var(--text);

  margin-bottom: 18px;

  max-width: 760px;
}

.crosssell-header p {

  font-size: 20px;

  line-height: 1.7;

  color:
    var(--text-light);

  max-width: 720px;
}

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

.footer {

  background:
    white;

  margin-top: 90px;

  border-top:
    1px solid rgba(0,0,0,0.06);

  padding:
    70px 0 24px;
}

/* GRID */

.footer-grid {

  display: grid;

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

  gap: 54px;
}

/* LOGO */

.footer-logo {

  width: 240px;

  margin-bottom: 24px;
}

/* BRAND */

.footer-brand p {

  font-size: 17px;

  line-height: 1.8;

  color:
    var(--text-light);

  margin-bottom: 18px;

  max-width: 420px;
}

/* POWERED */

.footer-powered {

  display: inline-block;

  font-size: 14px;

  color:
    #9ca3af;
}

/* TITLES */

.footer h4 {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 22px;

  color:
    var(--text);
}

/* LINKS */

.footer a,
.footer span {

  display: block;

  text-decoration: none;

  margin-bottom: 14px;

  color:
    var(--text-light);

  transition:
    var(--transition);
}

/* HOVER */

.footer a:hover {

  color:
    var(--accent);
}

/* BOTTOM */

.footer-bottom {

  margin-top: 60px;

  padding-top: 24px;

  border-top:
    1px solid rgba(0,0,0,0.06);

  text-align: center;

  font-size: 14px;

  color:
    #9ca3af;
}