/* Chop-Up Video landing page — dark editor theme */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: #0b0f1a;
  color: #f5f7ff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #7da2ff; }
a:not(.cta):focus-visible { outline: 2px solid #7da2ff; outline-offset: 3px; border-radius: 4px; }
.cta:focus-visible { outline: 2px solid #7da2ff; outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 40px 90px;
  text-align: center;
  background: radial-gradient(ellipse at 50% -30%, #1e3a8a 0%, rgba(11, 15, 26, 0) 65%);
}
#aurora { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner, .shot { position: relative; }
.app-icon { width: 120px; height: 120px; border-radius: 27px; filter: drop-shadow(0 0 36px rgba(59, 107, 245, .7)); }
h1 { font-size: 64px; font-weight: 800; letter-spacing: -1.5px; margin: 24px 0 8px; }
.tagline { font-size: 26px; font-weight: 600; color: #7da2ff; margin-bottom: 18px; }
.sub { font-size: 18px; color: #94a3b8; max-width: 580px; margin: 0 auto 34px; line-height: 1.55; }
.cta {
  display: inline-block;
  background: #3b6bf5;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 46px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 38px rgba(59, 107, 245, .5);
}
.cta:hover { background: #3463e6; }
.cta.cta-soon { cursor: default; }
.cta.cta-soon:hover { background: #3b6bf5; }
.version { font-size: 14px; color: #8094ad; margin-top: 16px; }

/* ---------- App window ---------- */
.shot { margin: 80px auto 0; max-width: 1280px; padding: 0 20px; perspective: 1500px; }
.glass {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: rotateX(22deg) scale(.96);
  transform-origin: 50% 100%;
  will-change: transform;
  box-shadow: 0 48px 110px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.screen { display: block; width: 100%; height: auto; }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 76px 40px; max-width: 1160px; margin: 0 auto; }
.feat {
  --ac: #7da2ff;
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 28px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.feat h2 { font-size: 17px; color: #e2e8f0; margin-bottom: 8px; }
.feat p { font-size: 14px; color: #8fa0b5; line-height: 1.55; }
.fi {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(125, 162, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: background .25s ease, box-shadow .25s ease;
}
.fi svg { width: 22px; height: 22px; stroke: var(--ac); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat:hover {
  border-color: var(--ac);
  box-shadow: 0 0 36px rgba(125, 162, 255, .30), inset 0 0 24px rgba(125, 162, 255, .08);
  transform: translateY(-3px);
}
.feat:hover .fi {
  background: rgba(125, 162, 255, .30);
  box-shadow: 0 0 18px rgba(125, 162, 255, .40);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .fi { background: color-mix(in srgb, var(--ac) 16%, transparent); }
  .feat:hover { box-shadow: 0 0 36px color-mix(in srgb, var(--ac) 38%, transparent), inset 0 0 24px color-mix(in srgb, var(--ac) 9%, transparent); }
  .feat:hover .fi { background: color-mix(in srgb, var(--ac) 32%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 45%, transparent); }
}

/* ---------- Requirements ---------- */
.requirements {
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
  padding: 26px 40px;
  display: flex;
  gap: 44px;
  justify-content: center;
  flex-wrap: wrap;
}
.requirements span { color: #94a3b8; font-size: 14.5px; }
.requirements b { color: #cbd5e1; font-weight: 600; }

/* ---------- Footer ---------- */
footer { padding: 40px 40px 54px; text-align: center; }
footer p { color: #76879f; font-size: 13.5px; line-height: 1.65; margin: 0 auto 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  h1 { font-size: 44px; }
  .tagline { font-size: 20px; }
  .hero { padding: 80px 24px 70px; }
  .features { grid-template-columns: repeat(2, 1fr); padding: 56px 24px; }
}
@media (max-width: 560px) {
  h1 { font-size: 36px; }
  .sub { font-size: 16px; }
  .features { grid-template-columns: 1fr; }
  .requirements { gap: 18px; padding: 26px 24px; }
  .shot { margin-top: 56px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .glass { transform: none; }
}