/* ============================================
   ASCEND MEDIA - Aggressive Sales Landing Page
   Light-base with strategic dark accent sections
   ============================================ */

:root{
  /* Core */
  --black:#0a0a0a;
  --black-2:#141414;
  --black-3:#1c1c1c;
  --red:#E60012;
  --red-deep:#B80010;
  --red-soft:#FF4D5E;
  --red-tint:#FFE8EA;
  --red-tint-2:#FFF4F5;

  /* Neutral system (cool, professional) */
  --white:#ffffff;
  --gray-50:#FAFAFA;
  --gray-100:#F5F5F7;
  --gray-150:#EDEDF0;
  --gray-200:#E5E5E8;
  --gray-300:#CCCCD1;
  --gray-400:#999AA0;
  --gray-500:#6B6C72;
  --gray-600:#48494E;
  --gray-700:#2A2B2F;

  --font-kr:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-en:'Inter',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:var(--font-kr);
  font-weight:400;
  color:var(--black);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ============ HIGHLIGHTS ============ */
.hl-red{color:var(--red);}
.hl-red-bg{
  background:var(--red);
  color:#fff;
  padding:2px 12px;
  display:inline-block;
}
.hl-underline{
  position:relative;
  display:inline-block;
  font-weight:700;
}
.hl-underline::after{
  content:'';
  position:absolute;
  left:0;bottom:-4px;
  width:100%;height:3px;
  background:var(--red);
}
.muted{color:var(--gray-400);text-decoration:line-through;text-decoration-thickness:2px;}

/* ============ TOP URGENCY BANNER (BLACK - keep aggressive) ============ */
.top-banner{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:block;
  background:#000;
  color:#fff;
  border-bottom:1px solid rgba(230,0,18,0.4);
  overflow:hidden;
  transition:transform 0.4s ease;
}
.top-banner-inner{
  max-width:1240px;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:14px;
  letter-spacing:-0.01em;
}
.tb-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:var(--red);
  color:#fff;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  border-radius:3px;
  position:relative;
}
.tb-tag::before{
  content:'';
  width:6px;height:6px;
  background:#fff;
  border-radius:50%;
  animation:tb-blink 1.2s ease infinite;
}
@keyframes tb-blink{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.7);}
}
.tb-text{
  color:var(--gray-200);
  font-weight:500;
}
.tb-text strong{color:#fff;font-weight:700;}
.tb-text .tb-red{color:var(--red);font-weight:800;}
.tb-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-weight:700;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.4);
  transition:all 0.2s;
}
.top-banner:hover .tb-cta{
  border-color:var(--red);
  color:var(--red);
}
.top-banner:hover .tb-cta i{transform:translateX(4px);}
.tb-cta i{transition:transform 0.2s;font-size:11px;}

.tb-progress{
  height:2px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 70%,rgba(230,0,18,0.2) 70%);
  background-size:200% 100%;
  animation:tb-progress 4s linear infinite;
}
@keyframes tb-progress{
  0%{background-position:100% 0;}
  100%{background-position:-100% 0;}
}

/* ============ BUTTONS ============ */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--red);
  color:#fff;
  padding:14px 26px;
  font-size:15px;
  font-weight:700;
  border-radius:4px;
  transition:all 0.25s ease;
  box-shadow:0 6px 18px rgba(230,0,18,0.3);
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.6s ease;
}
.btn-primary:hover{
  background:var(--red-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(230,0,18,0.5);
}
.btn-primary:hover::before{left:100%;}
.btn-primary i{transition:transform 0.2s;}
.btn-primary:hover i{transform:translateX(4px);}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  padding:14px 20px;
  font-size:14px;
  font-weight:500;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:4px;
  transition:all 0.2s;
}
.btn-secondary:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.06);
}
/* light context secondary */
.btn-secondary.on-light{
  color:var(--black);
  border:1px solid var(--gray-300);
}
.btn-secondary.on-light:hover{
  border-color:var(--black);
  background:var(--gray-100);
}

/* ============ SECTION COMMONS ============ */
.section-tag{
  display:inline-block;
  margin-bottom:18px;
}
.section-tag span{
  display:inline-block;
  padding:5px 12px;
  background:var(--gray-100);
  color:var(--red);
  font-family:var(--font-en);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  border-left:3px solid var(--red);
}
.section-tag.light span{
  background:rgba(230,0,18,0.15);
  color:var(--red);
}

