/* ============================================================

   AURUM STUDIO — JEWELRY MAKING WEBSITE

   style.css — Master Stylesheet

   ============================================================ */



/* ── CSS Variables ── */

:root {

  --sapphire: #D4AF37;

  --sapphire-light: #E8CC6A;

  --sapphire-dark: #A8861E;

  --sapphire-glow: rgba(212, 175, 55, 0.4);

  --platinum: #FAF6EE;

  --platinum-2: #F2EBD8;

  --platinum-3: #E8DABB;

  --text-dark: #1C1A16;

  --text-mid: #4A4540;

  --text-light: #7A7268;

  --white: #FFFFFF;

  --black: #0C0B09;

  --bg: var(--platinum);

  --bg-2: var(--platinum-2);

  --bg-card: var(--white);

  --text: var(--text-dark);

  --text-muted: var(--text-light);

  --border: rgba(212, 175, 55, 0.25);

  --shadow: 0 4px 24px rgba(28, 26, 22, 0.08);

  --shadow-lg: 0 12px 48px rgba(28, 26, 22, 0.14);

  --header-bg: rgba(250, 246, 238, 0.92);

  --radius: 12px;

  --radius-lg: 20px;

  --font-display: 'Cormorant Garamond', Georgia, serif;

  --font-body: 'Jost', sans-serif;

  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



/* ── Dark Mode ── */

[data-theme="dark"] {

  --bg: #14110D;

  --bg-2: #1E1A14;

  --bg-card: #24201A;

  --text: #F0EAD6;

  --text-muted: #9A9080;

  --border: rgba(212, 175, 55, 0.2);

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);

  --header-bg: rgba(20, 17, 13, 0.92);

}



/* ── RTL Support ── */

[data-direction="rtl"] {

  direction: rtl;

  text-align: right;

}



[data-direction="rtl"] .nav-list {

  flex-direction: row-reverse;

}



[data-direction="rtl"] .hero-ctas {

  flex-direction: row-reverse;

}



[data-direction="rtl"] .step-connector {

  transform: scaleX(-1);

}



[data-direction="rtl"] .footer-grid {

  direction: rtl;

}



[data-direction="rtl"] .header-inner {

  flex-direction: row-reverse;

}



[data-direction="rtl"] .header-actions {

  flex-direction: row-reverse;

}



/* ── Reset & Base ── */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

}



body {

  font-family: var(--font-body);

  background: var(--bg);

  color: var(--text);

  transition: background var(--transition), color var(--transition);

  overflow-x: hidden;

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

}



img {

  max-width: 100%;

  display: block;

}



button {

  cursor: pointer;

  border: none;

  background: none;

  font-family: inherit;

}



/* ── Scroll Progress ── */

.scroll-progress {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--sapphire), var(--sapphire-light));

  width: 0%;

  z-index: 9999;

  transition: width 0.1s linear;

}



/* ── Custom Cursor ── 

.cursor-dot {

  position: fixed; width: 8px; height: 8px; border-radius: 50%;

  background: var(--sapphire); pointer-events: none; z-index: 9998;

  transform: translate(-50%, -50%);

  transition: opacity 0.3s;

}

.cursor-ring {

  position: fixed; width: 36px; height: 36px; border-radius: 50%;

  border: 1.5px solid var(--sapphire); pointer-events: none; z-index: 9997;

  transform: translate(-50%, -50%);

  transition: width 0.2s, height 0.2s, border-color 0.2s;

}

.cursor-ring.expand { width: 56px; height: 56px; border-color: var(--sapphire-light); opacity: 0.6; }



@media (max-width: 768px) {

  .cursor-dot, .cursor-ring { display: none; }

  body { cursor: auto; }

}*/



/* ── Container ── */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 32px;

}



/* ── HEADER ── */

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  background: var(--header-bg);

  backdrop-filter: blur(16px) saturate(1.6);

  -webkit-backdrop-filter: blur(16px) saturate(1.6);

  border-bottom: 1px solid var(--border);

  transition: background var(--transition), box-shadow var(--transition);

}



.header.scrolled {

  box-shadow: var(--shadow);

}



.header-inner {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 32px;

  height: 76px;

  display: flex;

  align-items: center;

  gap: 32px;

}



/* Logo */

.logo {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--text);

}



.logo em {

  font-style: italic;

  color: var(--sapphire);

}



.logo-icon {

  color: var(--sapphire);

  font-size: 1.2rem;

  animation: spin-slow 10s linear infinite;

  display: inline-block;

}



@keyframes spin-slow {

  to {

    transform: rotate(360deg);

  }

}



/* Nav */

.nav {

  margin: 0 auto;

}



.nav-list {

  display: flex;

  align-items: center;

  gap: 4px;

}



.nav-link {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 8px 14px;

  border-radius: 8px;

  font-size: 0.875rem;

  font-weight: 500;

  letter-spacing: 0.02em;

  color: var(--text-muted);

  transition: color var(--transition), background var(--transition);

  white-space: nowrap;

}



.nav-link:hover,

.nav-link.active {

  color: var(--sapphire);

}



.nav-link.active {

  background: rgba(212, 175, 55, 0.1);

}



.nav-link .arrow {

  font-size: 0.7rem;

  transition: transform var(--transition);

}



/* Dropdown */

.has-dropdown {

  position: relative;

}



.dropdown {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 8px;

  min-width: 180px;

  box-shadow: var(--shadow-lg);

  opacity: 0;

  visibility: hidden;

  transform: translateY(-8px);

  transition: all var(--transition);

}



.has-dropdown:hover .dropdown {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.has-dropdown:hover .arrow {

  transform: rotate(180deg);

}



.dropdown li a {

  display: block;

  padding: 8px 14px;

  border-radius: 6px;

  font-size: 0.875rem;

  color: var(--text-muted);

  transition: color var(--transition), background var(--transition);

}



.dropdown li a:hover {

  color: var(--sapphire);

  background: rgba(212, 175, 55, 0.08);

}



/* Header Actions */

.header-actions {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-left: 16px;

}



.btn-toggle-theme,

.btn-toggle-rtl,

.btn-cart {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 0.8rem;

  font-weight: 600;

  transition: all var(--transition);

  position: relative;

}



.btn-toggle-theme:hover,

.btn-toggle-rtl:hover,

.btn-cart:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.btn-toggle-rtl {

  width: auto;

  padding: 0 12px;

  border-radius: 20px;

  font-size: 0.75rem;

  letter-spacing: 0.05em;

}



.btn-cart {

  border-radius: 50%;

  font-size: 1rem;

}



.cart-count {

  position: absolute;

  top: -5px;

  right: -5px;

  background: var(--sapphire);

  color: var(--black);

  font-size: 0.65rem;

  font-weight: 700;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--bg-card);

  transition: transform var(--transition);

}



.btn-cart:hover .cart-count {

  transform: scale(1.15);

}



[data-theme="light"] .icon-moon {

  display: none;

}



[data-theme="dark"] .icon-sun {

  display: none;

}



.icon-sun,

.icon-moon {

  font-size: 1rem;

}



/* CTA Button */

.btn-cta {

  background: var(--sapphire);

  color: var(--black);

  padding: 10px 20px;

  border-radius: 24px;

  font-size: 0.85rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  transition: all var(--transition);

  white-space: nowrap;

  box-shadow: 0 0 0 0 var(--sapphire-glow);

}



.btn-cta:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 24px var(--sapphire-glow);

}



/* Hamburger */

.hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  padding: 4px;

  width: 36px;

}



.hamburger span {

  display: block;

  height: 2px;

  background: var(--text);

  border-radius: 2px;

  transition: all var(--transition);

}



.hamburger.open span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}



.hamburger.open span:nth-child(2) {

  opacity: 0;

}



.hamburger.open span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}



/* ── HERO ── */

.hero {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.hero-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:

    linear-gradient(rgba(12, 11, 9, 0.6), rgba(12, 11, 9, 0.6)),

    url('../images/hero-bg-1.png');

  background-size: cover;

  background-position: center;

}



[data-theme="light"] .hero-bg {

  background-image:

    linear-gradient(rgba(28, 26, 22, 0.5), rgba(28, 26, 22, 0.5)),

    url('../images/hero-bg-1.png');

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),

    radial-gradient(ellipse at 70% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);

}



/* Hero particles */

.hero-particles {

  position: absolute;

  inset: 0;

  overflow: hidden;

}



.particle {

  position: absolute;

  border-radius: 50%;

  background: var(--sapphire);

  opacity: 0;

  animation: float-particle var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;

}



@keyframes float-particle {

  0% {

    opacity: 0;

    transform: translateY(100%) scale(0);

  }



  20% {

    opacity: var(--op, 0.4);

  }



  80% {

    opacity: var(--op, 0.4);

  }



  100% {

    opacity: 0;

    transform: translateY(-100px) scale(1);

  }

}



.hero-content {

  position: relative;

  z-index: 1;

  text-align: center;

  padding: 120px 32px 80px;

  max-width: 880px;

}



.hero-eyebrow {

  font-family: var(--font-body);

  font-size: 0.8rem;

  font-weight: 500;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 20px;

}



.hero-headline {

  font-family: var(--font-display);

  font-size: clamp(3rem, 8vw, 6.5rem);

  font-weight: 300;

  line-height: 1.08;

  color: var(--platinum);

  margin-bottom: 24px;

  letter-spacing: -0.01em;

}



.hero-headline em {

  font-style: italic;

  color: var(--sapphire);

  font-weight: 300;

}



.hero-sub {

  font-size: clamp(1rem, 2vw, 1.2rem);

  font-weight: 300;

  color: rgba(240, 234, 214, 0.7);

  margin-bottom: 44px;

  line-height: 1.7;

  letter-spacing: 0.01em;

}



.br-desktop {

  display: block;

}



.hero-ctas {

  display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 60px;

}



/* Primary Button */

.btn-primary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--sapphire);

  color: var(--black);

  padding: 16px 32px;

  border-radius: 48px;

  font-size: 0.95rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  transition: all var(--transition);

}



.btn-primary:hover {

  transform: translateY(-3px);

}



.glow-btn {

  box-shadow: 0 0 0 0 var(--sapphire-glow);

}



.glow-btn:hover {

  box-shadow: 0 8px 32px var(--sapphire-glow), 0 0 60px rgba(212, 175, 55, 0.2);

}



.glow-btn svg {

  transition: transform var(--transition);

}



.glow-btn:hover svg {

  transform: translateX(4px);

}



/* Secondary Button */

.btn-secondary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: transparent;

  color: var(--platinum);

  padding: 16px 32px;

  border-radius: 48px;

  border: 1px solid rgba(240, 234, 214, 0.3);

  font-size: 0.95rem;

  font-weight: 500;

  transition: all var(--transition);

  backdrop-filter: blur(8px);

}



.btn-secondary:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

  transform: translateY(-3px);

}



/* Ghost Button */

.btn-ghost {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: transparent;

  color: var(--platinum);

  padding: 16px 32px;

  border-radius: 48px;

  border: 1px solid rgba(240, 234, 214, 0.4);

  font-size: 0.95rem;

  font-weight: 500;

  transition: all var(--transition);

}



.btn-ghost:hover {

  border-color: var(--platinum);

  transform: translateY(-3px);

  background: rgba(240, 234, 214, 0.1);

}



/* Outline Button */

.btn-outline {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: transparent;

  color: var(--sapphire);

  padding: 14px 32px;

  border-radius: 48px;

  border: 1.5px solid var(--sapphire);

  font-size: 0.9rem;

  font-weight: 600;

  transition: all var(--transition);

}



.btn-outline:hover {

  background: var(--sapphire);

  color: var(--black);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px var(--sapphire-glow);

}



/* Hero Stats */

.hero-stats {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  flex-wrap: wrap;

  background: rgba(12, 11, 9, 0.65);

  backdrop-filter: blur(16px);

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

  border: 1px solid rgba(212, 175, 55, 0.15);

  border-radius: 24px;

  padding: 24px 16px;

  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);

  margin: 0 auto;

}



.stat {

  text-align: center;

  padding: 0 32px;

}



.stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 2.2rem;

  font-weight: 600;

  color: var(--sapphire);

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  margin-bottom: 4px;

}



.stat span {

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.85);

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.stat-divider {

  width: 1px;

  height: 50px;

  background: rgba(212, 175, 55, 0.3);

}



/* Scroll Hint */

.hero-scroll-hint {

  position: absolute;

  bottom: 36px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  z-index: 1;

}



.hero-scroll-hint span {

  font-size: 0.7rem;

  letter-spacing: 0.2em;

  color: rgba(240, 234, 214, 0.4);

  text-transform: uppercase;

}



.scroll-line {

  width: 1px;

  height: 40px;

  background: linear-gradient(to bottom, var(--sapphire), transparent);

  animation: scroll-pulse 2s ease-in-out infinite;

}



@keyframes scroll-pulse {



  0%,

  100% {

    opacity: 0.3;

  }



  50% {

    opacity: 1;

  }

}



/* Fade-up animations */

.fade-up {

  opacity: 0;

  transform: translateY(40px);

  animation: fadeUp 0.9s var(--transition) forwards;

}



.delay-1 {

  animation-delay: 0.2s;

}



.delay-2 {

  animation-delay: 0.4s;

}



.delay-3 {

  animation-delay: 0.6s;

}



.delay-4 {

  animation-delay: 0.8s;

}



@keyframes fadeUp {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ── SECTIONS ── */

.section {

  padding: 100px 0;

}



.section-header {

  text-align: center;

  margin-bottom: 64px;

}



.section-eyebrow {

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 12px;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(2.2rem, 5vw, 3.5rem);

  font-weight: 300;

  line-height: 1.15;

  color: var(--text);

}



.section-title em {

  font-style: italic;

  color: var(--sapphire);

}



.section-sub {

  margin-top: 16px;

  color: var(--text-muted);

  font-size: 1rem;

  line-height: 1.7;

  max-width: 520px;

  margin-left: auto;

  margin-right: auto;

}



.section-action {

  text-align: center;

  margin-top: 56px;

}



/* Reveal on scroll */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal.delay-1 {

  transition-delay: 0.1s;

}



.reveal.delay-2 {

  transition-delay: 0.2s;

}



.reveal.delay-3 {

  transition-delay: 0.3s;

}



.reveal.delay-4 {

  transition-delay: 0.4s;

}



/* ── WORKSHOPS ── */

.workshops-section {

  background: var(--bg);

}



.workshops-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.workshop-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  transition: transform var(--transition), box-shadow var(--transition);

  box-shadow: var(--shadow);

}



.workshop-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

}



.card-image {

  position: relative;

  height: 200px;

  overflow: hidden;

}



.card-img-placeholder {

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  transition: transform 0.6s ease;

}



.workshop-card:hover .card-img-placeholder {

  transform: scale(1.06);

}



/* Workshop image placeholders with gradients */

.wi-1 {

  background-image: url('../images/sections/wi-1.png');

}



.wi-2 {

  background-image: url('../images/sections/wi-2.png');

}



.wi-3 {

  background-image: url('../images/sections/wi-3.png');

}



.wi-4 {

  background-image: url('../images/sections/wi-4.png');

}



/* Remove pattern overlay to images for real photos */

.card-img-placeholder::after {

  display: none;

}



.card-img-placeholder::before {

  display: none;

}



.card-badge {

  position: absolute;

  top: 14px;

  right: 14px;

  background: var(--sapphire);

  color: var(--black);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  padding: 4px 10px;

  border-radius: 20px;

}



.badge-gold {

  background: linear-gradient(135deg, #D4AF37, #F0D060);

}



.badge-dark {

  background: var(--text-dark);

  color: var(--platinum);

}



.card-body {

  padding: 20px;

}



.card-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

}



.level {

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  padding: 3px 10px;

  border-radius: 20px;

}



.level.beginner {

  background: rgba(100, 180, 100, 0.15);

  color: #4a9a4a;

}



.level.intermediate {

  background: rgba(180, 140, 50, 0.15);

  color: #a07020;

}



.level.advanced {

  background: rgba(180, 60, 60, 0.15);

  color: #a03030;

}



.duration {

  font-size: 0.8rem;

  color: var(--text-muted);

}



.card-body h3 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 8px;

  line-height: 1.3;

}



.card-body p {

  font-size: 0.85rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 16px;

}



.card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.price {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--sapphire);

}



.btn-card {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--sapphire);

  padding: 6px 0;

  border-bottom: 1px solid transparent;

  transition: border-color var(--transition), letter-spacing var(--transition);

}



.btn-card:hover {

  border-color: var(--sapphire);

  letter-spacing: 0.03em;

}



/* ── HOW IT WORKS ── */

.how-section {

  background: var(--bg-2);

  position: relative;

  overflow: hidden;

}



.how-section::before {

  content: '';

  position: absolute;

  top: -100px;

  right: -100px;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 70%);

}



.steps-row {

  display: flex;

  align-items: center;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

  padding-top: 20px;

}



.step {

  flex: 1;

  min-width: 260px;

  max-width: 340px;

  text-align: center;

  padding: 50px 32px 40px;

  position: relative;

  background: var(--bg-card);

  border-radius: 24px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);

  border: 1px solid var(--border);

  transition: all var(--transition-slow);

}



.step:hover {

  transform: translateY(-10px);

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);

  border-color: rgba(212, 175, 55, 0.4);

}



.step-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--sapphire), var(--sapphire-dark));

  color: var(--black);

  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 24px;

  border: none;

  transition: all var(--transition-slow);

  position: relative;

  z-index: 2;

}



