/* =========================================================================
   VALORA — stylesheet (extracted from Framer export)
   All rules are scoped under .valora
   ========================================================================= */
/* 1차 수정 디자인 시스템 — head: Noto Serif KR / body: Noto Sans KR */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

/* ---------- Base reset (host page) ---------- */
html,body{margin:0;padding:0;background:var(--ink,#111111);}

/* =========================================================================
   VALORA
   · COLOR + TYPE  : 기존 디자인 토큰 유지 (Sensoria 시스템) — 신규 정의 없음
   · LAYOUT        : Purevé 아카이브의 섹션 템플릿 이식
                     (asymmetric feature block / sticky timeline / scroll rail /
                      editorial grid / image card + progressive blur / split contact)
   ========================================================================= */
.valora{
  /* ---------- COLOR TOKENS (기존 유지 · 변경 없음) ---------- */
  --ink:#111111;
  --surface:#222222;
  --accent:rgb(245,105,156);
  --white:#FFFFFF;
  --black:#0A0A0A;
  --white80:rgba(255,255,255,0.8);
  --muted:#9C9C9C;
  --line:#404040;
  --hairline:rgba(255,255,255,0.09);
  --card:#181818;

  /* ---------- TYPE TOKENS (기존 유지 · 변경 없음) ---------- */
  /* 전 타이포를 섹션 헤드카피 서체(Inter/Pretendard)로 통일.
     토큰 이름은 유지 — 되돌릴 땐 이 3줄만 원복하면 됩니다. */
  --display:'Noto Serif KR',-apple-system,BlinkMacSystemFont,serif;
  --sans:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;

  /* ---------- VALORA CORE COLOR SYSTEM ----------
     지정 브랜드 파렛트. 현재 #platform 섹션에 스코프 적용.
     (전역 롤아웃 시 이 블록을 그대로 사용) */
  --v-magenta:#E4007F;        /* Primary / Headline / CTA        */
  --v-magenta-deep:#B50066;   /* Hover / Interactive state       */
  --v-soft:#FFF0F7;           /* Section & Card background       */
  --v-mint:#A8F0D1;           /* Signal badge 배경 전용 (텍스트 금지) */
  --v-ink:#141414;            /* Body text & text on mint        */

  /* ---------- GEOMETRY (Purevé 레이아웃 이식분) ---------- */
  --r-card:16px; --r-faq:14px; --r-pill:100px; --r-chip:8px;
  --r-lg:32px;  --r-md:22px;            /* Purevé: 32 / 22 */
  --gutter:clamp(20px,3.2vw,40px);       /* Figma 섹션 패딩 40px */
  --maxw:1320px;                         /* Figma 프레임 1320 → 콘텐츠 1240 */
  --nav-h:64px;
}
.valora *{box-sizing:border-box;-webkit-font-smoothing:inherit;}
.valora{margin:0;padding:0;}
.valora{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.valora h1,.valora h2,.valora h3,.valora h4,.valora h5,.valora h6,.valora p,.valora figure{margin:0;}
.valora{scroll-behavior:smooth;}
.valora{background:var(--ink);color:var(--white);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:clip;}
.valora ::selection{background:rgba(245,105,156,0.4);color:var(--white);}
.valora a{color:inherit;text-decoration:none;}
.valora button,.valora input,.valora textarea,.valora select{font-family:inherit;}
.valora :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.valora img{display:block;max-width:100%;}

.valora .grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:screen;
}

/* ===================== PRIMITIVES ===================== */
.valora .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.valora section{position:relative;padding:clamp(88px,10vw,150px) 0;}
.valora .eyebrow{font-family:var(--mono);font-size:13.5px;line-height:1;color:#c10064;display:inline-block;margin-bottom:24px;}
.valora .eyebrow .dim{color:var(--muted);}
/* Brand Partnership 계열 — 캡션 전체를 생화이트로 */
.valora .eyebrow.bp,.valora .eyebrow.bp .dim{color:var(--white);}
.valora h2.sec{font-family:var(--display);font-weight:500;font-size:clamp(40px,6.4vw,80px);line-height:1.15;letter-spacing:-0.01em;color:var(--white);max-width:none;text-transform:uppercase;}
.valora h2.sec .soft{color:var(--white80);word-break:keep-all;}
.valora h2.sec.wide{max-width:none;}
.valora h2.sec.kr{letter-spacing:-0.04em;}


.valora .pill{position:relative;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;border-radius:var(--r-pill);border:0;cursor:pointer;background:var(--white);color:var(--black);font-size:15px;font-weight:500;letter-spacing:-0.01em;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.valora .pill span{display:block;transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s,opacity .4s;}
.valora .pill span.ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:blur(5px);opacity:0;transform:translateY(60%);}
.valora .pill:hover span.real{transform:translateY(-60%);filter:blur(5px);opacity:0;}
.valora .pill:hover span.ghost{transform:translateY(0);filter:blur(0);opacity:1;}
.valora .pill:active{transform:scale(.97);}
.valora .pill.outline{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--line);}
.valora .pill.outline:hover{box-shadow:inset 0 0 0 1px rgba(245,105,156,.6);}

.valora .card{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;transition:border-color .4s,transform .5s cubic-bezier(.22,1,.36,1);}
.valora .card:hover{border-color:rgba(245,105,156,.32);}

.valora .rise{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.valora .rise.in{opacity:1;transform:none;}
.valora h2.sec .w{display:inline-block;opacity:.001;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1);}
.valora h2.sec.in .w{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.valora .rise,.valora h2.sec .w{opacity:1!important;transform:none!important;transition:none!important;}.valora{scroll-behavior:auto;}}

/* ===================== 3D / ABSTRACT VISUAL LAYER =====================
   Purevé: Hero Cloud Background + Hero Product Image (layered).
   비브랜드 추상 렌더만 재사용 + 토큰 기반 CSS 오브. */
.valora .cloud{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 72%);mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 72%);background-image:var(--v-cloud);background-size:cover;background-position:center top;mix-blend-mode:screen;opacity:.16;pointer-events:none;}
.valora .gradimg{position:absolute;inset:0;background-image:var(--v-grad);background-size:cover;background-position:center;mix-blend-mode:soft-light;opacity:.42;pointer-events:none;}
.valora .viz{position:absolute;inset:0;overflow:hidden;pointer-events:none;}

/* 1 · sphere — 구체 (히어로 시그니처) */
.valora .viz.sphere::before{content:'';position:absolute;left:19%;top:9%;width:62%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(26% 24% at 33% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
    radial-gradient(88% 88% at 33% 28%, rgba(245,105,156,.98), rgba(245,105,156,.42) 44%, rgba(10,10,10,.94) 80%),
    var(--black);
  box-shadow:0 44px 120px rgba(245,105,156,.34), inset 0 -14px 46px rgba(0,0,0,.45);}
/* 접지 그림자 */
.valora .viz.sphere::after{content:'';position:absolute;left:26%;top:64%;width:48%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,105,156,.42), rgba(245,105,156,0) 72%);filter:blur(12px);}

/* 2 · arc — 하단 초승달 글로우 */
.valora .viz.arc::before{content:'';position:absolute;left:-18%;bottom:-52%;width:136%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,105,156,.62), rgba(245,105,156,.12) 60%, rgba(245,105,156,0) 74%);filter:blur(6px);}
.valora .viz.arc::after{content:'';position:absolute;left:-4%;bottom:-30%;width:108%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, var(--black) 62%, rgba(10,10,10,0) 78%);}

/* 3 · rings — 동심원 + 코어 */
.valora .viz.rings::before{content:'';position:absolute;left:50%;top:52%;width:126%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:repeating-radial-gradient(circle at 50% 50%, rgba(245,105,156,.26) 0 1px, rgba(245,105,156,0) 1px 8.5%);
  -webkit-mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);}
.valora .viz.rings::after{content:'';position:absolute;left:36%;top:33%;width:28%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.92), var(--accent) 54%, rgba(245,105,156,0) 78%);filter:blur(2px);}

/* 4 · beam — 대각 광선 */
.valora .viz.beam::before{content:'';position:absolute;inset:-32%;
  background:linear-gradient(112deg, rgba(245,105,156,0) 24%, rgba(245,105,156,.44) 43%, rgba(255,255,255,.58) 51%, rgba(245,105,156,.34) 59%, rgba(245,105,156,0) 77%);
  filter:blur(14px);}
.valora .viz.beam::after{content:'';position:absolute;inset:0;
  background:radial-gradient(72% 72% at 50% 122%, var(--black), rgba(10,10,10,0) 70%);}

/* 5 · grid — 원근 그리드 + 지평선 글로우 */
.valora .viz.grid::before{content:'';position:absolute;left:-26%;right:-26%;bottom:-6%;height:86%;
  background-image:linear-gradient(rgba(245,105,156,.30) 1px, rgba(245,105,156,0) 1px),
                   linear-gradient(90deg, rgba(245,105,156,.22) 1px, rgba(245,105,156,0) 1px);
  background-size:100% 13%, 7.5% 100%;
  transform:perspective(360px) rotateX(62deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 78%);mask-image:linear-gradient(to top,#000 6%,transparent 78%);}
.valora .viz.grid::after{content:'';position:absolute;left:27%;top:15%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.88), var(--accent) 46%, rgba(245,105,156,0) 76%);filter:blur(9px);}

/* Purevé "Blur" — 계단식 progressive blur 오버레이 (0.25→0.75rem) */
.valora .progblur{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:2;}
.valora .progblur i{position:absolute;inset:0;display:block;}
.valora .progblur i:nth-child(1){backdrop-filter:blur(.25rem);-webkit-backdrop-filter:blur(.25rem);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 16%,transparent 34%);mask-image:linear-gradient(to top,#000 0%,#000 16%,transparent 34%);}
.valora .progblur i:nth-child(2){backdrop-filter:blur(.375rem);-webkit-backdrop-filter:blur(.375rem);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 50%);mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 50%);}
.valora .progblur i:nth-child(3){backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 46%,transparent 68%);mask-image:linear-gradient(to top,#000 0%,#000 46%,transparent 68%);}
.valora .progblur i:nth-child(4){backdrop-filter:blur(.625rem);-webkit-backdrop-filter:blur(.625rem);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 62%,transparent 84%);mask-image:linear-gradient(to top,#000 0%,#000 62%,transparent 84%);}
.valora .progblur i:nth-child(5){backdrop-filter:blur(.75rem);-webkit-backdrop-filter:blur(.75rem);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 78%,transparent 100%);background:linear-gradient(to top,rgba(10,10,10,.72),transparent 70%);}

/* Purevé "Image Card" — 풀블리드 비주얼 + 하단 캡션 + progressive blur */
.valora .imgcard{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);background:var(--black);min-height:clamp(360px,46vw,560px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;}
/* Brand Protection 이미지 카드 — Why Vietnam 과 동일한 네온 글래스 오브젝트 */
/* Why VALORA 이미지 카드 — 사진 + 스크림(마크/캡션 가독성) */
/* Solution 카드 — 제품 스틸라이프 사진 + 스크림 (Figma 5:8747) */
.valora #solution .imgcard{background:var(--black);}
.valora .imgcard-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.valora #solution .imgcard::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 20%,
    rgba(10,10,10,0) 42%, rgba(10,10,10,.16) 66%, rgba(10,10,10,.86) 100%);}
/* Brand Protection 이미지 카드 — 사진 + 스크림 */
/* border(흰9%)+검은 배경이 이미지가 안 덮는 1px 링으로 노출돼 밝은 섹션에서 검은 테두리처럼 보이던 것 제거 */
.valora #protection .imgcard{border:0;background:transparent;}
.valora #protection .prot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.valora #protection .imgcard::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 20%,
    rgba(10,10,10,0) 42%, rgba(10,10,10,.16) 66%, rgba(10,10,10,.86) 100%);}
