/* ============ Contact Page Modern Styles (animated orbs) ============ */
:root{
  --cp-bg: #0a0f1a;
  --cp-bg-2: #0c1322;
  --cp-text: #e7eaf0;
  --cp-muted: #9aa3b2;
  --cp-accent: var(--orange);      /* primary */
  --cp-accent-2: #00e5ff;    /* secondary */
  --cp-card: var(--background-black);
  --cp-border: var(--background-70);
  --cp-ring: rgba(124,77,255,.45);
  --cp-shadow: 0 10px 30px rgba(0,0,0,.35);
  --cp-radius: 18px;
  --cp-radius-lg: 22px;
  --cp-gap: clamp(16px, 2vw, 28px);
  --cp-max: 1220px;
  --cp-speed: .25s;

  /* CTA width */
  --btn-minw: 260px;
}

@media (prefers-color-scheme: light){
  :root{
    --cp-bg: #f8fafc;
    --cp-bg-2: #f0f4f8;
    --cp-text: #0e1829;
    --cp-muted: #516072;
    --cp-card: rgba(0,0,0,.03);
    --cp-card-strong: rgba(0,0,0,.05);
    --cp-border: rgba(0,0,0,.12);
    --cp-ring: rgba(124,77,255,.35);
    --cp-shadow: 0 10px 28px rgba(0,0,0,.12);
  }
}

.contact-page{
  color: var(--cp-text);
  overflow: clip;
  font-family: var(--title-font);
}

/* Containers */
.cp-container{ width: min(100% - 32px, var(--cp-max)); margin-inline: auto }

/* Typography */
.cp-title{
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05; 
  letter-spacing: -0.02em;
  font-weight: 800;
}
.cp-h2{ font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-weight: 700; margin: 0 0 16px }
.cp-subtitle,.cp-p{ color: var(--cp-muted); font-size: clamp(16px,1.2vw,18px); line-height:1.6; margin:0 }

/* Buttons */
.cp-cta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--btn-minw), max-content));
  align-items: stretch; gap: 14px;
}
.btn_contact{
  --_bg: var(--cp-accent); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap:10px;
  padding: 14px 22px; min-width: var(--btn-minw);
  border-radius: 14px; border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font-weight: 700; letter-spacing:.02em;
  transition: transform var(--cp-speed), box-shadow var(--cp-speed), background var(--cp-speed), color var(--cp-speed);
  box-shadow: 0 6px 18px #ffc70036;
  text-decoration: none; white-space: nowrap;
}
.btn_contact svg{ width:20px; height:20px; fill:currentColor }
.btn_contact:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,77,255,.5) }
.btn_contact:active{ transform: translateY(0) scale(.98) }
.btn--ghost{ --_bg: transparent; --_fg: var(--cp-text); --_bd: var(--cp-border); box-shadow: none }
.btn--ghost:hover{ background: var(--cp-card-strong) }
@media (max-width:560px){
  .cp-cta{ grid-template-columns: 1fr }
  .btn{ min-width: 100%; white-space: normal }
}

/* Hero */
.cp-hero{ padding: clamp(36px, 7vw, 72px) 0 }
.cp-hero__inner{ display:grid; gap:var(--cp-gap); grid-template-columns: 1.15fr .85fr; align-items:center }
@media (max-width:980px){ .cp-hero__inner{ grid-template-columns: 1fr } }
.cp-hero__text{ display:grid; gap:18px }
.cp-badges{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:6px 0 0 }
.badge{
  padding:8px 12px; border-radius:999px;
  background:var(--cp-card); border:1px solid var(--cp-border);
  font-weight:600; font-size:13px; color:var(--cp-text);
  -webkit-backdrop-filter:saturate(160%) blur(6px); backdrop-filter:saturate(160%) blur(6px);
}

/* Hero art with animated orbs */
.cp-hero__art{
  position: relative; aspect-ratio: 1 / 1; min-height: 280px;
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--cp-border);
  overflow: hidden; box-shadow: var(--cp-shadow);
  pointer-events: none;      /* чисто декоративний шар */
}
.cp-hero__art .glass{
  position: absolute; inset: 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(124,77,255,.18), rgba(0,229,255,.12));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
/* fallback без backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .cp-hero__art .glass{ background: linear-gradient(160deg, rgba(124,77,255,.22), rgba(0,229,255,.18)) }
}

/* ORBS (floating) */
.orb{
  position: absolute; border-radius: 999px;
  filter: blur(18px); opacity: .92; mix-blend-mode: screen;
  will-change: transform, opacity;
}
.orb--1{
  width: 200px; height: 200px;
  background: radial-gradient(circle at 30% 30%, var(--cp-accent), transparent 60%);
  top: 6%; left: 58%;
  animation: pulse 8s ease-in-out infinite, drift1 22s ease-in-out infinite;
}
.orb--2{
  width: 260px; height: 260px;
  background: radial-gradient(circle at 60% 50%, var(--cp-accent-2), transparent 60%);
  bottom: 8%; left: 10%;
  animation: pulse 10s ease-in-out infinite, drift2 28s ease-in-out infinite -3s;
}

