@font-face{
  font-family:'SUIT';
  src:url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#05060a;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.92);
  --muted2:rgba(255,255,255,.80);
  --line:rgba(255,255,255,.10);
  --blue:#2563eb;
  --blueDeep:#1d4ed8;
  --blueNavy:#1e3a8a;
  --card:#0e111a;
  --card2:#111521;
  --r:24px;

  --wbg:#ffffff;
  --wfg:#0a0b10;
  --wmuted:rgba(10,11,16,.70);
  --wline:rgba(10,11,16,.12);
  
  --cta-safe: 18px;
  --cta-h: 70px;
}


*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'SUIT', system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ===============================
   001 HERO
================================ */
.sec-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg);
}


.hero-bg{position:absolute; inset:0; z-index:1; overflow:hidden;}
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.15);
  animation: zoom 7s ease-out forwards;
  will-change: transform;
}
@keyframes zoom{to{transform:scale(1);}}

.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 25%,rgba(0,0,0,.8) 60%,rgba(0,0,0,.7));
}

.hero-inner{position:relative; z-index:3; width:100%; padding: clamp(34px, 5.8vh, 78px)  24px;}
.hero-logo img{width:150px; height:auto; margin-bottom:28px; margin-top:-10px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.58)); opacity:.98;}

.hero-title{
  font-weight:900;
  letter-spacing:-0.05em;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.2;
  margin-bottom:18px;
}
.hero-line2{display:inline-block;}
@media (min-width: 980px){ .hero-line2{white-space:nowrap;} }

.hero-subtitle{
  font-weight:700;
  font-size:clamp(1.12rem,2.2vw,1.28rem);
  letter-spacing:-0.02em;
  margin-bottom:22px;
  color:var(--muted);
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.hero-keywords{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px 0;
  padding:0;
}
.hero-keywords li{
  font-weight:700;
  font-size:0.8rem;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}

/* Highlight fill: white text + blue background filling L->R */
.hl-fill{position:relative; display:inline-block; padding:0 .2em; border-radius:.16em; isolation:isolate; color:var(--fg);}
.hl-fill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:.16em;
  background:linear-gradient(90deg,var(--blueNavy),var(--blueDeep),var(--blue));
  transform:scaleX(0);
  transform-origin:left;
  z-index:-1;
  filter: drop-shadow(0 12px 28px rgba(37,99,235,.42));
}
.hl-fill.is-on::before{ animation: fill 1.6s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes fill{to{transform:scaleX(1);}}
.hl-fill[data-hl="1"].is-on::before{ animation-delay:.25s; }
.hl-fill[data-hl="2"].is-on::before{ animation-delay:.75s; }
.hl-fill[data-hl="3"].is-on::before{ animation-delay:.20s; }
.hl-fill[data-hl="4"].is-on::before{ animation-delay:.45s; }

/* Light variant highlight for white section */
.hl-light{color:var(--wfg);} 
.hl-light.is-on{color:#fff;}
.hl-light::before{
  background:linear-gradient(90deg, rgba(37,99,235,.92), rgba(29,78,216,.92), rgba(30,58,138,.92));
  filter: drop-shadow(0 10px 18px rgba(37,99,235,.28));
}

/* Insane button (blue, flashy) */
.btn-insane{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:22px 60px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:1.2rem;
  letter-spacing:-0.02em;
  color:#fff;
  background:linear-gradient(135deg,var(--blueNavy),var(--blueDeep),var(--blue));
  box-shadow:
    0 0 30px rgba(37,99,235,.7),
    0 20px 80px rgba(29,78,216,.6);
  overflow:hidden;
  transform:translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.btn-insane:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:
    0 0 60px rgba(37,99,235,.9),
    0 30px 120px rgba(29,78,216,.8);
}
.btn-insane i{
  position:absolute;
  width:120%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-25deg);
  left:-130%;
}
.btn-insane:hover i{animation: shine 1s ease forwards;}
@keyframes shine{to{left:130%;}}

@media (max-width: 560px){
  .btn-insane{width:100%; padding:20px 22px;}
}

/* Mobile hero padding fix (001) */
@media (max-width: 560px){
  .sec-hero .hero-inner{padding-left: 22px; padding-right: 22px;}
}

/* ===============================
   002 COST
================================ */
.sec-cost{padding:140px 0;background:var(--bg);}
.cost-main{text-align:center;margin-bottom:78px;}
.cost-title{
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:850;
  letter-spacing:-0.04em;
  line-height:1.28;
  margin-bottom:36px;
}
.cost-highlight{display:inline-block; position:relative; padding: 18px 18px 22px; border-radius: 18px;}
.cost-kicker{display:block; font-weight:720; letter-spacing:-0.02em; color:var(--muted2);}
.percent-wrap{margin-top:18px; display:flex; align-items:baseline; justify-content:center; gap:10px;}

.percent-number{
  font-size:clamp(3rem,8vw,6rem);
  font-weight:900;
  letter-spacing:-0.06em;
  font-weight: 900;
  font-feature-settings: "tnum" 1, "lnum" 1;
  background:linear-gradient(90deg,var(--blue),var(--blueDeep),var(--blueNavy));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(37,99,235,.55));
}
.percent-text{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:900;
  letter-spacing:-0.04em;
  background:linear-gradient(90deg,var(--blue),var(--blueDeep));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(37,99,235,.38));
}

/* underline grows L->R (002 animation) */
.cost-underline{
  height:2px;
  margin:18px auto 0;
  width:min(520px, 82vw);
  background:linear-gradient(90deg, rgba(37,99,235,.0), rgba(37,99,235,.85), rgba(37,99,235,.0));
  transform:scaleX(0);
  transform-origin:left;
  opacity:.95;
}
.cost-underline.is-on{ animation: lineGrow 1.45s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes lineGrow{ to{ transform:scaleX(1);} }

.cost-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.cost-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:34px 34px;
  border-radius:var(--r);
  background:
    radial-gradient(420px 260px at 18% 10%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(145deg,var(--card),var(--card2));
  border:1px solid rgba(37,99,235,.26);
  box-shadow: 0 18px 54px rgba(0,0,0,.38);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.cost-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(37,99,235,.0), rgba(37,99,235,.35), rgba(37,99,235,.0));
  opacity:.0;
  transform: translateX(-35%);
  transition: opacity .45s ease, transform .65s ease;
  pointer-events:none;
}
.cost-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 86px rgba(0,0,0,.52), 0 0 60px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.42);
}
.cost-card:hover::before{
  opacity:.85;
  transform: translateX(35%);
}

.card-left{min-width:0;}
.card-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  font-weight:820;
  letter-spacing:-0.02em;
  color: rgba(37,99,235,.98);
  margin-bottom:14px;
}
.cost-card h3{
  font-size:1.42rem;
  font-weight:900;
  letter-spacing:-0.03em;
  margin-bottom:10px;
}
.cost-card p{
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color: rgba(255,255,255,.80);
}

.card-icon{
  flex:0 0 auto;
  width:92px;
  height:92px;
  border-radius:22px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.08), 0 16px 34px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
}
.card-icon img{
  width:74px;
  height:74px;
  object-fit:contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.38));
  opacity:.95;
}

@media (max-width: 900px){
  .sec-cost{padding: 110px 0;}
  .cost-grid{grid-template-columns:1fr;}
}

/* 002 subtitle-like second line */
.cost-subline{
  display:inline-block;
  font-weight:720;
  font-size: .88em;
  letter-spacing:-0.02em;
  color: rgba(255,255,255,.86);
  opacity:.92;
}

/* ===============================
   003 PROOF (white ad-feel)
================================ */
.sec-proof{
  position:relative;
  padding: 140px 0;
  background: var(--wbg);
  color: var(--wfg);
  overflow:hidden;
}
.sec-proof::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("img/innohai_003_bg.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity: .28;
  z-index:0;
}
.sec-proof::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 40%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(760px 520px at 78% 56%, rgba(37,99,235,.12), transparent 62%),
    linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94));
  z-index:1;
}
.proof-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items:center;
}

.proof-badge{
  display:inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10,11,16,.06);
  border: 1px solid rgba(10,11,16,.10);
  color: rgba(10,11,16,.78);
  font-weight: 860;
  letter-spacing: -0.03em;
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
  transform-origin: 40% 60%;
  margin-bottom: 22px;
}

.proof-title{
  font-size: clamp(2.60rem, 3.6vw, 3rem);
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(0,0,0,1);
  line-height: 1.42;
  padding: 20px 0px;
}

.proof-sub{
  font-size: clamp(1.10rem, 2.1vw, 1.34rem);
  font-weight: 820;
  letter-spacing: -0.03em;
  color: rgba(10,11,16,.78);
  line-height: 1.42;
}





/* Right card */
.proof-card{
  width: min(460px, 100%);
  margin-left: auto;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 28px 80px rgba(0,0,0,.14);
  transform: translateZ(0);
}
.proof-frame{
  position:relative;
  border-radius: 28px;
  padding: 14px;
}
.proof-media{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10,11,16,.08);
}
.proof-media img{
  width:100%;
  height:auto;
  display:block;
}

/* Mask reveal */
.proof-mask{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55%, rgba(255,255,255,.92) 100%);
  transform: translateY(0%);
}

