:root{
  --bg:#fbf7f6;
  --bg2:#ffffff;
  --ink:#141316;
  --muted:#6b6670;
  --line:rgba(20,19,22,.10);
  --glass:rgba(255,255,255,.62);
  --glow1:rgba(255,169,209,.35);
  --glow2:rgba(255,214,170,.28);
  --glow3:rgba(180,220,255,.30);
  --shadow:0 18px 50px rgba(20,19,22,.12);
  --shadow2:0 10px 30px rgba(20,19,22,.10);
  --r:18px;
  --r2:26px;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 700px at 20% 10%, rgba(255,189,224,.35), transparent 55%),
             radial-gradient(1000px 700px at 80% 0%, rgba(255,225,190,.28), transparent 55%),
             radial-gradient(900px 600px at 70% 70%, rgba(180,220,255,.25), transparent 55%),
             linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

body.introLock{overflow:hidden}

/* Subtle grain for a luxury feel */
body::after{
  content:"";
  position:fixed; inset:-60px;
  pointer-events:none;
  z-index:-2;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="220" height="220" filter="url(%23n)" opacity="0.20"/></svg>');
  background-size:220px 220px;
  mix-blend-mode:multiply;
  opacity:.18;
}

/* Luxury intro overlay */
.intro{
  position:fixed; inset:0;
  z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(255,189,224,.45), transparent 55%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,225,190,.35), transparent 55%),
    radial-gradient(900px 520px at 70% 80%, rgba(180,220,255,.28), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  backdrop-filter:blur(18px);
  overflow:hidden;
  will-change:opacity;
}

/* Fallback: if animation libraries are blocked, we still fade the intro away */
.intro.introFallback{opacity:1}
.intro.introOff{opacity:0; pointer-events:none; transition:opacity .5s ease}
.introNoise{
  position:absolute; inset:-60px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="260" height="260" filter="url(%23n)" opacity="0.22"/></svg>');
  background-size:260px 260px;
  mix-blend-mode:multiply;
  opacity:.35;
}
.introInner{position:relative; text-align:center; padding:26px 26px; max-width:560px}
.introLogo{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px}
.introName{font-family:"Playfair Display", serif; font-weight:700; font-size:34px; letter-spacing:-.02em}
.introLine{width:120px; height:1px; margin:16px auto 14px; background:linear-gradient(90deg, transparent, rgba(20,19,22,.25), transparent)}
.introTag{color:var(--muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.introHint{margin-top:16px; color:rgba(20,19,22,.55); font-size:12px}
.introSkip{
  position:absolute;
  right:18px; top:18px;
  border-radius:999px;
  border:1px solid rgba(20,19,22,.12);
  background:rgba(255,255,255,.55);
  padding:9px 12px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(20,19,22,.72);
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.introSkip:hover{transform:translateY(-1px); background:rgba(255,255,255,.72); border-color:rgba(20,19,22,.18)}
.introSkip:active{transform:translateY(0px) scale(.98)}
#bgGlow{
  position:fixed; inset:-30vmax;
  background:radial-gradient(circle at 30% 30%, var(--glow1), transparent 45%),
             radial-gradient(circle at 70% 20%, var(--glow2), transparent 48%),
             radial-gradient(circle at 60% 80%, var(--glow3), transparent 52%);
  filter:blur(28px);
  opacity:.85;
  pointer-events:none;
  z-index:-3;
  transform:translate3d(0,0,0);
}
#cursorGlow{
  position:fixed;
  width:520px; height:520px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  opacity:.0;
  background:radial-gradient(circle, rgba(255,170,214,.24), rgba(255,220,192,.10), transparent 62%);
  filter:blur(10px);
  mix-blend-mode:multiply;
  transform:translate(-50%,-50%);
}

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px);
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logoMark{width:14px; height:14px; border-radius:999px; background:linear-gradient(135deg, rgba(255,169,209,1), rgba(255,214,170,1)); box-shadow:0 0 0 6px rgba(255,169,209,.15)}
.logoText{font-weight:700; letter-spacing:-.02em}

.nav{display:flex; gap:16px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:500; font-size:13px; padding:8px 10px; border-radius:999px}
.nav a:hover{color:var(--ink); background:rgba(255,255,255,.7); box-shadow:0 0 0 1px var(--line) inset}
.nav .pill{color:var(--ink); background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); box-shadow:0 0 0 1px var(--line) inset}

