/* =====================================================================
   KIN — landing page
   css/index6363.css
   ===================================================================== */

.hero{ padding: 64px 0 40px; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items:center;
}
.eyebrow{ display:block; margin-bottom:18px; }

.hero-title{
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.04;
  color: var(--silver);
}
.hero-sub{
  margin-top: 22px;
  max-width: 480px;
  font-size: 1.06rem;
  color: var(--text-dim);
}
.hero-actions{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.hero-link{ font-size:0.92rem; font-weight:600; color: var(--text-dim); transition: color .25s ease; }
.hero-link:hover{ color: var(--text); }

.hero-visual{ position:relative; height: 460px; }
.hero-stage{
  position:absolute; inset:0;
  border-radius: var(--radius-xl);
  overflow:hidden;
}
.hero-orbs{ position:absolute; inset:0; }
.hero-orbs .orb-1{
  width:280px; height:280px; top:18%; left:6%;
  animation: kin-drift-a 9s ease-in-out infinite;
}
.hero-orbs .orb-2{
  width:280px; height:280px; bottom:8%; right:0%;
  animation: kin-drift-b 9s ease-in-out infinite;
}
.hero-tag{
  position:absolute; display:flex; align-items:center; gap:8px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  background: rgba(10,10,12,0.55);
  border:1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  font-size:0.82rem; font-weight:600; color: var(--text);
}
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--go); box-shadow:0 0 0 3px rgba(53,211,153,0.18); }
.tag-a{ top: 14%; left: 10%; }
.tag-b{ bottom: 14%; right: 8%; }
.hero-live{
  position:absolute; top:20px; right:20px;
  display:flex; align-items:center; gap:7px;
  padding: 7px 13px; border-radius:999px;
  background: rgba(10,10,12,0.55); border:1px solid var(--border);
  font-size:0.74rem; font-weight:600; color: var(--text-dim); letter-spacing:0.02em;
}
.hero-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--end); animation: kin-pulse 1.8s ease-in-out infinite; }

/* sections */
.section{ padding: 86px 0; }
.section-title{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-top: 14px;
  margin-bottom: 46px;
  max-width: 640px;
  color: var(--silver);
}

/* features */
.feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.feature-card{ padding: 30px 26px; transition: transform .35s var(--ease), border-color .35s ease; }
.feature-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }
.feature-icon{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); color: var(--silver);
  margin-bottom:18px;
}
.feature-card h3{ font-size:1.14rem; margin-bottom:9px; color: var(--text); }
.feature-card p{ color: var(--text-dim); font-size:0.94rem; }

/* how it works */
.section-how{ padding-top: 30px; }
.how-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; counter-reset: none; }
.how-step{
  padding: 30px 26px; display:flex; flex-direction:column; gap:16px;
}
.how-index{
  font-family: var(--font-display); font-style: italic; font-weight:600;
  font-size:1.5rem; color: var(--text-faint);
}
.how-step h3{ font-size:1.1rem; margin-bottom:8px; color: var(--text); }
.how-step p{ color: var(--text-dim); font-size:0.93rem; }

/* faq */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ padding: 6px 26px; }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0; font-weight:600; color:var(--text); font-size:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{ position:relative; width:18px; height:18px; flex:none; }
.faq-plus::before, .faq-plus::after{
  content:''; position:absolute; background: var(--text-dim);
  top:50%; left:50%; transform: translate(-50%,-50%);
}
.faq-plus::before{ width:14px; height:1.4px; }
.faq-plus::after{ width:1.4px; height:14px; transition: transform .25s ease; }
.faq-item[open] .faq-plus::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p{ padding: 0 0 22px; color: var(--text-dim); font-size:0.94rem; max-width:620px; }

/* final cta */
.cta-section{ padding-top:20px; }
.cta-card{
  text-align:center; padding: 60px 40px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.cta-card h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--silver); }
.cta-card p{ color: var(--text-dim); margin-bottom:8px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ height:340px; order:-1; }
  .feature-grid, .how-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .feature-grid, .how-list{ grid-template-columns: 1fr; }
  .section{ padding:60px 0; }
}