.section-headline{
  font-size:clamp(24px,3.2vw,40px);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-0.02em;
  margin-bottom:24px;
  color:var(--black);
}
.section-headline.light{color:#fff;}
.section-headline.center{text-align:center;}
.section-sub{
  font-size:clamp(14px,1.2vw,16px);
  color:var(--gray-500);
  margin-bottom:36px;
  line-height:1.65;
}
.section-sub.light{color:var(--gray-300);}

/* ============================================
   1. HERO SECTION (BLACK - PRIMARY IMPACT)
   ============================================ */
.hero-section{
  position:relative;
  min-height:auto;
  background:var(--black);
  color:#fff;
  padding:110px 0 70px;
  overflow:hidden;
}
.hero-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.hero-bg-glow{
  position:absolute;
  top:30%;left:60%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(230,0,18,0.22) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none;
  animation:glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{opacity:0.6;transform:scale(1);}
  50%{opacity:1;transform:scale(1.1);}
}

.hero-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  align-items:center;
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:rgba(230,0,18,0.1);
  border:1px solid rgba(230,0,18,0.3);
  border-radius:100px;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--red);
  margin-bottom:22px;
}
.badge-dot{
  width:8px;height:8px;
  background:var(--red);
  border-radius:50%;
  animation:dot-pulse 1.5s ease infinite;
}
@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,0,18,0.6);}
  50%{box-shadow:0 0 0 8px rgba(230,0,18,0);}
}

.hero-headline{
  font-size:clamp(28px,3.6vw,46px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-0.03em;
  margin-bottom:18px;
}

.hero-subhead{
  font-size:clamp(18px,1.8vw,22px);
  color:#fff;
  font-weight:600;
  line-height:1.5;
  margin-bottom:24px;
}
.hero-subhead strong{color:#fff;font-weight:800;}

.hero-sub-copy{
  font-size:14.5px;
  color:var(--gray-300);
  line-height:1.7;
  margin-bottom:26px;
}

.hero-confirm-box{
  display:flex;
  gap:12px;
  padding:14px 18px;
  background:rgba(230,0,18,0.08);
  border-left:3px solid var(--red);
  border-radius:4px;
  margin-bottom:28px;
}
.hero-confirm-box i{
  color:var(--red);
  font-size:18px;
  margin-top:2px;
}
.hero-confirm-box p{
  font-size:13.5px;
  color:var(--gray-200);
  line-height:1.6;
}
.hero-confirm-box strong{color:#fff;font-weight:700;}

.hero-cta-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:0;
}

.hero-shift-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.flow-step{
  position:relative;
  padding:8px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:4px;
  font-size:12.5px;
  color:var(--gray-300);
  font-weight:500;
}
.flow-step.active{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  font-weight:700;
}
.flow-step em{
  position:absolute;
  top:-10px;right:-10px;
  background:#fff;
  color:var(--red);
  font-style:normal;
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:3px;
  letter-spacing:0.5px;
}
.flow-arrow{color:var(--gray-500);font-size:14px;}

/* CHATBOT MOCKUP */
.hero-right{position:relative;}

.chatbot-mockup{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);
  position:relative;
}
.chatbot-mockup::before{
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg,var(--red),transparent 50%);
  z-index:-1;
  border-radius:14px;
  filter:blur(20px);
  opacity:0.5;
}