.actions{display:flex; align-items:center; gap:10px}
.lang{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:9px 12px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(20,19,22,.06);
}
.langDot{width:9px; height:9px; border-radius:999px; background:linear-gradient(135deg, rgba(255,169,209,1), rgba(180,220,255,1))}
.iconBtn{display:grid; place-items:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.72); color:var(--ink); text-decoration:none}
.iconBtn svg{width:18px; height:18px}
.iconBtn:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}

main{width:100%}

.hero{position:relative; padding:56px 18px 0; overflow:hidden}
#hero3d{position:absolute; inset:-60px -60px -60px -60px; width:calc(100% + 120px); height:calc(100% + 120px); z-index:-1; opacity:.92}
.heroGrid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.kicker{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.62); color:var(--muted); font-size:13px}
.headline{font-family:"Playfair Display", serif; font-size:56px; line-height:1.02; margin:16px 0 12px; letter-spacing:-.02em}
.subhead{color:var(--muted); font-size:16px; line-height:1.6; max-width:52ch}

.ctaRow{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.74); color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; box-shadow:0 10px 26px rgba(20,19,22,.06)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}
.btn.primary{border:0; background:linear-gradient(135deg, rgba(255,169,209,1), rgba(255,214,170,1)); position:relative; overflow:hidden}
.btn.big{padding:14px 18px; font-size:15px}

.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:22px}
.stat{border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.62); padding:12px 12px; box-shadow:0 12px 28px rgba(20,19,22,.06)}
.statNum{font-weight:700; font-size:13px}
.statLabel{color:var(--muted); font-size:12px; margin-top:4px}

.heroMedia{display:grid; gap:14px}
.polaroid{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.68); box-shadow:var(--shadow); padding:10px}
.polaroid img{width:100%; height:clamp(320px, 46vh, 440px); object-fit:contain; border-radius:calc(var(--r2) - 10px)}
.polaroidCap{padding:10px 6px 4px; color:var(--muted); font-size:12px}


.floatingCard{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.62); box-shadow:var(--shadow2); padding:14px}
.floatingTag{font-weight:700; letter-spacing:-.01em}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{font-size:12px; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.62); padding:8px 10px; border-radius:999px}

.marquee{margin-top:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.44); overflow:hidden}
.marqueeTrack{display:flex; gap:38px; padding:12px 0; white-space:nowrap; animation:marq 18s linear infinite}
.marqueeTrack span{color:rgba(20,19,22,.55); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}

.section{padding:70px 18px; position:relative}
.sectionHead{max-width:var(--max); margin:0 auto 22px}
.sectionHead h2{font-family:"Playfair Display", serif; margin:0; font-size:36px; letter-spacing:-.02em}
.sectionHead p{margin:10px 0 0; color:var(--muted)}

/* Luxury section atmosphere */
.section::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 280px at 12% 10%, rgba(255,169,209,.14), transparent 60%),
    radial-gradient(700px 280px at 86% 30%, rgba(180,220,255,.13), transparent 60%),
    radial-gradient(800px 320px at 40% 85%, rgba(255,222,170,.10), transparent 62%);
  opacity:.85;
  pointer-events:none;
  mask-image:linear-gradient(#000, #000);
}
.section > *{position:relative; z-index:1}


.aboutGrid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
.lead{font-size:18px; line-height:1.6; margin:0 0 14px}
.bullets{display:grid; gap:12px; margin:18px 0}
.bullet{display:grid; grid-template-columns:18px 1fr; gap:12px; padding:16px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.60)}
.bulletIcon{width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg, rgba(255,169,209,1), rgba(180,220,255,1))}
.bulletTitle{font-weight:700}
.bulletText{color:var(--muted); font-size:13px; margin-top:4px; line-height:1.5}
.aboutButtons{display:flex; gap:10px; flex-wrap:wrap}

.aboutCollage{display:grid; gap:10px; max-width:320px; justify-self:end}
.glassFrame{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.60); box-shadow:var(--shadow2); padding:10px}
.glassFrame img{width:100%; height:clamp(140px, 18vh, 190px); object-fit:contain; border-radius:calc(var(--r2) - 10px)}
.miniGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
/* Mini tiles: premium framing (no cropping) */
.mini{border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.60); overflow:hidden; box-shadow:0 12px 26px rgba(20,19,22,.06); aspect-ratio:3/4}
.mini img{width:100%; height:100%; object-fit:contain; padding:6px; display:block}

