/* =========================================================
   CoreDefence Promo (2025) — modern, minimal, premium
   - Background: animated glass planes (lines) + mesh + noise
   - Hero: strong typography + single CTA
   - Stage: visible pulse halo behind phone + floating glass chips
   ========================================================= */

:root{
  --bg0:#070812;
  --bg1:#0b1227;

  --txt:#eef2ff;
  --muted:rgba(238,242,255,.72);
  --muted2:rgba(238,242,255,.56);

  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.14);

  --a1:#7c5cff;
  --a2:#2ad3ff;
  --a3:#ff4ecd;

  --shadow: 0 26px 90px rgba(0,0,0,.58);
  --shadow2: 0 16px 46px rgba(0,0,0,.34);

  --max:1180px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--txt);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
a:focus-visible{ outline:2px solid rgba(42,211,255,.55); outline-offset:3px; border-radius:14px; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 18px 48px;
}

/* ===================== Background ===================== */
.bg{ position:fixed; inset:0; pointer-events:none; }

.bg-mesh{
  z-index:-4;
  background:
    radial-gradient(1100px 740px at 14% 16%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(900px 700px at 86% 18%, rgba(42,211,255,.14), transparent 60%),
    radial-gradient(980px 900px at 66% 88%, rgba(255,78,205,.12), transparent 64%),
    radial-gradient(720px 520px at 48% 54%, rgba(255,255,255,.05), transparent 66%);
  animation: meshMove 18s ease-in-out infinite alternate;
}
@keyframes meshMove{
  0%   { transform: translate3d(-1.2%,-1.1%,0) scale(1.02); filter:saturate(120%); }
  50%  { transform: translate3d( 1.0%, 0.6%,0) scale(1.05); filter:saturate(145%); }
  100% { transform: translate3d( 0.8%, 1.2%,0) scale(1.03); filter:saturate(130%); }
}

/* Glass planes/lines: "плоскости" (две сетки под углом + мягкий дрейф) */
.bg-planes{
  z-index:-3;
  opacity:.75;
  mix-blend-mode: overlay;
  filter: blur(.15px);

  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.075) 0px,
      rgba(255,255,255,.075) 1px,
      transparent 1px,
      transparent 56px),
    repeating-linear-gradient(25deg,
      rgba(255,255,255,.055) 0px,
      rgba(255,255,255,.055) 1px,
      transparent 1px,
      transparent 72px),
    linear-gradient(135deg,
      rgba(255,255,255,.06),
      transparent 55%,
      rgba(255,255,255,.04));
  background-size: 1400px 1400px, 1600px 1600px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;

  animation: planesDrift 14s ease-in-out infinite;

  -webkit-mask-image: radial-gradient(circle at 55% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 35%, rgba(0,0,0,.25) 72%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle at 55% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 35%, rgba(0,0,0,.25) 72%, rgba(0,0,0,0) 100%);
}
@keyframes planesDrift{
  0%   { transform: translate3d(0,0,0) rotate(0deg); background-position: 0 0, 0 0, 0 0; opacity:.68; }
  50%  { transform: translate3d(1.2%,-.8%,0) rotate(.35deg); background-position: 120px -80px, -90px 120px, 0 0; opacity:.82; }
  100% { transform: translate3d(0,0,0) rotate(0deg); background-position: 220px -140px, -180px 200px, 0 0; opacity:.72; }
}

.bg-noise{
  z-index:-2;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ===================== Topbar ===================== */
.topbar{
  position: sticky;
  top: 12px;
  z-index: 40;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding: 14px 16px;
  border-radius: 999px;

  background: var(--glass);
  border: 1px solid var(--stroke);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 10px 34px rgba(0,0,0,.24);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}
.brand-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  display:grid; place-items:center;
}
.brand-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-name{
  font-weight: 950;
  font-size: 19px;
  letter-spacing: .2px;
}

.menu{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  justify-content:center;
}
.menu-link{
  color: rgba(238,242,255,.72);
  font-weight: 850;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.menu-link:hover{
  color: var(--txt);
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.menu-link.is-active{
  color: var(--txt);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}

/* ===================== Hero ===================== */
.hero{
  min-height: calc(100vh - 96px);
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  align-items:center;
  gap: 34px;
  padding: 34px 0 10px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,242,255,.62);

  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.k-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.0) 65%),
              linear-gradient(90deg, var(--a2), var(--a1));
  box-shadow: 0 0 0 6px rgba(42,211,255,.10);
}

