@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap');

/* ======================================================
   Psychic Starla Stylesheet
   Cleaned & Organized Version
   ====================================================== */

/* ---------- Variables ---------- */
:root{
  --bg:#06030b;
  --bg2:#13001a;
  --panel:rgba(38,18,58,.55);
  --border:#5d2a8a;
  --gold:#ffd700;
  --purple:#c67cff;
  --purple2:#9d4edd;
  --text:#ece7f7;
  --muted:#c9bdd8;
  --max:1400px;
  --radius:18px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Raleway",Arial,sans-serif;
  color:var(--text);
  font-size:18px;
  line-height:1.6;
  background:#12071d;
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
}

/* ---------- Background ---------- */

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;

    background-image:

    /* Bright stars */
    radial-gradient(circle, rgba(255,255,255,.95) 1.8px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.9) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.85) 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.9) 1.2px, transparent 2px),

    /* Medium stars */
    radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.6) .9px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.55) .8px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.5) .8px, transparent 1.8px),

    /* Tiny stars */
    radial-gradient(circle, rgba(255,255,255,.4) .6px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.35) .6px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.3) .5px, transparent 1.2px),
    radial-gradient(circle, rgba(255,255,255,.25) .5px, transparent 1.2px),

    /* Gold stars */
    radial-gradient(circle, rgba(255,220,120,.85) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,215,150,.7) 1px, transparent 1.8px),

    /* Lavender stars */
    radial-gradient(circle, rgba(210,185,255,.8) 1.3px, transparent 2px),
    radial-gradient(circle, rgba(185,145,255,.65) .9px, transparent 1.8px);

    background-size:
        180px 180px,
        220px 220px,
        260px 260px,
        320px 320px,
        140px 140px,
        170px 170px,
        210px 210px,
        250px 250px,
        90px 90px,
        110px 110px,
        130px 130px,
        160px 160px,
        420px 420px,
        520px 520px,
        600px 600px,
        700px 700px;

    background-position:
        10px 20px,
        120px 90px,
        240px 180px,
        320px 70px,
        40px 60px,
        150px 150px,
        270px 30px,
        80px 260px,
        30px 20px,
        70px 80px,
        100px 120px,
        180px 30px,
        250px 120px,
        500px 220px,
        650px 300px,
        900px 180px;

    opacity:.78;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(circle at top,
            rgba(140,90,220,.10),
            transparent 55%),

        radial-gradient(circle at bottom,
            rgba(80,40,140,.06),
            transparent 60%);

    opacity:.8;
}

/* ---------- Global ---------- */

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:#e8c6ff;
  text-decoration:none;
  transition:.25s;
}

a:hover{
  color:var(--gold);
}

h1,h2,h3,h4{
  color:var(--purple);
}

/* ---------- Layout ---------- */

.wrapper{
  max-width:var(--max);
  margin:40px auto;
  padding:0 30px;
  display:flex;
  gap:clamp(30px,5vw,60px);
  align-items:flex-start;
}

.profile-area{
  width:300px;
  flex-shrink:0;
  text-align:right;
}

.profile-area img{
  width:200px;
  margin-left:auto;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  box-shadow:0 0 30px rgba(157,78,221,.4);
}

.content-wrapper{
  flex:1;
  padding-left:50px;
  border-left:1px solid #4d2177;
}

/* ---------- Header ---------- */

header{
  margin-top:18px;
}

header h1{
  font-size:2rem;
  margin:.25em 0;
  color:#f0d8ff;
}

header h2{
  color:var(--muted);
  font-size:1.3rem;
  font-weight:300;
  margin:0;
}

/* ---------- Social ---------- */

.social-bar{
  display:inline-flex;
  gap:14px;
  margin:18px 0;
}

.social-bar a{
  width:42px;
  height:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}

.social-bar a:hover{
  background:var(--purple2);
  transform:translateY(-3px);
}

/* ---------- Services ---------- */

.services-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:20px;
}

.services-title{
    text-align:center;
    color:var(--gold);
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:1px;
    margin-top:35px;
    margin-bottom:35px;

    text-shadow:
        0 0 8px rgba(255,215,0,.45),
        0 0 18px rgba(255,215,0,.35),
        0 0 30px rgba(255,215,0,.20);
}

.services-title::before{
    content:" ★ ";
    color:var(--gold);
    margin-right:4px;
}

.services-title::after{
    content:" ★ ";
    color:var(--gold);
    margin-left:4px;
}

.service-item{
  background:var(--panel);
  border:1px solid rgba(198,124,255,.2);
  border-radius:14px;
  padding:16px 20px;
  backdrop-filter:blur(8px);
  text-align:center;
}

.service-item::before{
  content:"✦ ";
  color:var(--gold);
}

/* ---------- Buttons ---------- */

.button,
.psychic-submit{
  display:inline-block;
  padding:15px 28px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size: 1.00rem;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#9f6bff);
  transition:.3s;
  box-shadow:0 0 18px rgba(159,107,255,.35);
}

.button:hover,
.psychic-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(159,107,255,.5);
}

.whatsapp-button{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-weight:600;
}

.whatsapp-button:hover{
  background:#1EBE5B;
  color:#fff;
}

/* ---------- Forms ---------- */

.contact-form{
  max-width:700px;
  margin:auto;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 18px;
  margin-bottom:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:inherit;
  font-size:16px;
}

.contact-form textarea{
  resize:vertical;
  min-height:160px;
}

/* ---------- Footer ---------- */

footer{
  margin-top:40px;
  padding:30px 0;
  text-align:center;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}