.valora .imgcard .mark{position:absolute;top:26px;left:26px;z-index:3;font-family:var(--display);font-size:26px;letter-spacing:-0.02em;color:var(--white);opacity:.92;}
.valora .imgcard .cap{position:relative;z-index:3;padding:0 28px 30px;text-align:center;}
.valora .imgcard .cap h3{font-family:var(--sans);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:-0.03em;color:var(--white);}
.valora .imgcard .cap p{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--white80);}

/* ===================== NAV ===================== */
/* Nav — 흰 바 + 다크 텍스트 (home v2) */
.valora nav#top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:100;height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid #e9e5de;background:#ffffff;}
.valora nav#top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.valora .brand{display:inline-flex;align-items:center;line-height:0;}
.valora .brand img{height:15px;width:auto;display:block;}
.valora .nav-links{display:flex;align-items:center;gap:28px;}
.valora .nav-links a{font-size:15px;color:#0a0a0a;transition:color .25s;}
.valora .nav-links a:hover{color:#c10064;}
.valora .nav-links a.active{color:#e4007f;font-weight:700;}
.valora .nav-right{display:flex;align-items:center;gap:16px;}
.valora .nav-right .pill{height:40px;padding:0 20px;font-size:13.5px;}
/* 언어 세그먼트 토글 (home v2) — KO/EG/VN, 웜그레이 바 */
.valora .lang-seg{display:inline-flex;gap:4px;padding:4px;border-radius:8px;background:#e9e5de;}
.valora .lang-seg-btn{border:0;cursor:pointer;padding:6px 16px;border-radius:6px;background:transparent;color:#0a0a0a;font-family:var(--sans);font-size:14px;line-height:1.5;letter-spacing:-.02em;transition:background .2s,color .2s;}
.valora .lang-seg-btn:hover{background:rgba(0,0,0,.06);}
.valora .lang-seg-btn.on{background:#faf8f5;color:#0a0a0a;}
.valora .lang-seg-btn.on:hover{background:#faf8f5;}
.valora .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:0;padding:0;cursor:pointer;z-index:110;}
.valora .burger i{display:block;height:1.5px;width:20px;margin:0 auto;background:#0a0a0a;border-radius:2px;transition:transform .3s,opacity .3s;}
.valora .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.valora .burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.valora .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.valora #sheet{position:fixed;inset:0;z-index:99;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .35s,visibility .35s;}
.valora #sheet.open{opacity:1;visibility:visible;transform:none;}
.valora #sheet a{font-weight:500;font-size:26px;letter-spacing:-0.03em;color:var(--white);}

/* ===================== PRELOADER ===================== */
.valora #preload{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s ease,visibility .8s;}
.valora #preload.done{opacity:0;visibility:hidden;}
.valora #preload .mark{font-family:var(--display);color:var(--accent);font-size:clamp(56px,13vw,180px);line-height:1;letter-spacing:-0.03em;filter:blur(9px);animation:sharpen 1.1s .15s cubic-bezier(.22,1,.36,1) forwards;}
.valora #preload .mark i{display:inline-block;font-style:normal;opacity:0;transform:translateY(24px);animation:letterIn .7s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes sharpen{to{filter:blur(0);}}
@keyframes letterIn{to{opacity:1;transform:none;}}

/* ===================== HERO (Purevé: Section / Hero) ===================== */
/* ===== HERO — 1차 수정 (모델 이미지 배경 · 좌측 딤 · 흰 텍스트 · 세리프 H1) ===== */
.valora .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 clamp(40px,5vw,72px);overflow:hidden;background:#0a0a0a;}
.valora .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:0;pointer-events:none;}
/* 좌측만 어둡게 (Figma: linear-gradient 90deg rgba(0,0,0,.5)→0) */
.valora .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.5) 2%, rgba(0,0,0,0) 99%);}
.valora .hero .wrap{position:relative;z-index:2;}
.valora .hero-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;text-align:left;}
.valora .hero-badge{display:inline-flex;align-items:center;gap:14px;padding:9px 20px 9px 12px;border-radius:50px;border:1px solid rgba(245,105,156,.22);background:rgba(255,255,255,.04);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 18px 40px rgba(245,105,156,.08);font-size:12px;letter-spacing:-.03em;color:rgba(255,255,255,.8);margin-bottom:clamp(26px,3vw,38px);}
.valora .hero-avatars{display:inline-flex;}
.valora .hero-avatars i{width:26px;height:26px;border-radius:50%;background:#e4007f;border:2px solid #fff;margin-left:-9px;}
.valora .hero-avatars i:first-child{margin-left:0;}
.valora .hero-tags{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;letter-spacing:-.02em;margin-bottom:11px;}
.valora .hero-tags b{font-weight:400;color:#fff;}
.valora .hero-tags span{color:rgba(255,255,255,.8);}
.valora .hero-h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.7vw,84px);line-height:1.15;letter-spacing:-.01em;text-transform:uppercase;color:#faf8f5;}
.valora .hero-lead{max-width:760px;font-size:clamp(15px,1.95vw,28px);line-height:1.25;color:rgba(255,255,255,.82);margin-top:clamp(18px,2vw,26px);letter-spacing:-.01em;font-weight:400;word-break:keep-all;}
.valora .hero-lead b{font-weight:400;color:#fff;}
.valora .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2vw,26px);}
.valora .hero-cta a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:50px;padding:0 30px 3px;border-radius:100px;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;letter-spacing:-.01em;transition:transform .3s,background .3s,box-shadow .3s;}
.valora .btn-primary{background:#c10064;color:#fff;}
.valora .btn-primary:hover{background:#a80057;transform:translateY(-1px);}
.valora .btn-glass{background:rgba(17,17,17,.42);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.valora .btn-glass:hover{box-shadow:inset 0 0 0 1px rgba(245,105,156,.7);}

/* 우측 세로 레일 (© 2026 · VALORA) */
.valora .rail{position:absolute;right:2px;left:auto;top:0;bottom:0;width:46px;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.valora .rail .inner{position:absolute;transform:rotate(90deg);transform-origin:center;display:flex;align-items:center;gap:16px;white-space:nowrap;}
.valora .rail p{font-family:var(--mono);font-size:12px;color:var(--white);opacity:.72;}
.valora .rail .ticks{display:flex;align-items:center;gap:6px;}
.valora .rail .ticks i{display:block;width:1px;height:9px;background:var(--white);opacity:.35;}
.valora .rail .ticks i:nth-child(6){height:16px;opacity:.9;background:var(--accent);}

/* layered hero visual — cloud + orb + glass flow card */


/* ===================== MARQUEE ===================== */
.valora .marquee{position:relative;overflow:hidden;background:var(--accent);padding:16px 0;display:flex;}
.valora .marquee.dark{background:var(--surface);}
.valora .marquee ul{display:flex;align-items:center;list-style:none;padding:0;margin:0;flex:none;animation:slide 34s linear infinite;}
.valora .marquee:hover ul{animation-play-state:paused;}
.valora .marquee li{display:flex;align-items:center;}
.valora .marquee p{font-family:var(--mono);font-size:13.5px;color:var(--black);white-space:nowrap;padding:0 22px;}
.valora .marquee .mq-term{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--black);white-space:nowrap;padding:0 22px;}
.valora .marquee.dark p{color:var(--white);}
.valora .marquee .oval{width:6px;height:6px;border-radius:100px;background:var(--black);opacity:.55;flex:none;}
/* 히어로 하단 로고 스트립 — 텍스트 대신 브랜드 마크 */
.valora .marquee .lg{display:inline-flex;align-items:center;gap:9px;padding:0 26px;flex:none;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;color:var(--black);white-space:nowrap;}
.valora .marquee .lg svg{width:19px;height:19px;flex:none;opacity:.9;}
.valora .marquee.logostrip{padding:18px 0;}
.valora .marquee.dark .oval{background:var(--accent);opacity:1;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ===================== LOGOS ===================== */

/* ===================== BENTO (Purevé: Section / Benefits, 비대칭) ===================== */
.valora .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(44px,5vw,64px);}

.valora .bento .b{padding:28px 28px 32px;display:flex;flex-direction:column;min-height:190px;}
.valora .bento .b .top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.valora .bento .b .ic{width:48px;height:48px;border-radius:12px;background:rgba(228,0,127,.2);border:1px solid #e4007f;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.valora .bento .b .ic svg{width:25px;height:25px;}
.valora .bento .b .badge{font-family:var(--sans);font-size:16.6px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px;letter-spacing:-0.72px;}
.valora .bento .b h4{margin-top:26px;font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-0.03em;color:var(--white);}

/* Statement — 별도 다크 풀블리드 섹션 + 배경 사진 (1차수정 v2) */
.valora .statement-sec{position:relative;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;min-height:clamp(360px,52vw,591px);}
.valora .statement-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:0;}
.valora .statement-sec::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.55) 42%,rgba(10,10,10,.2) 72%,rgba(10,10,10,.35) 100%);}
.valora .statement{position:relative;z-index:2;width:100%;max-width:calc(var(--maxw,1240px) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);text-align:left;}
.valora .statement p{position:relative;z-index:1;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(30px,4.6vw,72px);line-height:1.15;letter-spacing:-0.02em;color:rgba(255,255,255,.75);}
.valora .statement p .soft{color:rgba(255,255,255,.75);opacity:1;}
.valora .statement p .hot{color:#e4007f;}
.valora .statement .pill{position:relative;z-index:1;margin-top:40px;background:#c10064;color:#fff;}
.valora .statement .pill span.real,.valora .statement .pill span.ghost{color:#fff;}

/* ===================== FEATURE BLOCK (Purevé: alternating asymmetric) ===================== */
.valora .featblock{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4.4vw,64px);align-items:center;}
.valora .featblock.mirror{grid-template-columns:1.08fr .92fr;}
.valora .featblock.mirror .fb-visual{order:2;}
.valora .featblock.mirror .fb-copy{order:1;}
.valora .fb-copy h2.sec{margin-bottom:8px;}
.valora .featlist{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px clamp(18px,2.2vw,30px);}
.valora .featitem{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--surface);}
.valora .featitem:nth-child(n+4){border-bottom:1px solid var(--surface);}
.valora .featitem .ic{width:36px;height:36px;border-radius:10px;background:rgba(228,0,127,.2);border:1px solid #e4007f;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;}
.valora .featitem .ic svg{width:17px;height:17px;}
.valora .featitem h4{font-size:18px;font-weight:500;letter-spacing:-0.025em;color:var(--white);}
.valora .featitem p{margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--white80);}
.valora .featitem .ic.num{background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--mono);font-size:11px;color:var(--accent);}

/* 2-path compare (Solution) */
.valora .paths{display:flex;flex-direction:column;gap:10px;margin-top:30px;}
.valora .pathrow{border-radius:var(--r-md);border:1px solid var(--hairline);padding:22px 24px;}
.valora .pathrow h4{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);margin-bottom:14px;}
.valora .pathrow.hot h4{color:var(--accent);}
.valora .pathrow .chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.valora .pathrow .n{padding:9px 15px;border-radius:var(--r-pill);background:var(--surface);font-size:13.5px;font-weight:500;letter-spacing:-0.02em;color:var(--white80);}
.valora .pathrow.hot .n{background:var(--accent);color:var(--black);font-weight:600;box-shadow:none;}

.valora .pathrow .a{color:var(--line);font-size:13.5px;}
.valora .pathrow.hot .a{color:var(--accent);}