.step:hover .step-icon {

  transform: scale(1.1) rotate(5deg);

  box-shadow: 0 15px 32px rgba(212, 175, 55, 0.5);

  color: var(--white);

}



.step-icon svg {

  width: 36px;

  height: 36px;

}



.step-num {

  font-family: var(--font-display);

  font-size: 7rem;

  font-weight: 700;

  color: rgba(212, 175, 55, 0.04);

  line-height: 1;

  position: absolute;

  top: -15px;

  right: 15px;

  left: auto;

  transform: none;

  z-index: 0;

  user-select: none;

  transition: all var(--transition);

}



.step:hover .step-num {

  color: rgba(212, 175, 55, 0.08);

  top: -20px;

}



.step h3 {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 12px;

  position: relative;

  z-index: 1;

}



.step p {

  font-size: 0.95rem;

  color: var(--text-muted);

  line-height: 1.6;

  position: relative;

  z-index: 1;

}



.step-connector {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

  padding: 0;

}



.connector-line {

  flex: 1;

  height: 2px;

  min-width: 40px;

  background-image: linear-gradient(90deg, var(--sapphire) 50%, transparent 50%);

  background-size: 16px 2px;

  opacity: 0.3;

}



.connector-diamond {

  color: var(--sapphire);

  font-size: 1rem;

  flex-shrink: 0;

  opacity: 0.6;

  animation: pulse-gold 2s ease-in-out infinite;

}



@keyframes pulse-gold {



  0%,

  100% {

    opacity: 0.5;

  }



  50% {

    opacity: 1;

  }

}



/* ── SHOP PREVIEW ── */

.shop-section {

  background: var(--bg);

}



.shop-scroll-wrapper {

  position: relative;

  overflow: hidden;

  padding: 20px 0;

}



.shop-scroll-inner {

  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 20px 32px;

  scroll-snap-type: x mandatory;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.shop-scroll-inner::-webkit-scrollbar {

  display: none;

}



.shop-card {

  flex: 0 0 260px;

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  scroll-snap-align: start;

  transition: transform var(--transition), box-shadow var(--transition);

}



.shop-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.shop-img {

  height: 200px;

  background-size: cover;

  background-position: center;

  position: relative;

  transition: transform 0.5s ease;

  overflow: hidden;

}



.shop-card:hover .shop-img {

  transform: scale(1.04);

}



.shop-img::before {

  display: none;

}



.si-1 {

  background-image: url('../images/pexels-hatice-genc-3580692-32797482.jpg');

}



.si-2 {

  background-image: url('../images/pexels-atulm0han-19869442.jpg');

}



.si-3 {

  background-image: url('../images/pexels-mohamad-ali-altaweel-200026965-19820885.jpg');

}



.si-4 {

  background-image: url('../images/pexels-the-glorious-studio-3584518-30746014.jpg');

}



.si-5 {

  background-image: url('../images/beaded.jpeg');

}



.shop-info {

  padding: 16px;

}



.shop-tag {

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 6px;

  display: block;

}



.shop-info h4 {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 12px;

}



.shop-price-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.shop-price {

  font-family: var(--font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--sapphire);

}



.btn-shop-add {

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--bg-card);

  background: var(--sapphire);

  padding: 6px 14px;

  border-radius: 20px;

  transition: all var(--transition);

}



.btn-shop-add:hover {

  background: var(--sapphire-dark);

  transform: scale(1.05);

}



/* Scroll buttons */

.scroll-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--bg-card);

  border: 1px solid var(--border);

  color: var(--text);

  font-size: 1.5rem;

  box-shadow: var(--shadow);

  transition: all var(--transition);

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

}



.scroll-btn:hover {

  background: var(--sapphire);

  color: var(--black);

  border-color: var(--sapphire);

}



.scroll-left {

  left: 16px;

}



.scroll-right {

  right: 16px;

}



/* ── STUDENT CREATIONS ── */

.gallery-section {

  background: var(--bg-2);

}



.masonry-grid {

  columns: 3;

  column-gap: 16px;

}



.masonry-item {

  break-inside: avoid;

  margin-bottom: 16px;

  border-radius: var(--radius);

  overflow: hidden;

  position: relative;

  cursor: pointer;

}



/* .masonry-item.tall style handled via container or individual logic if needed */

.masonry-img {

  width: 100%;

  transition: transform 0.5s ease;

  background-size: cover;

  background-position: center;

}



.masonry-item:hover .masonry-img {

  transform: scale(1.06);

}



.masonry-item .tall .masonry-img {

  height: 380px;

}



.masonry-img::before {

  display: none;

}



.mg-1 {

  height: 320px;

  background-image: url('../images/unsplash-1.jpg');

}



.mg-2 {

  height: 200px;

  background-image: url('../images/unsplash-2.jpg');

}



.mg-3 {

  height: 220px;

  background-image: url('../images/unsplash-3.jpg');

}



.mg-4 {

  height: 340px;

  background-image: url('../images/unsplash-4.jpg');

}



.mg-5 {

  height: 200px;

  background-image: url('../images/unsplash-5.jpg');

}



.mg-6 {

  height: 220px;

  background-image: url('../images/pexels-ishhaara-jewellery-2151367824-33154633.jpg');

}



.masonry-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 60%);

  display: flex;

  align-items: flex-end;

  padding: 16px;

  opacity: 0;

  transition: opacity var(--transition);

}



.masonry-item:hover .masonry-overlay {

  opacity: 1;

}



.masonry-overlay span {

  color: white;

  font-size: 0.85rem;

  font-weight: 500;

}



/* ── TESTIMONIALS ── */

.testimonials-section {

  background: var(--bg);

  overflow: hidden;

}



.testimonials-slider-wrap {

  position: relative;

  overflow: hidden;

}



.testimonials-track {

  display: flex;

  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.testimonial-slide {

  min-width: 100%;

  padding: 40px 120px;

  text-align: center;

}



@media (max-width: 768px) {

  .testimonial-slide {

    padding: 40px 24px;

  }

}



.quote-icon {

  font-size: 3rem;

  color: var(--sapphire);

  opacity: 0.4;

  margin-bottom: 20px;

  line-height: 1;

  font-family: serif;

}



.quote-text {

  font-family: var(--font-display);

  font-size: clamp(1.1rem, 2.5vw, 1.5rem);

  font-weight: 400;

  font-style: italic;

  color: var(--text);

  line-height: 1.7;

  margin-bottom: 32px;

  max-width: 720px;

  margin-left: auto;

  margin-right: auto;

}



.quote-author {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-bottom: 16px;

}



.author-avatar {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  border: 2px solid var(--sapphire);

  background-size: cover;

  background-position: center;

}



.av1 {

  background-image: url('../images/unsplash-6.jpg');

}



.av2 {

  background-image: url('../images/unsplash-7.jpg');

}



.av3 {

  background-image: url('../images/unsplash-8.jpg');

}



.av4 {

  background-image: url('../images/unsplash-9.jpg');

}



.quote-author strong {

  display: block;

  font-weight: 600;

  color: var(--text);

}



.quote-author span {

  font-size: 0.8rem;

  color: var(--text-muted);

}



.stars {

  color: var(--sapphire);

  font-size: 1.1rem;

  letter-spacing: 2px;

}



.slider-controls {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  padding: 32px 0;

}



.slider-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 1.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

}



.slider-btn:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.slider-dots {

  display: flex;

  gap: 8px;

}



.slider-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--border);

  cursor: pointer;

  transition: all var(--transition);

}



.slider-dot.active {

  background: var(--sapphire);

  width: 24px;

  border-radius: 4px;

}



/* ── CTA BANNER ── */

.cta-banner {

  padding: 120px 0;

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, #1C1A16 0%, #2a2010 50%, #1a1509 100%);

}



.cta-bg-pattern {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse at 20% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 55%),

    radial-gradient(ellipse at 80% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 55%);

}



.cta-banner::before {

  content: '✦';

  position: absolute;

  top: 20%;

  left: 8%;

  font-size: 5rem;

  color: rgba(212, 175, 55, 0.06);

  animation: float-symbol 8s ease-in-out infinite;

}



.cta-banner::after {

  content: '◈';

  position: absolute;

  bottom: 15%;

  right: 8%;

  font-size: 6rem;

  color: rgba(212, 175, 55, 0.05);

  animation: float-symbol 12s ease-in-out infinite reverse;

}



@keyframes float-symbol {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }



  50% {

    transform: translateY(-20px) rotate(15deg);

  }

}



.cta-inner {

  text-align: center;

  position: relative;

  z-index: 1;

}



.cta-eyebrow {

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 16px;

}



.cta-title {

  font-family: var(--font-display);

  font-size: clamp(2.5rem, 6vw, 5rem);

  font-weight: 300;

  color: var(--platinum);

  line-height: 1.1;

  margin-bottom: 20px;

}



.cta-title em {

  font-style: italic;

  color: var(--sapphire);

}



.cta-sub {

  color: rgba(240, 234, 214, 0.65);

  font-size: 1rem;

  line-height: 1.7;

  margin-bottom: 48px;

  max-width: 480px;

  margin-left: auto;

  margin-right: auto;

}



.cta-buttons {

  display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

}



/* ── FOOTER ── */

.footer {

  background: var(--bg-2);

  border-top: 1px solid var(--border);

  padding: 80px 0 0;

}



.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 48px;

  margin-bottom: 60px;

}



.footer-brand .logo {

  margin-bottom: 16px;

}



.footer-brand p {

  font-size: 0.9rem;

  color: var(--text-muted);

  line-height: 1.7;

  max-width: 260px;

  margin-bottom: 24px;

}



.social-links {

  display: flex;

  gap: 10px;

}



.social-links a {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1px solid var(--border);

  color: var(--text-muted);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  font-weight: 700;

  transition: all var(--transition);

}



.social-links a:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

  background: rgba(212, 175, 55, 0.1);

}



.footer-col h5 {

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--text);

  margin-bottom: 20px;

}



.footer-col ul {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.footer-col ul li a {

  font-size: 0.9rem;

  color: var(--text-muted);

  transition: color var(--transition);

}



.footer-col ul li a:hover {

  color: var(--sapphire);

}



.footer-bottom {

  border-top: 1px solid var(--border);

  padding: 24px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

}



.footer-bottom p {

  font-size: 0.85rem;

  color: var(--text-muted);

}



.footer-legal {

  display: flex;

  gap: 24px;

}



.footer-legal a {

  font-size: 0.85rem;

  color: var(--text-muted);

  transition: color var(--transition);

}



.footer-legal a:hover {

  color: var(--sapphire);

}



/* ── RESPONSIVE ── */

@media (max-width: 1100px) {

  .workshops-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 1024px) {

  .hamburger {

    display: flex;

  }

  .nav {

    position: fixed;

    top: 76px;

    right: 0;

    bottom: 0;

    left: auto;

    width: 80%;

    max-width: 340px;

    height: calc(100vh - 76px);

    background: var(--header-bg);

    backdrop-filter: blur(16px);

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

    display: flex;

    flex-direction: column;

    align-items: stretch;

    transform: translateX(100%);

    transition: transform var(--transition);

    overflow-y: auto;

    padding: 24px 20px;

    border-left: 1px solid var(--border);

    z-index: 1000;

  }

  .nav.open {

    transform: translateX(0);

  }

  .nav-list {

    flex-direction: column;

    align-items: stretch;

    gap: 8px;

    width: 100%;

    margin: 0;

    padding: 0;

  }

  .btn-cta {

    display: none;

  }

  .header-actions {

    margin-left: auto;

    justify-content: flex-end;

  }

}



@media (max-width: 900px) {

  .steps-row {

    flex-direction: column;

    align-items: center;

  }



  .step-connector {

    flex-direction: column;

    padding-top: 0;

    padding: 8px 0;

  }



  .connector-line {

    width: 2px;

    height: 40px;

    background-image: linear-gradient(to bottom, var(--sapphire) 50%, transparent 50%);

    background-size: 2px 16px;

    min-width: unset;

    opacity: 0.3;

  }



  .masonry-grid {

    columns: 2;

  }

}



@media (max-width: 768px) {

  .header-inner {

    padding: 0 20px;

    gap: 12px;

  }



  .nav {

    position: fixed;

    top: 76px;

    right: 0;

    bottom: 0;

    left: auto;

    width: 80%;

    max-width: 340px;

    height: calc(100vh - 76px);

    background: var(--header-bg);

    backdrop-filter: blur(16px);

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

    display: flex;

    flex-direction: column;

    align-items: stretch;

    transform: translateX(100%);

    transition: transform var(--transition);

    overflow-y: auto;

    padding: 24px 20px;

    border-left: 1px solid var(--border);

    z-index: 1000;

  }



  .nav.open {

    transform: translateX(0);

  }



  .nav-list {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 8px;

    width: 100%;

    margin: 0;

    padding: 0;

  }



  .has-dropdown {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

  }



  .nav-link {

    padding: 12px 16px;

    font-size: 1rem;

    width: 100%;

    display: flex;

    justify-content: space-between;

  }



  .dropdown {

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    border: none;

    background: rgba(212, 175, 55, 0.05);

    margin: 4px 0 12px 16px;

    width: auto;

    padding: 8px;

    border-radius: var(--radius);

    display: flex;

    flex-direction: column;

    gap: 4px;

  }



  .dropdown li a {

    padding: 10px 14px;

    width: 100%;

  }



  .btn-cta {

    display: none;

  }



  .hamburger {

    display: flex;

  }



  .header-actions {

    margin-left: auto;

    justify-content: flex-end;

  }



  .btn-toggle-theme,

  .btn-toggle-rtl {

    width: 36px;

    height: 36px;

    font-size: 0.75rem;

  }



  .workshops-grid {

    grid-template-columns: 1fr;

  }



  .footer-grid {

    grid-template-columns: 1fr;

    gap: 32px;

  }



  .container {

    padding: 0 20px;

  }



  .section {

    padding: 70px 0;

  }



  .hero-content {

    padding: 100px 20px 70px;

  }



  .br-desktop {

    display: none;

  }



  .hero-stats {

    gap: 16px;

    flex-wrap: wrap;

    padding: 20px;

    border-radius: 20px;

  }



  .stat {

    padding: 0 10px;

  }

  

  .stat-divider {

    display: none;

  }



  .masonry-grid {

    columns: 1;

  }



  .testimonial-slide {

    padding: 20px 20px;

  }



  .footer-bottom {

    flex-direction: column;

    text-align: center;

  }



  .footer-legal {

    justify-content: center;

  }



  .cta-banner {

    padding: 80px 0;

  }

}



@media (max-width: 480px) {

  .hero-headline {

    font-size: 2.8rem;

  }



  .hero-ctas {

    flex-direction: column;

    align-items: center;

  }



  .btn-primary,

  .btn-secondary {

    width: 100%;

    max-width: 280px;

    justify-content: center;

  }



  .stat-divider {

    display: none;

  }



  .hero-stats {

    flex-wrap: wrap;

    gap: 16px;

  }



  .cta-buttons {

    flex-direction: column;

    align-items: center;

  }



  .btn-outline,

  .btn-ghost {

    width: 100%;

    max-width: 280px;

    justify-content: center;

  }

}



/* ── Mobile Nav Overlay ── */

.nav-overlay {

  display: none;

  position: fixed;

  inset: 76px 0 0 0;

  background: rgba(0, 0, 0, 0.4);

  z-index: 999;

  backdrop-filter: blur(2px);

}



.nav-overlay.visible {

  display: block;

}



/* ============================================================

   INDEX2 — HOMEPAGE 2  (Educational / DIY Kits)

   ============================================================ */



/* ── HERO 2 UNIQUE DESIGN ── */

.hero2 {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.hero2-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background-image:

    linear-gradient(rgba(26, 24, 14, 0.7), rgba(26, 24, 14, 0.7)),

    url('../images/hero-bg-2.png');

  background-size: cover;

  background-position: center;

}



.container-hero2 {

  max-width: 1400px;

  position: relative;

  z-index: 2;

}



.hero2-layout-wrap {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 60px;

  align-items: center;

  padding-top: 60px;

}



.hero2-content-card {

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

  backdrop-filter: blur(20px);

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

  padding: 60px;

  margin-top: 2em;

  margin-bottom: 5em;

  border-radius: 40px;

  border: 1px solid rgba(212, 175, 55, 0.15);

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);

  position: relative;

  transition: transform 0.4s ease;

}



.hero2-content-card:hover {

  transform: translateY(-5px);

  border-color: rgba(212, 175, 55, 0.3);

}



.hero2-content-card .hero-eyebrow {

  margin-bottom: 24px;

  text-align: left;

}



.hero2-content-card .hero-headline {

  text-align: left;

  margin-bottom: 24px;

  font-size: clamp(2.5rem, 6vw, 4.8rem);

}



.hero2-content-card .hero-sub {

  text-align: left;

  margin-left: 0;

  max-width: 100%;

  margin-bottom: 40px;

}



.hero2-actions {

  display: flex;

  gap: 16px;

  margin-bottom: 48px;

  justify-content: flex-start;

}



.hero2-stats {

  display: flex;

  align-items: center;

  gap: 0;

}



.h2-stat {

  padding: 0 32px;

}



.h2-stat:first-child {

  padding-left: 0;

}



.h2-stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 2.2rem;

  font-weight: 600;

  color: var(--sapphire);

}



