/* =========================
   ROOT VARIABLES
========================= */

:root{
  --purple:#5B2C83;
  --purple-700:#4A236B;
  --purple-900:#2B163E;
  --lavender:#D6C7E6;

  --bg:#F8F5F1;
  --card:#FFFFFF;
  --muted:#5F5A63;

  --pink:#c71196;
}


/* =========================
   GLOBAL STYLES
========================= */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  line-height:1.6;

  font-family:"Poppins", sans-serif;

  color:var(--purple-900);
  background: radial-gradient(circle at top, rgba(181,146,242,0.12), transparent 28%), #F8F5F1;
}

main{
  position:relative;
}

.container,
.containers{
  font-family:"Poppins", sans-serif;
}

.containers{
  margin:0 auto;
  padding:0 100px;
}


/* =========================
   HERO SECTION
========================= */

.hero{
  position:relative;
  width:100%;
  min-height:72vh;

  z-index:10;

  padding:100px 0 60px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;

  align-items:center;
}

.hero-content h1{
  max-width:760px;

  margin:40px auto 18px;

  font-size:3rem;
  line-height:1.06;
  text-align:center;

  color:var(--purple-900);
}

.hero-brand{
  margin-bottom:18px;
}

/* Logo placed above the hero brand name */
.logo-container{
  text-align:center;
  margin-bottom:12px;
}
.site-logo{
  width:110px;
  height:auto;
  display:inline-block;
  margin-top: -60px;
}

.hero-brand-name{
  font-family:"Poppins", sans-serif;

  text-align:center;
  text-transform:uppercase;

  margin-top:30px;
  font-size:3.5rem;
  font-weight:700;
  letter-spacing:0.01em;
  max-width:1300px;
  color:var(--purple-900);
}

.hero-brand-sub{
  margin-top:-110px;

  text-align:center;
  text-transform:uppercase;

  font-size:1.25rem;
  letter-spacing:0.1em;

  color:var(--purple-900);
}

/* Kept last-declared values (they were winning the cascade anyway) */
.hero-tag{
  margin-top:-40px;
  margin-bottom:18px;

  text-align:center;
  text-transform:uppercase;

  font-size:1rem;
  letter-spacing:0.35em;

  color:var(--purple);
}

.lead{
  max-width:800px;

  margin:20px auto 18px;

  text-align:center;

  font-size:1.1rem;

  color:var(--purple);
}

.hero-visual{
  display:none;
}


/* =========================
   BUTTONS
========================= */

.hero-ctas{
  display:flex;
  justify-content:center;
  gap:24px;
}

.hero-ctas a{
  width:220px;
  text-align:center;
}

.hero-ctas .btn-primary{
  display:inline-block;

  padding:14px 22px;

  border-radius:14px;

  text-decoration:none;

  color:white;
  background: linear-gradient(135deg, #5B2C83, #7D4EB4);
  box-shadow: 0 16px 28px rgba(91,44,131,0.18);
}

.btn-ghost{
  display:inline-block;

  padding:14px 22px;

  border-radius:14px;

  text-decoration:none;

  background: rgba(255,255,255,0.92);

  color:var(--purple-900);

  border:1px solid rgba(91,44,131,0.18);
}

.btn-primary,
.btn-ghost,
.btn-outline{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    background .22s ease;
}

.btn-primary:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 20px 30px rgba(91,44,131,0.22);
}

.btn-ghost:hover{
  transform:translateY(-2px);
  opacity:0.98;
  background: rgba(255,255,255,1);
}

.btn-outline:hover{
  transform:translateY(-2px);
}


/* =========================
   SECTIONS
========================= */

.section{
  padding:72px 0;
}

#gallery.section{
  position:relative;

  min-height:55vh;

  margin-top:0;
  padding:48px 0;
}

.section.alt{
  background: linear-gradient(180deg, rgba(91,44,131,0.05), rgba(248,245,241,0.9));
}

.section-label{
  display:block;

  margin-top:20px;

  text-align:center;
  text-transform:uppercase;

  font-size:0.9rem;
  letter-spacing:0.28em;

  color:#8A7A6A;
}

.section-header{
  max-width:720px;

  margin:0 auto 24px;

  text-align:center;
}

.section-title{
  margin:0 0 16px;

  font-size:2rem;

  color:var(--purple-900);
}

