:root{
  --bg: #ffffff;
  --surface: #f6f7fa;
  --surface-2: #eef0f4;
  --border: #e2e5eb;
  --ink: #17213f;
  --ink-soft: #5b6478;
  --brand-navy: #17213f;
  --brand-turquoise: #62c9c3;
  --brand-green: #5fd28a;
  --brand-blue: #6a90d6;
  --gradient-brand: linear-gradient(135deg, var(--brand-green), var(--brand-turquoise) 55%, var(--brand-blue));
  --radius: .875rem;
  --shadow-card: 0 1px 2px rgba(23,33,63,.06), 0 8px 24px rgba(23,33,63,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  letter-spacing:-.01em; margin:0;
}
img{max-width:100%; display:block}
a{color:inherit}
.grad-text{
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:20px}
@media (min-width:640px){ .wrap{padding-inline:32px} }

header.site{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:8px; font-family:"Plus Jakarta Sans"; font-weight:800; font-size:1.05rem; text-decoration:none; color:var(--ink)}
.logo img{height:36px; width:auto; display:block}
@media (min-width:640px){ .logo img{height:40px} }
.mainnav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.mainnav a{font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink-soft)}
.mainnav a:hover{color:var(--ink)}
.mainnav a.cur{color:var(--ink)}
.crumbs{font-size:.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-block:12px}
.crumbs a{text-decoration:none; color:var(--ink-soft)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink); font-weight:600}

main{padding-block:8px 80px}

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-turquoise);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gradient-brand); display:inline-block; border-radius:2px}
h1.hero-title{font-size:clamp(2rem, 5vw, 3.1rem); font-weight:800; line-height:1.08; color:var(--ink)}
p.lead{font-size:1.05rem; color:var(--ink-soft); max-width:60ch; margin-top:16px; line-height:1.65}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px; margin-top:40px;
}
.card{
  border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-card); text-decoration:none; color:var(--ink); display:block;
  transition:transform .25s ease;
}
.card:hover{transform:translateY(-4px)}
.thumb{position:relative; aspect-ratio:4/5; background:var(--surface-2); overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:top center}
.thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(15,20,40,.85) 0%, rgba(15,20,40,.12) 45%, transparent 65%);
}
.play-btn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none}
.play-btn span{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center;
  justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .2s ease;
}
.card:hover .play-btn span{transform:scale(1.08)}
.play-btn svg{width:20px; height:20px; fill:var(--brand-navy); margin-left:3px}
.card-meta{position:absolute; left:0; right:0; bottom:0; padding:16px; z-index:2; color:#fff}
.card-meta .name{font-family:"Plus Jakarta Sans"; font-weight:700; font-size:1.05rem}
.card-meta .role{font-size:.82rem; opacity:.92; margin-top:2px}
.badges{position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; z-index:2}
.chip{
  background:rgba(15,20,40,.55); color:#fff; font-size:.72rem; font-weight:600; padding:4px 9px;
  border-radius:999px; backdrop-filter:blur(4px); display:flex; align-items:center; gap:4px;
}
.card.soon{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; border:1.5px dashed var(--border);
  background:transparent; box-shadow:none; color:var(--ink-soft); text-align:center; padding:24px;
}
.card.soon:hover{transform:none}
.soon-inner{display:flex; flex-direction:column; align-items:center; gap:10px}
.soon-inner svg{width:26px; height:26px; opacity:.5}
.soon-inner .t{font-weight:600; font-size:.92rem; color:var(--ink-soft)}

.faq-section{margin-top:64px; padding-top:48px; border-top:1px solid var(--border)}
.faq-title{font-size:1.5rem; font-weight:800; margin-bottom:8px}
.faq-sub{color:var(--ink-soft); font-size:.95rem; margin-bottom:28px; max-width:60ch; line-height:1.6}
.faq-item{border-bottom:1px solid var(--border); padding-block:22px}
.faq-item h2{font-size:1.05rem; font-weight:700; margin-bottom:8px}
.faq-item p{color:var(--ink-soft); font-size:.95rem; line-height:1.65; margin:0; max-width:70ch}
.faq-item p a{color:var(--brand-navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--brand-turquoise); text-underline-offset:2px}
.faq-item p a:hover{color:var(--brand-turquoise)}

.back{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--ink-soft);
  text-decoration:none; margin-bottom:28px;
}
.back:hover{color:var(--ink)}
.back svg{width:15px; height:15px}

.detail-head{margin-bottom:28px}
h1.name{font-size:clamp(1.7rem, 3.6vw, 2.5rem); font-weight:800}
.role-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; color:var(--ink-soft); font-size:.95rem}
.role-row .dot{width:4px; height:4px; border-radius:50%; background:var(--ink-soft)}
.loc{display:inline-flex; align-items:center; gap:5px}
.loc svg{width:14px; height:14px}

