:root {
  --primary: #6a4da1;
  --primary-dark: #3f2a6a;
  --primary-soft: #f3effa;
  --accent: #49c6c1;
  --accent-dark: #13928d;
  --dark: #1d2030;
  --text: #2b3042;
  --muted: #6f7687;
  --border: #e8eaf1;
  --bg: #fbfbfe;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(39, 32, 62, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --container: min(1200px, calc(100% - 2rem));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container { width: var(--container); margin: 0 auto; }
.skip-link { position:absolute; left:-999px; top:0; background:#000; color:#fff; padding:.75rem 1rem; z-index:9999; }
.skip-link:focus { left:1rem; }
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(106,77,161,.08);
}
.nav-wrap {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0;
}
.brand { display:flex; align-items:center; gap:.8rem; }
.brand img { width:58px; height:58px; object-fit:contain; border-radius:16px; background:#fff; box-shadow:0 8px 25px rgba(31,21,51,.08); }
.brand strong { display:block; font-size:1.08rem; color:var(--dark); }
.brand span { font-size:.86rem; color:var(--muted); }
.main-nav { display:flex; align-items:center; gap:1.1rem; }
.main-nav a:not(.btn) { color:var(--text); font-weight:600; }
.main-nav a:not(.btn):hover { color:var(--primary); }
.nav-toggle { display:none; border:none; background:none; font-size:1.7rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .95rem 1.35rem; border-radius:999px; font-weight:700; color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--accent-dark));
  box-shadow: var(--shadow); border:none; transition:.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--primary-dark); border:1px solid rgba(106,77,161,.18); box-shadow:none; }