/* Merged identical .section-sub and .section-note rules into one selector */
.section-sub,
.section-note{
  max-width:800px;

  margin-bottom:20px;
  margin-left:auto;
  margin-right:auto;

  text-align:center;

  color:var(--muted);
}


/* =========================
   ABOUT SECTION
========================= */

#about{
  background-color:#f8f5f1;
}

#about .section-title{
  max-width:600px;

  margin-left:auto;
  margin-right:auto;

  text-align:center;
}

#about .cards{
  grid-template-columns:repeat(2, 1fr);

  max-width:1200px;

  margin:0 auto;
}


/* =========================
   PHILOSOPHY SECTION
========================= */

#philosophy{
  background-color:#2B163E;
  background-image:none;
}

#philosophy .section-title{
  max-width:800px;

  margin-left:auto;
  margin-right:auto;

  text-align:center;

  color:white;
}

.philosophy-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#philosophy .card:hover{
  transform: translateY(-12px) scale(1.03);

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.05)
  );

  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.28),
    0 8px 20px rgba(255,255,255,0.04);
}

.philosophy-card h3{
  margin-bottom: 14px;
  color: white;
}

.philosophy-card p{
  color: #e1d3d3;
  max-width: 420px;
}

#philosophy .cards{
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

#philosophy .card{
  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15),
    0 1px 8px rgba(255,255,255,0.05) inset;
}

#philosophy .philosophy-card{
  width: 450px;
}


/* =========================
   SERVICES SECTION
========================= */

#services{
  background-color:#efe7f7;
}

#services .section-title{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* =========================
   CATEGORIES SECTION
========================= */

#categories{
  background-color:#f8f5f1;
}

#categories .section-title{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* =========================
   HEADER
========================= */

.site-header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:rgba(248,245,241,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 18px rgba(0,0,0,0.05);
  z-index:1000;
}

.site-header .containers{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.header-brand span{
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.02em;
  /* Prevent brand name overflowing on narrow screens */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.site-header--scroll{
  position:fixed;
  top:0;
  left:0;
  right:0;
  transform:translateY(-120%);
  opacity:0;
  visibility:hidden;
  transition:
    transform .28s ease,
    opacity .28s ease,
    visibility .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    padding .28s ease;
  background:rgba(248,245,241,0.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

.site-header--scroll.site-header--visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  padding:12px 0;
  box-shadow:0 24px 50px rgba(0,0,0,0.14);
}

.site-header--scroll.site-header--visible .brand-logo{
  width:48px;
}

.site-header--scroll.site-header--visible .header-brand span{
  font-size:0.95rem;
}

.brand-logo{
  display:inline-block;
  border-radius:8px;
  object-fit:contain;
}


/* =========================
   PRODUCT GALLERY
========================= */

.product-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}
/* product-gallery breakpoints are handled in the responsive section below */
.product-card{
  background:rgba(255,255,255,0.94);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  border:1px solid rgba(91,44,131,0.08);
  box-shadow:0 18px 35px rgba(91,44,131,0.08);
  transition: transform .28s ease, box-shadow .28s ease;
}
.product-desc{
  width:100%;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 45px rgba(91,44,131,0.14);
}
.product-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:16px;
  background:linear-gradient(180deg,#f6f6f6,#eee);
}
.product-desc h4{
  margin:0;
  font-size:1.08rem;
}
.product-desc p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}


/* =========================
   CARDS
========================= */

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

/* Make entire card clickable when wrapped in an anchor */
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:focus-visible{
  outline:3px solid rgba(91,44,131,0.12);
  outline-offset:3px;
  border-radius:24px;
}

.card{
  position:relative;
  overflow:hidden;

  padding:32px;

  border-radius:28px;

  background:rgba(255,255,255,0.92);

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

  border:1px solid rgba(91,44,131,0.12);

  box-shadow:
    0 18px 40px rgba(91,44,131,0.08),
    0 2px 10px rgba(255,255,255,0.3) inset;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border .28s ease;
}

.card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 24px 48px rgba(91,44,131,0.14),
    0 10px 22px rgba(0,0,0,0.08);

  border:1px solid rgba(91,44,131,0.2);

  background:rgba(255,255,255,0.96);
}

.card h3{
  margin-bottom:14px;

  font-size:1.4rem;
  font-weight:600;
}

.card p{
  margin:0;

  font-size:1rem;
  line-height:1.7;
}


