/* ═══════════════════════════════════════
   HELIA — base.css
   Variables, Reset, Fonts, Cursor, Animations
═══════════════════════════════════════ */

:root {
  --c:    #F4F2EC;
  --c2:   #ECEAE2;
  --c3:   #DEDAD0;
  --c4:   #C8C4B8;
  --k:    #0C0B08;
  --k2:   #1C1B16;
  --m:    #8C8A80;
  --m2:   #B0ADA0;
  --g:    #9B8BF7;
  --g2:   #7C5FE0;
  --g3:   #B6A8F8;
  --ok:   #3E7A50;
  --wa:   #A85024;
  --p1:   #9B8BF7;
  --p2:   #B6A8F8;
  --p3:   #7C5FE0;
  --M:    'JetBrains Mono', monospace;
  --S:    'Outfit', sans-serif;
  --R:    'Cormorant Garamond', serif;
  --purple-glow: rgba(155, 139, 247, 0.18);
}
/* Dark page keeps original stronger purples */
body.AOS-BODY {
  --g:    #8B5CF6;
  --g2:   #6D28D9;
  --g3:   #A78BFA;
  --p1:   #8B5CF6;
  --p2:   #A78BFA;
  --p3:   #6D28D9;
  --purple-glow: rgba(124, 58, 237, 0.22);
}

/* ═══════════════════════════════════════
   BREATHING PURPLE GLOW (global atmosphere)
═══════════════════════════════════════ */
body { position: relative; }
body::after {
  content: "";
  position: fixed;
  top: 8%;
  right: -12%;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  animation: glowBreathe 9s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@media (max-width: 768px) {
  body::after { width: 600px; height: 600px; top: 4%; right: -30%; }
}

/* ═══════════════════════════════════════
   PURPLE ACCENTS — Cormorant Italic Serif
   (applied to existing purple-accent spans
    without breaking kinetic/letter animations)
═══════════════════════════════════════ */
.HXL-G,
.HM-TI-G,
.UNI-TI-G,
.NV-H1 .g,
.SVC-BUNDLE-TI span,
.F-ACC {
  font-family: var(--R) !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}
.HXL-G { color: var(--p3) }
.F-ACC { color: #A78BFA }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: linear-gradient(180deg, #FAFAF8 0%, #F4F2EC 100%);
  background-attachment: fixed;
  color: var(--k);
  font-family: var(--S);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* AOS dark page keeps its own dark background */
body.AOS-BODY {
  background: #06050A;
  background-attachment: scroll;
}
::selection { background: var(--p1); color: #fff }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
img, svg { display: block; max-width: 100% }
a { color: inherit }
ul { list-style: none }

/* Custom cursor removed — standard cursor */
#CUR { display: none }


/* ── BOOT SCREEN ── */
#BOOT { position: fixed; inset: 0; background: var(--k); z-index: 8000; display: flex; flex-direction: column; justify-content: flex-end; padding: 52px; transition: opacity .7s, transform .7s cubic-bezier(.16,1,.3,1) }
#BOOT.OUT { opacity: 0; transform: translateY(-8px); pointer-events: none }
.BL { font-family: var(--M); font-size: 11px; color: rgba(244,242,236,.25); letter-spacing: .5px; line-height: 1.85; opacity: 0; animation: BFA .06s forwards }
@keyframes BFA { to { opacity: 1 } }
.BL.ok::before   { content: '[  OK  ] '; color: rgba(62,122,80,.6) }
.BL.info::before  { content: '[ INFO ] '; color: rgba(139,92,246,.5) }
.BL.hi { color: rgba(244,242,236,.55); font-weight: 500 }
.BBAR  { height: 1px; background: rgba(244,242,236,.08); margin-top: 28px; width: 300px }
.BBARF { height: 100%; background: var(--g); width: 0; transition: width .04s linear }
.BVER  { font-family: var(--M); font-size: 9px; color: rgba(244,242,236,.1); letter-spacing: 2px; margin-top: 10px }

/* ── REVEAL ON SCROLL ── */
.R  { opacity: 0; transform: translateY(18px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1) }
.R.V { opacity: 1; transform: none }
.D1 { transition-delay: .1s }
.D2 { transition-delay: .2s }
.D3 { transition-delay: .3s }
.D4 { transition-delay: .4s }

/* Mobile: disable reveal animations, show everything immediately */
@media (max-width: 768px) {
  .R { opacity: 1; transform: none; transition: none; }
  .D1, .D2, .D3, .D4 { transition-delay: 0s; }
}

/* ── KINETIC TITLE ANIMATIONS ── */
@keyframes SU  { to { transform: translateY(0) } }
@keyframes FU  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }

/* ── HYPNOTIC ANIMATIONS ── */
@keyframes hypno-rotate {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}
@keyframes hypno-pulse {
  0%, 100% { transform: scale(1); opacity: .12 }
  50%      { transform: scale(1.08); opacity: .22 }
}
@keyframes hypno-drift {
  0%   { transform: translate(0, 0) rotate(0deg) }
  25%  { transform: translate(12px, -8px) rotate(2deg) }
  50%  { transform: translate(-6px, 6px) rotate(-1deg) }
  75%  { transform: translate(8px, 12px) rotate(1.5deg) }
  100% { transform: translate(0, 0) rotate(0deg) }
}
@keyframes hypno-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0) }
  50%      { box-shadow: 0 0 40px 8px rgba(139,92,246,.12) }
}
@keyframes hypno-morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60% }
  50%  { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40% }
  75%  { border-radius: 60% 40% 60% 30% / 40% 50% 60% 50% }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-14px) }
}
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}

/* Marquee */
@keyframes MQA { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Counter/Mockup bars */
@keyframes MDBF3 { from { width: 0 } }
@keyframes MCR2  { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* Nav dot pulse */
@keyframes NDOTA {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(62,122,80,.35) }
  60%      { opacity: .3; box-shadow: 0 0 0 5px rgba(62,122,80,0) }
}

/* Scan line for portrait */
@keyframes NCSC { from { top: 0 } to { top: 100% } }

/* Report block fade-in */
@keyframes RBF { to { opacity: 1; transform: none } }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .H-BOT, .TEAM-IN, .CONT-IN, .SHOP-IN { grid-template-columns: 1fr }
  .H-CTAS { align-items: flex-start }
  .PG, .PT-G { grid-template-columns: 1fr }
  .SR { position: static }
  .MG2 { grid-template-columns: repeat(2, 1fr) }
  .WZ-MULTI { grid-template-columns: 1fr }
  .RPT-GRID { grid-template-columns: 1fr }
  .PKG-GRID { grid-template-columns: repeat(2, 1fr) }
  .COMP-TABLE { overflow-x: auto }
}

@media (max-width: 768px) {
  nav, #S-HERO, #S-CHECK .WZ-TOP, .WZ-PROG, .WZ-BODY,
  #S-PROD, #S-SHOP, #S-TEAM, #S-CONTACT,
  .MKT, .RPT-IN, .RPT-CTA-BIG,
  .SHOP-PAGE-IN, .KONTAKT-IN { padding-left: 20px; padding-right: 20px }
  footer { padding: 18px 20px }
  .HT { letter-spacing: -2px }
  .UG, .FIG { grid-template-columns: 1fr 1fr }
  .NLINKS { display: none }
  .PKG-GRID { grid-template-columns: 1fr }
  .MG2 { grid-template-columns: 1fr }
}