.player{
  border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow-card);
  aspect-ratio:16/9; position:relative; margin-top:28px;
}
.player video{width:100%; height:100%; display:block; object-fit:cover}
.player.vertical{aspect-ratio:9/16; max-width:380px; margin-left:auto; margin-right:auto}
.context{font-size:1rem; color:var(--ink-soft); margin-top:20px; line-height:1.7; max-width:70ch}

.qa-section{margin-top:52px}
.qa-title{font-size:1.3rem; font-weight:700; margin-bottom:6px}
.qa-sub{color:var(--ink-soft); font-size:.9rem; margin-bottom:22px}
.qa-list{display:flex; flex-direction:column; border-top:1px solid var(--border)}
.qa-chapter{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-turquoise);
  padding-top:22px; padding-bottom:4px;
}
.qa-item{border-bottom:1px solid var(--border); padding-block:20px; display:flex; align-items:flex-start; gap:16px}
.qa-num{font-family:"Plus Jakarta Sans"; font-weight:800; font-size:.85rem; color:var(--ink-soft); width:22px; flex:none; padding-top:2px}
.qa-item > div{flex:1; min-width:0}
.qa-item h2{font-size:1.02rem; font-weight:700; line-height:1.4; margin-bottom:6px}
.qa-item p{font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin:0; max-width:66ch}
.qa-jump{
  flex:none; display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; font-size:.8rem;
  color:var(--ink); background:none; border:1px solid var(--border); padding:5px 11px; border-radius:999px;
  text-decoration:none; font-family:"DM Sans"; cursor:pointer;
}
.qa-jump:hover{border-color:var(--brand-turquoise)}
.qa-jump svg{width:11px; height:11px}

.cta-band{
  margin-top:56px; padding:32px; border-radius:var(--radius); background:var(--gradient-brand);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.cta-band h2{color:#12261f; font-size:1.25rem; font-weight:800}
.cta-band p{color:#173026; margin-top:4px; font-size:.92rem}
.cta-btn{
  background:#12261f; color:#fff; font-weight:700; font-size:.92rem; padding:12px 22px;
  border-radius:999px; text-decoration:none; white-space:nowrap; flex:none;
}

footer.site{border-top:1px solid var(--border); margin-top:60px; padding-block:28px; color:var(--ink-soft); font-size:.85rem}
footer.site a{text-decoration:none; color:var(--ink-soft); font-weight:600}
footer.site a:hover{color:var(--ink)}

.contact-section{margin-top:56px; padding-top:48px; border-top:1px solid var(--border); scroll-margin-top:90px}
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:start}
.contact-intro h2{font-size:1.6rem; font-weight:800; line-height:1.2}
.contact-intro p{color:var(--ink-soft); font-size:.95rem; line-height:1.65; margin-top:12px; max-width:44ch}
.wa-btn{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink);
  border:1px solid var(--border); font-weight:700; font-size:.92rem; padding:12px 20px; border-radius:999px;
  text-decoration:none; box-shadow:var(--shadow-card); transition:transform .2s ease, border-color .2s ease;
}
.wa-btn:hover{transform:translateY(-2px); border-color:var(--brand-turquoise)}
.wa-btn svg{width:18px; height:18px; fill:#25D366; flex:none}

.contact-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:28px;
}
.cf-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.cf-field label{font-size:.85rem; font-weight:700; color:var(--ink)}
.cf-field input, .cf-field textarea{
  border:1px solid var(--border); border-radius:.6rem; padding:11px 14px; font-family:"DM Sans", sans-serif;
  font-size:.95rem; color:var(--ink); background:#fff; transition:border-color .2s ease, box-shadow .2s ease; width:100%;
}
.cf-field input:focus, .cf-field textarea:focus{
  outline:none; border-color:var(--brand-turquoise); box-shadow:0 0 0 3px rgba(98,201,195,.18);
}
.cf-field textarea{resize:vertical; min-height:100px; font-family:inherit}
.cf-submit{
  margin-top:6px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand-green); color:#fff; font-weight:700; font-size:.98rem; padding:14px 22px;
  border:none; border-radius:999px; cursor:pointer; transition:transform .2s ease, opacity .2s ease; font-family:"DM Sans";
}
.cf-submit:hover{transform:scale(1.01)}
.cf-submit:disabled{opacity:.65; cursor:default; transform:none}
.cf-status{margin-top:14px; font-size:.88rem; min-height:1.2em}
.cf-status.ok{color:#1c8a53; font-weight:600}
.cf-status.err{color:#c0392b; font-weight:600}

@media (max-width:800px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cta-band{flex-direction:column; align-items:flex-start}
  .qa-item{flex-wrap:wrap}
}