.aboutLux{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:14px}
.luxCard{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.56); box-shadow:0 16px 40px rgba(20,19,22,.08); padding:14px 14px}
.luxTitle{font-weight:800; letter-spacing:-.02em; margin-bottom:10px}
.luxList{margin:0; padding:0 0 0 16px; color:var(--muted)}
.luxList li{margin:6px 0}
.microTestimonial{
  margin-top:12px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.50));
  box-shadow:0 10px 24px rgba(20,19,22,.08);
  font-style:italic;
  color:rgba(20,19,22,.78);
}

/* Smart frames: show FULL image (no harsh cropping) + soft blurred fill behind */
.smartFrame{position:relative; overflow:hidden}
.smartFrame::before{
  content:"";
  position:absolute; inset:-26px;
  background-image:var(--bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(34px) saturate(1.18);
  transform:scale(1.14);
  opacity:.62;
  pointer-events:none;
}
.smartFrame > img,
.smartFrame img{position:relative; z-index:2; display:block}


.portfolioBlock{max-width:var(--max); margin:0 auto 26px}
.rowTitle{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 10px; font-weight:800}
.rowHint{color:var(--muted); font-size:12px; font-weight:600}
.videoRow{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.videoCard{position:relative; border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.64); overflow:hidden; box-shadow:0 16px 40px rgba(20,19,22,.10)}
.videoCard video{width:100%; height:220px; object-fit:cover; display:block; background:#000; pointer-events:none}

/* Hide native controls (premium look) */
video::-webkit-media-controls{display:none !important}
video::-webkit-media-controls-enclosure{display:none !important}
video::-webkit-media-controls-panel{display:none !important}

/* Hide native video controls for a premium look */
video.ugcVideo::-webkit-media-controls{display:none !important}
video.ugcVideo::-webkit-media-controls-panel{display:none !important}
video.ugcVideo::-webkit-media-controls-play-button{display:none !important}
video.ugcVideo::-webkit-media-controls-start-playback-button{display:none !important}
.videoCard::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 35%, transparent 70%);
  transform:translateX(-120%);
  opacity:.0;
  pointer-events:none;
}
.videoCard:hover::after{opacity:.9; animation:shine 1.15s ease-in-out}
@keyframes shine{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.soundBtn{
  position:absolute; right:10px; top:10px;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(20,19,22,.35);
  backdrop-filter:blur(10px);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  opacity:.95;
}
.soundBtn:hover{transform:translateY(-1px); background:rgba(20,19,22,.45)}
.soundPill{
  position:absolute; left:10px; bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(20,19,22,.26);
  backdrop-filter:blur(10px);
  color:rgba(255,255,255,.92);
  font-size:12px; font-weight:700;
  letter-spacing:-.01em;
}

.noteCard{max-width:var(--max); margin:18px auto 0; border:1px solid var(--line); border-radius:var(--r2); background:rgba(255,255,255,.62); padding:16px; box-shadow:var(--shadow2)}
.noteTitle{font-weight:800}
.noteText{color:var(--muted); margin-top:6px; line-height:1.55}

.brandsWall{max-width:var(--max); margin:12px auto 0; display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:12px}
.brandLogo{width:100%; aspect-ratio:1/1; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.78); object-fit:contain; padding:10px; box-shadow:0 10px 24px rgba(20,19,22,.06)}
.brandsWall .brandLogo{animation:floaty 6.6s ease-in-out infinite; will-change:transform}
.brandsWall .brandLogo:nth-child(2n){animation-duration:7.9s; animation-delay:-1.2s}
.brandsWall .brandLogo:nth-child(3n){animation-duration:8.6s; animation-delay:-2.4s}
.brandsWall .brandLogo:nth-child(5n){animation-duration:9.3s; animation-delay:-3.1s}
.brandLogo:hover{transform:translateY(-2px) rotate(-1deg); box-shadow:var(--shadow2)}
.brandNote{max-width:var(--max); margin:14px auto 0; color:var(--muted)}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Logo marquee */
.logoMarquee{max-width:var(--max); margin:0 auto 14px; overflow:hidden; border:1px solid var(--line); border-radius:var(--r2); background:rgba(255,255,255,.46); box-shadow:0 16px 40px rgba(20,19,22,.08);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logoMarqueeTrack{display:flex; gap:0; width:max-content; animation:logoScroll 16s linear infinite}
.logoMarqueeSet{display:flex; gap:14px; padding:14px}
.logoMarquee .brandLogo{width:56px; height:56px; padding:10px}
.logoMarquee:hover .logoMarqueeTrack{animation-play-state:paused}
@keyframes logoScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Second logo animation (orbit) */
.brandShowcase{max-width:var(--max); margin:0 auto; display:grid; gap:12px}
.orbitCard{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.60); box-shadow:0 16px 40px rgba(20,19,22,.08); padding:16px; overflow:hidden}
.orbitHead{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.orbitHead h3{margin:0; font-size:18px}
.orbitHead p{margin:0; color:var(--muted); font-size:12px}
.logoOrbit{position:relative; height:260px; border-radius:calc(var(--r2) - 8px); border:1px solid rgba(20,19,22,.12); background:radial-gradient(circle at 40% 30%, rgba(255,169,209,.18), transparent 55%),
           radial-gradient(circle at 65% 70%, rgba(180,220,255,.16), transparent 55%),
           rgba(255,255,255,.40);
  overflow:hidden;
  perspective:900px;
}
.orbitRing{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;}
.orbitLogo{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:999px; border:1px solid rgba(20,19,22,.14); background:rgba(255,255,255,.82); padding:10px; object-fit:contain; box-shadow:0 14px 30px rgba(20,19,22,.10)}
.orbitHint{position:absolute; left:12px; bottom:12px; font-size:12px; color:rgba(20,19,22,.64); background:rgba(255,255,255,.65); border:1px solid rgba(20,19,22,.10); padding:7px 10px; border-radius:999px}

.reviewsSlider{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:52px 1fr 52px; gap:12px; align-items:center}
.slideBtn{width:52px; height:52px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.70); box-shadow:0 10px 24px rgba(20,19,22,.06); cursor:pointer; font-size:28px; line-height:1; color:var(--ink)}
.slideBtn:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}
.reviewsViewport{overflow:hidden; border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.44); box-shadow:0 16px 40px rgba(20,19,22,.08);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviewsTrack{display:flex; gap:14px; padding:14px; overflow:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.reviewsTrack::-webkit-scrollbar{display:none}
.reviewItem{flex:0 0 310px; margin:0; scroll-snap-align:start; display:grid; gap:10px}
.reviewItem .phoneFrame{transform:scale(.94); opacity:.68; box-shadow:0 18px 46px rgba(20,19,22,.10); transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease, box-shadow .55s ease}
.reviewItem.active .phoneFrame{transform:scale(1); opacity:1; box-shadow:0 26px 70px rgba(20,19,22,.14)}
.phoneFrame{position:relative; height:400px; border-radius:34px; border:1px solid rgba(20,19,22,.14); background:rgba(255,255,255,.68); overflow:hidden; box-shadow:0 20px 50px rgba(20,19,22,.12)}
.phoneFrame::before{
  content:"";
  position:absolute;
  top:10px; left:50%; transform:translateX(-50%);
  width:120px; height:18px; border-radius:999px;
  background:rgba(20,19,22,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  z-index:3;
  pointer-events:none;
}
.phoneFrame::after{
  content:"Verified collab";
  position:absolute;
  left:12px; bottom:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(20,19,22,.10);
  color:rgba(20,19,22,.72);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  z-index:3;
  pointer-events:none;
}
.phoneFrame img{width:100%; height:100%; object-fit:contain; display:block}
.reviewItem figcaption{display:none}

/* Tap-to-zoom modal */
.imgModal{position:fixed; inset:0; background:rgba(10,10,12,.56); display:none; place-items:center; padding:20px; z-index:50}
.imgModal.open{display:grid}
.imgModal img{max-width:min(960px, 92vw); max-height:84vh; border-radius:18px; background:#fff; border:1px solid rgba(255,255,255,.35)}
.imgModalClose{position:fixed; right:18px; top:18px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(20,19,22,.35); color:#fff; font-size:26px; line-height:1; cursor:pointer}
.noteSmall{max-width:var(--max); margin:8px auto 0; color:var(--muted); font-size:12px}

.pricingGrid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.priceCard{border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.62); padding:16px; box-shadow:0 16px 40px rgba(20,19,22,.08); position:relative; overflow:hidden}
.priceCard.glow::before{
  content:"";
  position:absolute; inset:-40%;
  background:radial-gradient(circle at 30% 40%, rgba(255,169,209,.45), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(180,220,255,.35), transparent 55%);
  filter:blur(18px);
  opacity:.55;
  pointer-events:none;
}
.priceTop h3{margin:0; font-size:18px}
.muted{color:var(--muted); margin:6px 0 0; font-size:13px}
.priceList{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px}
.priceList li{display:flex; gap:16px; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px dashed rgba(20,19,22,.14)}
.priceList li > span{flex:1; min-width:0}
.priceList strong{white-space:nowrap}
.priceCta{margin-top:14px}
.fineprint{max-width:var(--max); margin:14px auto 0; color:var(--muted); font-size:12px; line-height:1.5}

.contactCard{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:14px; border-radius:var(--r2); border:1px solid var(--line); background:rgba(255,255,255,.62); padding:16px; box-shadow:var(--shadow)}
.contactLine{color:var(--muted); margin-top:10px; line-height:1.6}
.label{display:inline-block; min-width:78px; color:rgba(20,19,22,.70); font-weight:700}
.link{color:var(--ink); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}
.contactRight{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px}
.contactMini{color:var(--muted); font-size:12px}

.footer{max-width:var(--max); margin:26px auto 0; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px}
.footerLinks{display:flex; gap:14px}
.footerLinks a{color:var(--muted); text-decoration:none}
.footerLinks a:hover{color:var(--ink)}

/* Luxury progress bar */
.progress{position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; pointer-events:none; background:rgba(255,255,255,.22); backdrop-filter:blur(10px)}
.progressBar{height:100%; width:0%; background:linear-gradient(90deg, rgba(255,169,209,.95), rgba(180,220,255,.95), rgba(255,222,170,.88)); box-shadow:0 10px 28px rgba(255,169,209,.22); position:relative; overflow:hidden}
.progressBar::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-60%); animation:shine 2.8s linear infinite}
@keyframes shine{to{transform:translateX(60%)}}

/* About watermark + subtle motion */
#about{position:relative}
#about::before{content:"MISVITALIJA"; position:absolute; left:max(18px, calc(50% - var(--max)/2)); top:18px; font-family:"Playfair Display", serif; font-weight:700; letter-spacing:.18em; font-size:42px; color:rgba(20,19,22,.05); pointer-events:none; filter:blur(.2px)}
@media (max-width: 980px){#about::before{font-size:34px; letter-spacing:.14em}}

/* Reveal (safe default: never hide content if animations are blocked) */
.reveal{opacity:1; transform:none}

/* Tilt */
.tilt{transform-style:preserve-3d; will-change:transform}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr;}
  .polaroid img{height:380px}
  .stats{grid-template-columns:1fr;}
  .aboutGrid{grid-template-columns:1fr}
  .brandsWall{grid-template-columns:repeat(6, minmax(0,1fr))}
  .pricingGrid{grid-template-columns:1fr}
  .contactCard{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .headline{font-size:42px}
  .videoRow{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rowHint{display:none}
  .videoCard video{height:200px}
  .brandsWall{grid-template-columns:repeat(4, minmax(0,1fr))}
  .orbitHint{display:none}
  .reviewsSlider{grid-template-columns:1fr}
  .slideBtn{display:none}
  #cursorGlow{display:none}
}
@media (max-width: 420px){
  .headline{font-size:38px}
  .videoRow{grid-template-columns:1fr}
  .videoCard video{height:220px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  #hero3d{display:none}
}

/* Luxury scroll progress */
#scrollProgress{
  position:fixed;
  left:0; top:0;
  height:3px;
  width:0;
  z-index:1200;
  background:linear-gradient(90deg, rgba(255,169,209,.95), rgba(255,214,170,.95), rgba(180,220,255,.95));
  box-shadow:0 10px 30px rgba(20,19,22,.18);
  border-bottom-right-radius:999px;
}

/* Make the About collage feel less dominant on desktop */
@media (min-width: 960px){
  .aboutGrid{gap:32px}
  .aboutCollage{transform:translateY(-6px)}
}

/* Luxe shimmer on primary buttons */
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-60% -40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-60%) rotate(12deg);
  animation:btnShine 2.6s linear infinite;
  pointer-events:none;
}
@keyframes btnShine{0%{transform:translateX(-60%) rotate(12deg)}100%{transform:translateX(120%) rotate(12deg)}}