/* Home: hero, sashiko logo, floating cards, how it works */
/* ---------- HOME ---------- */
.hero{padding:48px 0 72px;min-height:calc(100vh - 170px);display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;position:relative;}
.hero-copy,.hero-visual{position:relative;z-index:1;}
.hero-canvas{
  position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
}
.hero-copy .pill{margin-bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:linear-gradient(135deg,#f5d56a 0%,#f39b5b 35%,#cfeafc 100%);color:#102d44;font-family:'Unbounded',sans-serif;text-transform:uppercase;letter-spacing:0.08em;border:1px solid rgba(255,255,255,0.35);box-shadow:0 0 0 1px rgba(245,213,106,0.15);}
.hero h1{font-size:7rem;line-height:0.8;font-weight:800;letter-spacing:-0.08em;margin-bottom:8px;display:block;max-width:1100px;}
.ili-sashiko{
  display:block;
  width:min(62vw, 820px);
  height:auto;
  filter:drop-shadow(0 12px 18px rgba(18,49,77,0.08));
}
.ili-sashiko .sashiko-outline{
  fill:none;
  stroke:#1b3751;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ili-sashiko .sashiko-stitch,
.ili-sashiko .sashiko-stitch-alt{
  display:none;
}
.hero-tagline{
  font-family:'Unbounded',sans-serif;
  font-size:2rem;
  line-height:1.05;
  letter-spacing:-0.06em;
  color:var(--indigo);
  margin:0 0 18px;
  max-width:700px;
  text-transform:lowercase;
}
.hero p{
  color:var(--text-dim);font-size:1.08rem;line-height:1.6;margin-bottom:20px;max-width:700px;
}
.avatar-stitch-heading{
  display:inline-block;
  align-self:flex-start;
  width:fit-content;
  background-color:var(--indigo);
  color:#faf8f4;
  padding:8px 20px;
  border-radius:10px;
  margin-bottom:4px;
}
.mini-note{
  margin-top:18px;
  color:var(--text-dimmer);
  font-size:0.85rem;
  line-height:1.6;
  max-width:620px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-visual{position:relative;height:380px;}
.float-card{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:0 20px 60px rgba(0,0,0,0.4);animation:float 5s ease-in-out infinite;}
.float-card b{display:block;font-family:'Unbounded';font-size:0.95rem;margin-top:4px;}
.fc1{top:0;left:10%;animation-delay:0s;}
.fc2{top:130px;left:45%;animation-delay:1.2s;}
.fc3{top:260px;left:5%;animation-delay:2.1s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.emoji-lg{font-size:2.2rem;}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:30px 0 50px;border-bottom:1px solid var(--border);margin-bottom:50px;}
.stat b{font-family:'Unbounded';font-size:2rem;display:block;background:linear-gradient(135deg,#f8f7f2 0%,#f39b5b 10%,#f4d86b 30%,#f4d86b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{color:var(--text-dim);font-size:0.88rem;}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;}
.section-head h2{font-size:1.7rem;letter-spacing:-0.5px;}
.section-head p{color:var(--text-dim);margin-top:6px;}

.trend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:56px;}
.trend-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:.2s ease;cursor:pointer;}
.trend-card:hover{border-color:var(--pink);transform:translateY(-4px);}
.trend-card .emoji-lg{margin-bottom:10px;}
.trend-card h3{font-size:1.05rem;margin-bottom:6px;}
.trend-card p{color:var(--text-dim);font-size:0.85rem;}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px;}
.how-card{padding:24px;border-radius:var(--radius);background:linear-gradient(160deg,var(--surface) 0%, var(--surface-2) 100%);border:1px solid var(--border);}
.how-num{width:38px;height:38px;border-radius:12px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-weight:800;margin-bottom:14px;}
.how-card h3{font-size:1.05rem;margin-bottom:8px;}
.how-card p{color:var(--text-dim);font-size:0.88rem;line-height:1.5;}