/* Beauty Dama — v6
   Fonts:
   - Headings: cy-grotesk-grand.woff2 (bold)
   - Body text: cy-grotesk-grand-6.woff2 (regular) OR cy-grotesk-grand-7.woff2 (light)
   Put files into /fonts/ (same level as styles.css)
*/

@font-face{
  font-family: "Cy Grotesk Grand";
  src: url("fonts/cy-grotesk-grand.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cy Grotesk Grand";
  src: url("fonts/cy-grotesk-grand-6.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cy Grotesk Grand";
  src: url("fonts/cy-grotesk-grand-7.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0b1220; --bg2:#0a1120;
  --text:#eef2f7;
  --mut: rgba(238,242,247,.70);
  --mut2: rgba(238,242,247,.54);

  --gold:#f5b84d; --gold2:#c9852b;

  --shadow:0 20px 60px rgba(0,0,0,.42);
  --shadow2:0 14px 34px rgba(0,0,0,.34);

  --r:18px; --r2:24px;
  --max:1160px;

  --ease:cubic-bezier(.2,.85,.2,1);
  --ease2:cubic-bezier(.22,1,.36,1);

  --h1:clamp(34px,3.6vw,56px);
  --h2:clamp(26px,2.6vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Cy Grotesk Grand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(245,184,77,.08), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(140,170,255,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
b{font-weight:700}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

::selection{background: rgba(245,184,77,.28); color: var(--text)}

/* Background */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.bg__glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(900px 560px at 20% 10%, rgba(245,184,77,.12), transparent 60%),
    radial-gradient(780px 520px at 80% 5%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(760px 560px at 70% 70%, rgba(140,170,255,.08), transparent 64%);
  filter: blur(12px);
  opacity:.90;
  animation: glow 10s var(--ease2) infinite alternate;
}
@keyframes glow{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(-1.2%, .8%, 0) scale(1.03)}
}
.bg__grain{
  position:absolute; inset:0;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation: grain 6s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-1%,1%,0)}
  50%{transform:translate3d(1%,-1%,0)}
  75%{transform:translate3d(1%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}
.bg__vignette{
  position:absolute; inset:-10%;
  background: radial-gradient(closest-side, transparent 58%, rgba(0,0,0,.55));
}

/* Header (fix iOS top shift with safe-area) */
.top{
  position:sticky; top:0; z-index:50;
  padding-top: env(safe-area-inset-top);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11,18,32,.66);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top__in{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:12px;
  padding: 12px 0;
  min-height: 64px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand__mark{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  border:1px solid rgba(245,184,77,.20);
  background: rgba(17,26,43,.75);
  box-shadow: var(--shadow2);
  font-weight:700;
  letter-spacing:.08em;
  color: rgba(245,184,77,.92);
  position:relative;
  overflow:hidden;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: rotate(18deg) translateX(-120%);
  animation: sheen 7s var(--ease2) infinite;
}
@keyframes sheen{
  0%, 55%{transform: rotate(18deg) translateX(-120%)}
  70%{transform: rotate(18deg) translateX(120%)}
  100%{transform: rotate(18deg) translateX(120%)}
}
.brand__word{display:grid; line-height:1; min-width:0}
.brand__name{
  font-weight:700;
  letter-spacing:.02em;
}
.brand__sub{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--mut2);
  font-weight:300; /* small labels -> light */
}

.nav{display:flex; gap:8px; align-items:center}
.nav__a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:10px 10px;
  border-radius:999px;
  border:1px solid transparent;
  color: rgba(238,242,247,.90);
  font-weight:300; /* small labels -> light */
  transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  position:relative;
}
.nav__a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:7px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,184,77,.70), transparent);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s var(--ease2);
  opacity:.85;
}
.nav__a:hover{
  background: rgba(245,184,77,.08);
  border-color: rgba(245,184,77,.16);
  transform: translateY(-1px);
}
.nav__a:hover::after{transform: scaleX(1)}
.nav__a.is-on{
  background: rgba(245,184,77,.10);
  border-color: rgba(245,184,77,.18);
}
.nav__a.is-on::after{transform: scaleX(1)}

.top__cta{display:flex; gap:10px; align-items:center}

/* Burger */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.62);
  cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.burger:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.burger span{
  display:block; width:18px; height:2px;
  background: rgba(238,242,247,.90);
  margin:0 auto;
  border-radius:999px;
  position:relative;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background: rgba(238,242,247,.90);
  border-radius:999px;
  transition: transform .24s var(--ease2), top .24s var(--ease2), opacity .24s var(--ease2);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

.mnav{
  display:none;
  padding: calc(10px + env(safe-area-inset-top)) 18px 18px;
  background: rgba(11,18,32,.90);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transform-origin: top;
  animation: menuIn .28s var(--ease2) both;
}
@keyframes menuIn{
  from{opacity:0; transform: translateY(-6px)}
  to{opacity:1; transform: translateY(0)}
}
.mnav.is-on{display:block}
.mnav__a{
  display:block;
  padding:12px 10px;
  margin-top:10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:300; /* small labels -> light */
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.mnav__a:hover{transform: translateY(-1px); border-color: rgba(245,184,77,.16); background: rgba(245,184,77,.06)}
.mnav__cta{margin-top:12px; width:100%}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(17,26,43,.62);
  color: rgba(238,242,247,.92);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease);
}
.btn::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform: rotate(18deg) translateX(-130%);
  transition: transform .6s var(--ease2);
  opacity:.0;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}
