:root {
  --bg: #020814;
  --bg2: #061426;
  --card: #07111f;
  --white: #ffffff;
  --text: #d9e2f0;
  --muted: #9aa8bb;
  --blue: #0f74ff;
  --blue2: #00c8ff;
  --border: rgba(255, 255, 255, 0.22);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --max: 1200px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #020814;
  color: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
}

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

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

.container {
  width: min(100% - 72px, var(--max));
  margin: 0 auto;
}

/* HEADER */

.site-header {
  background: rgba(2, 8, 20, 0.97);
  position: sticky;
  top: 0;
  z-index: 1000;
}

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

.brand {
  width: 170px;
  display: flex;
  align-items: center;
}

.brand img {
  width: 100%;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 44px;
  font-size: 15px;
  font-weight: 800;
  color: #e7edf7;
}

.nav-menu a {
  padding: 42px 0 32px;
  position: relative;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 999px;
  transform: translateX(-50%);
  transition: 0.22s;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 54px;
}

.nav-cta {
  min-width: 210px;
  height: 54px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0f74ff, #005bea);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(15, 116, 255, 0.3);
}

.menu-btn {
  display: none;
  width: 44px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(15, 116, 255, 0.5);
  background: rgba(15, 116, 255, 0.14);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* BUTTONS */

.btn {
  min-height: 54px;
  border-radius: 9px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 900;
  transition: 0.22s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, #0f74ff, #005bea);
  box-shadow: 0 16px 36px rgba(15, 116, 255, 0.32);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.02);
}

/* HERO */

.hero {
  min-height: 525px;
  background:
    radial-gradient(circle at 78% 43%, rgba(15, 116, 255, 0.38), transparent 25%),
    linear-gradient(90deg, #020814 0%, #020814 42%, #041225 68%, #020814 100%);
  overflow: hidden;
}

.hero-grid {
  min-height: 525px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 25px;
}

.hero-content h1 {
  max-width: 560px;
  font-size: clamp(42px, 5vw, 61px);
  line-height: 1.1;
  letter-spacing: -2.4px;
  margin-bottom: 20px;
  font-weight: 900;
}

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

.hero-content p {
  max-width: 530px;
  color: var(--text);
  font-size: 16.6px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* HERO ART */

.hero-art {
  height: 430px;
  position: relative;
}

.blue-line {
  position: absolute;
  right: -50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15, 116, 255, 0.95), transparent);
  box-shadow: 0 0 14px rgba(15, 116, 255, 0.9);
  opacity: 0.72;
}

.line-one {
  top: 105px;
  width: 460px;
}

.line-two {
  top: 188px;
  width: 560px;
}

.line-three {
  top: 280px;
  width: 410px;
}

.laptop {
  position: absolute;
  right: 72px;
  top: 25px;
  width: 470px;
  transform: perspective(900px) rotateX(2deg) rotateY(-6deg);
  z-index: 4;
}

.laptop-screen {
  height: 292px;
  border: 11px solid #171b24;
  border-radius: 18px 18px 9px 9px;
  background: #f8f8f6;
  display: grid;
  place-items: center;
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.48);
}

.screen-logo {
  text-align: center;
}

.screen-main {
  color: #181b22;
  font-size: 86px;
  line-height: 1;
  letter-spacing: -5px;
  font-weight: 500;
}

.screen-main span {
  color: var(--blue);
}

.screen-sub {
  color: #313844;
  font-size: 13px;
  letter-spacing: 8px;
  font-weight: 900;
  margin-top: 12px;
}

.laptop-base {
  width: 545px;
  height: 42px;
  margin-left: -38px;
  background: linear-gradient(180deg, #283449, #0c111b);
  border-radius: 0 0 38px 38px;
  box-shadow: 0 28px 42px rgba(0, 0, 0, 0.52);
}

.mug {
  position: absolute;
  left: 10px;
  bottom: 102px;
  width: 108px;
  height: 122px;
  border-radius: 0 0 30px 30px;
  background:
    radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #202630, #05070b);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  box-shadow: var(--shadow);
  z-index: 3;
}

.mug::after {
  content: "";
  position: absolute;
  right: -39px;
  top: 30px;
  width: 45px;
  height: 54px;
  border: 8px solid #11151d;
  border-left: none;
  border-radius: 0 28px 28px 0;
}

.mug-logo {
  font-size: 20px;
  font-weight: 700;
}

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

.mug small {
  font-size: 6px;
  letter-spacing: 2px;
}

.plant {
  position: absolute;
  right: -5px;
  bottom: 102px;
  width: 105px;
  height: 175px;
  z-index: 2;
}

.pot {
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 62px;
  height: 68px;
  background: linear-gradient(180deg, #202936, #070b10);
  border-radius: 11px 11px 22px 22px;
}

.leaf {
  position: absolute;
  bottom: 56px;
  left: 51px;
  width: 12px;
  height: 95px;
  border-radius: 100px;
  background: linear-gradient(180deg, #2b6d43, #10301e);
  transform-origin: bottom;
}

.leaf-1 { transform: rotate(-38deg); }
.leaf-2 { transform: rotate(-14deg); height: 118px; }
.leaf-3 { transform: rotate(16deg); height: 105px; }
.leaf-4 { transform: rotate(42deg); height: 88px; }

.book {
  position: absolute;
  right: 32px;
  bottom: 36px;
  width: 165px;
  height: 52px;
  border-radius: 5px;
  background: linear-gradient(180deg, #161d28, #070b12);
  transform: skewX(-18deg);
  box-shadow: var(--shadow);
  z-index: 1;
}

/* SECTIONS */

.section {
  padding: 30px 0 0;
}

.section-title {
  text-align: center;
  margin-bottom: 22px;
}

.section-title h2 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
}

.section-title span {
  display: block;
  width: 86px;
  height: 3px;
  background: var(--blue);
  border-radius: 999px;
  margin: 10px auto 0;
  box-shadow: 0 0 14px rgba(15, 116, 255, 0.9);
}

/* SERVICES */

.services-section {
  margin-top: -8px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 11px;
}

.service-card {
  min-height: 246px;
  padding: 24px 14px 18px;
  text-align: center;
  border-radius: 11px;
  background: rgba(7, 16, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: 0.22s;
}

.service-card:hover {
  border-color: rgba(15, 116, 255, 0.85);
  transform: translateY(-5px);
}

.service-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  color: #0879ff;
  filter: drop-shadow(0 0 12px rgba(15, 116, 255, 0.95));
}

.service-icon svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
}

/* PRODUCTS */

.products-section {
  padding-top: 22px;
}

.products-layout {
  display: grid;
  grid-template-columns: 0.91fr 1.47fr;
  gap: 13px;
  align-items: start;
}

.product-label {
  color: var(--text);
  text-align: center;
  font-size: 15px;
  margin-bottom: 5px;
}

.joru-card {
  min-height: 505px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 34px;
  align-items: center;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 28%, rgba(15, 116, 255, 0.18), transparent 35%),
    rgba(6, 16, 31, 0.92);
  border: 1px solid rgba(15, 116, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(15, 116, 255, 0.65),
    0 0 28px rgba(15, 116, 255, 0.34);
}

.phone {
  width: 178px;
  height: 430px;
  border-radius: 32px;
  border: 4px solid #3b4658;
  background: #060b14;
  padding: 13px;
  position: relative;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.48);
}

.phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}

