/* =========================================================
   BLUECHAIN PRO — Premium Coin Reading Landing
   ========================================================= */

:root{
  --blue-50:#EAF3FF;
  --blue-100:#CFE3FF;
  --blue-200:#9FC6FF;
  --blue-300:#6FA9FF;
  --blue-400:#3F8CFF;
  --blue-500:#0066FF;
  --blue-600:#0052CC;
  --blue-700:#003D99;
  --blue-800:#002966;
  --blue-900:#001433;
  --cyan:#4DD9FF;

  --bg:#04060F;
  --bg-2:#070B1B;
  --bg-3:#0B132B;
  --card:rgba(13,22,46,0.65);
  --card-2:rgba(11,19,43,0.85);
  --line:rgba(102,158,255,0.16);
  --line-2:rgba(102,158,255,0.30);

  --text:#EAF1FF;
  --text-2:#A8B6D6;
  --text-3:#6E7DA0;

  --green:#00D084;
  --red:#FF5C77;

  --shadow-blue:0 20px 60px -12px rgba(0,102,255,0.45);
  --shadow-card:0 24px 60px -20px rgba(0,15,40,0.7);

  --radius:18px;
  --radius-lg:26px;
  --max:1240px;

  --font:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'DM Mono','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  width:100%;
  max-width:100vw;
  scroll-behavior:smooth;
  height:auto;
}
body{
  font-family:var(--font);
  background:
    radial-gradient(ellipse at 15% 20%, rgba(0,82,204,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 60%, rgba(77,217,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 90%, rgba(0,61,153,0.15) 0%, transparent 55%),
    linear-gradient(180deg, #04060F 0%, #070B1B 50%, #04060F 100%);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden !important;
  overflow-y:visible;
  position:relative;
  width:100%;
  max-width:100vw;
  height:auto;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* =========================================================
   VIDEO BACKGROUND - 레이아웃에 영향 없게 고정
   ========================================================= */
.bg-canvas {
  position: absolute;  /* fixed → absolute */
  inset: 0;
  z-index: 0;          /* -2 → 0 */
  overflow: hidden;
  background: #04060F;
}

/* 비메오 영상을 화면에 꽉 채우기 */
.bg-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* PC용 가로 영상 - 16:9 커버 */
.bg-video-container .iframe-pc{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  transform:translate(-50%, -50%);
  pointer-events:none;
  border:0;
  display:block;
}

/* 모바일용 세로 영상 - 9:16 커버 */
.bg-video-container .iframe-mobile{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:177.78vw;
  min-width:56.25vh;
  min-height:100vh;
  transform:translate(-50%, -50%);
  pointer-events:none;
  border:0;
  display:none;
}

@media (max-width:768px){
  .bg-video-container .iframe-pc{
    display:none !important;
  }

  .bg-video-container .iframe-mobile{
    display:block !important;
  }
}

/* =====================================================
   ★ 여기서 어둡기(불투명도) 조절해!
   마지막 숫자만 바꾸면 됨:
   0.5 = 밝게 (영상 많이 보임)
   0.75 = 적당히 어둡게 (추천)
   0.9 = 많이 어둡게 (글씨 선명)
   ===================================================== */
.bg-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 15, 0.75); /* ← 이 숫자만 바꿔 */
  z-index: 1;
}

/* 기존 그리드 패턴 유지 */
.bg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(102,158,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,158,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:all .35s ease;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.site-header.scrolled{
  background:rgba(4,6,15,0.65) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border-bottom:1px solid rgba(102,158,255,0.10);
  padding:18px 0;
  box-shadow:none !important;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.5px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center}
.brand-mark svg{width:32px;height:32px}
.brand-text{color:#fff}
.brand-text span{background:linear-gradient(135deg,#4DA8FF,#0066FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-menu{display:flex;align-items:center;gap:36px}
.nav-menu a{color:var(--text-2);font-size:15px;font-weight:500;transition:color .25s}
.nav-menu a:hover{color:#fff}
@media (max-width:900px){.nav-menu{display:none}}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;border-radius:14px;
  padding:14px 22px;font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:12px}
.btn-lg{padding:18px 28px;font-size:16px;border-radius:16px}
.btn-xl{padding:22px 36px;font-size:18px;border-radius:18px}
.btn-primary{
  background:linear-gradient(135deg,#0066FF 0%,#00B8FF 100%);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,102,255,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px -10px rgba(0,102,255,0.7)}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-ghost{
  background:rgba(102,158,255,0.08);
  color:#fff;
  border:1px solid var(--line-2);
}
.btn-ghost:hover{background:rgba(102,158,255,0.16);transform:translateY(-2px)}
.btn-cta{font-size:18px;padding:22px 40px}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:0;
  position:relative;
  overflow-x:clip;
  overflow-y:visible;
  min-height:100vh;
}
.hero-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;min-height:0;}
@media (max-width:1024px){.hero-wrap{grid-template-columns:1fr;gap:60px}}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:100px;
  background:rgba(0,102,255,0.12);
  border:1px solid rgba(77,168,255,0.35);
  font-size:13px;font-weight:600;color:#9FC6FF;
  margin-bottom:24px;
}
.hero-badge .dot{
  width:8px;height:8px;border-radius:50%;background:#4DD9FF;
  box-shadow:0 0 12px #4DD9FF;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}

.hero-title{
  font-size:clamp(36px,5.4vw,68px);
  line-height:1.1;font-weight:900;
  letter-spacing:-1.5px;color:#fff;
  margin-bottom:24px;
}
.gradient-text{
  background:linear-gradient(135deg,#4DA8FF 0%,#0066FF 50%,#00B8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.under-blue{
  position:relative;color:#fff;display:inline-block;
}
.under-blue::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;z-index:-1;
  background:linear-gradient(90deg,rgba(0,102,255,0.6),rgba(0,184,255,0.4));
  border-radius:6px;
}
.hero-desc{font-size:18px;color:var(--text-2);margin-bottom:36px;line-height:1.7}
.hero-desc strong{color:#fff}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding:24px;margin-bottom:36px;
  background:linear-gradient(135deg,rgba(13,22,46,0.7),rgba(11,19,43,0.5));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
}
.stat-item{text-align:center}
.stat-value{
  font-family:var(--mono);
  font-size:clamp(22px,2.6vw,32px);font-weight:800;
  background:linear-gradient(135deg,#4DA8FF,#0066FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-1px;
}
.stat-label{font-size:13px;color:var(--text-3);margin-top:4px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-trust{display:flex;align-items:center;gap:16px}
.trust-avatars{display:flex}
.trust-avatars span{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:700;
  border:2px solid var(--bg-2);margin-left:-10px;
}
.trust-avatars span:first-child{margin-left:0}
.trust-stars{color:#FFC83D;font-size:13px;display:flex;align-items:center;gap:4px}
.trust-stars strong{color:#fff;margin-left:6px}
.trust-text{font-size:13px;color:var(--text-3)}

/* Hero Visual / Dashboard */
.hero-visual{
  position:relative;
  min-width:0;
  overflow:visible;
}
.dashboard{
  background:linear-gradient(180deg,rgba(13,22,46,0.85),rgba(7,11,27,0.95));
  border:1px solid var(--line-2);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-blue),var(--shadow-card);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.dashboard::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1px;
  background:linear-gradient(135deg,rgba(77,168,255,0.5),transparent 40%,transparent 60%,rgba(0,102,255,0.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.dash-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dash-dots{display:flex;gap:6px}
.dash-dots span{width:11px;height:11px;border-radius:50%;background:#1B2546}
.dash-dots span:nth-child(1){background:#FF5C77}
.dash-dots span:nth-child(2){background:#FFC83D}
.dash-dots span:nth-child(3){background:#00D084}
.dash-title{flex:1;font-size:13px;color:var(--text-2);font-weight:600}
.dash-title i{color:#4DA8FF;margin-right:6px}
.dash-live{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#FF5C77;
  background:rgba(255,92,119,0.12);padding:4px 10px;border-radius:6px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:#FF5C77;animation:pulse 1.5s infinite}

.dash-pair{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pair-left{display:flex;align-items:center;gap:14px}
.pair-icon{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,#F7931A,#FFB347);
  display:grid;place-items:center;color:#fff;font-size:22px;
  box-shadow:0 6px 20px rgba(247,147,26,.3);
}
.pair-name{font-weight:700;font-size:16px;color:#fff;display:flex;align-items:center;gap:8px}
.pair-tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;background:rgba(0,208,132,0.16);color:#00D084}
.pair-meta{font-size:12px;color:var(--text-3);margin-top:2px;font-family:var(--mono)}
.pair-pnl{font-family:var(--mono);font-size:22px;font-weight:800;color:#00D084;text-align:right}

.dash-chart{height:180px;margin:14px 0}

.dash-signals{display:flex;flex-direction:column;gap:8px}
.sig-row{display:grid;grid-template-columns:90px 1fr 130px;align-items:center;gap:12px;font-size:13px;font-family:var(--mono)}
.sig-side{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.sig-val{font-weight:700;color:#fff;text-align:right}
.sig-val i{color:#00D084;margin-left:4px}
.sig-bar{height:6px;background:rgba(102,158,255,0.10);border-radius:4px;overflow:hidden;grid-column:2}
.sig-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#0066FF,#4DA8FF)}
.sig-tp1 .sig-bar span,.sig-tp2 .sig-bar span,.sig-tp3 .sig-bar span{background:linear-gradient(90deg,#00D084,#4DD9FF)}
.sig-sl .sig-bar span{background:linear-gradient(90deg,#FF5C77,#FF8FA1)}
.sig-row.sig-buy .sig-side{color:#4DA8FF}
.sig-tp1 .sig-side,.sig-tp2 .sig-side,.sig-tp3 .sig-side{color:#00D084}
.sig-sl .sig-side{color:#FF5C77}

/* Re-arrange grid columns for sig-row */
.sig-row{grid-template-columns:90px 1fr 110px}
.sig-row .sig-side{grid-column:1}
.sig-row .sig-bar{grid-column:2}
.sig-row .sig-val{grid-column:3}

/* Floating cards */
.float-card{
  position:absolute;
  background:linear-gradient(135deg,rgba(13,22,46,0.95),rgba(7,11,27,0.95));
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
  animation:floatY 5s ease-in-out infinite;
}
.fc-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#0066FF,#00B8FF);
  display:grid;place-items:center;color:#fff;font-size:16px;
}
.fc-title{font-size:13px;font-weight:700;color:#fff}
.fc-sub{font-size:11px;color:var(--text-3)}
/* 플로팅 카드 전체 제거 */
.fc-1,.fc-2,.fc-3,.float-card{display:none !important;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:600px){.float-card{display:none}}

/* Ticker */
/* Ticker 완전 제거 */
.ticker{display:none !important;}
.ticker-track{display:none !important;}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:120px 0;position:relative;overflow-x:clip;overflow-y:visible}
.section-head{text-align:center;max-width:760px;margin:0 auto 64px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:100px;
  background:rgba(0,102,255,0.12);
  border:1px solid rgba(77,168,255,0.30);
  font-size:13px;font-weight:700;color:#9FC6FF;
  margin-bottom:18px;letter-spacing:.5px;text-transform:uppercase;
}
.eyebrow i{color:#4DD9FF}
.section-title{
  font-size:clamp(30px,4vw,52px);
  line-height:1.18;font-weight:900;letter-spacing:-1.2px;color:#fff;
  margin-bottom:18px;
}
.section-desc{font-size:17px;color:var(--text-2);line-height:1.7}
.section-desc strong{color:#fff}

/* =========================================================
   PROBLEM
   ========================================================= */
.problem-section{
  background-image: url('problem-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.problem-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(4,6,15,1) 0%,
    rgba(4,6,15,0.82) 20%,
    rgba(4,6,15,0.78) 60%,
    rgba(4,6,15,0.95) 90%,
    rgba(4,6,15,1) 100%
  );
  z-index:0;
}
.problem-section .container{position:relative;z-index:1;}
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1024px){.problem-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.problem-grid{grid-template-columns:1fr}}
.problem-card{
  position:relative;
  background:linear-gradient(180deg,rgba(13,22,46,0.6),rgba(7,11,27,0.4));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 24px;
  transition:transform .35s ease, border-color .35s ease;
  overflow:hidden;
}
.problem-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(0,102,255,0.10),transparent 60%);
  opacity:0;transition:opacity .35s;
}
.problem-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.problem-card:hover::before{opacity:1}
.prob-num{
  font-family:var(--mono);font-size:14px;font-weight:700;
  color:rgba(102,158,255,0.5);margin-bottom:12px;
}
.prob-icon{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,rgba(0,102,255,0.20),rgba(0,184,255,0.10));
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  color:#4DA8FF;font-size:22px;margin-bottom:18px;
}
.problem-card h3{font-size:18px;font-weight:800;color:#fff;line-height:1.4;margin-bottom:10px}
.problem-card p{font-size:14px;color:var(--text-2);line-height:1.6}

/* =========================================================
   FEATURES (USP)
   ========================================================= */
.features-section{
  background-image: url('bitcoin-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.features-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(4,6,15,1) 0%,
    rgba(4,6,15,0.80) 15%,
    rgba(4,6,15,0.75) 50%,
    rgba(4,6,15,0.85) 85%,
    rgba(4,6,15,1) 100%
  );
  z-index:0;
}
.features-section .container{position:relative;z-index:1;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.features-grid{grid-template-columns:1fr}}
.feature-card{
  position:relative;
  background:linear-gradient(180deg,rgba(13,22,46,0.75),rgba(7,11,27,0.55));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:38px 32px;
  transition:transform .4s ease, box-shadow .4s ease;
  overflow:hidden;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-blue)}
.feature-card-mid{
  background:linear-gradient(180deg,rgba(0,82,204,0.18),rgba(0,30,100,0.4));
  border-color:rgba(77,168,255,0.5);
  box-shadow:0 30px 80px -30px rgba(0,102,255,0.5);
}
.feat-best{
  position:absolute;top:20px;right:20px;
  font-size:11px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(135deg,#FFC83D,#FF8A00);
  color:#1A0F00;padding:6px 12px;border-radius:8px;
}
.feat-num{font-family:var(--mono);font-size:14px;font-weight:700;color:rgba(102,158,255,0.5);margin-bottom:18px}
.feat-visual{position:relative;width:90px;height:90px;margin-bottom:24px}
.feat-circle{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at center,rgba(0,102,255,0.35),transparent 70%);
}
.feat-visual i{
  position:relative;width:90px;height:90px;
  display:grid;place-items:center;font-size:34px;color:#4DA8FF;
  background:linear-gradient(135deg,rgba(0,102,255,0.2),rgba(0,184,255,0.1));
  border:1px solid var(--line-2);
  border-radius:24px;
}
.feat-title{font-size:24px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:14px;letter-spacing:-.5px}
.feat-desc{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:20px}
.feat-desc strong{color:#fff}
.feat-list{list-style:none}
.feat-list li{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--text);font-size:14px}
.feat-list li i{color:#00D084;background:rgba(0,208,132,0.15);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px}

.feat-meter{margin-top:8px}
.meter-row{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:13px}
.meter-row span{width:90px;color:var(--text-2)}
.meter-row strong{font-family:var(--mono);font-weight:800;color:#fff;width:56px;text-align:right}
.meter-bar{flex:1;height:8px;background:rgba(102,158,255,0.10);border-radius:4px;overflow:hidden}
.meter-bar i{display:block;height:100%;background:linear-gradient(90deg,#00D084,#4DD9FF);border-radius:4px;animation:meterIn 1.5s ease}
.meter-blue i{background:linear-gradient(90deg,#0066FF,#4DA8FF)}
@keyframes meterIn{from{width:0}}

/* =========================================================
   PERFORMANCE
   ========================================================= */
.perf-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-bottom:32px}
@media (max-width:1024px){.perf-grid{grid-template-columns:1fr}}
.perf-chart-wrap{
  background:linear-gradient(180deg,rgba(13,22,46,0.85),rgba(7,11,27,0.7));
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:28px;
}
.perf-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.perf-label{font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.perf-big{
  font-family:var(--mono);font-size:36px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;
}
.perf-up{font-size:13px;font-weight:700;color:#00D084;background:rgba(0,208,132,0.12);padding:4px 10px;border-radius:8px}
.perf-tabs{display:flex;gap:4px;background:rgba(7,11,27,0.7);padding:4px;border-radius:10px}
.perf-tabs button{padding:8px 14px;font-size:12px;font-weight:700;color:var(--text-3);border-radius:8px;transition:all .25s}
.perf-tabs button.active{background:rgba(0,102,255,0.20);color:#fff}
.perf-chart{height:320px}

.perf-side{display:flex;flex-direction:column;gap:12px}
.perf-stat{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,rgba(13,22,46,0.7),rgba(7,11,27,0.5));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
}
.ps-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px;flex-shrink:0}
.ps-blue{background:linear-gradient(135deg,#0066FF,#4DA8FF)}
.ps-cyan{background:linear-gradient(135deg,#00B8FF,#4DD9FF);color:#001433}
.ps-deep{background:linear-gradient(135deg,#003D99,#0066FF)}
.perf-stat>div:last-child{flex:1}
.ps-label{font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
.ps-value{font-family:var(--mono);font-size:24px;font-weight:800;color:#fff;margin:2px 0 8px}
.ps-bar{height:5px;background:rgba(102,158,255,0.10);border-radius:3px;overflow:hidden}
.ps-bar span{display:block;height:100%;background:linear-gradient(90deg,#0066FF,#4DD9FF);border-radius:3px}

/* Picks Table */
.picks-card{
  background:linear-gradient(180deg,rgba(13,22,46,0.85),rgba(7,11,27,0.7));
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:28px;
}
.picks-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.picks-head h3{font-size:18px;font-weight:800;color:#fff}
.picks-head h3 i{color:#4DA8FF;margin-right:8px}
.picks-live{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#00D084;background:rgba(0,208,132,0.12);padding:6px 12px;border-radius:8px}
.picks-table{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:14px;overflow:hidden}
.picks-row{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;
  align-items:center;gap:12px;padding:16px 20px;
  background:rgba(7,11,27,0.7);font-size:14px;
}
.picks-header{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;background:rgba(0,82,204,0.15)}
.pk-coin{font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
.pk-up{color:#00D084;font-weight:800;font-family:var(--mono)}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:.4px}
.tag-long{background:rgba(0,208,132,0.16);color:#00D084}
.tag-short{background:rgba(255,92,119,0.16);color:#FF5C77}
.tag-win{background:rgba(0,102,255,0.16);color:#4DA8FF}
@media (max-width:768px){
  .picks-row{grid-template-columns:1fr 1fr;font-size:13px}
  .picks-row>div:nth-child(3),.picks-row>div:nth-child(4){display:none}
}

/* =========================================================
   TELEGRAM PROOF
   ========================================================= */
.tg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.tg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.tg-grid{grid-template-columns:1fr;max-width:100%;margin:0 auto;padding:0}}
.tg-phone{
  background:#0a1228;
  border:1px solid var(--line-2);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .35s ease;
}
.tg-phone:hover{transform:translateY(-6px)}
.tg-phone-bar{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:linear-gradient(180deg,#1a2748,#101a36);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.tg-back{color:#4DA8FF;font-size:14px}
.tg-room{display:flex;align-items:center;gap:10px;flex:1}
.tg-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.tg-av-blue{background:linear-gradient(135deg,#0066FF,#00B8FF)}
.tg-av-cyan{background:linear-gradient(135deg,#00B8FF,#4DD9FF);color:#001433}
.tg-av-deep{background:linear-gradient(135deg,#003D99,#0052CC)}
.tg-room-name{font-size:14px;font-weight:700;color:#fff}
.tg-room-sub{font-size:11px;color:#7AAEE8}
.tg-more{color:var(--text-3);font-size:14px}
.tg-chat{
  padding:16px;
  background:
    linear-gradient(180deg,rgba(7,11,27,0.5),rgba(7,11,27,0.7)),
    repeating-linear-gradient(45deg,rgba(102,158,255,0.02) 0 2px,transparent 2px 12px);
  min-height:auto;
  height:auto;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
}
.tg-date{
  align-self:center;font-size:11px;color:var(--text-3);
  background:rgba(13,22,46,0.7);padding:4px 10px;border-radius:10px;margin:8px 0;
}
.tg-msg{display:flex}
.tg-in{justify-content:flex-start}
.tg-out{justify-content:flex-end}
.tg-bubble{
  max-width:80%;padding:10px 14px;border-radius:16px;
  font-size:13px;line-height:1.5;color:#fff;position:relative;
  background:#1c2746;
}
.tg-out .tg-bubble{background:linear-gradient(135deg,#0052CC,#0066FF);border-bottom-right-radius:4px}
.tg-in .tg-bubble{border-bottom-left-radius:4px}
.tg-time{font-size:10px;color:rgba(255,255,255,0.5);margin-top:4px;text-align:right}
.tg-name{font-size:12px;font-weight:700;color:#4DD9FF;margin-bottom:4px}
.tg-signal{
  background:linear-gradient(135deg,rgba(0,82,204,0.5),rgba(0,40,120,0.7))!important;
  border:1px solid rgba(77,168,255,0.4);font-family:var(--mono);
}
.tg-signal .sig-head{font-size:14px;margin-bottom:6px;font-family:var(--font)}
.tg-signal .sig-body div{font-size:12px;padding:2px 0}
.tg-signal-win{
  background:linear-gradient(135deg,rgba(0,208,132,0.25),rgba(0,140,90,0.4))!important;
  border:1px solid rgba(0,208,132,0.5);
}
.tg-plan{
  background:linear-gradient(135deg,rgba(0,82,204,0.4),rgba(0,40,120,0.6))!important;
  border:1px solid rgba(77,168,255,0.4);
}
.tg-plan strong{display:block;margin-bottom:6px;color:#4DD9FF}
.tg-plan div{font-size:12px;padding:2px 0}
.tg-card{
  margin-top:8px;padding:10px;border-radius:10px;
  background:rgba(7,11,27,0.7);
}
.card-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
.card-row span{color:rgba(255,255,255,0.6)}

/* =========================================================
   TARGET
   ========================================================= */
.target-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1024px){.target-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.target-grid{grid-template-columns:1fr}}
.target-card{
  text-align:center;padding:36px 24px;
  background:linear-gradient(180deg,rgba(13,22,46,0.7),rgba(7,11,27,0.5));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:all .35s ease;position:relative;overflow:hidden;
}
.target-card::after{
  content:"";position:absolute;top:0;left:50%;width:120%;height:1px;
  background:linear-gradient(90deg,transparent,#4DA8FF,transparent);
  transform:translateX(-50%) scaleX(0);transition:transform .4s;
}
.target-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.target-card:hover::after{transform:translateX(-50%) scaleX(1)}
.target-card .tg-icon{
  width:72px;height:72px;border-radius:20px;margin:0 auto 18px;
  background:linear-gradient(135deg,#0066FF,#00B8FF);
  display:grid;place-items:center;color:#fff;font-size:28px;
  box-shadow:0 14px 30px -10px rgba(0,102,255,0.5);
}
.target-card h4{font-size:19px;font-weight:800;color:#fff;margin-bottom:10px}
.target-card p{font-size:14px;color:var(--text-2);line-height:1.6}

/* =========================================================
   PROCESS
   ========================================================= */
.process-rail{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:20px 0;
}
@media (max-width:1024px){.process-rail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.process-rail{grid-template-columns:1fr}}
.rail-line{
  display:none !important;
}
.proc-step{
  text-align:center;padding:30px 20px;
  background:linear-gradient(180deg,rgba(13,22,46,0.6),rgba(7,11,27,0.4));
  border:1px solid var(--line);border-radius:var(--radius);
  position:relative;transition:transform .35s;
}
.proc-step:hover{transform:translateY(-6px)}
.proc-num{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:rgba(102,158,255,0.5);margin-bottom:12px;
}
.proc-icon{
  width:64px;height:64px;border-radius:18px;margin:0 auto 18px;
  background:linear-gradient(135deg,rgba(0,102,255,0.25),rgba(0,184,255,0.10));
  border:1px solid var(--line-2);
  display:grid;place-items:center;color:#4DA8FF;font-size:24px;
  position:relative;z-index:1;
}
.proc-step h4{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.proc-step p{font-size:13px;color:var(--text-2);line-height:1.6}

/* =========================================================
   FAQ
   ========================================================= */
.faq-wrap{max-width:880px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:linear-gradient(180deg,rgba(13,22,46,0.6),rgba(7,11,27,0.4));
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .3s;
}
.faq-item[open]{border-color:var(--line-2)}
.faq-item summary{
  padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:#fff;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{
  color:#4DA8FF;transition:transform .3s;
  background:rgba(0,102,255,0.12);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;flex-shrink:0;
}
.faq-item[open] summary i{transform:rotate(45deg)}
.faq-body{padding:0 24px 22px;color:var(--text-2);font-size:15px;line-height:1.7}
.faq-body strong{color:#fff}

/* =========================================================
   TARGET
   ========================================================= */
.target-section{
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.target-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(4,6,15,1) 0%,
    rgba(4,6,15,0.82) 15%,
    rgba(4,6,15,0.78) 55%,
    rgba(4,6,15,0.90) 85%,
    rgba(4,6,15,1) 100%
  );
  z-index:0;
}
.target-section .container{position:relative;z-index:1;}

/* =========================================================
   CTA
   ========================================================= */
.cta-card{
  position:relative;
  background:linear-gradient(135deg,#001540,#003D99 50%,#0066FF);
  border:1px solid rgba(77,168,255,0.5);
  border-radius:32px;
  padding:80px 40px;
  text-align:center;
  overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,102,255,0.6);
}
.cta-bg-glow{
  position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,184,255,0.45),transparent 70%);
  top:-300px;left:50%;transform:translateX(-50%);
  filter:blur(40px);
}
.cta-pulse{
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.10),transparent 60%);
  bottom:-200px;right:-100px;
  animation:float 8s ease-in-out infinite;
}
.cta-card::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%);
}
.cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.cta-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:100px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.20);
  color:#fff;font-size:13px;font-weight:700;
  margin-bottom:24px;backdrop-filter:blur(10px);
}
.cta-badge .dot{width:8px;height:8px;border-radius:50%;background:#4DD9FF;box-shadow:0 0 12px #4DD9FF;animation:pulse 1.5s infinite}
.cta-title{
  font-size:clamp(32px,4.5vw,56px);font-weight:900;
  line-height:1.15;color:#fff;letter-spacing:-1px;margin-bottom:18px;
}
.cta-title .gradient-text{background:linear-gradient(135deg,#fff,#4DD9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-desc{font-size:17px;color:rgba(255,255,255,0.85);line-height:1.7;margin-bottom:36px}
.cta-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:680px;margin:0 auto 36px;
  padding:24px;border-radius:18px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
}
.cta-stats>div{text-align:center}
.cta-stats strong{display:block;font-family:var(--mono);font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px}
.cta-stats span{font-size:12px;color:rgba(255,255,255,0.7)}
@media (max-width:600px){.cta-stats{grid-template-columns:repeat(2,1fr)}}
.cta-card .btn-primary{
  background:linear-gradient(135deg,#fff,#E0F0FF);
  color:#0052CC;
  box-shadow:0 14px 40px -10px rgba(255,255,255,0.5);
}
.cta-card .btn-primary:hover{box-shadow:0 22px 60px -10px rgba(255,255,255,0.7)}
.cta-sub{margin-top:20px;font-size:13px;color:rgba(255,255,255,0.7);display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  padding-top:60px;margin-top:80px;
  background:rgba(4,6,15,0.8);
}
.footer-inner{display:grid;grid-template-columns:1.4fr 2fr;gap:60px;padding-bottom:50px}
@media (max-width:768px){.footer-inner{grid-template-columns:1fr;gap:40px}}
.footer-desc{color:var(--text-2);font-size:14px;margin-top:16px;line-height:1.7}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:600px){.footer-cols{grid-template-columns:1fr 1fr}}
.footer-cols h5{font-size:12px;font-weight:800;letter-spacing:1px;color:#4DA8FF;margin-bottom:18px}
.footer-cols a{display:block;color:var(--text-2);font-size:14px;padding:6px 0;transition:color .25s}
.footer-cols a:hover{color:#fff}
.footer-base{
  border-top:1px solid var(--line);padding:24px 0;
  display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);
}
.footer-base .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.disclaimer{color:var(--text-3)}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#0066FF,#00B8FF);
  color:#fff;padding:14px 26px;border-radius:100px;
  font-weight:700;font-size:14px;
  display:none;align-items:center;gap:10px;
  box-shadow:0 14px 40px -10px rgba(0,102,255,0.7);z-index:99;
  animation:bounceIn .8s ease;
}
@keyframes bounceIn{from{transform:translate(-50%,80px);opacity:0}to{transform:translateX(-50%);opacity:1}}
@media (max-width:768px){.sticky-cta{display:inline-flex}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:768px){
  .section{padding:80px 0}
    .hero{
    padding:0;
    min-height:100vh;
  }
  .hero .container{
    padding-top:120px;
    padding-bottom:60px;
  }
  
  .container{
    padding:0 16px;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box;
  }
  
  /* 모바일 섹션1 대시보드(hero-visual) 완전 숨김 */
  .hero-visual{
    display:none !important;
  }

  .hero-wrap{
    grid-template-columns:1fr;
    gap:30px;
  }
  
  .hero-stats{
    grid-template-columns:1fr;
    gap:14px;
  }
  
  .stat-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
  }
  .stat-value{font-size:26px}
  
  .hero-cta{
    flex-direction:column;
  }
  .hero-cta .btn{
    width:100%;
    justify-content:center;
  }
  
  /* 플로팅 카드 숨김 */
  .float-card{display:none !important}
  
  /* 모든 그리드 1열로 */
  .problem-grid,
  .features-grid,
  .target-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  
  .perf-grid{
    grid-template-columns:1fr;
  }
  
  .tg-grid{
    grid-template-columns:1fr;
    max-width:100%;
    margin:0 auto;
  }
  .tg-phone{
    max-width:100% !important;
    margin-left:auto;
    margin-right:auto;
    width:100% !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  
  .process-rail{
    grid-template-columns:1fr 1fr;
  }
  .rail-line{display:none}
  
  .picks-table{font-size:12px;overflow-x:hidden;}
  .picks-row{
    grid-template-columns:1fr 1fr;
    padding:12px 14px;
  }
  .picks-row>div:nth-child(3),
  .picks-row>div:nth-child(4){
    display:none;
  }
  .picks-card{
    overflow-x:hidden;
    padding:18px 14px;
  }
  
  .cta-card{padding:60px 24px;border-radius:24px}
  .cta-stats{
    grid-template-columns:1fr 1fr;
  }
  
  .sig-row{
    grid-template-columns:70px 1fr 90px;
    gap:8px;
  }
  .dash-chart{
    height:130px;
  }
  
  /* 모바일 히어로 stats 카드 */
  .hero-stats{
    padding:16px;
  }
  
  /* tg-chat: 내부 스크롤 없이 높이 자동 */
  .tg-chat{
    overflow:visible !important;
    min-height:auto !important;
    height:auto !important;
  }
  .perf-chart{
    height:240px;
  }
}

@media (max-width:480px){
  .process-rail{
    grid-template-columns:1fr;
  }
}

/* AOS performance */
[data-aos]{will-change:transform,opacity}

/* =========================================================
   전체 섹션 가로 overflow 완전 차단 (모바일 최종 방어)
   ========================================================= */
section, header, footer, div{
  max-width:100%;
}
.hero-visual{
  max-width:100%;
  overflow-x:clip;
  overflow-y:visible;
}
/* 히어로 콘텐츠가 영상 위에 표시되게 */
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 160px;
  padding-bottom: 80px;
}
/* 프리미엄 이미지 스타일 */
.premium-img-wrap{
  position:relative;
  max-width:900px;
  margin:40px auto 60px auto;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(102,158,255,0.25);
  box-shadow:0 20px 60px -15px rgba(0,102,255,0.4);
  background:linear-gradient(135deg,rgba(13,22,46,0.3),rgba(7,11,27,0.2));
}
.premium-img-wrap img{
  width:100%;
  height:auto;
  display:block;
  filter:brightness(0.9) contrast(1.05);
}
.premium-img-wrap:hover img{
  transform:scale(1.02);
  transition:transform .6s ease;
}
@media (max-width:768px){
  .premium-img-wrap{
    margin:30px auto 40px auto;
    border-radius:16px;
  }
}

/* =========================================================
   모바일 배경 이미지 최적화
   ========================================================= */
@media (max-width:768px){
  .problem-section{
    background-image: url('problem-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }
  .features-section{
    background-image: url('features-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }
  .target-section{
    background-image: url('target-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }
  /* 모바일에서 오버레이 더 어둡게 - 배경 덜 튀게 */
    .problem-section::before,
  .features-section::before,
  .target-section::before{
    background: linear-gradient(180deg,
      rgba(4,6,15,1) 0%,
      rgba(7,11,27,0.85) 15%,
      rgba(4,6,15,0.80) 50%,
      rgba(7,11,27,0.85) 85%,
      rgba(4,6,15,1) 100%
    ) !important;
  }
}

/* =========================================================
   모바일 OVERFLOW — 분리 스크롤 완전 차단 최종판
   핵심 규칙: 섹션/컨테이너에 절대 overflow-y:hidden 금지
   ========================================================= */
@media (max-width:768px){

  /* html/body: 세로는 반드시 자동, 가로만 숨김 */
  html, body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
  }

  /* 섹션: 가로 넘침만 clip, 세로는 무조건 visible */
  section,
  .hero,
  .problem-section,
  .features-section,
  .performance-section,
  .proof-section,
  .target-section,
  .process-section,
  .faq-section,
  .cta-section{
    overflow-x:clip !important;
    overflow-y:visible !important;
    height:auto !important;
    max-height:none !important;
    width:100% !important;
    max-width:100vw !important;
    box-sizing:border-box !important;
  }

  /* 컨테이너 가로 넘침만 방지 */
  .container{
    overflow-x:clip !important;
    overflow-y:visible !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* hero-wrap, hero-text: 세로 스크롤 절대 막지 않음 */
  .hero-wrap, .hero-text{
    overflow:visible !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* tg-chat: 컨텐츠 높이만큼 늘어나되 내부 스크롤 없음 */
  .tg-chat{
    overflow:visible !important;
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
  }
  .tg-phone{
    overflow:visible !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* 카드 내부 요소: 가로만 차단 */
  .dashboard,
  .picks-card,
  .picks-table,
  .perf-chart-wrap{
    overflow-x:clip !important;
    overflow-y:visible !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* 버튼/CTA 가로 넘침 방지 */
  .btn{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .cta-card{
    overflow-x:clip !important;
    overflow-y:visible !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* footer */
  .site-footer, .footer-inner, .footer-cols{
    overflow-x:clip !important;
    overflow-y:visible !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}
/* 로고 이미지 */
.brand-logo-img{
  display:block;
  height:34px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

@media (max-width:768px){
  .brand-logo-img{
    height:30px;
    max-width:150px;
  }
}
/* =========================================================
   모바일 배경 이미지 최적화
   ========================================================= */
@media (max-width:768px){
  .problem-section{
    background-image: url('./problem-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }

  .features-section{
    background-image: url('./features-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }

  .target-section{
    background-image: url('./target-mobile.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #070B1B !important;
  }

  .problem-section::before,
  .features-section::before,
  .target-section::before{
    background: linear-gradient(180deg,
      rgba(4,6,15,1) 0%,
      rgba(7,11,27,0.86) 18%,
      rgba(4,6,15,0.78) 50%,
      rgba(7,11,27,0.88) 84%,
      rgba(4,6,15,1) 100%
    ) !important;
  }
}
/* PC 섹션 배경 이미지 강제 적용 */
.problem-section{
  background-image: url('./problem-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.features-section{
  background-image: url('./bitcoin-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.target-section{
  background-image: url('./hero-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* 히어로 Vimeo 배경 영상 최종 보정 */
.bg-video-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.bg-video-container .iframe-pc{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:100vw !important;
  height:56.25vw !important;
  min-width:177.78vh !important;
  min-height:100vh !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  border:0 !important;
  display:block !important;
}

.bg-video-container .iframe-mobile{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:100vw !important;
  height:177.78vw !important;
  min-width:56.25vh !important;
  min-height:100vh !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  border:0 !important;
  display:none !important;
}

@media (max-width:768px){
  .bg-video-container .iframe-pc{
    display:none !important;
  }

  .bg-video-container .iframe-mobile{
    display:block !important;
  }
}
/* =========================================
   최종 수정본 - 로고 / 섹션 경계선 / 모바일 상단 공백 / 성능섹션 잘림
   ========================================= */

/* 1) 헤더 로고 + 업체명 */
.brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

.brand-logo-img{
  width:28px !important;
  height:28px !important;
  max-width:none !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
  display:block !important;
}

.brand-name-text{
  display:inline-block !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.brand-name-text span{
  background:linear-gradient(135deg,#4DA8FF,#0066FF) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* 2) 각 섹션 경계선 */
.section,
.performance-section,
.proof-section,
.target-section,
.process-section,
.faq-section,
.cta-section,
.site-footer{
  position:relative !important;
}

.section::before,
.performance-section::before,
.proof-section::before,
.target-section::before,
.process-section::before,
.faq-section::before,
.cta-section::before,
.site-footer::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent 0%, rgba(77,168,255,0.22) 18%, rgba(77,168,255,0.40) 50%, rgba(77,168,255,0.22) 82%, transparent 100%) !important;
  pointer-events:none !important;
  z-index:3 !important;
}

/* 히어로는 경계선 제거 */
.hero::before{
  content:none !important;
}

/* 3) 모바일 상단 검은 공백 제거 */
@media (max-width:768px){
  .site-header{
    padding:10px 0 !important;
  }

  .site-header.scrolled{
    padding:10px 0 !important;
  }

  .hero{
    min-height:auto !important;
    padding:0 !important;
  }

  .hero .container{
    position:relative !important;
    z-index:2 !important;
    padding-top:78px !important;
    padding-bottom:48px !important;
  }

  .brand-logo-img{
    width:24px !important;
    height:24px !important;
  }

  .brand-name-text{
    font-size:12px !important;
  }
}

/* 4) 성능 섹션 모바일 잘림 방지 */
.performance-section,
.perf-grid,
.perf-chart-wrap,
.perf-side,
.perf-stat,
.picks-card,
.picks-table,
.picks-row,
.perf-card-head{
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:768px){
  .performance-section .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .perf-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    width:100% !important;
    max-width:100% !important;
  }

  .perf-chart-wrap,
  .perf-side,
  .perf-stat,
  .picks-card,
  .picks-table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .perf-card-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    width:100% !important;
  }

  .perf-big{
    font-size:28px !important;
    line-height:1.2 !important;
    flex-wrap:wrap !important;
    word-break:keep-all !important;
  }

  .perf-up{
    align-self:flex-start !important;
  }

  .perf-chart{
    width:100% !important;
    max-width:100% !important;
    height:220px !important;
    overflow:hidden !important;
  }

  .perf-chart canvas{
    width:100% !important;
    max-width:100% !important;
  }

  .perf-side{
    gap:14px !important;
  }

  .perf-stat{
    padding:18px 16px !important;
  }

  .ps-value{
    font-size:20px !important;
  }

  .picks-card{
    padding:18px 12px !important;
  }

  .picks-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }

  .picks-live{
    align-self:flex-start !important;
  }

  .picks-row{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:12px 10px !important;
    width:100% !important;
  }

  .picks-row > div{
    min-width:0 !important;
  }
}
/* =========================================
   배경 이미지 어둡기 조절 / 섹션 경계선 최종본
   조절은 아래 숫자만 바꾸면 됨
   ========================================= */

:root{
  /* 숫자가 높을수록 배경이 더 어두워짐 */
  --section-bg-dark-pc: 0.88;
  --section-bg-dark-mobile: 0.90;
}

/* 섹션2,3,6 배경 위 검은 오버레이 */
.problem-section::before,
.features-section::before,
.target-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:linear-gradient(180deg,
    rgba(4,6,15,1) 0%,
    rgba(4,6,15,var(--section-bg-dark-pc)) 18%,
    rgba(4,6,15,var(--section-bg-dark-pc)) 55%,
    rgba(4,6,15,0.94) 86%,
    rgba(4,6,15,1) 100%
  ) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* 섹션 내용은 오버레이 위로 */
.problem-section .container,
.features-section .container,
.target-section .container{
  position:relative !important;
  z-index:1 !important;
}

/* 모바일에서는 조금 더 어둡게 */
@media (max-width:768px){
  .problem-section::before,
  .features-section::before,
  .target-section::before{
    background:linear-gradient(180deg,
      rgba(4,6,15,1) 0%,
      rgba(4,6,15,var(--section-bg-dark-mobile)) 18%,
      rgba(4,6,15,var(--section-bg-dark-mobile)) 55%,
      rgba(4,6,15,0.95) 86%,
      rgba(4,6,15,1) 100%
    ) !important;
  }
}

/* 섹션 구분선은 ::after로 분리 */
.section::after,
.performance-section::after,
.proof-section::after,
.target-section::after,
.process-section::after,
.faq-section::after,
.cta-section::after,
.site-footer::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:1px !important;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(77,168,255,0.18) 18%,
    rgba(77,168,255,0.42) 50%,
    rgba(77,168,255,0.18) 82%,
    transparent 100%
  ) !important;
  z-index:5 !important;
  pointer-events:none !important;
}
/* =========================================
   상단바 로고/업체명 크기 조절
   ========================================= */

:root{
  /* PC 상단 로고/텍스트 크기 */
  --header-logo-size-pc: 32px;
  --header-brand-text-pc: 17px;

  /* 모바일 상단 로고/텍스트 크기 */
  --header-logo-size-mobile: 27px;
  --header-brand-text-mobile: 14px;
}

.site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.site-header .brand-logo-img{
  width:var(--header-logo-size-pc) !important;
  height:var(--header-logo-size-pc) !important;
  max-width:none !important;
  object-fit:contain !important;
}

.site-header .brand-name-text,
.site-header .brand-text{
  font-size:var(--header-brand-text-pc) !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  letter-spacing:-0.2px !important;
}

@media (max-width:768px){
  .site-header .brand-logo-img{
    width:var(--header-logo-size-mobile) !important;
    height:var(--header-logo-size-mobile) !important;
  }

  .site-header .brand-name-text,
  .site-header .brand-text{
    font-size:var(--header-brand-text-mobile) !important;
  }
}