/* ===================== FLOW LOOP ===================== */
.valora .loop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;}
.valora .loop .n{padding:20px 32px;border-radius:var(--r-pill);background:var(--surface);font-size:clamp(17px,1.8vw,21px);font-weight:500;letter-spacing:-0.02em;color:var(--white);}
.valora .loop .n.hub{background:var(--accent);color:var(--black);font-family:var(--display);font-size:clamp(22px,2.4vw,32px);padding:16px 44px;}
.valora .loop .a{color:var(--accent);font-size:18px;}
.valora .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px;}
.valora .tags span{font-family:var(--mono);font-size:12px;color:var(--white80);padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);}

/* =========================================================================
   [Our Solution] · Inventory Marketing Platform
   다크톤 · 중앙 플로우(재고 → VALORA → 성장) + 성과 카드 5종
   ========================================================================= */
.valora #platform .wrap{position:relative;z-index:1;}
/* Figma 165:1325 — 아이브로우 좌측 컬럼 + 제목·플로우·카드 우측(928px, ~26%) 오프셋 */
.valora #platform > .wrap > .eyebrow{position:absolute;left:var(--gutter);top:4px;margin:0;}
.valora #platform h2.sec{padding-left:26%;font-size:clamp(30px,5.6vw,72px);}
.valora #platform .ip-sub{padding-left:26%;}
.valora #platform .ip-flow{padding-left:26%;justify-content:flex-start;margin-top:clamp(40px,5vw,64px);}
.valora #platform .ip-cards{padding-left:26%;}
@media (max-width:900px){
  .valora #platform > .wrap > .eyebrow{position:static;margin-bottom:14px;}
  .valora #platform h2.sec,
  .valora #platform .ip-sub,
  .valora #platform .ip-flow,
  .valora #platform .ip-cards{padding-left:0;}}
.valora .ip-sub{font-family:var(--display);margin-top:18px;font-size:clamp(22px,3vw,40px);font-weight:500;letter-spacing:-0.01em;line-height:1.15;color:rgba(255,255,255,.8);word-break:keep-all;}
.valora .ip-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(12px,1.7vw,24px);margin-top:clamp(56px,6vw,92px);}
.valora .ip-node{padding:clamp(16px,1.6vw,22px) clamp(24px,2.8vw,40px);border-radius:var(--r-pill);
  border:1px solid var(--surface);background:var(--card);
  font-size:clamp(16px,1.7vw,22px);font-weight:500;letter-spacing:-0.03em;color:var(--white);}
.valora .ip-node.hub{background:rgba(245,105,156,.13);border-color:rgba(245,105,156,.26);color:var(--accent);
  font-size:clamp(22px,2.6vw,34px);padding:clamp(15px,1.5vw,20px) clamp(32px,3.6vw,52px);
  box-shadow:none;}
.valora .ip-arrow{color:var(--accent);font-size:clamp(18px,1.9vw,26px);line-height:1;}

.valora .ip-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:clamp(48px,5.4vw,80px);}
.valora .ip-card{border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--card);
  padding:28px 24px 30px;display:flex;flex-direction:column;gap:16px;
  transition:border-color .4s,transform .5s cubic-bezier(.22,1,.36,1);}
.valora .ip-card:hover{border-color:rgba(245,105,156,.32);transform:translateY(-4px);}
.valora .ip-card .ic{width:48px;height:48px;border-radius:12px;flex:none;background:rgba(228,0,127,.2);border:1px solid #e4007f;color:#fff;
  display:flex;align-items:center;justify-content:center;}
.valora .ip-card .ic svg{width:20px;height:20px;}
.valora .ip-card h4{font-size:18px;font-weight:500;letter-spacing:-0.03em;color:var(--white);}
.valora .ip-card p{margin-top:auto;font-size:13.5px;line-height:1.5;letter-spacing:-0.01em;color:var(--muted);}
/* Figma 165:1346 — 카드: 웜베이지 아이콘 타일(#8f7b57 아이콘), 콘텐츠 상단 그룹핑, gap 세로>가로 */
.valora #platform .ip-cards{gap:clamp(28px,3.4vw,50px) 8px;margin-top:clamp(40px,5vw,64px);}
.valora #platform .ip-card{gap:0;padding:24px;border-radius:16px;}
.valora #platform .ip-card .ic{background:rgba(233,229,222,.6);border:0;color:#8f7b57;margin-bottom:clamp(22px,2.4vw,32px);}
.valora #platform .ip-card .ic svg{width:25px;height:25px;stroke-width:1.9;}
.valora #platform .ip-card h4{font-size:22px;letter-spacing:-0.04em;}
.valora #platform .ip-card p{margin-top:10px;font-size:16px;line-height:1.35;}

@media (max-width:1080px){ .valora .ip-cards{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){ .valora .ip-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){ .valora .ip-cards{grid-template-columns:1fr;}}

/* ===================== STICKY TIMELINE (Purevé: Routine Steps) ===================== */
/* Figma 5:8885 — 제목 상단 레일 + 세로 타임라인 (프로세스 카드 없음) */
.valora .tl{display:block;}
.valora .tl-head{position:relative;min-height:clamp(52px,6vw,90px);margin-bottom:clamp(32px,4vw,52px);}
.valora .tl-head .eyebrow{position:absolute;left:0;top:10px;margin-bottom:0;}
.valora .tl-head h2.sec{padding-left:26%;}
.valora .tl-head .ip-sub{padding-left:26%;}
.valora .tl-steps{display:flex;flex-direction:column;max-width:820px;margin-left:26%;}
@media (max-width:900px){ .valora .tl-head h2.sec,.valora .tl-head .ip-sub{padding-left:0;} .valora .tl-steps{margin-left:0;max-width:none;} }
.valora .tl-step{display:grid;grid-template-columns:auto 1fr;gap:22px;}
.valora .tl-ind{display:flex;flex-direction:column;align-items:center;gap:8px;}
.valora .tl-ind .dot{width:34px;height:34px;border-radius:var(--r-pill);border:1px solid #e4007f;background:rgba(228,0,127,.2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:#fff;flex:none;}
.valora .tl-ind .ln{flex:1;width:1px;background:var(--surface);min-height:26px;}
.valora .tl-step:last-child .tl-ind .ln{display:none;}
.valora .tl-body{padding-bottom:26px;}
.valora .tl-card{border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--card);padding:24px 26px;transition:border-color .4s,transform .5s cubic-bezier(.22,1,.36,1);}
.valora .tl-step.in .tl-card{border-color:rgba(245,105,156,.28);}
.valora .tl-card .num{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.55);}
.valora .tl-card h4{margin-top:12px;font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-0.03em;color:var(--white);}

/* Process(#how) 타임라인 = Difference와 동일 UI (Figma 96:1073) — id 스코프로 라이트 오버라이드 우선 */
.valora #how .tl-steps{gap:24px;padding:20px 0;position:relative;}
.valora #how .tl-step{grid-template-columns:48px 1fr;gap:20px;align-items:start;position:relative;}
/* 연결선을 step마다 '다음 dot까지'만 그려 마지막 dot(05)에서 끝나게 */
.valora #how .tl-step:not(:last-child)::after{content:"";position:absolute;left:23px;top:24px;width:2px;height:calc(100% + 24px);background:#8f7b57;opacity:.2;z-index:0;}
.valora #how .tl-ind{display:block;position:relative;z-index:1;}
.valora #how .tl-ind .dot{width:48px;height:48px;border-radius:999px;border:1px solid #8f7b57;background:#faf8f5;color:#8f7b57;font-family:var(--sans);font-size:21.9px;font-weight:500;letter-spacing:-0.04em;}
.valora #how .tl-ind .ln{display:none;}
.valora #how .tl-body{padding-bottom:0;}
.valora #how .tl-card,.valora #how .tl-step.in .tl-card{background:transparent;border:1px solid rgba(233,229,222,.6);border-radius:16px;padding:24px;transform:none;}
.valora #how .tl-card .num{font-family:var(--sans);font-size:16.5px;letter-spacing:-0.03em;color:#0a0a0a;opacity:.55;}
.valora #how .tl-card h4{margin-top:8px;font-size:21.9px;font-weight:500;letter-spacing:-0.035em;color:#0a0a0a;line-height:1.32;word-break:keep-all;}

/* ===================== CHANNELS (Figma 5:8945 — #111 panel, 2×3 overlay cards) ===================== */
.valora #channels{background:#111;}
.valora .chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:clamp(44px,5vw,64px);}
.valora .chan-card{position:relative;height:clamp(340px,42vw,608px);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:42px;isolation:isolate;}
.valora .chan-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:transform .7s cubic-bezier(.22,1,.36,1);}
.valora .chan-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.55) 100%);}
.valora .chan-card:hover .chan-img{transform:scale(1.05);}
.valora .chan-lbl{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;}
.valora .chan-lbl .tag{font-size:15px;font-weight:400;letter-spacing:-0.3px;color:var(--white);}
.valora .chan-lbl h3{font-size:clamp(24px,3vw,37px);font-weight:500;letter-spacing:-0.8px;line-height:1.05;color:var(--white);}
@media (max-width:720px){ .valora .chan-grid{grid-template-columns:1fr;} .valora .chan-card{padding:28px;} }

/* ===================== PILLARS (Purevé: Pricing Cards) ===================== */

/* ===================== EDITORIAL GRID (Purevé: CMS Blog List) ===================== */
/* Why Vietnam — 3열 2행 균일 그리드 · 카드 규격 통일
   섹션 스코프 토큰: 네온 마젠타 + 다크 딥그레이 프레임 */
/* ===================== WHY VIETNAM ================================
   캡션(좌) + 대형 중앙 헤드라인 + 아이콘 카드 3×2
   =================================================================== */
.valora .vt-title{font-family:var(--display);font-weight:500;font-size:clamp(32px,5vw,64px);line-height:1.1;
  letter-spacing:-0.01em;color:var(--white);text-transform:uppercase;}
.valora .vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:clamp(34px,4.2vw,60px);}
/* Figma 5:9090 — 카드: 투명 배경 + #222 테두리 (채움 없음) */
.valora .vt-card{border-radius:16px;border:1px solid #222;background:transparent;
  padding:24px;display:flex;flex-direction:column;transition:border-color .4s;}
.valora .vt-card:hover{border-color:rgba(245,105,156,.4);}
.valora .vt-ic{width:48px;height:48px;border-radius:12px;flex:none;background:rgba(228,0,127,.2);border:1px solid #e4007f;color:#fff;display:flex;align-items:center;justify-content:center;}
.valora .vt-ic svg{width:25px;height:25px;}
.valora .vt-card h4{margin-top:32px;font-size:22px;font-weight:500;
  letter-spacing:-0.96px;line-height:31.2px;color:var(--white);}
.valora .vt-card p{margin-top:10px;font-size:16.5px;line-height:21.6px;letter-spacing:-0.72px;
  color:var(--white);opacity:.8;word-break:keep-all;}

@media (max-width:1080px){ .valora .vt-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){ .valora .vt-grid{grid-template-columns:1fr;}}

/* ===================== PERFORMANCE FLOW (기획안 9. Why VALORA — 6단계 밸류체인) =====
   재고에서 재구매까지 단일 섹션으로 정리. 마퀴 대신 스텝 레일.
   =================================================================== */
.valora .pf{margin-top:clamp(44px,5vw,68px);}
/* Figma 5:9232 — 2×3 넘버 카드 그리드 */
.valora .pf-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.valora .pf-step{position:relative;border:1px solid var(--hairline);background:var(--card);border-radius:var(--r-md);
  padding:clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px) clamp(28px,2.6vw,36px);display:flex;flex-direction:column;transition:border-color .35s;}
.valora .pf-step:hover{border-color:rgba(245,105,156,.28);}
.valora .pf-num{display:block;font-family:var(--mono);font-size:16px;line-height:1;letter-spacing:0;color:var(--accent);margin-bottom:clamp(36px,4vw,64px);}
.valora .pf-rail{display:none;}
.valora .pf-step h4{font-size:clamp(19px,1.9vw,22px);font-weight:500;letter-spacing:-0.03em;color:var(--white);}
.valora .pf-step p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted);letter-spacing:-0.01em;}

