/*
  Solvarin Website Styles
  This stylesheet defines the look and feel for the multi‑page Solvarin site.
  It uses a dark base palette with gold and purple accents to evoke a
  premium, high‑tech feel. Components are structured using CSS Grid and
  Flexbox for responsive layouts that adapt gracefully from mobile to
  desktop. 2025 best practices emphasising accessibility, clear
  navigation and trust signals informed the design decisions here.
*/

/* Colour palette and sizing variables */
:root {
  --color-black: #0b0b0b;
  --color-dark: #111111;
  --color-gold: #c7a64f;
  --color-gold-hover: #e0b85d;
  --color-accent: #7e57c2;
  --color-white: #f5f5f5;
  --color-gray: #e5e5e5;
  --max-width: 1200px;
}

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background-color: var(--color-black);
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--color-gold);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Header */
header {
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Call‑to‑action button (reusable component) */
.cta-btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  background-color: var(--color-gold);
  color: var(--color-black);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: var(--color-gold-hover);
}

header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-white);
}

header .logo img {
  width: 40px;
  height: 40px;
}

header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header nav a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0.25rem;
}

header nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  /* Use the accent colour for the underline on the active nav link to mirror Mabo's purple highlight */
  background-color: var(--color-accent);
}

header .cta-btn {
  padding: 0.5rem 1rem;
  background-color: var(--color-gold);
  color: var(--color-black);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

header .cta-btn:hover {
  background-color: var(--color-gold-hover);
}

/* Hero section */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 90vh;
  padding: 4rem 2rem;
  background: radial-gradient(circle at center, #1a1a1a 0%, var(--color-black) 80%);
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  max-width: 650px;
  margin-bottom: 2rem;
  color: var(--color-gray);
}

.hero .cta-btn {
  font-size: 1rem;
  padding: 0.7rem 1.4rem;
}

/* Features section */
.features {
  background-color: var(--color-dark);
  padding: 4rem 2rem;
}

.features h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--color-gold);
}

.features .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.features .card {
  background-color: var(--color-black);
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.features .card svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  fill: var(--color-gold);
}

.features .card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-gold);
  font-size: 1.4rem;
}

.features .card p {
  color: var(--color-gray);
  font-size: 0.9rem;
}

/* Audit steps section */
.audit {
  background-color: var(--color-black);
  padding: 4rem 2rem;
}

.audit h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--color-gold);
}

.audit .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.audit .step {
  background-color: var(--color-dark);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
}

.audit .step .number {
  width: 40px;
  height: 40px;
  background-color: var(--color-gold);
  color: var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 1rem;
}

.audit .step h3 {
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.audit .step p {
  color: var(--color-gray);
  font-size: 0.9rem;
}

/* Testimonials section */
.results {
  background-color: var(--color-dark);
  padding: 4rem 2rem;
  text-align: center;
}

.results h2 {
  margin-bottom: 1.2rem;
  font-size: 2rem;
  color: var(--color-gold);
}

.results .rating {
  font-size: 1.2rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.results .reviews-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.results .review-card {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 180px;
  padding: 1rem;
  border: 1px solid var(--color-black);
  border-radius: 8px;
  background-color: var(--color-black);
}

.results .review-card.active {
  display: flex;
}

.results .review-card p {
  color: var(--color-gray);
  font-style: italic;
}

.results .review-card .author {
  color: var(--color-gold);
  font-weight: 600;
}

.results .nav-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.results .nav-buttons button {
  background-color: var(--color-gold);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: var(--color-black);
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.results .nav-buttons button:hover {
  background-color: var(--color-gold-hover);
}

/* CTA banner */
.cta-banner {
  background-color: var(--color-black);
  padding: 3rem 2rem;
  text-align: center;
  border-top: 1px solid var(--color-dark);
}

.cta-banner h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-gold);
}

.cta-banner .cta-btn {
  font-size: 1rem;
  padding: 0.7rem 1.4rem;
}

/* Contact page */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background-color: var(--color-black);
  padding: 4rem 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-form {
  flex: 1 1 320px;
}

.contact-form h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-form h2 span {
  /* apply highlight colour via class rather than underline */
  color: var(--color-gold);
}

/* Highlight effect for emphasised words (scribble‑style underline) */
.highlight {
  position: relative;
  z-index: 1;
}

.highlight::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 0.45em;
  background-color: var(--color-accent);
  z-index: -1;
  transform: skewX(-12deg);
  border-radius: 2px;
}

