/* V2.2 Premium visual layer: cinematic water mist, ripples, light and motion */
:root {
  --motion-gold: rgba(224, 188, 119, .78);
  --motion-blue: rgba(111, 157, 177, .22);
}
.scroll-progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #9e7435, #f4dfad, #b7863f);
  z-index: 1000; box-shadow: 0 0 16px rgba(214,173,101,.55);
}
.hero { isolation: isolate; }
.hero-gradient { z-index: 0; }
.hero-canvas {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: .8; mix-blend-mode: screen;
}
.hero-waterline {
  position: absolute; z-index: 1; pointer-events: none;
  left: -10%; right: -10%; bottom: -90px; height: 260px;
  opacity: .26; filter: blur(15px);
  background:
    radial-gradient(ellipse at 20% 35%, rgba(206,224,221,.24), transparent 35%),
    radial-gradient(ellipse at 65% 20%, rgba(214,173,101,.20), transparent 42%),
    linear-gradient(180deg, transparent, rgba(169,190,190,.12), transparent);
  transform: rotate(-2deg);
  animation: waterlineDrift 15s ease-in-out infinite alternate;
}
.hero-live-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #d8b779; box-shadow: 0 0 0 4px rgba(214,173,101,.12), 0 0 12px rgba(214,173,101,.8);
  animation: liveBlink 2.4s ease-in-out infinite;
}
.hero-ripple {
  box-shadow: inset 0 0 70px rgba(214,173,101,.018), 0 0 50px rgba(214,173,101,.025);
  will-change: transform, opacity;
}
.fog { will-change: transform, opacity; }
.fog-1 {
  background: radial-gradient(ellipse at 40% 50%, rgba(219,229,223,.36), rgba(190,207,199,.12) 35%, transparent 72%);
}
.fog-2 {
  background: radial-gradient(ellipse at 50% 45%, rgba(226,206,169,.32), rgba(179,190,184,.10) 40%, transparent 73%);
}
.fog-3 {
  background: radial-gradient(ellipse at 50% 50%, rgba(177,204,213,.24), rgba(214,173,101,.08) 44%, transparent 72%);
}
.hero-dashboard-wrap {
  transform-style: preserve-3d;
  border-color: rgba(224,188,119,.2);
  box-shadow: 0 40px 100px rgba(0,0,0,.4), 0 0 70px rgba(214,173,101,.05);
}
.hero-dashboard-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, rgba(255,255,255,.28), rgba(214,173,101,.08) 38%, transparent 65%, rgba(173,203,207,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5;
}
.glass-panel::after {
  content: ""; position: absolute; inset: -50% -30%; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.045) 49%, transparent 56%);
  transform: translateX(-60%) rotate(3deg); animation: panelSheen 9s ease-in-out infinite;
}
.hero-dashboard { filter: drop-shadow(0 14px 24px rgba(0,0,0,.2)); }
.mini-float-card { transition: border-color .25s ease, background .25s ease; }
.mini-float-card:hover { border-color: rgba(240,217,162,.55); background: rgba(25,27,31,.88); }
.metrics-band {
  position: relative; overflow: hidden; background: #111319; color: #f6f0e4;
  border-top: 1px solid rgba(214,173,101,.12); border-bottom: 1px solid rgba(214,173,101,.12);
}
.metrics-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(214,173,101,.09), transparent 60%);
}
.metrics-grid {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(110px, .65fr)) 1.8fr;
  gap: 24px; align-items: center; padding-top: 26px; padding-bottom: 26px;
}
.metric-item { display: flex; align-items: baseline; gap: 8px; border-right: 1px solid rgba(255,255,255,.1); }
.metric-item strong {
  font-family: Georgia, "Times New Roman", serif; font-size: 31px; line-height: 1;
  color: #e6c786; font-weight: 500; letter-spacing: -.6px;
}
.metric-item span { font-size: 11px; color: #c5bcae; }
.metric-caption { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #9e988d; }
.metric-pulse { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #d7b675; box-shadow: 0 0 0 5px rgba(214,173,101,.1); }
.premium-card, .case-card, .module-card, .price-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.premium-card { transform: translateZ(0); }
.premium-card:hover {
  border-color: rgba(194,149,73,.65);
  box-shadow: 0 28px 70px rgba(44,34,17,.13), 0 0 0 1px rgba(194,149,73,.08);
}
.module-card:hover {
  transform: translateY(-5px);
  border-color: rgba(214,173,101,.4);
  background: linear-gradient(135deg, rgba(214,173,101,.09), rgba(255,255,255,.035));
  box-shadow: 0 20px 42px rgba(0,0,0,.18);
}
.case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(194,149,73,.55);
  box-shadow: 0 24px 55px rgba(35,28,18,.11);
}
.price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(194,149,73,.65);
  box-shadow: 0 24px 54px rgba(37,27,11,.10);
}
.story-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.story-card:hover { transform: translateX(5px); border-color: #d5bb8b; box-shadow: 0 16px 34px rgba(44,34,17,.08); }
.main-nav a:not(.nav-cta) { position: relative; }
.main-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px;
  background: var(--gold); transition: right .22s ease;
}
.main-nav a:not(.nav-cta):hover::after { right: 0; }
.button { overflow: hidden; }
.button-outline:hover { border-color: rgba(240,217,162,.6); background: rgba(214,173,101,.08); }
.button-dark-outline:hover { background: #201a10; color: #f3ddb0; }
.solution-art, .case-cover { position: relative; }
.solution-art::after, .case-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(6,8,11,.22));
}
.solution-art img, .case-cover img { transition: transform .65s cubic-bezier(.2,.75,.25,1), filter .65s ease; }
.premium-card:hover .solution-art img, .case-card:hover .case-cover img { transform: scale(1.07); filter: saturate(1.08); }
.contact-form { transition: box-shadow .3s ease, transform .3s ease; }
.contact-form:focus-within { box-shadow: 0 24px 60px rgba(41,32,16,.12); }
.form-result { animation: resultIn .35s ease both; }
.reveal { will-change: transform, opacity; }
@keyframes waterlineDrift {
  from { transform: translate3d(-1%, 0, 0) rotate(-2deg); opacity: .16; }
  to { transform: translate3d(2%, -8px, 0) rotate(1deg); opacity: .32; }
}
@keyframes liveBlink {
  0%,100% { opacity: .65; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes panelSheen {
  0%, 58% { transform: translateX(-70%) rotate(3deg); opacity: 0; }
  68% { opacity: 1; }
  86%,100% { transform: translateX(70%) rotate(3deg); opacity: 0; }
}
@keyframes resultIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .metric-caption { grid-column: 1 / -1; padding-top: 8px; }
}
@media (max-width: 560px) {
  .metrics-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; padding-bottom: 22px; }
  .metric-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); padding-bottom: 12px; }
  .metric-caption { grid-column: auto; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-waterline, .hero-live-dot, .glass-panel::after { animation: none !important; }
  .premium-card, .case-card, .module-card, .price-card, .story-card { transition: none !important; }
}
.premium-card, .module-card, .price-card, .case-card { position: relative; }
.premium-card::before, .module-card::before, .price-card::before, .case-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(214,173,101,.14), transparent 70%);
  transition: opacity .25s ease;
}
.premium-card.has-pointer::before, .module-card.has-pointer::before,
.price-card.has-pointer::before, .case-card.has-pointer::before { opacity: 1; }
.solution-body, .case-content, .module-card > *, .price-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .premium-card::before, .module-card::before, .price-card::before, .case-card::before { transition: none; }
}