/* How it Works (BEYOND DISTRIBUTION) = Figma 96:1552 — 좌 304px 여백 + 우 3열×2행 컴팩트 카드 */
.valora #flow .wrap{position:relative;}
.valora #flow > .wrap > .eyebrow{position:absolute;left:var(--gutter);top:4px;margin:0;}
.valora #flow .sec{padding-left:26%;}
.valora #flow .ip-sub{padding-left:26%;}
.valora #flow .pf{padding-left:26%;margin-top:clamp(40px,5vw,64px);}
.valora #flow .pf-chain{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 8px;}
.valora #flow .pf-rail{display:none;}
.valora #flow .pf-step,.valora #flow .pf-step:hover{display:flex;flex-direction:column;justify-content:center;min-height:178px;padding:24px;background:transparent;border:1px solid rgba(233,229,222,.6);border-radius:16px;transform:none;}
.valora #flow .pf-num{font-family:var(--sans);font-size:20px;font-weight:500;letter-spacing:-0.04em;line-height:26px;color:#e4007f;margin:0 0 clamp(28px,3vw,40px) 0;}
.valora #flow .pf-step h4{font-size:22px;font-weight:500;letter-spacing:-0.045em;line-height:31.2px;color:#0a0a0a;margin:0;}
.valora #flow .pf-step p{margin-top:11px;font-size:14.6px;line-height:20.8px;letter-spacing:-0.02em;color:#0a0a0a;opacity:.7;}
@media (max-width:900px){
  .valora #flow > .wrap > .eyebrow{position:static;margin-bottom:14px;}
  .valora #flow .sec,.valora #flow .ip-sub,.valora #flow .pf{padding-left:0;}
  .valora #flow .pf-chain{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){ .valora #flow .pf-chain{grid-template-columns:1fr;} }
@media (max-width:640px){ .valora .pf-chain{grid-template-columns:1fr;}}
/* 성과 요약 — 여기서 끝나는 회사 vs 이어가는 VALORA (기획안 10. Our Difference) */
.valora .pf-loop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(40px,4.4vw,60px);padding-top:28px;border-top:1px solid var(--surface);}
.valora .pf-loop div{display:flex;flex-direction:column;gap:12px;}
.valora .pf-loop span{align-self:flex-start;font-family:var(--mono);font-size:12px;line-height:1;
  letter-spacing:.08em;color:var(--muted);padding:7px 12px;border-radius:var(--r-pill);
  background:var(--surface);}
.valora .pf-loop b{font-family:var(--sans);font-size:clamp(15px,1.6vw,19px);font-weight:500;
  line-height:1.4;letter-spacing:-0.03em;color:var(--muted);}
.valora .pf-loop .on span{background:var(--accent);color:var(--black);font-weight:600;}
.valora .pf-loop .on b{color:var(--white);}

@media (max-width:1080px){
  .valora .pf-chain{grid-template-columns:repeat(3,1fr);row-gap:clamp(28px,3.4vw,40px);}
  .valora .pf-step:nth-child(3) .pf-rail::before{display:none;}}
@media (max-width:640px){
  .valora .pf-loop{grid-template-columns:1fr;}
  .valora .pf-chain{grid-template-columns:1fr;row-gap:0;}
  .valora .pf-step{display:grid;grid-template-columns:44px 1fr;column-gap:18px;
    grid-template-areas:'rail num' 'rail title' 'rail desc';padding-bottom:26px;}
  .valora .pf-num{grid-area:num;}
    .valora .pf-step h4{grid-area:title;margin-top:6px;}
  .valora .pf-step p{grid-area:desc;}
  .valora .pf-rail{grid-area:rail;height:auto;width:12px;margin:0;justify-self:center;align-self:stretch;}
  .valora .pf-rail::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:1px;transform:translateX(-50%);}
  .valora .pf-step:first-child .pf-rail::before{top:6px;bottom:auto;height:100%;}
  .valora .pf-step:last-child .pf-rail::before{display:block;bottom:auto;height:6px;}
  .valora .pf-rail i{left:50%;top:6px;transform:translate(-50%,0);}}

/* ===================== 공통: 캡션(1열) + 헤드카피·콘텐츠(2~4열) ==========
   [About] · Why Now 과 동일한 정렬 체계
   =================================================================== */
.valora .hsplit{display:grid;grid-template-columns:repeat(4,minmax(50px,1fr));gap:8px;}
.valora .hsplit > .eyebrow{grid-column:1;align-self:start;margin-bottom:0;}
.valora .hs-title{grid-column:2 / -1;}
.valora .hs-body{grid-column:2 / -1;margin-top:clamp(40px,4.6vw,64px);}
.valora .hs-body > *:first-child{margin-top:0;}
@media (max-width:1080px){ .valora .hs-body{grid-column:1 / -1;}}
@media (max-width:810px){
  .valora .hsplit{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
  .valora .hs-body{margin-top:8px;}}

/* ===================== WHY NOW =====================================
   Sensoria [About Us] 레이아웃 이식 + 시안 반영
   헤더 : 캡션 1열 / 헤드라인 2단(대·소) + 서브 지표 행
   카드 : 아이콘+라벨(행) → 설명 → 수치+배지 → 보조라벨 → 그래프(200px)
   =================================================================== */
.valora #whynow{padding:200px 40px 120px;display:flex;flex-direction:column;
  align-items:center;gap:64px;background:var(--ink);}
.valora .wn-wrap{display:grid;grid-template-columns:repeat(4,minmax(50px,1fr));gap:8px;
  width:100%;max-width:var(--maxw);}
.valora .wn-wrap > .eyebrow{grid-column:1;align-self:start;margin-bottom:0;}
.valora .wn-title{grid-column:2 / -1;display:flex;flex-direction:column;gap:14px;}
/* Challenge 2행 — Why Now 부제와 동일한 크기 */
.valora #challenge h2.sec .soft{display:inline-block;font-size:clamp(22px,3vw,42px);
  line-height:1.18;letter-spacing:-0.04em;}
.valora .wn-h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.4vw,62px);line-height:1.1;
  letter-spacing:-0.045em;color:var(--white);word-break:keep-all;margin:0;}
.valora .wn-h2{font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,42px);line-height:1.18;
  letter-spacing:-0.04em;color:var(--white80);word-break:keep-all;margin:0;}
.valora .wn-sub{display:flex;align-items:center;gap:20px;margin-top:34px;}
.valora .wn-sub svg{width:22px;height:22px;color:var(--muted);flex:none;}
.valora .wn-sub p{font-size:clamp(15px,1.4vw,19px);letter-spacing:-0.02em;color:var(--white80);}
.valora .wn-sub b{font-weight:500;color:var(--white);}

.valora .wn-grid{grid-column:2 / -1;margin-top:64px;display:flex;flex-flow:row;
  align-items:stretch;gap:8px;width:100%;overflow:hidden;}
.valora .wn-card{flex:1 0 0;width:1px;border:1px solid var(--surface);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  overflow:hidden;transition:border-color .4s;}
.valora .wn-card:hover{border-color:var(--line);}
.valora .wn-top{display:flex;align-items:center;gap:10px;}
.valora .wn-top svg{width:19px;height:19px;color:var(--accent);flex:none;}
.valora .wn-name{font-size:18px;font-weight:500;letter-spacing:-0.02em;color:var(--white);}
.valora .wn-desc{font-size:clamp(17px,1.8vw,21px);line-height:1.42;letter-spacing:-0.025em;
  color:var(--white);word-break:keep-all;}
.valora .wn-figure{display:flex;align-items:center;gap:12px;margin-top:8px;}
.valora .wn-num{font-size:clamp(30px,2.9vw,38px);font-weight:500;line-height:1;
  letter-spacing:-0.04em;color:var(--white);}
.valora .wn-badge{padding:6px 12px;border-radius:var(--r-pill);background:var(--white);
  color:var(--black);font-size:12px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;}
.valora .wn-sublabel{font-size:13.5px;letter-spacing:-0.01em;color:var(--muted);margin-top:-14px;}

/* 그래프 컨테이너 (원본 Container 200px) */
.valora .wn-vis{margin-top:auto;width:100%;height:200px;position:relative;overflow:hidden;}
.valora .wn-graph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;}
.valora .wn-bars{display:flex;align-items:flex-end;gap:8px;flex:1;min-height:0;}
.valora .wn-bars i{flex:1;height:var(--h);border-radius:8px 8px 4px 4px;background:var(--surface);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;}
.valora .wn-bars i.on{background:var(--accent);}
.valora .wn-axis{display:flex;gap:8px;}
.valora .wn-axis span{flex:1;text-align:center;font-size:12px;line-height:1;
  letter-spacing:-0.01em;color:var(--muted);}
/* 원그래프 (카드 3) */
.valora .wn-donut{position:absolute;inset:0;display:flex;align-items:center;gap:clamp(12px,1.3vw,20px);}
.valora .wn-ring{position:relative;flex:none;width:clamp(96px,42%,128px);aspect-ratio:1;}
.valora .wn-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.valora .wn-ring .track{fill:none;stroke:var(--surface);stroke-width:18;}
.valora .wn-ring .arc{fill:none;stroke:var(--accent);stroke-width:18;stroke-linecap:round;}
.valora .wn-ring .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(20px,2vw,25px);font-weight:500;letter-spacing:-0.03em;color:var(--white);}
.valora .wn-legend{display:flex;flex-direction:column;gap:13px;min-width:0;flex:1;}
.valora .wn-legend div{display:flex;align-items:center;gap:8px;font-size:12px;
  letter-spacing:-0.01em;color:var(--white80);white-space:nowrap;}
.valora .wn-legend i{width:9px;height:9px;border-radius:50%;background:var(--surface);flex:none;}
.valora .wn-legend i.on{background:var(--accent);}
.valora .wn-legend b{margin-left:auto;padding-left:6px;font-weight:500;color:var(--white);}

@media (max-width:1080px){
  .valora #whynow{padding:100px 32px;gap:56px;}
  .valora .wn-grid{grid-column:1 / -1;margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(50px,1fr));
    grid-auto-rows:minmax(0,1fr);justify-content:center;}
  .valora .wn-card{flex:none;place-self:start;width:100%;height:100%;}
  .valora .wn-card:last-child{grid-column:span 2;}}
@media (max-width:810px){
  .valora #whynow{padding:80px 20px;gap:48px;}
  .valora .wn-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
  .valora .wn-grid{margin-top:24px;}
  .valora .wn-grid{grid-template-columns:repeat(1,minmax(50px,1fr));}
  .valora .wn-card:last-child{grid-column:span 1;}}
/* ===================== ABOUT (Sensoria: Analysis 레이아웃) ===========
   캡션(좌) + 대형 중앙 헤드라인 → 미디어 블록 → 지표 5종 + 본문 카피
   =================================================================== */
.valora #about .ab-head{display:grid;grid-template-columns:.26fr .74fr;gap:clamp(20px,3vw,48px);align-items:start;}
.valora #about .ab-head .eyebrow{margin-bottom:0;padding-top:10px;}
.valora .ab-headmain{max-width:900px;}
.valora .ab-title{font-family:var(--display);font-weight:500;font-size:clamp(42px,6.1vw,78px);line-height:1.1;
  letter-spacing:-0.01em;color:var(--white);text-align:left;text-transform:uppercase;}