@keyframes pulse{
  0%,100%{ transform: scale(1) }
  50%{ transform: scale(1.08) }
}
@keyframes drift1{
  0%{ transform: translate(0,0) }
  25%{ transform: translate(-10%, 6%) }
  50%{ transform: translate(8%, -6%) }
  75%{ transform: translate(-6%, -10%) }
  100%{ transform: translate(0,0) }
}
@keyframes drift2{
  0%{ transform: translate(0,0) }
  20%{ transform: translate(12%, -5%) }
  40%{ transform: translate(-6%, 4%) }
  65%{ transform: translate(8%, 10%) }
  100%{ transform: translate(0,0) }
}
/* якщо mix-blend-mode заборонено — робимо трохи прозоріше */
@supports not (mix-blend-mode: screen){
  .orb{ opacity: .7 }
}

/* Channels */
.cp-channels{ padding: clamp(20px, 5vw, 48px) 0 }
.channel-grid{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--cp-gap); list-style:none; padding:0; margin:0;
}
.channel-grid > li{ grid-column: span 6 }
@media (min-width:780px){ .channel-grid > li{ grid-column: span 4 } }
@media (min-width:1100px){ .channel-grid > li{ grid-column: span 3 } }

.channel-card{
  background: linear-gradient(180deg, var(--cp-card-strong), var(--cp-card));
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  transition: transform var(--cp-speed), border-color var(--cp-speed), background var(--cp-speed);
  overflow: clip;
}
.channel-link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:16px; color:inherit; text-decoration:none;
}
.channel-card:hover{ transform: translateY(-3px); border-color:#ffc700 }
.channel-icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.06); border:1px solid var(--cp-border);
}
.channel-icon svg{ width:22px; height:22px; fill:currentColor }
.channel-icon.tg{ color:#2aa3e0 } .channel-icon.ig{ color:#e1306c }
.channel-icon.dc{ color:#7289da } .channel-icon.tw{ color:#9146ff }
.channel-icon.tt{ color:#00f2ea } .channel-icon.em{ color:var(--cp-accent) }
.channel-text{ display:flex; flex-direction:column; gap:4px }
.channel-text strong{ font-weight:800; letter-spacing:.01em }
.channel-text span{ color:var(--cp-muted); font-size:14px }
.channel-arrow{ font-weight:800; opacity:.7; transition: transform var(--cp-speed), opacity var(--cp-speed) }
.channel-link:hover .channel-arrow{ transform: translateX(4px); opacity:1 }

/* Corporate */
.cp-corporate{ padding: clamp(12px, 5vw, 48px) 0 }
.corp-card{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--cp-gap);
  align-items:center;
  background: linear-gradient(180deg, var(--cp-card-strong), var(--cp-card));
  border:1px solid var(--cp-border); border-radius: var(--cp-radius-lg);
  padding: clamp(18px, 3.8vw, 34px); position:relative; overflow:hidden;
  box-shadow: var(--cp-shadow);
}
@media (max-width:980px){ .corp-card{ grid-template-columns: 1fr } }
.corp-card__text{ display:grid; gap:12px }
.corp-mail{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  border:1px dashed var(--cp-border);
  background:var(--cp-card);
  text-decoration:none; color:var(--cp-text);
  font-weight:700; transition: border-color var(--cp-speed), transform var(--cp-speed);
}
.corp-mail svg{ width:18px; height:18px; fill:currentColor }
.corp-mail:hover{ border-color: var(--cp-ring); transform: translateY(-2px) }

.corp-card__art{
  position: relative; min-height: 220px; border-radius:16px;
  border:1px solid var(--cp-border);
  background: linear-gradient(160deg, rgba(124,77,255,.16), rgba(0,229,255,.12));
  overflow:hidden; pointer-events:none;
}
.corp-card__art .orb--sm{
  width: 180px; height: 180px; right: -10px; top: -20px;
  background: radial-gradient(circle at 40% 35%, var(--cp-accent), transparent 60%);
  animation: pulse 9s ease-in-out infinite, drift3 26s ease-in-out infinite -5s;
}
.grid-shine{
  position:absolute; inset:0;
  background:
    radial-gradient(400px 240px at 20% 80%, rgba(255,255,255,.25), transparent 60%),
    conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.08), transparent 30% 70%, rgba(255,255,255,.08));
  mix-blend-mode: screen; opacity:.8;
  animation: shine 10s linear infinite;
}
@keyframes drift3{
  0%{ transform: translate(0,0) }
  30%{ transform: translate(-12%, 10%) }
  60%{ transform: translate(6%, -6%) }
  100%{ transform: translate(0,0) }
}
@keyframes shine{
  0%{ opacity:.65 } 50%{ opacity:.9 } 100%{ opacity:.65 }
}

/* Map */
.cp-map{ padding: clamp(16px, 6vw, 56px) 0 70px }
.map-frame{
  position:relative; overflow:hidden; border-radius: var(--cp-radius-lg);
  border:1px solid var(--cp-border); background:var(--cp-card); box-shadow: var(--cp-shadow);
}
.map-frame iframe{ display:block; width:100%; height:420px }

/* Icons */
.i{ width:20px; height:20px; fill:currentColor }

/* Tippy theme tweak */
.tippy-box[data-theme~='light-border']{ color:#0e1829; font-weight:600 }

/* Reveal motion */
.cp-hero,.cp-channels,.cp-corporate,.cp-map{ animation: rise .5s ease-out both }
@keyframes rise{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform: translateY(0) } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .orb,.grid-shine,.cp-hero,.cp-channels,.cp-corporate,.cp-map{ animation: none !important }
}