/* =========================
   CARD GLOW EFFECT
========================= */

.card::after{
  content:"";

  position:absolute;

  bottom:0;
  left:-100%;

  width:100%;
  height:3px;

  background:linear-gradient(
    90deg,
    transparent,
    var(--pink),
    transparent
  );

  transition:0.6s;
}

.card:hover::after{
  left:100%;
}

#philosophy .card::after{
  display:none;
}


/* =========================
   STEPS
========================= */

.steps{
  display:flex;
  gap:14px;

  flex-wrap:wrap;
}

.step{
  flex:1;
  min-width:160px;

  padding:16px;

  text-align:center;

  border-radius:10px;

  background:linear-gradient(
    180deg,
    var(--lavender),
    #F6F1FA
  );

  box-shadow:0 6px 18px rgba(91,44,131,0.06);
}


/* =========================
   TESTIMONIALS
========================= */

.testimonials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;

  margin-top:12px;
}

.testimonial{
  padding:18px;

  border-radius:12px;

  background:var(--card);

  box-shadow:0 6px 20px rgba(0,0,0,0.03);
}

.testimonial cite{
  display:block;

  margin-top:12px;

  font-style:normal;

  color:var(--muted);
}


/* =========================
   FORMS
========================= */

.contact-form{
  max-width:760px;
}

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

input,
textarea{
  width:100%;

  padding:12px;

  border-radius:10px;

  background:white;

  border:1px solid rgba(0,0,0,0.06);
}

.form-actions{
  display:flex;
  gap:12px;

  margin-top:12px;
}

.form-note{
  margin-top:10px;

  font-size:0.9rem;

  color:var(--muted);
}


/* =========================
   REVEAL ANIMATIONS
========================= */

.reveal{
  opacity:0;

  transform:translateY(14px);

  transition:
    opacity .6s cubic-bezier(.2,.9,.2,1),
    transform .6s cubic-bezier(.2,.9,.2,1);
}

.reveal.show{
  opacity:1;
  transform:none;
}

/* =========================
   HERO ENTRANCE ANIMATIONS
   Stagger child elements inside .hero-content when it becomes visible
========================= */
.hero-content .logo-container,
.hero-content .hero-brand-name,
.hero-content h1,
.hero-content .lead,
.hero-content .hero-ctas {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1);
}

.hero-content.show .logo-container{ transition-delay: 80ms; opacity:1; transform:none; }
.hero-content.show .hero-brand-name{ transition-delay: 140ms; opacity:1; transform:none; }
.hero-content.show h1{ transition-delay: 200ms; opacity:1; transform:none; }
.hero-content.show .lead{ transition-delay: 260ms; opacity:1; transform:none; }
.hero-content.show .hero-ctas{ transition-delay: 320ms; opacity:1; transform:none; }


/* =========================
   ACCESSIBILITY
========================= */

a:focus,
button:focus,
input:focus,
textarea:focus{
  outline:3px solid rgba(91,44,131,0.12);
  outline-offset:3px;
}


/* =========================
   GALLERY
========================= */

.horizontal-gallery{
  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  z-index:1;

  border-radius:0;
}

.hg-viewport{
  border-radius:0;
  overflow:hidden;
  position:relative;
}

.hg-track{
  display:flex;
  align-items:stretch;
  gap:0;
  transform:translateZ(0);
}

/* Merged duplicate .hg-slide rules */
.hg-slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
}

.hg-slide img{
  display:block;
  width:auto;
  height:auto;
  max-height:80vh;
  max-width:100%;
  object-fit:contain;
  margin:0 12px;
  border-radius:8px !important;
  box-shadow:none;
}

/* Fallback visible outline to help debugging (remove in production) */
.hg-slide img[alt]{
  outline: 1px solid rgba(0,0,0,0.03);
}


/* =========================
   CONTACT SECTION
========================= */

#contact{
  background-color:#2B163E;
  padding:72px 0;
}

#contact .section-label{
  color:#b49ccc;
  letter-spacing:0.2em;
}

#contact .section-title{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:2rem;
  color:#ffffff;
}

#contact .section-sub{
  color:#9e87b3;
  font-size:1rem;
}

.contact-details{
  max-width:1000px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:32px;
}

.contact-card{
  padding:0 28px;
  border-right:1px solid rgba(255,255,255,0.08);
}

.contact-card:first-child{
  padding-left:0;
}