.valora .ab-lead{margin-top:clamp(28px,4vw,64px);display:flex;align-items:center;gap:24px;}
.valora .ab-lead .plus{flex:none;font-size:32px;line-height:1;color:var(--white);opacity:.3;}
.valora .ab-lead p{max-width:500px;font-size:16.5px;line-height:21.6px;letter-spacing:-0.72px;color:var(--white);}
.valora .ab-media{position:relative;margin-top:clamp(28px,3.4vw,48px);width:100%;
  /* 가로폭은 유지한 채 세로만 150px 축소 (원래 비율 16:10 기준) */
  height:calc((min(100vw, var(--maxw)) - var(--gutter) * 2) * 0.625 - 150px);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hairline);background:linear-gradient(160deg,var(--surface),var(--black));
  display:flex;align-items:center;justify-content:center;}
.valora .ab-media{transform:scale(var(--ab-s,1));transform-origin:50% 50%;will-change:transform;}
@media (prefers-reduced-motion:reduce){ .valora .ab-media{transform:none;}}
.valora .ab-media img,.valora .ab-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;}
.valora .ab-media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.24) 0%, rgba(10,10,10,.10) 45%, rgba(10,10,10,.46) 100%);}
.valora .ab-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(36px,4vw,60px);}
.valora .ab-stat .n{font-size:clamp(34px,4.3vw,56px);font-weight:500;line-height:1;white-space:nowrap;
  letter-spacing:-0.055em;color:var(--white);}
.valora .ab-stat .n em{font-style:normal;font-size:.44em;font-weight:500;letter-spacing:-0.04em;
  margin-left:3px;color:var(--white);}
.valora .ab-stat p{margin-top:6px;font-size:15px;line-height:1.38;letter-spacing:-0.03em;
  color:rgba(255,255,255,.7);word-break:keep-all;}
.valora .ab-note{display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,28px);}
.valora .ab-note svg{width:20px;height:20px;flex:none;margin-top:4px;color:var(--muted);}
.valora .ab-note p{font-size:clamp(14px,1.2vw,16px);line-height:1.55;letter-spacing:-0.015em;
  color:var(--white80);word-break:keep-all;}
.valora .ab-note b{font-weight:500;color:var(--white);}

@media (max-width:1080px){
  .valora .ab-foot{grid-template-columns:1fr;}
  .valora .ab-stats{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){
  .valora .ab-stats{grid-template-columns:repeat(2,1fr);}
  .valora .ab-media{height:auto;aspect-ratio:4/3;}}

/* ===================== STICKY COMPARE (Before / After) ===================== */
/* Before / After VALORA — 좌우 카드 높이 균등 + 톤 분리
   항목 수가 달라도(5 vs 7) 컨테이너 높이를 맞추고 항목이 남는 높이를 균등 분배 */

/* ===================== OUR DIFFERENCE (스텝 타임라인 대비) ===========
   좌: 다른 회사(뮤트) / 우: VALORA(액센트 강조) — How It Works 스텝 구조 재사용
   =================================================================== */
/* 제목 상단 풀폭, 두 컬럼은 상단이 정렬된 대칭 타임라인 (Figma 5:9330) */
/* Difference — 좌:아이브로우+이미지(304px) / 우:제목+Others·VALORA 2열 */
.valora .dif{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);}
.valora .dif-head{display:grid;grid-template-columns:clamp(210px,22vw,304px) 1fr;
  gap:clamp(24px,3vw,42px);align-items:start;}
.valora .dif-head .eyebrow{padding-top:16px;}
.valora .dif-cols{display:grid;grid-template-columns:clamp(210px,22vw,304px) 1fr;
  gap:clamp(24px,3vw,42px);align-items:stretch;}
