/* ============================================================
   웹구축센터 — Chainshift-style design system (cs.css)
   라이트 베이스 + 시안/인디고 그라데이션, Geist + Pretendard
   ============================================================ */
:root{
  --ink:#17150f; --ink-2:#221f17; --muted:#6e6a60; --faint:#9a958a;
  --line:rgba(23,21,15,.12); --line-2:rgba(23,21,15,.06);
  --bg:#ffffff; --bg-soft:#f6f2ea; --bg-tint:#fbece4;
  --dark:#17150f; --dark-2:#221f17;
  --accent:#e83817; --accent-2:#f25b35; --cyan:#f6a13a; --violet:#f2792f;
  --grad:linear-gradient(120deg,#ff8a3d 0%,#f25b35 46%,#e83817 100%);
  --grad-soft:linear-gradient(135deg,#fdf3ec 0%,#fbeae1 55%,#fff4ef 100%);
  --maxw:1200px; --ease:cubic-bezier(.16,1,.3,1);
  --r:18px; --shadow:0 30px 80px -40px rgba(60,30,18,.42);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Pretendard","Geist",system-ui,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-style:normal}
::selection{background:var(--accent);color:#fff}

/* progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:var(--grad)}

/* mono eyebrow / labels */
.eyebrow{font-family:"Fragment Mono","Geist",monospace;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;
  padding:13px 22px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;cursor:pointer}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(60,30,18,.45)}
.btn--solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--grad{background:var(--grad);color:#fff;border:0;position:relative}
.btn--grad:hover{box-shadow:0 18px 40px -16px rgba(232,56,23,.55)}
.btn--ghost{background:transparent}

/* ---------------- Header ---------------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px clamp(18px,4vw,44px);transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
.header.is-stuck{background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.brand__logo{height:30px;width:auto}
.brand__sub{font-size:.82rem;font-weight:600;color:var(--muted);padding-left:11px;border-left:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:.92rem;font-weight:500;color:var(--ink);opacity:.82;transition:opacity .2s}
.nav a:hover{opacity:1}
.nav__div{width:1px;height:16px;background:var(--line);margin:0 2px}
.nav__center{font-size:.84rem!important;color:var(--accent)!important;opacity:1!important;font-weight:600!important;display:inline-flex;align-items:center;gap:3px}
.nav__center i{font-style:normal;font-size:.7em;opacity:.6}
.header__cta{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;
  padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.header__cta span{transition:transform .3s var(--ease)}
.header__cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.header__cta:hover span{transform:translateX(3px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:clamp(130px,18vh,180px) clamp(18px,4vw,44px) clamp(50px,8vh,90px);
  background:var(--grad-soft);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at 30% 20%,#000,transparent 75%);
  mask-image:radial-gradient(circle at 30% 20%,#000,transparent 75%)}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__eyebrow{margin-bottom:22px}
.hero__title{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;color:var(--ink)}
.hero__title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__sub{margin-top:24px;max-width:540px;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted);line-height:1.75;word-break:keep-all}
.hero__btns{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero__stats{margin-top:42px;display:flex;gap:34px;flex-wrap:wrap}
.hero__stat strong{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.hero__stat span{font-size:.84rem;color:var(--muted)}
.hero__art{position:relative;display:grid;place-items:center;min-height:340px}
.hero__arrow{width:clamp(220px,30vw,360px);filter:drop-shadow(0 30px 50px rgba(232,56,23,.35));
  animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(-3deg)}}
.hero__glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(242,121,47,.55),rgba(232,56,23,.18) 45%,transparent 70%);filter:blur(30px)}

/* hero dashboard mockup strip */
.hero__mock{position:relative;z-index:2;max-width:var(--maxw);margin:clamp(40px,6vh,70px) auto 0}

/* browser frame */
.bframe{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.bframe__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.bframe__bar i{width:10px;height:10px;border-radius:50%;background:#d6d6dd;display:block}
.bframe__bar i:nth-child(1){background:#ff6058}.bframe__bar i:nth-child(2){background:#ffbd2e}.bframe__bar i:nth-child(3){background:#28ca42}
.bframe__url{margin-left:10px;flex:1;height:22px;border-radius:6px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;padding:0 10px;font-size:.72rem;color:var(--faint);font-family:"Fragment Mono",monospace}
.bframe__body{padding:0}

/* ---------------- Hero (라운드 미디어 카드 · 키네틱) ---------------- */
.hero2{background:var(--bg);padding:92px clamp(10px,1.4vw,22px) clamp(26px,4vh,48px)}
.hero2__card{position:relative;max-width:1760px;margin:0 auto;border-radius:30px;overflow:hidden;background:#14110d;
  min-height:clamp(460px,80vh,800px);display:flex;align-items:center;justify-content:center;isolation:isolate;
  box-shadow:0 50px 100px -55px rgba(60,30,18,.55)}
.hero2__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;
  animation:heroKen 26s ease-in-out infinite alternate}
@keyframes heroKen{0%{transform:scale(1.06) translate3d(-1.5%,-1%,0)}100%{transform:scale(1.18) translate3d(1.5%,1.5%,0)}}
.hero2__overlay{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 92% at 50% 6%,rgba(12,10,8,.04) 0%,rgba(12,10,8,.4) 56%,rgba(10,8,6,.8) 100%),
  linear-gradient(180deg,rgba(12,10,8,.08) 0%,rgba(12,10,8,.22) 60%,rgba(10,8,6,.58) 100%)}
.hero2__glow{position:absolute;z-index:1;width:48%;aspect-ratio:1;border-radius:50%;filter:blur(64px);opacity:.5;
  pointer-events:none;mix-blend-mode:screen;will-change:transform}
.hero2__glow--a{left:-9%;top:-14%;background:radial-gradient(circle,rgba(255,142,61,.95),transparent 64%);animation:heroGlowA 15s ease-in-out infinite alternate}
.hero2__glow--b{right:-11%;bottom:-18%;background:radial-gradient(circle,rgba(232,56,23,.9),transparent 64%);animation:heroGlowB 19s ease-in-out infinite alternate}
@keyframes heroGlowA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(20%,14%,0) scale(1.28)}}
@keyframes heroGlowB{0%{transform:translate3d(0,0,0) scale(1.12)}100%{transform:translate3d(-16%,-12%,0) scale(.88)}}
.holo3d{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;display:block}
/* ── eimok 풍선 히어로 오버라이드 ── */
.hero2 .hero2__media,.hero2 .hero2__glow,.hero2 .hero2__grid,.hero2 .hero2__overlay{display:none}
.hero2 .hero2__card{background:radial-gradient(120% 92% at 50% 30%,#1c2a4d 0%,#0c1018 56%,#06080f 100%)}
.hero2__copy--eimok .hero2__eg--plain{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;font-size:.92rem;letter-spacing:.34em;opacity:.92;font-weight:600;color:#fff}
.hero2__copy--eimok{max-width:1100px}
.hero2__copy--eimok .hero2__t--eng{font-family:"Geist","Poppins",sans-serif;font-size:clamp(3.4rem,11vw,9rem);line-height:.9;letter-spacing:-.035em;font-weight:800;margin-top:22px;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.5);opacity:0;animation:heroRise 1s cubic-bezier(.2,.7,.2,1) .28s both}
.hero2__copy--eimok .hero2__d{margin-top:26px;font-size:clamp(1rem,1.5vw,1.25rem);color:rgba(255,255,255,.82)}
.hero2__grid{position:absolute;inset:0;z-index:1;opacity:.14;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(120% 78% at 50% 0,#000,transparent 72%);mask-image:radial-gradient(120% 78% at 50% 0,#000,transparent 72%)}

.hero2__copy{position:relative;z-index:3;text-align:center;color:#fff;padding:30px clamp(20px,4vw,40px);max-width:960px}
.hero2__eg{display:inline-flex;align-items:center;gap:.6em;font-family:"Fragment Mono",monospace;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  padding:.5em 1.05em;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;animation:heroRise .9s cubic-bezier(.2,.7,.2,1) .1s both}
.hero2__eg i{width:7px;height:7px;border-radius:50%;background:#ff7a45;animation:heroPing 2.2s ease-out infinite}
@keyframes heroPing{0%{box-shadow:0 0 0 0 rgba(255,122,69,.55)}70%,100%{box-shadow:0 0 0 9px rgba(255,122,69,0)}}
.hero2__t{margin-top:22px;font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;color:#fff;text-shadow:0 6px 36px rgba(0,0,0,.45)}
.hero2__t .ln{display:block;opacity:0;animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both}
.hero2__t .ln:nth-child(1){animation-delay:.24s}
.hero2__t .ln:nth-child(2){animation-delay:.4s}
.rot{position:relative;display:inline-grid;vertical-align:bottom;overflow:hidden;text-align:left}
.rot__w{grid-area:1/1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:translateY(112%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.rot__w.is-on{transform:translateY(0);opacity:1}
.rot__w.is-out{transform:translateY(-112%);opacity:0;transition:transform .5s cubic-bezier(.6,0,.4,1),opacity .5s}
.hero2__d{margin:22px auto 0;max-width:620px;font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(255,255,255,.86);line-height:1.65;text-shadow:0 2px 16px rgba(0,0,0,.5);opacity:0;animation:heroRise 1s cubic-bezier(.2,.7,.2,1) .56s both}
.hero2__btns{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:heroRise 1s cubic-bezier(.2,.7,.2,1) .7s both}
.hero2__ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero2__ghost:hover{background:rgba(255,255,255,.2)}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.hero2__chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.hchip{position:absolute;display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:700;color:#fff;white-space:nowrap;
  padding:.6em 1em;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);opacity:0}
.hchip b{color:#ffb27d}.hchip i{color:#ffd24d;font-style:normal}
.hchip--1{left:5.5%;top:21%;animation:heroRise .9s ease .9s both,heroFloat 7s ease-in-out 1.9s infinite}
.hchip--2{right:6%;top:31%;animation:heroRise .9s ease 1.05s both,heroFloat 8s ease-in-out 2.1s infinite reverse}
.hchip--3{left:9%;bottom:17%;animation:heroRise .9s ease 1.2s both,heroFloat 9s ease-in-out 2.3s infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero2__scroll{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);width:26px;height:42px;
  border:2px solid rgba(255,255,255,.5);border-radius:14px;display:block;opacity:0;animation:heroRise 1s ease 1.3s both}
.hero2__scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:heroScroll 1.8s ease-in-out infinite}
@keyframes heroScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(15px)}}

@media(max-width:860px){.hero2__chips{display:none}}
@media(max-width:600px){.hero2{padding-top:82px}.hero2__card{min-height:72vh;border-radius:22px}.hero2__scroll{display:none}}
@media(prefers-reduced-motion:reduce){
  .hero2__media,.hero2__glow,.hero2__eg i,.hero2__scroll span,.hchip{animation:none!important}
  .hero2__eg,.hero2__t .ln,.hero2__d,.hero2__btns,.hchip,.hero2__scroll{opacity:1!important;transform:none!important}
}

/* ---------------- Services showcase (화려·큼지막·모션) ---------------- */
/* ── Lenis 스무스 스크롤 (소이정 감성) ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}


/* eyebrow 라벨 전부 제거 (소이정 감성 — 군더더기 라벨 삭제) */
.eyebrow{display:none!important}


/* ── 거대 키네틱 타이포 띠 (소이정 감성) ── */
.ktype{padding:clamp(46px,8vh,104px) 0;overflow:hidden;background:#fff;border-bottom:1px solid var(--line-2)}
.ktype__line{overflow:hidden;white-space:nowrap;display:flex}
.ktype__line+.ktype__line{margin-top:.06em}
.ktype__track{display:inline-flex;align-items:center;gap:.42em;flex:none;padding-right:.42em;
  font-family:"Geist","Pretendard",sans-serif;font-weight:800;font-size:clamp(3.2rem,9.5vw,8.5rem);line-height:1.02;letter-spacing:-.035em;will-change:transform}
.ktype__track span{color:var(--ink)}
.ktype__track .stroke{color:transparent;-webkit-text-stroke:1.7px var(--accent);text-stroke:1.7px var(--accent)}
.ktype__track b{color:var(--accent);font-size:.5em;transform:translateY(-.12em)}
.ktype__track--l{animation:ktypeL 30s linear infinite}
.ktype__track--r{animation:ktypeR 34s linear infinite}
@keyframes ktypeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ktypeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.ktype__track{animation:none}}

.show{position:relative;max-width:1340px;margin:0 auto;padding:clamp(80px,12vh,150px) clamp(20px,4vw,44px);overflow:hidden}
/* GSAP 제어 시 CSS .in 등장 애니메이션 비활성(중복 방지) */
.show.gsap-on .show__item.in .show__text,
.show.gsap-on .show__item.rev.in .show__text,
.show.gsap-on .show__item.in .show__visual,
.show.gsap-on .show__item.rev.in .show__visual,
.show.gsap-on .show__item.in .show__big{animation:none!important}
.show.gsap-on .show__visual{will-change:transform,opacity}
/* GSAP가 카드 내부 콘텐츠를 직접 제어 → CSS 키프레임 등장 비활성(중복 방지) */
.show.gsap-on .vweb__hero>*,.show.gsap-on .vweb__card,.show.gsap-on .vserp>*,.show.gsap-on .vserp__rank,.show.gsap-on .vchat>*,.show.gsap-on .vphone__banner,.show.gsap-on .vphone__tile,.show.gsap-on .vphone__nav{animation:none!important}
.vchat__a .w{display:inline-block;will-change:transform,filter,opacity}
.show__head{text-align:center;max-width:1040px;margin:0 auto clamp(40px,7vh,90px)}
.show__title{margin-top:18px;font-size:clamp(2.1rem,4.8vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.14;word-break:keep-all}
.show__title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.show__lead{margin-top:18px;font-size:1.06rem;color:var(--muted);line-height:1.8}
.show__item{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(56px,9vh,120px) 0}
.show__item+.show__item{border-top:1px solid var(--line-2)}
.show__item.rev .show__text{order:2}
.show__big{position:absolute;top:-.18em;left:-.06em;z-index:0;font-family:"Geist",sans-serif;font-size:clamp(7rem,17vw,17rem);font-weight:800;line-height:.8;letter-spacing:-.05em;color:rgba(232,56,23,.09);pointer-events:none;user-select:none;will-change:transform}
.show__item.rev .show__big{left:auto;right:-.06em}
.show__text{position:relative;z-index:2}
.show__tag{display:inline-flex;align-items:center;gap:9px;font-family:"Fragment Mono",monospace;font-size:.8rem;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;font-weight:600}
.show__tag i{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(232,56,23,.18);animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(232,56,23,.18)}50%{box-shadow:0 0 0 7px rgba(232,56,23,.05)}}
.show__t{margin-top:18px;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.16}
.show__d{margin-top:20px;font-size:1.06rem;color:var(--muted);line-height:1.85;max-width:480px}
.show__list{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.show__list li{display:flex;align-items:center;gap:12px;font-size:1.04rem;font-weight:600;color:var(--ink)}
.show__list svg{width:24px;height:24px;flex:none;stroke:#fff;fill:none;stroke-width:3;background:var(--grad);border-radius:50%;padding:5px;box-sizing:border-box}
.show__visual{position:relative;z-index:1;perspective:1300px}
.vcard{position:relative;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 50px 90px -52px rgba(60,30,18,.42);overflow:hidden;transform-style:preserve-3d;transition:transform .25s var(--ease),box-shadow .3s}
.vcard__glow{position:absolute;inset:auto -10% -22% -10%;height:50%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(232,56,23,.16),transparent 72%);filter:blur(52px);opacity:.5}
@keyframes glowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.vcard__top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line-2)}
.vcard__top b{font-size:1.02rem;font-weight:800;margin-right:auto}
.vcard__top .vcard__badge{font-family:"Fragment Mono",monospace;font-size:.7rem;color:var(--accent);padding:4px 11px;border-radius:8px;background:rgba(232,56,23,.08)}
.vcard__body{padding:28px}
.vbig{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vsub{font-size:.86rem;color:var(--muted);margin-top:6px}
.vchart{width:100%;height:clamp(150px,18vw,200px);display:block;margin-top:14px}
.vchart polyline{stroke-dasharray:760}
.show__item.in .vchart polyline{animation:vdraw 1.7s var(--ease) .3s both}
@keyframes vdraw{from{stroke-dashoffset:760}to{stroke-dashoffset:0}}
.show__item.in .vchart .vfill{animation:vfade 1s ease .8s both}
@keyframes vfade{from{opacity:0}to{opacity:1}}
.vpills{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.vpill{font-family:"Fragment Mono",monospace;font-size:.74rem;color:var(--muted);padding:6px 11px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:7px}
.vpill i{width:9px;height:9px;border-radius:50%;display:block}
.vbars{display:flex;flex-direction:column;gap:16px}
.vrow{display:flex;align-items:center;gap:14px}
.vrow b{width:96px;font-size:.92rem;font-weight:700;flex:none}
.vtrack{flex:1;height:12px;border-radius:8px;background:var(--bg-soft);overflow:hidden}
.vbar{height:100%;width:var(--w);border-radius:8px;background:var(--grad)}
.show__item.in .vbar{animation:vgrow 1.3s var(--ease) var(--d,0s) both}
@keyframes vgrow{from{width:0}to{width:var(--w)}}
.vrow em{font-style:normal;font-family:"Fragment Mono",monospace;font-size:.8rem;font-weight:700;color:var(--accent);width:42px;text-align:right}
.vweb{display:flex;flex-direction:column;gap:14px}
.show__item.in .vweb>*{animation:vrise .6s var(--ease) both}
.show__item.in .vweb>*:nth-child(1){animation-delay:.25s}.show__item.in .vweb>*:nth-child(2){animation-delay:.42s}
@keyframes vrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 실제 웹사이트 프리뷰 (랜딩 히어로 + 피처카드) */
.vweb__hero{position:relative;padding:22px;border-radius:14px;border:1px solid var(--line-2);overflow:hidden;
  background:linear-gradient(135deg,rgba(255,142,61,.16),rgba(232,56,23,.07));display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.vweb__hero::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,56,23,.16),transparent 70%)}
.vweb__htag{font-family:"Fragment Mono",monospace;font-size:.66rem;letter-spacing:.2em;color:var(--accent);font-weight:700}
.vweb__htitle{font-size:clamp(1.02rem,1.5vw,1.34rem);font-weight:800;letter-spacing:-.025em;line-height:1.32;color:var(--ink)}
.vweb__btn{align-self:flex-start;margin-top:3px;display:inline-flex;align-items:center;gap:6px;padding:9px 17px;border-radius:999px;background:var(--grad);color:#fff;font-size:.82rem;font-weight:700;box-shadow:0 10px 20px -8px rgba(232,56,23,.5)}
.vweb__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vweb__card{display:flex;flex-direction:column;gap:8px;padding:15px 14px;border-radius:12px;border:1px solid var(--line-2);background:#fff}
.vweb__card i{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(232,56,23,.5)}
.vweb__card i svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vcard__dots{display:inline-flex;align-items:center;gap:5px;margin-right:10px}
.vcard__dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.vcard__dots i:first-child{background:#ff6159}.vcard__dots i:nth-child(2){background:#ffbd2e}.vcard__dots i:nth-child(3){background:#28c840}
.vweb__card b{font-size:.86rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.vweb__card u{font-size:.72rem;color:var(--muted);text-decoration:none;line-height:1.3}

/* 01 SEO — 실제 검색결과(SERP) 미리보기 */
.vserp{display:flex;flex-direction:column;gap:10px}
.show__item.in .vserp>*{animation:vrise .6s var(--ease) both}
.show__item.in .vserp>*:nth-child(1){animation-delay:.2s}.show__item.in .vserp>*:nth-child(2){animation-delay:.34s}.show__item.in .vserp>*:nth-child(3){animation-delay:.48s}.show__item.in .vserp>*:nth-child(4){animation-delay:.62s}
.vserp__search{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-soft)}
.vserp__search svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.vserp__search span{font-size:.92rem;font-weight:600;color:var(--ink)}
.vserp__hit{display:flex;align-items:center;gap:13px;padding:10px 6px}
.vserp__hit+.vserp__hit{border-top:1px solid var(--line-2)}
.vserp__hit--top{background:rgba(232,56,23,.06);border:1px solid rgba(232,56,23,.18);border-radius:13px;padding:13px 15px}
.vserp__rank{flex:none;width:27px;height:27px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:.82rem;display:grid;place-items:center;box-shadow:0 7px 15px -6px rgba(232,56,23,.55)}
.vserp__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.vserp__info b{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vserp__hit--top .vserp__info b{color:var(--accent)}
.vserp__hit:not(.vserp__hit--top) .vserp__info b{color:rgba(23,21,15,.5);font-weight:600}
.vserp__info em{font-style:normal;font-size:.76rem;color:var(--muted);font-family:"Fragment Mono",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 02 AEO — 실제 AI 답변 미리보기 */
.vchat{display:flex;flex-direction:column;gap:14px;padding:4px 2px}
.show__item.in .vchat>*{animation:vrise .6s var(--ease) both}
.show__item.in .vchat>*:nth-child(1){animation-delay:.24s}.show__item.in .vchat>*:nth-child(2){animation-delay:.42s}
.vchat__q{align-self:flex-end;max-width:78%;padding:12px 18px;border-radius:18px 18px 5px 18px;background:var(--grad);box-shadow:0 12px 24px -12px rgba(232,56,23,.55)}
.vchat__q span{display:block;font-size:.9rem;font-weight:600;color:#fff}
.vchat__a{align-self:flex-start;width:94%;padding:18px;border-radius:18px 18px 18px 5px;border:1px solid var(--line-2);background:var(--bg-soft);display:flex;flex-direction:column;gap:14px}
.vchat__a p{font-size:.95rem;line-height:1.65;color:var(--ink);word-break:keep-all}
.vchat__a p b{color:var(--accent);font-weight:800}
.vchat__cite{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid rgba(232,56,23,.3);font-family:"Fragment Mono",monospace;font-size:.74rem;font-weight:600;color:var(--accent)}
.vchat__cite i{width:13px;height:13px;border-radius:4px;background:var(--grad);flex:none}
.vphone{width:clamp(190px,22vw,230px);margin:0 auto;border-radius:34px;border:9px solid #15130f;background:#15130f;box-shadow:0 40px 80px -40px rgba(60,30,18,.5)}
.vphone__scr{border-radius:26px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
/* 상태바 */
.vphone__status{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;background:var(--grad);color:#fff;font-size:.6rem;font-weight:700}
.vphone__ind{display:inline-flex;align-items:center;gap:3px}
.vphone__ind i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.9)}
.vphone__ind b{width:16px;height:8px;border-radius:2px;border:1px solid rgba(255,255,255,.85);position:relative}
.vphone__ind b::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:9px;background:#fff;border-radius:1px}
/* 헤더 */
.vphone__nav{padding:8px 14px 11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:space-between}
.vphone__brand{display:flex;align-items:center;gap:9px}
.vphone__logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}
.vphone__name b{font-size:.95rem;font-weight:800;line-height:1.12}
.vphone__name span{display:block;font-size:.65rem;opacity:.85}
.vphone__bell{position:relative;display:grid;place-items:center}
.vphone__bell svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vphone__bell u{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:#ffd84d;border:1.5px solid #fff}
.vphone__cells{padding:14px;display:grid;gap:10px}
.vphone__cells span{height:46px;border-radius:11px;background:var(--bg-soft)}
.vphone__cells span.lg{height:90px;background:linear-gradient(135deg,rgba(255,142,61,.2),rgba(232,56,23,.1));border:1px solid var(--line-2)}
/* 앱 홈 화면 (혜택 배너 + 메뉴 타일) */
.vphone__app{padding:11px;display:flex;flex-direction:column;gap:9px;flex:1}
.vphone__banner{padding:9px 11px;border-radius:13px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(255,142,61,.22),rgba(232,56,23,.12));display:flex;align-items:center;gap:10px}
.vphone__banner-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--grad);box-shadow:0 6px 14px -6px rgba(232,56,23,.6)}
.vphone__banner-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vphone__banner-txt{flex:1;display:flex;flex-direction:column;gap:2px}
.vphone__banner b{font-size:.8rem;font-weight:800;color:var(--ink)}
.vphone__banner u{font-size:.66rem;color:var(--muted);text-decoration:none}
.vphone__banner-btn{flex:none;font-size:.64rem;font-weight:800;color:#fff;background:var(--grad);padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px -7px rgba(232,56,23,.7)}
.vphone__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vphone__tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:13px;border:1px solid var(--line-2);background:#fff;box-shadow:0 8px 18px -15px rgba(60,30,18,.45)}
.vphone__tile i{width:28px;height:28px;border-radius:8px;background:var(--grad);display:grid;place-items:center;box-shadow:0 5px 12px -5px rgba(232,56,23,.5)}
.vphone__tile i svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vphone__tile b{font-size:.8rem;font-weight:800;color:var(--ink)}
.vphone__tile em{font-size:.62rem;font-weight:600;font-style:normal;color:var(--muted);margin-top:-3px}
/* 하단 탭바 */
.vphone__tabbar{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:7px 0 9px;border-top:1px solid var(--line-2);background:#fff}
.vphone__tabbar span{display:grid;place-items:center}
.vphone__tabbar svg{width:20px;height:20px;fill:none;stroke:#c4bdb2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vphone__tabbar .is-on svg{stroke:var(--accent,#e83817)}
.show__item.in .vphone__cells span{animation:vpop .5s var(--ease) both}
.show__item.in .vphone__cells span:nth-child(1){animation-delay:.3s}.show__item.in .vphone__cells span:nth-child(2){animation-delay:.42s}.show__item.in .vphone__cells span:nth-child(3){animation-delay:.54s}.show__item.in .vphone__cells span:nth-child(4){animation-delay:.66s}
@keyframes vpop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.show__item.in .show__text{animation:rinL .9s var(--ease) both}
.show__item.rev.in .show__text{animation-name:rinR}
.show__item.in .show__visual{animation:rinR .9s var(--ease) .12s both}
.show__item.rev.in .show__visual{animation-name:rinL}
.show__item.in .show__big{animation:rinFade 1s var(--ease) both}
@keyframes rinL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes rinR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes rinFade{from{opacity:0}to{opacity:1}}
@media (max-width:880px){.show__item{grid-template-columns:1fr;gap:32px}.show__item.rev .show__text{order:0}.show__big{font-size:clamp(6rem,22vw,9rem)}
  .vphone{width:min(272px,78vw)}
  .vphone__banner b{white-space:nowrap}
  .vphone__banner u{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){.show__item *{animation:none!important}.vchart polyline{stroke-dashoffset:0}}

/* ---------------- Strategy carousel (다크 카드 슬라이드) ---------------- */
.gcar{position:relative;background:radial-gradient(120% 100% at 82% 0%,#1d1722 0%,#0b0a10 60%);color:#fff;overflow:hidden}
.gcar__glow{position:absolute;right:-6%;top:-12%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(232,56,23,.3),transparent 64%);filter:blur(72px);pointer-events:none}
.gcar__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(20px,4vw,44px)}
.gcar__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(34px,5vh,52px)}
.gcar__title{margin-top:16px;font-size:clamp(2.1rem,4.8vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.16;color:#fff;word-break:keep-all}
.gcar__title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gcar__sub{margin-top:20px;color:rgba(255,255,255,.64);line-height:1.7;font-size:1.02rem}
.gcar__nav{display:flex;gap:12px;flex:none}
.gcar__arr{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s}
.gcar__arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gcar__arr:hover{background:var(--accent);border-color:var(--accent)}
.gcar__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.gcar__track::-webkit-scrollbar{display:none}
.gcard{flex:0 0 clamp(260px,30vw,340px);scroll-snap-align:start;min-height:clamp(300px,40vh,400px);display:flex;flex-direction:column;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px 28px;
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.gcard:hover{transform:translateY(-6px);border-color:rgba(232,56,23,.5);background:rgba(255,255,255,.06)}
.gcard__t{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.gcard__d{margin-top:14px;color:rgba(255,255,255,.58);line-height:1.7;font-size:.96rem}
.gcard__ill{width:clamp(110px,42%,150px);height:auto;margin-top:auto;align-self:flex-end}
.gcard--cta{background:linear-gradient(160deg,rgba(232,56,23,.2),rgba(255,255,255,.03));border-color:rgba(232,56,23,.4)}
.gcard__link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:800;color:#fff;background:var(--grad);padding:12px 20px;border-radius:999px;align-self:flex-start;transition:transform .3s,box-shadow .3s}
.gcard__link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.gcard__link:hover{transform:translateX(3px);box-shadow:0 14px 30px -14px rgba(232,56,23,.6)}
/* ── 콜로세움 톤: 전략 섹션 라이트 클린 그리드 ── */
.gcar--clean{background:linear-gradient(180deg,#ffffff 0%,#fff7f3 100%);color:var(--ink)}
.gcar--clean .gcar__glow{opacity:.4}
.gcar--clean .gcar__head{display:block;text-align:center;max-width:840px;margin:0 auto clamp(40px,6vh,72px)}
.gcar--clean .gcar__head .eyebrow{justify-content:center;color:var(--accent)}
.gcar--clean .gcar__head .eyebrow::before,.gcar--clean .gcar__head .eyebrow::after{content:"";width:18px;height:1px;background:var(--accent);display:inline-block}
.gcar--clean .gcar__title{color:var(--ink)}
.gcar--clean .gcar__sub{margin-left:auto;margin-right:auto;max-width:60ch;color:var(--muted)}
.gcar--clean .gcar__nav{display:none}
.gcar--clean .gcar__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.gcar--clean .gchip{padding:.6em 1.15em;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--ink-2)}
.gcar--clean .gcar__track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;overflow:visible}
.gcar--clean .gcard{flex:none;min-height:0;background:#fff;border:1px solid var(--line);border-radius:20px;color:var(--ink);
  box-shadow:0 24px 50px -40px rgba(0,0,0,.45);padding:30px}
.gcar--clean .gcard:hover{transform:translateY(-6px);border-color:rgba(232,56,23,.4);background:#fff;box-shadow:0 30px 60px -34px rgba(232,56,23,.3)}
.gcar--clean .gcard__t{color:var(--ink)}
.gcar--clean .gcard__d{color:var(--muted)}
.gcar--clean .gcard--cta{background:linear-gradient(160deg,#fff3ee,#fff);border-color:rgba(232,56,23,.35)}
.gcar--clean .gcard__link{color:#fff}
@media(max-width:1100px) and (min-width:861px){.gcar--clean .gcar__track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.gcar--clean .gcar__track{grid-template-columns:1fr}}
@media(max-width:760px){.gcar__head{flex-direction:column;align-items:flex-start}.gcar__nav{align-self:flex-end;margin-top:-10px}.gcard{flex-basis:80%}}

/* ---------------- Trust marquee ---------------- */
.trust{padding:clamp(64px,9vh,116px) 0;text-align:center;background:#000}
.trust__title{color:#fff;font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.025em;margin-bottom:clamp(30px,4.5vh,56px)}
.trust .marquee+.marquee{margin-top:clamp(16px,2.4vh,34px)}
.trust__lead{font-size:.92rem;color:rgba(255,255,255,.5);margin-bottom:30px;padding:0 24px}
.trust__lead b{color:#fff;font-weight:700}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:clamp(40px,5vw,86px);width:max-content;animation:slide 44s linear infinite}
.marquee__track--r{animation-direction:reverse;animation-duration:50s}
.marquee:hover .marquee__track{animation-play-state:paused}
.plogo{flex:0 0 auto;height:84px;display:flex;align-items:center;justify-content:center;padding:0 10px}
.plogo img{width:auto;height:70px;max-width:270px;object-fit:contain;
  filter:grayscale(1) invert(1) contrast(1.5) brightness(1.05);opacity:.72;transition:opacity .3s}
.plogo:hover img{opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}

/* ---------------- Section base ---------------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,4vw,44px)}
.sec__head{max-width:720px;margin-bottom:clamp(38px,6vh,64px)}
.sec__head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec__title{margin-top:18px;font-size:clamp(2rem,4.4vw,3.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.16;color:var(--ink);word-break:keep-all}
.sec__title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec__lead{margin-top:18px;font-size:1.04rem;color:var(--muted);line-height:1.8;word-break:keep-all}

/* ---------------- Feature rows ---------------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;
  padding:clamp(40px,7vh,84px) 0;border-top:1px solid var(--line-2)}
.feat:first-of-type{border-top:0}
.feat--rev .feat__text{order:2}
.feat__num{font-family:"Fragment Mono",monospace;font-size:.78rem;letter-spacing:.14em;color:var(--accent)}
.feat__t{margin-top:14px;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.feat__d{margin-top:16px;color:var(--muted);font-size:1.02rem;line-height:1.8;word-break:keep-all}
.feat__list{margin-top:22px;display:flex;flex-direction:column;gap:11px}
.feat__list li{display:flex;align-items:flex-start;gap:10px;font-size:.96rem;color:var(--ink)}
.feat__list svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--accent);fill:none;stroke-width:2.4}
.feat__visual{position:relative}

/* mockup card shell */
.mock{border-radius:var(--r);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.mock__top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.mock__top b{font-size:.9rem;font-weight:700}
.mock__top span{font-family:"Fragment Mono",monospace;font-size:.68rem;color:var(--faint);
  padding:3px 8px;border-radius:6px;background:var(--bg-soft)}
.mock__body{padding:18px}
.mock__glow{position:absolute;inset:auto -10% -20% -10%;height:60%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,56,23,.22),transparent 70%);filter:blur(34px)}

/* line chart mock (SVG drawn) */
.chart{width:100%;height:170px}
.chart-row{display:flex;gap:10px;margin-top:14px}
.chart-pill{font-family:"Fragment Mono",monospace;font-size:.68rem;color:var(--muted);
  padding:4px 9px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:6px}
.chart-pill i{width:8px;height:8px;border-radius:50%;display:block}

/* KPI mini cards */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.kpi b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.kpi .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi span{font-size:.78rem;color:var(--muted);font-family:"Fragment Mono",monospace}

/* data table mock */
.tbl{width:100%;font-size:.82rem;border-collapse:collapse}
.tbl th{text-align:left;color:var(--faint);font-weight:600;font-size:.72rem;padding:8px 10px;
  font-family:"Fragment Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.tbl td{padding:11px 10px;border-top:1px solid var(--line-2);color:var(--ink)}
.tbl .up{color:#0bb07b;font-weight:700;font-family:"Fragment Mono",monospace}
.tbl .bar{height:6px;border-radius:4px;background:var(--grad)}

/* phone frame */
.phone{width:200px;margin:0 auto;border-radius:30px;border:8px solid #15131d;background:#15131d;
  box-shadow:var(--shadow);overflow:hidden}
.phone__scr{border-radius:22px;overflow:hidden;background:#fff;aspect-ratio:9/18.5;display:flex;flex-direction:column}
.phone__nav{padding:14px 14px 10px;background:var(--grad);color:#fff}
.phone__nav b{font-size:.92rem;font-weight:800}
.phone__nav span{font-size:.66rem;opacity:.85;display:block}
.phone__cells{padding:12px;display:grid;gap:9px}
.phone__cell{height:42px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--line-2)}
.phone__cell.lg{height:84px;background:var(--bg-tint)}

/* ---------------- Dark differentiator ---------------- */
.diff{background:radial-gradient(120% 120% at 80% 0%,#2a1a12 0%,var(--dark) 55%);color:#fff;position:relative;overflow:hidden}
.diff::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%)}
.diff .sec{position:relative;z-index:2}
.diff .sec__title{color:#fff}
.diff .sec__lead{color:rgba(255,255,255,.66)}

/* ── 몰입형: 네트워크 주인공 ── */
.diff{padding:clamp(80px,12vh,140px) clamp(20px,4vw,44px)}
.diff__head{position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center}
.diff__head .sec__lead{margin-left:auto;margin-right:auto}
.diff__stage{position:relative;z-index:2;max-width:1180px;margin:clamp(36px,7vh,80px) auto 0;min-height:600px}
.netstage{position:absolute;inset:0;display:grid;place-items:center}
.netstage::before{content:"";position:absolute;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,56,23,.3),transparent 66%);filter:blur(64px)}
.netstage .net{position:relative;width:clamp(380px,46vw,650px);height:auto;filter:drop-shadow(0 16px 54px rgba(232,56,23,.32))}
.netstage__label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:"Fragment Mono",monospace;
  font-size:.68rem;letter-spacing:.2em;color:rgba(255,255,255,.42);text-transform:uppercase;white-space:nowrap}
.fpoint{position:absolute;z-index:3;width:clamp(238px,21vw,292px);padding:19px 22px;border-radius:16px;
  border:1px solid rgba(255,255,255,.13);background:rgba(22,18,15,.6);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 30px 60px -32px rgba(0,0,0,.72)}
.fpoint b{display:flex;align-items:baseline;gap:9px;font-size:1.06rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.fpoint b i{font-family:"Fragment Mono",monospace;font-style:normal;font-size:.82rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fpoint p{margin-top:9px;font-size:.89rem;line-height:1.7;color:rgba(255,255,255,.6);word-break:keep-all}
.fpoint--a{top:4%;left:0}
.fpoint--b{top:4%;right:0}
.fpoint--c{bottom:18%;left:1%}
.diff__kpis{position:absolute;z-index:3;right:0;bottom:8%;display:flex;gap:10px}
.kchip{padding:15px 19px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);
  text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kchip b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kchip span{font-size:.72rem;color:rgba(255,255,255,.55);font-family:"Fragment Mono",monospace}
@media(max-width:980px){
  .diff__stage{min-height:0;display:flex;flex-direction:column;align-items:center;gap:22px}
  .netstage{position:relative;inset:auto;width:100%;padding-top:28px}
  .netstage .net{width:min(88vw,460px)}
  .fpoint{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;max-width:480px}
  .diff__kpis{position:relative;inset:auto;justify-content:center;flex-wrap:wrap}
}
.diff__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px);align-items:center}
.diff__points{display:flex;flex-direction:column;margin-top:10px}
.dpoint{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:26px 8px;border-top:1px solid rgba(255,255,255,.14);
  transition:padding-left .45s var(--ease),background .45s var(--ease)}
.dpoint:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.dpoint:hover{padding-left:18px;background:linear-gradient(90deg,rgba(232,56,23,.12),transparent 64%)}
.dpoint__no{font-family:"Fragment Mono",monospace;font-size:1.55rem;font-weight:500;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dpoint__body b{display:block;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.dpoint__body p{margin-top:9px;color:rgba(255,255,255,.6);font-size:.94rem;line-height:1.75;word-break:keep-all}

/* network graph viz */
.netcard{border-radius:var(--r);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  padding:18px;backdrop-filter:blur(8px)}
.netcard__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.netcard__top b{font-size:.92rem}
.netcard__top span{font-family:"Fragment Mono",monospace;font-size:.68rem;color:var(--cyan)}
.net{width:100%;height:auto}

/* ---------------- Process ---------------- */
/* 프로세스: 글로시 아이콘 카드 + 고스트 넘버 */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,20px)}
.pstep{position:relative;overflow:hidden;padding:30px 24px 28px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(180deg,#fff,#fffaf5);box-shadow:0 20px 50px -42px rgba(60,30,18,.5);
  transition:transform .34s var(--ease),box-shadow .34s,border-color .34s}
.pstep:hover{transform:translateY(-8px);border-color:rgba(232,56,23,.42);box-shadow:0 36px 66px -38px rgba(232,56,23,.42)}
.pstep__no{position:absolute;top:-16px;right:8px;z-index:0;font-family:"Geist",sans-serif;font-weight:800;
  font-size:5.4rem;line-height:1;letter-spacing:-.05em;color:rgba(232,56,23,.07);pointer-events:none;user-select:none}
.pstep__icon{position:relative;z-index:1;width:58px;height:58px;border-radius:17px;background:var(--grad);
  display:grid;place-items:center;margin-bottom:20px;
  box-shadow:0 14px 28px -10px rgba(232,56,23,.6),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .34s var(--ease)}
.pstep__icon::after{content:"";position:absolute;inset:0;border-radius:17px;
  background:linear-gradient(155deg,rgba(255,255,255,.42),transparent 52%);pointer-events:none}
.pstep__icon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pstep:hover .pstep__icon{transform:translateY(-3px) rotate(-4deg) scale(1.06)}
.pstep h3{position:relative;z-index:1;font-size:1.16rem;font-weight:800;letter-spacing:-.02em}
.pstep p{position:relative;z-index:1;margin-top:10px;font-size:.92rem;color:var(--muted);line-height:1.68;word-break:keep-all}

/* ---------------- Testimonials ---------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ── 메인 포트폴리오 티저: 풀블리드 갤러리(포트폴리오 페이지와 통일) ── */
.work2{padding:clamp(80px,12vh,150px) 0 clamp(56px,9vh,110px)}
.work2 .sec__head{padding:0 clamp(20px,4vw,44px)}
.work2 .np-grid{margin-top:clamp(40px,6vh,72px)}
.np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.np-item{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:var(--bg-soft);cursor:pointer;box-shadow:0 14px 34px -20px rgba(15,13,10,.32)}
.np-item img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.np-item:hover img{transform:scale(1.05)}
.np-item::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(15,13,10,.74) 100%);opacity:0;transition:opacity .4s var(--ease)}
.np-item:hover::before{opacity:1}
.np-item__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px clamp(16px,1.6vw,26px);transform:translateY(12px);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.np-item:hover .np-item__cap{opacity:1;transform:none}
.np-item__t{display:block;color:#fff;font-size:clamp(1.02rem,1.4vw,1.24rem);font-weight:800;letter-spacing:-.02em}
.np-item__c{display:block;margin-top:6px;color:var(--accent-2);font-size:.82rem;font-weight:700}
.np-item::after{content:"↗";position:absolute;top:15px;right:15px;z-index:2;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:1.1rem;font-weight:700;opacity:0;transform:translateY(8px) scale(.8);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.np-item:hover::after{opacity:1;transform:none}
.work2__more{text-align:center;margin-top:clamp(38px,5vh,60px);padding:0 clamp(20px,4vw,44px)}
.work2__more a{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:.96rem;color:var(--ink);transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.work2__more a span{transition:transform .3s var(--ease)}
.work2__more a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.work2__more a:hover span{transform:translateX(4px)}
@media(max-width:1024px){.np-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.np-grid{grid-template-columns:1fr}.np-item{aspect-ratio:16/10}}
.tcard{padding:30px;border:1.5px solid var(--line);border-radius:22px;background:#fff;
  display:flex;flex-direction:column;gap:16px;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s}
.tcard:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 30px 60px -34px rgba(232,56,23,.3)}
.tcard p{font-size:1rem;line-height:1.7;color:var(--ink);font-weight:500;word-break:keep-all}
.tcard footer{display:flex;align-items:center;gap:10px;margin-top:auto}
.tcard__av{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:.86rem}
.tcard cite{font-style:normal;font-weight:700;font-size:.9rem}
.tcard small{display:block;color:var(--faint);font-size:.76rem;font-weight:500}
.tstars{color:#ffb020;font-size:.9rem;letter-spacing:1px}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.qa__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;
  color:var(--accent);transition:transform .3s}
.qa.is-open .qa__q::after{content:"−"}
.qa__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.qa__a-in{padding:0 0 24px;color:var(--muted);line-height:1.85;font-size:.98rem;word-break:keep-all}
.qa__a-in b{color:var(--ink)}

/* ---------------- Contact (soijeong CTA) ---------------- */
.contact{background:var(--grad-soft);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;right:-6%;top:-20%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,121,47,.4),transparent 68%);filter:blur(40px)}
.contact::after{content:"";position:absolute;left:-10%;bottom:-24%;width:42%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,56,23,.2),transparent 70%);filter:blur(48px)}
.contact .sec{position:relative;z-index:2}

.cta-head{text-align:center;max-width:1000px;margin:0 auto clamp(46px,6.5vh,82px)}
.cta-head__eg{display:inline-block;font-family:"Fragment Mono",monospace;font-size:.76rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.cta-head__big{margin-top:20px;font-weight:800;letter-spacing:-.045em;line-height:1.05;
  font-size:clamp(2.5rem,6.6vw,5.6rem);word-break:keep-all}
.cta-head__big .ln{display:block}
.cta-head__big em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-head__lead{margin:24px auto 0;max-width:600px;color:var(--muted);line-height:1.85;font-size:1.02rem}

.cwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.4vw,60px);align-items:stretch;max-width:1080px;margin:0 auto}
.cinfo{display:flex;flex-direction:column}
.crows{display:flex;flex-direction:column;gap:2px}
.crows li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);align-items:center}
.crows li:last-child{border-bottom:1px solid var(--line)}
.crows span{width:58px;font-family:"Fragment Mono",monospace;font-size:.72rem;color:var(--faint);text-transform:uppercase;flex:none}
.crows a,.crows li>div{font-weight:600;color:var(--ink)}
.cinfo__seo{margin-top:28px;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:13px 21px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:.92rem;
  transition:transform .3s var(--ease),box-shadow .3s}
.cinfo__seo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.cinfo__seo:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(0,0,0,.5)}
.cinfo__seo:hover svg{transform:translateX(4px)}
.cform{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cfield{display:flex;flex-direction:column}
.cfield--full{grid-column:1/-1}
.cfield label{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.cfield input,.cfield select,.cfield textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  font:inherit;font-size:.94rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,56,23,.12)}
.cform .btn{grid-column:1/-1;justify-content:center}
.cnote{grid-column:1/-1;text-align:center;font-size:.86rem;color:var(--accent);min-height:1em;font-weight:600}

/* ---- CTA 패널 (디자인센터와 통일) ---- */
.contact__panel{position:relative;overflow:hidden;border-radius:28px;
  background:linear-gradient(135deg,#ff8a3d 0%,var(--accent) 55%,#e63d0d 100%);color:#fff;
  padding:clamp(34px,5vw,68px);display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(32px,5vw,66px);align-items:center;box-shadow:0 50px 100px -50px rgba(232,56,23,.55)}
.contact__panel::after{content:"";position:absolute;right:-14%;bottom:-38%;width:56%;aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.contact__tag{font-size:.78rem;letter-spacing:.25em;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:18px}
.contact__title{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800;letter-spacing:-.04em;line-height:1.14;color:#fff}
.contact__desc{margin-top:20px;color:rgba(255,255,255,.9);line-height:1.75}
.contact__rows{margin-top:32px;display:grid;gap:12px;list-style:none;padding:0}
.contact__rows li{display:flex;align-items:baseline;gap:14px;font-weight:600}
.contact__rows span{font-size:.7rem;letter-spacing:.18em;font-weight:800;color:rgba(255,255,255,.72);min-width:46px}
.contact__rows a,.contact__rows li>div{font-size:1.1rem;color:#fff;transition:opacity .25s}
.contact__rows a:hover{opacity:.78}
.contact__info .cinfo__seo{margin-top:30px;background:#fff;color:var(--accent)}
.contact__info .cinfo__seo:hover{background:var(--ink);color:#fff}
.contact__spin{position:absolute;top:clamp(18px,3vw,32px);right:clamp(18px,3vw,32px);
  width:clamp(88px,11vw,126px);height:clamp(88px,11vw,126px);animation:spinSlow 16s linear infinite;pointer-events:none}
.contact__spin text{fill:rgba(255,255,255,.85);font-size:10.5px;font-weight:700;letter-spacing:.14em}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.contact__panel .cform{border:0;box-shadow:0 30px 60px -36px rgba(0,0,0,.42)}
@media(max-width:980px){.contact__panel{grid-template-columns:1fr}.contact__spin{display:none}}

/* ---------------- Footer ---------------- */
.footer{background:var(--dark);color:rgba(255,255,255,.7);padding:clamp(54px,8vh,80px) clamp(18px,4vw,44px) 34px}
.footer__in{max-width:var(--maxw);margin:0 auto}
.footer__top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand img{height:24px;margin-bottom:14px}
.footer__brand p{font-size:.9rem;line-height:1.7;max-width:340px}
.footer__cols{display:flex;gap:clamp(30px,5vw,64px);flex-wrap:wrap}
.footer__col h4{font-size:.74rem;font-family:"Fragment Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:14px}
.footer__col a,.footer__col span{display:block;font-size:.9rem;color:rgba(255,255,255,.72);margin-bottom:9px}
.footer__col a:hover{color:#fff}
.footer__biz{padding-top:26px;font-size:.78rem;color:rgba(255,255,255,.4);line-height:1.9}
.footer__biz b{color:rgba(255,255,255,.7)}
.footer__copy{display:block;margin-top:16px;font-size:.78rem;color:rgba(255,255,255,.4)}
.footer__wordmark{margin-top:clamp(26px,5vh,52px);font-weight:800;letter-spacing:-.05em;line-height:.82;
  font-size:clamp(2rem,8.1vw,7rem); /* HAOCOMMUNICATION 16자 기준 */white-space:nowrap;user-select:none;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.02));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer__wordmark em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* reveal */
/* .reveal: 기본은 보이게(IO가 Lenis와 충돌해 미발화 → GSAP가 등장 처리, 실패해도 항상 표시) */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.show.gsap-on ~ * .reveal{will-change:opacity,transform}

/* FAB */
.fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px}
.fab a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.fab a:hover{transform:scale(1.08)}
.fab__kakao{background:#fee500;color:#3a1d1d}
.fab__call{background:var(--accent)}
.fab svg{width:24px;height:24px}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr}
  .hero__art{order:-1;min-height:200px}
  .hero__arrow{width:180px}
  .feat,.diff__grid,.cwrap{grid-template-columns:1fr;gap:30px}
  .feat--rev .feat__text{order:0}
  .proc{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .proc__line{display:none}
  .tgrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;
    background:#fff;border-bottom:1px solid var(--line);padding:18px clamp(18px,4vw,44px) 26px;
    transform:translateY(-120%);transition:transform .4s var(--ease);box-shadow:0 20px 40px -24px rgba(0,0,0,.3)}
  .nav.is-open{transform:none}
  .nav a{padding:10px 0;font-size:1rem}
  .nav__div{display:none}
  .burger{display:flex}
  .header__cta{display:none}
  body.menu-open{overflow:hidden}
  .proc{grid-template-columns:1fr}
  .cform{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track,.hero__arrow{animation:none}
  *{scroll-behavior:auto}
}

/* ===== 진행 과정 타임라인 (스튜디오/디자인센터 동일 스타일) ===== */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-top:56px;margin-top:46px}
.timeline__line{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.timeline__line i{position:relative;display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .25s linear;box-shadow:0 0 12px rgba(232,56,23,.5)}
.timeline__line i::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(232,56,23,.18),0 0 18px rgba(232,56,23,.8);animation:tlPulse 1.4s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 5px rgba(232,56,23,.18),0 0 18px rgba(232,56,23,.8)}50%{box-shadow:0 0 0 11px rgba(232,56,23,.06),0 0 26px rgba(232,56,23,.9)}}
.tstep{position:relative;opacity:.28;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tstep::before{content:"";position:absolute;top:-61px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.tstep.is-on{opacity:1;transform:none}
.tstep.is-on::before{background:var(--accent);border-color:var(--accent);transform:scale(1.25);box-shadow:0 0 0 6px rgba(232,56,23,.15)}
.tstep__no{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin-bottom:16px;font-size:1.15rem;font-weight:800;color:var(--muted);border:2px solid var(--line);background:#fff;transition:color .3s,border-color .3s,background .3s}
.tstep.is-on .tstep__no{color:#fff;background:var(--accent);border-color:var(--accent);animation:tlPop .55s var(--ease)}
@keyframes tlPop{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.tstep h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.tstep p{color:var(--muted);font-size:.94rem}
@media(max-width:1000px){.timeline{grid-template-columns:repeat(2,1fr);gap:36px 24px;padding-top:10px}.timeline__line{display:none}.tstep::before{display:none}}

/* ===== 후기 마퀴 (자동 흐름 + 호버 일시정지) ===== */
.tmarquee{position:relative;margin-top:46px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tmarquee__track{display:flex;gap:22px;width:max-content;padding:10px 2px;animation:tmScroll 32s linear infinite}
.tmarquee:hover .tmarquee__track{animation-play-state:paused}
@keyframes tmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tmarquee .tcard{width:clamp(296px,27vw,352px);flex:none}
@media(prefers-reduced-motion:reduce){.tmarquee__track{animation:none}}

/* ===== 커스텀 커서 (회전 텍스트 배지 + 화살표, 호버 모핑) ===== */
.hcursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.has-hcursor .hcursor{opacity:1}
.hcursor__in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:68px;height:68px}
/* 회전 텍스트 링 */
.hcursor__text{position:absolute;inset:0;animation:hcSpin 9s linear infinite;transition:opacity .3s}
.hcursor__text svg{width:100%;height:100%;display:block;overflow:visible}
.hcursor__text text{font-family:"Fragment Mono","Pretendard",monospace;font-size:8px;letter-spacing:.4px;fill:var(--accent);font-weight:700}
@keyframes hcSpin{to{transform:rotate(360deg)}}
/* 가운데 오렌지 그라데이션 원 + 화살표 */
.hcursor__core{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .28s var(--ease),width .28s var(--ease),height .28s var(--ease);
  box-shadow:0 8px 20px -8px rgba(232,56,23,.6)}
.hcursor__arw{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s;grid-area:1/1}
.hcursor__label{grid-area:1/1;color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.02em;white-space:nowrap;opacity:0;transform:scale(.5);transition:opacity .2s,transform .28s var(--ease)}
/* 링크·버튼 호버: 원이 살짝 커짐 */
.hcursor.is-hover .hcursor__core{transform:translate(-50%,-50%) scale(1.18)}
.hcursor.is-hover .hcursor__text{opacity:.65}
/* 이미지·포트폴리오 링크: VIEW */
.hcursor.is-view .hcursor__core{width:64px;height:64px}
.hcursor.is-view .hcursor__arw{opacity:0}
.hcursor.is-view .hcursor__label{opacity:1;transform:scale(1)}
.hcursor.is-view .hcursor__text{opacity:0}
@media (pointer:fine){.has-hcursor *{cursor:none!important}.has-hcursor input,.has-hcursor textarea,.has-hcursor select{cursor:auto!important}}
@media (pointer:coarse){.hcursor{display:none}}
@media (prefers-reduced-motion:reduce){.hcursor__text{animation:none}}