.h2-stat span {

  font-size: 0.8rem;

  color: rgba(240, 234, 214, 0.5);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.h2-stat-sep {

  width: 1px;

  height: 40px;

  background: rgba(212, 175, 55, 0.2);

}



/* Featured Preview Card */

.hero2-featured-wrap {

  position: relative;

  display: flex;

  justify-content: center;

  perspective: 1000px;

}



.featured-kit-card {

  background: var(--bg-card);

  border-radius: 30px;

  padding: 12px;

  width: 360px;

  box-shadow: var(--shadow-lg);

  position: relative;

  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  transform: rotateY(-12deg) rotateX(6deg) translateY(0);

}



.featured-kit-card:hover {

  transform: rotateY(0deg) rotateX(0deg) translateY(-15px);

}



.kit-card-inner {

  border-radius: 24px;

  overflow: hidden;

  background: var(--bg-2);

}



.kit-card-img-placeholder {

  height: 240px;

  background: url('../images/unsplash-3.jpg') center/cover no-repeat;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 5rem;

  position: relative;

}



.kit-card-img-placeholder::after {

  content: '';

  position: absolute;

  inset: 0;

  background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0l15 15-15 15L0 15z' fill='%23ffffff05'/%3E%3C/svg%3E") repeat;

}



.kit-card-details {

  padding: 24px;

}



.kit-card-details h4 {

  font-family: var(--font-display);

  font-size: 1.4rem;

  color: var(--text);

  margin-bottom: 8px;

}



.kit-card-details p {

  font-size: 0.85rem;

  color: var(--text-muted);

  margin-bottom: 20px;

}



.kit-card-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.kit-price {

  font-family: var(--font-display);

  font-size: 1.6rem;

  color: var(--sapphire);

  font-weight: 600;

}



.kit-tag {

  background: rgba(212, 175, 55, 0.1);

  color: var(--sapphire);

  padding: 4px 12px;

  border-radius: 12px;

  font-size: 0.75rem;

  font-weight: 600;

}



.kit-card-badge {

  position: absolute;

  top: -10px;

  right: 25px;

  background: var(--sapphire);

  color: var(--black);

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 0.72rem;

  font-weight: 700;

  z-index: 5;

  box-shadow: 0 8px 20px var(--sapphire-glow);

}



.floating-gem-icon {

  position: absolute;

  font-size: 2.8rem;

  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));

  animation: float-gem-anim 8s ease-in-out infinite;

  z-index: 10;

}



.floating-gem-icon.g1 {

  top: -45px;

  left: -35px;

  animation-delay: 0s;

}



.floating-gem-icon.g2 {

  bottom: -25px;

  right: -25px;

  animation-delay: -4s;

  font-size: 2rem;

}



/* Responsive index2 Hero */

@media (max-width: 1100px) {

  .hero2-layout-wrap {

    grid-template-columns: 1fr;

    gap: 80px;

    padding-top: 100px;

    text-align: center;

  }



  .hero2-content-card {

    padding: 40px;

    max-width: 800px;

    margin: 0 auto;

  }



  .hero2-content-card .hero-eyebrow,

  .hero2-content-card .hero-headline,

  .hero2-content-card .hero-sub {

    text-align: center;

  }



  .hero2-actions {

    justify-content: center;

  }



  .hero2-stats {

    justify-content: center;

  }



  .featured-kit-card {

    transform: none;

  }



  .featured-kit-card:hover {

    transform: translateY(-10px);

  }

}



@media (max-width: 480px) {

  .hero2-content-card {

    padding: 30px 20px;

    background: transparent;

    border: none;

    box-shadow: none;

    backdrop-filter: none;

  }



  .hero2-actions {

    flex-direction: column;

    align-items: center;

  }



  .hero2-actions .btn-primary,

  .hero2-actions .btn-secondary {

    width: 100%;

    max-width: 300px;

  }



  .h2-stat {

    padding: 0 16px;

  }



  .h2-stat strong {

    font-size: 1.8rem;

  }



  .featured-kit-card {

    width: 100%;

    max-width: 320px;

  }



  .h2-stat-sep {

    height: 30px;

  }

}



/* Rest of index2 styles... */



/* ── VIDEO / LEARNING SECTION ── */

.video-section {

  background: var(--bg-2);

}



.video-layout {

  display: grid;

  grid-template-columns: 1fr 320px;

  gap: 40px;

  align-items: start;

}



@media (max-width: 900px) {

  .video-layout {

    grid-template-columns: 1fr;

  }

}



.video-thumb {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  cursor: pointer;

  background: #111;

  box-shadow: var(--shadow-lg);

  transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.video-thumb:hover {

  transform: scale(1.012);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

}



.video-thumb-img {

  width: 100%;

  height: 380px;

  background-size: cover;

  background-position: center;

  transition: transform 0.6s ease;

}



.video-thumb:hover .video-thumb-img {

  transform: scale(1.04);

}



.vt-1 {

  background-image: url('../images/unsplash-11.jpg');

}



.vt-2 {

  background-image: url('../images/unsplash-12.jpg');

}



.vt-3 {

  background-image: url('../images/unsplash-13.jpg');

}



.vt-4 {

  background-image: url('../images/unsplash-14.jpg');

}



.video-play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  align-items: center;

  justify-content: center;

}



.play-circle {

  width: 76px;

  height: 76px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.92);

  color: #1C1A16;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 2;

  transition: transform 0.3s ease, background 0.3s ease;

  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.5);

}



.video-thumb:hover .play-circle {

  transform: scale(1.12);

  background: var(--sapphire);

}



.play-ring {

  position: absolute;

  border-radius: 50%;

  border: 2px solid rgba(212, 175, 55, 0.4);

  animation: play-ring-pulse 2.5s ease-out infinite;

}



.play-ring {

  width: 100px;

  height: 100px;

}



.play-ring-2 {

  width: 130px;

  height: 130px;

  animation-delay: 0.8s;

  border-color: rgba(212, 175, 55, 0.2);

}



@keyframes play-ring-pulse {

  0% {

    transform: scale(0.8);

    opacity: 1;

  }



  100% {

    transform: scale(1.4);

    opacity: 0;

  }

}



.video-meta-badge {

  position: absolute;

  top: 16px;

  left: 16px;

  display: flex;

  gap: 8px;

}



.vbadge-duration,

.vbadge-level {

  background: rgba(0, 0, 0, 0.65);

  color: #fff;

  font-size: 0.72rem;

  font-weight: 600;

  padding: 4px 10px;

  border-radius: 20px;

  backdrop-filter: blur(6px);

}



.vbadge-level.beginner {

  background: rgba(60, 140, 60, 0.8);

}



.video-overlay-text {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 40px 24px 24px;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);

}



.video-overlay-text h3 {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: #fff;

  margin-bottom: 4px;

}



.video-overlay-text p {

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.65);

}



/* Video sidebar */

.vsidebar-eyebrow {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 16px;

  display: block;

}



.video-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.vlist-item {

  display: flex;

  gap: 14px;

  align-items: center;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 12px;

  cursor: pointer;

  transition: all var(--transition);

}



.vlist-item:hover {

  border-color: var(--sapphire);

  transform: translateX(4px);

}



.vlist-thumb {

  width: 72px;

  height: 52px;

  border-radius: 8px;

  flex-shrink: 0;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

}



.vlist-item:hover .vlist-thumb {

  transform: scale(1.04);

}



.vlist-play {

  position: relative;

  z-index: 1;

  color: #fff;

  font-size: 1rem;

  background: rgba(212, 175, 55, 0.85);

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  padding-left: 2px;

}



.vlist-info h4 {

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 3px;

}



.vlist-info span {

  font-size: 0.75rem;

  color: var(--text-muted);

}



/* ── DIY KITS SECTION ── */

.kits-section {

  background: var(--bg);

}



.kits-scroll-wrapper {

  position: relative;

  overflow: hidden;

  padding: 20px 0;

}



.kits-scroll-inner {

  display: flex;

  gap: 24px;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 20px 48px;

  scroll-snap-type: x mandatory;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.kits-scroll-inner::-webkit-scrollbar {

  display: none;

}



.kit-card {

  flex: 0 0 280px;

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  scroll-snap-align: start;

  transition: transform var(--transition), box-shadow var(--transition);

}



.kit-card:hover {

  transform: translateY(-8px) scale(1.01);

  box-shadow: var(--shadow-lg), 0 0 0 2px var(--sapphire-glow);

}



.kit-img {

  height: 240px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transition: transform 0.5s ease;

}



.kit-card:hover .kit-img {

  transform: scale(1.03);

}



.ki-1 {

  background-image: url('../images/Bracelet\ Kit.jpeg');

}



.ki-2 {

  background-image: url('../images/Wire\ Wrap\ Pendant\ Kit.jpeg');

}



.ki-3 {

  background-image: url('../images/Resin\ Jewelry\ Kit.jpg');

}



.ki-4 {

  background-image: url('../images/Macramé\ Earring\ Kit.jpg');

}



.ki-5 {

  background-image: url('../images/Gold\ Chain\ Kit.jpeg');

}



.kit-icon-overlay {

  font-size: 3.5rem;

  opacity: 0.85;

  position: relative;

  z-index: 1;

  transition: transform 0.4s ease;

}



.kit-card:hover .kit-icon-overlay {

  transform: scale(1.15) rotate(-5deg);

}



.kit-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 2;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  padding: 4px 10px;

  border-radius: 20px;

}



.badge-beginner {

  background: rgba(60, 160, 60, 0.9);

  color: #fff;

}



.badge-popular {

  background: var(--sapphire);

  color: var(--black);

}



.kit-body {

  padding: 20px;

}



.kit-body h3 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 8px;

}



.kit-body p {

  font-size: 0.85rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 16px;

}



.kits-scroll-left {

  left: 8px;

}



.kits-scroll-right {

  right: 8px;

}



/* ── HOW IT WORKS 2 ── */

.how2-section {

  background: var(--bg-2);

}



.how2-steps {

  position: relative;

}



.how2-step {

  position: relative;

  overflow: hidden;

  padding: 0;

  text-align: left;

}



/* Image banner at top of each step card */

.how2-step-img {

  position: relative;

  width: 100%;

  height: 200px;

  overflow: hidden;

  border-radius: var(--radius) var(--radius) 0 0;

}



.how2-step-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  transition: transform 0.5s ease;

}



.how2-step:hover .how2-step-img img {

  transform: scale(1.06);

}



.how2-step-num {

  font-family: var(--font-display);

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

  line-height: 1;

  position: absolute;

  bottom: 12px;

  right: 16px;

  background: var(--sapphire);

  width: 44px;

  height: 44px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.02em;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

  user-select: none;

  z-index: 2;

}



/* Body content below image */

.how2-step-body {

  padding: 28px 28px 32px;

  text-align: center;

}



.how2-icon {

  width: 88px;

  height: 88px;

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.06));

  border: 1.5px solid rgba(212, 175, 55, 0.35);

  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.1);

}



.how2-step:hover .how2-icon {

  background: var(--sapphire);

  color: var(--black);

  box-shadow: 0 8px 32px var(--sapphire-glow);

  transform: scale(1.1);

}



.how2-step-tag {

  display: inline-block;

  margin-top: 14px;

  background: rgba(212, 175, 55, 0.1);

  border: 1px solid rgba(212, 175, 55, 0.25);

  color: var(--sapphire);

  font-size: 0.78rem;

  font-weight: 600;

  padding: 4px 14px;

  border-radius: 20px;

  letter-spacing: 0.03em;

  transition: all var(--transition);

}



.how2-step:hover .how2-step-tag {

  background: rgba(212, 175, 55, 0.2);

}



/* Animated entrance for steps */

.how2-step.visible {

  animation: step-pop 0.6s ease forwards;

}



@keyframes step-pop {

  0% {

    transform: translateY(30px) scale(0.96);

    opacity: 0;

  }



  100% {

    transform: translateY(0) scale(1);

    opacity: 1;

  }

}



/* ── BEGINNER FRIENDLY ── */

.beginner-section {

  background: var(--bg);

  overflow: hidden;

}



.beginner-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

  align-items: center;

}



@media (max-width: 900px) {

  .beginner-layout {

    grid-template-columns: 1fr;

    gap: 40px;

  }

}



.beginner-perks {

  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-top: 32px;

}



.beginner-perk {

  display: flex;

  gap: 16px;

  align-items: flex-start;

  padding: 16px;

  border-radius: var(--radius);

  background: var(--bg-2);

  border: 1px solid var(--border);

  transition: all var(--transition);

}



.beginner-perk:hover {

  border-color: var(--sapphire);

  transform: translateX(4px);

}



.perk-icon {

  font-size: 1.6rem;

  flex-shrink: 0;

  margin-top: 2px;

}



.beginner-perk strong {

  display: block;

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 3px;

}



.beginner-perk span {

  font-size: 0.85rem;

  color: var(--text-muted);

  line-height: 1.5;

}



/* Card stack visual */

.beginner-visual {

  display: flex;

  align-items: center;

  justify-content: center;

}



.beginner-card-stack {

  display: flex;

  flex-direction: column;

  gap: 16px;

  width: 100%;

  max-width: 340px;

}



.bcard {

  position: relative;

  width: 100%;

  padding: 18px 22px;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  display: flex;

  align-items: center;

  gap: 14px;

  text-align: left;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.bcard:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--sapphire-glow);

}



.bcard-icon {

  font-size: 2rem;

  flex-shrink: 0;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(212, 175, 55, 0.1);

  border-radius: 12px;

}



.bcard strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 4px;

}



.bcard span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



.bcard-1 {

  border-left: 3px solid var(--sapphire);

}



.bcard-2 {

  border-left: 3px solid rgba(212, 175, 55, 0.6);

}



.bcard-3 {

  border-left: 3px solid rgba(212, 175, 55, 0.3);

}



.beginner-rating {

  margin-top: 4px;

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.03));

  border: 1px solid rgba(212, 175, 55, 0.2);

  border-radius: var(--radius);

  padding: 14px 18px;

  box-shadow: var(--shadow);

  text-align: center;

}



.br-stars {

  color: var(--sapphire);

  font-size: 1rem;

  margin-bottom: 4px;

}



.beginner-rating span {

  font-size: 0.75rem;

  color: var(--text-muted);

  white-space: nowrap;

}



@media (max-width: 480px) {

  .beginner-card-stack {

    width: 260px;

    height: 320px;

  }



  .bcard {

    width: 180px;

    padding: 16px;

  }

}



/* ── COMMUNITY RESULTS ── */

.community-section {

  background: var(--bg-2);

}



.community-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



@media (max-width: 1100px) {

  .community-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .community-grid {

    grid-template-columns: 1fr;

  }

}



.community-card {

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}



.community-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.community-images {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 12px;

}



.comm-img {

  flex: 1;

  height: 130px;

  border-radius: 8px;

  position: relative;

  overflow: hidden;

  transition: transform 0.4s ease;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  background-color: var(--platinum-3);

}



.community-card:hover .comm-after {

  transform: scale(1.05);

}



.comm-label {

  position: absolute;

  bottom: 6px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.6);

  color: #fff;

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 2px 8px;

  border-radius: 10px;

  white-space: nowrap;

}



.comm-arrow {

  color: var(--sapphire);

  font-size: 1.2rem;

  flex-shrink: 0;

}



/* Before/After image gradients */

/* Crystal Bracelet */

.cb-1 {

  background-image: url('../images/pexels-photo-10403920.jpeg');

}



.ca-1 {

  background-image: url('../images/Bracelet Kit.jpeg');

}



/* Wire Pendant */

.cb-2 {

  background-image: url('../images/pexels-photo-10474312.jpeg');

  background-position: top center;

}



.ca-2 {

  background-image: url('../images/Wire\ Wrap\ Pendant\ Kit.jpeg');

}



/* Resin Ring */

.cb-3 {

  background-image: url('../images/Resin Jewelry Kit.jpg');

}



.ca-3 {

  background-image: url('../images/unsplash-24.jpg');

}



/* Macramé Earrings */

.cb-4 {

  background-image: url('../images/Polishing\ &\ Finishing\ Kit.jpeg');

}



.ca-4 {

  background-image: url('../images/pexels-the-glorious-studio-3584518-10976654.jpg');

}



.community-info {

  padding: 12px 16px 16px;

  border-top: 1px solid var(--border);

}



.community-info strong {

  display: block;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 3px;

}



.community-info span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



/* ── LEARNING CATEGORIES ── */

.categories-section {

  background: var(--bg);

}



.categories-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



@media (max-width: 900px) {

  .categories-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 560px) {

  .categories-grid {

    grid-template-columns: 1fr;

  }

}



.cat-card {

  display: block;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 28px 24px;

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.cat-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: var(--sapphire);

}



.cat-icon-wrap {

  width: 70px;

  height: 70px;

  border-radius: 18px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 18px;

  overflow: hidden;

}



.cat-bg-shape {

  position: absolute;

  inset: 0;

  border-radius: 18px;

  opacity: 0.2;

  transition: opacity var(--transition);

}



.cat-card:hover .cat-bg-shape {

  opacity: 0.35;

}



.cat-emoji {

  font-size: 2rem;

  position: relative;

  z-index: 1;

  transition: transform 0.3s ease;

}



.cat-card:hover .cat-emoji {

  transform: scale(1.2) rotate(-5deg);

}