.phone-time {
  font-size: 10px;
  margin: 2px 0 12px;
  color: #fff;
}

.phone h4 {
  text-align: center;
  font-size: 21px;
  margin-bottom: 16px;
}

.phone-row {
  min-height: 34px;
  padding: 0 9px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--text);
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.phone-row span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(15, 116, 255, 0.16);
  color: #65b7ff;
  font-size: 11px;
  line-height: 1;
}

.phone-nav {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.joru-text h3 {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 16px;
}

.joru-text p {
  max-width: 270px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 24px;
}

.joru-text a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 7px;
  background: linear-gradient(135deg, #00c8ff, #0f74ff);
  font-weight: 900;
  box-shadow: 0 0 18px rgba(15, 116, 255, 0.45);
}

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

.concept-card {
  min-height: 247px;
  padding: 16px 13px 13px;
  text-align: center;
  border-radius: 11px;
  background: rgba(7, 16, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: 0.22s;
}

.concept-card:hover {
  border-color: rgba(15, 116, 255, 0.86);
  transform: translateY(-4px);
}

.concept-icon {
  width: 76px;
  height: 76px;
  border-radius: 11px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  font-size: 42px;
  background: linear-gradient(135deg, rgba(15, 116, 255, 0.25), rgba(91, 33, 182, 0.38));
  filter: drop-shadow(0 0 12px rgba(15, 116, 255, 0.45));
}

.icon-health { background: linear-gradient(135deg, #00e0ff, #07a5c8); }
.icon-home { background: linear-gradient(135deg, #7c3aed, #32146d); }
.icon-swiss { background: linear-gradient(135deg, #ff3b30, #b31313); }
.icon-car { background: linear-gradient(135deg, #0f74ff, #003c9c); }
.icon-bridge { background: linear-gradient(135deg, #162033, #07101d); }

.concept-card h4 {
  font-size: 16.5px;
  line-height: 1.08;
  margin-bottom: 8px;
}

.concept-card p {
  color: var(--text);
  font-size: 12.6px;
  line-height: 1.36;
  margin-bottom: 8px;
}

.concept-card span {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--blue);
  font-size: 12px;
  font-weight: 800;
}

/* ABOUT SHOWCASE */

.about-showcase {
  margin-top: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, #06111f 0%, #071428 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.about-showcase-grid {
  min-height: 320px;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 30px;
  align-items: center;
}

.about-left h2 {
  display: inline-block;
  font-size: 35px;
  line-height: 1;
  margin-bottom: 24px;
  position: relative;
}

.about-left h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 78px;
  height: 3px;
  background: var(--blue);
  border-radius: 999px;
}

.about-left p {
  max-width: 520px;
  color: var(--text);
  font-size: 15.6px;
  margin-bottom: 12px;
}

.about-focus-title {
  margin-top: 16px;
  font-weight: 700;
}

.about-check-list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.about-check-list li {
  color: var(--text);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-check-list li::before {
  content: "✓";
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 23px;
}

.about-right-visual {
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 48% 58%, rgba(0, 200, 255, 0.45), transparent 24%),
    radial-gradient(circle at 65% 50%, rgba(15, 116, 255, 0.28), transparent 35%),
    rgba(2, 8, 20, 0.18);
}

.about-visual-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  left: 45%;
  top: 48%;
  transform: translate(-35%, -25%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.6), rgba(15, 116, 255, 0.18) 45%, transparent 72%);
  filter: blur(8px);
}

.about-wave {
  position: absolute;
  border: 1px solid rgba(15, 116, 255, 0.4);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.about-wave-1 {
  width: 680px;
  height: 210px;
  right: -30px;
  bottom: 34px;
}

.about-wave-2 {
  width: 520px;
  height: 160px;
  right: 80px;
  bottom: 66px;
}

.about-wave-3 {
  width: 360px;
  height: 115px;
  right: 168px;
  bottom: 92px;
}

.about-desk {
  position: absolute;
  right: 86px;
  bottom: 30px;
  width: 470px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(15, 116, 255, 0.44), transparent);
}

.about-laptop {
  position: absolute;
  right: 275px;
  bottom: 52px;
  width: 160px;
  height: 82px;
  border-radius: 8px;
  background: linear-gradient(180deg, #111c30, #07101f);
  border: 1px solid rgba(15, 116, 255, 0.3);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.about-laptop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 185px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #17233a, #07101f);
}

.mini-screen {
  position: absolute;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 43, 78, 0.94), rgba(7, 19, 38, 0.96));
  border: 1px solid rgba(15, 116, 255, 0.5);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.mini-screen-1 {
  right: 190px;
  top: 36px;
  width: 205px;
  height: 125px;
}

.mini-screen-2 {
  right: 46px;
  top: 62px;
  width: 172px;
  height: 106px;
}

.mini-screen-3 {
  right: 20px;
  bottom: 60px;
  width: 105px;
  height: 76px;
}

.mini-screen-4 {
  right: 330px;
  top: 118px;
  width: 130px;
  height: 86px;
}

.screen-line {
  display: block;
  height: 7px;
  width: 80%;
  border-radius: 999px;
  background: rgba(0, 200, 255, 0.28);
  margin-bottom: 8px;
}

.screen-line.short {
  width: 48%;
  background: rgba(0, 200, 255, 0.9);
}

.screen-bars,
.screen-chart {
  height: 55px;
  display: flex;
  align-items: end;
  gap: 6px;
  margin-top: 10px;
}

.screen-bars.small,
.screen-chart.small-line {
  height: 34px;
}

.screen-bars i,
.screen-chart i {
  width: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #00c8ff, #0f74ff);
  box-shadow: 0 0 10px rgba(15, 116, 255, 0.45);
}

.screen-bars i:nth-child(1) { height: 30%; }
.screen-bars i:nth-child(2) { height: 68%; }
.screen-bars i:nth-child(3) { height: 44%; }
.screen-bars i:nth-child(4) { height: 84%; }

.screen-chart i:nth-child(1) { height: 24%; }
.screen-chart i:nth-child(2) { height: 46%; }
.screen-chart i:nth-child(3) { height: 34%; }
.screen-chart i:nth-child(4) { height: 72%; }
.screen-chart i:nth-child(5) { height: 56%; }

/* CTA STRIP */

.cta-strip {
  min-height: 112px;
  display: grid;
  grid-template-columns: 105px 1fr 240px;
  align-items: center;
  gap: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 17, 33, 0.78);
}

.cta-strip-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(135deg, #0f74ff, #071b6a);
  border: 1px solid rgba(255, 255, 255, 0.26);
  display: grid;
  place-items: center;
  font-size: 40px;
  box-shadow: 0 0 30px rgba(15, 116, 255, 0.45);
}

.cta-strip-text h3 {
  font-size: 35px;
  line-height: 1.12;
  margin-bottom: 4px;
}

.cta-strip-text p {
  color: var(--text);
}

.cta-strip-btn {
  min-height: 54px;
  border-radius: 9px;
  padding: 0 24px;
  background: linear-gradient(135deg, #0f74ff, #005bea);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(15, 116, 255, 0.32);
}

/* FOOTER */

.footer {
  padding: 30px 0 22px;
  background: #020814;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 0.95fr 1.1fr;
  gap: 46px;
  padding-bottom: 26px;
}

.footer-brand img {
  width: 155px;
  margin-bottom: 16px;
}

.footer-brand p,
.footer-col a,
.footer-col p {
  color: var(--text);
  font-size: 15px;
}

.footer-brand p {
  max-width: 250px;
  margin-bottom: 16px;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.footer-col {
  display: grid;
  align-content: start;
  gap: 8px;
}

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

.footer-col a:hover {
  color: var(--blue2);
}

.footer-legal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 20px;
}

.footer-legal details {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-legal summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.footer-legal p {
  color: var(--text);
  font-size: 13px;
  margin-top: 10px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* RESPONSIVE */

@media (max-width: 1120px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

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

  .about-right-visual {
    height: 360px;
  }

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

@media (max-width: 900px) {
  .container {
    width: min(100% - 32px, var(--max));
  }

  .nav {
    height: 82px;
  }

  .brand {
    width: 135px;
  }

  .menu-btn {
    display: block;
  }

  .nav-cta {
    display: none;
  }

  .nav-menu {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 82px;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    background: rgba(2, 8, 20, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu a {
    padding: 13px 14px;
  }

  .nav-menu a::after {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding: 45px 0 30px;
  }

  .hero {
    min-height: auto;
  }

  .hero-art {
    height: 340px;
  }

  .laptop {
    left: 50%;
    right: auto;
    top: 15px;
    width: 370px;
    transform: translateX(-50%);
  }

  .laptop-screen {
    height: 228px;
  }

  .screen-main {
    font-size: 62px;
  }

  .screen-sub {
    font-size: 10px;
    letter-spacing: 5px;
  }

  .laptop-base {
    width: 430px;
  }

  .mug,
  .plant,
  .book {
    display: none;
  }

  .cta-strip {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 28px 0;
  }

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

@media (max-width: 680px) {
  .services-grid,
  .concept-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .phone {
    max-width: 230px;
    margin: 0 auto;
  }

  .joru-text {
    text-align: center;
  }

  .joru-text p {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: 39px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .about-right-visual {
    height: 300px;
  }

  .mini-screen-1 { right: 130px; }
  .mini-screen-2 { right: 20px; }
  .mini-screen-4 { right: 220px; }

  .cta-strip-text h3 {
    font-size: 26px;
  }
}
/* =====================================================
   FINAL FIX - ÜBER UNS LIKE REFERENCE PHOTO
   This forces About + CTA to match the target layout
===================================================== */

.about-showcase {
  margin-top: 18px !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(0, 200, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #06111f 0%, #071428 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}

.about-showcase .container {
  width: min(100% - 72px, 1200px) !important;
  margin: 0 auto !important;
}

.about-showcase-grid {
  min-height: 310px !important;
  display: grid !important;
  grid-template-columns: 0.88fr 1.12fr !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 0 !important;
}

.about-left {
  display: block !important;
  padding: 32px 0 28px !important;
  position: relative !important;
  z-index: 4 !important;
}

.about-left h2 {
  display: inline-block !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  margin: 0 0 25px !important;
  color: #ffffff !important;
  position: relative !important;
}

.about-left h2::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -10px !important;
  width: 78px !important;
  height: 3px !important;
  background: #0f74ff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 14px rgba(15, 116, 255, 0.9) !important;
}

.about-left p {
  max-width: 520px !important;
  color: #d9e2f0 !important;
  font-size: 15.6px !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
  font-weight: 500 !important;
}

.about-focus-title {
  margin-top: 17px !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.about-check-list {
  list-style: none !important;
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-check-list li {
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

.about-check-list li::before {
  content: "✓" !important;
  width: 23px !important;
  height: 23px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #00c8ff, #0f74ff) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  flex: 0 0 23px !important;
  box-shadow: 0 0 16px rgba(15, 116, 255, 0.45) !important;
}

/* Right visual must stay on the right, not full width */
.about-right-visual {
  height: 310px !important;
  min-height: 310px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 47% 58%, rgba(0, 200, 255, 0.58), transparent 24%),
    radial-gradient(circle at 64% 48%, rgba(15, 116, 255, 0.32), transparent 35%),
    transparent !important;
  border: none !important;
}

/* Make visual more like reference */
.about-visual-glow {
  position: absolute !important;
  width: 280px !important;
  height: 280px !important;
  left: 43% !important;
  top: 54% !important;
  transform: translate(-32%, -30%) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0, 220, 255, 0.68), rgba(15, 116, 255, 0.22) 45%, transparent 72%) !important;
  filter: blur(8px) !important;
  z-index: 1 !important;
}

.about-wave {
  position: absolute !important;
  border: 1px solid rgba(15, 116, 255, 0.42) !important;
  border-radius: 50% !important;
  transform: rotate(-12deg) !important;
  z-index: 2 !important;
}

.about-wave-1 {
  width: 680px !important;
  height: 210px !important;
  right: -30px !important;
  bottom: 34px !important;
}

.about-wave-2 {
  width: 520px !important;
  height: 160px !important;
  right: 80px !important;
  bottom: 66px !important;
}

.about-wave-3 {
  width: 360px !important;
  height: 115px !important;
  right: 168px !important;
  bottom: 92px !important;
}

.about-desk {
  position: absolute !important;
  right: 86px !important;
  bottom: 30px !important;
  width: 470px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(15, 116, 255, 0.44), transparent) !important;
  z-index: 4 !important;
}

.about-laptop {
  position: absolute !important;
  right: 275px !important;
  bottom: 52px !important;
  width: 160px !important;
  height: 82px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #111c30, #07101f) !important;
  border: 1px solid rgba(15, 116, 255, 0.3) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4) !important;
  z-index: 5 !important;
}

.about-laptop::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  width: 185px !important;
  height: 10px !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 10px 10px !important;
  background: linear-gradient(180deg, #17233a, #07101f) !important;
}

.mini-screen {
  position: absolute !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(18, 43, 78, 0.94), rgba(7, 19, 38, 0.96)) !important;
  border: 1px solid rgba(15, 116, 255, 0.5) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  z-index: 6 !important;
}

.mini-screen-1 {
  right: 190px !important;
  top: 36px !important;
  width: 205px !important;
  height: 125px !important;
}

.mini-screen-2 {
  right: 46px !important;
  top: 62px !important;
  width: 172px !important;
  height: 106px !important;
}

.mini-screen-3 {
  right: 20px !important;
  bottom: 60px !important;
  width: 105px !important;
  height: 76px !important;
}

.mini-screen-4 {
  right: 330px !important;
  top: 118px !important;
  width: 130px !important;
  height: 86px !important;
}

.screen-line {
  display: block !important;
  height: 7px !important;
  width: 80% !important;
  border-radius: 999px !important;
  background: rgba(0, 200, 255, 0.28) !important;
  margin-bottom: 8px !important;
}

.screen-line.short {
  width: 48% !important;
  background: rgba(0, 200, 255, 0.9) !important;
}

.screen-bars,
.screen-chart {
  height: 55px !important;
  display: flex !important;
  align-items: end !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.screen-bars.small,
.screen-chart.small-line {
  height: 34px !important;
}

.screen-bars i,
.screen-chart i {
  width: 12px !important;
  border-radius: 5px 5px 0 0 !important;
  background: linear-gradient(180deg, #00c8ff, #0f74ff) !important;
  box-shadow: 0 0 10px rgba(15, 116, 255, 0.45) !important;
}

.screen-bars i:nth-child(1) { height: 30% !important; }
.screen-bars i:nth-child(2) { height: 68% !important; }
.screen-bars i:nth-child(3) { height: 44% !important; }
.screen-bars i:nth-child(4) { height: 84% !important; }

.screen-chart i:nth-child(1) { height: 24% !important; }
.screen-chart i:nth-child(2) { height: 46% !important; }
.screen-chart i:nth-child(3) { height: 34% !important; }
.screen-chart i:nth-child(4) { height: 72% !important; }
.screen-chart i:nth-child(5) { height: 56% !important; }

/* CTA must be directly under About, like second photo */
.cta-strip {
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 105px 1fr 240px !important;
  align-items: center !important;
  gap: 26px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(5, 17, 33, 0.78) !important;
  padding: 0 !important;
}

.cta-strip-icon {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(135deg, #0f74ff, #071b6a) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 40px !important;
  box-shadow: 0 0 30px rgba(15, 116, 255, 0.45) !important;
}

.cta-strip-text h3 {
  font-size: 35px !important;
  line-height: 1.12 !important;
  margin-bottom: 4px !important;
  color: #ffffff !important;
}

.cta-strip-text p {
  color: #d9e2f0 !important;
  font-size: 15.5px !important;
  margin: 0 !important;
}

.cta-strip-btn {
  min-height: 54px !important;
  border-radius: 9px !important;
  padding: 0 24px !important;
  background: linear-gradient(135deg, #0f74ff, #005bea) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 36px rgba(15, 116, 255, 0.32) !important;
}
/* =====================================================
   FINAL ABOUT VISUAL IMAGE
   Uses the generated futuristic workspace image
===================================================== */

.about-right-visual {
  height: 315px !important;
  min-height: 315px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(90deg, rgba(6, 17, 31, 0.08), rgba(6, 17, 31, 0.02)),
    url("images/futuristic_workspace_with_neon_blue_accents.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide old CSS-made laptop/monitors inside this visual */
.about-right-visual > * {
  display: none !important;
}

/* Keep About layout like the reference */
.about-showcase {
  margin-top: 18px !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #06111f 0%, #071428 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
}

.about-showcase-grid {
  min-height: 315px !important;
  display: grid !important;
  grid-template-columns: 0.86fr 1.14fr !important;
  gap: 30px !important;
  align-items: center !important;
}

.about-left {
  padding: 32px 0 28px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* CTA strip stays like the reference */
.cta-strip {
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 105px 1fr 240px !important;
  align-items: center !important;
  gap: 26px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(5, 17, 33, 0.78) !important;
  padding: 0 !important;
}
/* =====================================================
   FINAL GLOBAL DARK NAVY THEME
   Make the full website match the dark blue reference
===================================================== */

html,
body {
  background: #020814 !important;
}

body {
  background:
    radial-gradient(circle at 80% 8%, rgba(15, 116, 255, 0.16), transparent 28%),
    radial-gradient(circle at 15% 45%, rgba(0, 200, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #020814 0%, #030b18 45%, #041123 100%) !important;
  color: #ffffff !important;
}

/* Header darker */
.site-header {
  background: rgba(2, 8, 20, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Hero darker */
.hero {
  background:
    radial-gradient(circle at 78% 43%, rgba(15, 116, 255, 0.28), transparent 25%),
    linear-gradient(90deg, #020814 0%, #020814 42%, #030d1d 68%, #020814 100%) !important;
}

/* Main sections dark navy */
.section,
.services-section,
.products-section,
.about-showcase,
.cta,
.footer {
  background:
    linear-gradient(180deg, #020814 0%, #030b18 100%) !important;
}

/* Products section should stay dark but slightly blue */
.products-section {
  background:
    radial-gradient(circle at 28% 30%, rgba(15, 116, 255, 0.13), transparent 30%),
    linear-gradient(180deg, #020814 0%, #041123 100%) !important;
}

/* About section same dark tone as the image */
.about-showcase {
  background:
    radial-gradient(circle at 73% 48%, rgba(15, 116, 255, 0.16), transparent 30%),
    linear-gradient(90deg, #020814 0%, #030b18 44%, #041123 100%) !important;
}

/* Darken the visual image area so it blends with the site */
.about-right-visual {
  background-color: #020814 !important;
  box-shadow:
    inset 55px 0 80px rgba(2, 8, 20, 0.72),
    inset -20px 0 55px rgba(2, 8, 20, 0.38) !important;
  filter: brightness(0.82) contrast(1.08) saturate(0.95) !important;
}

/* Cards dark, not light */
.service-card,
.concept-card,
.joru-card,
.footer-legal details {
  background:
    linear-gradient(180deg, rgba(7, 16, 30, 0.96), rgba(3, 11, 24, 0.96)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* CTA strip darker */
.cta-strip {
  background:
    linear-gradient(90deg, #020814 0%, #041123 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Footer darker */
.footer {
  background: #020814 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Text colors cleaner on dark background */
.hero-content p,
.service-card p,
.concept-card p,
.joru-text p,
.about-left p,
.cta-strip-text p,
.footer-brand p,
.footer-col a,
.footer-col p,
.footer-legal p {
  color: #cfd9e8 !important;
}

/* Titles stay white */
h1,
h2,
h3,
h4,
.about-left h2,
.section-title h2,
.cta-strip-text h3 {
  color: #ffffff !important;
}

/* Blue accents closer to reference */
.hero-content h1 span,
.screen-main span {
  color: #0f74ff !important;
}

.section-title span,
.about-left h2::after {
  background: #0f74ff !important;
  box-shadow: 0 0 14px rgba(15, 116, 255, 0.75) !important;
}
/* =====================================================
   FIX IMAGE BLEND WITH ABOUT SECTION
   Removes visible rectangle difference between left blue and image
===================================================== */

.about-showcase {
  background:
    radial-gradient(circle at 68% 45%, rgba(0, 210, 255, 0.18), transparent 34%),
    radial-gradient(circle at 28% 35%, rgba(15, 116, 255, 0.10), transparent 32%),
    linear-gradient(90deg, #020814 0%, #061326 46%, #061326 100%) !important;
}

.about-right-visual {
  background-image: none !important;
  background-color: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Real image as layer */
.about-right-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("images/futuristic_workspace_with_neon_blue_accents.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: brightness(0.92) contrast(1.08) saturate(0.95) !important;
  opacity: 0.92 !important;
  z-index: 1 !important;
}

/* Blend edges so image does not look like a separate rectangle */
.about-right-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      #061326 0%,
      rgba(6, 19, 38, 0.92) 5%,
      rgba(6, 19, 38, 0.45) 15%,
      rgba(6, 19, 38, 0.05) 34%,
      rgba(6, 19, 38, 0.08) 100%
    ),
    linear-gradient(180deg,
      rgba(6, 19, 38, 0.50) 0%,
      rgba(6, 19, 38, 0.00) 24%,
      rgba(6, 19, 38, 0.00) 72%,
      rgba(6, 19, 38, 0.58) 100%
    ) !important;
}

/* Hide old CSS-made objects, keep only image layer */
.about-right-visual > * {
  display: none !important;
}

/* Make left side same dark-blue tone */
.about-left {
  background: transparent !important;
}

.about-left p {
  color: #d9e2f0 !important;
}

.cta-strip {
  background:
    linear-gradient(90deg, #061326 0%, #061326 45%, #061326 100%) !important;
}
/* =====================================================
   FINAL FIX - CONCEPT ICONS LOOK REAL, NOT EMOJI
===================================================== */

.concept-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 247px !important;
  padding: 18px 14px 15px !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(15, 116, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(8, 20, 42, 0.96), rgba(3, 11, 24, 0.96)) !important;
  border: 1px solid rgba(130, 165, 220, 0.34) !important;
  box-shadow:
    inset 0 0 28px rgba(15, 116, 255, 0.08),
    0 0 18px rgba(15, 116, 255, 0.12) !important;
}

.concept-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 200, 255, 0.8) !important;
  box-shadow:
    inset 0 0 35px rgba(15, 116, 255, 0.12),
    0 0 28px rgba(15, 116, 255, 0.28) !important;
}

/* Hide emoji and create real icon box */
.concept-icon {
  width: 78px !important;
  height: 78px !important;
  border-radius: 15px !important;
  margin: 0 auto 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 0 22px rgba(15, 116, 255, 0.36),
    inset 0 0 18px rgba(255, 255, 255, 0.08) !important;
}

/* shine on icon square */
.concept-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.38), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 44%) !important;
  pointer-events: none !important;
}

/* actual SVG icon */
.concept-icon::before {
  content: "" !important;
  width: 43px !important;
  height: 43px !important;
  display: block !important;
  background: linear-gradient(180deg, #ffffff, #bfeaff) !important;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 14px rgba(0, 200, 255, 0.35)) !important;
  -webkit-mask: var(--concept-mask) center / contain no-repeat !important;
  mask: var(--concept-mask) center / contain no-repeat !important;
  z-index: 2 !important;
}

/* AI / chip icon */
.icon-ai {
  background: linear-gradient(135deg, #1f7cff, #6617ff) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='2' fill='black'/%3E%3Cpath d='M4 9h3v2H4zM4 13h3v2H4zM17 9h3v2h-3zM17 13h3v2h-3zM9 4h2v3H9zM13 4h2v3h-2zM9 17h2v3H9zM13 17h2v3h-2z' fill='black'/%3E%3C/svg%3E");
}

/* Health / medical cross icon */
.icon-health {
  background: linear-gradient(135deg, #00d8ff, #0778ff) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4v7h7v4h-7v7h-4v-7H3v-4h7z' fill='black'/%3E%3C/svg%3E");
}

/* Home icon */
.icon-home {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L12 4l9 7.5v8.5a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='black'/%3E%3C/svg%3E");
}

/* Swiss / bridge assistant icon */
.icon-swiss {
  background: linear-gradient(135deg, #ff5a4f, #b31313) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h4v6h6v4h-6v6h-4v-6H4v-4h6z' fill='black'/%3E%3C/svg%3E");
}

/* Auto / car icon */
.icon-car {
  background: linear-gradient(135deg, #0f74ff, #00c8ff) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l2-5h10l2 5h1a1 1 0 0 1 1 1v5h-2v2h-3v-2H8v2H5v-2H3v-5a1 1 0 0 1 1-1zm4-3l-1.1 3h8.2L15 8zm-2 6.5A1.5 1.5 0 1 0 7 17a1.5 1.5 0 0 0 0-3zm10 0A1.5 1.5 0 1 0 17 17a1.5 1.5 0 0 0 0-3z' fill='black'/%3E%3C/svg%3E");
}

/* Bridge icon */
.icon-bridge {
  background: linear-gradient(135deg, #111827, #0f74ff) !important;
  --concept-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3zm2-2c1.4-5.4 5-9 7-9s5.6 3.6 7 9h-3c-1-3.6-2.8-6-4-6s-3 2.4-4 6zm1-5h2v5H6zm10 0h2v5h-2z' fill='black'/%3E%3C/svg%3E");
}

/* Better text balance inside concept cards */
.concept-card h4 {
  font-size: 16.5px !important;
  line-height: 1.15 !important;
  margin-bottom: 9px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.12) !important;
}

.concept-card p {
  color: #d9e2f0 !important;
  font-size: 12.8px !important;
  line-height: 1.42 !important;
  margin-bottom: 10px !important;
}

.concept-card span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 27px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 200, 255, 0.85) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: rgba(15, 116, 255, 0.14) !important;
  box-shadow: 0 0 14px rgba(15, 116, 255, 0.22) !important;
}

/* Title above concept cards */
.concepts-wrap .product-label {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  margin-bottom: 26px !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18) !important;
}
/* =====================================================
   FINAL FIX - REMOVE VISIBLE LINE BETWEEN ABOUT TEXT AND IMAGE
   Makes image blend smoothly into the left side
===================================================== */

.about-showcase {
  position: relative !important;
  background:
    radial-gradient(circle at 63% 48%, rgba(0, 180, 255, 0.14), transparent 34%),
    linear-gradient(90deg,
      #020814 0%,
      #020814 38%,
      #030b18 56%,
      #020814 100%
    ) !important;
  overflow: hidden !important;
}

.about-showcase-grid {
  position: relative !important;
  gap: 0 !important;
  grid-template-columns: 0.90fr 1.10fr !important;
  border: none !important;
}

.about-left {
  position: relative !important;
  z-index: 5 !important;
  padding-right: 42px !important;
  background:
    linear-gradient(90deg,
      rgba(2, 8, 20, 1) 0%,
      rgba(2, 8, 20, 0.96) 70%,
      rgba(2, 8, 20, 0.72) 100%
    ) !important;
}

/* image moves slightly under the left text area */
.about-right-visual {
  position: relative !important;
  z-index: 1 !important;
  margin-left: -70px !important;
  width: calc(100% + 70px) !important;
  height: 315px !important;
  min-height: 315px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* actual image layer */
.about-right-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("images/futuristic_workspace_with_neon_blue_accents.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0.96 !important;
  filter: brightness(0.86) contrast(1.08) saturate(0.95) !important;
  z-index: 1 !important;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 8%,
    rgba(0, 0, 0, 0.72) 20%,
    black 38%,
    black 100%
  ) !important;

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 8%,
    rgba(0, 0, 0, 0.72) 20%,
    black 38%,
    black 100%
  ) !important;
}

/* dark overlay on left edge of image, removes hard vertical line */
.about-right-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      #020814 0%,
      rgba(2, 8, 20, 0.92) 9%,
      rgba(2, 8, 20, 0.55) 22%,
      rgba(2, 8, 20, 0.12) 40%,
      rgba(2, 8, 20, 0.00) 62%
    ),
    linear-gradient(180deg,
      rgba(2, 8, 20, 0.36) 0%,
      rgba(2, 8, 20, 0.00) 28%,
      rgba(2, 8, 20, 0.00) 72%,
      rgba(2, 8, 20, 0.44) 100%
    ) !important;
}

/* hide old inner CSS visual elements */
.about-right-visual > * {
  display: none !important;
}

/* remove any possible borders/lines */
.about-showcase,
.about-showcase-grid,
.about-right-visual {
  border-left: none !important;
  border-right: none !important;
}

/* CTA must also use same dark tone */
.cta-strip {
  background:
    linear-gradient(90deg, #020814 0%, #020814 48%, #030b18 100%) !important;
}
/* =====================================================
   FINAL FIX - EXTRA SMALL & CLEAR CONCEPT ICONS
===================================================== */

/* Remove too much glow and make icons cleaner */
.concept-icon {
  margin: 0 auto 8px !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Dashboard icon - LifePilot */
.icon-ai {
  width: 82px !important;
  height: 44px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 200, 255, 0.42) !important;
  box-shadow:
    0 0 7px rgba(15, 116, 255, 0.22),
    inset 0 0 7px rgba(0, 200, 255, 0.05) !important;
}

.icon-ai::before {
  width: 52px !important;
  height: 25px !important;
  filter: none !important;
}

.icon-ai::after {
  right: 7px !important;
  bottom: 7px !important;
  width: 25px !important;
  height: 16px !important;
  border-radius: 4px !important;
  border-color: rgba(0, 200, 255, 0.42) !important;
}

/* Square icons - Health, Home, Swiss */
.icon-health,
.icon-home,
.icon-swiss {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 8px rgba(15, 116, 255, 0.22),
    inset 0 0 7px rgba(255, 255, 255, 0.05) !important;
}

.icon-health::before {
  width: 27px !important;
  height: 25px !important;
  filter: none !important;
}

.icon-home::before {
  width: 29px !important;
  height: 29px !important;
  filter: none !important;
}

.icon-swiss::before {
  width: 28px !important;
  height: 28px !important;
  filter: none !important;
}

/* Car and Bridge icons */
.icon-car,
.icon-bridge {
  width: 78px !important;
  height: 38px !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.icon-car::before {
  width: 70px !important;
  height: 31px !important;
  filter:
    drop-shadow(0 0 3px rgba(0, 200, 255, 0.35)) !important;
}

.icon-bridge::before {
  width: 72px !important;
  height: 33px !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.28)) !important;
}

/* Make the cards cleaner after smaller icons */
.concept-card {
  padding-top: 14px !important;
  min-height: 232px !important;
}

.concept-card h4 {
  font-size: 16px !important;
  line-height: 1.12 !important;
  margin-bottom: 7px !important;
}

.concept-card p {
  font-size: 12.2px !important;
  line-height: 1.34 !important;
  margin-bottom: 9px !important;
}

.concept-card span {
  min-height: 25px !important;
  font-size: 11.5px !important;
  padding: 0 10px !important;
}

/* Reduce icon shine so they look sharper */
.concept-icon::after {
  opacity: 0.45 !important;
}
/* =====================================================
   FINAL HERO IMAGE - CLEAN AGUSI DIGITAL STUDIO VISUAL
   Replaces old laptop/mug/plant CSS with generated image
===================================================== */

/* Keep hero clean and dark */
.hero {
  min-height: 560px !important;
  background:
    radial-gradient(circle at 78% 42%, rgba(15, 116, 255, 0.20), transparent 28%),
    radial-gradient(circle at 18% 75%, rgba(0, 200, 255, 0.08), transparent 30%),
    linear-gradient(90deg, #020814 0%, #020814 44%, #030b18 72%, #020814 100%) !important;
  overflow: hidden !important;
}

.hero-grid {
  min-height: 560px !important;
  display: grid !important;
  grid-template-columns: 0.90fr 1.10fr !important;
  align-items: center !important;
  gap: 34px !important;
}

/* This replaces the old right-side laptop area */
.hero-art {
  height: 455px !important;
  min-height: 455px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide old CSS-made laptop, mug, plant, book and blue lines */
.hero-art > * {
  display: none !important;
}

/* New generated Agusi visual */
.hero-art::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  background-image: url("images/futuristic_tech_workspace_with_neon_blue_glow.png") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: brightness(0.96) contrast(1.05) saturate(0.95) !important;
  z-index: 1 !important;
}

/* Soft blend so the image does not look like a hard rectangle */
.hero-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      #020814 0%,
      rgba(2, 8, 20, 0.65) 7%,
      rgba(2, 8, 20, 0.10) 20%,
      rgba(2, 8, 20, 0.00) 45%,
      rgba(2, 8, 20, 0.10) 86%,
      #020814 100%
    ),
    linear-gradient(180deg,
      #020814 0%,
      rgba(2, 8, 20, 0.00) 18%,
      rgba(2, 8, 20, 0.00) 78%,
      #020814 100%
    ) !important;
}

/* Hero text spacing */
.hero-content {
  position: relative !important;
  z-index: 5 !important;
}

.hero-content h1 {
  max-width: 590px !important;
}

.hero-content p {
  max-width: 535px !important;
}

/* Responsive */
@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 44px 0 28px !important;
  }

  .hero-art {
    height: 390px !important;
    min-height: 390px !important;
  }
}

@media (max-width: 700px) {
  .hero-art {
    height: 280px !important;
    min-height: 280px !important;
  }

  .hero-art::before {
    background-size: cover !important;
    background-position: center center !important;
  }
}
/* =====================================================
   CLEAN SVG ICONS FOR CONCEPT CARDS
===================================================== */

.concept-icon {
  font-size: 0 !important;
}

.concept-icon svg {
  width: 46px !important;
  height: 46px !important;
  display: block !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.28)) !important;
}

.icon-health svg path:first-child {
  fill: #ffffff !important;
  stroke: none !important;
}

.icon-health svg path:last-child {
  fill: #18cfff !important;
  stroke: none !important;
}

/* smaller, clearer icon containers */
.concept-icon.icon-ai,
.concept-icon.icon-health,
.concept-icon.icon-home,
.concept-icon.icon-swiss {
  width: 58px !important;
  height: 58px !important;
  border-radius: 13px !important;
  margin-bottom: 10px !important;
}

.concept-icon.icon-car,
.concept-icon.icon-bridge {
  width: 86px !important;
  height: 50px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.concept-icon.icon-car svg,
.concept-icon.icon-bridge svg {
  width: 78px !important;
  height: 44px !important;
}

/* better backgrounds */
.icon-ai {
  background: linear-gradient(135deg, #153c75, #081a35) !important;
}

.icon-health {
  background: linear-gradient(135deg, #00c8ff, #0f74ff) !important;
}

.icon-home {
  background: linear-gradient(135deg, #8b2cff, #5b2bff) !important;
}

.icon-swiss {
  background: linear-gradient(135deg, #ff5b3d, #c61919) !important;
}
/* =====================================================
   LANGUAGE SWITCHER
===================================================== */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lang-switcher a {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfd9e8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  transition: 0.2s ease;
}

.lang-switcher a:hover,
.lang-switcher a.active-lang {
  color: #ffffff;
  background: linear-gradient(135deg, #0f74ff, #005bea);
  box-shadow: 0 0 16px rgba(15, 116, 255, 0.42);
}

@media (max-width: 900px) {
  .lang-switcher {
    order: 3;
    margin-left: auto;
  }

  .nav {
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .lang-switcher a {
    min-width: 28px;
    height: 25px;
    font-size: 10.5px;
    padding: 0 6px;
  }
}