/* Frame line draw */
.frame-line{position:absolute; background: linear-gradient(90deg, rgba(37,99,235,.0), rgba(37,99,235,.65), rgba(37,99,235,.0)); opacity:.95;}
.frame-t{left:14px; right:14px; top:14px; height:2px; transform:scaleX(0); transform-origin:left;}
.frame-b{left:14px; right:14px; bottom:14px; height:2px; transform:scaleX(0); transform-origin:left;}
.frame-l{top:14px; bottom:14px; left:14px; width:2px; transform:scaleY(0); transform-origin:top; background: linear-gradient(180deg, rgba(37,99,235,.0), rgba(37,99,235,.55), rgba(37,99,235,.0));}
.frame-r{top:14px; bottom:14px; right:14px; width:2px; transform:scaleY(0); transform-origin:top; background: linear-gradient(180deg, rgba(37,99,235,.0), rgba(37,99,235,.55), rgba(37,99,235,.0));}

/* 003 hover */
.proof-card:hover{ transform: translateY(-6px); transition: transform .45s ease; }

/* 003 animation states (IntersectionObserver toggles .is-on) */
.anim{opacity:0;}
.anim.is-on{opacity:1;}

.proof-badge.anim{transform: scale(.94);}
.proof-badge.anim.is-on{ animation: popBadge .78s cubic-bezier(.2,1.1,.2,1) both; }
@keyframes popBadge{
  0%{opacity:0; transform:scale(.92); filter: blur(2px);}
  70%{opacity:1; transform:scale(1.03); filter: blur(0);}
  100%{opacity:1; transform:scale(1);}
}

.proof-title.anim{filter: blur(8px); transform: translateY(6px);}
.proof-title.anim.is-on{ animation: blurIn 1.05s cubic-bezier(.2,.9,.2,1) both; }
@keyframes blurIn{
  from{opacity:0; filter: blur(10px); transform: translateY(8px);}
  to{opacity:1; filter: blur(0); transform: translateY(0);}
}

.proof-sub.anim{filter: blur(6px); transform: translateY(6px);}
.proof-sub.anim.is-on{ animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .08s both; }
@keyframes fadeIn{
  from{opacity:0; filter: blur(8px); transform: translateY(8px);}
  to{opacity:1; filter: blur(0); transform: translateY(0);}
}

.proof-card.anim{transform: translateY(14px); filter: blur(10px);}
.proof-card.anim.is-on{ animation: cardIn 1.05s cubic-bezier(.2,.9,.2,1) .12s both; }
@keyframes cardIn{
  from{opacity:0; transform: translateY(16px); filter: blur(12px);}
  to{opacity:1; transform: translateY(0); filter: blur(0);}
}

/* trigger mask + line draw when card is-on */
.proof-card.is-on .proof-mask{ animation: maskUp 1.15s cubic-bezier(.2,.9,.2,1) .22s both; }
@keyframes maskUp{ to{ transform: translateY(110%);} }

.proof-card.is-on .frame-t{ animation: drawX 1.05s cubic-bezier(.2,.9,.2,1) .18s both; }
.proof-card.is-on .frame-b{ animation: drawX 1.05s cubic-bezier(.2,.9,.2,1) .30s both; }
@keyframes drawX{ to{ transform: scaleX(1);} }

.proof-card.is-on .frame-l{ animation: drawY 1.05s cubic-bezier(.2,.9,.2,1) .24s both; }
.proof-card.is-on .frame-r{ animation: drawY 1.05s cubic-bezier(.2,.9,.2,1) .34s both; }
@keyframes drawY{ to{ transform: scaleY(1);} }

@media (max-width: 980px){
  .sec-proof{padding: 110px 0;}
  .proof-inner{grid-template-columns: 1fr; gap: 26px;}
  .proof-card{margin: 0; width: min(520px, 100%);}
}

@media (prefers-reduced-motion: reduce){
  .hero-bg img{animation:none; transform:scale(1.04);}
  .hl-fill.is-on::before{animation:none; transform:scaleX(1);}
  .btn-insane:hover i{animation:none;}
  .cost-underline.is-on{animation:none; transform:scaleX(1);}
  .cost-card, .btn-insane, .proof-card{transition:none;}
  .cost-card:hover,.proof-card:hover{transform:none;}
  .anim{opacity:1; filter:none; transform:none;}
  .proof-mask{transform:translateY(110%);}
  .frame-t,.frame-b{transform:scaleX(1);}
  .frame-l,.frame-r{transform:scaleY(1);}
}




/* ===============================
   004 SYSTEM (A)
================================ */
.sec-system{
  padding: 140px 0;
  background: var(--bg);
  color: var(--fg);
  position:relative;
  overflow:hidden;
}
.sec-system::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(900px 620px at 22% 18%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(720px 520px at 78% 62%, rgba(37,99,235,.10), transparent 62%);
  z-index:0;
}
.system-inner{position:relative; z-index:1;}

.system-top{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items:center;
  margin-bottom: 44px;
}

.system-bottom{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 44px;
  align-items:center;
}

.system-copy, .system-copy2{min-width:0;}

.system-line{
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  font-weight: 900;
  letter-spacing:-0.05em;
  line-height:1.22;
  margin: 14px 0;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.system-line2{
  font-size: clamp(2.55rem, 3.2vw, 3.15rem);
  font-weight: 900;
  letter-spacing:-0.05em;
  line-height:1.22;
  margin: 14px 0;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.system-sub{
  font-size: clamp(1.32rem, 2.2vw, 1.54rem);
  font-weight: 850;
  letter-spacing:-0.03em;
  line-height:1.35;
  color: rgba(255,255,255,.88);
  margin: 14px 0;
}

.system-bar{
  margin-top: 18px;
  height: 2px;
  width: min(520px, 100%);
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.85), rgba(37,99,235,0));
  transform: scaleX(0);
  transform-origin:left;
  opacity:.95;
}

/* media frame */
.system-media{transform: translateZ(0);}
.media-frame{
  position:relative;
  border-radius: 28px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
}
.media-wrap{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  background: #0b0d14;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.media-wrap img{
  width:100%;
  height:auto;
  display:block;
  transform: scale(1.02);
}
.media-mask{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,6,10,1) 0%, rgba(5,6,10,1) 55%, rgba(5,6,10,.92) 100%);
  transform: translateX(0%);
}

/* reuse frame lines from 003 but with stronger blue */
.sec-system .frame-line{opacity:.9;}
.sec-system .frame-t,.sec-system .frame-b{
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.8), rgba(37,99,235,0));
}
.sec-system .frame-l,.sec-system .frame-r{
  background: linear-gradient(180deg, rgba(37,99,235,0), rgba(37,99,235,.72), rgba(37,99,235,0));
}

/* size variant */
.system-media.small .media-frame{max-width: 560px;}
.system-media.small{justify-self:start;}

/* ===== 004 animation states ===== */
.system-media.anim{opacity:0; filter: blur(10px); transform: translateY(12px);}
.system-media.anim.is-on{opacity:1; filter: blur(0); transform: translateY(0); transition: opacity .2s;}

.system-line.anim{opacity:0; filter: blur(8px); transform: translateY(10px);}
.system-line.anim.is-on{opacity:1; filter: blur(0); transform: translateY(0);}

.system-sub.anim{opacity:0; filter: blur(7px); transform: translateY(10px);}
.system-sub.anim.is-on{opacity:1; filter: blur(0); transform: translateY(0);}

.system-bar.anim{opacity:1;}
.system-bar.anim.is-on{ animation: lineGrow 1.35s cubic-bezier(.2,.9,.2,1) .18s both; }

/* reveal masks */
.system-media.is-on .media-mask{ animation: maskX 1.1s cubic-bezier(.2,.9,.2,1) .18s both; }
.system-media.small.is-on .media-mask{ animation: maskY 1.1s cubic-bezier(.2,.9,.2,1) .18s both; }
@keyframes maskX{ to{ transform: translateX(110%);} }
@keyframes maskY{ to{ transform: translateY(110%);} }

/* frame draw */
.sec-system .system-media.is-on .frame-t{ animation: drawX 1.0s cubic-bezier(.2,.9,.2,1) .12s both; }
.sec-system .system-media.is-on .frame-b{ animation: drawX 1.0s cubic-bezier(.2,.9,.2,1) .26s both; }
.sec-system .system-media.is-on .frame-l{ animation: drawY 1.0s cubic-bezier(.2,.9,.2,1) .18s both; }
.sec-system .system-media.is-on .frame-r{ animation: drawY 1.0s cubic-bezier(.2,.9,.2,1) .32s both; }

/* Stagger timing for 3 lines and 2 subs */
.system-line[data-anim="line"].is-on:nth-of-type(1){animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .08s both;}
.system-line[data-anim="line"].is-on:nth-of-type(2){animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .22s both;}
.system-line[data-anim="line"].is-on:nth-of-type(3){animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .36s both;}

.system-copy2 .system-sub.is-on:nth-of-type(1){animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .10s both;}
.system-copy2 .system-sub.is-on:nth-of-type(2){animation: fadeIn 1.0s cubic-bezier(.2,.9,.2,1) .26s both;}

@media (max-width: 980px){
  .sec-system{padding: 110px 0;}
  .system-top, .system-bottom{grid-template-columns: 1fr; gap: 26px;}
  .system-bottom{margin-top: 22px;}
  .system-media.small .media-frame{max-width: 100%;}
}

@media (prefers-reduced-motion: reduce){
  .system-media.anim, .system-line.anim, .system-sub.anim{opacity:1; filter:none; transform:none;}
  .system-media .media-mask{transform:translateX(110%);}
  .system-media.small .media-mask{transform:translateY(110%);}
  .system-bar{transform:scaleX(1);}
}