.cat-beading .cat-bg-shape {

  background: linear-gradient(135deg, #D480A0, #D4AF37);

}



.cat-resin .cat-bg-shape {

  background: linear-gradient(135deg, #7060D0, #4080C0);

}



.cat-wire .cat-bg-shape {

  background: linear-gradient(135deg, #50A070, #80C050);

}



.cat-macrame .cat-bg-shape {

  background: linear-gradient(135deg, #D08050, #D4AF37);

}



.cat-metal .cat-bg-shape {

  background: linear-gradient(135deg, #8090A0, #C0A080);

}



.cat-gems .cat-bg-shape {

  background: linear-gradient(135deg, #70A0D0, #A060D0);

}



.cat-card h3 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 10px;

}



.cat-card p {

  font-size: 0.85rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 16px;

}



.cat-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.8rem;

  color: var(--sapphire);

  font-weight: 600;

}



.cat-arrow {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.1);

  border: 1px solid rgba(212, 175, 55, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

}



.cat-card:hover .cat-arrow {

  background: var(--sapphire);

  color: var(--black);

  border-color: var(--sapphire);

}



/* ── TESTIMONIALS 2 (Grid style) ── */

.testimonials2-section {

  background: var(--bg-2);

}



.testimonials2-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;

}



@media (max-width: 768px) {

  .testimonials2-grid {

    grid-template-columns: 1fr;

  }

}



.t2-card {

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 28px;

  box-shadow: var(--shadow);

  position: relative;

  transition: transform var(--transition), box-shadow var(--transition);

}



.t2-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



.t2-card-featured {

  border-color: var(--sapphire);

  background: linear-gradient(135deg, var(--bg-card), rgba(212, 175, 55, 0.04));

}



.t2-stars {

  color: var(--sapphire);

  font-size: 1rem;

  margin-bottom: 14px;

  letter-spacing: 2px;

}



.t2-quote {

  font-family: var(--font-display);

  font-size: 1.05rem;

  font-style: italic;

  color: var(--text);

  line-height: 1.7;

  margin-bottom: 20px;

}



.t2-author {

  display: flex;

  align-items: center;

  gap: 12px;

}



.t2-author strong {

  display: block;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 2px;

}



.t2-author span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



.t2-featured-badge {

  position: absolute;

  top: 20px;

  right: 20px;

  background: var(--sapphire);

  color: var(--black);

  font-size: 0.68rem;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 20px;

}



/* ── CTA 2 ── */

.cta2-banner {

  position: relative;

  overflow: hidden;

}



.cta2-float-els {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.cta2-float {

  position: absolute;

  font-size: 2.5rem;

  opacity: 0.07;

  animation: float-gem-anim 12s ease-in-out infinite;

}



.cta2-float:nth-child(1) {

  top: 20%;

  left: 6%;

  animation-delay: 0s;

  font-size: 3rem;

}



.cta2-float:nth-child(2) {

  top: 60%;

  right: 8%;

  animation-delay: -4s;

}



.cta2-float:nth-child(3) {

  bottom: 15%;

  left: 45%;

  animation-delay: -8s;

  font-size: 2rem;

}



.cta2-inner {

  text-align: center;

  position: relative;

  z-index: 1;

}



.cta2-features {

  display: flex;

  gap: 24px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 40px;

  margin-top: -16px;

}



.cta2-features span {

  font-size: 0.85rem;

  color: rgba(240, 234, 214, 0.65);

  background: rgba(212, 175, 55, 0.1);

  border: 1px solid rgba(212, 175, 55, 0.2);

  padding: 6px 16px;

  border-radius: 20px;

}



/* ── Responsive Fixes for index2 ── */

@media (max-width: 768px) {

  .video-layout {

    grid-template-columns: 1fr;

  }



  .video-thumb-img {

    height: 220px;

  }



  .video-sidebar {

    display: none;

  }



  .kits-scroll-inner {

    padding: 20px 24px;

  }



  .beginner-visual {

    display: none;

  }



  .community-grid {

    grid-template-columns: 1fr 1fr;

  }



  .categories-grid {

    grid-template-columns: 1fr 1fr;

  }



  .testimonials2-grid {

    grid-template-columns: 1fr;

  }



  .cta2-features {

    flex-direction: column;

    align-items: center;

    gap: 10px;

  }

}



@media (max-width: 480px) {

  .community-grid {

    grid-template-columns: 1fr;

  }



  .categories-grid {

    grid-template-columns: 1fr;

  }



  .hero2-content {

    padding: 110px 20px 70px;

  }



  .trust-item {

    padding: 4px 10px;

    font-size: 0.8rem;

  }

}



/* ============================================================

   AURUM STUDIO — pages.css

   Styles shared across all inner pages

   ============================================================ */



/* ── PAGE HERO ── */

.page-hero {

  position: relative;

  min-height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-image: url('../images/hero-bg-2.png');

  background-size: cover;

  background-position: center;

  overflow: hidden;

  padding-top: 80px;

}



.page-hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(10, 9, 6, 0.85) 0%, rgba(10, 9, 6, 0.45) 60%, rgba(10, 9, 6, 0.3) 100%);

}



.page-hero-content {

  position: relative;

  z-index: 1;

  text-align: center;

  padding: 0 24px;

  max-width: 760px;

}



.page-hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.8rem, 7vw, 5.5rem);

  font-weight: 300;

  color: var(--platinum);

  line-height: 1.1;

  margin-bottom: 16px;

}



.page-hero-title em {

  font-style: italic;

  color: var(--sapphire);

}



.page-hero-sub {

  font-size: clamp(0.95rem, 2vw, 1.1rem);

  color: rgba(240, 234, 214, 0.75);

  line-height: 1.7;

  margin-bottom: 28px;

}



.page-hero-pills {

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

}



.pill {

  padding: 7px 18px;

  border-radius: 24px;

  border: 1px solid rgba(212, 175, 55, 0.45);

  color: var(--sapphire);

  font-size: 0.8rem;

  font-weight: 500;

  transition: all var(--transition);

}



.pill:hover {

  background: var(--sapphire);

  color: var(--black);

}



/* ── FILTER BAR ── */

.filter-bar-section {

  padding: 28px 0;

  background: var(--bg);

  border-bottom: 1px solid var(--border);

}



.filter-bar {

  display: flex;

  gap: 24px;

  flex-wrap: wrap;

  align-items: center;

}



.filter-group {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.filter-label {

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.filter-btn {

  padding: 6px 16px;

  border-radius: 20px;

  border: 1px solid var(--border);

  font-size: 0.82rem;

  font-weight: 500;

  color: var(--text-muted);

  background: transparent;

  transition: all var(--transition);

  cursor: pointer;

}



.filter-btn:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.filter-btn.active {

  background: var(--sapphire);

  color: var(--black);

  border-color: var(--sapphire);

}



/* ── WORKSHOPS GRID 3-COL ── */

.workshops-grid-3 {

  grid-template-columns: repeat(3, 1fr);

}



@media (max-width: 900px) {

  .workshops-grid-3 {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .workshops-grid-3 {

    grid-template-columns: 1fr;

  }

}



/* Card features list */

.card-features {

  margin: 8px 0 16px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.card-features li {

  font-size: 0.8rem;

  color: var(--text-muted);

}



/* ── PRIVATE SECTION ── */

.private-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}



@media (max-width: 768px) {

  .private-grid {

    grid-template-columns: 1fr;

  }

}



.private-card {

  border-radius: var(--radius-lg);

  overflow: hidden;

  background: var(--bg-card);

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

}



.private-img {

  height: 280px;

  background-size: cover;

  background-position: center;

}



.private-body {

  padding: 32px;

}



.private-body h3 {

  font-family: var(--font-display);

  font-size: 1.8rem;

  font-weight: 600;

  color: var(--text);

  margin: 12px 0;

}



.private-body p {

  color: var(--text-muted);

  line-height: 1.7;

  margin-bottom: 20px;

}



.private-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 20px;

}



.private-list li {

  font-size: 0.9rem;

  color: var(--text-muted);

}



.private-price {

  font-family: var(--font-display);

  font-size: 1.2rem;

  color: var(--text-muted);

  margin-bottom: 20px;

}



.private-price strong {

  color: var(--sapphire);

  font-size: 1.6rem;

}



/* ── SCHEDULE TABLE ── */

.schedule-table {

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow);

}



.schedule-row {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr auto;

  align-items: center;

  gap: 12px;

  padding: 16px 24px;

  border-bottom: 1px solid var(--border);

  background: var(--bg-card);

  transition: background var(--transition);

}



.schedule-row:last-child {

  border-bottom: none;

}



.schedule-row:hover:not(.schedule-header-row) {

  background: rgba(212, 175, 55, 0.05);

}



.schedule-header-row {

  background: var(--bg-2);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.schedule-row span {

  font-size: 0.9rem;

  color: var(--text);

}



.spots {

  font-size: 0.82rem;

  color: #4a9a4a;

  font-weight: 600;

}



.spots.urgent {

  color: #c0392b;

}



@media (max-width: 768px) {

  .schedule-row {

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }



  .schedule-header-row {

    display: none;

  }

}



/* ── FAQ ── */

.faq-list {

  max-width: 760px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.faq-item {

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

  background: var(--bg-card);

}



.faq-q {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 24px;

  text-align: left;

  font-size: 1rem;

  font-weight: 500;

  color: var(--text);

  cursor: pointer;

  background: none;

  transition: color var(--transition);

}



.faq-q:hover {

  color: var(--sapphire);

}



.faq-arrow {

  font-size: 1.4rem;

  color: var(--sapphire);

  transition: transform var(--transition);

  flex-shrink: 0;

}



.faq-item.open .faq-arrow {

  transform: rotate(45deg);

}



.faq-a {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease, padding 0.3s ease;

  padding: 0 24px;

}



.faq-a p {

  color: var(--text-muted);

  line-height: 1.7;

  font-size: 0.95rem;

}



.faq-item.open .faq-a {

  max-height: 200px;

  padding: 0 24px 20px;

}



/* ── SHOP PRODUCT GRID ── */

.shop-product-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



@media (max-width: 1000px) {

  .shop-product-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 500px) {

  .shop-product-grid {

    grid-template-columns: 1fr;

  }

}



.bg-2-section {

  background: var(--bg-2);

}



.product-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  border: 1px solid var(--border);

  overflow: hidden;

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}



.product-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.product-img-wrap {

  position: relative;

  height: 220px;

  overflow: hidden;

}



.product-img {

  width: 100%;

  height: 100%;

  transition: transform 0.5s ease;

}



.product-card:hover .product-img {

  transform: scale(1.06);

}



.product-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  background: var(--sapphire);

  color: var(--black);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  padding: 4px 10px;

  border-radius: 20px;

}



.product-badge.badge-gold {

  background: linear-gradient(135deg, #D4AF37, #F0D060);

}



.product-wishlist {

  position: absolute;

  top: 12px;

  right: 12px;

  width: 34px;

  height: 34px;

  border-radius: 50%;

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

  color: #999;

  font-size: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

  backdrop-filter: blur(4px);

}



.product-wishlist:hover {

  color: #e74c3c;

  background: white;

}



.product-info {

  padding: 16px;

}



.product-cat {

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 6px;

  display: block;

}



.product-info h4 {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 8px;

  line-height: 1.3;

}



.product-info p {

  font-size: 0.82rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 14px;

}



.product-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.product-price {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--sapphire);

}



.btn-add-cart {

  padding: 8px 16px;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 600;

  background: var(--sapphire);

  color: var(--black);

  border: none;

  cursor: pointer;

  transition: all var(--transition);

}



.btn-add-cart:hover {

  background: var(--sapphire-dark);

  transform: scale(1.04);

}



/* ── SHOP BANNER STRIP ── */

.shop-banner-strip {

  background: var(--sapphire);

  padding: 12px 0;

}



.banner-strip-inner {

  display: flex;

  gap: 32px;

  justify-content: center;

  flex-wrap: wrap;

}



.banner-strip-inner span {

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--black);

  letter-spacing: 0.03em;

}



/* ── CART TOAST ── */

.cart-toast {

  position: fixed;

  bottom: 32px;

  right: 32px;

  z-index: 9999;

  background: var(--text-dark);

  color: white;

  padding: 14px 24px;

  border-radius: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.9rem;

  font-weight: 500;

  transform: translateY(100px);

  opacity: 0;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

}



.cart-toast.show {

  transform: translateY(0);

  opacity: 1;

}



.toast-icon {

  color: var(--sapphire);

  font-size: 1.1rem;

}



/* ── GALLERY FULL ── */

.gallery-full-section {

  background: var(--bg);

}



.gallery-masonry-full {

  columns: 4;

  column-gap: 14px;

}



@media (max-width: 1000px) {

  .gallery-masonry-full {

    columns: 3;

  }

}



@media (max-width: 650px) {

  .gallery-masonry-full {

    columns: 2;

  }

}



@media (max-width: 400px) {

  .gallery-masonry-full {

    columns: 1;

  }

}



.gal-item {

  break-inside: avoid;

  margin-bottom: 14px;

  border-radius: var(--radius);

  overflow: hidden;

  position: relative;

  cursor: pointer;

}



.gal-item.tall .gal-img {

  height: 340px;

}



.gal-img {

  height: 220px;

  width: 100%;

  transition: transform 0.5s ease;

}



.gal-item:hover .gal-img {

  transform: scale(1.06);

}



.gal-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 55%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 16px;

  opacity: 0;

  transition: opacity var(--transition);

}



.gal-item:hover .gal-overlay {

  opacity: 1;

}



.gal-title {

  color: white;

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 600;

}



.gal-author {

  color: var(--sapphire);

  font-size: 0.8rem;

  font-style: italic;

}



.gal-workshop {

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.72rem;

  margin-top: 2px;

}



/* ── LIGHTBOX ── */

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 10000;

  background: rgba(0, 0, 0, 0.93);

  backdrop-filter: blur(10px);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

}



.lightbox.open {

  opacity: 1;

  visibility: visible;

}



.lightbox-close {

  position: absolute;

  top: 24px;

  right: 24px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

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

  color: white;

  font-size: 1.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

  cursor: pointer;

}



.lightbox-close:hover {

  background: var(--sapphire);

  color: var(--black);

  border-color: var(--sapphire);

}



.lightbox-inner {

  display: flex;

  gap: 32px;

  align-items: center;

  max-width: 900px;

  padding: 24px;

}



.lightbox-img {

  width: 520px;

  height: 420px;

  border-radius: var(--radius-lg);

  background-size: cover;

  background-position: center;

  flex-shrink: 0;

}



.lightbox-info {

  color: white;

}



.lightbox-info h3 {

  font-family: var(--font-display);

  font-size: 2rem;

  font-weight: 300;

  margin-bottom: 8px;

}



.lightbox-info p {

  color: var(--sapphire);

  font-style: italic;

  margin-bottom: 8px;

}



.lightbox-info span {

  font-size: 0.8rem;

  color: rgba(255, 255, 255, 0.5);

}



@media (max-width: 768px) {

  .lightbox-inner {

    flex-direction: column;

  }



  .lightbox-img {

    width: 100%;

    height: 260px;

  }

}



/* ── SUBMIT SECTION ── */

.submit-card {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow-lg);

  background: var(--bg-card);

}



.submit-text {

  padding: 56px 48px;

}



.submit-text p {

  color: var(--text-muted);

  line-height: 1.7;

  margin-top: 16px;

}



.submit-img {

  min-height: 380px;

  background-size: cover;

  background-position: center;

}



@media (max-width: 768px) {

  .submit-card {

    grid-template-columns: 1fr;

  }



  .submit-text {

    padding: 32px 24px;

  }

}



/* ── LEARN PAGE ── */

.paths-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



@media (max-width: 900px) {

  .paths-grid {

    grid-template-columns: 1fr;

  }

}



.path-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  padding: 36px 28px;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}



.path-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.path-icon {

  font-size: 2.5rem;

  color: var(--sapphire);

  margin-bottom: 12px;

  display: block;

}



.path-level-tag {

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 3px 10px;

  border-radius: 20px;

  display: inline-block;

  margin-bottom: 12px;

}



.path-level-tag.beginner {

  background: rgba(100, 180, 100, 0.15);

  color: #4a9a4a;

}



.path-level-tag.intermediate {

  background: rgba(180, 140, 50, 0.15);

  color: #a07020;

}



.path-level-tag.advanced {

  background: rgba(180, 60, 60, 0.15);

  color: #a03030;

}



.path-card h3 {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 10px;

}



.path-card p {

  font-size: 0.9rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 20px;

}



.path-steps {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 24px;

}



.path-steps li {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.85rem;

  color: var(--text);

}



.path-steps li span {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.15);

  color: var(--sapphire);

  font-size: 0.75rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.guides-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



@media (max-width: 900px) {

  .guides-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 580px) {

  .guides-grid {

    grid-template-columns: 1fr;

  }

}



.guide-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}



.guide-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.guide-img {

  height: 180px;

  background-size: cover;

  background-position: center;

  transition: transform 0.5s ease;

}



.guide-card:hover .guide-img {

  transform: scale(1.05);

}



.guide-body {

  padding: 20px;

}



.guide-tag {

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 3px 10px;

  border-radius: 20px;

  display: inline-block;

  margin-bottom: 10px;

}



.guide-body h3 {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 8px;

  line-height: 1.3;

}



.guide-body p {

  font-size: 0.83rem;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 14px;

}



.guide-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.guide-meta span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



.video-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}



@media (max-width: 768px) {

  .video-grid {

    grid-template-columns: 1fr;

  }

}



.video-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

}



.video-thumb {

  height: 200px;

  position: relative;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}



.play-btn {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.9);

  color: var(--black);

  font-size: 1.3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

  backdrop-filter: blur(4px);

  padding-left: 4px;

}



.play-btn:hover {

  background: var(--sapphire);

  transform: scale(1.1);

}



