/* ============================================================
   Humic Factory Case Study
   ============================================================ */

.hf-page{background:#FAF4EC;color:#111111;font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.hf-container{max-width:1200px;margin:0 auto;padding:0 40px}

/* ── SECTION LABEL ── */
.hf-page .section-label{font-size:13px;font-weight:700;color:#111;margin-bottom:20px;display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:1.5px}
.hf-page .section-label::before{content:'';width:24px;height:2px;background:#FF4B1F;display:inline-block}
.hf-page .section-label-center{justify-content:center}

/* ── FADE ANIMATIONS ── */
.hf-page .fade-up{opacity:0;transform:translateY(28px);transition:all .7s cubic-bezier(.22,1,.36,1)}
.hf-page .fade-up.visible{opacity:1;transform:translateY(0)}
.hf-page .d1{transition-delay:.1s}
.hf-page .d2{transition-delay:.2s}
.hf-page .d3{transition-delay:.3s}
.hf-page .d4{transition-delay:.4s}

/* ── HERO ── */
.hf-hero{padding:100px 0 80px;background:#F7F3EB}
.hf-hero .hf-container{display:flex;align-items:center;gap:60px}
.hf-hero .hero-left{flex:1;max-width:520px}
.hf-hero .hero-right{flex:0 0 400px;display:flex;justify-content:center}
.hf-hero .hero-eyebrow{font-size:12px;font-weight:700;color:#FF4B1F;text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.hf-hero h1{font-size:48px;font-weight:800;letter-spacing:-1.5px;line-height:1.08;color:#121212;margin-bottom:16px}
.hf-hero .hero-subtitle{font-size:16px;color:#444;line-height:1.75;margin-bottom:28px;max-width:460px}
.hf-hero .hero-tags{display:flex;gap:8px;flex-wrap:wrap}
.hf-hero .htag{display:inline-block;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600}
.hf-hero .htag-dark{background:#111;color:#fff}
.hf-hero .htag-pink{background:#F8E5F8;color:#121212}
.hf-hero .htag-cream{background:#F4EDE4;color:#121212}
.hf-hero .htag-green{background:#F0FDF4;color:#15803D}

/* Stacked Card */
.hf-hero .card-stack{position:relative;width:380px;height:510px}
.hf-hero .card-back-2{position:absolute;width:84%;height:100%;background:#BFBFBF;border-radius:30px;z-index:1;left:8%;top:22px;opacity:.25}
.hf-hero .card-back-1{position:absolute;width:92%;height:100%;background:#666;border-radius:30px;z-index:2;left:4%;top:11px;opacity:.4}
.hf-hero .card-main{position:absolute;width:100%;height:100%;background:#121212;border-radius:30px;z-index:3;box-shadow:0 20px 50px rgba(0,0,0,.12);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;overflow:hidden}
.hf-hero .card-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.hf-hero .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.hf-hero .stat-item{text-align:center}
.hf-hero .stat-num{font-size:26px;font-weight:800;color:#fff;line-height:1}
.hf-hero .stat-label{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.hf-hero .chart-area{height:70px;display:flex;align-items:flex-end;gap:3px;padding:0 4px}
.hf-hero .chart-bar{flex:1;border-radius:3px 3px 0 0;transition:height .9s cubic-bezier(.22,1,.36,1)}

/* ── ASSIGNMENT ── */
.hf-assignment{padding:100px 0;background:#F7F3EB}
.hf-assignment h2{font-size:36px;font-weight:700;line-height:1.3;color:#121212;max-width:860px;margin-bottom:48px;letter-spacing:-.5px}
.hf-assignment .video-scroll{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hf-assignment .video-scroll::-webkit-scrollbar{display:none}
.hf-assignment .video-card{flex:0 0 300px;height:520px;background:#111;border-radius:28px;overflow:hidden;scroll-snap-align:start;position:relative;padding:32px;display:flex;flex-direction:column;justify-content:flex-end}
.hf-assignment .phase-number{font-size:72px;font-weight:900;color:rgba(255,255,255,.06);position:absolute;top:20px;right:24px;line-height:1}
.hf-assignment .phase-tag{display:inline-block;padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.hf-assignment .phase-title{font-size:22px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:12px}
.hf-assignment .phase-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7}
.hf-assignment .phase-stat{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.hf-assignment .phase-stat-num{font-size:36px;font-weight:800;color:#fff}
.hf-assignment .phase-stat-label{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}

/* ── APPROACH ── */
.hf-approach{padding:100px 0;background:#F4EDE4}
.hf-approach .hf-container{display:flex;align-items:flex-start;gap:80px}
.hf-approach .approach-left{flex:0 0 420px}
.hf-approach .approach-right{flex:1}
.hf-approach h2{font-size:38px;font-weight:700;line-height:1.2;color:#121212;margin-bottom:20px;letter-spacing:-.5px}
.hf-approach p{font-size:15px;color:#444;line-height:1.8;margin-bottom:14px}
.hf-approach .pillar-list{margin-top:24px}
.hf-approach .pillar-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#444;line-height:1.6;margin-bottom:8px}
.hf-approach .pillar-bullet{width:6px;height:6px;border-radius:50%;background:#FF4B1F;flex-shrink:0;margin-top:8px}
.hf-approach .strategy-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hf-approach .strategy-card{background:#fff;border-radius:16px;padding:24px;border:1px solid rgba(0,0,0,.06)}
.hf-approach .strategy-card .sc-num{font-size:11px;font-weight:700;color:#FF4B1F;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.hf-approach .strategy-card h4{font-size:16px;font-weight:700;color:#121212;margin-bottom:8px;line-height:1.3}
.hf-approach .strategy-card p{font-size:13px;color:#666;line-height:1.7;margin-bottom:0}

/* ── RESULTS ── */
.hf-results{padding:100px 0;background:#F7F3EB}
.hf-results .results-sub{font-size:14px;color:#888;margin-bottom:48px}
.hf-results h2{font-size:42px;font-weight:700;color:#121212;margin-bottom:8px;letter-spacing:-.5px}
.hf-results .result-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.hf-results .result-card{border-radius:24px;overflow:hidden;position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.hf-results .rc-white{background:#fff;border:1px solid rgba(0,0,0,.06)}
.hf-results .rc-dark{background:#121212;color:#fff}
.hf-results .rc-coral{background:linear-gradient(135deg,#FF4B1F 0%,#FF6B35 100%);color:#fff}
.hf-results .rc-green{background:#053B15;color:#fff}
.hf-results .big-num{font-size:64px;font-weight:900;line-height:1;margin-bottom:8px;letter-spacing:-2px}
.hf-results .rc-white .big-num{color:#121212}
.hf-results .rc-dark .big-num,.hf-results .rc-coral .big-num,.hf-results .rc-green .big-num{color:#fff}
.hf-results .big-label{font-size:16px;font-weight:600;margin-bottom:4px}
.hf-results .rc-white .big-label{color:#121212}
.hf-results .rc-dark .big-label{color:rgba(255,255,255,.9)}
.hf-results .rc-coral .big-label,.hf-results .rc-green .big-label{color:#fff}
.hf-results .big-sub{font-size:13px;line-height:1.6}
.hf-results .rc-white .big-sub{color:#888}
.hf-results .rc-dark .big-sub{color:rgba(255,255,255,.5)}
.hf-results .rc-coral .big-sub{color:rgba(255,255,255,.7)}
.hf-results .rc-green .big-sub{color:rgba(255,255,255,.6)}
.hf-results .card-brand{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:8px}
.hf-results .card-dot{width:24px;height:24px;border-radius:6px;background:#FF4B1F}
.hf-results .card-brand-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}
.hf-results .card-cta{display:inline-block;margin-top:16px;padding:9px 22px;background:#FF4B1F;color:#fff;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none}
.hf-results .kw-mini{width:100%;margin-top:8px;font-size:12px;border-collapse:collapse}
.hf-results .kw-mini tr{border-bottom:1px solid rgba(255,255,255,.06)}
.hf-results .kw-mini td{padding:7px 0;color:rgba(255,255,255,.6)}
.hf-results .kw-mini td:first-child{color:rgba(255,255,255,.85);font-weight:600}
.hf-results .kw-mini td:last-child{text-align:right;color:#FF6B35;font-weight:700}

/* ── GEO ── */
.hf-geo{padding:80px 0;background:#F4EDE4}
.hf-geo h2{font-size:38px;font-weight:700;color:#121212;margin-bottom:8px;letter-spacing:-.5px}
.hf-geo .geo-sub{font-size:14px;color:#888;margin-bottom:36px}
.hf-geo .geo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hf-geo .geo-card{background:#fff;border-radius:16px;padding:20px 18px;border:1px solid rgba(0,0,0,.05)}
.hf-geo .geo-flag{font-size:26px;margin-bottom:8px}
.hf-geo .geo-country{font-size:12px;font-weight:600;color:#444;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.hf-geo .geo-users{font-size:28px;font-weight:900;color:#121212;letter-spacing:-1px;line-height:1}
.hf-geo .geo-users-label{font-size:11px;color:#888;margin-top:3px}

/* ── KEYWORD TABLE ── */
.hf-kw-section{padding:80px 0;background:#F7F3EB}
.hf-kw-section h2{font-size:38px;font-weight:700;color:#121212;margin-bottom:8px;letter-spacing:-.5px}
.hf-kw-section .kw-sub{font-size:14px;color:#888;margin-bottom:36px}
.hf-kw-section .full-table{width:100%;border-collapse:collapse;font-size:14px}
.hf-kw-section .full-table th{text-align:left;padding:12px 16px;background:#121212;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.hf-kw-section .full-table th:not(:first-child){text-align:right}
.hf-kw-section .full-table td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);color:#333;vertical-align:middle}
.hf-kw-section .full-table td:not(:first-child){text-align:right}
.hf-kw-section .full-table tr:nth-child(even) td{background:#F4EDE4}
.hf-kw-section .full-table tr:hover td{background:#F0E8DF}
.hf-kw-section .pos-badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:12px;font-weight:700}
.hf-kw-section .pos-1{background:#FFF0EB;color:#FF4B1F}
.hf-kw-section .pos-top5{background:#E8F5E3;color:#2A7A1F}
.hf-kw-section .pos-top10{background:#F4EDE4;color:#444}
.hf-kw-section .kw-name{font-weight:600;color:#121212}

/* ── BTS ── */
.hf-bts{padding:100px 0;background:#F7F3EB}
.hf-bts h2{font-size:42px;font-weight:700;color:#121212;margin-bottom:8px;letter-spacing:-.5px}
.hf-bts .bts-sub{font-size:14px;color:#888;margin-bottom:40px}
.hf-bts .bts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hf-bts .bts-card{background:#F4EDE4;border-radius:16px;padding:24px;border:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.hf-bts .bts-icon{font-size:24px;margin-bottom:12px}
.hf-bts .bts-title{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.hf-bts .bts-detail{font-size:13px;color:#666;line-height:1.6}
.hf-bts .bts-num{font-size:34px;font-weight:900;color:#121212;letter-spacing:-1px;line-height:1;margin-top:16px}

/* ── TESTIMONIAL ── */
.hf-testimonial{padding:80px 0;background:#F4EDE4;text-align:center}
.hf-testimonial .hf-container{max-width:700px}
.hf-testimonial .quote-mark{font-size:48px;color:#FF4B1F;margin-bottom:16px;font-family:Georgia,serif;line-height:1}
.hf-testimonial .quote-text{font-size:24px;font-weight:600;color:#121212;line-height:1.5;margin-bottom:24px;letter-spacing:-.3px}
.hf-testimonial .quote-divider{width:40px;height:2px;background:#FF4B1F;margin:0 auto 20px}
.hf-testimonial .quote-author{font-size:14px;font-weight:700;color:#121212;margin-bottom:4px}
.hf-testimonial .quote-role{font-size:13px;color:#888}

/* ── CTA ── */
.hf-cta{padding:100px 0;background:#F7F3EB;text-align:center}
.hf-cta h2{font-size:42px;font-weight:700;color:#121212;margin-bottom:12px;letter-spacing:-.5px}
.hf-cta p{font-size:15px;color:#888;margin-bottom:36px}
.hf-cta .cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hf-cta .btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:12px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;text-decoration:none;transition:all .25s ease}
.hf-cta .btn-dark{background:#121212;color:#fff}
.hf-cta .btn-dark:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.hf-cta .btn-coral{background:#FF4B1F;color:#fff}
.hf-cta .btn-coral:hover{background:#e03d10;transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,75,31,.3)}
.hf-cta .btn-outline{background:transparent;color:#121212;border:1.5px solid rgba(0,0,0,.15)}
.hf-cta .btn-outline:hover{border-color:#121212}

/* ── RESPONSIVE ── */
@media(max-width:992px){
  .hf-hero .hf-container,.hf-approach .hf-container{flex-direction:column;gap:40px}
  .hf-hero .hero-left{max-width:100%}
  .hf-hero .card-stack{width:320px;height:440px}
  .hf-approach .approach-left{flex:none;width:100%}
  .hf-results .result-row{grid-template-columns:1fr}
  .hf-geo .geo-grid{grid-template-columns:1fr 1fr}
  .hf-bts .bts-grid{grid-template-columns:1fr 1fr}
  .hf-approach .strategy-cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hf-hero h1,.hf-assignment h2,.hf-approach h2,.hf-results h2,.hf-geo h2,.hf-kw-section h2,.hf-bts h2,.hf-cta h2{font-size:30px}
  .hf-container{padding:0 20px}
  .hf-hero .card-stack{width:280px;height:400px}
  .hf-results .big-num{font-size:44px}
}