/* ============================================================
   Wellintune Home Page — Style 1 (Attune / Wellintune teal)
   Load this file for the default Wellintune domain.
   ============================================================ */

/* ----- Theme tokens ---------------------------------------- */
:root {
  --s-page-bg:       #edeefb;
  --s-page-gradient: radial-gradient(720px 560px at 100% 0%, #e2e6fa 0%, transparent 58%),
                     radial-gradient(620px 500px at 0%  100%, #eaf0fb 0%, transparent 55%);
  --s-dot-color:     #2A8C9A;
  --s-link-color:    #2A8C9A;
  --s-btn-bg:        #D06D70;
  --s-btn-hover-bg:  #be5c5f;
  --s-btn-shadow:    rgba(208,109,112,.7) 0px 12px 24px -10px,
                     rgba(208,109,112,.5) 0px 2px  4px  -1px;
  --s-chip-bg:       #f6dadb;
  --s-chip-color:    #b45858;
  --s-badge-bg:      rgba(242,238,219,.9);
  --s-badge-color:   #6b5a2d;
  --s-photo-bg:      #f2eedb;
  --s-footer-bg:     #103039;
  --s-footer-color:  rgba(255,255,255,.78);
  --s-trust-color:   #8a9099;
  --s-body-color:    #20303f;
  --s-sub-color:     rgba(32,48,63,.72);
  --s-help-color:    rgba(32,48,63,.55);
  --s-sep-color:     rgba(32,48,63,.18);
  --s-logout-color:  rgba(32,48,63,.62);
}

/* ----- Logo ------------------------------------------------ */
.logo-wt { display: block; }
.logo-dc { display: none;  }

/* ----- Reset / base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 16px;
  color: var(--s-body-color);
  background: var(--s-page-bg);
  -webkit-font-smoothing: antialiased;
}

/* ----- Page wrapper ---------------------------------------- */
.home-page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--s-page-bg);
  background-image: var(--s-page-gradient);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ----- Header --------------------------------------------- */
.dc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  z-index: 10;
}

/* Logo */
.wt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.wt-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.wt-word {
  font-size: 22px;
  font-weight: 700;
  color: var(--s-body-color);
  letter-spacing: -0.3px;
}
.accent-w { color: #3CB7C8; }
.wt-logo.on-dark .wt-word { color: #fff; }
.wt-logo.on-dark .accent-w { color: #3CB7C8; }

/* Nav */
.dc-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.dc-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--s-logout-color);
  text-decoration: none;
  transition: color .18s;
}
.dc-logout:hover { color: var(--s-body-color); }
.dc-logout svg { width: 16px; height: 16px; }

/* ----- Main content --------------------------------------- */
.i3-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 56px 48px;
}

.i3-wrap {
  display: grid;
  grid-template-columns: 1fr 440px;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1200px;
}

/* ----- Left panel ----------------------------------------- */
.i3-left {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

/* Chip */
.dc-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.48px;
  padding: 6px 12px 6px 10px;
  background: var(--s-chip-bg);
  color: var(--s-chip-color);
  width: fit-content;
  margin-bottom: 26px;
}

/* Heading */
.i3-left h1 {
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--s-body-color);
  margin-bottom: 20px;
}
.i3-left h1 em {
  font-style: italic;
  font-weight: 800;
}

/* Sub text */
.i3-sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--s-sub-color);
  max-width: 520px;
  margin-bottom: 36px;
}

/* CTA row */
.i3-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary button */
.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--s-btn-bg);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 17px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--s-btn-shadow);
  transition: background .18s, transform .12s;
  white-space: nowrap;
}
.dc-btn:hover {
  background: var(--s-btn-hover-bg);
  transform: translateY(-1px);
  color: #fff;
}
.dc-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Help text */
.i3-help {
  font-size: 14px;
  color: var(--s-help-color);
}
.dc-link {
  color: var(--s-link-color);
  font-weight: 600;
  text-decoration: none;
}
.dc-link:hover { text-decoration: underline; }

/* Trust badges */
.i3-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  color: var(--s-trust-color);
  font-size: 12px;
  font-weight: 600;
}
.i3-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.i3-trust-item svg { width: 14px; height: 14px; }
.i3-trust-sep {
  width: 1px;
  height: 14px;
  background: var(--s-sep-color);
}

/* ----- Photo card ----------------------------------------- */
.i3-photo-card {
  position: relative;
  width: 440px;
  height: 480px;
  border-radius: 28px;
  background: var(--s-photo-bg);
  box-shadow: rgba(16,48,57,.07) 0px 2px 4px 0px,
              rgba(16,48,57,.30) 0px 32px 64px -20px,
              rgba(16,48,57,.16) 0px 8px 20px -8px;
  flex-shrink: 0;
}

/* Decorative dot ring */
.i3-dots {
  position: absolute;
  width: 110px;
  height: 110px;
  color: var(--s-dot-color);
  z-index: 3;
  pointer-events: none;
}
.i3-dots.tl { top: -32px; left: -32px; }
.i3-dots svg { width: 100%; height: 100%; }

/* Photo main (carousel container) */
.i3-photo-main {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
}

/* Carousel */
.wt-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.wt-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.wt-carousel-slide.on { opacity: 1; }
.wt-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wt-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.wt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.wt-dot.on {
  background: #fff;
  transform: scale(1.3);
}

/* Scrim (gradient overlay at bottom of photo) */
.i3-photo-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(to top, rgba(16,30,40,.85) 0%, transparent 100%);
  z-index: 2;
}

/* Badge chip on photo */
.i3-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  background: var(--s-badge-bg);
  color: var(--s-badge-color);
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 5px 10px;
}

/* Photo caption */
.i3-photo-caption {
  position: absolute;
  bottom: 48px;
  left: 20px;
  right: 20px;
  z-index: 4;
  color: #fff;
}
.i3-cap-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.18px;
  margin-bottom: 4px;
}
.i3-cap-sub {
  font-size: 13px;
  font-weight: 400;
  opacity: .8;
}

/* Inset circle photo */
.i3-inset {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 5;
}
.i3-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Footer --------------------------------------------- */
.i3-footer {
  background: var(--s-footer-bg);
  color: var(--s-footer-color);
  padding: 30px 56px;
}
.i3-footer-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.i3-foot-brand {
  flex: 0 0 340px;
}
.i3-foot-tag {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: rgba(255,255,255,.9);
}
.i3-foot-fine {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.45);
  max-width: 300px;
}
.i3-foot-col {
  flex: 1;
  min-width: 120px;
}
.i3-foot-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.i3-foot-col a {
  display: block;
  font-size: 13px;
  color: var(--s-footer-color);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color .15s;
}
.i3-foot-col a:hover { color: #fff; }

/* ----- Responsive ----------------------------------------- */
@media (max-width: 900px) {
  .dc-header { padding: 20px 24px; }
  .i3-main   { padding: 100px 24px 40px; }
  .i3-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .i3-photo-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .i3-footer { padding: 24px; }
  .i3-footer-inner { flex-wrap: wrap; gap: 24px; }
  .i3-foot-brand { flex: 0 0 100%; }
}

@media (max-width: 480px) {
  .i3-left h1 { font-size: 36px; }
  .i3-sub     { font-size: 15px; }
  .i3-photo-card { height: 340px; }
}