.video-duration {

  position: absolute;

  bottom: 10px;

  right: 12px;

  background: rgba(0, 0, 0, 0.7);

  color: white;

  font-size: 0.75rem;

  padding: 3px 8px;

  border-radius: 4px;

}



.video-info {

  padding: 18px;

}



.video-info h4 {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--text);

  margin: 8px 0 6px;

}



.video-info p {

  font-size: 0.83rem;

  color: var(--text-muted);

  line-height: 1.6;

}



.newsletter-section {

  background: var(--bg-2);

}



.newsletter-card {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

  align-items: center;

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  padding: 56px 64px;

  border: 1px solid var(--border);

  box-shadow: var(--shadow-lg);

}



@media (max-width: 768px) {

  .newsletter-card {

    grid-template-columns: 1fr;

    gap: 32px;

    padding: 32px 24px;

  }

}



.nl-input {

  width: 100%;

  padding: 14px 18px;

  border-radius: 10px;

  border: 1px solid var(--border);

  background: var(--bg);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.95rem;

  margin-bottom: 12px;

  transition: border-color var(--transition), box-shadow var(--transition);

}



.nl-input:focus {

  outline: none;

  border-color: var(--sapphire);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

}



.nl-disclaimer {

  font-size: 0.75rem;

  color: var(--text-muted);

  margin-top: 12px;

  text-align: center;

}



/* ── ABOUT PAGE ── */

.story-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 64px;

  align-items: center;

}



@media (max-width: 768px) {

  .story-grid {

    grid-template-columns: 1fr;

  }

}



.story-text p {

  color: var(--text-muted);

  line-height: 1.8;

  font-size: 0.95rem;

}



.story-img {

  height: 480px;

  border-radius: var(--radius-lg);

  background-size: cover;

  background-position: center;

  box-shadow: var(--shadow-lg);

}



.about-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-top: 36px;

}



@media (max-width: 600px) {

  .about-stats {

    grid-template-columns: repeat(2, 1fr);

  }

}



.about-stat {

  text-align: center;

  background: var(--bg-2);

  border-radius: var(--radius);

  padding: 16px 8px;

  border: 1px solid var(--border);

}



.about-stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.8rem;

  font-weight: 600;

  color: var(--sapphire);

}



.about-stat span {

  font-size: 0.75rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.values-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



@media (max-width: 900px) {

  .values-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 500px) {

  .values-grid {

    grid-template-columns: 1fr;

  }

}



.value-card {

  background: var(--bg-card);

  padding: 32px 24px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  transition: transform var(--transition), box-shadow var(--transition);

}



.value-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.value-icon {

  font-size: 2rem;

  color: var(--sapphire);

  margin-bottom: 16px;

  display: block;

}



.value-card h3 {

  font-family: var(--font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 10px;

}



.value-card p {

  font-size: 0.88rem;

  color: var(--text-muted);

  line-height: 1.7;

}



.team-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



@media (max-width: 900px) {

  .team-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 500px) {

  .team-grid {

    grid-template-columns: 1fr;

  }

}



.team-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  transition: transform var(--transition);

}



.team-card:hover {

  transform: translateY(-6px);

}



.team-img {

  height: 260px;

  background-size: cover;

  background-position: center top;

}



.team-info {

  padding: 20px;

}



.team-info h4 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 4px;

}



.team-info span {

  font-size: 0.78rem;

  color: var(--sapphire);

  font-weight: 500;

  letter-spacing: 0.03em;

  display: block;

  margin-bottom: 10px;

}



.team-info p {

  font-size: 0.83rem;

  color: var(--text-muted);

  line-height: 1.6;

}



.studio-photos-grid {

  columns: 3;

  column-gap: 14px;

}



@media (max-width: 768px) {

  .studio-photos-grid {

    columns: 2;

  }

}



.studio-photo {

  break-inside: avoid;

  margin-bottom: 14px;

  border-radius: var(--radius);

  height: 220px;

  background-size: cover;

  background-position: center;

}



.studio-photo.tall {

  height: 340px;

}



.press-section {

  background: var(--bg);

}



.press-logos {

  display: flex;

  gap: 40px;

  justify-content: center;

  flex-wrap: wrap;

  align-items: center;

  padding: 20px 0;

}



.press-logo {

  font-family: var(--font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.05em;

  opacity: 0.6;

  transition: opacity var(--transition);

}



.press-logo:hover {

  opacity: 1;

  color: var(--sapphire);

}



/* ── CONTACT PAGE ── */

.contact-section {

  padding-top: 80px;

  padding-bottom: 80px;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 56px;

  align-items: start;

}



@media (max-width: 900px) {

  .contact-grid {

    grid-template-columns: 1fr;

  }

}



.contact-form-title {

  font-family: var(--font-display);

  font-size: 2.2rem;

  font-weight: 300;

  color: var(--text);

  margin-bottom: 8px;

}



.contact-form-title em {

  font-style: italic;

  color: var(--sapphire);

}



.contact-form-sub {

  color: var(--text-muted);

  margin-bottom: 28px;

}



.contact-tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 28px;

  flex-wrap: wrap;

}



.ctab {

  padding: 8px 18px;

  border-radius: 24px;

  border: 1px solid var(--border);

  font-size: 0.82rem;

  font-weight: 500;

  color: var(--text-muted);

  background: transparent;

  cursor: pointer;

  transition: all var(--transition);

}



.ctab.active {

  background: var(--sapphire);

  color: var(--black);

  border-color: var(--sapphire);

}



.ctab:hover:not(.active) {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.contact-form.hidden {

  display: none;

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



@media (max-width: 480px) {

  .form-row {

    grid-template-columns: 1fr;

  }

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.form-group label {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.04em;

}



.form-input {

  padding: 13px 16px;

  border-radius: 10px;

  border: 1px solid var(--border);

  background: var(--bg);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.95rem;

  transition: border-color var(--transition), box-shadow var(--transition);

}



.form-input:focus {

  outline: none;

  border-color: var(--sapphire);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

}



.form-select {

  cursor: pointer;

}



.form-textarea {

  height: 140px;

  resize: vertical;

}



.form-success {

  display: none;

  text-align: center;

  padding: 40px 20px;

}



.form-success.show {

  display: block;

}



.success-icon {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: rgba(100, 180, 100, 0.15);

  color: #4a9a4a;

  font-size: 1.8rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 16px;

}



.form-success h3 {

  font-family: var(--font-display);

  font-size: 1.8rem;

  color: var(--text);

  margin-bottom: 8px;

}



.form-success p {

  color: var(--text-muted);

}



.contact-info {

  display: flex;

  flex-direction: column;

  gap: 28px;

}



.info-block h4 {

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 10px;

}



.info-block p {

  color: var(--text-muted);

  line-height: 1.7;

  font-size: 0.95rem;

}



.info-block a {

  color: var(--text);

  transition: color var(--transition);

}



.info-block a:hover {

  color: var(--sapphire);

}



.hours-table {

  width: 100%;

  border-collapse: collapse;

}



.hours-table td {

  padding: 5px 0;

  font-size: 0.9rem;

  color: var(--text-muted);

}



.hours-table td:last-child {

  text-align: right;

  color: var(--text);

}



.contact-studio-img {

  height: 200px;

  border-radius: var(--radius-lg);

  background-size: cover;

  background-position: center;

}



.map-section {

  height: 400px;

  position: relative;

  overflow: hidden;

}



.map-bg {

  position: absolute;

  inset: 0;

}



.map-placeholder {

  position: relative;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.map-pin {

  position: relative;

  z-index: 2;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 20px 28px;

  text-align: center;

  box-shadow: var(--shadow-lg);

}



.map-pin span {

  display: block;

  font-size: 1.5rem;

  color: var(--sapphire);

  margin-bottom: 6px;

}



.map-pin strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.2rem;

  color: var(--text);

}



.map-pin p {

  font-size: 0.85rem;

  color: var(--text-muted);

  margin-top: 4px;

}





/* ============================================================

   AUTH PAGES — Login & Signup

   ============================================================ */



/* ── Auth Page Body ── */

.auth-page {

  cursor: auto;

  min-height: 100vh;

}



/* ── Auth Main Layout ── */

.auth-main {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 100vh;

  padding-top: 76px;

}



/* ── Decorative Left Panel ── */

.auth-panel--left {

  position: relative;

  background: linear-gradient(135deg, var(--text-dark) 0%, #2C2820 50%, #1C1810 100%);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 60px 52px;

  min-height: calc(100vh - 76px);

}



[data-theme="dark"] .auth-panel--left {

  background: linear-gradient(135deg, #0C0B09 0%, #18150F 50%, #100E08 100%);

}



.auth-panel-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),

    radial-gradient(ellipse at 80% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);

  pointer-events: none;

}



.auth-panel-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.auth-panel-content {

  position: relative;

  z-index: 2;

  color: var(--platinum);

  max-width: 400px;

}



.auth-panel-eyebrow {

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--sapphire);

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.auth-panel-eyebrow::before {

  content: '';

  display: inline-block;

  width: 30px;

  height: 1px;

  background: var(--sapphire);

}



.auth-panel-title {

  font-family: var(--font-display);

  font-size: clamp(2.4rem, 4vw, 3.2rem);

  font-weight: 300;

  line-height: 1.15;

  color: var(--platinum);

  margin-bottom: 20px;

}



.auth-panel-title em {

  font-style: italic;

  color: var(--sapphire);

}



.auth-panel-sub {

  font-size: 0.9rem;

  color: rgba(250, 246, 238, 0.65);

  line-height: 1.75;

  margin-bottom: 36px;

}



/* Panel Stats */

.auth-panel-stats {

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 20px 24px;

  background: rgba(212, 175, 55, 0.08);

  border: 1px solid rgba(212, 175, 55, 0.2);

  border-radius: var(--radius);

  backdrop-filter: blur(8px);

  margin-bottom: 36px;

}



.auth-stat {

  text-align: center;

}



.auth-stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--sapphire);

  line-height: 1.1;

}



.auth-stat span {

  font-size: 0.72rem;

  color: rgba(250, 246, 238, 0.55);

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.auth-stat-divider {

  width: 1px;

  height: 36px;

  background: rgba(212, 175, 55, 0.25);

}



/* Benefits list (signup panel) */

.auth-benefits {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.auth-benefits li {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 0.9rem;

  color: rgba(250, 246, 238, 0.75);

}



.benefit-icon {

  color: var(--sapphire);

  font-size: 0.7rem;

  flex-shrink: 0;

}



/* Floating Gems */

.auth-panel-gems {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

}



.gem {

  position: absolute;

  color: var(--sapphire);

  opacity: 0.12;

  animation: gemFloat var(--dur, 8s) ease-in-out infinite;

  animation-delay: var(--delay, 0s);

}



.gem-1 {

  font-size: 4rem;

  top: 10%;

  right: 8%;

  --dur: 9s;

  --delay: 0s;

}



.gem-2 {

  font-size: 2rem;

  top: 35%;

  right: 20%;

  --dur: 7s;

  --delay: 1.5s;

  opacity: 0.18;

}



.gem-3 {

  font-size: 6rem;

  bottom: 15%;

  left: 5%;

  --dur: 11s;

  --delay: 0.5s;

}



.gem-4 {

  font-size: 1.5rem;

  bottom: 35%;

  right: 12%;

  --dur: 6s;

  --delay: 3s;

  opacity: 0.2;

}



.gem-5 {

  font-size: 3rem;

  top: 60%;

  left: 20%;

  --dur: 10s;

  --delay: 2s;

}



@keyframes gemFloat {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }



  33% {

    transform: translateY(-14px) rotate(5deg);

  }



  66% {

    transform: translateY(8px) rotate(-3deg);

  }

}



/* ── Right Form Panel ── */

.auth-panel--right {

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--bg);

  padding: 48px 32px;

  overflow-y: auto;

}



.auth-form-wrap {

  width: 100%;

  max-width: 460px;

}



/* Auth Logo (form panel) */

.auth-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 28px;

}



.auth-logo em {

  color: var(--sapphire);

  font-style: italic;

}



/* Auth Form Header */

.auth-form-header {

  margin-bottom: 28px;

}



.auth-title {

  font-family: var(--font-display);

  font-size: clamp(1.8rem, 3vw, 2.4rem);

  font-weight: 300;

  color: var(--text);

  margin-bottom: 8px;

  line-height: 1.2;

}



.auth-subtitle {

  font-size: 0.88rem;

  color: var(--text-muted);

}



.auth-link {

  color: var(--sapphire);

  font-weight: 500;

  transition: color var(--transition);

}



.auth-link:hover {

  color: var(--sapphire-dark);

}



/* Social Buttons */

.auth-social {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-bottom: 20px;

}



.btn-social {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 11px 14px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: var(--bg-card);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.82rem;

  font-weight: 500;

  cursor: pointer;

  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);

}



.btn-social:hover {

  border-color: var(--sapphire);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

  transform: translateY(-1px);

}



/* Divider */

.auth-divider {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

  color: var(--text-muted);

  font-size: 0.78rem;

  letter-spacing: 0.04em;

}



.auth-divider::before,

.auth-divider::after {

  content: '';

  flex: 1;

  height: 1px;

  background: var(--border);

}



/* Auth Form Fields */

.auth-form {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.form-label {

  display: block;

  font-size: 0.78rem;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.label-opt {

  font-weight: 400;

  text-transform: none;

  letter-spacing: 0;

  font-size: 0.75rem;

  color: var(--text-muted);

}



/* Input with icon */

.input-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.input-icon {

  position: absolute;

  left: 14px;

  font-size: 0.9rem;

  color: var(--text-muted);

  pointer-events: none;

  z-index: 1;

  line-height: 1;

}



.auth-input {

  width: 100%;

  padding: 13px 16px 13px 42px;

  border-radius: var(--radius);

  border: 1px solid var(--border);

  background: var(--bg-card);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.95rem;

  transition: border-color var(--transition), box-shadow var(--transition);

}



.auth-input:focus {

  outline: none;

  border-color: var(--sapphire);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

}



.auth-input.error {

  border-color: #c0392b;

}



.auth-input.success {

  border-color: #4a9a4a;

}



/* Eye toggle */

.btn-eye {

  position: absolute;

  right: 14px;

  background: none;

  border: none;

  cursor: pointer;

  color: var(--text-muted);

  padding: 4px;

  font-size: 1rem;

  line-height: 1;

  transition: color var(--transition);

}



.btn-eye:hover {

  color: var(--sapphire);

}



/* Field errors */

.field-error {

  display: block;

  font-size: 0.75rem;

  color: #c0392b;

  margin-top: 4px;

  min-height: 18px;

}



/* Auth options row */

.auth-options {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.forgot-link {

  font-size: 0.82rem;

}



/* Custom checkbox */

.checkbox-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  user-select: none;

}



.checkbox-wrap input[type="checkbox"] {

  position: absolute;

  opacity: 0;

  width: 0;

  height: 0;

}



.checkmark {

  width: 18px;

  height: 18px;

  border: 1.5px solid var(--border);

  border-radius: 5px;

  background: var(--bg-card);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

}



.checkbox-wrap input:checked~.checkmark {

  background: var(--sapphire);

  border-color: var(--sapphire);

}



.checkbox-wrap input:checked~.checkmark::after {

  content: '✓';

  font-size: 0.7rem;

  color: var(--black);

  font-weight: 700;

}



.checkbox-label {

  font-size: 0.85rem;

  color: var(--text-muted);

}



/* Auth submit button */

.btn-auth {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 14px 24px;

  font-size: 0.95rem;

  margin-top: 4px;

}



/* Password Strength Indicator */

.password-strength {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 8px;

}



.strength-bars {

  display: flex;

  gap: 4px;

}



.strength-bars .bar {

  width: 36px;

  height: 4px;

  border-radius: 2px;

  background: var(--border);

  transition: background var(--transition);

}



.strength-bars .bar.weak {

  background: #e74c3c;

}



.strength-bars .bar.fair {

  background: #f39c12;

}



.strength-bars .bar.good {

  background: #2ecc71;

}



.strength-bars .bar.strong {

  background: #27ae60;

}



.strength-label {

  font-size: 0.72rem;

  color: var(--text-muted);

  white-space: nowrap;

}



/* Login success state */

.auth-form-success {

  display: none;

  text-align: center;

  padding: 32px 20px;

  animation: fadeIn 0.4s ease;

}



.auth-form-success.show {

  display: block;

}



.auth-form-success .success-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.12);

  border: 1px solid var(--sapphire);

  color: var(--sapphire);

  font-size: 1.8rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 16px;

  animation: pulsateGold 1.6s ease-in-out infinite;

}



@keyframes pulsateGold {



  0%,

  100% {

    box-shadow: 0 0 0 0 var(--sapphire-glow);

  }



  50% {

    box-shadow: 0 0 0 12px transparent;

  }

}



.auth-form-success h3 {

  font-family: var(--font-display);

  font-size: 1.8rem;

  font-weight: 300;

  color: var(--text);

  margin-bottom: 8px;

}



.auth-form-success p {

  color: var(--text-muted);

  font-size: 0.9rem;

}



/* Footer note */

.auth-footer-note {

  margin-top: 20px;

  font-size: 0.74rem;

  color: var(--text-muted);

  text-align: center;

  line-height: 1.6;

}



/* ── Forgot Password Panel ── */

.forgot-panel {

  display: none;

  animation: slideUp 0.35s ease;

}



.forgot-panel.show {

  display: block;

}



.btn-back {

  font-size: 0.82rem;

  color: var(--text-muted);

  cursor: pointer;

  background: none;

  border: none;

  font-family: var(--font-body);

  padding: 0;

  transition: color var(--transition);

  margin-bottom: 4px;

}