/* Cookie banner */
#cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--color-dark);
  color: var(--color-gray);
  font-size: 0.9rem;
  z-index: 300;
  border-top: 1px solid var(--color-dark);
}

#cookie-banner a {
  color: var(--color-gold);
  text-decoration: underline;
}

#cookie-banner .cookie-actions {
  display: flex;
  gap: 0.5rem;
}

#cookie-banner button {
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

#cookie-banner button#accept-cookies {
  background-color: var(--color-gold);
  color: var(--color-black);
}

#cookie-banner button#accept-cookies:hover {
  background-color: var(--color-gold-hover);
}

#cookie-banner button#decline-cookies {
  background-color: transparent;
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}

#cookie-banner button#decline-cookies:hover {
  background-color: var(--color-dark);
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-dark);
  border-radius: 4px;
  background-color: var(--color-dark);
  color: var(--color-white);
  font-size: 1rem;
}

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

.contact-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.contact-info {
  flex: 1 1 320px;
  color: var(--color-gray);
}

.contact-info p {
  margin-bottom: 1.5rem;
}

.contact-info ul {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray);
}

.contact-info li svg {
  width: 20px;
  height: 20px;
  fill: var(--color-gold);
}

.contact-info a {
  color: var(--color-gold);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--color-black);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--color-dark);
}

footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

footer .footer-nav a {
  color: var(--color-gray);
  font-size: 0.9rem;
  text-decoration: none;
}

footer .footer-nav a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

footer .socials {
  display: flex;
  gap: 1rem;
}

footer .socials a svg {
  width: 20px;
  height: 20px;
  fill: var(--color-gold);
  transition: fill 0.3s ease;
}

footer .socials a:hover svg {
  fill: var(--color-gold-hover);
}

footer p {
  font-size: 0.8rem;
  color: var(--color-gray);
}

/* Metrics bar highlighting key achievements */
.metrics-bar {
  background-color: var(--color-dark);
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 1rem;
  text-align: center;
}

.metrics-bar .metric {
  flex: 1 1 200px;
}

.metrics-bar .number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

.metrics-bar p {
  color: var(--color-gray);
  font-size: 0.9rem;
}

/* Case studies showcase */
.case-studies {
  background-color: var(--color-dark);
  padding: 4rem 2rem;
}