.chatbot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:#f8f8f8;
  border-bottom:1px solid #ececec;
}
.chatbot-dots{display:flex;gap:6px;}
.chatbot-dots span{
  width:11px;height:11px;
  border-radius:50%;
  background:#ddd;
}
.chatbot-dots span:nth-child(1){background:#ff5f56;}
.chatbot-dots span:nth-child(2){background:#ffbd2e;}
.chatbot-dots span:nth-child(3){background:#27c93f;}
.chatbot-title{
  font-size:13px;
  font-weight:600;
  color:#333;
}
.chatbot-title i{color:var(--red);margin-right:6px;}
.chatbot-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#666;
  font-weight:500;
}
.status-dot{
  width:8px;height:8px;
  background:#27c93f;
  border-radius:50%;
  animation:dot-pulse-green 1.5s ease infinite;
}
@keyframes dot-pulse-green{
  0%,100%{box-shadow:0 0 0 0 rgba(39,201,63,0.6);}
  50%{box-shadow:0 0 0 6px rgba(39,201,63,0);}
}

.chatbot-body{
  padding:16px;
  height:420px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  background:#fff;
}
.msg{
  max-width:88%;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.5;
  opacity:0;
  transform:translateY(10px);
  animation:msg-in 0.4s ease forwards;
}
@keyframes msg-in{
  to{opacity:1;transform:translateY(0);}
}
.msg-user{
  align-self:flex-end;
  background:var(--black);
  color:#fff;
  border-bottom-right-radius:4px;
}
.msg-ai{
  align-self:flex-start;
  background:#f1f1f1;
  color:#222;
  border-bottom-left-radius:4px;
}
.msg-ai strong{color:var(--black);}
.msg-ai .recom-list{
  margin-top:8px;
  padding-left:18px;
  font-size:13px;
}
.msg-ai .recom-list li{margin-bottom:4px;}
.msg-ai .reason{
  display:block;
  font-size:11.5px;
  color:#777;
  margin-top:2px;
  padding-left:4px;
}

.typing{
  align-self:flex-start;
  background:#f1f1f1;
  padding:14px 18px;
  border-radius:14px;
  border-bottom-left-radius:4px;
  display:inline-flex;
  gap:4px;
}
.typing span{
  width:8px;height:8px;
  background:#bbb;
  border-radius:50%;
  animation:typing 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){animation-delay:0.15s;}
.typing span:nth-child(3){animation-delay:0.3s;}
@keyframes typing{
  0%,60%,100%{transform:translateY(0);opacity:0.4;}
  30%{transform:translateY(-6px);opacity:1;}
}

.chatbot-input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid #ececec;
  background:#fafafa;
}
.chatbot-input input{
  flex:1;
  border:none;
  background:transparent;
  font-size:13px;
  color:#888;
  outline:none;
  font-family:inherit;
}
.chatbot-input button{
  width:34px;height:34px;
  background:var(--red);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

.chatbot-warning{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
}



/* ============================================
   2. PAIN POINT (WHITE - explanation)
   ============================================ */
.pain-section{
  padding:80px 0;
  background:#fff;
}
.pain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:40px;
}
.pain-card{
  position:relative;
  padding:22px 20px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:8px;
  transition:all 0.3s ease;
}
.pain-card:hover{
  transform:translateY(-4px);
  border-color:var(--gray-400);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
.pain-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  color:#fff;
  border-radius:8px;
  font-size:16px;
  margin-bottom:12px;
}
.pain-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:4px;
}
.pain-card p{
  font-size:13px;
  color:var(--gray-500);
  margin-bottom:10px;
}
.pain-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#27c93f;
  background:rgba(39,201,63,0.1);
  padding:4px 10px;
  border-radius:3px;
  letter-spacing:0.5px;
}

.pain-but-block{
  position:relative;
  padding:32px 28px;
  background:#fff;
  border:2px solid var(--black);
  border-radius:8px;
  margin-bottom:28px;
}
.but-tag{
  position:absolute;
  top:-14px;left:24px;
  background:var(--red);
  color:#fff;
  padding:6px 16px;
  font-family:var(--font-en);
  font-weight:900;
  letter-spacing:2.5px;
  font-size:12px;
}
.pain-but-block h3{
  font-size:clamp(18px,2vw,24px);
  font-weight:800;
  line-height:1.4;
  margin-bottom:16px;
}
.pain-narrative{
  font-size:14.5px;
  color:var(--gray-600);
  line-height:1.7;
  margin-bottom:10px;
}
.pain-narrative em{
  font-style:normal;
  font-weight:700;
  color:var(--black);
  background:var(--red-tint);
  padding:2px 6px;
}
.pain-narrative strong{font-weight:800;}

