/* Premium visual layer: presentation only; behavior remains in index.html. */
:root {
  --surface:#ffffff;
  --soft-surface:#f7faf9;
  --hairline:rgba(23,61,54,.10);
  --deep-shadow:0 28px 70px rgba(17,36,44,.16);
}

body {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--green) 14%,transparent), transparent 30rem),
    radial-gradient(circle at 88% 42%, color-mix(in srgb,var(--gold) 17%,transparent), transparent 27rem),
    var(--page);
}

.page {
  position:relative;
  border-right:1px solid rgba(255,255,255,.8);
  border-left:1px solid rgba(255,255,255,.8);
  box-shadow:var(--deep-shadow);
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:620px;
  padding:38px 24px 36px;
  background-position:center 20%;
}

.hero::before {
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,13,20,.04) 5%,rgba(4,13,20,.38) 42%,rgba(4,13,20,.94) 92%),
    linear-gradient(110deg,color-mix(in srgb,var(--ink) 50%,transparent),transparent 58%);
  content:"";
}

.hero::after {
  position:absolute;
  z-index:-1;
  right:-80px;
  bottom:110px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:color-mix(in srgb,var(--green) 24%,transparent);
  filter:blur(80px);
  content:"";
  pointer-events:none;
}

.hero-content { position:relative; z-index:1; }

.eyebrow {
  margin-bottom:16px;
  padding:8px 13px;
  border-color:rgba(255,255,255,.34);
  background:rgba(10,25,31,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.12);
  letter-spacing:.08em;
  backdrop-filter:blur(12px);
}

.hero h1 {
  max-width:470px;
  margin-bottom:14px;
  font-size:36px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.02em;
  text-wrap:balance;
  text-shadow:0 3px 22px rgba(0,0,0,.34);
}

.hero-copy {
  max-width:460px;
  margin-bottom:20px;
  color:rgba(255,255,255,.9);
  font-size:15px;
  line-height:1.8;
  text-shadow:0 2px 12px rgba(0,0,0,.26);
}

.metrics { gap:10px; margin:19px 0; }

.metric {
  min-height:72px;
  padding:12px 7px 10px;
  border-color:rgba(255,255,255,.2);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(7,19,25,.42));
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 10px 26px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}

.metric strong {
  color:var(--gold);
  font-size:20px;
  font-weight:900;
  text-shadow:0 2px 12px rgba(0,0,0,.2);
}

.metric span { margin-top:4px; color:rgba(255,255,255,.78); }

.join {
  position:relative;
  overflow:hidden;
  min-height:58px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(110deg,color-mix(in srgb,var(--green) 54%,#063d34),color-mix(in srgb,var(--green) 64%,#063d34) 52%,color-mix(in srgb,var(--green) 50%,#214a35));
  box-shadow:0 14px 30px color-mix(in srgb,var(--green) 34%,transparent),inset 0 1px rgba(255,255,255,.26);
  font-size:18px;
  letter-spacing:.02em;
}

.join::after {
  position:absolute;
  top:-80%;
  left:-35%;
  width:22%;
  height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  content:"";
  transform:rotate(20deg);
  animation:cta-shine 1.1s cubic-bezier(.16,1,.3,1) 1.1s 1 both;
}

.join:hover { filter:brightness(1.08) saturate(1.05); transform:translateY(-2px); }
.join:active { transform:translateY(0) scale(.99); }

@keyframes cta-shine {
  from { left:-35%; }
  to { left:120%; }
}

.hero-note { margin-top:12px; color:rgba(255,255,255,.68); letter-spacing:.03em; }

.section {
  position:relative;
  padding:38px 24px;
  border-color:var(--hairline);
}

.section.alt {
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--gold) 13%,transparent),transparent 16rem),
    linear-gradient(180deg,#f8fafb,#f3f7f6);
}

.title { margin-bottom:15px; font-size:22px; font-weight:900; letter-spacing:-.02em; }

.number {
  width:32px;
  height:32px;
  background:linear-gradient(145deg,var(--ink),color-mix(in srgb,var(--ink) 70%,var(--green)));
  box-shadow:0 7px 18px color-mix(in srgb,var(--ink) 22%,transparent);
  font-weight:900;
}