.case-studies h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-gold);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.case-card {
  background-color: var(--color-black);
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.case-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.case-card h3 {
  font-size: 1.2rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.case-card p {
  color: var(--color-gray);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.case-card .learn-more {
  align-self: flex-start;
  font-size: 0.9rem;
  color: var(--color-gold);
}

.case-card .learn-more:hover {
  text-decoration: underline;
}

/* Team page styling */
.team {
  background-color: var(--color-dark);
  padding: 4rem 2rem;
  text-align: center;
}

.team h2 {
  color: var(--color-gold);
  font-size: 2rem;
  margin-bottom: 2rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.team-member {
  background-color: var(--color-black);
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

.team-member .avatar {
  background-color: var(--color-accent);
  color: var(--color-black);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 auto 1rem auto;
}

.team-member h3 {
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.team-member p {
  color: var(--color-gray);
  font-size: 0.9rem;
}
/* Team values section */
.team-values {
  background-color: var(--color-dark);
  padding: 4rem 2rem;
  text-align: center;
}

.team-values ul {
  list-style: none;
  max-width: 800px;
  margin: 1.5rem auto 0 auto;
  padding: 0;
  text-align: left;
}

.team-values li {
  margin-bottom: 1rem;
  color: var(--color-gray);
  font-size: 1rem;
}

.team-values li strong {
  color: var(--color-gold);
}

/* Tagline section */
.tagline {
  background-color: var(--color-black);
  text-align: center;
  padding: 3rem 2rem;
}

.tagline h2 {
  font-size: 2rem;
  max-width: 800px;
  margin: 0 auto 1rem;
  line-height: 1.3;
  color: var(--color-gold);
}

.tagline p {
  font-size: 1rem;
  color: var(--color-gray);
  max-width: 650px;
  margin: 0 auto;
}

/* Floating CTA */
.floating-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: var(--color-gold);
  color: var(--color-black);
  padding: 0.7rem 1.3rem;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 150;
  transition: background-color 0.3s ease;
}

.floating-cta:hover {
  background-color: var(--color-gold-hover);
}

/* Navigation dropdown styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown > a {
  /* ensure dropdown trigger matches other nav links */
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-black);
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 200;
  border: 1px solid var(--color-dark);
}

.dropdown-content a {
  color: var(--color-gray);
  padding: 0.6rem 1rem;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  font-size: 0.9rem;
}

.dropdown-content a:hover {
  background-color: var(--color-dark);
  color: var(--color-gold);
}

.dropdown:hover .dropdown-content {
  display: block;
}

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

.dropdown > a::after {
  content: " \25BE"; /* downward arrow */
  font-size: 0.7rem;
  margin-left: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
  .features .grid,
  .audit .steps {
    grid-template-columns: 1fr;
  }
  .contact-section {
    flex-direction: column;
  }
  .contact-form, .contact-info {
    flex: 1 1 100%;
  }

  /* Stack metrics bar on mobile */
  .metrics-bar {
    flex-direction: column;
    gap: 1.5rem;
  }
}
/* Solvarin Contact */
.solv-contact{
  background:#000;
  padding:72px 20px 96px;
  position:relative;
  overflow:hidden;
}
.solv-contact__wrap{
  max-width:720px;
  margin:0 auto;
  background:rgba(12,12,12,0.85);
  border:1px solid #d4af37;
  border-radius:14px;
  padding:44px 32px;
  position:relative;
  box-shadow:0 0 0px rgba(212,175,55,0.0);
  transform:translateY(24px);
  opacity:0;
  transition:transform .8s ease, opacity .8s ease, box-shadow 1.2s ease;
}
.solv-contact__wrap.is-in{
  transform:translateY(0);
  opacity:1;
  box-shadow:0 0 40px rgba(212,175,55,0.25);
}
.solv-contact__halo{
  position:absolute; inset:-40% -30% auto -30%;
  height:80%;
  background:radial-gradient(circle at 50% 50%, rgba(212,175,55,0.25), rgba(0,0,0,0) 60%);
  filter:blur(22px);
  animation:solvPulse 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes solvPulse{
  0%,100%{opacity:.45; transform:scale(1);}
  50%{opacity:.7; transform:scale(1.08);}
}
.solv-contact__title{
  margin:0 0 10px;
  text-align:center;
  color:#d4af37;
  font-size:32px;
  letter-spacing:.5px;
}
.solv-contact__sub{
  text-align:center;
  color:#cfcfcf;
  margin:0 0 28px;
  line-height:1.6;
}
.solv-contact__form .hs-form fieldset{
  max-width:100% !important;
}
.solv-contact__form .hs-input,
.solv-contact__form input[type="text"],
.solv-contact__form input[type="email"],
.solv-contact__form textarea{
  background:#0a0a0a !important;
  border:1px solid #2b2b2b !important;
  color:#fff !important;
  border-radius:10px !important;
}
.solv-contact__form .hs-submit input{
  background:#d4af37 !important;
  color:#000 !important;
  border:none !important;
  border-radius:10px !important;
  padding:12px 20px !important;
  font-weight:700 !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.solv-contact__form .hs-submit input:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(212,175,55,0.35);
}