:root{
  --purple:#2b124c;
  --purple2:#4b1f7a;
  --gold:#f3c14b;
  --gold2:#d99a1e;
  --cream:#fff8ec;
  --ink:#20142c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Playfair Display',serif}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(43,18,76,.96);backdrop-filter:blur(12px);color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 6vw;border-bottom:3px solid var(--gold)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.brand strong{display:block;font-size:20px;line-height:1.1}
.brand small{display:block;color:#f6d889;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:22px;font-weight:800}
.nav a{opacity:.95}
.nav a:hover{color:var(--gold)}
.nav-cta,.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#24113f!important;padding:13px 22px;border-radius:999px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.btn-secondary{border:2px solid rgba(255,255,255,.75);color:white;padding:12px 22px;border-radius:999px;font-weight:900}
.menu-toggle{display:none;background:var(--gold);color:var(--purple);border:0;border-radius:12px;padding:10px 14px;font-size:24px;font-weight:900}
.hero{min-height:88vh;background:linear-gradient(90deg,rgba(43,18,76,.88),rgba(43,18,76,.55)),url('../images/pureshine/herobackground.jpg');background-size:cover;background-position:center;display:flex;align-items:center;color:white}
.wrap{max-width:1180px;margin:auto;padding:0 24px}
.hero-card{max-width:760px;padding:70px 0}
.badge{display:inline-flex;background:rgba(243,193,75,.18);border:1px solid rgba(243,193,75,.45);color:#ffe39a;padding:9px 16px;border-radius:999px;font-weight:900;margin-bottom:22px}
.hero h1{font-size:clamp(46px,7vw,86px);line-height:.95;margin:0 0 24px}
.hero p{font-size:21px;line-height:1.65;color:#fff4d8;max-width:690px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-48px;position:relative;z-index:3}
.trust div,.card,.review-card,.form-card{background:white;border-radius:28px;padding:26px;box-shadow:0 18px 50px rgba(43,18,76,.13);border:1px solid rgba(75,31,122,.12)}
.trust div{font-weight:900;text-align:center;color:var(--purple)}
.section{padding:86px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--purple2);font-weight:900;font-size:13px;margin-bottom:12px}
.title{font-size:clamp(36px,5vw,58px);line-height:1.04;margin:0 0 18px;color:var(--purple)}
.lead{font-size:19px;line-height:1.75;color:#5f5368;max-width:780px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:42px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:42px}
.card{overflow:hidden;padding:0}
.card img{height:260px;width:100%;object-fit:cover}
.card-body{padding:28px}
.card h3{font-size:29px;color:var(--purple);margin:0 0 12px}
.card p,.review-card p{color:#62566c;line-height:1.65}
.purple-band{background:linear-gradient(135deg,var(--purple),#150a28);color:white}
.purple-band .title,.purple-band .eyebrow{color:white}
.purple-band .lead{color:#f7e6ff}
.before-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.before-grid img{height:330px;width:100%;object-fit:cover;border-radius:26px;border:4px solid rgba(243,193,75,.7)}
.review-card{font-size:18px}
.review-card strong{color:var(--purple)}
.cta{background:linear-gradient(135deg,#4b1f7a,#2b124c);color:white;border-radius:36px;padding:50px;margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta h2{font-size:42px;margin:0 0 10px}
.gallery-strip{display:flex;gap:18px;overflow:hidden;margin-top:34px}
.gallery-strip img{width:300px;height:320px;object-fit:cover;border-radius:26px;animation:float 18s linear infinite}
@keyframes float{0%{transform:translateX(0)}100%{transform:translateX(-160px)}}
.form-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;margin-top:36px}
input,textarea,select{width:100%;padding:15px 16px;border-radius:14px;border:1px solid #ddd;background:#fff;font:inherit;margin-bottom:14px}
textarea{min-height:140px}
button.submit{border:0;cursor:pointer}
.site-footer{background:#24113f;color:white;padding:60px 6vw 24px;border-top:4px solid var(--gold)}
.footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.footer-logo{width:92px;height:92px;object-fit:cover;border-radius:50%;border:2px solid var(--gold);margin-bottom:14px}
.site-footer h3,.site-footer h4{color:#ffe39a}
.site-footer p{color:#efe0ff;line-height:1.6}
.footer-bottom{max-width:1180px;margin:34px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);color:#d7c7e7}
.mobile-call{position:fixed;right:18px;bottom:18px;z-index:60;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#271344;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:0 14px 34px rgba(0,0,0,.25)}
@media(max-width:850px){
  .menu-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:96px;background:#2b124c;display:none;flex-direction:column;align-items:flex-start;padding:24px 6vw;border-bottom:3px solid var(--gold)}
  .nav.open{display:flex}
  .brand strong{font-size:16px}
  .brand small{font-size:10px}
  .trust,.grid3,.grid2,.before-grid,.form-grid,.footer-grid{grid-template-columns:1fr}
  .hero{min-height:82vh}
  .cta{display:block}
}


/* MOBILE FIX PASS */
@media(max-width:850px){
  body{
    padding-bottom:0;
  }

  .hero{
    min-height:auto;
    padding:60px 0 70px;
    background:
      linear-gradient(rgba(43,18,76,.80),rgba(43,18,76,.82)),
      url('../images/pureshine/herobackground.jpg');
    background-size:cover;
    background-position:center top;
  }

  .hero-card{
    padding:20px 0 0;
  }

  .hero h1{
    font-size:46px;
    line-height:1.02;
    max-width:100%;
  }

  .hero p{
    font-size:20px;
    line-height:1.45;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .btn-primary,
  .btn-secondary{
    display:block;
    text-align:center;
    width:100%;
  }

  .trust{
    margin-top:0;
    padding-top:24px;
  }

  .section{
    padding:58px 0;
  }

  .title{
    font-size:40px;
    line-height:1.08;
  }

  .lead{
    font-size:17px;
    line-height:1.55;
  }

  .card img{
    height:auto;
    max-height:none;
    object-fit:contain;
    background:#fff;
  }

  .before-grid img{
    height:auto;
    object-fit:contain;
    background:#fff;
  }

  .cta{
    padding:34px 28px;
    border-radius:28px;
  }

  .cta h2{
    font-size:42px;
    line-height:1.15;
  }

  .cta p{
    font-size:17px;
    line-height:1.5;
    margin-bottom:22px;
  }

  .cta .btn-primary{
    width:100%;
    position:relative;
    z-index:2;
  }

  .mobile-call{
    display:none;
  }

  .site-footer{
    padding-bottom:48px;
  }
}

@media(max-width:430px){
  .hero h1{
    font-size:42px;
  }

  .hero p{
    font-size:19px;
  }

  .wrap{
    padding:0 22px;
  }

  .brand img{
    width:52px;
    height:52px;
  }

  .nav{
    top:82px;
  }
}


/* CLEAN MOBILE HERO REBUILD */
@media(max-width:850px){
  .hero{
    min-height:auto;
    padding:38px 0 46px;
    background:
      radial-gradient(circle at top left, rgba(243,193,75,.20), transparent 34%),
      linear-gradient(145deg,#2b124c,#180827 72%);
  }

  .hero-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(243,193,75,.25);
    border-radius:30px;
    padding:26px 22px;
    box-shadow:0 20px 55px rgba(0,0,0,.28);
  }

  .hero-card:before{
    content:"";
    display:block;
    width:120px;
    height:120px;
    margin:0 auto 18px;
    border-radius:50%;
    background:url('../images/pureshine/logo2.jpg') center/cover no-repeat;
    border:4px solid #f3c14b;
    box-shadow:0 12px 34px rgba(0,0,0,.28);
  }

  .badge{
    display:block;
    text-align:center;
    margin:0 auto 18px;
    width:max-content;
    max-width:100%;
    font-size:14px;
  }

  .hero h1{
    text-align:center;
    font-size:38px;
    line-height:1.04;
    margin-bottom:18px;
  }

  .hero p{
    text-align:center;
    font-size:17px;
    line-height:1.5;
    color:#fff3cf;
  }

  .actions{
    margin-top:24px;
  }
}

@media(max-width:430px){
  .hero h1{
    font-size:36px;
  }

  .hero-card{
    padding:24px 18px;
  }
}