/* Pain pressure - kept BLACK as a strong accent block within white section */
.pain-pressure{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 28px;
  background:var(--black);
  color:#fff;
  border-radius:8px;
  margin-bottom:40px;
}
.pain-pressure i{
  font-size:36px;
  color:var(--red);
}
.pain-pressure p{
  font-size:clamp(14.5px,1.3vw,17px);
  font-weight:600;
  line-height:1.5;
}

.pain-conclusion{
  text-align:center;
  padding:24px 0 0;
}
.conclusion-line-1{
  font-size:16px;
  color:var(--gray-500);
  margin-bottom:6px;
}
.conclusion-line-2{
  font-size:14px;
  color:var(--gray-500);
  margin-bottom:12px;
  font-weight:600;
}
.conclusion-line-3{
  font-size:clamp(20px,2.5vw,30px);
  font-weight:900;
  line-height:1.4;
}

/* ============================================
   3. AI SELECTION LOGIC (LIGHT GRAY - explanation)
   ============================================ */
.logic-section{
  padding:80px 0;
  background:var(--gray-50);
  color:var(--black);
  position:relative;
  overflow:hidden;
}
.logic-section::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.025) 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}
.logic-section .container{position:relative;z-index:2;}

.section-headline.light{color:var(--black);}
.section-sub.light{color:var(--gray-500);}

.logic-criteria{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:36px 0;
}
.criteria-item{
  padding:18px 16px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:8px;
  transition:all 0.3s;
}
.criteria-item:hover{
  background:#fff;
  border-color:var(--red);
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}
.criteria-num{
  font-family:var(--font-en);
  font-size:24px;
  font-weight:900;
  color:var(--red);
  margin-bottom:8px;
  line-height:1;
}
.criteria-content h4{
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
  color:var(--black);
}
.criteria-content p{
  font-size:12px;
  color:var(--gray-500);
  line-height:1.5;
}

.logic-examples{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-bottom:36px;
}
.example-card{
  padding:22px 24px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-left:4px solid var(--red);
  border-radius:4px;
}
.example-label{
  font-family:var(--font-en);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--red);
  margin-bottom:10px;
}
.example-q{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--black);
}
.example-a{
  font-size:13.5px;
  color:var(--gray-600);
  line-height:1.7;
}
.example-a i{color:var(--red);margin-right:4px;}
.example-a strong{color:var(--black);}

/* Key quote stays BLACK - punchy mid-section accent */
.logic-key-quote{
  position:relative;
  padding:32px 28px;
  background:var(--black);
  color:#fff;
  border-radius:8px;
  text-align:center;
  margin-bottom:24px;
  overflow:hidden;
}
.logic-key-quote::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(230,0,18,0.18) 0%,transparent 60%);
  pointer-events:none;
}
.logic-key-quote i{
  font-size:24px;
  color:var(--red);
  opacity:0.7;
  margin-bottom:10px;
  position:relative;
}
.logic-key-quote p{
  font-size:clamp(16px,1.8vw,22px);
  font-weight:700;
  line-height:1.5;
  position:relative;
}
.logic-key-quote .hl-red{color:var(--red);}

.logic-bridge{
  text-align:center;
  padding:8px 24px 0;
}
.logic-bridge p{
  font-size:14.5px;
  color:var(--gray-600);
  line-height:1.7;
}
.logic-bridge strong{color:var(--black);font-weight:800;}

/* ============================================
   4. SOLUTION (WHITE)
   ============================================ */
.solution-section{
  padding:80px 0;
  background:#fff;
}
.solution-vs{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:stretch;
  margin:36px 0;
}
.vs-card{
  padding:32px 24px;
  border-radius:10px;
  text-align:center;
  position:relative;
  transition:all 0.3s;
}
.vs-card i{
  font-size:36px;
  margin-bottom:14px;
  display:block;
}
.vs-card h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
}
.vs-card p{
  font-size:13px;
}
.vs-label{
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  padding:5px 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  border-radius:4px;
  font-family:var(--font-en);
}

.vs-old{
  background:var(--gray-100);
  border:2px solid var(--gray-200);
  color:var(--gray-500);
}
.vs-old i{color:var(--gray-400);}
.vs-old .vs-label{
  background:var(--gray-500);
  color:#fff;
}

