/* ==========================================================================
   VIBGYOR SOLAR — style.css
   Brand tokens first, then layout, then components.
   Colours are sampled from the visiting card: deep royal purple on white,
   with a warm solar amber reserved for calls to action only.
   ========================================================================== */

:root{
  --purple:        #55259A;
  --purple-deep:   #3A1670;
  --purple-soft:   #7B4FC4;
  --lavender:      #F2ECFB;
  --lavender-line: #E4DAF5;

  --ink:           #211E2B;
  --body:          #57536B;
  --line:          #E8E5EF;
  --white:         #FFFFFF;
  --shell:         #FAF9FC;

  --amber:         #F2A007;
  --amber-deep:    #D98705;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(33,30,43,.05);
  --shadow:    0 10px 30px -18px rgba(58,22,112,.38);
  --shadow-lg: 0 28px 60px -34px rgba(58,22,112,.5);

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Public Sans', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------- base --- */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  font-family:var(--font-body);
  color:var(--body);
  background:var(--white);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.16;
}

h1,.h1{ font-size:clamp(2.1rem, 1.35rem + 2.9vw, 3.5rem); font-weight:700; }
h2,.h2{ font-size:clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem); }
h3,.h3{ font-size:clamp(1.12rem, 1.02rem + .4vw, 1.3rem); }

p{ margin-bottom:1rem; }
p:last-child{ margin-bottom:0; }

a{ color:var(--purple); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--purple-deep); }

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

