:root{
  --c-bg: #0a0a0a;
  --c-text: #e6e6e6;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html, body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); }
.fade-in { opacity: 0; will-change: transform, opacity; }
.reveal-text { display: inline-block; overflow: hidden; }


/* Контейнер воды */
.dt-water{
  position: relative;
  width: 100%;
  min-height: 80vh;          /* подгони высоту под задачу */
  background: #000;          /* чёрный фон под воду */
  overflow: hidden;
}

/* Канвас воды на всю область */
.dt-water canvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Если используешь оверлей прямо в том же HTML-виджете */
.dt-water + .dt-water-overlay,
.dt-water .dt-water-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;      /* клики не ловим, если надо — включи ниже */
  display: grid;
  place-items: center;       /* центрируем контент */
  padding: clamp(16px, 4vw, 64px);
  z-index: 2;
}

.dt-water .dt-water-overlay *{
  pointer-events: auto;      /* но интерактив внутри работает */
}

.dt-water .dt-water-overlay h2{
  color: #e7e7e7;
  font-size: clamp(28px, 6vw, 72px);
  line-height: 1.05;
  text-align: center;
  margin: 0;
  letter-spacing: 0.01em;
  /* лёгкий «дорогой» эффект */
  text-shadow: 0 1px 8px rgba(255,255,255,.06), 0 0 40px rgba(255,255,255,.05);
}

.dt-water .dt-water-overlay .btn{
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #f2f2f2;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease;
}
.dt-water .dt-water-overlay .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}

/* Виньетка поверх для «дорогого» вида, если хочешь */
.dt-water::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.55), transparent 60%) ,
    radial-gradient(120% 80% at 50% 0%,   rgba(0,0,0,.45), transparent 60%);
}

/* Виньет + зерно на слой воды */
.dt-water::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.55), transparent 55%),
    radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.45), transparent 55%);
  mix-blend-mode: normal;
}

.dt-water::before{
  content:"";
  position:absolute; inset:-50%; pointer-events:none; z-index:3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.55;
  transform: translateZ(0);
}