.vs-new{
  background:var(--black);
  color:#fff;
  border:2px solid var(--red);
  box-shadow:0 20px 50px rgba(230,0,18,0.25);
}
.vs-new i{color:var(--red);}
.vs-new .vs-label{
  background:var(--red);
  color:#fff;
}

.vs-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-en);
  font-size:18px;
  font-weight:900;
  color:var(--gray-300);
  letter-spacing:2px;
}

.solution-quote-block{
  text-align:center;
  padding:32px 24px;
  background:var(--gray-50);
  border-radius:8px;
  border-top:4px solid var(--red);
}
.solution-quote{
  font-size:clamp(16px,1.9vw,22px);
  font-weight:700;
  line-height:1.6;
}

/* ============================================
   5. EXECUTION (WHITE - explanation)
   ============================================ */
.execution-section{
  padding:80px 0;
  background:#fff;
  color:var(--black);
}
.execution-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:36px 0;
}
.exec-step{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:24px 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:10px;
  transition:all 0.3s;
}
.exec-step:hover{
  border-color:var(--black);
  background:#fff;
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.exec-step-num{
  display:flex;
  align-items:baseline;
  gap:8px;
  border-bottom:1px solid var(--gray-200);
  padding-bottom:12px;
  margin-bottom:14px;
}
.num-label{
  font-family:var(--font-en);
  font-size:10px;
  font-weight:700;
  letter-spacing:2.5px;
  color:var(--red);
}
.num-big{
  font-family:var(--font-en);
  font-size:32px;
  font-weight:900;
  line-height:1;
  color:var(--black);
  letter-spacing:-0.04em;
}

.exec-step-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.exec-step-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.exec-step-title h3{
  font-family:var(--font-en);
  font-size:20px;
  font-weight:800;
  color:var(--black);
}
.exec-step-tag{
  padding:3px 9px;
  background:var(--red-tint);
  color:var(--red);
  font-size:10.5px;
  font-weight:700;
  border-radius:3px;
  letter-spacing:0.5px;
}

.exec-step-lead{
  font-size:13.5px;
  color:var(--gray-600);
  font-weight:500;
  margin-bottom:12px;
  line-height:1.5;
}

.exec-list{
  list-style:none;
  margin-bottom:12px;
}
.exec-list li{
  display:flex;
  gap:8px;
  padding:5px 0;
  font-size:12.5px;
  color:var(--gray-600);
  line-height:1.55;
}
.exec-list li i{
  color:var(--red);
  margin-top:5px;
  font-size:9px;
  flex-shrink:0;
}

.exec-quote-example{
  position:relative;
  padding:12px 14px;
  background:var(--gray-50);
  border-left:3px solid var(--red);
  border-radius:4px;
  margin-bottom:12px;
}
.exec-quote-example i{
  color:var(--red);
  font-size:13px;
  margin-bottom:4px;
  opacity:0.6;
}
.exec-quote-example p{
  font-size:12.5px;
  color:var(--black);
  font-style:italic;
  line-height:1.55;
}

.exec-result{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  background:var(--red);
  color:#fff;
  font-size:12px;
  border-radius:4px;
  margin-top:auto;
  align-self:flex-start;
}

/* ============ AI FILTER vs RECOMMEND BLOCK ============ */
.ai-filter-block{
  margin-top:48px;
  padding:48px 40px;
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:12px;
}
.filter-intro{
  text-align:center;
  margin-bottom:36px;
}
.filter-intro-tag{
  display:inline-block;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  color:var(--red);
  background:var(--red-tint);
  padding:5px 12px;
  border-radius:3px;
  margin-bottom:14px;
}
.filter-intro h3{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
  color:var(--black);
  line-height:1.35;
  margin-bottom:12px;
  letter-spacing:-0.02em;
}
.filter-intro p{
  font-size:14.5px;
  color:var(--gray-600);
  line-height:1.65;
}
.filter-intro p strong{color:var(--black);font-weight:700;}

.filter-compare{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:stretch;
  margin-bottom:32px;
}
.filter-card{
  padding:28px 26px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:all 0.3s ease;
}
.filter-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.filter-card-head i{
  font-size:20px;
}
.filter-label{
  font-family:var(--font-en);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:2px;
}
.filter-card h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
  letter-spacing:-0.01em;
}

