:root {
  --bg: #fffbe6;           /* soft warm yellow */
  --surface: #fffdf5;      /* light cream */
  --surface-2: #fef3c7;    /* muted yellow-beige */
  --text: #1a1a1a;         /* deep black */
  --muted: #6b705c;        /* olive grey */
  --primary: #e63946;      /* vibrant red */
  --accent: #2a9d8f;       /* teal green */
  --danger: #ba181b;       /* deep crimson */
  --shadow: 0 10px 30px rgba(26, 26, 26, 0.3);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1100px;
}

/* Light theme */
:root.light {
  --bg: #fffbe6;           /* soft warm yellow */
  --surface: #ffffff;      /* white */
  --surface-2: #fef3c7;    /* muted yellow-beige */
  --text: #1a1a1a;         /* deep black */
  --muted: #6b705c;        /* olive grey */
  --primary: #e63946;      /* vibrant red */
  --accent: #2a9d8f;       /* teal green */
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background-color:blur;
  padding: 30px 25px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.logo:hover {
  background-color: var(--accent);
  color: var(--surface);
}

.logo__mark {
  width: 80px;
  height: 80px;
  border-radius: 90%;
  background-color: blur;
  object-fit: cover;
}

.logo__text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--primary);
}



* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% 0%, #111426 0%, var(--bg) 50%);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 92%; max-width: var(--container); margin: 0 auto; }

/* Topbar */
.topbar {
  background: whitesmoke;
  color: var(--muted);
  font-size: 0.95rem;
}
.topbar {
  background-color:black; /* black */
  color: yellow;           /* yellow */
  box-shadow: var(--shadow);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  max-width: var(--container);
  margin: 0 auto;
}

.topbar .actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

#themeToggle {
  border: none;
  background: var(--accent);     /* ochre orange for vibrancy */
  color: var(--surface);         /* white text for contrast */
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow);
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#themeToggle:hover {
  background-color: var(--primary); /* red-orange hover */
  color: var(--surface);
}

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 23, 32, 0.7); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.logo__mark { font-size: 1.4rem; }
.logo__text { font-family: Poppins, Inter, sans-serif; letter-spacing: 0.2px; }

/* Nav */
.nav__toggle {
  display: none; border: 1px solid rgba(255,255,255,0.2);
  background: black; color:yellow;
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.nav__menu { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav__menu a { padding: 8px 12px; border-radius: 10px; transition: background 0.2s; }
.nav__menu a:hover { background: yellow; }

/* Hero */
.hero { position: relative; padding: 60px 0 80px; }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero__content h1 {
  font-family: Poppins, Inter, sans-serif; font-size: clamp(2rem, 3.6vw, 3rem);
  margin: 0 0 14px; line-height: 1.15;
}
.hero__content p { color: var(--muted); margin: 0 0 18px; }
.hero__cta { display: flex; gap: 12px; margin-bottom: 18px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color: #0b1020; font-weight: 700; padding: 12px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cta--ghost {
  background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18);
}
.cta--sm { padding: 8px 12px; font-weight: 600; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; color: var(--muted); }
.hero__badges li { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08); padding: 6px 10px; border-radius: 999px; }

.hero__card { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.hero__card img { aspect-ratio: 4 / 5; object-fit: cover; }
.hero__card-caption {
  position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6);
  color: #fff; padding: 6px 10px; border-radius: 999px; font-size: 0.9rem;
}
.hero__wave {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px;
  background: radial-gradient(1200px 80px at 50% -20px, rgba(255,255,255,0.12), transparent 60%);
}

/* Sections */
.section { padding: 60px 0; }
.section--alt { background: var(--surface); }
.section--accent { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.section__head { margin-bottom: 20px; }
.section__head h2 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2rem); margin: 0 0 6px;
}
.section__head p { color: var(--muted); margin: 0; }

/* Cards */
.grid { display: grid; gap: 20px; }
.cards { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08);
  padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.card__icon { font-size: 1.6rem; }
.pill { display: inline-block; margin-top: 8px; background: rgba(255,255,255,0.06); padding: 6px 10px; border-radius: 999px; color: var(--muted); }

/* Gallery */
.gallery { grid-template-columns: repeat(3, 1fr); }
.gallery__item {
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.gallery__item img { aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; }
.gallery__item figcaption { padding: 10px 12px; color: var(--muted); }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal.open { display: flex; }
.modal img { max-width: min(900px, 92vw); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal__close {
  position: absolute; top: 16px; right: 16px; background: var(--surface-2);
  color: var(--text); border: none; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
}

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.price-card--featured { transform: scale(1.02); position: relative; }
.price { font-size: 1.4rem; font-weight: 700; margin: 6px 0 10px; }
.badge {
  position: absolute; top: -10px; left: 14px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color: #0b1020; padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
.list { list-style: none; padding: 0; margin: 0 0 14px; }
.list li { margin: 8px 0; color: var(--muted); }

/* Form */
.form { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08); padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow); }
.form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 600; }
input, select, textarea {
  background: var(--surface); color: var(--text); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
.error { color: var(--danger); min-height: 16px; }
.form__hint { color: var(--muted); font-size: 0.9rem; }
.form__status { margin-top: 12px; font-weight: 600; }

/* Slider */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; overflow: hidden; scroll-snap-type: x mandatory; }
.review {
  background: var(--surface-2); border: 1px solid rgba(255,255,255,0.08);
  padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow);
  scroll-snap-align: start;
}
.review__meta { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: var(--muted); }
.review__meta img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--surface); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.slider__btn--prev { left: -4px; }
.slider__btn--next { right: -4px; }

/* Contact */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px; }
.contact__info p { margin: 8px 0; }
.contact__actions { display: flex; gap: 10px; margin-top: 10px; }
.map iframe { width: 100%; height: 320px; border: 0; border-radius: var(--radius); }

/* Footer */
.footer { background: black; border-top: 1px solid rgba(255,255,255,0.06); padding: 18px 0; color: yellow; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; }
.footer__links { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer__links a { color:yellow; }

/* Responsive */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav__toggle { display: inline-block; }
  .nav__menu {
    position: absolute; right: 12px; top: 60px; background: var(--surface-2);
    border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    padding: 10px; display: none; flex-direction: column; gap: 8px; box-shadow: var(--shadow);
  }
  .nav__menu.open { display: flex; }
  .cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
}

/* Micro-interactions */
a, button, .card, .gallery__item img, input, select, textarea { transition: 0.2s ease; }
button:active, .cta:active { transform: translateY(1px); }
/* Basic styling */
.social-links {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  background: #111;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.social-links a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  background: #000;
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.social-container {
  display: flex;
  justify-content: center;  /* horizontal center */
  align-items: center;      /* vertical center */
  height: 10vh;            /* full viewport height */
}