/* ===============================
   005 RESTORE / SUPPORT (BLACK)
   A + (right 2 cards)
================================ */

.restore{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: radial-gradient(900px 340px at 20% 10%, rgba(37,99,235,.16), rgba(0,0,0,0) 60%),
              radial-gradient(820px 360px at 85% 85%, rgba(0,210,255,.10), rgba(0,0,0,0) 62%),
              linear-gradient(180deg, #07090d 0%, #090c12 55%, #07090d 100%);
}

.restore__copy{
  max-width: 560px;
}

.restore__eyebrow{
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: rgba(255,255,255,.72);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.restore__title{
  margin: 0 0 24px;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 950;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.restore__lead{
  margin: 0 0 12px;
  color: rgba(255,255,255,.86);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.6;
}

.restore__desc{
  margin: 0;
  color: rgba(255,255,255,.76);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.65;
}

/* right cards */
.restore__cards{
  display: grid;
  gap: 12px;
}

.restore-card{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  transform: translateZ(0);
  box-shadow:
    0 22px 90px rgba(0,0,0,.55);
}

.restore-card--primary{
  background:
    radial-gradient(620px 240px at 20% 10%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    radial-gradient(520px 260px at 90% 90%, rgba(37,99,235,.24), rgba(37,99,235,0) 65%),
    linear-gradient(135deg, rgba(37,99,235,.22) 0%, rgba(255,255,255,.06) 35%, rgba(0,0,0,.06) 100%);
}

.restore-card--glass{
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.restore-card__tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,.26), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  white-space: nowrap;
}

.restore-card__main{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.35;
  font-size: 1.16rem;
}

.restore-card__num{
  font-size: 2.38rem;
  font-weight: 980;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(37,99,235,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.restore-card__sub{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

/* subtle hover (not too flashy) */
.restore-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 110px rgba(0,0,0,.62),
    0 0 90px rgba(37,99,235,.12);
}
.restore-card:active{
  transform: translateY(0);
}

/* responsive */
@media (max-width: 980px){
  .restore{
    padding: 56px 0;
  }
  .restore__inner{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .restore__copy{
    max-width: none;
  }
}

/* ===============================
   005 RESTORE (LEFT cards + RIGHT image)
================================ */

.restore__inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}

.restore__left{
  max-width: 600px;
}

.restore__right{
  display: flex;
  justify-content: flex-end;
}

.restore__cards--left{
  margin-top: 16px;
}



/* responsive */
@media (max-width: 980px){
  .restore__inner{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .restore__left{
    max-width: none;
  }
  .restore__right{
    justify-content: flex-start;
  }
  .restore__media{
    max-width: none;
  }
}

/* ===============================
   006 EXPERT
================================ */
#sec-006{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(45,105,255,.14), rgba(0,0,0,0) 55%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0b1020 0%, #070a12 60%, #06070c 100%);
}

.expert-title{
  text-align:center;
  font-size: clamp(2rem,4vw,3rem);
  font-weight:900;
  letter-spacing:-0.05em;
  margin-bottom:70px;
}

.expert-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.expert-card{
  position:relative;
  background: linear-gradient(145deg,#10131c,#0c0f17);
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.expert-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(37,99,235,.0), rgba(37,99,235,.25), rgba(37,99,235,.0));
  opacity:0;
  transform: translateX(-35%);
  transition: opacity .45s ease, transform .7s ease;
  pointer-events:none;
}

.expert-card:hover{
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 30px 84px rgba(0,0,0,.60), 0 0 56px rgba(37,99,235,.18);
}
.expert-card:hover::before{
  opacity:.9;
  transform: translateX(35%);
}

.expert-media{
  overflow:hidden;
  border-radius: 16px;
  margin-bottom: 16px;
  background: #0b0d14;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.expert-media img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .65s ease, filter .65s ease;
  transform: scale(1.02);
}
.expert-card:hover .expert-media img{
  transform: scale(1.10);
  filter: saturate(1.03) contrast(1.03);
}

.expert-card h3{
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.25;
}
.expert-card p{
  font-size: .96rem;
  line-height: 1.55;
  color: rgba(255,255,255,.75);
}

/* 006 animations */
.expert-card.anim{opacity:0; transform: translateY(12px); filter: blur(8px);}
.expert-card.anim.is-on{opacity:1; transform: translateY(0); filter: blur(0);}
.expert-title.anim{opacity:0; filter: blur(10px); transform: translateY(10px);}
.expert-title.anim.is-on{animation: fadeIn 1.05s cubic-bezier(.2,.9,.2,1) both;}

@media (max-width: 1100px){
  .expert-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 680px){
  #sec-006{padding: 110px 0;}
  .expert-grid{grid-template-columns: 1fr;}
}


/* ===============================
   007 CONVERT (white)
================================ */
#sec-007{
  position:relative;
  padding: 140px 0;
  background: var(--wbg);
  color: var(--wfg);
  overflow:hidden;
}
#sec-007::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(880px 560px at 22% 20%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(760px 520px at 80% 70%, rgba(37,99,235,.07), transparent 62%);
  z-index:0;
}
.convert-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items:stretch;
}

.convert-box{
  border-radius: 28px;
  padding: 34px 34px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,11,16,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.10);
  overflow:hidden;
  transform: translateZ(0);
}

.convert-primary{
  background:
    radial-gradient(520px 320px at 18% 14%, rgba(37,99,235,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 34px 120px rgba(37,99,235,.10), 0 26px 90px rgba(0,0,0,.10);
}

.convert-kicker{
  font-weight: 900;
  letter-spacing:-0.03em;
  color: rgba(10,11,16,.70);
  margin-bottom: 10px;
}

.convert-title{
  font-size: clamp(2.0rem, 3.8vw, 3.0rem);
  font-weight: 900;
  letter-spacing:-0.055em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--wfg);
}

.convert-note{
  font-size: 1.05rem;
  font-weight: 820;
  letter-spacing:-0.02em;
  color: rgba(10,11,16,.74);
  line-height: 1.42;
  margin-bottom: 22px;
}

.convert-cta{margin-top: 6px;}

.btn-insane--white{
  background: linear-gradient(135deg, var(--blueNavy), var(--blueDeep), var(--blue));
  box-shadow:
    0 0 40px rgba(37,99,235,.45),
    0 22px 90px rgba(29,78,216,.32);
}
.btn-insane--white:hover{
  box-shadow:
    0 0 70px rgba(37,99,235,.60),
    0 34px 130px rgba(29,78,216,.42);
}

.convert-h3{
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing:-0.03em;
  margin-bottom: 10px;
  color: var(--wfg);
}

.convert-p{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing:-0.02em;
  color: rgba(10,11,16,.72);
  line-height: 1.45;
  margin-bottom: 18px;
}

.convert-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}
.convert-list li{
  position:relative;
  padding-left: 14px;
  font-size: 1.03rem;
  font-weight: 820;
  letter-spacing:-0.02em;
  color: rgba(10,11,16,.78);
  line-height: 1.35;
}
.convert-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(37,99,235,.10);
}

/* 007 animations */
#sec-007 .convert-box.anim{opacity:0; filter: blur(10px); transform: translateY(12px);}
#sec-007 .convert-box.anim.is-on{opacity:1; filter: blur(0); transform: translateY(0);}
#sec-007 .convert-list.anim{opacity:0;}
#sec-007 .convert-list.anim.is-on{opacity:1;}

@media (max-width: 980px){
  #sec-007{padding: 110px 0;}
  .convert-inner{grid-template-columns: 1fr; gap: 18px;}
}

/* additional highlight timing */
.hl-fill[data-hl="6"].is-on::before{ animation-delay:.28s; }
.hl-fill[data-hl="7"].is-on::before{ animation-delay:.22s; }


/* ===============================
   007 REFINED DESIGN
================================ */

.convert-badge{
  display:inline-block;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  background:rgba(37,99,235,.12);
  color:var(--blue);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:18px;
}

.convert-big{
  font-size:1.2rem;
  font-weight:800;
  line-height:1.4;
  margin-bottom:26px;
  color:var(--wfg);
}

.convert-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:24px;
}

.mini-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
  transition:.4s ease;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.mini-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 70px rgba(37,99,235,.15);
}

.mini-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blueDeep));
  flex-shrink:0;
  box-shadow:0 0 20px rgba(37,99,235,.35);
}

.mini-card p{
  font-size:.95rem;
  font-weight:700;
  line-height:1.45;
  color:rgba(0,0,0,.78);
}

@media (max-width:980px){
  .convert-mini-grid{
    grid-template-columns:1fr;
  }
}

/* ===============================
   007 UPGRADE PATCH
================================ */

/* LEFT GUARANTEE */
.convert-guarantee{
  margin-top:34px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.22);
  font-size:.95rem;
  font-weight:800;
  color:var(--blueDeep);
  text-align:center;
}

