/* path: css/styles.css */

/* ===== PXI Theme Vars ===== */
:root{
  --violet:#a78bfa;
  --violet-strong:#8b5cf6;
  --ink:#0b0614;
  --bg:#000;
  --text:#fff;
  --nav-h: 96px;
  --footer-h: 56px;
  --z-bg:-2;
  --z-vignette:-1;
  --z-lineup:1;
  --z-scrim:2;
  --z-copy:3;
  --z-glow:40;
  --z-footer:45;
  --z-cookie:60;
  --z-nav:70;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;overflow-x:hidden}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

.screen{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.screen--home{height:100svh;min-height:100svh;overflow:clip;padding-top:var(--nav-h)}
.screen--page,.screen--scroll{min-height:auto;height:auto;overflow:visible;padding-top:var(--nav-h);padding-bottom:calc(var(--footer-h) + 24px)}
.page-center{min-height:calc(100svh - var(--nav-h) - var(--footer-h));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.center-col{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.narrow{max-width:820px}

.bg{position:absolute;inset:0;z-index:var(--z-bg);background:linear-gradient(to bottom,#000,var(--ink) 50%,#000)}
.screen::before{content:"";position:absolute;inset:-20% 0;z-index:var(--z-vignette);background:
  radial-gradient(60% 40% at 50% -10%, rgba(139,92,246,.25), transparent 55%),
  radial-gradient(60% 40% at 50% 110%, rgba(139,92,246,.18), transparent 60%),
  radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,.55), transparent 60%);mix-blend-mode:screen;pointer-events:none}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.2));backdrop-filter:blur(8px)}
.nav__row{display:flex;align-items:center;justify-content:space-between;padding:20px 0;height:var(--nav-h);position:relative}