.btn-back:hover {

  color: var(--sapphire);

}



.reset-success {

  display: none;

  align-items: center;

  gap: 10px;

  padding: 14px 18px;

  background: rgba(74, 154, 74, 0.1);

  border: 1px solid rgba(74, 154, 74, 0.3);

  border-radius: var(--radius);

  color: #4a9a4a;

  font-size: 0.88rem;

  margin-top: 14px;

  animation: fadeIn 0.4s ease;

}



.reset-success.show {

  display: flex;

}



.reset-check {

  font-size: 1.1rem;

}



/* ── Signup Steps ── */

.signup-steps {

  display: flex;

  align-items: center;

  gap: 0;

  margin-bottom: 28px;

}



.signup-step {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.78rem;

  color: var(--text-muted);

  font-weight: 500;

  transition: color var(--transition);

}



.signup-step.active {

  color: var(--sapphire);

}



.signup-step.done {

  color: var(--text-muted);

}



.step-dot {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  border: 1.5px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  font-weight: 600;

  background: var(--bg-card);

  transition: all var(--transition);

  flex-shrink: 0;

}



.signup-step.active .step-dot {

  border-color: var(--sapphire);

  background: var(--sapphire);

  color: var(--black);

}



.signup-step.done .step-dot {

  border-color: var(--sapphire);

  background: transparent;

  color: var(--sapphire);

}



.signup-step.done .step-dot::after {

  content: '✓';

  font-size: 0.75rem;

}



.step-line {

  flex: 1;

  height: 1px;

  background: var(--border);

  margin: 0 8px;

  transition: background var(--transition);

}



.step-line.done {

  background: var(--sapphire);

}



/* Auth form row */

.auth-form-row {

  grid-template-columns: 1fr 1fr;

}



/* Step 2 — Preferences */

.pref-intro {

  font-size: 0.88rem;

  color: var(--text-muted);

  margin-bottom: 4px;

}



.pref-options {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



.pref-option {

  cursor: pointer;

}



.pref-option input {

  display: none;

}



.pref-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 6px;

  padding: 16px 10px;

  border: 1.5px solid var(--border);

  border-radius: var(--radius);

  background: var(--bg-card);

  transition: all var(--transition);

  cursor: pointer;

}



.pref-card:hover {

  border-color: var(--sapphire);

}



.pref-option input:checked+.pref-card {

  border-color: var(--sapphire);

  background: rgba(212, 175, 55, 0.08);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

}



.pref-icon {

  font-size: 1.4rem;

  display: block;

}



.pref-card strong {

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text);

  display: block;

}



.pref-card small {

  font-size: 0.72rem;

  color: var(--text-muted);

  display: block;

  line-height: 1.3;

}



/* Interest Tags */

.interest-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.interest-tag {

  cursor: pointer;

}



.interest-tag input {

  display: none;

}



.interest-tag span {

  display: block;

  padding: 7px 14px;

  border: 1px solid var(--border);

  border-radius: 24px;

  font-size: 0.8rem;

  color: var(--text-muted);

  background: var(--bg-card);

  transition: all var(--transition);

  cursor: pointer;

}



.interest-tag input:checked+span {

  background: var(--sapphire);

  border-color: var(--sapphire);

  color: var(--black);

  font-weight: 600;

}



.interest-tag span:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.newsletter-check {

  margin-top: 4px;

}



/* Auth btn row (back + submit) */

.auth-btn-row {

  display: flex;

  gap: 12px;

  align-items: center;

  margin-top: 4px;

}



.auth-btn-row .btn-ghost {

  padding: 13px 20px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-size: 0.9rem;

  color: var(--text-muted);

  transition: all var(--transition);

  flex-shrink: 0;

  background: transparent;

  font-family: var(--font-body);

  cursor: pointer;

}



.auth-btn-row .btn-ghost:hover {

  border-color: var(--sapphire);

  color: var(--sapphire);

}



.auth-btn-row .btn-auth {

  flex: 1;

  margin-top: 0;

}



/* Hidden utility */

.hidden {

  display: none !important;

}



/* ── Signup Success Screen ── */

.signup-success {

  text-align: center;

  padding: 40px 20px;

  animation: fadeIn 0.5s ease;

}



.signup-success-gem {

  font-size: 3rem;

  color: var(--sapphire);

  animation: spin-slow 6s linear infinite;

  display: inline-block;

  margin-bottom: 20px;

}



.signup-success-title {

  font-family: var(--font-display);

  font-size: 2.4rem;

  font-weight: 300;

  color: var(--text);

  line-height: 1.15;

  margin-bottom: 14px;

}



.signup-success-title em {

  font-style: italic;

  color: var(--sapphire);

}



.signup-success-sub {

  font-size: 0.9rem;

  color: var(--text-muted);

  line-height: 1.7;

  max-width: 320px;

  margin: 0 auto 28px;

}



.signup-success-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: center;

}



.signup-success-actions .btn-primary {

  width: 100%;

  max-width: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 14px 24px;

}



.signup-success-actions .btn-ghost {

  font-size: 0.88rem;

  color: var(--text-muted);

  transition: color var(--transition);

  background: none;

  border: none;

  cursor: pointer;

  font-family: var(--font-body);

  padding: 8px;

}



.signup-success-actions .btn-ghost:hover {

  color: var(--sapphire);

}



/* ── Signup panel layout tweak (deco on right) ── */

.auth-main--signup {

  direction: ltr;

}



.auth-panel--form-left {

  order: 1;

}



.auth-panel--deco-right {

  order: 2;

}



/* ── Animations ── */

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(16px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ── RESPONSIVE — Tablet (768px) ── */

@media (max-width: 1024px) {

  .auth-panel--left {

    padding: 48px 36px;

  }



  .auth-panel-title {

    font-size: 2.2rem;

  }



  .auth-panel--right {

    padding: 40px 24px;

  }

}



@media (max-width: 768px) {

  .auth-main {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

  }



  /* Stack panels vertically on mobile */

  .auth-panel--left {

    min-height: auto;

    padding: 40px 28px;

    order: 2;

  }



  .auth-panel--right {

    order: 1;

    padding: 32px 20px;

    align-items: flex-start;

  }



  /* Signup layout on mobile */

  .auth-panel--form-left {

    order: 1;

  }



  .auth-panel--deco-right {

    order: 2;

  }



  .auth-panel-title {

    font-size: 1.9rem;

  }



  .auth-panel-sub {

    display: none;

  }



  .auth-panel-stats {

    padding: 14px 16px;

    gap: 12px;

  }



  .auth-stat strong {

    font-size: 1.2rem;

  }



  /* Horizontal gems layout condensed */

  .gem-3 {

    font-size: 3rem;

  }



  .gem-1 {

    font-size: 2.5rem;

  }



  .auth-form-wrap {

    max-width: 100%;

  }



  .auth-social {

    grid-template-columns: 1fr;

  }



  .btn-social {

    justify-content: flex-start;

    padding: 12px 16px;

  }



  /* Step form row becomes single col */

  .form-row.auth-form-row {

    grid-template-columns: 1fr;

  }



  .pref-options {

    grid-template-columns: 1fr;

    gap: 8px;

  }



  .pref-card {

    flex-direction: row;

    text-align: left;

    padding: 12px 16px;

    gap: 12px;

  }



  .pref-icon {

    font-size: 1.2rem;

  }



  .auth-btn-row {

    flex-direction: column-reverse;

  }



  .auth-btn-row .btn-ghost,

  .auth-btn-row .btn-auth {

    width: 100%;

    text-align: center;

  }



  .auth-title {

    font-size: 1.8rem;

  }



  .signup-steps span {

    display: none;

  }



  .step-line {

    margin: 0 4px;

  }



  .auth-benefits {

    gap: 10px;

  }



  /* Compact panel on mobile */

  .auth-panel--left .auth-panel-content {

    max-width: 100%;

  }

}



@media (max-width: 480px) {

  .auth-main {

    padding-top: 76px;

  }



  .auth-panel--left {

    padding: 32px 20px;

  }



  .auth-panel--right {

    padding: 24px 16px;

  }



  .auth-panel-stats {

    display: none;

  }



  .auth-panel-title {

    font-size: 1.6rem;

  }



  .auth-logo {

    font-size: 1.2rem;

    margin-bottom: 20px;

  }



  .auth-title {

    font-size: 1.6rem;

  }



  .interest-tags {

    gap: 6px;

  }



  .interest-tag span {

    padding: 6px 12px;

    font-size: 0.76rem;

  }



  .signup-success-title {

    font-size: 1.9rem;

  }



  .signup-success-actions .btn-primary {

    max-width: 100%;

  }



  .auth-footer-note {

    font-size: 0.7rem;

  }

}





/* ============================================================

   AUTH PAGES — Login & Signup

   login.html / signup.html

   ============================================================ */



/* ── Auth Page Base ── */

.auth-page {

  min-height: 100vh;

  overflow-x: hidden;

}



/* ── Auth Main Layout ── */

.auth-main {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 100vh;

  padding-top: 76px;

  /* header height */

}



/* ── LEFT PANEL — Decorative ── */

.auth-panel {

  position: sticky;

  top: 76px;

  height: calc(100vh - 76px);

  background: linear-gradient(145deg, var(--sapphire-dark) 0%, #8B6914 40%, var(--text-dark) 100%);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



[data-theme="dark"] .auth-panel {

  background: linear-gradient(145deg, #2A1F08 0%, #1C1510 40%, #0C0B09 100%);

}



.auth-panel-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse at 20% 80%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),

    radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.12) 0%, transparent 50%);

  pointer-events: none;

}



.auth-panel-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



.auth-panel-content {

  position: relative;

  z-index: 2;

  padding: 48px 40px;

  width: 100%;

  max-width: 440px;

  display: flex;

  flex-direction: column;

  gap: 36px;

}



/* Panel Logo */

.auth-panel-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--platinum);

}



.auth-panel-logo em {

  font-style: italic;

  color: var(--sapphire-light);

}



.auth-panel-logo .logo-icon {

  color: var(--sapphire-light);

  font-size: 1.2rem;

}



/* Auth Quote */

.auth-quote {

  border-left: 2px solid var(--sapphire);

  padding-left: 20px;

}



.auth-quote p {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 300;

  color: var(--platinum);

  line-height: 1.55;

}



.auth-quote em {

  font-style: italic;

  color: var(--sapphire-light);

}



/* Floating gems animation */

.auth-panel-gems {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}



.gem {

  font-size: 1.2rem;

  color: var(--sapphire);

  opacity: 0.7;

  animation: gem-float var(--dur, 4s) ease-in-out infinite;

  animation-delay: var(--delay, 0s);

}



.gem-1 {

  --dur: 3.5s;

  --delay: 0s;

}



.gem-2 {

  --dur: 4.2s;

  --delay: 0.5s;

  color: var(--sapphire-light);

}



.gem-3 {

  --dur: 3.8s;

  --delay: 1s;

  font-size: 1rem;

}



.gem-4 {

  --dur: 4.5s;

  --delay: 0.3s;

}



.gem-5 {

  --dur: 3.2s;

  --delay: 0.8s;

  font-size: 0.9rem;

}



@keyframes gem-float {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

    opacity: 0.7;

  }



  50% {

    transform: translateY(-8px) rotate(8deg);

    opacity: 1;

  }

}



/* Panel Stats */

.auth-panel-stats {

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 20px 24px;

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

  border: 1px solid rgba(212, 175, 55, 0.2);

  border-radius: var(--radius-lg);

  backdrop-filter: blur(8px);

}



.auth-stat {

  text-align: center;

}



.auth-stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--sapphire-light);

}



.auth-stat span {

  font-size: 0.72rem;

  color: rgba(250, 246, 238, 0.6);

  text-transform: uppercase;

  letter-spacing: 0.06em;

}



.auth-stat-divider {

  width: 1px;

  height: 36px;

  background: rgba(212, 175, 55, 0.3);

}



/* Signup panel perks */

.auth-perks {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.auth-perk {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 14px 16px;

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

  border: 1px solid rgba(212, 175, 55, 0.15);

  border-radius: var(--radius);

  transition: background var(--transition), border-color var(--transition);

}



.auth-perk:hover {

  background: rgba(212, 175, 55, 0.08);

  border-color: rgba(212, 175, 55, 0.3);

}



.auth-perk-icon {

  color: var(--sapphire);

  font-size: 1rem;

  margin-top: 2px;

  flex-shrink: 0;

}



.auth-perk strong {

  display: block;

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--platinum);

  margin-bottom: 2px;

}



.auth-perk p {

  font-size: 0.78rem;

  color: rgba(250, 246, 238, 0.55);

  line-height: 1.4;

  margin: 0;

}



/* ── RIGHT PANEL — Form ── */

.auth-form-panel {

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 48px 32px;

  background: var(--bg);

  min-height: calc(100vh - 76px);

}



.auth-form-wrap {

  width: 100%;

  max-width: 460px;

  display: flex;

  flex-direction: column;

  gap: 24px;

}



/* Form Header */

.auth-form-header {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.auth-eyebrow {

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--sapphire);

  display: flex;

  align-items: center;

  gap: 8px;

}



.auth-eyebrow::before {

  content: '';

  display: inline-block;

  width: 24px;

  height: 1px;

  background: var(--sapphire);

}



.auth-title {

  font-family: var(--font-display);

  font-size: 2.2rem;

  font-weight: 300;

  color: var(--text);

  line-height: 1.2;

}



.auth-title em {

  font-style: italic;

  color: var(--sapphire);

}



.auth-subtitle {

  font-size: 0.9rem;

  color: var(--text-muted);

  line-height: 1.6;

}



/* Social Buttons */

.auth-social {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.btn-social {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 12px 16px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: var(--bg-card);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.82rem;

  font-weight: 500;

  cursor: pointer;

  transition: all var(--transition);

  white-space: nowrap;

}



.btn-social:hover {

  border-color: var(--sapphire);

  background: rgba(212, 175, 55, 0.06);

  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.12);

}



/* Divider */

.auth-divider {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--text-muted);

  font-size: 0.78rem;

}



.auth-divider::before,

.auth-divider::after {

  content: '';

  flex: 1;

  height: 1px;

  background: var(--border);

}



/* Form Fields */

.auth-form {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.auth-form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



.auth-field {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.auth-field label {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--text-muted);

  letter-spacing: 0.04em;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.auth-forgot {

  font-size: 0.78rem;

  font-weight: 500;

  color: var(--sapphire);

  transition: color var(--transition);

}



.auth-forgot:hover {

  color: var(--sapphire-dark);

  text-decoration: underline;

}



.auth-input-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.auth-input-icon {

  position: absolute;

  left: 14px;

  font-size: 0.9rem;

  color: var(--text-muted);

  pointer-events: none;

  z-index: 1;

  line-height: 1;

}



.auth-input-wrap input,

.auth-input-wrap select.auth-select {

  width: 100%;

  padding: 13px 44px 13px 40px;

  border-radius: 10px;

  border: 1.5px solid var(--border);

  background: var(--bg);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 0.93rem;

  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);

  appearance: none;

  -webkit-appearance: none;

}



.auth-input-wrap input:focus,

.auth-input-wrap select.auth-select:focus {

  outline: none;

  border-color: var(--sapphire);

  box-shadow: 0 0 0 3px var(--sapphire-glow);

  background: var(--bg-card);

}



.auth-input-wrap input.error,

.auth-input-wrap select.error {

  border-color: #c0392b;

  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);

}



.auth-input-wrap input.success {

  border-color: #4a9a4a;

  box-shadow: 0 0 0 3px rgba(74, 154, 74, 0.12);

}



.auth-input-wrap select.auth-select {

  padding-right: 40px;

  cursor: pointer;

}



.auth-eye-toggle {

  position: absolute;

  right: 12px;

  background: none;

  border: none;

  padding: 4px;

  cursor: pointer;

  color: var(--text-muted);

  font-size: 0.95rem;

  line-height: 1;

  transition: color var(--transition);

}



.auth-eye-toggle:hover {

  color: var(--sapphire);

}



.auth-field-error {

  font-size: 0.75rem;

  color: #c0392b;

  min-height: 14px;

  display: block;

}



/* Password Strength */

.password-strength {

  display: flex;

  align-items: center;

  gap: 10px;

  opacity: 0;

  transition: opacity var(--transition);

}



.password-strength.visible {

  opacity: 1;

}



.strength-track {

  flex: 1;

  height: 4px;

  background: var(--border);

  border-radius: 2px;

  overflow: hidden;

}



.strength-fill {

  height: 100%;

  width: 0%;

  border-radius: 2px;

  transition: width 0.4s ease, background 0.4s ease;

}



.strength-label {

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  min-width: 50px;

  text-align: right;

}



/* Remember / Checkbox */