.btn--small { padding:.75rem 1.05rem; font-size:.94rem; }
.hero {
  position:relative; padding: 5rem 0 4rem; overflow:hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(106,77,161,.10), transparent 25%),
    radial-gradient(circle at 90% 25%, rgba(73,198,193,.12), transparent 20%),
    linear-gradient(180deg, #fbfbfe 0%, #f5f6fb 100%);
}
.hero::before {
  content:''; position:absolute; width:460px; height:460px; right:-140px; top:-120px;
  background: linear-gradient(135deg, rgba(106,77,161,.10), rgba(73,198,193,.08)); border-radius: 50%; filter: blur(6px);
}
.hero-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items:center; }
.eyebrow {
  display:inline-block; padding:.35rem .72rem; border-radius:999px; font-weight:700;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  background: rgba(106,77,161,.12); color:var(--primary-dark); margin:0 0 .7rem;
}
.eyebrow--dark { background: rgba(29,32,48,.08); color: var(--dark); }
.eyebrow--purple { background: rgba(106,77,161,.12); color: var(--primary); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.04; margin: 0 0 1rem; color: var(--dark); }
.hero h1 span { color: var(--primary); }
.hero p { color: var(--muted); font-size: 1.05rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero-points {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:2rem;
}
.hero-points div {
  background: rgba(255,255,255,.8); border:1px solid rgba(106,77,161,.10); padding:1rem; border-radius:18px; box-shadow: var(--shadow);
}
.hero-points strong { display:block; font-size:1.05rem; color:var(--dark); }
.hero-points span { display:block; color:var(--muted); font-size:.92rem; }
.hero-visual { position:relative; min-height: 620px; }
.glass-bg {
  position:absolute; inset:40px 60px 80px 40px; border-radius: 38px;
  background: linear-gradient(140deg, rgba(106,77,161,.13), rgba(73,198,193,.16));
}
.hero-photo {
  position:absolute; border-radius: 30px; overflow:hidden; box-shadow: var(--shadow); background:#fff; border: 8px solid rgba(255,255,255,.9);
}
.hero-photo.primary { width: 68%; right:0; top:0; }
.hero-photo.secondary { width: 35%; left:0; top:80px; }
.hero-photo.tertiary { width: 38%; left:18%; bottom:10px; }
.hero-photo img { width:100%; height:100%; object-fit:cover; }
.hero-badge {
  position:absolute; right:6%; bottom:16%; background:#fff; color:var(--primary-dark);
  padding:.85rem 1rem; border-radius:16px; font-weight:700; box-shadow: var(--shadow);
}
.scroll-cue {
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(106,77,161,.18);
  display:grid; place-items:center; margin:2rem auto 0; color:var(--primary);
  animation: bounce 2.3s infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
.signature-strip { padding: 1rem 0 4rem; }
.signature-grid { display:grid; grid-template-columns: 1fr .85fr; gap: 2rem; align-items:center; }
.signature-copy h2, .story-content h2, .section-head h2, .adjustable-copy h2, .faq-intro h2, .contact-copy h2, .brands-grid h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height:1.14; margin:.2rem 0 1rem; color:var(--dark); }
.signature-copy p, .story-content p, .section-head p, .adjustable-copy p, .faq-intro p, .contact-copy p, .brands-grid p { color:var(--muted); }
.signature-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:1rem;
}
.signature-card img { border-radius: 22px; }
.section { padding: 5rem 0; }
.story-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 2rem; align-items:center; }
.story-visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story-content { background: #fff; padding: 1.6rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.service-rail {
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top:1.2rem;
}
.service-rail article {
  padding:1rem; border:1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #faf9fe 100%);
}
.service-rail h3 { margin:.1rem 0 .45rem; font-size:1.05rem; color:var(--primary-dark); }
.collection-showcase { background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%); }
.section-head.center { max-width: 760px; margin-inline: auto; text-align:center; }
.showcase-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; margin-top: 2rem; }
.showcase-card {
  background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--border);
  transform: translateY(0); transition: transform .25s ease;
}
.showcase-card:hover { transform: translateY(-6px); }
.showcase-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; }
.showcase-card div { padding:1.1rem; }
.tag { display:inline-block; padding:.3rem .65rem; border-radius:999px; background: var(--primary-soft); color: var(--primary); font-size:.78rem; font-weight:700; }
.showcase-card h3 { margin:.7rem 0 .45rem; }
.adjustable-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items:start; }
.notice-box {
  background: rgba(29,32,48,.04); border-left:4px solid var(--accent); padding:1rem 1rem 1rem 1.1rem; border-radius: 0 16px 16px 0; margin-top: 1.2rem;
}
.notice-box ul { margin:.75rem 0 0 1rem; padding:0; }
.steps { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.steps article {
  position:relative; padding: 1.2rem; background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow); border:1px solid var(--border);
}
.steps span {
  display:inline-flex; width:50px; height:50px; align-items:center; justify-content:center; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; font-weight:800; margin-bottom:.8rem;
}
.partners-marquee {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary)); color:#fff; overflow:hidden; padding: 1rem 0;
}
.marquee-track {
  display:flex; gap:1.6rem; width:max-content; white-space:nowrap; animation: marquee 28s linear infinite;
}
.marquee-track span { font-weight:700; letter-spacing:.02em; opacity:.92; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gallery-layout { display:grid; grid-template-columns: .88fr 1.12fr; gap:2rem; align-items:start; }
.gallery-points { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.8rem; }
.gallery-points li { padding-left:1.6rem; position:relative; }
.gallery-points li::before { content:'•'; position:absolute; left:0; color:var(--accent-dark); font-size:1.35rem; line-height:1; }
.gallery-card { background:#fff; padding:1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.gallery-stage img { width:100%; aspect-ratio: 16/10; object-fit:cover; border-radius: 18px; }
.thumbs { display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; margin-top:.9rem; }
.thumb { padding:0; border:none; border-radius: 14px; overflow:hidden; cursor:pointer; opacity:.75; background:none; border:2px solid transparent; }
.thumb.active { opacity:1; border-color: var(--primary); }
.thumb img { width:100%; aspect-ratio: 1/1; object-fit:cover; }
.brands-section { background: linear-gradient(180deg, #faf8ff 0%, #fff 100%); }
.brands-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items:center; }
.brand-cloud { display:flex; flex-wrap:wrap; gap:.7rem; }
.brand-cloud span {
  padding:.7rem 1rem; border-radius:999px; background:#fff; border:1px solid var(--border); box-shadow: var(--shadow); font-weight:700; color: var(--primary-dark);
}
.location-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; }
.location-card {
  padding:1.5rem; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border:1px solid var(--border);
}
.location-card h3 { margin-top:0; color: var(--primary-dark); }
.text-link { color: var(--primary); font-weight:700; }
.faq-section { background: linear-gradient(180deg, #f7f6fd 0%, #fff 100%); }
.faq-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items:start; }
.faq-list details {
  background:#fff; border:1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.faq-list summary { cursor:pointer; font-weight:700; color:var(--dark); }
.faq-list p { color:var(--muted); }
.contact-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 2rem; align-items:start; }
.contact-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.8rem; }
.contact-list a { color: var(--primary); font-weight:700; }
.contact-card {
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%); border:1px solid var(--border); border-radius: var(--radius-lg); padding:1.5rem; box-shadow: var(--shadow);
}
.contact-card h3 { margin-top:0; color:var(--primary-dark); }
.contact-card label { display:block; font-weight:700; margin:.85rem 0 .35rem; }
.contact-card input, .contact-card select, .contact-card textarea {
  width:100%; border:1px solid #d9dfeb; border-radius: 14px; padding:.95rem 1rem; font:inherit; background:#fff;
}
.contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus { outline:2px solid rgba(73,198,193,.18); border-color: var(--accent-dark); }
.contact-card small { display:block; margin-top:.8rem; color:var(--muted); }
.whatsapp-float {
  position:fixed; right:1rem; bottom:1rem; width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:#25d366; color:#fff; font-size:1.35rem; box-shadow: var(--shadow); z-index:999;
}
.site-footer { background:#181627; color:#d9dce7; }
.footer-grid { display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:2rem; padding: 2.2rem 0; }
.site-footer h3 { color:#fff; margin-top:0; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding: 1rem max(1rem, calc((100vw - 1200px)/2)) 1.2rem;
}
.reveal { opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-delay { transition-delay: .15s; }
.reveal-delay-2 { transition-delay: .3s; }
.floating-y { animation: floatY 5s ease-in-out infinite; }
.floating-y-delayed { animation: floatY 5.8s ease-in-out infinite; }
.pulse-soft { animation: pulseSoft 2.8s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseSoft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (max-width: 1080px) {
  .hero-grid, .signature-grid, .story-grid, .adjustable-grid, .gallery-layout, .brands-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 560px; }
  .showcase-grid { grid-template-columns: repeat(2,1fr); }
  .location-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .nav-toggle { display:block; }
  .main-nav {
    position:absolute; top:100%; left:0; right:0; background:#fff; padding:1rem; display:none; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--border);
  }
  .main-nav.open { display:flex; }
  .hero { padding-top: 3rem; }
  .hero-grid { gap: 1.6rem; }
  .hero-points, .service-rail, .showcase-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 480px; }
  .hero-photo.primary { width: 72%; }
  .hero-photo.secondary { width: 42%; top:55px; }
  .hero-photo.tertiary { width: 46%; left:10%; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
}