/* =========================================================================
   TOP page (index.html) — page-specific layout only.
   Reuses tokens & components from style.css.
   ========================================================================= */

/* ---- 1. HERO ----------------------------------------------------------- */
.hero{
  background:var(--bg);
  padding-block:96px 104px;
  overflow:hidden;
}
.hero-content{
  display:flex; flex-direction:column; gap:56px;
}
.hero-title{
  font-family:var(--font-heading); font-weight:700;
  font-size:80px; letter-spacing:1px; line-height:1.2; color:var(--ink);
  display:flex; flex-direction:column; gap:6px;
}
.hero-row{ display:flex; }
.hero-lead{
  max-width:720px;
  display:flex; flex-direction:column; gap:20px;
}
.hero-lead-intro{
  font-family:var(--font-body); font-weight:700; font-size:18px;
  color:var(--ink); line-height:1.8;
}
.hero-lead-body{
  font-size:15px; color:var(--muted); line-height:1.9;
}

/* hero decorations */
.hero-blob-accent{
  width:360px; height:360px; background:var(--accent-soft); opacity:.7;
}
.hero-blob-navy{
  width:300px; height:300px; background:var(--navy-soft); opacity:.8;
}
.hero-dot{
  width:12px; height:12px; background:var(--accent); opacity:.6;
}
.hero-tile i,.hero-tile svg{ width:60%; height:60%; }
.hero-tile-gamepad{
  width:78px; height:78px; background:#fff; transform:rotate(-6deg); color:var(--navy);
}
.hero-tile-gamepad i,.hero-tile-gamepad svg{ width:36px; height:36px; }
.hero-tile-dice{
  width:64px; height:64px; background:var(--accent); transform:rotate(9deg); color:#fff;
}
.hero-tile-dice i,.hero-tile-dice svg{ width:29px; height:29px; }
.hero-tile-puzzle{
  width:58px; height:58px; background:var(--navy); transform:rotate(-11deg); color:#fff;
}
.hero-tile-puzzle i,.hero-tile-puzzle svg{ width:27px; height:27px; }
.hero-tile-sparkle{
  width:52px; height:52px; background:var(--accent-soft); transform:rotate(7deg); color:var(--accent);
}
.hero-tile-sparkle i,.hero-tile-sparkle svg{ width:24px; height:24px; }
.hero-logo{
  width:344px; height:326px; object-fit:contain;
}

/* ---- Shared section head ----------------------------------------------- */
.section-head{ display:flex; flex-direction:column; gap:18px; }
.biz-title{ font-family:var(--font-heading); font-weight:700; font-size:34px; }

/* ---- 2. BUSINESS ------------------------------------------------------- */
.business{
  background:var(--surface);
  padding-block:88px 104px;
}
.business .wrap{ display:flex; flex-direction:column; gap:44px; }
.strengths .wrap{ display:flex; flex-direction:column; gap:44px; }

.biz-cards{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.biz-card{ display:flex; flex-direction:column; gap:20px; }
.biz-card-top{ display:flex; align-items:center; justify-content:space-between; }
.biz-badge{ width:56px; height:56px; border-radius:14px; }
.biz-badge i,.biz-badge svg{ width:26px; height:26px; }
.biz-en{
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:2px; color:var(--muted);
}
.biz-card-title{
  font-family:var(--font-heading); font-weight:700; font-size:24px; letter-spacing:1px;
}
.biz-desc{ font-size:14px; color:var(--muted); line-height:1.9; }
.biz-link{
  display:inline-flex; align-items:center; gap:8px; padding-top:8px;
  color:var(--accent); font-size:14px; font-weight:700;
}
.biz-link i,.biz-link svg{ width:16px; height:16px; }

/* business faint motif icons */
.biz-motif{ color:var(--accent); }
.biz-motif-dice{
  left:1240px; top:60px; width:120px; height:120px; color:var(--accent);
  opacity:.10; transform:rotate(12deg);
}
.biz-motif-sparkle{
  left:120px; top:80px; width:90px; height:90px; color:var(--accent); opacity:.12;
}
.biz-motif-gamepad{
  left:100px; top:560px; width:120px; height:120px; color:var(--accent);
  opacity:.09; transform:rotate(-8deg);
}
.biz-motif-cards{
  left:1230px; top:560px; font-size:110px; color:var(--accent);
  opacity:.10; transform:rotate(6deg); line-height:1;
}

/* ---- 3. STRENGTHS ------------------------------------------------------ */
.strengths{
  background:var(--surface);
  padding-block:88px 96px;
}
.str-card{ display:flex; flex-direction:column; gap:20px; }
.str-badge{ width:64px; height:64px; border-radius:16px; }
.str-badge i,.str-badge svg{ width:30px; height:30px; }
.str-en{
  font-family:var(--font-en); font-weight:600; font-size:11px;
  letter-spacing:2px; color:var(--muted);
}
.str-title{
  font-family:var(--font-heading); font-weight:700; font-size:22px; letter-spacing:1px;
}

/* ---- 4. CTA ------------------------------------------------------------ */
.cta{
  background:var(--navy);
  padding-block:96px 100px;
  overflow:hidden;
  text-align:center;
}
.cta-inner{
  max-width:760px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.cta-inner .eyebrow{ justify-content:center; }
.cta-title{
  font-family:var(--font-heading); font-weight:700; font-size:48px;
  line-height:1.3; color:#fff;
}
.cta-sub{ font-size:16px; line-height:1.9; color:rgba(255,255,255,.8); }
.cta-btn-wrap{ padding-top:12px; }
.cta-btn{ gap:10px; }

/* cta decorations */
.cta-ring{
  width:280px; height:280px; border:6px solid var(--accent); opacity:.25;
  background:transparent;
}
.cta-blob{
  width:340px; height:340px; background:var(--accent); opacity:.12;
}
.cta-motif-sparkle{
  width:34px; height:34px; color:var(--accent); opacity:.4; transform:rotate(8deg);
}
.cta-motif-dice{
  width:36px; height:36px; color:var(--accent); opacity:.25; transform:rotate(-10deg);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:1100px){
  .hero-title{ font-size:clamp(44px, 6.5vw, 80px); }
}
@media (max-width:860px){
  .hero{ padding-block:64px 72px; }
  .hero-content{ gap:36px; }
  .hero-title{ font-size:clamp(34px, 9vw, 56px); }
  .hero-logo,
  .hero-tile{ display:none; }
  .biz-cards{ grid-template-columns:1fr; }
  .business,.strengths{ padding-block:64px 72px; }
  .business .wrap,.strengths .wrap{ gap:32px; }
  .cta{ padding-block:64px 72px; }
  .cta-title{ font-size:clamp(32px, 9vw, 48px); }
  .deco-motif{ display:none; }
}