.auth-remember {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.auth-checkbox-label {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  font-size: 0.82rem;

  color: var(--text-muted);

  cursor: pointer;

  line-height: 1.4;

}



.auth-checkbox-label input[type="checkbox"] {

  display: none;

}



.auth-checkbox-custom {

  width: 18px;

  height: 18px;

  border: 1.5px solid var(--border);

  border-radius: 4px;

  background: var(--bg);

  flex-shrink: 0;

  margin-top: 1px;

  position: relative;

  transition: all var(--transition);

}



.auth-checkbox-label input:checked+.auth-checkbox-custom {

  background: var(--sapphire);

  border-color: var(--sapphire);

}



.auth-checkbox-label input:checked+.auth-checkbox-custom::after {

  content: '✓';

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.65rem;

  color: var(--black);

  font-weight: 700;

}



.auth-link {

  color: var(--sapphire);

  transition: color var(--transition);

}



.auth-link:hover {

  color: var(--sapphire-dark);

  text-decoration: underline;

}



/* Submit Button */

.btn-auth-submit {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 15px 28px;

  background: var(--sapphire);

  color: var(--black);

  font-family: var(--font-body);

  font-size: 0.95rem;

  font-weight: 600;

  border: none;

  border-radius: 10px;

  cursor: pointer;

  letter-spacing: 0.04em;

  transition: all var(--transition);

  position: relative;

  overflow: hidden;

}



.btn-auth-submit::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);

  transform: translateX(-100%);

  transition: transform 0.5s ease;

}



.btn-auth-submit:hover::before {

  transform: translateX(100%);

}



.btn-auth-submit:hover {

  background: var(--sapphire-dark);

  box-shadow: 0 4px 20px var(--sapphire-glow);

  transform: translateY(-1px);

}



.btn-auth-submit:active {

  transform: translateY(0);

}



.btn-auth-arrow {

  font-size: 1rem;

  transition: transform var(--transition);

}



.btn-auth-submit:hover .btn-auth-arrow {

  transform: translateX(4px);

}



/* Success Message */

.auth-success {

  text-align: center;

  padding: 32px 24px;

  background: rgba(212, 175, 55, 0.06);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  animation: auth-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;

}



@keyframes auth-success-pop {

  from {

    opacity: 0;

    transform: scale(0.9);

  }



  to {

    opacity: 1;

    transform: scale(1);

  }

}



.auth-success-icon {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--sapphire), var(--sapphire-light));

  color: var(--black);

  font-size: 1.3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 14px;

  animation: icon-spin 1s ease-out;

}



@keyframes icon-spin {

  from {

    transform: rotate(-180deg) scale(0);

  }



  to {

    transform: rotate(0) scale(1);

  }

}



.auth-success h3 {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 6px;

}



.auth-success p {

  font-size: 0.88rem;

  color: var(--text-muted);

}



/* Switch Link */

.auth-switch {

  text-align: center;

  font-size: 0.85rem;

  color: var(--text-muted);

}



.auth-switch-link {

  color: var(--sapphire);

  font-weight: 600;

  transition: color var(--transition);

}



.auth-switch-link:hover {

  color: var(--sapphire-dark);

  text-decoration: underline;

}



/* ── RESPONSIVE — Tablet (≤900px) ── */

@media (max-width: 900px) {

  .auth-main {

    grid-template-columns: 1fr;

  }



  .auth-panel {

    position: relative;

    top: 0;

    height: auto;

    min-height: 280px;

    padding: 40px 24px;

  }



  .auth-panel-content {

    padding: 0;

    gap: 20px;

    max-width: 100%;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

  }



  .auth-panel-logo {

    display: none;

  }



  .auth-quote {

    flex: 1 1 240px;

  }



  .auth-quote p {

    font-size: 1.2rem;

  }



  .auth-panel-gems {

    display: none;

  }



  .auth-panel-stats {

    flex: 1 1 auto;

    justify-content: center;

    gap: 16px;

  }



  .auth-perks {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    flex: 1 1 100%;

  }



  .auth-form-panel {

    padding: 36px 24px;

  }



  .auth-form-wrap {

    max-width: 540px;

  }

}



/* ── RESPONSIVE — Mobile (≤600px) ── */

@media (max-width: 600px) {

  .auth-main {

    padding-top: 76px;

  }



  .auth-panel {

    min-height: 200px;

    padding: 28px 20px;

  }



  .auth-panel-content {

    flex-direction: column;

    gap: 14px;

    align-items: flex-start;

  }



  .auth-quote p {

    font-size: 1.05rem;

  }



  .auth-panel-stats {

    width: 100%;

    padding: 14px 16px;

    gap: 12px;

  }



  .auth-stat strong {

    font-size: 1.15rem;

  }



  .auth-perks {

    grid-template-columns: 1fr;

  }



  .auth-form-panel {

    padding: 28px 20px;

  }



  .auth-title {

    font-size: 1.7rem;

  }



  .auth-social {

    grid-template-columns: 1fr;

  }



  .auth-form-row {

    grid-template-columns: 1fr;

  }



  .auth-form-wrap {

    gap: 18px;

  }

}



/* ── RESPONSIVE — Small mobile (≤380px) ── */

@media (max-width: 380px) {

  .auth-title {

    font-size: 1.5rem;

  }



  .btn-social {

    font-size: 0.78rem;

    padding: 10px 12px;

  }

}



/* ═══════════════════════════════════════

   ABOUT US — SHORT SECTIONS

   (index.html & index2.html)

═══════════════════════════════════════ */



/* ── index.html: Image + Text Split ── */

.about-short-section {

  background: var(--bg);

}



.about-short-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;

}



.about-short-img {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

}



.about-short-img img {

  width: 100%;

  height: 480px;

  object-fit: cover;

  display: block;

  transition: transform 0.6s ease;

}



.about-short-img:hover img {

  transform: scale(1.04);

}



.about-short-badge {

  position: absolute;

  bottom: 28px;

  right: -16px;

  background: var(--sapphire);

  color: var(--white);

  border-radius: var(--radius);

  padding: 16px 24px;

  text-align: center;

  box-shadow: 0 8px 32px rgba(0,0,0,0.2);

}



.about-short-badge .badge-num {

  display: block;

  font-family: var(--font-display);

  font-size: 2rem;

  font-weight: 700;

  line-height: 1;

}



.about-short-badge .badge-label {

  display: block;

  font-size: 0.72rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  opacity: 0.85;

  margin-top: 4px;

}



.about-short-para {

  font-size: 1rem;

  color: var(--text-muted);

  line-height: 1.8;

  margin-bottom: 16px;

}



.about-short-stats {

  display: flex;

  gap: 32px;

  margin: 32px 0;

  padding: 24px 0;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

}



.about-short-stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.8rem;

  font-weight: 700;

  color: var(--sapphire);

}



.about-short-stat span {

  font-size: 0.78rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* ── index2.html: Centered Banner + Cards ── */

.about-banner-section {

  background: var(--bg-2);

}



.about-banner-inner {

  text-align: center;

}



.about-banner-top {

  max-width: 680px;

  margin: 0 auto 56px;

}



.about-banner-sub {

  font-size: 1.05rem;

  color: var(--text-muted);

  line-height: 1.8;

  margin-top: 16px;

}



.about-banner-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  text-align: left;

}



.about-banner-card {

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 0;

  box-shadow: var(--shadow);

  overflow: hidden;

  transition: transform var(--transition), box-shadow var(--transition);

}



.about-banner-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

}



.abc-card-img {

  width: 100%;

  height: 200px;

  overflow: hidden;

}



.abc-card-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  transition: transform 0.5s ease;

}



.about-banner-card:hover .abc-card-img img {

  transform: scale(1.06);

}



.abc-icon {

  width: 52px;

  height: 52px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));

  border: 1px solid rgba(212, 175, 55, 0.25);

  color: var(--sapphire);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 24px 28px 16px;

}



.about-banner-card h4 {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 10px;

  padding: 0 28px;

}



.about-banner-card p {

  font-size: 0.92rem;

  color: var(--text-muted);

  line-height: 1.7;

  padding: 0 28px 28px;

}



/* ── Responsive ── */

@media (max-width: 900px) {

  .about-short-layout {

    grid-template-columns: 1fr;

    gap: 48px;

  }



  .about-short-badge {

    right: 16px;

  }



  .about-banner-cards {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 600px) {

  .about-short-img img {

    height: 300px;

  }



  .about-short-stats {

    gap: 16px;

  }



  .about-banner-cards {

    grid-template-columns: 1fr;

  }

}



/* ── RESPONSIVE — Mobile Menu Additions ── */

.mobile-only-link {

  display: none;

}



@media (max-width: 1024px) {

  .mobile-only-link {

    display: block;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid var(--border);

  }

  .mobile-only-link .nav-link {

    color: var(--sapphire) !important;

    font-weight: 600;

  }

}



/* ══════════════════════════════════════════════════════════════
   ADVANCED TECHNIQUES PAGE — advanced-techniques.css
   ══════════════════════════════════════════════════════════════ */

/* ── Page Hero ── */
.adv-page-hero {
  min-height: 68vh;
}

.adv-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.adv-hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--sapphire);
  border-radius: 50%;
  opacity: 0;
  animation: adv-particle-float var(--dur, 9s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes adv-particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  15%  { opacity: 0.7; transform: translateY(-30px) scale(1); }
  85%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-260px) scale(0.4); }
}

/* Hero badge */
.adv-hero-badge {
  position: absolute;
  bottom: 36px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 9, 6, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 50px;
  padding: 12px 20px;
  color: var(--platinum);
  z-index: 2;
}

.adv-badge-icon {
  color: var(--sapphire);
  display: flex;
  align-items: center;
}

.adv-hero-badge strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #F0EAD6;
  line-height: 1.2;
}

.adv-hero-badge span {
  font-size: 0.74rem;
  color: rgba(240, 234, 214, 0.6);
}

/* Filter pills in hero */
.adv-pill-filter {
  cursor: pointer;
}

.adv-pill-filter.pill-active {
  background: var(--sapphire);
  color: var(--black);
  border-color: var(--sapphire);
}

/* ── BEGINNER TRUST STRIP ── */
.beginner-trust-strip {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.trust-icon {
  color: var(--sapphire);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-item div {
  display: flex;
  flex-direction: column;
}

.trust-item strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.trust-item span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trust-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .trust-strip-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 16px;
  }
  .trust-divider {
    display: none;
  }
  .trust-item {
    flex: 0 0 45%;
  }
}

@media (max-width: 600px) {
  .trust-item {
    flex: 0 0 100%;
  }
}

/* ── Trust Strip (reuse beginner, override color) ── */
.adv-trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
}

/* ── Intro Section ── */
.adv-intro-section {
  background: var(--bg);
}

.adv-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.adv-intro-para {
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 0.96rem;
  margin-bottom: 14px;
}

.adv-intro-highlights {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.adv-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adv-ih-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sapphire);
  line-height: 1;
}

.adv-ih-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Visual stack */
.adv-visual-stack {
  position: relative;
  height: 500px;
}

.adv-img-main {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.adv-img-overlay-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(10, 9, 6, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sapphire);
  font-size: 0.9rem;
  font-weight: 600;
}

.adv-img-overlay-badge strong {
  color: #F0EAD6;
}

.adv-floating-card {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  animation: adv-card-float 4s ease-in-out infinite;
}

.adv-card-1 {
  top: 40px;
  right: -32px;
  animation-delay: 0s;
}

.adv-card-2 {
  bottom: 100px;
  right: -28px;
  animation-delay: -2s;
}

@keyframes adv-card-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.adv-fc-icon {
  color: var(--sapphire);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.adv-floating-card strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.adv-floating-card span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Prerequisites Section ── */
.adv-prereq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.adv-prereq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative;
}

.adv-prereq-card:hover {
  transform: translateY(-6px);
  border-color: var(--sapphire);
  box-shadow: var(--shadow-lg);
}

.adv-prereq-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid rgba(212, 175, 55, 0.3);
  color: var(--sapphire);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: all var(--transition);
}

.adv-prereq-card:hover .adv-prereq-icon {
  background: var(--sapphire);
  color: var(--black);
  box-shadow: 0 6px 20px var(--sapphire-glow);
}

.adv-prereq-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.adv-prereq-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

.adv-prereq-check {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sapphire);
  background: rgba(212, 175, 55, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

.adv-prereq-recommended {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 20px;
}

.adv-prereq-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sapphire);
  border-radius: var(--radius);
  padding: 18px 24px;
  max-width: 680px;
  margin: 0 auto;
}

.adv-note-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.adv-prereq-note p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.adv-prereq-note a {
  color: var(--sapphire);
  font-weight: 600;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  transition: border-color var(--transition);
}

.adv-prereq-note a:hover {
  border-color: var(--sapphire);
}

/* ── Filter Bar ── */
.adv-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 6px 0;
}

.adv-filter-btn {
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}

.adv-filter-btn:hover {
  border-color: var(--sapphire);
  color: var(--sapphire);
}

.adv-filter-btn.active {
  background: var(--sapphire);
  color: var(--black);
  border-color: var(--sapphire);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}

/* ── Techniques Grid ── */
.adv-techniques-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.adv-tech-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.adv-tech-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(212, 175, 55, 0.4);
}

.adv-tech-card.hidden {
  display: none;
}

/* Image wrap */
.adv-tech-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.adv-tech-img {
  transition: transform 0.55s ease;
}

.adv-tech-card:hover .adv-tech-img {
  transform: scale(1.07);
}

.adv-tech-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sapphire);
  color: var(--black);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

.adv-badge-new {
  background: #4a9a4a;
  color: #fff;
}

.adv-badge-intense {
  background: #a03030;
  color: #fff;
}

/* Hover overlay */
.adv-tech-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.adv-tech-card:hover .adv-tech-overlay {
  opacity: 1;
}

.adv-overlay-btn {
  background: var(--sapphire);
  color: var(--black);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--transition), transform var(--transition);
}

.adv-overlay-btn:hover {
  background: var(--sapphire-light);
  transform: scale(1.04);
}

/* Card body */
.adv-tech-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.adv-tech-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.adv-level-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(160, 48, 48, 0.12);
  color: #a03030;
}

.adv-duration {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
}

.adv-tech-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.adv-tech-body p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

.adv-tech-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0;
}

.adv-tech-features li {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.adv-tech-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.adv-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sapphire);
}

/* ── Schedule level pill ── */
.adv-level-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(160, 48, 48, 0.12);
  color: #a03030;
  padding: 3px 10px;
  border-radius: 20px;
}

.adv-level-master {
  background: rgba(212, 175, 55, 0.12);
  color: var(--sapphire-dark);
}

/* ── Instructors ── */
.adv-instructors-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.adv-instructor-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.adv-instructor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.adv-instructor-avatar {
  min-height: 280px;
  background-size: cover;
  background-position: center top;
}

.adv-av-1 {
  background-image: url('../images/unsplash-dl-1.jpg');
}

.adv-av-2 {
  background-image: url('../images/women-2.jpg');
}

.adv-instructor-info {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adv-instructor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.adv-instructor-info h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.adv-instructor-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sapphire);
  margin-bottom: 4px;
}

.adv-instructor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.adv-badge-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 4px 12px;
}

.adv-instructor-bio {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.adv-instructor-stats {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.adv-inst-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adv-inst-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sapphire);
  line-height: 1;
}

.adv-inst-stat span {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Student Gallery ── */
.adv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 260px 260px;
  gap: 16px;
}

.adv-gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.adv-gallery-large {
  grid-column: span 2;
  grid-row: span 2;
}

.adv-gal-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.adv-gallery-item:hover .adv-gal-img {
  transform: scale(1.07);
}

.adv-gal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,11,9,0.85) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition);
}

.adv-gallery-item:hover .adv-gal-overlay {
  opacity: 1;
}

.adv-gal-overlay h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #F0EAD6;
  margin-bottom: 4px;
}

.adv-gal-overlay span {
  font-size: 0.74rem;
  color: rgba(240, 234, 214, 0.7);
}

/* ── Testimonials ── */
.adv-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.adv-tcard {
  height: 100%;
}

.adv-tcard-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.adv-tcard-inner:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.adv-tcard-featured {
  border-color: var(--sapphire);
  background: linear-gradient(135deg, var(--bg-card), rgba(212, 175, 55, 0.04));
}

.adv-tcard-quote {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--sapphire);
  opacity: 0.4;
  line-height: 1;
}

.adv-tcard-stars {
  color: var(--sapphire);
  font-size: 0.95rem;
  letter-spacing: 3px;
}

.adv-tcard-inner p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.72;
  flex: 1;
}

.adv-tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.adv-tcard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sapphire), var(--sapphire-dark));
  color: var(--black);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.adv-tcard-author strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.adv-tcard-author span {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.adv-featured-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--sapphire);
  color: var(--black);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ══════════════════════════════════════
   ADVANCED TECHNIQUES — RESPONSIVE
══════════════════════════════════════ */

/* ── Tablet: ≤1100px ── */
@media (max-width: 1100px) {
  .adv-techniques-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .adv-instructor-card {
    grid-template-columns: 200px 1fr;
  }

  .adv-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 220px 220px;
  }

  .adv-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ── Tablet: ≤900px ── */
@media (max-width: 900px) {
  .adv-intro-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .adv-visual-stack {
    height: 360px;
  }

  .adv-card-1 {
    right: 16px;
    top: 20px;
  }

  .adv-card-2 {
    right: 16px;
    bottom: 60px;
  }

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

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

  .adv-instructor-card {
    grid-template-columns: 220px 1fr;
  }

  .adv-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 200px);
  }

  .adv-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .adv-hero-badge {
    bottom: 20px;
    right: 20px;
  }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
  .adv-page-hero {
    min-height: 55vh;
  }

  .adv-techniques-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .adv-prereq-grid {
    grid-template-columns: 1fr 1fr;
  }

  .adv-instructor-card {
    grid-template-columns: 1fr;
  }

  .adv-instructor-avatar {
    min-height: 240px;
  }

  .adv-instructor-info {
    padding: 24px;
  }

  .adv-instructor-badges {
    flex-direction: row;
  }

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

  .adv-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 180px);
  }

  .adv-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ── Mobile: ≤600px ── */