.title{
  margin: 18px 0 0;
  font-size: 78px;
  line-height: 1.02;
  letter-spacing: -1.3px;
  font-weight: 980;

  background: linear-gradient(90deg,
    rgba(238,242,255,1),
    rgba(238,242,255,.92),
    rgba(238,242,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 12px 44px rgba(0,0,0,.25);
}

.subtitle{
  margin: 14px 0 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.subtitle-dim{ color: rgba(238,242,255,.52); }

.cta{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:flex-start;
}

.micro{
  font-size: 13px;
  color: var(--muted2);
}
.micro a{ color: rgba(238,242,255,.78); }
.micro a:hover{ color: var(--txt); text-decoration: underline; }

/* ===================== Button ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: var(--shadow2);
  font-weight: 950;
  letter-spacing: .15px;

  position: relative;
  overflow:hidden;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-apple{
  width: 18px;
  height: 18px;
  opacity: .92;
  fill: currentColor;
}
.btn-arrow{ opacity:.75; }

/* visible sheen on button */
.btn-sheen{
  position:absolute;
  inset:-70%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 33%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.06) 67%,
    transparent 100%);
  transform: translateX(-65%) rotate(10deg);
  opacity: .0;
  animation: btnSheen 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnSheen{
  0%{ transform: translateX(-80%) rotate(10deg); opacity:0; }
  18%{ opacity:.55; }
  100%{ transform: translateX(80%) rotate(10deg); opacity:0; }
}

/* ===================== Stage / Phone ===================== */
.hero-right{ display:flex; justify-content:flex-end; }
.stage{
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Pulse halo behind phone */
.halo{
  position:absolute;
  inset:-18%;
  z-index:-2;
  border-radius: 44px;

  background:
    radial-gradient(closest-side at 32% 30%, rgba(42,211,255,.30), transparent 62%),
    radial-gradient(closest-side at 72% 34%, rgba(124,92,255,.28), transparent 66%),
    radial-gradient(closest-side at 56% 80%, rgba(255,78,205,.20), transparent 70%);
  filter: blur(42px) saturate(165%);
  opacity:.92;
  mix-blend-mode: screen;
  animation: haloPulse 4.6s ease-in-out infinite;
}
@keyframes haloPulse{
  0%   { transform: translate3d(0,0,0) scale(1.00); opacity:.74; }
  50%  { transform: translate3d(14px,-12px,0) scale(1.12); opacity:.98; }
  100% { transform: translate3d(0,0,0) scale(1.03); opacity:.84; }
}

/* subtle sweep behind phone */
.spark{
  position:absolute;
  inset:-65%;
  z-index:-1;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.05) 28%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,.05) 62%,
    transparent 82%);
  transform: translateX(-62%) rotate(12deg);
  opacity:.22;
  animation: sparkMove 6.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sparkMove{
  0%{ transform: translateX(-72%) rotate(12deg); opacity:0; }
  20%{ opacity:.24; }
  60%{ opacity:.10; }
  100%{ transform: translateX(72%) rotate(12deg); opacity:0; }
}

.phone{
  width: min(450px, 78%);
  height:auto;
  display:block;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);

  transform: rotate(-10deg);
  transform-origin: 50% 60%;
  animation: phoneFloat 6.8s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%   { transform: translateY(0px) rotate(-10deg); }
  50%  { transform: translateY(-10px) rotate(-10deg); }
  100% { transform: translateY(0px) rotate(-10deg); }
}

/* ===================== Chips ===================== */
.chips{ position:absolute; inset:0; pointer-events:none; }
.chip{
  position:absolute;
  display:flex;
  align-items:baseline;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 14px 44px rgba(0,0,0,.26);
  color: rgba(238,242,255,.92);

  font-size: 13px;
  font-weight: 950;
  letter-spacing:.2px;
  white-space:nowrap;

  opacity:.96;
}
.chip b{ font-weight: 950; }
.chip em{
  font-style: normal;
  font-weight: 850;
  color: rgba(238,242,255,.55);
  margin-left: 4px;
}
.chip span{ filter: drop-shadow(0 10px 20px rgba(0,0,0,.28)); }

.c1{ left: -6px; top: 22%; animation: chipA 4.8s ease-in-out infinite; }
.c2{ right:-10px; top: 30%; animation: chipB 5.4s ease-in-out infinite; }
.c3{ left:  6px; bottom: 26%; animation: chipC 5.2s ease-in-out infinite; }
.c4{ right: 8px; bottom: 34%; animation: chipD 6.0s ease-in-out infinite; }

@keyframes chipA{ 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
@keyframes chipB{ 0%{transform:translateY(0)} 50%{transform:translateY( 8px)} 100%{transform:translateY(0)} }
@keyframes chipC{ 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
@keyframes chipD{ 0%{transform:translateY(0)} 50%{transform:translateY(10px)} 100%{transform:translateY(0)} }

/* ===================== Internal pages ===================== */
.page{
  min-height: calc(100vh - 96px);
  padding: 26px 0 10px;
}
.card{
  max-width: 940px;
  margin: 18px auto 0;
  padding: 24px 22px;
  border-radius: 22px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 52px rgba(0,0,0,.35);
}
.card h1{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing: -.4px;
}
.card .meta{
  color: rgba(238,242,255,.55);
  font-size: 13px;
  margin-bottom: 14px;
}
.card p, .card li{
  color: rgba(238,242,255,.78);
  line-height: 1.75;
}
.card h2{
  margin: 18px 0 10px;
  font-size: 18px;
}
.card ul{ margin: 8px 0 0; }
.card li{ margin: 6px 0; }

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align:center;
  }
  .cta{ align-items:center; }
  .hero-right{ justify-content:center; }
  .title{ font-size: 54px; }
  .brand{ min-width:auto; }
}
@media (max-width: 520px){
  .topbar{ padding: 12px; gap: 10px; }
  .menu-link{ padding: 8px 10px; }
  .title{ font-size: 40px; }
  .chip{ display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg-mesh, .bg-planes, .halo, .spark, .phone, .chip, .btn-sheen{
    animation: none !important;
  }
}