/* Daily Logic — site vitrine, fidèle au style Nearo (gradient hero + phone + floating cards). */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#F1F0ED; --surface:#FFFFFF; --ink:#1c1b19; --mut:#6f6c66; --ghost:#c4c2bc;
  --line:#E7E5E0; --acc:#1FC94C; --acc-deep:#138a35;
  --r:28px; --maxw:1080px; --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 2px 6px rgba(20,30,20,.04), 0 30px 60px -34px rgba(20,50,25,.24);
  --font:'Hanken Grotesk', system-ui, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:800; letter-spacing:-.03em; line-height:1.04; }

/* ---- HERO ---- */
.hero { position:relative; text-align:center; padding:22px 0 84px; overflow:hidden;
  background:linear-gradient(180deg,#16A746 0%,#27BA59 18%,#5BD081 42%,#9FE1B6 64%,#D4F0DD 82%,var(--bg) 100%); }
.hero-aura { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-aura span { position:absolute; border-radius:50%; filter:blur(58px); }
.hero-aura .a { width:560px; height:560px; top:-180px; left:-140px; background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent); animation:auraA 15s ease-in-out infinite; }
.hero-aura .b { width:500px; height:500px; top:20px; right:-160px; background:radial-gradient(closest-side,rgba(195,255,218,.5),transparent); animation:auraB 18s ease-in-out infinite; }
.hero .wrap { position:relative; z-index:1; }

.topbar { display:flex; align-items:center; height:58px; }
.topbar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.topbar .brand img { width:28px; height:28px; border-radius:8px; }
.topbar a.dl { margin-left:auto; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); color:#fff;
  backdrop-filter:blur(6px); padding:8px 18px; border-radius:100px; font-weight:600; font-size:14.5px; transition:background .2s; }
.topbar a.dl:hover { background:rgba(255,255,255,.3); }

.badge { display:inline-block; margin-top:38px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding:7px 16px; border-radius:100px; backdrop-filter:blur(6px); }

.hero h1 { color:#fff; font-size:clamp(44px,8vw,82px); line-height:.98; letter-spacing:-.04em; margin:22px auto 0; max-width:13ch; }
/* word-by-word reveal */
.hero h1 .hw { display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.02; }
.hero h1 .hw > i { display:inline-block; font-style:normal; transform:translateY(118%); }
.hero h1.go .hw > i { animation:hwUp .9s var(--ease) forwards; }
@keyframes hwUp { to { transform:none; } }

.hero .sub { color:rgba(255,255,255,.92); font-size:clamp(16px,2vw,19px); max-width:470px; margin:20px auto 0; }

.cta-hero { margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:100px; transition:transform .2s var(--ease), background .2s; }
.btn-white { background:#fff; color:var(--acc-deep); box-shadow:0 22px 44px -20px rgba(0,40,15,.55); }
.btn-white:hover { transform:translateY(-3px); }
.btn-ghost { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5); color:#fff; backdrop-filter:blur(6px); }
.btn-ghost:hover { background:rgba(255,255,255,.28); }
.btn svg { width:18px; height:18px; }

/* phone + floating UI cards */
.phone-stage { position:relative; width:min(560px,92%); margin:54px auto 0; }
.device { width:clamp(248px,44%,300px); margin:0 auto; padding:10px; background:#111113; border-radius:46px;
  box-shadow:0 54px 110px -36px rgba(0,45,18,.6), inset 0 0 0 1.6px rgba(255,255,255,.1); position:relative; z-index:2; }
.device img { display:block; width:100%; border-radius:37px; }

.float-card { position:absolute; z-index:3; background:#fff; border-radius:18px; padding:14px;
  box-shadow:0 34px 70px -30px rgba(0,40,15,.45); border:1px solid rgba(255,255,255,.8); text-align:left; }
.float-card.fa { top:8%; right:-2%; width:236px; }
.float-card.fb { bottom:14%; left:-2%; width:226px; }
.fc-top { display:flex; align-items:center; gap:11px; }
.fc-ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:18px; flex:none; }
.fc-top b { font-size:14px; font-weight:800; } .fc-top small { display:block; color:var(--mut); font-size:11.5px; }
.fc-stats { display:flex; gap:7px; margin-top:12px; }
.fc-st { flex:1; background:#f5f4f1; border-radius:11px; padding:9px 6px; text-align:center; }
.fc-st b { font-size:16px; font-weight:800; } .fc-st span { display:block; font-size:8.5px; letter-spacing:.08em; color:var(--mut); font-weight:700; margin-top:1px; }
.task-row { display:flex; align-items:center; gap:11px; }
.task-check { width:24px; height:24px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; }
.task-row .t b { font-size:13.5px; font-weight:700; display:block; } .task-row .t span { font-size:11.5px; color:var(--mut); }
.task-badge { margin-left:auto; font-size:10px; font-weight:800; color:var(--acc-deep); background:#e7f6ec; padding:4px 9px; border-radius:100px; }

@media (max-width:640px){ .float-card{ display:none; } .device{ width:64%; } }

/* ---- Sections ---- */
section { padding:88px 0; }
.center { text-align:center; max-width:780px; margin:0 auto; }
.kicker { font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-deep); }
.feat-head h2 { font-size:clamp(34px,5.6vw,58px); margin-top:14px; }
.feat-head p { color:var(--mut); margin:18px auto 0; font-size:clamp(17px,2vw,20px); max-width:460px; }

/* features 2×2 with emerging phones */
.feat-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:50px; }
@media (max-width:760px){ .feat-cards{ grid-template-columns:1fr; } }
.fcard { background:#EBE9E4; border:1px solid var(--line); border-radius:30px; overflow:hidden; display:flex; flex-direction:column;
  transition:opacity .75s var(--ease), transform .75s var(--ease), box-shadow .25s; }
.fcard:hover { transform:translateY(-6px); box-shadow:0 44px 80px -36px rgba(20,50,25,.3); }
.fcard .mock { height:288px; display:flex; align-items:flex-end; justify-content:center; padding-top:34px; }
.fcard .mock img { width:60%; border-radius:30px 30px 0 0; box-shadow:0 -6px 40px -18px rgba(20,50,25,.35); border:1px solid var(--line); border-bottom:none; }
.fcard .txt { padding:26px 30px 30px; text-align:center; }
.fcard .txt h3 { font-size:22px; }
.fcard .txt p { color:var(--mut); margin-top:8px; font-size:15px; }

/* ---- Games grid ---- */
.games-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.games-head h2 { font-size:clamp(30px,4.8vw,48px); }
.games-head p { color:var(--mut); margin-top:14px; font-size:clamp(17px,2vw,19px); }
.gamegrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .gamegrid{grid-template-columns:repeat(2,1fr);} }
.gcard { position:relative; border-radius:22px; padding:18px; min-height:146px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:var(--shadow); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.gcard.pre { opacity:0; transform:translateY(24px); }
.gcard.in { opacity:1; transform:none; }
.gcard .glyph { position:absolute; top:16px; left:18px; width:38px; height:38px; }
.gcard .glyph svg { width:100%; height:100%; display:block; }
.gcard b { font-weight:800; font-size:16.5px; letter-spacing:-.01em; }
.gcard span { font-size:12.5px; opacity:.85; margin-top:2px; }

/* ---- Download ---- */
.cta-card { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:36px;
  padding:46px; display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; box-shadow:var(--shadow); }
.cta-card .glow2 { position:absolute; inset:auto -8% -55% auto; width:380px; height:380px; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%); filter:blur(20px); }
.cta-card h2 { position:relative; font-size:clamp(24px,3.2vw,36px); }
.cta-card p { position:relative; color:var(--mut); margin-top:12px; max-width:420px; }
.cta-card .row { position:relative; margin-top:22px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.store { display:inline-flex; align-items:center; gap:11px; background:var(--acc); color:#fff; padding:13px 22px; border-radius:100px;
  font-weight:800; box-shadow:0 14px 30px -14px color-mix(in srgb,var(--acc) 75%,transparent); transition:transform .2s var(--ease); }
.store:hover { transform:translateY(-3px); }
.store svg { width:22px; height:22px; }
.store small { display:block; font-size:11px; font-weight:600; opacity:.85; }
.soon-pill { color:var(--mut); font-weight:600; font-size:14px; }
.qr-card { background:#fff; border-radius:24px; padding:16px; display:grid; justify-items:center; gap:8px; box-shadow:var(--shadow); }
.qr-card img { width:150px; height:150px; }
.qr-card span { color:#1c1b19; font-size:12px; font-weight:700; }
@media (max-width:760px){ .cta-card{grid-template-columns:1fr; padding:32px;} .qr-card{justify-self:start;} }

/* ---- Footer ---- */
footer { border-top:1px solid var(--line); padding:42px 0; margin-top:20px; }
.foot { display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; }
.foot .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; }
.foot .brand img{ width:26px; height:26px; border-radius:7px; }
.foot-links { margin-left:auto; display:flex; flex-wrap:wrap; gap:22px; }
.foot-links a { color:var(--mut); font-size:14.5px; font-weight:500; transition:color .2s; }
.foot-links a:hover { color:var(--ink); }
.copy { width:100%; color:var(--ghost); font-size:13px; margin-top:6px; }

/* ---- Animations ---- */
@keyframes rise { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:none;} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes auraA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,34px) scale(1.08);} }
@keyframes auraB { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-54px,24px) scale(1.06);} }
.an { opacity:0; animation:rise .85s var(--ease) forwards; }
.phone-stage { animation:floaty 7s ease-in-out 1.2s infinite; }
.float-card.fa { animation:floaty 6s ease-in-out infinite; }
.float-card.fb { animation:floaty 6.5s ease-in-out .8s infinite; }
.fade { opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.fade.show { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .an,.phone-stage,.float-card,.hero-aura span { animation:none !important; }
  .an,.fade { opacity:1 !important; transform:none !important; }
  .hero h1 .hw > i { transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ---- Legal pages ---- */
header.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; height:62px; }
.nav-inner .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.nav-inner .brand img { width:28px; height:28px; border-radius:8px; }
.nav-links { margin-left:auto; display:flex; gap:22px; }
.nav-links a { color:var(--mut); font-weight:500; font-size:14.5px; }
.legal { max-width:760px; margin:0 auto; padding:54px 24px 96px; }
.legal .back { color:var(--mut); font-weight:500; font-size:14.5px; display:inline-flex; gap:7px; align-items:center; margin-bottom:26px; }
.legal h1 { font-size:clamp(32px,5vw,46px); }
.legal .updated { color:var(--ghost); font-size:14px; margin:8px 0; }
.legal .lang-note { color:var(--mut); font-size:14px; border-left:3px solid var(--acc); padding-left:12px; margin:22px 0 30px; }
.legal h2 { font-weight:700; font-size:22px; letter-spacing:-.01em; margin:34px 0 10px; }
.legal h3 { font-weight:700; font-size:16px; margin:22px 0 6px; }
.legal p, .legal li { color:var(--ink); opacity:.9; font-size:16px; margin:10px 0; }
.legal ul { padding-left:22px; }
.legal a.link { color:var(--acc-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal hr { border:none; border-top:1px solid var(--line); margin:48px 0; }
.legal .muted { color:var(--mut); }