.contact-card:last-child{
  border-right:none;
}

.contact-card h3{
  margin:0 0 14px;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#7a5e96;
}

.contact-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
}

.contact-row svg,
.contact-row .contact-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:2px;
  color:#b49ccc;
}

.contact-row span,
.contact-row a{
  font-size:0.9rem;
  color:#e0d4ec;
  line-height:1.55;
  text-decoration:none;
  white-space:nowrap;
}

.contact-row a:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* Follow Us bar */
.follow-bar{
  max-width:1000px;
  margin:24px auto 0;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.follow-bar-label{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#7a5e96;
  margin:0;
}

.follow-links{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.follow-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.88rem;
  color:#e0d4ec;
  text-decoration:none;
  padding:6px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.follow-link svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:#b49ccc;
}

.follow-link:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22);
  color:#ffffff;
}

.site-footer{
  margin-top:40px;
  padding:18px 16px;

  border-top:1px solid rgba(0,0,0,0.04);
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  text-align:center;
  text-decoration:none;
  color:var(--muted);
}


/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width:1200px){
  .containers{
    padding:0 40px;
  }

  .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Merged two identical @media (max-width:900px) blocks into one */
@media (max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
  }

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

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

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

  .section-title{
    font-size:1.75rem;
  }

  .containers{
    padding:0 28px;
  }

  .hero-ctas{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .hero-ctas a{
    width:100%;
    max-width:320px;
  }

  .hero-brand-name{
    font-size:2.8rem;
  }

  .site-logo{
    width:88px;
  }

  .hero-brand-sub{
    margin-top:-40px;
    font-size:0.92rem;
  }

  .contact-details{
    grid-template-columns:1fr !important;
    gap:28px 0;
  }
  .contact-card{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:0 0 24px 0;
  }
  .contact-card:last-child{
    border-bottom:none;
  }
  .contact-row span,
  .contact-row a{
    white-space:normal;
  }

  /* Category pages: 2-col grid on tablets */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  /* Header: shrink logo and brand name */
  .brand-logo{
    width:40px !important;
    height:40px !important;
  }
  .site-header .containers span,
  .header-brand span{
    font-size:0.85rem;
  }

  /* Section padding tighter on tablet */
  .section{
    padding:48px 0;
  }
}

@media (max-width:700px){
  .containers{
    padding:0 16px;
  }

  .hero{
    padding:60px 0 32px;
  }

  .hero-content h1{
    font-size:2rem;
    margin:24px auto 16px;
  }

  .hero-brand-name{
    font-size:2.4rem;
  }

  .hero-tag{
    letter-spacing:0.18em;
  }

  .card{
    padding:24px;
  }

  .section-title{
    font-size:1.5rem;
  }

  .section-sub,
  .lead{
    font-size:1rem;
  }

  .hero-grid,
  .cards{
    gap:20px;
  }

  .follow-links{
    flex-direction:column;
    align-items:center;
  }

  /* Category pages: 2-col grid on mobile (compact cards) */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }

  .product-card{
    padding:12px;
    gap:8px;
    border-radius:14px;
  }

  .product-desc h4{
    font-size:0.88rem;
    line-height:1.3;
  }

  .product-desc p{
    font-size:0.8rem;
  }

  /* Section vertical breathing room */
  .section{
    padding:36px 0;
  }

  /* Header: logo only, hide long brand name text on very small screens */
  .site-header .containers span,
  .header-brand span{
    display:none;
  }

  .brand-logo{
    width:38px !important;
    height:38px !important;
  }

  /* Back-to-home button: full width on mobile */
  .hero-ctas .btn-ghost{
    width:100%;
    max-width:320px;
    text-align:center;
  }
}

/* =========================
   SMALL PHONES (≤480px)
========================= */

@media (max-width:480px){

  /* Product gallery stays 2-col but with minimal gap */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }

  .product-card{
    padding:10px;
    gap:6px;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(91,44,131,0.08);
  }

  .product-desc h4{
    font-size:0.82rem;
  }

  .product-desc p{
    display:none; /* hide description on very small screens to keep cards clean */
  }

  /* Section label and sub tighter */
  .section-label{
    font-size:0.78rem;
    letter-spacing:0.2em;
  }

  .section-sub{
    font-size:0.9rem;
    padding:0 4px;
  }

  /* Contact section */
  #contact{
    padding:48px 0;
  }
}