/* ═══════════════════════════════════════════════════════════════
   HYHUB — sections.css  (Complete Component Library v2)
   Cards · Grids · Timeline · Panels · Team · Platform profiles
   ═══════════════════════════════════════════════════════════════ */

/* ── Lists ────────────────────────────────────────────────────── */
.hero-points,.info-list,.plan-points,.faq-list,.feature-list,.market-list,.link-list{list-style:none;padding:0;margin:0}
.hero-points{margin-top:1.7rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.hero-points li,.info-list li,.plan-points li,.faq-list li,.feature-list li,.market-list li,.tool-chip,.metric-chip{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:.95rem 1rem;box-shadow:0 10px 24px #09162d0a}

/* ── Typography in cards ──────────────────────────────────────── */
.hero-points strong,.service-card h3,.industry-card h3,.cluster-card h3,.pricing-card h3,.role-card h3,.article-card h3,.faq-card h3,.contact-card h3,.stat-card h3,.solution-card h3,.platform-card h3{font-family:"Space Grotesk","Segoe UI",sans-serif;letter-spacing:-.03em;margin:0}

/* ── Logo list ────────────────────────────────────────────────── */
.logo-list{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.logo-chip{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:.7rem .95rem;border-radius:999px;background:var(--surface-solid);box-shadow:0 16px 28px #09162d2e;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.logo-chip:hover{transform:translateY(-2px);box-shadow:0 20px 30px #09162d33}
.logo-chip img{height:26px;width:auto}

/* ── Grid layouts ─────────────────────────────────────────────── */
.stat-grid,.service-grid,.industry-grid,.cluster-grid,.pricing-grid,.blog-grid,.team-grid,.faq-grid,.comparison-grid,.timeline,.field-grid,.founder-grid,.contact-grid,.split-layout,.solution-grid,.platform-grid{display:grid;gap:1.2rem}
.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.7rem}
.stat-card{padding:1.2rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.stat-kicker{display:block;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.stat-card strong{display:block;margin-top:.35rem;font-size:1.05rem}

/* ── Grid column templates ────────────────────────────────────── */
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.industry-grid,.team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cluster-grid,.pricing-grid,.faq-grid,.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline{grid-template-columns:repeat(4,minmax(0,1fr))}
.founder-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.contact-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.split-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── Card base ────────────────────────────────────────────────── */
.service-card,.industry-card,.cluster-card,.pricing-card,.article-card,.role-card,.faq-card,.contact-card,.compare-card,.solution-card,.platform-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.45rem;box-shadow:var(--shadow-soft)}
.service-card,.industry-card,.cluster-card,.article-card,.pricing-card,.role-card,.faq-card,.contact-card,.compare-card,.solution-card,.platform-card{display:grid;gap:.95rem}
.service-card h3,.industry-card h3,.cluster-card h3,.article-card h3,.pricing-card h3,.role-card h3,.faq-card h3,.contact-card h3,.compare-card h3,.solution-card h3,.platform-card h3{line-height:1.18}
.service-card p,.industry-card p,.cluster-card p,.pricing-card p,.article-card p,.role-card p,.faq-card p,.contact-card p,.compare-card p,.solution-card p,.platform-card p{margin:0;color:var(--muted)}

/* ── Card kickers / labels ────────────────────────────────────── */
.card-kicker,.price-label{display:inline-flex;width:fit-content;padding:.45rem .75rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.card-kicker.kicker-coral{background:var(--accent-2-soft);color:var(--accent-2)}
.card-kicker.kicker-teal{background:var(--accent-3-soft);color:var(--accent-3)}
.card-kicker.kicker-purple{background:var(--accent-4-soft);color:var(--accent-4)}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.52rem .78rem;border-radius:999px;background:var(--accent-soft);color:var(--text);font-size:.83rem;font-weight:600}
.badge.is-accent{background:#14b8a624;color:#0f766e}

/* ── Card sublists ────────────────────────────────────────────── */
.service-card .info-list,.pricing-card .plan-points,.cluster-card .info-list,.faq-card .info-list,.solution-card .info-list,.platform-card .info-list{display:grid;gap:.7rem}
.service-card .info-list li,.pricing-card .plan-points li,.cluster-card .info-list li,.faq-card .info-list li,.solution-card .info-list li,.platform-card .info-list li{background:var(--bg-alt);border-color:transparent;box-shadow:none;border-radius:16px}

/* ── Visual card / panels ─────────────────────────────────────── */
.visual-card{padding:0;overflow:hidden}
.visual-card img,.panel-dark img{width:100%;border-radius:var(--radius-lg)}
.visual-card .visual-copy{padding:1.5rem}
.capsule-row,.metric-row{display:flex;flex-wrap:wrap;gap:.85rem}
.metric-chip{display:inline-flex;align-items:center;gap:.55rem;color:var(--text);font-weight:600}

/* ── Timeline ─────────────────────────────────────────────────── */
.timeline-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-soft)}
.timeline-step::before{content:attr(data-step);display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-family:"Space Grotesk","Segoe UI",sans-serif;font-weight:700;margin-bottom:1rem}
.timeline-step p{margin:.6rem 0 0;color:var(--muted)}

/* ── Founder section ──────────────────────────────────────────── */
.founder-photo-wrap{display:grid;place-items:center;gap:1rem}
.founder-photo{width:min(100%,280px);aspect-ratio:1;object-fit:cover;border-radius:28px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-2-soft));box-shadow:0 24px 48px #09162d1f}
.founder-note{padding:.95rem 1rem;border-radius:18px;background:var(--accent-soft);border:1px solid var(--accent-soft);color:var(--muted)}
.founder-meta{display:grid;gap:.35rem;margin-bottom:1rem}
.founder-meta h2{margin:0;font-size:clamp(1.8rem,4vw,2.8rem)}
.founder-meta p{margin:0;color:var(--muted)}

/* ── Pricing cards ────────────────────────────────────────────── */
.pricing-card.featured{background:radial-gradient(circle at top right,var(--accent-3-soft),transparent 28%),var(--card-bg);border-color:var(--accent);transform:translateY(-8px)}
.price-figure{margin:.85rem 0 0;font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.05em}
.price-subtext,.article-meta{color:var(--muted);font-size:.84rem}
.article-meta{text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ── Quote + CTA banner ───────────────────────────────────────── */
.quote-card,.cta-banner{padding:2rem}
.quote-card p,.cta-banner p{margin:.9rem 0 0;color:#ffffffc7}
.cta-banner{display:grid;gap:1.1rem}
.cta-banner p{max-width:58ch}

/* ── Service details (accordion) ──────────────────────────────── */
.service-detail-list{display:grid;gap:1rem}
.service-detail{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.35rem;box-shadow:var(--shadow-soft)}
.service-detail summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;font:700 1.02rem/1.3 "Space Grotesk","Segoe UI",sans-serif;color:var(--text)}
.service-detail summary::-webkit-details-marker{display:none}
.service-detail summary::after{content:"+";font:700 1.35rem/1 "Space Grotesk","Segoe UI",sans-serif;color:var(--accent)}
.service-detail[open] summary::after{content:"-"}
.service-detail-body{display:grid;gap:1rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line)}
.service-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.service-detail-body p{margin:0;color:var(--muted)}
.service-detail-body strong{display:block;margin-bottom:.35rem;color:var(--text)}

/* ── Solution card (problem → solution) ───────────────────────── */
.solution-card{position:relative;overflow:hidden}
.solution-card .solution-problem{font-size:1.05rem;font-weight:700;color:var(--accent-2);margin:0}
.solution-card .solution-arrow{display:block;font-size:1.2rem;color:var(--accent);margin:.4rem 0}
.solution-card .solution-answer{font-size:.98rem;color:var(--text);margin:0}
.solution-card .solution-services{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.solution-card .solution-services a{display:inline-flex;padding:.35rem .7rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:600;text-decoration:none;transition:.18s}
.solution-card .solution-services a:hover{background:var(--accent);color:#fff}

/* ── Platform profile card ────────────────────────────────────── */
.platform-card{gap:1.1rem}
.platform-card .platform-header{display:flex;align-items:center;gap:1rem}
.platform-card .platform-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.platform-card .platform-meta{display:grid;gap:.2rem}
.platform-card .platform-category{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700}
.platform-card .platform-desc{font-size:.95rem;color:var(--muted);margin:0;line-height:1.6}
.platform-card .platform-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.platform-card .platform-tags span{padding:.3rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:600}

/* ── Team member cards (enhanced) ─────────────────────────────── */
.role-card{position:relative;overflow:hidden}
.role-card .role-avatar{width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-3));display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.3rem;flex-shrink:0}
.role-card .role-header{display:flex;align-items:center;gap:1rem}
.role-card .role-info{display:grid;gap:.2rem}
.role-card .role-title{font-size:.82rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.role-card .role-specializations{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.role-card .role-specializations span{padding:.28rem .58rem;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:600}
.role-card .role-focus{margin:.5rem 0 0;padding:.75rem;border-radius:var(--radius-sm);background:var(--bg-alt);border:1px solid var(--line);font-size:.88rem;color:var(--muted)}

/* ── Industry detail card (expanded) ──────────────────────────── */
.industry-card-expanded{display:grid;gap:1rem;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-soft)}
.industry-card-expanded h3{font-family:"Space Grotesk","Segoe UI",sans-serif;letter-spacing:-.03em;margin:0;font-size:1.15rem}
.industry-card-expanded .industry-icon{font-size:2rem;margin-bottom:.3rem}
.industry-card-expanded .industry-challenges,.industry-card-expanded .industry-solutions,.industry-card-expanded .industry-benefits{display:grid;gap:.5rem}
.industry-card-expanded .industry-challenges h4,.industry-card-expanded .industry-solutions h4,.industry-card-expanded .industry-benefits h4{margin:0;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.industry-card-expanded .industry-challenges h4{color:var(--accent-2)}
.industry-card-expanded .industry-solutions h4{color:var(--accent)}
.industry-card-expanded .industry-benefits h4{color:var(--accent-3)}
.industry-card-expanded p,.industry-card-expanded li{margin:0;color:var(--muted);font-size:.92rem}
.industry-card-expanded ul{margin:0;padding-left:1.2rem}
.industry-card-expanded .industry-cta{margin-top:.5rem}

/* ── 3D hero showcase ─────────────────────────────────────────── */
.hero-showcase{position:relative;width:100%;height:400px;perspective:1200px;display:flex;align-items:center;justify-content:center}
.hero-showcase-inner{position:relative;width:280px;height:280px;transform-style:preserve-3d;animation:spin3d 20s linear infinite}
.hero-showcase-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.5rem;text-align:center;font-weight:600;border:1px solid var(--line)}
.hero-showcase-face:nth-child(1){transform:rotateY(0deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.hero-showcase-face:nth-child(2){transform:rotateY(60deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-2-soft),var(--surface))}
.hero-showcase-face:nth-child(3){transform:rotateY(120deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-3-soft),var(--surface))}
.hero-showcase-face:nth-child(4){transform:rotateY(180deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-4-soft),var(--surface))}
.hero-showcase-face:nth-child(5){transform:rotateY(240deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.hero-showcase-face:nth-child(6){transform:rotateY(300deg) translateZ(180px);background:linear-gradient(135deg,var(--accent-2-soft),var(--surface))}
.hero-showcase-face .showcase-icon{font-size:2.5rem}
.hero-showcase-face .showcase-label{font-size:.88rem;color:var(--text)}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1120px){
  .service-grid,.industry-grid,.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-grid,.faq-grid,.blog-grid,.cluster-grid,.pricing-grid,.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .solution-grid,.platform-grid{grid-template-columns:1fr}
}
@media (max-width:980px){.founder-grid,.contact-grid,.split-layout{grid-template-columns:1fr}.pricing-card.featured{transform:none}}
@media (max-width:740px){
  .hero-points,.stat-grid,.service-grid,.industry-grid,.team-grid,.timeline,.cluster-grid,.pricing-grid,.faq-grid,.blog-grid,.field-grid,.service-detail-grid,.solution-grid,.platform-grid{grid-template-columns:1fr}
  .hero-showcase{height:280px}
  .hero-showcase-inner{width:200px;height:200px}
  .hero-showcase-face{padding:1rem}
  .hero-showcase-face:nth-child(1){transform:rotateY(0deg) translateZ(130px)}
  .hero-showcase-face:nth-child(2){transform:rotateY(60deg) translateZ(130px)}
  .hero-showcase-face:nth-child(3){transform:rotateY(120deg) translateZ(130px)}
  .hero-showcase-face:nth-child(4){transform:rotateY(180deg) translateZ(130px)}
  .hero-showcase-face:nth-child(5){transform:rotateY(240deg) translateZ(130px)}
  .hero-showcase-face:nth-child(6){transform:rotateY(300deg) translateZ(130px)}
}

/* Premium homepage visual system */
.hero-visual-frame{position:relative;isolation:isolate;max-width:620px;margin-left:auto;padding:1rem;border:1px solid rgba(255,255,255,.32);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.25));box-shadow:0 34px 80px rgba(9,22,45,.2);overflow:hidden}
.hero-visual-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,110,245,.08),transparent 48%,rgba(255,107,74,.12));pointer-events:none;z-index:-1}
.hero-visual-frame img{width:100%;border-radius:25px;box-shadow:0 18px 38px rgba(9,22,45,.25)}
.hero-visual-caption{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem .35rem .1rem;color:var(--text);font-size:.86rem}
.hero-visual-caption strong{font-family:"Space Grotesk","Segoe UI",sans-serif;letter-spacing:-.02em;text-align:right}
.visual-status{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;white-space:nowrap}
.visual-status i{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 .25rem rgba(34,197,94,.15)}
.hero-showcase{display:none}
.proof-band{margin:1.1rem 0 1rem;padding:1.1rem 0;background:#081327;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.proof-grid{display:grid;grid-template-columns:minmax(2fr,1.8fr) repeat(3,minmax(0,1fr));align-items:center;gap:1rem}
.proof-intro{display:grid;gap:.35rem;padding-right:1.5rem}
.proof-intro .section-tag{color:#80b7ff}
.proof-intro p{margin:0;color:rgba(255,255,255,.7);font-size:.92rem;max-width:38ch}
.proof-item{display:grid;gap:.15rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.16)}
.proof-item strong{font:700 clamp(1.8rem,3vw,2.7rem)/1 "Space Grotesk","Segoe UI",sans-serif;color:#fff;letter-spacing:-.06em}
.proof-item span{color:rgba(255,255,255,.62);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.35}
[data-theme="dark"] .hero-visual-frame{border-color:rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(30,41,59,.8),rgba(30,41,59,.28));box-shadow:0 34px 80px rgba(0,0,0,.42)}
[data-theme="dark"] .hero-visual-frame::before{background:linear-gradient(135deg,rgba(59,130,246,.16),transparent 48%,rgba(251,146,60,.12))}

@media (max-width:980px){
  .proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof-intro{grid-column:1/-1;padding:0 0 .65rem;border-bottom:1px solid rgba(255,255,255,.16)}
  .proof-item:first-of-type{border-left:0;padding-left:0}
}
@media (max-width:740px){
  .hero-visual-frame{margin-top:1.4rem;border-radius:24px;padding:.55rem}
  .hero-visual-frame img{border-radius:19px}
  .hero-visual-caption{display:grid;gap:.35rem;padding:.75rem .2rem .15rem}
  .hero-visual-caption strong{text-align:left}
  .proof-grid{grid-template-columns:1fr;gap:.85rem}
  .proof-item,.proof-item:first-of-type{padding:.75rem 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .proof-item strong{font-size:2rem}
}