/* RIGHT BOX UPGRADE */
.convert-proof-up{
  background:
    radial-gradient(520px 260px at 15% 10%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg,#ffffff,#f7f9ff);
  border:1px solid rgba(37,99,235,.18);
  box-shadow:
    0 28px 100px rgba(37,99,235,.10),
    0 22px 80px rgba(0,0,0,.08);
}



.convert-proof-header{
  margin-bottom:26px;
}

.convert-proof-header h3{
  font-size:1.4rem;
  font-weight:950;
  letter-spacing:-0.03em;
  margin-bottom:14px;
}

.proof-line{
  height:2px;
  width:120px;
  background:linear-gradient(90deg,var(--blue),transparent);
}

/* GRID */
.convert-proof-grid{
  display:grid;
  gap:22px;
}


.proof-num{
  font-size:1.3rem;
  font-weight:900;
  color:var(--blue);
  min-width:40px;
}

/* 007 proof card text — minimal patch */

.proof-num{font-size:1.55rem; min-width:48px;}
.proof-item p{
  font-size:1.10rem;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-0.02em;
  color:var(--wfg);
}
.convert-proof-up .proof-item p{color:rgba(10,11,16,.86);}
.convert-proof-up .proof-item:hover p{color:var(--blueDeep);}

/* ===============================
   007 RIGHT BOX — SCAN-FRIENDLY UPGRADE
================================ */



.convert-proof-header{margin-bottom:26px;}
.proof-line{
  height:2px;
  width:140px;
  background:linear-gradient(90deg,var(--blue),transparent);
}

/* 카드 = “정보 블록” 느낌 + 리듬 */
.convert-proof-grid{
  display:grid;
  gap:16px;
}

.proof-item{
  position:relative;
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px 22px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(10,11,16,.07);
  box-shadow:0 18px 50px rgba(0,0,0,.05);
  overflow:hidden;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

/* 왼쪽 얇은 블루 바 (눈이 멈추는 포인트) */
.proof-item::before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--blue),rgba(37,99,235,.25));
  opacity:.9;
}

/* hover 시 하이엔드 상승감 */
.proof-item:hover{
  transform:translateY(-6px);
  border-color: rgba(37,99,235,.22);
  box-shadow:
    0 26px 78px rgba(37,99,235,.12),
    0 24px 70px rgba(0,0,0,.08);
}

/* 번호를 “장식”처럼: 크고 선명하게 */
.proof-num{
  font-size:1.55rem;
  font-weight:950;
  letter-spacing:-0.02em;
  min-width:54px;
  line-height:1;
  background:linear-gradient(135deg,var(--blueNavy),var(--blueDeep),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 10px 18px rgba(37,99,235,.12));
  margin-top:2px;
}

.proof-txt{min-width:0;}
.proofv-title{
  font-size:1.52rem;
  font-weight:950;
  letter-spacing:-0.03em;
  line-height:1.2;
  margin-bottom:10px;
}
.proofv-sub{
  font-size:1.05rem;
  font-weight:850;
  letter-spacing:-0.02em;
  line-height:1.35;
  color: rgba(10,11,16,.74);
}

/* hl-fill(화이트용) 안에서 타이틀이 너무 답답하지 않게 */
.proofv-title .hl-fill{padding:0 .25em;}
.proofv-title .hl-light::before{
  filter: drop-shadow(0 10px 18px rgba(37,99,235,.20));
}


/* ===============================
   008 PROCESS (black, like 002)
================================ */

.sec-process{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(45,105,255,.14), rgba(0,0,0,0) 55%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0b1020 0%, #070a12 60%, #06070c 100%);
  position:relative;
  overflow:hidden;
}

.process-inner{position:relative;}

.process-head{
  text-align:center;
  margin-bottom: 62px;
}

.process-title{
  font-size: clamp(2rem, 4vw, 3.05rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1.22;
}

/* grid */
.process-grid{
  display:grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  align-items:center;
  gap: 26px;
}

/* card (reusing 002 vibe but tuned) */
.process-card{
  position:relative;
  border-radius: var(--r);
  padding: 30px 28px;
  background:
    radial-gradient(420px 260px at 18% 10%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(145deg,var(--card),var(--card2));
  border: 1px solid rgba(37,99,235,.22);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.process-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(37,99,235,.0), rgba(37,99,235,.32), rgba(37,99,235,.0));
  opacity:0;
  transform: translateX(-35%);
  transition: opacity .45s ease, transform .7s ease;
  pointer-events:none;
}

.process-card:hover{
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.40);
  box-shadow: 0 32px 96px rgba(0,0,0,.62), 0 0 70px rgba(37,99,235,.16);
}
.process-card:hover::before{
  opacity:.95;
  transform: translateX(35%);
}

/* step chip */
.process-step{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: .82rem;
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.10), 0 16px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.process-h3{
  font-size: 1.32rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin-bottom: 12px;
}

.process-p{
  font-size: 1.06rem;
  font-weight: 820;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}

/* CTA */
.process-cta{
  display:flex;
  justify-content:center;
  margin-top: 54px;
}

/* animations (works with existing main.js .anim retrigger) */
.process-title.anim{opacity:0; filter: blur(10px); transform: translateY(10px);}
.process-title.anim.is-on{animation: fadeIn 1.05s cubic-bezier(.2,.9,.2,1) both;}

.process-card.anim{opacity:0; filter: blur(10px); transform: translateY(12px);}
.process-card.anim.is-on{animation: fadeIn 1.05s cubic-bezier(.2,.9,.2,1) both;}
.process-card.anim.is-on:nth-child(1){animation-delay:.05s;}
.process-card.anim.is-on:nth-child(2){animation-delay:.18s;}
.process-card.anim.is-on:nth-child(3){animation-delay:.31s;}

.process-cta.anim{opacity:0; filter: blur(10px); transform: translateY(10px);}
.process-cta.anim.is-on{animation: fadeIn 1.05s cubic-bezier(.2,.9,.2,1) .12s both;}

@media (max-width: 980px){
  .sec-process{padding: 110px 0;}
  .process-grid{grid-template-columns: 1fr; gap: 18px;}
  .process-cta{margin-top: 38px;}
}

/* ===============================
   008 FLOW ARROWS
================================ */


/* 화살표 */
.process-arrow{
  position:relative;
  height:2px;
  background: linear-gradient(90deg, rgba(37,99,235,.0), rgba(37,99,235,.8));
  border-radius:2px;
}

/* 화살표 끝 */
.process-arrow::after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  transform:translateY(-50%);
  border-left:10px solid var(--blue);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* 은은한 흐름 애니메이션 */
.process-arrow::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:40%;
  background: linear-gradient(90deg, rgba(37,99,235,.0), rgba(37,99,235,.9), rgba(37,99,235,.0));
  animation: flowMove 2.4s linear infinite;
  opacity:.8;
}

@keyframes flowMove{
  from{transform:translateX(-100%);}
  to{transform:translateX(250%);}
}

/* 모바일에서는 화살표 제거 */
@media (max-width: 980px){
  .process-grid{
    grid-template-columns:1fr;
  }
  .process-arrow{
    display:none;
  }
}

/* ===============================
   009 PARTNERS + PRESS
================================ */

.sec-partners{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(45,105,255,.14), rgba(0,0,0,0) 55%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.07), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #070a12 0%, #06070c 55%, #05060a 100%);
  position:relative;
  overflow:hidden;
}

.partners-head{
  text-align:center;
  margin-bottom: 58px;
}

