/* Velora Fashion visual system
   Editorial beauty atelier × operational control room.
   Reference principles are documented in docs/velora-design-research.md. */

:root{
  --ink:#241a20;
  --muted:#72656c;
  --canvas:#f3ecea;
  --paper:#fffaf5;
  --paper2:#f8f1ef;
  --line:#d9cec9;
  --forest:#42192b;
  --green:#315a49;
  --green2:#e3eee8;
  --wine:#6f1f3d;
  --wine2:#f3e0e6;
  --gold:#a88049;
  --gold2:#f0e5d3;
  --amber:#91602d;
  --amber2:#f4e6d3;
  --red:#9d3947;
  --red2:#f5e1e4;
  --blue:#526575;
  --blue2:#e5ebef;
  --blush:#f4e4e8;
  --rose:#c98ea2;
  --champagne:#c4a06a;
  --plum:#42192b;
  --shadow:0 20px 55px rgba(63,30,43,.08);
  --serif:Didot,"Bodoni 72","Iowan Old Style","Baskerville",Georgia,serif;
  --sans:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Monaco,monospace;
}

html{background:var(--plum)}
body{
  background:
    linear-gradient(rgba(255,250,245,.84),rgba(243,236,234,.94)),
    repeating-linear-gradient(118deg,transparent 0 34px,rgba(111,31,61,.025) 34px 35px);
  color:var(--ink);
  font-family:var(--sans);
  letter-spacing:.002em;
}
::selection{background:var(--wine);color:#fffaf5}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

.shell{grid-template-columns:252px minmax(0,1fr)}
.sidebar{
  background:
    radial-gradient(circle at 20% 0,rgba(201,142,162,.13),transparent 31%),
    var(--plum);
  border-right:1px solid rgba(196,160,106,.38);
  color:#fffaf5;
  padding:25px 18px 18px;
}
.brand{
  grid-template-columns:47px 1fr;
  gap:13px;
  padding:0 5px 24px;
  border-bottom:1px solid rgba(255,250,245,.15);
}
.mark{
  width:47px;height:47px;border-radius:50%;
  background:transparent;color:#fffaf5;
  border:1px solid rgba(196,160,106,.85);
  font:500 14px/1 var(--serif);
  letter-spacing:.08em;
}
.brand strong{
  font:500 20px/.9 var(--serif);
  letter-spacing:.03em;
  text-transform:uppercase;
}
.brand small{
  margin-top:8px;color:rgba(255,250,245,.56);
  font-size:8px;font-weight:650;letter-spacing:.19em;
}
.nav-label{margin:25px 8px 8px;color:rgba(255,250,245,.56);font-size:8px;letter-spacing:.2em}
.nav-list{gap:2px}
.nav-btn{
  min-height:46px;border-radius:2px;padding:9px 8px;
  color:rgba(255,250,245,.68);font-size:11.5px;font-weight:600;
  letter-spacing:.005em;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-btn:hover{background:rgba(255,250,245,.075);color:#fffaf5;transform:translateX(2px)}
.nav-btn.active{
  background:#fffaf5;color:var(--plum);
  box-shadow:inset 3px 0 0 var(--champagne);
}
.nav-icon{border-radius:50%;font-size:8px;border-color:rgba(196,160,106,.75);opacity:1}
.nav-btn.active .nav-icon{background:var(--plum);border-color:var(--plum);color:#fffaf5}
.nav-dot{background:var(--rose);box-shadow:0 0 0 4px rgba(201,142,162,.13);animation:veloraPulse 2.8s ease-in-out infinite}
.side-foot{border-color:rgba(255,250,245,.14);color:rgba(255,250,245,.53);font-size:9px}
.side-foot strong{font-family:var(--serif);font-size:12px;font-weight:500;letter-spacing:.02em}

.topbar{
  min-height:72px;padding:12px 30px;
  background:rgba(255,250,245,.82);
  border-bottom:1px solid rgba(111,31,61,.14);
  backdrop-filter:saturate(125%) blur(18px);
  -webkit-backdrop-filter:saturate(125%) blur(18px);
}
.crumb strong{font:500 21px/1 var(--serif);letter-spacing:-.015em}
.crumb span{margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:.025em}
.main{max-width:1500px;padding:31px 34px 72px}
.view.active{animation:veloraReveal .36s cubic-bezier(.2,.75,.2,1) both}

.button{
  min-height:41px;border-radius:2px;padding:10px 16px;
  font-size:10px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.button:hover{filter:none;transform:translateY(-2px);box-shadow:0 9px 22px rgba(63,30,43,.13)}
.button:active{transform:translateY(0)}
.button.primary{background:var(--wine)}
.button.green{background:var(--green)}
.button.secondary{background:#fffaf5;color:var(--ink);border-color:#cfc2bc}
.button.quiet{background:transparent;color:var(--ink);border-color:#cfc2bc}
.button.small{min-height:34px;font-size:8.5px}
.tag{
  border-radius:999px;padding:6px 10px;
  font-size:8px;letter-spacing:.13em;font-weight:750;
  background:rgba(255,250,245,.8);
}

.page-head{margin-bottom:23px;align-items:flex-end}
.page-head h1{
  max-width:1020px;
  font:500 clamp(38px,5vw,66px)/.92 var(--serif);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.page-head p{max-width:820px;margin-top:12px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.eyebrow{display:block;margin-bottom:10px;color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}

.panel{
  padding:19px;background:rgba(255,250,245,.88);
  border:1px solid var(--line);border-radius:4px;
  box-shadow:none;
}
.panel.dark{background:var(--plum);border-color:var(--plum)}
.panel.wine{background:var(--wine);border-color:var(--wine)}
.panel h2{font:500 31px/1 var(--serif)}
.panel h3{font:500 22px/1.05 var(--serif)}
.panel h4{font-weight:700;letter-spacing:.02em}

/* Start Here: one editorial brand moment, then an operational runway. */
.home-head h1{max-width:900px}
.velora-hero{
  position:relative;min-height:470px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(390px,1.12fr);
  background:var(--plum);color:#fffaf5;
  border:1px solid rgba(196,160,106,.42);
  box-shadow:0 24px 70px rgba(63,30,43,.15);
}
.velora-story{
  position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding:48px 48px 44px;
}
.velora-story .tag{align-self:flex-start;background:transparent;color:#ead6dc;border-color:rgba(255,250,245,.25)}
.velora-story h2{
  margin:23px 0 14px;max-width:650px;
  font:500 clamp(42px,5.5vw,78px)/.88 var(--serif);
  letter-spacing:-.055em;text-wrap:balance;
}
.velora-story p{max-width:610px;margin:0;color:rgba(255,250,245,.69);font-size:12.5px;line-height:1.7}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.velora-story .button.secondary{background:#fffaf5;border-color:#fffaf5}
.velora-story .button.quiet{color:#fffaf5;border-color:rgba(255,250,245,.32)}
.campaign-art{
  position:relative;min-height:470px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 72% 18%,rgba(255,250,245,.78) 0 5%,transparent 5.5%),
    linear-gradient(136deg,#e4c9ce 0 28%,#b66b82 28% 47%,#722440 47% 72%,#2a171f 72% 100%);
}
.campaign-art:before{
  content:"";position:absolute;inset:-18%;z-index:-1;
  background:repeating-linear-gradient(53deg,transparent 0 31px,rgba(255,250,245,.11) 31px 32px);
  transform:rotate(-7deg);animation:veloraDrift 16s ease-in-out infinite alternate;
}
.campaign-art:after{
  content:"";position:absolute;left:-7%;right:-8%;bottom:-23%;height:58%;
  border-radius:52% 48% 0 0;background:#f5e9e4;
  box-shadow:0 -22px 70px rgba(38,19,28,.16);
  transform:rotate(-4deg);
}
.art-bottle{
  position:absolute;z-index:3;left:48%;top:18%;width:110px;height:270px;
  transform:rotate(8deg);border-radius:22px 22px 34px 34px;
  background:linear-gradient(90deg,#9c405f 0,#e6a9b8 25%,#fff0ed 52%,#be6982 78%,#70233e 100%);
  box-shadow:20px 34px 50px rgba(33,15,23,.3),inset 0 0 0 1px rgba(255,255,255,.35);
}
.art-bottle:before{
  content:"";position:absolute;left:16px;right:16px;top:-79px;height:88px;
  border-radius:9px 9px 16px 16px;
  background:linear-gradient(90deg,#8d827c,#faf5ee 44%,#9c918b);
  box-shadow:0 7px 13px rgba(35,21,27,.2);
}
.art-bottle:after{
  content:"VELORA";position:absolute;left:0;right:0;top:57%;text-align:center;
  color:rgba(64,24,40,.72);font:600 12px var(--serif);letter-spacing:.24em;
}
.art-compact{
  position:absolute;z-index:4;left:21%;bottom:11%;width:155px;height:96px;
  border-radius:50%;transform:rotate(-11deg);
  background:radial-gradient(ellipse at 50% 42%,#d597a7 0 40%,#8c314f 41% 49%,#e7d4cc 50% 61%,#57464a 62%);
  box-shadow:9px 27px 35px rgba(35,18,26,.26);
}
.art-note{
  position:absolute;z-index:5;right:24px;top:25px;color:rgba(255,250,245,.76);
  font:700 8px var(--sans);letter-spacing:.17em;text-transform:uppercase;
}
.art-caption{
  position:absolute;z-index:5;right:26px;bottom:24px;text-align:right;color:var(--ink);
}
.art-caption strong{display:block;font:500 27px/.9 var(--serif);letter-spacing:.07em}
.art-caption span{display:block;margin-top:7px;font-size:8px;letter-spacing:.15em;text-transform:uppercase}
.art-proof{
  position:absolute;z-index:5;left:22px;top:22px;padding:6px 9px;
  background:rgba(255,250,245,.85);color:var(--wine);border:1px solid rgba(255,250,245,.8);
  font-size:7.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

.loop{
  grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,250,245,.5);
}
.loop-step{
  min-height:160px;padding:20px 18px;background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.loop-step:last-child{border-right:0}
.loop-step:hover{background:#fffaf5;transform:translateY(-3px)}
.loop-step:after{right:-5px;color:var(--wine);background:var(--canvas);padding:1px 0}
.loop-step b{margin:17px 0 7px;font:500 21px var(--serif)}
.loop-step p{font-size:10px;line-height:1.55}
.loop-step .button{margin-top:13px!important}

.kpi-strip{gap:0;margin-top:24px;border:1px solid var(--line);background:rgba(255,250,245,.72)}
.kpi{min-height:112px;padding:16px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}
.kpi:last-child{border-right:0}
.kpi span{font-size:9px;letter-spacing:.11em}
.kpi strong{margin-top:10px;font:500 24px/1 var(--serif)}

/* Operational surfaces: flatter, sharper, typography-led. */
body{font-size:13px}
.small{font-size:11.5px;line-height:1.45}
.tiny{font-size:10.5px;line-height:1.5}
.tag{font-size:9px;line-height:1.2}
.score span,.metric span,.table th,.order-id{font-size:9px}
.table{font-size:11px}
.table strong{font-size:11px}
.table small{font-size:10px;line-height:1.4}
.evidence-card a{font-size:9.5px;line-height:1.4}
.pipe p,.flow-step span,.step span{font-size:10px;line-height:1.5}
.pipeline,.score-grid,.studio-flow,.metric-hero,.evidence-grid,.pilot-grid{gap:1px;background:var(--line)}
.pipe,.score,.flow-step,.metric,.evidence-card,.pilot-step{border-radius:0;border:0;background:var(--paper)}
.product-list,.checklist,.issue-list{gap:10px}
.source-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
#sourceList{overflow:visible}
.product-row,.provider,.quick-item,.source-note,.calc-box,.recommend,.formula,.delivery,.issue{
  border-radius:3px;
}
.product-row{
  display:grid;grid-template-columns:48px minmax(235px,1.1fr) minmax(350px,1fr) minmax(108px,auto);
  gap:16px;align-items:center;padding:15px 14px;min-width:0;
  border-color:var(--line);background:rgba(255,250,245,.8);
  transition:background .18s ease,transform .18s ease;
}
.product-row:hover{background:#fffaf5;transform:translateX(3px)}
.product-art{width:44px;height:44px;border-radius:50%;font-family:var(--serif);font-weight:500}
.product-copy{min-width:0}
.product-copy strong{font-size:12px;line-height:1.35}
.product-copy small{margin-top:5px;font-size:10.5px;line-height:1.45;color:var(--muted)}
.product-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;min-width:0;border:1px solid var(--line);background:rgba(248,241,239,.66)}
.product-stat{display:flex;min-width:0;min-height:66px;padding:9px 11px;flex-direction:column;justify-content:center;border-inline-end:1px solid var(--line)}
.product-stat:last-child{border-inline-end:0}
.product-stat .row-label{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.product-stat strong{font-size:11.5px;line-height:1.25}
.product-stat small{margin-top:4px;font-size:10px;line-height:1.3;color:var(--muted)}
.price-values{display:flex;align-items:baseline;gap:6px;direction:ltr;unicode-bidi:isolate}
.price-values .old{font-size:9px}
.price-values .price{font-size:19px;line-height:1}
.product-row>.button{display:inline-flex;min-width:108px;justify-self:end}
.provider-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.provider{padding:14px;background:rgba(248,241,239,.75);transition:background .18s ease}
.provider p.tiny{margin:10px 0 9px;font-size:10.5px;line-height:1.55}
.provider a{font-size:9.5px}
.provider:hover{background:#fffaf5}
.segments{border-radius:2px;background:#eee4e2}
.segment{border-radius:1px;letter-spacing:.05em}
.segment.active{box-shadow:none;background:#fffaf5}
.field-wrap,.textarea{border-radius:2px}
.score-hero{border-radius:4px;background:var(--plum)}
.preview-shell{background:#e9dfdb;border-color:#d3c4bd;border-radius:4px}
.preview-tab{border-radius:1px;text-transform:uppercase;letter-spacing:.09em}
.preview-tab.active{background:var(--plum);border-color:var(--plum)}
.phone{border-radius:28px;border-color:#241a20;box-shadow:0 26px 60px rgba(51,26,37,.2)}
.avatar{background:var(--wine);font-family:var(--serif);letter-spacing:.06em}
.creative{
  background:
    radial-gradient(circle at 75% 22%,rgba(255,255,255,.78) 0 6%,transparent 6.5%),
    linear-gradient(145deg,#f4e3e7 0%,#d2a6b2 50%,#78405a 100%);
}
.creative:after{content:"VELORA / PRIVATE EDIT";font-family:var(--serif);letter-spacing:.04em}
.creative-copy b{font-family:var(--serif);font-weight:500}
.partner-top{background:var(--plum)}
.capability{border-radius:3px;background:rgba(255,250,245,.78);align-items:start}
.capability>.tag{align-self:start;justify-self:end}
#language{border-radius:2px!important}
.order-id{direction:ltr;unicode-bidi:isolate;font-family:var(--mono)}
.step.done .step-dot{background:var(--plum);border-color:var(--plum)}
.table th{letter-spacing:.12em}
.metric,.evidence-card,.pilot-step{transition:background .18s ease}
.metric:hover,.evidence-card:hover,.pilot-step:hover{background:#fffaf5}

.toast,.tour{border-radius:3px;background:var(--ink);border:1px solid rgba(196,160,106,.45)}
.tour h3{font-weight:500}
.tour-progress span{background:var(--rose)}
.tour-highlight{box-shadow:0 0 0 3px rgba(196,160,106,.78),var(--shadow)!important}

html[lang="ckb"] body{font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,var(--sans)}
html[lang="ckb"] .page-head h1,
html[lang="ckb"] .velora-story h2,
html[lang="ckb"] .panel h2,
html[lang="ckb"] .panel h3,
html[lang="ckb"] .crumb strong,
html[lang="ckb"] .loop-step b,
html[lang="ckb"] .kpi strong,
html[lang="ckb"] .tour h3{font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,var(--serif);letter-spacing:0}
html[lang="ckb"] .brand strong,
html[lang="ckb"] .mark,
html[lang="ckb"] .art-bottle:after,
html[lang="ckb"] .art-caption strong{font-family:var(--serif);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .nav-btn:hover{transform:translateX(-2px)}
html[dir="rtl"] .nav-btn.active{box-shadow:inset -3px 0 0 var(--champagne)}
html[dir="rtl"] .product-row:hover{transform:translateX(-3px)}
html[dir="rtl"] .loop-step{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .loop-step:last-child{border-left:0}
html[dir="rtl"] .kpi{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .kpi:last-child{border-left:0}

@keyframes veloraReveal{
  from{opacity:0;transform:translateY(9px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes veloraDrift{from{transform:rotate(-7deg) translate3d(-1%,0,0)}to{transform:rotate(-4deg) translate3d(2%,1%,0)}}
@keyframes veloraPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

@media(max-width:1180px){
  .velora-hero{grid-template-columns:1fr .85fr}
  .velora-story{padding:40px 34px}
  .art-bottle{left:53%;transform:rotate(8deg) scale(.9)}
}
@media(max-width:960px){
  .sidebar{border-right:0;border-bottom:1px solid rgba(196,160,106,.45)}
  .nav-btn.active{box-shadow:inset 0 -3px 0 var(--champagne)}
  .topbar{padding:9px 16px}
  .main{padding:23px 16px 54px}
  .velora-hero{grid-template-columns:1fr;min-height:0}
  .campaign-art{min-height:370px;order:-1}
  .velora-story{padding:36px 28px 39px}
  .loop{grid-template-columns:repeat(3,1fr)}
  .loop-step:nth-child(3){border-right:0}
  html[dir="rtl"] .loop-step:nth-child(3){border-left:0}
  .provider-list{grid-template-columns:1fr}
  .product-row{grid-template-columns:46px minmax(0,1fr) auto;gap:12px;padding:14px}
  .product-metrics{grid-column:1/-1!important;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-row>.button{grid-column:3;grid-row:1;min-width:104px}
}
@media(max-width:680px){
  .page-head h1{font-size:43px;line-height:.94}
  .velora-story h2{font-size:49px;line-height:.9}
  .campaign-art{min-height:315px}
  .art-bottle{left:55%;top:24%;transform:rotate(8deg) scale(.72);transform-origin:top center}
  .art-compact{left:12%;bottom:7%;transform:rotate(-11deg) scale(.8)}
  .art-caption{right:18px;bottom:17px}
  .art-note{right:17px;top:17px}
  .art-proof{left:15px;top:15px}
  .velora-story{padding:31px 21px 34px}
  .loop{grid-template-columns:1fr;border-bottom:0}
  .loop-step,.loop-step:nth-child(3){min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  html[dir="rtl"] .loop-step,html[dir="rtl"] .loop-step:nth-child(3){border-left:0;border-bottom:1px solid var(--line)}
  .loop-step:after{background:transparent}
  .kpi-strip{grid-template-columns:1fr}
  .kpi{border-right:0;border-bottom:1px solid var(--line)}
  html[dir="rtl"] .kpi{border-left:0;border-bottom:1px solid var(--line)}
  .kpi:last-child{border-bottom:0}
  .product-row{grid-template-columns:44px minmax(0,1fr);gap:11px;padding:13px}
  .product-copy{align-self:center}
  .product-row>.button{grid-column:1/-1;grid-row:auto;width:100%;min-height:44px;justify-self:stretch}
  .product-metrics{display:grid!important;grid-template-columns:1fr}
  .product-stat{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:0;padding:10px 11px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .product-stat:last-child{border-bottom:0}
  .product-stat .row-label{margin:0}
  .product-stat small{margin:0;text-align:end}
  .price-values{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .nav-dot,.campaign-art:before{animation:none!important}
}