.valora .dif-img{position:relative;border-radius:16px;overflow:hidden;min-height:clamp(360px,40vw,568px);}
.valora .dif-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.valora .dif-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 66%,rgba(10,10,10,.86) 100%);}
.valora .dif-img-mark{position:absolute;top:26px;left:26px;z-index:2;font-family:var(--display);
  font-size:22px;letter-spacing:.06em;color:#faf8f5;opacity:.95;}
.valora .dif-right{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;}
.valora .dif-col > h4{font-family:var(--sans);font-size:16.5px;font-weight:500;letter-spacing:-0.03em;
  color:#0a0a0a;margin-bottom:2px;}
.valora .dif-col.after > h4{color:#f5699c;}
.valora .dif-steps{display:flex;flex-direction:column;gap:24px;padding:20px 0;position:relative;}
/* 연결선을 step마다 '다음 dot까지'만 그려 마지막 dot에서 끝나게(카드 높이 가변에도 안 삐져나옴) */
.valora .dif-step:not(:last-child)::after{content:"";position:absolute;left:23px;top:24px;width:2px;
  height:calc(100% + 24px);background:#8f7b57;opacity:.1;z-index:0;}
.valora .dif-col.after .dif-step:not(:last-child)::after{background:#e4007f;opacity:.2;}
.valora .dif-step{display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start;position:relative;}
.valora .dif-ind .dot{width:48px;height:48px;border-radius:999px;flex:none;
  border:2px solid #8f7b57;background:#faf8f5;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:500;letter-spacing:-0.04em;color:#8f7b57;position:relative;z-index:1;}
.valora .dif-ind .ln{display:none;}
.valora .dif-body{padding-bottom:0;}
.valora .dif-card{border-radius:16px;border:1px solid rgba(233,229,222,.6);background:transparent;
  padding:24px;transition:border-color .4s;}
.valora .dif-card .num{font-size:16.5px;letter-spacing:-0.03em;color:#0a0a0a;opacity:.55;}
.valora .dif-card h5{margin-top:8px;font-size:21.9px;font-weight:500;
  letter-spacing:-0.035em;color:#0a0a0a;line-height:1.32;word-break:keep-all;}
/* VALORA — 아웃라인 마젠타 번호원 */
.valora .dif-col.after .dif-ind .dot{border:1px solid #e4007f;background:#faf8f5;color:#e4007f;}
.valora .dif-col.after .dif-card .num{color:#0a0a0a;opacity:.55;}
.valora .dif-col.after .dif-card h5{color:#0a0a0a;}

@media (max-width:900px){
  .valora .dif-head{grid-template-columns:1fr;gap:12px;}
  .valora .dif-cols{grid-template-columns:1fr;}
  .valora .dif-img{display:none;}
  .valora .dif-right{grid-template-columns:1fr;gap:36px;}}

/* =========================================================================
   MARKET SIGNAL — Sensoria [Concept] 섹션 레이아웃/인터랙션 이식
   · 100vh 액센트 패널을 sticky 로 고정하고 중앙 카피를 스크롤에 따라 scale-in
   · 그 위로 원근 기울인 수치 카드 월(wall)이 밀려 올라온다
   ========================================================================= */
.valora .cs{position:relative;padding:0;overflow:visible;}
.valora .cs-stage{position:sticky;top:0;z-index:1;height:100vh;background:#c10064;
  display:flex;align-items:center;justify-content:center;padding:120px var(--gutter);}
/* Figma 5:9189 — 핑크 섹션 하단 간단 텍스트 스탯 */
.valora .cs-stats{position:absolute;left:0;right:0;bottom:clamp(36px,6vh,84px);z-index:3;
  display:flex;justify-content:center;gap:clamp(36px,7vw,130px);padding:0 var(--gutter);}
.valora .cs-stat{display:flex;flex-direction:column;gap:6px;}
.valora .cs-stat .cn{font-size:clamp(26px,3.2vw,42px);font-weight:600;letter-spacing:-0.03em;color:#fff;line-height:1;}
.valora .cs-stat .cn em{font-style:normal;font-size:.48em;font-weight:500;margin-left:3px;}
.valora .cs-stat p{font-size:13px;line-height:1.4;color:rgba(255,255,255,.72);letter-spacing:-0.01em;}
@media (max-width:820px){ .valora .cs-stats{position:static;flex-direction:column;gap:22px;align-items:center;text-align:center;margin-top:40px;} }
.valora .cs-inner{max-width:min(94vw,1320px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2vw,28px);text-align:center;
  transform:scale(var(--cs-s,.4));opacity:var(--cs-o,.3);
  transform-origin:50% 50%;will-change:transform,opacity;}
.valora .cs-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:13.5px;letter-spacing:-0.01em;color:var(--white);}
.valora .cs-eyebrow .dim{opacity:1;}
.valora .cs-title{font-family:var(--display);font-size:clamp(30px,4.4vw,64px);font-weight:500;line-height:1.2;
  letter-spacing:-0.01em;color:var(--white);word-break:keep-all;}
.valora .cs-sub{font-family:var(--display);font-size:clamp(22px,3vw,40px);font-weight:400;line-height:1.2;
  letter-spacing:-0.01em;color:rgba(255,255,255,.8);word-break:keep-all;}
.valora .cs-wall{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  padding:clamp(20px,4vw,64px) var(--gutter) clamp(40px,6vw,90px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,40px);}
/* 카드 내부는 Why Now 카드와 동일한 구조(.wn-*)를 그대로 쓴다 */
.valora .cs-card{border-radius:16px;border:1px solid var(--surface);background:var(--black);
  padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  overflow:hidden;transition:border-color .4s;}
.valora .cs-card:hover{border-color:var(--line);}

@media (max-width:820px){
  .valora .cs-wall{grid-template-columns:1fr;}
  /* 모바일: 텍스트 위 / 스탯 아래로 세로 스택 (좌우로 깨지지 않게) */
  .valora .cs-stage{height:auto;min-height:auto;position:static;flex-direction:column;justify-content:flex-start;gap:44px;padding:96px var(--gutter) 72px;}
  .valora .cs-inner{transform:none;opacity:1;width:100%;}
  .valora .cs-stats{margin-top:0;}}
@media (prefers-reduced-motion:reduce){ .valora .cs-inner{transform:none;opacity:1;}}

/* ===================== FAQ ===================== */
/* Figma 5:9448 — two-column grid: 304px rail + 928px content, 8px gap (1240px) */
.valora .faq-head{display:grid;grid-template-columns:304px 1fr;gap:8px;align-items:start;margin-bottom:64px;}
.valora .faq-head .eyebrow{margin:0;}
.valora .faq-head h2.sec{margin:0;font-size:clamp(40px,10.5vw,77.3px);line-height:1.04;letter-spacing:-0.042em;font-weight:500;}
.valora .faq-layout{display:grid;grid-template-columns:304px 1fr;gap:8px;align-items:start;}
.valora .faq-aside{position:sticky;top:112px;border-radius:16px;border:1px solid #222;background:transparent;padding:24px;display:flex;flex-direction:column;gap:24px;overflow:hidden;}
.valora .faq-aside-ic{width:25px;height:25px;color:var(--white);}
.valora .faq-aside-ic svg{width:100%;height:100%;stroke:currentColor;}
.valora .faq-aside-tx{display:flex;flex-direction:column;gap:11.4px;}
.valora .faq-aside h4{font-size:21.6px;font-weight:500;letter-spacing:-0.96px;line-height:31.2px;color:var(--white);}
.valora .faq-aside p{font-size:14.6px;letter-spacing:-0.5px;line-height:20.8px;color:var(--white);opacity:.7;}
.valora .faq-aside .pill{align-self:stretch;justify-content:center;padding:14px 24px;font-size:17px;letter-spacing:-0.72px;}
.valora .faq-list{display:flex;flex-direction:column;gap:8px;}
.valora .faq-item{border:1px solid #222;border-radius:14px;overflow:hidden;background:transparent;}
.valora .faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:56px;font-size:16.6px;font-weight:500;letter-spacing:-0.72px;line-height:21.6px;color:var(--white);}
.valora .faq-ic{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;}
.valora .faq-ic svg{width:24px;height:24px;color:var(--white);}
.valora .faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1);}
.valora .faq-item.open .faq-a{max-height:320px;}
.valora .faq-a p{padding:11.4px 24px 24px;font-size:14.6px;font-weight:400;line-height:20.8px;letter-spacing:-0.64px;color:var(--white);opacity:.8;}

/* ===================== CONTACT (Purevé: Section / Contact) ===================== */
/* ===================== CTA (Figma 5:9578 — #111 panel, serum image + underline form) ===================== */
.valora .cta{position:relative;}
.valora #partnership{background:#111;}
.valora .cta-block{position:relative;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(36px,5vw,64px);}
.valora .cta-h{max-width:820px;}
.valora .cta-row{display:flex;gap:clamp(18px,2vw,24px);align-items:stretch;}
.valora .cta-img{flex:none;width:clamp(220px,24vw,308px);border-radius:16px;overflow:hidden;background:#0b0b0b;}
.valora .cta-img img{width:100%;height:100%;object-fit:cover;display:block;}
.valora .cform{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px);}
.valora .cform-row{display:flex;gap:clamp(20px,2.4vw,32px);}
.valora .cf{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.valora .cf .lab{font-size:16.7px;font-weight:500;letter-spacing:-0.72px;color:var(--white);opacity:.8;}
.valora .cf .lab i{font-style:normal;color:inherit;}
.valora .cf input,.valora .cf select,.valora .cf textarea{width:100%;background:transparent;color:var(--white);border:0;border-bottom:1px solid #404040;border-radius:0;padding:12px 12px 12px 0;font-size:16.7px;font-family:inherit;letter-spacing:-0.02em;transition:border-color .3s;}
.valora .cf select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239C9C9C' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;}
.valora .cf select option{background:#111;color:var(--white);}
.valora .cf textarea{resize:vertical;min-height:100px;}
.valora .cf input::placeholder,.valora .cf textarea::placeholder{color:#9c9c9c;}
.valora .cf input:focus,.valora .cf select:focus,.valora .cf textarea:focus{outline:none;border-bottom-color:var(--white);}
.valora .cform-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.valora .cform-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:54px;background:#fff;color:#0a0a0a;border:1px solid #e5e5e5;border-radius:40px;padding:0 26px;font-size:16.9px;font-weight:500;line-height:1;letter-spacing:-0.72px;font-family:inherit;cursor:pointer;transition:transform .3s,box-shadow .3s;}
.valora .cform-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.35);}
.valora .pf-msg{font-family:var(--mono);font-size:12px;color:var(--accent);}
/* Figma 148:9755 — 문의 카테고리 세그먼트 토글 + 리드 */
.valora .ct-cat{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);}
.valora .ct-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;align-self:flex-start;
  background:rgba(233,229,222,.6);border:1px solid rgba(233,229,222,.6);border-radius:40px;}
.valora .ct-tab{padding:14px 22px;border:0;border-radius:40px;background:transparent;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-0.02em;color:#8f7b57;
  white-space:nowrap;transition:background .3s;}
.valora .ct-tab.on{background:#faf8f5;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.valora .ct-lead{display:flex;gap:24px;align-items:center;}
.valora .ct-lead .plus{flex:none;font-size:32px;line-height:1;color:#0a0a0a;opacity:.3;}
.valora .ct-lead p{font-size:17px;letter-spacing:-0.02em;color:#0a0a0a;word-break:keep-all;}
/* 탭별 폼 필드 그룹 (활성 하나만 표시) */
.valora .ct-fields{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px);}
.valora .ct-fields[hidden]{display:none;}
/* 커스텀 셀렉트 — 네이티브 드롭다운(OS 검정/파랑) 대신 테마 일치 패널 */
.valora .sel{position:relative;width:100%;}
.valora .sel-native{display:none;}
.valora .sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;border-bottom:1px solid #d9cbbc;border-radius:0;
  padding:12px 2px 12px 0;font-family:inherit;font-size:16.7px;letter-spacing:-0.02em;
  color:#0a0a0a;text-align:left;cursor:pointer;transition:border-color .3s;}
.valora .sel-btn .sel-val.placeholder{color:#9c9c9c;}
.valora .sel-chev{flex:none;width:12px;height:12px;color:#8f7b57;transition:transform .25s;}
.valora .sel.open .sel-btn{border-bottom-color:#c10064;}
.valora .sel.open .sel-chev{transform:rotate(180deg);color:#c10064;}
.valora .sel-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;
  list-style:none;background:#fffdfb;border:1px solid rgba(233,229,222,.9);border-radius:12px;
  box-shadow:0 18px 44px rgba(30,15,20,.16);max-height:288px;overflow:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s;}
.valora .sel.open .sel-list{opacity:1;transform:none;pointer-events:auto;}
.valora .sel-opt{padding:11px 14px;border-radius:8px;font-size:15.5px;letter-spacing:-0.02em;
  color:#0a0a0a;cursor:pointer;transition:background .15s,color .15s;}
.valora .sel-opt[data-empty]{color:#9c9c9c;}
.valora .sel-opt:hover,.valora .sel-opt.active{background:rgba(193,0,100,.08);color:#c10064;}
/* 컨택트 폼 언더라인/라벨 (Figma 색상-3 #8f7b57) */
.valora .contact-page .cf .lab{opacity:.8;}
/* 모든 필드 언더라인을 Figma대로 #8f7b57로 통일(입력필드가 연한 #d9cbbc로 어긋나 셀렉트와 달랐음) */
.valora .light.contact-page .cf input,.valora .light.contact-page .cf select,.valora .light.contact-page .cf textarea{border-bottom-color:#d9cbbc;}
.valora .light.contact-page .cf input:focus,.valora .light.contact-page .cf select:focus,.valora .light.contact-page .cf textarea:focus{border-bottom-color:#c10064;}
@media (max-width:820px){
  .valora .cta-row{flex-direction:column;}
  .valora .cta-img{width:100%;height:200px;}
  .valora .cform-row{flex-direction:column;gap:22px;}
}
@media (max-width:560px){
  .valora .ct-tabs{width:100%;}
  .valora .ct-tab{flex:1 1 auto;padding:12px 12px;font-size:13.5px;text-align:center;}
  .valora .ct-lead{gap:14px;}
  .valora .ct-lead .plus{font-size:24px;}
}

/* ===================== FOOTER ===================== */
.valora footer{position:relative;border-top:1px solid var(--surface);padding:clamp(60px,7vw,92px) 0 0;overflow:hidden;}
/* Footer (Figma 5:9651) — left brand+contacts, right newsletter+nav+social */
.valora .f-top{display:grid;grid-template-columns:1fr auto;gap:clamp(40px,6vw,120px);align-items:start;}
.valora .f-left{min-width:0;}
.valora .f-logo{font-family:var(--display);font-size:clamp(42px,5vw,62px);line-height:1;letter-spacing:-0.03em;color:var(--white);}
.valora .f-divider{width:54px;height:1px;background:rgba(255,255,255,.2);margin:22px 0 30px;}
.valora .f-tagline .pink{font-size:16.3px;line-height:23.4px;letter-spacing:-0.54px;color:var(--accent);}
.valora .f-tagline .reg{margin-top:2px;font-size:16.3px;line-height:23.4px;letter-spacing:-0.54px;color:rgba(255,255,255,.62);}
.valora .f-contacts{margin-top:44px;display:flex;flex-direction:column;gap:2px;}
.valora .f-contact .lab{display:block;font-size:16.6px;font-weight:500;letter-spacing:-0.72px;color:rgba(255,255,255,.7);}
.valora .f-contact a{display:block;font-size:19.1px;font-weight:500;letter-spacing:-0.64px;line-height:38.4px;color:var(--white);transition:color .25s;}
.valora .f-contact a:hover{color:var(--accent);}
.valora .f-right{width:clamp(300px,34vw,400px);display:flex;flex-direction:column;gap:clamp(40px,5vw,64px);}
.valora .f-news-cap{font-size:14.8px;font-weight:500;letter-spacing:-0.5px;line-height:20.8px;color:var(--white);opacity:.8;}
.valora .f-news-field{position:relative;margin-top:26px;display:flex;align-items:center;border-bottom:1px solid #404040;}
.valora .f-news-field input{flex:1;background:transparent;border:0;color:var(--white);font-family:inherit;font-size:16px;padding:16px 40px 16px 0;outline:none;}
.valora .f-news-field input::placeholder{color:#9c9c9c;}
.valora .f-news-field button{position:absolute;right:0;background:transparent;border:0;color:var(--accent);cursor:pointer;padding:8px;display:flex;}
.valora .f-news-field button svg{width:20px;height:20px;}
.valora .f-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.valora .f-col{display:flex;flex-direction:column;gap:8px;}
.valora .f-col .lab{font-size:14.6px;font-weight:500;letter-spacing:-0.5px;color:rgba(255,255,255,.6);margin-bottom:4px;}
.valora .f-col a{font-size:18.9px;font-weight:500;letter-spacing:-0.8px;line-height:26px;color:var(--white);transition:color .25s;}
.valora .f-col a:hover{color:var(--accent);}
.valora .f-bottom{margin-top:clamp(52px,6vw,84px);border-top:1px solid var(--surface);padding:26px 0 30px;display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:center;}
.valora .f-bottom p{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:28px;flex-wrap:wrap;}
.valora .f-bottom b{font-weight:400;color:rgba(255,255,255,.5);}
@media (max-width:820px){
  .valora .f-top{grid-template-columns:1fr;}
  .valora .f-right{width:100%;}
}
.valora .f-bleed{font-family:var(--display);font-size:clamp(90px,23vw,320px);line-height:.8;letter-spacing:-0.04em;color:var(--white);opacity:.04;text-align:center;padding:0 var(--gutter);margin-top:clamp(20px,4vw,44px);user-select:none;pointer-events:none;white-space:nowrap;}

.valora .totop{position:fixed;right:24px;bottom:24px;z-index:90;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(18,18,18,.8);backdrop-filter:blur(10px);color:var(--white);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility .35s,border-color .3s;}
.valora .totop.show{opacity:1;visibility:visible;transform:none;}
.valora .totop:hover{border-color:var(--accent);color:var(--accent);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .valora .hero-split,.valora .featblock,.valora .featblock.mirror,.valora .tl,.valora .faq-head,.valora .faq-layout,.valora .cta-grid{grid-template-columns:1fr;}
  .valora .faq-head{gap:14px;}
  .valora .featlist{grid-template-columns:repeat(2,1fr);}
  .valora .featblock.mirror .fb-visual,.valora .featblock.mirror .fb-copy{order:initial;}
  .valora .tl-head,.valora .faq-aside{position:static;}
  .valora .bento{grid-template-columns:repeat(2,1fr);}
  .valora .f-grid{grid-template-columns:1fr 1fr;}
  .valora .f-brand{grid-column:1/-1;}}
@media (max-width:820px){
  .valora .nav-links,.valora .nav-right .pill{display:none;}
  .valora .burger{display:flex;}
  /* 언어 토글은 모바일에서도 햄버거 옆에 노출(compact) */
  .valora .lang-seg{gap:2px;padding:3px;}
  .valora .lang-seg-btn{padding:5px 9px;font-size:12.5px;}
  .valora .rail{display:none;}
  /* Challenge 카드: 모바일에서도 가로 2개씩 */
  .valora .bento{grid-template-columns:repeat(2,1fr);}
  /* How it Works 타이틀: 다른 섹션과 동일하게 eyebrow 위, 들여쓰기 없음 */
  .valora .tl-head{min-height:0;margin-bottom:clamp(28px,7vw,44px);}
  .valora .tl-head .eyebrow{position:static;top:auto;margin-bottom:14px;}
  .valora h2.sec{max-width:100%;}
  .valora form.pf{grid-template-columns:1fr;}
  .valora .f-grid{grid-template-columns:1fr;}}

/* 모바일 섹션 헤딩 축소 — clamp min이 커서(40~42px) 좁은 화면에서 과하게 큼 */
/* 모바일 전용 줄바꿈 헬퍼 (데스크톱에선 무시) */
.valora .brm{display:none;}
@media (max-width:640px){ .valora .brm{display:inline;} }

@media (max-width:640px){
  .valora h2.sec,
  .valora #pillars h2.sec,
  .valora .faq-head h2.sec{font-size:clamp(24px,7.4vw,34px);}
  .valora .ab-title{font-size:clamp(30px,8.6vw,42px);}
  .valora .vt-title{font-size:clamp(25px,7.4vw,34px);}
  .valora .sh-quote h2.sec{font-size:clamp(22px,6.2vw,30px);}
  .valora .stmt-h2{font-size:clamp(23px,6.6vw,32px);}
  .valora .stmt-h{font-size:clamp(17px,4.8vw,22px);}}

/* ===================== MOBILE 보정 (≤560px) ===================== */
@media (max-width:560px){
  /* 재고 → VALORA → 성장 : 화살표가 줄 앞에 홀로 떨어지지 않게 세로 체인으로 */
  .valora .ip-flow{flex-direction:column;align-items:stretch;gap:10px;}
  .valora .ip-node{text-align:center;}
  .valora .ip-arrow{align-self:center;transform:rotate(90deg);line-height:1;}
  /* Brand Protection 6원칙 — 2열에서 라벨이 두 줄로 쪼개져 1열로 */
  .valora .featlist{grid-template-columns:1fr;}
  .valora .featitem:nth-child(n+4){border-bottom:0;}
  .valora .featitem:last-child{border-bottom:1px solid var(--surface);}}

/* =========================================================================
   1차 수정 v2 — LIGHT SECTIONS (크림 배경 + 다크 세리프)
   해당 section에 class="light" 추가 → 이 블록이 색을 반전.
   ========================================================================= */
.valora .light{--l-bg:#faf8f5;--l-ink:#0a0a0a;--l-muted:#6b7280;--l-body:rgba(10,10,10,.8);--l-border:rgba(233,229,222,.9);--l-card:#ffffff;--l-icon:#f2ede6;--l-icon-bd:#e7ddd0;
  background:var(--l-bg) !important;color:var(--l-ink);}
/* 제목/서브 */
.valora .light h2.sec,.valora .light .wn-h1,.valora .light .ab-title,.valora .light .vt-title,.valora .light .dif h2.sec,.valora .light .dif-head h2.sec{color:var(--l-ink);}
.valora .light .wn-h2,.valora .light .ip-sub,.valora .light .ab-lead p{color:var(--l-body);}
.valora .light .wn-sub p{color:var(--l-ink);}
.valora .light .wn-sub b{color:var(--l-ink);}
.valora .light .wn-sub svg{color:var(--l-muted);}
.valora .light .hs-title .soft{color:var(--l-body);}
.valora .prot-desc{display:flex;gap:12px;margin-top:18px;max-width:470px;font-size:15px;line-height:1.6;color:#6b7280;}
.valora .prot-desc .plus{flex:none;font-size:20px;line-height:1;color:#9c9c9c;}
/* Where We Are — 사진 콜라주 4열×2행 (좌상단/우하단 통계) */
.valora .wwa-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px;margin-top:clamp(40px,5vw,64px);}
.valora .wwa-photo{border-radius:14px;overflow:hidden;aspect-ratio:1/1.18;background:#efeae2;}
.valora .wwa-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.valora .wwa-stats{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,28px);}
.valora .wwa-kb{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-0.01em;color:#c10064;margin-bottom:6px;}
.valora .wwa-stats .ab-stat .n{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-0.03em;color:#0a0a0a;line-height:1;}
.valora .wwa-stats .ab-stat .n em{font-style:normal;font-size:.44em;font-weight:500;color:#6b7280;margin-left:5px;}
.valora .wwa-stats .ab-stat p{margin-top:8px;font-size:12.5px;line-height:1.45;color:#6b7280;letter-spacing:-0.01em;}
@media (max-width:900px){
  .valora .wwa-grid{grid-template-columns:repeat(2,1fr);}
  .valora .wwa-stats{flex-direction:row;flex-wrap:wrap;gap:18px 24px;grid-column:1/-1;align-items:flex-start;}
  .valora .wwa-stats .wwa-kb{flex:1 1 100%;margin-bottom:2px;}
  .valora .wwa-stats .ab-stat{flex:1 1 40%;}
}
/* Solution — 좌측 이미지 카드 2단 + 라이트 칩 */
.valora .sol-stack{display:flex;flex-direction:column;gap:16px;height:auto;}
.valora .sol-stack .imgcard{flex:none;aspect-ratio:588/518;min-height:0;}
.valora .light .pathrow{border-color:var(--l-border);}
.valora .light .pathrow h4{color:var(--l-muted);}
.valora .light .pathrow.hot h4{color:#e4007f;}
.valora .light .pathrow .n{background:rgba(233,229,222,.6);color:#8f7b57;}
.valora .light .pathrow.hot .n{background:#e4007f;color:#faf8f5;}
.valora .light .eyebrow .dim{color:var(--l-muted);}
.valora .light .ab-lead .plus{color:var(--l-muted);}
/* Brand Partnership 아이브로우: 라이트 섹션에선 흰색이면 안 보임 → 마젠타/그레이 (Figma) */
.valora .light .eyebrow.bp{color:#c10064;}
.valora .light .eyebrow.bp .dim{color:#6b7280;opacity:.7;}
/* 리스트 카드(Why Vietnam/Challenge/Transform/Process/How) → Figma는 투명 배경 + 연한 웜 보더 */
.valora .light .vt-card,.valora .light .bento .b,.valora .light .ip-card,.valora .light .tl-card,.valora .light .pf-step{background:transparent;border-color:rgba(233,229,222,.6);}
/* 일반 카드 → 흰 카드 + 웜 보더 */
.valora .light .railcard{background:var(--l-card);border-color:var(--l-border);}
/* FAQ 아이템: Figma는 배경 없음(투명)+옅은 보더 — dev 흰색이라 크림 섹션에서 튐 */
.valora .light .faq-item{background:transparent;border-color:rgba(233,229,222,.6);}
/* Why Now 카드도 Why Vietnam처럼 크림 섹션에 녹아들게(흰색 X) */
.valora .light .wn-card{background:transparent;border-color:rgba(233,229,222,.6);}
.valora .light .vt-card:hover,.valora .light .bento .b:hover,.valora .light .ip-card:hover,.valora .light .dif-card:hover{border-color:#d9cbbc;}
/* 카드 내부 텍스트 */
.valora .light .vt-card h4,.valora .light .bento .b h4,.valora .light .ip-card h4,.valora .light .tl-card h4,.valora .light .dif-card h5,.valora .light .wn-card h4,.valora .light .wn-h3{color:var(--l-ink);}
.valora .light .vt-card p,.valora .light .ip-card p,.valora .light .tl-card .num,.valora .light .dif-card .num,.valora .light .wn-card p{color:var(--l-body);opacity:1;}
.valora .light .bento .b .badge{color:#8f7b57;border-color:#8f7b57;}
/* About(Why Now) 차트 카드 — 라이트에서 흰 텍스트가 묻히지 않게 반전 */
.valora .light .wn-name,.valora .light .wn-num,.valora .light .wn-ring .mid,.valora .light .wn-legend div,.valora .light .wn-legend b{color:var(--l-ink);}
.valora .light .wn-badge{background:#8f7b57;color:#faf8f5;}
.valora .light .wn-bars i,.valora .light .wn-legend i{background:#f0ece7;}
.valora .light .wn-ring .track{stroke:#f0ece7;}
.valora .light .wn-bars i.on,.valora .light .wn-legend i.on{background:#c10064;}
.valora .light .wn-ring .arc{stroke:#c10064;}
.valora .light .wn-source{color:#9a8f80;}
/* Protection 피처 리스트 — 라이트 반전 */
.valora .light .featitem h4{color:var(--l-ink);}
.valora .light .featitem p{color:var(--l-body);}
.valora .light .featitem{border-color:var(--l-border);}
.valora .light .featitem:nth-child(n+4){border-color:var(--l-border);}
/* How it Works(BEYOND DISTRIBUTION) 카드 — 라이트 반전 */
.valora .light .pf-step h4{color:var(--l-ink);}
.valora .light .pf-step p{color:var(--l-body);}
/* 아이콘 박스 → 라이트(웜 그레이) + 마젠타 글리프 */
/* 아이콘 타일: Figma 원본은 탄(#8f7b57) 아이콘 + 웜베이지 타일 + 보더 없음 (dev 마젠타였음 → 색상체크 반영) */
.valora .light .bento .b .ic,.valora .light .ip-card .ic,.valora .light .vt-ic,.valora .light .featitem .ic{background:rgba(233,229,222,.6);border-color:transparent;color:#8f7b57;}
/* 번호 뱃지(프로세스/디퍼런스 좌측=아웃라인, 우측=마젠타 유지) */
.valora .light .tl-ind .dot{background:var(--l-icon);border-color:var(--l-icon-bd);color:#c10064;}
.valora .light .tl-ind .ln,.valora .light .dif-ind .ln{background:var(--l-border);}
.valora .light .dif-ind .dot{background:#faf8f5;border:2px solid #8f7b57;color:#8f7b57;}
.valora .light .dif-col.after .dif-ind .dot{background:#faf8f5;border:1px solid #e4007f;color:#e4007f;}
.valora .light .dif-col.after .dif-card h5{color:var(--l-ink);}
.valora .light .dif-col.after .dif-card .num{color:#0a0a0a;opacity:.55;}
.valora .light .dif-col.after > h4{color:#f5699c;}
.valora .light .dif-col > h4{color:#0a0a0a;}
.valora .light .dif-card{background:transparent;border-color:rgba(233,229,222,.6);}
/* FAQ 라이트 */
.valora .light .faq-q{color:var(--l-ink);}
.valora .light .faq-ic svg{color:var(--l-muted);}
.valora .light .faq-a p{color:var(--l-body);}
.valora .light .faq-aside{background:transparent;border-color:rgba(233,229,222,.6);}
.valora .light .faq-aside h4{color:var(--l-ink);}
.valora .light .faq-aside p{color:var(--l-body);}
.valora .light .faq-aside-ic{color:#8f7b57;}
/* Request Partnership 버튼: Figma는 중립 베이지 채움(디자인 토큰) — dev 흰색이었음 */
.valora .light .faq-aside .pill{background:rgba(233,229,222,.6);color:#0a0a0a;}
/* 라이트 위 인터랙티브: 플로우 pill / hub / 버튼 */
.valora .light .ip-node{background:#faf8f5;border-color:#8f7b57;color:#8f7b57;}
.valora .light .ip-node.hub{background:#c10064;border-color:#c10064;color:#fff;}
.valora .light .ip-arrow{color:#e4007f;}
.valora .light .pill{border:1px solid var(--l-border);}
.valora .light .pill,.valora .light .pill span.real,.valora .light .pill span.ghost{color:#0a0a0a;}
/* CTA 라이트: 언더라인 폼 + 핑크 버튼 */
.valora .light .cf .lab{color:var(--l-ink);opacity:1;}
.valora .light .cf input,.valora .light .cf select,.valora .light .cf textarea{color:var(--l-ink);border-bottom-color:#d9cbbc;}
.valora .light .cf input::placeholder,.valora .light .cf textarea::placeholder{color:#9c9c9c;}
.valora .light .cf input:focus,.valora .light .cf select:focus,.valora .light .cf textarea:focus{border-bottom-color:#c10064;}
.valora .light .cform-btn{background:#c10064;color:#fff;border-color:#c10064;}
/* Footer 라이트 — Figma는 본문(크림 #faf8f5)과 달리 순백 #ffffff */
.valora footer.light{background:#ffffff !important;border-top:1px solid rgba(0,0,0,.05);}
.valora .light .f-logo{color:var(--l-ink);}
.valora .light .f-divider{background:rgba(0,0,0,.14);}
.valora .light .f-tagline .pink{color:#c10064;}
.valora .light .f-tagline .reg{color:var(--l-muted);}
.valora .light .f-contact .lab{color:var(--l-muted);}
.valora .light .f-contact a{color:var(--l-ink);}
.valora .light .f-news-cap{color:var(--l-ink);opacity:1;}
.valora .light .f-news-field{border-bottom-color:#d9cbbc;}
.valora .light .f-news-field input{color:var(--l-ink);}
.valora .light .f-news-field button{color:#c10064;}
.valora .light .f-col .lab{color:var(--l-muted);}
.valora .light .f-col a{color:var(--l-ink);}
.valora .light .f-bottom{border-top-color:rgba(0,0,0,.1);}
.valora .light .f-bottom p{color:var(--l-muted);}
.valora .light .f-bottom b{color:#0a0a0a;}
.valora .light .f-bleed{color:#0a0a0a;opacity:.05;}
/* 마퀴/구분선 등 하드코딩 다크 대비 */
.valora .light .tl-card,.valora .light .tl-head h2.sec{color:var(--l-ink);}
/* 라이트 위 pill 기본(흰 버튼) → 다크 텍스트 유지됨 */

/* ---------- Text selection ---------- */
::selection {
  background: rgba(245, 105, 156, 0.4);
  color: #FFFFFF;
}

/* ===================== STATEMENT (dark image quote) ===================== */
.valora .stmt{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(420px,42vw,591px);background:#0a0a0a;color:#faf8f5;padding:clamp(48px,7vw,90px) 0;}
.valora .stmt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.valora .stmt::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.5);}
.valora .stmt .eyebrow{color:#faf8f5;margin-bottom:12px;}
.valora .stmt .eyebrow .dim{color:#faf8f5;opacity:.7;}
.valora .stmt-inner,.valora .stmt-inner2{position:relative;z-index:2;width:100%;
  max-width:calc(var(--maxw) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);}
/* A — 36px, magenta highlights, left-aligned */
.valora .stmt-h{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.5vw,36px);
  line-height:1.5;letter-spacing:-0.01em;color:#faf8f5;word-break:keep-all;}
.valora .stmt-h .hot{color:#ff4fa3;}
/* B — 72px, eyebrow(left col) + heading(right) + white pill */
.valora .stmt-b .stmt-inner2{display:grid;grid-template-columns:clamp(210px,22vw,304px) 1fr;
  gap:clamp(20px,3vw,42px);align-items:start;}
.valora .stmt-b .eyebrow{padding-top:16px;margin-bottom:0;}
.valora .stmt-h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4.4vw,72px);
  line-height:1.15;letter-spacing:-0.72px;color:#faf8f5;text-transform:uppercase;word-break:keep-all;}
.valora .stmt-pill{display:inline-flex;align-items:center;margin-top:clamp(24px,3vw,40px);
  padding:12px 24px;border-radius:50px;background:#faf8f5;color:#0a0a0a;font-family:var(--sans);
  font-size:16px;font-weight:500;letter-spacing:-0.16px;transition:transform .2s,background .2s;}
.valora .stmt-pill:hover{background:#fff;transform:translateY(-1px);}
@media (max-width:900px){
  .valora .stmt-b .stmt-inner2{grid-template-columns:1fr;gap:12px;}
  .valora .stmt-b .eyebrow{padding-top:0;}}

/* ===================== VALORA MARQUEE (magenta 흐르는 띠) ===================== */
.valora .vmarquee{background:#e4007f;overflow:hidden;height:64px;display:flex;align-items:center;}
.valora .vmarquee-track{display:flex;align-items:center;flex:none;animation:vmarq 34s linear infinite;}
.valora .vmarquee-set{display:flex;align-items:center;flex:none;}
.valora .vmarquee-set span{color:#faf8f5;font-family:var(--sans);font-size:15.6px;font-weight:500;
  letter-spacing:-0.5px;white-space:nowrap;margin-right:16px;}
.valora .vmarquee-set i{width:4px;height:4px;border-radius:50%;background:#faf8f5;flex:none;margin-right:16px;}
@keyframes vmarq{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.valora .vmarquee-track{animation:none;}}

/* ===================== STORE HIGHLIGHT (brown quote + quincunx photos) ===================== */
/* 핀 고정: .sh=스크롤 트랙(200vh), .sh-pin=화면 꽉 채워 sticky 고정. 고정된 동안 이미지가 스크롤에 잠겨 상하 이동 */
.valora .sh{position:relative;background:#8f7b57;color:#fff;height:200vh;}
.valora .sh-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;
  padding:clamp(40px,6vw,90px) var(--gutter);}
.valora .sh-quote{grid-area:1/1;position:relative;z-index:1;align-self:center;text-align:center;max-width:1240px;}
.valora .sh-quote .eyebrow{color:#faf8f5;margin-bottom:22px;}
.valora .sh-quote h2.sec{color:#faf8f5;font-size:clamp(28px,4.4vw,72px);line-height:1.15;letter-spacing:-0.72px;word-break:keep-all;}
.valora .sh-grid{grid-area:1/1;position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(3,minmax(0,300px));grid-auto-rows:1fr;gap:clamp(16px,2.4vw,40px);
  justify-content:center;align-self:stretch;width:100%;max-width:1000px;margin:0 auto;
  transform:translateY(var(--sh-y,0px));will-change:transform;}
.valora .sh-ph{aspect-ratio:1;border-radius:16px;overflow:hidden;background:#d9d9d9;box-shadow:0 20px 50px rgba(10,10,10,.22);}
.valora .sh-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.valora .sh-ph.a{grid-area:1 / 1;}
.valora .sh-ph.b{grid-area:1 / 3;}
.valora .sh-ph.c{grid-area:2 / 2;}
.valora .sh-ph.d{grid-area:3 / 1;}
.valora .sh-ph.e{grid-area:3 / 3;}
@media (prefers-reduced-motion:reduce){
  .valora .sh{height:auto;}
  .valora .sh-pin{position:static;height:auto;}
  .valora .sh-grid{transform:none;}}
@media (max-width:820px){
  .valora .sh{height:auto;}
  .valora .sh-pin{position:static;height:auto;display:flex;flex-direction:column;gap:clamp(40px,7vw,64px);}
  .valora .sh-quote{grid-area:auto;}
  .valora .sh-grid{grid-area:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;transform:none;max-width:none;}
  .valora .sh-ph.a,.valora .sh-ph.b,.valora .sh-ph.c,.valora .sh-ph.d,.valora .sh-ph.e{grid-area:auto;}
  .valora .sh-ph.c{grid-column:1 / -1;aspect-ratio:2/1;}}

/* ===================== VALORA ESSENTIAL (Three Pillars) ===================== */
.valora #pillars .pl-head{display:grid;grid-template-columns:clamp(210px,22vw,304px) 1fr;
  gap:clamp(24px,3vw,42px);align-items:start;margin-bottom:clamp(44px,5vw,64px);}
.valora #pillars .pl-head .eyebrow{padding-top:16px;margin-bottom:0;}
.valora #pillars h2.sec{font-size:clamp(38px,5.6vw,72px);}
.valora #pillars .pl-lead{display:flex;gap:16px;margin-top:24px;max-width:556px;}
.valora #pillars .pl-lead .plus{color:var(--l-muted);font-size:22px;line-height:1.4;flex:none;}
.valora #pillars .pl-lead p{font-size:17px;line-height:1.5;letter-spacing:-0.02em;color:#0a0a0a;word-break:keep-all;}
.valora .pl-body{display:grid;grid-template-columns:clamp(200px,20vw,248px) 1fr;
  gap:clamp(24px,3vw,48px);align-items:stretch;}
.valora .pl-aside{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0;}
.valora .pl-top{font-family:var(--sans);font-size:clamp(19px,1.7vw,24px);line-height:1.32;
  letter-spacing:-0.02em;color:#6b7280;}
.valora .pl-bottom{font-family:var(--sans);font-size:clamp(23px,2.4vw,32px);font-weight:700;
  line-height:1.2;letter-spacing:-0.02em;color:#e4007f;}
.valora .pl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.valora .pl-card{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:298/461;isolation:isolate;}
.valora .pl-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;object-position:50% 50%;}
/* 가로 원본을 세로 카드에 담을 때 피사체가 잘리지 않게 카드별 크롭 위치 지정 */
.valora .pl-card:nth-child(1) img{object-position:73% 50%;} /* 얼굴 중심(~72%)을 카드 중앙에 */
.valora .pl-card:nth-child(2) img{object-position:60% 50%;} /* 제품 병이 우중앙 */
.valora .pl-card:nth-child(3) img{object-position:45% 50%;} /* 버너·오일이 중앙 */
.valora .pl-card::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.3);pointer-events:none;}
.valora .pl-lbl{position:absolute;z-index:2;left:23px;right:18px;bottom:50px;display:flex;flex-direction:column;gap:8px;}
.valora .pl-lbl .cap{font-family:var(--sans);font-size:15px;letter-spacing:-0.02em;color:#fff;}
.valora .pl-lbl h3{font-family:var(--sans);font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-0.06em;color:#fff;}
@media (max-width:900px){
  .valora #pillars .pl-head{grid-template-columns:1fr;gap:12px;}
  .valora #pillars .pl-head .eyebrow{padding-top:0;}
  .valora .pl-body{grid-template-columns:1fr;gap:28px;}
  .valora .pl-aside{flex-direction:row;flex-wrap:wrap;gap:10px 32px;}
  .valora .pl-cards{grid-template-columns:1fr;}
  .valora .pl-card{aspect-ratio:16/10;}
  .valora .pl-lbl{bottom:28px;}}
@media (max-width:640px){
  /* 회색 라벨은 위 자막과 중복 → 모바일 숨김. 마젠타 태그라인만 풀폭 강조로 유지 */
  .valora .pl-aside{flex-direction:column;gap:0;padding:0;}
  .valora .pl-top{display:none;}
  .valora .pl-bottom{font-size:clamp(22px,6.4vw,28px);}}

/* ===================== COMING-SOON MODAL (준비 중) ===================== */
.valora .soon{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
.valora .soon.open{opacity:1;visibility:visible;}
.valora .soon-scrim{position:absolute;inset:0;background:rgba(10,10,10,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.valora .soon-card{position:relative;z-index:1;width:100%;max-width:440px;background:#faf8f5;
  border-radius:16px;padding:16px 24px 24px;display:flex;flex-direction:column;align-items:center;
  overflow:hidden;box-shadow:0 32px 90px rgba(10,10,10,.3);
  transform:translateY(16px) scale(.97);transition:transform .38s cubic-bezier(.22,1,.36,1);}
.valora .soon.open .soon-card{transform:none;}
.valora .soon-img{width:clamp(150px,44%,180px);height:auto;transform:rotate(-19.35deg);
  margin:14px 0 26px;pointer-events:none;user-select:none;}
.valora .soon-title{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.4vw,40px);
  line-height:1.15;letter-spacing:-0.4px;text-transform:uppercase;color:#0a0a0a;margin:0 0 24px;text-align:center;}
.valora .soon-sub{font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-0.02em;
  color:#6b7280;text-align:center;margin:0 0 32px;word-break:keep-all;}
.valora .soon-sub b{color:#0a0a0a;font-weight:500;}
.valora .soon-confirm{display:flex;align-items:center;justify-content:center;width:100%;height:50px;
  border:0;border-radius:100px;background:#c10064;color:#faf8f5;font-family:var(--sans);font-size:16px;
  font-weight:500;letter-spacing:-0.16px;cursor:pointer;transition:background .2s;}
.valora .soon-confirm:hover{background:#a80057;}
body.soon-lock{overflow:hidden;}