/* Filter OUT (removed) */
.filter-out{
  background:#fff;
  border:1px solid var(--gray-200);
  color:var(--gray-500);
}
.filter-out .filter-card-head i{color:var(--gray-400);}
.filter-out .filter-label{color:var(--gray-400);}
.filter-out h4{color:var(--gray-500);}
.filter-out .filter-list li{
  color:var(--gray-500);
  text-decoration:line-through;
  text-decoration-color:var(--gray-300);
}
.filter-out .filter-list li i{color:var(--gray-400);}

/* Filter IN (recommended) */
.filter-in{
  background:var(--black);
  color:#fff;
  border:1px solid var(--black);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
}
.filter-in .filter-card-head i{color:var(--red);}
.filter-in .filter-label{color:var(--red);}
.filter-in h4{color:#fff;}
.filter-in .filter-list li{color:var(--gray-200);}
.filter-in .filter-list li i{color:var(--red);}

.filter-list{
  list-style:none;
  margin-bottom:18px;
  flex:1;
}
.filter-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
  font-size:13.5px;
  line-height:1.5;
}
.filter-list li i{
  margin-top:5px;
  font-size:11px;
  flex-shrink:0;
}

.filter-result{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:700;
  border-radius:4px;
  align-self:flex-start;
  margin-top:auto;
}
.filter-result.out{
  background:var(--gray-200);
  color:var(--gray-600);
}
.filter-result.in{
  background:var(--red);
  color:#fff;
}
.filter-result i{font-size:13px;}

.filter-vs{
  display:flex;
  align-items:center;
  justify-content:center;
}
.filter-vs span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  background:#fff;
  border:2px solid var(--black);
  border-radius:50%;
  font-family:var(--font-en);
  font-size:13px;
  font-weight:900;
  color:var(--black);
  letter-spacing:1px;
}

.filter-conclusion{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 28px;
  background:#fff;
  border-left:4px solid var(--red);
  border-radius:6px;
}
.filter-conclusion i{
  font-size:24px;
  color:var(--red);
  flex-shrink:0;
}
.filter-conclusion p{
  font-size:14.5px;
  color:var(--gray-600);
  line-height:1.6;
}
.filter-conclusion p strong{
  color:var(--black);
  font-weight:800;
}

/* Summary block kept BLACK as a closing punch */
.execution-summary{
  text-align:center;
  padding:28px 24px;
  background:var(--black);
  color:#fff;
  border-radius:10px;
  margin-top:16px;
  position:relative;
  overflow:hidden;
}
.execution-summary::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(230,0,18,0.2) 0%,transparent 60%);
}
.execution-summary p{
  position:relative;
  font-size:clamp(15px,1.6vw,19px);
  font-weight:700;
  line-height:1.6;
}
.execution-summary .hl-red{color:var(--red);}

/* ============================================
   6. SYNERGY (BLACK - IMPACT ACCENT)
   ============================================ */
.synergy-section{
  padding:80px 0;
  background:var(--black);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.synergy-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 20%,rgba(230,0,18,0.15) 0%,transparent 50%),
    radial-gradient(circle at 20% 80%,rgba(230,0,18,0.08) 0%,transparent 50%);
  pointer-events:none;
}
.synergy-section .container{position:relative;z-index:2;}
.synergy-section .section-headline{color:#fff;}
.synergy-section .section-tag span{
  background:rgba(230,0,18,0.15);
  color:var(--red);
}

.synergy-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:36px 0;
}
.syn-card{
  padding:28px 22px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  text-align:center;
  transition:all 0.3s;
}
.syn-card:hover{
  border-color:var(--red);
  background:rgba(230,0,18,0.06);
  transform:translateY(-6px);
}
.syn-num{
  font-family:var(--font-en);
  font-size:44px;
  font-weight:900;
  line-height:1;
  color:var(--red);
  margin-bottom:10px;
  letter-spacing:-0.04em;
}
.syn-card h4{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
  color:#fff;
}
.syn-card p{
  font-size:12.5px;
  color:var(--gray-300);
  line-height:1.55;
}

