/* ===========================================================
   Slime Studio — Retail Partner site (premium dark)
   Palette · Ink #221F33 · Bubblegum #EC4D97 · Lime #8DC63F
   Sky #3FBDE3 · Grape #9A6FE0 · Sunburst #F4C430
   =========================================================== */

:root {
  --pink:#EC4D97;
  --grape:#9A6FE0;
  --sky:#3FBDE3;
  --max:1280px;
}

* , *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:#fff;
  background:linear-gradient(160deg,#2C2148 0%,#261C40 52%,#301F52 100%);
  background-attachment:fixed;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3 { font-family:'Bricolage Grotesque',sans-serif; margin:0; text-wrap:balance; }
p { text-wrap:pretty; }
img { max-width:100%; display:block; }

.container { max-width:var(--max); margin:0 auto; padding:0 40px; }
.container--narrow { max-width:900px; }

/* Wordmark */
.wordmark { font-family:'Baloo 2',cursive; font-weight:800; font-size:27px; line-height:1; text-decoration:none; white-space:nowrap; }
.wordmark__studio { font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:12px; letter-spacing:.3em; color:#CBB6F2; margin-left:9px; vertical-align:middle; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; font-weight:600; font-size:15px; padding:12px 24px; border-radius:999px; transition:transform .25s ease, background .25s ease; }
.btn--lg { font-size:16px; padding:18px 36px; }
.btn--light { color:#221F33; background:#fff; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.btn--light:hover { transform:translateY(-3px); }
.btn--glass { color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); }
.btn--glass:hover { transform:translateY(-3px); background:rgba(255,255,255,.16); }

/* Nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(38,28,64,.55); backdrop-filter:saturate(1.2) blur(16px); -webkit-backdrop-filter:saturate(1.2) blur(16px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav__inner { max-width:var(--max); margin:0 auto; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav__links { display:flex; align-items:center; gap:36px; }
.nav__links > a:not(.btn) { text-decoration:none; font-weight:500; font-size:15px; color:rgba(255,255,255,.72); }
.nav__links > a:not(.btn):hover { color:#fff; }

/* Glows */
.glow { position:absolute; border-radius:50%; pointer-events:none; }
.glow--purple { top:-140px; left:-120px; width:520px; height:520px; background:radial-gradient(circle at 40% 40%, rgba(154,111,224,.55), rgba(154,111,224,0)); filter:blur(30px); }
.glow--pink { bottom:-160px; right:-80px; width:460px; height:460px; background:radial-gradient(circle at 40% 40%, rgba(236,77,151,.34), rgba(236,77,151,0)); filter:blur(40px); }
.glow--center { top:50%; left:50%; transform:translate(-50%,-50%); width:720px; height:720px; background:radial-gradient(circle, rgba(154,111,224,.22), rgba(154,111,224,0)); filter:blur(50px); }

/* Hero */
.hero { position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden; }
.hero__img { position:absolute; inset:0; height:100%; border-radius:0; border:0; }
.hero__scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(36,27,59,.94) 0%, rgba(36,27,59,.76) 42%, rgba(36,27,59,.40) 78%, rgba(36,27,59,.28) 100%); }
.hero__silhouette {
  position:absolute; z-index:1; top:50%; right:6%; height:82%; width:auto;
  transform:translateY(-50%); color:#fff; opacity:.1;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
  pointer-events:none;
}
.hero__inner { position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 40px; width:100%; }
.hero__text { max-width:720px; }
.hero h1 { font-weight:800; font-size:88px; line-height:.98; letter-spacing:-.03em; margin:26px 0 0; }
.hero__sub { font-size:24px; line-height:1.5; color:rgba(255,255,255,.82); margin:30px 0 0; max-width:34rem; font-weight:400; }
.hero__actions { display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }

/* Eyebrow */
.eyebrow { font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--grape); }
.eyebrow--light { display:inline-flex; align-items:center; gap:10px; color:#CBB6F2; letter-spacing:.18em; }

/* Sections */
.section { position:relative; padding:130px 0; }
.section--tint { background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.section__head { max-width:820px; margin-bottom:64px; }
.section__head--center { max-width:none; text-align:center; margin-bottom:72px; }
.section__head h2 { font-weight:800; font-size:56px; letter-spacing:-.02em; margin-top:16px; line-height:1.02; }
.section__lead { font-size:20px; line-height:1.6; color:rgba(255,255,255,.7); margin:22px 0 0; }

.grid { display:grid; gap:22px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }

/* Concept tiles */
.concept { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.tile { position:relative; overflow:hidden; border-radius:24px; min-height:600px; }
.tile:nth-child(2n) { margin-top:64px; }
.tile__img { position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:0; object-fit:cover; }
.tile::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(18,10,35,.82) 0%,
    rgba(18,10,35,.55) 28%,
    rgba(18,10,35,.08) 62%,
    rgba(18,10,35,0) 100%
  );
  pointer-events:none;
}
.tile__content { position:absolute; z-index:2; left:32px; right:32px; bottom:34px; }
.tile__step { display:block; margin-bottom:10px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#ff4fa3; }
.tile__title { font-weight:700; font-size:clamp(28px,3vw,42px); line-height:.95; letter-spacing:-.01em; margin:0 0 12px; }
.tile__copy { max-width:360px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.82); margin:0; }

/* Feature cards */
.feature { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:24px; padding:40px; }
.feature__icon { display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:15px; }
.feature h3 { font-weight:700; font-size:23px; margin:26px 0 8px; }
.feature p { font-size:16px; line-height:1.55; color:rgba(255,255,255,.62); margin:0; }
.feature--accent { background:linear-gradient(150deg, rgba(154,111,224,.28), rgba(236,77,151,.16)); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; justify-content:center; }
.feature__stmt { font-weight:800; font-size:30px; line-height:1.1; }
.feature--accent p { color:rgba(255,255,255,.82); margin-top:14px; }

/* Lifestyle */
.lifestyle { position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; }
.lifestyle__img { position:absolute; inset:0; height:100%; border-radius:0; border:0; }
.lifestyle__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(36,27,59,.92) 0%, rgba(36,27,59,.26) 55%, rgba(36,27,59,.12) 100%); }
.lifestyle__inner { position:relative; z-index:2; width:100%; padding-bottom:100px; }
.lifestyle h2 { font-weight:800; font-size:64px; line-height:1.02; letter-spacing:-.025em; max-width:20ch; }
.lifestyle__sub { font-size:19px; line-height:1.6; color:rgba(255,255,255,.68); margin:22px 0 0; max-width:32ch; font-weight:400; }

/* Flexible layouts */
.layouts { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.layouts--plain .layout { background:none; border:0; padding:0 12px; text-align:center; }
.layout span { display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:17px; margin-top:20px; color:rgba(255,255,255,.75); }

/* Vision */
.vision__h { font-weight:800; font-size:64px; letter-spacing:-.025em; margin:18px 0 0; line-height:1.02; }
.vision__body { font-size:21px; line-height:1.65; color:rgba(255,255,255,.72); margin:30px auto 0; max-width:40rem; }
.vision__rule { height:1px; width:80px; background:rgba(255,255,255,.2); margin:52px auto; }
.vision__close { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:26px; line-height:1.4; }

/* CTA */
.cta { border-radius:34px; padding:88px 64px; text-align:center; background:linear-gradient(150deg, rgba(154,111,224,.30), rgba(236,77,151,.18)); border:1px solid rgba(255,255,255,.14); }
.cta h2 { font-weight:800; font-size:48px; letter-spacing:-.02em; line-height:1.05; }
.cta p { font-size:19px; line-height:1.6; color:rgba(255,255,255,.82); margin:22px auto 0; max-width:34rem; }
.cta .btn { margin-top:36px; }

/* Footer */
.footer { background:#201839; padding:60px 0 40px; }
.footer__inner { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer__cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer__cols div { display:flex; flex-direction:column; gap:12px; }
.footer__cols a { text-decoration:none; color:rgba(255,255,255,.7); font-size:15px; }
.footer__cols a:hover { color:#fff; }
.footer__legal { margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.42); font-size:13px; }

/* Photo placeholders (swap for <img>) */
.photo { position:relative; background:linear-gradient(135deg,#3A2E5C,#2A2044); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo::after { content:attr(data-label); padding:0 20px; text-align:center; font-size:14px; color:rgba(255,255,255,.42); max-width:82%; }

/* Scroll reveal (content visible without JS) */
.reveal { opacity:1; }
.reveal.will-reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:980px) {
  .hero h1 { font-size:60px; }
  .hero__silhouette { display:none; }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .layouts { grid-template-columns:repeat(3,1fr); }
  .lifestyle h2 { font-size:46px; }
  .tile { min-height:460px; }
}
@media (max-width:640px) {
  .container, .nav__inner, .hero__inner { padding-left:24px; padding-right:24px; }
  .nav__links > a:not(.btn) { display:none; }
  .hero h1 { font-size:44px; }
  .hero__sub { font-size:19px; }
  .section { padding:80px 0; }
  .section__head h2, .cta h2, .vision__h { font-size:36px; }
  .concept, .grid--3, .layouts { grid-template-columns:1fr; }
  .tile:nth-child(2n) { margin-top:0; }
  .tile { min-height:380px; }
  .tile__content { left:24px; right:24px; bottom:28px; }
  .lifestyle h2 { font-size:36px; }
  .cta { padding:52px 32px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; scroll-behavior:auto; }
  .reveal, .reveal.will-reveal { opacity:1 !important; transform:none !important; }
}