/* ==========================================================================
   CHANTÉE PROPOSAL — Chrome, Hero & Reusable Components
   ========================================================================== */

/* ===================== TOP BAR ===================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:9500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem;
  transition:all .5s var(--ease);
}
.topbar.scrolled{
  background:rgba(10,23,18,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(247,243,235,.07);
  padding:.75rem 2rem;
}
.topbar-brand{ display:flex; align-items:center; gap:.85rem; }
.topbar-mark{
  width:34px; height:34px; border-radius:9px; overflow:hidden;
  border:1px solid rgba(242,194,48,.35); flex:none;
}
.topbar-mark img{ width:100%; height:100%; object-fit:cover; }
.topbar-name{
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
  letter-spacing:.2em; color:var(--cream);
}
.topbar-role{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--biscuit-l); font-weight:700; margin-top:.12rem;
}
.topbar.on-light .topbar-name{ color:var(--coffee); }
.topbar.on-light .topbar-role{ color:var(--coffee-m); }
.topbar.on-light.scrolled{ background:rgba(247,243,235,.8); border-bottom-color:rgba(61,42,30,.08); }
.topbar-cta{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  padding:.62rem 1.4rem; border-radius:100px;
  border:1px solid rgba(242,194,48,.4); color:var(--gold);
  transition:all .4s var(--ease);
}
.topbar-cta:hover{ background:var(--gold); color:var(--forest-d); }
.topbar.on-light .topbar-cta{ border-color:rgba(61,42,30,.22); color:var(--coffee); }
.topbar.on-light .topbar-cta:hover{ background:var(--coffee); color:var(--cream); }

/* ===================== HERO ===================== */
#hero{
  background:#F9F4EB; color:var(--coffee);
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:6rem 2rem 4.5rem;
}
.hero-spotlight{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(circle 460px at var(--mx,50%) var(--my,40%),
    rgba(226,178,126,.25), transparent 70%);
}
.mesh{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.blob-1{ width:550px; height:500px; background:#E6BC8E; top:-8%; left:-6%; animation:meshDrift1 16s ease-in-out infinite alternate; }
.blob-2{ width:500px; height:540px; background:#C8925E; bottom:-12%; right:-4%; animation:meshDrift2 18s ease-in-out infinite alternate; }
.blob-3{ width:420px; height:420px; background:#E8D9C2; top:30%; left:42%; animation:meshPulse 12s ease-in-out infinite alternate; }
@keyframes meshDrift1{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(90px,60px) scale(1.15)} }
@keyframes meshDrift2{ 0%{transform:translate(0,0) scale(1.05)} 100%{transform:translate(-80px,-70px) scale(.92)} }
@keyframes meshPulse{ 0%{transform:scale(.9); opacity:.35} 100%{transform:scale(1.2); opacity:.6} }

.ring{
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
  border:1.5px solid rgba(196,139,87,.2);
  backdrop-filter:blur(5px);
  background:rgba(255,255,255,.06);
}
.ring-1{ width:320px; height:320px; top:10%; right:6%; animation:ringFloat 10s ease-in-out infinite alternate; }
.ring-2{ width:230px; height:230px; bottom:12%; left:7%; animation:ringFloat 11s ease-in-out 1.5s infinite alternate-reverse; }
@keyframes ringFloat{ 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-38px) scale(1.07)} }

.beam{
  position:absolute; width:450px; height:140%; top:-20%; right:15%; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.4), rgba(235,195,150,.14), transparent);
  transform:rotate(-25deg); filter:blur(35px); opacity:.65;
}

.watermark{
  position:absolute; left:0; right:0; text-align:center; z-index:1; pointer-events:none;
  font-family:var(--f-display); font-weight:900; color:transparent;
  white-space:nowrap; letter-spacing:-.03em;
}
.wm-top{
  top:4%; font-size:clamp(3.5rem,12vw,9.5rem);
  -webkit-text-stroke:1.5px rgba(196,139,87,.14);
  animation:textFloatSlow 12s ease-in-out infinite alternate;
}
.wm-bottom{
  bottom:3%; font-size:clamp(2.5rem,8vw,6.5rem);
  -webkit-text-stroke:1.5px rgba(14,68,48,.1);
  animation:textFloatSlow 14s ease-in-out 1s infinite alternate-reverse;
}
@keyframes textFloatSlow{ 0%{transform:translateX(-22px)} 100%{transform:translateX(22px)} }