.brand{color:#d4c8ff;text-decoration:none;font-weight:800;letter-spacing:.12em;font-size:18px;text-shadow:0 0 8px rgba(167,139,250,.6)}
.brand:hover{color:#fff}

.nav__links{display:flex;gap:40px;align-items:center;margin:0 auto}
.nav__links a{color:#d4c8ff;text-decoration:none;text-shadow:0 0 6px rgba(167,139,250,.6),0 0 18px rgba(167,139,250,.32)}
.nav__links a:hover,.nav__links .active{color:#fff}

.nav-toggle{background:transparent;border:0;width:40px;height:40px;display:none;order:3;margin-left:12px;touch-action:manipulation}
.nav-toggle .burger{display:block;width:22px;height:2px;background:#d4c8ff;box-shadow:0 6px 0 #d4c8ff,0 -6px 0 #d4c8ff;border-radius:2px;margin:0 auto}

/* ===== Buttons ===== */
.cta{appearance:none;display:inline-flex;align-items:center;justify-content:center;color:#eae6ff;text-decoration:none;border-radius:12px;white-space:nowrap;border:0;background:transparent;line-height:1;cursor:pointer;user-select:none;min-height:44px;padding:10px 16px;font-weight:600}
.cta--outline{border:1px solid rgba(167,139,250,.85);background:transparent;box-shadow:0 0 20px rgba(139,92,246,.25) inset, 0 0 12px rgba(139,92,246,.15)}
.cta--outline:hover{box-shadow:0 0 26px rgba(139,92,246,.38) inset, 0 0 16px rgba(139,92,246,.25); color:#fff}
.cta--solid{background:linear-gradient(180deg,var(--violet),var(--violet-strong));box-shadow:0 0 18px rgba(139,92,246,.55);border:0;color:#000}
.cta.small{padding:8px 12px;font-size:14px}

/* ===== Type ===== */
.title{font-size:88px;line-height:.9;margin:0;font-weight:700;letter-spacing:-.02em}
.title--neon{color:#d8c9ff;text-shadow:0 0 10px rgba(167,139,250,.9),0 0 26px rgba(167,139,250,.7),0 0 54px rgba(139,92,246,.55),0 0 88px rgba(139,92,246,.35)}
.kicker{margin-top:12px;font-size:28px;font-weight:600;white-space:nowrap}
.kicker--neon{color:#cbb3ff;text-shadow:0 0 6px rgba(167,139,250,.6),0 0 22px rgba(167,139,250,.38),0 0 36px rgba(139,92,246,.28)}
.copy{margin-top:18px;max-width:640px;color:#f2edff;font-size:17px;line-height:1.6}
.copy p{margin:0 0 18px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.h1{font-size:56px;margin:0 0 8px;font-weight:800;letter-spacing:-.01em;text-shadow:0 0 6px rgba(167,139,250,.6),0 0 22px rgba(167,139,250,.38),0 0 36px rgba(139,92,246,.28)}
.overline{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cbb3ffb3;font-size:12px}

main a:not(.cta){color:#cbb3ff;text-decoration:underline;text-underline-offset:3px}
main a:not(.cta):hover{color:#fff;text-shadow:0 0 10px rgba(167,139,250,.7)}

.reveal{opacity:0;transform:translateY(10px) scale(.98);filter:blur(1px);transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.reveal.on{opacity:1;transform:none;filter:none}
@keyframes pxiFadeUp{from{opacity:0;transform:translateY(10px) scale(.98);filter:blur(1px)}to{opacity:1;transform:none;filter:none}}
.title--animate{animation:pxiFadeUp .7s cubic-bezier(.2,.6,.2,1) .05s forwards;will-change:transform,opacity}

/* ===== Footer & glow ===== */
.glowbar{position:fixed;left:0;right:0;bottom:var(--footer-h);height:1px;z-index:var(--z-glow);background:linear-gradient(90deg,transparent, rgba(167,139,250,.8), transparent);box-shadow:0 0 36px rgba(139,92,246,.55)}
.footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);z-index:var(--z-footer);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:14px;color:#cbb3ffcc;background:transparent}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}
.footer__links a{color:#d4c8ff;text-decoration:none}
.footer__links a:hover{color:#fff}
.footer__copy{opacity:.8;margin-left:auto}

/* ===== Video card (Features) ===== */
.video-card{width:min(896px,100%);aspect-ratio:16/9;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;background:#0008;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .25s ease, box-shadow .25s ease}
.video-card:hover{transform:translateY(-4px);box-shadow:0 18px 65px rgba(139,92,246,.28)}
.video{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Feature grid ===== */
.features-grid{display:grid;gap:24px;margin-top:8px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:1100px}
@media (max-width:900px){ .features-grid{grid-template-columns:1fr} }
.card{text-align:center;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0009;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 65px rgba(139,92,246,.28)}
.card .icon{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 16px}
.card h3{margin:0 0 8px;color:#e6dbff}
.card p{margin:0;color:#eae6ffcc}

/* ===== Cookie ===== */
.cookie{position:fixed;left:0;right:0;bottom:calc(var(--footer-h) + 12px);z-index:var(--z-cookie);display:none}
.cookie.show{display:block}
.cookie__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(0,0,0,.7);border:1px solid rgba(167,139,250,.6);backdrop-filter:blur(6px);padding:12px 16px;border-radius:14px;box-shadow:0 0 25px rgba(139,92,246,.5);color:#eae6ff}
.cookie__inner .cta{border:1px solid rgba(167,139,250,.85);background:transparent;box-shadow:0 0 20px rgba(139,92,246,.25) inset, 0 0 12px rgba(139,92,246,.15);color:#eae6ff}

/* ===== Intro Overlay (logo.mp4) ===== */
.intro{position:fixed; inset:0; z-index:9999; background:#000; display:grid; place-items:center; opacity:1; transition:opacity .45s ease}
.intro.hide{opacity:0; pointer-events:none}
.intro__wrap{position:relative; width:100vw; height:100vh; overflow:hidden}
.intro__poster{position:absolute; inset:0; background:#000 url('assets/img.png') center/contain no-repeat; transition:opacity .2s ease}
.intro__poster.hide{opacity:0}
.intro__video, .intro__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; backface-visibility:hidden; transform:translateZ(0)}
.intro__img{ display:none; }

/* ===== Hero ===== */
.app-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.hero-visual{position:relative;min-height:360px}
.hero-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 60px rgba(139,92,246,.35));border-radius:24px}

/* Centered App Store badge near bottom of mock */
.store-overlay{position:absolute; left:50%; right:auto; bottom:14px; transform:translateX(-50%); display:block; pointer-events:auto}
.store-overlay img{height:44px; width:auto; display:block; filter:drop-shadow(0 10px 40px rgba(167,139,250,.45))}

/* ===== QR frame (if used) ===== */
.qrbox{display:flex;align-items:center;gap:12px;margin-top:10px;opacity:.96}
.qrframe{width:72px;height:72px;border-radius:12px;border:1px solid rgba(167,139,250,.5);display:grid;place-items:center;overflow:hidden;background:#fff}
.qrframe img{width:100%;height:100%;object-fit:cover;display:block}

.context-band{margin-top:18px;color:#eae6ffcc}
.early-band{margin:40px auto 56px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}

/* ===== Responsive ===== */
@media (max-width: 1024px){ .title{font-size:72px} }

@media (max-width: 768px){
  :root{ --nav-h: 76px; --footer-h: 64px; }
  .container{padding:0 16px}

  .nav__row{padding:16px 0;height:var(--nav-h)}
  .nav__links{gap:22px;font-size:15px;order:2}
  .nav-toggle{display:block;order:3}
  .brand{order:1}

  /* Mobile menu: compact dropdown UNDER header (not full-screen) */
  .nav__links[data-collapsible]{display:none}
  .nav__links.on{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:absolute;              /* anchor to header */
    top:var(--nav-h);
    left:0;
    right:0;
    padding:12px 16px 16px;
    background:rgba(0,0,0,.96);
    backdrop-filter:blur(10px);
    align-items:flex-start;
    border:1px solid rgba(167,139,250,.35);
    border-left:0;border-right:0;
    box-shadow:0 18px 65px rgba(139,92,246,.22);
    z-index:calc(var(--z-nav) + 1);
    max-height:calc(100vh - var(--nav-h) - 20px);
    overflow:auto;
  }
  .nav__links.on a{font-size:18px; width:100%; padding:8px 2px}

  body.no-scroll{overflow:hidden}

  .screen--home{overflow-y:auto;padding-top:var(--nav-h);padding-bottom:calc(var(--footer-h) + 16px);min-height:100svh; height:auto}
  .title{font-size:56px}
  .kicker{font-size:22px}
  .copy{font-size:16px}

  /* Put image + badge BEFORE copy on mobile */
  .app-hero{display:flex;flex-direction:column}
  .hero-visual{order:-1}

  /* Slightly larger tap target on the badge */
  .store-overlay img{height:48px}

  /* === Mobile footer vignette for legibility === */
  .footer{
    isolation:isolate;                    /* create new stacking context */
    -webkit-backdrop-filter: blur(6px);   /* Safari */
    backdrop-filter: blur(6px);           /* subtle glass */
  }
  .footer::before{
    content:"";
    position:absolute;
    /* extend a bit past edges for a soft fade */
    inset:-16px -20px -16px -20px;
    z-index:-1;                           /* sit under footer content */
    pointer-events:none;
    border-radius:16px;
    background:
      radial-gradient(120% 180% at 50% 120%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.45) 30%,
        rgba(0,0,0,.78) 100%);
  }
}