/* ─────────────────────────────────────────────────────────────────────────────
   Airwynn — Section components
   (proof strip, problem, solution, features, workflow, industries, AI, footer)
   ───────────────────────────────────────────────────────────────────────────── */

/* Proof strip */

.proof-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px;background:var(--bg1);}
.proof-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;}
.proof-item{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text2);}
.proof-item strong{color:var(--text1);font-weight:600;}
.proof-item svg{color:var(--text3);flex-shrink:0;}


/* Problem */

.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;}
@media(max-width:880px){.problem-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.problem-grid{grid-template-columns:1fr;}}
.problem-card{padding:22px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);transition:border-color .2s,background .2s;}
.problem-card:hover{border-color:var(--border2);background:var(--surface2);}
.problem-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:1.2rem;}
.problem-card h3{font-size:.9375rem;font-weight:600;margin-bottom:7px;}
.problem-card p{font-size:.875rem;color:var(--text2);line-height:1.65;}


/* Solution */

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);}
.solution-cell{padding:30px 26px;background:var(--bg1);transition:background .2s;}
.solution-cell:hover{background:var(--bg2);}
.solution-num{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--text3);margin-bottom:11px;}
.solution-cell h3{font-size:1.0625rem;font-weight:600;margin-bottom:8px;}
.solution-cell p{font-size:.875rem;color:var(--text2);line-height:1.65;}
@media(max-width:768px){.solution-grid{grid-template-columns:1fr;}}


/* Features */

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;}
@media(max-width:880px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{padding:24px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
.feature-card:hover{border-color:rgba(59,130,246,.35);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.3);}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad);opacity:0;transition:opacity .2s;}
.feature-card:hover::before{opacity:1;}
.feature-icon{width:38px;height:38px;border-radius:9px;background:var(--grad-soft);border:1px solid rgba(59,130,246,.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#93c5fd;}
.feature-card h3{font-size:.9375rem;font-weight:600;margin-bottom:7px;}
.feature-card p{font-size:.875rem;color:var(--text2);line-height:1.65;}


/* Workflow */

.workflow-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:44px;position:relative;list-style:none;}
.workflow-steps::before{content:'';position:absolute;top:25px;left:calc(100%/12);right:calc(100%/12);height:1px;background:linear-gradient(90deg,transparent,var(--border2) 10%,var(--border2) 90%,transparent);}
.workflow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;position:relative;}
.workflow-num{width:50px;height:50px;border-radius:50%;background:var(--bg1);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;margin-bottom:13px;z-index:1;transition:border-color .2s,background .2s;color:var(--text2);}
.workflow-step:hover .workflow-num{border-color:var(--blue);background:rgba(59,130,246,.1);color:var(--blue);}
.workflow-step h4{font-size:.8125rem;font-weight:600;margin-bottom:4px;}
.workflow-step p{font-size:.75rem;color:var(--text3);line-height:1.5;}
@media(max-width:840px){.workflow-steps{grid-template-columns:repeat(3,1fr);gap:26px;}.workflow-steps::before{display:none;}}
@media(max-width:480px){.workflow-steps{grid-template-columns:repeat(2,1fr);}}


/* Industries */

.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;}
@media(max-width:768px){.industry-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.industry-grid{grid-template-columns:1fr;}}
.industry-card{padding:24px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:10px;transition:border-color .2s,background .2s;}
.industry-card:hover{border-color:var(--border2);background:var(--surface2);}
.industry-icon{font-size:1.6rem;line-height:1;}
.industry-card h3{font-size:.9375rem;font-weight:600;}
.industry-card p{font-size:.875rem;color:var(--text2);line-height:1.65;flex:1;}
.tag{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:3px 8px;border-radius:99px;width:fit-content;}
.tag-live{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.25);}
.tag-future{background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.25);}


/* AI section */