::selection{ background:var(--purple); color:#fff; }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--purple); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; color:#fff; }

.lead-text{ font-size:1.075rem; color:var(--body); max-width:62ch; }

/* --------------------------------------------------------- containers --- */
.section{ padding:clamp(3.5rem, 2rem + 5vw, 6rem) 0; }
.section--tint{ background:var(--shell); }
.section--lav{ background:var(--lavender); }
.section--tight{ padding-top:clamp(2.5rem,1.5rem + 3vw,4rem); }

.section-head{ max-width:56ch; margin-bottom:2.75rem; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:.85rem; color:var(--body); }

/* The VIBGYOR spectrum: violet→red, used as a small rule under headings.
   It is the one decorative element on the page — nothing else is coloured. */
.spectrum{
  display:flex; width:88px; height:4px; border-radius:3px; overflow:hidden;
  margin-bottom:1rem;
}
.section-head--center .spectrum{ margin-left:auto; margin-right:auto; }
.spectrum span{ flex:1; }
.spectrum span:nth-child(1){ background:#8A2BE2; }
.spectrum span:nth-child(2){ background:#4B0082; }
.spectrum span:nth-child(3){ background:#1E63C8; }
.spectrum span:nth-child(4){ background:#2FA36B; }
.spectrum span:nth-child(5){ background:#F2C407; }
.spectrum span:nth-child(6){ background:#F28C0A; }
.spectrum span:nth-child(7){ background:#E0452F; }
.spectrum--light span{ opacity:.92; }

.eyebrow{
  font-family:var(--font-display);
  font-size:.9rem; font-weight:600; color:var(--purple);
  letter-spacing:.01em; margin-bottom:.4rem;
}
.section--purple .eyebrow{ color:#D9C7F5; }

/* -------------------------------------------------------------- buttons --- */
.btn{
  font-family:var(--font-display);
  font-weight:600; font-size:.97rem;
  border-radius:999px;
  padding:.72rem 1.5rem;
  border:1.5px solid transparent;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-solar{ background:var(--amber); color:#2C1C00; box-shadow:0 8px 20px -12px rgba(217,135,5,.9); }
.btn-solar:hover{ background:var(--amber-deep); color:#2C1C00; }

.btn-purple{ background:var(--purple); color:#fff; }
.btn-purple:hover{ background:var(--purple-deep); color:#fff; }

.btn-outline-purple{ border-color:var(--purple); color:var(--purple); background:transparent; }
.btn-outline-purple:hover{ background:var(--purple); color:#fff; }

.btn-white{ background:#fff; color:var(--purple-deep); }
.btn-white:hover{ background:var(--lavender); color:var(--purple-deep); }

.btn-outline-white{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-white:hover{ background:#fff; color:var(--purple-deep); }

.btn-lg{ padding:.9rem 1.85rem; font-size:1.02rem; }

/* --------------------------------------------------------------- header --- */
.site-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header .navbar{ padding:.85rem 0; transition:padding .25s ease; }
.site-header.is-scrolled{ box-shadow:0 6px 24px -18px rgba(33,30,43,.55); }
.site-header.is-scrolled .navbar{ padding:.42rem 0; }
.site-header.is-scrolled .brand__mark{ width:38px; height:38px; }
.site-header.is-scrolled .brand__sub{ opacity:0; height:0; }

.brand{ display:flex; align-items:center; gap:.65rem; }
.brand__mark{ flex:none; transition:width .25s ease, height .25s ease; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{
  font-family:var(--font-display); font-weight:700; font-size:1.22rem;
  color:var(--purple-deep); letter-spacing:-.01em;
}
.brand__name span{ color:var(--purple); font-weight:500; }
.brand__sub{
  font-size:.7rem; color:var(--body); letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .2s ease;
}

.navbar-nav .nav-link{
  font-family:var(--font-display);
  font-weight:500; color:var(--ink); font-size:.98rem;
  padding:.5rem .9rem; position:relative;
}
.navbar-nav .nav-link:hover{ color:var(--purple); }
.navbar-nav .nav-link.active{ color:var(--purple); font-weight:600; }
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.15rem;
  height:2px; background:var(--amber); border-radius:2px;
}
.nav-item--cta{ margin-left:.7rem; }

.navbar-toggler{ border:1px solid var(--line); border-radius:10px; padding:.3rem .6rem; font-size:1.4rem; color:var(--purple); }
.navbar-toggler:focus{ box-shadow:none; }

@media (max-width:991.98px){
  .navbar-collapse{ padding:.6rem 0 1rem; }
  /* The header is semi-transparent; the open menu must not be. */
  .navbar-collapse.show, .navbar-collapse.collapsing{ background:var(--white); }
  .navbar-nav .nav-link{ padding:.6rem .2rem; }
  .navbar-nav .nav-link.active::after{ left:.2rem; right:auto; width:22px; }
  .nav-item--cta{ margin:.8rem 0 0; }
  .nav-item--cta .btn{ display:block; text-align:center; }
}

/* ----------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  padding:clamp(2.75rem, 1.5rem + 5vw, 5.5rem) 0 clamp(3rem,2rem + 4vw,5rem);
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(85,37,154,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--shell) 100%);
  overflow:hidden;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--lavender); color:var(--purple-deep);
  border:1px solid var(--lavender-line);
  border-radius:999px; padding:.4rem .95rem;
  font-size:.85rem; font-weight:600; font-family:var(--font-display);
  margin-bottom:1.1rem;
}
.hero__badge i{ color:var(--amber-deep); }
.hero h1{ margin-bottom:1.1rem; }
.hero__text{ font-size:1.1rem; max-width:54ch; margin-bottom:1.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.6rem; }
.hero__trust{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.92rem; color:var(--ink); font-weight:500;
  border-left:3px solid var(--amber); padding-left:.8rem;
}
.hero__trust i{ color:var(--purple); font-size:1.15rem; }

.hero__media{ position:relative; }
.hero__media img{
  position:relative; z-index:2;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%;
}
.hero__media::after{  /* offset panel behind the image */
  content:""; position:absolute; z-index:1;
  inset:auto -18px -18px auto; width:72%; height:72%;
  background:var(--lavender); border-radius:var(--radius-lg);
}
@media (max-width:991.98px){
  .hero__media{ margin-top:2.5rem; }
  .hero__media::after{ display:none; }
}

/* ---------------------------------------------------------- trust strip --- */
.trust-strip{ background:var(--white); border-bottom:1px solid var(--line); }
.trust-strip .row{ --bs-gutter-y:0; }
.trust-item{
  display:flex; align-items:center; gap:.85rem;
  padding:1.5rem 1.25rem;
  border-right:1px solid var(--line);
  height:100%;
}
.trust-item:last-child{ border-right:0; }
.trust-item i{ font-size:1.5rem; color:var(--purple); flex:none; }
.trust-item strong{ font-family:var(--font-display); color:var(--ink); font-weight:600; display:block; font-size:1rem; }
.trust-item small{ color:var(--body); font-size:.85rem; line-height:1.45; display:block; }
@media (max-width:767.98px){
  .trust-item{
    flex-direction:column; align-items:flex-start; gap:.5rem;
    border-right:0; border-bottom:1px solid var(--line); padding:1.15rem .25rem;
  }
  .col-6:nth-child(odd) .trust-item{ border-right:1px solid var(--line); padding-right:1rem; }
  .col-6:nth-child(even) .trust-item{ padding-left:1rem; }
  .trust-item i{ font-size:1.35rem; }
  .trust-item strong{ font-size:.95rem; }
}

/* ------------------------------------------------------------- s-cards --- */
.s-card{
  height:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem 1.6rem 1.5rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.s-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--lavender-line); }
.s-card__icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--lavender); color:var(--purple);
  display:grid; place-items:center; font-size:1.5rem; margin-bottom:1.1rem;
  transition:background-color .2s ease, color .2s ease;
}
.s-card:hover .s-card__icon{ background:var(--purple); color:#fff; }
.s-card h3{ margin-bottom:.55rem; }
.s-card p{ font-size:.96rem; margin-bottom:1.1rem; }
.s-card__link{
  margin-top:auto; font-family:var(--font-display); font-weight:600; font-size:.93rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.s-card__link i{ transition:transform .2s ease; }
.s-card:hover .s-card__link i{ transform:translateX(3px); }

/* -------------------------------------------------------------- why-us --- */
.why{ background:var(--purple-deep); color:#EDE6F8; }
.why h2{ color:#fff; }
.why p{ color:#D6C9EE; }
.why-item{
  display:flex; gap:1rem; padding:1.35rem 1.25rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); height:100%;
  transition:background-color .2s ease;
}
.why-item:hover{ background:rgba(255,255,255,.11); }
.why-item i{ font-size:1.35rem; color:var(--amber); flex:none; margin-top:.15rem; }
.why-item h3{ color:#fff; font-size:1.03rem; margin-bottom:.3rem; }
.why-item p{ font-size:.93rem; color:#CFC0EA; margin:0; }

/* ------------------------------------------------------------- process --- */
.process{ counter-reset:step; }
.step{ position:relative; padding-left:0; height:100%; }
.step__num{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--purple); border:2px solid var(--lavender-line);
  display:grid; place-items:center; margin-bottom:1rem; position:relative; z-index:2;
}
.step h3{ font-size:1.05rem; margin-bottom:.4rem; }
.step p{ font-size:.94rem; }
.step::before{  /* connecting rail on desktop */
  content:""; position:absolute; top:21px; left:44px; right:-12px; height:2px;
  background:linear-gradient(90deg,var(--lavender-line),var(--lavender-line));
}
.step:last-child::before{ display:none; }
@media (max-width:991.98px){ .step::before{ display:none; } }

/* ------------------------------------------------------------ products --- */
.p-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.p-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.p-card__img{ aspect-ratio:4/3; background:var(--lavender); overflow:hidden; }
.p-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.p-card:hover .p-card__img img{ transform:scale(1.035); }
.p-card__body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.p-card__body h3{ margin-bottom:.45rem; }
.p-card__body p{ font-size:.94rem; margin-bottom:1.15rem; }
.p-card__body .btn{ align-self:flex-start; margin-top:auto; }

/* ---------------------------------------------------------- page hero --- */
.page-hero{
  background:linear-gradient(135deg,var(--purple-deep) 0%, var(--purple) 100%);
  color:#fff; padding:clamp(2.75rem,2rem + 3vw,4.5rem) 0 clamp(2.75rem,2rem + 3vw,4.5rem);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; z-index:0;
  right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:rgba(255,255,255,.06);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin-bottom:.85rem; }
.page-hero p{ color:#DCCFF3; max-width:60ch; margin:0; }
.breadcrumbs{ font-size:.88rem; color:#C6B4E6; margin-bottom:.9rem; }
.breadcrumbs a{ color:#fff; }
.breadcrumbs span{ opacity:.6; margin:0 .35rem; }

/* -------------------------------------------------------- split blocks --- */
.split-img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; }
.tick-list{ list-style:none; padding:0; margin:1.4rem 0 0; }
.tick-list li{ position:relative; padding-left:1.85rem; margin-bottom:.7rem; }
.tick-list li::before{
  content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:-.05rem;
  color:var(--purple); font-size:1.05rem;
}
.section--purple .tick-list li::before{ color:var(--amber); }

.fact-box{
  background:var(--lavender); border:1px solid var(--lavender-line);
  border-radius:var(--radius); padding:1.35rem 1.5rem;
}
.fact-box h3{ font-size:1rem; margin-bottom:.4rem; }
.fact-box p{ font-size:.95rem; margin:0; }

/* ------------------------------------------------------------ CTA band --- */
.cta-band{
  background:linear-gradient(135deg,var(--purple) 0%, var(--purple-deep) 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:clamp(2.25rem,1.5rem + 3vw,3.5rem);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; z-index:0;
  left:-90px; bottom:-120px; width:340px; height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,160,7,.30) 0%, rgba(242,160,7,0) 70%);
}
.cta-band > .row{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#DCCFF3; max-width:52ch; }
.cta-band .btn{ margin-top:.3rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ------------------------------------------------------------- contact --- */
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; height:100%; box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ border-color:var(--lavender-line); box-shadow:var(--shadow); }
.contact-card i.contact-card__icon{
  width:46px; height:46px; border-radius:12px; background:var(--lavender); color:var(--purple);
  display:grid; place-items:center; font-size:1.25rem; margin-bottom:.9rem;
}
.contact-card h3{ font-size:1rem; margin-bottom:.4rem; }
.contact-card p, .contact-card a{ font-size:.96rem; word-break:break-word; }
.contact-card p{ color:var(--body); }

.form-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem); box-shadow:var(--shadow);
}
.form-label{ font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:.93rem; margin-bottom:.35rem; }
.form-control, .form-select{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.7rem .9rem; font-size:.97rem; color:var(--ink); background:#FCFBFE;
}
.form-control:focus, .form-select:focus{
  border-color:var(--purple-soft); box-shadow:0 0 0 3px rgba(123,79,196,.15); background:#fff;
}
.form-control::placeholder{ color:#A8A3B8; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.alert-vs{ border-radius:var(--radius); border:1px solid; padding:1rem 1.1rem; font-size:.96rem; }
.alert-vs--ok{ background:#EDF9F2; border-color:#BFE6D0; color:#1B6B42; }
.alert-vs--err{ background:#FDF1F1; border-color:#F3CFCF; color:#9B2C2C; }
.alert-vs ul{ margin:.5rem 0 0; padding-left:1.1rem; }

.map-wrap{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--lavender); min-height:320px;
}
.map-wrap iframe{ display:block; width:100%; height:380px; border:0; }
.map-placeholder{
  min-height:320px; display:grid; place-items:center; text-align:center; padding:2rem;
  color:var(--purple-deep);
}
.map-placeholder i{ font-size:2.25rem; display:block; margin-bottom:.6rem; color:var(--purple); }

/* --------------------------------------------------------------- footer --- */
.site-footer{
  background:#1B1226; color:#BDB4CE;
  padding:clamp(3rem,2rem + 3vw,4.5rem) 0 1.5rem;
  font-size:.95rem;
}
.footer-brand{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:#fff; }
.footer-brand span{ font-weight:500; color:#C4A6F5; }
.footer-tag{ color:#C4A6F5; font-size:.92rem; margin:.2rem 0 .9rem; }
.footer-text{ color:#A79EB9; max-width:42ch; }
.footer-badge{ color:#E5DCF5; font-size:.9rem; margin-top:1rem; }
.footer-badge i{ color:var(--amber); margin-right:.35rem; }

.footer-head{ font-size:1rem; color:#fff; margin-bottom:1rem; font-weight:600; }
.footer-list, .footer-contact{ list-style:none; padding:0; margin:0; }
.footer-list li{ margin-bottom:.55rem; }
.footer-list a{ color:#A79EB9; }
.footer-list a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:.7rem; margin-bottom:.9rem; line-height:1.5; }
.footer-contact i{ color:var(--amber); margin-top:.2rem; }
.footer-contact a{ color:#CFC7DD; }
.footer-contact a:hover{ color:#fff; }
.footer-contact small{ color:#8F87A1; }
.footer-mail{ font-size:.88rem; }

.footer-social{ list-style:none; display:flex; gap:.6rem; padding:0; margin:1.2rem 0 0; }
.footer-social a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.05rem;
  transition:background-color .2s ease;
}
.footer-social a:hover{ background:var(--purple); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2.75rem; padding-top:1.25rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
  font-size:.86rem; color:#8F87A1;
}
.footer-bottom p{ margin:0; }

/* --------------------------------------------------- floating buttons --- */
.float-actions{
  position:fixed; right:16px; bottom:16px; z-index:1040;
  display:flex; flex-direction:column; gap:.6rem;
}
.float-btn{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:1.4rem;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.float-btn:hover{ transform:scale(1.06); color:#fff; }
.float-btn--wa{ background:#25D366; }
.float-btn--call{ background:var(--purple); }

.to-top{
  position:fixed; left:16px; bottom:16px; z-index:1040;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--purple);
  display:grid; place-items:center; font-size:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow:var(--shadow-sm);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* -------------------------------------------------------- scroll reveal --- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}