.btn:hover::after{
  opacity:.9;
  transform: rotate(18deg) translateX(130%);
}
.btn:active{transform: translateY(0)}
.btn--gold{
  border-color: rgba(245,184,77,.24);
  background: linear-gradient(135deg, rgba(245,184,77,.92), rgba(201,133,43,.86));
  color: #0b1220;
}
.btn--ghost{
  background: rgba(17,26,43,.55);
  border-color: rgba(255,255,255,.12);
}

/* Typography rules */
.h1, .h2, .h3, .hero__num, .stat__num, .panel__title, .brand__name{
  font-weight:700; /* headings -> bold */
}
.kicker, .pill__k, .panel__tag, .card__k, .contact__k, .bot__sub, .hero__badge, .hero__numSub, .stat__label, .ctaBar__k, .note__k{
  font-weight:300; /* small texts -> light */
}

/* Hero */
.hero{padding: 52px 0 0}
.hero__in{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  align-items:center;
  gap:16px;
  padding-bottom: 22px;
}
.hero__badge{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: var(--mut2);
}
.hero__anchor{margin-top:10px}
.hero__num{
  letter-spacing:.02em;
  font-size: clamp(70px, 10vw, 132px);
  line-height: .92;
}
.hero__plus{color: rgba(245,184,77,.92)}
.hero__numSub{
  margin-top:12px;
  font-size: 16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(238,242,247,.72);
}
.hero__lead{
  margin: 18px 0 0;
  color: rgba(238,242,247,.74);
  line-height:1.55;
  max-width: 66ch;
}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.hero__meta{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.pill{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  box-shadow: var(--shadow2);
  padding: 12px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.pill:hover{transform: translateY(-2px); border-color: rgba(245,184,77,.16); background: rgba(245,184,77,.05)}
.pill__k{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--mut2);
}
.pill__v{margin-top:8px; font-weight:400; letter-spacing:.04em; color: rgba(238,242,247,.92)}

/* Right panel */
.hero__panel{display:flex; justify-content:flex-end}
.panel{
  width:min(520px, 100%);
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(17,26,43,.72), rgba(15,24,40,.58));
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .25s var(--ease2), border-color .25s var(--ease2);
}
.panel:hover{transform: translateY(-2px); border-color: rgba(245,184,77,.14)}
.panel__top{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.panel__tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase}
.panel__tag--muted{color: var(--mut2)}
.panel__mid{padding:18px}
.panel__title{
  font-size: 32px;
  line-height:1.14;
}
.panel__sub{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(238,242,247,.62);
  font-weight:300;
}
.panel__bot{padding: 0 18px 18px}
.panel__line{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(245,184,77,.55), transparent);
  margin-top:6px;
  animation: linePulse 5s var(--ease2) infinite;
}
@keyframes linePulse{
  0%, 60%{opacity:.55}
  80%{opacity:1}
  100%{opacity:.55}
}
.panel__fine{margin-top:14px; color: rgba(238,242,247,.62); line-height:1.5}

/* Ticker */
.ticker{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  background: rgba(17,26,43,.34);
}
.ticker__in{
  display:flex; gap:42px;
  white-space:nowrap;
  padding: 14px 0;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(238,242,247,.62);
  font-weight:300;
  animation: ticker 18s linear infinite;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
.sec{padding: 64px 0}
.sec--alt{
  background: rgba(17,26,43,.32);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sec__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; flex-wrap:wrap;
  margin-bottom:16px;
}
.kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: var(--mut2);
}
.h1{margin:10px 0 10px; font-size: var(--h1); letter-spacing:.02em}
.h2{margin:8px 0 8px; font-size: var(--h2); letter-spacing:.02em}
.sub{margin:0; color: rgba(238,242,247,.72); line-height:1.55; max-width: 86ch}