.ai-section{position:relative;overflow:hidden;}
.ai-section::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(99,102,241,.09),transparent 70%);pointer-events:none;}
.ai-explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:60px;}
@media(max-width:768px){.ai-explain-grid{grid-template-columns:1fr;}}
.ai-points{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.ai-point{display:flex;gap:11px;align-items:flex-start;}
.ai-point-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.ai-point p{font-size:.9375rem;color:var(--text2);line-height:1.65;}
.ai-point strong{color:var(--text1);}
.ai-card{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;}
.ai-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad);}
.ai-card-header{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#93c5fd;margin-bottom:15px;}
.ai-explain-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);gap:12px;}
.ai-explain-row:last-of-type{border-bottom:none;}
.ai-explain-key{color:var(--text2);font-size:.8125rem;flex-shrink:0;}
.ai-explain-val{color:var(--text1);font-weight:500;font-size:.8125rem;text-align:right;}
.ai-conf-wrap{display:flex;align-items:center;gap:7px;justify-content:flex-end;}
.ai-conf-bar{width:78px;height:3px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden;}
.ai-conf-fill{height:100%;background:var(--grad);border-radius:99px;}
.ai-card-actions{display:flex;gap:7px;margin-top:15px;}
.ai-action-btn{flex:1;padding:8px;border-radius:7px;font-size:.8125rem;cursor:not-allowed;opacity:.45;}
.ai-accept{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#93c5fd;}
.ai-reject{background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.2);color:#fca5a5;}


/* Footer */

footer{border-top:1px solid var(--border);padding:44px 24px 28px;}
.footer-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
@media(max-width:768px){.footer-inner{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr;}}
.footer-brand-img{width:28px;height:28px;margin-bottom:10px;}
.footer-brand-name{font-size:.875rem;font-weight:700;letter-spacing:.14em;color:#fff;margin-bottom:8px;}
.footer-brand-desc{font-size:.8125rem;color:var(--text3);line-height:1.6;max-width:220px;}
.footer-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:13px;}
.footer-link{display:block;font-size:.875rem;color:var(--text2);margin-bottom:7px;transition:color .15s;}
.footer-link:hover{color:var(--text1);}
.footer-bottom{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px;}
.footer-legal{font-size:.8125rem;color:var(--text3);}


/* ══════════════════════════════════════════════════════════════════
   PRODUCT FILM SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Stage + ambient glow */
.film-stage {
  position: relative;
  margin-top: 44px;
}
.film-ambient {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; height: 75%; border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(59,130,246,.16) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  filter: blur(14px);
}

/* The 16:9 frame */
.film-frame {
  position: relative; z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(59,130,246,.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 32px 80px rgba(0,0,0,.55),
    0 0 80px rgba(59,130,246,.07);
  background: var(--bg1);
}

/* Real video */
.film-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Gradient blend overlays */
.film-fade-t, .film-fade-b {
  position: absolute; left: 0; right: 0;
  z-index: 4; pointer-events: none; height: 22%;
}
.film-fade-t { top:    0; background: linear-gradient(to bottom, var(--bg), transparent); }
.film-fade-b { bottom: 0; background: linear-gradient(to top,   var(--bg), transparent); }

/* Play / pause button */
.film-play {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
}
.film-play-icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
  background: rgba(255,255,255,.09);
  border: 1.5px solid rgba(255,255,255,.24);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: background .2s, border-color .2s, transform .2s, opacity .2s;
}
.film-play:hover .film-play-icon {
  background: rgba(59,130,246,.3);
  border-color: rgba(59,130,246,.5);
  transform: scale(1.07);
}
.film-play[data-playing] .film-play-icon  { opacity: 0; }
.film-play[data-playing]:hover .film-play-icon { opacity: .55; }

/* ── Animated placeholder ──────────────────────────────────── */
.fp-wrap {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  /* Dark animated gradient background */
  background: linear-gradient(
    135deg,
    #050510 0%, #080820 30%, #060618 60%, #050510 100%
  );
  background-size: 400% 400%;
  animation: fpGradient 14s ease infinite;
  transition: opacity .4s ease;
}
.fp-wrap.fp-gone {
  opacity: 0;
  pointer-events: none;
}
@keyframes fpGradient {
  0%, 100% { background-position:   0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* Canvas sits behind everything in the placeholder */
.fp-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Centred content overlay */
.fp-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; z-index: 1;
}
.fp-logo {
  width: 52px; height: 52px;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(59,130,246,0));
}
/* Intro plays once when .film-stage scrolls into view (reuses the existing
   scroll-reveal .visible toggle from js/main.js — no JS changes needed).
   fpLogoIntro ends on the exact dim state fpLogoGlow's 0%/100% starts from,
   so the hand-off from "fade in" to "resting pulse" has no visible seam. */
.film-stage.visible .fp-logo {
  animation:
    fpLogoIntro 1.8s cubic-bezier(.16,1,.3,1) forwards,
    fpLogoGlow 4s ease-in-out 1.8s infinite;
}
@keyframes fpLogoIntro {
  to { opacity: .85; filter: drop-shadow(0 0 10px rgba(59,130,246,.4)); }
}
@keyframes fpLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(59,130,246,.4)); }
  50%       { filter: drop-shadow(0 0 22px rgba(59,130,246,.75)); }
}
.fp-brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}
.fp-rule {
  width: 36px; height: 1px; margin: 6px 0;
  background: linear-gradient(to right,
    transparent, rgba(59,130,246,.55), transparent);
}
.fp-label {
  font-size: .875rem;
  color: rgba(255,255,255,.3);
  font-weight: 500;
  letter-spacing: .025em;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  margin: 0;
  clip-path: inset(0 100% 0 0);
}
/* Types out once, letter by letter, after the logo intro settles */
.film-stage.visible .fp-label {
  animation: fpType 1s steps(11, end) 1.3s forwards;
}
@keyframes fpType {
  to { clip-path: inset(0 0 0 0); }
}