.hero-inner{ position:relative; z-index:5; max-width:1160px; width:100%; margin:0 auto; }
.hero-grid{ display:grid; grid-template-columns:1.16fr .84fr; gap:2.4rem; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.64rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--coffee-m); margin-bottom:1.4rem;
  padding:.45rem 1rem; border-radius:100px;
  border:1px solid rgba(61,42,30,.16); background:rgba(255,255,255,.5);
}
.hero-dot{ width:6px; height:6px; border-radius:50%; background:var(--forest); flex:none; }
.hero-ar{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.65rem); color:var(--biscuit);
  margin-bottom:.7rem; letter-spacing:0; line-height:1.5;
}
.c-tag{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.05rem,4vw,3.6rem); line-height:.99; letter-spacing:-.04em;
  color:var(--forest);
}
.c-tag em{ font-style:normal; color:var(--biscuit); }
.hero-tagline{
  font-family:var(--f-display); font-size:clamp(1rem,1.7vw,1.25rem);
  font-weight:700; color:var(--coffee-m); margin-top:1.1rem; line-height:1.5;
}
.hero-support{ margin-top:1.1rem; max-width:44ch; font-size:.95rem; line-height:1.85; opacity:.75; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-stats{
  display:flex; gap:2.2rem; margin-top:2.1rem; flex-wrap:wrap;
  padding-top:1.4rem; border-top:1px solid rgba(61,42,30,.1);
}
.hero-stat b{
  display:block; font-family:var(--f-display); font-size:1.45rem;
  font-weight:800; color:var(--forest); line-height:1;
}
.hero-stat > span{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; font-weight:700; }

.hero-cup-stage{ position:relative; height:clamp(340px,48vh,480px); display:flex; align-items:center; justify-content:center; }
.hero-cup{
  position:relative; z-index:6; width:clamp(190px,20vw,285px); max-width:70%;
  filter:drop-shadow(0 45px 60px rgba(61,42,30,.32));
  will-change:transform;
  animation:heroCupIdle 5.2s ease-in-out infinite alternate;
}
@keyframes heroCupIdle{
  0%  { transform:translateY(0)     rotate(-8deg)  rotateY(6deg)  scale(1); }
  33% { transform:translateY(-22px) rotate(-4deg)  rotateY(-8deg) scale(1.03); }
  66% { transform:translateY(-35px) rotate(-11deg) rotateY(10deg) scale(1.06); }
  100%{ transform:translateY(-16px) rotate(-6deg)  rotateY(-4deg) scale(1.02); }
}
.hero-cup-glow{
  position:absolute; width:380px; height:380px; border-radius:50%; z-index:2;
  background:radial-gradient(circle, rgba(242,194,48,.28), transparent 68%);
  filter:blur(20px);
}

.bg-cup{ position:absolute; z-index:2; pointer-events:none; opacity:.72;
  filter:drop-shadow(0 26px 34px rgba(61,42,30,.2)); }
.bg-cup-1{ width:132px; top:9%;    right:3%;  animation:bgCupSway1 5.5s ease-in-out infinite alternate; }
.bg-cup-2{ width:116px; bottom:7%; right:29%; animation:bgCupSway2 6.5s ease-in-out .8s infinite alternate; }
.bg-cup-3{ width:104px; top:41%;   right:1%;  animation:bgCupSway3 6s   ease-in-out 1.2s infinite alternate; }
@keyframes bgCupSway1{ 0%{transform:rotate(14deg) translateY(0)} 100%{transform:rotate(9deg) translateY(-20px)} }
@keyframes bgCupSway2{ 0%{transform:rotate(-16deg) translateY(0)} 100%{transform:rotate(-11deg) translateY(-24px)} }
@keyframes bgCupSway3{ 0%{transform:rotate(11deg) translateY(0)} 100%{transform:rotate(16deg) translateY(-18px)} }

.scroll-hint{
  position:absolute; bottom:1.6rem; right:2.2rem;
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  writing-mode:horizontal-tb;
  font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; font-weight:800;
  color:var(--coffee-m); opacity:.6;
}
.scroll-line{ width:1px; height:42px; background:linear-gradient(var(--biscuit),transparent); animation:scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{opacity:.25; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)} }

/* ===================== CARDS ===================== */
.card{
  position:relative; border-radius:1.6rem; padding:2.2rem;
  border:1px solid rgba(247,243,235,.09);
  background:rgba(247,243,235,.035);
  transition:all .55s var(--ease); overflow:hidden;
}
.s.light .card,.s.light-2 .card{
  border-color:rgba(61,42,30,.1);
  background:rgba(255,255,255,.62);
  box-shadow:0 18px 50px -32px rgba(61,42,30,.35);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(196,139,87,.45); background:rgba(196,139,87,.07); }