@media (max-width: 600px) {
  .adv-intro-layout {
    gap: 32px;
  }

  .adv-visual-stack {
    height: 280px;
  }

  .adv-intro-highlights {
    gap: 20px;
  }

  .adv-ih-num {
    font-size: 1.8rem;
  }

  .adv-prereq-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .adv-prereq-card {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .adv-prereq-icon {
    margin: 0;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
  }

  .adv-prereq-card p {
    margin-bottom: 8px;
  }

  .adv-filter-bar {
    gap: 8px;
    margin-bottom: 28px;
  }

  .adv-filter-btn {
    padding: 7px 14px;
    font-size: 0.78rem;
  }

  .adv-techniques-grid {
    max-width: 100%;
  }

  .adv-instructor-stats {
    gap: 16px;
  }

  .adv-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 160px);
    gap: 10px;
  }

  .adv-gal-overlay {
    opacity: 1;
  }

  .adv-hero-badge {
    display: none;
  }

  .adv-prereq-note {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ── Mobile: ≤480px ── */
@media (max-width: 480px) {
  .adv-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .adv-gallery-large {
    grid-column: span 1;
    grid-row: span 1;
    height: 240px;
  }

  .adv-gallery-item {
    height: 200px;
  }

  .adv-instructor-info {
    padding: 18px;
    gap: 12px;
  }

  .adv-instructor-info h3 {
    font-size: 1.4rem;
  }

  .adv-instructor-header {
    flex-direction: column;
    gap: 10px;
  }
}

/* ── Advanced Gallery Lightbox ── */
.adv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.adv-lightbox.adv-lb-open {
  opacity: 1;
  visibility: visible;
}

.adv-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.88);
  backdrop-filter: blur(6px);
}

.adv-lb-box {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 860px;
  width: calc(100% - 40px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.adv-lightbox.adv-lb-open .adv-lb-box {
  transform: scale(1);
}

.adv-lb-img {
  height: 480px;
  background-size: cover;
  background-position: center;
}

.adv-lb-caption {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--border);
}

.adv-lb-caption h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.adv-lb-caption span {
  font-size: 0.82rem;
  color: var(--sapphire);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.adv-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(12,11,9,0.6);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 2;
}

.adv-lb-close:hover {
  background: var(--sapphire);
  color: var(--black);
  border-color: var(--sapphire);
}

@media (max-width: 600px) {
  .adv-lb-img {
    height: 260px;
  }

  .adv-lb-caption {
    padding: 16px 20px 20px;
  }

  .adv-lb-caption h3 {
    font-size: 1.2rem;
  }
}
/* ============================================================
   404 Page Styles
   ============================================================ */

.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--text);
  text-align: center;
  padding: 4rem 1rem;
}

.error-bg-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.err-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 50%;
  animation: err-pulse-ring 8s infinite alternate ease-in-out;
}

.err-ring-1 { width: 40vw; height: 40vw; animation-delay: 0s; }
.err-ring-2 { width: 60vw; height: 60vw; animation-delay: -2s; }
.err-ring-3 { width: 80vw; height: 80vw; animation-delay: -4s; }

@keyframes err-pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

.error-page .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.error-numeral-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.error-numeral {
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 15rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  opacity: 0.05;
  user-select: none;
}

.error-gem-icon {
  position: absolute;
  font-size: clamp(3rem, 8vw, 5rem);
  animation: err-float-gem 4s ease-in-out infinite;
}

@keyframes err-float-gem {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.error-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sapphire);
}

.error-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin: 0;
}

.error-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--sapphire);
}

.error-desc {
  max-width: 500px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.error-links {
  margin-top: 2rem;
  width: 100%;
}

.error-links-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.error-link-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.err-chip {
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all var(--transition, 0.3s ease);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.err-chip:hover {
  border-color: var(--sapphire);
  background: rgba(212, 175, 55, 0.05);
  transform: translateY(-2px);
  color: var(--sapphire);
}

.error-ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-primary.glow-btn {
  background: var(--sapphire);
  color: var(--black);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition, 0.3s ease);
  text-decoration: none;
}

.btn-primary.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--sapphire-glow, rgba(212, 175, 55, 0.4));
}

.btn-outline-gold {
  border: 1px solid var(--sapphire);
  color: var(--sapphire);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition, 0.3s ease);
  text-decoration: none;
}

.btn-outline-gold:hover {
  background: rgba(212, 175, 55, 0.1);
  transform: translateY(-2px);
}

/* beginner.css */

/* --- HERO EXTRAS --- */
.beginner-page-hero {
  position: relative;
}
.beginner-hero-badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--sapphire);
  color: var(--platinum);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* --- INTRO SECTION --- */
.beginner-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .beginner-intro-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.beginner-intro-highlights {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.intro-highlight {
  display: flex;
  flex-direction: column;
}
.ih-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--sapphire);
  font-weight: 600;
  line-height: 1;
}
.ih-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 8px;
}

/* --- VISUAL STACK --- */
.beginner-visual-stack {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.bv-img-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
}
.bv-badge-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--bg);
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sapphire);
  box-shadow: var(--shadow-sm);
}
.bv-floating-card {
  position: absolute;
  background: var(--bg-card);
  padding: 16px 20px;
  border-radius: var(--radius);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  z-index: 5;
  white-space: nowrap;
}
.bvf-icon {
  color: var(--sapphire);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bv-floating-card div {
  display: flex;
  flex-direction: column;
}
.bv-floating-card strong {
  font-size: 0.95rem;
  color: var(--text);
}
.bv-floating-card span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.bv-card-1 {
  bottom: 40px;
  left: -30px;
  animation: float 5s ease-in-out infinite;
}
.bv-card-2 {
  top: 40px;
  right: -30px;
  animation: float 6s ease-in-out infinite alternate;
}
@media (max-width: 600px) {
  .bv-floating-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: -20px auto 0;
    width: 90%;
    transform: none !important;
    white-space: normal;
    animation: none;
    margin-bottom: 20px;
  }
}

/* --- PROCESS STEPS --- */
.beginner-process-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}
.bp-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.bp-step-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(212, 175, 55, 0.1);
  line-height: 1;
  margin-bottom: -20px;
  font-weight: 700;
}
.bp-step-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: var(--bg-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sapphire);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.bp-step h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: var(--text);
}
.bp-step p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.bp-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--sapphire);
  opacity: 0.5;
  flex-shrink: 0;
  padding-top: 10px;
}
@media (max-width: 900px) {
  .beginner-process-steps {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .bp-step {
    max-width: 400px;
  }
  .bp-connector {
    height: auto;
    padding: 0;
  }
  .bp-connector .connector-diamond {
    transform: rotate(90deg);
  }
}

/* --- PERKS GRID --- */
.beginner-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.bp-perk-card {
  padding: 32px 24px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bp-perk-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.bp-perk-icon {
  margin-bottom: 20px;
  color: var(--sapphire);
  width: 48px;
  height: 48px;
  background: rgba(212, 175, 55, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.bp-perk-card h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--text);
}
.bp-perk-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .beginner-perks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .beginner-perks-grid {
    grid-template-columns: 1fr;
  }
}

/* --- TESTIMONIALS GRID --- */
.beginner-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.btestimonial-card {
  background: var(--bg-card);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.bt-stars {
  color: var(--sapphire);
  font-size: 1.2rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.btestimonial-card p {
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
}
.bt-author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bt-avatar {
  width: 48px;
  height: 48px;
  background: var(--sapphire);
  color: var(--platinum);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.bt-author div {
  display: flex;
  flex-direction: column;
}
.bt-author strong {
  font-size: 0.95rem;
  color: var(--text);
}
.bt-author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .beginner-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .beginner-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Coming Soon Page Styles
   ============================================================ */

.cs-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text);
  overflow: hidden;
  padding: 3rem 1.5rem;
}

.cs-particles, .cs-bg-orb, .cs-grid-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.cs-bg-orb {
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
}

.cs-orb-1 {
  width: 300px;
  height: 300px;
  background: var(--sapphire);
  top: -100px;
  left: -100px;
}

.cs-orb-2 {
  width: 400px;
  height: 400px;
  background: var(--platinum-3);
  bottom: -150px;
  right: -100px;
}

.cs-orb-3 {
  width: 200px;
  height: 200px;
  background: var(--sapphire-light);
  top: 40%;
  right: 20%;
}

.cs-grid-overlay {
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.4;
}

.cs-main {
  position: relative;
  z-index: 1;
  max-width: 600px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cs-gem-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  width: 80px;
  height: 80px;
}

.cs-gem-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--sapphire);
  border-radius: 50%;
  animation: cs-spin 10s linear infinite;
  opacity: 0.5;
}

@keyframes cs-spin {
  100% { transform: rotate(360deg); }
}

.cs-gem {
  font-size: 2rem;
  animation: cs-float 4s ease-in-out infinite;
  display: inline-block;
}

@keyframes cs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cs-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  color: var(--sapphire);
  font-weight: 500;
}

.cs-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 0;
}

.cs-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--sapphire);
}

.cs-desc {
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .br-desktop { display: none; }
}

.cs-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.cs-count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.cs-count-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text);
  font-weight: 400;
}

.cs-count-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-count-sep {
  color: var(--sapphire);
  font-size: 1rem;
  opacity: 0.5;
}

.cs-progress-wrap {
  width: 100%;
  max-width: 400px;
  margin: 1rem 0;
}

.cs-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.cs-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.cs-progress-fill {
  height: 100%;
  width: var(--fill);
  background: var(--sapphire);
  border-radius: 10px;
  transition: width 1s ease-in-out;
}

.cs-notify-wrap {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  padding: 1.5rem;
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-top: 1rem;
}

.cs-notify-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.cs-notify-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cs-email-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition, 0.3s ease);
}

.cs-email-input:focus {
  border-color: var(--sapphire);
}

.cs-submit-btn {
  background: var(--sapphire);
  color: var(--black);
  border: none;
  padding: 0 1.25rem;
  border-radius: var(--radius, 12px);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all var(--transition, 0.3s ease);
}

.cs-submit-btn:hover {
  background: var(--sapphire-dark, #A8861E);
}

.cs-notify-success {
  display: none;
  font-size: 0.875rem;
  color: var(--sapphire);
  margin-bottom: 0.5rem;
}

.cs-notify-privacy {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cs-sneak-peek {
  margin-top: 2rem;
  width: 100%;
}

.cs-sneak-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cs-sneak-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.cs-sneak-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.875rem;
}

.cs-social {
  margin-top: 2rem;
}

.cs-social-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.cs-social .social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.cs-social .social-links a {
  color: var(--text-muted);
  transition: color var(--transition, 0.3s ease);
}

.cs-social .social-links a:hover {
  color: var(--sapphire);
}

.cs-back-link {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color var(--transition, 0.3s ease);
  text-decoration: none;
}

.cs-back-link:hover {
  color: var(--sapphire);
}

/* ============================================================
   FAQ PAGE STYLES — faq.css
   ============================================================ */

.faq-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1C1A16 0%, #2a2010 50%, #1a1509 100%);
  overflow: hidden;
  padding-top: 76px;
}

.faq-hero-bg { position: absolute; inset: 0; pointer-events: none; }

.faq-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}

.faq-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--sapphire), transparent 70%);
  top: -150px; left: -100px;
}

.faq-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,175,55,0.5), transparent 70%);
  bottom: -100px; right: -80px;
}

.faq-hero-content {
  position: relative; z-index: 1;
  text-align: center;
  padding: 60px 24px;
  max-width: 700px;
}

.faq-eyebrow {
  color: var(--sapphire);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 16px;
}

.faq-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300; color: var(--platinum);
  line-height: 1.1; margin-bottom: 20px;
}

.faq-hero-title em { font-style: italic; color: var(--sapphire); }

.faq-hero-sub {
  font-size: 1rem;
  color: rgba(240,234,214,0.65);
  line-height: 1.7; margin-bottom: 36px;
}

/* Search */
.faq-search-wrap { max-width: 520px; margin: 0 auto; }

.faq-search-box {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50px; padding: 0 20px; gap: 12px;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, background 0.3s;
}

.faq-search-box:focus-within {
  border-color: var(--sapphire);
  background: rgba(255,255,255,0.1);
}

.faq-search-icon {
  color: var(--sapphire); opacity: 0.7;
  flex-shrink: 0; display: flex; align-items: center;
}

.faq-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--platinum); padding: 16px 0;
}

.faq-search-input::placeholder { color: rgba(240,234,214,0.4); }

.faq-search-clear {
  background: none; border: none;
  color: rgba(240,234,214,0.45); cursor: pointer;
  font-size: 0.9rem; padding: 4px;
  transition: color 0.3s; display: none;
}

.faq-search-clear.visible { display: block; }
.faq-search-clear:hover { color: var(--sapphire); }

.faq-search-hint {
  font-size: 0.8rem; color: rgba(240,234,214,0.45);
  margin-top: 10px; text-align: center; min-height: 1.2em;
}

/* Category Tabs */
.faq-tabs-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 76px; z-index: 100;
}

.faq-tabs {
  display: flex; gap: 4px;
  overflow-x: auto; padding: 16px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}

.faq-tabs::-webkit-scrollbar { display: none; }

.faq-tab {
  flex-shrink: 0;
  padding: 8px 20px; border-radius: 24px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-family: var(--font-body); font-size: 0.85rem;
  font-weight: 500; cursor: pointer;
  transition: all 0.3s; white-space: nowrap;
}

.faq-tab:hover { border-color: var(--sapphire); color: var(--sapphire); }

.faq-tab.active {
  background: var(--sapphire); color: var(--black);
  border-color: var(--sapphire); font-weight: 600;
}

/* Main Layout */
.faq-main { background: var(--bg); }

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px; align-items: start;
}

.faq-accordion-col { min-width: 0; }

.faq-result-count {
  font-size: 0.85rem; color: var(--text-muted); margin-bottom: 32px;
}

.faq-result-count strong { color: var(--sapphire); font-weight: 700; }

/* FAQ Groups */
.faq-group { margin-bottom: 40px; }

.faq-group-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.faq-group-icon { font-size: 1.4rem; }

.faq-group-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; color: var(--text);
}

/* FAQ Items */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 8px; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.faq-item:hover { border-color: rgba(212,175,55,0.4); }

.faq-item.open {
  border-color: var(--sapphire);
  box-shadow: 0 4px 20px rgba(212,175,55,0.08);
}

.faq-question {
  width: 100%; display: flex;
  justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 24px; text-align: left;
  font-family: var(--font-body); font-size: 0.97rem;
  font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer;
  transition: color 0.3s;
}

.faq-question:hover { color: var(--sapphire); }

.faq-chevron {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(212,175,55,0.08); color: var(--sapphire);
  transition: transform 0.35s ease, background 0.3s;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--sapphire); color: var(--black);
}

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 24px;
}

.faq-item.open .faq-answer {
  max-height: 600px; padding: 0 24px 22px;
}

.faq-answer p {
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.75;
}

/* No Results */
.faq-no-results { text-align: center; padding: 60px 20px; }
.no-results-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; }
.faq-no-results h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }
.faq-no-results p { color: var(--text-muted); font-size: 0.95rem; }
.faq-reset-link { background: none; border: none; color: var(--sapphire); cursor: pointer; font-size: inherit; font-family: inherit; text-decoration: underline; }

/* Sidebar */
.faq-sidebar {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 140px;
}

.faq-sidebar-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px;
  box-shadow: 0 4px 24px rgba(28,26,22,0.08);
}

.faq-sidebar-title {
  font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 600; color: var(--text); margin-bottom: 16px;
}

.faq-quick-links { display: flex; flex-direction: column; gap: 8px; }

.faq-quick-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 0.88rem; font-weight: 500; color: var(--text-muted);
  background: var(--bg); border: 1px solid transparent;
  transition: all 0.3s; cursor: pointer;
}

.faq-quick-link:hover {
  color: var(--sapphire); border-color: var(--sapphire);
  background: rgba(212,175,55,0.06);
}

/* Contact card (dark) */
.faq-contact-card {
  background: linear-gradient(135deg, #1C1A16, #2a2010);
  border-color: rgba(212,175,55,0.25); text-align: center;
}

.faq-contact-gem { font-size: 2rem; color: var(--sapphire); margin-bottom: 12px; }
.faq-contact-card .faq-sidebar-title { color: #FAF6EE; }

.faq-contact-text {
  font-size: 0.85rem; color: rgba(240,234,214,0.6);
  line-height: 1.65; margin-bottom: 20px;
}

.faq-contact-btn {
  width: 100%; justify-content: center;
  margin-bottom: 16px; font-size: 0.9rem; padding: 12px 24px;
}

.faq-contact-meta {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.78rem; color: rgba(240,234,214,0.45);
}

/* Workshop links in sidebar */
.faq-workshop-links { display: flex; flex-direction: column; gap: 10px; }

.faq-workshop-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 8px;
  font-size: 0.85rem; color: var(--text-muted);
  background: var(--bg); border: 1px solid transparent;
  transition: all 0.3s;
}

.faq-workshop-link:hover { border-color: var(--sapphire); color: var(--text); }
.faq-workshop-link span:last-child { color: var(--sapphire); font-size: 0.75rem; font-weight: 600; }

/* Responsive */
@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { display: none; }
}

@media (max-width: 768px) {
  .faq-tabs-section { position: relative; top: 0; }
}

@media (max-width: 600px) {
  .faq-hero { min-height: auto; }
  .faq-question { padding: 16px 18px; font-size: 0.9rem; }
  .faq-item.open .faq-answer { padding: 0 18px 18px; }
}