/* =========================================================
   mémoire art · page styles (homepage + privacy page)
   Uses tokens from design-system.css
   ========================================================= */

/* ---------- Navigation ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:20}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.nav .logo img{height:30px;width:auto;filter:brightness(0) invert(1)}
.nav ul{display:flex;gap:26px;list-style:none;padding:0;font-size:15px}
.nav ul a{color:#c9d3dd;text-decoration:none;transition:color .2s}
.nav ul a:hover{color:#fff}

/* ---------- Hero with live demo ---------- */
.hero{background:var(--night);color:#fff;padding:var(--s-10) 0 70px;position:relative;overflow:hidden}
.hero .kicker{color:var(--gold)}
.hero h1{font:500 var(--fs-h1)/1 var(--font-display);text-align:center;max-width:14em;margin:18px auto 0}
.hero h1 em{color:var(--gold)}
.hero .sub{text-align:center;color:#c9d3dd;max-width:34em;margin:20px auto 36px;font-size:18px}

/* twinkling night sky (year-round) */
.sky{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1.2px,transparent 2px),radial-gradient(circle,#fff 0 .8px,transparent 1.6px);background-size:180px 150px,110px 130px;background-position:0 0,55px 70px;opacity:.28;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.12}}

.screen{position:relative;max-width:980px;margin:0 auto;border-radius:var(--radius-l);overflow:hidden;border:10px solid #0b131c;box-shadow:var(--shadow-l);aspect-ratio:16/9;background:#0d1b3d}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live{position:absolute;right:16px;bottom:16px;pointer-events:none;z-index:2;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--font-body);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:var(--radius-pill)}
.live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff5b5b;margin-right:8px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}

.tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.tab{min-height:52px;padding:6px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;border-radius:var(--radius-pill);border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:500 14px var(--font-body);cursor:pointer;transition:all .2s}
.tab[aria-pressed="true"],.tab:hover{background:#fff;color:var(--night);border-color:#fff}
.tab b{font-weight:600}.tab span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.hint{text-align:center;color:#8fa0b1;font-size:13px;margin-top:14px}
.hero .ctas{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}

/* ---------- Story "beats" ---------- */
.beat{padding:var(--s-10) 0;text-align:center}
.beat h2{font:500 var(--fs-h2)/1.08 var(--font-display);max-width:16em;margin:16px auto 0}
.beat p{color:var(--muted);max-width:34em;margin:20px auto 0;font-size:18px}
.beat .kicker{color:var(--sage-d)}

/* memory → story card → level */
.transform{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:56px}
.transform .arrow{font:500 40px var(--font-display);color:var(--gold)}
.card{border-radius:var(--radius-m);overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow-m);background:#fff}
.mem{background:#fff8d9;padding:24px;border-radius:var(--radius-s);font:500 23px/1.35 var(--font-display);text-align:left;transform:rotate(-2deg);box-shadow:0 12px 26px rgba(42,36,32,.12)}
.step-label{font:600 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-d);margin-top:12px}

/* founder */
.founder{background:var(--sage);color:var(--ivory)}
.founder .kicker{color:var(--ivory);opacity:.85}
.founder p{color:#eef3ef}
.founder h2 em{color:var(--gold)}

/* gift ideas */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px;text-align:left}
.gift{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;transition:transform .25s,box-shadow .25s}
.gift:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}
.gift b{display:block;font:500 var(--fs-h3)/1.2 var(--font-display);margin-bottom:4px}
.gift span{color:var(--muted);font-size:15px}

/* ---------- Seasonal section (Christmas) ----------
   To remove after Christmas: delete the <section class="beat seasonal"> block in index.html */
.seasonal{background:var(--pine);color:var(--ivory)}
.seasonal .kicker{color:var(--gold)}
.seasonal p{color:#d6e2da}
.seasonal .btn{margin-top:28px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:44px auto 0;text-align:left}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:600 16px var(--font-body);display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--sage-d);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;margin:0;color:var(--muted);font-size:16px;max-width:none}

/* ---------- Final call to action + footer ---------- */
.final{background:var(--night);color:#fff;padding:100px 0;text-align:center;position:relative;overflow:hidden}
.final h2{font:500 clamp(36px,5vw,64px)/1.05 var(--font-display)}
.final p{color:#c9d3dd;margin:16px auto 32px;max-width:32em}
.footer{background:var(--night);color:#8fa0b1;font-size:var(--fs-small);padding:0 0 40px;text-align:center}
.footer nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.footer a{color:#c9d3dd;text-decoration:none}
.footer a:hover{color:#fff}

/* ---------- Privacy page ---------- */
.page{background:var(--ivory)}
.page-head{background:var(--night);color:#fff;padding:120px 0 60px;text-align:center}
.page-head h1{font:500 clamp(38px,5vw,58px)/1.05 var(--font-display)}
.legal{max-width:760px;margin:0 auto;padding:60px 0 90px}
.legal h2{font:500 30px/1.2 var(--font-display);margin:34px 0 10px}
.legal p,.legal li{color:var(--muted)}
.legal ul{padding-left:20px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){.gifts{gap:16px}}
@media (max-width:768px){
  .hero{padding-top:96px}
  .nav ul{display:none}
  .nav .btn{padding:0 16px;font-size:14px}
  .transform{grid-template-columns:1fr}
  .transform .arrow{transform:rotate(90deg);justify-self:center}
  .gifts{grid-template-columns:1fr}
  .beat{padding:80px 0}
  .screen{border-width:6px;border-radius:14px}
  .live{display:none}
}
@media (max-width:480px){
  .hero .sub{font-size:16px}
  .tab{padding:0 14px}
  .hero .ctas .btn{width:100%}
  .live{display:none}
}