.synergy-warning{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 28px;
  background:rgba(230,0,18,0.1);
  border:1px solid rgba(230,0,18,0.4);
  color:#fff;
  border-radius:8px;
  border-left:5px solid var(--red);
}
.synergy-warning i{
  font-size:30px;
  color:var(--red);
}
.synergy-warning p{
  font-size:clamp(13.5px,1.3vw,16px);
  font-weight:600;
  line-height:1.55;
}

/* ============================================
   7. STRATEGY (WHITE - explanation)
   ============================================ */
.strategy-section{
  padding:80px 0;
  background:#fff;
  color:var(--black);
}
.strategy-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin:36px 0;
}
.strat-item{
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:8px;
  position:relative;
  overflow:hidden;
  transition:all 0.3s;
}
.strat-item::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:0;height:3px;
  background:var(--red);
  transition:width 0.4s ease;
}
.strat-item:hover{
  background:#fff;
  border-color:var(--gray-400);
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.strat-item:hover::before{width:100%;}
.strat-num{
  display:inline-block;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:800;
  color:var(--red);
  letter-spacing:1.5px;
  margin-bottom:10px;
}
.strat-item h4{
  font-size:14.5px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--black);
  line-height:1.4;
}
.strat-item p{
  font-size:12.5px;
  color:var(--gray-500);
  line-height:1.6;
}

.strategy-banner{
  text-align:center;
  padding:36px 28px;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);
  border-radius:10px;
  margin-top:28px;
  position:relative;
  overflow:hidden;
}
.strategy-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(45deg,rgba(0,0,0,0.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,transparent 75%);
  background-size:30px 30px;
  opacity:0.3;
}
.strategy-banner h3{
  position:relative;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:900;
  line-height:1.4;
  color:#fff;
}
.strategy-banner .hl-red{
  color:#fff;
  background:var(--black);
  padding:2px 12px;
  display:inline-block;
}

/* ============================================
   8. CTA SECTION (BLACK - FINAL PUSH)
   ============================================ */
.cta-section{
  position:relative;
  padding:80px 0;
  background:var(--black);
  color:#fff;
  overflow:hidden;
}
.cta-bg-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 20% 50%,rgba(230,0,18,0.2) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(230,0,18,0.1) 0%,transparent 50%);
  pointer-events:none;
}
.cta-section .container{position:relative;z-index:2;}

.cta-warning-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:var(--red);
  color:#fff;
  border-radius:100px;
  font-family:var(--font-en);
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  margin-bottom:22px;
  animation:warn-pulse 2s ease infinite;
}
@keyframes warn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,0,18,0.6);}
  50%{box-shadow:0 0 0 12px rgba(230,0,18,0);}
}

.cta-headline{
  font-size:clamp(24px,3.4vw,40px);
  font-weight:900;
  line-height:1.3;
  margin-bottom:16px;
  letter-spacing:-0.02em;
}
.cta-sub{
  font-size:clamp(14.5px,1.4vw,17px);
  color:var(--gray-300);
  line-height:1.65;
  margin-bottom:40px;
}
.cta-sub strong{color:#fff;}

.cta-form-wrapper{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:36px;
  align-items:start;
}

.cta-form-info{
  padding:4px 0;
}
.cta-form-info h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:16px;
  color:#fff;
}
.form-info-list{
  list-style:none;
  margin-bottom:28px;
}
.form-info-list li{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:13.5px;
  color:var(--gray-300);
  line-height:1.55;
}
.form-info-list li i{
  color:var(--red);
  font-size:15px;
  margin-top:2px;
}
.form-info-list strong{color:#fff;font-weight:700;}

.form-info-contact p{
  font-size:13px;
  color:var(--gray-400);
  margin-bottom:6px;
}
.form-info-contact i{
  color:var(--red);
  margin-right:8px;
  width:16px;
}

.cta-form{
  background:#fff;
  color:var(--black);
  padding:28px;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
}
.form-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:2px solid var(--black);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.form-field{margin-bottom:14px;}
.form-row .form-field{margin-bottom:0;}
.form-field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--gray-600);
  margin-bottom:6px;
}
.form-field label span{color:var(--red);}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--gray-200);
  border-radius:6px;
  font-family:inherit;
  font-size:13.5px;
  color:var(--black);
  background:#fff;
  transition:all 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(230,0,18,0.1);
}
.form-field textarea{resize:vertical;min-height:70px;}
.form-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:32px;}

