:root {
  --i: #102f3b;
  --m: #5b6f78;
  --l: #d9e4e8;
  --s: #f4f8f9;
  --a: #087fba;
  --p: #e2f3f2;
  --w: #edf6f8;
  --dt-navy: #0b2a38;
  --dt-navy-2: #123d4d;
  --dt-blue: #087fba;
  --dt-teal: #0c8f83;
  --dt-ice: #eef7f8;
  --dt-line: #d8e5e9;
  --dt-shadow: 0 18px 50px rgba(12, 47, 61, .11);
}

body {
  background: #fff;
  color: var(--dt-navy);
  font-size: 16px;
  line-height: 1.62;
}

.w { max-width: 1240px; }

header {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(11, 42, 56, .09);
}

.nav { height: 84px; gap: 28px; }

.brand {
  width: 154px;
  height: 48px;
  flex: 0 0 154px;
  font-size: 0;
  background: url("deterso-logo.png") left center / contain no-repeat;
}

nav { gap: 28px; font-size: 14px; }
nav a { position: relative; padding: 30px 0 27px; }
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--dt-blue), var(--dt-teal));
  transition: right .2s ease;
}
@media (hover:hover) { nav a:hover::after { right: 0; } }

.pill {
  border-color: rgba(11, 42, 56, .24);
  padding: 11px 18px;
  background: #fff;
}

section { padding: 78px 0; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 68px;
  background:
    radial-gradient(circle at 85% 18%, rgba(12, 143, 131, .13), transparent 27%),
    linear-gradient(135deg, #ecf6f7 0%, #f8fbfb 58%, #edf5f7 100%);
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -215px;
  top: -225px;
  border: 1px solid rgba(8, 127, 186, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(8, 127, 186, .035), 0 0 0 100px rgba(12, 143, 131, .025);
  pointer-events: none;
}
.hero .w { position: relative; z-index: 1; }

#page-home > .hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  color: #fff;
  background-image:
    linear-gradient(90deg, rgba(4, 25, 36, .94) 0%, rgba(7, 36, 49, .89) 35%, rgba(7, 36, 49, .40) 66%, rgba(7, 36, 49, .08) 100%),
    url("brand/deterso-hero-kitchen.webp");
  background-position: center;
  background-size: cover;
}
#page-home > .hero::after { display: none; }
#page-home > .hero .w { width: 100%; }
#page-home > .hero h1 { max-width: 790px; color: #fff; }
#page-home > .hero .lead { max-width: 690px; color: rgba(255,255,255,.84); }
#page-home > .hero .eye { color: #71d7cc; }

.eye {
  color: var(--dt-teal);
  font-size: 12px;
  letter-spacing: .15em;
}

h1 {
  max-width: 1020px;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
h2 { letter-spacing: -.025em; line-height: 1.13; }
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.58; }

.sh { margin-bottom: 34px; align-items: center; }
.sh h2 { font-size: clamp(30px, 3vw, 40px); }

.grid4, .grid3, .grid2, .tools, .product-family { gap: 22px; }

.card, .prod, .family, .tool, .direct .box, .reco-card {
  border-color: var(--dt-line);
  border-radius: 18px;
}

.card, .family, .tool, .direct .box, .reco-card { position: relative; overflow: hidden; }
.card::after, .family::after, .tool::after, .direct .box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 3px;
  background: linear-gradient(90deg, var(--dt-blue), var(--dt-teal));
  transition: width .22s ease;
}
@media (hover:hover) {
  .card:hover::after, .family:hover::after, .tool:hover::after, .direct .box:hover::after { width: 100%; }
}

#page-home .grid4 .card {
  min-height: 285px;
  padding: 30px 27px 28px;
}
#page-home .grid4 .card > .eye {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--dt-blue), var(--dt-teal));
  box-shadow: 0 10px 24px rgba(8, 127, 186, .20);
}
#page-home .grid4 .card h3 { margin-top: 30px; }

.dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #092735, #123f4d);
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dark .w { position: relative; }
.chain { gap: 0; align-items: center; }
.chain div {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 26px 12px;
  background: rgba(255,255,255,.07);
}
.chain div + div::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 28%;
  height: 44%;
  width: 1px;
  background: rgba(255,255,255,.24);
}
.chain div:first-child { border-radius: 14px 0 0 14px; }
.chain div:last-child { border-radius: 0 14px 14px 0; background: #fff; }

.tools .tool {
  padding: 38px;
  background: linear-gradient(145deg, #f2f8fa, #fff);
  box-shadow: 0 12px 32px rgba(12,47,61,.07);
}

.btn, .primary, .deterso-order-button {
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dt-blue), #066b9f);
  box-shadow: 0 8px 20px rgba(8,127,186,.16);
}
.more { color: var(--dt-blue); }

.special, .accessory, .reco { background: var(--dt-ice); }
.consult, .partners { background: linear-gradient(135deg, #dff2f1, #edf8f8); }

.plan, .calc, .config-banner {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(125deg, var(--dt-navy), var(--dt-navy-2));
  box-shadow: var(--dt-shadow);
}
.plan::after, .calc::after, .config-banner::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  top: -115px;
  border: 1px solid rgba(113,215,204,.25);
  border-radius: 50%;
}
.plan > *, .calc > *, .config-banner > * { position: relative; z-index: 1; }

.real-product {
  border-color: var(--dt-line);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(12,47,61,.07);
}
.real-photo {
  height: 245px;
  padding: 26px;
  border-bottom-color: #e4edef;
  background: radial-gradient(circle at 50% 44%, #fff 0%, #fff 42%, #f1f7f8 100%);
}
.real-body { padding: 24px 25px 26px; }
.real-body h3 { font-size: 23px; }
.price { color: var(--dt-navy); font-size: 21px; }

.prod {
  box-shadow: 0 8px 26px rgba(12,47,61,.065);
}

.breadcrumbs {
  background: #f7fafb;
  border-bottom-color: #e3ecef;
}

.config-banner {
  padding: 44px 48px;
  background: linear-gradient(125deg, #087fba, #075d91 62%, #0c8f83);
}

.contact h2 { font-size: clamp(32px, 4vw, 44px); }
footer { background: #f7fafb; }

@media (max-width: 1050px) {
  nav { gap: 17px; }
  .nav { gap: 18px; }
}

@media (max-width: 900px) {
  .nav { height: 72px; }
  .brand { width: 132px; height: 40px; flex-basis: 132px; }
  .pill { margin-left: auto; }
  section { padding: 62px 0; }
  #page-home > .hero { min-height: 560px; background-position: 61% center; }
  #page-home > .hero { background-image: linear-gradient(90deg, rgba(4,25,36,.95), rgba(7,36,49,.80) 55%, rgba(7,36,49,.22)), url("brand/deterso-hero-kitchen.webp"); }
}

@media (max-width: 700px) {
  body { padding-bottom: 76px; }
  .w { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 54px 0 48px; }
  #page-home > .hero {
    min-height: 620px;
    align-items: flex-end;
    background-position: 67% center;
    background-image: linear-gradient(180deg, rgba(4,25,36,.26) 0%, rgba(4,25,36,.58) 40%, rgba(4,25,36,.96) 79%), url("brand/deterso-hero-kitchen.webp");
  }
  #page-home > .hero h1 { font-size: clamp(39px, 11vw, 54px); }
  #page-home > .hero .lead { font-size: 17px; }
  h1 { font-size: clamp(38px, 10vw, 52px); overflow-wrap: normal; }
  .lead { font-size: 17px; }
  .sh { margin-bottom: 26px; }
  .grid4, .grid3, .grid2, .tools, .product-family { gap: 16px; }
  .card, .prod, .family, .tool, .direct .box, .reco-card { border-radius: 15px; }
  #page-home .grid4 .card { min-height: 240px; }
  .tools .tool { padding: 28px 24px; }
  .chain { gap: 10px; }
  .chain div, .chain div:first-child, .chain div:last-child { border-radius: 11px; }
  .chain div + div::before { display: none; }
  .real-photo { height: 230px; }
  .plan, .calc, .config-banner { border-radius: 17px; padding: 28px 24px; }
  .mobile-back {
    min-height: 64px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    justify-content: flex-start;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
  }
  .mobile-back .contact-link {
    padding: 11px 18px;
    border-radius: 10px;
    color: #fff;
    background: var(--dt-navy);
  }
  .review-nav { bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; }
}

@media (max-width: 420px) {
  .nav { padding-left: 16px; padding-right: 16px; }
  .brand { width: 118px; flex-basis: 118px; }
  .pill { font-size: 13px; padding: 9px 12px; }
  #page-home > .hero { min-height: 590px; }
  #page-home > .hero h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .page:target .hero .w, #page-home .hero .w { animation: dt-rise .46s ease-out both; }
  @keyframes dt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}