.lead { color:#465965; font-size:14px; line-height:1.88; }
.features { gap:13px; margin-top:20px; }

.feature {
  gap:14px;
  padding:17px;
  border-color:var(--hairline);
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#fbfdfc);
  box-shadow:0 12px 28px rgba(31,45,61,.07);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}

.feature:hover {
  border-color:color-mix(in srgb,var(--green) 25%,transparent);
  box-shadow:0 17px 34px rgba(31,45,61,.11);
  transform:translateY(-2px);
}

.icon {
  width:36px;
  height:36px;
  background:linear-gradient(145deg,var(--ink),color-mix(in srgb,var(--green) 82%,var(--ink)));
  box-shadow:0 8px 18px color-mix(in srgb,var(--ink) 19%,transparent);
}

.feature h3 { margin-bottom:5px; font-size:16px; }
.feature p { color:#566875; font-size:13px; line-height:1.72; }

.image-panel {
  position:relative;
  margin-top:24px;
  padding:5px;
  border:1px solid color-mix(in srgb,var(--gold) 45%,#fff);
  border-radius:22px;
  background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--gold) 18%,#fff));
  box-shadow:0 20px 42px rgba(31,45,61,.14);
}

.image-panel img { border-radius:17px; }

.pain-grid { gap:11px; margin-top:20px; }

.pain {
  min-height:124px;
  padding:17px 9px 14px;
  border:1px solid rgba(180,35,24,.07);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(31,45,61,.06);
}

.pain b {
  display:grid;
  width:38px;
  height:38px;
  margin:0 auto 10px;
  place-items:center;
  border-radius:12px;
  background:rgba(180,35,24,.08);
  font-size:19px;
}

.quote {
  position:relative;
  margin:22px 0;
  padding:20px 18px 20px 22px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg,#fff9ea,#fffdf8);
  box-shadow:inset 4px 0 var(--gold),0 12px 28px rgba(122,75,8,.08);
  color:#6f480c;
  font-weight:700;
  line-height:1.8;
}

.outline-join {
  width:100%;
  border:1.5px solid color-mix(in srgb,var(--ink) 80%,transparent);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 8%,transparent);
  transition:background .18s,color .18s,transform .18s;
}

.outline-join:hover { background:var(--ink); color:#fff; transform:translateY(-1px); }

.outline-join:focus-visible,
.sticky button:focus-visible,
.modal-close:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.author {
  background:
    radial-gradient(circle at 100% 15%,color-mix(in srgb,var(--green) 12%,transparent),transparent 18rem),
    linear-gradient(180deg,#fff,#f8fbfa);
}

.author-head {
  margin:20px 0 17px;
  padding:15px;
  border:1px solid var(--hairline);
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:0 13px 30px rgba(31,45,61,.07);
}

.avatar-photo {
  width:84px;
  height:84px;
  border:3px solid #fff;
  outline:2px solid var(--gold);
  box-shadow:0 12px 24px color-mix(in srgb,var(--gold) 28%,transparent);
}

.author-name { font-size:22px; font-weight:900; }
.author-meta { margin-top:5px; line-height:1.65; }
.bio { color:#405461; line-height:1.9; }
.tags { gap:9px; margin:19px 0; }

.tag {
  border-color:color-mix(in srgb,var(--ink) 13%,transparent);
  background:rgba(255,255,255,.86);
  box-shadow:0 5px 13px rgba(31,45,61,.05);
}

.community {
  padding:10px 13px;
  border:1px solid color-mix(in srgb,var(--green) 16%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--green) 9%,#fff);
  color:color-mix(in srgb,var(--ink) 82%,var(--green));
}

.comments-title { font-size:22px; font-weight:900; }
.comments { gap:16px; }

.avatar {
  width:44px;
  height:44px;
  box-shadow:0 8px 18px rgba(19,47,76,.18);
}

.comment-body {
  padding:14px 15px;
  border:1px solid rgba(31,45,61,.05);
  border-radius:15px;
  background:linear-gradient(145deg,#f3f7fa,#eef4f8);
}

.comment-form {
  margin-top:24px;
  padding:5px 5px 5px 16px;
  border-color:var(--hairline);
  box-shadow:0 10px 24px rgba(31,45,61,.07);
}

.send { min-width:68px; min-height:44px; background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--ink) 68%,var(--green))); }

.sticky {
  min-height:68px;
  background:linear-gradient(105deg,color-mix(in srgb,var(--green) 54%,#063d34),color-mix(in srgb,var(--green) 64%,#063d34),color-mix(in srgb,var(--green) 50%,#214a35));
  box-shadow:0 -10px 30px rgba(21,32,43,.18),inset 0 1px rgba(255,255,255,.16);
}

.sticky button { min-height:44px; letter-spacing:.02em; text-shadow:0 1px 8px rgba(0,0,0,.14); }

.counter-card,.timer-card {
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(8,23,30,.9);
  box-shadow:0 14px 30px rgba(21,32,43,.25),inset 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
}

.popup-item { border-radius:16px; }

.modal { background:rgba(7,13,20,.76); backdrop-filter:blur(8px); }

.modal-box {
  padding:32px 23px 30px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  background:linear-gradient(160deg,#fff,#f8fbfa);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
}

.modal-close { top:10px; right:10px; width:44px; height:44px; }
.modal-badge { border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); }
.modal-box h2 { font-size:24px; font-weight:900; letter-spacing:-.02em; }

@media (prefers-reduced-motion:reduce) {
  .join,.join::after { animation:none; }
  .feature,.outline-join,.join { transition:none; }
}

@media (max-width:640px) {
  .hero { min-height:590px; padding:32px 21px 30px; }
  .hero h1 { font-size:32px; }
  .section { padding:34px 20px; }
  .floating-tools { bottom:98px; }
}

@media (max-width:390px) {
  .hero { min-height:570px; padding-right:18px; padding-left:18px; }
  .hero h1 { font-size:29px; }
  .hero-copy { font-size:14px; }
  .metric { min-height:68px; }
  .metric strong { font-size:18px; }
  .metric span { font-size:10px; }
  .section { padding-right:18px; padding-left:18px; }
  .pain { min-height:128px; }
}