.form-agree{margin-bottom:24px;}
.agree-label{
  display:flex !important;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:13px !important;
  color:var(--gray-500) !important;
  font-weight:400 !important;
  margin-bottom:0 !important;
}
.agree-label input{
  width:16px !important;
  height:16px !important;
  margin:0;
  accent-color:var(--red);
}

.btn-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--red);
  color:#fff;
  padding:14px;
  font-size:14.5px;
  font-weight:700;
  border-radius:6px;
  transition:all 0.2s;
  box-shadow:0 6px 16px rgba(230,0,18,0.3);
}
.btn-submit:hover{
  background:var(--red-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(230,0,18,0.45);
}
.btn-submit:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.form-note{
  text-align:center;
  font-size:12px;
  color:var(--gray-400);
  margin-top:14px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  padding:32px 0;
  background:#000;
  color:var(--gray-400);
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}
.footer-logo{
  height:24px;
  filter:brightness(0) invert(1);
  margin-bottom:10px;
}
.footer-tagline{
  font-size:13px;
  color:var(--gray-500);
}
.footer-right{
  text-align:right;
  font-size:13px;
}
.footer-meta{
  font-size:11px;
  color:var(--gray-600);
  margin-top:4px;
  font-family:var(--font-en);
  letter-spacing:1px;
}

/* ============================================
   TOAST
   ============================================ */
.toast{
  position:fixed;
  bottom:30px;
  right:30px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  background:var(--black);
  color:#fff;
  border-left:4px solid #27c93f;
  border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,0.3);
  font-size:14px;
  font-weight:500;
  transform:translateX(120%);
  transition:transform 0.4s ease;
  z-index:200;
}
.toast.show{transform:translateX(0);}
.toast i{color:#27c93f;font-size:18px;}

/* ============================================
   SCROLL ANIMATION
   ============================================ */
.fade-up{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px){
  .hero-container{grid-template-columns:1fr;gap:32px;}
  .pain-grid{grid-template-columns:1fr;}
  .logic-criteria{grid-template-columns:repeat(3,1fr);}
  .logic-examples{grid-template-columns:1fr;}
  .solution-vs{grid-template-columns:1fr;}
  .vs-divider{padding:6px 0;}
  .synergy-grid{grid-template-columns:1fr;}
  .strategy-grid{grid-template-columns:repeat(2,1fr);}
  .execution-steps{grid-template-columns:1fr;}
  .cta-form-wrapper{grid-template-columns:1fr;gap:24px;}
  .filter-compare{grid-template-columns:1fr;gap:16px;}
  .filter-vs{padding:4px 0;}
  .ai-filter-block{padding:32px 24px;}
}

@media (max-width:768px){
  .top-banner-inner{padding:9px 14px;gap:8px;font-size:11.5px;}
  .tb-tag{font-size:9.5px;padding:3px 7px;letter-spacing:1px;}
  .tb-text{flex:1;min-width:0;}
  .hero-section{padding:90px 0 50px;}
  .pain-section,.logic-section,.solution-section,.execution-section,.synergy-section,.strategy-section,.cta-section{padding:60px 0;}
  .pain-but-block,.pain-pressure,.synergy-warning{padding:20px;}
  .pain-pressure,.synergy-warning{flex-direction:column;text-align:center;gap:12px;}
  .cta-form{padding:20px;}
  .form-row{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;text-align:center;}
  .footer-right{text-align:center;}
  .hero-shift-flow{justify-content:center;}
  .toast{left:20px;right:20px;bottom:20px;}
  .hero-cta-group{flex-direction:column;align-items:stretch;}
  .btn-primary,.btn-secondary{justify-content:center;}
  .strategy-grid{grid-template-columns:1fr;}
  .ai-filter-block{padding:24px 18px;}
  .filter-card{padding:22px 20px;}
  .filter-conclusion{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px;}
}

@media (max-width:480px){
  .logic-criteria{grid-template-columns:repeat(2,1fr);}
  .hero-headline{font-size:26px;}
  .num-big{font-size:28px;}
  .exec-step-title h3{font-size:18px;}
}