.s.light .card:hover,.s.light-2 .card:hover{ background:var(--white); box-shadow:0 30px 70px -30px rgba(61,42,30,.35); }
.card-num{
  font-family:var(--f-display); font-size:.7rem; font-weight:800; letter-spacing:.2em;
  color:var(--biscuit); margin-bottom:1rem; display:block;
}
.card h4{ font-size:1.18rem; margin-bottom:.7rem; }
.card p{ font-size:.9rem; line-height:1.8; opacity:.72; margin:0; }
.card-icon{ font-size:1.6rem; margin-bottom:1.1rem; display:block; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }

/* Image cards */
.s-img{
  border-radius:1.8rem; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.25);
  transition:transform .7s var(--ease);
}
.s-img:hover{ transform:scale(1.015); }
.s-img.tilt{ transform:rotate(1.5deg); }
.s-img.tilt:hover{ transform:rotate(0deg) scale(1.015); }

/* Cinema frame */
.cinema-frame{
  border-radius:2.2rem; overflow:hidden; position:relative;
  border:1px solid rgba(196,139,87,.3);
  box-shadow:0 30px 80px -15px rgba(0,0,0,.85), 0 0 50px rgba(196,139,87,.15);
  transition:all .6s var(--ease);
}
.cinema-frame:hover{ transform:scale(1.02); border-color:var(--biscuit); }

/* ===================== FONT SWITCHER ===================== */
.fs-toggle{
  position:fixed; bottom:1.5rem; left:1.5rem; z-index:9800;
  background:rgba(10,23,18,.88); backdrop-filter:blur(16px);
  border:1px solid rgba(196,139,87,.35); border-radius:100px;
  color:var(--cream); font-family:var(--f-body); font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.25rem; cursor:pointer;
  display:flex; align-items:center; gap:.55rem;
  transition:all .4s var(--ease);
}
.fs-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.fs-panel{
  position:fixed; bottom:4.6rem; left:1.5rem; z-index:9800; width:320px;
  background:rgba(9,20,15,.95); backdrop-filter:blur(20px);
  border:1px solid rgba(196,139,87,.25); border-radius:1.4rem;
  padding:1.3rem; color:var(--cream);
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fs-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.fs-panel h5{
  margin:0 0 .9rem; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--biscuit-l); font-weight:800; font-family:var(--f-body);
}
.fs-opt{
  display:block; width:100%; text-align:left; background:transparent;
  border:1px solid rgba(247,243,235,.1); border-radius:.8rem;
  padding:.72rem .95rem; margin-bottom:.5rem; cursor:pointer;
  color:var(--cream); transition:all .35s var(--ease);
}
.fs-opt:hover{ border-color:var(--biscuit); background:rgba(196,139,87,.1); }
.fs-opt.on{ border-color:var(--gold); background:rgba(242,194,48,.1); }
.fs-opt b{ display:block; font-size:.88rem; font-weight:800; }
.fs-opt > span{ font-size:.66rem; opacity:.55; letter-spacing:.08em; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1200px){
  .bg-cup-1{ width:145px } .bg-cup-2{ width:135px } .bg-cup-3{ width:125px }
}
@media (max-width:1100px){
  .hero-cup{ width:230px; }
  .hero-cup-stage{ height:430px; }
}
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ gap:2rem; }
}
@media (max-width:860px){
  .g2,.g2.wide-left,.hero-grid{ grid-template-columns:1fr; }
  .dots{ display:none; }
  .bg-cup{ display:none; }
  .grid-3{ grid-template-columns:1fr; }
  .s{ padding:5.5rem 1.35rem; }
  .hero-cup-stage{ height:360px; }
}
@media (max-width:768px){
  .ring{ display:none; }
  .beam{ opacity:.3; }
  .grid-2{ grid-template-columns:1fr; }
  .fs-panel{ width:calc(100vw - 3rem); }
  .topbar{ padding:.9rem 1.2rem; }
  .hero-stats{ gap:1.6rem; }
}
@media (max-width:580px){
  .grid-4{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .hero-cup, .bg-cup, .blob, .ring, .watermark, .scroll-line{ animation:none !important; }
  html{ scroll-behavior:auto; }
  .rv,.rv-r,.rv-s,.stg > *{ transition-duration:.01ms; }
}