.partners-kicker{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.partners-title{
  font-size: clamp(2.05rem, 4vw, 3.15rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1.18;
  margin-bottom: 14px;
}

.partners-sub{
  font-size: 1.12rem;
  font-weight: 850;
  color: rgba(255,255,255,.78);
  letter-spacing: -0.02em;
  line-height: 1.55;
}

/* marquee */
.brand-marquee{
  margin: 40px auto 72px;
  border-radius: 26px;
  padding: 14px 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  overflow:hidden;
}

.brand-row{
  display:flex;
  gap: 30px;
  align-items:center;
  white-space: nowrap;
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  padding: 10px 0;
}

.brand-track{
  display:inline-flex;
  align-items:center;
  gap: 46px;
  padding-left: 46px;
  will-change: transform;
  animation: brandMarqueeRight 26s linear infinite;
}

.brand-row--left .brand-track{
  animation: brandMarqueeLeft 28s linear infinite;
}

.brand-track img{
  height: 42px;
  width:auto;
  opacity: .9;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.brand-track img:hover{
  opacity: 1;
  filter: drop-shadow(0 16px 34px rgba(37,99,235,.25));
}

@keyframes brandMarqueeRight{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes brandMarqueeLeft{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .brand-track{animation: none !important;}
}

/* news */
.news-wrap{
  margin-top: 10px;
}

.news-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.news-card{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  min-height: 320px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 90px rgba(0,0,0,.62);
  transform: translateZ(0);
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}

.news-bg{
  position:absolute;
  inset:0;
}
.news-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(.95) contrast(1.02) brightness(.95);
  transform: scale(1.02);
}

.news-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(37,99,235,.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

.news-body{
  position:absolute;
  inset:auto 0 0 0;
  padding: 20px 18px 18px;
}

.news-press{
  display:inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: .86rem;
  letter-spacing:-0.02em;
  backdrop-filter: blur(10px);
  margin-bottom: 12px;
}

.news-title{
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: rgba(255,255,255,.94);
  margin-bottom: 12px;
  text-shadow: 0 18px 40px rgba(0,0,0,.65);
}

.news-date{
  font-size: .92rem;
  font-weight: 850;
  color: rgba(255,255,255,.70);
  letter-spacing:-0.01em;
}

/* hover */
.news-card:hover{
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 32px 110px rgba(0,0,0,.68), 0 0 90px rgba(37,99,235,.14);
}
.news-card:hover .news-bg img{
  transform: scale(1.08);
}

/* text-only list */
.news-list{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}

.news-row{
  display:grid;
  grid-template-columns: 140px 1fr 110px;
  gap: 14px;
  align-items:center;
  padding: 14px 10px;
  border-radius: 16px;
  transition: background .35s ease, transform .35s ease;
}

.news-row + .news-row{
  margin-top: 8px;
}

.news-chip{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: .9rem;
  backdrop-filter: blur(10px);
}

.news-row-title{
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: rgba(255,255,255,.90);
}

.news-row-date{
  text-align:right;
  font-size: .92rem;
  font-weight: 850;
  color: rgba(255,255,255,.70);
}

.news-row:hover{
  background: rgba(37,99,235,.08);
  transform: translateY(-3px);
}

/* responsive */
@media (max-width: 1100px){
  .news-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 720px){
  .sec-partners{padding: 110px 0;}
  .brand-marquee{margin: 32px auto 54px;}
  .news-grid{grid-template-columns: 1fr;}
  .news-card{min-height: 280px;}
  .news-row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 12px;
  }
  .news-row-date{text-align:left;}
}


/* ===============================
   010 METRICS (WHITE / AD-LIKE)
================================ */

.sec-metrics{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f7ff 55%, #ffffff 100%);
  color: var(--wfg);
  position:relative;
  overflow:hidden;
}

.metrics-head{
  text-align:center;
  margin-bottom: 56px;
}

.metrics-title{
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1.16;
  margin-bottom: 14px;
}

.metrics-sub{
  font-size: 1.1rem;
  font-weight: 850;
  color: rgba(10,11,16,.72);
  letter-spacing:-0.02em;
}

/* grid */
.metrics-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* card base */
.metrics-card{
  position:relative;
  border-radius: 26px;
  padding: 28px 26px 26px;
  background:
    radial-gradient(520px 320px at 25% 10%, rgba(37,99,235,.12), transparent 60%),
    linear-gradient(145deg, #ffffff, #f7f9ff);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow:
    0 26px 110px rgba(37,99,235,.10),
    0 22px 90px rgba(0,0,0,.06);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}

.metrics-card:hover{
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.34);
  box-shadow:
    0 38px 140px rgba(37,99,235,.16),
    0 26px 110px rgba(0,0,0,.10);
}

/* label */
.metrics-label{
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing:-0.03em;
  color: rgba(10,11,16,.78);
  margin-bottom: 16px;
}

/* numbers */
.metrics-value{
  display:flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 950;
  letter-spacing: -0.05em;
  margin-bottom: 22px;
}

.metrics-value .count-num{
  font-size: clamp(2.3rem, 4.2vw, 3.25rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--blueNavy), var(--blueDeep), var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 16px 28px rgba(37,99,235,.22));
}

.metrics-unit{
  font-size: 1.35rem;
  font-weight: 950;
  color: rgba(10,11,16,.86);
}

.metrics-prefix{
  font-size: 1.05rem;
  font-weight: 950;
  color: rgba(10,11,16,.65);
  margin-right: 2px;
}

/* shine sweep */
.metrics-shine{
  position:absolute;
  inset:-40px;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 52%, transparent 64%);
  transform: translateX(-55%);
  opacity: 0;
  pointer-events:none;
}
.metrics-card:hover .metrics-shine{
  opacity: 1;
  animation: shineSweep 1.1s ease both;
}
@keyframes shineSweep{
  from{ transform: translateX(-55%) rotate(0.001deg); }
  to{ transform: translateX(55%) rotate(0.001deg); }
}

/* visuals: bars */
.metrics-visual.bars{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height: 64px;
  padding-top: 6px;
  opacity: .95;
}
.metrics-visual.bars span{
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(37,99,235,.18));
  box-shadow: 0 18px 40px rgba(37,99,235,.18);
  transform-origin: bottom;
  height: 10px;
}

/* visuals: donut */
.metrics-visual.donut{
  position:relative;
  height: 86px;
}
.donut-svg{
  width: 92px;
  height: 92px;
}
.donut-track{
  fill:none;
  stroke: rgba(10,11,16,.10);
  stroke-width: 10;
}
.donut-ring{
  fill:none;
  stroke: var(--blue);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 276;
  stroke-dashoffset: 276;
  filter: drop-shadow(0 18px 30px rgba(37,99,235,.20));
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.donut-glow{
  position:absolute;
  left: 18px;
  top: 8px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.22), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}

