/* Стейдж 3: п'ять блоків у стилі MotionSites, перемальовані під нашу палітру.
   Підключається тільки на /stage3.html, головну сторінку не чіпає. */

/* ---------- 1. Світні картки послуг (Glow Features) ---------- */
.svc {
  --mx: 50%; --my: 0%;
  border-color: rgba(244, 242, 236, 0.06);
}
/* кольорова рамка, що світиться: оранжевий → мідь → молочний */
.svc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--ga, 0deg) at 50% 50%, #F0642D, #EDB38A, #F4F2EC 30%, #C8794A 48%, #F0642D 62%, #7A4424 80%, #F0642D);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
  animation: s3-spin 9s linear infinite;
}
/* м'яке сяйво за курсором */
.svc .s3-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(240, 100, 45, 0.20), transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.svc { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 30px 60px -40px rgba(240, 100, 45, 0.45); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover::after { opacity: 1; filter: drop-shadow(0 0 6px rgba(240, 100, 45, 0.8)); }
  .svc:hover .s3-glow { opacity: 1; }
}
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes s3-spin { to { --ga: 360deg; } }

/* ---------- 2. «Чому ми» зі сферою в центрі (NexaCore Control) ---------- */
@media (min-width: 980px) {
  #why .why { grid-template-columns: 1fr; gap: 50px; }
  #why .why-head { text-align: center; }
  #why .why-head h2 { margin-left: auto; margin-right: auto; }
  #why .why-list {
    grid-template-columns: 1fr 360px 1fr; grid-template-rows: auto auto; gap: 22px 34px; align-items: center;
  }
  #why .why-list > .why-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  #why .why-list > .why-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  #why .why-list > .why-card:nth-child(4) { grid-column: 3; grid-row: 1; }
  #why .why-list > .why-card:nth-child(5) { grid-column: 3; grid-row: 2; }
  #why .nx-orb { grid-column: 2; grid-row: 1 / span 2; }
}
.nx-orb { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; }
.nx-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-orb::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(240, 100, 45, 0.35), rgba(240, 100, 45, 0.05) 55%, transparent 70%);
  filter: blur(18px);
}
/* тонкі лінії від сфери до карток */
@media (min-width: 980px) {
  #why .why-card { position: relative; }
  #why .why-card::after {
    content: ""; position: absolute; top: 50%; width: 34px; height: 1px;
    background: linear-gradient(90deg, rgba(240, 100, 45, 0), rgba(240, 100, 45, 0.7));
  }
  #why .why-list > .why-card:nth-child(1)::after, #why .why-list > .why-card:nth-child(2)::after { right: -34px; }
  #why .why-list > .why-card:nth-child(4)::after, #why .why-list > .why-card:nth-child(5)::after { left: -34px; transform: scaleX(-1); }
}
@media (max-width: 979px) { .nx-orb { width: min(78vw, 300px); margin-bottom: 8px; order: -1; } }

/* ---------- 3. Кейси: картки, що гортаються в 3D (Animated Cards) ---------- */
.show .wins { perspective: 1400px; perspective-origin: 50% 0%; }
.win { transform-origin: 50% 0%; transform-style: preserve-3d; transition: transform 1.2s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease); }
.win.p0 { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(237, 179, 138, 0.25), 0 0 60px -10px rgba(240, 100, 45, 0.35); }
.win.p1 { transform: translate3d(0, -70px, -160px) rotateX(38deg); opacity: 0.55; }
.win.p2 { transform: translate3d(0, -120px, -320px) rotateX(48deg); opacity: 0.25; }
.win.out { transform: translate3d(0, 160px, 120px) rotateX(-28deg); opacity: 0; }
.mshow .win.p1 { transform: translate3d(0, -34px, -120px) rotateX(36deg); }
.mshow .win.p2 { transform: translate3d(0, -60px, -240px) rotateX(46deg); }
.mshow .win.out { transform: translate3d(0, 90px, 80px) rotateX(-24deg); }
.win.p0::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(244, 242, 236, 0.10) 45%, transparent 60%);
  background-size: 250% 100%; animation: s3-sheen 5s var(--ease) infinite;
}
@keyframes s3-sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

/* ---------- 4. 3D-сітка в «Як це працює» (Cognitra Feature) ---------- */
.cg-wrap { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin-top: 10px; }
.cg-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-wrap::before {
  content: ""; position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 100, 45, 0.45), transparent 70%); filter: blur(24px);
}
@media (max-width: 979px) { .cg-wrap { max-width: 320px; margin: 0 auto; } }

/* ---------- 5. Фінальний блок з живою хвилею (Liquid Glass CTA) ---------- */
.lq {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  min-height: min(92vh, 820px); display: grid; place-items: center; padding: 120px 20px;
  border-top: 1px solid var(--line); background: #0F0C0A;
}
.lq-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lq::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 50%, rgba(15, 12, 10, 0.72), rgba(15, 12, 10, 0.25) 70%, rgba(15, 12, 10, 0) 100%), radial-gradient(ellipse at 50% 50%, rgba(15, 12, 10, 0) 45%, rgba(15, 12, 10, 0.8) 95%);
}
.lq-in { max-width: 760px; }
.lq .kicker { margin-bottom: 18px; color: var(--copper-hi); }
.lq-h { font-size: clamp(38px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 auto 22px; max-width: 12em; }
.lq-h em { font-style: normal; font-family: "Caveat", cursive; font-weight: 600; font-size: 1.05em; color: var(--copper-hi); white-space: nowrap; }
.lq-p { color: rgba(244, 242, 236, 0.75); font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 0 auto 34px; }
.lq-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lq-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 99px;
  font-weight: 800; font-size: 16px; text-decoration: none; transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.lq-main { background: #F4F2EC; color: #171411; }
.lq-ghost {
  color: #F4F2EC; border: 1px solid rgba(244, 242, 236, 0.3);
  background: rgba(244, 242, 236, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lq-btn:hover { transform: translateY(-3px); }
.lq-ghost:hover { background: rgba(244, 242, 236, 0.14); }

/* мітка, що це тестова сторінка */
.s3-badge {
  position: fixed; left: 14px; bottom: 14px; z-index: 300; padding: 7px 12px; border-radius: 99px;
  background: rgba(240, 100, 45, 0.92); color: #171411; font: 800 12px/1 "Manrope", sans-serif; letter-spacing: 0.06em;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .svc::after, .win.p0::after { animation: none; }
}