/* Hannan Content Studio — frontend */
.hannan-statistics,.hannan-comparison,.hannan-pros-cons{width:100%;box-sizing:border-box;margin:32px 0}
.hannan-statistics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hannan-stat-item{min-width:0;padding:24px 18px;border:1px solid rgba(0,255,136,.16);border-radius:16px;background:linear-gradient(145deg,rgba(18,34,57,.96),rgba(10,22,40,.96));text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.hannan-stat-item strong{display:block;font-size:clamp(30px,5vw,48px);line-height:1.05;font-weight:800;color:var(--accent-green,#00ff88);overflow-wrap:anywhere}
.hannan-stat-item span{display:block;margin-top:8px;color:var(--text-light,#b0c4de);font-size:14px;font-weight:600}
.hannan-callout,.hannan-fact-box{box-sizing:border-box;margin:30px 0;padding:22px 24px;border-radius:14px;border:1px solid rgba(0,255,136,.18);background:rgba(0,255,136,.055);overflow-wrap:anywhere}
.hannan-callout h3{margin:0 0 8px!important;font-size:18px!important;color:#fff!important}
.hannan-callout p,.hannan-fact-box p{margin:0!important;color:#e7edf5!important}
.hannan-callout-warning{border-color:rgba(255,180,0,.3);background:rgba(255,180,0,.07)}
.hannan-callout-tip{border-color:rgba(0,212,255,.25);background:rgba(0,212,255,.06)}
.hannan-callout-fact{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.08)}
.hannan-fact-box{position:relative;padding-top:38px}
.hannan-fact-label{position:absolute;top:12px;left:16px;font-size:11px;letter-spacing:1.2px;font-weight:800;color:var(--accent-green,#00ff88)}
.hannan-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hannan-comparison-col{min-width:0;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025);overflow-wrap:anywhere}
.hannan-comparison-col h3{margin-top:0!important}
.hannan-process,.hannan-timeline{margin:34px 0}
.hannan-process h2{font-size:clamp(22px,4vw,32px)!important}
.hannan-process-list{position:relative;display:grid;gap:14px}
.hannan-process-list:before{content:"";position:absolute;left:24px;top:25px;bottom:25px;width:1px;background:rgba(0,255,136,.2)}
.hannan-process-step{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);min-width:0}
.hannan-process-number{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0e1f38;border:1px solid rgba(0,255,136,.35);color:var(--accent-green,#00ff88);font-weight:800}
.hannan-process-step h3{margin:3px 0 5px!important;font-size:17px!important}
.hannan-process-step p{margin:0!important;color:var(--text-light,#b0c4de)}
.hannan-timeline{display:grid;gap:12px}
.hannan-timeline-item{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr);gap:18px;align-items:start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hannan-timeline-date{font-weight:800;color:var(--accent-green,#00ff88)}
.hannan-timeline-content p{margin:0!important}
.hannan-pros-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hannan-pros,.hannan-cons{padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);min-width:0}
.hannan-pros h3,.hannan-cons h3{margin-top:0!important}
.hannan-pros ul,.hannan-cons ul{margin:0!important;padding-left:20px}
.hannan-faq{margin:12px 0;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.025);overflow:hidden}
.hannan-faq summary{cursor:pointer;padding:16px 18px;font-weight:700;color:#fff}
.hannan-faq>div{padding:0 18px 17px;color:var(--text-light,#b0c4de)}
.hannan-chart{width:100%;margin:34px 0;padding:18px;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(10,22,40,.65);overflow:hidden}
.hannan-chart-canvas-wrap{position:relative;width:100%;height:360px;max-width:100%}
.hannan-chart canvas{display:block!important;width:100%!important;height:100%!important;max-width:100%!important}
@media(max-width:700px){
 .hannan-statistics,.hannan-comparison,.hannan-pros-cons{grid-template-columns:1fr}
 .hannan-stat-item{padding:20px 14px}
 .hannan-comparison-col,.hannan-pros,.hannan-cons{padding:18px}
 .hannan-process-step{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:14px}
 .hannan-process-list:before{left:20px}
 .hannan-process-number{width:40px;height:40px}
 .hannan-timeline-item{grid-template-columns:1fr;gap:5px}
 .hannan-chart{padding:10px;margin:26px 0}
 .hannan-chart-canvas-wrap{height:270px}
}