.split{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.card{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  box-shadow: var(--shadow2);
  padding: 16px;
  position:relative;
  overflow:hidden;
  transition: transform .22s var(--ease2), border-color .22s var(--ease2), background .22s var(--ease2), box-shadow .22s var(--ease2);
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(500px 140px at 15% 0%, rgba(245,184,77,.14), transparent 55%);
  opacity:0;
  transition: opacity .25s var(--ease2);
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(245,184,77,.16);
  background: rgba(17,26,43,.62);
  box-shadow: var(--shadow);
}
.card:hover::before{opacity:1}
.card__k{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(245,184,77,.86);
}
.h3{margin:10px 0 8px; letter-spacing:.01em}
.card p{margin:0; color: rgba(238,242,247,.70); line-height:1.55}
.link{
  display:inline-block;
  margin-top:12px;
  letter-spacing:.08em;
  color: rgba(238,242,247,.88);
  opacity:.92;
  position:relative;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,184,77,.70), transparent);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s var(--ease2);
  opacity:.85;
}
.link:hover{opacity:1; transform: translateX(2px)}
.link:hover::after{transform: scaleX(1)}

/* Pages */
.pageHero{padding: 48px 0 0}
.pageHero__in{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:16px;
  padding-bottom: 10px;
}
.pageHero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

.stat{
  width:min(520px, 100%);
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .22s var(--ease2), border-color .22s var(--ease2);
}
.stat:hover{transform: translateY(-2px); border-color: rgba(245,184,77,.16)}
.stat__num{
  font-size: clamp(66px, 9vw, 120px);
  line-height:.95;
}
.stat__label{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: rgba(238,242,247,.62);
}
.stat__line{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(245,184,77,.55), transparent);
  margin-top:12px;
  animation: linePulse 5s var(--ease2) infinite;
}
.stat__fine{margin-top:12px; color: rgba(238,242,247,.68); line-height:1.55}

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

.note{
  margin-top:14px;
  border-radius: var(--r2);
  border:1px solid rgba(245,184,77,.18);
  background: rgba(245,184,77,.06);
  padding: 14px 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition: transform .22s var(--ease2), border-color .22s var(--ease2), background .22s var(--ease2);
}
.note:hover{transform: translateY(-2px); border-color: rgba(245,184,77,.22); background: rgba(245,184,77,.075)}
.note__k{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(245,184,77,.92);
  white-space:nowrap;
  margin-top:2px;
}
.note__v{color: rgba(238,242,247,.78); line-height:1.55}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: rgba(238,242,247,.92)}

.ctaBar{
  margin-top:14px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  box-shadow: var(--shadow2);
  padding: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  transition: transform .22s var(--ease2), border-color .22s var(--ease2), box-shadow .22s var(--ease2);
}
.ctaBar:hover{transform: translateY(-2px); border-color: rgba(245,184,77,.14); box-shadow: var(--shadow)}
.ctaBar__k{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: rgba(238,242,247,.62);
}
.ctaBar__v{
  margin-top:6px;
  color: rgba(238,242,247,.82);
  font-size: 18px;
  line-height:1.45;
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.contact__item{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,26,43,.55);
  box-shadow: var(--shadow2);
  padding: 14px;
  display:grid;
  gap:8px;
  transition: transform .22s var(--ease2), box-shadow .22s var(--ease2), border-color .22s var(--ease2);
}
.contact__item:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(245,184,77,.16);
}
.contact__k{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color: var(--mut2)}
.contact__v{font-weight:400; letter-spacing:.03em}
.contact__item--note .contact__v{font-weight:400; color: rgba(238,242,247,.72)}

/* Footer */
.bot{
  padding: 26px 0 34px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(17,26,43,.22);
}
.bot__in{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.bot__brand{font-weight:700; letter-spacing:.02em}
.bot__sub{margin-top:6px; font-size:12px; letter-spacing:.10em; color: rgba(238,242,247,.56)}
.bot__r{display:flex; gap:10px; flex-wrap:wrap}

/* Reveal (scroll) */
.reveal{
  opacity:0;
  transform: translateY(14px);
  filter: blur(1px);
  transition: opacity .85s var(--ease2), transform .85s var(--ease2), filter .85s var(--ease2);
  will-change: opacity, transform, filter;
}
.reveal.is-on{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* Responsive */
@media (max-width: 1024px){
  .hero__in{grid-template-columns: 1fr}
  .pageHero__in{grid-template-columns: 1fr}
  .hero__meta{grid-template-columns: 1fr}
  .grid4{grid-template-columns: repeat(2, 1fr)}
  .contact{grid-template-columns: 1fr}
}
@media (max-width: 820px){
  .nav{display:none}
  .burger{display:inline-flex}
  .top__in{grid-template-columns: 1fr auto auto}
  .top__cta .btn--ghost{display:none}
  .split{grid-template-columns: 1fr}
}
@media (max-width: 420px){
  .brand__sub{display:none}
  .hero__numSub{letter-spacing:.08em}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bg__glow,.bg__grain,.ticker__in{animation:none}
  .btn,.reveal,.card,.pill,.contact__item,.ctaBar,.nav__a::after{transition:none}
  .reveal{opacity:1; transform:none; filter:none}
}