/* Thin loading line beneath the text — fills once, then fades away,
   leaving only the logo's slow resting pulse (fpLogoGlow, above). */
.fp-loading {
  width: 60px; height: 2px; margin-top: 4px;
  border-radius: 1px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  opacity: 0;
}
.fp-loading-fill {
  display: block; width: 0; height: 100%;
  background: linear-gradient(to right, transparent, rgba(59,130,246,.8), transparent);
}
.film-stage.visible .fp-loading {
  animation: fpLoadingWrap 2.6s ease 2.2s forwards;
}
.film-stage.visible .fp-loading-fill {
  animation: fpLoadingFill 1.1s cubic-bezier(.4,0,.2,1) 2.4s forwards;
}
@keyframes fpLoadingWrap {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fpLoadingFill {
  to { width: 100%; }
}

/* Pulsing rings */
.fp-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,.25);
  opacity: 0;
  pointer-events: none;
}
.fp-ring-1 {
  width: 120px; height: 120px;
  animation: fpRing 4s ease-out 0s  infinite;
}
.fp-ring-2 {
  width: 120px; height: 120px;
  animation: fpRing 4s ease-out 2s  infinite;
}
@keyframes fpRing {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* Responsive */
@media (max-width: 640px) {
  .film-frame  { border-radius: 14px; }
  .film-stage  { margin-top: 32px; }
}


/* ══════════════════════════════════════════════════════════════════
   CHOOSE YOUR EXPERIENCE — two-card section (#product)
   ══════════════════════════════════════════════════════════════════ */

.experience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;}
@media(max-width:768px){.experience-grid{grid-template-columns:1fr;}}

.experience-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:32px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;}
.experience-card:hover{border-color:rgba(59,130,246,.35);background:var(--surface2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.3);}

.experience-card-title{font-size:1.25rem;font-weight:700;margin-bottom:6px;}
.experience-card-subtitle{font-size:.9375rem;font-weight:600;color:var(--blue);margin-bottom:10px;}
.experience-card-desc{font-size:.875rem;color:var(--text2);line-height:1.65;margin-bottom:22px;}

.experience-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg1);}
.experience-preview-empty .experience-stat-value{color:var(--text3);}

.experience-stat{display:flex;flex-direction:column;gap:2px;}
.experience-stat-label{font-size:.6875rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.experience-stat-value{font-size:1.0625rem;font-weight:700;color:#fff;}

.experience-cta{width:100%;justify-content:center;}


/* ══════════════════════════════════════════════════════════════════
   MISSION-CRITICAL OPERATIONS SECTION
   ══════════════════════════════════════════════════════════════════ */

.mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}
@media (max-width: 880px) {
  .mc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mc-grid { grid-template-columns: 1fr; }
}

.mc-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              border-color .22s ease,
              background .22s ease,
              box-shadow .22s ease;
}
.mc-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%,
    rgba(59,130,246,.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,246,.32);
  background: var(--surface2);
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(59,130,246,.08),
    0 0 48px rgba(59,130,246,.10);
}
.mc-card:hover::before { opacity: 1; }

.mc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.10));
  border: 1px solid rgba(59,130,246,.20);
  color: var(--blue);
  transition: transform .22s ease, border-color .22s ease;
}
.mc-card:hover .mc-icon {
  transform: scale(1.06);
  border-color: rgba(59,130,246,.4);
}

.mc-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 9px;
  color: var(--text1);
}
.mc-card p {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text2);
}

/* Closing statement + CTA */
.mc-closing {
  margin-top: 52px;
  text-align: center;
}
.mc-statement {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text1);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.mc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(59,130,246,.28);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.mc-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(59,130,246,.4);
  opacity: .95;
}
.mc-cta svg { transition: transform .18s ease; }
.mc-cta:hover svg { transform: translateX(3px); }