/* ======================================================
   Tablet
   ====================================================== */

@media (max-width:992px){

.wrapper{
  flex-direction:column;
}

.profile-area{
  width:100%;
  text-align:center;
}

.profile-area img{
  margin:0 auto;
}

.content-wrapper{
  padding-left:0;
  border-left:none;
}

.services-grid{
  grid-template-columns:1fr;
}

}

/* ======================================================
   Mobile
   ====================================================== */

@media (max-width:768px){

body{
  font-size:16px;
}

.wrapper{
  padding:0 20px;
}

header,
header h1,
header h2,
.profile-area{
  text-align:center;
}

.social-bar{
  display:flex;
  justify-content:center;
}

.psychic-submit,
.button,
.whatsapp-button{
  width:100%;
  max-width:320px;
}

}

/* ===========================
      REVIEWS
===========================*/

.reviews-section{
    max-width:900px;
    margin:8px auto 35px;
    padding:5px 20px 20px;
}



.reviews-header{

    text-align:center;

    margin-bottom:30px;

}

.reviews-header h2{

    color:#FFD700;

    font-size:2.4rem;

    margin:12px 0;

}

.review-stars{

    color:#FFD700;

    font-size:2rem;

    letter-spacing:4px;

}

.reviews-header p{

    max-width:700px;

    margin:auto;

    color:#ddd;

    line-height:1.8;

}

.review-slider{

    position:relative;

    min-height:270px;

}

.review{

    display:none;

    position:relative;

    overflow:hidden;

    animation:fade .8s;

    background:linear-gradient(
        180deg,
        rgba(82,41,121,.38),
        rgba(24,10,38,.28)
    );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,215,0,.25);

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:
        0 10px 35px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

}

.review::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 5% 12%, rgba(255,255,255,.95) 1px, transparent 2px),
        radial-gradient(circle at 12% 28%, rgba(255,215,0,.90) 1.5px, transparent 3px),
        radial-gradient(circle at 18% 80%, rgba(255,255,255,.90) 1px, transparent 2px),
        radial-gradient(circle at 25% 18%, rgba(255,255,255,.90) 1px, transparent 2px),
        radial-gradient(circle at 32% 65%, rgba(255,215,0,.85) 1.5px, transparent 3px),
        radial-gradient(circle at 40% 35%, rgba(255,255,255,.95) 1px, transparent 2px),
        radial-gradient(circle at 48% 75%, rgba(255,255,255,.85) 1px, transparent 2px),
        radial-gradient(circle at 55% 20%, rgba(255,215,0,.95) 1.5px, transparent 3px),
        radial-gradient(circle at 63% 55%, rgba(255,255,255,.90) 1px, transparent 2px),
        radial-gradient(circle at 72% 14%, rgba(255,255,255,.95) 1px, transparent 2px),
        radial-gradient(circle at 78% 72%, rgba(255,215,0,.90) 1.5px, transparent 3px),
        radial-gradient(circle at 85% 42%, rgba(255,255,255,.95) 1px, transparent 2px),
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.90) 1px, transparent 2px),
        radial-gradient(circle at 96% 82%, rgba(255,215,0,.85) 1.5px, transparent 3px);

    opacity:.9;

    pointer-events:none;

    animation:twinkle 6s ease-in-out infinite alternate;

}


.review.active{

    display:block;

}

.review p{

    font-size:1.15rem;

    line-height:1.9;

    color:#f2f2f2;

    font-style:italic;

}

.review h4{

    margin-top:25px;

    color:#FFD700;

    font-size:1.15rem;

}

.review:hover{

    transform:translateY(-5px);

    transition:.35s;

    box-shadow:0 0 40px rgba(255,215,0,.25);

}

.review-dots{

    text-align:center;

    margin:25px 0;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    border:2px solid rgba(255,215,0,.25);

    display:inline-block;

    margin:0 8px;

    cursor:pointer;

    transition:all .35s ease;

}

.dot:hover{

    background:#FFD700;

    transform:scale(1.25);

    border-color:#FFD700;

}

.dot.active{

    width:28px;

    border-radius:20px;

    background:#FFD700;

    border-color:#FFD700;

    box-shadow:0 0 12px rgba(255,215,0,.6);

}

.review-cta{

    text-align:center;

    margin-top:30px;

}

.review-cta h3{

    color:#FFD700;

    margin-bottom:10px;

}

.review-button{

    display:inline-block;

    margin-top:15px;

    padding:15px 40px;

    border-radius:40px;

    text-decoration:none;

    background:linear-gradient(45deg,#FFD700,#F8C400);

    color:#1a0033;

    font-weight:bold;

    transition:.3s;

}

.review-button:hover{

    background:#FFE56A;

    color:#220044;

    box-shadow:0 0 25px rgba(255,215,0,.6);

    transform:translateY(-3px);

}

@keyframes fade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}
}

/* ==========================
   GO BACK BUTTON
========================== */

.back-button-container{
    text-align:center;
    margin:30px 0;
}

.back-button{
    display:inline-block;
    padding:12px 28px;
    font-size:16px;
    font-weight:600;
    font-family:'Raleway', sans-serif;
    color:#ffd700;
    background:rgba(65, 20, 95, 0.45);
    border:2px solid rgba(255,215,0,0.7);
    border-radius:40px;
    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:all .3s ease;
    box-shadow:0 0 12px rgba(255,215,0,.25);
}

.back-button:hover{
    background:rgba(110,40,170,.65);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 0 20px rgba(255,215,0,.5);
}

.back-button:active{
    transform:translateY(1px);
}