/* visuals: trend */
.metrics-visual.trend{
  height: 78px;
}
.trend-svg{
  width: 100%;
  height: 78px;
}
.trend-base{
  fill:none;
  stroke: rgba(10,11,16,.10);
  stroke-width: 6;
  stroke-linecap: round;
}
.trend-line{
  fill:none;
  stroke: var(--blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  filter: drop-shadow(0 18px 30px rgba(37,99,235,.18));
}

/* percent arrow (down) */
.metrics-down{
  display:inline-flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 6px;
  transform: translateY(2px);
}
.metrics-down i{
  width: 18px;
  height: 10px;
  border-left: 3px solid rgba(37,99,235,.85);
  border-bottom: 3px solid rgba(37,99,235,.85);
  transform: rotate(-45deg);
  opacity: .25;
}

/* ENTRY ANIMS (triggered by existing .anim observer) */
.metrics-card.anim{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(10px);
}
.metrics-card.anim.is-on{
  animation: metricsIn 1.05s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes metricsIn{
  from{opacity:0; transform: translateY(16px); filter: blur(10px);}
  to{opacity:1; transform: translateY(0); filter: blur(0);}
}

/* On entry: bars jump + ring draw + line draw + arrow bounce */
.metrics-card.is-on .metrics-visual.bars span{
  animation: barPop 1.1s cubic-bezier(.2,.9,.2,1) both;
}
.metrics-card.is-on .metrics-visual.bars span:nth-child(1){animation-delay:.08s; --h: 22px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(2){animation-delay:.16s; --h: 46px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(3){animation-delay:.24s; --h: 30px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(4){animation-delay:.32s; --h: 58px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(5){animation-delay:.40s; --h: 38px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(6){animation-delay:.48s; --h: 62px;}
.metrics-card.is-on .metrics-visual.bars span:nth-child(7){animation-delay:.56s; --h: 44px;}

@keyframes barPop{
  from{height:10px; transform: scaleY(.2); filter: blur(0.5px);}
  to{height: var(--h); transform: scaleY(1); filter: blur(0);}
}

.metrics-card.is-on .donut-ring{
  animation: ringDraw 1.35s cubic-bezier(.2,.9,.2,1) .18s both;
}
@keyframes ringDraw{
  from{stroke-dashoffset: 276;}
  to{stroke-dashoffset: 62;} /* 약 77% 정도 */
}

.metrics-card.is-on .trend-line{
  animation: lineDraw 1.2s cubic-bezier(.2,.9,.2,1) .18s both;
}
@keyframes lineDraw{
  from{stroke-dashoffset: 360;}
  to{stroke-dashoffset: 0;}
}

.metrics-card.is-on .metrics-down i{
  animation: arrowPulse 1.2s ease-in-out infinite;
}
.metrics-card.is-on .metrics-down i:nth-child(1){animation-delay: .00s; opacity:.18;}
.metrics-card.is-on .metrics-down i:nth-child(2){animation-delay: .15s; opacity:.28;}
.metrics-card.is-on .metrics-down i:nth-child(3){animation-delay: .30s; opacity:.40;}

@keyframes arrowPulse{
  0%,100%{transform: rotate(-45deg) translateY(0);}
  50%{transform: rotate(-45deg) translateY(3px);}
}

@media (max-width: 980px){
  .sec-metrics{padding: 110px 0;}
  .metrics-grid{grid-template-columns: 1fr; gap: 14px;}
}

@media (prefers-reduced-motion: reduce){
  .metrics-card:hover .metrics-shine{animation:none;}
  .metrics-card.is-on .metrics-visual.bars span,
  .metrics-card.is-on .donut-ring,
  .metrics-card.is-on .trend-line,
  .metrics-card.is-on .metrics-down i{animation:none !important;}
}

/* ===============================
   011 CASES MARQUEE (BLACK)
================================ */

.sec-cases{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(45,105,255,.14), rgba(0,0,0,0) 55%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #070a12 0%, #06070c 55%, #05060a 100%);
  position:relative;
  overflow:hidden;
}

.cases-head{
  text-align:center;
  margin-bottom: 46px;
}

.cases-title{
  font-size: clamp(2.0rem, 4vw, 3.1rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1.16;
  margin-bottom: 12px;
}

.cases-sub{
  font-size: 1.08rem;
  font-weight: 850;
  color: rgba(255,255,255,.78);
  letter-spacing:-0.02em;
}

.cases-marquee{
  margin-top: 22px;
  border-radius: 26px;
  padding: 18px 0;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 90px rgba(0,0,0,.62);
  overflow:hidden;
}

/* row */
.cases-row{
  display:flex;
  align-items:center;
  white-space: nowrap;
  overflow:hidden;
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.cases-track{
  display:inline-flex;
  align-items:center;
  gap: 18px;
  padding-left: 18px;
  will-change: transform;
}

/* direction */
.cases-row--right .cases-track{
  animation: casesRight 40s linear infinite;
}
.cases-row--left .cases-track{
  animation: casesLeft 44s linear infinite;
}

@keyframes casesRight{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes casesLeft{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .cases-track{animation:none !important;}
}

/* card */
.case-card{
  width: 300px;
  border-radius: 22px;
  background:
    radial-gradient(420px 260px at 20% 10%, rgba(37,99,235,.18), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.60);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.case-media{
  margin:0;
  position:relative;
  width: 300px;
  height: 300px;
  overflow:hidden;
}

.case-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.05) brightness(.92);
  transform: scale(1.02);
  transition: transform .6s ease, filter .6s ease;
}

/* text */
.case-txt{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.case-title{
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
}

.case-loc{
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.70);
}

/* hover: “광고급” */
.case-card:hover{
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(37,99,235,.26);
  box-shadow:
    0 34px 120px rgba(0,0,0,.68),
    0 0 90px rgba(37,99,235,.16);
}
.case-card:hover .case-media img{
  transform: scale(1.10);
  filter: saturate(1.02) contrast(1.08) brightness(.98);
}

/* subtle shine sweep on hover */
.case-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 52%, transparent 62%);
  transform: translateX(-60%);
  opacity:0;
  pointer-events:none;
}
.case-card:hover::after{
  opacity:1;
  animation: caseShine 1.1s ease both;
}
@keyframes caseShine{
  from{ transform: translateX(-60%); }
  to{ transform: translateX(60%); }
}

/* mobile */
@media (max-width: 720px){
  .sec-cases{padding: 110px 0;}
  .cases-marquee{border-radius: 20px;}
  .case-card{width: 240px;}
  .case-media{width:240px; height:240px;}
  .cases-row--right .cases-track{animation-duration: 48s;}
  .cases-row--left .cases-track{animation-duration: 52s;}
}



/* ===============================
   012 KEYWORDS (BLACK / GROUPED)
================================ */

.sec-keywords{
  padding: 140px 0;
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(45,105,255,.16), rgba(0,0,0,0) 55%),
    radial-gradient(820px 520px at 85% 70%, rgba(0,210,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #070a12 0%, #06070c 55%, #05060a 100%);
  position:relative;
  overflow:hidden;
}

.keywords-head{
  text-align:center;
  margin-bottom: 52px;
}

.keywords-title{
  font-size: clamp(2.0rem, 4vw, 3.1rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1.16;
  margin-bottom: 12px;
}

.keywords-sub{
  font-size: 1.06rem;
  font-weight: 850;
  color: rgba(255,255,255,.78);
  letter-spacing:-0.02em;
}

/* groups layout */
.kw-groups{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

/* group card */
.kw-group{
  border-radius: 26px;
  padding: 20px 18px 18px;
  background:
    radial-gradient(520px 320px at 18% 12%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 24px 90px rgba(0,0,0,.62);
  overflow:hidden;
  position:relative;
  transform: translateZ(0);
}

/* make large groups span */
.kw-group:nth-child(1),
.kw-group:nth-child(2),
.kw-group:nth-child(5){
  grid-column: 1 / -1;
}

.kw-cap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.92);
  margin-bottom: 14px;
  font-size: 1.06rem;
}
.kw-cap::after{
  content:"";
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(37,99,235,.26), rgba(255,255,255,0));
  opacity:.8;
  margin-left: 12px;
}

/* tags */
.kw-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kw-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: .78rem;
  line-height: 1;
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
  position:relative;
  overflow:hidden;
}

/* neon micro-shine */
.kw-tag::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.18) 52%, transparent 62%);
  transform: translateX(-60%);
  opacity:0;
}

.kw-tag:hover{
  transform: translateY(-5px);
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.26);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 60px rgba(37,99,235,.14);
}
.kw-tag:hover::before{
  opacity:1;
  animation: kwShine 1.05s ease both;
}
@keyframes kwShine{
  from{ transform: translateX(-60%); }
  to{ transform: translateX(60%); }
}

/* reveal boost: slight pop */
.kw-group.anim{
  opacity:0;
  transform: translateY(14px);
  filter: blur(10px);
}
.kw-group.anim.is-on{
  animation: kwGroupIn 1.05s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes kwGroupIn{
  from{opacity:0; transform: translateY(14px); filter: blur(10px);}
  to{opacity:1; transform: translateY(0); filter: blur(0);}
}

@media (max-width: 980px){
  .sec-keywords{padding: 60px 0;}
  .kw-groups{grid-template-columns: 1fr;}
  .kw-group:nth-child(1),
  .kw-group:nth-child(2),
  .kw-group:nth-child(5){
    grid-column: auto;
  }
  .kw-tag{font-size: 0.7rem;}
}

@media (prefers-reduced-motion: reduce){
  .kw-group.anim.is-on{animation:none;}
  .kw-tag:hover{transform:none;}
  .kw-tag:hover::before{animation:none;}
}


/* ===============================
   013 FINAL CTA (WHITE)
================================ */

.sec-finalcta{
  padding: 140px 0 120px;
  background:
    radial-gradient(980px 560px at 18% 18%, rgba(37,99,235,.12), transparent 62%),
    radial-gradient(900px 560px at 85% 70%, rgba(0,210,255,.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f5f7ff 55%, #ffffff 100%);
  position:relative;
  overflow:hidden;
  color: var(--wfg);
}

.finalcta-head{
  text-align:center;
  margin-bottom: 46px;
}

.finalcta-title{
  font-size: clamp(2.0rem, 4vw, 3.15rem);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1.16;
  margin-bottom: 14px;
}

.finalcta-sub{
  font-size: 1.12rem;
  font-weight: 900;
  color: rgba(10,11,16,.72);
  letter-spacing: -0.02em;
}

.finalcta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* card base */
.finalcta-card{
  position:relative;
  border-radius: 28px;
  padding: 26px 24px 28px;
  display:flex;
  flex-direction: column;
  background:
    radial-gradient(520px 320px at 20% 12%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(145deg, #ffffff, #f7f9ff);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow:
    0 30px 130px rgba(37,99,235,.12),
    0 22px 90px rgba(0,0,0,.08);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}

.finalcta-card:hover{
  transform: translateY(-10px);
  border-color: rgba(37,99,235,.30);
  box-shadow:
    0 40px 160px rgba(37,99,235,.18),
    0 26px 110px rgba(0,0,0,.12);
}

/* top row */
.finalcta-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.finalcta-kicker{
  font-size: 1.6rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(10,11,16,.84);
}

.finalcta-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  color: rgba(10,11,16,.86);
  font-weight: 950;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.finalcta-badge--alt{
  background: rgba(0,210,255,.10);
  border-color: rgba(0,210,255,.24);
}

/* body text */
.finalcta-desc{
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(10,11,16,.72);
  margin-bottom: 14px;
  max-width: 36ch;
}

/* actions */
.finalcta-actions{
  margin-top: auto;
  padding-top: 18px; /* 버튼 위 여백 */
}

.btn-wide{
  width: 100%;
  justify-content: center;
}

/* extra glow accent */
.finalcta-glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(420px 260px at 18% 18%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(360px 240px at 82% 72%, rgba(0,210,255,.12), transparent 62%);
  opacity:.0;
  pointer-events:none;
  transition: opacity .5s ease;
}
.finalcta-card:hover .finalcta-glow{
  opacity: 1;
}

/* reveal */
.finalcta-card.anim{
  opacity:0;
  transform: translateY(16px);
  filter: blur(10px);
}
.finalcta-card.anim.is-on{
  animation: finalctaIn 1.05s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes finalctaIn{
  from{opacity:0; transform: translateY(16px); filter: blur(10px);}
  to{opacity:1; transform: translateY(0); filter: blur(0);}
}

/* mobile */
@media (max-width: 980px){
  .sec-finalcta{padding: 110px 0 98px;}
  .finalcta-grid{grid-template-columns: 1fr; gap: 14px;}
  .finalcta-desc{max-width: none;}
}

/* ===============================
   014 FOOTER (BLACK)
================================ */

.sec-footer{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(45,105,255,.14), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, #06070c 0%, #04050a 100%);
  padding: 74px 0 150px;
  position: relative;
  overflow: hidden;
}

.footer-inner{
  position: relative;
}

.footer-top{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}

.footer-brand{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.footer-logo{
  width: 170px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.footer-cols{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}

.footer-col{
  border-radius: 22px;
  padding: 18px 18px 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}

.footer-col--main{
  background:
    radial-gradient(520px 260px at 20% 15%, rgba(37,99,235,.18), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(37,99,235,.22);
}

.footer-line{
  margin: 0;
  color: rgba(255,255,255,.80);
  font-size: .98rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.footer-line + .footer-line{
  margin-top: 8px;
}

/* hierarchy */
.footer-line--big{
  color: rgba(255,255,255,.92);
  font-size: 1.4rem;
  font-weight: 950;
}

.footer-line--small{
  color: rgba(255,255,255,.66);
  font-size: .80rem;
  font-weight: 800;
}

/* subtle bottom rule */
.footer-bottom{
  margin-top: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(37,99,235,.20), rgba(255,255,255,.12), rgba(255,255,255,0));
  opacity: .85;
}

/* responsive */
@media (max-width: 980px){
  .sec-footer{padding: 66px 0 86px;}
  .footer-top{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-logo{
    width: 160px;
  }
  .footer-cols{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===============================
   015 FIXED CTA (BOTTOM STICKY)
================================ */

body.has-fixed-cta{
  /* 고정 CTA가 콘텐츠 가리지 않게 바닥 패딩 확보 */
  padding-bottom: calc(var(--cta-h) + var(--cta-safe) + env(safe-area-inset-bottom));
}

.fixed-cta{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 999;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none; /* 내부 버튼만 클릭되게 */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.62) 100%);
  backdrop-filter: blur(10px);
}

.fixed-cta__inner{
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
  pointer-events: auto;
}

.fixed-cta__btn{
  min-height: var(--cta-h);
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  text-align:center;
  padding: 12px 14px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow:
    0 16px 60px rgba(0,0,0,.55),
    0 0 70px rgba(37,99,235,.14);
}

/* btn-insane를 “하단 CTA용”으로 더 또렷하게 */
.fixed-cta__btn.btn-insane{
  border: 1px solid rgba(255,255,255,.14);
}

.fixed-cta__btn--estimate{
  box-shadow:
    0 18px 70px rgba(0,0,0,.60),
    0 0 90px rgba(37,99,235,.22);
}

.fixed-cta__btn--tel{
  /* 전화 버튼은 살짝 덜 강하고 정갈하게 */
  box-shadow:
    0 18px 70px rgba(0,0,0,.58),
    0 0 70px rgba(0,210,255,.14);
}

.fixed-cta__title{
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: 1.35rem;
  line-height: 1.1;
}

.fixed-cta__sub{
  margin-top: 6px;
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: .95rem;
  opacity: .92;
}

/* 살짝 “버튼이 살아있는” 느낌만 */
.fixed-cta__btn:hover{
  transform: translateY(-2px);
}
.fixed-cta__btn:active{
  transform: translateY(0);
}

/* 모바일 최적화 */
@media (max-width: 720px){
  :root{ --cta-h: 66px; }
  .fixed-cta__inner{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .fixed-cta__title{font-size: 1.06rem;}
  .fixed-cta__sub{font-size: .88rem;}
}

/* 접근성: 포커스 */
.fixed-cta__btn:focus-visible{
  outline: 3px solid rgba(37,99,235,.65);
  outline-offset: 3px;
}

/* ===============================
   015 PREMIUM DIFFERENTIATION
   - Estimate: premium neon-blue
   - Tel: classy dark-glass
================================ */

.fixed-cta__btn--tel{
  background:
    linear-gradient(145deg,
      rgba(80,85,95,.65),
      rgba(70,74,82,.72)
    );
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

.fixed-cta__btn--estimate{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 22px 86px rgba(0,0,0,.62),
    0 0 120px rgba(37,99,235,.24);

  background:
    radial-gradient(600px 200px at 20% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    radial-gradient(420px 220px at 85% 80%, rgba(37,99,235,.28), rgba(37,99,235,0) 62%),
    linear-gradient(135deg,
      #0f2f8f 0%,      /* 더 어두운 시작 */
      #1e4fd6 30%,     /* 포인트 블루 */
      #2563eb 60%,     /* 중심 블루 */
      #173fbf 100%     /* 마무리 딥 */
    );
}

.fixed-cta__btn--estimate::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.40), rgba(255,255,255,0) 35%, rgba(255,255,255,.20));
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* 프리미엄 라이트 스윕 */
.fixed-cta__btn--estimate::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 52%, transparent 62%);
  transform: translateX(-65%);
  opacity: .0;
  pointer-events:none;
}
.fixed-cta__btn--estimate:hover::after{
  opacity: .9;
  animation: ctaSweep 1.05s ease both;
}
@keyframes ctaSweep{
  from{ transform: translateX(-65%); }
  to{ transform: translateX(65%); }
}

/* 모바일에서도 견적이 한끗 더 돋보이게 */
@media (max-width: 720px){
  .fixed-cta__btn--estimate{
    box-shadow:
      0 18px 70px rgba(0,0,0,.58),
      0 0 90px rgba(37,99,235,.24);
  }
}

/* ===============================
   ESTIMATE PAGE (estimate.html)
================================ */

body.page-estimate{
  padding-bottom: 0; /* 메인 랜딩의 fixed CTA용 패딩 무력화 */
}

.est-hero{
  position: relative;
  min-height: 250px;
  padding: 22px 0 26px;
  overflow: hidden;
  color: #fff;
}

.est-hero__bg{
  position: absolute;
  inset: 0;
  background: url("img/innohai_maintop.jpg") center/cover no-repeat;
  filter: saturate(.9) contrast(1.5);
  transform: scale(1.02);
}

.est-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 260px at 20% 10%, rgba(37,99,235,.20), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.78) 100%);
}

.est-hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}

.est-hero__logo{
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-decoration: none;
}
.est-hero__logo img{
  width: 170px;
  height: auto;
  opacity: .96;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.55));
}

.est-hero__panel{
  border-radius: 24px;
  padding: 16px 16px 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 28px 120px rgba(0,0,0,.55);
}

.est-hero__title{
  margin: 0 0 20px;
  font-size: clamp(1.55rem, 2.5vw, 1.9rem);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.est-guide-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.est-guide-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

.est-guide-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,1), rgba(0,210,255,.85));
  box-shadow:
    0 0 18px rgba(37,99,235,.35);
}


.est-form{
  background: #0b0d12;
  padding: 22px 0 34px;
}

.est-iframe-wrap{
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 26px 120px rgba(0,0,0,.55);
}

@media (max-width: 980px){
  .est-hero__inner{
    grid-template-columns: 1fr;
  }
  .est-hero__meta{
    justify-content: flex-start;
  }
  .est-hero__logo img{
    width: 160px;
  }
}

/* ===============================
   ESTIMATE PAGE: NO SCROLL ANIM, CLEAN SECTION 002
================================ */

/* 섹션2: 흰 배경, 장식 없음 */
.est-form{
  background: #fff;
  padding: 0 0 40px;
}

/* iframe: 페이지 일부처럼 */
.est-iframe{
  display: block;
  width: 100%;
  border: 0;
}

/* 섹션2만 풀폭으로 (iframe 내부가 데스크톱 레이아웃으로 보이게) */
.est-full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.est-form{
  background:#fff;
  padding: 0 0 40px;
}

.est-iframe{
  display:block;
  width:100%;
  border:0;
}

.est-iframe-mask{
  position: relative;
  overflow: hidden;
}

.est-iframe{
  display:block;
  width:100%;
  border:0;
  margin-top: -70px;
}

/* estimate 페이지에서는 hl-fill을 항상 활성화 */
.page-estimate .hl-fill{
  background-size: 100% 100% !important;
  color: #fff;
}



/* ===============================
   016 MEGA RESTORE (AD HERO)
   - center aligned
   - louder typography
   - image standalone at bottom
================================ */

.mega-restore{
  position: relative;
  overflow: hidden;
  padding: 86px 0 74px;
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(37,99,235,.22), rgba(0,0,0,0) 62%),
    radial-gradient(900px 420px at 15% 70%, rgba(0,210,255,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #07090d 0%, #0a0d14 55%, #07090d 100%);
}

.mega-restore::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.06));
  opacity: .35;
  pointer-events:none;
}

.mega-restore__inner{
  text-align: center;
  max-width: 980px;
}

.mega-restore__eyebrow{
  margin: 0 0 12px;
  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}

.mega-restore__title{
  margin: 0 0 56px;
  font-weight: 980;
  letter-spacing: -0.06em;
  line-height: 1.05;
  font-size: clamp(3.05rem, 5.6vw, 4.25rem);
  text-shadow:
    0 26px 80px rgba(0,0,0,.55);
}

.mega-restore__lead{
  margin: 0 0 34px;
  color: rgba(255,255,255,.90);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.45;
  font-size: clamp(2.2rem, 3.6vw, 2.6em);
}

.mega-restore__desc{
  margin: 0 auto 56px;
  max-width: 780px;
  color: rgba(255,255,255,0.9);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.65;
  font-size: 1.22rem;
}

/* big standalone image frame */
.mega-restore__media{
  margin: 26px auto 0;
  width: min(600px, 100%);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 36px 160px rgba(0,0,0,.62),
    0 0 110px rgba(37,99,235,.14);
  transform: translateZ(0);
}

.mega-restore__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(.98) contrast(1.08);
  transform: scale(1.01);
}

/* responsive */
@media (max-width: 980px){
  .mega-restore{
    padding: 64px 0 56px;
  }
  .mega-restore__desc{
    font-size: 0.98rem;
  }
  .mega-restore__media{
    border-radius: 24px;
  }
}


/* ===============================
   017 SPLIT ORDER (Before → After)
================================ */

.split-award{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background:
    radial-gradient(980px 420px at 20% 10%, rgba(37,99,235,.18), rgba(0,0,0,0) 60%),
    radial-gradient(900px 380px at 85% 85%, rgba(0,210,255,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #07090d 0%, #0a0d14 55%, #07090d 100%);
}

.split-award__inner{
  text-align: center;
  max-width: 980px;
}

.split-award__head{
  margin-bottom: 38px;
}

.split-award__sub{
  margin: 0 0 20px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: 1.38rem;
}

.split-award__title{
  margin: 0 0 40px;
  font-size: clamp(2.75rem, 4.4vw, 3.35rem);
  font-weight: 980;
  letter-spacing: -0.06em;
  line-height: 1.1;
  text-shadow: 0 28px 90px rgba(0,0,0,.55);
}

.split-award__grid{
  margin-top: 38px;
  margin-bottom: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.split-card{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 24px 100px rgba(0,0,0,.58);
  transform: translateZ(0);
}

.split-card__cap{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.split-card__main{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.35;
  font-size: 1.38rem;
}

.split-card__em{
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(37,99,235,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* BEFORE: calmer */
.split-card--before{
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

/* AFTER: premium highlight */
.split-card--after{
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(720px 240px at 20% 10%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    radial-gradient(560px 260px at 90% 90%, rgba(37,99,235,.25), rgba(37,99,235,0) 65%),
    linear-gradient(135deg, rgba(37,99,235,.20) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.06) 100%);
  box-shadow:
    0 28px 120px rgba(0,0,0,.62),
    0 0 110px rgba(37,99,235,.14);
}

/* arrow divider */
.split-award__arrow{
  position: relative;
  width: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
}

.split-award__arrow span{
  width: 56px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(37,99,235,.75), rgba(255,255,255,.10));
  box-shadow: 0 0 28px rgba(37,99,235,.20);
}

.split-award__desc{
  margin: 18px 0 0;
  color: rgba(255,255,255,1);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.65;
  font-size: 1.38rem;
}

/* responsive */
@media (max-width: 980px){
  .split-award{
    padding: 56px 0;
  }
  .split-award__grid{
    grid-template-columns: 1fr;
  }
  .split-award__arrow{
    width: 100%;
    height: 30px;
    grid-auto-flow: column;
    justify-content: center;
  }
  .split-award__arrow span{
    width: 44px;
  }
}

/* ===============================
   018 kplace (A)
   - pure black background
   - left copy / right map card
   - seo chips (premium, non-spam)
================================ */

.kplace{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: #000; /* 완전 블랙 */
}

.kplace__inner{
  max-width: 1200px;
}

/* TOP LAYOUT */
.kplace__top{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;
}

.kplace__sub{
  margin: 0 0 10px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 3.0vw, 2.05rem);
}

.kplace__title{
  margin: 0;
  font-size: clamp(2.65rem, 4.2vw, 3.35rem);
  font-weight: 980;
  letter-spacing: -0.06em;
  line-height: 1.32;
  color: rgba(255,255,255,.96);
  text-shadow: 0 26px 90px rgba(0,0,0,.65);
}

.kplace__title-line{
  display: inline;
}

/* MAP CARD */
.kplace__mapwrap{
  display: flex;
  justify-content: flex-end;
}

.kplace__map{
  width: 320px; /* 이미지 가로세로 유동적이어도 프레임은 안정 */
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 28px 130px rgba(0,0,0,.68),
    0 0 90px rgba(37,99,235,.10);
  transform: translateZ(0);
}

.kplace__map img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 정사각형에 가깝게 자연 크롭 */
  filter: saturate(.98) contrast(1.06);
  transform: scale(1.02);
}

/* SEO CHIPS */
.kplace__seo{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.kplace__seo-title{
  margin: 0 0 12px;
  color: rgba(255,255,255,.82);
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: 1.66rem;
}

.kplace__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kplace .chip{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: rgba(255,255,255,.84);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow:
    0 16px 60px rgba(0,0,0,.40);
}

.kplace .chip:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 80px rgba(0,0,0,.55),
    0 0 70px rgba(37,99,235,.10);
}

/* responsive */
@media (max-width: 980px){
  .kplace{
    padding: 56px 0;
  }
  .kplace__top{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .kplace__mapwrap{
    justify-content: flex-start;
  }
  .kplace__map{
    width: 300px;
  }
}


/* ===============================
   019 SEO kplace (Categorized Grid)
   - different from sec-018 chips
================================ */

.seo-kplace{
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background:
    radial-gradient(1200px 520px at 10% 15%, rgba(37,99,235,.14), rgba(0,0,0,0) 60%),
    radial-gradient(900px 420px at 90% 85%, rgba(0,210,255,.08), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #000 0%, #05060a 60%, #000 100%);
}

.seo-kplace__inner{
  max-width: 1200px;
}

.seo-kplace__head{
  margin-bottom: 16px;
}

.seo-kplace__title{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-weight: 980;
  letter-spacing: -0.06em;
  line-height: 1.22;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  text-shadow: 0 24px 80px rgba(0,0,0,.65);
}

/* grid of category cards */
.seo-kplace__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.seo-kplace__group{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
  padding: 16px 16px 14px;
  overflow: hidden;
}

.seo-kplace__group--full{
  grid-column: 1 / -1;
}

.seo-kplace__cap{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 200px at 20% 10%, rgba(37,99,235,.16), rgba(0,0,0,0) 55%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: rgba(255,255,255,.84);
  font-weight: 950;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.seo-kplace__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* denser area for many keywords */
.seo-kplace__chips--dense{
  gap: 7px;
}

.seo-chip{
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(0,0,0,.20), rgba(255,255,255,.04));
  color: rgba(255,255,255,.80);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: 0 14px 55px rgba(0,0,0,.35);
  transform: translateZ(0);
  font-size: 0.8rem;
}

.seo-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 20px 70px rgba(0,0,0,.55),
    0 0 70px rgba(37,99,235,.10);
}

/* responsive */
@media (max-width: 980px){
  .seo-kplace{
    padding: 56px 0;
  }
  .seo-kplace__grid{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   020 (REVAMP) INFOGRAPHIC SECTION
================================ */

.speed-split2{
  position: relative;
  overflow: hidden;
  padding: 86px 0;
  background:
    radial-gradient(1100px 520px at 12% 10%, rgba(37,99,235,.18), rgba(0,0,0,0) 60%),
    radial-gradient(920px 420px at 90% 85%, rgba(0,210,255,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #000 0%, #070910 55%, #000 100%);
}

.speed-split2__inner{ max-width: 1200px; }

.speed-split2__top{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: stretch;
}

/* ===== LEFT: speed hero ===== */
.speed-hero{
  position: relative;
  border-radius: 26px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 320px at 15% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 34px 140px rgba(0,0,0,.68),
    0 0 110px rgba(37,99,235,.10);
  overflow: hidden;
  transform: translateZ(0);
}

.speed-hero__bg{
  position: absolute;
  right: 18px;
  top: -6px;
  font-weight: 1000;
  letter-spacing: -0.08em;
  font-size: clamp(4.2rem, 8vw, 6.6rem);
  line-height: 1;
  color: rgba(37,99,235,.22);
  text-shadow: 0 40px 120px rgba(37,99,235,.18);
  pointer-events: none;
}

.speed-hero__title{
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 1000;
  letter-spacing: -0.06em;
  line-height: 1.1;
  color: rgba(255,255,255,.96);
}

.speed-hero__hl{
  background: linear-gradient(90deg, #ffffff 0%, #2563eb 40%, #00d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.speed-hero__sub{
  margin: 0 0 18px;
  max-width: 860px;
  color: rgba(255,255,255,.82);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.6;
}

/* ===== bars infographic ===== */
.speed-bars{
  margin-top: 10px;
  display: grid;
  gap: 12px;
}

.speed-bars__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
}

.speed-bars__label{
  text-align: left;
  color: rgba(255,255,255,.75);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.speed-bars__bar{
  position: relative;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: 0 22px 90px rgba(0,0,0,.55);
}

.speed-bars__bar .speed-bars__fill{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 18px;
  transform: translateZ(0);
}

.speed-bars__bar--avg .speed-bars__fill{
  width: 92%;
  background:
    radial-gradient(520px 140px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}

.speed-bars__bar--muchon .speed-bars__fill{
  width: 55%;
  background:
    radial-gradient(520px 140px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(37,99,235,.70), rgba(0,210,255,.40));
  box-shadow: 0 0 80px rgba(37,99,235,.22);
}

.speed-bars__value{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
  text-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* ===== RIGHT: gauge card ===== */
.split-gauge{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px 18px;
  background:
    radial-gradient(820px 300px at 20% 10%, rgba(37,99,235,.18), rgba(0,0,0,0) 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 140px rgba(0,0,0,.68);
  overflow: hidden;
  transform: translateZ(0);
}

.split-gauge__ring{
  width: 124px;
  height: 124px;
  border-radius: 50%;
  margin: 2px auto 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(58px 58px at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.0)),
    conic-gradient(from 210deg,
      rgba(37,99,235,.95) 0%,
      rgba(0,210,255,.55) 38%,
      rgba(255,255,255,.10) 38%,
      rgba(255,255,255,.10) 100%);
  box-shadow:
    0 18px 80px rgba(0,0,0,.55),
    0 0 90px rgba(37,99,235,.16);
}

.split-gauge__num{
  font-weight: 1000;
  letter-spacing: -0.06em;
  font-size: 2rem;
  color: rgba(255,255,255,.95);
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.split-gauge__title{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 1000;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,.95);
  font-size: 1.95rem;
}

.split-gauge__desc{
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.84);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.65;
}

.split-gauge__em{
  display: inline-block;
  margin-left: 3px;
  background: linear-gradient(90deg, #ffffff 0%, #00d2ff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 1000;
}

/* ===== benefits 2x2 ===== */
.benefit-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.benefit-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 220px at 15% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 16px 16px 15px;
  box-shadow: 0 26px 110px rgba(0,0,0,.62);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.benefit-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: linear-gradient(115deg, transparent 45%, rgba(37,99,235,.16) 55%, transparent 65%);
  transform: translateX(-70%);
  opacity: .0;
  pointer-events:none;
}

.benefit-card:hover::after{
  opacity: .9;
  animation: benefitSweep 1.15s ease both;
}

@keyframes benefitSweep{
  from{ transform: translateX(-70%); }
  to{ transform: translateX(70%); }
}

.benefit-card__cap{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: rgba(255,255,255,.80);
  font-weight: 950;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.benefit-card__txt{
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: 1.35;
  font-size: 1.12rem;
}

/* responsive */
@media (max-width: 980px){
  .speed-split2{
    padding: 62px 0;
  }
  .speed-split2__top{
    grid-template-columns: 1fr;
  }
  .speed-bars__row{
    grid-template-columns: 94px 1fr;
  }
  .benefit-grid{
    grid-template-columns: 1fr;
  }
}